@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);
    --accent: var(--gold);
    --accent-ink: var(--ink);
    --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; }
  }
  .pile-chip{ touch-action:manipulation; }
  /* ::selection and :focus-visible now come from shared-primitives.css. */
  .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;
  }
  /* Margin-based spacing, not flex gap — gap is not supported by the
     rendering engine used for previews, which collapses the header
     items onto the title. */
  /* Title left, controls right, full width between them. Margin-based
     spacing rather than flex gap, which this rendering engine ignores. */
  .brand-cluster{ display:flex; align-items:center; width:100%; padding:0 22px; box-sizing:border-box; }
  .brand-cluster .wordmark{ margin-right:auto; }
  .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;
    /* Plain solid gold. This deliberately does NOT use the
       background-clip:text gradient effect that was here before: that
       technique paints the letters through a gradient with the text
       colour set to transparent, so wherever the gradient failed to
       paint the title rendered completely invisible and the header
       buttons collapsed into its empty space. Layered fallbacks did
       not reliably fix it, so the fragile technique is removed
       entirely — a solid colour cannot fail this way. */
    color:var(--gold-bright);
    text-shadow:0 1px 0 rgba(0,0,0,.4);
  }

  .info-boxes{ display:flex; flex-wrap:wrap; align-items:center; }
  .info-boxes > *{ margin-left:10px; }
  .info-boxes > *:first-child{ margin-left:0; }
  .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, rgba(0,0,0,.16) 1px, transparent 1px, transparent 4px),
      repeating-linear-gradient(131deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 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; top:9px; right:9px; bottom:9px; left: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, rgba(255,255,255,.022) 1px, transparent 1px, transparent 3px),
      repeating-linear-gradient(-43deg, rgba(0,0,0,.028) 0, rgba(0,0,0,.028) 1px, transparent 1px, transparent 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; top:12px; right:12px; bottom:12px; left: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; top:0; right:0; bottom:0; left: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;
  }
  .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; }
  .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; top:0; right:0; bottom:0; left: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, transparent 9px, rgba(0,0,0,.12) 9px, rgba(0,0,0,.12) 10px),
      repeating-linear-gradient(-45deg, transparent 0, transparent 9px, rgba(0,0,0,.12) 9px, rgba(0,0,0,.12) 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; }

  .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; }
  /* Safari applies its own native styling to <button> elements, which
     overrides border-radius and custom backgrounds — round chips render
     as squares, pill buttons render as rectangles. Resetting appearance
     on every button fixes this on desktop and iOS Safari, and is a no-op
     in Chrome and Firefox. */
  /* Scoped deliberately to .chip only. An earlier version applied this
     to every button class, which stripped native layout from controls
     whose positioning depended on it and pushed the rules/settings/volume
     buttons to the bottom of the page. Only the round chips actually need
     the reset, since Safari's native button styling overrides their
     border-radius and renders them square. */
  /* .chip appearance:none reset now lives in shared-primitives.css. */

  .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; top:0; right:0; bottom:0; left: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; top:0; right:0; bottom:0; left: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; }
    .table-side-right{ position:static; align-items:center; flex-direction:row; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
    .felt-surface{ padding-top:12px; padding-bottom:24px; }
  }
  @media (max-width:560px){
    .card{ width:56px; height:80px; } .card-corner{ font-size:12px; } .card-centre-suit{ font-size:23px; }
    /* "Three Card Poker" at the previous 19px still wrapped to a
       second line while sharing its row with the Min/Max/Balance
       boxes, and that wrapped line visually overlapped the sound/
       settings buttons below. Shrinking further so the full title
       reliably fits on one line at this width. */
    .wordmark .title{ font-size:15px; white-space:nowrap; }
    .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; max-width:230px; }
    .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-row{ max-width:210px; }
    .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; }
  }

/* ============================================================
   Three-column stats bar on the felt — brought over from
   Caribbean Stud so every game in the catalog shares one layout:
   Min/Max over Balance, Last Win over Last Bet, and Rules as a
   matching third column. Replaces the old split of stat boxes in
   the page header plus a Rules button in the felt's bottom corner.
   ============================================================ */
/* ------------------------------------------------------------
   Centered stats bar on the felt.
   Min, Max and Balance were previously in the page header, where
   they crowded the title; Last Win / Last Bet were pinned to the
   felt's right edge. Grouping all five into one centered bar at
   the top of the felt keeps every number the player cares about
   in a single place and leaves the header clean.
   Margin-based spacing (not flex `gap`) for rendering-engine
   compatibility, as elsewhere in this project.
   ------------------------------------------------------------ */
/* Two separate boxes rather than one continuous bar: the left group
   holds table limits and the player's balance (what you need before
   betting), the right group holds last-hand history (what just
   happened). Keeping them visually distinct makes each easier to
   read at a glance than a single undifferentiated row of five. */
.felt-stats-bar{
  position:absolute; top:14px; left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex; align-items:stretch;
  white-space:nowrap;
}
.stat-group{
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:space-evenly;
  background:linear-gradient(155deg, rgba(10,15,12,.72), rgba(4,7,5,.84));
  border:1px solid var(--gold-line);
  border-radius:12px;
  padding:8px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4);
}
.stat-group:first-child{ margin-right:10px; }
/* Three boxes side by side in a single row: table limits and balance,
   last-hand history, and the Rules button. Nothing stacks underneath. */

.felt-stat{
  padding:5px 14px;
  text-align:center;
  border-bottom:1px solid rgba(224,185,94,.18);
}
.felt-stat:last-child{ border-bottom:none; }
/* Min and Max sit side by side on one row, divided vertically, with
   the row itself divided horizontally from the Balance beneath it. */
.stat-pair{
  display:flex; align-items:stretch;
  border-bottom:1px solid rgba(224,185,94,.18);
}
.stat-pair .felt-stat{
  border-bottom:none;
  border-right:1px solid rgba(224,185,94,.18);
}
.stat-pair .felt-stat:last-child{ border-right:none; }
.felt-stat label{
  display:block;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#a89a86;
  margin-bottom:2px;
}
.felt-stat .val{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600; font-size:14px;
  color:var(--cream);
}
.felt-stat.balance .val{ color:var(--gold-bright); font-size:15px; }
/* The Rules button previously sat bottom-left, where it overlapped
   the Raise button and chip strip. Moving it to the felt's own
   bottom-right corner clears that collision entirely while keeping
   it visually associated with the table rather than the controls. */
/* The Rules button previously sat at the felt's bottom edge, level
   with the Fold/Raise action row, where it overlapped the Fold
   button. Anchoring it to the felt's mid-right instead keeps it
   reachable and clear of every control, since the right side of the
   felt below the stats box is otherwise empty space. */
/* The Rules button previously floated over the felt, where it
   overlaid the table. It now sits inside the stats bar as a third
   item, to the right of the Last Win / Last Bet box, so it occupies
   the same top strip as the other readouts and can never overlap
   the playing area. Sized to match the stat boxes' height. */
/* The Rules button sits inside the stats bar as a third item, to the
   right of the Last Win / Last Bet box, so it shares the top strip
   with the other readouts and never overlays the playing area.
   Deliberately NOT stretched to the stacked boxes' full height — it
   is a control, not a readout, so it stays compact and top-aligned
   rather than reading as an oversized third panel. */
/* The Rules box is the third column in the stats row. It must match
   the two stat boxes beside it visually, not just structurally — it
   previously inherited .corner-btn's black background and dark border,
   so it read as a button sitting next to the boxes rather than as a
   matching third column. Same gradient, border, radius and shadow as
   .stat-group, with its content vertically centred. */
.stats-rules-btn{
  margin-left:10px;
  width:auto;
  align-self:stretch;
  padding:8px 18px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:linear-gradient(155deg, rgba(10,15,12,.72), rgba(4,7,5,.84));
  border:1px solid var(--gold-line);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4);
  color:var(--cream);
  cursor:pointer;
}
.stats-rules-btn:hover{ border-color:var(--gold); }
.stats-rules-btn .ico{ font-size:18px; margin-bottom:4px; }
/* The three columns must stay side by side at every width. This
     previously used flex-wrap:wrap, which pushed the Rules column onto
     its own row underneath the other two as soon as they stopped
     fitting. Keeping nowrap and shrinking the padding instead means
     the row stays three columns and simply gets narrower. */
  .felt-stats-bar{
    position:relative; top:auto; left:auto; transform:none;
    margin:0 auto 6px; flex-wrap:nowrap; justify-content:center;
  }
.felt-stat{ padding:2px 8px; }
.felt-stat .val{ font-size:13px; }
/* The desktop .center-col padding-top exists only to clear the
     absolutely-positioned stats bar. Here the bar is position:relative
     and sits in normal flow, so that padding is pure dead space — it was
     leaving a ~105px gap between the stat boxes and the Dealer label. */
  .center-col{ padding-top:0; }
.stats-rules-btn{ padding:8px 10px; }
.stats-rules-btn .ico{ font-size:15px; }