/* Shared HUD, retaining the tuned Conquest layout. */
.game-hud { position: fixed; inset: 0; z-index: 20; color: #edf5f1; pointer-events: none; font: 13px/1.4 "Segoe UI", system-ui, sans-serif; --cq-green: #91e5b6; --cq-gold: #f0c778; --cq-muted: #a2b5b2; }
.game-hud [hidden], .game-hud[hidden] { display: none !important; }
.cq-surface { background: rgba(12, 22, 25, .82); border: 1px solid #39504d; border-radius: 8px; pointer-events: auto; }
.game-hud button { pointer-events: auto; font: inherit; color: inherit; cursor: pointer; background: #203431; border: 1px solid #48625b; border-radius: 5px; padding: 6px 8px; min-height: 32px; }
.game-hud button:hover:not(:disabled) { background: #304d42; border-color: var(--cq-green); }
.game-hud :focus { outline: none; }
.game-hud button:disabled { cursor: default; color: var(--cq-muted); background: #182724; border-color: #33453e; }
.game-hud p, .game-hud h2 { margin: 0; }
.game-hud h2 { font-size: 14px; font-weight: 600; }
.game-hud kbd { display: inline-block; font: 10px monospace; border: 1px solid #82958f88; border-radius: 3px; padding: 1px 4px; color: #bdcbc5; }
.cq-icon { position: relative; display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; overflow: hidden; vertical-align: middle; }
.cq-icon img { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; max-width: none; object-fit: contain; image-rendering: pixelated; }
.cq-objective { padding: 0 20px 8px 0; margin-bottom: 6px; border-bottom: 1px solid #39504d; }
.cq-goal { display: flex; gap: 7px; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cq-goal > .cq-icon { color: var(--cq-green); width: 19px; height: 19px; }
.cq-base-count { font-size: 18px; }
.game-hud progress { appearance: none; border: 0; height: 4px; border-radius: 2px; overflow: hidden; background: #2e403b; accent-color: var(--cq-green); }
.game-hud progress::-webkit-progress-bar { background: #2e403b; }
.game-hud progress::-webkit-progress-value { background: var(--cq-green); }
.game-hud progress::-moz-progress-bar { background: var(--cq-green); }
.cq-territory-progress { display: block; width: 100%; margin-top: 5px; }
.cq-alert:not(:empty), .cq-status:not(:empty) { margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.cq-alert { color: #ffb196; }.cq-status { color: var(--cq-gold); }
.game-hud[data-alert=true] .cq-standings { border-color: #ed9374; }
.cq-sidebar { position: absolute; top: 12px; bottom: 12px; width: 270px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.cq-sidebar-left { left: 12px; align-items: flex-start; }.cq-sidebar-right { right: 12px; align-items: flex-end; }
.cq-sidebar > .cq-surface, .cq-sidebar > .cq-shortcuts { flex-shrink: 0; max-height: 40%; overflow-y: auto; }
.cq-workshop-slot { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; }
.cq-supplies { position: relative; width: 236px; padding: 9px; }
.cq-resource-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cq-resource { display: flex; gap: 5px; align-items: center; min-width: 0; }
.cq-resource strong { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.cq-overview, .cq-standings { position: relative; width: 240px; padding: 8px; }
.cq-overview { padding-top: 24px; }
.cq-map { display: block; width: 100%; background: radial-gradient(ellipse, #203530, #13211f); border-radius: 4px; }
.cq-map [role=button] { cursor: pointer; }.cq-map-hit { fill: transparent; stroke: none; }
.cq-map-own { fill: currentColor; stroke: currentColor; }.cq-map-rival { fill: #162621; stroke: currentColor; stroke-width: 1.5; }
.cq-map-selected { fill: none; stroke: white; stroke-width: 1.5; }.cq-map-alert { fill: none; stroke: #ffd299; stroke-width: 2; stroke-linecap: round; }
.cq-map-attacked { animation: cq-base-attack 650ms steps(2, jump-none) infinite; }
@keyframes cq-base-attack { to { color: #ff3535; fill: #ff3535; stroke: #ff3535; } }
.cq-map-travel-selected > .cq-map-hit { stroke: white; stroke-width: 1; stroke-dasharray: 2 2; }
@media (prefers-reduced-motion: reduce) { .cq-map-attacked { animation: none; color: #ff3535 !important; fill: #ff3535; stroke: #ff3535; } }
.cq-map-selected.cq-map-target { stroke: currentColor; }
.cq-leaderboard { min-height: 0; overflow-y: auto; margin-top: 6px; font-size: 11px; }
/* The roster requests its full content height and yields excess space first.
   Build and action panels take priority; the build menu can also shrink on
   short screens once the roster has yielded its space. */
.cq-sidebar-right > .cq-standings { display: flex; flex-direction: column; flex: 0 100 auto; min-height: 0; max-height: none; }
.cq-standings > .cq-objective { flex-shrink: 0; }
.cq-standings > .cq-leaderboard { flex: 0 1 auto; }
.cq-sidebar-right > .cq-workshop-slot { display: contents; }
.cq-sidebar-right .cq-construction { flex: 0 1 auto; min-height: 0; max-height: 45%; }
.cq-sidebar-right > .cq-shortcuts { margin-top: auto; }
.cq-overview, .cq-standings, .cq-leaderboard { scrollbar-width: none; }
.cq-overview::-webkit-scrollbar, .cq-standings::-webkit-scrollbar, .cq-leaderboard::-webkit-scrollbar { display: none; }
.cq-leaderboard table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cq-leaderboard th, .cq-leaderboard td { padding: 3px 2px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-leaderboard th { position: sticky; top: 0; background: #142124; color: var(--cq-muted); font-weight: 500; }
.cq-leaderboard th:first-child, .cq-leaderboard td:first-child { text-align: left; }
.cq-leaderboard th:nth-child(2) { width: 3em; }.cq-leaderboard th:nth-child(3) { width: 5.5em; }
.cq-leader-marker { width: 14px; height: 14px; flex: 0 0 14px; }
.cq-leader-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cq-leader-player { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cq-leader-crown { flex-shrink: 0; color: var(--cq-gold); font-size: 12px; line-height: 1; }
.cq-leader-left { flex-shrink: 0; color: var(--cq-muted); }
.cq-own-row { color: var(--cq-green); }
.cq-cargo { position: relative; width: 260px; padding: 8px; }
/* Inventory requests its full content height, yielding space to crafting. */
.cq-sidebar-left > .cq-cargo { flex: 0 100 auto; min-height: 0; max-height: none; margin-top: auto; }
.cq-sidebar-left > .cq-workshop-slot { display: contents; }
.cq-sidebar-left .cq-crafting { flex: 0 1 auto; min-height: 0; max-height: 45%; }
.cq-carry-row, .cq-carry { display: flex; gap: 7px; align-items: center; }
.cq-carry { flex: 1; min-width: 0; color: var(--cq-muted); }.cq-carry.is-full { color: var(--cq-gold); }
.cq-cargo-count { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-cargo-progress { flex: 1; width: 30px; min-width: 16px; }
.cq-carry.is-full progress::-webkit-progress-value { background: var(--cq-gold); }
.cq-carry.is-full progress::-moz-progress-bar { background: var(--cq-gold); }
.game-hud .cq-shield { background: none; border-color: transparent; padding: 2px; min-height: 26px; opacity: .35; }
.game-hud .cq-shield.is-active, .game-hud .cq-shield:hover { opacity: 1; }
.cq-inventory { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cq-inventory button { position: relative; width: 44px; height: 42px; padding: 4px 12px 8px 4px; }
.cq-inventory .cq-icon { width: 26px; height: 26px; }.cq-inventory strong { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.cq-inventory button:disabled .cq-icon { opacity: .35; }
.cq-weapon-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 6px; }
.cq-weapon-heading > span { color: var(--cq-muted); white-space: nowrap; font-size: 12px; }
.cq-weapons { display: grid; gap: 4px; }
.cq-weapons button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 5px 7px; text-align: left; font-size: 14px; }
.cq-weapon-name { overflow-wrap: anywhere; }
.cq-weapons strong { grid-column: 4; font-variant-numeric: tabular-nums; }
.cq-weapons kbd { grid-column: 3; color: var(--cq-gold); border-color: var(--cq-gold); font-size: 12px; }
.game-hud .cq-weapons .is-selected { border-color: var(--cq-gold); background: #3c3626; box-shadow: inset 3px 0 var(--cq-gold); }
.cq-weapon-empty { color: var(--cq-muted); font-size: 14px; }
.cq-shortcuts { display: flex; flex-direction: column; align-items: stretch; padding: 6px 8px; border-radius: 6px; background: rgba(8, 16, 18, .68); pointer-events: auto; }
.game-hud .cq-shortcuts button { display: flex; align-items: center; gap: 8px; padding: 3px 5px; min-height: 26px; text-align: left; border-color: transparent; background: transparent; color: #bbcbc4; font-size: 12px; text-shadow: 0 1px 4px #000; }
.cq-shortcuts button > :first-child { min-width: 40px; text-align: center; }
.cq-shortcuts button > span:first-child { display: flex; gap: 2px; }.cq-shortcuts span > kbd { flex: 1; }
.game-hud .cq-shortcuts button:hover:not(:disabled) { color: white; background: #10251eaa; border-color: #48625b; }
.game-hud .cq-shortcuts button.is-available { color: #d6e9df; }
.game-hud .cq-shortcuts button:disabled { color: #8c9b95; opacity: .55; }
.cq-base-menu { width: 100%; padding: 10px; max-height: 100%; overflow-y: auto; border-color: #716442; }
.cq-base-menu header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.cq-base-menu h2 kbd { margin-left: 4px; }
.game-hud header button { min-height: 24px; width: 24px; padding: 0; background: transparent; border-color: transparent; font-size: 20px; line-height: 1; color: var(--cq-muted); }
.cq-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cq-recipes button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 4px; text-align: left; padding: 7px; }
.cq-recipes strong { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.cq-cost { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; font-size: 10px; color: #b5c6bc; }
.cq-cost > span { display: inline-flex; align-items: center; gap: 2px; }.cq-cost .cq-icon { width: 14px; height: 14px; }
.cq-cost:empty { display: none; }
.cq-recipes .cq-kit-recipe { grid-column: 1 / -1; }.cq-kit-recipe .cq-cost { grid-column: 2; }
.cq-recipes button:disabled > .cq-icon, .cq-recipes .is-unaffordable > .cq-icon { opacity: .45; }
.cq-map-travel { width: 100%; margin-top: 8px; font-size: 11px !important; }
.cq-build-choices .is-selected { border-color: var(--cq-gold); background: #3c3626; }
.game-hud .cq-help-toggle { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; padding: 0; background: transparent; border-color: transparent; border-radius: 50%; font-size: 19px; color: #c4d8cc; opacity: .55; text-shadow: 0 1px 4px #000; }
.game-hud .cq-help-toggle:hover { opacity: 1; }
.game-hud[data-chatting=true] .cq-help-toggle { display: none; }
.cq-results { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: min(340px, 88vw); padding: 24px; text-align: center; border-color: var(--cq-gold); }
.cq-results h2 { font-size: 26px; overflow-wrap: anywhere; }.cq-results p { margin-top: 12px; font-size: 14px; color: var(--cq-green); }
.cq-top-center { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 600px)); display: flex; flex-direction: column; gap: 10px; }
.cq-notifications { width: 100%; padding: 0; overflow: hidden; opacity: 1; text-align: center; }
.cq-notifications.is-fading { opacity: 0; transition: opacity var(--notification-fade-duration) ease-out; }
.game-hud .cq-notification-reopen { align-self: center; padding: 4px; min-height: 28px; background: transparent; border-color: transparent; color: var(--cq-muted); opacity: .55; }
.game-hud .cq-notification-reopen:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cq-notifications.is-fading { transition: none; } }
.cq-victory-warning { padding: 12px 16px; text-align: center; border: 2px solid #ffad78; background: rgba(53, 24, 17, .96); box-shadow: 0 4px 24px #0008; }
.cq-victory-player { display: block; font-size: 20px; color: #ffbc91; overflow-wrap: anywhere; }
.cq-victory-label { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.cq-victory-countdown { display: block; font-size: 42px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cq-victory-warning[data-own=true] { border-color: var(--cq-green); background: rgba(17, 44, 31, .96); }
.cq-victory-warning[data-own=true] .cq-victory-player { color: var(--cq-green); }
.game-hud .cq-notification-line { display: block; width: 100%; min-height: 0; padding: 7px 10px; text-align: center; border: 0; border-radius: 0; background: transparent; }
.game-hud .cq-notification-latest { display: block; color: #f4ddaa; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cq-notification-history { padding: 0 10px 8px; }
.cq-notification-list { list-style: none; margin: 0; padding: 0; max-height: min(300px, 40vh); overflow-y: auto; overscroll-behavior: contain; cursor: auto; }
.cq-notification-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid #39504d; overflow-wrap: anywhere; }
.cq-notification-list time { color: var(--cq-muted); font-size: 10px; white-space: nowrap; }
.cq-notification-list span { color: #edf5f1; }

.cq-placement { position: absolute; border: 2px dashed #ef9a7b; background: #cb785422; }
.cq-placement[data-valid=true] { border-color: #a1efbd; background: #81da9a22; }
.cq-placement span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; margin-top: 8px; padding: 4px 7px; text-align: center; background: #13251eed; font-size: 11px; border-radius: 4px; }
.cq-waypoint { position: absolute; z-index: 1; pointer-events: none; font: 11px monospace; white-space: nowrap; }
.cq-waypoint svg { position: absolute; left: 0; top: 0; width: 60px; height: 60px; fill: currentColor; stroke: #101820; stroke-width: 2; }
.cq-waypoint span { position: absolute; text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000; }

body:has(.game-hud[data-building=true]) canvas { cursor: crosshair; touch-action: none; }
.join-card__intro { color: #c1d0c8; line-height: 1.5; margin: 0; }
.game-hud [data-panel] { cursor: pointer; }
.game-hud .cq-panel-toggle { position: absolute; top: 4px; right: 4px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; border-color: transparent; background: transparent; color: var(--cq-muted); }
.game-hud .cq-panel-toggle .cq-caret { display: block; flex: none; width: 6px; min-width: 0; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.game-hud .cq-panel-toggle[aria-expanded=true] .cq-caret { transform: translateY(2px) rotate(225deg); }
.cq-resource-name, .cq-resource-carried, .cq-item-name, .cq-cost-name, .cq-recipe-detail { display: none; }
.cq-supplies { padding-right: 26px; }.cq-supplies[data-expanded=true] { width: 260px; }
.cq-supplies[data-expanded=true] .cq-resource-list { grid-template-columns: 1fr; gap: 7px; }
.cq-supplies[data-expanded=true] .cq-resource { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 7px; }
.cq-supplies[data-expanded=true] .cq-resource-name { display: block; }
.cq-supplies[data-expanded=true] .cq-resource-carried:not(:empty) { display: block; grid-column: 2 / -1; color: var(--cq-muted); font-size: 10px; }
.cq-overview[data-expanded=true], .cq-standings[data-expanded=true] { width: 300px; }
/* Keep the travel action visible; shrink the map first on short screens. */
.cq-sidebar > .cq-overview[data-expanded=true] { max-height: none; overflow: visible; }
.cq-overview[data-expanded=true] .cq-map { max-height: 25vh; }
.cq-carry-row { padding-right: 20px; }
.cq-cargo[data-expanded=true] .cq-carry-row { flex-wrap: wrap; }
.cq-cargo[data-expanded=true] .cq-carry { flex-basis: 100%; }
.cq-cargo[data-expanded=true] .cq-item-name { display: inline; font-size: 11px; }
.cq-cargo[data-expanded=true] .cq-inventory { display: grid; grid-template-columns: 1fr; }
.cq-cargo[data-expanded=true] .cq-inventory button { display: grid; align-items: center; grid-template-columns: 26px 1fr auto; gap: 8px; width: 100%; height: auto; min-height: 34px; padding: 4px 8px; text-align: left; }
.cq-cargo[data-expanded=true] .cq-inventory strong { position: static; }
.cq-cargo[data-expanded=true] .cq-shield { display: flex; gap: 7px; align-items: center; }
.cq-base-menu { position: relative; }
.cq-base-menu > .cq-panel-toggle { top: 10px; right: 36px; }
.cq-base-menu[data-expanded=true] .cq-recipes { grid-template-columns: 1fr; }
.cq-base-menu[data-expanded=true] .cq-cost-name { display: inline; }
.cq-base-menu[data-expanded=true] .cq-cost { font-size: 11px; column-gap: 8px; }
.cq-base-menu[data-expanded=true] .cq-recipe-detail { display: block; grid-column: 1 / -1; font-size: 10px; color: var(--cq-muted); }
.cq-shortcuts { position: relative; padding-top: 23px; }
.cq-shortcuts[data-expanded=true] { width: 100%; padding: 27px 8px 8px; background: rgba(12, 22, 25, .82); border: 1px solid #39504d; border-radius: 8px; }
.game-hud .cq-shortcuts[data-expanded=true] button:not(.cq-panel-toggle) { display: grid; grid-template-columns: 40px 1fr; gap: 2px 8px; padding-block: 6px; }
@media (max-width: 1000px) {
  .cq-top-center { width: calc(100vw - 520px); }
  .cq-sidebar { width: 240px; }.cq-overview, .cq-standings { width: 220px; }.cq-supplies { width: 216px; }
}
@media (max-width: 760px) {
  .cq-top-center { top: 8px; width: min(420px, calc(100vw - 16px)); }
  .game-hud[data-winning=true] .cq-sidebar { top: 216px; }
  .cq-sidebar { top: 76px; bottom: 8px; width: min(220px, calc(50vw - 12px)); }
  .cq-sidebar-left { left: 8px; }.cq-sidebar-right { right: 8px; }.cq-supplies { width: 190px; }.cq-overview, .cq-standings { width: 100%; }
  .cq-resource-list { gap: 6px; }.cq-resource .cq-icon { width: 18px; height: 18px; }.cq-resource strong { font-size: 12px; }
  .cq-cargo { width: 246px; padding: 6px; }.cq-inventory button { width: 42px; }
  .cq-supplies[data-expanded=true], .cq-overview[data-expanded=true], .cq-standings[data-expanded=true] { width: min(260px, calc(50vw - 12px)); }
}

/* Contextual help shares one anchored tooltip; no permanent instruction panel. */
.game-hud .cq-tooltip { position: fixed; z-index: 10; pointer-events: none; width: max-content; max-width: min(280px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 10px 12px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 5px 20px #0008; }
.game-hud[data-help=true] { pointer-events: auto; cursor: help; }
/* Inspect mode pins help until the next selection, allowing long text to scroll. */
.game-hud[data-help=true] .cq-tooltip { pointer-events: auto; }
.game-hud[data-help=true] [data-panel],
.game-hud[data-help=true] button { outline: 1px dashed var(--cq-green); outline-offset: 2px; cursor: help; }
.game-hud[data-help=true] .cq-map [role=button] { cursor: help; }
.game-hud[data-help=true] .cq-help-toggle { opacity: 1; background: #25483b; border-color: var(--cq-green); }

.cq-map-owner-highlight { fill: currentColor; fill-opacity: .2; stroke: white; stroke-width: 2; stroke-dasharray: 3 2; pointer-events: none; }
.game-hud button.cq-leader-player { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; font: inherit; text-align: left; }
.game-hud button.cq-leader-player:hover { text-decoration: underline; background: transparent; }
.cq-leaderboard .cq-highlighted-row { background: #39504d; box-shadow: inset 3px 0 var(--cq-gold); }


/* Shared additions: inventory stays compact without hiding available ammo. */
.cq-cargo:not([data-expanded=true]) .cq-weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cq-cargo:not([data-expanded=true]) .cq-weapons button { position: relative; display: flex; justify-content: center; min-height: 44px; padding: 4px; }
.cq-cargo:not([data-expanded=true]) .cq-weapon-name { display: none; }
.cq-cargo:not([data-expanded=true]) .cq-weapons strong { position: absolute; right: 3px; bottom: 1px; font-size: 11px; }
.cq-cargo:not([data-expanded=true]) .cq-weapons kbd { position: absolute; left: 2px; top: 1px; font-size: 8px; }
.cq-shortcuts[data-expanded=true] .cq-recipe-detail { display: block; grid-column: 2; color: var(--cq-muted); font-size: 10px; }
.cq-leader-player { color: white !important; }
.hud-intro { position: relative; padding: 12px 25px 12px 12px; text-align: center; }
.hud-intro p { margin-top: 5px; color: var(--cq-muted); }
.game-hud .hud-intro button { position: absolute; top: 2px; right: 2px; padding: 0; min-height: 20px; width: 20px; background: transparent; border: 0; }
.hud-respawn { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; text-shadow: 0 2px 8px #000; pointer-events: none; }
.hud-respawn strong { font-size: 80px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-respawn p { font-size: 18px; }
.hud-arrow { position: absolute; pointer-events: none; transform: translate(-50%, -50%); text-shadow: 0 1px 4px #000; }
.hud-arrow-pointer { display: block; font-size: 30px; line-height: 1; }
.hud-arrow-label { display: flex; align-items: center; gap: 3px; font-size: 11px; color: white; background: #102020b0; padding: 2px 4px; border-radius: 3px; }
.hud-chat { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: min(450px, calc(100vw - 600px)); padding: 8px; }
.hud-chat-history { max-height: 25vh; overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
.game-hud .hud-chat-message { margin: 5px 0; color: #d1dedb; }
.hud-chat-message strong { color: white; margin-left: 4px; }
.hud-chat form { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.hud-chat input { width: 100%; min-width: 0; background: #0f1e20; color: white; border: 1px solid #54746b; border-radius: 4px; padding: 7px; font: inherit; }
.hud-chat:has(form:not([hidden])) { width: min(560px, calc(100vw - 32px)); z-index: 3; }
@media (max-width: 760px) {
  .cq-cargo, .cq-supplies { max-width: 100%; }
  .cq-weapon-heading > span { font-size: 9px; white-space: normal; }
  .cq-base-menu { padding: 7px; }
  .cq-recipes { grid-template-columns: 1fr; }
  .hud-chat { width: min(420px, calc(100vw - 32px)); bottom: 8px; }
}
/* Each area keeps a readable heading when several detailed panels are open. */
.cq-sidebar-right > .cq-standings { min-height: 100px; max-height: 30%; }
.cq-sidebar > .cq-overview, .cq-sidebar > .cq-overview[data-expanded=true] { max-height: 26%; flex-shrink: 0; overflow: auto; }
.cq-overview .cq-map { max-height: 22vh; }
.cq-sidebar-left > .cq-cargo { min-height: 160px; max-height: 42%; }
.cq-sidebar .cq-base-menu { min-height: 120px; flex: 1 1 auto; }
.cq-sidebar-right > .cq-shortcuts { flex: 0 1 auto; max-height: 30%; min-height: 100px; }
.cq-shortcuts button { flex-shrink: 0; }
.cq-sidebar-left > .cq-supplies { max-height: 34%; }
.cq-sidebar { scrollbar-width: thin; }
.cq-sidebar-right > .cq-standings { min-height: 140px; }
@media (max-width: 760px) {
  .game-hud .cq-sidebar { top: var(--hud-top-height, 76px); }
}
.hud-callout { position: absolute; transform: translateX(-50%); width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 8px 12px; text-align: center; pointer-events: none; box-shadow: 0 3px 16px #0008; }
.hud-recipe-unlock { position: absolute; left: 50%; top: clamp(110px, 22vh, 190px); z-index: 6; transform: translateX(-50%); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; width: min(440px, calc(100vw - 24px)); box-sizing: border-box; padding: 22px 32px 22px 22px; border: 1px solid var(--cq-gold); background: linear-gradient(120deg, #382f1cf5, #10201ff5); box-shadow: 0 0 32px #f0c77835, 0 10px 40px #0008; pointer-events: none; }
.hud-unlock-icon { align-self: center; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #f0c77866; border-radius: 12px; background: #f0c77815; }
.hud-unlock-icon .cq-icon { width: 48px; height: 48px; }
.hud-unlock-content { min-width: 0; overflow-wrap: anywhere; }
.hud-unlock-label { display: block; color: var(--cq-gold); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.game-hud .hud-recipe-unlock h2 { margin: 4px 0 8px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; line-height: 1.2; color: #fff4d9; }
.hud-unlock-description { color: #d5ded7; font-size: 13px; }
.game-hud .hud-unlock-hint { margin-top: 12px; color: var(--cq-gold); font-size: 12px; }
.game-hud .hud-unlock-dismiss { position: absolute; right: 4px; top: 4px; width: 28px; min-height: 28px; padding: 0; font-size: 20px; border: 0; background: transparent; color: var(--cq-gold); }
@media (max-width: 760px) {
  .hud-recipe-unlock { top: max(130px, 22vh); grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 30px 16px 16px; }
  .hud-unlock-icon { width: 44px; height: 44px; }.hud-unlock-icon .cq-icon { width: 34px; height: 34px; }
}
.cq-notification-latest, .cq-victory-player, .cq-victory-warning[data-own=true] .cq-victory-player { color: white !important; }
.cq-notification-latest .cq-leader-marker, .cq-victory-player .cq-leader-marker { vertical-align: middle; margin-right: 5px; }
.hud-chat-message time { margin-left: 8px; color: var(--cq-muted); font-size: 10px; white-space: nowrap; }
.game-hud .hud-chat-earlier { display: block; width: 100%; min-height: 24px; padding: 2px; color: var(--cq-muted); font-size: 11px; }

.round-overview { position: fixed; inset: 4vh 4vw; z-index: 70; display: flex; flex-direction: column; padding: clamp(14px, 2vw, 28px); gap: 18px; color: #e4efec; background: #101d24; border: 1px solid #48605e; border-radius: 16px; box-shadow: 0 0 0 8vw #071015e8, 0 24px 80px #0009; font-family: "Segoe UI", system-ui, sans-serif; }
.round-overview[hidden] { display: none; }
.round-overview header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.round-overview-eyebrow { color: #92b5a8; letter-spacing: .18em; font-size: 11px; font-weight: 700; }
.round-overview h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 38px); overflow-wrap: anywhere; }
.round-overview-next { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #a9c0b7; font-size: 12px; }
.round-overview-next strong { color: #edf5f1; font-size: clamp(20px, 2.6vw, 32px); font-variant-numeric: tabular-nums; }
.round-overview-next[hidden] { display: none; }
.round-overview-map { flex: 1; min-height: 0; position: relative; overflow: hidden; border: 1px solid #2c4148; border-radius: 8px; background: #0c151c; }
.round-overview canvas { display: block; width: 100%; height: 100%; }
.round-overview-content { display: flex; flex: 1; min-height: 0; gap: 16px; }
.round-overview-legend { width: 220px; overflow-y: auto; min-width: 0; }
.round-overview-legend h3 { margin: 8px 0; font-size: 13px; color: #a9c0b7; }
.round-overview-owner { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; margin: 8px 0; color: white; }
.round-overview-owner span { overflow-wrap: anywhere; }
.round-overview-status { position: absolute; left: 16px; bottom: 8px; color: #bdcec7; background: #101d24c0; }
.round-overview-retry { position: absolute; right: 16px; bottom: 16px; cursor: pointer; }
.round-overview h2 { display: flex; align-items: center; gap: 10px; color: white; }
.round-overview h2 .cq-leader-marker { width: 24px; height: 24px; flex-basis: 24px; }
.round-overview-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.round-overview-materials span { display: flex; align-items: center; gap: 6px; }
.round-overview-materials i { width: 10px; height: 10px; border-radius: 2px; }
@media (max-width: 760px) {
  .round-overview { inset: 12px; gap: 10px; padding: 12px; }
  .round-overview-content { flex-direction: column; }
  .round-overview-legend { width: auto; max-height: 28vh; }
  .round-overview-materials { grid-template-columns: repeat(3, 1fr); }
}
.hud-founding { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: min(400px, calc(100vw - 32px)); padding: 14px; z-index: 5; }
.hud-founding p { margin: 8px 0; }
.hud-founding button { margin-right: 8px; }
.round-overview-dismiss { cursor: pointer; background: #254139; color: white; border: 1px solid #769b8e; border-radius: 6px; padding: 10px; }
/* Pages remain retrievable; browsers lay out only visible message contents. */
.hud-chat-message { content-visibility: auto; contain-intrinsic-size: auto 36px; }