@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

  :root{
    --black:#050403;
    --black-2:#0c0a07;
    --felt-1:#2f7850;
    --felt-2:#194f36;
    --felt-3:#246142;
    --gold:#e0b95e;
    --gold-bright:#f3d488;
    --gold-dim:#8a6d2f;
    --gold-line: rgba(224,185,94,.4);
    --cream:#f5efdf;
    --ink:#20180f;
    --crimson:#a4283a;
    --win:#6fd17f;
    --lose:#e0697a;
    --wood-1:#6b4423;
    --wood-2:#2c1a0d;
    --wood-hi:#8a5a34;
    --wood-shadow:#140b05;
    --shadow: 0 14px 40px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box;}
  /* Deliberately NOT html,body{height:100%} — that locks the page to
     exactly one viewport tall, which is fine in a normal browser tab
     (overflow still scrolls the page) but causes real content to be
     unreachable when this is embedded in a fixed-height container that
     doesn't hand scrolling back to the document (e.g. some iframe
     embeds) — the game's own bottom controls were getting clipped with
     no way to scroll down to them. min-height keeps short content
     filling the screen; omitting a hard height lets tall content grow
     and stay reachable via normal scrolling either way. */
  body{
    margin:0; min-height:100vh;
    padding: 28px 20px;
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    background:#ffffff;
    color:var(--cream);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    display:flex; flex-direction:column; align-items:center;
    overflow-x:hidden;
    /* Known iOS Safari quirk: overflow-y:auto alone can show a
       scrollbar that doesn't respond to touch/momentum gestures.
       This tells iOS Safari specifically to use native momentum
       scrolling here, fixing "scrollbar visible but swipe does
       nothing" on iPhone. Harmless no-op on every other browser. */
    -webkit-overflow-scrolling:touch;
  }
  /* The game itself sits inside a curved, framed card on a white page —
     useful both standalone and embedded in a wider site — while every
     internal layout rule below is unchanged and still targets a
     full-bleed-feeling surface within that frame. */
  .game-frame{
    width:100%; max-width:1040px;
    display:flex; flex-direction:column; align-items:center;
    border-radius:32px;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 50% 0%, #14100a 0%, var(--black) 60%),
      var(--black);
    box-shadow:0 30px 90px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
  }
  @media (max-width:640px){
    body{ padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
    .game-frame{ border-radius:18px; }
  }
  button, .chip, .pile-chip{ touch-action:manipulation; }
  ::selection{background:var(--gold); color:var(--ink);}
  :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  .serif{ font-family:'Cinzel',serif; }

  /* ================= Header ================= */
  header{
    width:100%; max-width:1100px;
    padding:16px 16px 8px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap;
  }
  .brand-cluster{ display:flex; align-items:center; gap:12px; }
  .gold-icon-btn{
    width:42px; height:42px; border-radius:12px;
    background:linear-gradient(155deg,#171310,#0a0806);
    border:1px solid var(--gold-line);
    color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:17px;
    transition:.15s ease;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .gold-icon-btn:hover{ border-color:var(--gold); background:#1c1712; }
  .gold-icon-btn[aria-pressed="true"]{ background:rgba(224,185,94,.18); border-color:var(--gold); }

  .wordmark{ text-align:left; line-height:1; }
  .wordmark .eyebrow{
    display:block; font-size:11px; letter-spacing:.32em; color:#c9bfa8;
    text-transform:uppercase; margin-bottom:3px; font-weight:600;
  }
  .wordmark .title{
    font-family:'Cinzel',serif; font-weight:700; font-size:26px;
    letter-spacing:.06em;
    background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 1px 0 rgba(0,0,0,.4);
  }

  .info-boxes{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .stat-box{
    position:relative;
    background:linear-gradient(155deg, rgba(24,19,12,.78), rgba(8,6,4,.88));
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    border:1px solid var(--gold-line);
    border-radius:10px;
    padding:6px 14px;
    display:flex; align-items:center; gap:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 14px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .stat-box::before{
    content:""; position:absolute; left:10%; right:10%; top:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  }
  .stat-box .cell{ text-align:center; }
  .stat-box .cell + .cell{ border-left:1px solid rgba(224,185,94,.2); padding-left:14px; }
  .stat-box label{ display:block; font-size:9px; letter-spacing:.14em; color:#a89a86; text-transform:uppercase; margin-bottom:2px; }
  .stat-box .val{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; color:var(--cream); }
  .balance-box{ display:flex; align-items:center; gap:9px; padding:6px 16px 6px 10px; }
  .balance-box .chip-ico{
    width:26px; height:26px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #f0c96a, #b5892f);
    border:2px dashed rgba(255,255,255,.55);
    flex:none;
  }
  .balance-box .val{ font-size:17px; color:var(--gold-bright); }
  .icon-actions{ display:flex; gap:8px; }

  /* ================= Table ================= */
  .table-wrap{
    width:100%; max-width:1100px; padding:6px 10px 12px;
    position:relative;
  }
  .table-wrap > .felt{
    position:relative;
    padding:22px 22px 14px;
    border-radius:30px;
    /* mahogany rail: base gradient + two grain layers at slightly different
       angles/opacities (avoids a flat repeating-pattern look) + a soft
       diagonal polish sheen */
    background:
      linear-gradient(102deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 52%),
      repeating-linear-gradient(129deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(131deg, rgba(255,255,255,.045) 0 1px, transparent 1px 10px),
      radial-gradient(ellipse at 30% 15%, var(--wood-hi) 0%, transparent 45%),
      linear-gradient(165deg, var(--wood-1) 0%, var(--wood-2) 78%, var(--wood-shadow) 100%);
    box-shadow:var(--shadow), inset 0 2px 3px rgba(255,255,255,.12), inset 0 -8px 18px rgba(0,0,0,.6);
  }
  .table-wrap > .felt::before{
    content:"";
    position:absolute; inset:9px;
    border-radius:22px;
    /* layered box-shadow rings stand in for a metallic double gold trim
       (a groove, a bright hairline, a shadow line) without extra markup */
    box-shadow:
      0 0 0 1px rgba(0,0,0,.5),
      0 0 0 2.5px var(--gold-dim),
      0 0 0 3px rgba(0,0,0,.35),
      0 0 12px rgba(224,185,94,.12),
      inset 0 1px 1px rgba(255,255,255,.22),
      inset 0 -1px 2px rgba(0,0,0,.35);
    pointer-events:none;
    z-index:1;
  }
  .felt-surface{
    position:relative;
    background:
      repeating-linear-gradient(47deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(-43deg, rgba(0,0,0,.028) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at 50% 18%, var(--felt-1) 0%, var(--felt-3) 55%, var(--felt-2) 100%);
    border-radius:16px;
    padding:20px 18px 24px;
    min-height:530px;
    overflow:hidden;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5), inset 0 10px 24px rgba(0,0,0,.4);
  }
  .felt-surface::before{
    content:"";
    position:absolute; inset:12px;
    border:1px solid rgba(224,185,94,.16);
    border-radius:10px;
    pointer-events:none;
    z-index:1;
  }
  .felt-surface::after{
    /* soft cinematic vignette — brighter under the dealer/action, gently
       darkening toward the rail, rather than a flat green field */
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 22%, transparent 38%, rgba(0,0,0,.32) 100%);
    pointer-events:none;
    z-index:1;
  }
  .rivets{
    position:absolute; left:0; right:0; bottom:5px; height:8px;
    display:flex; justify-content:space-between; padding:0 5.5%;
    pointer-events:none; z-index:2;
  }
  .rivets span{
    width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#f3d488,#8a6d2f);
    box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.3);
  }

  /* left inline rules card */
  .rules-inline{
    position:absolute; left:18px; top:20px; width:190px;
    background:linear-gradient(155deg, rgba(10,15,12,.68), rgba(4,7,5,.8));
    backdrop-filter:blur(9px) saturate(130%);
    -webkit-backdrop-filter:blur(9px) saturate(130%);
    border:1px solid var(--gold-line);
    border-radius:12px;
    padding:14px 16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4);
    z-index:3;
  }
  .rules-inline h3{
    margin:0 0 8px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.1em;
    color:var(--gold); text-transform:uppercase;
  }
  .rules-inline ul{ margin:0; padding-left:14px; font-size:12px; line-height:1.7; color:#e6dfcc; }
  .rules-inline li::marker{ color:var(--gold); }

  /* right side: shoe + last-hand box */
  .table-side-right{
    position:absolute; right:16px; top:16px; z-index:3;
    display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  }
  /* Wraps shoe-art + deck-count so they can be treated as one compact
     unit — needed for the mobile layout below, which places this unit
     beside last-hand-box instead of stacking everything in one column.
     On desktop this is a transparent wrapper with no visual change. */
  .deck-info{ display:flex; flex-direction:column; align-items:center; }
  .shoe-art{ display:flex; flex-direction:column; align-items:center; }
  .shoe-svg{ filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
  .deck-count{
    margin-top:-6px;
    background:linear-gradient(155deg,#141009,#0a0806);
    border:1px solid var(--gold-line); color:var(--gold);
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
    padding:3px 10px; border-radius:6px;
  }
  .last-hand-box{
    background:linear-gradient(155deg, rgba(10,15,12,.68), rgba(4,7,5,.8));
    backdrop-filter:blur(9px) saturate(130%);
    -webkit-backdrop-filter:blur(9px) saturate(130%);
    border:1px solid var(--gold-line); border-radius:12px;
    padding:10px 18px; text-align:right;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4);
  }
  .last-hand-box .row{ padding:5px 0; }
  .last-hand-box .row + .row{ border-top:1px solid rgba(224,185,94,.18); }
  .last-hand-box label{ display:block; font-size:9px; letter-spacing:.14em; color:#a89a86; text-transform:uppercase; }
  .last-hand-box .val{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; }
  .last-hand-box .val.pos{ color:var(--win); }
  .last-hand-box .val.neg{ color:var(--lose); }

  /* center column */
  .center-col{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .seat-pill{
    font-family:'Inter',sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em;
    color:#e6dfcc; background:rgba(0,0,0,.4); border:1px solid var(--gold-line);
    padding:5px 18px; border-radius:20px; text-transform:uppercase;
  }
  .cards-row{ display:flex; min-height:118px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:10px; }
  /* Collapse to zero when no cards have been dealt yet (matches the
     controller's actual DOM behavior — these elements are emptied via
     innerHTML='' between rounds), instead of permanently reserving
     118px of space for cards that aren't there. This is the single
     biggest source of wasted vertical space on the betting screen —
     the very first, most common view every visitor sees — and it
     costs nothing once a hand IS in progress, since the moment card
     elements are appended, :empty no longer matches and the full
     118px reservation applies exactly as before. */
  .cards-row:empty{ min-height:0; margin-top:0; }
  .total-pill{
    margin-top:8px;
    background:rgba(0,0,0,.5); border:1px solid var(--gold-line); color:var(--gold-bright);
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px;
    padding:3px 14px; border-radius:16px;
  }

  .card{
    position:relative;
    width:74px; height:104px;
    background:linear-gradient(155deg,#fffdf7,var(--cream));
    border-radius:9px;
    box-shadow:
      0 5px 12px rgba(0,0,0,.5),
      0 1px 2px rgba(0,0,0,.3),
      inset 0 0 0 1px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.9);
    margin-left:-26px;
    color:var(--ink);
    font-family:'Inter',sans-serif; font-weight:800;
    overflow:hidden;
    transform:translateY(-16px) scale(.85); opacity:0;
    animation:deal .32s cubic-bezier(.2,.8,.3,1) forwards;
    transition:box-shadow .25s ease, transform .25s ease;
  }
  .card::before{
    /* glass gloss sheen — a soft diagonal light band, not a cartoon shine */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 58%);
    opacity:.5;
  }
  .card:first-child{ margin-left:0; }
  @keyframes deal{ to{ transform:translateY(0) scale(1); opacity:1; } }
  .card.red{ color:var(--crimson); }
  /* corner-anchored rank/suit — the rank can never spill onto a neighbour
     or off the card edge, unlike centering it in a flex row */
  .card-corner{
    position:absolute; z-index:1; font-size:15px; line-height:.86; text-align:center;
  }
  .card-corner-top{ top:6px; left:6px; }
  .card-corner-bottom{ right:6px; bottom:6px; transform:rotate(180deg); }
  .card-centre-suit{
    position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
    font-size:30px; opacity:.92;
  }
  .card.win-glow{
    box-shadow:
      0 0 0 2px var(--gold-bright),
      0 0 22px rgba(224,185,94,.55),
      0 6px 14px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.9);
    transform:translateY(-3px);
  }
  .card.back{
    background:
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(0,0,0,.12) 9px 10px),
      repeating-linear-gradient(-45deg, transparent 0 9px, rgba(0,0,0,.12) 9px 10px),
      linear-gradient(155deg, var(--felt-3), var(--felt-2));
    box-shadow:
      0 5px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3),
      inset 0 0 0 5px var(--felt-2), inset 0 0 0 6px var(--gold-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .card.back::before{ display:none; }
  .card.back::after{
    content:"♠"; color:var(--gold-bright); font-size:24px; opacity:.9;
    text-shadow:0 0 8px rgba(224,185,94,.4);
  }

  .center-message{
    font-family:'Cinzel',serif; font-weight:600; font-size:20px;
    color:var(--gold-bright); text-align:center; min-height:26px; margin-top:4px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .table-tagline{ text-align:center; margin:2px 0 4px; }
  .table-tagline .line{
    font-family:'Cinzel',serif; letter-spacing:.14em; text-transform:uppercase;
    color:#d8cfb8; font-size:12px; margin:2px 0;
  }
  .table-tagline .line.accent{ color:var(--gold); }
  .hint-bar{ text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); min-height:16px; }
  .count-bar{ text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#a89a86; }

  /* Neutral wrapper on desktop — no visual effect, playActions never
     gets relocated here outside mobile. See mobile override below. */
  .turn-row{ display:contents; }
  .split-hands{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin-top:4px; }
  .split-hand{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 10px; border-radius:12px; }
  .split-hand.active{ box-shadow:0 0 0 2px var(--gold), 0 0 20px rgba(224,185,94,.25); }
  .split-hand .hand-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#c9bfa8; }
  .split-hand .outcome-badge{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    padding:2px 12px; border-radius:20px; background:rgba(0,0,0,.4);
  }
  .outcome-badge.win, .outcome-badge.blackjack{ color:var(--win); border:1px solid var(--win); }
  .outcome-badge.lose, .outcome-badge.surrender{ color:var(--lose); border:1px solid var(--lose); }
  .outcome-badge.push{ color:var(--gold); border:1px solid var(--gold); }

  /* bet circle */
  .bet-circle-wrap{ display:flex; flex-direction:column; align-items:center; margin-top:6px; }
  .bet-circle{
    min-width:104px; height:104px; border-radius:52px;
    padding:0 14px;
    border:2px dashed var(--gold-line);
    display:flex; align-items:center; justify-content:center;
    transition:min-width .15s ease;
  }
  .bet-circle:not(.empty){ min-width:140px; }
  .bet-circle .chip-stack{
    width:66px; height:66px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15px;
    border:3px dashed rgba(255,255,255,.6);
    box-shadow:0 4px 10px rgba(0,0,0,.5);
    background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim));
    color:var(--ink);
  }
  .bet-circle.empty .chip-stack{ display:none; }
  /* Chips in the bet circle group by denomination — real chips of the same
     value sit directly above one another with a ×N count badge, rather
     than one disc being dropped per click. */
  .chip-pile{ display:flex; align-items:flex-end; gap:10px; }
  .denom-stack{ position:relative; width:52px; height:66px; }
  .pile-chip{
    position:absolute; left:0; bottom:0; width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:none;
    box-shadow:0 4px 8px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.1), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 5px rgba(0,0,0,.35);
    background:radial-gradient(circle at 35% 30%, var(--chip-c1), var(--chip-c2));
    animation:pileIn .18s cubic-bezier(.2,.8,.3,1) backwards;
  }

  .pile-chip .chip-face{
    width:60%; height:60%; letter-spacing:-.01em;
  }
  .pile-chip.c500 .chip-face{ color:#7a5a1c; }
  @keyframes pileIn{ from{ transform:translateY(-14px) scale(.7); opacity:0; } to{ transform:none; } }
  .denom-count{
    position:absolute; z-index:5; top:-6px; right:-6px;
    min-width:18px; padding:2px 5px; border-radius:10px;
    background:var(--gold-bright); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:800;
    text-align:center; box-shadow:0 2px 4px rgba(0,0,0,.4);
  }
  .pile-more{
    position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold-bright);
    background:rgba(0,0,0,.6); border:1px solid var(--gold-line); border-radius:10px;
    padding:1px 7px; white-space:nowrap;
  }
  .current-bet-val{ margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--gold-bright); font-weight:600; }
  .side-bet-row{ display:flex; gap:14px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
  .side-bet-spot{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    cursor:pointer; padding:6px 12px; border-radius:12px;
    border:1px dashed var(--gold-line); background:rgba(0,0,0,.2);
    transition:border-color .15s ease, background .15s ease;
  }
  .side-bet-spot:hover{ border-color:var(--gold); }
  .side-bet-spot.active{ border-color:var(--gold-bright); border-style:solid; background:rgba(224,185,94,.12); }
  .side-bet-spot .label{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#c8bda3; }
  .side-bet-spot .stake{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--gold-bright); }
  .side-bet-spot .stake.zero{ color:#6b6155; }
  .side-bet-spot .result{ font-size:10px; font-weight:700; }
  .side-bet-spot .result.win{ color:var(--win); }
  .side-bet-spot .result.lose{ color:var(--lose); }

  /* ================= Bottom controls (in normal flow, not an
     absolute overlay) ================= */
  /* Previously position:absolute with felt-surface reserving a fixed
     padding-bottom "budget" for it to sit in — but that budget had to
     be guessed in advance, and the actual height of this block varies
     (the chip row wraps to a second line on narrow phones), so any
     fixed number was fragile and eventually clipped/overlapped real
     content. Normal flow means its real height is always counted
     automatically, on any width, any font, any future chip additions —
     no more guessing needed. */
  .bottom-controls{
    width:100%; margin-top:28px; z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:0 16px;
  }

  .chip-strip{ display:flex; align-items:center; gap:10px; }
  .nav-arrow{
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(155deg,#171310,#0a0806);
    border:1px solid var(--gold-line); color:var(--gold);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px;
  }
  .nav-arrow:hover{ border-color:var(--gold); }
  .chip-row{ display:flex; gap:10px; }
  .chip{
    position:relative;
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none;
    box-shadow:0 5px 10px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.1), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 5px rgba(0,0,0,.35);
    transition:transform .12s ease, box-shadow .12s ease;
    background:radial-gradient(circle at 35% 30%, var(--chip-c1), var(--chip-c2));
  }
  .chip-face{
    position:relative; z-index:1;
    width:60%; height:60%; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 28%, #fffdf6, #efe8d4 75%);
    /* Concentric box-shadow rings — not a mask. Multiple box-shadows paint
       with the first one on top, so a smaller-spread color ring sits over
       a larger-spread white ring, giving a plain, unmasked white / color /
       white read that works the same in every browser (mask support is
       inconsistent enough across engines that it was silently failing to
       render at all in places — box-shadow has been reliable for over a
       decade). Sized so the white rim reaches almost to the chip's edge. */
    box-shadow:
      0 0 0 5px var(--chip-c1),
      0 0 0 10px #ffffff,
      inset 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.6),
      0 1px 1px rgba(0,0,0,.25);
    font-family:'IBM Plex Mono',monospace; font-weight:800; letter-spacing:-.01em;
    color:var(--chip-c2);
    white-space:nowrap;
  }
  .chip.c500 .chip-face{ color:#7a5a1c; }
  /* Digit-count-aware sizing: at one fixed font size, "5" leaves a lot of
     empty white space while "500" crowds the circle, which is exactly the
     "inconsistent white space between chips" problem. Scaling the number
     to the digit count keeps every denomination filling a similar, even
     proportion of its white face. Shared by tray chips and the chips
     placed in the bet circle (both are the same physical size), so the
     two can never look different from each other again. */
  .chip.c5 .chip-face, .pile-chip.c5 .chip-face{ font-size:16px; }
  .chip.c10 .chip-face, .pile-chip.c10 .chip-face,
  .chip.c25 .chip-face, .pile-chip.c25 .chip-face,
  .chip.c50 .chip-face, .pile-chip.c50 .chip-face{ font-size:13px; }
  .chip.c100 .chip-face, .pile-chip.c100 .chip-face,
  .chip.c500 .chip-face, .pile-chip.c500 .chip-face{ font-size:10.5px; }
  .chip:hover:not(:disabled){ transform:translateY(-3px); }
  .chip:active:not(:disabled){ transform:translateY(0) scale(.95); }
  .chip.selected{ box-shadow:0 0 0 3px var(--gold-bright), 0 5px 12px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.1); }
  .chip:disabled{ opacity:.3; cursor:not-allowed; transform:none; }
  .chip.c5, .pile-chip.c5{ --chip-c1:#4caa5f; --chip-c2:#1f6b2c; }
  .chip.c10, .pile-chip.c10{ --chip-c1:#d1545f; --chip-c2:#7a1c2a; }
  .chip.c25, .pile-chip.c25{ --chip-c1:#4a86d6; --chip-c2:#1e3f74; }
  .chip.c50, .pile-chip.c50{ --chip-c1:#a267d1; --chip-c2:#5a2f80; }
  .chip.c100, .pile-chip.c100{ --chip-c1:#3a3a3a; --chip-c2:#0d0d0d; }
  .chip.c500, .pile-chip.c500{ --chip-c1:#f0c96a; --chip-c2:#b5892f; }
  .undo-btn{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:linear-gradient(155deg,#171310,#0a0806);
    border:1px solid var(--gold-line); color:var(--cream);
    border-radius:12px; padding:8px 14px; cursor:pointer; font-size:11px; letter-spacing:.06em;
  }
  .undo-btn:hover{ border-color:var(--gold); }
  .undo-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .undo-btn .ico{ font-size:15px; color:var(--gold); }

  .action-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%; max-width:640px; }
  button.action{
    position:relative; overflow:hidden;
    flex:1 1 140px; min-width:120px;
    font-family:'Inter',sans-serif; font-weight:800; font-size:15px; letter-spacing:.03em;
    padding:15px 18px; border-radius:14px; cursor:pointer; border:1px solid transparent;
    display:flex; align-items:center; justify-content:center; gap:8px;
    text-transform:uppercase;
    transition:filter .12s ease, transform .08s ease;
    box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.25);
  }
  button.action::before{
    content:""; position:absolute; left:0; right:0; top:0; height:46%;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
    pointer-events:none;
  }
  button.action:active:not(:disabled){ transform:translateY(1px); box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
  button.action:disabled{ opacity:.35; cursor:not-allowed; }
  button.action .ico{ font-size:16px; }
  .btn-double{
    background:linear-gradient(180deg,#3a7ac2,#153a63);
    border-color:rgba(74,134,214,.5); color:#eef5ff;
    box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.35);
  }
  .btn-double:hover:not(:disabled){ filter:brightness(1.08); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(74,134,214,.4); }
  .btn-hit{ background:linear-gradient(180deg,#3fae52,#1f6b2c); color:#f2fff2; }
  .btn-hit:hover:not(:disabled){ filter:brightness(1.08); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(63,174,82,.4); }
  .btn-stand{ background:linear-gradient(180deg,#c85a6a,#7a1c2a); color:#fff2f3; }
  .btn-stand:hover:not(:disabled){ filter:brightness(1.08); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(200,90,106,.4); }
  .btn-split{ background:linear-gradient(180deg,#8a55a6,#432459); color:#f7f0fb; }
  .btn-split:hover:not(:disabled){ filter:brightness(1.08); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px rgba(138,85,166,.4); }
  .btn-surrender{
    background:transparent; border-color:rgba(224,105,122,.5); color:var(--lose);
    flex:1 1 120px; padding:12px 16px; font-size:13px;
  }
  .btn-surrender:hover:not(:disabled){ background:rgba(224,105,122,.12); }
  .btn-exchange{
    background:linear-gradient(180deg,#c2811f,#7a5010);
    border-color:rgba(224,185,94,.4); color:#fff3dd;
    flex:1 1 120px; padding:12px 16px; font-size:13px;
  }
  .btn-exchange:hover:not(:disabled){ filter:brightness(1.1); }
  .btn-deal{
    background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim)); color:var(--ink);
    flex:1 1 200px; max-width:260px;
  }
  .btn-deal:hover:not(:disabled){ filter:brightness(1.06); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), 0 0 18px rgba(224,185,94,.5); }
  .btn-ghost{
    background:transparent; border-color:var(--gold-line); color:var(--cream);
    flex:0 0 auto; padding:15px 20px;
  }
  .btn-ghost:hover:not(:disabled){ border-color:var(--gold); }
  .btn-clear{
    background:linear-gradient(180deg,#33372f,#111410);
    border-color:rgba(224,185,94,.3); color:var(--cream);
    flex:0 0 auto; padding:15px 20px;
  }
  .btn-clear:hover:not(:disabled){ filter:brightness(1.2); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(224,185,94,.18); }
  .btn-primary-lg{
    background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim)); color:var(--ink);
  }

  /* bottom-left small utility buttons */
  .corner-actions{
    position:absolute; left:16px; bottom:14px; z-index:5;
    display:flex; flex-direction:column; gap:8px;
  }
  .corner-btn{
    width:58px;
    background:linear-gradient(155deg,#171310,#0a0806);
    border:1px solid var(--gold-line); color:var(--cream);
    border-radius:10px; padding:8px 4px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  }
  .corner-btn:hover{ border-color:var(--gold); }
  .corner-btn[aria-pressed="true"]{ background:rgba(224,185,94,.18); border-color:var(--gold); }
  .corner-btn .ico{ font-size:15px; color:var(--gold); }

  /* ================= Panels ================= */
  .panel-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
  .panel-overlay.open{ display:flex; }
  .panel{
    position:relative;
    background:linear-gradient(155deg, rgba(20,16,10,.85), rgba(8,6,4,.92));
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--gold-line); border-radius:16px;
    max-width:460px; width:100%; max-height:80vh; overflow-y:auto;
    padding:22px 24px; box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .panel h2{ font-family:'Cinzel',serif; margin:0 0 4px; font-size:20px; color:var(--gold); }
  .panel p.sub{ margin:0 0 16px; font-size:12px; color:#a89a86; font-family:'IBM Plex Mono',monospace; }
  .panel ul{ padding-left:18px; margin:0 0 18px; font-size:14px; line-height:1.7; color:var(--cream); }
  .panel-close{ display:block; margin-top:10px; width:100%; padding:10px; border-radius:999px; border:1px solid var(--gold-line); background:transparent; color:var(--cream); cursor:pointer; font-weight:700; }
  .panel-close:hover{ background:rgba(224,185,94,.12); }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
  .toggle-row:last-of-type{ border-bottom:none; }
  .switch{ position:relative; width:40px; height:22px; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; inset:0; background:rgba(255,255,255,.15); border-radius:20px; cursor:pointer; transition:.15s; }
  .slider::before{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:var(--cream); border-radius:50%; transition:.15s; }
  input:checked + .slider{ background:var(--gold); }
  input:checked + .slider::before{ transform:translateX(18px); background:var(--ink); }

  footer{ padding:22px 20px 40px; text-align:center; font-size:11px; color:#6b6155; font-family:'IBM Plex Mono',monospace; }

  @media (max-width:860px){
    .rules-inline{ display:none; }
    /* The felt's own tagline (e.g. "Classic Vegas Strip") already
       announces the game name, making the header title redundant on
       mobile — removing it frees a full row of header height, and
       lets Sound/Settings naturally sit right after Balance in one
       row instead of wrapping to a second line beneath the title. */
    .brand-cluster{ display:none; }
    /* Tightens the gap between the "Dealer" label and the dealer's
       own card row beneath it. */
    #dealerCards.cards-row{ margin-top:4px; }
    /* hint-bar reserves 16px even when empty (so the layout doesn't
       jump when a practice-mode hint appears) — but that reserved
       space was the main contributor to the gap between the "Your
       move" message and the "You" label beneath it. Removed on
       mobile: a hint appearing will shift things slightly, an
       acceptable trade since hints are an optional practice-mode
       feature, not something shown by default every turn. */
    .hint-bar{ min-height:0; }
    .center-col{ gap:4px; }
    header{ justify-content:flex-start; }
    /* Previously fully hidden on mobile (losing "6 Decks" and Last
       Win/Last Bet entirely). Restored here as a compact, normal-flow
       row instead of the desktop's position:absolute corner overlay —
       deliberately NOT reusing position:absolute, since that pattern
       caused real, hard-to-predict clipping bugs elsewhere in this
       project (see bottom-controls) when content height varies. */
    .table-side-right{
      position:static; flex-direction:row; align-items:flex-start;
      justify-content:space-between; width:100%; gap:8px;
      margin-bottom:8px;
    }
    /* Holds the relocated MIN/MAX + Balance boxes (moved here via JS,
       see controller.js applyResponsiveLayout) as a narrow, stacked
       first column — keeping it compact leaves enough width for the
       other two columns in the same row. */
    .mobile-stats-slot{
      display:flex; flex-direction:column; gap:5px; flex:0 1 auto; min-width:0;
    }
    .mobile-stats-slot .stat-box{ padding:4px 8px; gap:8px; }
    .mobile-stats-slot .stat-box .cell .val{ font-size:12px; }
    .mobile-stats-slot .stat-box .cell label{ font-size:8px; }
    .mobile-stats-slot .balance-box .chip-ico{ width:18px; height:18px; }
    .mobile-stats-slot .balance-box .val{ font-size:12px; }
    /* Reverted to stacked (shoe icon above "N Decks") now that this is
       the middle of three columns rather than paired directly beside
       Last Win/Bet in a two-column row — keeps this column narrow too. */
    .deck-info{ flex-direction:column; align-items:center; gap:0; }
    .shoe-svg{ width:44px; height:44px; }
    .deck-count{ margin-top:-4px; font-size:9px; padding:2px 8px; }
    /* Tightened from the desktop values (10px 18px) — this box now
       needs to share a row with two other columns on a narrow screen,
       so padding is trimmed to just what's needed for legibility. */
    .last-hand-box{ padding:6px 10px; text-align:right; }
    .last-hand-box .row{ padding:3px 0; }
    .last-hand-box label{ font-size:8px; }
    .last-hand-box .val{ font-size:13px; }
    .felt-surface{ padding-top:12px; padding-bottom:24px; }
    .bottom-controls{ margin-top:16px; }
    footer{ padding:14px 20px 22px; }
    .rivets{ display:none; } /* purely decorative, costs real space on mobile */
    /* corner-actions (Rules button) is position:absolute on desktop,
       anchored to felt-surface's bottom-left — safe there since the
       betting/play action rows never wrap unpredictably at that width.
       On mobile, the play-phase action row (Surrender/Double/Split/Hit/
       Stand) can wrap to 2 lines, and a fixed bottom offset can then
       land mid-way through those buttons instead of below them. Normal
       flow avoids the whole class of bug, same fix as bottom-controls
       above, just scoped to mobile since desktop already renders fine.
       Now also holds the relocated Sound/Settings icons (moved here
       via JS) alongside Rules, so all three sit together at the
       bottom rather than Sound/Settings occupying header space. */
    .corner-actions{
      position:static; flex-direction:row; align-items:center;
      justify-content:center; gap:10px; margin-top:14px;
    }
    .corner-actions .icon-actions{ display:flex; gap:8px; }
    /* Active only when controller.js has actually relocated
       #playActions here (mobile + player's turn + single, non-split
       hand — see applyTurnLayout()). Neutral display:contents from
       the base rule otherwise, so this has zero effect any other
       time, including on desktop and whenever hands are split. */
    .turn-row.paired{
      display:flex; flex-direction:row; align-items:center;
      justify-content:center; gap:10px; width:100%;
    }
    .turn-row.paired .split-hands{ flex:0 1 auto; margin-top:0; }
    .turn-row.paired #playActions{
      flex:0 0 auto; flex-direction:column; width:auto;
      max-width:120px; gap:6px; padding:0;
    }
    .turn-row.paired #playActions button.action{
      font-size:11px; padding:10px 8px; flex:none; width:100%;
    }
  }
  @media (max-width:560px){
    .card{ width:56px; height:80px; } .card-corner{ font-size:12px; } .card-centre-suit{ font-size:23px; }
    .wordmark .title{ font-size:19px; }
    .stat-box{ padding:5px 10px; }
    button.action{ font-size:12px; padding:13px 10px; flex:1 1 90px; }
    .btn-surrender{ order:5; flex-basis:100%; }
  }
  /* Chip rail: at desktop widths this is one row (6 chips + decorative
     nav arrows + Undo, ~530px). That doesn't fit a phone screen, so
     below 480px the arrows (non-functional — decorative, matching the
     reference screenshot) are hidden and the chips wrap into two rows
     of three instead of clipping or forcing horizontal scroll. */
  @media (max-width:480px){
    .chip-strip{ flex-wrap:wrap; justify-content:center; gap:8px; row-gap:10px; }
    .nav-arrow{ display:none; }
    .chip-row{ flex-wrap:wrap; justify-content:center; gap:8px; }
    .chip{ width:46px; height:46px; }
    .undo-btn{ padding:7px 12px; font-size:10px; }
    .bet-circle{ min-width:76px; height:76px; }
    .bet-circle:not(.empty){ min-width:100px; }
    .chip-pile{ gap:6px; }
    .denom-stack{ width:38px; height:48px; }
    .pile-chip{ width:38px; height:38px; }
    .chip.c100 .chip-face, .pile-chip.c100 .chip-face,
    .chip.c500 .chip-face, .pile-chip.c500 .chip-face{ font-size:9px; }
    .chip.c10 .chip-face, .pile-chip.c10 .chip-face,
    .chip.c25 .chip-face, .pile-chip.c25 .chip-face,
    .chip.c50 .chip-face, .pile-chip.c50 .chip-face{ font-size:11.5px; }
    .chip.c5 .chip-face, .pile-chip.c5 .chip-face{ font-size:14px; }
    /* Ring thickness is fixed-pixel, not percentage, so it must be scaled
       down explicitly at each smaller chip size or it overflows the chip. */
    .chip .chip-face{
      box-shadow:
        0 0 0 4px var(--chip-c1), 0 0 0 8px #ffffff,
        inset 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.6), 0 1px 1px rgba(0,0,0,.25);
    }
    .pile-chip .chip-face{
      box-shadow:
        0 0 0 3px var(--chip-c1), 0 0 0 6.5px #ffffff,
        inset 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.6), 0 1px 1px rgba(0,0,0,.25);
    }
    .corner-actions{ gap:6px; }
    .corner-btn{ padding:7px 10px; font-size:11px; }
  }
  @media (max-width:360px){
    .chip{ width:42px; height:42px; }
    .chip .chip-face{
      box-shadow:
        0 0 0 3.5px var(--chip-c1), 0 0 0 7px #ffffff,
        inset 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.6), 0 1px 1px rgba(0,0,0,.25);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .card{ animation:none; opacity:1; transform:none; }
    *{ transition:none !important; }
  }