:root{--asphalt:#121110;--asphalt2:#1c1a18;--cream:#F3E6C8;--sand:#A89F93;--amber:#E8A317;--line:#2c2925}
*{box-sizing:border-box}
html,body{margin:0;background:var(--asphalt);color:var(--cream);font-family:Inter,"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--amber);text-decoration:none}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(18,17,16,.95);z-index:5}
.brand{color:var(--cream);font-weight:700;font-size:15px;letter-spacing:.02em}
.nav nav{display:flex;gap:18px;flex-wrap:wrap}
.nav nav a{color:var(--sand);font-size:14px}.nav nav a:hover,.nav nav a.on{color:var(--amber)}
main{max-width:1000px;margin:0 auto;padding:0 14px}
.hero{text-align:center;padding:26px 0 10px}
.kicker{color:var(--amber);font-size:12px;letter-spacing:.2em;margin:0}
h1{font-size:clamp(40px,9vw,88px);margin:6px 0;letter-spacing:-.02em;font-weight:800;line-height:1}
.tag{color:var(--sand);margin:6px 0 0}
.game-wrap{margin:18px 0}
#stage{position:relative;width:100%;aspect-ratio:16/10;background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{width:100%;height:100%;display:block}
#hud{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;pointer-events:none}
#hud div{background:rgba(18,17,16,.78);border:1px solid var(--line);border-radius:10px;padding:6px 10px;min-width:84px}
#hud .lbl{display:block;font-size:10px;color:var(--sand);letter-spacing:.15em}
#hud b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;color:var(--cream)}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px}
#overlay.off{display:none}
.card{background:rgba(18,17,16,.93);border:1px solid var(--amber);border-radius:16px;padding:20px 22px;max-width:420px;text-align:center}
.card h2{margin:0 0 8px}.card p{color:var(--sand);margin:8px 0}
.keys{font-size:13px}.big{font-size:44px;color:var(--cream)!important;font-family:ui-monospace,Menlo,monospace;margin:4px 0}
#cardCount{border:0;background:transparent}#count{font-size:120px;font-weight:800;color:var(--amber);text-shadow:0 4px 0 #000}
.hidden{display:none}
.btn{background:var(--amber);color:#121110;border:0;border-radius:999px;padding:11px 20px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--sand)}.btn.small{padding:6px 12px;font-size:12px;margin-top:8px}
.controls{display:flex;justify-content:flex-end;margin-top:10px}
form label{display:block;font-size:12px;color:var(--sand);margin:10px 0 6px}
.row{display:flex;gap:8px;justify-content:center}
input{background:var(--asphalt2);color:var(--cream);border:1px solid var(--sand);border-radius:10px;padding:10px;font-size:16px;width:160px;font-family:inherit}
.msg{min-height:1.2em;font-size:14px}.msg.ok{color:var(--amber)!important}
#touch{position:absolute;left:0;right:0;bottom:10px;display:none;justify-content:space-between;padding:0 10px;pointer-events:none}
.tgroup{display:flex;gap:10px;pointer-events:auto}
#touch button{width:64px;height:64px;border-radius:50%;border:2px solid var(--cream);background:rgba(18,17,16,.55);color:var(--cream);font-size:24px;touch-action:none}
#touch button.gas{border-color:var(--amber);color:var(--amber)}#touch button.act{background:rgba(232,163,23,.45)}
.touch #touch{display:flex}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 30px}
.board{background:var(--asphalt2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.board h3{margin:0;color:var(--amber);letter-spacing:.12em;font-size:14px}.sub{color:var(--sand);font-size:12px;margin:4px 0 10px}
ol{margin:0;padding-left:26px;font-family:ui-monospace,Menlo,monospace;font-size:14px}
ol li{padding:3px 0;border-bottom:1px dashed var(--line)}ol li span{float:right;color:var(--cream)}ol li.me{color:var(--amber)}
.muted{color:var(--sand);list-style:none;margin-left:-26px}
footer{text-align:center;border-top:1px solid var(--line);padding:20px 14px 30px;color:var(--sand);font-size:13px}.fine{max-width:620px;margin:8px auto 0}
@media (max-width:700px){.boards{grid-template-columns:1fr}#stage{aspect-ratio:3/4}#hud b{font-size:15px}#hud div{min-width:0;flex:1}.nav{padding:10px 14px}.nav nav{gap:12px}}

.mini{margin-top:12px;text-align:left;border-top:1px solid var(--line);padding-top:8px;font-size:12px}.mini b{color:var(--amber);letter-spacing:.1em}.mini ol{font-size:13px;padding-left:22px;margin:4px 0}.mini ol li{padding:1px 0}.mini .jump{font-size:12px}
#boards{scroll-margin-top:70px}.controls a.btn{display:inline-block;text-decoration:none}
.card{max-height:100%;overflow:auto}.controls{gap:8px}