:root {
  --bg:#0f0f17;
  --panel:#161623;
  --accent:#8a7dff;
  --accent2:#34f6ff;
  --text:#e8e8f3;
  --muted:#9aa0b4;
  --danger:#ff3b6b;
  --good:#9afc8b;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; background:radial-gradient(1200px 600px at 70% 10%, #181828, #0e0e16 55%, #0a0a12); color:var(--text); font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.wrap { max-width:1080px; margin:0 auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.hud { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(180deg, #191927, #131320); padding:12px 16px; border:1px solid #24243a; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 #2a2a45; }
.hud .title { font-weight:800; letter-spacing:.5px; margin-right:16px; color:var(--accent); }
.hud .stat { margin-right:14px; font-weight:600; color:var(--muted); }
.hud .stat b { color:var(--text); }
.hud-right button { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b0b12; border:none; padding:10px 14px; font-weight:800; border-radius:10px; cursor:pointer; }
.hud-right button:active { transform:translateY(1px); }
.game { position:relative; border-radius:18px; overflow:hidden; border:1px solid #24243a; box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 #26263f; }
canvas { display:block; width:100%; height:auto; background:linear-gradient(180deg, #0b0b14, #0a0a12); }
.overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,18,.75), rgba(8,8,14,.9)); display:grid; place-items:center; backdrop-filter: blur(6px); }
.overlay .panel { background:linear-gradient(180deg, #16162a, #101021); border:1px solid #2a2a45; padding:28px; max-width:640px; width:86%; text-align:center; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.overlay h1 { margin:0 0 10px; font-size:32px; color:var(--accent2); }
.overlay p { margin:0 0 18px; color:var(--muted); }
.overlay button { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b0b12; border:none; padding:12px 18px; font-weight:800; border-radius:12px; cursor:pointer; }
.toast { position:absolute; left:50%; top:16px; transform:translateX(-50%); background:#121224; border:1px solid #2b2b47; color:var(--text); padding:10px 14px; font-weight:600; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.footer { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; padding-inline:6px; }
.win-banner, .lose-banner { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.win-banner .msg, .lose-banner .msg { background:linear-gradient(180deg, #16162a, #101021); border:1px solid #2a2a45; padding:20px 24px; border-radius:14px; font-weight:800; }
.win-banner .msg { color:var(--good); }
.lose-banner .msg { color:var(--danger); }
#btnRestart { white-space:nowrap; }