/* ============================================================
   table.css: the table's geometry, in one unit.

   --u is the design unit: the phone-landscape table (844 x 390) is drawn
   at --u = 1px, and the table works --u out from its own box, so the same
   drawing fits a 300px-tall phone (--u ~ 0.8) and a 1280 x 800 window
   (--u = 1.35, the cap). Every size below is N * --u. The felt takes the
   height the furniture leaves; extra height on a window opens a gap
   between the felt and the hand for the player's own seat.

   The old sheets are loaded into the "base" cascade layer, so a rule here
   wins on every property it sets, whatever the old selector's specificity.
   Geometry lives here; colours, borders and shadows stay in the old sheets.
   ============================================================ */

#game-screen { container-type: size; }

#game-screen .game-container {
  --u: min(calc(100cqh / 380), calc(100cqw / 700), 1.35px);
  --H: min(100cqh, calc(620 * var(--u)));
  /* Felt-to-hand gap: the hand rides the felt's rim on a phone (-13), and
     a window opens up to 44 for the seat to sit in. */
  --gap: clamp(calc(-13 * var(--u)), calc((var(--H) - calc(390 * var(--u))) * 0.35 - calc(13 * var(--u))), calc(56 * var(--u)));
  /* Extra height also lifts the felt's top, so the head seat's name clears
     the table title in the header. */
  --felt-top: calc(calc(54 * var(--u)) + clamp(0px, calc((var(--H) - calc(390 * var(--u))) * 0.12), calc(30 * var(--u))));
  --felt-bottom: calc(calc(130 * var(--u)) + var(--gap));
  --felt-radius: 50% / 46%;
  --felt-h: calc(var(--H) - var(--felt-top) - var(--felt-bottom));
  /* A phone's felt is wide (3.6:1); every extra pixel of height on a window brings it back to a table's 1.95:1. */
  --felt-max-w: max(calc(var(--felt-h) * 1.95), calc(var(--felt-h) * 3.6 - (var(--H) - calc(390 * var(--u))) * 2.7));
  --felt-x: max(7%, calc((100% - var(--felt-max-w)) / 2));
  --seat-avatar: calc(38 * var(--u));
  --hand-card-w: calc(53 * var(--u));
  width: 100%; height: var(--H); margin: auto 0;
  display: flex; flex-direction: column; position: relative;
}
#game-screen .game-container::before { left: var(--felt-x); right: var(--felt-x); top: var(--felt-top); bottom: var(--felt-bottom); border-radius: var(--felt-radius); }
#game-screen .game-container::after {
  left: calc(var(--felt-x) + calc(10 * var(--u))); right: calc(var(--felt-x) + calc(10 * var(--u)));
  top: calc(var(--felt-top) + calc(10 * var(--u))); bottom: calc(var(--felt-bottom) + calc(10 * var(--u)));
  border-radius: var(--felt-radius); border-width: 2px;
}

/* ---- header ---- */
#game-screen .game-topbar { height: calc(44 * var(--u)); min-height: calc(44 * var(--u)); box-sizing: border-box; padding: calc(4 * var(--u)) calc(8 * var(--u)); gap: calc(6 * var(--u)); }
#game-screen .game-info-left { gap: calc(8 * var(--u)); flex: 0 0 auto; }
#game-screen .game-info-right { gap: calc(6 * var(--u)); }
/* Never under 32px, so a thumb can hit them on the smallest phones (WebKit sweep, iPhone SE, 25 Sep). */
#game-screen .game-topbar .btn-icon { width: max(32px, calc(36 * var(--u))); height: max(32px, calc(36 * var(--u))); min-width: max(32px, calc(36 * var(--u))); padding: 0; border-radius: calc(8 * var(--u)); }
#game-screen .game-topbar .btn-icon svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
/* The title reads from the left, after the back button: the header's
   middle is where the head seat's name sits. */
#game-screen .table-title { justify-content: flex-start; flex: 1 1 auto; max-width: 36%; margin-right: auto; }
#game-screen .table-title > * { font-size: max(10px, calc(12 * var(--u))); }
#game-screen .table-cash { height: calc(36 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }

/* The history button is a pill in the header on every size; as a tab on
   the table's right edge it sat on the right-hand seat. */
#game-screen .btn-icon.history-tab {
  position: static; transform: none; z-index: auto; width: auto; min-width: 0; height: calc(36 * var(--u)); min-height: calc(36 * var(--u));
  border-radius: 999px; padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u)); gap: calc(5 * var(--u)); font-size: max(8px, calc(9.5 * var(--u))); letter-spacing: .8px; line-height: 1.1;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
#game-screen .btn-icon.history-tab svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* ---- the felt and the seats around it ---- */
#game-screen .opponents-area { left: var(--felt-x); right: var(--felt-x); top: var(--felt-top); bottom: var(--felt-bottom); padding: 0; min-height: 0; }
#game-screen .opponent { width: calc(72 * var(--u)); gap: calc(2 * var(--u)); transform: translate(-50%, calc(var(--seat-avatar) / -2 - calc(13 * var(--u)))); }
#game-screen .opponent-avatar { width: var(--seat-avatar); height: var(--seat-avatar); font-size: calc(16 * var(--u)); border-width: 2px; }
#game-screen .opponent-name { font-size: max(9px, calc(10 * var(--u))); max-width: calc(72 * var(--u)); }
#game-screen .opponent-card-back { width: calc(12 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(-9 * var(--u)); border-radius: 2px; }
#game-screen .opponent-card-back:first-child { margin-left: 0; }
#game-screen .opponent-score { font-size: max(8px, calc(9 * var(--u))); padding: calc(1 * var(--u)) calc(6 * var(--u)); }
#game-screen .opponent-timer-ring { inset: calc(-4 * var(--u)); }
#game-screen .opponent-timer-text { bottom: calc(-16 * var(--u)); font-size: max(8px, calc(9 * var(--u))); }
#game-screen .opponents-area .opponent { left: 50%; top: 0%; }
#game-screen .opponents-area.seats-2 .opponent:nth-child(1) { left: 24%; top: 14%; }
#game-screen .opponents-area.seats-2 .opponent:nth-child(2) { left: 76%; top: 14%; }
#game-screen .opponents-area.seats-3 .opponent:nth-child(1) { left: 6%;  top: 36%; }
#game-screen .opponents-area.seats-3 .opponent:nth-child(2) { left: 50%; top: 2%; }
#game-screen .opponents-area.seats-3 .opponent:nth-child(3) { left: 94%; top: 36%; }
#game-screen .opponents-area.seats-4 .opponent:nth-child(1) { left: 4%;  top: 42%; }
#game-screen .opponents-area.seats-4 .opponent:nth-child(2) { left: 24%; top: 16%; }
#game-screen .opponents-area.seats-4 .opponent:nth-child(3) { left: 76%; top: 16%; }
#game-screen .opponents-area.seats-4 .opponent:nth-child(4) { left: 96%; top: 42%; }
#game-screen .opponents-area.seats-5 .opponent:nth-child(1) { left: 4%;  top: 44%; }
#game-screen .opponents-area.seats-5 .opponent:nth-child(2) { left: 18%; top: 16%; }
#game-screen .opponents-area.seats-5 .opponent:nth-child(3) { left: 50%; top: 0%; }
#game-screen .opponents-area.seats-5 .opponent:nth-child(4) { left: 82%; top: 16%; }
#game-screen .opponents-area.seats-5 .opponent:nth-child(5) { left: 96%; top: 44%; }

/* ---- the piles, centred between the header and the hand ---- */
#game-screen .table-center { flex: 1 1 auto; min-height: 0; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); }
#game-screen .table-center .card, #game-screen .table-center .pile .card { width: calc(44 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(5 * var(--u)); }
#game-screen .pile { gap: calc(8 * var(--u)); }
#game-screen .wild-pile .pile-label { font-size: max(7px, calc(8 * var(--u))); padding: calc(1 * var(--u)) calc(6 * var(--u)); letter-spacing: calc(1 * var(--u)); top: calc(-9 * var(--u)); }
#game-screen .pile-count { top: calc(-9 * var(--u)); right: calc(-12 * var(--u)); min-width: calc(24 * var(--u)); height: calc(20 * var(--u)); line-height: calc(18 * var(--u)); padding: 0 calc(6 * var(--u)); font-size: max(9px, calc(10 * var(--u))); }
#game-screen .pile-view-btn { padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)) calc(12 * var(--u)); gap: calc(5 * var(--u)); font-size: max(9px, calc(11 * var(--u))); }
#game-screen .pile-view-btn svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
#game-screen .finish-slot { width: calc(46 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(7 * var(--u)); font-size: max(7px, calc(8 * var(--u))); letter-spacing: calc(1 * var(--u)); border-width: 2px; }
#game-screen .finish-slot.holds-card { padding: calc(2 * var(--u)); }
#game-screen .rng-note { left: calc(var(--felt-x) + 22%); transform: none; bottom: calc(var(--felt-bottom) + calc(24 * var(--u))); font-size: max(8px, calc(9 * var(--u))); }
#game-screen .toss-felt .toss-title { font-size: calc(18 * var(--u)); letter-spacing: calc(3 * var(--u)); }
#game-screen .toss-felt .toss-draws { gap: calc(10 * var(--u)); }
#game-screen .toss-felt .toss-draw .card { width: calc(50 * var(--u)); height: calc(70 * var(--u)); }
#game-screen .toss-felt .toss-result { padding: calc(5 * var(--u)) calc(12 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }

/* ---- the player's own seat, on the strip between the piles and the hand ---- */
#game-screen #turn-indicator.my-seat { left: 50%; bottom: calc(136 * var(--u)); top: auto; transform: translateX(-50%); gap: calc(2 * var(--u)); }
#game-screen .my-seat-avatar { width: calc(50 * var(--u)); height: calc(50 * var(--u)); font-size: calc(19 * var(--u)); border-width: 3px; }
#game-screen .my-seat .turn-ring { inset: calc(-6 * var(--u)); width: calc(100% + calc(12 * var(--u))); height: calc(100% + calc(12 * var(--u))); }
#game-screen .my-seat .turn-timer-display { left: calc(-15 * var(--u)); right: auto; top: calc(-9 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); line-height: calc(22 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(13 * var(--u)); font-size: max(10px, calc(12 * var(--u))); border-width: 2px; }
#game-screen .my-seat-score { left: auto; right: calc(-12 * var(--u)); bottom: calc(-8 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); line-height: calc(22 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(13 * var(--u)); font-size: max(10px, calc(12 * var(--u))); border-width: 2px; }
#game-screen .my-seat.tight .my-seat-avatar { width: calc(50 * var(--u)); height: calc(50 * var(--u)); font-size: calc(19 * var(--u)); }
#game-screen .my-seat.tight .turn-ring { inset: calc(-6 * var(--u)); width: calc(100% + calc(12 * var(--u))); height: calc(100% + calc(12 * var(--u))); }
#game-screen .my-seat.tight .turn-timer-display { left: calc(-15 * var(--u)); right: auto; top: calc(-9 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); line-height: calc(22 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }
#game-screen .my-seat.tight .my-seat-score { right: calc(-12 * var(--u)); bottom: calc(-8 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); line-height: calc(22 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }
/* The step prompt sits beside the seat, at its height. */
#game-screen #action-prompt, #game-screen .action-prompt {
  left: calc(50% + calc(46 * var(--u))); right: auto; top: auto; bottom: calc(150 * var(--u)); transform: none;
  padding: calc(3 * var(--u)) calc(12 * var(--u)); font-size: max(10px, calc(11 * var(--u))); line-height: 1.3; border-radius: calc(16 * var(--u)); max-width: 40%; white-space: normal;
}

/* ---- the hand ---- */
#game-screen .player-hand-area { height: calc(90 * var(--u)); box-sizing: border-box; padding: calc(2 * var(--u)) calc(8 * var(--u)) 0; flex: 0 0 auto; }
#game-screen .hand-container { height: calc(88 * var(--u)); min-height: 0; box-sizing: border-box; padding: 0; gap: calc(2 * var(--u)); align-items: flex-start; }
#game-screen .hand-container .card, #game-screen .hand-card { width: var(--hand-card-w); height: calc(var(--hand-card-w) * 1.4); border-radius: calc(5 * var(--u)); }
#game-screen .hand-group, #game-screen .hand-loose { padding: calc(12 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)); border-radius: calc(7 * var(--u)); }
#game-screen .hand-group { margin: 0 calc(4 * var(--u)); }
#game-screen .hand-group-label { font-size: max(6px, calc(7 * var(--u))); line-height: calc(9 * var(--u)); padding: 0 calc(4 * var(--u)); letter-spacing: calc(1 * var(--u)); }
#game-screen .hand-card.selected { transform: translateY(calc(-10 * var(--u))); }
#game-screen .hand-card.wild-joker::after, #game-screen .hand-card.joker::after { left: calc(12 * var(--u)); height: calc(10 * var(--u)); line-height: calc(10 * var(--u)); padding: 0 calc(4 * var(--u)); font-size: max(6px, calc(7 * var(--u))); }

/* ---- the buttons ---- */
#game-screen .game-actions { height: calc(40 * var(--u)); min-height: calc(40 * var(--u)); box-sizing: border-box; padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); gap: calc(12 * var(--u)); flex: 0 0 auto; }
#game-screen .game-actions button, #game-screen .game-actions .btn-action, #game-screen .game-actions .btn-declare, #game-screen .game-actions .btn-drop, #game-screen .game-actions .btn-discard {
  height: calc(34 * var(--u)); min-height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: max(10px, calc(12 * var(--u))); gap: calc(6 * var(--u)); border-radius: 999px;
}
#game-screen .btn-action svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* On a narrow table (a phone held sideways) the history pill is an icon
   button like its neighbours; with its label it sat on a seat's name. */
@container (max-width: 1099px) {
  #game-screen .btn-icon.history-tab { width: calc(36 * var(--u)); min-width: calc(36 * var(--u)); padding: 0; border-radius: calc(8 * var(--u)); }
  #game-screen .btn-icon.history-tab span { display: none; }
  #game-screen .btn-icon.history-tab svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
}

/* The table chips (two or more tables) sit bottom-left on a phone held
   sideways: the action bar starts after them (report F02, WebKit sweep 25 Sep). */
@media (orientation: landscape) and (max-height: 520px) {
  body.has-tray #game-screen .game-actions { padding-left: calc(var(--tray-w, 0px) + 12px); }
}
body.force-landscape.has-tray #game-screen .game-actions { padding-left: calc(var(--tray-w, 0px) + 12px); }