/* ============================================================
   MintyGang · Casino — pink & black
   ------------------------------------------------------------
   Loaded AFTER mint.css. Everything is scoped under .casino-page
   so it overrides the legacy casino rules without touching the
   rest of the site.

   Palette rule for this page: black, white, and pink. Nothing
   else. Win/lose is told apart by BRIGHTNESS, not by hue —
   a win glows pink, a loss goes flat and grey.
   Layout: [ rail | stage | leaderboard ].
   ============================================================ */

.casino-page{
  --ink:      #08090d;                 /* fond sombre zinc */
  --pane:     #111420;
  --pane-2:   #161a29;
  --line:     rgba(255,255,255,.08);   /* bordures subtiles */
  --line-2:   rgba(244,114,182,.3);      /* accent actif */

  --p:        #f472b6;                 /* vert menthe moderne */
  --p-lo:     #db2777;
  --p-hi:     #fbcfe8;
  --p-glow:   rgba(244,114,182,.45);

  --win:      #f472b6;                 /* win = minty glow */
  --dim:      #717888;                 /* gris zinc */

  --rail-w:   220px;
  --lb-w:     360px;
  --gap:      16px;
  --r:        16px;
}

.casino-page{ background:var(--ink); }
.casino-page .cas-shell{ padding:92px 22px 56px; max-width:1660px; margin:0 auto; }

/* ---------- Page head ---------- */
.cas-top{ margin-bottom:18px; }
.cas-top h1{
  font-family:Sora,Poppins,sans-serif; font-size:clamp(24px,2.6vw,34px);
  line-height:1.1; margin:0; letter-spacing:-.02em; color:#fff;
}
.cas-top h1 span{ color:var(--p); }

/* ---------- The 3-column grid ---------- */
.cas-grid{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr) var(--lb-w);
  gap:var(--gap);
  align-items:start;
}

/* ============================================================
   LEFT RAIL — wallet + game list
   ============================================================ */
.rail{ position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; }

.wallet-card{
  background:var(--pane); border:1px solid var(--line-2); border-radius:var(--r);
  padding:15px 15px 13px;
}
.wallet-lbl{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:700;
}
.wallet-bal{ display:flex; align-items:center; gap:9px; margin-top:7px; }
.wallet-bal .mint-coin{ width:30px; height:30px; flex:none; }
.bal-num{
  font-family:Sora,Poppins,sans-serif; font-weight:800; font-size:23px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fff; line-height:1;
}
.bal-num .dec{ font-size:14px; color:var(--p-hi); font-weight:700; }
.bal-num.bump{ animation:balBump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes balBump{ 0%{transform:scale(1)} 35%{transform:scale(1.12); color:var(--win)} 100%{transform:scale(1)} }
.bal-num.bump-down{ animation:balDown .5s ease; }
@keyframes balDown{ 0%{transform:scale(1)} 35%{transform:scale(.94); color:var(--dim)} 100%{transform:scale(1)} }

.wallet-rate{
  margin-top:6px; font-size:11px; color:var(--dim);
  display:flex; align-items:center; gap:6px;
}
.wallet-rate i{ width:6px; height:6px; border-radius:50%; background:var(--p); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 50%{opacity:.3} }

.daily-btn{
  width:100%; margin-top:12px; cursor:pointer;
  padding:10px 12px; border-radius:11px; font:700 13px Poppins,sans-serif;
  color:#fff; background:var(--p); border:0; transition:.16s;
}
.daily-btn:hover:not(:disabled){ background:var(--p-hi); color:#1a0210; }
.daily-btn:disabled{
  background:transparent; color:var(--dim); cursor:default;
  border:1px solid var(--line); font-variant-numeric:tabular-nums;
}

.rail-box{
  background:var(--pane); border:1px solid var(--line); border-radius:var(--r); padding:8px;
}
.rail-title{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:700; padding:5px 8px 8px;
}
.rail-list{ display:flex; flex-direction:column; gap:2px; }
.rail-item-thumb{
  width:24px;height:24px;border-radius:6px;overflow:hidden;flex:none;
}
.rail-item-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rail-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:10px; cursor:pointer;
  background:transparent; border:0; color:var(--dim);
  font:600 13.5px Poppins,sans-serif; text-align:left; transition:.14s;
}
.rail-item svg{ width:18px; height:18px; flex:none; color:currentColor; }
.rail-item:hover{ color:#fff; background:rgba(255,255,255,.04); }
.rail-item.on{ background:var(--p); color:#fff; }
.rail-tag{
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.08em;
  padding:2px 6px; border-radius:5px; text-transform:uppercase;
  background:var(--p); color:#fff;
}
.rail-item.on .rail-tag{ background:#fff; color:var(--p); }

/* ============================================================
   CENTER STAGE
   ============================================================ */
.stage{ min-width:0; display:flex; flex-direction:column; gap:var(--gap); }

.stage-card{
  background:var(--pane); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stage-head{
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--line);
}
.stage-head .ic{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(244,114,182,0.25);
  color:#fff; flex:none; overflow:hidden;
}
.stage-head .ic img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:10px;
}
.stage-head .ic svg{ width:22px; height:22px; }
.stage-head h2{ margin:0; font:800 18px Sora,Poppins,sans-serif; letter-spacing:-.01em; color:#fff; }
.stage-head .edge{
  margin-left:auto; font-size:10px; color:var(--dim); text-align:right;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.stage-head .edge b{ color:var(--p-hi); display:block; font-size:14px; letter-spacing:0; text-transform:none; }

/* game panels */
.game{ display:none; }
.game.on{ display:block; animation:gameIn .24s ease; }
@keyframes gameIn{ from{opacity:0} to{opacity:1} }

.board{
  position:relative; padding:24px 18px;
  min-height:340px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:var(--ink);
}

/* ---------- Bet bar (shared by every game) ---------- */
.betbar{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line);
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); font-weight:700;
}
.bet-wrap{
  display:flex; align-items:center; background:var(--ink);
  border:1px solid var(--line); border-radius:11px; overflow:hidden; transition:.16s;
}
.bet-wrap:focus-within{ border-color:var(--p); }
.bet-wrap .mint-coin{ width:17px; height:17px; margin-left:11px; flex:none; }
.bet-wrap input{
  width:110px; background:transparent; border:0; outline:0; color:#fff;
  font:700 15px Poppins,sans-serif; padding:10px 8px; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.bet-wrap input::-webkit-outer-spin-button,
.bet-wrap input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bet-wrap button{
  background:transparent; border:0; border-left:1px solid var(--line);
  color:var(--dim); font:800 11.5px Poppins,sans-serif; padding:11px; cursor:pointer; transition:.14s;
}
.bet-wrap button:hover{ background:var(--p); color:#fff; }

/* segmented selector (risk / rows / difficulty) */
.seg{
  display:inline-flex; background:var(--ink);
  border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px;
}
.seg button{
  border:0; background:transparent; color:var(--dim); cursor:pointer;
  font:700 12.5px Poppins,sans-serif; padding:7px 13px; border-radius:8px; transition:.14s;
}
.seg button:hover:not(:disabled){ color:#fff; }
.seg button.on{ background:var(--p); color:#fff; }
.seg button:disabled{ opacity:.4; cursor:not-allowed; }
.seg.small button{ padding:6px 10px; font-size:11.5px; }

/* main action button */
.play-btn{
  margin-left:auto; border:0; cursor:pointer; min-width:164px;
  padding:13px 26px; border-radius:12px; color:#fff;
  font:800 15px Sora,Poppins,sans-serif; background:var(--p); transition:.14s;
}
.play-btn:hover:not(:disabled){ background:var(--p-hi); color:#1a0210; }
.play-btn:active:not(:disabled){ transform:scale(.985); }
.play-btn:disabled{ opacity:.35; cursor:not-allowed; }

.ghost-btn{
  border:1px solid var(--line-2); background:transparent; color:#fff;
  padding:12px 18px; border-radius:11px; font:700 13.5px Poppins,sans-serif;
  cursor:pointer; transition:.14s;
}
.ghost-btn:hover:not(:disabled){ background:var(--p); border-color:var(--p); }
.ghost-btn:disabled{ opacity:.3; cursor:not-allowed; border-color:var(--line); color:var(--dim); }

/* payout preview */
.payout{ display:flex; flex-direction:column; gap:2px; padding:0 4px; font-variant-numeric:tabular-nums; }
.payout .k{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.payout .v{ font:800 16px Sora,Poppins,sans-serif; color:var(--p-hi); }

/* result line */
.result{
  min-height:21px; font:700 14px Poppins,sans-serif; text-align:center;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.result.win{ color:var(--win); }
.result.lose{ color:var(--dim); }
.result b{ color:#fff; }

/* history strip of past multipliers */
.hist{
  display:flex; gap:6px; padding:9px 18px; overflow:hidden;
  border-top:1px solid var(--line); min-height:36px; align-items:center;
}
.hist:empty{ display:none; }
.chip{
  flex:none; padding:4px 10px; border-radius:7px; font:800 12px Poppins,sans-serif;
  font-variant-numeric:tabular-nums; animation:chipIn .28s ease;
  background:rgba(255,255,255,.05); color:var(--dim);
}
@keyframes chipIn{ from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none} }
.chip.w{ background:rgba(255,47,151,.18); color:var(--p-hi); }
.chip.l{ background:transparent; color:var(--dim); box-shadow:inset 0 0 0 1px var(--line); }
.chip.big{ background:#fff; color:var(--p-lo); }

/* ============================================================
   RIGHT — the big leaderboard
   ============================================================ */
.lb{
  position:sticky; top:84px;
  display:flex; flex-direction:column; gap:var(--gap);
}
/* Nothing scrolls inside the rail any more, so on a short viewport a sticky
   column would park its bottom rows off-screen with no way to reach them.
   Below this height it just scrolls with the page instead. */
@media (max-height:880px){ .lb{ position:static; } }
.lb-card{
  background:var(--pane); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.lb-head{ padding:15px 15px 12px; border-bottom:1px solid var(--line); }
.lb-head .row{ display:flex; align-items:center; gap:10px; }
.lb-head h3{
  margin:0; font:800 16px Sora,Poppins,sans-serif; color:#fff;
  display:flex; align-items:center; gap:9px;
}
.lb-head h3 svg{ width:19px; height:19px; color:var(--p); }
.lb-live{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--p);
}
.lb-live i{ width:6px; height:6px; border-radius:50%; background:var(--p); animation:pulseDot 1.6s infinite; }
.lb-tabs{ display:flex; gap:3px; margin-top:12px; }
.lb-tabs button{
  flex:1; border:0; background:transparent; color:var(--dim);
  font:700 11.5px Poppins,sans-serif; padding:7px 4px; border-radius:8px;
  cursor:pointer; transition:.14s;
}
.lb-tabs button:hover{ color:#fff; }
.lb-tabs button.on{ background:var(--p); color:#fff; }

.lb-list{ padding:7px; display:flex; flex-direction:column; gap:3px; }

.lb-row{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:10px; border:1px solid transparent; transition:.14s;
}
.lb-row:hover{ background:rgba(255,255,255,.04); }
.lb-rank{
  width:24px; flex:none; text-align:center; font:800 13px Sora,Poppins,sans-serif;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.lb-av,.lb-noav{ width:32px; height:32px; border-radius:50%; flex:none; object-fit:cover; }
.lb-av{ border:1.5px solid var(--line); }
.lb-noav{
  display:grid; place-items:center; font:800 13px Poppins,sans-serif; color:#fff;
  background:var(--p-lo); border:1.5px solid var(--line);
}
.lb-name{
  flex:1; min-width:0; font:600 13.5px Poppins,sans-serif; color:#e9dfe6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-bal{
  display:flex; align-items:center; gap:5px; flex:none;
  font:800 13.5px Sora,Poppins,sans-serif; color:#fff; font-variant-numeric:tabular-nums;
}
.lb-bal .mint-coin{ width:14px; height:14px; }

/* podium — brightest pink at the top, fading down */
.lb-row.p1{ background:var(--p); }
.lb-row.p1 .lb-rank,.lb-row.p1 .lb-name{ color:#fff; }
.lb-row.p1 .lb-av,.lb-row.p1 .lb-noav{ border-color:#fff; }
.lb-row.p2{ background:rgba(255,47,151,.22); }
.lb-row.p2 .lb-rank{ color:var(--p-hi); }
.lb-row.p3{ background:rgba(255,47,151,.1); }
.lb-row.p3 .lb-rank{ color:var(--p-hi); }
.lb-row.me{ box-shadow:inset 0 0 0 1.5px var(--p); }
.lb-row.me .lb-name::after{ content:' · you'; color:var(--p-hi); font-weight:800; font-size:11px; }

.lb-foot{ border-top:1px solid var(--line); padding:9px 12px; }
.lb-empty{ padding:32px 16px; text-align:center; color:var(--dim); font-size:13px; line-height:1.6; }

/* live bet feed */
.feed-card{
  background:var(--pane); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; flex:none;
}
.feed-head{
  padding:10px 14px; border-bottom:1px solid var(--line);
  font:800 10px Poppins,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:8px;
}
.feed-head svg{ width:13px; height:13px; color:var(--p); }
.feed-row{
  display:flex; align-items:center; gap:9px; padding:7px 13px;
  font-size:12px; border-bottom:1px solid rgba(255,255,255,.03);
  animation:chipIn .28s ease;
}
.feed-row .who{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e9dfe6; }
.feed-row .gm{ color:var(--dim); font-size:11px; flex:none; }
.feed-row .mx{ font-weight:800; flex:none; font-variant-numeric:tabular-nums; }
.feed-row .mx.w{ color:var(--win); }
.feed-row .mx.l{ color:var(--dim); }

/* ============================================================
   GAME: Coin flip
   ============================================================ */
.coin3d{ width:164px; height:164px; perspective:900px; }
.coin3d .inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 0s;
}
.coin3d .face{
  position:absolute; inset:0; backface-visibility:hidden;
  display:grid; place-items:center; border-radius:50%;
  overflow:hidden;
}
.coin3d .face svg{ width:100%; height:100%; }
.coin3d .face img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:50%; }
.coin3d .back{ transform:rotateY(180deg); }
/* The spin is driven from JS (it has to land on the face that actually
   came up), so CSS only adds the hop. */
.coin3d.spin{ animation:coinHop 1.45s cubic-bezier(.25,.7,.2,1); }
@keyframes coinHop{ 0%{transform:translateY(0)} 45%{transform:translateY(-54px)} 100%{transform:translateY(0)} }

.side-pick{ display:flex; gap:10px; }
.side-btn{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 22px; border-radius:12px; cursor:pointer; transition:.14s;
  background:transparent; border:1px solid var(--line); color:var(--dim);
  font:700 13px Poppins,sans-serif;
}
.side-btn svg{ width:40px; height:40px; }
.side-thumb{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:block; }
.side-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.side-btn:hover{ border-color:var(--p); color:#fff; }
.side-btn.on{ border-color:var(--p); background:rgba(244,114,182,0.12); color:#fff; box-shadow:0 0 16px rgba(244,114,182,0.2); }

/* ============================================================
   GAME: Slots
   ============================================================ */
.reels{
  display:flex; gap:10px; padding:14px; border-radius:16px;
  background:var(--pane-2); border:1px solid var(--line);
}
.reel{
  width:104px; height:126px; border-radius:12px; overflow:hidden; position:relative;
  background:var(--ink); border:1px solid var(--line); transition:.16s;
}
.reel::before,.reel::after{
  content:''; position:absolute; left:0; right:0; height:24px; z-index:2; pointer-events:none;
}
.reel::before{ top:0; background:linear-gradient(180deg,var(--ink),transparent); }
.reel::after{ bottom:0; background:linear-gradient(0deg,var(--ink),transparent); }
.reel .strip{ display:flex; flex-direction:column; will-change:transform; }
.reel .sym{ height:126px; display:grid; place-items:center; }
.reel .sym svg{ width:64px; height:64px; }
.reel.hit{ border-color:var(--p); box-shadow:0 0 0 1px var(--p), 0 0 24px var(--p-glow); }
.paytable{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; font-size:11px; color:var(--dim); }
.paytable span{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border:1px solid var(--line); border-radius:7px;
}
.paytable svg{ width:15px; height:15px; }
.paytable b{ color:var(--p-hi); font-variant-numeric:tabular-nums; }

/* ============================================================
   GAME: Plinko
   ============================================================ */
.plinko-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
#plinko-canvas{
  width:100%; max-width:640px; height:auto; aspect-ratio:1/.92;
  border-radius:14px; background:var(--pane-2); border:1px solid var(--line); touch-action:none;
}
.pl-buckets{ display:flex; gap:3px; width:100%; max-width:640px; }
.pl-bucket{
  flex:1 1 0; min-width:0; text-align:center; padding:6px 1px; border-radius:6px;
  font:800 10.5px Poppins,sans-serif; font-variant-numeric:tabular-nums;
  transition:transform .1s, filter .1s; transform-origin:top;
}
.pl-bucket.flash{ transform:translateY(6px); filter:brightness(1.5); }

/* ============================================================
   GAME: Chicken Road
   ============================================================ */
.chick-wrap{ width:100%; display:flex; flex-direction:column; gap:10px; }
#chicken-canvas{
  width:100%; height:auto; aspect-ratio:16/8.2; border-radius:14px;
  background:var(--ink); border:1px solid var(--line); display:block;
}
.chick-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 14px; border-radius:12px; border:1px solid var(--line);
}
.chick-stat{ display:flex; flex-direction:column; gap:1px; }
.chick-stat .k{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.chick-stat .v{ font:800 18px Sora,Poppins,sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.chick-stat .v.hot{ color:var(--win); }
.chick-stat .v.next{ color:var(--dim); font-size:15px; }

/* ============================================================
   GAME: Crash
   ============================================================ */
.crash-wrap{ width:100%; position:relative; }
#crash-canvas{
  width:100%; height:auto; aspect-ratio:16/8; border-radius:14px;
  background:var(--pane-2); border:1px solid var(--line); display:block;
}
.crash-mult{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font:900 clamp(38px,7vw,70px) Sora,Poppins,sans-serif; letter-spacing:-.03em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.crash-mult.boom{ color:var(--dim); animation:boomShake .4s; }
@keyframes boomShake{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-8px,4px)}
  40%{transform:translate(7px,-5px)} 60%{transform:translate(-5px,-3px)} 80%{transform:translate(4px,4px)}
}
.crash-mult.cashed{ color:var(--win); text-shadow:0 0 44px var(--p-glow); }
.crash-mult.tick{ animation:multTick .2s ease-out; }
@keyframes multTick{ 0%{transform:scale(1)} 50%{transform:scale(1.055)} 100%{transform:scale(1)} }

/* ============================================================
   GAME: Wheel
   ============================================================ */
.wheel-wrap{ position:relative; width:290px; height:290px; }
.wheel-wrap .ptr{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:22px solid #fff;
}
#wheel-svg{ width:100%; height:100%; transition:transform 4.4s cubic-bezier(.15,.85,.15,1); }
.wheel-hub{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none; background:var(--ink);
  border:2px solid var(--p); font:800 20px Sora,Poppins,sans-serif;
  color:#fff; font-variant-numeric:tabular-nums;
}

/* ============================================================
   GAME: Dice (slider)
   ============================================================ */
.dice-wrap{ width:100%; max-width:600px; display:flex; flex-direction:column; gap:20px; }
.dice-readout{
  text-align:center; font:900 clamp(40px,7vw,64px) Sora,Poppins,sans-serif;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:#fff;
}
.dice-readout.w{ color:var(--win); text-shadow:0 0 34px var(--p-glow); }
.dice-readout.l{ color:var(--dim); }
/* dark half = the losing side, pink half = the winning side */
.dice-track{
  position:relative; height:14px; border-radius:8px; margin:26px 0 8px;
  background:linear-gradient(90deg,#1c1119 0%,#1c1119 var(--split,50%),var(--p) var(--split,50%),var(--p) 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.dice-track.flip{ background:linear-gradient(90deg,var(--p) 0%,var(--p) var(--split,50%),#1c1119 var(--split,50%),#1c1119 100%); }
.dice-track input[type=range]{
  position:absolute; inset:-10px 0; width:100%; height:34px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:grab;
}
.dice-track input[type=range]:active{ cursor:grabbing; }
.dice-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:32px; border-radius:7px; cursor:grab;
  background:#fff; border:2px solid var(--p);
}
.dice-track input[type=range]::-moz-range-thumb{
  width:22px; height:32px; border-radius:7px; border:2px solid var(--p); background:#fff;
}
.dice-marker{
  position:absolute; top:-32px; transform:translateX(-50%); pointer-events:none;
  background:#fff; color:#12060c; font:800 12px Poppins,sans-serif;
  padding:3px 9px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.dice-marker::after{
  content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #fff;
}
.dice-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.dice-stats{ display:flex; gap:8px; }
.dice-stats .box{ flex:1; border:1px solid var(--line); border-radius:11px; padding:9px 12px; }
.dice-stats .k{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); font-weight:700; }
.dice-stats .v{ font:800 16px Sora,Poppins,sans-serif; color:#fff; font-variant-numeric:tabular-nums; margin-top:2px; }

/* ============================================================
   GAME: Roulette
   ============================================================ */
.rl-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.rl-track{
  position:relative; width:100%; max-width:660px; height:84px; overflow:hidden;
  border-radius:12px; border:1px solid var(--line); background:var(--ink);
}
.rl-strip{ display:flex; height:100%; will-change:transform; }
.rl-cell{
  width:64px; flex:none; display:grid; place-items:center;
  font:800 19px Sora,Poppins,sans-serif; color:#fff; border-right:1px solid var(--ink);
  font-variant-numeric:tabular-nums;
}
.rl-cell.r{ background:var(--p); }
.rl-cell.b{ background:#191219; }
.rl-cell.g{ background:#fff; color:var(--ink); }
.rl-needle{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:#fff; z-index:2;
}
.rl-bets{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; width:100%; max-width:660px; }
.rl-bet{
  padding:11px 6px; border-radius:10px; cursor:pointer; transition:.14s;
  border:1px solid var(--line); background:transparent; color:var(--dim);
  font:700 12.5px Poppins,sans-serif;
}
.rl-bet:hover{ color:#fff; border-color:var(--p); }
.rl-bet.on{ background:var(--p); border-color:var(--p); color:#fff; }
.rl-bet.red{ border-color:var(--line-2); color:var(--p-hi); }
.rl-bet.black{ background:#191219; }
.rl-bet.black.on{ background:#fff; color:var(--ink); border-color:#fff; }
.rl-bet small{ display:block; font-size:10px; opacity:.65; font-weight:600; }
.rl-num{ display:flex; align-items:center; gap:8px; width:100%; max-width:660px; }
.rl-num input{
  width:88px; background:var(--ink); border:1px solid var(--line);
  border-radius:9px; color:#fff; font:700 14px Poppins,sans-serif; padding:9px 12px; outline:0;
}
.rl-num input:focus{ border-color:var(--p); }

/* ============================================================
   GAME: Hi-Lo
   ============================================================ */
.hl-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.card{
  width:128px; height:180px; border-radius:12px; position:relative;
  background:#fff; color:var(--ink);
  display:grid; place-items:center; font:900 56px Sora,Poppins,sans-serif; letter-spacing:-.04em;
}
.card.red{ color:var(--p); }
.card .pip{ position:absolute; font-size:17px; font-weight:800; }
.card .pip.tl{ top:9px; left:11px; }
.card .pip.br{ bottom:9px; right:11px; transform:rotate(180deg); }
.card.deal{ animation:cardDeal .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes cardDeal{ from{transform:translateY(-24px) rotateX(60deg) scale(.85); opacity:0} to{transform:none; opacity:1} }
.hl-picks{ display:flex; gap:10px; }
.hl-pick{
  min-width:154px; padding:13px 18px; border-radius:12px; cursor:pointer; transition:.14s;
  border:1px solid var(--line); background:transparent; color:#e9dfe6;
  font:700 14px Poppins,sans-serif; text-align:center;
}
.hl-pick:hover:not(:disabled){ border-color:var(--p); }
.hl-pick:disabled{ opacity:.35; cursor:not-allowed; }
.hl-pick b{
  display:block; font:800 19px Sora,Poppins,sans-serif; color:var(--p-hi);
  margin-top:3px; font-variant-numeric:tabular-nums;
}

/* ============================================================
   GAME: Mines
   ============================================================ */
.mn-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mn-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:9px;
  width:100%; max-width:492px; aspect-ratio:1;
}
.mn-tile{
  position:relative; border:1px solid var(--line); border-radius:13px; cursor:default;
  background:var(--pane-2); padding:0; overflow:hidden;
  transition:transform .12s, background .16s, border-color .16s;
}
/* only clickable while a round is live */
.mn-grid.live .mn-tile:not(.open){ cursor:pointer; }
.mn-grid.live .mn-tile:not(.open):hover{
  background:#241129; border-color:var(--p); transform:translateY(-2px);
}
.mn-grid.live .mn-tile:not(.open):active{ transform:translateY(0) scale(.97); }
.mn-face{ position:absolute; inset:16%; display:grid; place-items:center; }
.mn-face svg{ width:100%; height:100%; display:block; }
.mn-tile.open{ animation:mnPop .3s ease; }
.mn-tile.open.gem{ background:rgba(255,47,151,.14); border-color:var(--p); }
.mn-tile.open.bomb{ background:rgba(255,47,151,.3); border-color:var(--p-hi); }
/* a bomb you never touched — revealed after the round, so it stays dim */
.mn-tile.open.ghost{ background:var(--ink); border-color:var(--line); opacity:.5; }
@keyframes mnPop{ 0%{transform:scale(.72);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
.mn-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%;
  padding:11px 14px; border-radius:12px; border:1px solid var(--line);
}

/* ============================================================
   GAME: Keno
   ============================================================ */
.kn-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.kn-grid{
  display:grid; grid-template-columns:repeat(10,1fr); gap:7px;
  width:100%; max-width:660px;
}
.kn-cell{
  aspect-ratio:1; border:1px solid var(--line); border-radius:10px; cursor:pointer;
  background:var(--pane-2); color:var(--dim); padding:0;
  font:800 14px Sora,Poppins,sans-serif; font-variant-numeric:tabular-nums;
  transition:transform .12s, background .16s, border-color .16s, color .16s;
}
.kn-cell:hover{ color:#fff; border-color:var(--p); transform:translateY(-2px); }
.kn-cell.pick{ background:var(--p-lo); border-color:var(--p); color:#fff; }
/* drawn = the house pulled it; hit = it was also one of yours */
.kn-cell.drawn{ background:var(--ink); border-color:var(--dim); color:var(--dim); }
.kn-cell.hit{
  background:var(--p); border-color:var(--p-hi); color:#fff;
  animation:knHit .34s ease; box-shadow:0 0 16px rgba(255,47,151,.5);
}
.kn-cell.miss{ background:var(--pane-2); border-color:var(--line); color:var(--dim); opacity:.45; }
@keyframes knHit{ 0%{transform:scale(.8)} 55%{transform:scale(1.18)} 100%{transform:scale(1)} }
.kn-pay{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  width:100%; max-width:660px;
}
.kn-payc{
  flex:1 1 62px; min-width:0; text-align:center; padding:7px 4px; border-radius:9px;
  border:1px solid var(--line); background:var(--pane-2);
  transition:background .16s, border-color .16s, transform .12s;
}
.kn-payc b{
  display:block; font:700 9.5px Poppins,sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
}
.kn-payc span{
  display:block; font:800 13px Sora,Poppins,sans-serif; color:#fff;
  font-variant-numeric:tabular-nums;
}
.kn-payc.off span{ color:var(--dim); }
.kn-payc.on{ background:var(--p); border-color:var(--p-hi); transform:translateY(-2px); }
.kn-payc.on b, .kn-payc.on span{ color:#fff; }
.kn-hint{ font:600 12.5px Poppins,sans-serif; color:var(--dim); text-align:center; padding:8px; }

@media (max-width:640px){
  .kn-grid{ grid-template-columns:repeat(5,1fr); }
  .kn-cell{ font-size:13px; }
}

/* ============================================================
   GAME: Blackjack
   ============================================================ */
.bj-wrap{
  position:relative; width:100%; display:flex; flex-direction:column;
  align-items:center; gap:12px; padding:14px 0;
}
.bj-side{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bj-label{
  font:700 10px Poppins,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:9px;
}
.bj-tot{
  font:800 15px Sora,Poppins,sans-serif; letter-spacing:0; color:#fff;
  font-variant-numeric:tabular-nums; padding:1px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--pane-2);
}
.bj-hand{ display:flex; justify-content:center; gap:9px; min-height:112px; flex-wrap:wrap; }
/* the felt line between the two hands — decorative, no content */
.bj-felt{
  width:100%; max-width:520px; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.bj-card{
  width:78px; height:110px; flex:none; border-radius:11px; position:relative;
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:8px 9px; color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  animation:bjDeal .3s cubic-bezier(.2,.9,.3,1.2) backwards;
}
.bj-card.settled{ animation:none; }
.bj-card .rk{ font:800 21px Sora,Poppins,sans-serif; line-height:1; }
.bj-card .su{ font-size:20px; line-height:1; align-self:flex-end; }
.bj-card.red{ color:var(--p-lo); }
/* face-down hole card — pink weave, never shows a rank */
.bj-card.back{
  background:
    repeating-linear-gradient(45deg, var(--p-lo) 0 6px, transparent 6px 12px),
    linear-gradient(160deg,#2a0f21,#12060c);
  border-color:var(--line-2);
}
@keyframes bjDeal{
  from{ transform:translateY(-26px) rotate(-7deg); opacity:0; }
  to  { transform:none; opacity:1; }
}
@media (max-width:640px){
  .bj-card{ width:62px; height:88px; padding:6px 7px; }
  .bj-card .rk{ font-size:17px; }
  .bj-card .su{ font-size:16px; }
  .bj-hand{ min-height:90px; }
}

/* ============================================================
   GAME: Limbo
   ============================================================ */
.lm-wrap{
  width:100%; display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:26px 0;
}
.lm-roll{
  font:800 clamp(46px,11vw,92px) Sora,Poppins,sans-serif; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:color .18s, text-shadow .18s;
}
.lm-roll span{ font-size:.42em; color:var(--dim); margin-left:.06em; }
.lm-roll.rolling{ color:var(--p-hi); }
.lm-roll.win{ color:var(--win); text-shadow:0 0 34px var(--p-glow); }
.lm-roll.lose{ color:var(--dim); }
.lm-bar{
  position:relative; width:100%; max-width:560px; height:10px; border-radius:999px;
  background:var(--pane-2); border:1px solid var(--line); overflow:hidden;
}
.lm-fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--p-lo),var(--p));
  transition:background .18s;
}
.lm-fill.lost{ background:linear-gradient(90deg,#2b1f27,var(--dim)); }
/* where the target sits on the same log scale the fill uses */
.lm-mark{
  position:absolute; top:-4px; bottom:-4px; width:2px; left:0;
  background:var(--p-hi); box-shadow:0 0 10px var(--p-glow);
  transform:translateX(-1px); transition:left .18s;
}
.lm-stats{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center;
  padding:11px 18px; border-radius:12px; border:1px solid var(--line);
}
.lm-q{ font-variant-numeric:tabular-nums; }

/* ============================================================
   Shared FX
   ============================================================ */
.shake{ animation:shakeX .34s ease; }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* a round is settling — block the button without unlocking it afterwards */
.casino-page [data-busy="1"]{ opacity:.55; pointer-events:none; }

/* floating +win text */
.floatwin{
  position:fixed; z-index:120; pointer-events:none; font:900 22px Sora,Poppins,sans-serif;
  color:var(--win); text-shadow:0 2px 14px #000; font-variant-numeric:tabular-nums;
  animation:floatUp 1.15s ease forwards;
}
.floatwin.neg{ color:var(--dim); }
@keyframes floatUp{
  0%{ opacity:0; transform:translate(-50%,0) scale(.7) }
  18%{ opacity:1; transform:translate(-50%,-14px) scale(1.1) }
  100%{ opacity:0; transform:translate(-50%,-76px) scale(1) }
}

/* sign-in nudge */
.guest-note{
  font-size:12.5px; color:var(--dim); line-height:1.5;
}
.guest-note b{ color:var(--p-hi); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1500px){ .casino-page{ --lb-w:320px; --rail-w:194px; } }
@media (max-width:1280px){
  .cas-grid{ grid-template-columns:minmax(0,1fr) var(--lb-w); }
  .rail{ position:static; grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .wallet-card{ flex:1 1 250px; }
  .rail-box{ flex:3 1 440px; }
  .rail-list{ flex-direction:row; flex-wrap:wrap; }
  .rail-item-thumb{
  width:24px;height:24px;border-radius:6px;overflow:hidden;flex:none;
}
.rail-item-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.rail-item{ width:auto; }
}
@media (max-width:980px){
  .cas-grid{ grid-template-columns:minmax(0,1fr); }
  .lb{ position:static; }
  .casino-page .cas-shell{ padding:82px 14px 40px; }
  .play-btn{ margin-left:0; flex:1 1 100%; }
}
@media (max-width:560px){
  .reel{ width:82px; height:100px; }
  .reel .sym{ height:100px; }
  .reel .sym svg{ width:52px; height:52px; }
  .wheel-wrap{ width:250px; height:250px; }
  .coin3d{ width:132px; height:132px; }
  .rl-bets{ grid-template-columns:repeat(3,1fr); }
  .bet-wrap input{ width:92px; }
}