/* ── Sana Jump · tokens ─────────────────────────────────────────────────── */
:root{
  --bg:#0F172A; --bg2:#141d33; --line:rgba(255,255,255,.10);
  --red:#DC2626; --blue:#2563EB; --green:#22C55E; --gold:#FACC15;
  --text:#FFFFFF; --muted:#93a4c4;
  --pixel:'Press Start 2P', monospace; --mono:'VT323', monospace; --ar:'Cairo', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%, #1d2b52 0%, var(--bg) 62%) fixed;
  color:var(--text); font-family:var(--ar); min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:16px;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%; max-width:1040px; display:flex; flex-direction:column; gap:12px}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.brand{font-family:var(--pixel); font-size:13px; letter-spacing:.5px; display:flex; align-items:center; gap:10px}
.brand b{color:var(--gold); font-size:9px}
.coin-dot{
  width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #fff6b0, var(--gold) 60%, #b48206);
  box-shadow:0 0 12px rgba(250,204,21,.6);
}
.keys{font-size:12.5px; color:var(--muted)}

/* ── stage ─────────────────────────────────────────────────────────────── */
.stage{
  position:relative; border-radius:16px; overflow:hidden;
  border:2px solid var(--line); background:#0a1122;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.35);
  aspect-ratio:832/480; width:100%;
}
canvas#game{
  display:block; width:100%; height:100%; background:#79c2ff;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.hud{
  position:absolute; inset:8px 8px auto 8px; display:flex; gap:8px;
  justify-content:space-between; pointer-events:none; z-index:3; flex-wrap:wrap;
}
.hud-item{
  background:rgba(9,14,30,.72); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:10px; padding:6px 10px;
  min-width:78px; text-align:center;
}
.hud-item span{display:block; font-size:10px; color:var(--muted)}
.hud-item b{display:block; font-family:var(--mono); font-size:19px; line-height:1.15; color:#fff}
.toast{
  position:absolute; left:50%; top:68px; transform:translate(-50%,-8px);
  background:rgba(9,14,30,.88); border:1px solid var(--line); border-radius:12px;
  padding:9px 18px; font-weight:700; font-size:14px; z-index:4;
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ── overlays ──────────────────────────────────────────────────────────── */
.overlay{
  position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:18px;
  background:linear-gradient(180deg, rgba(6,10,22,.70), rgba(6,10,22,.92));
  backdrop-filter:blur(3px); z-index:5;
}
.overlay.show{display:grid}
.card{
  width:min(560px, 94%); background:rgba(20,29,51,.92);
  border:1px solid var(--line); border-radius:18px; padding:22px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.card h1{font-family:var(--pixel); font-size:clamp(18px,4vw,30px); margin:0 0 12px; line-height:1.5}
.card h2{font-family:var(--pixel); font-size:clamp(13px,2.6vw,19px); margin:0 0 10px; color:var(--gold); line-height:1.6}
.card p{margin:8px 0; color:#c9d5ee; font-size:14.5px; line-height:1.9}
.card .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.legend{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0}
.chip{
  font-size:12px; color:#c9d5ee; background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.big{font-family:var(--mono); font-size:34px; color:var(--gold); letter-spacing:1px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--ar); font-weight:700; font-size:15px; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#2f7cf6,var(--blue)); border:none; border-radius:12px;
  padding:12px 22px; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,99,235,.45); filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.btn.green{background:linear-gradient(180deg,#3ee07c,var(--green)); box-shadow:0 8px 20px rgba(34,197,94,.28)}
.btn.green:hover{box-shadow:0 12px 26px rgba(34,197,94,.4)}
.btn.ghost{background:rgba(255,255,255,.08); border:1px solid var(--line); box-shadow:none}

/* ── touch controls + footer ───────────────────────────────────────────── */
.touch{display:none; gap:10px; margin-top:2px}
.pad{display:flex; gap:10px; flex:1}
.touch button{
  flex:1; min-width:0; height:62px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.08); color:#fff; font-family:var(--pixel); font-size:11px;
  touch-action:none; user-select:none; cursor:pointer; transition:transform .12s ease, background .12s ease;
}
.touch button.tall{flex:1.6}
.touch button.active{background:var(--blue); transform:scale(.95); border-color:rgba(140,180,255,.8)}
.hint-rotate{
  display:none; margin:0; text-align:center; color:var(--gold);
  background:rgba(250,204,21,.08); border:1px dashed rgba(250,204,21,.35);
  border-radius:12px; padding:8px 12px; font-size:12.5px; font-weight:700;
}
.foot{margin:2px 0 0; text-align:center; color:#7f90b4; font-size:12.5px}
@keyframes pop{from{transform:scale(.94); opacity:0} to{transform:scale(1); opacity:1}}
.overlay.show .card{animation:pop .25s ease}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  .touch{display:flex}
  .pad{display:contents}
  .keys{display:none}
  .foot{display:none}
}
@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  .hint-rotate{display:block}
}
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  body{padding:8px}
  .wrap{gap:8px}
  .stage{max-width:calc((100vh - 132px) * 832 / 480); margin-inline:auto}
}
@media (max-width:680px){
  body{padding:10px}
  .wrap{gap:8px}
  .hud-item{min-width:52px; padding:4px 6px; border-radius:8px}
  .hud-item b{font-size:14px}
  .hud-item span{font-size:8.5px}
  .brand{font-size:10.5px}
  .card{padding:18px 14px}
  .card p{font-size:13.5px; line-height:1.8}
  .legend .chip,.chip{font-size:11px; padding:4px 9px}
  .big{font-size:28px}
  .toast{font-size:12.5px; padding:7px 13px; top:58px}
  .touch button{height:56px; border-radius:12px; font-size:10px}
}
@media (max-height:430px) and (hover:none) and (pointer:coarse){
  .touch button{height:48px}
  .hud{inset:5px 6px auto 6px; gap:5px}
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ── fullscreen / immersive ───────────────────────────────────────────── */
html:fullscreen,
html:-webkit-full-screen,
body.immersive{background:#05070f}
html:fullscreen body,
html:-webkit-full-screen body,
body.immersive{min-height:100vh; height:100vh; padding:6px; align-items:stretch; overflow:hidden}
html:fullscreen .wrap,
html:-webkit-full-screen .wrap,
body.immersive .wrap{max-width:none; height:100%; gap:8px}
html:fullscreen .stage,
html:-webkit-full-screen .stage,
body.immersive .stage{flex:1; min-height:0; aspect-ratio:auto; border-radius:12px}
html:fullscreen .topbar,
html:-webkit-full-screen .topbar,
body.immersive .topbar,
html:fullscreen .foot,
html:-webkit-full-screen .foot,
body.immersive .foot,
html:fullscreen .hint-rotate,
html:-webkit-full-screen .hint-rotate,
body.immersive .hint-rotate{display:none}
html:fullscreen canvas#game,
html:-webkit-full-screen canvas#game,
body.immersive canvas#game{height:100%; object-fit:contain}
html:fullscreen .hud,
html:-webkit-full-screen .hud,
body.immersive .hud{inset:8px 10px auto 10px}
body.immersive .touch{display:flex}