:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#342e25;background:#f3eddf;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{padding:11px 14px;min-height:44px;font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #387d8a;outline-offset:3px}.topbar{padding:20px 28px 14px;display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#6f7462;font-weight:700}h1{font-family:Georgia,serif;font-size:34px;margin:3px 0}h1 small{font:500 14px system-ui;color:#777060;margin-left:15px}.population{font-size:14px}.badge{display:inline-block;margin-left:8px;background:#dce8d2;color:#47643b;border-radius:20px;padding:5px 10px;font-size:12px}.resources{margin:0 28px 18px;background:#e7dcc4;border:1px solid #d4c6a7;display:flex;justify-content:space-around;border-radius:14px;padding:8px 10px;gap:8px}.resource{display:flex;align-items:center;gap:8px;min-width:0}.resource>span:last-child{font-size:12px;color:#76654b}.resource strong{display:block;font-size:20px;color:#342e25}.asset{display:inline-block;flex-shrink:0;width:48px;height:48px;background-image:url('art/medieval-atlas-v1.png');background-size:400% 400%;background-repeat:no-repeat}.debt-symbol{font-size:35px;color:#856c4e;width:32px;text-align:center}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:20px;margin:0 28px}.map-panel{position:sticky;top:16px;overflow:hidden;border-radius:18px;border:1px solid #ccbea2;background:#e6f0ed;box-shadow:0 8px 24px #58452b0d}.map-caption{padding:14px 18px;background:#fff9eb;display:flex;justify-content:space-between;gap:12px;font-size:14px}.map-caption span{font-size:12px;color:#6b7569}.map-viewport{height:min(65vh,660px);min-height:350px;position:relative;background:#59a2b1}.map-viewport canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.map-controls{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}.map-controls button{width:44px;padding:4px;font-size:23px}.message{padding:16px 18px;background:#fff9eb;font-size:14px;min-height:56px}.save-status{padding:0 18px 13px;background:#fff9eb;font-size:12px;color:#617257}aside{display:grid;gap:14px}.card{border:1px solid #d5c8ad;background:#fffaf0;border-radius:14px;padding:18px}h2{font-family:Georgia,serif;font-size:21px;margin:0 0 12px}p{font-size:14px;margin:8px 0 12px}.hint{font-size:12px;color:#776f60;line-height:1.6}dl{display:grid;grid-template-columns:1fr auto;margin:0 0 14px;font-size:14px;gap:6px}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}dt:last-of-type,dd:last-of-type{border-top:1px solid #ddcfb3;padding-top:8px;font-weight:700}.positive{color:#577541}.negative{color:#b34b3d}label{font-size:14px}label strong{float:right}input[type=range]{width:100%;margin:14px 0;accent-color:#64864b;min-height:24px}.row{display:flex;gap:8px}.row>*{flex:1}.buildings{display:grid;gap:7px}.build-button{display:flex;align-items:center;gap:10px;text-align:left;padding:6px 10px;width:100%}.build-button .asset{width:54px;height:54px}.build-button small{display:block;font-weight:400;font-size:11px;color:#7b715f;margin-top:4px}.card>button{width:100%;margin:4px 0}.file-label{display:block;border:1px dashed #c2b493;border-radius:8px;margin:8px 0;padding:10px;font-size:12px}.file-label input{max-width:100%;display:block;margin-top:8px;font-size:12px}footer{text-align:center;padding:22px;font-size:12px;color:#8c816e}.boot{text-align:center;padding:20vh 20px}#blazor-error-ui{display:none;position:fixed;bottom:0;background:#ffe5be;padding:12px;width:100%;z-index:20}@media(max-width:850px){.topbar{padding:14px 16px}.resources{margin:0 16px 12px}.asset{width:36px;height:36px}.resource{gap:4px}.resource strong{font-size:17px}main{grid-template-columns:1fr;margin:0 16px}.map-panel{position:relative;top:0}.map-viewport{height:48vh;min-height:300px}aside{grid-template-columns:repeat(2,minmax(0,1fr))}.map-caption span{display:none}}@media(max-width:520px){.population{font-size:12px}h1{font-size:29px}.resources{padding:7px 4px;gap:2px}.resource .asset{width:27px;height:27px}.resource>span:last-child{font-size:10px}.resource strong{font-size:15px}.debt-symbol{width:20px;font-size:25px}.badge{display:block;margin:4px 0 0;text-align:center}aside{grid-template-columns:1fr}.card{padding:15px}.map-viewport{min-height:280px}}

.speed-select{width:100%;padding:10px 12px;border:1px solid #bba882;border-radius:9px;background:#fffaf0;color:#342e25;margin:8px 0 14px;min-height:44px}

.trade-offers{display:grid;gap:7px}.trade-offers button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left}.trade-offers button strong{white-space:nowrap;font-size:12px}.settlement-card{border-color:#9fb58a;background:#f8f8e9}

.build-button .building-effect{display:block;font-size:11px;color:#547147;margin-top:3px}
.wellbeing-card{border-color:#b8c79f;background:#f9fbf1}.wellbeing-summary{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.wellbeing-summary strong{font-size:25px;color:#456a42}.wellbeing-summary span{font-size:12px;color:#64765b;text-align:right}.wellbeing-card progress{width:100%;height:13px;accent-color:#6b9555}.wellbeing-factors{margin:12px 0 8px}.wellbeing-factors dt:last-of-type,.wellbeing-factors dd:last-of-type{border:0;padding:0;font-weight:400}

/* Medieval game frame */
:root {
    --oak-dark: #3d2416;
    --oak-mid: #744524;
    --oak-light: #ad7743;
    --parchment: #f7ecd4;
    --ink: #352b21;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -15%, #fff9e9 0, #efe0c2 58%, #dfcba9 100%);
}

.topbar {
    color: #f8eed8;
    background:
        repeating-linear-gradient(97deg, #4b2b19 0 18px, #63391f 18px 37px, #704324 37px 42px, #54301b 42px 66px);
    border-bottom: 5px solid #a4713c;
    box-shadow: inset 0 2px #d2a36a, inset 0 -2px #342015, 0 4px 12px #3d241633;
}
.topbar .eyebrow, .topbar h1 small { color: #e4c99c; }
.topbar .badge {
    color: #f1f5df;
    background: #416044;
    border: 1px solid #a8bd83;
    box-shadow: inset 0 1px #ffffff55;
}

.resources {
    margin-top: 16px;
    color: #f6ead2;
    background:
        linear-gradient(#ffffff17, #0000001c),
        repeating-linear-gradient(96deg, #724523 0 15px, #85552e 15px 33px, #674020 33px 38px);
    border: 5px solid var(--oak-dark);
    box-shadow: inset 0 0 0 2px #bb8750, 0 4px 0 #5c381f, 0 8px 18px #3d241633;
}
.resource { padding: 3px 7px; }
.resource > span:last-child { color: #e5cfaa; }
.resource strong { color: #fff8e8; }
.debt-symbol { color: #e6c483; }

.map-panel {
    border: 10px solid transparent;
    background:
        linear-gradient(var(--parchment), var(--parchment)) padding-box,
        repeating-linear-gradient(96deg, #4c2c19 0 12px, #8a552d 12px 25px, #b78248 25px 29px, #61391d 29px 43px) border-box;
    box-shadow: inset 0 0 0 2px #e2bb7b, 0 5px 0 #482a19, 0 14px 28px #3d24163d;
}
.map-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 8px;
    background:
        radial-gradient(circle at 6px 6px, #ffe1a0 0 2px, #77502b 3px 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) 6px, #ffe1a0 0 2px, #77502b 3px 4px, transparent 5px),
        radial-gradient(circle at 6px calc(100% - 6px), #ffe1a0 0 2px, #77502b 3px 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #ffe1a0 0 2px, #77502b 3px 4px, transparent 5px);
}
.map-caption {
    color: #f8ecd3;
    background: linear-gradient(180deg, #83512d, #5b351f);
    border-bottom: 3px solid #372215;
    text-shadow: 0 1px #2c1a12;
}
.map-caption span { color: #e8d2ae; }
.map-viewport { border-block: 2px solid #3d2a1b; }
.message, .save-status { background: linear-gradient(135deg, #fff7e5, #f0e3c6); }
.message { border-top: 2px solid #c9a36f; color: var(--ink); }
.save-status { color: #6c604a; }
.loading {
    position: absolute;
    inset: auto 14px 14px;
    padding: 10px 14px;
    color: var(--ink);
    background: var(--parchment);
    border: 2px solid var(--oak-mid);
    border-radius: 8px;
    box-shadow: 0 3px 9px #24180e55;
}

.card {
    position: relative;
    color: var(--ink);
    border: 6px solid transparent;
    background:
        linear-gradient(150deg, #fff8e9, #efe0c2) padding-box,
        repeating-linear-gradient(96deg, #51301c 0 10px, #8b562e 10px 23px, #b9834a 23px 27px, #684021 27px 39px) border-box;
    box-shadow: inset 0 0 0 1px #8e693e, 0 3px 0 #4a2c1a, 0 8px 18px #3d24162e;
}
.card::before {
    content: "";
    position: absolute;
    inset: -4px;
    pointer-events: none;
    background:
        radial-gradient(circle at 7px 7px, #dfbc7b 0 2px, #654220 3px 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 7px) 7px, #dfbc7b 0 2px, #654220 3px 4px, transparent 5px),
        radial-gradient(circle at 7px calc(100% - 7px), #dfbc7b 0 2px, #654220 3px 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #dfbc7b 0 2px, #654220 3px 4px, transparent 5px);
}
.card.wellbeing-card {
    background:
        linear-gradient(150deg, #fbf9e9, #e9ebd5) padding-box,
        repeating-linear-gradient(96deg, #51301c 0 10px, #8b562e 10px 23px, #b9834a 23px 27px, #684021 27px 39px) border-box;
}
.card.settlement-card {
    background:
        linear-gradient(150deg, #f8f4e1, #e5e8cf) padding-box,
        repeating-linear-gradient(96deg, #51301c 0 10px, #8b562e 10px 23px, #b9834a 23px 27px, #684021 27px 39px) border-box;
}
.card h2 {
    color: #50351f;
    padding-bottom: 8px;
    border-bottom: 2px solid #b7935f;
    text-shadow: 0 1px #fff9e9;
}
.card .hint { color: #6d604d; }

.map-viewport canvas:focus-visible { outline: 3px solid #286879; outline-offset: 3px; }
.build-button .asset {
    background-color: #e8ddc5;
    border: 2px solid #a58456;
    border-radius: 8px;
    box-shadow: inset 0 1px #fff8e8, 0 1px 3px #4a352655;
}
.build-button small { color: #5d5549; }
.build-button .building-effect { color: #3f6246; }
.speed-select { margin: 8px 0 14px; }
input[type=range] { accent-color: #8c6238; }
.file-label {
    color: #4f3b29;
    background: #f7ecd4;
    border: 2px dashed #8f673d;
}
.wellbeing-card progress {
    overflow: hidden;
    border: 2px solid #785832;
    border-radius: 9px;
    background: #c8bea5;
    box-shadow: inset 0 2px 3px #4a392344;
}
.wellbeing-card progress::-webkit-progress-bar { background: #c8bea5; }
.wellbeing-card progress::-webkit-progress-value { background: linear-gradient(180deg, #92b673, #527b46); }
.wellbeing-card progress::-moz-progress-bar { background: linear-gradient(180deg, #92b673, #527b46); }

@media (max-width: 520px) {
    .resources {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }
    .resource { padding: 3px; }
    .map-panel { border-width: 7px; }
    .card { border-width: 5px; }
}

/* Fixed game workspace and image-based oak frames */
html, body { height: 100%; overflow: hidden; }
#app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.topbar, .resources, footer { flex: none; }
main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
    margin-bottom: 12px;
}
.map-panel {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.map-caption, .message, .save-status { flex: none; }
.map-viewport {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
aside {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    padding: 0 8px 12px 0;
    scrollbar-color: #8c5b32 #e8d8ba;
    scrollbar-width: thin;
}
footer { padding: 8px 16px 12px; }

.topbar {
    background-image: linear-gradient(#2e1c13a8, #3d2416b3), url('art/oak-texture-v1.png');
    background-size: auto, 100% auto;
    background-repeat: no-repeat, no-repeat;
}
.resources {
    background-image: linear-gradient(#4227198c, #4227198c), url('art/oak-texture-v1.png');
    background-size: auto, 100% auto;
    background-repeat: no-repeat, no-repeat;
}
.map-panel {
    background-image:
        linear-gradient(var(--parchment), var(--parchment)),
        linear-gradient(#40251555, #40251555),
        url('art/oak-texture-v1.png');
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    background-size: auto, auto, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
.card, .card.wellbeing-card, .card.settlement-card {
    background-image:
        linear-gradient(150deg, #fff8e9, #efe0c2),
        linear-gradient(#4c2b174d, #4c2b174d),
        url('art/oak-texture-v1.png');
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    background-size: auto, auto, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
.card.wellbeing-card {
    background-image:
        linear-gradient(150deg, #fbf9e9, #e9ebd5),
        linear-gradient(#4c2b174d, #4c2b174d),
        url('art/oak-texture-v1.png');
}
.card.settlement-card {
    background-image:
        linear-gradient(150deg, #f8f4e1, #e5e8cf),
        linear-gradient(#4c2b174d, #4c2b174d),
        url('art/oak-texture-v1.png');
}

.popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #1e1814bd;
    backdrop-filter: blur(2px);
}
.game-popup {
    width: min(100%, 440px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px;
    box-shadow: 0 16px 48px #120c09a6;
}
.popup-heading { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.popup-heading .asset { width: 58px; height: 58px; }
.popup-heading h2 { flex: 1; margin: 0; }
.game-popup > .popup-close { position: absolute; top: 12px; right: 12px; width: 44px; padding: 2px; font-size: 26px; }
.popup-warning {
    padding: 10px 12px;
    margin: 14px 0;
    color: #642b20;
    background: #f8e2d4;
    border-left: 4px solid #a94830;
    border-radius: 4px;
    font-weight: 600;
}
.popup-facts { margin: 16px 0; }
.popup-facts dd { max-width: 62%; }
.game-popup .popup-action { width: 100%; }

@media (max-width: 850px) {
    main { grid-template-columns: minmax(0, 1fr) minmax(230px, 36vw); }
    aside { grid-template-columns: 1fr; }
    .map-panel { position: relative; top: auto; }
    .map-viewport { height: auto; min-height: 0; }
}
@media (max-width: 650px) {
    main {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(210px, 56%) minmax(0, 1fr);
    }
    aside { grid-template-columns: 1fr; padding-right: 4px; }
    .resources { margin-top: 8px; margin-bottom: 9px; }
    footer { display: none; }
}
@media (max-height: 570px) {
    .topbar { padding-block: 7px; }
    .resources { margin-top: 7px; margin-bottom: 8px; padding-block: 2px; }
    footer { display: none; }
}
.popup-facts { grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); }
.popup-facts dd { max-width: none; overflow-wrap: anywhere; }
.popup-near-building {
    display: block;
    background: #1e18146b;
    backdrop-filter: none;
}
.popup-near-building .game-popup {
    position: absolute;
    left: var(--popup-x);
    top: var(--popup-y);
    max-height: calc(100dvh - var(--popup-y) - 16px);
}
.resource-button { text-align:left; min-width:0; }
#production-intensity { width: 100%; margin: 8px 0; }
.game-popup h3 { font-size: 1rem; margin-bottom: 8px; }
.game-popup progress { width: 100%; }

.market-exchange { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }
.market-exchange strong { grid-column:1/-1; text-transform:capitalize; }
#market-quantity { display:block; width:100%; padding:8px; margin:8px 0; }

/* Compact building palette; tooltips stay within the sidebar width. */
.building-palette { display: grid; gap: 14px; }
.building-group { position: relative; min-width: 0; }
.building-group h3 { margin: 0 0 7px; font-size: 12px; font-weight: 700; color: #665038; }
.building-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 54px); gap: 7px; }
.building-choice { min-width: 0; }
.build-icon-button { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 3px; min-height: 44px; }
.build-icon-button .asset { width: 44px; height: 44px; pointer-events: none; }
.build-icon-button > .reclamation-icon { width:44px; height:44px; }
.demolition-tool-icon { position:relative; display:block; width:44px; height:44px; }
.demolition-tool-icon > .asset,.demolition-tool-icon > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.build-icon-button[aria-disabled="true"] { cursor: default; }
.build-icon-button[aria-disabled="true"] .asset { opacity: .45; }
.build-icon-button[aria-disabled="true"]:active { transform: none; }
.building-lock { position: absolute; right: 2px; bottom: 2px; font-size: 11px; line-height: 1; }
.building-tooltip { display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 15; padding: 10px 12px; border: 2px solid #79502b; border-radius: 8px; background: #fff5de; box-shadow: 0 4px 12px #261a1444; color: #392b1e; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.building-tooltip strong, .building-tooltip span { display: block; }
.building-tooltip strong { font-size: 14px; margin-bottom: 3px; }
.building-unavailable { color: #88442c; margin-top: 5px; }
.building-choice:hover .building-tooltip:not(.tooltip-dismissed),
.building-choice:focus-within .building-tooltip:not(.tooltip-dismissed) { display: block; }
.building-palette .building-group:last-child .building-tooltip { top: auto; bottom: calc(100% + 5px); }

/* Building dialogs use the full viewport height, even when opened near its bottom. */
.game-popup.building-popup {
    width: min(900px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 24px;
}
.popup-near-building .game-popup.building-popup {
    left: clamp(16px, var(--popup-x), max(16px, calc(100vw - 916px)));
    top: 50%;
    transform: translateY(-50%);
    max-height: calc(100dvh - 32px);
}
.building-popup-body { margin: 16px 0; }
.building-popup-body.has-controls {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
}
.building-popup-summary, .building-popup-controls { min-width: 0; }
.building-popup .popup-facts { margin: 0 0 14px; grid-template-columns: minmax(90px, .6fr) minmax(0, 1.4fr); }
.building-popup .popup-facts dd { text-align: left; }
.building-popup-controls > h3:first-child { margin-top: 0; }
.building-popup .market-exchange { grid-template-columns: minmax(44px, .6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin: 8px 0; }
.building-popup .market-exchange strong { grid-column: auto; font-size: 12px; }
.building-popup .market-exchange button { padding: 8px 6px; font-size: 12px; }
.building-popup > .popup-action { margin-top: 12px; }
@media (max-width: 720px) {
    .game-popup.building-popup { padding: 18px; }
    .building-popup-body.has-controls { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 400px) {
    .building-popup .market-exchange { grid-template-columns: 1fr 1fr; }
    .building-popup .market-exchange strong { grid-column: 1 / -1; }
}
/* Compact fixed-height game shell; only the selected tool body scrolls. */
#app { display:flex; flex-direction:column; }
.topbar { flex:0 0 auto; padding:10px 18px; gap:14px; flex-wrap:wrap; }
.topbar h1 { font-size:29px; margin:0; }
.topbar .resources { margin:0 0 0 auto; border:0; box-shadow:none; background:transparent; padding:0; gap:4px; flex-wrap:wrap; }
.topbar .resource { padding:3px 7px; }
.topbar .resource .asset { width:36px; height:36px; }
.topbar .population { padding:7px 10px; font-size:12px; }
main { flex:1 1 0; min-height:0; grid-template-columns:minmax(0,1fr) 350px; grid-template-rows:minmax(0,1fr); align-items:stretch; margin:12px 18px 4px; gap:14px; }
.map-panel { height:100%; min-height:0; top:0; position:relative; display:flex; flex-direction:column; }
.map-viewport { flex:1 1 0; height:auto; min-height:0; }
aside.tool-panel { display:flex; flex-direction:column; overflow:hidden; min-height:0; height:100%; padding:0; gap:0; }
.tool-tabs { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; flex-shrink:0; padding:2px 2px 8px; }
.tool-tabs button { padding:3px; font-size:23px; min-width:0; }
.tool-body { overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1; padding:2px 3px 10px; }
.tool-body .card { margin-bottom:10px; }
.tool-body .card h2 { font-size:14.7px; border-bottom:0; padding-bottom:0; margin-bottom:10px; }
.tool-body label { display:block; margin:8px 0; }
.tool-body input[type=number],.tool-body select { width:100%; padding:8px; margin-top:4px; border:1px solid #a28a66; border-radius:6px; background:#fff5df; }
.leader-portrait { display:block; width:170px; height:170px; object-fit:contain; object-position:bottom; margin:0 auto 8px; }
.neighbor-popup { text-align:center; }
.neighbor-popup .leader-portrait { width:220px; height:220px; }
.advisor { position:absolute; bottom:16px; left:16px; right:164px; display:flex; align-items:flex-end; pointer-events:none; z-index:5; }
.advisor img { width:110px; height:135px; object-fit:contain; object-position:bottom; flex:0 0 110px; }
.advisor-speech { position:relative; pointer-events:auto; background:#fff0cd; color:#382b1d; border:3px solid #876134; border-radius:18px; padding:13px 32px 8px 15px; box-shadow:0 5px 15px #22170c55; }
.advisor-speech:before { content:""; position:absolute; left:-17px; bottom:24px; border-style:solid; border-width:10px 17px 10px 0; border-color:transparent #876134 transparent transparent; }
.advisor-speech strong { font-size:12px; color:#735329; }
.advisor-speech p { margin:5px 0; line-height:1.45; }
.advisor-speech button { position:absolute; top:3px; right:4px; min-height:28px; width:28px; padding:2px; }
.population-popup { width:min(680px,calc(100vw - 32px)); }
.age-bands { display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; }
.age-bands>div { display:grid; grid-template-columns:64px 1fr 30px; gap:6px; align-items:center; font-size:12px; }
.age-bands progress { width:100%; accent-color:#527441; }
.goal { border-top:1px solid #bfa884; padding:8px 0; }
.goal h3 { font:600 17px Georgia,serif; margin:4px 0; }
footer { flex:0 0 auto; padding:5px 12px; font-size:10px; }
@media(max-width:850px) { main { grid-template-columns:minmax(0,1fr) minmax(240px,36vw); } .topbar { gap:6px; padding:6px 10px; } .topbar .eyebrow{display:none;} .advisor {right:12px; bottom:65px;} .advisor img{width:75px;height:100px;flex-basis:75px;} }
@media(max-width:540px) { main {grid-template-columns:minmax(0,1fr) 210px; margin:5px; gap:5px;} .tool-tabs {grid-template-columns:repeat(4,1fr);} .card{padding:10px;} .advisor{left:5px;right:5px;} .advisor img{display:none;} .advisor-speech:before{display:none;} .topbar .resources{width:100%; justify-content:space-between;} .topbar .resource .asset{width:24px;height:24px;} .topbar .resource strong{font-size:14px;} .age-bands{grid-template-columns:1fr;} }

/* Full-content dialogs. Long resource lists use pages instead of scroll areas. */
.popup-backdrop,
.popup-backdrop.popup-near-building {
    display: grid;
    place-items: center;
    padding: 12px;
    overflow: visible;
}
.game-popup,
.game-popup.building-popup,
.popup-near-building .game-popup.building-popup {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-height: none;
    overflow: visible;
    min-width: 0;
    margin: 0;
}
.game-popup { width: min(620px, calc(100vw - 32px)); }
.game-popup.building-popup { width: min(960px, calc(100vw - 32px)); }
.game-popup.resource-popup { width: min(760px, calc(100vw - 32px)); }
.game-popup.population-popup { width: min(760px, calc(100vw - 32px)); }
.game-popup > h2 { padding-right: 42px; }
.resource-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.resource-overview p { margin: 5px 0; }
.popup-tabs { display: flex; gap: 8px; margin: 12px 0; }
.popup-tabs button { flex: 1; padding: 7px 10px; }
.popup-pagination { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.popup-pagination button { padding: 7px 10px; }
.resource-lines { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.resource-lines dd { text-align: right; }
.neighbor-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.neighbor-prices section { min-width: 0; }
.neighbor-prices .hint { margin: 4px 0; line-height: 1.4; }
@media (max-width: 540px) {
    .game-popup, .game-popup.building-popup { padding: 16px; }
    .game-popup .age-bands { grid-template-columns: 1fr 1fr; gap: 5px 12px; }
    .age-bands > div { grid-template-columns: 58px minmax(12px, 1fr) 24px; gap: 3px; font-size: 11px; }
    .neighbor-prices { grid-template-columns: 1fr; gap: 8px; }
    .neighbor-prices .hint { font-size: 11px; }
}
@media (max-height: 600px) {
    .game-popup, .game-popup.building-popup { padding: 14px 18px; }
    .game-popup p { margin-block: 6px; }
    .game-popup .hint { line-height: 1.35; }
    .game-popup .popup-facts { margin-block: 10px; gap: 5px 12px; }
    .building-popup-body { margin-block: 10px; }
    .neighbor-popup .leader-portrait { height: 130px; width: 130px; }
}

/* Painted navigation: reuse game art and keep the remaining motifs in one style. */
.tool-tabs { gap: 4px; padding: 2px 2px 10px; }
.tool-tabs button { display:grid; place-items:center; height:48px; min-height:44px; padding:3px; }
.tool-icon {
    display: block;
    width: 100%;
    max-width: 42px;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
/* Map thumbnails include transparent space for their map anchors. Navigation
   fits the visible artwork with a small margin, preserving its aspect ratio. */
.tool-icon-build { background-image: url('art/map/icons/1-v1.png'); background-size:116.69% auto; background-position:50% 115.60%; }
.tool-icon-economy { background-image: url('art/medieval-atlas-v1.png'); background-size: 400% 400%; background-position: 0 100%; }
.tool-icon-people { background-image: url('art/ui/people-v1.png'); }
.tool-icon-diplomacy { background-image: url('art/ui/diplomacy-v1.png'); }
.tool-icon-loans { background-image: url('art/ui/money-purse-v1.png'); }
.tool-icon-environment { background-image: url('art/ui/plant-forest-v1.png'); }
.pollution-total{font-size:1.4em;font-weight:700;font-variant-numeric:tabular-nums}
.pollution-positive{color:#ae352d}.pollution-negative{color:#287d42}
.pollution-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0;font-size:12px}
.pollution-legend span{display:inline-flex;align-items:center;gap:6px}
.pollution-legend i{width:14px;height:14px;display:inline-block;border:1px solid #0003;border-radius:3px}
.pollution-clean{background:#1cbe6e}.pollution-dirty{background:#f21c4e}
.tool-icon-goals { background-image: url('art/ui/goals-v1.png'); }
.tool-icon-save { background-image: url('art/ui/save-v1.png'); }
.tool-icon-settings { background-image:url('art/ui/settings-v1.png'); }
.animation-settings .settings-section-heading { display:flex; align-items:center; justify-content:space-between; margin:4px 0 10px; font-size:12px; font-weight:700; color:#665038; }
.animation-setting { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; margin:6px 0; font-size:13px; }
.animation-options { display:grid; grid-template-columns:repeat(3,44px); gap:4px; }
.time-settings { margin-top:18px; }
.time-options { grid-template-columns:repeat(5,44px); }
.time-settings .next-day-button { margin-top:10px; }
.animation-settings label.animation-option { display:grid; place-items:center; width:44px; height:44px; margin:0; cursor:pointer; border-radius:10px; position:relative; }
.animation-option-icon { width:44px; height:44px; filter:grayscale(1); opacity:.65; pointer-events:none; }
.animation-option input:checked + .animation-option-icon { filter:none; opacity:1; }
.animation-option:has(input:focus-visible) { outline:2px solid #b88a40; outline-offset:2px; }
.animation-option:has(input:checked) { box-shadow:none; }
.settings-game-actions { display:grid; gap:6px; margin-top:18px; }
.settings-game-actions button { width:100%; }
@media(max-width:540px) {
    .animation-setting { grid-template-columns:1fr; gap:3px; margin:10px 0; }
    .time-options { grid-template-columns:repeat(3,44px); }
}
@media (max-width: 850px) {
    .tool-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.population-growth { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.population-growth > section { min-width: 0; }
.population-growth h3 { margin-top: 2px; }
.population-growth label { display: block; font-size: 12px; }
.population-growth label strong { float: none; white-space: nowrap; }
.population-growth progress { display: block; margin: 8px 0; accent-color: #5b7b40; }
.population-growth .growth-blocker { font-size: 12px; line-height: 1.4; color: #853e28; padding-left: 9px; border-left: 2px solid #b97850; }
@media (max-width: 540px) { .population-growth { grid-template-columns: 1fr; gap: 12px; } }

.game-over-backdrop { z-index: 200; background: #17120de0; }
.game-popup.game-over-popup { width: min(780px, calc(100vw - 32px)); }
.game-over-popup > h2 { text-align: center; padding: 0; color: #72351f; font-size: 30px; }
.game-over-verdict { text-align: center; font-weight: 700; }
.game-over-advisor { display: flex; gap: 18px; align-items: center; margin: 16px 0; }
.game-over-advisor img { width: 125px; height: 150px; flex: 0 0 125px; object-fit: contain; }
.game-over-advisor p { line-height: 1.5; }
.game-over-results { gap: 5px 16px; }
.game-over-popup .row { flex-wrap: wrap; }
.game-over-popup .row button { flex-basis: 220px; }
@media (max-width: 540px), (max-height: 600px) {
    .game-over-advisor { gap: 10px; margin-block: 8px; }
    .game-over-advisor img { width: 75px; height: 100px; flex-basis: 75px; }
    .game-over-advisor p { font-size: 12px; line-height: 1.35; }
    .game-over-popup > h2 { font-size: 25px; }
}

.route-summary { border-top: 1px solid #b89865; padding: 12px 0; }
.route-summary dl { font-size: 12px; gap: 6px 12px; }
.route-summary p { margin-block: 6px; }
.route-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.route-actions button { flex: 1; font-size: 12px; padding: 7px; }
.partner-reputation { padding-block: 10px; border-top: 1px solid #b89865; }
.partner-history summary { cursor: pointer; font-weight: 700; padding-block: 10px; }
.partner-history article { border-top: 1px solid #b89865; padding-block: 10px; font-size: 12px; }
.partner-history article p { font-size: 12px; }
.route-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.route-editor label:first-child { grid-column: 1 / -1; }
.route-editor input,.route-editor select { width: 100%; display: block; padding: 9px; margin-top: 5px; border: 1px solid #a28a66; background: #fff5df; border-radius: 6px; }
.diplomacy-event-backdrop { z-index: 180; background: #1c1711da; }
.game-popup.diplomacy-event-popup { width: min(980px, calc(100vw - 32px)); }
.diplomacy-event-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; margin: 16px 0; }
.diplomacy-event-body img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border: 3px solid #8c6539; border-radius: 8px; background: #e5ce9f; }
.diplomacy-event-body p { line-height: 1.6; }
.project-reward-popup h2 { color:#49642c; }
.project-rewards { padding:14px 18px; border:2px solid #b18a45; border-radius:10px; background:#fff0c8; }
.project-rewards h3 { margin:0 0 10px; font-size:22px; }
.project-reward-item { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; font-size:18px; }
.project-reward-item strong { font-size:30px; }
.project-reward-item .commodity-value { flex-direction:row-reverse; gap:10px; }
.project-reward-item .commodity-value .asset { width:46px; height:46px; }
.project-reward-item img { width:46px; height:46px; aspect-ratio:1; border:0; background:none; }
.project-merit-symbol { width:46px; text-align:center; color:#a66f0d; font-size:40px; }
@media (max-width: 620px) {
    .diplomacy-event-body { grid-template-columns: 1fr; gap: 10px; }
    .diplomacy-event-body img { max-height: 210px; }
    .route-editor { grid-template-columns: 1fr; }
}
/* Victory artwork and results share a large dialog without internal scrolling. */
.game-popup.victory-popup {
    width:min(1080px, calc(100vw - 32px));
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:10px 22px;
}
.victory-popup > h2 { grid-column:1 / -1; color:#526b30; }
.victory-illustration {
    display:block; width:100%; height:auto; aspect-ratio:3 / 2;
    object-fit:contain; border:3px solid #ac8449; border-radius:8px;
    box-shadow:0 3px 12px #49311d44;
    grid-column:1; grid-row:2 / 5; align-self:center;
}
.victory-popup > .game-over-verdict { grid-column:2; grid-row:2; text-align:left; line-height:1.55; }
.victory-popup > .victory-results { grid-column:2; grid-row:3; }
.victory-popup > .game-over-results { grid-column:2; grid-row:4; margin:0; }
.victory-popup > .row, .victory-popup > .file-label, .victory-popup > [role=status] { grid-column:1 / -1; }
@media(max-width:700px) {
    .game-popup.victory-popup { display:block; }
    .victory-illustration { max-height:32dvh; margin:10px auto; }
    .victory-popup > .game-over-verdict { text-align:center; }
    .victory-popup > .game-over-results { margin-block:12px; }
}
.victory-results { text-align:center; font-weight:700; color:#49632e; }
.victory-goal { padding:12px; background:#eee0bb; border:2px solid #ac8449; border-radius:8px; }
.victory-goal label { display:block; margin:10px 0; }
.victory-goal progress { display:block; width:100%; accent-color:#638143; }
/* Seven primary panels share one responsive row with their local navigation. */
.tool-tabs { grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:auto; gap:3px; }
.tool-tabs button { height:44px; min-height:44px; padding:2px; }
.tool-tabs .tool-icon { width:100%; max-width:36px; height:auto; aspect-ratio:1; }
.tool-icon-land { background-image:url('art/medieval-atlas-v1.png'); background-size:400% 400%; background-position:100% 0; }
.tool-icon-work { background-image:url('art/map/icons/15-v1.png'); background-size:113.27% auto; background-position:48.52% 107.04%; }
.tool-icon-time { background-image:url('art/administration/hourglass-v1.png'); background-size:113.45% auto; background-position:56.39% 38.23%; }
.tool-icon-tools { background-image:url('art/ui/tools-v1.png'); }
.tool-icon-welfare { background-image:url('art/map/icons/10-v1.png'); background-size:110.05% auto; background-position:50% 99.88%; }
.tool-icon-research { background-image:url('art/map/icons/11-v1.png'); background-size:108.72% auto; background-position:50% 99.96%; }
.tool-icon-army { background-image:url('art/map/icons/17-v1.png'); background-size:115.69% auto; background-position:50% 100.35%; }
.tool-icon-routes { background-image:url('art/ui/exchange-arrow-v1.png'); }
.tool-icon-ministries { background-image:url('art/map/icons/20-v1.png'); background-size:116.69% auto; background-position:25.72% 67.63%; }
.build-unavailable > .asset,.build-unavailable > .reclamation-icon,.building-preview.unavailable { filter:grayscale(1); opacity:.65; }
.build-icon-button[aria-pressed="true"] { outline:2px solid #f2d476; box-shadow:inset 0 0 9px #e8c568; }
.building-shortages { position:absolute; bottom:-3px; right:0; display:flex; padding:1px; border-radius:3px; background:#362a20; }
.building-shortages .asset { width:15px; height:15px; opacity:1; filter:none; }
.building-selection { margin-top:10px; padding:10px; border:1px solid #9f7c46; border-radius:5px; background:#e4cc99; }
.building-selection .building-preview { display:block; width:min(100%,180px); height:160px; margin:0 auto; }
.building-selection dl { font-size:.86rem; }
.ministry-controls label { display:flex; gap:8px; align-items:center; margin:8px 0; }
.ministry-controls input[type=checkbox] { width:18px; height:18px; flex-shrink:0; }
.restoration-order { padding:8px 0; border-bottom:1px solid #a08356; }
.restoration-order p { margin:4px 0; font-size:.88rem; }
.restoration-order select,.restoration-order input { width:65px; }
@media(max-width:540px) { .tool-tabs { grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; } .tool-tabs .tool-icon { max-width:24px; } }

/* Demolition uses the existing building art and the map's dust sprite. */
.building-popup > .demolish-icon { position:absolute; display:block; left:12px; top:12px; width:64px; height:64px; min-height:64px; padding:6px; margin:0; overflow:hidden; }
.building-popup:has(> .demolish-icon) > .popup-heading { margin-left:72px; margin-right:44px; min-height:64px; }
.building-popup:has(> .demolish-icon) > .popup-heading > .asset { display:none; }
.demolish-icon .asset { display:block; width:100%; height:100%; }
.pause-backdrop { z-index:200; }
.pause-dialog { text-align:center; max-width:480px; }
.population-detail-icons { display:flex; gap:8px; margin:10px 0; }
.population-detail-icons button { width:64px; height:60px; padding:4px; }
.population-popup .age-bands { display:grid; grid-template-columns:1fr; gap:2px; }
.population-popup .age-bands > div { min-height:0; padding:2px; font-size:.85rem; }
.commodity-value { display:inline-flex; align-items:center; gap:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.commodity-value .asset { width:30px; height:30px; flex:none; }
.commodity-stock { display:flex; flex-wrap:wrap; gap:8px 14px; }
.trade-ledger { width:100%; border-collapse:collapse; }
.trade-ledger td,.trade-ledger th { text-align:center; padding:4px; border-bottom:1px solid #b69c70; }
.trade-ledger th .commodity-value strong { display:none; }
.compact-route { margin:8px 0; padding:6px; border:1px solid #af915c; border-radius:6px; background:#e5d4b455; }
.compact-route-line { display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; }
.compact-route-line .trade-visual { gap:3px; }
.compact-route-line .trade-good { width:30px; height:30px; }
.compact-route-actions { display:flex; gap:3px; }
.compact-route-actions button { width:30px; height:30px; min-height:30px; padding:1px; margin:0; font-size:20px; }
.route-paused { opacity:.65; }
.demolition-backdrop { z-index:115; }
.game-popup.demolition-dialog { width:min(510px,calc(100vw - 32px)); text-align:center; }
.demolition-dialog canvas { display:block; width:min(100%,320px); height:auto; margin:10px auto; border:4px ridge #9e723d; border-radius:8px; background:radial-gradient(ellipse at bottom,#a6ad76,#e6d6b5 75%); }
.demolition-checkbox { display:flex; justify-content:center; align-items:center; gap:10px; margin:15px 0; }
.demolition-checkbox input { width:20px; height:20px; }
.pause-button { white-space:nowrap; }
.tile-actions-popup { width:min(620px,calc(100vw - 32px)); }
.tile-action-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:14px 0; justify-items:center; }
.tile-action-options .tile-action-icon { width:88px; height:88px; padding:6px; }
.tile-action-options .tile-action-icon .asset { width:72px; height:72px; }
.reclamation-icon { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.card > .land-action-button { width:80px; height:80px; padding:5px; }
.terrain-preview { display:block; width:140px; height:140px; margin:0 auto 12px; }
.game-popup.infrastructure-popup { width:min(460px,calc(100vw - 32px)); }
.infrastructure-popup .ruin-preview { width:140px; height:140px; }
.infrastructure-popup .land-action-button { display:grid; place-items:center; width:60px; height:60px; min-width:60px; padding:4px; margin:10px 0; }
.infrastructure-popup .land-action-button img { display:block; width:100%; height:100%; object-fit:contain; }
.balance-offline-notice { position:fixed; bottom:0; left:0; right:0; z-index:10000; padding:6px 12px; text-align:center; background:#f6e3b7; color:#583c21; font-size:12px; pointer-events:none; }
.tile-action-page { text-align:center; align-self:center; flex:0 0 60px; }
@media(max-width:380px) { .tile-action-options { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.pause-button[aria-pressed='true'] { outline:2px solid #eac760; }

/* One compact row, with population and wellbeing at the right edge. */
.topbar { flex-wrap:nowrap; align-items:center; gap:12px; padding:4px 16px; overflow-x:auto; }
.topbar h1 { flex:none; font-size:24px; line-height:1.2; white-space:nowrap; }
.topbar .game-day { flex:none; white-space:nowrap; font-size:14px; color:#e4c99c; font-variant-numeric:tabular-nums; }
.topbar .resources { display:flex; flex:none; width:auto; margin:0 0 0 auto; flex-wrap:nowrap; justify-content:flex-start; gap:5px; }
.topbar .resource { flex:none; min-height:36px; padding:2px 7px; gap:5px; white-space:nowrap; }
.topbar .resource > span:last-child { display:flex; align-items:center; gap:5px; font-size:13px; }
.topbar .resource strong { display:inline; font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
.topbar .resource > span.resource-daily-change { display:inline; font-size:12px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.topbar .resource .resource-daily-change.positive { color:#91ce70; }
.topbar .resource .resource-daily-change.negative { color:#ff998b; }
.topbar .resource .resource-daily-change.neutral { color:#d6c7ad; }
.topbar .resource .asset, .topbar .inventory-icon { width:28px; height:28px; flex:none; }
.header-population { display:flex; flex:none; align-items:center; gap:5px; min-height:36px; padding:2px 7px; }
.header-population .tool-icon { width:28px; height:28px; flex:none; }
.header-population-values { display:flex; flex-direction:column; align-items:stretch; gap:3px; min-width:38px; }
.header-population strong { font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
.header-population progress { display:block; width:100%; height:6px; border:0; border-radius:3px; overflow:hidden; background:#c8bea5; accent-color:#6b9555; }
.header-population progress::-webkit-progress-bar { background:#c8bea5; }
.header-population progress::-webkit-progress-value { background:#6b9555; }
.header-population progress::-moz-progress-bar { background:#6b9555; }
.people-overview-popup > h2 { padding-right:42px; }
.people-overview-popup .wellbeing-card { margin:0 0 12px; }
@media(max-width:850px) {
    .topbar { gap:8px; padding:3px 8px; }
    .topbar h1 { max-width:100px; font-size:18px; line-height:1.05; white-space:normal; }
    .topbar .resource-label { display:none; }
    .topbar .resource { padding:2px 3px; gap:3px; }
    .topbar .resource strong { font-size:14px; }
    .topbar .resource .asset, .topbar .inventory-icon { width:22px; height:22px; }
    .topbar .resource > span.resource-daily-change { font-size:11px; }
}
@media(max-width:540px) {
    .topbar { gap:6px; padding:2px 6px; }
    .topbar h1 { font-size:19px; }
    .topbar .game-day { font-size:11px; }
    .topbar .resources { gap:2px; }
    .topbar .resource { flex-direction:column; min-width:34px; min-height:44px; padding:2px; gap:1px; justify-content:center; }
    .topbar .resource > span:last-child { gap:0; }
    .topbar .resource strong { font-size:13px; }
    .topbar .resource .asset, .topbar .inventory-icon { width:18px; height:18px; }
    .header-population { min-height:44px; padding:2px 3px; gap:3px; }
    .header-population .tool-icon { width:22px; height:22px; }
    .header-population-values { min-width:28px; }
    .header-population strong { font-size:14px; }
}
@media(min-width:541px) and (max-width:740px) {
    .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:1px 6px; padding:1px 6px; border-bottom-width:3px; }
    .topbar h1 { grid-column:1; grid-row:1; max-width:none; font-size:18px; line-height:1.1; white-space:nowrap; }
    .topbar .game-day { grid-column:2; grid-row:1; font-size:12px; }
    .topbar .header-population { grid-column:3; grid-row:1; min-height:26px; padding:0 4px; }
    .topbar .header-population .tool-icon { width:20px; height:20px; }
    .topbar .header-population strong { font-size:15px; }
    .topbar .resources { grid-column:1 / -1; grid-row:2; margin:0; width:100%; gap:3px; }
    .topbar .resource { flex:1; justify-content:center; min-height:26px; padding:0 3px; }
    .topbar .resource .asset, .topbar .inventory-icon { width:20px; height:20px; }
}
.mobilization-controls{width:100%;padding:16px;border:1px solid #b59660;border-radius:10px;background:#fbf3dc}
.mobilization-controls label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mobilization-controls input[type=number]{max-width:110px}
.mobilization-controls input[type=range]{width:100%;margin:12px 0}
.battle-estimate{margin:12px 0;padding:12px;background:#e8f0dd;border-left:4px solid #648044;border-radius:5px}
.military-event.incoming-attack .diplomacy-event-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:16px}
.military-event.incoming-attack .diplomacy-event-body>img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:8px}
@media(max-width:650px){.military-event.incoming-attack .diplomacy-event-body{display:block}.military-event.incoming-attack .diplomacy-event-body>img{max-height:190px;margin-bottom:12px}}
.building-cost-label{font-size:12px;margin:9px 0 4px;color:#665038}
.building-purpose{margin:10px 0;font-size:14px;font-weight:600;line-height:1.45}
.building-selection-details{margin-top:8px;border-top:1px solid #9f7c4670}
.building-selection-details>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;font-size:12px;font-weight:600}
.building-selection-details>summary::-webkit-details-marker{display:none}
.building-selection-details>summary::after{content:'›';font-size:26px;line-height:1;transition:transform .15s}
.building-selection-details[open]>summary::after{transform:rotate(90deg)}
.building-selection-details>summary:focus-visible{outline:3px solid #387d8a;outline-offset:2px}
.building-popup-backdrop[hidden]{display:none!important}
.game-popup>.building-information-button{position:absolute;top:12px;right:64px;width:44px;height:44px;padding:7px;margin:4px 0}
.building-information-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.building-information-button .info-dot{fill:currentColor;stroke:none}
.building-popup>.popup-heading{padding-right:94px}
.game-popup.building-popup:not(:has(.has-controls,.ministry-controls)){width:min(560px,calc(100vw - 32px))}
.game-popup.building-details-popup{width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.building-details-popup>.popup-heading{margin-bottom:18px}
.building-details-popup .popup-facts{grid-template-columns:minmax(85px,.3fr) minmax(0,1fr)}
.building-details-popup .popup-facts dd{text-align:left}
.building-services:not(:has(p,button,label)){display:none}
.building-selection-heading{display:flex;align-items:center;gap:12px}
.building-selection-heading .building-preview{width:96px;height:96px;margin:0;flex-shrink:0}
.building-selection-heading h3{font-size:18px;line-height:1.3;margin:0;min-width:0}
@media(max-width:540px){
 .building-selection-heading{gap:8px}
 .building-selection-heading .building-preview{width:64px;height:64px}
 .building-selection-heading h3{font-size:16px;overflow-wrap:anywhere}
}
/* Only the packaged Android app extends its unframed map to the workspace edges. */
.island-native main{margin-top:0;margin-left:0;margin-bottom:0}
.island-native .map-panel{border:0;border-radius:0;box-shadow:none}
.island-native .map-panel::after{display:none}
.island-native .map-viewport{border:0}
.island-native .tool-panel{padding-top:12px;padding-bottom:4px}
@media(max-width:540px){.island-native .tool-panel{padding-top:5px;padding-bottom:5px}}
.game-popup.foreign-building-popup{width:min(520px,calc(100vw - 32px))}
.foreign-building-images{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:25px}
.foreign-building-art{display:block;width:min(220px,48vw);height:min(220px,48vw);background-repeat:no-repeat;flex-shrink:0}
.foreign-building-images .leader-portrait{width:96px;height:120px;object-fit:cover;margin:0;float:none;flex-shrink:0}
/* Shared action layout: picture on the left, signed resource changes on one line. */
.popup-action-row { display:grid; grid-template-columns:minmax(70px,100px) 80px minmax(0,1fr); gap:12px; align-items:center; margin:10px 0; }
.popup-picture-button { position:relative; display:block; width:80px; height:80px; min-width:0; padding:4px; margin:0; overflow:hidden; }
.popup-action-picture { display:block; position:absolute; inset:3px 4px; }
.popup-action-picture>.asset { display:block; width:100%; height:100%; background-repeat:no-repeat; }
.popup-action-picture>img { width:100%; height:100%; object-fit:contain; }
.popup-action-label { font-size:12px; line-height:1.2; text-align:left; font-weight:650; }
.popup-action-resources { display:flex; align-items:center; flex-wrap:nowrap; gap:10px; min-width:0; overflow-x:auto; padding:3px 0; scrollbar-width:thin; }
.resource-change { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; flex:none; }
.resource-change .resource-sign { display:block; width:20px; height:20px; object-fit:contain; flex:none; }
.resource-change .resource-change-good { display:block; width:28px; height:28px; flex:none; }
.resource-gain strong { color:#276326; }.resource-loss strong { color:#9d3023; }
.game-popup.land-popup,.game-popup.infrastructure-popup { width:min(560px,calc(100vw - 32px)); }
.land-popup>.popup-heading,.building-popup>.popup-heading { display:flex; align-items:center; gap:14px; margin:0 0 12px; padding-right:54px; min-height:76px; }
.land-popup>.popup-heading>.asset,.building-popup>.popup-heading>.asset { display:block; width:76px; height:76px; flex:none; }
.land-popup>.popup-heading h2,.building-popup>.popup-heading h2 { margin:0; }
.tile-actions-popup>.popup-heading { display:flex; align-items:center; gap:12px; padding-right:34px; }
.tile-actions-popup>.popup-heading>.asset { display:block; width:64px; height:64px; flex:none; }
.tile-action-list .popup-action-row { margin:6px 0; }
@media(max-width:540px) {
 .popup-action-row { grid-template-columns:minmax(60px,80px) 64px minmax(0,1fr); gap:8px; }
 .popup-picture-button { width:64px; height:64px; }
 .popup-action-label { font-size:11px; }
 .popup-action-resources { gap:5px; }.resource-change { gap:2px; font-size:12px; }
 .resource-change .resource-sign { width:15px; height:15px; }.resource-change .resource-change-good { width:21px; height:21px; }
 .land-popup>.popup-heading,.building-popup>.popup-heading { gap:8px; padding-right:44px; }
 .land-popup>.popup-heading>.asset,.building-popup>.popup-heading>.asset { width:60px; height:60px; }
}
/* Compact contextual help shares the advisors' parchment speech bubble. */
.help-hint{display:inline-block;vertical-align:middle;line-height:1}
.help-hint-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:30px;padding:3px;border:0;background:transparent;box-shadow:none;vertical-align:middle;border-radius:8px}
.help-hint-button img{display:block;width:20px;height:24px;object-fit:contain}
.help-hint-button:hover,.help-hint-button[aria-expanded=true]{background:#b88b3940}
.help-hint-button:focus-visible{outline:2px solid #6d532c;outline-offset:1px}
.help-bubble{position:fixed;inset:auto;margin:0;left:26px;top:12px;box-sizing:border-box;width:320px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 24px);overflow:visible;font:14px/1.45 system-ui,sans-serif;text-align:left;white-space:normal;z-index:1000}
.help-bubble:not(:popover-open){display:none}
.help-bubble.advisor-speech:before{display:block;left:-17px;top:var(--help-tail-top,18px);bottom:auto}
.help-bubble.advisor-speech strong{display:block;font-size:14px;padding-right:4px}
.help-bubble.advisor-speech p{margin:6px 0 0;font:14px/1.45 system-ui,sans-serif}
.help-bubble.advisor-speech button{line-height:20px}
.wellbeing-factors dt,.population-facts dt{display:flex;align-items:center;justify-content:space-between;gap:4px}
.population-facts{margin:8px 0 12px}
.population-facts dd{font-weight:600}
.population-inline .age-bands>div{grid-template-columns:96px minmax(20px,1fr) 24px}
.population-inline .age-bands>div>span{display:flex;align-items:center;justify-content:space-between;white-space:nowrap}
@media(pointer:coarse){.help-hint-button{width:36px;height:36px;min-height:36px}}
@media(max-width:540px){.population-inline .age-bands{grid-template-columns:1fr}.wellbeing-summary{flex-wrap:wrap}.wellbeing-factors dd{overflow-wrap:anywhere}}
.help-bubble:popover-open{display:block}
.population-facts dt:last-of-type,.population-facts dd:last-of-type{border:0;padding-top:0;font-weight:inherit}
.population-facts dd:last-of-type{font-weight:600}
.wellbeing-card,.population-inline{container-type:inline-size}
.wellbeing-factors dd{max-width:145px;align-self:center}
@container(max-width:270px){
 .wellbeing-factors,.population-facts{grid-template-columns:minmax(0,1fr);gap:0}
 .wellbeing-factors dt,.population-facts dt{justify-content:space-between}
 .wellbeing-factors dd,.population-facts dd{max-width:none;text-align:left;padding:0 0 8px;border-bottom:1px solid #b7a37b44}
}
@container(max-width:520px){.population-growth{grid-template-columns:1fr;gap:12px}.population-inline .age-bands{grid-template-columns:1fr}}
.help-bubble.advisor-speech p{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.help-bubble.advisor-speech:before{left:auto;right:-17px;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #876134}
.administration-controls{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 8px;align-items:center;margin-bottom:14px}
.administration-controls>label{grid-column:1/-1;margin:0}
.administration-controls>label[for=social]{margin-top:6px}
.administration-controls>input[type=range]{grid-column:2;width:100%;min-width:0;margin:0}
.administration-balance{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.loan-amount-actions{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:7px;margin:8px 0 12px}
.loan-amount-actions input{width:100%;min-width:0;min-height:44px;font-variant-numeric:tabular-nums}
.loan-amount-actions .loan-action{width:48px;height:48px;min-height:48px;padding:3px}
.loan-action-icon{position:relative;display:block;width:38px;height:38px}
.loan-action-icon>img{position:absolute;object-fit:contain}
.loan-action-icon .loan-purse{left:0;top:0;width:28px;height:28px}
.loan-action-icon .loan-sign{right:-1px;bottom:-1px;width:22px;height:22px;filter:drop-shadow(0 1px 1px #21180b)}
.loan-current-debt{font-weight:700}
.tool-body .loan-amount-actions input[type=number]{margin:0}
.celebration-birds{position:absolute;inset:-10%;pointer-events:none!important;z-index:10;overflow:visible}
.celebration-bird{position:absolute;left:0;top:0;width:var(--bird-size,32px);height:var(--bird-size,32px);background-image:url('art/ui/blue-bird-flight-v1.svg');background-size:500% 100%;background-repeat:no-repeat;will-change:transform;pointer-events:none}
.game-popup.population-praise-popup,.game-popup.victory-popup{position:relative;overflow:visible}
.victory-popup>.victory-invitation{grid-column:1/-1;text-align:left;white-space:pre-line}
.victory-invitation p{line-height:1.5;margin:4px 0 12px}
.victory-join-button{display:block;padding:12px 18px;background:#e5cf92;border:2px solid #876134;border-radius:8px;text-align:center;color:#382b1d;font-family:var(--rustic-font,Georgia,serif);font-weight:700;text-decoration:none}
.victory-join-button:hover{background:#f5dfa5}.victory-join-button:focus-visible{outline:3px solid #387d8a;outline-offset:3px}
.celebration-bird{background-size:500% 60%}

/* Shared popup preview and condition: buildings, roads and terrain use the same slot. */
.game-popup .tile-preview { display:block; width:min(100%,300px); height:190px; object-fit:contain; margin:0 auto 12px; }
.condition-meter { margin:8px 0 16px; }
.condition-meter-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
.condition-meter progress { display:block; width:100%; height:13px; border:1px solid #8c7143; border-radius:6px; overflow:hidden; background:#e1d1ae; }
.condition-meter progress::-webkit-progress-bar { background:#e1d1ae; }
.condition-meter .condition-good { accent-color:#3e8a3c; --condition-fill:#3e8a3c; }
.condition-meter .condition-warning { accent-color:#d3a31d; --condition-fill:#d3a31d; }
.condition-meter .condition-bad { accent-color:#ba4234; --condition-fill:#ba4234; }
.condition-meter progress::-webkit-progress-value { background:var(--condition-fill); }
.condition-meter progress::-moz-progress-bar { background:var(--condition-fill); }
.structure-repair .repair-result { margin:4px 0 12px; }
@media(max-width:600px) { .game-popup .tile-preview { height:160px; } }

/* Landscape building dialogs: one action rail, with costs beside each button. */
.game-popup:is(.building-popup,.land-popup):has(.building-actions) { width:min(980px,calc(100vw - 32px)); }
.building-popup-overview { display:grid; grid-template-columns:210px minmax(0,1fr); gap:20px; align-items:center; margin-bottom:14px; }
.building-popup-overview .tile-preview { width:210px; height:140px; margin:0; }
.building-overview-facts { min-width:0; }
.building-overview-facts .building-purpose { margin-top:0; }
.building-flow { display:flex; align-items:center; gap:12px; min-width:0; }
.building-flow>strong { font-size:13px; white-space:nowrap; flex:none; }
.building-flow-values { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; min-width:0; overflow-x:auto; }
.building-flow-values .resource-change { font-size:13px; }
.resource-change.resource-unavailable { filter:grayscale(1); opacity:.65; }
.building-actions { --action-size:80px; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:16px; margin:12px 0; }
.building-actions .popup-action-row { display:grid; grid-template-columns:minmax(64px,90px) var(--action-size) max-content; align-items:center; gap:8px; margin:0; }
.building-actions .popup-picture-button { width:var(--action-size); height:var(--action-size); min-height:var(--action-size); }
.building-actions .popup-action-picture { inset:3px; }
.building-actions .popup-action-label { position:static; align-self:center; font-size:12px; background:none; }
.building-actions .popup-action-resources { flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; height:var(--action-size); padding:0; overflow:visible; }
.building-actions .resource-change { font-size:12px; gap:3px; }
.building-actions .resource-change .resource-sign { width:16px; height:16px; }
.building-actions .resource-change .resource-change-good { width:22px; height:22px; }
.building-actions .building-upgrade-action { display:flex; gap:8px; align-items:flex-start; }
.building-actions .upgrade-prerequisite { width:var(--action-size); height:var(--action-size); display:block; flex:none; pointer-events:none; background-repeat:no-repeat; }
.upgrade-prerequisite.prerequisite-missing { filter:grayscale(1); opacity:.6; }
.building-actions .repair-result { max-width:190px; font-size:11px; line-height:1.25; margin:5px 0 0; }
.building-popup .building-popup-body { display:block; margin:10px 0; }
.building-popup-controls:has(.production-intensities) { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.building-popup-controls .production-intensities { display:flex; align-items:center; gap:14px; margin:0; }
.building-popup-controls .production-intensities label { white-space:nowrap; }
@media(max-height:600px) and (min-width:600px) {
 .game-popup:is(.building-popup,.land-popup)>.popup-heading { min-height:48px; margin-bottom:6px; }
 .game-popup:is(.building-popup,.land-popup)>.popup-heading>.asset { width:48px; height:48px; }
 .building-popup-overview { grid-template-columns:150px minmax(0,1fr); gap:14px; margin-bottom:8px; }
 .building-popup-overview .tile-preview { width:150px; height:96px; }
 .building-overview-facts .condition-meter { margin:5px 0 8px; }
 .building-actions { --action-size:64px; gap:12px; margin:8px 0; }
 .building-actions .popup-action-label { font-size:10px; }
}
@media(max-width:600px) {
 .building-popup-overview { grid-template-columns:100px minmax(0,1fr); gap:8px; }
 .building-popup-overview .tile-preview { width:100px; height:100px; }
 .building-flow { display:block; }.building-flow-values { margin-top:5px; }
 .building-actions { --action-size:56px; gap:10px; max-width:100%; overflow-x:auto; justify-content:flex-start; }
 .building-actions .popup-action-label { font-size:9px; }
}
.building-actions>.popup-action-row,.building-actions>.structure-repair,.building-actions>.building-upgrade-action,.building-actions>.land-action { flex:none; }
.building-actions .popup-action-resources { gap:2px; }
.building-actions .resource-change { height:18px; line-height:18px; }
.building-actions .resource-change .resource-sign { width:14px; height:14px; }
.building-actions .resource-change .resource-change-good { width:18px; height:18px; }
@media(max-height:600px) and (min-width:600px) {
 .building-actions .resource-change { height:14px; line-height:14px; font-size:11px; }
 .building-actions .resource-change .resource-change-good { width:14px; height:14px; }
 .building-actions .resource-change .resource-sign { width:12px; height:12px; }
}
@media(max-width:600px) {
 .building-actions .popup-action-resources { gap:1px; }
 .building-actions .resource-change { height:13px; line-height:13px; font-size:10px; }
 .building-actions .resource-change .resource-change-good { width:13px; height:13px; }
 .building-actions .resource-change .resource-sign { width:11px; height:11px; }
}
@media(max-height:450px) and (min-width:600px) {
 .game-popup:is(.building-popup,.land-popup)>.popup-heading { min-height:32px; margin-bottom:3px; }
 .game-popup:is(.building-popup,.land-popup)>.popup-heading>.asset { width:32px; height:32px; }
 .game-popup:is(.building-popup,.land-popup)>.popup-heading h2 { font-size:20px; }
 .building-popup-overview { margin-bottom:4px; }
 .building-popup-overview .tile-preview { height:76px; }
 .building-overview-facts .building-purpose { font-size:12px; margin-block:0 4px; }
 .building-overview-facts .condition-meter { margin:3px 0 5px; }
 .building-actions { margin:5px 0; }
 .building-popup .building-popup-body { margin:5px 0; }
 .building-popup-controls .popup-facts { grid-template-columns:max-content max-content; margin:4px 0; gap:4px 10px; }
 .building-popup-controls .popup-facts dt { white-space:nowrap; }
 .building-popup-controls .production-intensities { padding:3px 8px 5px; }
 .building-popup-controls .production-intensities legend { font-size:14px; }
 :is(.building-popup,.land-popup)>.popup-action.secondary { min-height:32px; padding:4px 12px; margin-top:5px; }
}
/* Roads, ruins and terrain share the building overview, action rail and footer. */
.game-popup.land-popup { width:min(980px,calc(100vw - 32px)); }
.inline-action-confirmation { display:flex; align-items:center; gap:10px; margin:10px 0; }
.inline-action-confirmation button { min-width:60px; }

/* Half-width wooden frames and spacing. Parchment dialogs keep their own frame. */
.card:not(.game-popup){border-width:3px;border-radius:7px;padding:9px;box-shadow:inset 0 0 0 .5px #8e693e,0 1.5px 0 #4a2c1a,0 4px 9px #3d24162e}
.card:not(.game-popup)::before{inset:-2px;background:
 radial-gradient(circle at 3.5px 3.5px,#dfbc7b 0 1px,#654220 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at calc(100% - 3.5px) 3.5px,#dfbc7b 0 1px,#654220 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at 3.5px calc(100% - 3.5px),#dfbc7b 0 1px,#654220 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at calc(100% - 3.5px) calc(100% - 3.5px),#dfbc7b 0 1px,#654220 1.5px 2px,transparent 2.5px)}
.map-panel{border-width:5px;border-radius:9px;box-shadow:inset 0 0 0 1px #e2bb7b,0 2.5px 0 #482a19,0 7px 14px #3d24163d}
.map-panel::after{border-radius:4px;background:
 radial-gradient(circle at 3px 3px,#ffe1a0 0 1px,#77502b 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at calc(100% - 3px) 3px,#ffe1a0 0 1px,#77502b 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at 3px calc(100% - 3px),#ffe1a0 0 1px,#77502b 1.5px 2px,transparent 2.5px),
 radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#ffe1a0 0 1px,#77502b 1.5px 2px,transparent 2.5px)}
.map-viewport{border-block-width:1px}
main{margin:6px 9px 2px;gap:7px}
.tool-tabs{padding:1px 1px 5px;gap:1.5px}
.tool-body{padding:1px 1.5px 5px}
.tool-body .card{margin-bottom:5px}
.tool-body .card h2{margin-bottom:5px}
.tool-footer{flex:0 0 auto;padding:4px 4px 2px;border-top:1px solid #9d7c4a66;background:linear-gradient(#efe1c4,#e4d1a9);box-shadow:0 -2px 5px #4b321513}
.tool-footer .time-settings{margin:0}
.time-status-row{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:22px}
.time-status{font-size:11px;font-weight:700;color:#665038}
.time-control-buttons{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:3px;align-items:end}
.time-settings .time-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.time-settings label.animation-option{display:flex;flex-direction:column;align-items:center;justify-content:end;min-width:0;min-height:58px;margin:0;cursor:pointer;position:relative;border-radius:7px}
.time-settings .animation-option-icon{width:min(44px,100%);height:auto;aspect-ratio:1}
.time-option-rate{font-size:10px;line-height:14px;font-weight:700;white-space:nowrap;color:#665038;pointer-events:none}
.time-settings .next-day-button{display:flex;flex-direction:column;align-items:center;justify-content:end;align-self:end;width:44px;min-height:58px;padding:0;margin:0;border:0;border-radius:7px;background:transparent;box-shadow:none}
.time-settings .next-day-button:not(:disabled) .animation-option-icon{filter:none;opacity:1}
.time-settings .next-day-button:disabled{opacity:.55}
.time-settings .next-day-button:hover:not(:disabled){background:#fff4d54d}
.tool-footer .help-hint{margin:0}
@media(max-width:540px){.time-settings .time-options{grid-template-columns:repeat(3,44px);gap:2px}.time-settings label.animation-option{width:44px}}
.building-icon-grid{gap:3.5px}
.building-selection{margin-top:5px;padding:5px;border-width:.5px}
.island-native .tool-panel{padding-top:6px;padding-bottom:2px}
@media(max-width:540px){
 main{margin:2.5px;gap:2.5px}
 .card:not(.game-popup){padding:5px}
 .tool-tabs{gap:.5px}
 .island-native .tool-panel{padding-top:2.5px;padding-bottom:2.5px}
}
@media(max-width:520px){.card:not(.game-popup){border-width:2.5px}.map-panel{border-width:3.5px}}
.land-action>.hint { font-size:11px; margin:5px 0; }
.sewer-controls { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid #a58c6555; }