/* The shell owns the viewport. Neither seats nor the current hand set arena height. */
#poker-table{
  max-width: 1680px;
  --table-actions-size: 176px;
  /* Three side rows reserve the plaque, back cards and the larger own hand. */
  --rotated-dense-surface: calc(300px + clamp(34px, 10vw, 42px) * 4.32);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-top: max(5px, env(safe-area-inset-top, 0px));
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}

/* Notices and quick table navigation take their real height from this same budget. */
#poker-table > :is([data-table-switcher], .notice){ flex: none; }
#poker-table .table-layout{ flex: 1 1 0; min-height: 0; align-items: stretch; }
#poker-table .table-stage{ display: contents; }
#poker-table .game-area{
  flex: 1;
  height: auto;
  min-height: 0;
  align-self: stretch;
}
#poker-table .poker-arena,#poker-table .poker-arena[data-size]{
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  margin-block: 0;
}
#poker-table .action-panel{
  flex: 0 0 auto;
  height: auto;
  min-height: var(--table-actions-size);
  overflow: visible;
}
#poker-table .connection-login{
  min-height: 44px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
/* Empty-seat targets must not paint over cards from an occupied neighbour. */
#poker-table .player-seat:not(.empty){ z-index: 1; }

/* A wide, short window needs a narrower oval, not a stretched playing surface.
   The container is the actual space left after header, notices and table tabs. */
@media (min-width: 721px) and (min-height: 501px) and (orientation: landscape) {
  #poker-table .table-stage{
    display: block;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    container: table-surface / size;
  }
  #poker-table .poker-arena,#poker-table .poker-arena[data-size]{
    width: min(100%, calc((100cqh - 60px) * 2.5 + 104px));
    height: 100%;
    max-width: 1280px;
  }
  #poker-table .poker-felt{ inset-block: 30px; }
  #poker-table .table-center{ top: 50%; }
  #poker-table .action-panel{ width: 100%; }
  #poker-table .poker-arena[data-size="6"] .seat-4,#poker-table .poker-arena[data-size="9"] :is(.seat-5, .seat-6){ top: max(20%, 60px); }
  @container table-surface (max-height: 360px) {
    #poker-table .table-center{ top: 44%; }
    #poker-table :is(.table-wordmark, .table-brand-logo){ visibility: hidden; }
  }
  @container table-surface (max-height: 300px) {
    #poker-table .table-center{ top: 40%; }
  }

  /* Actions always follow the playing surface. On short desktop windows the
     shell can scroll navigation away instead of moving actions to a side rail.
     Reserve their actual track height before choosing the minimum arena. */
  #poker-table{ overflow-y: auto; overflow-x: hidden; }
  #poker-table .table-layout{ flex: 1 0 auto; min-height: min-content; }
  #poker-table .table-stage{ min-height: 370px; }
}

@media (max-width: 720px) {
  #poker-table{
    --table-actions-size: 200px;
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
  }
}

/* Reduce control spacing, not cards, when browser chrome leaves little height. */
@media (max-width: 720px) and (max-height: 650px) and (orientation: portrait) {
  #poker-table { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  #poker-table .table-layout { min-height: calc(330px + var(--table-actions-size)); }
  #poker-table .action-panel{ padding: 4px 8px; }
  #poker-table .table-wordmark{ display: none; }
  #poker-table .poker-felt{ inset-block: 30px 20px; }
  #poker-table .poker-arena[data-size="6"] .seat-4{ top: 20%; }
  #poker-table .poker-arena[data-size="6"] :is(.seat-2, .seat-6):not(.is-you) .seat-cards{
    top: calc(100% + 4px);
    bottom: auto;
  }
  #poker-table .poker-arena[data-size="9"] :is(.seat-5, .seat-6){ top: max(19%, 60px); }
  #poker-table .poker-arena[data-size="9"] :is(.seat-4, .seat-7){ top: 40%; }
  #poker-table .poker-arena[data-size="9"] :is(.seat-3, .seat-8){ top: 64%; }
  #poker-table .poker-arena[data-size="9"] :is(.seat-2, .seat-9){ top: 86%; }
  #poker-table .poker-arena[data-size="9"] .player-seat:not(.is-you) .seat-cards{ bottom: calc(100% + 4px); }
  #poker-table .poker-arena .is-you.seat-1{ width: 106px; padding-left: 33px !important; }
  #poker-table .poker-arena .is-you.seat-1 .player-avatar{ top: 4px; left: 17px; }
  #poker-table .poker-arena .is-you.seat-1 .seat-cards{
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
  }
}

/* Landscape keeps the same table-then-actions order. The shell scrolls when
   readable seats and touch controls require more height than the device offers. */
@media (max-height: 500px) and (orientation: landscape) {
  #poker-table{
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  #poker-table{ --table-actions-size:176px; overflow-y:auto; overflow-x:hidden; }
  #poker-table .table-layout{ flex:1 0 auto; min-height:calc(288px + var(--table-actions-size)); }
  #poker-table .poker-arena,#poker-table .poker-arena[data-size]{ height:auto; min-height:288px; max-width:680px; }
  #poker-table .action-panel{ height: auto; padding: 5px 8px; }

  #poker-table .poker-arena[data-size="9"] :is(.seat-5, .seat-6){ top: max(20%, 60px); }
  #poker-table .poker-arena[data-size="9"] .is-you.seat-1 .seat-cards{
    left: calc(50% + var(--avatar) / 2 + 6px);
    bottom: calc(100% - 3px);
    transform: none;
  }
}

/* A mobile seat is one bounded component: identity and balance in the plaque,
   with its wager and card backs directly below. This leaves the center lane
   free instead of stacking large avatars/cards between percentage-based rows. */
#poker-table .poker-arena[data-mobile-layout="true"][data-size]{
  --seat-w: var(--mobile-seat, 76px);
  --avatar: 20px;
  --board: var(--mobile-board, 26px);
  --hole: 15px;
  --hero: clamp(34px, 10vw, 42px);
  --mobile-footer: 82px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat{
  width: var(--seat-w);
  min-height: 36px;
  height: 36px;
  padding: 3px 3px 2px 24px !important;
  transform: translateX(-50%);
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat .player-avatar{
  left: 13px;
  top: 3px;
}
/* Keep a full touch target over the owner's plaque, with the portrait compact. */
/* Resolve hit areas from the viewport even before the first scene measurement.
   Chromium can retain a pseudo-element's desktop inset after a data toggle. */
@media (max-width:720px), (max-width:1100px) and (max-height:500px) and (orientation:landscape){
  #poker-table .poker-arena:is([data-size="6"],[data-size="8"],[data-size="9"]) .player-avatar::before{
    inset: -8px auto auto -4px; width: 44px; height: 44px; border-radius: 6px;
  }
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-name{ font-size: 9px; line-height: 11px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-stack{ font-size: 10px; line-height: 12px; margin-top: 0; padding:0 2px; letter-spacing: -.3px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-tag{ font-size: 8px; line-height: 9px; margin-top: 0; padding-left: 3px; white-space: nowrap; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-name[data-blind]:not([data-blind=""]){ padding-right: 0; margin-right: 0; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-position{
  top: 25px; left: 3px; right: auto; width: 19px; height: 10px; font-size: 7px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:not(.is-you) .seat-cards{
  top: calc(100% + 3px); bottom: auto; left: auto; right: 1px;
  transform: none; gap: 2px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-cards .ultra-card + .ultra-card{ margin-left: -3px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet{
  left: 1px; right: auto; top: calc(100% + 6px); bottom: auto;
  transform: none; padding: 1px 2px; font-size: 8px; line-height: 12px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .bet-chips{ display: inline-flex; width:8px; flex:none; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-stack{ min-width:0; width:8px; height:8px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-pile{ flex-basis:8px; height:8px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-pile ~ .chip-pile,#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-value{ display:none; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-disc{ width:8px; height:5px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-disc:nth-child(2){ bottom:1px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-bet .chip-disc:nth-child(3){ bottom:2px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-victory .winner-trophy{ width:9px; height:9px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-clock{
  top: 25px; left: 2px; right: auto; bottom: auto; transform: none;
  width: 24px; min-width: 24px; height: 10px; padding: 0; font-size: 7px; border-radius: 3px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-turn .seat-position{ left: 27px; top: 25px; width: 17px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-turn:has(.seat-position:not([hidden])) .seat-tag{ padding-left: 21px; font-size: 7px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .dealer-chip{
  left: 0; right: auto; top: -13px; bottom: auto; transform: none;
  width: 12px; height: 12px; font-size: 7px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you .seat-cards{
  left: 50%; right: auto; top: auto; bottom: calc(100% + 8px);
  transform: translateX(-50%); gap: 3px;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you .seat-cards .ultra-card{ margin-left: 0; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you .seat-cards .ultra-card + .ultra-card{ margin-left: -5px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-1{ top: calc(100% - var(--mobile-footer)); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1{ width: 108px; height: 42px; top: calc(100% - 47px); padding-left: 30px !important; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 .player-avatar{ --avatar:24px; left:15px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 .seat-name{ font-size:10px; line-height:12px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 .seat-stack:not([data-wide="true"]){ font-size:12px; line-height:14px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 :is(.seat-position,.seat-clock){ top:29px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 .seat-bet{ top: auto; bottom: calc(100% + var(--hero) * 1.44 + 14px); left: 50%; transform: translateX(-50%); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you.seat-1 .dealer-chip{ left: 5px; top: -16px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .table-center{ top: 45%; width: calc(100% - 2 * var(--seat-w) - 24px); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] :is(.table-wordmark,.table-brand-logo){ display: none; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] #hand-stage{ font-size: 8px; margin: 0 0 5px; letter-spacing: .5px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .board{ gap: 3px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display{ margin-top: 6px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display > .chip-stack{ display: inline-flex; min-width: 12px; width: 12px; height: 12px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display .chip-pile{ flex-basis:12px; height:12px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display :is(.chip-value,.chip-pile ~ .chip-pile){ display:none; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display .chip-disc{ width:12px; height:7px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .pot-display strong{ font-size: 13px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat.empty{ padding: 3px !important; min-height: 44px; height: 44px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat.empty .seat-plus{ font-size: 16px; margin-bottom: 2px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-5,.seat-6){ top: 4px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-4,.seat-7){ top: calc((100% - var(--mobile-footer)) / 3); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-3,.seat-8){ top: calc((100% - var(--mobile-footer)) * 2 / 3); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-2,.seat-9){ top: calc(100% - var(--mobile-footer)); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-2,.seat-3,.seat-4){ --seat-x: 0%; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="9"] :is(.seat-7,.seat-8,.seat-9){ --seat-x: 100%; }
/* Eight players need one top seat and three rows on each side. Desktop's
   three top seats cannot share the central card lane on a narrow phone. */
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] .seat-5{ --seat-x: 50%; top: 4px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] .seat-5 .seat-bet{ left: -5px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] :is(.seat-4,.seat-6){ top: calc((100% - var(--mobile-footer)) / 3); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] :is(.seat-3,.seat-7){ top: calc((100% - var(--mobile-footer)) * 2 / 3); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] :is(.seat-2,.seat-8){ top: calc(100% - var(--mobile-footer)); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] :is(.seat-2,.seat-3,.seat-4){ --seat-x: 0%; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="8"] :is(.seat-6,.seat-7,.seat-8){ --seat-x: 100%; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] .seat-4{ top: 4px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] .seat-4 .seat-bet{ left: -5px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] :is(.seat-3,.seat-5){ top: 28%; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] :is(.seat-2,.seat-6){ top: calc(100% - var(--mobile-footer) - 4px); }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] :is(.seat-2,.seat-3){ --seat-x: 0%; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size][data-size="6"] :is(.seat-5,.seat-6){ --seat-x: 100%; }

/* Long balances use the plaque's full width; the complete amount stays visible. */
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-stack[data-wide="true"]{
  position: absolute; left: 2px; right: 2px; top: 24px; white-space: nowrap;
  line-height: 10px; margin: 0;
}
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .seat-stack[data-wide="true"] :is(.stack-currency,.stack-amount){ display: inline; font-size: 8.5px; line-height: 10px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:has(.seat-stack[data-wide="true"]) .seat-position{ top: 3px; right: 2px; left: auto; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-you:has(.seat-stack[data-wide="true"]) .player-avatar{ --avatar:20px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:has(.seat-stack[data-wide="true"]) .seat-name[data-blind]:not([data-blind=""]){ padding-right: 0; margin-right: 20px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:has(.seat-stack[data-wide="true"]) .seat-clock{ top: 14px; right: 2px; left: auto; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .is-turn:has(.seat-stack[data-wide="true"]) .seat-tag{ padding-left: 0; padding-right: 25px; font-size: 7px; }

/* Authorized showdown cards need readable faces, unlike the small card backs. */
#poker-table .poker-arena[data-mobile-layout="true"][data-size]:has(.player-seat:not(.is-you) .ultra-card:not(.card-hidden)){ --mobile-footer: 88px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:not(.is-you) .ultra-card:not(.card-hidden){ --card-w: 24px; }
#poker-table .poker-arena[data-mobile-layout="true"][data-size] .player-seat:not(.is-you) .seat-cards:has(.ultra-card:not(.card-hidden)) .ultra-card + .ultra-card{ margin-left: 0; }

@media (max-height: 500px) and (orientation: landscape) {
  #poker-table:has(.poker-arena[data-mobile-layout="true"]){ overflow-y:auto; overflow-x:hidden; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"]) .table-layout{ flex:1 0 auto; min-height:calc(288px + var(--table-actions-size)); }
  #poker-table:has(.poker-arena[data-mobile-layout="true"]) .game-area{overflow:visible;}
  #poker-table:has(.poker-arena[data-mobile-layout="true"]) .action-panel{align-self:stretch;height:auto;overflow:visible;}
}

/* Navigation can scroll away on short landscape windows. */
@media (max-width: 1100px) and (max-height: 350px) and (orientation: landscape) {
  #poker-table:has(.poker-arena[data-mobile-layout="true"]){ overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"]) .table-layout{ flex: 1 0 auto; min-height: calc(288px + var(--table-actions-size)); }
}

/* Rotating full-face cards into a side row needs more vertical room than the
   back-card footer. Only cramped mobile layouts scroll; the unrotated view
   keeps its original viewport budget. */
@media (max-width: 720px) and (orientation: portrait) {
  #poker-table { overflow-y: auto; overflow-x: hidden; }
  #poker-table .table-layout { flex: 1 0 auto; min-height: min-content; }
  #poker-table .game-area { height: auto; }
  #poker-table .poker-arena[data-size] { min-height: 330px; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .player-seat:not(.is-you) .ultra-card:not(.card-hidden)){ overflow-y: auto; overflow-x: hidden; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .player-seat:not(.is-you) .ultra-card:not(.card-hidden)) .table-layout{ min-height: calc(330px + var(--table-actions-size)); }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .is-you:not(.seat-1)){ overflow-y: auto; overflow-x: hidden; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .is-you:not(.seat-1)) .table-layout{ min-height: calc(390px + var(--table-actions-size)); }
  #poker-table:has(.poker-arena[data-mobile-layout="true"]:is([data-size="8"],[data-size="9"]) .is-you:not(.seat-1)) .table-layout{ min-height: calc(var(--rotated-dense-surface) + var(--table-actions-size)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .player-seat:not(.is-you) .ultra-card:not(.card-hidden)){ overflow-y: auto; overflow-x: hidden; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .player-seat:not(.is-you) .ultra-card:not(.card-hidden)) .table-layout{ min-height: calc(330px + var(--table-actions-size)); }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .is-you:not(.seat-1)){ overflow-y: auto; overflow-x: hidden; }
  #poker-table:has(.poker-arena[data-mobile-layout="true"] .is-you:not(.seat-1)) .table-layout{ min-height: calc(390px + var(--table-actions-size)); }
  #poker-table:has(.poker-arena[data-mobile-layout="true"]:is([data-size="8"],[data-size="9"]) .is-you:not(.seat-1)) .table-layout{ min-height: calc(var(--rotated-dense-surface) + var(--table-actions-size)); }
}