:root{
  --bg:#0b1020;--surface:#121832;--text:#e6e8ef;--muted:#9aa3b2;--primary:#6c8cff;--accent:#ff6b9b;--border:#223050;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35)
}
[data-theme="light"]{--bg:#f6f8ff;--surface:#fff;--text:#0f172a;--muted:#475569;--primary:#3558ff;--accent:#e5487d;--border:#e2e8f0}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(96,165,250,0.4),transparent 60%),radial-gradient(circle at 85% 0%,rgba(244,114,182,0.35),transparent 60%),linear-gradient(135deg,rgba(5,9,22,0.95) 0%,rgba(8,12,26,0.92) 100%)}
.container{max-width:900px;margin:0 auto;padding:32px 36px;background:var(--surface);border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.header{text-align:center;margin-bottom:24px}
.title{font-size:clamp(1.8rem,4vw,2.6rem);margin:0;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(96,165,250,0.35)}
.subtitle{color:var(--muted);margin:.45rem 0 0;font-size:1rem}
.game-shell{position:relative;display:grid;gap:20px}
#game{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(#9ae6ff,#c7f9ff 45%, #8ed081 55%, #58b865 100%) center/cover no-repeat, #0b1228;box-shadow:var(--shadow)}
.hud{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.hud-item{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:8px 14px;min-width:118px;text-align:center;box-shadow:0 14px 28px rgba(8,12,24,0.4)}
.hud-item span:first-child{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}
.hud-item strong{font-size:1.45rem;font-weight:700}
.hud .settings{display:flex;gap:12px;align-items:center}
.overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.overlay-card{pointer-events:auto;background:rgba(17,24,42,.78);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.12);border-radius:22px;padding:22px 26px;text-align:center;box-shadow:0 28px 40px rgba(5,9,22,0.55)}
.row{display:flex;gap:10px;justify-content:center;margin-top:8px}
.btn{border:none;border-radius:12px;padding:10px 16px;background:rgba(255,255,255,0.08);color:var(--text);border:1px solid rgba(255,255,255,0.12);cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;box-shadow:0 18px 32px rgba(96,165,250,.32)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(8,12,24,.45)}
.hint{color:var(--muted);text-align:center;margin-top:8px}
.theme-toggle{position:fixed;right:16px;bottom:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow)}

@media (prefers-reduced-motion: reduce) {
  .card, .overlay-card { transition: none !important; }
}