:root{
  --blue:#0066FF;--purple:#8C4FF4;--teal:#6FDFE2;--bg:#0e0f1a;--panel:#161829;
  --grid:#1e2138;--text:#EAECF5;--muted:#8b90ad;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(circle at 30% 0%,#1a1c33 0%,var(--bg) 55%);
  color:var(--text);font-family:Poppins,Segoe UI,Calibri,Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:18px;min-height:100vh;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
.wrap{width:100%;max-width:520px}
.hud{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-weight:800;letter-spacing:.22em;font-size:1.15rem;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;align-items:center;gap:14px}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.value{font-weight:700;font-size:1.15rem}
.icon-btn{background:var(--panel);border:1px solid #2a2d47;color:var(--text);
  width:38px;height:38px;border-radius:12px;font-size:1rem;cursor:pointer;transition:.15s}
.icon-btn:hover{border-color:var(--blue)}
.icon-btn.off{opacity:.4}
.stage{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;
  background:var(--panel);box-shadow:0 0 0 1px #262a44,0 18px 50px rgba(0,0,0,.55)}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:26px;
  background:rgba(10,11,20,.82);backdrop-filter:blur(6px);transition:opacity .2s}
.overlay.hide{opacity:0;pointer-events:none}
.overlay h1{font-size:2.1rem;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(90deg,var(--teal),var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.overlay p{color:var(--muted);font-size:.9rem;max-width:330px;line-height:1.5}
.cta{margin-top:6px;border:none;cursor:pointer;padding:12px 34px;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:1rem;color:#fff;letter-spacing:.04em;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  box-shadow:0 8px 24px rgba(0,102,255,.4);transition:transform .12s}
.cta:active{transform:scale(.96)}
.dpad{display:none;flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.dmid{display:flex;gap:60px}
.dbtn{width:62px;height:52px;border-radius:14px;border:1px solid #2a2d47;
  background:var(--panel);color:var(--teal);font-size:1.05rem;cursor:pointer}
.dbtn:active{background:#20243c}
.hint{text-align:center;color:var(--muted);font-size:.72rem;margin-top:14px;letter-spacing:.05em}
@media(hover:none) and (pointer:coarse){.dpad{display:flex}.hint{display:none}}