:root{
  --bg:#060b14;
  --panel:#0d1524;
  --panel-2:#111c30;
  --gold:#d7ab4a;
  --gold-2:#ffdf87;
  --text:#eef3ff;
  --muted:#95a2c2;
  --line:rgba(215,171,74,.25);
  --danger:#ff6464;
  --success:#57d28c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top,#10192b 0%,#060b14 55%,#04070d 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
linear-gradient(180deg,rgba(255,215,128,.06),transparent 18%),
radial-gradient(circle at 20% 10%,rgba(255,223,135,.10),transparent 18%),
radial-gradient(circle at 80% 15%,rgba(215,171,74,.08),transparent 22%);
}
.wrap{max-width:1200px;margin:0 auto;padding:28px 18px 60px;position:relative;z-index:1}
.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.brand{display:flex;flex-direction:column;gap:6px}
.kicker{letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2);font-size:.72rem}
.title{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;line-height:1;margin:0;text-transform:uppercase}
.subtitle{margin:0;color:var(--muted);max-width:720px}
.pill{border:1px solid var(--line);background:rgba(17,28,48,.72);backdrop-filter:blur(8px);padding:12px 16px;border-radius:999px;color:var(--gold-2);font-weight:700;box-shadow:0 0 0 1px rgba(255,223,135,.04) inset}
.hero{display:grid;grid-template-columns:1.3fr .8fr;gap:18px;margin-bottom:22px}
.panel{background:linear-gradient(180deg,rgba(17,28,48,.96),rgba(10,17,29,.96));border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,223,135,.03) inset}
.hero .panel strong{color:var(--gold-2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:16px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,223,135,.08)}
.stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.stat-value{font-size:1.35rem;font-weight:900;margin-top:6px;color:var(--gold-2)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(16,25,43,.98),rgba(10,16,28,.98));border:1px solid var(--line);box-shadow:0 16px 44px rgba(0,0,0,.28);min-height:220px}
.card-tag{align-self:flex-start;font-size:.72rem;padding:8px 10px;border-radius:999px;background:rgba(215,171,74,.12);color:var(--gold-2);border:1px solid rgba(255,223,135,.18);text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.card h3{margin:0;font-size:1.35rem;text-transform:uppercase}
.card p{margin:0;color:var(--muted);line-height:1.45}
.card .actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:14px;padding:12px 16px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s opacity;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#211300;box-shadow:0 10px 24px rgba(215,171,74,.2)}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(215,171,74,.26)}
.btn.secondary{background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.footer-note{margin-top:18px;color:var(--muted);font-size:.92rem}
.game-shell{max-width:1000px;margin:0 auto;padding:24px 16px 42px}
.game-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.game-title{margin:0;text-transform:uppercase;font-size:clamp(1.8rem,3.5vw,3rem)}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold-2);font-weight:800;padding:10px 14px;border-radius:999px;background:rgba(17,28,48,.78);border:1px solid var(--line)}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.hud .stat-value{font-size:1.15rem}
.stage{background:linear-gradient(180deg,rgba(17,28,48,.95),rgba(8,14,24,.98));border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 20px 48px rgba(0,0,0,.34)}
.center{text-align:center}
.message{min-height:24px;font-weight:800;color:var(--gold-2)}
.small{font-size:.9rem;color:var(--muted)}
.flex{display:flex;gap:12px;flex-wrap:wrap}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
input[type="number"],input[type="text"]{background:#09111d;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:12px 14px;border-radius:14px;min-width:110px}
.target-grid,.code-grid,.heist-grid{display:grid;gap:12px}
.target-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.target{aspect-ratio:1/1;border-radius:18px;border:1px solid rgba(255,223,135,.12);background:radial-gradient(circle at 50% 45%,rgba(255,223,135,.14),rgba(255,255,255,.03) 35%,rgba(255,255,255,.02) 36%,rgba(0,0,0,.2));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;cursor:pointer;user-select:none}
.target.active{outline:3px solid rgba(255,223,135,.4);transform:scale(1.03)}
.progress{height:14px;background:#0a1220;border-radius:999px;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.reel{height:140px;border-radius:22px;border:1px solid rgba(255,223,135,.12);background:linear-gradient(180deg,#111b2d,#090f18);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;box-shadow:inset 0 0 0 1px rgba(255,223,135,.05)}
.bet-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.code-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.code-btn,.heist-tile{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,223,135,.12);font-size:1.2rem;font-weight:900;color:var(--text);cursor:pointer;text-align:center}
.heist-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.heist-tile.revealed{background:rgba(215,171,74,.12);color:var(--gold-2)}
.heist-tile.matched{background:rgba(87,210,140,.14);border-color:rgba(87,210,140,.35);color:#b9ffd5}
.collect-btn{min-width:150px}
.gold-stack{font-size:4rem;filter:drop-shadow(0 8px 24px rgba(215,171,74,.22))}
.arena{position:relative;height:380px;border-radius:22px;border:1px solid rgba(255,223,135,.12);overflow:hidden;background:radial-gradient(circle at top,rgba(255,223,135,.08),transparent 30%),linear-gradient(180deg,#0d1728,#08111e)}
.enemy,.shot{position:absolute;border-radius:50%}
.enemy{width:48px;height:48px;background:radial-gradient(circle at 30% 30%,#ffefb5,#d7ab4a 35%,#6f4200 80%);box-shadow:0 0 22px rgba(215,171,74,.28);display:flex;align-items:center;justify-content:center;font-weight:900;color:#1d1000;cursor:pointer}
.shot{width:18px;height:18px;background:radial-gradient(circle,#fff5d1,#d7ab4a 55%,#6f4200);box-shadow:0 0 14px rgba(255,223,135,.4)}
.crosshair{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:54px;height:54px;border:2px solid rgba(255,223,135,.35);border-radius:50%}
@media (max-width: 900px){.hero,.grid{grid-template-columns:1fr}.stats,.hud{grid-template-columns:1fr 1fr}.target-grid,.code-grid,.heist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.stats,.hud{grid-template-columns:1fr}.reels{grid-template-columns:1fr}.target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.arena{height:320px}}