/* ===========================================================================
   crashgames.com — v2
   "Casino Receipt" — late-night terminal × pirate radio × crypto twitter.
   Single stylesheet. Mobile-first. Laptop fits in one screen.
=========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:        #0a0b0d;
  --bg-2:      #111317;
  --surface:   #15181d;
  --surface-2: #1c2027;
  --line:      #2a2f37;
  --line-2:    #3b424c;
  --ink:       #f4f1e8;     /* warm bone */
  --ink-dim:   #a0a5ad;
  --ink-mute:  #6c727b;

  --lime:      #c2f542;     /* signal green */
  --lime-ink:  #0b1300;
  --hot:       #ff3866;     /* pink loss */
  --ice:       #66d9ff;     /* multiplier */
  --gold:      #f5b840;     /* cash out */
  --purple:    #a78bff;     /* accent only */

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 0 0 1px var(--line) inset, 0 10px 30px rgba(0,0,0,.4);

  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --header-h: 56px;
  --bet-h: 96px;
  --bet-h-mobile: 132px;
}

html[data-theme="light"]{
  --bg: #ece7df;
  --bg-2: #e2dccf;
  --surface: #f7f3ea;
  --surface-2: #ffffff;
  --line: #d6cfbf;
  --line-2: #b9b09c;
  --ink: #161311;
  --ink-dim: #4a4640;
  --ink-mute: #807a6c;
  --shadow-2: 0 0 0 1px var(--line) inset, 0 10px 30px rgba(0,0,0,.08);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  font-feature-settings:"ss01","cv01","cv03","tnum";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px dashed var(--line);margin:24px 0}

/* ---------- Type ---------- */
.h1,h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,84px);line-height:.95;letter-spacing:-.025em;margin:0;}
.h2,h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.5vw,48px);line-height:1;letter-spacing:-.02em;margin:0;}
.h3,h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,28px);line-height:1.1;letter-spacing:-.01em;margin:0;}
.h4,h4{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2;margin:0;letter-spacing:-.005em;}
.kicker{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mute);}
.lead{font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--ink-dim);max-width:62ch;}
.tag{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-dim);background:var(--surface);}
.tag.lime{color:var(--lime);border-color:var(--lime);}
.tag.hot{color:var(--hot);border-color:var(--hot);}
.tag.ice{color:var(--ice);border-color:var(--ice);}
.tag.gold{color:var(--gold);border-color:var(--gold);}

.tnum{font-variant-numeric:tabular-nums;}

/* ---------- Layout primitives ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
.wrap-tight{max-width:920px;margin:0 auto;padding:0 20px;}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;gap:12px;}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.grid{display:grid;gap:18px;}

/* ---------- Disclosure bar ---------- */
.disclosure{
  background:var(--bg);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  text-align:center;padding:8px 14px;
}
.disclosure b{color:var(--lime);font-weight:600;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,11,13,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  height:var(--header-h);display:flex;align-items:center;
}
html[data-theme="light"] .site-header{background:rgba(236,231,223,.86);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.015em;}
.logo-mark{
  background:var(--lime);color:var(--lime-ink);
  width:30px;height:30px;border-radius:6px;
  display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:-.04em;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
}
.logo b{color:var(--lime);font-weight:700;}
.balance{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:6px 10px;
}
.balance .v{color:var(--lime);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;}
.balance .label{color:var(--ink-mute);text-transform:uppercase;font-size:10px;letter-spacing:.14em;}
.balance--big{
  background:linear-gradient(135deg, rgba(99,102,241,0.18), rgba(236,72,153,0.18));
  border:1px solid rgba(236,72,153,0.45);
  padding:8px 14px;
}
.balance--big .v{font-size:18px;font-weight:700;color:#34D399;}
.balance--big .label{font-size:10px;}
.icon-btn{
  width:32px;height:32px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-dim);
  transition:border-color .15s,color .15s;
}
.icon-btn:hover{border-color:var(--lime);color:var(--lime);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;
  padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s,border-color .12s,background .12s,color .12s,box-shadow .12s;
  text-transform:uppercase;white-space:nowrap;user-select:none;
}
.btn:hover{border-color:var(--line-2);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-ghost{background:transparent;}
.btn-lime{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);}
.btn-lime:hover{background:#d4ff60;border-color:#d4ff60;}
.btn-gold{background:var(--gold);color:#1a1108;border-color:var(--gold);}
.btn-gold:hover{background:#ffc857;border-color:#ffc857;}
.btn-hot{background:var(--hot);color:#fff;border-color:var(--hot);}
.btn-ice{background:var(--ice);color:#001829;border-color:var(--ice);}
.btn-block{display:flex;width:100%;}
.btn-lg{font-size:15px;padding:14px 22px;}
.btn-sm{font-size:11px;padding:6px 10px;}

/* ---------- Cards / panels ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;}
.dashed{border-style:dashed!important;}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;}
.kv dt{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;font-size:10px;align-self:center;}
.kv dd{margin:0;font-variant-numeric:tabular-nums;}

/* ---------- Input ---------- */
.input,select.input{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:9px 12px;color:var(--ink);font-family:var(--mono);font-size:13px;
  width:100%;font-variant-numeric:tabular-nums;
}
.input:focus,select.input:focus{border-color:var(--lime);}
.field-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);margin-bottom:5px;display:block;}
.field{display:flex;flex-direction:column;}

/* ---------- HOMEPAGE ---------- */
.hero{
  padding:48px 0 32px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(800px 320px at 80% 10%, rgba(194,245,66,.06), transparent 60%),
    radial-gradient(600px 240px at 10% 90%, rgba(102,217,255,.04), transparent 70%);
}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.hero-title{margin:14px 0 18px;}
.hero-title .red{color:var(--hot);}
.hero-title .green{color:var(--lime);}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;padding-top:24px;border-top:1px dashed var(--line);}
.hero-stat .v{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1;}
.hero-stat.lime .v{color:var(--lime);}
.hero-stat.ice .v{color:var(--ice);}
.hero-stat .l{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);margin-top:6px;}
.hero-receipt{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;font-family:var(--mono);font-size:12px;line-height:1.7;
  position:relative;overflow:hidden;
}
.hero-receipt::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:repeating-linear-gradient(90deg,var(--lime) 0 8px,transparent 8px 14px);
}
.hero-receipt .h{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:10px;}
.hero-receipt .line{display:flex;justify-content:space-between;}
.hero-receipt .total{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;font-weight:600;color:var(--lime);}
.hero-receipt .stamp{margin-top:14px;padding:8px;border:2px dashed var(--hot);color:var(--hot);text-align:center;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;transform:rotate(-2deg);}

/* Games grid */
.games-section{padding:48px 0;border-bottom:1px solid var(--line);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:24px;flex-wrap:wrap;}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:10px;
  position:relative;transition:transform .15s,border-color .15s;overflow:hidden;
  text-decoration:none;color:inherit;
  min-height:200px;
}
.gcard:hover{border-color:var(--lime);transform:translateY(-2px);}
.gcard .gtop{display:flex;justify-content:space-between;align-items:flex-start;}
.gcard .gnum{font-family:var(--display);font-size:14px;font-weight:700;color:var(--ink-mute);}
.gcard .gicon{font-size:42px;line-height:1;align-self:flex-start;filter:saturate(1.1);}
.gcard h3{margin:8px 0 4px;color:var(--ink);}
.gcard .gjab{font-size:12px;line-height:1.5;color:var(--ink-dim);flex:1;}
.gcard .gfoot{display:flex;justify-content:space-between;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);margin-top:8px;}
.gcard .play{color:var(--lime);font-weight:600;}

/* How it works strip */
.how{padding:48px 0;border-bottom:1px solid var(--line);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.how-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;}
.how-item .n{font-family:var(--display);font-size:36px;font-weight:700;color:var(--lime);line-height:1;margin-bottom:8px;}
.how-item h4{margin-bottom:6px;}
.how-item p{margin:0;font-size:13px;color:var(--ink-dim);line-height:1.55;}

/* FAQ */
.faq{padding:48px 0;border-bottom:1px solid var(--line);}
details.q{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface);}
details.q+details.q{margin-top:10px;}
details.q summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
details.q summary::-webkit-details-marker{display:none;}
details.q summary::after{content:"+";color:var(--lime);font-weight:700;}
details.q[open] summary::after{content:"−";}
details.q .a{margin-top:10px;color:var(--ink-dim);font-size:13px;line-height:1.65;}

/* Footer */
.site-footer{padding:32px 0;border-top:1px solid var(--line);font-size:12px;color:var(--ink-mute);}
.site-footer .fline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.site-footer a{color:var(--ink-dim);}
.site-footer a:hover{color:var(--lime);}

/* ---------- GAME PAGES — single-screen layout ---------- */
.game-shell{
  display:grid;grid-template-rows:auto 1fr auto;
  min-height:calc(100vh - var(--header-h));
}
.game-head{
  padding:14px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.game-head .left{display:flex;align-items:center;gap:14px;}
.game-head h1{font-size:22px;line-height:1;}
.game-head .back{color:var(--ink-mute);font-size:12px;letter-spacing:.08em;}
.game-head .back:hover{color:var(--lime);}
.game-head .meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.12em;}

.game-body{
  display:grid;grid-template-columns:1fr;
  padding:24px 20px;gap:16px;align-content:start;justify-items:center;
  min-height:0; /* allow inner overflow */
  background:radial-gradient(ellipse at 50% -10%, rgba(99,102,241,0.10), transparent 60%),
             radial-gradient(ellipse at 50% 110%, rgba(236,72,153,0.08), transparent 60%);
}
.game-stage{
  width:100%;max-width:1080px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.45);
}
.game-status{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
  padding-bottom:10px;border-bottom:1px dashed var(--line);
}
.game-status .v{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600;}
.game-status .v.win{color:var(--lime);}
.game-status .v.lose{color:var(--hot);}

/* Bet bar — pinned bottom */
.bet-bar{
  position:sticky;bottom:0;z-index:30;
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:14px 20px;
}
.bet-bar-inner{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end;
}
.bet-amount{display:flex;align-items:end;gap:8px;}
.bet-amount .input{min-width:120px;}
.bet-chips{display:flex;gap:6px;}
.bet-chip{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-dim);
}
.bet-chip:hover{border-color:var(--lime);color:var(--lime);}
.bet-action{display:flex;gap:8px;}

/* Drawer (collapsible PF + history) */
.drawer-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
  cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
.drawer-toggle:hover{color:var(--lime);border-color:var(--lime);}
.drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bg-2);border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .25s;
  max-height:80vh;overflow-y:auto;
  padding:20px;
}
.drawer.open{transform:translateY(0);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:1180px;margin:0 auto;}
.history{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;}
.hist-row{display:flex;justify-content:space-between;font-size:11px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font-variant-numeric:tabular-nums;}
.hist-row .net.win{color:var(--lime);}
.hist-row .net.lose{color:var(--hot);}
.seed-row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px dashed var(--line);}
.seed-row .k{color:var(--ink-mute);}
.seed-row .v{font-variant-numeric:tabular-nums;max-width:60%;text-align:right;word-break:break-all;}

/* ---------- DICE ---------- */
.dice-slider{padding:18px 0;}
.dice-track{position:relative;height:36px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.dice-track .win-zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg, rgba(194,245,66,.22), rgba(194,245,66,.08));border-right:1px solid var(--lime);border-left:1px solid var(--lime);}
.dice-track .lose-zone{position:absolute;top:0;bottom:0;background:rgba(255,56,102,.06);}
.dice-track .marker{position:absolute;top:-6px;bottom:-6px;width:4px;background:var(--lime);border-radius:2px;box-shadow:0 0 12px var(--lime);transform:translateX(-2px);}
.dice-track .roll-pin{position:absolute;top:-10px;bottom:-10px;width:3px;background:var(--ice);border-radius:2px;transition:left .35s cubic-bezier(.2,.9,.2,1);transform:translateX(-1.5px);}
.dice-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-mute);margin-top:8px;font-variant-numeric:tabular-nums;}
.dice-readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
.dice-readouts .ro{padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);text-align:center;}
.dice-readouts .ro .k{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);}
.dice-readouts .ro .v{font-family:var(--display);font-size:24px;font-weight:700;margin-top:4px;color:var(--lime);}
.dice-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.dice-mode .btn[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);}
.dice-result{font-family:var(--display);font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ice);text-align:center;margin-top:8px;}
.dice-result.win{color:var(--lime);}
.dice-result.lose{color:var(--hot);}

/* ---------- CRASH ---------- */
.crash-stage{height:420px;background:radial-gradient(ellipse at 50% 100%, rgba(99,102,241,0.18), var(--bg-2) 70%);border:1px solid var(--line);border-radius:var(--r-md);position:relative;overflow:hidden;}
.crash-stage canvas{position:absolute;inset:0;width:100%;height:100%;}
.crash-mult{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:64px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.025em;color:var(--lime);text-shadow:0 0 32px rgba(194,245,66,.4);}
.crash-mult.boom{color:var(--hot);text-shadow:0 0 32px rgba(255,56,102,.4);}
.crash-status{position:absolute;top:8px;left:14px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);}

/* ---------- MINES ---------- */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:420px;margin:0 auto;}
.mine-cell{
  aspect-ratio:1/1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  display:grid;place-items:center;font-size:24px;cursor:pointer;min-height:60px;
  transition:transform .08s,background .12s,border-color .12s;user-select:none;
}
.mine-cell:empty::before{content:'?';color:var(--ink-mute);font-family:var(--mono);font-size:20px;opacity:.4;}
.mine-cell:hover:not(.revealed){border-color:var(--lime);transform:translateY(-1px);}
.mine-cell.revealed{cursor:default;}
.mine-cell.gem{background:rgba(194,245,66,.12);border-color:var(--lime);color:var(--lime);}
.mine-cell.bomb{background:rgba(255,56,102,.12);border-color:var(--hot);color:var(--hot);}
.mine-cell.dim{opacity:.5;}
.mines-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;}
.mines-bar .it{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center;}
.mines-bar .it .k{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);}
.mines-bar .it .v{font-family:var(--display);font-size:18px;font-weight:700;margin-top:4px;color:var(--lime);font-variant-numeric:tabular-nums;}

/* ---------- PLINKO ---------- */
.plinko-stage{height:360px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);position:relative;overflow:hidden;}
.plinko-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.plinko-buckets{display:flex;gap:2px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pb{flex:1 0 auto;min-width:32px;text-align:center;padding:6px 2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);font-size:10px;font-variant-numeric:tabular-nums;color:var(--ink-dim);}
.pb.hit{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:700;}

/* ---------- LIMBO ---------- */
.limbo-stage{height:240px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);display:grid;place-items:center;position:relative;overflow:hidden;}
.limbo-mult{font-family:var(--display);font-size:72px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.025em;}
.limbo-mult.win{color:var(--lime);text-shadow:0 0 32px rgba(194,245,66,.4);}
.limbo-mult.lose{color:var(--hot);text-shadow:0 0 32px rgba(255,56,102,.3);}
.limbo-target{position:absolute;top:14px;left:14px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);}
.limbo-target .v{color:var(--ice);font-weight:600;}

/* ---------- COIN ---------- */
.coin-stage{height:220px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);display:grid;place-items:center;perspective:600px;}
.coin{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#f5b840,#b8851d);position:relative;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2,.7,.3,1);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:48px;color:#3a2700;border:4px solid #2a1c00;box-shadow:inset 0 0 20px rgba(0,0,0,.2);}
.coin.flip-h{transform:rotateY(1800deg);}
.coin.flip-t{transform:rotateY(1980deg);}
.coin-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.coin-pick .btn[aria-pressed="true"]{background:var(--gold);color:#1a1108;border-color:var(--gold);}

/* ---------- ROULETTE (no-zero) ---------- */
.roulette-wheel{width:200px;height:200px;border-radius:50%;margin:0 auto;position:relative;transition:transform 3s cubic-bezier(.15,.7,.2,1);border:4px solid var(--bg-2);box-shadow:0 0 0 1px var(--line), inset 0 0 30px rgba(0,0,0,.6);}
.roulette-wheel::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(255,255,255,.06);}
.roulette-wheel::after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--line);top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 12px rgba(0,0,0,.5);}
.roulette-stage{position:relative;padding:10px 0 4px;}
.roulette-pointer{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid var(--lime);z-index:2;}

.roulette-bets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;}
.rbet{padding:8px 6px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);cursor:pointer;font-family:var(--mono);}
.rbet:hover{border-color:var(--lime);color:var(--lime);}
.rbet[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:700;}
.roulette-result{text-align:center;margin-top:8px;font-family:var(--display);font-size:22px;font-weight:700;}

/* ---------- KENO ---------- */
.keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:520px;margin:0 auto;}
.keno-cell{aspect-ratio:1/1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;font-family:var(--mono);font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink-dim);transition:transform .08s,background .12s,border-color .12s;user-select:none;}
.keno-cell:hover{border-color:var(--lime);}
.keno-cell.picked{background:var(--ice);color:#001829;border-color:var(--ice);font-weight:600;}
.keno-cell.hit{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:700;}
.keno-cell.drawn{background:rgba(255,255,255,.04);color:var(--ink-dim);}
.keno-info{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);}
.keno-info .v{color:var(--lime);font-weight:600;}

/* ---------- CHICKEN ---------- */
.chicken-stage{
  height:320px;background:#1a1d22;border:1px solid var(--line);border-radius:var(--r-md);
  position:relative;overflow:hidden;
}
.chicken-road{position:absolute;inset:0;display:flex;flex-direction:row-reverse;} /* v3: chicken crosses right-to-left */
.lane{flex:1;position:relative;border-right:1px dashed rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:flex-end;}
.lane:last-child{border-right:0;}
.lane.passed{background:rgba(194,245,66,.06);}
.lane-mult{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums;}
.lane-bg{position:absolute;inset:30px 0 0 0;background:repeating-linear-gradient(0deg,#222 0 12px,#1a1d22 12px 24px);}
.lane.sidewalk{background:#0e1014;flex:0 0 60px;}
.lane.sidewalk .lane-bg{background:repeating-linear-gradient(45deg,#1c1f25 0 8px,#0e1014 8px 14px);}
.chicken{position:absolute;bottom:8px;left:50%;width:32px;height:32px;font-size:28px;transform:translateX(-50%);transition:left .35s cubic-bezier(.2,.7,.3,1);z-index:5;line-height:1;display:grid;place-items:center;}
.chicken.dead{filter:grayscale(1);transform:translateX(-50%) rotate(70deg);}
.car{position:absolute;top:-40px;width:34px;height:24px;background:var(--hot);border-radius:4px;z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.3) inset;}
.car::before{content:"";position:absolute;top:4px;left:6px;right:6px;height:6px;background:rgba(255,255,255,.3);border-radius:1px;}
.car::after{content:"";position:absolute;bottom:-2px;left:2px;right:2px;height:4px;background:#000;border-radius:1px;}
.chicken-multiline{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-mute);margin-top:8px;text-transform:uppercase;letter-spacing:.12em;}
.chicken-multiline .v{color:var(--lime);font-weight:600;font-variant-numeric:tabular-nums;}

/* ---------- HOW-TO + ROOMS sections (on game pages, scrollable below the fold) ---------- */
.below-fold{padding:48px 20px;background:var(--bg-2);border-top:1px solid var(--line);}
.below-fold .wrap-tight{display:flex;flex-direction:column;gap:36px;}
.bf-section h2{margin-bottom:14px;}
.bf-section p{font-size:14px;line-height:1.7;color:var(--ink-dim);margin:0 0 12px;}
.bf-section ul,.bf-section ol{padding-left:22px;font-size:14px;color:var(--ink-dim);line-height:1.65;}
.bf-section li{margin-bottom:6px;}
.bf-section code{font-family:var(--mono);background:var(--surface);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--ice);}
.bf-section strong{color:var(--ink);}
.bf-section .joke{display:block;font-style:italic;color:var(--purple);margin:14px 0;border-left:2px solid var(--purple);padding-left:14px;}

/* Rooms table */
.rooms-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;}
.rooms-table th,.rooms-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.rooms-table th{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);font-weight:600;border-bottom:1px solid var(--line-2);}
.rooms-table .rname{font-weight:600;color:var(--ink);}
.rooms-table .rrtp{color:var(--lime);font-weight:600;}
.rooms-table a{color:var(--ice);}
.rooms-table a:hover{color:var(--lime);}
.rooms-table .verdict{font-size:13px;color:var(--ink-dim);line-height:1.5;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px;}
  .games{grid-template-columns:repeat(2,1fr);}
  .how-grid{grid-template-columns:1fr;}
  .bet-bar-inner{grid-template-columns:1fr;}
  .bet-action{display:grid;grid-template-columns:1fr 1fr;}
  .drawer-grid{grid-template-columns:1fr;}
  .game-head h1{font-size:18px;}
  .game-head{padding:10px 14px;gap:8px;}
  .game-body{padding:12px 14px;gap:10px;}
  .game-stage{padding:12px;}
  .hero-stats{grid-template-columns:1fr 1fr;}
  .crash-mult{font-size:48px;}
  .limbo-mult{font-size:48px;}
}
@media (max-width:520px){
  .games{grid-template-columns:1fr;}
  .balance .label{display:none;}
  .crash-stage,.plinko-stage{height:240px;}
  .chicken-stage{height:260px;}
  .keno-grid{grid-template-columns:repeat(8,1fr);gap:3px;}
  .keno-cell{font-size:11px;}
  .mines-bar{grid-template-columns:repeat(2,1fr);}
  .roulette-wheel{width:160px;height:160px;}
  .hero-stat .v{font-size:24px;}
}

/* ---------- Utility ---------- */
.muted{color:var(--ink-mute);}
.dim{color:var(--ink-dim);}
.lime{color:var(--lime);}
.hot{color:var(--hot);}
.ice{color:var(--ice);}
.gold{color:var(--gold);}
.center{text-align:center;}
.flex-grow{flex:1;}
.spacer-12{height:12px;}
.spacer-24{height:24px;}
.spacer-48{height:48px;}
.hide-mobile{}
.hide-desktop{display:none;}
@media (max-width:700px){
  .hide-mobile{display:none!important;}
  .hide-desktop{display:initial;}
}

/* selection */
::selection{background:var(--lime);color:var(--lime-ink);}

/* scroll bar */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--line-2);}

/* ===== v2.1: NAV, MOBILE MENU, ROOMS TABLE, CATS, FOOTER, BREADCRUMBS, GAME DRAWER ===== */

/* Top nav */
.top-nav{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;}
.top-nav a{color:var(--ink-dim);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.top-nav a:hover{color:var(--lime);border-bottom-color:var(--lime);}
.site-header .wrap{display:flex;align-items:center;gap:18px;}
.site-header .top-nav{flex:1;justify-content:center;}
.nav-burger{display:none;}

@media (max-width: 960px){
  .top-nav{display:none;}
  .nav-burger{display:inline-flex;}
}

/* Mobile menu */
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .25s ease;
  z-index:100;overflow-y:auto;box-shadow:-20px 0 40px rgba(0,0,0,.4);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-inner{padding:24px 22px;display:flex;flex-direction:column;gap:28px;}
.mm-section{display:flex;flex-direction:column;gap:10px;}
.mm-section .kicker{margin-bottom:6px;}
.mm-section a{color:var(--ink);font-family:var(--display);font-size:18px;text-decoration:none;padding:4px 0;border-bottom:1px solid var(--line);}
.mm-section a:hover{color:var(--lime);}

/* Hero CTAs */
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 26px;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.hero-stat .l{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--ink-dim);text-transform:none;letter-spacing:0;margin-top:4px;max-width:34ch;}

/* Game categories */
.cat-row{margin-bottom:38px;}
.cat-row .cat-label{margin:0 0 12px;color:var(--lime);}

/* Rooms section + big table */
.rooms-section{padding:64px 0;border-top:1px solid var(--line);background:var(--bg-2);}
.rooms-table-wrap{overflow-x:auto;margin:20px 0 12px;}
.rooms-table-big{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;min-width:880px;}
.rooms-table-big th{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;
}
.rooms-table-big td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-dim);}
.rooms-table-big td.rname{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);}
.rooms-table-big td.rname a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--lime);}
.rooms-table-big td.rname a:hover{color:var(--lime);}
.rooms-table-big td.rrtp{color:var(--ink);font-weight:600;}
.rooms-table-big td.rrtp.lime{color:var(--lime);}
.btn-sm{padding:6px 12px;font-size:11px;}

/* Guides grid */
.guides{padding:64px 0;border-top:1px solid var(--line);}
.guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:24px;}
.guide-card{
  display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:13px;
  text-decoration:none;transition:border-color .15s,transform .1s;
}
.guide-card:hover{border-color:var(--lime);color:var(--lime);}
.guide-card:active{transform:translateY(1px);}

/* About */
.about{padding:64px 0;border-top:1px solid var(--line);}

/* Footer grid */
.site-footer{padding:48px 0 24px;border-top:1px solid var(--line);background:var(--bg-2);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:32px;}
.footer-col{display:flex;flex-direction:column;gap:6px;}
.footer-col .kicker{margin-bottom:8px;}
.footer-col a{color:var(--ink-dim);font-family:var(--mono);font-size:13px;text-decoration:none;padding:2px 0;}
.footer-col a:hover{color:var(--lime);}
.footer-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.footer-bottom p{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-mute);}
.footer-bottom p:first-child{color:var(--ink-dim);font-size:12px;}
.small{font-size:11px;}
.muted{color:var(--ink-mute);}

@media (max-width: 720px){
  .footer-grid{grid-template-columns:1fr;gap:24px;}
}

/* ===== Game page additions: breadcrumb + per-game where-to-play drawer ===== */

.breadcrumb{
  display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
  padding:10px 20px;border-bottom:1px solid var(--line);background:var(--bg-2);
}
.breadcrumb a{color:var(--ink-dim);text-decoration:none;}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb .sep{color:var(--ink-mute);}
.breadcrumb .current{color:var(--ink);}

/* Where-to-play side panel on game pages (sticky aside, slides in on mobile) */
.wtp-toggle{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:transparent;color:var(--lime);border:1px solid var(--lime);
  border-radius:var(--r-sm);font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;cursor:pointer;
}
.wtp-toggle:hover{background:var(--lime);color:var(--lime-ink);}

.wtp-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(92vw,420px);
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .25s ease;z-index:90;
  overflow-y:auto;box-shadow:-20px 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
}
.wtp-drawer.open{transform:translateX(0);}
.wtp-head{
  padding:18px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.wtp-head h3{font-family:var(--display);font-size:18px;margin:0;}
.wtp-close{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:6px 10px;border-radius:var(--r-sm);font-family:var(--mono);font-size:11px;cursor:pointer;
}
.wtp-body{padding:20px;}
.wtp-intro{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-dim);margin:0 0 18px;}
.wtp-card{
  display:block;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:12px;text-decoration:none;background:var(--bg-2);
  transition:border-color .15s;
}
.wtp-card:hover{border-color:var(--lime);}
.wtp-card .wtp-name{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.wtp-card .wtp-rtp{font-family:var(--mono);font-size:12px;color:var(--lime);margin-bottom:6px;}
.wtp-card .wtp-why{font-family:var(--mono);font-size:12px;color:var(--ink-dim);line-height:1.5;margin-bottom:10px;}
.wtp-card .wtp-cta{
  display:inline-block;padding:5px 10px;background:var(--lime);color:var(--lime-ink);
  border-radius:var(--r-sm);font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
}
.wtp-footnote{font-family:var(--mono);font-size:11px;color:var(--ink-mute);line-height:1.5;margin-top:14px;}

@media (max-width: 720px){
  .game-head .meta{flex-wrap:wrap;}
}

/* ===========================================================================
   §23 — CLARITY: bet button + playing-with + footer (Iter 2.3)
=========================================================================== */

/* Playing-with strip — inside .bet-bar, above the bet controls */
.bet-bar .playing-with{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 20px 6px;
  margin:-14px -20px 10px;
  background:linear-gradient(180deg, rgba(194,245,66,.10), rgba(194,245,66,.02));
  border-bottom:1px solid rgba(194,245,66,.20);
  font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-dim);
}
.bet-bar .playing-with .pw-label{color:var(--ink-mute);}
.bet-bar .playing-with .pw-amount{
  font-family:var(--display);font-weight:700;font-size:20px;
  color:var(--lime);letter-spacing:-0.02em;text-transform:none;
  text-shadow:0 0 14px rgba(194,245,66,.40);
}
.bet-bar .playing-with .pw-note{color:var(--ink-mute);font-size:10px;letter-spacing:.12em;}
@media (max-width:640px){
  .bet-bar .playing-with{flex-direction:column;gap:2px;padding:6px 12px;}
  .bet-bar .playing-with .pw-note{display:none;}
  .bet-bar .playing-with .pw-amount{font-size:18px;}
}

/* Bet bar — clarify on bigger button */
.bet-bar{
  background:var(--bg-2);
  border-top:2px solid var(--lime);
  box-shadow:0 -8px 30px rgba(194,245,66,.06);
}
.bet-amount .input{font-size:18px;font-weight:700;min-width:140px;padding:12px 14px;}
.bet-amount .field-label{font-size:11px;color:var(--ink-dim);}

/* BIG primary action button on game pages — glow + pulse */
.bet-action .btn{
  font-size:17px !important;font-weight:800 !important;letter-spacing:.08em !important;
  padding:18px 32px !important;min-width:160px;
  border-radius:10px !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 6px 18px rgba(194,245,66,.25);
}
.bet-action .btn.btn-lime{
  background:linear-gradient(180deg, #d4ff60 0%, #c2f542 60%, #a8df1f 100%) !important;
  color:#0b1300 !important;border:none !important;
  animation:pulse-lime 2.6s ease-in-out infinite;
}
.bet-action .btn.btn-lime:hover{
  background:linear-gradient(180deg, #e0ff7a 0%, #d4ff60 60%, #b9f138 100%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 8px 24px rgba(194,245,66,.5);
  animation:none;
}
.bet-action .btn.btn-gold{
  background:linear-gradient(180deg, #ffcd66 0%, #f5b840 60%, #d99a1c 100%) !important;
  color:#1a1108 !important;border:none !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 6px 18px rgba(245,184,64,.35);
}
.bet-action .btn.btn-gold:hover{
  background:linear-gradient(180deg, #ffd97a 0%, #ffc857 60%, #e7a82a 100%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 8px 24px rgba(245,184,64,.55);
}
.bet-action .btn.btn-gold:disabled{
  background:rgba(245,184,64,.15) !important;color:rgba(245,184,64,.45) !important;
  box-shadow:none;cursor:not-allowed;
}

@keyframes pulse-lime{
  0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 6px 18px rgba(194,245,66,.25);}
  50%{box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 6px 28px rgba(194,245,66,.55);}
}

/* Cost preview chip — sits next to the bet-amount input */
.bet-cost{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:8px;
  padding:8px 12px;border-radius:8px;
  background:rgba(255,56,102,.08);border:1px solid rgba(255,56,102,.25);
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--hot);
}
.bet-cost .bc-amt{font-family:var(--display);font-size:14px;font-weight:700;color:#ff6b8b;letter-spacing:-0.01em;}

@media (max-width:640px){
  .bet-action .btn{font-size:15px !important;padding:14px 18px !important;min-width:100px;}
  .bet-cost{margin-left:0;margin-top:6px;}
}

/* ---- Footer fix on game pages ---- */
.site-footer{
  padding:36px 0 !important;
  border-top:1px solid var(--line);
  background:var(--bg-2) !important;
  color:var(--ink-dim) !important;
  font-size:12px;
}
.site-footer a{
  color:var(--ink) !important;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(194,245,66,.4);
}
.site-footer a:hover{
  color:var(--lime) !important;
  text-decoration-color:var(--lime);
}
.site-footer .fline{color:var(--ink-dim);}
html[data-theme="light"] .site-footer{
  background:#e2dccf !important;color:#2a2520 !important;
}
html[data-theme="light"] .site-footer a{
  color:#161311 !important;text-decoration-color:#6b8b1a;
}

/* Small Visit buttons in room tables — make them readable */
.rooms-table .btn-sm.btn-lime{
  background:linear-gradient(180deg,#d4ff60,#c2f542) !important;
  color:#0b1300 !important;border:none !important;font-weight:800;
  padding:7px 14px !important;font-size:11px;
}

/* =========================================================
   §25 v3.5 - Game pages reskin to match site design system.
   Keep engine selectors intact (data-* attributes untouched).
   Override visual chrome only.
   ========================================================= */

/* Switch game body type stack to match the site */
body{
  font-family: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
}
.tnum, [data-bet], [data-target], [data-mult], [data-cashout], [data-balance],
.bet-cost .bc-amt, .game-status .v {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Game-shell layout — bigger breathing room, rounded cards */
.game-shell{
  max-width: 980px; margin: 0 auto; padding: 28px 20px 140px;
}
.game-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding:18px 22px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(99,102,241,0.10), rgba(236,72,153,0.06));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
}
[data-theme="light"] .game-head{
  background:linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04));
  border:1px solid rgba(0,0,0,0.06);
}
.game-head .left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.game-head .back{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase;
  color: rgba(236,72,153,0.85);
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(236,72,153,0.35);
}
.game-head .back:hover{ color:#fff; background:rgba(236,72,153,0.18); }
.game-head h1{
  font-family:'General Sans', sans-serif;
  font-weight:700; font-size:28px;
  background:linear-gradient(135deg, #fff 0%, #C7D2FE 60%, #F9A8D4 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="light"] .game-head h1{
  background:linear-gradient(135deg, #0A0E1A, #6366F1 60%, #EC4899);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.game-head .tag.lime{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  background:rgba(16,185,129,0.15); color:#10B981;
  border:1px solid rgba(16,185,129,0.35); border-radius:8px;
  padding:4px 9px; letter-spacing:.10em;
}
.game-head .meta{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; color: rgba(255,255,255,0.55);
  text-transform:uppercase; letter-spacing:.10em;
}
.wtp-toggle, .drawer-toggle{
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition: all .15s ease;
}
.wtp-toggle:hover, .drawer-toggle:hover{
  background:rgba(236,72,153,0.18); border-color:rgba(236,72,153,0.45);
}
[data-theme="light"] .wtp-toggle, [data-theme="light"] .drawer-toggle{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.10);
}

/* Game body / stage — soft rounded card with subtle inner glow */
.game-body{ display:block; }
.game-stage{
  padding:24px 22px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px -16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="light"] .game-stage{
  background:#fff; border-color:rgba(0,0,0,0.08);
  box-shadow:0 8px 28px -12px rgba(0,0,0,0.15);
}

.game-status{
  display:flex; gap:24px; justify-content:space-between;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom:14px;
}
.game-status .v{ color:#fff; font-weight:700; font-size:13px; letter-spacing:0; text-transform:none; }
.game-status .v.lime, .game-status .v.win{ color:#10B981; }
.game-status .v.ice{ color:#22D3EE; }
.game-status .v.lose, .game-status .v.hot{ color:#F43F5E; }

/* Bet bar — sticky bottom with site-matching colors */
.bet-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(15,23,42,0.98));
  backdrop-filter: blur(14px);
  border-top:1px solid rgba(236,72,153,0.20);
  padding: 0;
}
[data-theme="light"] .bet-bar{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98));
  border-top:1px solid rgba(236,72,153,0.22);
}

.playing-with{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 20px;
  background:linear-gradient(90deg, rgba(16,185,129,0.10), rgba(99,102,241,0.10), rgba(236,72,153,0.10));
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,255,255,0.65);
}
.pw-label{ color:rgba(255,255,255,0.55); }
.pw-amount{ color:#10B981; font-weight:700; font-size:13px; letter-spacing:0; }
.pw-note{ color:rgba(255,255,255,0.45); font-size:10px; }
[data-theme="light"] .playing-with{ color:rgba(0,0,0,0.65); }
[data-theme="light"] .pw-label{ color:rgba(0,0,0,0.55); }
[data-theme="light"] .pw-note{ color:rgba(0,0,0,0.50); }

.bet-bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  max-width:980px; margin:0 auto; padding:14px 20px;
}
.bet-amount{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.bet-amount .input{
  min-width:120px; padding:10px 14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  color:#fff; font-weight:700; font-size:15px;
  font-family:'JetBrains Mono', monospace;
}
.bet-amount .input:focus{
  outline:none; border-color:rgba(236,72,153,0.55);
  background:rgba(255,255,255,0.10);
}
[data-theme="light"] .bet-amount .input{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.10); color:#0A0E1A;
}
.field-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(255,255,255,0.55); margin-bottom:4px; display:block;
}
[data-theme="light"] .field-label{ color: rgba(0,0,0,0.55); }

.bet-chips{ display:flex; gap:6px; }
.bet-chip{
  padding:7px 11px; border-radius:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.75);
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
  transition:all .15s ease;
}
.bet-chip:hover{
  background:rgba(236,72,153,0.18);
  border-color:rgba(236,72,153,0.45);
  color:#fff;
}
[data-theme="light"] .bet-chip{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.10); color:rgba(0,0,0,0.70);
}

.bet-cost{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(236,72,153,0.14);
  border:1px solid rgba(236,72,153,0.35);
  color:#F9A8D4; font-family:'JetBrains Mono', monospace;
}
.bet-cost .bc-label{ font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.bet-cost .bc-amt{ font-size:14px; font-weight:700; color:#FBCFE8; }
[data-theme="light"] .bet-cost{ background:rgba(236,72,153,0.10); }
[data-theme="light"] .bet-cost .bc-label{ color:rgba(0,0,0,0.55); }
[data-theme="light"] .bet-cost .bc-amt{ color:#EC4899; }

.bet-action{ display:flex; gap:10px; }
.btn-lime, .btn.btn-lime{
  padding:14px 28px; border-radius:14px;
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  color:#0A0E1A; font-family:'General Sans', sans-serif;
  font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  border:none; box-shadow:0 10px 28px -10px rgba(16,185,129,0.65);
  transition: all .15s ease;
  animation: lime-pulse 2.6s ease-in-out infinite;
}
.btn-lime:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px rgba(16,185,129,0.75); }
.btn-lime:active{ transform:translateY(0); }
@keyframes lime-pulse{
  0%, 100%{ box-shadow:0 10px 28px -10px rgba(16,185,129,0.65); }
  50%{ box-shadow:0 14px 36px -8px rgba(16,185,129,0.85), 0 0 0 4px rgba(16,185,129,0.10); }
}

.btn.btn-ghost, .btn.btn-outline{
  padding:14px 22px; border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff; font-weight:700; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase;
}
.btn.btn-ghost:hover, .btn.btn-outline:hover{
  background:rgba(236,72,153,0.20);
  border-color:rgba(236,72,153,0.55);
}
[data-theme="light"] .btn.btn-ghost, [data-theme="light"] .btn.btn-outline{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.12); color:#0A0E1A;
}

/* Game-stage variants — softer, less terminal */
.crash-stage, .plinko-stage, .limbo-stage, .mines-grid, .chicken-grid,
.roulette-wheel, .dice-stage, .keno-grid, .coin-stage{
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
}
[data-theme="light"] .crash-stage,
[data-theme="light"] .plinko-stage,
[data-theme="light"] .limbo-stage,
[data-theme="light"] .mines-grid,
[data-theme="light"] .chicken-grid,
[data-theme="light"] .roulette-wheel,
[data-theme="light"] .dice-stage,
[data-theme="light"] .keno-grid,
[data-theme="light"] .coin-stage{
  background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.06);
}

/* Result history strip - shared component */
.result-history{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:14px; padding:10px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  min-height:42px; align-items:center;
}
.result-history__label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(255,255,255,0.45); margin-right:6px;
}
.result-pill{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:700;
  letter-spacing:.02em;
  animation: result-pop .4s cubic-bezier(.2,.9,.3,1.4) both;
}
.result-pill.win{
  background:rgba(16,185,129,0.18);
  color:#10B981; border:1px solid rgba(16,185,129,0.35);
}
.result-pill.lose{
  background:rgba(244,63,94,0.18);
  color:#F43F5E; border:1px solid rgba(244,63,94,0.35);
}
@keyframes result-pop{
  0%{ opacity:0; transform: scale(.7); }
  100%{ opacity:1; transform: scale(1); }
}
[data-theme="light"] .result-history{ background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.06); }
[data-theme="light"] .result-history__label{ color:rgba(0,0,0,0.50); }

/* Bigger, sharper limbo multiplier */
.limbo-stage{ min-height:360px; padding:32px; position:relative; }
.limbo-mult{
  font-family:'JetBrains Mono', monospace;
  font-size: clamp(64px, 12vw, 144px);
  font-weight:800; letter-spacing:-0.04em;
  color:#fff;
  transition: color .2s ease, text-shadow .2s ease, transform .15s ease;
}
.limbo-mult.win{ color:#10B981; text-shadow:0 0 56px rgba(16,185,129,0.55); }
.limbo-mult.lose{ color:#F43F5E; text-shadow:0 0 56px rgba(244,63,94,0.45); }
.limbo-mult.rolling{ animation: limbo-roll .35s linear infinite; }
@keyframes limbo-roll{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.limbo-target{
  position:absolute; top:18px; left:22px;
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:.10em; text-transform:uppercase;
  color: rgba(255,255,255,0.55);
}

/* Crash multiplier — same treatment */
.crash-stage{ min-height:380px; padding:24px; position:relative; overflow:hidden; }
.crash-mult{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'JetBrains Mono', monospace;
  font-size: clamp(56px, 10vw, 120px);
  font-weight:800; letter-spacing:-0.04em;
  color:#10B981; text-shadow:0 0 48px rgba(16,185,129,0.55);
  transition: color .2s ease, text-shadow .2s ease;
}
.crash-mult.boom{
  color:#F43F5E; text-shadow:0 0 56px rgba(244,63,94,0.65);
  animation: boom-flash .5s ease-out;
}
@keyframes boom-flash{
  0%{ transform:translate(-50%,-50%) scale(1); }
  35%{ transform:translate(-50%,-50%) scale(1.18); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}
.crash-status{
  position:absolute; top:18px; left:22px;
  font-family:'General Sans','Inter',sans-serif; font-size:12px;
  font-weight:600;
  letter-spacing:0; text-transform:capitalize;
  color: rgba(255,255,255,0.55);
}

/* Big result flash badge - shows BELOW / ABOVE / BUST briefly */
.big-flash{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'General Sans', sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  font-weight:900;
  letter-spacing:.02em; text-transform:uppercase;
  padding:14px 36px; border-radius:18px;
  pointer-events:none; opacity:0;
  z-index:5;
  animation: big-flash 1.1s cubic-bezier(.2,.9,.3,1.4) forwards;
}
.big-flash.win{
  background:rgba(16,185,129,0.20);
  border:2px solid rgba(16,185,129,0.65);
  color:#10B981;
  text-shadow:0 0 28px rgba(16,185,129,0.55);
}
.big-flash.lose{
  background:rgba(244,63,94,0.20);
  border:2px solid rgba(244,63,94,0.65);
  color:#F43F5E;
  text-shadow:0 0 28px rgba(244,63,94,0.55);
}
@keyframes big-flash{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  18%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  82%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.15); }
}

/* Mines tile sheen */
.mines-grid{ padding:20px; }
.mines-tile{
  border-radius:14px;
  background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(236,72,153,0.06));
  border:1px solid rgba(255,255,255,0.10);
  transition: all .15s ease;
}
.mines-tile:hover:not(.opened){
  background:linear-gradient(135deg, rgba(99,102,241,0.22), rgba(236,72,153,0.14));
  border-color:rgba(236,72,153,0.55);
  transform: translateY(-2px);
}
.mines-tile.gem{
  background:linear-gradient(135deg, rgba(16,185,129,0.30), rgba(34,211,238,0.20));
  border-color:rgba(16,185,129,0.65);
  animation: gem-pop .35s cubic-bezier(.2,.9,.3,1.4);
}
.mines-tile.bomb{
  background:linear-gradient(135deg, rgba(244,63,94,0.35), rgba(239,68,68,0.20));
  border-color:rgba(244,63,94,0.65);
  animation: bomb-shake .35s ease;
}
@keyframes gem-pop{ 0%{ transform:scale(.7); } 100%{ transform:scale(1); } }
@keyframes bomb-shake{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}

/* Mines stat bar - softer */
.mines-bar .it{
  background: rgba(99,102,241,0.10);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:12px;
}
.mines-bar .it .k{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.mines-bar .it .v{
  font-family:'JetBrains Mono', monospace; font-size:22px; font-weight:800;
  color:#10B981; margin-top:6px;
}
[data-theme="light"] .mines-bar .it{ background:rgba(99,102,241,0.06); }
[data-theme="light"] .mines-bar .it .k{ color:rgba(0,0,0,0.55); }

/* §30 v3.6 — match site typography: ditch terminal vibe in game-head chrome */
.game-head .back{
  font-family:'General Sans','Inter',sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none;
  padding:7px 14px;
}
.game-head .meta{
  font-family:'General Sans','Inter',sans-serif;
  font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none;
  color: rgba(255,255,255,0.62);
}
[data-theme="light"] .game-head .meta{ color: rgba(0,0,0,0.55); }
.game-head .tag.lime{
  font-family:'General Sans','Inter',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:0; text-transform:none;
  padding:5px 10px;
}
.wtp-toggle, .drawer-toggle{
  font-family:'General Sans','Inter',sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none;
  padding:8px 14px;
}
/* Round id / phase / status labels above the stage — kill the uppercase mono */
.game-status, .game-status .label, .game-status .v,
[data-round-id], [data-phase]{
  font-family:'General Sans','Inter',sans-serif !important;
  letter-spacing:0; text-transform:none;
}
.game-status .label{
  font-size:12px; font-weight:600; color:var(--ink-mute);
}
.game-status .v{
  font-family:'JetBrains Mono','IBM Plex Mono',monospace !important;
  font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:700; color:#fff;
}
[data-theme="light"] .game-status .v{ color:#111; }
[data-phase]{
  font-size:12px; font-weight:600; color:var(--ink-mute);
  text-transform:none;
}
/* "PLAYING WITH ... DEMO BANKROLL NO REAL MONEY NO SIGNUP" footer strip */
.bet-bar .playing-with,
.bet-bar .playing-with .pw-label,
.bet-bar .playing-with .pw-note{
  font-family:'General Sans','Inter',sans-serif;
  letter-spacing:0; text-transform:none;
}
.bet-bar .playing-with .pw-label{ font-size:13px; font-weight:600; }
.bet-bar .playing-with .pw-note{ font-size:11px; font-weight:500; opacity:.7; }
/* Cost pill keeps mono on the number, sans on the label */
.bet-cost .bc-label{
  font-family:'General Sans','Inter',sans-serif;
  font-size:11px; font-weight:600; text-transform:none; letter-spacing:0;
}
/* Header bankroll pill matches site bankroll-pill */
.balance.balance--big{ font-family:'General Sans','Inter',sans-serif; }
.balance .label{
  font-family:'General Sans','Inter',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
}
.balance .v{
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;
}
/* Breadcrumb on game pages — match rest of site */
.game-shell .breadcrumb,
nav.breadcrumb{
  font-family:'General Sans','Inter',sans-serif;
  font-size:13px; letter-spacing:0; text-transform:none;
  font-weight:500;
}
/* Hero subtitle "PLACE BET. WAIT. CASH OUT." */
.game-head .game-tag,
.game-head .game-tagline{
  font-family:'General Sans','Inter',sans-serif !important;
  font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none;
  color: rgba(255,255,255,0.62);
}

/* data-status is the game-head tagline — should NOT use mono */
.game-head .meta [data-status],
.game-head .meta [data-status].v{
  font-family:'General Sans','Inter',sans-serif !important;
  font-variant-numeric:normal !important;
  font-size:13px; font-weight:500;
  color: rgba(255,255,255,0.62);
  letter-spacing:0; text-transform:none;
}
[data-theme="light"] .game-head .meta [data-status]{
  color: rgba(0,0,0,0.55);
}