*{box-sizing:border-box}
:root{color-scheme:dark;font:16px/1.45 system-ui,sans-serif;--accent:#74e6b4;--warm:#fbd589;--muted:#adb8c7;--panel:#111c24;--line:#314451;background:#090d14;color:#edf2f6}
body{margin:0;background:radial-gradient(ellipse at 60% -20%,var(--panel),transparent 60%),#090d14}
body[data-game=eisenwacht]{--accent:#ffbe80;--warm:#f4cf8c;--panel:#2c1b24;--line:#56404b}
body[data-game=greifenreiter]{--accent:#9fddff;--warm:#f8df9c;--panel:#1e2140;--line:#454b70}
body[data-game=blockschmiede],body[data-game=kuppelball]{--accent:#bdadff;--panel:#251f3c;--line:#4e4168}
body[data-game=kurvenfieber]{--accent:#ffa785;--panel:#341e34;--line:#64425a}
body[data-game=kristallpfad]{--accent:#92d4ff;--panel:#172b3f;--line:#3f5a70}
body[data-game=gartenkurier]{--accent:#d4f88c;--panel:#203826;--line:#48654a}
body[data-game=nebelpfad]{--accent:#8cf9e2;--panel:#182d33;--line:#3b575d}
.shell{width:min(calc(100% - 28px),900px);margin:auto;padding:15px 0 32px}
header,.heading,.options,.controls,.move,.actions{display:flex;align-items:center;gap:8px}
header,.heading,.controls{justify-content:space-between}
header{border-bottom:1px solid var(--line);padding-bottom:10px}
.brand{color:#edf2f6;font-size:.89rem;text-decoration:none;font-weight:750}
.brand span{color:var(--warm)} .brand b{color:var(--muted);font-weight:500}
button{border:1px solid var(--line);border-radius:8px;background:#17232f;color:#f5f7fa;
  padding:7px 12px;min-height:44px;font:inherit;font-size:.9rem;font-weight:750;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.48;cursor:default}button:focus-visible,canvas:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button:active,[data-pressed=true]{border-color:var(--accent);background:#34465a}
.heading{margin:12px 0 9px;align-items:end}
.eyebrow{font-size:.69rem;letter-spacing:.19em;font-weight:800;color:var(--accent);margin:0}
h1,h2{font-family:Georgia,serif;line-height:1.05;margin:3px 0 0;color:#fff5de}
h1{font-size:clamp(1.8rem,4.5vw,3rem)}#record{color:var(--warm);font-weight:750;white-space:nowrap;margin:0 0 2px;font-size:.85rem}
.cabinet{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;box-shadow:0 14px 40px #0008}
.hud{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:8px 0;font-variant-numeric:tabular-nums}
.hud div+div{border-left:1px solid var(--line)}.hud span{display:block;color:var(--muted);font-size:.69rem;font-weight:700}.hud strong{color:#fff3d8}
.screen{position:relative;background:#111924}
canvas{display:block;width:100%;height:auto;touch-action:none}
.cover{position:absolute;inset:0;background:linear-gradient(90deg,#070a11f2 1%,#0b1019a8 48%,#0a101526 100%),url('cover.webp') center 45%/cover;display:grid;align-items:end}
.cover[hidden]{display:none}.cover[data-mode=pause]{background:#090d15d9;align-items:center}
.intro{margin:clamp(12px,4vw,38px);width:min(88%,410px);text-shadow:0 2px 10px #000}
.intro h2{font-size:clamp(1.65rem,5vw,3.4rem)}.intro p:not(.eyebrow){color:#e6eaf1;margin:6px 0 11px;font-size:clamp(.82rem,2.1vw,1rem)}
.primary,.fire{background:var(--accent);color:#122029;border-color:transparent}.primary:active,.fire[data-pressed=true]{color:#fff}
.primary span{padding-left:10px}.objective{font-size:.9rem;padding:7px 12px;margin:0;min-height:38px;display:flex;align-items:center;color:#fff3d8}
.controls{padding:0 9px 9px;align-items:stretch}.controls button{min-height:46px;padding:5px 9px;touch-action:none;user-select:none}
.move button{min-width:44px}.actions{flex:1;justify-content:end}.actions button{min-width:66px}
details{padding:10px 3px;color:var(--muted);font-size:.9rem}summary{cursor:pointer;color:#e5edf6;font-weight:650}details p{margin:6px 0}
footer{padding:5px 3px;color:var(--muted);font-size:.78rem}footer a{color:inherit}
@media(max-width:510px){.shell{width:calc(100% - 16px);padding-top:9px}.intro{margin:10px 14px}
  .move,.actions{gap:4px}.controls{gap:4px;padding:0 4px 6px}.move button{min-width:44px;padding:4px}.actions button{min-width:54px;font-size:.76rem}
  .intro h2{line-height:1}.intro .eyebrow{font-size:.61rem}.intro p:not(.eyebrow){margin:4px 0 6px}.intro .primary{padding:4px 9px}}
@media(max-width:350px){.controls{flex-wrap:wrap}.move{flex:1}.move button,.actions button{flex:1}.actions{flex-basis:100%}}
@media(max-width:510px){body[data-game=blockschmiede] .screen{overflow:hidden}
  body[data-game=blockschmiede] canvas{width:150%;max-width:660px;margin-left:50%;transform:translateX(-50%)}}