/* Poker-only layout, loaded after the shared viewport rules.
 * Geometry contract at 375px: content width 359px, table height 488px.
 * Seat/card/label sizes stay physical CSS pixels; no whole-table scale.
 * Vertical bands (px): top action 80–108, top chips 112–132,
 * pot 136–158, upper chips 160–180, community cards 188–246,
 * street 250–264, lower chips 272–292, own chips 300–320,
 * own cards 328–400 (rotation extends to about 404), own info 408–444,
 * own action 448–476. The dock follows the 488px stage plus the
 * shared 3px gap: 15px clear from the action row.
 * Rail height changes from 84% to 74% of the stage (11.9% shorter).
 * At widths >=361px and heights <=700px, a compact three-above/three-below arrangement keeps
 * the same cards, labels and 48px main actions; only spacing changes.
 * Below 601px, a 365px content layout groups names beside cards. A small-
 * viewport cap reserves the main controls while the table itself can scroll.
 * Additional amount tools can scroll without hiding the initial main actions.
 */
body.pg-game-page.op-page > .op-app {
  width: 100%;
  height: auto;
  min-height: 100svh;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  overflow: visible;
}
body.pg-game-page.op-page .op-stage {
  flex: 0 0 488px;
  height: 488px;
  min-height: 488px;
  overflow: visible;
}
body.pg-game-page.op-page #opBoard { height: 488px; min-height: 488px; }
.op-page .op-table {
  --op-seat-width: 96px;
  --op-chip-width: 80px;
  --op-chip-offset: 98px;
  --op-pot-x: 50%;
  --op-pot-y: 147px;
  --op-chip-0-x: 50%;
  --op-chip-0-y: 310px;
  --op-chip-1-x: 138px;
  --op-chip-1-y: 282px;
  --op-chip-2-x: 138px;
  --op-chip-2-y: 170px;
  --op-chip-3-x: 50%;
  --op-chip-3-y: 122px;
  --op-chip-4-x: calc(100% - 138px);
  --op-chip-4-y: 170px;
  --op-chip-5-x: calc(100% - 138px);
  --op-chip-5-y: 282px;
  /* Award chips land in the now-empty contribution slots, never on a name,
   * stack, card or action. Aliases also follow compact/legacy layouts. */
  --op-award-0-x: var(--op-chip-0-x);
  --op-award-0-y: var(--op-chip-0-y);
  --op-award-1-x: var(--op-chip-1-x);
  --op-award-1-y: var(--op-chip-1-y);
  --op-award-2-x: var(--op-chip-2-x);
  --op-award-2-y: var(--op-chip-2-y);
  --op-award-3-x: var(--op-chip-3-x);
  --op-award-3-y: var(--op-chip-3-y);
  --op-award-4-x: var(--op-chip-4-x);
  --op-award-4-y: var(--op-chip-4-y);
  --op-award-5-x: var(--op-chip-5-x);
  --op-award-5-y: var(--op-chip-5-y);
}
.op-page .op-felt { top: 8%; bottom: 18%; left: 11%; right: 11%; }
.op-page .op-table-brand { top: 124px; font-size: 10px; opacity: .5; }
.op-page .op-seat { width: var(--op-seat-width); height: 100px; }
.op-page .op-seat-3 { left: 50%; top: 0; }
.op-page .op-seat-2 { left: calc(var(--op-seat-width) / 2); top: 62px; }
.op-page .op-seat-4 { left: calc(100% - var(--op-seat-width) / 2); top: 62px; }
.op-page .op-seat-1 { left: calc(var(--op-seat-width) / 2); top: 254px; }
.op-page .op-seat-5 { left: calc(100% - var(--op-seat-width) / 2); top: 254px; }
.op-page .op-seat .op-avatar { top: 3px; width: 38px; height: 38px; font-size: 14px; }
.op-page .op-seat .op-player-info,
.op-page .op-seat.has-visible-cards .op-player-info { top: 42px; min-height: 36px; }
.op-page .op-seat .op-seat-name { height: 13px; line-height: 13px; font-size: 10px; }
.op-page .op-seat .op-stack { font-size: 11px; line-height: 17px; letter-spacing: -.2px; }
.op-page .op-seat .op-card-row { top: 3px; }
.op-page .op-seat .op-card { width: 23px; height: 31px; }
.op-page .op-seat .op-card b { font-size: 11px; }
.op-page .op-seat .op-card i { font-size: 13px; }
.op-page .op-seat:not(.op-seat-0).has-visible-cards .op-card { width: 28px; height: 39px; }
.op-page .op-seat:not(.op-seat-0).has-visible-cards .op-card-row { top: 0; }
.op-page .op-seat:not(.op-seat-0).has-visible-cards .op-card b { font-size: 15px; }
.op-page .op-seat:not(.op-seat-0).has-visible-cards .op-card i { font-size: 19px; }
.op-page .op-seat .op-badge,
.op-page .op-seat:not(.op-seat-0).has-visible-cards .op-badge {
  top: 80px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 3px;
  height: 28px;
  min-height: 28px;
  padding: 0 2px;
  border-radius: 5px;
  background: #10231ee8;
  color: #f7e7be;
  font-size: 10px;
  line-height: 14px;
  white-space: normal;
  overflow-wrap: normal;
  text-shadow: none;
}
.op-page .op-seat .op-badge:empty { visibility: hidden; }
.op-page .op-action-label,
.op-page .op-action-amount { white-space: nowrap; }
.op-page .op-seat .op-streetbet,
.op-page .op-seat.has-visible-cards .op-streetbet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  top: 112px;
  left: calc(50% - var(--op-chip-width) / 2);
  right: auto;
  width: var(--op-chip-width);
  height: 20px;
  min-height: 20px;
  padding: 0 2px;
  border: 1px solid #ac9a6366;
  border-radius: 10px;
  background: #183326ed;
  color: #f6df9f;
  font-size: 9px;
  line-height: 10px;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: none;
  z-index: 3;
}
.op-page .op-seat .op-streetbet:empty,
.op-page .op-seat .op-streetbet.is-empty { display: none; }
.op-page .op-chip-amount { white-space: nowrap; }
.op-page .op-seat.op-seat-1 .op-streetbet,
.op-page .op-seat.op-seat-2 .op-streetbet {
  left: var(--op-chip-offset);
  right: auto;
}
.op-page .op-seat.op-seat-4 .op-streetbet,
.op-page .op-seat.op-seat-5 .op-streetbet {
  left: auto;
  right: var(--op-chip-offset);
}
.op-page .op-seat.op-seat-2 .op-streetbet,
.op-page .op-seat.op-seat-4 .op-streetbet { top: 98px; }
.op-page .op-seat.op-seat-1 .op-streetbet,
.op-page .op-seat.op-seat-5 .op-streetbet { top: 18px; }
.op-page .op-seat.is-folded .op-player-info,
.op-page .op-seat.is-folded .op-avatar,
.op-page .op-seat.is-folded .op-card-row { filter: grayscale(1) brightness(.6); opacity: .52; }
.op-page .op-seat.is-folded .op-badge {
  color: #e4e7e6;
  background: #252d31;
  border: 1px solid #87908b;
  opacity: 1;
  filter: none;
}
.op-page .op-seat.is-winner .op-player-info { border-color: #f4d48d; box-shadow: 0 0 0 2px #f4d48d33; }
.op-page .op-seat .op-seat-award { color: #fff0ba; background: #425332; }
.op-page .op-seat-0 { left: 50%; bottom: 12px; width: 142px; height: 148px; }
.op-page .op-seat-0 .op-card-row { top: 0; }
.op-page .op-seat-0 .op-card { width: 51px; height: 72px; }
.op-page .op-seat-0 .op-card b { font-size: 23px; }
.op-page .op-seat-0 .op-card i { font-size: 27px; }
.op-page .op-seat.op-seat-0 .op-player-info { top: 80px; min-height: 36px; }
.op-page .op-seat-0 .op-stack { font-size: 13px; line-height: 18px; }
.op-page .op-seat-0 .op-seat-name { height: 12px; line-height: 12px; }
.op-page .op-seat-0 .op-badge { top: 120px; font-size: 11px; line-height: 14px; }
.op-page .op-seat.op-seat-0 .op-streetbet { top: -28px; font-size: 9px; }
.op-page .op-community { top: 136px; width: 100%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.op-page .op-community .op-pot {
  display: inline-flex;
  flex: none;
  height: 22px;
  min-height: 22px;
  line-height: 16px;
  margin: 0 0 30px;
  padding: 3px 10px;
  font-size: 10px;
}
.op-page .op-community .op-pot strong { font-size: 17px; }
.op-page .op-community .op-card { width: 42px; height: 58px; }
.op-page .op-community .op-card b { font-size: 20px; }
.op-page .op-community .op-card i { font-size: 24px; }
.op-page .op-community .op-street,
.op-page .op-community .op-settlement-label {
  width: 112px;
  min-height: 14px;
  margin: 4px auto 0;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  color: #d2ddce;
}
/* Restored three-seat sessions keep their original seat count. */
.op-page .op-table[data-seats="3"] .op-seat-1 { left: calc(var(--op-seat-width) / 2); top: 62px; }
.op-page .op-table[data-seats="3"] .op-seat-2 { left: calc(100% - var(--op-seat-width) / 2); top: 62px; }
.op-page .op-table[data-seats="3"] .op-seat-1 .op-streetbet { top: 98px; }
.op-page .op-table[data-seats="3"] .op-seat-2 .op-streetbet { left: auto; right: var(--op-chip-offset); top: 98px; }
.op-page .op-table[data-seats="3"] .op-community { top: 136px; }
.op-page .op-table[data-seats="3"] {
  --op-chip-1-y: 170px;
  --op-chip-2-x: calc(100% - 138px);
  --op-chip-2-y: 170px;
}
/* Main actions sit nearest the table; amount tools remain the same controls. */
body.pg-game-page.op-page .op-dock {
  padding: 8px 6px max(10px, env(safe-area-inset-bottom));
  overflow: visible;
  box-shadow: none;
}
.op-page .op-turnbar { min-height: 22px; margin-bottom: 4px; }
.op-page #opTurn { font-size: 12px; color: #ffe3a6; }
.op-page #opHeld { font-size: 11px; color: #cfdbce; }
.op-page #opHandActions {
  display: grid;
  grid-template-columns: minmax(88px, .85fr) minmax(0, 2fr);
  column-gap: 8px;
  row-gap: 6px;
}
.op-page .op-main-actions { grid-column: 1 / -1; grid-row: 1; gap: 8px; }
body.pg-game-page.op-page .op-main-actions .button { height: 48px; min-height: 48px; font-size: 12px; }
.op-page .op-betline { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.op-page .op-raise-readout { grid-column: 1 / -1; grid-row: 3; min-height: 18px; padding-top: 0; font-size: 10px; }
.op-page .op-stepper { height: 46px; }
.op-page .op-stepper button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.op-page .op-stepper input { height: 44px; font-size: 16px; }
.op-page .op-allin { min-width: 96px; min-height: 46px; height: 46px; font-size: 10px; }
.op-page .op-bet-slider { grid-column: 1; grid-row: 4; height: 44px; min-height: 44px; }
body.pg-game-page.op-page .op-presets { grid-column: 2; grid-row: 4; gap: 4px; margin: 0; }
.op-page .op-presets .button { min-height: 44px; min-width: 44px; font-size: 10px; padding: 3px 1px; }
.op-page .op-presets small { font-size: 9px; line-height: 12px; overflow-wrap: anywhere; }
.op-page #opHandActions button:disabled { opacity: .62; }
.op-page #opHandActions input:disabled { opacity: .7; }
.op-page #opResult { min-height: 0; }
.op-page #opResult .op-payout-summary { min-width: 0; color: #e3e9de; font-size: 11px; line-height: 17px; text-align: left; }
@media (max-width: 360px) {
  .op-page .op-table {
    --op-seat-width: 86px;
    --op-chip-width: 64px;
    --op-chip-offset: 90px;
    --op-chip-1-x: 122px;
    --op-chip-2-x: 122px;
    --op-chip-4-x: calc(100% - 122px);
    --op-chip-5-x: calc(100% - 122px);
  }
  .op-page .op-seat .op-streetbet { font-size: 9px; letter-spacing: -.2px; }
  .op-page #opHandActions { grid-template-columns: minmax(74px, .7fr) minmax(0, 2fr); column-gap: 6px; }
  .op-page .op-betline { gap: 5px; }
  .op-page .op-allin { min-width: 88px; }
  .op-page .op-table[data-seats="3"] { --op-chip-2-x: calc(100% - 122px); }
}
/* The board retains readable content dimensions while the stage is a viewport.
 * svh reserves space for expanded mobile browser bars even when the layout
 * viewport's media-query height is larger. No control overlays the table.
 * Fixed control overhead includes the existing 72px topbar, two 3px gaps,
 * dock border/padding, turn row, and the unchanged 48px primary actions. */
@media (min-width: 361px) {
  body.pg-game-page.op-page > .op-app {
    --op-board-height: 488px;
    --op-controls-height: 161px;
  }
  body.pg-game-page.op-page .op-stage {
    flex: 0 0 auto;
    height: min(var(--op-board-height), max(0px, calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--op-controls-height))));
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  body.pg-game-page.op-page .op-stage::-webkit-scrollbar { display: none; }
  body.pg-game-page.op-page #opBoard {
    height: var(--op-board-height);
    min-height: var(--op-board-height);
  }
}
/* Compact landscape-height / short phone viewport, not a scaled table.
 * At 375/390 x 667 with safe top 47px and bottom 34px:
 * main-action bottom = 47+72+436+6+1+4+18+48 = 632px <= 633px.
 * Three top seats end at y108; their chips occupy y112–132.
 * Pot136–158, board166–224, street228–242; three bottom chip slots248–268.
 * Lower CPUs start at272; own cards276–about352, info356–392,
 * action396–424. Dock starts439: 15px clear, with fonts and taps unchanged.
 */
@media (min-width: 361px) and (max-height: 700px) {
  body.pg-game-page.op-page > .op-app {
    --op-board-height: 436px;
    --op-controls-height: 149px;
  }
  .op-page .op-seat-2,
  .op-page .op-seat-4 { top: 0; }
  .op-page .op-seat-1,
  .op-page .op-seat-5 { top: 272px; }
  .op-page .op-table {
    --op-chip-offset: 16px;
    --op-chip-0-y: 258px;
    --op-chip-1-x: calc(var(--op-chip-offset) + var(--op-chip-width) / 2);
    --op-chip-1-y: 258px;
    --op-chip-2-x: calc(var(--op-chip-offset) + var(--op-chip-width) / 2);
    --op-chip-2-y: 122px;
    --op-chip-4-x: calc(100% - var(--op-chip-offset) - var(--op-chip-width) / 2);
    --op-chip-4-y: 122px;
    --op-chip-5-x: calc(100% - var(--op-chip-offset) - var(--op-chip-width) / 2);
    --op-chip-5-y: 258px;
  }
  .op-page .op-seat.op-seat-2 .op-streetbet,
  .op-page .op-seat.op-seat-4 .op-streetbet { top: 112px; }
  .op-page .op-seat.op-seat-1 .op-streetbet,
  .op-page .op-seat.op-seat-5 .op-streetbet { top: -24px; }
  .op-page .op-community .op-pot { margin-bottom: 8px; }
  .op-page .op-table[data-seats="3"] {
    --op-chip-1-y: 122px;
    --op-chip-2-x: calc(100% - var(--op-chip-offset) - var(--op-chip-width) / 2);
    --op-chip-2-y: 122px;
  }
  .op-page .op-table[data-seats="3"] .op-seat-1,
  .op-page .op-table[data-seats="3"] .op-seat-2 { top: 0; }
  .op-page .op-table[data-seats="3"] .op-seat-1 .op-streetbet,
  .op-page .op-table[data-seats="3"] .op-seat-2 .op-streetbet { top: 112px; }
  body.pg-game-page.op-page .op-dock { padding-top: 4px; }
  .op-page .op-turnbar { min-height: 18px; line-height: 18px; margin-bottom: 0; }
}
/* Very short phones: keep every card, name, stack and action at full size.
 * Names sit beside the cards; decorative duplicate avatars and the table
 * watermark are omitted so they cannot sit behind the Pot or street labels.
 * Top CPUs: cards/name 0–39, stack 42–59, action 61–89, chips 93–113.
 * Pot/street share 117–139; community cards 143–201; lower chips 205–225.
 * Lower CPUs start at 229. Hero cards 229–about305, stack 305–323,
 * action 325–353; board 365 then dock 368 keeps a 15px action/dock gap.
 * At 600px + safe 47/34 the complete board fits and primary bottom is 561px.
 * At lower svh the stage scrolls; primary controls remain in normal flow.
 */
@media (min-width: 361px) and (max-height: 600px) {
  body.pg-game-page.op-page > .op-app { --op-board-height: 365px; }
  .op-page .op-table {
    --op-pot-x: calc(50% - 87px);
    --op-pot-y: 128px;
    --op-chip-0-y: 215px;
    --op-chip-1-y: 215px;
    --op-chip-2-y: 103px;
    --op-chip-3-y: 103px;
    --op-chip-4-y: 103px;
    --op-chip-5-y: 215px;
  }
  .op-page .op-table-brand { display: none; }
  .op-page .op-seat .op-avatar { display: none; }
  .op-page .op-seat .op-card-row,
  .op-page .op-seat:not(.op-seat-0).has-visible-cards .op-card-row {
    top: 0;
    left: 0;
    right: auto;
    width: 59px;
    justify-content: center;
    gap: 3px;
    transform: none;
  }
  .op-page .op-seat .op-player-info,
  .op-page .op-seat.has-visible-cards .op-player-info {
    top: 0;
    left: 62px;
    right: 0;
    height: 39px;
    min-height: 39px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .op-page .op-seat .op-seat-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 39px;
    white-space: normal;
  }
  .op-page .op-seat .op-position { display: block; margin-left: 0; }
  .op-page .op-seat .op-stack {
    position: absolute;
    top: 42px;
    left: -62px;
    width: 96px;
    height: 17px;
    border-radius: 4px;
    background: #15271fee;
  }
  .op-page .op-seat.is-winner .op-player-info,
  .op-page .op-seat.is-turn .op-player-info { box-shadow: none; }
  .op-page .op-seat.is-winner .op-stack { color: #fff0ba; background: #425332; }
  .op-page .op-seat.is-turn .op-stack { box-shadow: 0 0 0 1px #e3c483; }
  .op-page .op-seat .op-badge,
  .op-page .op-seat:not(.op-seat-0).has-visible-cards .op-badge { top: 61px; }
  .op-page .op-seat .op-streetbet,
  .op-page .op-seat.has-visible-cards .op-streetbet,
  .op-page .op-seat.op-seat-2 .op-streetbet,
  .op-page .op-seat.op-seat-4 .op-streetbet { top: 93px; }
  .op-page .op-seat-1,
  .op-page .op-seat-5 { top: 229px; }
  .op-page .op-seat.op-seat-1 .op-streetbet,
  .op-page .op-seat.op-seat-5 .op-streetbet { top: -24px; }
  .op-page .op-seat-0 { top: 229px; bottom: auto; height: 124px; }
  .op-page .op-seat-0 .op-card-row { width: 106px; gap: 4px; }
  .op-page .op-seat.op-seat-0 .op-player-info {
    top: 8px;
    left: 110px;
    right: 0;
    height: 26px;
    min-height: 26px;
  }
  .op-page .op-seat-0 .op-seat-name { height: 26px; }
  .op-page .op-seat-0 .op-stack { top: 68px; left: -110px; width: 142px; height: 18px; }
  .op-page .op-seat-0 .op-badge { top: 96px; }
  .op-page .op-seat.op-seat-0 .op-streetbet { top: -24px; }
  .op-page .op-community,
  .op-page .op-table[data-seats="3"] .op-community {
    top: 117px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 22px 58px;
    gap: 4px 8px;
  }
  .op-page .op-community .op-pot {
    grid-column: 1;
    grid-row: 1;
    width: 166px;
    margin: 0;
    padding: 3px 6px;
    gap: 5px;
    white-space: nowrap;
    justify-self: end;
    justify-content: center;
  }
  .op-page .op-community .op-street,
  .op-page .op-community .op-settlement-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    justify-self: start;
  }
  .op-page .op-community .op-card-row { grid-column: 1 / -1; grid-row: 2; }
  .op-page .op-table[data-seats="3"] {
    --op-chip-1-y: 103px;
    --op-chip-2-y: 103px;
  }
  .op-page .op-table[data-seats="3"] .op-seat-1,
  .op-page .op-table[data-seats="3"] .op-seat-2 { top: 0; }
  .op-page .op-table[data-seats="3"] .op-seat-1 .op-streetbet,
  .op-page .op-table[data-seats="3"] .op-seat-2 .op-streetbet { top: 93px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-page .op-seat, .op-page .op-streetbet, .op-page .op-badge { animation: none; transition: none; }
}