:root{
  --felt:#0b5d3b;
  --felt-deep:#063a24;
  --felt-vign:#031b11;
  --gold:#e8c15c;
  --ink:#1d160f;
  --paper:#f6efd9;
  --text:#f3f3ef;
  --muted:#a9c2b3;

  --font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0; font-family:var(--font-body); color:var(--text);
  /* percentage-sized ellipse (not fixed px) so the gradient keeps its shape and
     doesn't go flat/washed-out on a narrow phone viewport */
  background:
    radial-gradient(ellipse 160% 55% at 50% 15%, var(--felt) 0%, var(--felt-deep) 60%, var(--felt-vign) 100%);
  min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:16px;
}
h1{margin:6px 0 2px; font-size:1.5em; letter-spacing:1px;}
.subtitle{color:var(--muted); font-size:.85em; margin-bottom:12px; text-align:center;}

@media (max-width:480px){
  body{ padding:10px; }
  h1{ font-size:1.25em; }
  .subtitle{ font-size:.78em; margin-bottom:8px; }
}

#app{
  width:100%; max-width:760px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative;
}

/* ---------- HUD: round progress, no separate table chrome any more ---------- */
.hud{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.round-label{
  font-family:var(--font-display); font-stretch:condensed; letter-spacing:.06em;
  text-transform:uppercase; font-size:.78em; color:var(--muted);
}
.pip-row{ display:flex; gap:5px; }
.pip{
  width:9px; height:9px; border-radius:2px;
  background:rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.pip.done{ background:var(--gold); box-shadow:0 0 6px rgba(232,193,92,.6); }
.pip.now{ background:var(--muted); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* the table's own "engraved" center — framed around the pot + stat card, not the
   whole screen, so it reads as the table's own center rather than bleeding down
   into the player's own space at the rail */
.center-circle{
  position:absolute;
  top:50%; left:50%;
  width:min(58vw,320px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(0,0,0,.28);
  box-shadow:
    inset 2px 2px 8px rgba(0,0,0,.35),
    inset -2px -2px 8px rgba(255,255,255,.06);
  pointer-events:none;
  z-index:0;
}

/* ---------- Pot ---------- */
.pot-banner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.pot-amount{
  font-family:var(--font-display); font-stretch:condensed; font-weight:800;
  font-size:clamp(1.9rem,6vw,2.3rem); letter-spacing:.01em; color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.pot-amount.just-bumped{ animation:potBump .3s ease; }
@keyframes potBump{ 0%{transform:scale(1);} 40%{transform:scale(1.15);} 100%{transform:scale(1);} }
.pot-label{
  font-family:var(--font-display); font-stretch:condensed; letter-spacing:.14em;
  text-transform:uppercase; font-size:.62em; color:var(--muted); margin-top:-6px;
}

/* ---------- Shared "playing card" look: ink frame + a thin gilded inner edge ---------- */
.id-card{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:
    inset 0 0 0 3px var(--gold),
    0 8px 18px rgba(0,0,0,.35);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.card-rule{ width:34%; height:2px; background:var(--gold); margin:7px 0; opacity:.85; flex-shrink:0; }

/* ---------- Table area: opponents flank the pot + stat card as one center column ---------- */
.table-area{
  position:relative; z-index:1;
  width:100%;
  flex:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  min-height:200px;
}
.table-area .seat-left{ justify-self:start; }
.table-area .seat-right{ justify-self:end; }
.center-column{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}

/* ---------- Opponent seats: two face-down cards, chip count, community-card tally ---------- */
.seat{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.seat-cards{ display:flex; gap:8px; }
/* Wraps a seat's cards (face-down mini-cards, or the human's own face-up hole-cards)
   together with the round-reveal stat badge so the badge sits beside the cards — to
   their right — instead of stacked underneath the name/chips like the rest of the seat's
   info. */
/* wrap+center as a fallback for narrow phone widths where a CPU seat's column is too
   tight for cards-plus-badge side by side — the badge drops below the cards there
   instead of clipping or overflowing the table area. */
.seat-cards-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.seat-name{ font-size:.9em; font-weight:700; color:var(--text); }
.seat-chips{
  font-family:var(--font-display); font-stretch:condensed;
  font-size:.85em; color:var(--gold); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.seat.folded{ opacity:.45; }
.seat.eliminated, .you-seat.eliminated{ opacity:.35; }
.seat.acting .mini-card{ box-shadow:0 0 0 3px rgba(232,193,92,.45); }

/* Busted players have their cards removed for the rest of the match — this stands in
   for the mini-cards / hole-cards wherever a player is eliminated. */
.spectator-tag{
  font-family:var(--font-display); font-stretch:condensed;
  font-size:.8em; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text); opacity:.7;
  padding:10px 0;
}

/* Checking: nothing changes hands, so no chip flies — instead the seat gives a
   quick knock (the physical "check" gesture at a real table) and a small tap glyph
   pops up and fades. */
.seat.just-checked, .you-seat.just-checked{ animation:checkKnock .5s ease; }
@keyframes checkKnock{
  0%, 100%{ transform:scale(1); }
  25%{ transform:scale(.94); }
  50%{ transform:scale(1); }
  70%{ transform:scale(.97); }
  85%{ transform:scale(1); }
}
.check-tap{
  position:absolute; top:-4px; left:50%;
  font-size:1.15em; pointer-events:none;
  animation:tapPop .6s ease forwards;
}
@keyframes tapPop{
  0%{ opacity:0; transform:translate(-50%,4px) scale(.6); }
  30%{ opacity:1; transform:translate(-50%,-4px) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%,-16px) scale(1); }
}

/* The floating "CALL $X" / "RAISE $X" label — a document.body-attached element (see
   popBetAmount in ui.js), positioned via fixed left/top set from the seat's own
   getBoundingClientRect at creation time, same technique as .chip-fly. Held longer than
   the chip flight itself since a dollar figure needs a beat to actually read, not just
   register as motion. Raise gets a distinct color, not just a bigger number, so the two
   are never confused at a glance. */
.bet-amount-pop{
  position:fixed; z-index:55; pointer-events:none;
  font-family:var(--font-display); font-stretch:condensed; font-weight:800;
  font-size:.72em; letter-spacing:.03em; white-space:nowrap;
  padding:3px 9px; border-radius:8px;
  background:rgba(0,0,0,.6); color:var(--gold);
  border:1px solid rgba(232,193,92,.55);
  animation:betAmountPop 900ms ease forwards;
}
.bet-amount-pop.raise{
  color:#e9fbee; background:rgba(47,125,79,.9); border-color:rgba(87,181,122,.75);
}
/* Percentage translates here are relative to the label's own box, not the viewport, so
   they read as "drift upward by about its own height" regardless of where left/top
   anchored it — the anchor itself sits at the seat's chip-amount, top edge. */
@keyframes betAmountPop{
  0%{ opacity:0; transform:translate(-50%,-70%) scale(.85); }
  15%{ opacity:1; transform:translate(-50%,-100%) scale(1.05); }
  25%{ transform:translate(-50%,-105%) scale(1); }
  75%{ opacity:1; transform:translate(-50%,-120%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-150%) scale(.95); }
}

.cards-tally{ font-size:.78em; letter-spacing:1px; min-height:1em; }
.cards-tally .fly{ display:inline-block; animation:fly 700ms ease-out; }
@keyframes fly{
  0%{ transform:translateY(-14px) scale(1.6); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* mini hole-cards — face-down (felt-striped, gold-trimmed) vs face-up (ivory, last name) */
.mini-card{
  width:57px; height:81px; aspect-ratio:57/81; border-radius:12px; border:2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--gold), 0 4px 10px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6em; color:var(--ink);
}
.mini-card.back{
  background:repeating-linear-gradient(45deg, var(--felt) 0 5px, var(--felt-deep) 5px 10px);
}
.mini-card.revealed{
  background:var(--paper); font-weight:700; font-size:.55em; padding:2px; text-align:center;
}

/* ---------- The centerpiece: this round's stat card ---------- */
.stat-card{
  position:relative; z-index:1;
  width:min(30vw,132px); aspect-ratio:3/4;
  padding:14px 8px 10px;
  justify-content:flex-start;
  box-shadow:
    inset 0 0 0 3px var(--gold),
    0 10px 26px rgba(0,0,0,.4);
}
.stat-card.hidden{
  background:repeating-linear-gradient(45deg, var(--felt) 0 5px, var(--felt-deep) 5px 10px);
  box-shadow: inset 0 0 0 3px var(--gold), 0 10px 26px rgba(0,0,0,.4);
}
.stat-card.hidden .icon{ font-size:2rem; color:var(--gold); opacity:.6; }
.stat-card .label{
  font-family:var(--font-display); font-stretch:condensed;
  font-weight:800; font-size:.9em; line-height:1.15; letter-spacing:.02em;
  text-transform:uppercase;
}
.stat-card .icon{
  font-size:1.8em; margin-top:auto; margin-bottom:4px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
}

/* A rejected multiplayer game-action (e.g. acting out of turn) — see lobby.js — needs
   somewhere to surface since the shared renderGame() template has no error slot of its
   own. Pinned to the top rather than woven into the rebuild so it survives independent
   of whatever renderGame() just replaced #app's innerHTML with. */
.game-error-toast{
  position:sticky; top:0; z-index:5;
  background:rgba(29,22,15,.9); color:var(--gold);
  border:1px solid var(--gold); border-radius:8px;
  padding:8px 14px; margin-bottom:10px;
  font-size:.85em; text-align:center;
}

/* ---------- Your seat ---------- */
.you-seat{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.you-seat.folded .hole-cards{ opacity:.4; }
.hole-cards.just-folded{ animation:foldOut .4s ease forwards; }
@keyframes foldOut{
  0%{ opacity:1; filter:grayscale(0%); transform:scale(1); }
  100%{ opacity:.4; filter:grayscale(70%); transform:scale(.96); }
}
.you-header{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.you-name{ font-weight:700; font-size:1em; }
.you-chips{
  font-family:var(--font-display); font-stretch:condensed;
  color:var(--gold); font-size:.9em; font-variant-numeric:tabular-nums;
}
.hole-cards{ display:flex; gap:12px; }
.player-card{
  width:min(30vw,132px); aspect-ratio:3/4;
  padding:14px 8px 10px;
}
.player-card .id-icon{ width:56%; height:auto; }
.player-card .pname{ font-weight:700; font-size:.95em; line-height:1.2; }

/* ---------- Action bar + raise slider ---------- */
.controls{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:8px;
}
.status-line{ text-align:center; font-size:.9em; color:var(--muted); min-height:1.2em; }

/* Action clock: counts down the same ACTION_TIMEOUT_MS betting.js actually enforces
   (passed in via the --action-timeout custom property so the two can't drift apart).
   Pure CSS — a fresh element every render, so the animation always restarts clean at
   full width for a newly-acted-upon turn and never needs JS to drive it frame by frame. */
.action-timer{
  width:100%; height:5px; border-radius:3px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.action-timer-bar{
  height:100%; width:100%; transform-origin:left;
  background-color:var(--gold);
  animation:actionTimerDrain var(--action-timeout) linear forwards;
}
@keyframes actionTimerDrain{
  /* background-color (a solid, not a gradient) is what actually interpolates smoothly
     between keyframes — a gradient-to-gradient animation here would just hard-cut. */
  0%{ transform:scaleX(1); background-color:var(--gold); }
  70%{ background-color:var(--gold); }
  100%{ transform:scaleX(0); background-color:#c1584c; }
}
.actions{ display:flex; gap:8px; }
.btn{
  flex:1;
  font-family:var(--font-display); font-stretch:condensed; font-weight:800;
  font-size:.95em; letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid rgba(0,0,0,.35); border-radius:14px; padding:13px 10px; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 4px 10px rgba(0,0,0,.4);
  transition:filter .15s ease, transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); box-shadow:0 2px 5px rgba(0,0,0,.35); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; filter:none; }
.btn-fold{
  background:linear-gradient(180deg, #c1584c 0%, #832e26 100%);
  color:#fbf3e8; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.btn-call{
  background:linear-gradient(180deg, #e2924a 0%, #af6323 100%);
  color:#fbf3e8; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.btn-raise{
  background:linear-gradient(180deg, #57b57a 0%, #2f7d4f 100%);
  color:#fbf3e8; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.btn-next{
  width:100%;
  background:linear-gradient(180deg, #f0d488 0%, var(--gold) 45%, #bd8a3d 100%);
  color:var(--ink);
  font-family:var(--font-display); font-stretch:condensed; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; font-size:1em;
  border:1.5px solid rgba(0,0,0,.35); border-radius:14px; padding:13px 10px; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4);
  transition:filter .15s ease, transform .08s ease;
}
.btn-next:hover{ filter:brightness(1.08); }
.btn-next:active{ transform:translateY(1px); }
.btn-next:disabled{ opacity:.4; cursor:not-allowed; filter:none; transform:none; }

/* gray rail, yellow chip — the chip is the same gold used for the pot/money type
   everywhere else, with a faint segmented rim so it reads as a poker chip */
.raise-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:14px; border-radius:8px;
  background:linear-gradient(180deg, #8c8c8c 0%, #5a5a5a 100%);
  border:1.5px solid rgba(0,0,0,.35);
  cursor:pointer;
}
.raise-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:30px; height:30px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #f7e2ab 0%, var(--gold) 55%, var(--gold) 68%, transparent 69%),
    repeating-conic-gradient(from 0deg, #d9ad4a 0deg 15deg, #b5842f 15deg 30deg);
  border:2px solid var(--ink);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
  margin-top:-1px;
}
.raise-slider::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #f7e2ab 0%, var(--gold) 55%, var(--gold) 68%, transparent 69%),
    repeating-conic-gradient(from 0deg, #d9ad4a 0deg 15deg, #b5842f 15deg 30deg);
  border:2px solid var(--ink);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.raise-slider::-moz-range-track{
  background:linear-gradient(180deg, #8c8c8c 0%, #5a5a5a 100%);
  border-radius:8px; height:14px;
}

/* ---------- Betting animation: a chip travels from the actor to the pot ---------- */
.chip-fly{
  position:fixed; width:20px; height:20px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #f7e2ab 0%, var(--gold) 55%, var(--gold) 68%, transparent 69%),
    repeating-conic-gradient(from 0deg, #d9ad4a 0deg 15deg, #b5842f 15deg 30deg);
  border:2px solid var(--ink);
  box-shadow:0 3px 6px rgba(0,0,0,.4);
  pointer-events:none; z-index:50;
  /* Kept in step with CHIP_FLY_MS in ui.js (.5s) — the opacity fade's .18s head start
     plus its own .5s run is why flyChip's cleanup waits CHIP_FLY_MS + 180ms before
     actually removing the element, so it's never yanked out mid-fade. */
  transition:transform .5s cubic-bezier(.3,.6,.3,1), opacity .5s ease .18s;
}

/* ---------- Round result / game over ---------- */
#round-reveal, #game-over{
  width:100%;
  background:rgba(0,0,0,.4);
  border:1.5px solid rgba(232,193,92,.4);
  border-radius:16px;
  padding:16px;
}
#round-reveal h3, #game-over h2{ text-align:center; margin:0 0 10px; }
#round-reveal p, #game-over p{ text-align:center; margin:8px 0; }
.reveal-note{ color:var(--muted); font-size:.85em; }

/* Round reveal, beat one: each active player's combined stat for the just-revealed
   category pops in *on their own seat* — comparing them means looking at the two seats
   and the value each just grew, not looking away to a separate list and matching names
   back up. Holds until REVEAL_HOLD_MS has passed, then fades on its own cue (the
   `.fading` toggle in ui.js) right as the card starts flying to the winner. */
.seat-stat-pop{
  font-family:var(--font-display); font-stretch:condensed; font-weight:800;
  font-size:.85em; letter-spacing:.02em;
  padding:3px 11px; border-radius:8px;
  background:rgba(0,0,0,.4); color:var(--text);
  border:1.5px solid rgba(255,255,255,.18);
  font-variant-numeric:tabular-nums;
  /* Resting opacity is 1 here (not held by the entrance animation below, which
     deliberately omits `forwards`) so the later .fading class has a plain, transitionable
     value to animate away from — a forwards-filled animation keeps outranking a
     transition on the same property even after it "finishes", which would otherwise
     make the fade-out silently never play. */
  opacity:1;
  animation:statPopIn .35s ease;
  transition:opacity .3s ease;
}
.seat-stat-pop.winner{
  color:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(232,193,92,.45);
}
/* Your own private "here's what you had" after folding — never a real contender (you
   forfeited the round regardless of the number), so this is deliberately muted rather
   than styled like a live result: dashed border, dimmer text, no glow either way. */
.seat-stat-pop.folded-stat{
  opacity:.7; color:var(--muted); border-style:dashed; border-color:rgba(255,255,255,.3);
}
.seat-stat-pop.fading{ opacity:0; }
@keyframes statPopIn{
  0%{ opacity:0; transform:translateY(6px) scale(.9); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* Round reveal, beat two: a clone of the center stat card flies from there to whoever
   won it (one clone per winner, on a tie) — same fixed-position-clone-plus-transform
   technique as .chip-fly above, just with a per-seat destination computed in JS instead
   of a single fixed pot target. */
.stat-card-fly{
  position:fixed; z-index:60; pointer-events:none;
  margin:0; /* .id-card's flex layout doesn't set margin, but be explicit since this is cloned out of normal flow */
  transition:transform .55s cubic-bezier(.3,.6,.3,1), opacity .55s ease .2s;
}
/* The landing hit: whichever seat's tally the flying card just reached gets a quick
   pulse so the new card actually reads as having arrived there. */
.cards-tally.just-won{ animation:tallyBump .5s ease; }
@keyframes tallyBump{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.6); }
  100%{ transform:scale(1); }
}

/* ---------- Log strip ---------- */
.log-strip{
  width:100%;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:8px;
  display:flex; flex-direction:column; gap:3px;
}
.log-strip div{ font-size:.78em; color:var(--muted); font-variant-numeric:tabular-nums; }
.log-strip div:first-child{ color:var(--text); }

/* ---------- Start screen ---------- */
#start-screen{ text-align:center; padding:24px 16px; }
#start-screen select{
  font-size:1em; padding:8px 12px; border-radius:8px; margin:8px; border:1.5px solid var(--ink);
  background:var(--paper); color:var(--ink);
}
.rules{
  max-width:560px; margin:16px auto 0; font-size:.85em; color:var(--muted);
  text-align:left; line-height:1.5;
}

/* ---------- Phone layout: everything was scaling down correctly but leaving a lot
   of a narrow screen's width and height unused. This pass claims more of both —
   bigger cards, tighter gaps — rather than just shrinking the desktop layout.
   Sized up further after real-device feedback: without a <meta viewport> tag (now
   fixed, see every *.html <head>) none of this was even reaching a real phone, which
   read as "everything's too small" — now that it actually applies, pushed sizes up
   further still, and the log capped much shorter, so it can't crowd out the table. ---------- */
@media (max-width:480px){
  body{ padding:8px; }
  #app{ gap:8px; }
  .table-area{ min-height:0; gap:4px; }
  .center-circle{ width:min(62vw,320px); }

  .round-label{ font-size:.85em; }
  .pot-amount{ font-size:clamp(2.1rem,7vw,2.5rem); }

  /* two mini-cards per seat + the center stat card all share one row — the stat
     card's own share is pulled in a bit further here specifically to leave more room
     for bigger flanking cards, verified against actual viewport width at 320-480px,
     not just eyeballed. All three card sizes below are 20% smaller than that pass
     landed on, per follow-up feedback that they'd gone too big. */
  .stat-card{ width:min(19.2vw,106px); }
  .player-card{ width:min(24vw,106px); }
  .mini-card{ width:13.6vw; height:auto; }
  .seat-cards{ gap:4px; }
  .seat-name{ font-size:1em; }
  .seat-chips{ font-size:.95em; }

  .hole-cards{ gap:8px; }
  .player-card .pname{ font-size:1.05em; }
  .you-name{ font-size:1.1em; }
  .you-chips{ font-size:1em; }

  .btn{ font-size:1.05em; padding:16px 6px; }
  .raise-slider{ height:18px; }
  .raise-slider::-webkit-slider-thumb{ width:40px; height:40px; }
  .raise-slider::-moz-range-thumb{ width:40px; height:40px; }

  #round-reveal, #game-over{ padding:12px; }
  #round-reveal h3, #game-over h2{ font-size:1.1em; }
  .seat-stat-pop{ font-size:.85em; padding:3px 9px; }

  /* Was 110px — tall enough on a real phone (no viewport tag meant this rule never
     even applied before) to crowd out the table entirely. Short enough now to stay
     out of the way; the scrollbar is still there for anyone who wants the history. */
  .log-strip{ max-height:56px; overflow-y:auto; }
}

/* ---------- Landscape phones: height is the scarce resource here (often
   320-450px), not width — none of the rules above help, since they only ever shrink
   things by *width*. Without this, a sideways phone shows the top of the page with the
   actual Fold/Check/Raise buttons pushed entirely below the fold and no visual hint
   that they exist — found by measuring a 667x375 viewport, where the fold button's
   top (380px) was already past the bottom of the screen (375px). Cards size off vh
   instead of vw here, and the header is dropped entirely to reclaim its space — a
   sideways phone is for playing, not for reading the tagline again. ---------- */
@media (orientation:landscape) and (max-height:500px){
  body{ padding:6px 16px; }
  h1, .subtitle{ display:none; }
  #app{ gap:6px; }

  .table-area{ min-height:0; gap:6px; }
  /* Shrunk alongside the cards below it (20%, same as everything else in this block) —
     left at its old size, this decorative ring (sized off vh, not off table-area's own
     now-shorter content height) started visibly overlapping the hole-cards row beneath
     it once the cards themselves got smaller. */
  .center-circle{ width:min(24vh,176px); }
  .pot-amount{ font-size:1.3rem; }

  /* width:auto lets aspect-ratio compute width from the new height instead of keeping
     the desktop width alongside a mismatched height (the two together would otherwise
     override aspect-ratio entirely, since both dimensions were already pinned). Heights
     are 20% smaller than the original pass, matching the portrait shrink above. */
  .mini-card{ width:auto; height:8.8vh; }
  .seat-cards{ gap:4px; }
  .seat-name{ font-size:.8em; }
  .seat-chips{ font-size:.75em; }

  /* This card's own content (label + rule + icon) no longer fits the shrunk box at
     the old padding/spacing — .id-card doesn't clip overflow, so without tightening
     these too the icon was spilling out past the card's own bottom edge. */
  .stat-card{ width:auto; height:12.8vh; padding:3px; }
  .stat-card .label{ font-size:.58em; line-height:1; }
  .stat-card .icon{ font-size:.85em; margin-top:0; margin-bottom:0; }
  .card-rule{ margin:2px 0; }

  .you-seat{ gap:4px; }
  .player-card{ width:auto; height:11.2vh; padding:6px 4px 4px; }
  .player-card .pname{ font-size:.75em; line-height:1.1; }
  .player-card .id-icon{ width:44%; }
  .hole-cards{ gap:6px; }
  .you-header{ gap:6px; }

  .controls{ gap:4px; }
  .btn{ padding:8px 6px; font-size:.8em; }
  .action-timer{ height:4px; }

  #round-reveal, #game-over{ padding:8px; }
  #round-reveal h3, #game-over h2{ margin:0 0 4px; font-size:.95em; }
  .seat-stat-pop{ font-size:.7em; padding:2px 6px; }

  .log-strip{ max-height:38px; overflow-y:auto; }
}