/* Table first, controls second, study on demand. The compact workspace also
   covers foldable inner displays and split windows, not just small phones. */
:root { --ui-gold: #cfb47d; --ui-line: #303831; --ui-panel: #141a17; }
.table-top-nav { display: none; }
.action-controls, .session-metrics, .feedback-score { font-variant-numeric: tabular-nums; }
button, input, summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline-color: var(--ui-gold); }

@media (max-width: 1399px), (max-height: 599px) {
  html { background: #0c1210; }
  body { background: #0c1210; }
  .app-shell { width: 100%; min-height: 0; --mobile-header-height: 60px; }
  .app-shell .topbar {
    position: relative; inset: auto; width: 100%; height: auto; min-height: 60px;
    display: grid; grid-template-columns: minmax(0,1fr) auto 48px auto;
    gap: 12px; padding: max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
    background: #101713; border-bottom: 1px solid #2e3730;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .topbar .brand-block { min-width: 0; }
  .topbar .brand-wordmark-image { width: 160px; max-width: 100%; height: auto; }
  .table-top-nav { display: flex; gap: 4px; }
  .table-top-nav button {
    min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: #bdc7bc; font-size: 14px; font-weight: 500;
  }
  .table-top-nav button:hover { background: #212d24; }
  .table-top-nav button.is-active { border-color: #746240; color: #f1d59d; background: #302a1f; }
  .app-shell .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 #6f654e; border-radius: 9px;
    background: #28271d; color: #dfc78e; font: 500 10px/1.2 var(--font-ui);
  }
  .mobile-sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .mobile-sound-toggle[data-audio-status="ready"] { background: #1b2c22; border-color: #476250; color: #b9cfbe; }
  .mobile-sound-toggle[data-audio-status="off"] { background: #171d18; border-color: #384339; color: #a7b2a4; }
  .topbar .language-toggle { min-height: 44px; border-color: #384339; border-radius: 9px; background: #18201a; font-size: 12px; }
  .app-shell .workspace {
    display: block; width: 100%; height: auto; min-height: 0; padding: 0;
    overflow: visible; background: #0c1210;
  }
  .workspace .play-column, .app-shell:has(.hand-summary:not([hidden])) .play-column {
    display: flex; flex-direction: column; width: 100%;
    height: calc(var(--mobile-viewport-height,100svh) - var(--mobile-header-height));
    min-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden;
  }
  .play-column .table-stage, .app-shell:has(.hand-summary:not([hidden])) .table-stage {
    position: relative; flex: 1 1 0; width: 100%; min-height: 0;
    margin: 0; padding: 0; overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #20332a 0%, #101b16 50%, #0c1210 78%);
  }
  .table-stage .table-ambient { display: none; }
  .table-scene .poker-table {
    background: radial-gradient(ellipse at 48% 30%, #244c3b, #133326 58%, #10271e);
    border-color: #293930; box-shadow: 0 0 0 2px #51604b, 0 0 0 12px #1b261f, 0 16px 42px #020805a6;
  }
  .table-scene .poker-table::after { border-color: #a7b29b88; }
  .table-scene .seat .avatar { border-color: #83917c; }
  .table-scene .seat-rail-number { border-color: #86967e; background: #17261c; color: #f0ebda; }
  .table-scene .seat-rail-number.is-hero { border-color: var(--ui-gold); color: #f6dc9e; }
  .workspace > .checkpoint-rail, .workspace > .coach-panel { display: none; }
  .play-column .action-dock, .app-shell:has(.hand-summary:not([hidden])) .action-dock {
    --dock-hand-width: 150px; --dock-gap: 8px; --dock-amount-width: 90px; --dock-step-width: 44px;
    --dock-submit-width: calc(var(--dock-step-width) * 2 + var(--dock-gap));
    position: relative; inset: auto; flex: 0 0 auto; display: flex; flex-direction: column;
    gap: 8px; width: 100%; min-height: 0; margin: 0; padding: 10px 24px max(10px,env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid #4b4f36; border-radius: 0;
    background: #131b16; box-shadow: 0 -8px 28px #02080533; backdrop-filter: none;
  }
  .action-dock .decision-copy, .mobile-coach-toggle { display: none; }
  .action-dock .action-controls,
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) {
    display: grid; width: 100%; max-width: 1180px; margin: 0 auto;
    grid-template-columns: var(--dock-hand-width) repeat(4,minmax(0,1fr));
    align-items: center; gap: var(--dock-gap);
  }
  .action-controls .action-fold { grid-column: 2; grid-row: 1; }
  .action-controls [data-action="check"] { grid-column: 3; grid-row: 1; }
  .action-controls [data-action="call"] { grid-column: 4; grid-row: 1; }
  .action-controls .action-allin { grid-column: 5; grid-row: 1; }
  .action-controls .custom-sizing { grid-column: 2 / -1; grid-row: 2; margin: 0; min-width: 0; }
  .action-controls:has(.mobile-hero-hand:not([hidden])) .custom-sizing { grid-column: 2 / -1; grid-row: 2; }
  .mobile-hero-hand:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    grid-column: 1; grid-row: 1 / span 2; width: var(--dock-hand-width); align-self: stretch; justify-content: center;
  }
  .mobile-hero-label { display: none; }
  .mobile-hero-cards { display: flex; gap: 6px; }
  .mobile-hero-cards .playing-card { width: 72px; height: 106px; flex: 0 0 72px; border-radius: 5px; }
  .mobile-hero-cards .card-corner { font-size: 16px; line-height: 1; }
  .mobile-hero-cards .card-corner i { font-size: 11px; }
  .mobile-hero-cards .suit-large { font-size: 25px; }
  .action-dock .action-button, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-button {
    width: 64px; height: 64px; min-height: 64px; padding: 5px; justify-self: center;
    border: 1px solid #4e5e49; border-radius: 50%; background: #243226; color: #f1ecd9;
    box-shadow: inset 0 1px #ffffff12, 0 3px 8px #02080544;
    transition: background 160ms, border-color 160ms, transform 160ms;
  }
  .action-dock .action-fold,
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-fold { justify-self: start; }
  .action-dock .action-allin,
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-allin { justify-self: end; }
  .action-dock .action-button span { color: #a5b59e; font-size: 11px; }
  .action-dock .action-button strong { font-size: 14px; line-height: 1.3; }
  .action-dock .action-fold { background: #19221b; color: #c1ccba; }
  .action-dock .action-allin { color: #e8c8a1; border-color: #856b4c; background: #382d22; }
  .action-dock .action-button:hover:not(:disabled) { border-color: #d3bc86; background: #36482f; }
  .action-dock .action-button:disabled { opacity: .4; box-shadow: none; }
  .action-dock .sizing-row { grid-template-columns: minmax(0,1fr) var(--dock-amount-width) var(--dock-submit-width); gap: var(--dock-gap); }
  .action-dock .sizing-row input { min-width: 0; width: 100%; }
  .action-dock .bet-number { height: 44px; border: 1px solid #4e5d45; border-radius: 8px; background: #101811; font-size: 16px; }
  .action-dock .sizing-row button { min-height: 44px; border: 1px solid #d5bc7d; border-radius: 8px; background: #d1b57c; color: #222a1d; font-weight: 650; }
  .action-dock .sizing-row button:disabled { opacity: .4; }
  .action-dock input[type="range"] { height: 44px; min-height: 44px; margin: 0; border: 0; background: transparent; accent-color: #d1b57c; }
  .action-dock input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #58634e; }
  .action-dock input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; background: #d1b57c; border: 3px solid #283223; box-shadow: 0 0 0 1px #a68b55; }
  .action-dock input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #58634e; }
  .action-dock input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #d1b57c; border: 2px solid #283223; }
  /* The two amount rows share the same slider, input and paired-button edges. */
  .action-dock .quick-pot-controls {
    grid-template-columns: var(--dock-hand-width) minmax(0,1fr) var(--dock-amount-width) repeat(2,var(--dock-step-width));
    gap: var(--dock-gap);
  }
  .quick-pot-controls .quick-pot-balance { grid-column: 1; grid-row: 1; }
  .quick-pot-controls #quick-pot-slider { grid-column: 2; grid-row: 1; }
  .quick-pot-controls #quick-pot-amount { grid-column: 3; grid-row: 1; }
  .quick-pot-controls #quick-pot-subtract { grid-column: 4; grid-row: 1; }
  .quick-pot-controls #quick-pot-add { grid-column: 5; grid-row: 1; }
  .mobile-community-cards { display: flex; justify-content: center; width: 100%; padding: 0; }
  .mobile-community-cards:has(.board:empty) { display: none; }
  .mobile-community-cards .board { width: max-content; min-height: 60px; gap: 7px; }
  .mobile-community-cards .playing-card { width: 42px; height: 60px; flex: 0 0 42px; border-radius: 5px; }
  .mobile-community-cards .card-corner { font-size: 15px; line-height: 1; }
  .mobile-community-cards .card-corner i { font-size: 10px; }
  .mobile-community-cards .suit-large { font-size: 24px; }
  .mobile-table-links { display: none; }
  .toast { max-width: calc(100vw - 24px); bottom: max(12px,env(safe-area-inset-bottom)); }
  #depth-toggle { display: none; }
}

/* A full horizontal scene for open foldables and phones in landscape. These
   explicit anchors replace the old 681–959px unscaled fallback completely. */
@media (min-width: 900px), (orientation: landscape) {
  html[data-workspace-layout="compact"] .table-scene {
    position: absolute; display: grid; place-items: center; left: 50%; top: 50%;
    width: 1260px; height: 740px; transform: translate(-50%,-50%) scale(var(--scene-scale,.6)); transform-origin: center;
  }
  html[data-workspace-layout="compact"] .table-scene .poker-table {
    width: 1180px; height: 540px; min-width: 0; max-width: none; aspect-ratio: auto;
    border-radius: 999px; transform: none;
  }
  html[data-workspace-layout="compact"] .table-scene .poker-table::after {
    inset: auto; left: 50%; top: 50%; width: 70%; height: 55%; border-radius: 999px;
    transform: translate(-50%,-50%);
  }
  html[data-workspace-layout="compact"] .table-scene .table-center { left: 50%; top: 50%; width: 190px; }
  html[data-workspace-layout="compact"] .table-scene .mini-card { width: 44px; height: 62px; border-radius: 5px; }
  html[data-workspace-layout="compact"] .table-scene .mini-card + .mini-card { margin-left: 6px; }
  html[data-workspace-layout="compact"] .table-scene .mini-card-corner { font-size: 13px; }
  html[data-workspace-layout="compact"] .table-scene .mini-card-corner i { font-size: 10px; }
  html[data-workspace-layout="compact"] .table-scene .mini-card-suit { font-size: 24px; }
  html[data-workspace-layout="compact"] .table-scene .hole-card-pair.is-showdown .mini-card { width: 54px; height: 76px; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="0"] { top: 84%; left: 50%; --card-rotation: 0deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="1"] { top: 84%; left: 26%; --card-rotation: 0deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="2"] { top: 66%; left: 13%; --card-rotation: 53deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="3"] { top: 34%; left: 13%; --card-rotation: 127deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="4"] { top: 16%; left: 26%; --card-rotation: 180deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="6"] { top: 16%; left: 74%; --card-rotation: 180deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="7"] { top: 34%; left: 87%; --card-rotation: -127deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="8"] { top: 66%; left: 87%; --card-rotation: -53deg; }
  html[data-workspace-layout="compact"] .hole-card-pair[data-seat="9"] { top: 84%; left: 74%; --card-rotation: 0deg; }
}

@media (max-width: 899px) {
  .app-shell .topbar { grid-template-columns: minmax(0,1fr) 44px auto; gap: 8px; padding-inline: 12px; }
  .table-top-nav { display: none; }
  .topbar .brand-wordmark-image { width: 136px; }
  .play-column .action-dock, .app-shell:has(.hand-summary:not([hidden])) .action-dock {
    --dock-hand-width: clamp(100px,calc(100vw - 267px),126px); --dock-gap: 6px; --dock-amount-width: 64px;
    gap: 6px; padding: 8px 12px max(8px,env(safe-area-inset-bottom));
  }
  .action-dock .action-controls, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) {
    grid-template-columns: var(--dock-hand-width) repeat(4,minmax(0,1fr)); gap: var(--dock-gap);
  }
  .mobile-hero-hand:not([hidden]) { width: var(--dock-hand-width); grid-row: 1 / span 2; align-self: stretch; justify-content: center; }
  .mobile-hero-cards { gap: var(--dock-gap); }
  .mobile-hero-cards .playing-card {
    width: calc((var(--dock-hand-width) - var(--dock-gap)) / 2); height: calc((var(--dock-hand-width) - var(--dock-gap)) * .733333);
    flex-basis: calc((var(--dock-hand-width) - var(--dock-gap)) / 2); border-radius: 5px;
  }
  .action-dock .action-controls .custom-sizing { grid-column: 2 / -1; grid-row: 2; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .custom-sizing { grid-column: 2 / -1; }
  .action-dock .action-button, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-button { width: 48px; height: 48px; min-height: 48px; }
  .action-dock .action-button strong { font-size: 12px; }
  .action-dock .action-button span { font-size: 10px; }
  .mobile-table-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .mobile-table-links button {
    min-height: 44px; border: 1px solid #394934; border-radius: 8px; background: #1d291e; color: #c4cdb8;
    font-size: 12px; line-height: 1.4; padding: 6px 3px;
  }
  .mobile-table-links button.is-needed, .mobile-table-links button.is-active { border-color: #bca26e; background: #302d20; color: #f0d6a1; }
  .mobile-community-cards .board { min-height: 54px; }
  .mobile-community-cards .playing-card { width: 38px; height: 54px; flex-basis: 38px; }
}
@media (max-width: 359px) {
  .play-column .action-dock, .app-shell:has(.hand-summary:not([hidden])) .action-dock { --dock-hand-width: 100px; --dock-gap: 4px; --dock-amount-width: 56px; }
  .mobile-hero-cards .playing-card { width: 48px; height: 72px; flex-basis: 48px; }
  .action-dock .action-button, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-button { width: 44px; height: 44px; min-height: 44px; }
}
/* When height is scarce, keep the table left and controls right. Neither is
   overlaid on a seat; only the controls can scroll in unusually short windows. */
@media (max-height: 499px) and (orientation: landscape) and (max-width: 1399px) {
  .workspace .play-column, .app-shell:has(.hand-summary:not([hidden])) .play-column { display: grid; grid-template-columns: minmax(0,1fr) 282px; grid-template-rows: minmax(0,1fr); }
  .play-column .table-stage { height: 100%; }
  .play-column .action-dock, .app-shell:has(.hand-summary:not([hidden])) .action-dock { height: 100%; padding: 10px; gap: 10px; border-top: 0; border-left: 1px solid #3d4a36; overflow-y: auto; }
  .action-dock .action-controls, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .action-controls .mobile-hero-hand:not([hidden]) { grid-column: 1 / -1; grid-row: 1; width: 100%; flex-direction: row; justify-content: center; gap: 10px; }
  .action-controls .mobile-hero-cards .playing-card { width: 60px; height: 88px; flex-basis: 60px; }
  .action-dock .action-controls .action-fold { grid-column: 1; grid-row: 1; }
  .action-dock .action-controls [data-action="check"] { grid-column: 2; grid-row: 1; }
  .action-dock .action-controls [data-action="call"] { grid-column: 3; grid-row: 1; }
  .action-dock .action-controls .action-allin { grid-column: 4; grid-row: 1; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-fold { grid-column: 1; grid-row: 2; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) [data-action="check"] { grid-column: 2; grid-row: 2; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) [data-action="call"] { grid-column: 3; grid-row: 2; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-allin { grid-column: 4; grid-row: 2; }
  .action-dock .action-controls .custom-sizing { grid-column: 1 / -1; grid-row: 3; }
  .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .custom-sizing { grid-column: 1 / -1; grid-row: 3; }
  .action-dock .action-controls:not(:has(.mobile-hero-hand:not([hidden]))) .custom-sizing { grid-row: 2; }
  .action-dock .action-button, .action-dock .action-controls:has(.mobile-hero-hand:not([hidden])) .action-button { width: 48px; height: 48px; min-height: 48px; }
  .action-dock .sizing-row { grid-template-columns: minmax(0,1fr) 76px 60px; gap: 6px; }
  .action-dock .quick-pot-controls { grid-template-columns: minmax(0,1fr) 48px repeat(2,44px) 72px; gap: 4px; }
  .quick-pot-controls .quick-pot-balance { grid-column: 5; }
  .quick-pot-controls #quick-pot-slider { grid-column: 1; }
  .quick-pot-controls #quick-pot-amount { grid-column: 2; }
  .quick-pot-controls #quick-pot-subtract { grid-column: 3; }
  .quick-pot-controls #quick-pot-add { grid-column: 4; }
  .action-controls .mobile-hero-hand:not([hidden]) { justify-content: flex-start; }
  .action-dock:has(.mobile-hero-hand:not([hidden])) .sizing-row {
    grid-template-columns: minmax(0,1fr) 48px 92px; gap: 4px;
  }
  .action-dock:has(.mobile-hero-hand:not([hidden])) .quick-pot-controls {
    grid-template-columns: minmax(0,1fr) 48px repeat(2,44px);
  }
  .action-dock:has(.mobile-hero-hand:not([hidden])) .quick-pot-balance {
    position: absolute; top: 10px; right: 10px; width: 72px; height: 88px;
    grid-column: auto; grid-row: auto;
  }
  .mobile-table-links { display: grid; }
  .mobile-table-links button { font-size: 11px; }
  .table-top-nav { display: none; }
  .app-shell .topbar { grid-template-columns: minmax(0,1fr) 44px auto; }
}
@media (prefers-reduced-motion: reduce) { .action-dock .action-button { transition: none; } }