/* One layout for the 2D and 3D overlays. Keep the map and construction rails clear. */
:root{--hud-left:18px;--hud-rail:256px;--hud-right:254px;--hud-gap:14px;--hud-bottom:24px}
.brief{left:var(--hud-left);width:var(--hud-rail);bottom:var(--hud-bottom);display:flex;flex-direction:column;overflow:hidden}
.brief>.pane{min-height:0;overflow:auto;flex:1;scrollbar-width:thin;padding-right:3px}
.brief>h1,.brief>.intro,.brief>.tabs,.brief>.eyebrow{flex:none}
#selectionStatus{width:auto;flex:none;padding:12px 0 0;margin-top:12px;border-top:1px solid var(--edge);gap:9px;position:relative}
#selectionStatus #selectionBadge{display:none}
#selectionStatus small{margin-top:4px}
#commandDock{position:fixed;left:calc(var(--hud-left) + var(--hud-rail) + var(--hud-gap));right:calc(var(--hud-right) + var(--hud-gap));bottom:var(--hud-bottom);display:flex;flex-direction:column;gap:12px;z-index:32;pointer-events:none}
#hudActions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;pointer-events:none}
#commandDock .commandbar{position:relative;inset:auto;min-height:0;width:100%;height:auto;margin:0;padding:8px;pointer-events:auto;display:flex;align-items:stretch}
#commandDock .commands{width:100%;max-width:none;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:thin;align-items:stretch;padding:0 0 2px}
#commandDock .commands button{flex:1 0 62px;min-width:62px;height:70px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#commandDock .commands b{font-size:10px;line-height:1.2;margin-top:5px;max-width:80px}
#commandDock .commands [data-tool="6"]{min-width:90px}
#commandDock .commands button>span{height:30px;display:grid;place-items:center}
.sword-shield-icon{position:relative;width:30px}
.sword-shield-icon svg{position:absolute;inset:0;width:30px;height:30px}
.sword-shield-icon i{font-style:normal;font-size:19px;line-height:1;z-index:1}
#commandDock #controlGroups,#commandDock #lordSpells{position:relative;inset:auto;margin:0;pointer-events:auto;flex:none;max-width:100%}
#commandDock #controlGroups{padding:7px 8px;gap:4px;min-height:44px}
#commandDock #controlGroups span{font-size:9px;letter-spacing:.05em}
#commandDock #controlGroups button{width:25px;min-height:28px}
#commandDock #lordSpells{flex-wrap:wrap;padding:5px;gap:4px}
#commandDock #lordSpells>button,#commandDock #frostWeatherQuick>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:60px;height:58px;padding:5px 6px 7px;font:inherit}
#commandDock #lordSpells b{font-size:9px;font-weight:500;line-height:1.2;white-space:nowrap}
.spell-icon{width:26px;height:26px;flex:none}
#lordSpells .slamming .spell-icon{transform:rotate(180deg)}
#commandDock #frostWeatherQuick>button{min-width:70px}
#familySwitch{padding:0 0 10px;gap:5px;margin-bottom:10px;border-bottom:1px solid var(--edge)}
.village-status>#familySwitch .family-row{gap:4px}
@media(max-width:1100px){:root{--hud-left:12px;--hud-rail:235px;--hud-right:242px}.brief{padding:13px}#commandDock .commands button{flex-basis:58px;min-width:58px}}
@media(max-width:900px){:root{--hud-rail:220px;--hud-right:202px}#commandDock #controlGroups span{display:none}#commandDock .commands button{flex-basis:58px}}
@media(max-width:760px){:root{--hud-rail:220px;--hud-right:177px;--hud-gap:10px;--hud-bottom:15px}#selectionStatus{display:flex}}
/* Tools stay at the thumb edge; movement and action controls sit above them. */
body.touch-game{--touch-tools-height:84px}
.touch-game #commandDock{left:0;right:0;bottom:0;gap:8px;width:100%;z-index:82}
.touch-game #commandDock .commandbar,.touch-game.touch-tools #commandDock .commandbar{display:flex!important;position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;height:var(--touch-tools-height)!important;min-height:0!important;max-height:none!important;overflow:hidden!important;flex-wrap:nowrap!important;align-content:normal!important;transform:none!important;border-radius:0;padding:5px max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important}
.touch-game #commandDock .commands{max-width:none!important;width:100%;overflow:auto;overscroll-behavior-x:contain;touch-action:pan-x;gap:4px}
.touch-game #commandDock .commands button{flex:1 0 55px;min-width:55px!important;height:64px;min-height:44px!important}
.touch-game #commandDock .commands [data-tool="6"]{min-width:76px!important}
.touch-game #commandDock .commands b{font-size:9px}
.touch-game #hudActions{display:none}
.touch-game.touch-tools #hudActions{display:flex;max-height:112px;overflow:auto;gap:6px;padding:0 8px;pointer-events:auto}
.touch-game.touch-tools #commandDock #lordSpells{max-width:none;flex-wrap:nowrap;overflow:visible}
.touch-game.touch-tools #commandDock #controlGroups{display:flex!important;min-height:40px;padding:3px 6px}
.touch-game #touchStick{bottom:calc(var(--touch-tools-height) + 20px + env(safe-area-inset-bottom))}
.touch-game #touchControls .touch-actions{bottom:calc(var(--touch-tools-height) + 20px + env(safe-area-inset-bottom))}
.touch-game #touchControls .touch-modes{bottom:calc(var(--touch-tools-height) + 156px + env(safe-area-inset-bottom))}
.touch-game.touch-tools #touchStick,.touch-game.touch-tools .touch-actions{visibility:hidden}
.touch-game.touch-tools .touch-extra{left:8px;right:8px;top:100px;flex-wrap:wrap;justify-content:center}
.touch-game.touch-menu .brief{display:flex!important;bottom:calc(var(--touch-tools-height) + 12px)!important;overflow:hidden!important}
.touch-game.touch-map .village-status{display:block!important;position:fixed;left:8px;right:65px;top:100px;bottom:auto;width:auto;max-height:calc(100dvh - 196px);overflow:auto;z-index:81}
.touch-game.touch-map .mapbox{top:auto!important;bottom:calc(var(--touch-tools-height) + 12px)!important;left:8px!important;right:65px!important;width:auto!important}
.touch-game.touch-map .village-status>div:not(#familySwitch){display:none}
.touch-game.touch-map .village-status>#familySwitch{display:grid}
.touch-game #frostWeatherQuick>.weather-settings{bottom:210px!important}
.touch-game a[href*='CREDITS']{display:none!important}
@media(orientation:landscape) and (max-height:600px){
 body.touch-game{--touch-tools-height:76px}
 .touch-game #touchControls .touch-modes{left:145px;right:145px;bottom:calc(var(--touch-tools-height) + 10px)}
 .touch-game.touch-menu .brief{left:145px!important;right:145px!important;top:98px!important;bottom:calc(var(--touch-tools-height) + 60px)!important}
 .touch-game.touch-menu .brief>.eyebrow,.touch-game.touch-menu .brief>h1,.touch-game.touch-menu #selectionStatus{display:none}
 .touch-game.touch-tools .touch-extra{top:98px;left:145px;right:145px}
 .touch-game.touch-tools #hudActions{padding:0 145px;max-height:148px}
 .touch-game.touch-map .village-status{left:145px;right:145px;max-height:110px}
 .touch-game.touch-map .mapbox{left:145px!important;right:145px!important;max-height:90px;overflow:auto}
 .touch-game #frostWeatherQuick>.weather-settings{bottom:calc(var(--touch-tools-height) + 60px)!important}
}
/* The view/persona selector precedes the panel tabs in normal document flow. */
.village-status:has(.lord-main-tabs){margin-top:0}
.village-status .lord-main-tabs{position:static;inset:auto;margin:0 -6px 10px}
.touch-game.touch-tools #touchControls .touch-modes{visibility:hidden}
.touch-game #commandDock #controlGroups button{min-width:32px;min-height:44px}
.touch-game.touch-tools #hudActions{max-height:136px}
@media(orientation:landscape) and (max-height:600px){.touch-game.touch-tools #hudActions{max-height:154px}}

.touch-game #frostAdminToggle{min-width:38px;padding:5px;flex:none}
.touch-game #frostAdminToggle span{display:none}
.touch-game.touch-tools #contextHUD,.touch-game.touch-tools #villageAlerts{visibility:hidden}
/* On a phone the village, rankings and map share one scrollable drawer. */
.touch-game #overviewPanels{display:none}
.touch-game.touch-map #overviewPanels{display:flex;position:fixed;top:100px;bottom:calc(var(--touch-tools-height) + 12px);left:8px;right:65px;flex-direction:column;gap:12px;overflow:auto;z-index:81}
.touch-game.touch-map #overviewPanels>.village-status,.touch-game.touch-map #overviewPanels>.mapbox{display:block!important;position:static!important;inset:auto!important;width:100%!important;max-width:none!important;max-height:none;flex:none;margin:0}
.touch-game.touch-map #overviewPanels>.village-status>div:not([hidden]){display:block}
.touch-game.touch-map #overviewPanels>.village-status>#familySwitch{display:grid}
.touch-game.touch-map #touchStick,.touch-game.touch-map #touchControls .touch-actions,.touch-game.touch-map #touchControls .touch-modes,.touch-game.touch-menu #touchStick,.touch-game.touch-menu #touchControls .touch-actions,.touch-game.touch-menu #touchControls .touch-modes{visibility:hidden}
@media(orientation:landscape) and (max-height:600px){.touch-game.touch-map #overviewPanels{left:145px;right:145px;top:98px}}
/* Transparent navigation sits above the opaque village content. */
.village-status{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0}
.village-status>div:not(#familySwitch){background:var(--panel);border:1px solid var(--edge);padding:14px;box-shadow:0 8px 24px #122b4026;backdrop-filter:blur(12px)}
 .village-status #familySwitch,.village-status #familySwitch .family-row{background:transparent;box-shadow:none;backdrop-filter:none}
.village-status #familySwitch{border:0;padding:0 0 9px;margin:0;gap:6px}
.village-status #familySwitch .family-row{border:0;padding:0;gap:6px}
.village-status #familySwitch button{background:#10212be3;border:1px solid #839b9e55;border-radius:5px;min-height:32px;color:#afc0c8}
.village-status #familySwitch button[aria-pressed=true]{background:linear-gradient(#395765,#293e49);color:#f7e8c4;box-shadow:inset 0 0 0 1px #c1ad784f}
.village-status .lord-main-tabs{display:flex;gap:3px;margin:0 0 8px;background:transparent}
.village-status .lord-main-tabs button{background:#152735;border:1px solid #536a73;border-radius:7px 7px 0 0;padding:6px 3px}
.village-status .lord-main-tabs button[aria-pressed=true]{background:#314755;color:#f2d797;border-bottom-color:#bfa678}
.world-state>.lord-byline{grid-column:1/-1;grid-row:1;margin:0 0 3px;font:italic 12px Georgia,serif;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
#flightAltitude{display:none!important}
/* Compact illustrated cards keep names, prices and durations aligned. */
.brief .buildgrid{grid-template-columns:minmax(0,1fr);gap:8px}
.brief .buildgrid .catalog-card{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:9px;row-gap:5px;padding:10px;min-height:96px;border-radius:6px;align-items:center;background:linear-gradient(115deg,#29435066,#142735aa)}
.brief .catalog-card>img{grid-column:1;grid-row:1 / 3;width:64px;height:72px;filter:drop-shadow(0 3px 4px #0004)}
.brief .catalog-card .catalog-name{grid-column:2;padding:0;min-height:0;font-size:12px;line-height:1.3;align-self:end}
.brief .catalog-card .catalog-details{grid-column:2;padding:0;margin:0;gap:5px;align-self:start;min-width:0}
.brief .catalog-cost{gap:4px 8px;min-height:20px;font-size:11px}
.brief .catalog-cost img{width:18px;height:18px}
.brief .catalog-time{display:flex;align-items:center;gap:5px;font-size:10px;font-variant-numeric:tabular-nums;line-height:16px;color:#afc3cb}
.catalog-time svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.brief .catalog-card.active{border-color:var(--gold);background:linear-gradient(115deg,#6a5c3e66,#253c46cc)}
@media(orientation:landscape) and (max-height:600px){.touch-game .brief .buildgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.touch-game .brief .buildgrid .catalog-card{grid-template-columns:46px minmax(0,1fr);padding:7px;gap:5px}.touch-game .brief .catalog-card>img{width:46px;height:60px}}
/* Dismissible messages and a composer that closes without passing the click to the world. */
.toast{pointer-events:none;padding-right:38px}
.toast.show{pointer-events:auto}
.notification-text{display:block}
.notification-close{display:grid;place-items:center;position:absolute;right:4px;top:4px;width:28px;height:28px;padding:5px;border:0;border-radius:4px;background:transparent;color:inherit;opacity:.8}
.notification-close:hover{opacity:1;background:#ffffff12}
.notification-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#villageAlerts .flow-alert{position:relative;padding-right:36px;pointer-events:auto}
#speechComposer{opacity:1;transition:opacity .18s ease,transform .18s ease}
#speechComposer.composer-closing{opacity:0;transform:translate(-50%,-46%);pointer-events:none}
@media(prefers-reduced-motion:reduce){#speechComposer{transition:none}}

.toast:not(.show) .notification-close{visibility:hidden}

.touch-game .notification-close{width:40px;height:40px;right:0;top:0}
.touch-game #villageAlerts .flow-alert{padding-right:44px}
@media(orientation:landscape) and (max-height:600px){
 .touch-game.touch-menu .brief{bottom:calc(var(--touch-tools-height) + 8px)!important;padding:6px!important}
 .touch-game .brief>.tabs{padding-bottom:0;margin-bottom:6px;border-bottom:0}
 .touch-game .brief>.pane>h3{display:none}
 .touch-game .brief .buildgrid .catalog-card{min-height:84px;grid-template-rows:auto 1fr}
 .touch-game .brief .catalog-card>img{height:50px}
}

/* V122: attached tabs, workshop-style segmented selectors, character selection. */
.village-status .lord-main-tabs{gap:3px;margin:0 0 -1px;position:relative;z-index:1}
.village-status .lord-main-tabs button{border-bottom-color:var(--edge)}
.village-status .lord-main-tabs button[aria-pressed=true]{background:var(--panel);border-bottom-color:transparent}
.village-status #familySwitch{grid-template-columns:1fr;gap:6px;padding-bottom:10px}
.village-status #familySwitch .family-row{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;border:1px solid #78918d44;border-radius:9px;background:#0d1a20}
.village-status #familySwitch button{min-height:32px;padding:7px 5px;border:0;border-radius:5px;background:transparent;color:#a2b4b6;font-size:11px}
.village-status #familySwitch button[aria-pressed=true]{background:#3b5048;color:#ecf1e7;box-shadow:none}
.village-status #familySwitch:has(.family-row:only-child){grid-template-columns:1fr}
.village-status #selectionStatus{display:flex;position:static;width:auto;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--edge);gap:8px}
.village-status #selectionStatus .unitmark{font-size:21px}
.village-status #selectionStatus b{font-size:10px}.village-status #selectionStatus small{font-size:9px}

/* V125: fixed commands; compact two-column catalogue. */
.brief>.construction-actions{display:flex;gap:6px;flex-shrink:0;margin:0 0 9px}.construction-actions>button{flex:1;min-width:0;padding:7px 4px;font-size:11px}
.brief .buildgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.brief .buildgrid .catalog-card{display:flex;flex-direction:column;min-height:125px;padding:4px 5px 6px;gap:2px}.brief .catalog-card>img{width:100%;height:52px}.brief .catalog-name{padding:0;min-height:26px;font-size:10px;line-height:1.25}.brief .buildgrid .catalog-details{padding:0;gap:2px}.brief .catalog-cost{min-height:16px;gap:4px;font-size:9px}.brief .catalog-cost img{width:16px;height:16px}.brief .catalog-time{font-size:9px}.brief .pane>.split:empty{display:none}

.player-indicator{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:7px;height:26px;pointer-events:none;color:#f0d99e;text-shadow:0 2px 3px #05101a}.player-indicator[hidden]{display:none}.voice-indicator{display:grid;place-items:center;width:24px;height:24px;border:1px solid #b7d9d7aa;border-radius:50%;background:#17353dda;box-shadow:0 0 9px #8ecfca55}.voice-indicator svg{width:15px;height:18px;fill:none;stroke:#c9eeea;stroke-width:1.8;stroke-linecap:round}.rest-indicator{display:flex;align-items:end;gap:1px;font:bold 17px Georgia,serif;letter-spacing:1px}.rest-indicator i{font-style:normal;animation:frost-doze 2.8s ease-in-out infinite}.rest-indicator i:nth-child(2){font-size:19px;animation-delay:.3s}.rest-indicator i:nth-child(3){font-size:21px;animation-delay:.6s}.rest-indicator i:nth-child(4){font-size:23px;animation-delay:.9s}.speech-bubble.has-indicator{margin-top:-35px}@keyframes frost-doze{0%,100%{translate:0 0;opacity:.65}50%{translate:0 -4px;opacity:1}}@media(prefers-reduced-motion:reduce){.rest-indicator i{animation:none}}

/* V130: centre images, titles, costs and durations in both catalogues. */
.brief .buildgrid .catalog-card{text-align:center;align-items:center}.brief .catalog-card .catalog-name,.brief .catalog-card .catalog-details{align-self:center;width:100%;text-align:center}.brief .catalog-card .catalog-cost,.brief .catalog-card .catalog-time{justify-content:center}