/* ============================================================
   Shadow Spade CASINO — shared chrome on top of ssl.css + table.css.
   Include order on every game page:  ssl.css → table.css → casino.css
   Holds ONLY the cross-game pieces so all four tables feel like one
   product: the embossed SSL felt logo, the chip tray + bet stack, the
   fairness ribbon, the optional Discord identity chip + verified badge,
   and a generic results-history strip. Game-specific layout (wheel,
   dice, boards) stays inside each game file.
   ============================================================ */

/* ---------- no double-tap zoom (every casino page) ----------
   manipulation = keep panning + pinch-zoom, kill the double-tap-to-zoom
   gesture and the 300ms tap delay. Loaded on the lobby + all four games. */
html, body{ touch-action: manipulation; -webkit-text-size-adjust:100%; }

/* ---------- back-to-lobby button (game headers) ---------- */
.gt-top .gt-back{flex:none;display:inline-flex;align-items:center;gap:2px}
.gt-top .gt-back:hover{border-color:var(--green-dim);color:var(--green)}
.gt-top .gt-back .bl{letter-spacing:1px}

/* ---------- SSL logo embossed on the felt (every table) ---------- */
.gt-table.casino::before{ display:none; }          /* drop table.css's giant spade */
.gt-table.casino .felt-logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:0; pointer-events:none; overflow:hidden;
}
.gt-table.casino .felt-logo img{
  width:min(30%, 230px); opacity:.07;
  filter:grayscale(.35) brightness(1.35) drop-shadow(0 2px 12px rgba(0,0,0,.5));
  mix-blend-mode:luminosity;
}
@media (max-width:560px){ .gt-table.casino .felt-logo img{ width:46%; opacity:.06 } }

/* ---------- chip tray (shared: blackjack, roulette, craps) ---------- */
.chip-tray{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center}
.chip{--c:#888;--t:#fff;position:relative;width:46px;height:46px;border-radius:50%;cursor:pointer;flex:none;
  background:var(--c);color:var(--t);border:none;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35);
  font-family:var(--vt);font-size:17px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.12s;user-select:none}
.chip::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(255,255,255,.5)}
.chip .lab{position:relative;z-index:1}
.chip:hover{transform:translateY(-2px)}
.chip:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35)}
.chip:disabled{opacity:.35;cursor:not-allowed;transform:none}
.chip.sel{outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),var(--glow-gold)}
.chip[data-v="1"]{--c:#e8e8e8;--t:#1a1a1a}   .chip[data-v="1"]::before{border-color:rgba(0,0,0,.25)}
.chip[data-v="5"]{--c:#d94f4f;--t:#fff}
.chip[data-v="10"]{--c:#3a6ea5;--t:#fff}
.chip[data-v="25"]{--c:#3f9b5a;--t:#fff}
.chip[data-v="100"]{--c:#161616;--t:#ffd23f;box-shadow:0 4px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 2px var(--gold)}
.chip[data-v="100"]::before{border-color:rgba(255,210,63,.6)}
.chip-cap{font-family:var(--arcade);font-size:7px;letter-spacing:1px;color:var(--txt-faint);text-align:center;margin-bottom:5px}

/* a stacked pile of wagered discs (blackjack bet spot; reused for roulette total) */
.bet-stack{position:relative;width:58px;height:74px}
.bet-stack.empty::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;border:2px dashed rgba(255,255,255,.16)}
.bet-stack .disc{--c:#888;--t:#fff;position:absolute;left:50%;width:50px;height:50px;border-radius:50%;
  transform:translateX(-50%);background:var(--c);color:var(--t);
  box-shadow:0 2px 4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35);
  font-family:var(--vt);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;animation:chipDrop .22s ease both}
.bet-stack .disc::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(255,255,255,.45)}
.bet-stack .disc .dl{position:relative;z-index:1}
.bet-stack .disc[data-v="1"]{--c:#e8e8e8;--t:#1a1a1a}  .bet-stack .disc[data-v="1"]::before{border-color:rgba(0,0,0,.22)}
.bet-stack .disc[data-v="5"]{--c:#d94f4f}
.bet-stack .disc[data-v="10"]{--c:#3a6ea5}
.bet-stack .disc[data-v="25"]{--c:#3f9b5a}
.bet-stack .disc[data-v="100"]{--c:#161616;--t:#ffd23f}
@keyframes chipDrop{from{transform:translate(-50%,-22px);opacity:0}to{opacity:1}}

/* a small chip token used to mark bets placed on a board (roulette/craps) */
.chip-token{position:absolute;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--c,#3f9b5a);color:var(--t,#fff);border:2px solid rgba(255,255,255,.7);
  box-shadow:0 3px 7px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25);
  font-family:var(--vt);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  z-index:6;pointer-events:none;animation:chipDrop .18s ease both}
.chip-token[data-v="1"]{--c:#e8e8e8;--t:#1a1a1a}
.chip-token[data-v="5"]{--c:#d94f4f}
.chip-token[data-v="10"]{--c:#3a6ea5}
.chip-token[data-v="25"]{--c:#3f9b5a}
.chip-token[data-v="100"]{--c:#161616;--t:#ffd23f;border-color:var(--gold)}

/* ---------- fairness ribbon (under every felt) ---------- */
.fair-ribbon{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:6px 0 0;font-size:11.5px;color:var(--txt-dim)}
.fair-ribbon .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:var(--glow-green);
  display:inline-block;margin-right:6px;animation:fairPulse 2.4s ease-in-out infinite}
@keyframes fairPulse{0%,100%{opacity:.5}50%{opacity:1}}
.fair-ribbon a{color:var(--cyan);cursor:pointer}
.fair-ribbon .sep{color:var(--txt-faint)}
@media(prefers-reduced-motion:reduce){.fair-ribbon .dot{animation:none}}
/* phones: collapse the ribbon to one line (the description wrapped to 3 rows,
   eating ~50px). Keep the live dot + the verify link. */
@media (max-width: 540px){
  .fair-ribbon{font-size:10px;gap:8px;margin-top:4px;flex-wrap:nowrap}
  .fair-ribbon .faint,.fair-ribbon .sep{display:none}
}

/* ---------- optional Discord identity (header chip + nudge + verified badge) ---------- */
.id-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:30px;
  border:1px solid var(--line-2);background:var(--void);cursor:pointer;transition:.14s;font-size:12px;font-weight:600;color:var(--txt-dim);white-space:nowrap}
.id-chip:hover{border-color:#5865F2;color:var(--txt)}
.id-chip img.av{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2)}
.id-chip .vbadge{color:var(--green);font-weight:800}
.id-chip.in{border-color:#5865F2}
.discord-blurple{color:#8a93f5}
.btn-discord{background:linear-gradient(180deg,#5865F2,#4651c7);color:#fff;border-color:#5865F2}
.gt-btn.discord{background:linear-gradient(180deg,#5865F2,#4651c7);color:#fff;border-color:#5865F2;box-shadow:0 4px 0 #2b3180}
.verified-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--green);font-weight:700;margin-left:5px}
.verified-badge .av{width:18px;height:18px;border-radius:50%;vertical-align:middle}
.board-av{width:20px;height:20px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid var(--line-2)}
.sign-nudge{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:rgba(88,101,242,.08);border:1px solid rgba(88,101,242,.4);border-radius:12px;padding:10px 13px;margin-top:12px}
.sign-nudge .txt{font-size:12.5px;color:var(--txt-dim);line-height:1.4}

/* ---------- generic results-history strip (roulette numbers, craps rolls) ---------- */
.hist-strip{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:4px 2px;scrollbar-width:thin;min-height:34px}
.hist-pill{flex:none;min-width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-family:var(--vt);font-size:16px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.15)}
.hist-pill.red{background:linear-gradient(180deg,#e0394f,#b3122a)}
.hist-pill.black{background:linear-gradient(180deg,#2a3344,#161c27)}
.hist-pill.green{background:linear-gradient(180deg,#19b06b,#0b7d49)}

/* ---------- in-game pay-table / rules legibility ---------- */
.rules-grid{width:100%;border-collapse:collapse;font-family:var(--vt)}
.rules-grid td{padding:6px 10px;border-bottom:1px solid var(--line);font-size:18px;line-height:1.15}
.rules-grid td:last-child{text-align:right;color:var(--gold);font-weight:700}
.rules-grid tr:last-child td{border-bottom:none}
.edge-note{font-size:11px;color:var(--txt-faint);font-family:var(--sans)}

/* small standardized "MAX/MIN" rail caption */
.lim-cap{font-family:var(--arcade);font-size:7px;letter-spacing:1px;color:var(--txt-faint);text-align:center}

@media(max-width:560px){
  .chip{width:42px;height:42px;font-size:15px}
  .bet-stack{width:52px}
  .bet-stack .disc{width:46px;height:46px}
}

/* ---------- floating neon card-suit ambient (the home-page vibe) ---------- */
.suits{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.suits span{position:absolute;bottom:-12%;font-size:42px;opacity:0;color:var(--green);
  text-shadow:0 0 22px currentColor;animation:floatUp linear infinite;will-change:transform,opacity}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:0}8%{opacity:.42}90%{opacity:.42}100%{transform:translateY(-118vh) rotate(220deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.suits span{animation:none;opacity:.14}}
/* on the full-screen game tables, keep suits subtle behind the felt */
body.gt-body .suits span{opacity:0}
body.gt-body .suits span{animation-name:floatUpFelt}
@keyframes floatUpFelt{0%{transform:translateY(0) rotate(0deg);opacity:0}8%{opacity:.26}90%{opacity:.26}100%{transform:translateY(-118vh) rotate(220deg);opacity:0}}

/* ---------- "reset / new $100" header button (shared) ---------- */
.gt-btn.reset{color:var(--cyan)}
.gt-btn.reset:hover{border-color:var(--cyan)}

/* ---------- compact mobile game header — clean two-row, nothing clipped ---------- */
@media(max-width:560px){
  .gt-top{flex-wrap:wrap;justify-content:center;align-items:center;
    gap:6px 8px;--pt:8px;--px:10px;--pb:8px;overflow:visible}
  .gt-top .funtag{display:none}
  .gt-top .gt-spacer{display:none}      /* the flex spacers shoved the buttons off-screen */
  .id-chip{display:none}                /* optional sign-in lives in the cash-out nudge on mobile */

  /* Row 1 — status chips: own row, evenly spread */
  .gt-hud{order:-1;flex:1 1 100%;justify-content:center;gap:6px;flex-wrap:nowrap}
  .gt-chip{flex:1 1 0;min-width:0;max-width:130px;padding:4px 8px;border-radius:9px}
  .gt-chip .k{font-size:6px;letter-spacing:.5px}
  .gt-chip .v{font-size:15px}
  .gt-chip.bank .v{font-size:16px}

  /* Row 2 — home pill + actions, centered, fits the narrowest phone */
  .gt-top .brand{flex:none;padding:7px 11px;border:1px solid var(--line-2);
    border-radius:11px;background:rgba(255,255,255,.03)}
  .gt-top .brand .sp{font-size:16px}
  .gt-btn.gt-end,.gt-btn.gt-back{flex:none;padding:9px 11px;font-size:11px;border-radius:11px}
  .gt-end .bl,.gt-back .bl{display:none} /* icon-only ← / ↻ / ⏹ on phones */
}

/* landscape (rotated phone): collapse the header to a single compact row — the
   two-row mobile header eats ~127px of a ~390px-tall screen */
@media (orientation: landscape) and (max-height: 560px){
  .gt-top{flex-wrap:nowrap;--pt:5px;--px:10px;--pb:5px;gap:8px;overflow:hidden}
  .gt-top .funtag,.gt-top .id-chip{display:none}
  .gt-top .gt-spacer{flex:1}
  .gt-hud{order:0;flex:0 1 auto;gap:6px;flex-wrap:nowrap}
  .gt-chip{flex-direction:row;align-items:baseline;gap:5px;padding:3px 9px;min-width:0;border-radius:8px}
  .gt-chip .k{font-size:7px}
  .gt-chip .v{font-size:14px}
  .gt-top .brand span:not(.sp){display:none}
  .gt-btn.gt-end .bl,.gt-btn.gt-back .bl{display:none}
  .gt-btn.gt-end,.gt-btn.gt-back{padding:8px 10px;font-size:11px}
  /* keep the felt off the side notch in landscape (notch = one side only) */
  .gt-stage{padding:6px max(8px,var(--sa-r)) 6px max(8px,var(--sa-l))}
  .gt-rail{padding:7px 12px}
}

/* shorter phones: trim the header so a whole game clears the fold */
@media (max-height: 680px){
  .gt-top{--pt:6px;--px:10px;--pb:6px;gap:5px 8px}
  .gt-chip{padding:3px 8px}
  .gt-chip .k{font-size:6px}
  .gt-chip .v{font-size:14px}
  .gt-chip.bank .v{font-size:15px}
  .gt-top .brand{padding:6px 9px}
  .gt-btn.gt-end,.gt-btn.gt-back{padding:8px 10px}
  .chip{width:38px;height:38px;font-size:13px}
  .chip-cap{margin-bottom:2px}
}

/* ---------- roulette: zoom/pop the wheel full-attention during the spin ---------- */
.rt-dim{position:fixed;inset:0;z-index:40;background:radial-gradient(60% 60% at 50% 42%,rgba(0,0,0,.35),rgba(2,4,8,.86));
  opacity:0;pointer-events:none;transition:opacity .45s ease}   /* no blur — just dim behind the wheel */
.rt-dim.show{opacity:1}
.rt-wheel{transition:transform .55s cubic-bezier(.22,1,.32,1)}
.rt-wheel.spinning{position:relative;z-index:50;transform:scale(1.62) translateY(6%)}
@media(max-width:560px){ .rt-wheel.spinning{transform:scale(1.32) translateY(2%)} }
@media(prefers-reduced-motion:reduce){ .rt-wheel.spinning{transform:none} .rt-dim{display:none} }