:root{color-scheme:dark;background:#0c1415;color:#f3f1e7;font:16px/1.5 system-ui,sans-serif;--accent:#f3cb88;--line:#586655;--panel:#1b2b2a;--muted:#c2c9bd}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% -10%,#374e3e,#10191b 54%,#0c1415)}
[data-game=runenschmiede]{--accent:#ffcf88;--line:#705a56;--panel:#2a252c}
[data-game=spiegel-der-abtei]{--accent:#ffe1a0;--line:#4a627a;--panel:#232c3c}
[data-game=eichenpfad]{--accent:#b5e7a5;--line:#526c56;--panel:#26362d}
[data-game=trommeln-von-eibenfels]{--accent:#edbde3;--line:#785f77;--panel:#2e2a39}
.shell{width:min(calc(100% - 20px),1050px);margin:auto;padding:12px 0 24px}
.toolbar,.tools,.headline{display:flex;justify-content:space-between;gap:8px;align-items:center}
.toolbar{padding-bottom:8px;border-bottom:1px solid var(--line)}.tools{justify-content:start;flex-wrap:wrap}
.brand{color:#f2ead6;font-weight:800;text-decoration:none}.brand span{font-weight:500;color:var(--muted)}
button{background:#283c39;border:1px solid var(--line);border-radius:8px;color:#fcf8ec;min-height:44px;padding:6px 11px;font:750 .85rem system-ui;cursor:pointer}
button:disabled{opacity:.56;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #ffdd9b;outline-offset:2px}
button:active,button[data-held=true]{background:#506858}button[hidden]{display:none}
.headline{margin:10px 0 8px;align-items:end}.kicker{font-size:.67rem;font-weight:900;letter-spacing:.18em;color:var(--accent);margin:0}
h1,h2{font:700 clamp(1.65rem,5.5vw,3.1rem)/1.08 Georgia,serif;color:#fff1cf;margin:3px 0}
#medals{color:var(--accent);font-weight:800;white-space:nowrap}
.cabinet{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 14px 48px #0006}
.hud{display:grid;grid-template-columns:repeat(4,1fr);padding:7px 0;text-align:center;font-variant-numeric:tabular-nums}
.hud div+div{border-left:1px solid var(--line)}.hud small{display:block;color:var(--muted);font-size:.7rem}.hud strong{font-size:.97rem;color:#fff4da}
.screen{position:relative;overflow:hidden;background:#11191d}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}
.overlay{position:absolute;inset:0;display:grid;align-items:end;background:linear-gradient(90deg,#0b171afa,#10191cba 45%,#0b171a20 100%),url("cover.webp") center 43%/cover}
.overlay[hidden]{display:none}.overlay[data-mode=pause]{background:#11191de8}
.brief{max-width:540px;margin:clamp(12px,4vw,39px)}.brief p:not(.kicker){margin:4px 0 10px;text-shadow:0 2px 5px #000}
.primary{background:var(--accent);color:#2b281d;border-color:transparent}.primary:active{color:#fff}
.note{margin:0;padding:8px 12px;min-height:42px;color:#fff2d2;font-size:.89rem}
.controls{display:flex;gap:5px;flex-wrap:wrap;padding:0 7px 8px}.controls button{flex:1;min-height:48px;min-width:44px;touch-action:none;user-select:none}
details{margin:12px 2px;color:var(--muted)}summary{font-weight:800;color:#f3ead6;cursor:pointer}.guide p{margin:8px 0;max-width:75ch}
footer{margin:12px 2px;color:var(--muted);font-size:.8rem}footer a{color:inherit}
dialog{color:#f5efdf;background:#1c2b2a;border:1px solid #84917b;border-radius:14px;width:min(680px,calc(100% - 18px));max-height:85vh;padding:15px}
dialog::backdrop{background:#070d12cf}.chapter h3{font:700 1.24rem Georgia;color:var(--accent);margin:12px 0 4px}
.levels{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:5px}.levels button{padding:4px;min-height:48px}
.levels button small{display:block;white-space:nowrap}.levels button[aria-current=true]{border-color:var(--accent)}
@media(max-width:525px){.shell{width:calc(100% - 12px);padding-top:6px}.brand span{display:none}
  button{font-size:.76rem;padding-inline:7px}.toolbar,.tools{gap:5px}
  .brief{margin:10px 11px}.brief p:not(.kicker){font-size:.8rem;line-height:1.25;margin:4px 0 7px}
  .brief .kicker{font-size:.61rem}.brief button{min-height:44px}
  .controls button{font-size:.75rem;padding-inline:4px}
  [data-game=runenschmiede] canvas{width:158%;margin-left:50%;transform:translateX(-50%)}
  [data-game=spiegel-der-abtei] canvas{width:133%;margin-left:50%;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}