:root { --bg:#0e1116; --panel:#171b22; --border:#2b323d; --text:#e7ebf1; --dim:#8b94a3; --acc:#7cc4ff; --star:#ffd166; --good:#57d68d; --bad:#ff6b6b; --wall:#38414f; }
* { 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; font-size:2rem; }
h2 { font-size:1rem; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; 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:3px; width:100%; touch-action:manipulation; user-select:none; }
.c { aspect-ratio:1; background:#141922; border-radius:5px; position:relative; display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:bold; cursor:pointer; }
.c.wall { background:var(--wall); cursor:default; }
.c.trail::before { content:""; position:absolute; inset:38%; background:var(--acc); opacity:.55; border-radius:50%; }
.c.mirror { color:var(--text); }
.c.mirror.used { color:var(--acc); }
.c.launch { color:var(--acc); cursor:default; border:2px solid var(--acc); }
.c.star { color:var(--star); cursor:default; } .c.star.got { background:#3a3115; }
.c.target { color:var(--good); border:2px solid var(--good); cursor:default; } .c.target.won { background:#17382a; }
.c.ball::after { content:""; position:absolute; inset:25%; background:#fff; border-radius:50%; box-shadow:0 0 10px var(--acc); }
#msg { min-height:1.5rem; margin:.6rem 0; color:var(--dim); } #msg.win { color:var(--good); } #msg.bad { color:var(--bad); }
button { font:inherit; background:var(--acc); color:#06222c; 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; }
details { margin-top:1.2rem; 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 button.cur { border-color:var(--acc); } #levels button.par { border-color:var(--good); color:var(--good); } #levels button.done { color:var(--star); border-color:var(--star); }
footer { margin-top:2rem; color:var(--dim); font-size:.85rem; } footer a { color:var(--acc); }