/* Integration layout only: preserve ELUVK artwork, sprites, and visual tokens. */
html { scroll-padding-top: 16px; overflow-y: auto; scrollbar-gutter: auto; }
body { overflow: visible; }
[hidden] { display: none !important; }
main { display: block; max-width: 2400px; padding: 8px 14px; }
.workspace { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(0, 2.8fr) minmax(280px, .95fr); gap: 12px; min-width: 0; align-items: start; }
/* A quiet single-line control rail; native selects disclose complete engine names. */
.table-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 14px 6px; }
.header-heading, .table-controls, .seat-controllers { display: contents; }
.header-heading h1 { order: 0; margin: 0; font-size: .88rem; font-weight: 800; color: var(--accent-gold); white-space: nowrap; }
#brand-home { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; text-decoration: none; }
#brand-home img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.header-heading .nav-tabs { order: 1; display: flex; flex-wrap: nowrap; margin: 0; padding: 0; gap: 4px; }
.header-heading .nav-tab { min-width: 44px; min-height: 44px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.header-actions { order: 4; margin-left: auto; gap: 8px; flex-wrap: nowrap; }
.table-header button { min-width: 44px; min-height: 44px; padding: 6px 9px; font-size: .76rem; white-space: nowrap; }
#sound-toggle[aria-pressed="true"] { border-color: var(--accent-gold); color: var(--accent-gold); }
.seat-controller { order: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; min-width: 0; padding: 0; border: 0; }
.seat-controller label { min-width: 0; font-size: 12px; gap: 4px; }
.seat-controller .controller-control { flex: 0 0 auto; }
.seat-controller .controller-control > span { color: var(--accent-gold); font-weight: 700; }
.seat-controller select { min-width: 0; min-height: 44px; padding: 5px 6px; font-size: .76rem; }
.engine-control, .controller-control { white-space: nowrap; }
.engine-control select { min-width: 0; width: 100%; }
.seat-controller .controller-control select { width: 108px; }
.seat-controller .custom-ms input { width: 76px; min-height: 44px; padding: 5px; font-size: .76rem; }
.seat-controller select[id$="-preset"] { width: 88px; }
/* Routine timing help stays screen-reader accessible, but input errors must be visible. */
.seat-controller:has(input[aria-invalid="true"]) { flex-wrap: wrap; max-width: 310px; }
.seat-controller:has(input[aria-invalid="true"]) .seat-time-hint { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; flex: 1 1 100%; color: var(--accent-red); font-size: 12px; line-height: 1.4; }
.time-control-group { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.time-control-group > label:first-child { min-width: 0; }
.time-control-group select { min-width: 0; }
.time-control-group .custom-ms { flex: 0 0 auto; }
.settings-row .time-control-group { font-size: .78rem; }
.settings-row .time-control-group label { font-size: inherit; }
.settings-row .time-control-group select { max-width: 150px; }
.settings-row .time-control-group input { width: 88px; }
.quick-actions { order: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 0 auto; }
.training-review { border-top:1px solid var(--border-color, #ffffff26); padding-top:8px; overflow-wrap:anywhere; }
.training-review h3 { margin: 6px 0; font-size: .9rem; line-height: 1.5; }
.training-review p { margin:6px 0; font-size:13px; line-height:1.6; }
.training-review small { display:block; font-size:12px; }
.training-review button { min-height:44px; margin:6px 6px 0 0; }
.auto-play-toggle, .check-label { cursor: pointer; min-height: 44px; }
.auto-play-toggle { white-space: nowrap; font-size: .76rem; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-gold); flex: 0 0 auto; }

/* Reference topology: players | square board + guidance / market | analysis + log. */
.play-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 12px; align-items: start; min-width: 0; }
.board-panel, .market-area, .players-column, .players-panel, .insight-column, .table-guidance { min-width: 0; }
.board-area { grid-column: 1; padding: 8px; }
.market-area { grid-column: 1 / -1; }
.board-stage-wrap { display: flex; width: 100%; align-items: center; justify-content: center; margin: 0; }
.board-container { width: 100%; height: auto; aspect-ratio: 1; }
/* The artwork is the board. Empty slots and legal candidates need no extra discs. */
#board .board-cell { display: flex; justify-content: center; align-items: center; background: transparent; border: 0; border-radius: 8px; box-shadow: none; outline: 2px solid transparent; outline-offset: -2px; overflow: visible; }
#board .board-cell.cell-candidate:not(.cell-selected):not(.cell-highlight):not(.cell-gold-selected):not(.ai-preview) { border-color: transparent !important; box-shadow: none; }
#board .board-cell.cell-clickable:hover { background: #fbbf2414; outline-color: var(--accent-gold); box-shadow: none; transform: none; }
#board .board-cell.cell-selected, #board .board-cell.cell-gold-selected { outline-color: var(--accent-gold); background: #fbbf2420 !important; box-shadow: none; transform: none; animation: none; }
#board .board-cell > .token { width: 82%; height: auto; aspect-ratio: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; filter: none; overflow: visible; background-size: 800% 100%; transform: none; }
#board .board-cell.cell-selected > .token, #board .token:hover { transform: none; }
.table-guidance, .insight-column { display: flex; flex-direction: column; gap: 8px; }
.board-side-info { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: stretch; gap: 8px; width: 100%; }
.privilege-rules-panel { padding: 2px; align-self: stretch; min-width: 0; }
.privilege-rules-img { width: 100%; height: auto; object-fit: contain; }
.side-info-card { min-width: 0; padding: 5px 3px; flex-direction: column; gap: 3px; text-align: center; }
.side-info-meta { min-width: 0; }
.side-info-label { font-size: 12px; }
.side-info-card .privilege-icon, .side-info-card .bag-icon { width: 22px; height: 26px; }
.privilege-scrolls { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; min-height: 30px; max-width: 100%; vertical-align: middle; }
.privilege-scroll { display: inline-block; flex: 0 1 22px; width: 22px; height: 30px; object-fit: contain; background: url("/assets/images/privilege.png?v=20261110-tableau-six-col") center / contain no-repeat; }
.privilege-pool-card .side-info-meta { width: 100%; }
.privilege-pool-card .privilege-scrolls { display: flex; }
#bagCount { font-size: 1rem; }
#board .board-cell.ai-preview { outline: 3px dashed var(--accent-gold); outline-offset: -4px; }
#board .board-cell.ai-preview::after { content: 'AI'; position: absolute; right: 1px; top: 1px; font-size: 12px; line-height: 1; color: #111827; background: var(--accent-gold); border-radius: 2px; padding: 2px; pointer-events: none; }
.board-container:empty::after { content: '建立对局后显示宝石盘'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-body); font-size: .85rem; text-shadow: 0 2px 4px #000; }
.market-tiers { display: flex; flex-direction: column; gap: 6px; }
.market-area { width: 100%; }
.panel-title { text-transform: none; letter-spacing: normal; }
.panel-title h2 { font-size: inherit; font-weight: inherit; margin: 0; }
.panel-hint, .drawer-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: normal; }
.royal-title { margin-top: 4px; }
.tier-header { display: none; }
/* Only the obsolete blind-reserve overlay on deck backs; face-card purchase actions stay intact. */
#market .deck-pile > .card-action-overlay { display: none; }
#market { --market-gap: 6px; --market-card-width: min(100px, calc((100% - 42px) / 6)); }
/* Twelve half-pitch tracks: a fixed deck rail plus five face-card slots. Cards
   centre in two tracks, sharing half a gap on either side. Resolve percentage
   widths once in the track, not again against each card's smaller grid area.
   Face columns are assigned from native array indices, never :nth-child/count. */
#market .cards-flex, body.mode-play #market .cards-flex {
  display: grid; grid-template-columns: repeat(12, calc((var(--market-card-width) + var(--market-gap)) / 2));
  justify-content: center; align-items: center; overflow: visible; gap: 0; padding-block: 4px;
}
#market .card-item { grid-row: 1; justify-self: center; width: calc(100% - var(--market-gap)); height: auto; aspect-ratio: 100 / 152; flex: 0 0 auto; }
#market .deck-pile { grid-column: 1 / span 2; }
/* Override the original renderer stylesheet's obsolete staircase margins. */
#market .deck-pile, #market .deck-pile + .card-item { margin: 0; }
#market .card-item:hover { transform: none; }
#market .deck-count-badge { font-size: 12px; padding: 1px 3px; right: 2px; bottom: 3px; }
.royals-row { flex-wrap: nowrap; justify-content: space-evenly; gap: 8px; }
#royalsContainer .royal-item { width: min(100px, calc((100% - 24px) / 4)); height: auto; aspect-ratio: 100 / 152; flex: 0 0 auto; }
.players-column { display: flex; flex-direction: column; gap: 10px; }
.players-panel { min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; flex: none; }
.players-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.player-card { padding: 8px; }
.player-name { font-size: .82rem; flex-wrap: wrap; }
.player-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; line-height: 1.5; }
.player-summary strong, .player-summary b { font-variant-numeric: tabular-nums; }
.player-summary .victory-progress, .player-summary .compact-resources { width: 100%; flex-basis: 100%; }
.victory-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 6px; }
.victory-progress > * { min-width: 0; }
.progress-row { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; }
.progress-row b { color: var(--text-main); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.compact-resources { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 5px; padding-block: 6px; font-size: .75rem; text-align: center; min-width: 0; }
.compact-resources > * { min-width: 0; }
.compact-resources .resource-caption { grid-column: 1 / -1; text-align: left; color: var(--text-muted); font-size: 12px; margin: 0 0 3px; }
.resource-chip { --resource-color: var(--accent-white); --resource-ink: var(--bg-inner); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; font-variant-numeric: tabular-nums; }
.resource-chip[data-color="blue"], .resource-chip:has(.token-blue) { --resource-color: var(--accent-blue); }
.resource-chip[data-color="green"], .resource-chip:has(.token-green) { --resource-color: var(--accent-green); }
.resource-chip[data-color="red"], .resource-chip:has(.token-red) { --resource-color: var(--accent-red); }
.resource-chip[data-color="black"], .resource-chip:has(.token-black) { --resource-color: var(--bg-main); --resource-ink: var(--text-main); }
.resource-points { display: block; min-height: 22px; color: var(--text-body); font-size: .82rem; font-weight: 700; }
.resource-discount { display: grid; place-items: center; width: 100%; min-height: 48px; border-radius: 7px; background: var(--resource-color); color: var(--resource-ink); border: 1px solid var(--border-color); box-shadow: inset 0 0 0 2px #ffffff30; font-size: 1.25rem; font-weight: 800; }
.resource-token { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--resource-color); color: var(--resource-ink); border: 2px solid var(--border-color); box-shadow: inset 0 0 0 2px #ffffff70; font-size: 1rem; font-weight: 800; }
.resource-special-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; align-self: stretch; padding-bottom: 0; }
.resource-special-column .resource-chip { gap: 2px; }
.resource-special-column [data-color="gold"], .resource-special-column .token-gold, .resource-token.token-gold { --resource-color: var(--accent-gold); --resource-ink: var(--bg-inner); }
.resource-special-column [data-color="pearl"], .resource-special-column .token-pearl, .resource-token.token-pearl { --resource-color: var(--accent-pearl); --resource-ink: var(--bg-inner); }
.compact-resources .token { width: 24px; height: 24px; flex-shrink: 0; }
.compact-resources .resource-token.token { width: 34px; height: 34px; min-height: 34px; padding: 0; background: var(--resource-color); color: var(--resource-ink); border: 2px solid var(--border-color); font-size: 1rem; box-shadow: inset 0 0 0 2px #ffffff70; }
.compact-resources button.resource-token { cursor: pointer; }
.compact-resources button.resource-token:hover:not(:disabled) { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
@media (pointer: coarse) { .compact-resources button.resource-token { width: 44px; height: 44px; min-height: 44px; max-width: 100%; } }
.compact-resources button.resource-chip { min-height: 44px; background: var(--bg-inner); color: var(--text-body); border-color: var(--border-color); box-shadow: none; }
.compact-resources button.resource-chip:hover:not(:disabled) { border-color: var(--accent-gold); background: var(--bg-card-hover); }
.player-details-toggle { width: 100%; min-height: 36px; margin-top: 4px; background: var(--bg-inner); color: var(--text-muted); border-color: var(--border-color); }
.player-details { border-top: 1px solid var(--border-subtle); padding-top: 5px; }
.player-details > summary { cursor: pointer; color: var(--text-muted); font-size: .75rem; padding-block: 5px; }
.player-details[open] > summary { margin-bottom: 6px; }
/* Purchased-card tableau: six fixed columns, one per resource column above
   (white / blue / green / red / black, then the no-attribute column under
   gold+pearl). Fixed tracks keep every empty column reserved, so a first
   purchase can never collapse the rest and pack the cards to the left. */
.player-tableau-area { padding: 3px 0 0; border: 0; border-radius: 0; background: transparent; }
.tableau-by-color-grid, .player-details .tableau-by-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-items: start;
  min-height: 0;
  min-width: 0;
}
.tableau-by-color-grid .tableau-col-header { min-height: 18px; padding: 1px 0; gap: 2px; font-size: .66rem; }
.tableau-by-color-grid .tableau-col-header .badge-gem-icon { width: 12px; height: 12px; }
/* Card boxes fill their track and keep the 100:152 artwork ratio. The vertical
   overlap is a percentage of the track width, so the exposed card head stays
   proportional at every panel width instead of needing a per-breakpoint size. */
.tableau-by-color-grid .tableau-stacked-card {
  width: 100%;
  height: auto;
  aspect-ratio: 100 / 152;
  margin-top: -84%;
}
.tableau-by-color-grid .tableau-stacked-card:hover { transform: translateY(-3px) scale(1.3); }
.tableau-by-color-grid .tableau-empty-slot { width: 100%; height: auto; aspect-ratio: 100 / 52; margin-top: 1px; }
.player-bottom-cards-area { min-width: 0; }
/* Reserve a full-width three-slot rail even when only one or two cards exist.
   Royals use their own row so they never shrink the reserved-card slots. */
.player-bottom-cards-area .bottom-cards-row { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.reserved-cards-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; min-width: 0; align-items: start; }
.player-card .reserved-cards-container .card-item { width: 100%; min-width: 0; height: auto; aspect-ratio: 100 / 152; margin: 0; }
.player-card .reserved-cards-container .card-item:hover { transform: none; }
.reserved-cards-container > .empty-cards-placeholder { grid-column: 1 / -1; }
.player-bottom-cards-area .royals-mini-container { min-width: 0; }
.player-bottom-cards-area .royals-mini-container:empty { display: none; }
.game-log { display: flex; flex-direction: column; gap: 4px; max-height: 310px; overflow-y: auto; scrollbar-width: thin; padding-right: 3px; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.game-log-entry, .log-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-block: 4px; border-bottom: 1px solid var(--border-subtle); }
.game-log .log-tokens { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 100%; vertical-align: middle; }
.game-log .log-token { display: inline-flex; align-items: center; gap: 2px; width: auto; flex: 0 0 auto; vertical-align: middle; }
.game-log .token { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }

/* Primary confirmation stays above the optional-action row. */
.operation-strip { padding: 0; width: 100%; min-width: 0; }
.turn-guide-banner { height: auto; min-height: 42px; max-height: none; padding-block: 7px; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.guide-text { line-height: 1.5; white-space: normal; min-width: 0; overflow: visible; align-items: flex-start; }
#phase { overflow-wrap: anywhere; }
#message, #automation-status { font-size: .76rem; line-height: 1.5; color: var(--text-muted); margin: 3px 1px 0; min-height: 1.5em; }
#message.error { color: var(--accent-red); }
#automation-status { color: var(--accent-gold); }
#automation-status[aria-busy="true"] { border-left: 3px solid var(--accent-gold); padding-left: 8px; }
#actionBarButtons { height: auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
#actionBarButtons button { height: auto; min-height: 44px; white-space: normal; }
#actionBarButtons > span { min-width: 0; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.5; }
#actionBarButtons .inline-card-selection { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: .76rem; line-height: 1.5; }
#actionBarButtons .payment-choice { flex: 1 1 180px; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; white-space: normal; font-size: .76rem; }
#market .card-item.intent-selected { outline: 3px solid var(--accent-gold); outline-offset: 2px; border-color: var(--accent-gold); transform: none; }
#market .card-item.intent-selected::after { content: '已选'; position: absolute; top: 2px; right: 2px; padding: 2px 4px; border-radius: 3px; color: var(--bg-inner); background: var(--accent-gold); font-size: 12px; line-height: 1.2; }
.optional-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.optional-actions:empty { display: none; }
.optional-actions button { min-height: 44px; background: var(--bg-card); border-color: var(--border-color); color: var(--text-body); }
.optional-actions > .muted { flex: 1 1 100%; font-size: 12px; line-height: 1.4; }

/* Shared form/accessibility styling. */
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 3px; }
label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
input, textarea { background: var(--bg-inner); border: 1px solid var(--border-color); color: var(--text-body); border-radius: 5px; font: inherit; padding: 6px 8px; }
select { max-width: 100%; }
input[type="number"] { width: 92px; }
input[aria-invalid="true"] { border-color: var(--accent-red); outline: 1px solid var(--accent-red); }
input:disabled, select:disabled { opacity: .55; }
.muted { color: var(--text-muted); font-size: .8rem; line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Analysis remains directly accessible outside settings. */
.analysis-heading { flex-wrap: wrap; align-items: center; gap: 8px; }
.analysis-heading .controls { width: 100%; gap: 8px; }
.analysis-heading button { min-height: 36px; padding: 6px 8px; font-size: .76rem; }
.analysis-auto-label { min-height: 36px; font-size: .76rem; }
.analysis-toggle { width: 100%; min-height: 36px; border-top: 1px solid var(--border-color); margin-top: 4px; }
#analysis-content { min-width: 0; }
#analysis { min-width: 0; overflow-wrap: anywhere; }
#analysis h3 { font-size: .95rem; margin: 14px 0 8px; color: var(--text-body); }
#analysis p { margin: 6px 0; font-size: .85rem; line-height: 1.6; }
#analysis .analysis-state { font-size: .95rem; font-weight: 600; color: var(--accent-gold); }
#analysis .analysis-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
#analysis .position-summary { padding: 10px 0; margin: 10px 0; border-block: 1px solid var(--border-color); }
#analysis .position-summary h3 { margin-top: 0; }
#analysis .value-label { font-weight: 600; color: var(--text-body); }
#analysis .value-number { display: block; font-size: 24px; line-height: 1.3; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
#analysis .position-value .value-number { font-size: 32px; }
#analysis progress { width: 100%; height: 10px; accent-color: var(--primary); margin-top: 8px; }
#analysis .value-explanation { color: var(--text-body); font-size: .8rem; }
#analysis .candidate { padding: 12px; margin: 10px 0; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-inner); }
#analysis .candidate.recommended { border-color: var(--accent-gold); }
#analysis .candidate button { width: 100%; white-space: normal; text-align: left; justify-content: flex-start; overflow-wrap: anywhere; min-height: 40px; }
#analysis .candidate-value { margin-top: 8px; }
#analysis .candidate-value .value-number { font-size: 21px; }
#analysis .candidate-stats { font-variant-numeric: tabular-nums; color: var(--text-body); }
#analysis .analysis-warnings { padding-top: 10px; border-top: 1px solid var(--border-color); }

/* Compact candidates: preview and execution are separate controls. */
#analysis .candidate-list { display: flex; flex-direction: column; gap: 6px; margin-block: 8px; padding: 0; list-style: none; }
#analysis .candidate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 4px 6px; padding: 5px; margin: 0; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-inner); }
#analysis .candidate-row .candidate-preview { grid-column: 1; grid-row: 1; }
#analysis .candidate-row .candidate-metrics { grid-column: 1; grid-row: 2; padding-inline: 6px; }
#analysis .candidate-row .candidate-execute { grid-column: 2; grid-row: 1 / 3; width: auto; white-space: nowrap; justify-content: center; }
#analysis .candidate-row.recommended, #analysis .candidate-row[aria-selected="true"], #analysis .candidate-row:has(.candidate-preview[aria-pressed="true"]) { border-color: var(--accent-gold); }
#analysis .candidate-preview { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; width: 100%; padding: 6px; background: transparent; color: var(--text-body); border-color: transparent; box-shadow: none; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.45; }
#analysis .candidate-preview:hover:not(:disabled) { background: var(--bg-card-hover); }
#analysis .candidate-execute { min-height: 44px; align-self: center; padding: 6px 9px; font-size: .75rem; }
#analysis .candidate-metrics { display: flex; flex-wrap: wrap; gap: 3px 8px; color: var(--text-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.5; }
#analysis .selection-review { border-block: 1px solid var(--border-color); padding-block: 8px; margin-block: 8px; font-size: .78rem; line-height: 1.5; }
/* Action labels draw the real gem for a taken cell; the coordinate stays in the
   tooltip and as visually hidden text, so the honest fallback and the readable
   text form are both still there. */
.action-cells { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; vertical-align: -3px; }
.action-gem { width: 14px; height: 14px; }
.action-cell-sep { width: 2px; }
#analysis details > summary { cursor: pointer; color: var(--text-muted); padding-block: 6px; font-size: .76rem; }

/* Inline record timeline reuses the observation library; it is not a game driver. */
body.mode-replay #ai-step, body.mode-replay #actionBarButtons, body.mode-replay #optional-actions, body.mode-replay #automation-status, body.mode-replay [aria-labelledby="observation-settings-title"] { display: none; }
/* Replay transport rides the header rail; the settings hold the archive tools. */
.replay-controls { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 340px; min-width: 0; }
.replay-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; padding: 0; }
.replay-icon svg { width: 16px; height: 16px; fill: currentColor; }
.replay-icon .icon-pause, .replay-icon[aria-pressed="true"] .icon-play { display: none; }
.replay-icon[aria-pressed="true"] .icon-pause { display: inline; }
.replay-controls #replay-slider { flex: 1 1 140px; min-width: 96px; accent-color: var(--accent-gold); padding-inline: 0; }
.replay-controls .replay-meta { flex: 0 1 auto; max-width: 100%; margin: 0; }
.replay-settings { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.replay-settings .replay-library { flex: 1 1 100%; }
.replay-settings > .replay-status { margin: 0; }
.replay-settings > p { margin: 0; }
.record-heading { flex-wrap: wrap; gap: 6px; }
.record-heading .controls { flex-wrap: wrap; gap: 4px; }
.record-heading button { min-height: 32px; padding: 3px 6px; font-size: 12px; }
.replay-archive-tools { margin-block: 8px; }
.replay-archive-tools > summary { cursor: pointer; padding-block: 8px; font-size: 12px; }
.replay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
.replay-toolbar > * { min-width: 0; max-width: 100%; }
.replay-library { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 300px; min-width: 0; }
.replay-library select { flex: 1; min-width: 0; width: 100%; }
.replay-meta { color: var(--text-muted); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.replay-status { color: var(--accent-gold); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.replay-status:empty { display: none; }
#history-settings button, #history-settings select, #history-settings input { min-height: 36px; }
#history-settings button, .nav-tab, .table-header button { touch-action: manipulation; }

/* Native modal: browser focus containment and Escape, with explicit return focus. */
#settings-dialog, #card-action-dialog { color: var(--text-body); background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); margin: auto; overflow: auto; box-shadow: 0 16px 60px #0009; }
#settings-dialog::backdrop, #card-action-dialog::backdrop { background: #000b; }
#settings-dialog { overscroll-behavior: contain; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dialog-heading h2 { font-size: 1rem; color: var(--accent-gold); }
.dialog-heading button { min-height: 40px; }
.settings-section { padding-block: 14px; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.settings-section h3 { font-size: .88rem; margin-bottom: 10px; }
.settings-section p { margin-top: 8px; max-width: 76ch; }
.settings-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; min-width: 0; }
.settings-row label { min-width: 0; }
.settings-row select, .settings-row input[type="number"] { min-height: 40px; }
.settings-row .engine-control { flex: 1 1 260px; }
.settings-section > summary { color: var(--text-body); font-size: .85rem; cursor: pointer; padding-block: 3px; }
.settings-section[open] > summary { margin-bottom: 12px; }
.import-tools label { display: flex; flex-direction: column; align-items: stretch; margin: 10px 0; }
.import-tools textarea { width: 100%; resize: vertical; }
.import-tools button, .action-list button { min-height: 40px; }
.filter { margin-bottom: 10px; }
.action-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; padding: 3px; }
.action-list button { font-size: .8rem; background: var(--bg-card); border-color: var(--border-color); color: var(--text-body); }
.action-list button:hover:not(:disabled) { background: var(--bg-card-hover); }
#action-count { color: var(--text-muted); font-size: .76rem; font-weight: 400; }
.drawer-hint { margin-left: 8px; }
#preferences-status { padding-top: 10px; }
#card-action-dialog { width: min(520px, calc(100vw - 28px)); }
.modal-box { max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal-options { flex-wrap: wrap; }
.modal-options h3 { flex-basis: 100%; font-size: .85rem; color: var(--text-muted); }
.modal-options button, .modal-footer button { min-height: 40px; }
.reserve-choice { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; }
#market .card-item[role="button"], .deck-pile[role="button"] { cursor: pointer; }
#market .card-item:focus-visible { z-index: 20; outline-offset: -3px; }
footer { padding: 10px 14px 18px; font-size: .72rem; color: var(--text-muted); text-align: center; }

@media (max-width: 1380px) {
  .workspace { grid-template-columns: minmax(240px, .85fr) minmax(0, 2.5fr) minmax(260px, .85fr); }
}
@media (max-width: 1160px) {
  .workspace { grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); }
  .insight-column { grid-column: 2; }
  .players-column { grid-column: 1; grid-row: 1 / 3; }
  .play-area { grid-column: 2; }
}
/* Desktop fit: intrinsic header + footer, remaining height split between table and market.
   Nothing on the game surface is clipped; only long side-panel content scrolls. */
@media (min-width: 1180px) {
  body.mode-play { height: 100dvh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  body.mode-play main { min-height: 0; height: 100%; }
  body.mode-play .workspace { height: 100%; min-height: 0; grid-template-columns: minmax(224px, .85fr) minmax(0, 2.8fr) minmax(252px, .9fr); gap: 10px; align-items: stretch; }
  body.mode-play .play-area { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: minmax(0, 52fr) minmax(0, 48fr); gap: 8px; align-items: stretch; }
  body.mode-play .board-area { padding: 6px; min-height: 0; justify-content: center; }
  body.mode-play .board-stage-wrap { height: 100%; min-height: 0; container-type: size; }
  body.mode-play #board { width: min(100cqw, 100cqh); height: auto; padding: 6px; gap: 4px; border-radius: 8px; }
  body.mode-play .table-guidance { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) clamp(40px, 5.5vh, 72px) clamp(108px, 13vh, 180px); gap: 6px; }
  body.mode-play .operation-strip { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 1px; }
  #actionBarButtons:has(.inline-card-selection) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; position: sticky; top: 0; z-index: 2; background: var(--bg-panel); padding: 4px; border-radius: 4px; }
  #actionBarButtons .inline-card-selection { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; }
  #actionBarButtons .inline-card-selection > strong { grid-column: 1 / -1; overflow-wrap: anywhere; }
  #actionBarButtons .inline-card-selection > span { grid-column: 1; }
  #actionBarButtons .inline-card-selection > .payment-choice { grid-column: 1; grid-row: 2; }
  #actionBarButtons .inline-card-selection > button { grid-column: 2; grid-row: 2; }
  #actionBarButtons .inline-card-selection > .muted { grid-column: 1 / -1; grid-row: 3; }
  .turn-guide-banner { padding: 6px 8px; gap: 8px; margin-bottom: 0; }
  .guide-text { font-size: .76rem; gap: 6px; }
  #actionBarButtons { gap: 8px; }
  #actionBarButtons button, .optional-actions button { padding-inline: 8px; font-size: .75rem; }
  .optional-actions { gap: 8px; padding-top: 6px; }
  #message, #automation-status { font-size: 12px; line-height: 1.4; min-height: 0; }
  #message:empty, #automation-status:empty { display: none; }
  .board-side-info { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 6px; }
  .privilege-rules-panel { height: 100%; min-height: 0; padding: 2px; display: grid; place-items: center; }
  .privilege-rules-img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
  .side-info-card { padding: 2px; gap: 1px; justify-content: center; }
  .side-info-card .bag-icon { width: 18px; height: 19px; }
  .side-info-label { font-size: 12px; }
  .privilege-scrolls { min-height: 24px; }
  .privilege-scroll { width: 16px; height: 24px; flex-basis: 16px; }
  .royal-pool { min-height: 0; padding: 5px 6px; gap: 4px; }
  .royal-title { margin-top: 0; font-size: 12px; padding-bottom: 3px; flex: 0 0 auto; }
  .royal-title .panel-hint { font-size: 12px; }
  .royals-row { min-height: 0; flex: 1; align-items: center; padding: 1px 0; gap: 6px; }
  #royalsContainer .royal-item { height: 100%; width: auto; max-width: calc((100% - 18px) / 4); max-height: 152px; aspect-ratio: 100 / 152; flex: 0 1 auto; }
  body.mode-play .market-area { min-height: 0; padding: 5px 6px; gap: 0; }
  body.mode-play #market { height: 100%; min-height: 0; container-type: size; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; --market-card-width: min(140px, calc((100cqh - 42px) / 4.56), calc((100cqw - 110px) / 6)); }
  body.mode-play #market .tier-row { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 4px 6px; gap: 0; }
  body.mode-play #market .cards-flex { min-height: 0; height: 100%; align-items: center; justify-content: center; padding: 0; gap: 0; }
  body.mode-play #market .deck-pile { margin-right: 0; }
  body.mode-play #market .card-item { width: calc(100% - var(--market-gap)); height: auto; max-height: 100%; border-radius: 4px; }
  body.mode-play .players-column, body.mode-play .players-panel { height: 100%; min-height: 0; }
  body.mode-play .players-grid { min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin; align-content: start; gap: 8px; }
  .player-card { padding: 6px; gap: 4px; }
  .player-summary { gap: 2px; }
  .player-name { font-size: 12px; line-height: 1.5; }
  .player-header { min-height: 22px; padding-bottom: 2px; }
  .victory-progress { padding: 4px 5px; gap: 5px; }
  .progress-row { font-size: 12px; line-height: 1.35; }
  .progress-row b { font-size: 1rem; }
  .progress-bar { height: 5px; }
  .compact-resources { padding-block: 2px; gap: 3px; }
  .tableau-by-color-grid, .player-details .tableau-by-color-grid { gap: 3px; }
  .compact-resources .resource-caption { font-size: 12px; margin-bottom: 0; }
  .resource-chip { gap: 3px; }
  .resource-points { min-height: 16px; font-size: .75rem; }
  .resource-discount { min-height: 30px; font-size: 1.05rem; border-radius: 5px; }
  .compact-resources .resource-token.token { width: 28px; height: 28px; min-height: 28px; font-size: .85rem; }
  .compact-resources button.resource-token.token { width: 100%; height: 44px; min-height: 44px; max-width: 44px; }
  .player-bottom-cards-area { padding: 3px 5px; }
  .player-bottom-cards-area .bottom-cards-row, .reserved-cards-container { min-height: 18px; }
  .empty-cards-placeholder { padding: 0 2px; line-height: 1.5; }
  .player-details-toggle { min-height: 44px; margin-top: 0; flex-shrink: 0; }
  .player-details { max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
  body.mode-play .insight-column { min-height: 0; height: auto; max-height: none; }
  body.mode-play .analysis-area { min-height: 0; height: auto; max-height: none; flex: 0 0 auto; }
  body.mode-play #analysis-content { min-height: 0; height: auto; max-height: none; overflow: visible; }
  .analysis-heading { flex-shrink: 0; }
  .analysis-heading .controls { flex-wrap: wrap; }
  .analysis-heading button, .analysis-toggle { min-height: 44px; flex-shrink: 0; }
  body.mode-play .game-log-panel { min-height: 0; max-height: none; flex: 0 0 auto; }
  footer { padding: 2px 14px 4px; font-size: .65rem; line-height: 1.4; }
}
/* Low desktop: give the three market tiers the larger share. The small props and
   royals sit together under the primary controls instead of consuming two rows. */
@media (min-width: 1180px) and (max-height: 879px) {
  body.mode-play .play-area { grid-template-rows: minmax(0, 45fr) minmax(0, 55fr); }
  body.mode-play .table-guidance { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) 114px; }
  body.mode-play .operation-strip { grid-column: 1 / -1; }
  .table-guidance .board-side-info { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); gap: 4px; }
  .table-guidance .privilege-rules-panel { grid-column: 1 / -1; grid-row: 1; }
  .table-guidance .side-info-card { flex-direction: row; gap: 4px; padding: 1px 3px; }
  .table-guidance .side-info-meta { gap: 0; }
  .table-guidance .royal-pool { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  .table-header { padding: 10px; }
  .header-heading h1 { font-size: .95rem; }
  .workspace { display: flex; flex-direction: column; }
  .workspace > * { width: 100%; }
  .play-area { order: 0; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .players-column { order: 1; }
  .insight-column { order: 2; }
  .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-container { padding: 6px; gap: 4px; }
  .panel { padding: 8px; }
  .board-side-info { gap: 5px; }
  .turn-guide-banner { padding: 8px; }
  #actionBarButtons button, .optional-actions button, .analysis-heading button, .analysis-toggle, .player-details-toggle { min-height: 44px; }
}
@media (max-width: 560px) {
  main { padding: 8px; }
  .header-heading h1 { flex: 1 1 100%; }
  .header-heading .nav-tabs { flex: 0 0 auto; }
  .header-actions { order: 1; margin-left: auto; }
  .header-heading .nav-tab { min-height: 44px; padding: 8px 10px; font-size: .78rem; }
  .header-actions button { padding-inline: 10px; }
  .table-header button, .table-header select, .table-header .auto-play-toggle { min-height: 44px; }
  .seat-controller { flex: 1 1 100%; gap: 6px; flex-wrap: wrap; }
  .seat-controller .controller-control { flex: 0 0 auto; }
  .seat-controller .controller-control select { width: 100px; }
  .seat-controller .time-control-group { flex: 1 1 auto; flex-wrap: nowrap; }
  .seat-controller select[id$="-preset"] { width: 80px; }
  .seat-controller .custom-ms input { width: 66px; }
  .quick-actions { flex-wrap: wrap; flex:1 1 100%; min-width:0; max-width:100%; }
  .play-area { grid-template-columns: minmax(0, 1fr); }
  .board-area, .market-area { grid-column: 1; }
  .board-container { max-width: 440px; }
  .board-side-info { grid-template-columns: 2fr 1fr 1fr; }
  .panel-hint { display: none; }
  .royal-title .panel-hint { display: inline; }
  .market-area { padding: 6px; }
  .tier-row { padding: 6px 0; }
  #market { --market-gap: 4px; --market-card-width: max(44px, calc((100% - 24px) / 6)); }
  #market .deck-count-badge { font-size: 12px; }
  .players-grid { grid-template-columns: minmax(0, 1fr); }
  .player-card { padding: 8px; }
  #settings-dialog { padding: 14px; width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .settings-row { align-items: stretch; }
  .settings-row .engine-control { flex-basis: 100%; }
  .settings-row select { flex: 1; }
  .settings-section .controls { gap: 8px; }
  .drawer-hint { display: block; margin: 4px 0 0 14px; }
  .game-log { max-height: 320px; }
  .record-heading button { min-height: 44px; }
  .replay-library { flex-basis: 100%; }
  .replay-controls { flex-basis: 100%; }
  .replay-controls .replay-meta { flex-basis: 100%; }
  #history-settings button, #history-settings select, #history-settings input { min-height: 44px; }
}
/* Whole-row advice previews remain read-only and separate from real intent. */
#analysis .candidate-row .candidate-preview { grid-row: 1 / 3; }
#analysis .candidate-row .candidate-preview .candidate-metrics { padding: 0; }
#analysis .candidate-metric-details { display: flex; flex-direction: column; gap: 3px; }
#analysis .candidate-metric-details > span { display: block; }
.card-item.ai-preview-card { outline: 3px dashed var(--accent-gold); outline-offset: -3px; }
.analysis-primary { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; }
.analysis-primary strong { color: var(--accent-gold); font-size: 1.15rem; }
.analysis-primary small { color: var(--text-muted); }
body.mode-replay #royalsContainer { min-height: 122px; flex: 0 0 auto; }
body.mode-replay #royalsContainer .royal-item { height: auto; width: min(80px, calc((100% - 24px) / 4)); max-width: none; flex: 0 0 auto; aspect-ratio: 100 / 152; }
#replay-study-root { min-width: 0; margin-top: 12px; }
#replay-study-root svg { display: block; width: 100%; height: auto; }

/* Progressive disclosure: the board and actionable candidates stay primary. */
.analysis-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.analysis-result-heading button { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
#analysis .analysis-state { font-size: .8rem; }
#analysis-source { display: block; font-size: .75rem; }
#analysis .candidate-preview { gap: 2px; }
#analysis .candidate-metrics { font-size: .75rem; }
#cache-status:empty { display: none; }
body.modal-open { overflow: hidden; }
.analysis-detail-modal { padding: 16px; overscroll-behavior: contain; }
.analysis-detail-modal .modal-box { width: min(760px, 100%); max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; }
.analysis-detail-modal .modal-title { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.analysis-detail-modal .modal-footer { position: sticky; bottom: 0; background: var(--bg-card); padding-block: 10px; }
.analysis-detail-modal .modal-footer button { min-width: 88px; min-height: 44px; }
.analysis-detail-modal h3 { font-size: 1rem; margin: 18px 0 8px; }
.analysis-detail-modal h4 { font-size: .9rem; margin: 0 0 8px; }
.analysis-detail-modal p { font-size: .88rem; line-height: 1.6; margin: 8px 0; }
.analysis-metric-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); gap: 8px 16px; font-size: .85rem; }
.analysis-metric-grid dt { color: var(--text-muted); }
.analysis-metric-grid dd { margin: 0; font-variant-numeric: tabular-nums; }
.analysis-detail-candidate { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.analysis-detail-modal .value-number { font-size: 1.35rem; color: var(--accent-gold); }
.analysis-detail-modal .value-label { font-weight: 600; }
#replay-study-root { padding: 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); }
.replay-study-header h3 { margin: 0; font-size: 1rem; }
.replay-study p { margin: 0; font-size: .85rem; }
.replay-study-trends { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.replay-study-trends > h4, .replay-study-trends > p { grid-column: 1 / -1; margin: 0; }
.replay-study-chart h4 { margin: 0; font-size: .85rem; }
.replay-study-chart svg { max-height: 210px; }
.replay-study-decision { border-top: 1px solid var(--border-color); padding-top: 12px; }
.replay-study-decision h4 { margin: 0; }
@media (max-width: 600px) {
 .analysis-detail-modal { padding: 8px; }
 .analysis-detail-modal .modal-box { max-height: calc(100dvh - 16px); padding: 16px; }
 #replay-study-root { padding: 10px; }
 .replay-study-controls button { flex: 1 1 auto; }
}
/* Landscape play: a tall single column wastes the wider axis, so the same snapshot
   flows into two columns and the metric sheet uses four tracks. Portrait keeps the
   one-column reading order. */
@media (min-width: 760px) and (orientation: landscape) {
 .analysis-detail-modal .modal-box { width: min(1180px, 100%); }
 /* The shared modal body is a flex column; multi-column flow needs block layout,
    so the flex gap becomes a child margin. */
 .analysis-detail-modal .modal-body { display: block; column-count: 2; column-gap: 32px; column-fill: balance; }
 .analysis-detail-modal .modal-body > * { margin-block: 0 8px; break-inside: avoid; }
 .analysis-detail-modal .modal-body > h3, .analysis-detail-modal .modal-body > h4 { break-after: avoid; }
 .analysis-detail-modal .analysis-metric-grid { grid-template-columns: minmax(0, max-content) minmax(96px, 1fr); column-gap: 10px 14px; }
 .analysis-detail-modal .analysis-detail-candidate { padding: 8px 0; }
 .analysis-detail-modal h3 { margin: 14px 0 6px; }
}
@media (min-width: 1600px) and (orientation: landscape) {
 .analysis-detail-modal .modal-body { column-count: 3; }
}
.deck-possibilities { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; max-height: 60vh; overflow-y: auto; padding: 6px; }
.deck-possibilities .card-item { flex: 0 0 95px; width: 95px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* A single quiet rail under the header; fixed y-scale, responsive x-window. */
#win-trend { min-width: 0; margin: 0 14px 2px; }
.win-trend-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; height: 16px; line-height: 16px; }
.win-trend-heading h2 { font-size: 12px; margin: 0; color: var(--text-body); }
.win-trend-heading small { font-size: 12px; }
.win-trend-heading small:last-child { margin-left: auto; }
.win-trend-plot { min-width: 0; }
.win-trend-plot svg { display: block; width: 100%; max-height: 82px; overflow: visible; color: var(--text-muted); }
.win-trend-plot g[role="button"] { cursor: pointer; }
.win-trend-plot g[role="button"]:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.win-trend-empty { margin: 0; padding: 3px 0; font-size: 12px; line-height: 1.4; }
.auto-analyze-toggle { flex-direction: row; align-items: center; gap: 5px; font-size: .75rem; white-space: nowrap; }
.analysis-heading { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding-bottom: 6px; }
.analysis-heading h2 { font-size: .78rem; white-space: nowrap; }
.analysis-heading .controls { width: auto; flex-wrap: nowrap; gap: 4px; }
.analysis-heading button, .analysis-heading .analysis-toggle { width: auto; min-width: 32px; min-height: 32px; padding: 4px 6px; font-size: 12px; margin: 0; border: 1px solid var(--border-color); }
#analysis .analysis-state { margin: 3px 0; }
#clear-selection { width: auto; min-width: 32px; min-height: 30px; padding: 3px 6px; font-size: 12px; align-self: center; }
#replenish-board { white-space: nowrap; }
.game-log-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.game-log-entry { gap: 2px 5px; padding: 1px 0; }
.game-log-entry button { font-size: 11px; line-height: 1.35; min-height: 24px; padding: 2px 4px; text-align: left; white-space: normal; }
.game-log .log-tokens { gap: 2px; font-size: 11px; }
.game-log .token { width: 14px; height: 14px; flex-basis: 14px; }
@media (min-width: 1180px) {
 body.mode-play { grid-template-areas: "header" "trend" "table" "footer"; grid-template-rows: auto auto auto auto; }
 body.mode-play .table-header { grid-area: header; }
 body.mode-play #win-trend { grid-area: trend; }
 body.mode-play main { grid-area: table; }
 body.mode-play footer { grid-area: footer; }
}
@media (max-width: 760px), (pointer: coarse) {
 .analysis-heading button, .analysis-heading .analysis-toggle { min-width: 44px; min-height: 44px; }
 #clear-selection { min-width: 44px; min-height: 44px; }
 .game-log-entry button { min-height: 44px; }
}
@media (max-width: 560px) {
 #win-trend { margin-inline: 8px; }
 .header-actions { flex-wrap: wrap; gap: 4px 8px; }
 .auto-analyze-toggle { min-height: 44px; }
}

.deck-gallery-modal { padding: 16px; }
.deck-gallery-modal .modal-box { width: calc(100vw - 32px); max-width: 1680px; max-height: calc(100dvh - 32px); padding: 6px; border-width: 1px; gap: 4px; overflow: visible; }
.deck-gallery-modal .modal-title { flex: 0 0 auto; font-size: 1rem; margin: 0; padding: 0 2px 4px; gap: 8px; }
.deck-gallery-modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 4px; }
.deck-gallery-modal .modal-body > p { font-size: 12px; line-height: 1.4; margin: 0 4px 4px; }
.deck-gallery-modal .deck-possibilities { display: grid; justify-content: center; align-content: start; max-height: none; overflow: visible; padding: 4px; }
.deck-gallery-modal .deck-possibilities .card-item { width: var(--gallery-card-width, 60px); height: auto; aspect-ratio: 100 / 152; margin: 0; flex: none; min-width: 0; }
.deck-gallery-modal .deck-possibilities .card-item:hover { transform: none; }
.deck-gallery-modal .modal-footer, .deck-gallery-modal .modal-options:empty { display: none; }
.deck-gallery-close { flex: 0 0 auto; min-width: 44px; min-height: 28px; padding: 3px 7px; font-size: 12px; background: var(--bg-inner); color: var(--text-body); border: 1px solid var(--border-color); box-shadow: none; }
@media (max-width: 600px) {
 .deck-gallery-modal { padding: 12px; }
 .deck-gallery-modal .modal-box { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 4px; }
 .deck-gallery-modal .modal-title { font-size: .88rem; }
}
@media (max-width: 760px), (pointer: coarse) {
 .deck-gallery-close { min-width: 44px; min-height: 44px; }
}

@media (min-width: 1180px) and (max-height: 879px) {
 body.mode-play .play-area { grid-template-rows: minmax(270px, 48fr) minmax(0, 52fr); }
}

#actionBarButtons #clear-selection { min-width: 32px; min-height: 30px; padding: 3px 6px; }
@media (max-width: 760px), (pointer: coarse) { #actionBarButtons #clear-selection { min-width: 44px; min-height: 44px; } }

/* Morning desktop density: retain the EL table, not a scaled page. */
.guide-badge { background: transparent; color: var(--text-muted); border: 0; padding: 0; box-shadow: none; font-size: 12px; }
.guide-text { flex-wrap: wrap; gap: 4px 8px; }
.optional-actions { border-top: 0; padding-top: 0; gap: 6px; }
.optional-actions button { display: inline-flex; align-items: center; gap: 4px; }
.optional-actions .privilege-scroll { width: 13px; flex-basis: 13px; height: 21px; }
.turn-guide-banner { gap: 6px; }
#actionBarButtons:has(.inline-card-selection) { position: static; display: flex; padding: 0; }
#actionBarButtons .inline-card-selection { flex-basis: 100%; }
body.mode-play .players-column, body.mode-play .players-panel, body.mode-play .players-grid { height: auto; max-height: none; overflow: visible; }
body.mode-play .player-details, body.mode-play .operation-strip { max-height: none; overflow: visible; }
.player-details { max-height: none; overflow: visible; }
@media (min-width: 761px) and (pointer: fine) {
  #brand-home, .header-heading .nav-tab, .table-header button, .seat-controller select, .seat-controller .custom-ms input, .auto-play-toggle, .check-label { min-height: 28px; }
  .table-header { gap: 4px 8px; }
  .table-header button, .header-heading .nav-tab { padding: 3px 7px; }
  .seat-controller select, .seat-controller .custom-ms input { padding-block: 3px; }
  #actionBarButtons button, #actionBarButtons .payment-choice { min-height: 32px; padding-block: 3px; }
  .optional-actions button, #clear-selection, #actionBarButtons #clear-selection, .player-details-toggle { min-height: 28px; padding: 3px 6px; font-size: 12px; }
  .analysis-heading button, .analysis-heading .analysis-toggle, #game-log-toggle,
  #settings-dialog button, #settings-dialog .settings-row select, #settings-dialog .settings-row input[type="number"],
  .modal-options button, .modal-footer button { min-height: 28px; padding-block: 3px; }
  #settings-dialog button { font-size: 12px; }
  #analysis .candidate button.candidate-execute { min-height: 32px; padding-block: 3px; }
  .compact-resources button.resource-token.token { height: 32px; min-height: 32px; max-width: 32px; }
  #analysis .candidate-execute { min-height: 36px; }
  #analysis .candidate-preview { min-height: 36px; }
  .player-name, .progress-row, .compact-resources .resource-caption, .panel-hint { font-size: 12px; }
}
@media (min-width: 1180px) {
  body.mode-play { height: auto; min-height: 100dvh; }
  body.mode-play main { height: auto; }
  body.mode-play .workspace { height: auto; align-items: start; }
  body.mode-play .play-area { height: max(560px, calc(100dvh - 148px)); }
  body.mode-play .table-guidance { grid-template-rows: auto clamp(40px, 5.5vh, 72px) clamp(108px, 13vh, 180px); align-content: start; }
  body.mode-play .insight-column { height: auto; max-height: none; }
  body.mode-play .players-column { height: max(560px, calc(100dvh - 148px)); }
}
@media (min-width: 1180px) and (max-height: 879px) {
  body.mode-play .table-guidance { grid-template-rows: auto 114px; }
}
/* Low-height / enlarged desktop: preserve content and let the document scroll. */
@media (max-height: 699px) and (min-width: 1180px) {
  body.mode-play .play-area { height: auto; grid-template-rows: auto auto; }
  body.mode-play .board-stage-wrap { height: auto; container-type: normal; }
  body.mode-play #board { width: 100%; }
  body.mode-play .table-guidance { grid-template-rows: auto 114px; }
  body.mode-play #market { height: auto; container-type: normal; grid-template-rows: auto auto auto; --market-card-width: min(90px, calc((100% - 48px) / 6)); }
  body.mode-play #market .cards-flex { height: auto; }
  body.mode-play .insight-column { height: auto; }
}
@media (max-width: 760px), (pointer: coarse) {
  .optional-actions { gap: 8px; }
  .optional-actions button, .player-details-toggle { min-height: 44px; }
}

/* The right column takes the height of the row it sits in, and the public record
   always owns the height AI analysis leaves over, so no space under the record is
   wasted. Open analysis keeps at most half of that column and scrolls inside, so the
   record still owns its half; a folded record leaves the whole column to analysis. */
.game-log-panel { display: flex; flex-direction: column; min-height: 0; }
.game-log-panel .panel-title { flex-shrink: 0; }
body.mode-play:not(.mode-replay) .game-log-panel.log-folded { flex: 0 0 auto; min-height: 0; }
#analysis, #analysis-content { height: auto; max-height: none; overflow: visible; }
#game-log { max-height: 180px; overflow-y: auto; }
@media (min-width: 1180px) {
  /* Definite column height, so the record scrolls inside it instead of stretching
     the whole row: same height contract the other desktop columns use. */
  body.mode-play:not(.mode-replay) .insight-column { align-self: stretch; height: max(560px, calc(100dvh - 148px)); min-height: 0; }
  body.mode-play:not(.mode-replay) .analysis-area { display: flex; flex-direction: column; flex: 0 1 auto; height: auto; max-height: none; min-height: 0; }
  body.mode-play:not(.mode-replay) .analysis-area > #analysis-content { flex: 1 1 0; min-height: 0; }
  /* The training comparison is a sibling of #analysis-content and has an intrinsic
     height (heading, three paragraphs, two buttons). Left at auto it wins the flex
     negotiation and the conclusion column collapses to 0px, so the recommendation
     disappears the moment a comparison exists. Give the conclusion a floor and cap
     the comparison: both scroll inside themselves and the conclusion stays readable
     above the comparison. */
  body.mode-play:not(.mode-replay) .analysis-area > #training-review:not([hidden]) {
    flex: 0 1 auto; min-height: 44px; max-height: 40%; overflow-y: auto; scrollbar-width: thin;
  }
  body.mode-play:not(.mode-replay) .analysis-area:has(#training-review:not([hidden])) > #analysis-content {
    min-height: 50%;
  }
  /* An empty record is only a placeholder line. Reserving half the column for it
     shrank the conclusion for no content, so before the first real entry the record
     collapses to its title and analysis owns the rest of the column. Once an entry
     exists the equal split below applies again. (:has() cannot nest, so the empty
     state is read off the placeholder paragraph the page renders instead.) */
  body.mode-play:not(.mode-replay) .insight-column:has(#game-log > p.muted) .game-log-panel { flex: 0 0 auto; }
  body.mode-play:not(.mode-replay) .insight-column:has(#game-log > p.muted) .analysis-area:has(#analysis-content:not([hidden])) { flex: 1 1 0; }
  body.mode-play:not(.mode-replay) .analysis-area:has(#analysis-content:not([hidden])) { flex: 1 1 0; max-height: none; }
  body.mode-play:not(.mode-replay) .analysis-heading { flex-shrink: 0; }
  body.mode-play:not(.mode-replay) #analysis-content:not([hidden]) { overflow-y: auto; scrollbar-width: thin; }
  body.mode-play:not(.mode-replay) .game-log-panel { flex: 1 1 0; height: auto; max-height: none; min-height: 0; }
  body.mode-play:not(.mode-replay) .game-log-panel.log-folded { flex: 0 0 auto; }
  body.mode-play:not(.mode-replay) .insight-column:has(.game-log-panel.log-folded) .analysis-area { flex: 1 1 auto; max-height: none; }
  body.mode-play:not(.mode-replay) #game-log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
}
.public-log-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.public-log-tools button { font-size: 12px; }
.public-log-details { max-height: none; overflow: visible; }
#game-log-toggle { min-height: 28px; padding: 3px 6px; font-size: 12px; }
@media (max-width: 760px), (pointer: coarse) { #game-log-toggle { min-height: 44px; } }

.decision-detail-modal .candidate-preview { width: 100%; text-align: left; white-space: normal; background: var(--bg-inner); border: 1px solid var(--border); color: var(--text-body); border-radius: 4px; padding: 6px 8px; font-size: 12px; line-height: 1.55; }
.decision-detail-modal .candidate-row.adopted .candidate-preview { border-color: var(--accent-gold); }
.decision-adopted, .decision-chosen { color: var(--accent-gold); }

/* DY integration control only; retain the compact layout and upstream touch fixes. */
#settings-dialog #dy-execution-location { min-height: 44px; max-width: 100%; font-size: max(12px, .85rem); }
#dy-location-hint { font-size: max(12px, .8rem); overflow-wrap: anywhere; }

/* Phone: peer seat groups share a row; touch areas remain 44px. */
@media (max-width: 760px) {
 .seat-controllers { display: flex; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; gap: 8px; order: 2; }
 .seat-controller { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); align-items: flex-start; }
 .seat-controller .controller-control { width: 100%; }
 .seat-controller .controller-control select { flex: 1 1 auto; width: calc(100% - 24px); }
 .seat-controller .time-control-group { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }
}
/* Historical choices first; full engine diagnostics stay available, not pre-expanded. */
.decision-detail-modal #modalBody p { margin: 6px 0; line-height: 1.5; }
.decision-detail-modal .decision-source, .decision-detail-modal .decision-context { font-size: 12px; color: var(--text-muted); }
.decision-detail-modal .decision-summary { padding: 4px 8px; border-left: 2px solid var(--accent-gold); background: var(--bg-inner); }
.decision-detail-modal .candidate-row { display: block; margin-block: 6px; }
.decision-detail-modal .candidate-label { display: block; font-weight: 600; }
.decision-detail-modal .candidate-metrics { display: block; color: var(--text-muted); }
.decision-detail-modal .saved-engine-metrics { margin-top: 10px; }
.decision-detail-modal .saved-engine-metrics > summary { padding: 8px 0; color: var(--text-muted); cursor: pointer; }

/* Wave 1: integration-only readable labels and explicit pointer-specific cascade. */
/* Generated private-reserve/points badges use inline 0.65rem; keep their markup untouched. */
.player-card .reserved-cards-container .card-item > span[style*="font-size"],
.player-card .tableau-col-header > span[style*="font-size"] { font-size: 12px !important; }
.area-label, .empty-cards-placeholder, .acting-indicator, .next-indicator,
.gem-picker-sub, .gem-picker-stats, .gem-stat-line .stat-num.bonus-highlight,
.modal-drag-hint, .pending-reserve-tag { font-size: 12px; }
/* The trend renderer supplies inline SVG presentation sizes; CSS wins without altering data. */
#win-trend svg text { font-size: 12px; }
.compact-resources .resource-caption { font-size: 12px; line-height: 1.5; }
.compact-resources .resource-total { font-size: 18px; font-weight: 800; color: var(--text-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 761px) and (pointer: fine) {
  #analysis .candidate button.candidate-execute { min-height: 32px; }
  #analysis .candidate button.candidate-preview { min-height: 32px; }
}
@media (max-width: 760px), (pointer: coarse) {
  #analysis .candidate button.candidate-execute,
  #analysis .candidate button.candidate-preview { min-width: 44px; min-height: 44px; }
  #settings-dialog .dialog-heading button,
  #settings-dialog > #settings-reset,
  #settings-dialog .settings-row select,
  #settings-dialog .settings-row input[type="number"] { min-width: 44px; min-height: 44px; }
}
/* Wave 2 human action shell: same existing palette/art, only the choices scroll.
   Heading/close and confirmation remain outside the scroll region on small screens. */
.shared-action-modal { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.shared-action-modal .modal-box { display: flex; flex-direction: column; width: min(560px, 100%); max-width: 100%; max-height: calc(100dvh - 32px); padding: 16px; overflow: hidden; }
.shared-action-modal .modal-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; margin: 0 0 12px; font-size: 18px; }
.shared-action-modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; scroll-padding-block: 8px; overflow-wrap: anywhere; }
.shared-action-modal .modal-body > .card-item { margin: 0 auto 12px; }
.shared-action-modal .modal-body p, .shared-action-modal label { font-size: 14px; line-height: 1.5; }
.shared-action-modal .modal-body .muted { font-size: 12px; }
.shared-action-modal label { display: block; }
.shared-action-modal select { display: block; width: 100%; max-width: 100%; min-width: 0; margin-block: 8px; }
.shared-action-modal .modal-options:empty { display: none; }
.shared-action-modal .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; margin: 12px 0 0; padding: 0; }
.shared-action-modal button, .shared-action-modal select { min-height: 36px; min-width: 36px; font-size: 14px; }
.shared-action-modal .action-token-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 8px; }
.shared-action-modal .action-token-column { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 48px; }
.shared-action-modal .action-token-column:empty { border: 1px dashed var(--border-color); border-radius: 8px; }
.shared-action-modal .action-token-options button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 4px; }
.shared-action-modal .action-token-options .token { position: static; flex: none; width: 36px; height: 36px; }
.shared-action-modal .action-token-choice[aria-pressed="true"]::after { position: absolute; right: 2px; bottom: 0; font-size: 14px; color: var(--accent-gold); font-weight: 800; }
#actionBarButtons[hidden], #optional-actions[hidden] { display: none; }
@media (max-width: 380px) {
 .shared-action-modal .action-token-options { gap: 4px; }
 .shared-action-modal .action-token-options button { min-width: 0; }
 .shared-action-modal .action-token-options .token { width: 32px; height: 32px; }
}
.shared-action-modal button[aria-pressed="true"] { outline: 2px solid var(--accent-gold); outline-offset: -2px; background: var(--bg-inner); }
.shared-action-modal button[aria-pressed="true"]::after { content: '✓'; }
.shared-action-modal :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 760px) {
 .shared-action-modal button, .shared-action-modal select { min-width: 44px; min-height: 44px; }
 .shared-action-modal .modal-box { padding: 12px; max-height: calc(100dvh - 24px); }
}

.game-log-turns { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.game-log-turn { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 100px; }
.game-log-turn-heading { margin: 0; padding: 3px 0; font-size: 11px; line-height: 1.3; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.game-log .game-log-list { list-style: none; margin: 0; padding: 0; }
.game-log-entry .log-card-thumbnail { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; min-width: 36px; min-height: 46px; padding: 1px; border: 1px solid var(--border-subtle); border-radius: 4px; background: transparent; cursor: help; }
.game-log-entry .log-card-thumbnail .card-item { width: 26px; height: auto; aspect-ratio: 100 / 152; flex: 0 0 26px; margin: 0; border-radius: 3px; pointer-events: auto; }
.game-log-entry .log-card-thumbnail:focus-visible { outline: 2px solid var(--accent-primary, #60a5fa); outline-offset: 2px; }

/* One shared face/control across live, selected and historic candidate displays. */
.card-thumbnail, #analysis .candidate button.card-thumbnail { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 56px; padding: 2px; border: 1px solid var(--border-subtle); border-radius: 5px; background: transparent; cursor: help; }
.card-thumbnail .card-item { width: 32px; height: auto; aspect-ratio: 100 / 152; flex: 0 0 32px; margin: 0; border-radius: 3px; }
.card-thumbnail .card-item:hover { transform: none; }
.card-thumbnail:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
#analysis .candidate-row.has-card-thumbnail { grid-template-columns: 44px minmax(0, 1fr) auto; }
#analysis .candidate-row.has-card-thumbnail .candidate-preview { grid-column: 2; }
#analysis .candidate-row.has-card-thumbnail .candidate-card-thumbnail { grid-column: 1; grid-row: 1 / 3; align-self: center; }
#analysis .candidate-row.has-card-thumbnail .candidate-execute { grid-column: 3; }
.decision-detail-modal .candidate-row.has-card-thumbnail { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: center; }
.decision-detail-modal .candidate-row.has-card-thumbnail .candidate-preview { grid-column: 2; grid-row: 1; min-width: 0; box-sizing: border-box; }
.decision-detail-modal .candidate-card-thumbnail { grid-column: 1; grid-row: 1; }
.decision-summary .card-thumbnail { margin-inline-end: 6px; }
#globalCardHovercard { box-sizing: border-box; max-width: calc(100vw - 24px); }
#globalCardHovercard .hovercard-right { min-width: 0; overflow-wrap: anywhere; }

/* Explicit per-tab choice; native dialog supplies keyboard trapping and inert backdrop. */
#tab-session-dialog { box-sizing:border-box; width:min(35rem,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; color:var(--text-primary,#e8eaf2); background:var(--bg-panel,#172033); border:1px solid #64769b; border-radius:12px; padding:20px; }
#tab-session-dialog::backdrop { background:rgb(0 0 0 / .72); }
#tab-session-dialog h2 { margin-top:0; font-size:1.15rem; }
#tab-game-offers,.tab-choice-controls { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
#tab-session-dialog button { min-height:44px; padding:10px 14px; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.tab-session-settings { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
#tab-controller-status { display:none; flex:1 1 100%; margin:0; font-size:12px; line-height:1.5; white-space:normal; }
/* tabStatus already disables this for owner/unselected tabs; do not change locks. */
#tab-takeover:disabled { display:none; }
.tab-session-settings:has(#tab-takeover:not(:disabled)) #tab-controller-status { display:block; }
#tab-choice-open,#tab-takeover { min-height:44px; max-width:100%; white-space:normal; }
@media (pointer:coarse) { #tab-choice-open,#tab-takeover { min-height:44px; } }

/* Content-sized table, not viewport-sized empty panels. Keep the real artwork
   and readable controls; only the game objects have bounded dimensions. */
body.mode-play, body.mode-replay { display: block; height: auto; min-height: 100dvh; }
main { max-width: 1920px; }
.table-header { padding-inline: max(14px, calc((100vw - 1892px) / 2)); }
#win-trend { max-width: 1892px; margin-inline: auto; padding-inline: 14px; }
.player-details .tableau-by-color-grid { min-height: 0; }
.player-details .tableau-by-color-grid > .muted { margin: 2px 0; }
.player-royals-area { padding-top: 5px; }
.player-royals-area .royals-mini-container:empty { min-height: 0; }
.player-card.acting { box-shadow: inset 3px 0 0 var(--accent-gold), 0 3px 12px #0004; }
.analysis-heading { flex-wrap: wrap; }
.analysis-heading .controls { flex-wrap: wrap; }
#settings-dialog .dialog-heading { position: sticky; top: -20px; padding-block: 8px; z-index: 2; background: var(--bg-panel); }
#settings-dialog .check-label { white-space: normal; }

@media (min-width: 1180px) {
  body.mode-play main, body.mode-replay main { height: auto; }
  body.mode-play .workspace, body.mode-replay .workspace {
    height: auto; align-items: start;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 310px);
    gap: 12px;
  }
  body.mode-play .players-column, body.mode-play .players-panel,
  body.mode-play .players-grid { height: auto; }
  body.mode-play .play-area, body.mode-replay .play-area {
    height: auto; min-height: 0; align-items: start;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: auto auto; gap: 10px;
  }
  body.mode-play .board-area, body.mode-replay .board-area { padding: 6px; align-self: start; }
  body.mode-play .board-stage-wrap, body.mode-replay .board-stage-wrap { height: auto; container-type: normal; }
  body.mode-play #board, body.mode-replay #board { width: min(100%, clamp(280px, 32vh, 360px)); height: auto; }
  body.mode-play .table-guidance, body.mode-replay .table-guidance {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 52px auto;
    align-content: start; gap: 6px;
  }
  .table-guidance .operation-strip, .table-guidance .board-side-info, .table-guidance .royal-pool { grid-column: 1; grid-row: auto; }
  .table-guidance .board-side-info { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
  .table-guidance .privilege-rules-panel { grid-column: auto; grid-row: auto; }
  .table-guidance .side-info-card { flex-direction: column; }
  .table-guidance .royals-row { height: auto; flex: none; }
  body.mode-play #royalsContainer .royal-item, body.mode-replay #royalsContainer .royal-item { width: min(72px, calc((100% - 18px) / 4)); height: auto; max-height: none; flex: none; }
  body.mode-replay #royalsContainer { min-height: 0; }
  .market-area { align-self: start; }
  body.mode-play #market, body.mode-replay #market { height: auto; container-type: normal; }
}

/* Wide monitors put the two decision surfaces side by side. The board never
   balloons with viewport height; its guidance uses the space directly below. */
@media (min-width: 1800px) {
  body.mode-play .play-area, body.mode-replay .play-area { grid-template-columns: 340px minmax(0, 1fr); }
  .play-area .board-area { grid-column: 1; grid-row: 1; }
  .play-area .table-guidance { grid-column: 1; grid-row: 2; }
  .play-area .market-area { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 760px) {
  .table-header { position: static; padding-inline: 10px; }
  #win-trend { margin-inline: 0; padding-inline: 10px; }
  .table-guidance { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
  .table-guidance .operation-strip { grid-column: 1; }
  .table-guidance .board-side-info { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 56px; gap: 4px; }
  .table-guidance .privilege-rules-panel { grid-column: auto; min-height: 0; }
  .table-guidance .privilege-rules-img { width: 100%; height: 100%; object-fit: contain; }
  .table-guidance .side-info-card { flex-direction: row; justify-content: center; gap: 4px; }
  .table-guidance .royal-pool { min-width: 0; padding: 6px; }
  .table-guidance .royal-title { flex-wrap: wrap; gap: 3px; }
  .table-guidance .royals-row { flex-wrap: nowrap; gap: 4px; }
  #royalsContainer .royal-item, body.mode-replay #royalsContainer .royal-item { width: min(64px, calc((100% - 12px) / 4)); max-width: none; }
  body.mode-replay #royalsContainer { min-height: 0; }
  #settings-dialog .dialog-heading { top: -14px; }
}

/* Local continuation management reuses the existing dark dialog vocabulary. */
#practice-storage-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; color: var(--text-body); background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin: auto; }
#practice-storage-dialog::backdrop { background: #000b; }
#practice-storage-dialog h2 { color: var(--accent-gold); font-size: 1.1rem; margin-top: 0; }
#practice-storage-dialog p { line-height: 1.6; margin-block: 12px; }
#practice-storage-dialog button { min-height: 44px; padding: 8px 12px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
#practice-storage-dialog .controls { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 12px; }
#practice-storage-dialog > label { display: block; }
#practice-storage-dialog input[type="file"] { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin-block: 8px; }
#practice-saved-list > div { margin-block: 8px; }
.practice-save-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 14px; font-size: 12px; }
.practice-save-status p { margin: 0; }
#practice-status-retry { min-height: 32px; }
#practice-status[data-save-state="memory-only"] { color: #fbbf24; }
@media (max-width: 760px), (pointer: coarse) { #practice-status-retry, #practice-storage-open { min-height: 44px; } }

/* Compact desktop record; keep phone/coarse-pointer targets operable. */
@media (max-width: 760px), (pointer: coarse) {
  .game-log-entry button { font-size: 12px; }
  .game-log-entry .log-card-thumbnail { width: 44px; min-width: 44px; flex-basis: 44px; }
}