/* Expanded content, without nested scrolling or clipped off-screen components. */
:root { scrollbar-gutter: stable; }
:root body .panel { overflow: visible; }
:root body :is(.action-board-scroll, .action-grid-scroll, .activity-feed, .action-summary-list,
  .table-inventory, .table-board-viewport, .public-storage-board-grid, .public-reward-grid,
  .action-plan-suboptions, .action-option-visual, .action-flow, .plan-building-art-scroll,
  .discovery-candidates, .buildable-house-scroll, .regular-tiles-scroll, .special-tray-scroll,
  .tile-detail-image-wrap, .kaupang-atlas-mainboard, .kaupang-atlas-building, .kaupang-building-board,
  .settlement-grid-scroll, .settlement-stock, .settlement-choice-options, .scoring-comparison,
  .mountain-plan-group, #mountainList, #mountainDetail, #kaupangFlipSchedule, #territorySettlementContent) {
  overflow: visible; max-height: none; scrollbar-gutter: auto; overscroll-behavior: auto;
}
:root body .public-storage-board-grid { flex-wrap: wrap; }
:root body .action-column .action-art-grid { grid-template-columns: minmax(0, 1fr); }
:root body .action-plan-card { min-width: 0; overflow: visible; }
:root body .has-building-plan .action-plan-choices,
:root body .buildable-houses-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, calc(var(--game-cell) * 13.4 + 28px))), 1fr)); }
:root body .reference-dock { max-height: none; overflow: visible; top: 92px; gap: 6px; }
@media (max-height: 620px) {
  :root body .reference-dock { top: 70px; gap: 3px; }
  :root body .reference-tag { flex-basis: 48px; min-height: 48px; padding: 4px 2px; gap: 2px; }
  :root body .reference-tag svg { width: 24px; height: 24px; }
}
@media (max-height: 420px) {
  :root body .reference-dock { top: 10px; width: 110px; display: grid; grid-template-columns: repeat(2, 50px); }
  :root body .reference-tag { width: 50px; }
  :root body[data-screen="game"] .app-shell { padding-left: 116px; }
}

/* Native dialogs are absolute in the top layer, with a matching document extent.
   A tall view therefore uses normal page scrolling, never a scrolling dialog. */
:root body.has-dialog-page > .app-shell { position: fixed; inset: 0; width: 100%; visibility: hidden; pointer-events: none; }
:root body.has-dialog-page .tile-hover-controls { display: none; }
:root body dialog.content-page {
  position: absolute; inset: 12px 0 auto; width: min(1440px, calc(100% - 28px));
  max-width: none; max-height: none; height: auto; margin: 0 auto; overflow: visible;
}
:root body dialog.content-page-behind { display: none; }
:root body .content-page > .modal-head { position: sticky; top: 0; z-index: 10; background: #1b303b; padding-top: 10px; }
:root body .content-page .modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
:root body .content-page .close-button { flex: none; }
:root body #dialogPageExtent { width: 1px; pointer-events: none; }
:root body .content-page .card-detail-content img { max-height: none; width: auto; max-width: 100%; margin-inline: auto; }
:root body .content-page .tile-gallery-fixed-head { position: static; }
:root body .regular-tiles-scroll { display: grid; gap: 20px; border: 0; }
:root body .regular-tiles-table { border: 1px solid #455b4d; border-radius: 8px; }
:root body .regular-tiles-table tbody th { position: static; }
:root body :is(.scoring-comparison, #kaupangFlipSchedule) table { table-layout: fixed; width: 100%; min-width: 0; }
:root body :is(.scoring-comparison, #kaupangFlipSchedule) :is(td, th) { white-space: normal; overflow-wrap: anywhere; }
:root body .discovery-card { max-width: 100%; }
:root body .action-plan-option-label.has-action-art { flex-wrap: wrap; }
:root body .action-option-visual { flex-wrap: wrap; }
:root body .kaupang-card-heading { flex-wrap: wrap; }
@media (max-width: 600px) {
  :root body .content-page .modal-head h2 { font-size: 17px; }
  :root body .kaupang-atlas-components { grid-template-columns: minmax(0, 1fr); }
  :root body .regular-tiles-table .tile-color-corner { font-size: 9px; }
}

.mobile-workspace-nav, .mobile-action-view, .mobile-action-art, .mobile-placement-hint,
.tile-hover-controls [data-tile-move] { display: none; }

/* Mobile uses the whole screen width. References share one bottom tool tray;
   every long view still expands into the document, with no inner scrollers. */
@media (max-width: 980px) {
  :root { --mobile-nav-height: 56px; scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  :root body { min-width: 0; -webkit-text-size-adjust: 100%; }
  :root body .app-shell,
  :root body[data-screen="game"] .app-shell {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  :root body[data-screen="game"] .app-shell { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  :root body[data-screen="game"] .mobile-workspace-nav {
    position: fixed; z-index: 70; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    bottom: 0; left: 0; right: 0; min-height: var(--mobile-nav-height); gap: 4px;
    padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: #142832fa; border-top: 1px solid #a78b50; box-shadow: 0 -4px 16px #0006;
  }
  :root body .mobile-workspace-nav button {
    min-width: 0; min-height: 46px; border: 1px solid #60736c; border-radius: 7px;
    padding: 5px 2px; background: #243c43; color: #f1e3be; font-size: 12px; font-weight: 650; touch-action: manipulation;
  }
  :root body .mobile-workspace-nav :is([data-current], [aria-expanded="true"]) { border-color: #e4bc69; background: #55472b; color: #ffdf93; }
  :root body .reference-dock { display: none; }
  :root body.mobile-tools-open .reference-dock {
    position: fixed; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
    top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    width: auto; max-width: 540px; margin-left: auto; padding: 10px; border: 1px solid #ad925a;
    border-radius: 12px; background: #172f38; box-shadow: 0 5px 24px #0009;
  }
  :root body .reference-tag { width: 100%; min-height: 64px; padding: 7px 4px; border: 1px solid #bba879; border-radius: 8px; gap: 4px; }
  :root body .reference-tag svg { width: 26px; height: 26px; }
  :root body .reference-tag > span { font-size: 12px; }
  :root body .reference-tag:hover { transform: none; }
  :root body .table-layout { gap: 12px; }
  :root body :is(.action-panel, .home-panel, .game-status-bar, .occupation-panel, .public-player-panel) { padding: 10px; min-width: 0; }
  :root body .game-status-bar .players-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body .game-status-bar .player-row { min-width: 0; flex-wrap: wrap; }
  :root body .game-status-bar .player-row > div { min-width: 0; }
  :root body .game-status-bar .player-row strong { overflow-wrap: anywhere; }
  :root body .game-status-bar .phase-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root body :is(.primary-button, .secondary-button, .copy-button, .icon-button, .close-button, .test-seat-button) {
    min-height: 44px; min-width: 44px; font-size: 13px; white-space: normal; touch-action: manipulation;
  }
  :root body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; max-width: 100%; font-size: 16px; }
  :root body input:is([type="checkbox"], [type="radio"]) { min-width: 20px; min-height: 20px; flex: none; }
  :root body .action-plan-option-label { min-height: 48px; }
  :root body .table-view-controls { gap: 8px; }
  :root body .table-view-controls > label { flex: 1 1 130px; min-width: 0; }
  :root body .table-grid-toggle { min-height: 44px; }
  :root body .tile-controls { gap: 8px; }
  :root body .tile-controls > span { flex-basis: 100%; }
  :root body .territory-board-heading button { min-width: 44px; min-height: 44px; font-size: 12px; }
  :root body .inventory-token { min-width: 44px; }
  :root body .mobile-placement-hint { display: block; margin: 8px 0; font-size: 12px; color: #c6d4cb; }
  :root body .tile-hover-controls { z-index: 80; max-width: calc(100vw - 12px); }
  :root body .tile-hover-controls button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  :root body .tile-hover-controls.has-movable-piece { display: grid; grid-template-columns: repeat(3, 44px); }
  :root body .tile-hover-controls.has-movable-piece [data-tile-move] { display: grid; }
  :root body dialog.content-page { inset: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left)); width: auto; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  :root body .content-page > .modal-head { top: env(safe-area-inset-top); gap: 8px; padding-top: 6px; }
  :root body .content-page .modal-head p { overflow-wrap: anywhere; }
  :root body .toast { bottom: calc(72px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); }
}
@media (max-width: 600px) {
  :root body .brand-lockup { min-width: 0; }
  :root body .brand-title { font-size: 17px; }
  :root body .topbar-status { gap: 8px; }
  :root body .topbar .eyebrow { font-size: 8px; letter-spacing: .08em; }
  :root body .lobby-intro { padding: 16px 5px; }
  :root body .lobby-intro h1 { font-size: 24px; }
  :root body .lobby-room-card { padding: 16px; }
  :root body .lobby-room-options { grid-template-columns: minmax(0, 1fr); }
  :root body .action-column .board-heading { flex-wrap: wrap; gap: 7px; }
  :root body .board-heading h1 { font-size: 18px; }
  :root body .board-heading > div { margin-right: auto; }
  :root body .mobile-action-view { display: block; }
  :root body .action-art-grid { padding: 5px; }
  /* The original artwork of each space becomes a large touch target. Its
     action id and OR grouping stay identical to the full-board view. */
  :root body[data-mobile-actions="cards"] .board-art-surface { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; }
  :root body[data-mobile-actions="cards"] .board-art-surface > img { display: none; }
  :root body[data-mobile-actions="cards"] .board-hotspot {
    position: relative; display: flex; flex-direction: column; justify-content: flex-start;
    left: auto !important; top: auto !important; width: 100% !important; height: auto !important;
    min-height: 70px; border-radius: 6px; border-width: 2px; padding: 0; overflow: hidden; touch-action: manipulation;
  }
  :root body[data-mobile-actions="cards"] .mobile-action-art { display: block; width: 100%; background-repeat: no-repeat; flex: none; }
  :root body[data-mobile-actions="cards"] .hotspot-label { position: static; display: block; order: -1; width: 100%; max-width: none; border-radius: 0; padding: 4px 2px; font-size: 11px; text-align: center; }
  :root body[data-mobile-actions="cards"] .hotspot-occupant { font-size: 10px; }
}
@media (pointer: coarse) {
  :root body :is(.table-stock-tile, .table-piece, button.inventory-art) { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}