.online-screen { width: min(100%, 480px); min-height: 100svh; margin-inline: auto; padding: max(18px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom)); box-sizing: border-box; color: var(--ivory, #f5ebcf); }
.online-screen[hidden] { display: none; }
.online-card { background: linear-gradient(145deg, #103b32, #06241e); border: 1px solid #756744; border-radius: 22px; padding: 20px; display: grid; gap: 16px; box-shadow: 0 16px 60px #00120daa; }
.online-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.online-card h1 { font-size: 25px; margin: 0; color: #f4e8c7; }
.online-card header span, .online-note, .online-card small { color: #a4bfb5; font-size: 12px; line-height: 1.6; }
.online-card h2 { margin: 0; font-size: 20px; }
.online-card h3 { margin: 0; font-size: 16px; }
.online-card p { margin: 0; line-height: 1.6; }
.online-card label { display: grid; gap: 7px; font-size: 14px; min-width: 0; }
.online-card input, .online-card select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px; background: #061e19; color: #eee5cc; border: 1px solid #3b5f53; border-radius: 10px; font: inherit; }
.online-card button { min-height: 48px; padding: 10px 12px; border: 1px solid #4e6c5a; background: #10382f; color: #ece4cf; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.online-card button.primary-button { color: #24281b; background: linear-gradient(110deg, #e7cd87, #be9143); border-color: #e7cc7c; }
.online-card button:disabled { opacity: .38; cursor: default; }
.online-transport { position: relative; min-width: 0; height: 48px; display: grid; align-content: start; gap: 2px; }
.online-transport .online-error { position: absolute; inset: 0; }
.online-transport #online-diagnostic { display: flex; align-items: center; gap: 8px; min-width: 0; visibility: hidden; }
.online-transport #online-diagnostic-label { font-size: 10px; overflow-wrap: anywhere; }
.online-card #online-copy-diagnostic { min-height: 24px; padding: 2px 4px; border: 0; background: transparent; font-size: 10px; font-weight: 400; white-space: nowrap; }
.online-screen:not(.online-reconnecting) .online-card button[data-transport-disabled] { opacity: 1; }
.online-diagnostic-copy { box-sizing: border-box; width: 100%; min-height: 90px; font-size: 11px; }
.online-room-code { color: #e6c46f; letter-spacing: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.online-roster { list-style: none; padding: 0; margin: 0; }
.online-roster li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 11px 0; border-bottom: 1px solid #49614888; font-size: 14px; }
.online-roster li span { overflow-wrap: anywhere; }
.online-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.online-settings label:last-child { grid-column: 1 / -1; }
.online-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.online-connection { color: #e2c777; font-size: 13px; }
.online-error { color: #e8b4a4; font-size: 13px; overflow-wrap: anywhere; }
.online-card dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; margin: 0; font-size: 14px; }
.online-card dd { margin: 0; overflow-wrap: anywhere; }
.online-build { margin-top: 18px; text-align: center; color: #a7c3b2; opacity: .55; font-size: 9px; }
@media (max-width: 340px) { .online-card { padding: 16px; gap: 12px; } .online-roster li { font-size: 13px; } }
.online-entry-area { display: grid; gap: 5px; }
.online-entry-area small { color: #a4bfb5; font-size: 11px; padding-inline: 12px; }
.online-card button.online-leave { color: #d1aaa0; background: transparent; font-size: 13px; }
.online-confirm { box-sizing: border-box; width: min(420px, calc(100% - 28px)); padding: 24px; border: 1px solid #756744; border-radius: 20px; background: #0c3027; color: #f5ebcf; }
.online-confirm::backdrop { background: #00120d99; }
.online-confirm h2 { margin-top: 0; font-size: 20px; }
.online-confirm p { line-height: 1.7; }
.online-confirm div { display: flex; gap: 12px; }
.online-confirm button { flex: 1; min-height: 48px; border-radius: 10px; border: 1px solid #4e6c5a; background: #123b30; color: #eee5cc; font: inherit; }
.online-confirm button:last-child { color: #edb9a6; }
.online-screen.has-table { width: 100%; max-width: none; margin: 0; padding: 0; display: block; }
.online-screen.has-table[hidden] { display: none; }
.online-table-status { position: absolute; z-index: 80; left: 50%; top: calc(5px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100% - 144px); margin: 0; border-radius: 8px; background: rgb(3 28 24 / 90%); color: #e9ddc3; font-size: 10px; line-height: 14px; text-align: center; }
.online-table-status:empty { display: none; }
.online-table .mobile-hud { z-index: 70; grid-template-columns: 72px minmax(0, 1fr) 72px; }
.online-table .risk-area { grid-template-rows: 10px 18px; align-content: center; row-gap: 1px; }
.online-table .risk-label { line-height: 10px; }
.online-table .risk-total { font-size: 18px; line-height: 18px; }
.online-table .drawer-backdrop { z-index: 75; }
.online-table .human-meta strong { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-table .human-meta { white-space: nowrap; }
.online-table .result-card { max-height: 92dvh; overflow-y: auto; }
.online-table .online-ready-list { font-size: 11px; line-height: 1.7; }
.online-table .drawer { max-height: 92dvh; overflow-y: auto; }
.online-table [data-online=diagnostic] { font-size: 10px; line-height: 1.5; white-space: pre-line; color: #9ebbb1; }

/* One container contract: top seats occupy a row above the arena; middle
   seats use the target's actual row, never percentage offsets into the shell. */
.adaptive-table, .online-table {
  --top-seats-y: 56px; --top-seats-height: 72px; --arena-y: 134px;
  --target-height: 134px; --turn-height: 20px; --status-height: 24px;
  --arena-gap: 5px; --risk-height: 48px; --recent-height: 72px; --dock-height: 234px;
  --side-seat-width: 78px; --top-row-inset: 40px;
  position: fixed; top: var(--visible-top, 0px);
  left: calc(var(--visible-left, 0px) + var(--visible-width, 100vw) / 2);
  transform: translateX(-50%); margin: 0;
  width: min(var(--visible-width, 100vw), 460px);
  height: var(--visible-height, 100dvh); min-height: 0; max-height: none;
}
.adaptive-table .table-shell, .online-table .table-shell { inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.adaptive-table .opponents-area, .online-table .opponents-area { --seat-card-width: var(--side-seat-width); }
.adaptive-table .opponent-seat, .online-table .opponent-seat { top: var(--top-seats-y) !important; transform: none; }
.adaptive-table .opponent-seat.current-player, .online-table .opponent-seat.current-player { transform: scale(1.04); }
.adaptive-table .seat-top, .online-table .seat-top { left: calc(50% - var(--side-seat-width) / 2); right: auto; transform: none; }
.adaptive-table .seat-top.current-player, .online-table .seat-top.current-player { transform: scale(1.04); transform-origin: center; }
/* Reserve the HUD corner lanes, including the existing 1.04 active-seat lift. */
.adaptive-table .seat-left-top, .online-table .seat-left-top { left: var(--top-row-inset) !important; }
.adaptive-table .seat-right-top, .online-table .seat-right-top { right: var(--top-row-inset) !important; }
.adaptive-table .seat-left-middle, .online-table .seat-left-middle { left: 4px !important; }
.adaptive-table .seat-right-middle, .online-table .seat-right-middle { right: 4px !important; }
.adaptive-table .seat-left-middle, .adaptive-table .seat-right-middle, .online-table .seat-left-middle, .online-table .seat-right-middle {
  top: calc(var(--arena-y) + var(--turn-height) + var(--status-height) + 2 * var(--arena-gap) + (var(--target-height) - var(--top-seats-height)) / 2) !important;
}
/* Three players have two top-row opponents, not target-side opponents. */
.adaptive-table .player-count-3 .seat-left-middle, .adaptive-table .player-count-3 .seat-right-middle, .online-table .player-count-3 .seat-left-middle, .online-table .player-count-3 .seat-right-middle { top: var(--top-seats-y) !important; }
.adaptive-table .seat-badges, .online-table .seat-badges { left: auto; right: 0; max-width: 100%; }
.adaptive-table .arena, .online-table .arena { top: var(--arena-y); width: min(288px, calc(100% - 24px)); transform: translateX(-50%); gap: var(--arena-gap); }
.adaptive-table .current-turn, .online-table .current-turn { height: var(--turn-height); line-height: var(--turn-height); }
.adaptive-table .arena-status-row, .online-table .arena-status-row { height: var(--status-height); }
.adaptive-table .target-area, .online-table .target-area { width: calc(min(var(--visible-width, 100vw), 460px) - 2 * (var(--side-seat-width) + 8px));
  height: var(--target-height); min-height: var(--target-height); max-height: var(--target-height); }
.adaptive-table .target-area.target-play, .online-table .target-area.target-play { --target-frame-height: var(--target-height); }
.adaptive-table .risk-area, .online-table .risk-area { height: var(--risk-height); min-height: 0; }
.adaptive-table .recent-actions, .online-table .recent-actions { height: var(--recent-height); min-height: 0; }
.adaptive-table .human-dock, .online-table .human-dock { height: calc(var(--dock-height) + env(safe-area-inset-bottom)); min-height: 0; }
.adaptive-table .turn-prompt, .online-table .turn-prompt { height: 100%; }
.adaptive-table .action-button, .online-table .action-button { height: 100%; min-height: 44px; }
.adaptive-table[data-height-mode=NORMAL], .online-table[data-height-mode=NORMAL] {
  --top-seats-y: 52px; --top-seats-height: 67px; --arena-y: 124px; --target-height: 123px; --risk-height: 42px; --recent-height: 60px; --dock-height: 220px;
  --game-card-width: 66px; --game-card-height: 88px; --corner-rank-base: 15px;
}
.adaptive-table[data-height-mode=NORMAL] .opponents-area, .online-table[data-height-mode=NORMAL] .opponents-area { --seat-avatar-size: 32px; }
.adaptive-table[data-height-mode=NORMAL] .seat-panel, .online-table[data-height-mode=NORMAL] .seat-panel { padding-block: 7px 4px; }
.adaptive-table[data-height-mode=NORMAL] .human-dock, .online-table[data-height-mode=NORMAL] .human-dock { grid-template-rows: 24px 18px 46px minmax(104px, 1fr); padding-block: 7px max(7px, env(safe-area-inset-bottom)); }
.adaptive-table[data-height-mode=SHORT], .online-table[data-height-mode=SHORT] {
  --top-seats-y: 52px; --top-seats-height: 67px; --arena-y: 124px;
  --turn-height: 16px; --status-height: 20px; --target-height: 123px; --arena-gap: 4px;
  --risk-height: 32px; --recent-height: 42px; --dock-height: 190px;
  --game-card-width: 66px; --game-card-height: 88px; --corner-rank-base: 15px;
}
.adaptive-table[data-height-mode=SHORT] .risk-area, .online-table[data-height-mode=SHORT] .risk-area { padding-block: 2px; grid-template-rows: 10px 17px; }
.adaptive-table[data-height-mode=SHORT] .risk-total, .online-table[data-height-mode=SHORT] .risk-total { font-size: 17px; line-height: 17px; }
.adaptive-table[data-height-mode=SHORT] .recent-actions, .online-table[data-height-mode=SHORT] .recent-actions { padding-block: 3px; }
.adaptive-table[data-height-mode=SHORT] .recent-actions li, .online-table[data-height-mode=SHORT] .recent-actions li { height: 11px; line-height: 11px; }
.adaptive-table[data-height-mode=SHORT] .human-dock, .online-table[data-height-mode=SHORT] .human-dock { grid-template-rows: 22px 14px 44px 102px; gap: 2px; padding: 1px 10px max(1px, env(safe-area-inset-bottom)); }
.adaptive-table[data-height-mode=SHORT] .hand-area, .online-table[data-height-mode=SHORT] .hand-area { min-height: 0; padding-top: 14px; padding-bottom: 2px; }
.adaptive-table[data-height-mode=SHORT] .seat-panel, .online-table[data-height-mode=SHORT] .seat-panel { padding-block: 7px 4px; }
.adaptive-table[data-height-mode=SHORT] .opponents-area, .online-table[data-height-mode=SHORT] .opponents-area { --seat-avatar-size: 32px; }
@media (max-width: 350px) { .adaptive-table, .online-table { --side-seat-width: 68px; } }
.online-history { max-width: 90vw; max-height: 80dvh; color: #efe4cf; background: #0b3029; border: 1px solid #b99751; border-radius: 16px; }
.online-history li { line-height: 1.8; overflow-wrap: anywhere; }

/* Shared adaptive table. Portrait keeps the approved mobile composition. */
.game-screen[data-layout-mode] { position: fixed; top: var(--visible-top, 0px); left: calc(var(--visible-left, 0px) + var(--visible-width, 100vw) / 2); transform: translateX(-50%); margin: 0; height: var(--visible-height, 100dvh); min-height: 0; max-height: none; }
.game-screen[data-layout-mode=PORTRAIT] { width: min(var(--visible-width, 100vw), 460px); }
.game-screen[data-layout-mode=WIDE], .game-screen[data-layout-mode=LANDSCAPE_COMPACT] {
  width: min(var(--visible-width, 100vw), 1280px); border-radius: 0;
  --game-card-width: 84px; --game-card-height: 112px; --corner-rank-base: 18px;
  --turn-height: 20px; --status-height: 24px; --target-height: 150px; --arena-gap: 5px;
  --risk-height: 48px; --recent-height: 72px;
}
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .table-shell { inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .opponents-area { --seat-card-width: 90px; --seat-avatar-size: 36px; }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .opponent-seat {
  left: var(--seat-x) !important; top: var(--seat-y) !important; right: auto !important;
  transform: none; transform-origin: center;
}
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .opponent-seat.current-player { transform: scale(1.04); }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .seat-badges { left: auto; right: 0; transform: none; }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .arena {
  left: calc(var(--adaptive-board-width) / 2); top: var(--adaptive-arena-y);
  width: var(--adaptive-arena-width); transform: translateX(-50%); gap: var(--arena-gap);
}
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .current-turn { height: var(--turn-height); line-height: var(--turn-height); }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .arena-status-row { height: var(--status-height); }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .target-area {
  width: var(--adaptive-target-width); align-self: center; height: var(--target-height); min-height: var(--target-height); max-height: var(--target-height);
}
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .target-area.target-play { --target-frame-height: var(--target-height); }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .risk-area { height: var(--risk-height); min-height: 0; }
.game-screen:not([data-layout-mode=PORTRAIT])[data-layout-mode] .recent-actions { height: var(--recent-height); min-height: 0; }
.game-screen[data-layout-mode=WIDE] .human-dock {
  left: 50%; right: auto; transform: translateX(-50%); width: min(820px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: calc(234px + env(safe-area-inset-bottom)); min-height: 0;
  grid-template-rows: 26px 20px 48px minmax(120px, 1fr); gap: 4px; padding: 8px 12px max(8px, env(safe-area-inset-bottom));
}
.game-screen[data-layout-mode=WIDE] { --target-height: clamp(134px, calc(var(--visible-height, 100dvh) - 566px), 150px); }
.game-screen[data-layout-mode=WIDE] .hand-area { min-height: 0; padding-top: 16px; }
.game-screen[data-layout-mode=WIDE] .turn-prompt { height: 20px; }
.game-screen[data-layout-mode=WIDE]::before { inset: calc(58px + env(safe-area-inset-top)) 14px calc(234px + env(safe-area-inset-bottom)); }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] {
  --game-card-width: 66px; --game-card-height: 88px; --corner-rank-base: 15px;
  --turn-height: 14px; --status-height: 20px; --target-height: 88px; --arena-gap: 2px;
  --risk-height: 28px; --recent-height: 32px;
}
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .opponents-area { --seat-card-width: 60px !important; --seat-avatar-size: 26px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .opponent-seat { min-height: 56px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .seat-avatar { width: 26px; height: 26px; font-size: 11px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .seat-panel { padding: 5px 2px 3px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .seat-name { font-size: 10px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .seat-stats { font-size: 8px; gap: 3px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .human-dock {
  top: calc(56px + env(safe-area-inset-top)); bottom: env(safe-area-inset-bottom); right: env(safe-area-inset-right); left: calc(env(safe-area-inset-left) + var(--adaptive-board-width));
  width: auto; height: auto; min-height: 0; transform: none;
  grid-template-rows: 42px 22px 44px minmax(102px, 1fr); gap: 3px; padding: 6px 8px;
  border-top: 0; border-left: 1px solid rgb(217 174 91 / 14%); border-radius: 14px 0 0 0;
}
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .human-meta { white-space: normal; flex-wrap: wrap; align-content: center; font-size: 10px; row-gap: 0; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .human-avatar { width: 24px; height: 24px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .hand-area { min-height: 0; padding-top: 14px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .turn-prompt { height: 22px; font-size: 10px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .action-button { min-height: 44px; height: 44px; font-size: 13px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .controls { gap: 5px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .risk-area { padding-block: 1px; grid-template-rows: 10px 15px; row-gap: 1px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .risk-total { font-size: 15px; line-height: 15px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .recent-actions { padding: 2px 6px; grid-template-columns: 58px minmax(0, 1fr); }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .recent-actions li { height: 9px; line-height: 9px; font-size: 8px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .recent-actions-heading b { font-size: 9px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .recent-actions-heading small { display: none; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .direction-indicator, .game-screen[data-layout-mode=LANDSCAPE_COMPACT] .round-multiplier, .game-screen[data-layout-mode=LANDSCAPE_COMPACT] .phase-banner { font-size: 9px; padding-inline: 4px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT] .arena-status-row { gap: 3px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT]::before { inset: 58px calc(100% - var(--adaptive-board-width)) 8px 8px; }
.game-screen[data-layout-mode=LANDSCAPE_COMPACT]::after { display: none; }
.game-screen[data-layout-mode] .hand-area { min-width: 0; }
.game-screen[data-layout-mode] .hand-card + .hand-card {
  margin-left: min(var(--hand-overlap), calc((100% - var(--hand-count) * var(--game-card-width)) / max(1, var(--hand-count) - 1)));
}
.game-screen[data-layout-mode] .mobile-hud { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); grid-template-columns: 72px minmax(0, 1fr) 72px; }