/* ============================================================
   Shadow Spade Lounge — "At The Table" game design system.
   Shared by /games/video-poker.html and /games/blackjack.html.

   Goals (per Parker, 2026-05-29):
   • Feel front-and-center at a real table — big cards, buttons that
     live ON the table rail.
   • Something alive in the room — drifting haze + speakeasy smoke +
     slow embers, all pure-CSS (just add <div class="gt-ambient">).
   • Load full-screen, no page scroll. Mobile-first / fully responsive.

   Builds on ssl.css (palette vars, .card faces, buttons). Include AFTER
   ssl.css. Card sizing is fluid via --cw so it scales phone→desktop with
   no breakpoints.
   ============================================================ */

/* ---------- full-screen shell (no page scroll) ---------- */
html.gt-html, body.gt-body { height: 100%; }
/* expose the live safe-area insets as variables — read by the header/stage
   padding below AND by the craps scale-to-fit fitter (getComputedStyle). */
html.gt-html{
  --sa-t: env(safe-area-inset-top, 0px);   --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
}
body.gt-body{
  margin:0; overflow:hidden;
  height:100dvh; min-height:100dvh;
  box-sizing:border-box;
  /* viewport-fit=cover runs content under the notch / home-indicator. Reserve
     ONLY the bottom inset here so the fair-ribbon + rail clear the home
     indicator. The top + side notch is handled per-region (header & stage pad
     themselves) so the top bar stays FULL-BLEED instead of floating inset from
     the screen edges — padding the whole body was what broke the header. */
  padding:0 0 var(--sa-b) 0;
  display:flex; flex-direction:column;
  /* card size scales with the viewport; everything keys off --cw.
     min(...,13dvh) lets cards shrink when HEIGHT is the binding constraint
     (short phones / landscape) so a hand never forces the table to scroll. */
  --cw: clamp(46px, min(13.5vmin, 13dvh), 104px);
  --ch: calc(var(--cw) * 1.4);
  --rail: #14543a;
  /* one shared "play column" width so every table reads the same width when you
     tab between games. Board games that genuinely need more can opt up locally. */
  --felt-col: 700px;
}

/* ---------- alive ambient (pure CSS, zero markup beyond the div) ---------- */
.gt-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(0,255,156,.10), transparent 60%),
    radial-gradient(55% 50% at 12% 100%, rgba(160,107,255,.12), transparent 60%),
    radial-gradient(55% 50% at 90% 92%, rgba(255,210,63,.07), transparent 60%);
  animation:gtHaze 16s ease-in-out infinite alternate}
@keyframes gtHaze{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2%,0) scale(1.07)}}
/* speakeasy smoke — three big soft blobs drifting */
.gt-ambient::after{content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(28% 36% at 22% 80%, rgba(220,235,255,.05), transparent 70%),
    radial-gradient(34% 40% at 70% 88%, rgba(200,255,230,.045), transparent 72%),
    radial-gradient(30% 38% at 50% 70%, rgba(255,245,220,.04), transparent 70%);
  filter:blur(8px);animation:gtSmoke 26s ease-in-out infinite alternate}
@keyframes gtSmoke{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(3%,-6%,0) scale(1.08)}
  100%{transform:translate3d(-3%,-10%,0) scale(1.12)}}
/* slow embers — one dot, many box-shadow clones, rising */
.gt-ambient::before{content:"";position:absolute;left:6%;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:rgba(255,210,63,.7);box-shadow:
    18vw 4vh 0 0 rgba(0,255,156,.5), 33vw -8vh 0 0 rgba(255,210,63,.45),
    48vw 6vh 0 0 rgba(160,107,255,.5), 61vw -4vh 0 0 rgba(0,255,156,.4),
    76vw 8vh 0 0 rgba(255,210,63,.5), 88vw -10vh 0 0 rgba(41,224,255,.4),
    12vw 14vh 0 0 rgba(255,210,63,.35), 27vw 20vh 0 0 rgba(0,255,156,.4),
    42vw 12vh 0 0 rgba(255,210,63,.45), 55vw 22vh 0 0 rgba(160,107,255,.35),
    70vw 16vh 0 0 rgba(0,255,156,.4), 84vw 24vh 0 0 rgba(255,210,63,.4),
    5vw 30vh 0 0 rgba(41,224,255,.35), 36vw 34vh 0 0 rgba(255,210,63,.4),
    64vw 32vh 0 0 rgba(0,255,156,.35), 92vw 30vh 0 0 rgba(255,210,63,.4);
  animation:gtEmber 18s linear infinite}
@keyframes gtEmber{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(-118vh);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .gt-ambient,.gt-ambient::after,.gt-ambient::before{animation:none}
}

/* ---------- top bar (brand · mode · live HUD · end-game) ----------
   FULL-BLEED background to the screen edges; the CONTENT padding grows to
   clear the notch on the top + whichever side the notch is on. Media queries
   only retune --pt/--px/--pb (NOT padding) so the safe-area math is applied
   once, here, and survives every breakpoint. */
.gt-top{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px;
  --pt:10px;--px:16px;--pb:10px;
  padding:max(var(--pt),var(--sa-t)) max(var(--px),var(--sa-r)) var(--pb) max(var(--px),var(--sa-l));
  border-bottom:1px solid var(--line);background:rgba(8,11,17,.72);backdrop-filter:blur(10px)}
/* keep the header on one row at desktop widths: header controls are more compact
   than the chunky table-rail buttons so a busy header (BJ/craps) never clips. */
.gt-top .gt-btn{padding:10px 14px;font-size:11px;border-radius:11px;box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.gt-top .gt-btn:active{box-shadow:0 1px 0 rgba(0,0,0,.4)}
/* wide desktop: enough room for the busiest header (BJ/craps) on one balanced row */
@media(min-width:1240px){ .gt-top{flex-wrap:nowrap} }
.gt-top .brand{display:flex;align-items:center;gap:9px;font-family:var(--arcade);font-size:11px;color:var(--green);
  text-shadow:var(--glow-green);white-space:nowrap;text-decoration:none}
.gt-top .brand .sp{font-size:18px}
.gt-spacer{flex:1}
.gt-hud{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.gt-chip{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--void);
  border:1px solid var(--line-2);border-radius:10px;padding:5px 11px;min-width:66px}
.gt-chip .k{font-family:var(--arcade);font-size:7px;letter-spacing:1px;color:var(--txt-faint)}
.gt-chip .v{font-family:var(--vt);font-size:20px;line-height:1;color:var(--txt)}
.gt-chip.bank .v{color:var(--gold);text-shadow:var(--glow-gold)}
.gt-chip.time .v{color:var(--cyan)}
.gt-end{flex:none}
@media(max-width:560px){
  .gt-top{--pt:8px;--px:10px;--pb:8px;gap:8px}
  .gt-top .brand span:not(.sp){display:none}
  .gt-chip{min-width:58px;padding:4px 8px}
  .gt-chip .v{font-size:18px}
}

/* ---------- the stage centers the table; internal scroll only if needed ---------- */
.gt-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:16px;overflow:auto}
.gt-wrap{width:100%;max-width:var(--felt-col);margin:0 auto;display:flex;flex-direction:column;gap:14px}

/* ---------- the felt table ---------- */
.gt-table{position:relative;border-radius:32px;padding:22px clamp(14px,3vw,34px) 0;
  background:
    radial-gradient(120% 90% at 50% 18%, var(--felt-2), var(--felt) 70%);
  border:1px solid #14543a;
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.05),
    0 0 0 10px #0a0d12, 0 0 0 12px #20100c, 0 0 0 16px #311a12, /* wood rail */
    0 30px 70px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:clamp(10px,2.4vh,22px)}
.gt-table::before{content:"\2660";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:min(26vh,200px);color:rgba(0,255,156,.04);pointer-events:none;z-index:0}
.gt-table > *{position:relative;z-index:1}

/* a labeled zone (DEALER / YOU / etc.) */
.gt-zone{display:flex;flex-direction:column;gap:8px;align-items:center}
.gt-zone .who{font-family:var(--arcade);font-size:10px;letter-spacing:1px;color:var(--txt-dim);
  display:flex;align-items:center;gap:10px}
.gt-cards{display:flex;gap:clamp(6px,1.4vw,14px);justify-content:center;flex-wrap:wrap;min-height:var(--ch)}

/* ---------- big playing cards ---------- */
.gt-card{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.12);
  background:linear-gradient(160deg,#fff,#e7ecf3);color:#10131a;
  display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--cw)*.1);
  font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.55);position:relative;user-select:none}
.gt-card.red{color:#d11e3c}
.gt-card .r{font-size:calc(var(--cw)*.3);line-height:1}
.gt-card .s{font-size:calc(var(--cw)*.4);text-align:right;line-height:1}
.gt-card.back{background:repeating-linear-gradient(45deg,#10233f,#10233f 6px,#0a1730 6px,#0a1730 12px);
  border:1px solid var(--line-2)}
.gt-card.back::after{content:"\2660";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cw)*.5);color:var(--green);opacity:.55;text-shadow:var(--glow-green)}
.gt-card.held{outline:3px solid var(--gold);box-shadow:var(--glow-gold)}
.gt-card.sel{cursor:pointer;transition:transform .14s}
.gt-card.sel:hover{transform:translateY(-8px)}
.gt-card.deal{animation:gtDeal .34s ease both}
@keyframes gtDeal{from{transform:translateY(-26px) rotateX(38deg);opacity:0}to{transform:none;opacity:1}}
.gt-held-tag{position:absolute;top:calc(var(--cw)*-.16);left:50%;transform:translateX(-50%);
  font-family:var(--arcade);font-size:8px;background:var(--gold);color:#1a1400;padding:3px 7px;border-radius:5px}

/* hand total badge */
.gt-total{font-family:var(--vt);font-size:26px;line-height:1;padding:2px 12px;border-radius:8px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.4);color:var(--txt);min-width:50px;text-align:center}
.gt-total.soft{color:var(--cyan);border-color:#1d6e80}
.gt-total.bust{color:var(--red);border-color:#7a2030;text-shadow:var(--glow-red)}
.gt-total.bj{color:var(--gold);border-color:#7a6320;text-shadow:var(--glow-gold)}

/* result banner that floats on the felt */
.gt-banner{min-height:30px;text-align:center;font-family:var(--arcade);font-size:13px;letter-spacing:1px;
  opacity:0;transform:scale(.94);transition:.24s;padding:8px 16px;border-radius:12px;align-self:center}
.gt-banner.show{opacity:1;transform:scale(1)}
.gt-banner.win{color:var(--green);text-shadow:var(--glow-green)}
.gt-banner.lose{color:var(--red);text-shadow:var(--glow-red)}
.gt-banner.push,.gt-banner.bj{color:var(--gold);text-shadow:var(--glow-gold)}

.gt-table.flash-win{animation:gtWin .6s ease}
.gt-table.flash-lose{animation:gtLose .6s ease}
@keyframes gtWin{40%{box-shadow:inset 0 0 100px rgba(0,255,156,.4),0 0 60px rgba(0,255,156,.4),0 0 0 10px #0a0d12,0 0 0 12px #20100c,0 0 0 16px #311a12}}
@keyframes gtLose{40%{box-shadow:inset 0 0 100px rgba(255,59,92,.35),0 0 60px rgba(255,59,92,.3),0 0 0 10px #0a0d12,0 0 0 12px #20100c,0 0 0 16px #311a12}}

/* ---------- the rail: actions live ON the table ---------- */
.gt-rail{margin:0 calc(clamp(14px,3vw,34px) * -1);margin-top:auto;
  padding:14px clamp(14px,3vw,34px);
  background:linear-gradient(180deg, rgba(49,26,18,.0), rgba(20,10,8,.55));
  border-top:1px solid rgba(0,0,0,.4);
  border-bottom-left-radius:32px;border-bottom-right-radius:32px;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.gt-rail .left,.gt-rail .right{display:flex;gap:10px;align-items:center}
/* cap the spacer so rail controls stay a tidy centered cluster instead of being
   shoved to opposite felt edges with dead space between (consistent across games). */
.gt-rail .grow{flex:1 1 0;max-width:clamp(40px,8vw,90px)}

/* tactile chunky table buttons */
.gt-btn{appearance:none;border:1px solid var(--line-2);border-radius:14px;cursor:pointer;
  font-family:var(--arcade);font-size:12px;letter-spacing:1px;padding:15px 22px;color:var(--txt);
  background:linear-gradient(180deg,#1b2536,#0f1521);box-shadow:0 4px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  transition:.12s;white-space:nowrap}
.gt-btn:hover{transform:translateY(-1px);border-color:var(--green-dim)}
.gt-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.gt-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.gt-btn.primary{background:linear-gradient(180deg,var(--green),var(--green-dim));color:#03130c;border-color:var(--green);box-shadow:0 4px 0 #06120c,var(--glow-green)}
.gt-btn.gold{background:linear-gradient(180deg,var(--gold),#d9a800);color:#1a1400;border-color:var(--gold);box-shadow:0 4px 0 #2a2000,var(--glow-gold)}
.gt-btn.red{background:linear-gradient(180deg,var(--red),#c01e3c);color:#fff;border-color:var(--red);box-shadow:0 4px 0 #2a0a12}
.gt-btn.ghost{background:rgba(255,255,255,.03)}
.gt-btn.sm{font-size:10px;padding:10px 14px;border-radius:11px}
@media(max-width:560px){
  .gt-btn{padding:13px 16px;font-size:11px}
  .gt-rail{gap:8px;padding:12px 14px}
}

/* bet stepper that matches the rail */
.gt-bet{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--void)}
.gt-bet button{border:none;background:#1b2536;color:var(--txt);width:42px;font-size:22px;font-weight:800;cursor:pointer;transition:.12s}
.gt-bet button:hover{background:var(--line-2);color:var(--gold)}
.gt-bet button:disabled{opacity:.4;cursor:not-allowed}
.gt-bet .amt{font-family:var(--vt);font-size:26px;min-width:72px;display:flex;align-items:center;justify-content:center;color:var(--gold);text-shadow:var(--glow-gold)}

/* hold buttons under VP cards */
.gt-slot{display:flex;flex-direction:column;align-items:center;gap:8px}
.gt-hold{font-family:var(--arcade);font-size:8px;letter-spacing:1px;padding:7px 0;width:100%;min-width:var(--cw);
  border-radius:7px;border:1px solid var(--line-2);background:var(--raise);color:var(--txt-faint);cursor:pointer;transition:.12s}
.gt-hold.on{background:var(--gold);color:#1a1400;border-color:var(--gold);box-shadow:var(--glow-gold)}
.gt-hold:disabled{opacity:.4;cursor:not-allowed}

/* ---------- log-score / overlay modal ---------- */
.gt-overlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,6,10,.8);backdrop-filter:blur(7px)}
.gt-overlay.show{display:flex}
.gt-overlay .panel{max-width:460px;width:100%;max-height:92dvh;overflow:auto}
.gt-final{font-family:var(--vt);font-size:64px;line-height:1;text-align:center;margin:4px 0 2px;color:var(--gold);text-shadow:var(--glow-gold)}
.gt-final.red{color:var(--red);text-shadow:var(--glow-red)}
.gt-logrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.gt-logrow:last-child{border-bottom:none}
.gt-logrow .v{font-family:var(--vt);font-size:20px;color:var(--txt)}

/* all-time board */
.gt-board td:first-child{font-family:var(--vt);font-size:18px;color:var(--gold);width:36px}
.gt-board td:last-child{text-align:right;font-family:var(--vt);font-size:20px;color:var(--green);text-shadow:var(--glow-green)}
.gt-board tr.me td{background:rgba(0,255,156,.08)}

/* ============================================================
   SHORT-VIEWPORT COMPACTION — claw back vertical space so an entire
   game fits on a phone with NO scroll. Keyed off height (and dvh) so
   desktop / tall phones are untouched; only short screens compact.
   ============================================================ */
@media (max-height: 760px){
  .gt-stage{padding:8px}
  .gt-table{padding-top:14px;gap:clamp(6px,1.6vh,14px)}
  .gt-rail{padding-top:10px;padding-bottom:10px}
  .gt-btn{padding:12px 16px}
  .gt-btn.sm{padding:9px 12px}
}
@media (max-height: 680px){
  .gt-stage{padding:5px}
  .gt-table{padding-top:10px;gap:6px;border-radius:24px}
  .gt-cards{min-height:0}
  .gt-banner{min-height:0;padding:4px 12px;font-size:11px}
  .gt-rail{padding-top:8px;padding-bottom:8px;gap:8px}
  .gt-btn{padding:11px 14px;font-size:11px}
  .fair-ribbon{font-size:10px}
}
/* phones: tighten the section rhythm even on TALL phones — the densest boards
   (craps, roulette) need it regardless of height. ~30px reclaimed on craps. */
@media (max-width: 540px){
  .gt-table{gap:clamp(6px,1.2vh,12px)}
  .gt-wrap{gap:6px}
}