.neighbor-popup .neighbor-tabs { display:flex; justify-content:center; gap:12px; margin:16px 0 4px; }
.neighbor-popup .neighbor-tabs button { display:grid; place-items:center; width:68px; height:68px; padding:8px; }
.neighbor-popup .neighbor-tabs .tool-icon { display:block; width:50px; height:50px; }
/* Research shares the building palette's selection, costs and prerequisite layout. */
.research-art { background:none; object-fit:contain; }
.research-icon-button.build-unavailable>.research-art { filter:grayscale(1); opacity:.65; }
.research-selection .research-level { margin:3px 0 0; font-size:12px; }
.research-selection .research-effect { line-height:1.5; }
.research-selection .research-target { font-size:12px; line-height:1.5; }
.research-selection .research-start { width:100%; margin-top:4px; }
.research-selection .research-pending { margin:6px 0; }
.research-selection .research-completed { margin-bottom:0; }
/* The same painted commodities are used in every exchange, from the market to deliveries. */
.trade-visual { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; vertical-align:middle; }
.trade-side { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:38px; }
.trade-visual .trade-good { display:block; width:36px; height:36px; }
.trade-visual .trade-side strong { display:block; grid-column:auto; font-size:12px; line-height:1.2; font-variant-numeric:tabular-nums; text-transform:none; white-space:nowrap; }
.trade-arrow { width:36px; height:30px; object-fit:contain; flex-shrink:0; }
.trade-offers button { justify-content:center; }
.market-exchange button { display:flex; align-items:center; justify-content:center; }
.market-exchange .trade-side, .market-barter .trade-side { flex-direction:row; gap:6px; }
.market-exchange .trade-side strong, .market-barter .trade-side strong { order:-1; font-size:24.3px; }
.market-exchange .trade-visual .trade-good, .market-barter .trade-visual .trade-good { width:48.6px; height:48.6px; }
.market-exchange .trade-visual, .market-barter .trade-visual { flex-wrap:wrap; }
/* Keep the enlarged controls at their intended size on short screens. */
.game-popup.building-popup:has(.market-exchange) { max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; }
@media(max-width:600px) {
    .building-popup .market-exchange { grid-template-columns:minmax(0,1fr); }
}
.route-summary > .trade-visual { display:flex; margin:6px auto; }
.compact-route-actions button{display:grid;place-items:center}
.route-action-icon{display:block;width:24px;height:24px;pointer-events:none;filter:drop-shadow(0 1px 0 #fff5)}
.battle-result-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.battle-result-heading>div{flex:1;min-width:0}
.battle-result-heading h2{margin-top:0}
.battle-result-heading .hint{margin-bottom:0}
.battle-result-heading .battle-opponent{display:block;width:64px;height:76px;object-fit:contain;flex:0 0 64px}
.battle-result-popup .diplomacy-event-body>img{display:block;max-height:42vh;object-fit:contain}
.battle-final-illustration{display:block;width:100%;max-height:36vh;object-fit:contain;border-radius:6px}
@media(max-width:620px){.battle-result-heading{gap:9px}.battle-result-heading .battle-opponent{width:48px;height:60px;flex-basis:48px}.battle-result-popup .diplomacy-event-body>img{max-height:28vh}}
.inventory-icon { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.neighbor-portraits { margin:0; }
.priority-row { display:grid; grid-template-columns:minmax(0,1fr) 38px 38px; align-items:center; gap:5px; margin:6px 0; padding:5px 0; border-bottom:1px solid #b8986544; }
.priority-row strong { font-size:13px; }
.priority-row button { min-height:36px; padding:4px; font-size:18px; }
.development-card > label { display:flex; align-items:center; gap:8px; margin:12px 0; line-height:1.4; }
.development-card input[type=number] { min-width:0; width:82px; padding:6px; border:1px solid #a28a66; background:#fff5df; border-radius:5px; }
.development-card input[type=checkbox] { flex-shrink:0; width:18px; height:18px; accent-color:#638143; }
.development-card summary { cursor:pointer; font-size:13px; padding:10px 0; }
.development-card details dl { font-size:12px; margin-block:8px; }
.development-card h3 { font-family:Georgia,serif; font-size:17px; }
.development-card progress { width:100%; accent-color:#638143; }
.development-card .goal > button { width:100%; }
.development-card .row { flex-wrap:wrap; }
.development-card .row > button { min-width:90px; }
.tools-stock { display:flex; align-items:center; gap:10px; }
.tools-stock img { width:56px; height:48px; object-fit:contain; }
.building-services { border-top:1px solid #b89865; padding-top:8px; margin-block:8px; }
.building-services p { font-size:13px; line-height:1.45; }
.diplomacy-event-popup > .row { flex-wrap:wrap; }
.diplomacy-event-popup > .row > button { flex:1 1 180px; }
@media(max-width:540px) {
    .inventory-icon { width:24px; height:24px; }
    .trade-visual { gap:3px; }
    .trade-visual .trade-good { width:30px; height:30px; }
    .trade-arrow { width:26px; height:24px; }
    .priority-row { grid-template-columns:minmax(0,1fr) 30px 30px; gap:3px; }
}
.trade-plus { font-size:14px; color:#886b35; }
.military-panel label { display:block; margin:10px 0; }
.military-panel select,.military-panel input,.military-decision input,.building-services input { padding:7px; border:1px solid #a28a66; border-radius:5px; background:#fff5df; max-width:100%; }
.military-panel select { display:block; width:100%; }
.military-panel input,.military-decision input,.building-services input { width:90px; }
.military-panel summary { cursor:pointer; padding:9px 0; }
.military-panel details > button { width:100%; }
.military-decision { width:100%; }
.battle-portraits { display:flex; justify-content:center; align-items:center; gap:12px; }
.battle-portraits figure { text-align:center; margin:0; max-width:40%; }
.battle-portraits figure img { display:block; width:100px; height:110px; object-fit:contain; margin:auto; }
.battle-portraits figcaption { font-size:13px; }
.military-aid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:12px 0; }
.military-aid article { border:1px solid #b89865; border-radius:7px; padding:10px; }
.military-aid h3 { font-size:16px; margin:3px 0; }
.military-aid button { width:100%; }
.military-decision > label { display:block; margin:12px 0; }
.military-event .diplomacy-event-body { display:block; margin-block:10px; }
.military-event .diplomacy-event-body > img { display:none; }
/* All three levels share cells; only the artwork grows around its fixed centre. */
.sound-settings { margin-block:10px; }
.sound-settings .sound-enabled { display:flex; align-items:center; gap:5px; font-size:12px; }
.sound-enabled input { width:auto; margin:0; }
.sound-settings .sound-volume { display:grid; grid-template-columns:minmax(80px,1fr) minmax(40px,1fr) 35px; align-items:center; gap:5px; font-size:12px; }
.sound-volume input { width:100%; min-width:0; margin:0; }
.sound-volume output { text-align:right; font-size:11px; }
.tool-panel { --navigation-fade:4px; --navigation-shade:#76542c14; --navigation-selected-scale:1.38; --building-selection-surface:#e4cc99; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) { --navigation-bridge:0px; --navigation-tail:var(--navigation-fade); display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:auto; align-content:start; align-items:start; gap:1.5px; padding:6px 1px 4px; margin:0; min-width:0; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button { display:grid; place-items:center; position:relative; width:100%; height:auto; aspect-ratio:1; min-height:0; min-width:0; padding:2px; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button>:is(img,.asset,.tool-icon,.local-ministry-icon,.demolition-tool-icon) { display:block; width:100%; max-width:38px; height:auto; aspect-ratio:1; object-fit:contain; pointer-events:none; transform-origin:center center; }
.tool-panel button:is(.icon-button,.build-icon-button,.loan-action,.ministry-remove,.help-hint-button):is(:enabled,:disabled),
.tool-panel .compact-route-actions button:is(:enabled,:disabled) { border:0; border-image:none; background:none; box-shadow:none; outline:0; text-shadow:none; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button:is([aria-pressed="true"],[aria-selected="true"])::after { content:none; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button:is([aria-pressed="true"],[aria-selected="true"]) { z-index:1; }
/* Continue the next plane behind the active artwork; the trailing fade meets
   the ordinary transition below the row without a second dark band. */
.tool-panel :is(.tool-tabs,.local-icon-tabs) button:is([aria-pressed="true"],[aria-selected="true"])::before { content:""; position:absolute; z-index:-1; pointer-events:none; inset:-6px -.75px calc(-4px - var(--navigation-bridge) - var(--navigation-tail)); background:linear-gradient(to bottom,transparent,var(--navigation-shade) var(--navigation-fade),var(--navigation-shade) calc(100% - var(--navigation-tail)),transparent); }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button:is([aria-pressed="true"],[aria-selected="true"])>:is(.asset,.tool-icon,.local-ministry-icon,img,.reclamation-icon,.demolition-tool-icon) { transform:scale(var(--navigation-selected-scale)); }
.tool-panel .tool-body { padding:0 0 5px; scrollbar-gutter:stable; }
.tool-panel .tool-tabs { overflow-y:hidden; scrollbar-gutter:stable; }
.tool-panel .tool-body,.tool-panel .icon-level-three { background:linear-gradient(to bottom,transparent,var(--navigation-shade) var(--navigation-fade)); }
.tool-panel .building-palette { gap:2px; }
.tool-panel .building-group-tabs { --navigation-bridge:2px; }
.tool-panel .building-icon-grid { --navigation-shade:var(--building-selection-surface); --navigation-bridge:4px; --navigation-tail:0px; }
.tool-panel .building-group { padding:0 0 4px; border:0; border-radius:0; box-shadow:none; }
.tool-panel .building-group>h2 { font-size:14.7px; margin:0; padding:5px 6px 2px; }
.tool-panel .building-selection { margin:4px; background:var(--building-selection-surface); }
.tool-panel .building-selection-heading { display:grid; grid-template-columns:clamp(52px,27%,96px) minmax(0,1fr); align-items:start; gap:8px; }
.tool-panel .building-selection-heading .building-preview { width:100%; height:auto; aspect-ratio:1; margin:0; }
.tool-panel .building-selection-heading .building-preview>:is(.reclamation-icon,.demolition-tool-icon) { display:block; width:100%; height:100%; }
.building-selection-costs { min-width:0; }
.tool-panel .building-selection-heading h3 { font-size:16px; line-height:1.2; overflow-wrap:anywhere; }
.building-selection-picture { display:contents; }
.building-selection-heading .building-preview{grid-column:1;grid-row:1}
.building-selection-heading .building-selection-costs{grid-column:2;grid-row:1}
.tool-panel .building-selection-picture>h3,.building-selection-name { grid-column:1/-1;grid-row:2; }
.building-selection-name { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; min-width:0; }
.tool-panel .building-selection-picture h3 { position:static; margin:0; width:max-content; max-width:none; font-size:16px; line-height:1.2; text-align:left; white-space:nowrap; overflow-wrap:normal; }
.construction-metrics { display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.construction-metric { display:inline-flex; align-items:center; gap:2px; position:relative; font-size:13px; min-height:28px; }
.construction-metric>img,.construction-metric>.asset { width:28px; height:28px; object-fit:contain; }
.construction-metric.metric-overlay { width:30px; justify-content:center; }
.metric-overlay>strong,.prerequisite-icon>strong { position:absolute; inset:0; display:grid; place-items:center; color:#fff7dc; text-shadow:-1px -1px 1px #38260f,1px 1px 1px #38260f,-1px 1px 1px #38260f,1px -1px 1px #38260f; font-weight:800; }
.metric-cleaning>strong { color:#d5ffc5; }
.commodity-shortage>strong { color:#b2221b; }
.purpose-symbols { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:32px; vertical-align:middle; }
.purpose-symbols>.asset,.purpose-symbols>img { display:inline-block; width:32px; height:32px; object-fit:contain; flex:none; }
.purpose-symbols>img.purpose-sign { width:22px; height:22px; }
.purpose-symbols>strong { font-size:17px; }
.purpose-automation>.asset { width:30px; height:30px; }
.construction-prerequisites { margin:6px 0; }
.prerequisite-icons { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.prerequisite-label { font-size:14.4px; font-weight:600; }
.prerequisite-icon { position:relative; display:inline-flex; width:calc(38px * var(--navigation-selected-scale,1.38)); aspect-ratio:1; flex:none; }
.prerequisite-icon>.building-symbol { width:100%; height:100%; }
.prerequisite-icon>strong { font-size:22px; }
.prerequisite-icon.prerequisite-missing>.building-symbol { filter:grayscale(1); opacity:.6; }
.prerequisite-icon>.research-hourglass { position:absolute; width:60%; height:75%; object-fit:contain; inset:18% 0 auto auto; filter:drop-shadow(0 1px 1px #402810); }
.prerequisite-text { margin:3px 0; font-size:12px; line-height:1.4; }
.road-terrain-costs { display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0; }
.road-terrain-cost,.terrain-cost-adjustment { display:inline-flex; align-items:center; gap:3px; }
.road-terrain-cost { font-size:13px; }
.road-terrain-cost .asset { width:24px; height:24px; }
.road-terrain-cost>.terrain-cost-icon { width:32px; height:32px; }
.language-flags{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:8px}
.language-flag{width:42px;height:34px;min-height:0;padding:4px;flex-shrink:0}
.language-flag[aria-pressed=false]{width:28px;height:24px;padding:2px}
.language-flag img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;pointer-events:none}
.language-flag[aria-pressed=true]{transform:scale(1.22);z-index:1;outline:2px solid #9b752d;outline-offset:1px}
.language-setting-compact{justify-content:center;display:flex}.language-setting-compact .language-flags{justify-content:center}
.building-popup-overview:has(>.cat-presence){grid-template-columns:210px 100px minmax(0,1fr)}
.cat-presence{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;min-width:0;text-align:center}
.cat-presence img{display:block;width:72px;height:72px;object-fit:contain}
.cat-presence figcaption{font-size:12px;line-height:1.3;max-width:110px}
.neighbor-popup-images{display:flex;align-items:center;gap:16px}
@media(max-height:600px) and (min-width:600px){.building-popup-overview:has(>.cat-presence){grid-template-columns:150px 80px minmax(0,1fr)}.cat-presence img{width:56px;height:56px}}
@media(max-width:600px){.building-popup-overview:has(>.cat-presence){grid-template-columns:100px 64px minmax(0,1fr)}.cat-presence img{width:48px;height:48px}.cat-presence figcaption{font-size:11px}}
.building-selection-costs .building-cost-label { margin:5px 0 2px; }
/* Small control-panel labels: 12 -> 14.4 px and 13 -> 15.6 px.
   Keep commodity numbers and icon/touch target sizes independent. */
.tool-body :is(dt,label) { font-size:16.8px; }
.tool-body :is(.building-cost-label,.building-selection-details>summary,.settings-section-heading,.sound-enabled,.sound-volume,.population-growth label,.age-bands>div>span,.route-summary dt,.development-card details dt,.route-overview>h3,.building-group h3) { font-size:14.4px; }
.tool-body :is(.animation-setting>span,.priority-row>strong,.development-card summary) { font-size:15.6px; }
.tool-body .panel-scale-settings .settings-section-heading>label { font-size:16.8px; }
.tool-body .animation-setting>span,.tool-body .building-cost-label { white-space:nowrap; }
.tool-body .animation-options:has(>:last-child:nth-child(2)) { grid-template-columns:repeat(2,44px); }
.tool-body .sound-volume { grid-template-columns:max-content minmax(40px,1fr) 35px; }
.tool-body .sound-volume>span { white-space:nowrap; }
.tool-body .population-inline .age-bands>div { grid-template-columns:90px minmax(0,1fr) 24px; }
.tool-body .age-bands>div>span { white-space:nowrap; }
.building-selection-costs .effect-resources { gap:3px 7px; zoom:.6; }
:root:not(.island-native) .building-selection-costs .effect-resources { zoom:1.2; }
.building-selection-costs .commodity-value { gap:2px; font-size:12px; }
.building-selection-costs .commodity-value>.asset { width:20px; height:20px; }
.tool-panel button:is(.icon-button,.build-icon-button,.loan-action,.ministry-remove,.help-hint-button):focus-visible,
.tool-panel .compact-route-actions button:focus-visible { outline:2px solid #c48d27; outline-offset:-2px; }
.tool-panel button:is(.icon-button,.build-icon-button,.loan-action):hover:enabled { opacity:.8; }
.tool-panel :is(.tool-tabs,.local-icon-tabs) button:is([aria-pressed="true"],[aria-selected="true"]):hover:enabled { opacity:1; }
.tool-icon-trade { background-image:url('art/administration/trade-cart-wood-v2.png'); background-size:400% 400%; background-position:0 0; }
@media(max-width:540px){.tool-panel :is(.tool-tabs,.local-icon-tabs){gap:.5px}}
@media(max-width:850px){.tool-panel{--navigation-fade:3px}}
.population-inline .population-growth { display:block; }
.population-inline .age-bands { display:flex; flex-direction:column; }

/* Smaller shared help marks sit after the value, at the row's trailing edge. */
.help-hint{display:inline-flex;flex:0 0 auto;margin-inline-start:auto;vertical-align:middle}
.help-hint-button{width:24px;height:24px;min-height:24px;padding:2.4px}
.help-hint-button img{width:16px;height:19.2px}
h2:has(>.help-hint),h3:has(>.help-hint),label:has(>.help-hint),p:has(>.help-hint){display:flex;align-items:center;gap:4px}
.wellbeing-factors dd:has(>.help-hint),.population-facts dd:has(>.help-hint),.administration-facts dd:has(>.help-hint),.population-inline dd:has(>.help-hint){display:flex;align-items:center;gap:4px;min-width:0}
.population-inline .age-bands,.population-popup .age-bands{gap:1px}
.population-inline .age-bands>div,.population-popup .age-bands>div{grid-template-columns:74px minmax(12px,1fr) 24px 24px;gap:3px;min-height:0;padding:0;line-height:1.1}
.population-inline .age-bands>div>span{display:block}
.court-choices{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.court-choices button{text-align:left;white-space:normal;line-height:1.4;padding:10px 12px}
.court-event .event-impact{white-space:pre-line}
.court-event .diplomacy-event-body>img{object-fit:contain;max-height:40vh}
@media(pointer:coarse){.help-hint-button{width:28.8px;height:28.8px;min-height:28.8px}.population-inline .age-bands>div,.population-popup .age-bands>div{grid-template-columns:65px minmax(10px,1fr) 22px 28.8px}}
@media(max-height:600px) and (min-width:600px){.court-event .diplomacy-event-body{grid-template-columns:38% minmax(0,1fr);align-items:start}.court-event .diplomacy-event-body>img{max-height:28vh}.court-choices{gap:4px}.court-choices button{padding:6px 9px;font-size:12px}}
.resource-flow-icon { position:relative; display:inline-block; width:66px; height:52px; }
.resource-flow-icon .asset { width:52px; height:52px; }
.resource-flow-icon .flow-up,.resource-flow-icon .flow-down { position:absolute; right:1px; top:0; font-size:32px; font-weight:900; line-height:1.1; text-shadow:0 1px 1px #f9e6ab,1px 1px 1px #372610; }
.resource-flow-icon .flow-up { color:#2c963e; right:15px; }
.resource-flow-icon .flow-down { color:#bd3027; top:17px; }
.upgrade-icon { position:relative; width:106px; height:92px; padding:6px; }
.upgrade-icon .asset,.upgrade-picture { display:block; width:80px; height:76px; background-repeat:no-repeat; }
.upgrade-icon b { position:absolute; right:8px; bottom:4px; color:#8cdf68; font-size:36px; text-shadow:1px 2px #233913; }
.advisor-speech .advisor-project-button { position:static; display:block; width:64px; height:58px; margin-top:8px; }
.building-benefits { padding-left:20px; }
.route-result { display:block; font-size:.8rem; line-height:1.3; color:#664124; max-width:100%; overflow-wrap:anywhere; }
.route-repetitions { font-size:1.15rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.local-ministry-icon { display:block; background-size:contain; background-position:center; background-repeat:no-repeat; }
.resource-trade-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.resource-trade-table td,.resource-trade-table th { padding:5px; text-align:left; border-bottom:1px solid #93754455; }
.resource-trade-table th .commodity-value { justify-content:center; }
.ministry-action-icon { display:block; object-fit:contain; }
.ministry-controls>.ministry-view-tabs { display:flex; align-items:center; gap:8px; margin:8px 0 12px; }
.ministry-controls>.ministry-view-tabs>button { position:relative; display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; min-width:48px; min-height:48px; padding:3px; }
.ministry-controls>.ministry-view-tabs>button>.ministry-action-icon { width:38px; height:38px; max-width:100%; max-height:100%; }
.ministry-view-tabs>button[aria-pressed="true"] { outline:2px solid #b58a39; outline-offset:-2px; }
.ministry-controls .local-icon-tabs button { position:relative; }
.ministry-queue-count { position:absolute; right:1px; bottom:1px; min-width:18px; padding:1px 3px; border:1px solid #b89c61; border-radius:6px; background:#38291c; color:#ffe7ac; font-size:12px; }
.ministry-remove { width:48px; height:48px; padding:3px; flex-shrink:0; }
.ministry-remove img { display:block; width:100%; height:100%; object-fit:contain; }
.demolish-ring { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; pointer-events:none; }
.building-effects section { margin:0 0 12px; padding:8px 10px; background:#f6eddc80; border:1px solid #b59b6c60; border-radius:7px; }
.building-effects h4 { margin:0 0 6px; }
.building-effects p { margin:5px 0; }
.effect-resources { display:flex; flex-wrap:wrap; gap:12px; }
.production-intensities { display:flex; flex-wrap:wrap; gap:12px; border:1px solid #b59b6c; border-radius:6px; padding:12px; }
.production-intensities label { display:flex; align-items:center; gap:6px; }
.production-intensities input { width:18px; height:18px; accent-color:#43716d; }
.diplomacy-event-body.opportunity-layout { display:flex; flex-direction:column; align-items:center; text-align:center; }
.diplomacy-event-body.opportunity-layout > img { max-height:35vh; width:auto; max-width:100%; object-fit:contain; }

/* Compact trade controls retain their painted artwork and room for the map. */
.building-popup .market-exchange button,.route-offers .market-exchange button,.market-barter>button { padding:4px 3px; }
.market-trading { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,3fr); gap:16px; align-items:start; }
.market-controls { min-width:0; padding-top:8px; }
.market-quantity { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; font-size:14px; }
.market-quantity output { min-width:3ch; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.market-controls :is(#market-quantity,#market-barter-quantity) { width:100%; min-width:0; padding:0; margin:12px 0 0; }
/* Reserve feedback space even before the first trade, including longer failures. */
.market-message { margin:8px 0 0; block-size:4.5em; line-height:1.5; overflow-y:auto; overflow-wrap:anywhere; scrollbar-gutter:stable; }
.market-offer-list { min-width:0; }
.building-popup .market-trading .market-exchange { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Shrink the entire offer, including its frame, spacing, numbers and artwork. */
.market-exchange>.trade-offer-button { --trade-offer-scale:.8; zoom:var(--trade-offer-scale); inline-size:calc(100% * var(--trade-offer-scale)); justify-self:center; }
.island-native .market-exchange>.trade-offer-button { --trade-offer-scale:.5; }
.island-native .advisor.trade-advisor { bottom:0; left:0; right:0; gap:0; }
.island-native .advisor.trade-advisor>img { display:block; width:55px; height:67.5px; flex-basis:55px; }
.island-native .trade-advisor>.advisor-speech { display:flex; align-items:center; gap:4px; flex:1; min-width:0; height:34px; padding:2px 32px 2px 6px; border-width:1.5px; border-radius:6px 0 0 0; }
.island-native .trade-advisor>.advisor-speech::before,.island-native .trade-advisor>.advisor-speech>strong { display:none; }
.island-native .trade-advisor>.advisor-speech>p { flex:1; min-width:0; margin:0; font-size:12px; line-height:26px; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.island-native .trade-advisor>.advisor-speech>p::-webkit-scrollbar { display:none; }
.island-native .trade-advisor>.advisor-speech>button { top:2px; right:2px; width:28px; height:28px; min-height:28px; }
.island-native .trade-advisor>.advisor-speech>.advisor-project-button { position:static; flex:0 0 28px; margin:0; padding:2px; }
.island-native .trade-advisor .advisor-project-button>.tool-icon { width:24px; height:24px; }
@media(max-width:850px) {
 .island-native .advisor.trade-advisor>img { width:37.5px; height:50px; flex-basis:37.5px; }
}
.island-native .tool-body :is(.population-facts,.wellbeing-factors) { grid-template-columns:minmax(0,1fr) max-content; gap:5px 6px; }
.island-native .tool-body .wellbeing-factors { grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); }
.island-native .tool-body :is(.population-facts,.wellbeing-factors) dt { align-self:center; justify-content:flex-start; }
.island-native .tool-body :is(.population-facts,.wellbeing-factors) dd { align-self:center; max-width:none; padding:0; border:0; text-align:right; justify-content:flex-end; }
.island-native .tool-body .population-facts dd { white-space:nowrap; }
.game-popup.route-popup { width:min(800px,calc(100vw - 32px)); }
.route-offers .market-exchange { grid-template-columns:150px minmax(0,1fr) minmax(0,1fr); align-items:center; margin:6px 0; }
.route-partner-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.route-partner-heading>p { margin:6px 0; }
.route-good-demand { display:grid; gap:2px; font-size:12px; }
.route-good-demand>span { font-size:11px; line-height:1.2; }
.route-offers .market-exchange>strong { grid-column:auto; font-size:12px; }
.route-offers .market-exchange button[aria-pressed=true] { outline:2px solid #be8a2c; outline-offset:-2px; }
.route-editor { margin-top:12px; }
.route-editor label:first-child { grid-column:auto; }
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
 .game-popup.route-popup { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr); gap:5px 14px; width:calc(100vw - 32px); }
 .route-popup>h2,.route-popup>.route-partner-heading { grid-column:1/-1; margin:0; }
 .route-popup>.route-offers { grid-column:1; grid-row:3/span 6; align-self:start; }
 .route-popup>.route-editor,.route-popup>p,.route-popup>.popup-action { grid-column:2; margin:0; }
 .route-popup>.route-editor { grid-template-columns:minmax(0,1fr); gap:4px; }
 .route-popup>.route-editor label { display:grid; grid-template-columns:minmax(0,1fr) 80px; align-items:center; gap:6px; font-size:12px; line-height:1.15; }
 .route-popup>.route-editor input { min-height:30px; padding:4px; margin:0; font-size:13px; }
 .route-popup>p { font-size:12px; line-height:1.25; }
 .route-popup>p.hint { font-size:11px; }
 .route-popup>.popup-action { min-height:42px; padding:4px; }
 .route-popup>.route-offers .market-exchange { grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:4px; margin:4px 0; }
 .route-popup>.route-offers .market-exchange button { min-height:46px; padding:4px 2px; }
 .route-popup>.route-offers .trade-visual { gap:2px; flex-wrap:nowrap; }
 .route-popup>.route-offers .trade-side { gap:2px; flex-direction:column; flex-wrap:nowrap; }
 .route-popup>.route-offers .trade-side strong { font-size:14px; }
 .route-popup>.route-offers .trade-good { width:24px; height:24px; }
 .route-popup>.route-offers .trade-arrow { width:16px; }
 .route-popup>.popup-action .trade-good { width:26px; height:26px; }
 .route-popup>.popup-action .trade-side strong { font-size:16px; }
}
.compact-route { display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:3px 0; }
.compact-route>.trade-visual { flex:none; gap:3px; }
.compact-route .trade-good { width:30px; height:30px; }
.compact-route .trade-side { min-width:0; }
.compact-route-actions { display:flex; align-items:center; gap:0; margin-left:auto; }
.compact-route-actions button { display:grid; place-items:center; width:24px; height:30px; min-height:30px; padding:1px; }
.compact-route>.help-hint { margin-left:0; }
.compact-route .help-hint-button { width:20px; height:30px; min-height:30px; padding:1px; }
.compact-route.route-paused>.trade-visual { filter:grayscale(1); opacity:.6; }
.compact-route.route-paused { opacity:1; }
.trade-balance { margin-top:10px; }
.trade-balance>summary { cursor:pointer; font-weight:650; }
.route-overview>h3 { font-size:12px; margin:6px 0; }
.header-population .housing-progress { accent-color:#68a6bd; }
.header-population .housing-progress::-webkit-progress-value { background:#68a6bd; }
.header-population .housing-progress::-moz-progress-bar { background:#68a6bd; }
.diplomacy-event-popup:not(.court-event):not(.military-event):not(.automatic-purchase-failure) .diplomacy-event-body:not(.opportunity-layout):not(.despot-event-body) { grid-template-columns:minmax(0,1.8fr) minmax(0,.75fr); gap:20px; }
#diplomacy-event-text { font-weight:700; color:#352316; }
.island-native .game-popup:has(.despot-event-body) { width:calc(100vw - 32px); }
@media (orientation:landscape) and (max-height:600px) {
 .island-native .game-popup:has(.despot-event-body) { padding:10px 14px; }
 .island-native .game-popup:has(.despot-event-body)>h2 { font-size:18px; margin-block:0 3px; }
 .island-native .game-popup:has(.despot-event-body)>p.hint { font-size:11px; margin-block:2px; }
 .island-native .diplomacy-event-popup .diplomacy-event-body.despot-event-body { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:12px; margin-block:8px; }
 .island-native .despot-event-body #diplomacy-event-text { font-size:12.5px; line-height:1.35; margin-block:4px; }
 .island-native .despot-event-body .event-neighbor-portraits img { width:32px; height:40px; }
 .island-native .game-popup:has(.despot-event-body)>.row>button { font-size:13px; padding:6px 10px; min-height:30px; }
}
.event-neighbor-portraits { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.diplomacy-event-body .event-neighbor-portraits img { width:64px; height:76px; aspect-ratio:auto; object-fit:contain; border:0; border-radius:0; background:none; }
@media(max-width:620px) {
 .building-actions .popup-action-label { font-size:11px; }
 .diplomacy-event-popup:not(.court-event):not(.military-event):not(.automatic-purchase-failure) .diplomacy-event-body:not(.opportunity-layout):not(.despot-event-body) { grid-template-columns:minmax(0,1fr); gap:10px; }
 .diplomacy-event-body>img { max-height:40vh; }
 .route-offers .market-exchange { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; }
 .route-offers .market-exchange>strong,.route-offers .route-good-demand { grid-column:1/-1; }
 .route-good-demand { display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; }
 .route-offers .trade-visual .trade-good { width:34px; height:34px; }
 .route-offers .trade-side strong { font-size:18px; }
 .route-offers .trade-side { gap:2px; }
 .route-offers .trade-visual { gap:2px; }
 .route-offers .trade-arrow { width:22px; }
 .market-trading { grid-template-columns:minmax(0,1fr); gap:8px; }
}
@media(max-width:540px) {
 .compact-route-actions button { width:18px; height:28px; min-height:28px; padding:0; }
 .compact-route-actions .route-action-icon { width:18px; height:22px; }
 .compact-route .help-hint-button { width:18px; height:28px; min-height:28px; padding:0; }
 .compact-route .route-repetitions { font-size:15px; }
}
@media(max-width:850px) {
 .compact-route { flex-wrap:nowrap; gap:1px; }
 .compact-route-actions button { width:16px; height:28px; min-height:28px; padding:0; }
 .compact-route-actions .route-action-icon { width:16px; height:22px; }
 .compact-route .help-hint-button { width:18px; height:28px; min-height:28px; padding:0; }
 .compact-route .route-repetitions { font-size:14px; }
}
.market-barter { padding:12px 0; border-top:1px solid #b59b6c; }
.land-action-button > img { width:64px; height:64px; object-fit:contain; }