:root{
  --bg:#06110c; --bg2:#091a12; --ink:#f4f1e6; --muted:#9db3a6;
  --green:#19c372; --gold:#f6c34a; --red:#e8473b; --line:rgba(244,241,230,.12);
  --font:"Archivo",system-ui,sans-serif; --display:"Anton",sans-serif; --mono:"Space Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(25,195,114,.14), transparent 55%),
    radial-gradient(100% 70% at 50% 120%, rgba(246,195,74,.10), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--font);
  min-height:100%; display:flex; flex-direction:column; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
}
a{color:inherit;text-decoration:none}

.gamebar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px clamp(14px,4vw,30px); border-bottom:1px solid var(--line);
  background:rgba(6,17,12,.7); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10;
}
.gb-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.gb-brand .dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(25,195,114,.18),0 0 16px var(--green)}
.gb-brand b{color:var(--gold);font-weight:400}
.gb-brand .k{color:var(--red)}
.gb-actions{display:flex;align-items:center;gap:10px}
.gb-btn{font-family:var(--font);font-weight:700;font-size:.84rem;letter-spacing:.02em;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.gb-btn:hover{border-color:var(--green);background:rgba(25,195,114,.1)}
.gb-btn.home{background:var(--red);border-color:transparent;color:#fff}
.gb-btn.home:hover{background:var(--red);filter:brightness(1.08)}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 10px 22px;position:relative}
.cabinet{
  position:relative; border-radius:20px; padding:10px;
  background:linear-gradient(160deg,#0c2218,#06110c);
  border:1px solid rgba(246,195,74,.25);
  box-shadow:0 30px 90px -30px #000, 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 60px -20px rgba(25,195,114,.4);
}
.cabinet::before{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(transparent 50%,rgba(0,0,0,.06) 50%);background-size:100% 3px;mix-blend-mode:overlay;opacity:.5;
}
canvas#game{
  display:block; height:min(70vh,120vw); width:auto; aspect-ratio:3/4; max-width:94vw;
  border-radius:12px; background:#06110c; box-shadow:0 0 30px -8px rgba(0,0,0,.8) inset; cursor:pointer;
}
.legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-align:center;text-transform:uppercase}
.legend b{color:var(--gold)}

/* touch controls */
.touch{display:none;width:min(94vw,560px);justify-content:space-between;align-items:flex-end;gap:14px;user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:8px}
.dpad .tb{grid-column:auto}
.tb{
  width:52px;height:52px;border-radius:14px;border:1px solid var(--line);
  background:rgba(244,241,230,.06);color:var(--ink);font-size:20px;font-weight:700;
  display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;
}
.tb:active{background:rgba(25,195,114,.25);border-color:var(--green)}
.dpad .b-left{grid-area:2/1} .dpad .b-up{grid-area:1/2} .dpad .b-down{grid-area:2/2} .dpad .b-right{grid-area:2/3}
.actions{display:flex;gap:12px}
.tb.big{width:66px;height:66px;border-radius:50%;font-size:13px;font-family:var(--font);font-weight:800;letter-spacing:.02em}
.tb.jump{background:rgba(25,195,114,.18);border-color:rgba(25,195,114,.5)}
.tb.kick{background:rgba(226,72,61,.18);border-color:rgba(226,72,61,.5)}

@media (pointer:coarse), (max-width:820px){ .touch{display:flex} .legend.kb{display:none} }
@media (max-width:820px){ canvas#game{height:min(62vh,118vw)} }