:root{
  --bg:#0b0e12;
  --fg:#e5e7eb;
  --accent:#22c55e;
  --danger:#ef4444;
  --muted:#94a3b8;
  --panel:#11151b;
  --btn:#1f2937;
  --btn-pressed:#374151;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
#app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:12px;max-width:900px;margin-inline:auto;padding:12px;align-items:center}
header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.4px}
.hud{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{background:var(--panel);color:var(--fg);padding:6px 10px;border-radius:999px;font-variant-numeric:tabular-nums;box-shadow:var(--shadow);border:1px solid #0f172a}
.hud button{appearance:none;border:0;border-radius:999px;background:var(--btn);color:var(--fg);padding:8px 12px;font-weight:600;box-shadow:var(--shadow);border:1px solid #0f172a}
.hud button:active{transform:translateY(1px);background:var(--btn-pressed)}
canvas{width:100%;aspect-ratio:1/1;background:#05070a;border-radius:18px;box-shadow:var(--shadow);border:1px solid #0f172a;touch-action:none}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;margin:8px auto 0}
.ctrl{appearance:none;border:0;background:var(--btn);color:var(--fg);padding:16px;border-radius:16px;font-size:22px;box-shadow:var(--shadow);border:1px solid #0f172a}
.ctrl:active{transform:translateY(1px);background:var(--btn-pressed)}
.ctrl.big{grid-column:span 3;font-size:18px;padding:14px}
.grid-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid-pad .blank{visibility:hidden}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:10;pointer-events:none}
.overlay .card{pointer-events:auto}
.overlay[hidden]{display:none !important}
.card{width:min(92vw,560px);background:linear-gradient(180deg,#0c1119,#0a0f16);border:1px solid #111827;border-radius:20px;box-shadow:var(--shadow);padding:18px}
.card h2{margin:0 0 6px 0}
.card p{margin:0 0 10px 0;color:var(--muted);line-height:1.35}
.row{display:flex;gap:10px;flex-wrap:wrap}
.card .primary{background:var(--accent);color:#04210f}
.card .danger{background:var(--danger)}
.hide{display:none}
.kbd{display:inline-block;min-width:1.6em;text-align:center;background:#0f172a;border:1px solid #1f2937;border-radius:6px;padding:1px 6px}
footer{opacity:.8;text-align:center;font-size:12px;margin-bottom:6px}
@media (min-width:700px){
  .brand h1{font-size:20px}
  .ctrl{padding:20px;font-size:24px}
}