/* Schriften lokal ausgeliefert (SIL Open Font License, siehe fonts/LICENSE-*) */
@font-face{font-family:"Gluten";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/gluten-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}

/* Grundlage: randlos bis an die Kanten, Inhalt bleibt frei von Notch und Home-Indikator */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: ein Grundriss auf Schneepapier als Spielfeld links, Hinweiskarten je Figur rechts (mobil gestapelt). */
:root{
  --bg:#EDF2F3; --paper:#FAFCFC; --ink:#1B2A2D; --muted:#55686C; --line:#C4D2D4; --wall:#1B2A2D;
  --red:#C21F2B; --red-soft:#F6DADC; --fir:#2E6A4E; --gold:#D4A12A; --wood:#9A6B3F; --wood-d:#6B4628;
  --brick:#A85A44; --soot:#2A2421; --flame:#F2A23A; --seat:#557BA6; --seat-l:#7FA0C4; --linen:#FFFFFF; --blanket:#6E98C2;
  --rug1:#C9A3C9; --rug2:#E2CBE2; --skin:#F1C7A3; --beard:#F4F4F2; --hatch:rgba(27,42,45,.10); --ok:#2E7D4F;
  --r0:#CDE5D2; --r1:#CFDDF0; --r2:#EEDDB8; --r3:#E0D1EE; --r4:#F0CEC8; --r5:#C6E7E1; --r6:#E7E3B8; --r7:#D8D8EA;
  --p0:#2F6CD6; --p1:#D9700E; --p2:#7A48D6; --p3:#0E8A7B; --p4:#C02F87;
  --display:"Gluten","Comic Sans MS","Trebuchet MS",cursive;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E161A; --paper:#152129; --ink:#E3EBEC; --muted:#93A5A9; --line:#2A3B43; --wall:#CBD9DB;
  --red:#E5484D; --red-soft:#3A1F23; --fir:#5BAE84; --gold:#E6B94A; --wood:#B4824F; --wood-d:#8A5F38;
  --brick:#B9694F; --soot:#120F0E; --flame:#F5B04E; --seat:#6E93BE; --seat-l:#93B1D3; --linen:#E9EEF1; --blanket:#5F89B3;
  --rug1:#8E6A8E; --rug2:#6C506C; --skin:#E8BC98; --beard:#ECECEA; --hatch:rgba(227,235,236,.10); --ok:#5BC48A;
  --r0:#224031; --r1:#22324A; --r2:#47391F; --r3:#392B47; --r4:#4A2C2C; --r5:#1F433F; --r6:#403E20; --r7:#303045;
  --p0:#5C8EF0; --p1:#F0903A; --p2:#9B74EE; --p3:#2DB3A2; --p4:#E25BAA;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E161A; --paper:#152129; --ink:#E3EBEC; --muted:#93A5A9; --line:#2A3B43; --wall:#CBD9DB;
  --red:#E5484D; --red-soft:#3A1F23; --fir:#5BAE84; --gold:#E6B94A; --wood:#B4824F; --wood-d:#8A5F38;
  --brick:#B9694F; --soot:#120F0E; --flame:#F5B04E; --seat:#6E93BE; --seat-l:#93B1D3; --linen:#E9EEF1; --blanket:#5F89B3;
  --rug1:#8E6A8E; --rug2:#6C506C; --skin:#E8BC98; --beard:#ECECEA; --hatch:rgba(227,235,236,.10); --ok:#5BC48A;
  --r0:#224031; --r1:#22324A; --r2:#47391F; --r3:#392B47; --r4:#4A2C2C; --r5:#1F433F; --r6:#403E20; --r7:#303045;
  --p0:#5C8EF0; --p1:#F0903A; --p2:#9B74EE; --p3:#2DB3A2; --p4:#E25BAA;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.app{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--p0);outline-offset:2px}

/* Kopf */
.top{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center}
.top .mark{width:64px;height:76px;object-fit:contain;grid-row:span 2}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,2.8rem);line-height:1;margin:0;letter-spacing:.01em;text-wrap:balance}
h1 .h1-red{color:var(--red)}
.meta{margin:0;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.lede{grid-column:1/-1;margin:10px 0 0;max-width:62ch}
.lede b{font-weight:700}
.controls{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.seg{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.92rem;white-space:nowrap}
.seg button small{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:4px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button[aria-pressed="true"] small{color:inherit;opacity:.75}
.btn{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:.92rem}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.quiet{font-weight:400;color:var(--muted)}

/* Spielfeld */
.layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:820px){.layout{grid-template-columns:minmax(0,1fr)}}
.play{display:flex;flex-direction:column;gap:14px;min-width:0}
.boardwrap{width:min(100%,560px);container-type:inline-size}
.board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));gap:1px;background:var(--line);aspect-ratio:1/1;max-width:100%;
  border-radius:6px;box-shadow:0 0 0 3px var(--wall),0 10px 30px -14px rgba(0,0,0,.35);position:relative}
.rlabels{position:absolute;inset:0;pointer-events:none;z-index:4}
.rlabel{position:absolute;margin:4px 0 0 5px;padding:1px 5px 0;border-radius:4px;font-weight:700;line-height:1.35;font-size:clamp(9px,calc(15cqw / var(--n)),13px);letter-spacing:.02em;color:var(--ink);background:color-mix(in srgb,var(--paper) 85%,transparent);box-shadow:0 1px 0 rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.cell{position:relative;border:0;padding:0;margin:0;min-width:0;min-height:0;width:100%;height:100%;background:var(--rc);cursor:pointer;display:block;overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cell.blocked{cursor:not-allowed}
.cell .walls{position:absolute;inset:0;pointer-events:none}
.cell .obj{position:absolute;width:76%;height:76%;left:12%;top:14%;object-fit:contain;transition:all .18s ease;pointer-events:none;user-select:none}
.cell .obj.rugimg{width:90%;height:90%;left:5%;top:5%}
.cell.has .obj:not(.rugimg){width:38%;height:38%;left:auto;top:auto;right:3%;bottom:3%}
.tok{position:absolute;z-index:2;left:17%;top:17%;width:66%;height:66%;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:calc(26cqw / var(--n));line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 0 0 2px rgba(255,255,255,.35);
  letter-spacing:-.02em;animation:pop .2s ease-out}
.tok-w{background:transparent;box-shadow:none;left:9%;top:9%;width:82%;height:82%}
.tok-w img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.cell.clash .tok{box-shadow:0 0 0 3px var(--red),0 2px 0 rgba(0,0,0,.25)}
.cell.clash .tok-w{box-shadow:none;outline:3px solid var(--red);border-radius:12px}
.cell.hinted .tok::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px dashed var(--gold)}
.xm{position:absolute;inset:16%;z-index:3;pointer-events:none;color:var(--ink)}
.xm::before,.xm::after{content:"";position:absolute;left:50%;top:-6%;width:14%;height:112%;border-radius:99px;background:currentColor;
  box-shadow:0 0 0 2px var(--paper);transform:translateX(-50%) rotate(45deg)}
.xm::after{transform:translateX(-50%) rotate(-45deg)}
.xm.auto{color:var(--muted);opacity:.7}
.xm.auto::before,.xm.auto::after{width:11%}
.cell.flash{animation:flash .9s ease-out 2}
.won .cell.wroom{box-shadow:inset 0 0 0 3px var(--gold)}
.won .tok-w{animation:wiggle 1.2s ease-in-out infinite}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes flash{50%{background:var(--gold)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* Werkzeuge */
.tools{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font-size:.95rem;position:relative}
.chip .mini{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.72rem}
.chip .mini svg{width:30px;height:30px}
.chip .mini img,.card-h .mini img{width:30px;height:32px;object-fit:contain}
.chip .mini.plain{background:transparent;color:var(--muted)}
.chip .mini.plain svg{width:18px;height:18px}
.chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.chip.placed{color:var(--muted)}
.chip.placed::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:-2px}
.status{min-height:1.5em;margin:0;font-weight:700}
.status.err{color:var(--red)}
.status.good{color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:8px}

.win{border-radius:14px;background:var(--paper);border:2px solid var(--gold);padding:16px 18px;display:grid;grid-template-columns:56px 1fr;gap:4px 14px;align-items:center}
.win .winimg{width:56px;height:72px;object-fit:contain;grid-row:span 2}
.win h2{font-family:var(--display);font-size:1.6rem;margin:0;line-height:1.1}
.win p{margin:0}


/* Hinweise */
.clues{display:flex;flex-direction:column;gap:14px;min-width:0}
.clues h2{font-family:var(--display);font-size:1.7rem;margin:0;line-height:1.1}
.cards{display:flex;flex-direction:column;gap:10px}
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px 12px;transition:border-color .15s, box-shadow .15s}
.card.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.card-h{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:4px}
.card-h .mini{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:.7rem}
.card-h .mini svg{width:30px;height:30px}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.card li button{all:unset;display:block;cursor:pointer;padding:5px 6px;border-radius:8px;width:100%;box-sizing:border-box}
.card li button:hover{background:var(--hatch)}
.card li button:focus-visible{outline:3px solid var(--p0)}
.card li.bad button{background:var(--red-soft);box-shadow:inset 0 0 0 1.5px var(--red)}
.card li.done button{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.card .none{color:var(--muted);font-style:italic;padding:5px 6px;margin:0}
.nm{color:var(--c);font-weight:700}
.rm{background:var(--rc);padding:0 5px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.ii{width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.4em;margin-left:3px}
.card.wcard{border-color:var(--red-soft);background:linear-gradient(var(--paper),var(--paper)) padding-box}
.rulebox{background:var(--red-soft);border-radius:10px;padding:8px 10px;margin-top:6px;font-size:.92rem}

details{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px}
summary{cursor:pointer;font-weight:700}
details ol{margin:10px 0 4px;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;max-width:62ch}
details p{margin:8px 0;max-width:62ch}
.namerow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.namerow input{flex:1 1 220px;min-width:0;font:inherit;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}

#snow{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}