:root{
  --bg:#070b12;
  --line:rgba(120,170,255,.14);
  --accent:#b6ff3a;
  --accent2:#39d98a;
  --text:#e8f0ff;
  --muted:#7d8ea8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 640px at 50% -12%, #16273f 0%, transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ── HUD ── */
.hud{
  display:flex;align-items:center;gap:14px;
  padding:12px clamp(12px,3vw,22px);
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap;
}
.brand sup{font-size:10px;color:var(--accent);margin-left:1px}
.dot{
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px rgba(182,255,58,.7);
}
.stats{display:flex;gap:6px;margin-left:auto}
.stat{
  display:flex;flex-direction:column;gap:1px;
  padding:5px 10px;border-radius:10px;
  background:rgba(16,24,38,.75);
  border:1px solid var(--line);
  min-width:56px;
}
.stat span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.stat b{font-size:15px;font-variant-numeric:tabular-nums;line-height:1.1}
.icon{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  background:rgba(16,24,38,.75);border:1px solid var(--line);
  color:var(--text);font-size:12px;cursor:pointer;
  display:grid;place-items:center;transition:border-color .18s,color .18s,transform .12s;
}
.icon:hover{border-color:rgba(182,255,58,.5);color:var(--accent)}
.icon:active{transform:scale(.94)}

/* ── Поле ── */
#stage{
  position:relative;flex:1;min-height:0;
  display:grid;place-items:center;padding:8px;
}
canvas{
  display:block;border-radius:18px;touch-action:none;
  box-shadow:
    0 0 0 1px var(--line),
    0 26px 60px -24px rgba(0,0,0,.95),
    0 0 70px -14px rgba(90,160,255,.16);
}

/* ── Оверлей ── */
.overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;text-align:center;
  padding:24px;
  background:rgba(6,10,18,.84);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-radius:18px;
  animation:fade .22s ease;
}
.overlay.hidden{display:none}
.overlay h1{
  margin:0 0 10px;font-size:clamp(28px,6.5vw,46px);letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.overlay p{margin:0 0 20px;color:var(--muted);max-width:34ch;line-height:1.5;font-size:14px}
@keyframes fade{from{opacity:0}to{opacity:1}}

.primary{
  padding:13px 34px;border:0;border-radius:12px;cursor:pointer;
  font-size:15px;font-weight:700;color:#08120a;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 26px -10px rgba(120,230,90,.75);
  transition:transform .12s,box-shadow .18s;
}
.primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(120,230,90,.9)}
.primary:active{transform:scale(.97)}

/* ── D-pad ── */
.dpad{
  position:fixed;right:14px;bottom:14px;z-index:5;
  display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);
  gap:6px;opacity:.92;
}
.dbtn{
  border-radius:14px;cursor:pointer;
  background:rgba(18,28,44,.85);border:1px solid var(--line);
  color:var(--text);font-size:14px;
  display:grid;place-items:center;
  transition:background .15s,border-color .15s,transform .1s;
  touch-action:none;user-select:none;
}
.dbtn:active,.dbtn.on{background:rgba(182,255,58,.18);border-color:rgba(182,255,58,.6)}
.dbtn.up{grid-area:1/2}
.dbtn.left{grid-area:2/1}
.dbtn.down{grid-area:2/2}
.dbtn.right{grid-area:2/3}

.hint{
  text-align:center;color:var(--muted);font-size:11px;
  padding:6px 12px 12px;letter-spacing:.02em;
}
@media (hover:hover) and (pointer:fine){.dpad{display:none}}
@media (max-width:700px){
  #stage{padding-bottom:126px}
  .brand{display:none}
  .stat{min-width:48px;padding:4px 8px}
}
@media (max-height:520px){
  .hint{display:none}
  #stage{padding-bottom:8px}
  .dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
}