/* 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 { position:relative; min-width:0; }
.tool-panel .building-selection-picture h3 { position:absolute; bottom:0; left:0; right:0; margin:0; font-size:14px; line-height:1.05; text-align:center; text-shadow:0 1px 2px #fff3d6,-1px 0 #fff3d6,1px 0 #fff3d6; }
.building-selection-costs .building-cost-label { margin:5px 0 2px; }
.building-selection-costs .effect-resources { gap:3px 7px; zoom:.6; }
.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 .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:64px minmax(0,1fr); gap:10px; align-items:start; }
.market-quantity { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:8px; font-size:12px; }
.market-quantity #market-quantity { width:62px; min-width:0; padding:5px; margin:0; }
.market-offer-list { min-width:0; }
/* 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-values { width:30.4px; min-width:30.4px; }
.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; }
.topbar .resource-button { display:flex; align-items:center; justify-content:center; }
.topbar .resources { padding:0; }
.diplomacy-event-popup:not(.court-event):not(.military-event) .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) .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:54px minmax(0,1fr); gap:5px; }
 .market-quantity #market-quantity { width:52px; }
}
@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; }
 .header-population-values { width:22.4px; min-width:22.4px; }
 .topbar .resource { min-width:28px; }
}
@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; }
}
@media(max-width:360px) {
 .topbar { gap:3px; padding-inline:4px; }
 .topbar h1 { font-size:15px; }
 .topbar .resource { min-width:24px; padding:1px; }
}
@media(min-width:541px) and (max-width:850px) {
 .topbar .resources { gap:3px; }
 .topbar .resource { gap:3px; padding:2px 3px; }
 .topbar .resource strong { font-size:14px; }
 .topbar .resource .asset,.topbar .inventory-icon { width:24px; height:24px; }
}
.barter-selectors { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.barter-selectors label { display:flex; flex-direction:column; gap:4px; flex:1 1 120px; }
.barter-selectors input,.barter-selectors select { width:100%; min-width:0; }
.market-barter { padding:12px 0; border-top:1px solid #b59b6c; }
.land-action-button > img { width:64px; height:64px; object-fit:contain; }