:root{
  --bg:#0d0620; --card:#1b0f37; --card2:#241546; --line:rgba(255,255,255,.08);
  --text:#f3efff; --muted:#a293c9; --gold:#ffd75e; --green:#6ee7a8; --live:#ff5d73;
  --radius:18px; --shadow:0 24px 60px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a1560 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, #1b2a63 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Cairo',system-ui,'Segoe UI',sans-serif;
  display:grid; place-items:center; padding:22px;
  -webkit-font-smoothing:antialiased;
}
.app{width:100%; max-width:820px; display:flex; flex-direction:column; gap:14px}
.bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; font-weight:900; font-size:clamp(16px,2.4vw,22px)}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.stats{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--muted);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.chip b{color:var(--text); font-weight:700}
.ico{width:15px;height:15px;display:block}
.ico.dim path{fill:rgba(255,255,255,.18)}
.lives{display:inline-flex;gap:3px}
.stage{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow)}
canvas{display:block; width:100%; height:auto; aspect-ratio:320/192;
  image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none}
.overlay{position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:24px;
  background:rgba(13,6,32,.84); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.overlay.show{display:flex; animation:fade .25s ease}
.overlay h2{margin:0;font-size:clamp(20px,3.4vw,30px);font-weight:900}
.overlay p{margin:0;max-width:46ch;color:var(--muted);font-size:clamp(12px,1.7vw,15px);line-height:1.9}
.btn{margin-top:6px;padding:12px 26px;border:0;border-radius:999px;cursor:pointer;font-family:inherit;
  font-weight:900;font-size:15px;color:#22113a;background:linear-gradient(180deg,#ffe98a,#ffc93c);
  box-shadow:0 10px 24px rgba(255,205,60,.28); transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(255,205,60,.36)}
.btn:active{transform:translateY(0)}
.touch{display:none;gap:10px;justify-content:space-between;align-items:center}
.tbtn{width:74px;height:58px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.07); color:var(--text); display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; font-family:inherit; font-weight:900; font-size:14px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); user-select:none;
  -webkit-user-select:none; touch-action:none; transition:transform .12s ease, background .12s ease}
.tbtn svg{width:22px;height:22px}
.tbtn:active{transform:scale(.96);background:rgba(255,255,255,.15)}
.tbtn.jump{background:linear-gradient(180deg,rgba(110,231,168,.3),rgba(110,231,168,.1));
  border-color:rgba(110,231,168,.4)}
.hint{margin:0;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (hover:none){ .touch{display:flex} }
@media (max-width:520px){ body{padding:12px} .chip{font-size:12px;padding:6px 10px} }