/* Okey table (js/okey-table.js). Overlays, top bar and payout rows come from table.css. */

.table-screen[data-screen="table"] { height: 100dvh; overflow: hidden; }

.ok-felt {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  background: radial-gradient(ellipse at 50% 38%, #1c5a3b, var(--felt) 72%);
  overflow: hidden;
}
/* The board keeps its real left/right in right-to-left languages: the player to your left is the one you take a tile from. */
.ok-felt { direction: ltr; }
.ok-felt > .table-flag { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; z-index: 0; pointer-events: none; }
.ok-felt > *:not(.table-flag) { position: relative; z-index: 1; }
.ok-panel [hidden], .ok-felt [hidden] { display: none !important; }

/* score strip */
.ok-scores { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ok-score {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.32); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.ok-score.is-you { outline: 2px solid #f2c94c; }
.ok-score.is-acting { background: rgba(242, 201, 76, 0.28); }
.ok-score .ok-delta { font-size: 12px; font-weight: 800; }
.ok-score .ok-delta.down { color: #ff9b9b; }
.ok-score .ok-delta.up { color: #9bffb4; }
.ok-badge { text-align: center; font-size: 11px; opacity: 0.8; }

/* board: top seat, middle row, centre */
.ok-board { display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: auto auto; gap: 6px; align-items: start; }
.ok-seat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); min-height: 78px; min-width: 0;
}
.ok-seat.is-acting { box-shadow: 0 0 0 2px #f2c94c; }
.ok-seat.top { grid-column: 1 / 4; grid-row: 1; flex-direction: row; justify-content: center; gap: 10px; min-height: 0; padding: 4px 8px; }
.ok-seat.left { grid-column: 1; grid-row: 2; }
.ok-seat.right { grid-column: 3; grid-row: 2; }
.ok-seat-avatar { font-size: 22px; line-height: 1; }
.ok-seat-name { font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An opponent's rack seen from outside: wooden back with the GLG mark, tile edges peeking out on the owner's side. */
.ok-opp-rack { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ok-opp-edge { display: flex; gap: 1px; }
.ok-opp-edge span { width: 9px; height: 7px; border-radius: 2px 2px 0 0; background: linear-gradient(#fbf6e6, #e4d8b4); box-shadow: 0 -1px 2px #0005; }
.ok-opp-wood {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 152px; height: 30px; border-radius: 4px 4px 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(#8a6038, #5a3d22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 5px rgba(0, 0, 0, 0.35), 0 2px 4px #0007;
}
.ok-opp-brand { font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: 15px; letter-spacing: 0.28em; padding-left: 0.28em; color: rgba(35, 20, 8, 0.55); text-shadow: 0 1px 0 rgba(255, 220, 170, 0.28); }
/* Side seats: the rack stands upright, the tile edges on the outer side, the text reads along it. */
.ok-seat.left .ok-opp-rack { flex-direction: row; }
.ok-seat.right .ok-opp-rack { flex-direction: row-reverse; }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { flex-direction: column; }
.ok-seat.left .ok-opp-edge span { width: 7px; height: 9px; border-radius: 2px 0 0 2px; }
.ok-seat.right .ok-opp-edge span { width: 7px; height: 9px; border-radius: 0 2px 2px 0; }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood {
  width: 30px; height: 140px; border-radius: 4px 8px 8px 4px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, #8a6038, #5a3d22);
}
.ok-seat.left .ok-opp-brand { writing-mode: vertical-rl; transform: rotate(180deg); padding-left: 0; padding-top: 0.28em; }
.ok-seat.right .ok-opp-brand { writing-mode: vertical-rl; padding-left: 0; padding-top: 0.28em; }
.ok-seat-pile { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.ok-seat.top .ok-seat-pile { min-height: 0; }
.ok-seat.is-source .ok-seat-pile { outline: 2px dashed #f2c94c; border-radius: 8px; padding: 2px; cursor: pointer; }
.ok-seat.is-source.is-live .ok-seat-pile { animation: ok-pulse 1.1s ease-in-out infinite; }
@keyframes ok-pulse { 50% { box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.45); } }

.ok-centre { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 2px; }
.ok-centre-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.ok-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; text-align: center; }
.ok-deck { position: relative; cursor: default; }
.ok-deck.is-live { cursor: pointer; animation: ok-pulse 1.1s ease-in-out infinite; border-radius: 6px; }
.ok-deck-n { position: absolute; right: -4px; bottom: -6px; background: #000a; border-radius: 9px; font-size: 10px; padding: 0 5px; }

/* tiles */
.okt {
  position: relative;
  width: 36px; height: 52px; flex: 0 0 auto;
  border-radius: 6px;
  background: linear-gradient(#fbf6e6, #efe5c6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; user-select: none; touch-action: none;
}
.okt .okt-n { font-size: 22px; line-height: 1; }
.okt .okt-m { font-size: 9px; line-height: 1; margin-top: 2px; opacity: 0.9; }
.okt.c-y { color: #c58b00; }
.okt.c-b { color: #1c64c9; }
.okt.c-k { color: #1b1b1b; }
.okt.c-r { color: #c0262d; }
.okt.is-fake .okt-n { font-size: 22px; color: #6a3fb5; }
.okt.is-wild::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px; height: 3px; border-radius: 2px; background: #e8b923; }
.okt.small { width: 26px; height: 38px; border-radius: 5px; }
.okt.small .okt-n { font-size: 16px; }
.okt.small .okt-m { font-size: 7px; }
.okt.back { background: repeating-linear-gradient(45deg, #2b4f9e 0 5px, #213f80 5px 10px); border: 2px solid #f0ead6; box-shadow: 0 2px 4px #0006; }
.okt.pop { animation: ok-pop 0.28s ease-out; }
@keyframes ok-pop { from { transform: translateY(-14px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .okt.pop, .ok-deck.is-live, .ok-seat.is-source.is-live .ok-seat-pile { animation: none; } }

/* my side: discard zone + rack */
.ok-me { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.ok-me-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ok-discard-zone {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 96px; min-height: 52px; padding: 3px 8px; border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.4); font-size: 11px; text-align: center;
}
.ok-discard-zone.is-live { border-color: #f2c94c; background: rgba(242, 201, 76, 0.14); cursor: pointer; }
.ok-discard-zone.is-over { background: rgba(242, 201, 76, 0.4); }
.ok-sort { display: flex; gap: 6px; }
.ok-sort .btn { padding: 6px 10px; font-size: 12px; min-height: 0; }

.ok-rack {
  display: grid; grid-template-columns: repeat(11, 1fr); row-gap: 5px; column-gap: 0;
  width: 100%; max-width: 372px; margin-inline: auto;
  padding: 7px 5px 9px; border-radius: 10px;
  background:
    linear-gradient(transparent calc(50% - 3px), rgba(0, 0, 0, 0.28) calc(50% - 3px), rgba(0, 0, 0, 0.28) calc(50% + 1px), rgba(255, 255, 255, 0.08) calc(50% + 1px), transparent calc(50% + 3px)),
    linear-gradient(#7a5530, #55391f);
  box-shadow: inset 0 2px 6px #0008, 0 2px 6px #0006;
}
/* The places are invisible: the rack is one continuous shelf, tiles sit side by side and can be pulled apart. */
.ok-slot { height: 54px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.ok-slot.is-target { box-shadow: inset 0 0 0 2px rgba(242, 201, 76, 0.85); background: rgba(242, 201, 76, 0.18); }
.ok-slot .okt { width: 100%; max-width: 32px; height: 50px; border-radius: 5px; }
.ok-slot .okt .okt-n { font-size: 20px; }
.ok-slot .okt .okt-m { font-size: 9px; margin-top: 2px; }
.ok-slot .okt.is-selected { transform: translateY(-8px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.55); outline: 2px solid #f2c94c; }
.ok-slot .okt.is-new { animation: ok-pop 0.35s ease-out; }
.ok-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: 1; transform: translate(-50%, -60%) scale(1.08); will-change: transform; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.12); }

/* bottom panel */
.ok-panel { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, 0.35); }
.ok-msg { text-align: center; font-size: 13px; min-height: 18px; }
.ok-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ok-reveal { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.ok-result-text { text-align: center; font-size: 14px; font-weight: 700; }
.ok-result-sub { text-align: center; font-size: 12px; opacity: 0.9; }
.ok-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font-size: 12px; font-weight: 800; background: #000c; padding: 2px 8px; border-radius: 10px; animation: ok-float 1.3s ease-out forwards; white-space: nowrap; z-index: 5; pointer-events: none; }
@keyframes ok-float { to { transform: translate(-50%, -22px); opacity: 0; } }

/* colour-blind marks */
.is-colorblind .okt .okt-m { font-size: 12px; }

/* options overlay */
.ok-opt-group { display: flex; gap: 8px; margin: 8px 0; }
.ok-opt { flex: 1; text-align: left; padding: 10px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; font: inherit; }
.ok-opt strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ok-opt span { font-size: 11px; opacity: 0.85; }
.ok-opt.is-selected { border-color: #f2c94c; background: rgba(242, 201, 76, 0.16); }
.ok-rules p { margin: 0 0 8px; font-size: 13px; text-align: left; }
.ok-end-tie { text-align: center; margin-bottom: 6px; font-size: 13px; }


/* Tutorial: tile rows wrap instead of running off the screen (a quiz hand is 14 tiles). */
.tutorial-cards { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.tutorial-quiz-hand .tutorial-cards { max-width: 100%; }
.tutorial-pile { display: inline-flex; padding: 3px; border: 2px dashed #f2c94c; border-radius: 8px; }

/* Tiles that can be dragged in from the board: no browser scrolling or selection while dragging. */
.ok-deck, .ok-seat .ok-seat-pile .okt { touch-action: none; user-select: none; }
.ok-deck.is-live .okt, .ok-seat.is-live .ok-seat-pile .okt { cursor: grab; }

/* The table seen from one seat (2026-10-05, the owner's reference photo): a framed felt table in slight
   perspective; the other racks stand on it with their wooden backs and the GLG mark towards the player. */
.ok-board { display: block; padding: 2px 0 0; }
.ok-table {
  position: relative; height: 322px; width: 100%; max-width: 372px; margin: 0 auto;
  border-radius: 14px; border: 5px solid #1d1d20;
  background: radial-gradient(ellipse at 50% 45%, #22714a, #14412b 82%);
  box-shadow: 0 0 0 2px #c9a24b, inset 0 0 34px #0008, 0 12px 22px #000a;
  transform: perspective(820px) rotateX(9deg); transform-origin: 50% 100%;
}
.ok-seat { display: contents; }
.ok-seat-head { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); max-width: 46%; }
.ok-seat-head .ok-seat-avatar { font-size: 20px; }
.ok-seat-head .ok-seat-name { font-size: 12px; }
.ok-seat.is-acting .ok-seat-head { background: rgba(242, 201, 76, 0.28); box-shadow: 0 0 0 2px #f2c94c; }
.ok-seat.top .ok-seat-head { top: 6px; left: 50%; transform: translateX(-50%); }
.ok-seat.top .ok-opp-rack { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); }
.ok-seat.top .ok-seat-pile { position: absolute; top: 102px; left: 50%; transform: translateX(-50%); min-height: 0; }
.ok-seat.left .ok-seat-head { top: 70px; left: 8px; }
.ok-seat.left .ok-opp-rack { position: absolute; top: 110px; left: 10px; }
.ok-seat.left .ok-seat-pile { position: absolute; top: 170px; left: 62px; min-height: 0; }
.ok-seat.right .ok-seat-head { top: 70px; right: 8px; }
.ok-seat.right .ok-opp-rack { position: absolute; top: 110px; right: 10px; }
.ok-seat.right .ok-seat-pile { position: absolute; top: 170px; right: 62px; min-height: 0; }
.ok-centre { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); padding: 8px 12px 10px; border-radius: 18px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.35); }
.ok-centre-row { gap: 10px; align-items: flex-end; }
.ok-finish-zone { width: 36px; height: 52px; border: 2px dashed rgba(255, 255, 255, 0.5); border-radius: 6px; }
.ok-finish-zone.is-live { border-color: #f2c94c; background: rgba(242, 201, 76, 0.1); }
.ok-finish-zone.is-ready { background: rgba(242, 201, 76, 0.4); box-shadow: 0 0 10px #f2c94c; }
.ok-finish-zone.is-over { background: rgba(242, 201, 76, 0.6); }

/* The side racks stretch towards the player's own rack: the table reaches down to the owner's line (2026-10-05). */
.ok-table { height: 392px; }
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { top: 62px; }
.ok-seat.left .ok-opp-rack, .ok-seat.right .ok-opp-rack { top: 104px; }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { height: 268px; }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: 268px; justify-content: space-between; }
.ok-seat.left .ok-seat-pile, .ok-seat.right .ok-seat-pile { top: 214px; }
.ok-centre { top: 62%; }

/* One row for the scores; each player's thrown tile lies at a corner of the table (the owner's drawing, 2026-10-05):
   me near right, the right player far right, the top player far left, the left player near left. */
.ok-scores { flex-wrap: nowrap; gap: 4px; justify-content: center; padding: 0 2px; }
.ok-score { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 11px; padding: 3px 5px; gap: 3px; }
.ok-score > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hand-info { text-align: center; line-height: 1.2; }
.hand-info .ok-badge { display: block; font-size: 10px; opacity: 0.75; }
.ok-table { height: 404px; }
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { top: 72px; }
.ok-seat.left .ok-seat-head { left: 4px; }
.ok-seat.right .ok-seat-head { right: 4px; }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { height: 218px; }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: 218px; }
.ok-seat.top .ok-seat-pile { top: 34px; left: 58px; right: auto; transform: none; }
.ok-seat.right .ok-seat-pile { top: 34px; right: 58px; left: auto; }
.ok-seat.left .ok-seat-pile { top: 346px; left: 16px; right: auto; }
.ok-mine-pile { position: absolute; right: 16px; top: 346px; display: flex; }

/* The hand result sits in the strip under the scores, over the free space above the table: it never
   pushes anything down and nothing is shown under the player's own rack. */
.ok-felt { position: relative; }
.ok-result-banner { position: absolute; left: 8px; right: 8px; top: 46px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); text-align: center; }
.ok-rb-text { font-size: 12px; font-weight: 800; }
.ok-rb-sub { font-size: 11px; opacity: 0.9; }
.ok-rb-tiles { display: flex; gap: 1px; justify-content: center; margin-top: 2px; }
.okt.mini { width: 14px; height: 20px; border-radius: 3px; }
.okt.mini .okt-n { font-size: 11px; }
.okt.mini .okt-m { display: none; }

/* The table height follows the screen height (a phone has no room for more), the racks and the corner
   tiles follow the table; and the result panel under it never grows past the screen. */
.ok-table { --h: clamp(330px, 46dvh, 404px); height: var(--h); }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { height: calc(var(--h) - 186px); }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: calc(var(--h) - 186px); }
.ok-seat.left .ok-seat-pile { top: calc(var(--h) - 58px); }
.ok-mine-pile { top: calc(var(--h) - 58px); }
.ok-msg:empty { display: none; }
.ok-result-banner { top: 6px; }
.ok-panel { padding-block: 6px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }

/* The screen is a column: top bar, the felt (takes what is left), the panel. The table height is what the
   screen has left after everything else, so the buttons at the bottom are never pushed off a small phone. */
.table-screen[data-screen="table"] { flex-direction: column; }
.table-screen[data-screen="table"][hidden] { display: none; }
.table-screen[data-screen="table"]:not([hidden]) { display: flex; }
.ok-felt { flex: 1 1 auto; min-height: 0; }
.ok-panel { flex: 0 0 auto; }
.ok-table { --h: clamp(300px, calc(100dvh - 392px), 420px); }

/* The dots of the onboarding steps take no room above the table. */
.app:has(> .table-screen:not([hidden])) > .progress-dots { display: none; }
.table-screen[data-screen="table"] { padding: 0; }

/* ===== Layout 3 (2026-10-05, the owner's drawing): the player's own rack sits on the table, at its near edge,
   between the two corner tiles; the top rack is as wide as the player's; the side racks come in from the
   edges with the names horizontally outside them; the centre (indicator and pile over the finishing square)
   is centred. Nothing stands under the player's rack any more. ===== */
.ok-table { --h: clamp(430px, calc(100dvh - 205px), 600px); --me: 152px; height: var(--h); }
.ok-scores { margin-bottom: 2px; }

/* top rack: as wide as the player's rack; its thrown tile and the right player's go to the outer corners */
.ok-seat.top .ok-opp-wood { width: 262px; }
.ok-seat.top .ok-opp-edge { width: 262px; }
.ok-seat.top .ok-opp-edge span { flex: 1 1 0; width: auto; }
.ok-seat.top .ok-seat-pile { top: 40px; left: 14px; right: auto; }
.ok-seat.right .ok-seat-pile { top: 40px; right: 14px; left: auto; }

/* side racks: further in, down to just above the player's rack */
.ok-seat.left .ok-opp-rack { left: 44px; top: 100px; }
.ok-seat.right .ok-opp-rack { right: 44px; top: 100px; }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { height: calc(var(--h) - 100px - var(--me) - 14px); }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: calc(var(--h) - 100px - var(--me) - 14px); }
/* the side players' names, horizontal, outside the white tile edges */
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head {
  top: calc(100px + (var(--h) - 100px - var(--me) - 14px) / 2 - 11px); width: 38px; max-width: 38px; padding: 2px 3px; justify-content: center; background: transparent;
}
.ok-seat.left .ok-seat-head { left: 3px; right: auto; }
.ok-seat.right .ok-seat-head { right: 3px; left: auto; }
.ok-seat.left .ok-seat-head .ok-seat-avatar, .ok-seat.right .ok-seat-head .ok-seat-avatar { display: none; }
.ok-seat.left .ok-seat-head .ok-seat-name, .ok-seat.right .ok-seat-head .ok-seat-name { font-size: 10px; text-shadow: 0 1px 2px #000a; }
.ok-seat.is-acting.left .ok-seat-head, .ok-seat.is-acting.right .ok-seat-head { box-shadow: 0 0 0 2px #f2c94c; background: rgba(242, 201, 76, 0.22); }

/* the left player's thrown tile (the one that can be taken) and the player's own: near corners, level with the rack */
.ok-seat.left .ok-seat-pile { top: auto; bottom: 46px; left: 14px; }
.ok-mine-pile.ok-discard-zone {
  position: absolute; right: 14px; top: auto; bottom: 46px; display: flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 44px; padding: 2px; border: 2px dashed transparent; border-radius: 8px; background: transparent;
}
.ok-mine-pile.ok-discard-zone.is-live { border-color: #f2c94c; background: rgba(242, 201, 76, 0.14); cursor: pointer; }
.ok-mine-pile.ok-discard-zone.is-over { background: rgba(242, 201, 76, 0.4); }

/* centre: indicator and pile on top, the finishing square under them; the group is centred between the racks */
.ok-centre { top: calc((var(--h) - var(--me)) / 2 + 28px); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 14px 10px; }
.ok-centre-row { gap: 14px; }
.ok-finish-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* the player's rack over the near edge of the table */
.ok-me { position: relative; z-index: 4; width: 280px; max-width: 100%; margin: calc(-1 * var(--me)) auto 0; padding-bottom: 12px; gap: 5px; }
.ok-me-bar { justify-content: center; }
.ok-sort .btn { padding: 4px 10px; font-size: 11px; background: rgba(0, 0, 0, 0.35); }
.ok-rack { grid-template-columns: repeat(10, 1fr); max-width: 280px; }
.ok-slot { height: 42px; }
.ok-slot .okt { max-width: 26px; height: 40px; }
.ok-slot .okt .okt-n { font-size: 16px; }
.ok-slot .okt .okt-m { font-size: 8px; margin-top: 1px; }

/* --me is shared by the table and the rack that overlaps its near edge, so it lives on their common parent */
.ok-felt { --me: 152px; }

/* fine tuning after the first look: the rack stays between the two corner tiles, the table uses the room that is
   left (the panel with the next-hand button needs about 58px under it) */
.ok-table { --h: clamp(430px, calc(100dvh - 150px), 700px); }
.ok-me { width: 258px; }
.ok-rack { max-width: 258px; padding: 6px 4px 8px; }
.ok-slot .okt { max-width: 24px; height: 38px; }
.ok-slot { height: 40px; }
.ok-slot .okt .okt-n { font-size: 15px; }
.ok-seat.left .ok-seat-pile { left: 8px; bottom: 50px; }
.ok-mine-pile.ok-discard-zone { right: 8px; bottom: 50px; }
.ok-seat.top .ok-seat-pile { left: 8px; }
.ok-seat.right .ok-seat-pile { right: 8px; }

/* less tilt: the far edge no longer sinks, so there is no empty band under the scores */
.ok-table { transform: perspective(1100px) rotateX(4deg); }

/* ===== Layout 3, second pass (the owner): the side racks are as long as the top one, their emoji is back above
   their names, and the player's own rack takes the room that freed up: wider and taller tiles, the two corner tiles
   level with the sort buttons above it. ===== */
.ok-felt { --me: 168px; }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { height: 262px; }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: 262px; }
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head {
  top: 196px; width: 46px; max-width: 46px; flex-direction: column; gap: 1px; padding: 2px 2px;
}
.ok-seat.left .ok-seat-head .ok-seat-avatar, .ok-seat.right .ok-seat-head .ok-seat-avatar { display: block; font-size: 20px; line-height: 1; }
.ok-seat.left .ok-seat-head { left: 1px; }
.ok-seat.right .ok-seat-head { right: 1px; }
.ok-centre { top: 231px; }

.ok-me { width: 344px; margin-top: calc(-1 * var(--me)); }
.ok-rack { max-width: 344px; padding: 7px 5px 9px; }
.ok-slot { height: 54px; }
.ok-slot .okt { max-width: 33px; height: 51px; border-radius: 5px; }
.ok-slot .okt .okt-n { font-size: 20px; }
.ok-slot .okt .okt-m { font-size: 9px; margin-top: 2px; }
.ok-seat.left .ok-seat-pile { bottom: 142px; }
.ok-mine-pile.ok-discard-zone { bottom: 142px; }

/* ===== Layout 3, third pass (the owner): the side players' tiles sit together, with no gaps, like the top
   player's; the side racks come down close to the player's own rack (no empty band between them and the
   corner tiles); the sort buttons move under the player's rack. ===== */
.ok-felt { --me: 164px; }
.ok-table { --h: clamp(520px, calc(100dvh - 215px), 640px); }
.ok-seat.left .ok-opp-edge span, .ok-seat.right .ok-opp-edge span { flex: 1 1 0; height: auto; }
.ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { justify-content: flex-start; }
/* the racks and the corner tiles are anchored to the bottom, just above the player's rack */
.ok-seat.left .ok-opp-rack, .ok-seat.right .ok-opp-rack { top: auto; bottom: calc(var(--me) + 54px); }
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { top: auto; bottom: calc(var(--me) + 54px + 131px - 24px); }
.ok-seat.left .ok-seat-pile, .ok-mine-pile.ok-discard-zone { bottom: calc(var(--me) + 4px); }
.ok-centre { top: calc((62px + var(--h) - var(--me) - 54px) / 2); transform: translate(-50%, -50%); }
/* sort buttons under the rack */
.ok-me { display: flex; flex-direction: column; }
.ok-me-bar { order: 2; }
.ok-rack { order: 1; }
.ok-felt { --me: 174px; }
.ok-me { padding-bottom: 22px; }

/* ===== No scrolling on the table screen (the owner): everything, the "next hand" button included, fits the
   screen. The table takes what is left after the top bar, the scores and the panel under it; on a short screen
   the side racks get shorter instead of the page growing. ===== */
.app:has(> .table-screen:not([hidden])) { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.ok-table { --h: clamp(400px, calc(100dvh - 205px), 640px); --rl: clamp(130px, calc(var(--h) - 335px), 262px); }
.ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood, .ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: var(--rl); }
.ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { bottom: calc(var(--me) + 54px + var(--rl) / 2 - 24px); }
.ok-centre { top: calc((62px + var(--h) - var(--me) - 54px) / 2); }
.ok-panel { min-height: 0; }
.ok-felt { --me: 192px; }
/* the table's own copy of --me (older rule) must not hide the shared value */
.ok-table { --me: inherit; }

/* short screens (small phones, a browser bar on top): a smaller rack of its own, so the racks around the table
   and the centre keep their room */
@media (max-height: 740px) {
  .ok-felt { --me: 166px; }
  .ok-me { padding-bottom: 14px; }
  .ok-slot { height: 44px; }
  .ok-slot .okt { max-width: 29px; height: 42px; }
  .ok-slot .okt .okt-n { font-size: 17px; }
  .ok-slot .okt .okt-m { font-size: 8px; margin-top: 1px; }
  .ok-centre { padding: 5px 10px 7px; gap: 4px; }
  .ok-centre-row { gap: 10px; }
}

/* ===== The score row is gone: scores sit in brackets after each name; the player's own avatar + name
   stand beside the sort buttons under the rack. ===== */
.ok-scores { display: none; }
.ok-table { --h: clamp(520px, calc(100dvh - 185px), 660px); }
.ok-seat-score { font-weight: 800; color: #f2c94c; }
.ok-seat-score .ok-delta { font-size: 0.9em; }
.ok-seat-score .ok-delta.down { color: #ff9b9b; }
.ok-seat-score .ok-delta.up { color: #9bffb4; }
.ok-me-bar { justify-content: space-between; gap: 8px; }
.ok-me-head { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; color: #fff; }
.ok-me-head .ok-seat-avatar { font-size: 22px; line-height: 1; }
.ok-me-head .ok-seat-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-me-head.is-acting { color: #f2c94c; }
.ok-seat.left .ok-seat-name, .ok-seat.right .ok-seat-name { white-space: normal; text-align: center; }

/* Game moves are written on the felt just above the player's rack (level with the bottom of the side racks,
   under the "go out" square) and fade away by themselves. */
.ok-moves { position: absolute; left: 50%; bottom: calc(var(--me) + 54px + 6px); transform: translateX(-50%); z-index: 6; max-width: 52%; text-align: center; font-size: 12px; font-weight: 800; color: #fff; background: #000a; padding: 3px 10px; border-radius: 10px; pointer-events: none; opacity: 0; }
.ok-moves.is-on { animation: ok-moves 2.6s ease-out forwards; }
@keyframes ok-moves { 0% { opacity: 0; transform: translate(-50%, 6px); } 10% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* The winner's hand, laid face up on the felt in its groups, upright towards the player, across the full width. */
.ok-reveal { position: absolute; left: 3%; right: 3%; top: 24%; z-index: 8; padding: 10px 8px 12px; border-radius: 14px; background: rgba(8, 36, 22, 0.94); box-shadow: 0 8px 24px #000a, inset 0 0 0 2px rgba(242, 201, 76, 0.55); text-align: center; animation: ok-pop 0.3s ease-out; }
.ok-reveal-title { font-size: 14px; font-weight: 800; color: #f2c94c; margin-bottom: 8px; }
.ok-reveal-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.ok-reveal-group { display: flex; gap: 2px; }
.ok-reveal .okt { width: 32px; height: 50px; border-radius: 5px; }
.ok-reveal .okt .okt-n { font-size: 22px; }
.ok-reveal .okt .okt-m { font-size: 9px; margin-top: 2px; }

/* Holding the indicator's twin: the "go out" square lights up (put that tile on it to declare). */
.ok-finish-zone.is-declare { border-color: #f2c94c; background: rgba(242, 201, 76, 0.3); animation: ok-declare-glow 1.1s ease-in-out infinite; }
@keyframes ok-declare-glow { 0%, 100% { box-shadow: 0 0 6px #f2c94c; } 50% { box-shadow: 0 0 18px 4px #f2c94c; } }

/* Tile stacks in front of every rack, seen from above: the top of a stack is a tile back the size of the pile
   and the indicator, in the pile's colour, with a little depth showing; two per player, they leave one by one. */
.ok-stacks { position: absolute; display: flex; gap: 12px; z-index: 2; pointer-events: none; }
.ok-stack { position: relative; width: 26px; height: 38px; box-sizing: border-box; border-radius: 4px; background: repeating-linear-gradient(45deg, #2b4f9e 0 5px, #213f80 5px 10px); border: 2px solid #f0ead6; box-shadow: 1px 1px 0 #cfc8b0, 2px 2px 0 #b9b29a, 3px 3px 0 #a39c85, 3px 5px 6px #0007; transition: opacity 0.5s ease, transform 0.5s ease; }
.ok-stack.is-gone { opacity: 0; transform: scale(0.4); }
.ok-stacks.s2 { top: 112px; left: 50%; transform: translateX(-50%); }
.ok-stacks.s0 { bottom: calc(var(--me) + 30px); left: 50%; transform: translateX(-50%); }
.ok-stacks.s1, .ok-stacks.s3 { flex-direction: column; justify-content: center; bottom: calc(var(--me) + 54px); height: var(--rl); }
.ok-stacks.s3 { left: 92px; }
.ok-stacks.s1 { right: 96px; }
.is-shuffling .ok-stack { animation: ok-stack-shuffle 0.28s ease-in-out 4; }
.is-shuffling .ok-stacks.s1 .ok-stack, .is-shuffling .ok-stacks.s3 .ok-stack { animation-name: ok-stack-shuffle-v; }
@keyframes ok-stack-shuffle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes ok-stack-shuffle-v { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px); } 75% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .is-shuffling .ok-stack { animation: none; } }

/* Stacks, second pass: the top and the player's own stacks close to their racks; the side players' stacks lie
   the other way round (wider than tall, along their racks) and the middle block narrows to make room. */
.ok-stacks.s2 { top: 80px; }
.ok-stacks.s0 { bottom: calc(var(--me) - 2px); }
.ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: 38px; height: 26px; }
.ok-stacks.s3 { left: 86px; }
.ok-stacks.s1 { right: 90px; }
.ok-centre .ok-label { font-size: 8px; letter-spacing: 0.02em; }
.ok-centre .ok-centre-row { gap: 6px; }
.ok-centre { padding: 5px 7px 7px; gap: 4px; }

/* ===== The web (a wide, landscape screen): the table spreads over the width instead of standing in a phone-sized
   column, and everything on it is larger — a wider rack with bigger tiles, longer racks for the other players,
   a bigger middle block. The phone layout above is untouched. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-felt { --me: 200px; }
  .ok-table {
    max-width: min(1180px, 100%);
    --h: clamp(520px, calc(100dvh - 150px), 820px);
    --rl: clamp(200px, calc(var(--h) - 360px), 380px);
  }
  /* the player's own rack: wide, with big tiles */
  .ok-me { width: 640px; margin-left: auto; margin-right: auto; padding-bottom: 20px; }
  .ok-rack { max-width: 100%; padding: 9px 8px 11px; }
  .ok-slot { height: 66px; }
  .ok-slot .okt { max-width: 52px; height: 62px; border-radius: 6px; }
  .ok-slot .okt .okt-n { font-size: 26px; }
  .ok-slot .okt .okt-m { font-size: 11px; margin-top: 3px; }
  .ok-sort .btn { padding: 6px 16px; font-size: 13px; }
  .ok-me-head { font-size: 15px; }
  .ok-me-head .ok-seat-avatar { font-size: 28px; }

  /* the top rack: as wide as the player's */
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: 640px; }
  .ok-seat.top .ok-opp-wood { height: 40px; }
  .ok-seat.top .ok-opp-edge span { height: 9px; }
  .ok-seat.top .ok-opp-brand { font-size: 19px; }
  .ok-seat.top .ok-seat-head { font-size: 16px; }
  .ok-seat.top .ok-seat-avatar { font-size: 28px; }
  .ok-seat.top .ok-seat-name { font-size: 15px; }

  /* the side racks: out towards the edges, longer and thicker, their names outside */
  .ok-seat.left .ok-opp-rack { left: 9%; }
  .ok-seat.right .ok-opp-rack { right: 9%; }
  .ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood, .ok-seat.left .ok-opp-edge, .ok-seat.right .ok-opp-edge { height: var(--rl); }
  .ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { width: 44px; }
  .ok-seat.left .ok-opp-edge span, .ok-seat.right .ok-opp-edge span { width: 11px; }
  .ok-seat.left .ok-opp-brand, .ok-seat.right .ok-opp-brand { font-size: 19px; }
  .ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { width: 80px; max-width: 80px; }
  .ok-seat.left .ok-seat-head { left: calc(9% - 90px); }
  .ok-seat.right .ok-seat-head { right: calc(9% - 90px); }
  .ok-seat.left .ok-seat-head .ok-seat-avatar, .ok-seat.right .ok-seat-head .ok-seat-avatar { font-size: 28px; }
  .ok-seat.left .ok-seat-head .ok-seat-name, .ok-seat.right .ok-seat-head .ok-seat-name { font-size: 14px; }
  .ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { bottom: calc(var(--me) + 54px + var(--rl) / 2 - 36px); }

  /* tiles thrown: bigger, nearer the racks */
  .ok-seat .ok-seat-pile .okt, .ok-mine-pile .okt { width: 38px; height: 56px; }
  .ok-seat .ok-seat-pile .okt .okt-n, .ok-mine-pile .okt .okt-n { font-size: 22px; }
  .ok-seat.left .ok-seat-pile { left: calc(9% + 70px); }
  .ok-mine-pile.ok-discard-zone { right: calc(9% + 70px); min-width: 42px; min-height: 60px; }
  .ok-seat.top .ok-seat-pile { left: calc(19% - 30px); }
  .ok-seat.right .ok-seat-pile { right: calc(19% - 30px); }

  /* the middle block, bigger */
  .ok-centre { padding: 8px 18px 12px; gap: 6px; top: calc((150px + var(--h) - var(--me) - 80px) / 2); }
  .ok-centre .ok-label { font-size: 12px; }
  .ok-centre .ok-centre-row { gap: 22px; }
  .ok-centre .okt, .ok-deck .okt { width: 40px; height: 58px; }
  .ok-centre .okt .okt-n { font-size: 24px; }
  .ok-deck-n { font-size: 13px; padding: 1px 7px; }
  .ok-finish-zone { width: 46px; height: 64px; }

  /* the tile stacks, in proportion */
  .ok-stack { width: 40px; height: 58px; }
  .ok-stacks.s2 { top: 84px; }
  .ok-stacks.s0 { bottom: calc(var(--me) - 4px); }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: 58px; height: 40px; }
  .ok-stacks.s3 { left: calc(9% + 54px); }
  .ok-stacks.s1 { right: calc(9% + 54px); }

  /* moves and the winner's hand */
  .ok-moves { font-size: 15px; padding: 5px 14px; }
  .ok-reveal { left: 12%; right: 12%; top: 22%; }
  .ok-reveal .okt { width: 44px; height: 68px; }
  .ok-reveal .okt .okt-n { font-size: 30px; }
  .ok-reveal-title { font-size: 18px; }
}

/* The same wide layout on a landscape screen that is not tall (a laptop with a browser bar): smaller racks and
   tiles, so the stacks, the middle block and the player's rack still have their own room. */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-felt { --me: 172px; }
  .ok-table { --h: clamp(470px, calc(100dvh - 128px), 620px); --rl: clamp(170px, calc(var(--h) - 320px), 300px); }
  .ok-me { width: 560px; padding-bottom: 12px; }
  .ok-slot { height: 54px; }
  .ok-slot .okt { max-width: 44px; height: 51px; }
  .ok-slot .okt .okt-n { font-size: 22px; }
  .ok-slot .okt .okt-m { font-size: 9px; margin-top: 2px; }
  .ok-sort .btn { padding: 4px 12px; font-size: 12px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: 560px; }
  .ok-seat.top .ok-opp-wood { height: 32px; }
  .ok-centre { padding: 6px 14px 8px; gap: 4px; top: calc((118px + var(--h) - var(--me) - 70px) / 2); }
  .ok-centre .okt, .ok-deck .okt { width: 34px; height: 50px; }
  .ok-centre .okt .okt-n { font-size: 20px; }
  .ok-centre .ok-label { font-size: 10px; }
  .ok-finish-zone { width: 40px; height: 54px; }
  .ok-stack { width: 34px; height: 50px; }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: 50px; height: 34px; }
  .ok-stacks.s2 { top: 70px; }
  .ok-stacks.s0 { bottom: calc(var(--me) - 6px); }
  .ok-seat .ok-seat-pile .okt, .ok-mine-pile .okt { width: 32px; height: 46px; }
  .ok-moves { bottom: calc(var(--me) + 20px); }
}

/* A big screen (a desktop monitor): the whole table is scaled up, so tiles and racks do not look lost on it. */
@media (min-width: 1500px) and (min-height: 960px) and (min-aspect-ratio: 6/5) {
  .ok-board, .ok-me { zoom: 1.25; }
  .ok-table { --h: clamp(520px, calc((100dvh - 150px) / 1.25), 820px); }
}

/* The second copy of the country flag (the right-hand one) only exists on a wide screen. */
.table-flag-2 { display: none; }

/* ===== The web, second pass (the owner, on the first look): the country flag leaves the felt and stands on the two
   empty sides; the side players' racks are bigger; the top rack comes closer; the tiles of the player's rack touch each
   other; the player's name and score stand above the rack left of the two stacks and the sort buttons right of them. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-felt > .table-flag { display: none; }
  .ok-felt { --tblw: min(1180px, 100%); }

  /* the player's rack: tiles side by side, no air between them; the name and the sort buttons above it */
  .ok-me { width: 600px; }
  .ok-slot .okt { max-width: none; }
  .ok-me-bar { order: 0; padding: 0 6px 8px; align-items: flex-end; }
  .ok-me-head { font-size: 16px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: 600px; }

  /* the top rack, nearer to the player */
  .ok-seat.top .ok-seat-head { top: 50px; }
  .ok-seat.top .ok-opp-rack { top: 84px; }
  .ok-stacks.s2 { top: 130px; }
  .ok-seat.top .ok-seat-pile { top: 88px; }
  .ok-centre { top: calc((196px + var(--h) - var(--me) - 80px) / 2); }

  /* the side racks: longer and thicker */
  .ok-table { --rl: clamp(220px, calc(var(--h) - 300px), 440px); }
  .ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { width: 62px; }
  .ok-seat.left .ok-opp-edge span, .ok-seat.right .ok-opp-edge span { width: 15px; }
  .ok-seat.left .ok-opp-brand, .ok-seat.right .ok-opp-brand { font-size: 24px; }
  .ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { bottom: calc(var(--me) + 54px + var(--rl) / 2 - 40px); }
  .ok-stacks.s3 { left: calc(9% + 80px); }
  .ok-stacks.s1 { right: calc(9% + 80px); }
  .ok-seat.left .ok-seat-pile { left: calc(9% + 96px); }
  .ok-mine-pile.ok-discard-zone { right: calc(9% + 96px); }
}

/* the flag on both empty sides, only where the sides are wide enough to show it */
@media (min-width: 1500px) and (min-aspect-ratio: 6/5) {
  .ok-felt { --fw: clamp(130px, calc((100% - var(--tblw)) / 2 - 70px), 340px); }
  .ok-felt > .table-flag, .ok-felt > .table-flag-2 {
    display: block; position: absolute; inset: auto; top: 46%; width: var(--fw); height: auto; aspect-ratio: 3 / 2;
    object-fit: fill; opacity: 0.95; border-radius: 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); z-index: 0; pointer-events: none;
  }
  .ok-felt > .table-flag { left: calc((100% - var(--tblw)) / 4); transform: translate(-50%, -50%); }
  .ok-felt > .table-flag-2 { right: calc((100% - var(--tblw)) / 4); left: auto; transform: translate(50%, -50%); }
  .ok-felt > .table-flag[hidden], .ok-felt > .table-flag-2[hidden] { display: none; }
}
@media (min-width: 1500px) and (min-height: 960px) and (min-aspect-ratio: 6/5) {
  .ok-felt { --tblw: min(1475px, 100%); }
}

/* low landscape screens: the same, smaller */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-me { width: 500px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: 500px; }
  .ok-me-bar { padding-bottom: 4px; }
  .ok-seat.top .ok-seat-head { top: 40px; }
  .ok-seat.top .ok-opp-rack { top: 72px; }
  .ok-stacks.s2 { top: 112px; }
  .ok-centre { top: calc((170px + var(--h) - var(--me) - 70px) / 2); }
  .ok-table { --rl: clamp(180px, calc(var(--h) - 270px), 340px); }
  .ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { width: 52px; }
  .ok-seat.left .ok-opp-edge span, .ok-seat.right .ok-opp-edge span { width: 12px; }
}

/* ===== The web, third pass (the owner): the top rack and the two side racks are the same size — the same length and the
   same thickness, the same tile edges. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-table { --rtw: 54px; --rte: 13px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: var(--rl); }
  .ok-seat.top .ok-opp-wood { height: var(--rtw); }
  .ok-seat.top .ok-opp-edge span { height: var(--rte); }
  .ok-seat.top .ok-opp-brand { font-size: 24px; }
  .ok-seat.left .ok-opp-wood, .ok-seat.right .ok-opp-wood { width: var(--rtw); }
  .ok-seat.left .ok-opp-edge span, .ok-seat.right .ok-opp-edge span { width: var(--rte); }
  .ok-stacks.s2 { top: calc(84px + var(--rte) + var(--rtw) + 8px); }
  .ok-seat.top .ok-seat-pile { top: 90px; }
  .ok-centre { top: calc((84px + var(--rte) + var(--rtw) + 8px + 58px + var(--h) - var(--me) - 80px + 20px) / 2); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-table { --rtw: 44px; --rte: 11px; }
  .ok-stacks.s2 { top: calc(72px + var(--rte) + var(--rtw) + 6px); }
  .ok-centre { top: calc((72px + var(--rte) + var(--rtw) + 6px + 50px + var(--h) - var(--me) - 70px + 16px) / 2); }
}

/* ===== The web, fourth pass (the owner): the player's rack stays inside the table's frame — it no longer hangs below the
   bottom edge. The rack block (name and buttons row + the rack) is shorter, and the room it takes (--me) now covers all of it. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-felt { --me: 226px; }
  .ok-me { padding-bottom: 10px; }
  .ok-slot { height: 62px; }
  .ok-slot .okt { height: 59px; }
  .ok-slot .okt .okt-n { font-size: 24px; }
  .ok-table { --rl: clamp(200px, calc(var(--h) - 318px), 440px); }
  .ok-stacks.s0 { bottom: calc(var(--me) - 52px); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-felt { --me: 190px; }
  .ok-me { padding-bottom: 8px; }
  .ok-slot { height: 50px; }
  .ok-slot .okt { height: 47px; }
  .ok-slot .okt .okt-n { font-size: 20px; }
  .ok-table { --rl: clamp(180px, calc(var(--h) - 262px), 340px); }
  .ok-stacks.s0 { bottom: calc(var(--me) - 40px); }
}

/* The top player's name has some air above their rack. */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-seat.top .ok-seat-head { top: 36px; }
  .ok-seat.top .ok-opp-rack { top: 92px; }
  .ok-stacks.s2 { top: calc(92px + var(--rte) + var(--rtw) + 8px); }
  .ok-centre { top: calc((92px + var(--rte) + var(--rtw) + 8px + 58px + var(--h) - var(--me) - 80px + 20px) / 2); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-seat.top .ok-seat-head { top: 28px; }
  .ok-seat.top .ok-opp-rack { top: 78px; }
  .ok-stacks.s2 { top: calc(78px + var(--rte) + var(--rtw) + 6px); }
  .ok-centre { top: calc((78px + var(--rte) + var(--rtw) + 6px + 50px + var(--h) - var(--me) - 70px + 16px) / 2); }
}

/* The middle block sits exactly between the top player's stacks and the player's own stacks. */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-centre { top: calc((92px + var(--rte) + var(--rtw) + 8px + 58px + var(--h) - var(--me)) / 2); }
}
/* a screen of about 800 px high: the tiles of the middle block, and the stacks, a little smaller to fit between them */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (min-height: 761px) and (max-height: 830px) {
  .ok-centre { padding: 6px 14px 9px; gap: 4px; top: calc((92px + var(--rte) + var(--rtw) + 8px + 52px + var(--h) - var(--me)) / 2); }
  .ok-centre .okt, .ok-deck .okt { width: 36px; height: 52px; }
  .ok-centre .okt .okt-n { font-size: 21px; }
  .ok-centre .ok-label { font-size: 11px; }
  .ok-finish-zone { width: 42px; height: 58px; }
  .ok-stack { width: 36px; height: 52px; }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: 52px; height: 36px; }
}

/* ===== The web, fifth pass (the owner): every tile on the table is the same size — the tiles of the player's rack, the
   indicator, the pile, the stacks in front of the racks and the thrown tiles. --tw x --th is that size; it follows the
   height of the screen. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-felt { --tw: 52px; --th: 70px; --me: 246px; }
  .ok-table { --rl: clamp(200px, calc(var(--h) - var(--me) - 92px), 440px); }
  .ok-me { width: calc(var(--tw) * 10 + 20px); }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: var(--rl); }
  .ok-rack { padding: 8px 10px 10px; }
  .ok-slot { height: calc(var(--th) + 4px); }
  .ok-slot .okt { width: 100%; max-width: none; height: var(--th); }
  .ok-slot .okt .okt-n { font-size: calc(var(--th) * 0.4); }
  .ok-slot .okt .okt-m { font-size: calc(var(--th) * 0.16); }
  .ok-centre .okt, .ok-deck .okt, .ok-seat .ok-seat-pile .okt, .ok-mine-pile .okt { width: var(--tw); height: var(--th); }
  .ok-centre .okt .okt-n, .ok-seat .ok-seat-pile .okt .okt-n, .ok-mine-pile .okt .okt-n { font-size: calc(var(--th) * 0.38); }
  .ok-finish-zone { width: var(--tw); height: var(--th); }
  .ok-mine-pile.ok-discard-zone { min-width: calc(var(--tw) + 6px); min-height: calc(var(--th) + 6px); }
  .ok-stack { width: var(--tw); height: var(--th); }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: var(--th); height: var(--tw); }
  .ok-stacks.s2 { top: calc(92px + var(--rte) + var(--rtw) + 8px); }
  .ok-stacks.s0 { bottom: calc(var(--me) - 50px); }
  .ok-centre { top: calc((92px + var(--rte) + var(--rtw) + 8px + var(--th) + var(--h) - var(--me)) / 2 - 8px); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (min-height: 761px) and (max-height: 830px) {
  .ok-felt { --tw: 44px; --th: 58px; --me: 218px; }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-felt { --tw: 38px; --th: 54px; --me: 200px; }
  .ok-table { --rl: clamp(180px, calc(var(--h) - var(--me) - 78px), 340px); }
  .ok-me { width: calc(var(--tw) * 10 + 16px); }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: var(--rl); }
  .ok-rack { padding: 6px 8px 8px; }
  .ok-stacks.s2 { top: calc(78px + var(--rte) + var(--rtw) + 6px); }
  .ok-stacks.s0 { bottom: calc(var(--me) - 40px); }
  .ok-centre { top: calc((78px + var(--rte) + var(--rtw) + 6px + var(--th) + var(--h) - var(--me)) / 2); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (min-height: 831px) {
  .ok-centre { top: calc((92px + var(--rte) + var(--rtw) + 8px + var(--th) + var(--h) - var(--me)) / 2 - 18px); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 760px) {
  .ok-felt { --tw: 36px; --th: 50px; --me: 192px; }
  .ok-centre { padding: 4px 12px 6px; gap: 2px; }
  .ok-centre .ok-label { font-size: 9px; }
  .ok-moves { bottom: calc(var(--me) + 14px); }
}

/* ===== The move log (the owner): on a big screen the right-hand side of the table, where the second flag was, writes
   the moves — a new move comes in at the bottom, the older ones move up, as many lines stay as fit. ===== */
.ok-movelog { display: none; }
@media (min-width: 1500px) and (min-aspect-ratio: 6/5) {
  .ok-felt > .ok-movelog {
    display: flex; flex-direction: column; gap: 6px; position: absolute; top: 46%; right: calc((100% - var(--tblw)) / 4);
    transform: translate(50%, -50%); width: var(--fw); height: min(62%, 520px); z-index: 0; padding: 10px 12px 12px;
    border-radius: 12px; background: rgba(0, 0, 0, 0.26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .ok-ml-title { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f2c94c; text-align: center; opacity: 0.9; }
  .ok-ml-list {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .ok-ml-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; flex: 0 0 auto; }
  .ok-ml-row .okt { flex: 0 0 auto; width: 28px; height: 38px; }
  .ok-ml-row .okt .okt-n { font-size: 16px; }
  .ok-ml-row .okt .okt-m { font-size: 7px; margin-top: 1px; }
  .ok-ml-row:last-child { color: #f2c94c; }
  /* the faint line over the table is no longer needed: the log says the same */
  .ok-moves { display: none; }
}

/* ===== The web (the owner): the side racks are centred up and down between the top of the table and the player's own
   rack, with their names, tile stacks and the two names on one level. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-table { --mid: calc((var(--h) - var(--me) + 56px) / 2); }
  .ok-seat.left .ok-opp-rack, .ok-seat.right .ok-opp-rack { top: calc(var(--mid) - var(--rl) / 2); bottom: auto; }
  .ok-seat.left .ok-seat-head, .ok-seat.right .ok-seat-head { top: calc(var(--mid) - 24px); bottom: auto; }
  .ok-stacks.s1, .ok-stacks.s3 { top: calc(var(--mid) - var(--rl) / 2); bottom: auto; height: var(--rl); }
}

/* The winner's rack: the same rack as the player's own, laid on the felt. */
.ok-reveal .ok-reveal-rack { margin: 0 auto; width: 344px; max-width: 100%; order: 0; }
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-reveal .ok-reveal-rack { width: calc(var(--tw) * 10 + 20px); max-width: 100%; }
  .ok-reveal { left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: 94%; padding: 10px 14px 14px; }
  .ok-reveal-title { text-align: center; }
}

/* ===== A phone held sideways (or any very low landscape screen): the table is only about 320 px high, so everything is
   small and the two rows of tile stacks at the top and bottom are left out. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-felt { --tw: 30px; --th: 40px; --me: 138px; padding: 2px 6px; gap: 2px; }
  .table-topbar { min-height: 0; }
  .ok-table { --h: clamp(260px, calc(100dvh - 66px), 470px); --rtw: 24px; --rte: 8px; --rl: clamp(110px, calc(var(--h) - var(--me) - 24px), 250px); }
  .ok-table { --mid: calc((var(--h) - var(--me) + 40px) / 2); }
  .ok-me { width: calc(var(--tw) * 10 + 14px); padding-bottom: 6px; gap: 3px; }
  .ok-rack { padding: 4px 6px 5px; row-gap: 3px; }
  .ok-slot { height: calc(var(--th) + 2px); }
  .ok-slot .okt .okt-n { font-size: 17px; }
  .ok-slot .okt .okt-m { font-size: 7px; margin-top: 1px; }
  .ok-me-bar { padding: 0 2px 3px; }
  .ok-me-head { font-size: 11px; gap: 3px; }
  .ok-me-head .ok-seat-avatar { font-size: 16px; }
  .ok-sort .btn { padding: 2px 8px; font-size: 10px; }
  /* the top player */
  .ok-seat.top .ok-seat-head { top: 2px; font-size: 11px; }
  .ok-seat.top .ok-seat-avatar { font-size: 16px; }
  .ok-seat.top .ok-seat-name { font-size: 11px; }
  .ok-seat.top .ok-opp-rack { top: 24px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: var(--rl); }
  .ok-seat.top .ok-opp-brand, .ok-seat.left .ok-opp-brand, .ok-seat.right .ok-opp-brand { font-size: 13px; }
  .ok-seat.top .ok-seat-pile { top: 26px; }
  .ok-stacks.s2, .ok-stacks.s0 { display: none; }
  /* the side players */
  .ok-seat.left .ok-opp-rack { left: 12%; }
  .ok-seat.right .ok-opp-rack { right: 12%; }
  .ok-seat.left .ok-seat-head { left: 1%; width: 58px; max-width: 58px; }
  .ok-seat.right .ok-seat-head { right: 1%; width: 58px; max-width: 58px; }
  .ok-seat.left .ok-seat-head .ok-seat-avatar, .ok-seat.right .ok-seat-head .ok-seat-avatar { font-size: 18px; }
  .ok-seat.left .ok-seat-head .ok-seat-name, .ok-seat.right .ok-seat-head .ok-seat-name { font-size: 10px; }
  .ok-stacks.s3 { left: calc(12% + 36px); }
  .ok-stacks.s1 { right: calc(12% + 36px); }
  .ok-seat.left .ok-seat-pile { left: calc(12% + 40px); }
  .ok-mine-pile.ok-discard-zone { right: calc(12% + 40px); }
  /* the middle */
  .ok-centre { padding: 3px 10px 5px; gap: 2px; top: calc((30px + var(--rtw) + var(--rte) + var(--h) - var(--me)) / 2); }
  .ok-centre .ok-label { font-size: 8px; }
  .ok-moves { font-size: 11px; bottom: calc(var(--me) + 4px); }
  .ok-reveal { top: 14%; padding: 6px 8px 8px; }
  .ok-reveal-title { font-size: 12px; margin-bottom: 4px; }
}

/* sideways phone, second look: room is kept for the "next hand" button under the table, and the middle block lies on one
   row (indicator, pile, the "go out" square side by side) so it needs little height. */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-felt { --me: 134px; }
  .ok-table { --h: clamp(230px, calc(100dvh - 104px), 420px); --mid: calc((var(--h) - var(--me) + 34px) / 2); }
  .ok-centre { flex-direction: row; align-items: flex-end; gap: 14px; top: calc((34px + var(--rtw) + var(--rte) + var(--h) - var(--me)) / 2); }
  .ok-centre .ok-centre-row { gap: 8px; }
}

/* ===== The side racks are centred on the table itself (the owner), not only on the room above the player's rack: the
   gap above them and below them is the same, and the thrown tiles sit level with the bottom of the racks. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-table { --mid: calc(var(--h) / 2); }
  .ok-seat.left .ok-seat-pile, .ok-mine-pile.ok-discard-zone { top: calc(var(--mid) + var(--rl) / 2 - var(--th) - 6px); bottom: auto; }
}

/* ===== A phone held sideways, third pass (the owner): the three other racks are much bigger — the side racks hug the screen's
   edges (the player's own rack is narrow, so they may run nearly the whole height of the table) and the top rack is as long
   as they are; their names and stacks stand on the inner side; nothing overlaps. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-felt { --tw: 30px; --th: 40px; --me: 134px; }
  .ok-table { --rtw: 26px; --rte: 9px; --rl: clamp(120px, calc(var(--h) - 22px), 340px); --mid: calc(var(--h) / 2); }
  .ok-seat.left .ok-opp-rack { left: 2%; }
  .ok-seat.right .ok-opp-rack { right: 2%; }
  .ok-seat.left .ok-opp-rack, .ok-seat.right .ok-opp-rack { top: calc(var(--mid) - var(--rl) / 2); bottom: auto; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: var(--rl); }
  .ok-seat.top .ok-seat-head { top: 0; }
  .ok-seat.top .ok-opp-rack { top: 20px; }
  .ok-seat.top .ok-seat-pile { top: 24px; left: calc(19% - 20px); }
  .ok-seat.right .ok-seat-pile { top: 24px; right: calc(19% - 20px); }
  /* beside the side racks, from the edge inwards: the rack, the two stacks, the name */
  .ok-stacks.s3 { left: calc(2% + var(--rtw) + var(--rte) + 6px); top: calc(var(--mid) - var(--rl) / 2); height: var(--rl); }
  .ok-stacks.s1 { right: calc(2% + var(--rtw) + var(--rte) + 6px); top: calc(var(--mid) - var(--rl) / 2); height: var(--rl); }
  .ok-seat.left .ok-seat-head { left: calc(2% + var(--rtw) + var(--rte) + var(--th) + 14px); right: auto; top: calc(var(--mid) - 18px); width: auto; max-width: 96px; }
  .ok-seat.right .ok-seat-head { right: calc(2% + var(--rtw) + var(--rte) + var(--th) + 14px); left: auto; top: calc(var(--mid) - 18px); width: auto; max-width: 96px; }
  .ok-seat.left .ok-seat-pile { left: calc(2% + var(--rtw) + var(--rte) + 6px); top: calc(var(--mid) + var(--tw) + 14px); bottom: auto; }
  .ok-mine-pile.ok-discard-zone { right: calc(2% + var(--rtw) + var(--rte) + 6px); top: calc(var(--mid) + var(--tw) + 14px); bottom: auto; }
  .ok-centre { top: calc((20px + var(--rtw) + var(--rte) + 4px + var(--h) - var(--me) - 4px) / 2); }
}

/* the browser's bars are still showing (a phone about 300 px high): a thin top bar, the smallest tiles, and the middle block
   just fits between the top rack and the player's rack */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 360px) {
  .ok-felt { --tw: 25px; --th: 33px; --me: 114px; }
  .ok-me { padding-bottom: 0; }
  .ok-table { --h: clamp(180px, calc(100dvh - 82px), 420px); --rtw: 22px; --rte: 7px; }
  .table-topbar { padding-block: 0; min-height: 0; }
  .table-topbar .icon-btn { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; font-size: 13px; }
  .table-topbar .hand-info { font-size: 11px; line-height: 1.1; }
  .table-topbar .badge-info { font-size: 12px; padding: 2px 8px; }
  .ok-panel { padding-block: 2px; }
  .ok-panel .btn { min-height: 30px; padding: 3px 12px; font-size: 13px; }
  .ok-slot .okt .okt-n { font-size: 14px; }
  .ok-centre .okt .okt-n { font-size: 15px; }
  .ok-centre .ok-label { font-size: 7px; }
  .ok-centre { padding: 2px 10px 3px; gap: 1px; }
  .ok-me-bar { padding-bottom: 2px; }
  .ok-sort .btn { padding: 1px 7px; font-size: 9px; }
  .ok-me-head { font-size: 10px; }
  .ok-me-head .ok-seat-avatar { font-size: 14px; }
}

/* a phone held sideways: the fading line of moves stands in the top left corner of the table (it used to cross the middle block) */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-moves { top: 5px; bottom: auto; left: 15%; max-width: 26%; font-size: 10px; padding: 2px 8px; }
}

/* the lowest screens (about 280 px): the labels over the indicator, the pile and the "go out" square go and the tiles are the
   smallest, so the middle block fits between the top rack and the player's rack */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 300px) {
  .ok-felt { --tw: 23px; --th: 30px; --me: 104px; }
  .ok-table { --h: clamp(170px, calc(100dvh - 88px), 420px); }
  .ok-centre .ok-label { display: none; }
  .ok-centre { padding: 2px 10px; }
  .ok-slot .okt .okt-n { font-size: 13px; }
}

/* ===== Stacks only at the sides, a bigger middle (the owner): the top and the player's own tile stacks are gone (their stacks
   stand at the side racks, four each), so the middle block is centred between the top rack and the player's rack and its tiles —
   the indicator, the pile and the "go out" square — are a third bigger than the other tiles. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-table { --cs: 1.3; }
  .ok-centre .okt, .ok-deck .okt, .ok-finish-zone { width: calc(var(--tw) * var(--cs)); height: calc(var(--th) * var(--cs)); }
  .ok-centre .okt .okt-n { font-size: calc(var(--th) * var(--cs) * 0.4); }
  .ok-stacks.s1, .ok-stacks.s3 { gap: 8px; }
  .ok-centre { top: calc((92px + var(--rte) + var(--rtw) + var(--h) - var(--me)) / 2); }
}

/* a phone held sideways: the player's rack and the top rack are wider (the tiles are broader), the middle block sits between
   the top rack and the player's rack */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-felt { --tw: 35px; }
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: calc(var(--tw) * 10 + 14px); }
  .ok-centre { top: calc((20px + var(--rtw) + var(--rte) + var(--h) - var(--me)) / 2); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 360px) {
  .ok-felt { --tw: 29px; }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 300px) {
  .ok-felt { --tw: 27px; }
}

/* ===== Stacks again in front of every player (the owner): two in front of each, on the web and on a phone held upright.
   Only a phone held sideways has no room in front of the top player and the player: their two stacks stand beside the side
   racks, as a second column next to the side player's own (two by two), well above the thrown-tile places. ===== */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (min-height: 561px) {
  .ok-table { --cs: 1.1; }
  .ok-centre { top: calc((150px + var(--rte) + var(--rtw) + var(--h) - var(--me)) / 2); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (min-height: 561px) and (max-height: 760px) {
  .ok-table { --cs: 1; }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-table { --cs: 1.3; }
  .ok-stacks.s0, .ok-stacks.s2 {
    display: flex; flex-direction: column; justify-content: center; gap: 8px; transform: none; bottom: auto;
    top: calc(var(--mid) - var(--rl) / 2); height: var(--rl);
  }
  .ok-stacks.s0 { left: calc(2% + var(--rtw) + var(--rte) + var(--th) + 12px); right: auto; }
  .ok-stacks.s2 { right: calc(2% + var(--rtw) + var(--rte) + var(--th) + 12px); left: auto; }
  .ok-stacks.s0 .ok-stack, .ok-stacks.s2 .ok-stack { width: var(--th); height: var(--tw); }
  .ok-seat.left .ok-seat-head { left: calc(2% + var(--rtw) + var(--rte) + var(--th) * 2 + 22px); }
  .ok-seat.right .ok-seat-head { right: calc(2% + var(--rtw) + var(--rte) + var(--th) * 2 + 22px); }
}

/* ===== The places where a tile is thrown (the player's own, and the three others') always show as gold dashed outlines, empty or
   not, in every version. ===== */
.ok-seat .ok-seat-pile, .ok-mine-pile.ok-discard-zone {
  border: 2px dashed rgba(242, 201, 76, 0.85); border-radius: 8px; box-sizing: border-box;
  min-width: 32px; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 2px;
}
.ok-mine-pile.ok-discard-zone.is-live { background: rgba(242, 201, 76, 0.16); }
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-seat .ok-seat-pile, .ok-mine-pile.ok-discard-zone { min-width: calc(var(--tw) + 8px); min-height: calc(var(--th) + 8px); }
}

/* the three other players' thrown-tile places have the full tile size (the older rules left them as thin strips) */
.ok-seat.top .ok-seat-pile, .ok-seat.left .ok-seat-pile, .ok-seat.right .ok-seat-pile { min-width: 32px; min-height: 46px; }
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-seat.top .ok-seat-pile, .ok-seat.left .ok-seat-pile, .ok-seat.right .ok-seat-pile { min-width: calc(var(--tw) + 8px); min-height: calc(var(--th) + 8px); }
}

/* ===== One tile size everywhere (the owner): the tiles of the player's rack, the tile stacks in front of the racks, the indicator,
   the pile, the "go out" square and the thrown-tile places are always the same size — in every version, upright or sideways.
   --tw x --th is that size (the rack's tile); sideways the stacks at the sides lie on their long side. ===== */
:root { --tw: 33px; --th: 51px; }
@media (max-aspect-ratio: 6/5) {
  .ok-felt { --tw: 33px; --th: 51px; }
}
@media (max-aspect-ratio: 6/5) and (max-height: 740px) {
  .ok-felt { --tw: 29px; --th: 42px; }
}
.ok-table { --cs: 1; }
.ok-centre .okt, .ok-deck .okt, .ok-finish-zone, .ok-seat .ok-seat-pile .okt, .ok-mine-pile .okt, .ok-stack { width: var(--tw); height: var(--th); }
.ok-seat .ok-seat-pile, .ok-mine-pile.ok-discard-zone, .ok-seat.top .ok-seat-pile, .ok-seat.left .ok-seat-pile, .ok-seat.right .ok-seat-pile {
  min-width: calc(var(--tw) + 4px); min-height: calc(var(--th) + 4px); padding: 0;
}
.ok-centre .okt .okt-n, .ok-seat .ok-seat-pile .okt .okt-n, .ok-mine-pile .okt .okt-n { font-size: calc(var(--th) * 0.4); }
.ok-centre .okt .okt-m, .ok-seat .ok-seat-pile .okt .okt-m, .ok-mine-pile .okt .okt-m { font-size: calc(var(--th) * 0.17); }

/* upright: the top rack is a little shorter, so the thrown-tile places at its two ends fit beside it */
@media (max-width: 559px), (max-aspect-ratio: 6/5) {
  .ok-seat.top .ok-opp-wood, .ok-seat.top .ok-opp-edge { width: 236px; }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: var(--tw); height: var(--th); }
}
/* sideways and on the web: the places are the tile plus its dashed rim (the same rule, in the landscape sizes) */
@media (min-width: 560px) and (min-aspect-ratio: 6/5) {
  .ok-seat .ok-seat-pile, .ok-mine-pile.ok-discard-zone, .ok-seat.top .ok-seat-pile, .ok-seat.left .ok-seat-pile, .ok-seat.right .ok-seat-pile {
    min-width: calc(var(--tw) + 4px); min-height: calc(var(--th) + 4px);
  }
  .ok-stacks.s0 .ok-stack, .ok-stacks.s2 .ok-stack { width: var(--tw); height: var(--th); }
  .ok-stacks.s1 .ok-stack, .ok-stacks.s3 .ok-stack { width: var(--th); height: var(--tw); }
}
@media (min-width: 560px) and (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .ok-stacks.s0 .ok-stack, .ok-stacks.s2 .ok-stack { width: var(--th); height: var(--tw); }
}

/* a short upright phone: the middle block sits a little lower, clear of the top player's stacks */
@media (max-height: 740px) and (max-aspect-ratio: 6/5) {
  .ok-centre { top: calc((62px + var(--h) - var(--me) - 54px) / 2 + 12px); }
}