/* ============================================================
   GOODSMASH CASINO — Premium Design System
   Dark-neon glass. Original art in the studio style family.
   ============================================================ */
:root{
  --bg-0:#06070d;
  --bg-1:#0b0d18;
  --bg-2:#11131f;
  --panel:rgba(22,25,40,.72);
  --panel-solid:#161928;
  --stroke:rgba(255,255,255,.08);
  --stroke-strong:rgba(255,255,255,.16);
  --txt:#eef1ff;
  --txt-dim:#9aa3c4;
  --txt-faint:#5c6688;
  --accent:#ff3c9a;
  --accent2:#a643ff;
  --gold:#ffcf5c;
  --good:#36e0a0;
  --bad:#ff5c6c;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --glow:0 0 28px rgba(255,60,154,.45);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--txt);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(166,67,255,.20), transparent 60%),
    radial-gradient(1000px 620px at 100% 0%, rgba(255,60,154,.18), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(54,224,160,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ---------- top nav ---------- */
.gm-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:14px 22px;
  background:rgba(8,9,16,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stroke);
}
.gm-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.gm-brand .dot{width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 12px var(--good)}
.gm-brand b{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.gm-nav .links{display:flex;gap:6px;margin-left:auto}
.gm-nav .links a{
  padding:8px 14px;border-radius:999px;color:var(--txt-dim);font-size:14px;font-weight:600;
  transition:.18s;
}
.gm-nav .links a:hover{color:var(--txt);background:var(--stroke)}
.gm-nav .links a.active{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:var(--glow)}
.gm-pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--stroke);border:1px solid var(--stroke-strong);font-size:13px;font-weight:700;color:var(--txt-dim)
}
.gm-pill .live{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--stroke-strong);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  padding:12px 20px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;letter-spacing:.3px;
  transition:.16s;
}
.btn:hover{border-color:var(--stroke-strong);background:rgba(255,255,255,.09);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  border:none;color:#fff;
  background:linear-gradient(95deg,var(--accent),var(--accent2));
  box-shadow:var(--glow);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{padding:16px 28px;font-size:17px;border-radius:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent}
.btn.gold{background:linear-gradient(95deg,#ffd97a,var(--gold));color:#1a1405;box-shadow:0 0 24px rgba(255,207,92,.4)}

/* segmented control */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--stroke);border-radius:999px;padding:4px;gap:4px}
.seg button{
  border:none;background:transparent;color:var(--txt-dim);
  padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;transition:.15s
}
.seg button.active{color:#fff;background:linear-gradient(95deg,var(--accent),var(--accent2));box-shadow:var(--glow)}

/* ---------- layout shells ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:28px 22px 80px}
.glass{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;
  padding:46px 40px;margin-bottom:34px;overflow:hidden;position:relative;
}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 20%,rgba(255,60,154,.12),transparent 60%);pointer-events:none}
.hero h1{font-size:clamp(30px,4.4vw,54px);line-height:1.02;margin:0 0 14px;font-weight:900;letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(92deg,var(--accent),var(--accent2) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--txt-dim);font-size:17px;max-width:46ch;line-height:1.55;margin:0 0 22px}
.hero .stats{display:flex;gap:26px;margin-top:24px}
.hero .stats .s b{display:block;font-size:26px;font-weight:900;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .stats .s span{font-size:12px;color:var(--txt-faint);letter-spacing:1.5px;text-transform:uppercase}
.hero .art{border-radius:var(--radius);overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow);aspect-ratio:16/10;background:var(--bg-2) center/cover}

/* ---------- game grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--stroke);background:var(--panel-solid);
  transition:.2s;box-shadow:var(--shadow)
}
.card:hover{transform:translateY(-4px);border-color:var(--stroke-strong)}
.card .thumb{aspect-ratio:16/10;background:var(--bg-2) center/cover;position:relative}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,7,13,.86))}
.card .play{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(95deg,var(--accent),var(--accent2));color:#fff;font-size:18px;box-shadow:var(--glow);z-index:2}
.card .body{padding:14px 16px 16px;position:relative;z-index:2;margin-top:-34px}
.card h3{margin:0 0 2px;font-size:19px;font-weight:800}
.card .type{font-size:12px;color:var(--txt-faint);letter-spacing:1px;text-transform:uppercase;font-weight:700}
.card .tag{display:inline-block;margin-top:10px;font-size:12px;color:var(--txt-dim);background:var(--bg-2);border:1px solid var(--stroke);padding:5px 10px;border-radius:999px}
.card.static .play{display:none}
.badge-live{position:absolute;left:12px;top:12px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.5px;color:#06120b;background:linear-gradient(95deg,#5be88a,#9af5b0);padding:4px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ---------- premium stake tiles ---------- */
.hero-premium{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-tile-stack{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow);background:var(--bg-2)}
.hero-tile-stack .ht-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.hero-tile-stack .ht-fg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:88%;width:auto;object-fit:contain;z-index:2}
.eyebrow{color:var(--txt-faint);letter-spacing:2px;font-size:12px;font-weight:700}
.sec-sub{color:var(--txt-dim);font-size:14px;max-width:640px;margin:8px 0 0;line-height:1.55}
.section-heading{margin:8px 0 18px}
.section-heading h2{margin:6px 0 0;font-size:24px}
.pad{padding:22px;border-radius:18px}
.pad-sm{padding:18px}
.lead{color:var(--txt-dim);font-size:14px;line-height:1.6;margin:0 0 16px}
.detail-box{margin-top:14px;padding:14px;background:var(--bg-2);border:1px solid var(--stroke);border-radius:12px;font-size:13px;color:var(--txt-dim);line-height:1.6}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn.big{padding:14px 22px;font-size:15px}
.btn.gold{background:linear-gradient(95deg,#f0c040,#e0a020);color:#120a00;border:none}
.btn.wide{display:block;text-align:center;width:100%;margin-top:12px}
.btn-sm{padding:8px 14px;font-size:12px;border-radius:8px}
.btn.disabled{opacity:.55;pointer-events:none}
.card-title{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;color:var(--txt-faint)}
.card-title .ok,.ok{color:var(--good)}
.card-title .accent,.accent{color:var(--accent)}
.gold{color:var(--gold,#f0c040)}
.card.premium .thumb.media{aspect-ratio:16/9;position:relative;overflow:hidden;background:#080812}
.card.premium .bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;transition:opacity .3s}
.card.premium:hover .bg-layer{opacity:.5}
.card.premium .fg-layer{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:82%;width:auto;object-fit:contain;z-index:2;transition:transform .3s}
.card.premium:hover .fg-layer{transform:translateX(-50%) scale(1.04)}
.card.premium .title-bar{position:absolute;bottom:0;left:0;right:0;padding:36px 16px 12px;background:linear-gradient(transparent,rgba(4,4,12,.96));z-index:3}
.card.premium .title-bar h3{margin:0;font-size:1.05rem;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.card.premium .body{margin-top:0;padding:14px 16px 16px}
.card.premium .play{z-index:4}
.stake-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.games-premium{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.assets-grid{grid-template-columns:repeat(4,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.filter-pill{padding:6px 16px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--stroke);color:var(--txt-dim);background:transparent;cursor:pointer;transition:.2s}
.filter-pill:hover,.filter-pill.active{border-color:var(--accent);color:var(--accent);background:rgba(34,221,136,.08)}
.stake-card .genre{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:6px}
.stake-card .metrics{display:flex;gap:16px;font-size:13px;color:var(--txt-dim);margin-bottom:8px}
.stake-card .metrics strong{color:var(--accent)}
.feature-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.feature-tags span{padding:3px 10px;border-radius:5px;font-size:11px;background:rgba(34,221,136,.07);color:var(--accent);font-weight:500}
.card-actions{display:flex;gap:8px}
.gm-foot{text-align:center;color:var(--txt-faint);font-size:13px;margin-top:50px;line-height:1.6;padding-bottom:40px}
@media (max-width:900px){
  .hero-premium{grid-template-columns:1fr}
  .grid.four,.assets-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid.four,.assets-grid{grid-template-columns:1fr}
}

/* ---------- wallet terminal ---------- */
.terminal{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.terminal.terminal-3{grid-template-columns:1fr 1.1fr 1fr}
.session-card h3{font-size:28px;margin:8px 0 4px;background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.session-card .field{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;margin:8px 0}
.session-card input{background:transparent;border:none;color:var(--txt);font-size:16px;width:100px;outline:none}
@media (max-width:1000px){
  .terminal.terminal-3{grid-template-columns:1fr}
}
.terminal .glass{padding:22px}
.terminal h2{margin:0 0 14px;font-size:18px}
.token-card .addr{font-family:ui-monospace,monospace;color:var(--txt-dim);font-size:13px;word-break:break-all}
.bal-row{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0;padding:10px 0;border-bottom:1px solid var(--stroke)}
.bal-row b{font-size:22px;font-weight:900}
.bal-row .k{color:var(--txt-faint);font-size:13px}
.router .field{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;margin:8px 0}
.router input{background:transparent;border:none;color:var(--txt);font-size:16px;width:90px;outline:none}
.router .arrow{color:var(--accent);font-size:18px}
.note{font-size:12px;color:var(--txt-faint);margin-top:10px;line-height:1.5}

/* ---------- GAME PAGE ---------- */
.game-main{max-width:1080px;margin:0 auto;padding:22px 18px 80px}
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.game-head h1{margin:0;font-size:28px;font-weight:900}
.game-head .sub{color:var(--txt-dim);font-size:14px}
.game-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.reel-stage{padding:20px;position:relative;overflow:hidden}
.reel-stage::before{content:"";position:absolute;inset:0;background:var(--game-bg,transparent) center/cover;opacity:.22;z-index:0}
.reel-stage > *{position:relative;z-index:1}
.board{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  background:rgba(0,0,0,.35);border:1px solid var(--stroke);border-radius:14px;padding:12px;
}
.symbol{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--stroke);display:grid;place-items:center;
  transition:transform .12s, box-shadow .2s;
}
.symbol .symbol-art{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.symbol .label{display:none}
.symbol.spin{animation:reelSpin .5s linear}
@keyframes reelSpin{0%{transform:translateY(-22px);opacity:.4}100%{transform:translateY(0);opacity:1}}
.symbol.win{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 22px rgba(255,207,92,.65);
  animation:winPop .35s ease, winGlow 1s ease infinite alternate;
}
@keyframes winPop{0%{transform:scale(.82)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes winGlow{from{box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(255,207,92,.4)}to{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(255,207,92,.85)}}
.symbol.remove{animation:vanish .24s ease forwards}
@keyframes vanish{to{transform:scale(.4);opacity:0}}

/* HUD */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.hud .cell{background:var(--bg-2);border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;text-align:center}
.hud .cell .k{font-size:11px;color:var(--txt-faint);letter-spacing:1px;text-transform:uppercase}
.hud .cell .v{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.hud .cell.win .v{color:var(--gold)}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.controls .bet{display:flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--stroke);border-radius:10px;padding:6px 8px}
.controls .bet input{width:72px;background:transparent;border:none;color:var(--txt);font-size:16px;font-weight:800;text-align:center;outline:none}
.spin-btn{
  flex:1;min-width:200px;border:none;color:#fff;font-weight:900;font-size:18px;letter-spacing:.4px;
  padding:16px;border-radius:14px;background:linear-gradient(95deg,var(--accent),var(--accent2));
  box-shadow:var(--glow);transition:.15s
}
.spin-btn:hover{filter:brightness(1.08)}
.spin-btn:active{transform:scale(.99)}

.feature-meter{display:flex;gap:6px;margin:10px 0}
.feature-meter i{flex:1;height:8px;border-radius:6px;background:var(--bg-2);border:1px solid var(--stroke)}
.feature-meter i.on{background:linear-gradient(90deg,var(--accent),var(--gold));box-shadow:0 0 12px rgba(255,207,92,.6)}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:rgba(10,12,20,.95);border:1px solid var(--stroke-strong);color:var(--txt);
  padding:12px 20px;border-radius:999px;font-weight:700;z-index:200;transition:.25s;pointer-events:none;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* fx layer */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
#fxLayer .slash{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 20px var(--gold);animation:slash .5s ease}
@keyframes slash{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
#fxLayer .particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);animation:burst .9s ease forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

.big-win{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:180;
  font-size:84px;font-weight:900;color:#fff;
  background:linear-gradient(90deg,var(--gold),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,207,92,.6);animation:bigPop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes bigPop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* real toggle */
.real-toggle{display:inline-block;margin:6px 4px;padding:9px 16px;border-radius:10px;border:1px solid var(--accent);background:rgba(255,60,154,.12);color:#ff9ccb;font-weight:800;cursor:pointer;letter-spacing:.04em}
.real-toggle.on{background:var(--accent);color:#fff;box-shadow:var(--glow)}

/* age / jurisdiction gate */
.age-gate-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,rgba(20,10,40,.92),rgba(3,4,9,.97));backdrop-filter:blur(8px);padding:20px}
.age-gate-card{max-width:440px;width:100%;background:var(--panel-solid);border:1px solid var(--stroke-strong);border-radius:18px;padding:30px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.age-gate-logo{font-weight:800;letter-spacing:1px;font-size:22px;margin-bottom:10px}
.age-gate-logo b{color:var(--accent)}
.age-gate-card h2{margin:0 0 10px;font-size:20px}
.age-gate-card p{color:var(--txt-dim);font-size:13px;line-height:1.55;margin:0 0 14px}
.age-check{display:block;text-align:left;font-size:13px;color:var(--txt);margin:10px 0;cursor:pointer}
.age-check input{margin-right:8px;accent-color:var(--accent)}
.age-warn{color:#ff6b6b;font-size:12px;min-height:14px;margin:6px 0}
.age-fine{font-size:11px;color:var(--txt-faint);margin-top:12px}

.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(4,5,10,.8);z-index:160;backdrop-filter:blur(4px)}
.modal.open{display:grid}
.modal .box{max-width:520px;width:92%;padding:26px;border-radius:var(--radius);background:var(--panel-solid);border:1px solid var(--stroke-strong);box-shadow:var(--shadow)}
.modal h2{margin:0 0 12px}
.modal p{color:var(--txt-dim);line-height:1.6;font-size:14px}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero{grid-template-columns:1fr;padding:32px 24px}
  .hero .art{order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
  .terminal{grid-template-columns:1fr}
  .game-layout{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(6,1fr);gap:6px}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .gm-nav .links{display:none}
  .board{gap:5px;padding:8px}
  .spin-btn{font-size:16px;padding:14px}
  .hud .cell .v{font-size:17px}
}