:root{--bg:#0d1219;--panel:#141c28;--border:#26344a;--text:#e9f1f8;--dim:#8ba0b8;--acc:#7cc7ff;--ice:#1b2940;--stop:#ffd166;--tgt:#ff6b6b;--good:#6fd38e;--bad:#ff6b6b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 ui-monospace,Menlo,Consolas,monospace}
main{max-width:540px;margin:0 auto;padding:1.2rem 1rem 3rem}h1{margin:0;color:var(--acc);letter-spacing:.08em}
h2{font-size:1rem;color:var(--dim);text-transform:uppercase;margin-top:2rem}.tagline{margin:.1rem 0 1rem;color:var(--dim)}
#hud{display:flex;justify-content:space-between;color:var(--dim);font-size:.9rem;margin-bottom:.4rem}
#board{display:grid;gap:4px;width:100%;user-select:none}
.c{aspect-ratio:1;background:var(--ice);border:2px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:bold;cursor:pointer}
.c.wall{background:transparent;border-color:transparent;cursor:default}
.c.stop{border-color:var(--stop);color:var(--stop)}
.c.stop::before{content:"\25A0"}
.c.tgt{border-color:var(--tgt)}
.c.tgt::before{content:"\25CF";color:var(--tgt)}
.c.tgt.puckon::before{content:""}
.c.puck{background:var(--acc);border-color:var(--acc);cursor:default}
#msg{min-height:1.5rem;margin:.5rem 0;color:var(--dim)}#msg.win{color:var(--good)}#msg.bad{color:var(--bad)}
button{font:inherit;background:var(--acc);color:#0d1219;border:0;border-radius:6px;padding:.5rem .8rem;cursor:pointer}
button.secondary{background:var(--panel);color:var(--text);border:1px solid var(--border)}
.row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
#pad{display:grid;grid-template-columns:repeat(3,3.2rem);gap:6px;justify-content:center;margin-top:1rem}
#pad button{padding:.4rem 0;font-size:1.1rem}
details{margin-top:1rem;color:var(--dim)}summary{color:var(--text);cursor:pointer}
#levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}#levels button{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:.4rem 0;font-size:.85rem}
#levels .cur{border-color:var(--acc)}#levels .done{border-color:var(--good);color:var(--good)}#levels .par{border-color:var(--good);color:var(--good)}
footer{margin-top:2rem;color:var(--dim);font-size:.85rem}footer a{color:var(--acc)}

.c{padding:0;min-width:0;color:var(--text)} .c:focus-visible{outline:3px solid white;outline-offset:1px} #hud{flex-wrap:wrap;gap:6px} #board{touch-action:manipulation} body{background:radial-gradient(ellipse at top,#193044,#0d1219 70%)} #board{padding:10px;background:#101f2d;border-radius:16px;border:1px solid #385366;box-shadow:0 12px 40px #0005} .c{box-shadow:inset 0 1px 3px #ffffff12} .c.puck{box-shadow:inset 0 -5px 8px #247698,0 0 14px #7cc7ff66} .c.wall{box-shadow:none} button:hover{filter:brightness(1.18)}