/* One mobile height budget. The complete player orbit is inside the stage;
   neither the header nor the action dock floats over it. Desktop is untouched. */
.mobile-table-links, .mobile-return-table, .mobile-community-cards, .mobile-hero-hand { display: none; }
.mobile-sound-toggle { display: none; }
@media (max-width: 899px) and (orientation: portrait) {
  .app-shell { --mobile-header-height: 54px; }
  .app-shell .topbar {
    position: relative; inset: auto; height: auto; min-height: 54px;
    padding: max(6px, env(safe-area-inset-top)) 12px 6px;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    grid-template-columns: minmax(0,1fr) 44px auto; gap: 6px;
  }
  .topbar .brand-block { min-width: 0; }
  .topbar .mobile-sound-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 44px; min-height: 44px; padding: 3px; border: 1px solid #8d7350; border-radius: 6px;
    background: #282219; color: #edcc96; font: 500 10px/1.2 system-ui, sans-serif;
  }
  .mobile-sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .mobile-sound-toggle[data-audio-status="ready"] { background: #17211b; border-color: #456650; color: #b6d0bd; }
  .mobile-sound-toggle[data-audio-status="off"] { background: #171717; border-color: #454545; color: #a0a0a0; }
  .mobile-sound-toggle[data-audio-status="off"] .sound-waves { opacity: .2; }
  .mobile-sound-toggle:focus-visible { outline: 2px solid #edcc96; outline-offset: 2px; }
  .topbar .brand-wordmark-image { width: 132px; max-width: 100%; height: auto; }
  .topbar .language-toggle { min-height: 40px; font-size: 12px; }
  .workspace { min-height: 0; padding: 0; }
  .workspace .play-column, .app-shell:has(.hand-summary:not([hidden])) .play-column {
    width: 100%; height: calc(var(--mobile-viewport-height, 100svh) - var(--mobile-header-height));
    min-height: 0; padding: 0; border: 0; overflow: visible;
    display: flex; flex-direction: column;
  }
  .play-column .table-stage, .app-shell:has(.hand-summary:not([hidden])) .table-stage {
    flex: 1 1 0; min-height: 0; width: 100%; padding: 0; overflow: hidden;
  }
  .table-scene {
    position: absolute; display: grid; place-items: center;
    left: 50%; top: 50%; width: 480px; height: 640px;
    transform: translate(-50%, -50%) rotate(90deg) scale(var(--mobile-scene-scale, .75));
    transform-origin: center;
  }
  .table-scene .poker-table, .is-depth-mode .table-scene .poker-table {
    width: 360px; height: 520px; min-width: 0; max-width: none;
    aspect-ratio: auto; transform: none;
    border-radius: 999px;
  }
  .table-scene .poker-table::after {
    inset: 26.28459% 32.65896%; width: auto; height: auto; border-radius: 999px; transform: none;
  }
  .table-scene .table-center { top: 50%; width: 60px; min-width: 0; }
  .table-scene .pot-display { min-width: 0; width: 60px; height: 30px; min-height: 0; margin: 0; transform: none; }
  .table-scene .pot-chip-rack {
    position: absolute; left: 50%; top: 50%; width: max-content; max-width: 60px;
    flex-wrap: wrap; gap: 3px; transform: translate(-50%, -50%) scale(var(--mobile-pot-scale, 1));
    transform-origin: center;
  }
  .table-scene .seat, .table-scene .seat.is-hero,
  .table-scene .seat .avatar, .table-scene .seat.is-hero .avatar { width: 42px; height: 42px; }
  .table-scene .seat .avatar { rotate: -90deg; }
  .table-scene .seat-rail-number, .table-scene .table-marker { transform: translate(-50%, -50%) rotate(-90deg); }
  .table-scene .seat[data-seat="2"], .table-scene .seat[data-seat="3"] { left: -26px; }
  .table-scene .seat[data-seat="7"], .table-scene .seat[data-seat="8"] { left: calc(100% + 26px); }
  /* Every seated player uses the same compact cards and seat-facing layout.
     The learner's larger readable copy remains in the separate action dock.
     Only a genuine showdown enlarges table cards, with space reserved ahead. */
  .table-scene .mini-card { width: 24px; height: 35px; border-radius: 3px; }
  .table-scene .hole-card-pair.is-showdown .mini-card { width: 36px; height: 52px; }
  .table-scene .mini-card-corner { min-width: 8px; font-size: 8px; line-height: 1; }
  .table-scene .mini-card-corner i { font-size: 6px; }
  .table-scene .mini-card-corner.is-top { top: 2px; left: 2px; }
  .table-scene .mini-card-corner.is-bottom { bottom: 2px; right: 2px; }
  .table-scene .mini-card-suit { font-size: 12px; }
  .table-scene .hole-card-pair.is-showdown .mini-card-corner { min-width: 11px; font-size: 13px; }
  .table-scene .hole-card-pair.is-showdown .mini-card-corner i { font-size: 10px; }
  .table-scene .hole-card-pair.is-showdown .mini-card-suit { font-size: 21px; }
  .table-scene .board { width: max-content; max-width: none; gap: 3px; }
  .table-scene .playing-card, .table-scene .card-slot { width: 34px; height: 49px; flex: 0 0 34px; }
  .table-scene .playing-card .card-corner { font-size: 12px; line-height: 1; }
  .table-scene .playing-card .card-corner i { font-size: 10px; }
  .table-scene .playing-card .suit-large { font-size: 20px; }
  .table-scene .seat-rail-number { font-size: 10px; }
  /* The dealer has a dedicated gap halfway down the left rail. Rotate the
     whole dealing station toward the felt, but keep the portrait upright. */
  .table-scene .poker-table::before { content: none; }
  .table-scene .dealer-station, .is-depth-mode .table-scene .dealer-station {
    left: -57px; top: calc(50% - 11px); width: 56px; height: 56px; margin-left: 0;
    transform: translateY(-50%) rotate(-90deg);
  }
  .table-scene .dealer-avatar { width: 54px; height: 54px; margin: 0; border-width: 2px; transform: none; }
  .table-scene .dealer-station::before { right: -2px; bottom: -12px; width: 17px; height: 24px; border-width: 1px; }
  .table-scene .dealer-chip-tray { top: 60px; width: 48px; height: 18px; padding: 2px; }
  .table-scene .dealer-hand { top: 42px; width: 12px; height: 48px; }
  .table-scene .wager-chip-rack[data-seat] {
    display: grid; grid-template-columns: repeat(2, max-content); gap: 3px;
    width: max-content; min-width: 0; min-height: 0;
    transform: translate(-50%, -50%) scale(var(--rack-scale, 1)); transform-origin: center;
  }
  .table-scene .wager-chip-rack .chip-pile { position: relative; left: auto; top: auto; }
  /* Measured chip bounds must match the painted bounds. Stack layers remain
     readable, but random token drift cannot cross a neighboring lane/rail. */
  #stack-layer > .player-chip-rack {
    width: max-content; min-width: 0; max-width: none; min-height: 0;
    gap: 3px; align-items: flex-end; right: auto; bottom: auto;
    transform: translate(-50%, -50%) rotate(var(--rack-rotation)) scale(var(--rack-scale, 1));
    transform-origin: center;
  }
  #stack-layer .chip-pile {
    flex: 0 0 14px; width: 14px;
    height: calc(7px + (var(--chip-count) - 1) * 2.5px); transform: none;
  }
  #stack-layer .chip-token {
    width: 14px; height: 7px; bottom: calc(var(--chip-index) * 2.5px); transform: none;
  }
  #stack-layer .chip-pile.is-10000 {
    flex-basis: 18px; width: 18px; height: calc(9px + (var(--chip-count) - 1) * 2.5px);
  }
  #stack-layer .chip-pile.is-10000 .chip-token { width: 18px; height: 9px; }
  .play-column .action-dock, .app-shell:has(.hand-summary:not([hidden])) .action-dock {
    position: relative; inset: auto; z-index: 2; flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; min-height: 0; margin: 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid #39272a; background: #0d0e0d; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .action-dock .action-controls { gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); }
  /* A readable copy of the learner's cards sits beside the actions, without
     making an extra full-width row or changing anyone's physical table seat. */
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) {
    grid-template-columns: 85px repeat(4,minmax(0,1fr)); gap: 6px; align-items: center;
  }
  .mobile-hero-hand:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    grid-column: 1; grid-row: 1; width: 85px;
  }
  .mobile-hero-hand[hidden] { display: none; }
  .mobile-hero-label { color: #aaa99f; font-size: 10px; line-height: 12px; }
  .mobile-hero-cards { display: flex; gap: 5px; }
  .mobile-hero-cards .playing-card {
    width: 40px; height: 58px; flex: 0 0 40px; border-radius: 4px;
  }
  .mobile-hero-cards .card-corner { font-size: 15px; line-height: 1; }
  .mobile-hero-cards .card-corner i { font-size: 10px; }
  .mobile-hero-cards .suit-large { font-size: 23px; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) .action-fold { grid-column: 2; grid-row: 1; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) [data-action="check"] { grid-column: 3; grid-row: 1; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) [data-action="call"] { grid-column: 4; grid-row: 1; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) .action-allin { grid-column: 5; grid-row: 1; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) .action-button {
    width: 46px; height: 46px; min-height: 46px;
  }
  .mobile-community-cards { display: flex; justify-content: center; width: 100%; padding: 0 0 5px; }
  .mobile-community-cards:has(.board:empty) { display: none; }
  .mobile-community-cards .board { min-height: 54px; width: auto; max-width: none; gap: 6px; }
  .mobile-community-cards .playing-card, .mobile-community-cards .card-slot {
    width: 38px; height: 54px; flex: 0 0 38px; border-radius: 4px;
  }
  .mobile-community-cards .playing-card .card-corner { font-size: 13px; line-height: 1; }
  .mobile-community-cards .playing-card .card-corner i { font-size: 10px; }
  .mobile-community-cards .playing-card .suit-large { font-size: 22px; }
  .action-dock .action-button, .action-dock .action-passive {
    width: 54px; height: 54px; min-height: 54px; padding: 4px;
  }
  .action-dock .action-button strong { font-size: 12px; line-height: 1.25; }
  .action-dock .action-button span { font-size: 10px; }
  .action-dock .custom-sizing { margin: 0; }
  .action-dock .sizing-row { grid-template-columns: minmax(0,1fr) 78px 56px; gap: 8px; }
  .action-dock .sizing-row input { width: 100%; min-width: 0; }
  .action-dock .bet-number { font-size: 16px; height: 42px; }
  .action-dock .sizing-row button { min-height: 42px; }
  .mobile-table-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; }
  .mobile-table-links button {
    min-height: 36px; padding: 6px 3px; border: 1px solid #32352e; border-radius: 5px;
    background: #161915; color: #b8bfb0; font-size: 11px; line-height: 1.4;
  }
  .mobile-table-links button.is-needed { border-color: #927447; color: #efcf9b; background: #262219; }
  .mobile-table-links button:active, .mobile-return-table:active { background: #303427; }
  .mobile-table-links button:focus-visible, .mobile-return-table:focus-visible { outline: 2px solid #dec395; outline-offset: 2px; }
  .mobile-return-table {
    display: block; margin: 0 0 12px auto; min-height: 36px; padding: 7px 12px;
    border: 1px solid #414638; border-radius: 5px; background: #1c2018; color: #d2d8c8; font-size: 12px;
  }
  .coach-panel > .mobile-return-table { margin: 12px 12px 12px auto; }
  .checkpoint-rail, .coach-panel { scroll-margin-top: 12px; }
}