:root{
  --bg:#0f172a;
  --panel:#111827;
  --accent:#22c55e;
  --accent2:#3b82f6;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --danger:#ef4444;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;height:100%;}
.wrap{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:6px;}
.topbar{width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);text-decoration:none;}
.logo .mark{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;color:#06240f;}
.backlink{color:var(--muted);text-decoration:none;font-size:14px;}
.backlink:hover{color:var(--text);}
canvas{background:#0b1222;border:1px solid #1e293b;border-radius:8px;touch-action:none;display:block;width:100%;height:100%;flex:1 1 auto;min-height:0;}
.hud{width:100%;max-width:480px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:0 auto 4px;flex:0 0 auto;}
.score{font-size:15px;font-weight:800;color:var(--text);}
.btn{background:var(--accent);color:#06240f;border:none;border-radius:8px;padding:10px 18px;font-weight:700;font-size:15px;cursor:pointer;}
.btn:active{transform:scale(.97);}
.btn.secondary{background:var(--panel);color:var(--text);border:1px solid #1e293b;}
.overlay{position:fixed;inset:0;background:rgba(2,6,23,.85);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:20px;}
.overlay h2{margin:0;font-size:26px;}
.overlay p{margin:0;color:var(--muted);}
.grid{display:grid;gap:6px;}
.cell{background:var(--panel);border:1px solid #1e293b;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;}
h1{font-size:20px;margin:4px 0 2px;}
.hint{color:var(--muted);font-size:10px;text-align:center;max-width:480px;margin:4px auto 0;flex:0 0 auto;}