/* ============================================================
   tcp.css — Three Card Poker layout additions only.
   Everything visual (felt, gold trim, chips, cards, buttons,
   panels) is inherited from game.css. This file only adds the
   handful of elements that don't exist in the blackjack layout:
   a second (Play) betting spot, the dealer-qualify badge, and
   the hand-rank readout under the player's own cards.
   ============================================================ */

.tcp-spots-row{
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:flex-start;
  margin-top:8px;
}

.spot-label{
  margin-top:4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
}

/* The Play spot is display-only (never clickable — it's always exactly
   the Ante amount, auto-filled the moment the player chooses Play) so it
   gets no hover/empty-dashed affordance once populated; it simply mirrors
   the Ante circle's filled appearance. */
#playCircle.filled{
  border-style:solid;
  border-color:var(--gold-bright);
}

.dealer-qualify-badge{
  margin-top:2px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 10px;
  border-radius:10px;
  text-transform:uppercase;
}
.dealer-qualify-badge.qualified{
  color:var(--gold-bright);
  border:1px solid var(--gold-line);
  background:rgba(224,185,94,.12);
}
.dealer-qualify-badge.not-qualified{
  color:#e6dfcc;
  border:1px solid rgba(230,223,204,.3);
  background:rgba(0,0,0,.3);
}

.hand-rank-pill{
  margin-top:6px;
  font-family:'Fraunces', serif;
  font-size:13px;
  color:var(--gold-bright);
  text-align:center;
}

/* Narrow screens: the two betting spots (Ante/Play) sit side by side at
   full size on desktop; below the same breakpoint game.css already uses
   for stacking its own side panels, shrink the gap so both spots and
   their labels comfortably fit without wrapping oddly. */
@media (max-width:860px){
  .tcp-spots-row{ gap:16px; }
}


/* =====================================================================
   CLARITY AND ACCESSIBILITY
   Scoped to this game's own stylesheet, NOT game.css — that file is
   shared with Blackjack, and 34% of its rules belong to other games.
   Changing it there would alter a game that has not been tested.

   Contrast was measured across the palette rather than assumed. Most
   of it already passes: gold on felt 5.1:1, cream 8.3:1, and the red
   card pips sit on a cream card face at 6.2:1, not on the felt. Two
   things did not pass, and only those are changed.
   ===================================================================== */

/* The losing-result red measured 2.9:1 on the felt and 3.6:1 on the
   Pair Plus spot — below AA in both places. Lightened along the same
   hue until it clears: 4.6:1 on felt, 5.7:1 on the spot. */
.side-bet-spot .result.lose,
.outcome-badge.lose{ color:#eba0ab; }
.outcome-badge.lose{ border-color:#eba0ab; }

/* Type floor. Fifteen rules that this game renders were under 12px —
   9px chip faces, 9px felt-stat labels, 10px side-bet labels, 11px
   badges and pills. Small uppercase text with wide letter-spacing is
   the hardest thing on the table to read, and it carries the stake and
   result information. */
.felt-stat label{ font-size:13px; }
.side-bet-spot .label{ font-size:13px; }
.side-bet-spot .result{ font-size:13px; }
.spot-label{ font-size:13px; }
.seat-pill{ font-size:13px; }
.dealer-qualify-badge{ font-size:13px; }
.wordmark .eyebrow{ font-size:13px; }
.corner-btn{ font-size:13px; }
.undo-btn{ font-size:13px; }
.denom-count{ font-size:12px; }
.chip.c500 .chip-face,
.pile-chip.c500 .chip-face{ font-size:11px; }   /* 500 needs three digits in a disc */

/* The game delegates :focus-visible to the theme's shared-primitives.css.
   That works today, but the game should not be unusable by keyboard if
   the theme file is ever reordered, renamed or fails to load. This is a
   local fallback at the same specificity the theme would use. */
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold-bright);
  outline-offset:2px;
  border-radius:4px;
}

/* =====================================================================
   DESKTOP SIZING
   Built to the supplied guidelines. Everything lives here, not in
   game.css, because that stylesheet is shared with Blackjack and a
   third of its rules belong to other games. tcp.css loads after it, so
   these overrides win at equal specificity.

   How sizing worked before: the page had no height awareness at all.
   body used min-height:100vh with no fixed height — a deliberate,
   documented choice so that tall content stays reachable by scrolling
   rather than being clipped. The consequence is that the game never
   USED the height it was given: cards stayed 74x104 whether there were
   500px or 900px available.

   What changes: the game now scales its cards and spacing to the height
   actually available, and asks the parent for a sensible slot. The
   no-clipping principle is kept — nothing here introduces a fixed
   height or overflow:hidden, so if an estimate is ever wrong the page
   still scrolls rather than hiding the controls.
   ===================================================================== */

@media (min-width:680px){
  :root{
    /* vh first as a fallback, then dvh. Without the fallback an engine
       that lacks dvh discards the whole declaration and the cards are
       left with no size at all. */
    --tcp-card-h: clamp(76px, 15vh, 116px);
    --tcp-card-h: clamp(76px, 15dvh, 116px);
    --tcp-card-w: calc(var(--tcp-card-h) * 0.712);
  }

  /* The master size from the guidelines. Raised from 1040px. */
  .game-frame{ max-width:min(1200px, 100%); }
  header{ max-width:min(1200px, 100%); }
  .table-wrap{ max-width:min(1200px, 100%); }

  /* 28px of body padding top and bottom is 56px of the vertical budget
     on a page that needs about 644px. On desktop that is better spent
     on the cards. */
  body{ padding-top:12px; padding-bottom:12px; }

  .card{
    width:74px; height:104px;                 /* literal fallback first */
    width:var(--tcp-card-w); height:var(--tcp-card-h);
  }
  .card-corner{ font-size:clamp(13px, calc(var(--tcp-card-h) * 0.155), 20px); }
  .card-centre-suit{ font-size:clamp(24px, calc(var(--tcp-card-h) * 0.30), 38px); }

  /* Text that must stay readable regardless of how the cards scale.
     These floors are the ones established in the accessibility pass and
     must not be undone by any of the above. */
  .felt-stat label,
  .side-bet-spot .label,
  .side-bet-spot .result,
  .spot-label,
  .seat-pill,
  .dealer-qualify-badge{ font-size:13px; }
  .center-message{ font-size:clamp(15px, 2.2vh, 19px); font-size:clamp(15px, 2.2dvh, 19px); }
}

/* Short laptop viewports — a 1366x768 panel with browser chrome and a
   bookmarks bar can leave barely 600px. Spacing tightens; nothing is
   cut off, and the type floors above still hold. */
@media (min-width:680px) and (max-height:660px){
  :root{
    --tcp-card-h: clamp(70px, 13vh, 92px);
    --tcp-card-h: clamp(70px, 13dvh, 92px);
  }
  body{ padding-top:8px; padding-bottom:8px; }
  header{ padding:8px 16px 4px; }
  .table-wrap{ padding:4px 10px 8px; }
}

/* =====================================================================
   DESKTOP HEIGHT — measured, not estimated
   The first version of this file budgeted 436px of furniture from
   reading the stylesheet. Rendered in a browser the real figure was
   1171px against a 675px frame, so the game scrolled inside it with
   Fold and Play outside the frame entirely.

   Measured at 1200x675:
     inline rules panel  274px
     footer               88px
     stats bar            94px
     centre column       679px  (seat 27, dealer 118, tagline 55,
                                 message 26, hint 16, player 118,
                                 spots 153, side bet 48)

   The cuts follow the spec's priority order: decoration and secondary
   UI first, cards last. The cards are untouched.
   ===================================================================== */
@media (min-width:680px){
  /* The inline rules panel duplicates the Rules button, which opens the
     full panel. 274px is a quarter of the frame for a permanent copy of
     something one click away. Kept on mobile, where the page is allowed
     to be tall and there is no frame to fit. */
  #rulesInline{ display:none; }

  /* Decoration, per the spec's priority order. */
  footer{ display:none; }
  #tableTagline{ display:none; }

  /* Secondary UI compressed before anything playable. */
  .felt-stats-bar{ padding:6px 10px; gap:8px; }
  .felt-stat label{ font-size:13px; }
  .felt-stat .val{ font-size:16px; }

  .tcp-spots-row{ padding:6px 0; gap:14px; }
  .spot-label{ font-size:13px; }
  .side-bet-row{ padding:4px 0; }
  .seat-pill{ margin:2px 0; }
  .center-message{ margin:2px 0; }

  .felt-surface{ min-height:0; padding:10px 14px 12px; }
  body{ padding-top:10px; padding-bottom:10px; }
}

/* Stronger selectors: the block above lost to game.css on specificity —
   measured, the stats bar grew to 111px rather than shrinking. Prefixed
   with .game-frame to win, and the figures come from repeated
   measurement rather than estimation. */
@media (min-width:680px){
  .game-frame .felt-stats-bar{ padding:4px 10px; gap:8px; flex-wrap:nowrap; }
  .game-frame .felt-stat label{ font-size:13px; margin-bottom:0; }
  .game-frame .felt-stat .val{ font-size:16px; }

  .game-frame .center-col{ gap:4px; }
  .game-frame .seat-pill{ margin:0; }
  .game-frame .center-message{ margin:0; min-height:0; }
  .game-frame .hint-bar{ margin:0; }

  .game-frame .tcp-spots-row{ padding:4px 0; gap:12px; }
  .game-frame .spot-label{ font-size:13px; margin-bottom:2px; }
  .game-frame .side-bet-row{ padding:2px 0; margin:0; }
  .game-frame .bottom-controls{ padding:8px 0 4px; }
}


/* =====================================================================
   DESKTOP REBUILD — to the Three Card Poker spec
   Measured baseline at 1200x675: 952 betting / 948 decision, cards
   72x101, and both card rows holding min-height:118px so the betting
   state reserved space for cards it did not have.

   The spec's own zone budget sums to ~662px, so it fits 675:
     header       45-55      dealer zone  135-160
     wager zone   90-120     player zone  210-240
     action zone  80-100     bottom strip 40-50

   Built to those zones. Inner gameplay width held to 920px inside the
   1200px canvas (section 25/38) so dealer, wagers and cards stay
   visually connected rather than spreading to the edges.

   Felt left as the catalogue green rather than the spec's #123D34:
   six games now share one green and consistency wins over one swatch.
   ===================================================================== */
@media (min-width:680px){
  /* Section 38: a constrained inner wrapper, not the full 1200. */
  .felt-surface > *{ max-width:920px; margin-left:auto; margin-right:auto; }

  /* Reserves that were sized for the original cards. */
  #playerCards, #dealerCards{ min-height:0; }

  /* --- header: 45-55px, title 18-22px (sections 5, 21) ------------ */
  .brand-cluster{ padding:2px 0; }
  .wordmark .title{ font-size:20px; line-height:1.2; }
  .wordmark .eyebrow{ font-size:12px; }

  /* --- dealer zone: 135-160px (sections 5, 7) --------------------- */
  /* Dealer cards 85-100 wide, 120-145 tall, and noticeably smaller
     than the player's during normal play. */
  #dealerCards .card{ width:86px; height:123px; font-size:24px; }
  #dealerCards{ gap:10px; }
  .center-col > .seat-pill{ font-size:12px; padding:1px 10px; line-height:1.3; }
  #dealerQual, #dealerTotal{ font-size:13px; line-height:1.2; }

  /* --- wager zone: 90-120px, spots 80-95px (sections 5, 10, 11) --- */
  .tcp-spots-row{
    display:flex; justify-content:center; align-items:flex-start;
    gap:56px;                      /* ~120-180px centre to centre */
    padding:0; margin:2px 0;
  }
  /* display:contents does not merge the side-bet row — the two rows are
     siblings in a column, so its circle still lands on its own line
     (confirmed here and in Four Card Poker). The circle is moved into
     the wager row by the controller instead; this keeps the emptied
     row from taking space. */
  /* :empty fails here — the row keeps whitespace text nodes after its
     spot is moved out, so it still claimed 52px. Hidden outright on
     desktop, where its content now lives in the wager row. */
  .side-bet-row{ display:none; }
  .bet-circle, .tcp-spot-circle, [class*="spot-circle"]{
    min-height:0; width:88px; height:88px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  }
  /* Section 11: the spot CONTAINS its label and amount —
       ANTE
       $10
     Stacked below the circle instead, the wager zone measured 155px
     against the spec's 90-120. Laid over the circle, the zone is the
     circle plus a couple of pixels, and the amount still reads as more
     important than the chip artwork. */
  .bet-circle-wrap, .tcp-spot{ position:relative; gap:0; }
  .bet-circle-wrap .current-bet-val,
  .bet-circle-wrap .spot-label,
  .tcp-spot .current-bet-val,
  .tcp-spot .spot-label{
    position:absolute; left:50%; transform:translateX(-50%);
    pointer-events:none; z-index:3; text-align:center; width:100%;
  }
  .bet-circle-wrap .spot-label, .tcp-spot .spot-label{
    top:26px; font-size:11px; letter-spacing:.1em; line-height:1.1; opacity:.85;
  }
  .bet-circle-wrap .current-bet-val, .tcp-spot .current-bet-val{
    top:42px; font-size:18px; line-height:1.1; font-weight:700;
  }

  /* --- player zone: 210-240px (sections 5, 7, 12, 13) ------------- */
  /* The strongest area: cards 105-120 wide, 150-170 tall. */
  #playerCards .card{ width:106px; height:151px; font-size:31px; }
  #playerCards{ gap:12px; }
  #youPill{ font-size:12px; padding:1px 10px; line-height:1.3; }
  /* Section 13: the hand name belongs with the cards. */
  #handRankPill{ font-size:15px; line-height:1.2; margin:2px 0 0; }

  /* --- action zone: 80-100px (sections 5, 14, 15) ----------------- */
  .center-message{ font-size:14px; line-height:1.2; margin:0; }
  #hintBar{ font-size:12px; line-height:1.2; margin:0; }
  #playActions{ gap:14px; }
  #btnFold{ min-width:148px; height:51px; font-size:16px; }
  #btnPlay{ min-width:200px; height:51px; font-size:16px; }
  #btnDeal{ min-width:200px; height:51px; font-size:16px; }

  /* --- bottom strip: 40-50px, one quiet row (section 20) ---------- */
  .felt-stats-bar{
    padding:2px 12px; gap:22px; flex-wrap:nowrap; min-height:0;
    background:transparent; border:0; box-shadow:none;
  }
  .felt-stats-bar .felt-stat{ flex-direction:row; align-items:baseline; gap:5px; }
  .felt-stats-bar .stat-pair,
  .felt-stats-bar .stat-group{ flex-direction:row; gap:18px; align-items:baseline; }
  .felt-stat label{ font-size:13px; margin-bottom:0; opacity:.75; }
  .felt-stat .val{ font-size:14px; line-height:1.2; }

  /* --- section 6: don't waste the felt --------------------------- */
  .game-frame .felt-surface{ min-height:0; padding:6px 16px 8px; }
  .felt{ padding-top:8px; padding-bottom:6px; }
  .table-wrap{ padding-top:2px; padding-bottom:4px; }
  .center-col{ gap:4px; }

  /* Section 17/33: before the deal, no empty card placeholders
     dominating the table. */
  body[data-ui-phase="bet"] #playerCards:empty,
  body[data-ui-phase="bet"] #dealerCards:empty{ display:none; }
}

/* The bottom strip measured 66px against the spec's 40-50, and the
   cause was not the text: the Rules button lives inside it at 58px
   tall. Section 20 wants this row quiet, so the button matches the
   type around it rather than setting the row's height. */
@media (min-width:680px){
  .felt-stats-bar .corner-btn{
    width:auto; height:34px; padding:4px 12px; font-size:13px;
    flex-direction:row; gap:6px;
  }
  .felt-stats-bar .corner-btn .ico{ font-size:14px; }
}

/* The stat groups are 57px while their tallest child is 39 — the extra
   is padding on the group itself, not the text. Removing it brings the
   bottom strip into the spec's 40-50 band. */
@media (min-width:680px){
  .felt-stats-bar .stat-group,
  .felt-stats-bar .stat-pair{ padding:0; }
  .felt-stats-bar .felt-stat{ padding:1px 6px; }
}

/* Measured again after the zone work — 225px was sitting in gaps and
   padding, and two earlier rules here were not applying at all:

     .felt padding-top      22px (my 8px rule lost on specificity)
     .side-bet-row          still 52px — hidden by class, but the
                            element is targeted by id elsewhere
     .bottom-controls       28px top margin
   */
@media (min-width:680px){
  #sideBetRow{ display:none; }
  .table-wrap .felt{ padding-top:10px; padding-bottom:8px; }
  .felt > .bottom-controls{ margin-top:10px; padding-top:4px; padding-bottom:2px; }
  .felt-surface > .felt-stats-bar{ margin-bottom:2px; }
  .center-col > #dealerCards{ margin-top:4px; }
  .center-col > #playerCards{ margin-top:4px; }
  .center-col > #handRankPill{ margin-top:0; }
  .center-col > .tcp-spots-row{ margin:0; }
}

/* Three fixes from looking at the render rather than the numbers:

   1. The title sits flush against the frame's left rail, so the rail
      overlaps the first character. It needs its own inset.
   2. #anteCircle measured 140x88 — a class selector lost to a more
      specific rule, so the ids are used here.
   3. The label and amount were laid over the middle of the circle,
      which is exactly where the chip pile sits (52px, centred). They
      move to the top and bottom of the spot, clear of the chips. */
@media (min-width:680px){
  .brand-cluster{ padding-left:18px; padding-right:18px; }

  #anteCircle, #playCircle, #bonusCircle, .side-bet-spot .bet-circle{
    width:88px; height:88px; border-radius:50%;
  }

  .bet-circle-wrap .spot-label, .tcp-spot .spot-label,
  .side-bet-spot .spot-label{
    top:8px; bottom:auto;
  }
  .bet-circle-wrap .current-bet-val, .tcp-spot .current-bet-val,
  .side-bet-spot .current-bet-val{
    top:auto; bottom:8px;
  }
}

/* width:88px could not take effect while min-width held 104 — the same
   trap as the min-height on the Caribbean Stud circles. Both have to
   be set. */
@media (min-width:680px){
  #anteCircle, #playCircle, #bonusCircle, .side-bet-spot .bet-circle{
    min-width:88px; max-width:88px;
  }
}

/* Pair Plus is built differently from Ante and Play — it has no inner
   .bet-circle, just a label and a stake span — which is why it rendered
   as a rounded rectangle beside two circles. Given the same treatment
   here so the three wagers read as one set (section 10). */
@media (min-width:680px){
  .tcp-spots-row .side-bet-spot{
    width:88px; height:88px; min-width:88px; max-width:88px;
    border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:0; position:relative;
  }
  .tcp-spots-row .side-bet-spot .label{
    font-size:11px; letter-spacing:.08em; line-height:1.1; opacity:.85;
    text-align:center; max-width:76px;
  }
  .tcp-spots-row .side-bet-spot .stake{
    font-size:16px; font-weight:700; line-height:1.1;
  }
}

/* =====================================================================
   A STABLE 675 — the spec's master canvas, not a size to grow past
   Two corrections to the rebuild above:

   1. Removing the card-row min-heights made the height jump 456 -> 726
      as the cards arrive. The original reserved that space, which is
      why TCP's height never moved; that was right and I should not have
      taken it out. The reserves come back, sized to the NEW cards
      rather than the old ones.

   2. 726 was still over the 675 master canvas. The last 51px comes out
      of six paddings and gaps, measured rather than guessed:
        center-col gap 4->2            14
        card-row top margins 4->0       8
        felt padding 10/8 -> 6/4        8
        felt-surface 6/8 -> 4/4         6
        bottom-controls margin 10->4    6
        table-wrap 2/4 -> 0/2           4
        message line-heights            5
   ===================================================================== */
@media (min-width:680px){
  /* the reserve, sized to the cards that now occupy it */
  #dealerCards{ min-height:123px; }
  #playerCards{ min-height:151px; }

  .center-col{ gap:2px; }
  .center-col > #dealerCards{ margin-top:0; }
  .center-col > #playerCards{ margin-top:0; }
  .table-wrap .felt{ padding-top:6px; padding-bottom:4px; }
  .game-frame .felt-surface{ padding-top:4px; padding-bottom:4px; }
  .felt > .bottom-controls{ margin-top:4px; }
  .table-wrap{ padding-top:0; padding-bottom:2px; }
  .center-message{ line-height:1.15; }
  #hintBar{ line-height:1.1; }
  #handRankPill{ line-height:1.1; }
}

/* The action zone was the last thing changing size between states:
   120px in betting (chip strip + Deal row) against 57 in the dealt
   state. The spec puts this zone at 80-100, so it is reserved at 100
   and the chip strip tightened to fit — which removes the remaining
   height difference AND the excess over the master canvas. */
@media (min-width:680px){
  /* No min-height reserve here. Reserving the action zone at 100px was
     measured and reverted: it added 43px to the DEALT state (which
     needs only the Play/Fold row) and widened the spread from 19 to 33
     rather than closing it. The centre column also varies between
     states, so reserving one zone cannot make the total constant —
     it just makes every state pay for the tallest one. */
  .felt > .bottom-controls{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
  }
  .bottom-controls .chip-strip{ min-height:0; }
  .bottom-controls .chip-strip .chip{ width:42px; height:42px; font-size:13px; }
  .bottom-controls .action-row{ min-height:0; }
  #btnDeal, #btnRebet, #btnClearBet{ height:46px; }
  .table-wrap .felt{ padding-top:4px; padding-bottom:2px; }
  .game-frame .felt-surface{ padding-top:2px; padding-bottom:2px; }
}

/* Section 8: the three cards sit apart, not fanned. They carry a
   -26px left margin from the shared stylesheet, which is right for a
   13-card hand and wrong for three — it put each card's bottom corner
   behind its neighbour. The gap property alone could not undo it. */
@media (min-width:680px){
  #playerCards .card, #dealerCards .card{ margin-left:0; margin-right:0; }
}

/* =====================================================================
   MOBILE — measured at every width the spec names
   None of the desktop work applies here; it is all behind
   min-width:680px. Measured before this block at 393x852:
   betting 1303, dealt 1152, cards a flat 56x80.

   Where the height sat:
     footer (legal note)   153
     tableTagline           85
     felt-stats-bar         94
     card rows         118 + 118, holding 56x80 cards — 38px of
                            reserved air in each
     wager row             125

   Section 29 order: dealer, Ante/Play, player cards, action, controls,
   secondary. Section 31 card sizes: player 78-88 wide at 390, 68-76 at
   320; dealer 60-72 and 54-64.
   ===================================================================== */
@media (max-width:679px){
  /* Decoration and secondary content first. */
  #rulesInline{ display:none; }
  footer{ display:none; }
  #tableTagline{ display:none !important; }

  /* Section 31: cards sized from the width so three always fit. */
  #playerCards .card{
    width:clamp(68px, 21vw, 88px);
    height:calc(clamp(68px, 21vw, 88px) / 0.70);
    font-size:clamp(19px, 5.4vw, 25px);
  }
  #dealerCards .card{
    width:clamp(54px, 16.5vw, 72px);
    height:calc(clamp(54px, 16.5vw, 72px) / 0.70);
    font-size:clamp(15px, 4.2vw, 20px);
  }
  /* Three cards, not a fan — the shared -26px margin is for 13-card
     hands (section 8 applies here too). */
  #playerCards .card, #dealerCards .card{ margin-left:0; margin-right:0; }
  #playerCards{ gap:6px; min-height:0; }
  #dealerCards{ gap:5px; min-height:0; }

  /* Section 28-equivalent: compact wagers, values primary. */
  .tcp-spots-row{ gap:14px; padding:0; margin:2px 0; }
  .side-bet-row{ display:none; }
  #anteCircle, #playCircle, #bonusCircle, .side-bet-spot .bet-circle{
    width:64px; height:64px; min-width:64px; max-width:64px;
    min-height:0; border-radius:50%;
  }
  .tcp-spots-row .side-bet-spot{
    width:64px; height:64px; min-width:64px; max-width:64px;
    border-radius:50%; padding:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  }
  .bet-circle-wrap, .tcp-spot{ position:relative; gap:0; }
  .bet-circle-wrap .spot-label, .tcp-spot .spot-label,
  .tcp-spots-row .side-bet-spot .label{
    position:absolute; top:7px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:.06em; line-height:1.1; opacity:.85;
    width:100%; text-align:center; pointer-events:none; z-index:3;
  }
  .bet-circle-wrap .current-bet-val, .tcp-spot .current-bet-val,
  .tcp-spots-row .side-bet-spot .stake{
    position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
    font-size:13px; font-weight:700; line-height:1.1;
    width:100%; text-align:center; pointer-events:none; z-index:3;
  }
  .tcp-spots-row .side-bet-spot .label,
  .tcp-spots-row .side-bet-spot .stake{ position:static; transform:none; width:auto; }

  /* Secondary information, one quiet row. */
  .felt-stats-bar{ padding:2px 8px; gap:10px; flex-wrap:nowrap; min-height:0; }
  .felt-stats-bar .felt-stat{ flex-direction:row; align-items:baseline; gap:4px; padding:0 4px; }
  .felt-stats-bar .stat-pair, .felt-stats-bar .stat-group{ flex-direction:row; gap:10px; padding:0; }
  .felt-stat label{ font-size:12px; margin-bottom:0; }
  .felt-stat .val{ font-size:13px; line-height:1.2; }
  .felt-stats-bar .corner-btn{ width:auto; height:34px; padding:4px 10px; font-size:12px; flex-direction:row; gap:5px; }

  /* Section 32-equivalent: touch targets. */
  #btnPlay, #btnFold, #btnDeal, #btnRebet, #btnClearBet{ min-height:48px; }
  .chip{ min-width:44px; min-height:44px; }

  .game-frame .felt-surface{ min-height:0; padding:6px 8px 8px; }
  .felt{ padding-top:6px; padding-bottom:6px; }
  .table-wrap{ padding-top:2px; padding-bottom:4px; }
  .center-col{ gap:2px; padding-top:0; }
  .seat-pill, .you-pill{ padding:1px 8px; font-size:12px; line-height:1.3; }
  .center-message{ font-size:14px; line-height:1.2; margin:0; }
  #hintBar{ font-size:12px; line-height:1.1; margin:0; }
  #handRankPill{ font-size:13px; line-height:1.1; margin:0; }
}

/* Narrowest phones: spacing closes, type floors hold. */
@media (max-width:360px){
  .tcp-spots-row{ gap:10px; }
  #anteCircle, #playCircle, #bonusCircle,
  .tcp-spots-row .side-bet-spot{ width:58px; height:58px; min-width:58px; max-width:58px; }
  #playerCards{ gap:4px; }
  #dealerCards{ gap:3px; }
}

/* Narrow phones: the controls were wrapping into stacks.
   Measured at 320x568 — bet actions 168px and the chip tray 157px,
   together 335px of the 675 total, because six chips and three buttons
   could not fit a 304px row and each spilled onto extra lines.

   The chip tray already has nav arrows in the markup, so it is meant to
   scroll rather than wrap. The action buttons go two-up. */
@media (max-width:679px){
  .chip-strip{ min-height:0; }
  #chipTray{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding:2px 0;
  }
  #chipTray::-webkit-scrollbar{ display:none; }
  #chipTray .chip{ flex:0 0 auto; }

  #betActions, #playActions{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;
  }
  #betActions > *, #playActions > *{ width:100%; min-height:48px; }
  /* Deal is the primary action in the betting state, so it takes the
     full width under the two secondary buttons. */
  #betActions #btnDeal{ grid-column:1 / -1; }
  .bottom-controls{ gap:6px; padding:4px 8px 6px; }
}

@media (max-width:360px){
  #chipTray .chip{ min-width:40px; min-height:40px; width:40px; height:40px; font-size:12px; }
  #betActions, #playActions{ gap:6px; }
  #betActions > *, #playActions > *{ min-height:46px; font-size:14px; }
}

/* The last 94px at 320x568, measured:
     .felt padding 22/14 — my plain .felt rule lost to the base
       stylesheet, so the stronger selector is used here as on desktop
     playActions 100px for two buttons — the labels wrap
     messages and pills, a few pixels each */
@media (max-width:679px){
  .table-wrap .felt{ padding-top:8px; padding-bottom:6px; }
}
@media (max-width:360px){
  .table-wrap .felt{ padding-top:4px; padding-bottom:4px; }
  #playActions > *, #betActions > *{
    min-height:46px; height:46px; font-size:13px; padding:4px 6px;
    white-space:nowrap;
  }
  .felt-stats-bar{ padding:1px 6px; }
  .felt-stat label{ font-size:11px; }
  .felt-stat .val{ font-size:12px; }
  .center-message{ font-size:13px; }
  #hintBar{ font-size:11px; }
  .seat-pill, .you-pill{ font-size:11px; padding:0 7px; }
  .center-col{ gap:1px; }
}

/* 320x568 is the last size over, by 48px, and the cards are already at
   the spec's floor for this width (68 and 54 wide) so they stay.
   The rest comes off furniture: the strategy hint is the most
   expendable line on the table at this size, and the header and wager
   circles give a little more. */
@media (max-width:340px){
  #hintBar{ display:none; }
  .brand-cluster{ padding:1px 0; }
  .wordmark .title{ font-size:16px; line-height:1.15; }
  .wordmark .eyebrow{ display:none; }
  #anteCircle, #playCircle, #bonusCircle,
  .tcp-spots-row .side-bet-spot{ width:54px; height:54px; min-width:54px; max-width:54px; }
  /* 11px, not 9 — the accessibility battery enforces an 11px floor and
     caught this. The circle is sized to suit the label rather than the
     label shrunk to suit the circle. */
  .tcp-spots-row .spot-label, .tcp-spots-row .side-bet-spot .label{ font-size:11px; top:4px; }
  .tcp-spots-row .current-bet-val, .tcp-spots-row .side-bet-spot .stake{ font-size:12px; bottom:5px; }
  .game-frame .felt-surface{ padding:4px 6px 6px; }
  .bottom-controls{ padding:2px 6px 4px; }
}

/* The final 21px at 320. Taken from the label pills, the stats row and
   the wager circles — the cards and the buttons are untouched. */
@media (max-width:340px){
  .seat-pill, .you-pill{ font-size:11px; padding:0 6px; line-height:1.25; }
  #handRankPill{ font-size:12px; }
  .center-message{ font-size:12px; line-height:1.15; }
  .felt-stats-bar{ padding:0 6px; gap:8px; }
  .felt-stats-bar .corner-btn{ height:30px; padding:2px 8px; }
  .felt-stat label{ font-size:11px; }
  .felt-stat .val{ font-size:11px; }
  #anteCircle, #playCircle, #bonusCircle,
  .tcp-spots-row .side-bet-spot{ width:50px; height:50px; min-width:50px; max-width:50px; }
  .table-wrap{ padding-top:0; padding-bottom:2px; }
}

/* Section 32: touch targets. Trimming for height had taken the Rules
   button to 30px and the chips to 40px, and the header icons ship at
   42px — all under the 44px minimum. Height came off the felt padding
   instead; the controls stay thumb-sized. */
@media (max-width:679px){
  #btnSound, #btnGear{ min-width:44px; min-height:44px; }
  .felt-stats-bar .corner-btn{ min-height:44px; height:44px; }
  #chipTray .chip{ min-width:44px; min-height:44px; width:44px; height:44px; }
}
@media (max-width:360px){
  #chipTray .chip{ min-width:44px; min-height:44px; width:44px; height:44px; font-size:12px; }
}
@media (max-width:340px){
  .felt-stats-bar .corner-btn{ height:44px; padding:2px 8px; }
  /* the height this costs comes back off the frame, not the controls */
  .table-wrap .felt{ padding-top:2px; padding-bottom:2px; }
  .game-frame .felt-surface{ padding:2px 6px 4px; }
  .center-col{ gap:0; }
  .bottom-controls{ padding:2px 6px 2px; gap:4px; }
}

/* The last 5px at 320, off the frame rather than the content — raising
   three labels to the 11px accessibility floor cost the margin an
   earlier trim had gained, and the floor is not negotiable. */
@media (max-width:340px){
  .table-wrap{ padding-bottom:0; }
  .bottom-controls{ padding-bottom:0; }
  .felt{ padding-bottom:0; }
}