/* Approved painted RTS UI: runtime type, controls and frames stay native. */
:root{--gold:#b39760;--muted:#b8b5a7;--line:#b3976059;--panel:#1b2020f5;--good:#9ec879;--bad:#e98476;--text:#eee4cd;--focus:#79cdc7}
#campaign-guide{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
#campaign-guide b{display:block;margin-top:6px;color:var(--text);font-size:14px}
#campaign-guide p{margin:6px 0 8px;color:var(--muted);font-size:13px;line-height:1.45}
#guide-dismiss{pointer-events:auto;min-height:32px;padding:4px 8px;font-size:12px}
@media(min-width:801px) and (max-height:800px){
 .objectives{padding:8px 12px}
 .objectives h1{font-size:22px;margin:6px 0}
 .objectives .objective{padding:3px 0;font-size:11px;line-height:1.4}
 #campaign-guide{margin-top:8px;padding-top:8px}
 #campaign-guide>.eyebrow{display:none}
 #campaign-guide b{margin-top:0;font-size:13px}
 #campaign-guide p{margin:4px 0 6px;font-size:12px;line-height:1.35}
 #guide-dismiss{min-height:28px;padding:3px 7px}
}
body{background:#101313;color:var(--text);font:14px/1.5 system-ui,sans-serif}
button,select{color:var(--text);background:linear-gradient(160deg,#303431,#191e1d);border:1px solid #877247;letter-spacing:.03em;border-radius:2px;transition:border-color .15s,background .15s,box-shadow .15s}
button{min-height:44px;font-size:13px}
button:hover{background:linear-gradient(160deg,#404338,#242d28);border-color:#d8be80;box-shadow:inset 0 0 14px #b3976019}
button:disabled,button:disabled:hover{opacity:1;color:#b8b5a7;background:#202423;border-color:#60583f;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.primary{background:linear-gradient(135deg,#d7bd7d,#a68b52);border-color:#e0c48c;color:#171c1b;font-weight:700}
.primary:hover{background:linear-gradient(135deg,#eed49c,#c1a265)}
.eyebrow{color:#d0b77e;font-size:10px;letter-spacing:.16em}
.painted-icon{display:block;flex:none;width:64px;height:64px;background-color:#101313;background-repeat:no-repeat;border:1px solid #a58d57;box-shadow:inset 0 0 6px #0008;overflow:hidden;border-radius:2px}
.icon-missing{background:radial-gradient(circle,#52726a,#101313)}
.overlay{background:#080c0dba;backdrop-filter:blur(5px);z-index:20;padding:24px}
.overlay article{position:relative;padding:28px 32px;width:min(560px,96vw);max-height:calc(100dvh - 48px);background:linear-gradient(135deg,#30332cf5,#171d1dfc 55%,#101718fc);border:1px solid #b39760;box-shadow:0 0 0 5px #121818,0 0 0 6px #6a5b39,0 25px 90px #000b;scrollbar-color:#877247 #191e1d;scrollbar-width:thin}
.overlay article:before{content:'';position:absolute;top:8px;left:8px;right:8px;height:1px;background:linear-gradient(90deg,#d2b677,transparent 30%,transparent 70%,#d2b677);pointer-events:none}
.overlay article.wide{width:min(1080px,96vw)}
.overlay h2{font:42px/1.12 Georgia,serif;color:var(--text);margin:16px 0;text-shadow:0 2px 10px #0008}
.overlay h2.small-title{font-size:34px}
.overlay p{color:#c5c5b8;font-size:16px;line-height:1.65}
.overlay small{color:var(--muted);font-size:12px;letter-spacing:.03em}
.overlay article>button{font-size:13px;letter-spacing:.1em}
#menu{background:linear-gradient(90deg,#080d0ef0,#080d0e50 80%),url('./assets/ui/menu-v1.webp') center/cover;backdrop-filter:none;justify-items:start;padding-left:clamp(24px,6vw,100px)}
#menu article{width:min(540px,48vw);text-align:center;background:linear-gradient(140deg,#202725e8,#101719f2);padding:24px 32px}
#menu .game-title{margin:12px auto;max-width:320px}
.game-logo{max-height:200px;object-fit:contain;width:100%;border-radius:0}
#menu .lede{font:italic 18px/1.6 Georgia,serif;margin:12px 0;color:#d0c9b5}
#menu .menu-buttons{margin:24px 0 12px;gap:10px}
.menu-buttons button{padding:14px 18px;font-size:13px;letter-spacing:.13em;text-align:left}
#continue-label{display:block;float:none;font:12px/1.5 system-ui;letter-spacing:.02em;margin-top:5px}
#menu-preview{background:linear-gradient(145deg,#27403a,#1b2725);border-color:#718b72}
.preview-label{color:#a4c7bc;font-size:10px;margin-top:5px}
#mission-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{position:relative;overflow:hidden;border-color:#7c6a44;background:linear-gradient(145deg,#2e332e,#1a2020);min-width:0;min-height:150px;padding:16px;gap:6px}
.card strong{font:21px/1.2 Georgia,serif;color:var(--text)}
.card small{color:#d0b77e;font-size:10px;letter-spacing:.12em}
.card em{color:#c5c5b8;font:italic 13px/1.4 Georgia,serif}
.card .status{font:12px/1.45 system-ui;color:#c6c5b4;margin-top:4px}
.card.locked{opacity:1}.card.locked .chapter-art{filter:saturate(.2) brightness(.6)}
.card.won{border-color:#9fa779}.card.won .status{color:#b2d590}
.chapter-art{display:block;width:100%;height:110px;background-image:url('./assets/ui/chapters-v1.webp');background-size:300% 300%;background-repeat:no-repeat;background-color:#182222;border:1px solid #b3976040;margin-bottom:6px}
.chapter-banner{height:130px;margin:16px 0;border:1px solid #b3976080;box-shadow:inset 0 -25px 40px #0005}
.brief-grid{gap:28px;margin:20px 0;padding-top:20px}
.brief-grid b{font-size:12px;color:#d0b77e}
.brief-grid p,.brief-grid ul{font-size:14px;line-height:1.65;color:#d1d0c1}
.quote{padding:8px 16px;background:#141b1970}.quote span{color:#d4d0bc}
.segmented button{font-size:13px}.segmented button.on{background:#b39760;color:#131a18}
.hint{font-size:13px!important;color:#bdc6bc!important}
.setting{grid-template-columns:1fr auto;font-size:15px;gap:8px;padding:10px 0;margin:12px 0;border-bottom:1px solid var(--line)}
.setting output{float:right;color:#e0c48c;font-variant-numeric:tabular-nums}
.setting input[type=range]{grid-column:1/-1;height:24px}.setting.check input{width:22px;height:22px}
.settings-section{font:12px system-ui;letter-spacing:.16em;color:#d0b77e;margin-top:24px}
#music-note{font-size:13px;color:#bdc6bc;margin:0}
.controls-help p{font-size:13px;line-height:1.8;color:#c3c5b7}
.stats{gap:8px;background:transparent;border:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats div{background:#171e1dcf;border:1px solid var(--line);padding:14px}
.stats small{font-size:10px;color:#bebdaf}.stats b{font:24px Georgia;margin-top:8px}
#result[data-outcome=lost] article{border-color:#bb7c60}
.result-objectives{font-size:14px}.result-objectives .missed{color:#db9d8b}
header{height:66px;padding:0 18px;background:linear-gradient(180deg,#2a302bf7,#161d1ef7);border-bottom:1px solid #b39760;box-shadow:0 4px 20px #0006}
.chip{display:flex;align-items:center;gap:8px;background:#202925;border-color:#877247;min-height:44px;padding:5px 10px}
.chip .painted-icon{width:32px;height:32px}.chip b{color:var(--text)}
.resources{font-size:18px;gap:18px}.resources>span{display:grid;grid-template-columns:30px auto;gap:0 8px;align-items:center;padding-left:12px}
.resources .painted-icon{width:30px;height:30px;grid-row:1/3}.resources small{margin:0;font-size:9px;color:#c5c5b8;letter-spacing:.1em}.resources b{font:18px Georgia}
.objectives{top:84px;left:18px;width:260px;background:linear-gradient(140deg,#222923ec,#151d1dcf);border:1px solid var(--line);border-left:2px solid #b39760;border-radius:0;max-height:calc(100dvh - 420px);overflow:auto;pointer-events:auto}
.objective{font-size:12px;color:#d9d8c9}.objective.optional{color:#bdbfb0}.objective.failed{color:#e98476}
footer{inset:auto 12px 12px;grid-template-columns:190px minmax(230px,1fr) minmax(440px,1.2fr);gap:1px;border:1px solid #b39760;border-radius:2px;box-shadow:0 0 0 3px #141b1b,0 10px 36px #0008;height:308px;overflow:visible;background:#78633d}
footer>div,footer>section{background:linear-gradient(145deg,#2d322df7,#171f20fa);padding:14px;min-width:0;overflow:auto}
.map-panel canvas{width:156px;height:156px;border-color:#ad935b;box-shadow:0 0 0 4px #111a19;image-rendering:auto}
.selection h2{font-size:22px}.selection #unit-info{font:12px/1.5 system-ui;color:#c3c8b9;min-height:0}
#unit-portrait,#selection-art{float:left;width:96px;height:96px;margin:12px 16px 8px 0;border:1px solid #b39760;border-radius:2px}
#unit-vitals{margin-top:10px;max-width:240px;gap:7px}.unit-meter{height:8px;border-radius:0;border-color:#8a967959}
.commands #actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.commands button{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;padding:6px;min-height:122px;background:linear-gradient(145deg,#2e352f,#1b2323);border-color:#8f784a;font:11px/1.3 system-ui;gap:5px}
.commands button:hover{border-color:#e0c48c;background:#36433a}.commands button:disabled{opacity:1;filter:none}
.commands button .painted-icon{width:56px;height:56px}
.commands button:disabled .painted-icon{filter:saturate(.4) brightness(.7)}
.commands button small{margin:0;color:#c7c6b4;font-size:10px;line-height:1.3;min-height:26px;white-space:pre-line}
.command-name{display:block;max-width:100%;font-size:11px;font-weight:600;overflow-wrap:anywhere}
.key-badge{position:absolute;right:6px;top:6px;border:1px solid #b39760;background:#101818e8;padding:1px 4px;color:#ebd297;font:11px system-ui}
.state-badge{position:absolute;left:6px;top:6px;background:#10201edb;color:#c0e1d9;padding:1px 5px;border:1px solid #749a8a;font:10px system-ui}
.commands button.is-blocked small{color:#e8b2a3}
.commands button[aria-disabled=true] .painted-icon{filter:saturate(.4) brightness(.7)}
#command-tooltip{position:fixed;bottom:336px;right:24px;z-index:35;max-width:360px;white-space:pre-line;background:#161f1ff5;color:#eee4cd;border:1px solid #b39760;box-shadow:0 8px 30px #0008;padding:14px 18px;font:13px/1.6 system-ui;pointer-events:none}
.controls-help p{white-space:pre-line}
#portraits{display:flex;gap:6px;margin-top:10px;clear:both}
#portraits button{position:relative;min-height:44px;padding:0;background:#172120;border:1px solid #b39760;width:44px}
#portraits .painted-icon{width:42px;height:42px;border:0}#portraits .mini-health{position:absolute;bottom:0;left:0;height:4px;background:#adc78e;max-width:100%}
.production-queue{clear:both;display:flex;gap:8px;margin-top:12px;overflow:auto}
.queue-item{position:relative;flex:none;width:44px;height:54px}.queue-item .painted-icon{width:44px;height:44px}
.queue-item small{position:absolute;right:0;bottom:11px;padding:0 3px;background:#091411dd;color:#eee4cd;font-size:10px}
.queue-progress{height:4px;background:#101313;margin-top:3px}.queue-progress i{height:100%;display:block;background:#74b9db}
#hero-skills article{width:min(1120px,96vw)}
.skill-summary{display:flex;gap:20px;align-items:center;margin:18px 0}.skill-summary .painted-icon{width:80px;height:80px}.skill-summary p{margin:0;font-size:14px}
#hero-skills .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#hero-skills .card{display:flex;flex-direction:column;align-items:stretch;min-height:340px;padding:14px;font-size:13px;gap:10px}
#hero-skills .card>.painted-icon{width:128px;height:128px;align-self:center}
#hero-skills .card strong{font-size:20px}#hero-skills .card:disabled{opacity:1}
#hero-skills .card:disabled>.painted-icon{filter:saturate(.65)}
.skill-ranks{display:flex;gap:7px;margin:4px 0}.skill-ranks i{display:block;width:12px;height:12px;transform:rotate(45deg);background:#121b19;border:1px solid #af9866}.skill-ranks i.learned{background:#79cdc7;box-shadow:0 0 6px #79cdc766}
#hero-skills .card small{margin-top:auto;font-size:12px;letter-spacing:.02em;color:#d5c08e;padding-top:12px;border-top:1px solid var(--line)}
#dialog{bottom:336px;background:linear-gradient(130deg,#282e27f5,#151e1ffa);border:1px solid #b39760;border-left-width:3px;min-height:95px;padding:16px 44px 16px 16px}
#dialog .painted-icon{width:60px;height:60px;float:left;margin:0 14px 0 0}#dialog p{font-size:15px;color:#e3dcc7}
#toast{z-index:8;background:#1b2422f5;border-color:#b39760;color:#eee4cd;font-size:14px}
#placement{background:#1b2422;border-color:#b39760;font-size:13px}
#visual-tour{background:#1b2422ed;border-color:#b39760;border-radius:2px;width:230px;top:84px;right:18px;max-height:calc(100dvh - 410px);overflow:auto}
#visual-tour span{font-size:10px;color:#cfdbc5}#visual-tour button,#preview-chapter{min-height:36px;font-size:12px;background:#27362f;border-color:#877247}
#splash strong{font-family:Georgia,serif;color:#eee4cd}
.preview-inspector{margin-top:10px;font:12px/1.6 system-ui;color:#d2c39e}.preview-inspector summary{cursor:pointer;padding:7px 0}.preview-inspector select{width:100%;min-height:36px;font-size:12px;padding:6px;max-width:100%}
@media(max-width:1100px){footer{grid-template-columns:160px minmax(200px,1fr) 400px}.map-panel canvas{width:126px;height:126px}.chapter{display:none}header{padding:0 12px;gap:8px}.resources{gap:8px}.resources>span{padding-left:8px}.commands button{font-size:10px}.commands button .painted-icon{width:56px;height:56px}#unit-portrait,#selection-art{width:80px;height:80px;margin-right:12px}}
@media(max-height:800px){.overlay article{padding:22px 28px}.chapter-art{height:88px}.chapter-banner{height:100px}#menu .game-title{max-width:250px}#menu .menu-buttons{margin-top:18px}.objectives{max-height:calc(100dvh - 390px)}}
@media(max-width:800px){#menu{justify-items:center;padding:18px;background-position:65% center}#menu article{width:min(520px,94vw);background:#152020e8}.overlay{padding:16px}.overlay article{max-height:calc(100dvh - 32px);padding:22px}.overlay h2{font-size:32px}#mission-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.brief-grid{grid-template-columns:1fr;gap:10px}#hero-skills .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}header{height:60px}.resources .painted-icon{width:24px;height:24px}.resources>span{grid-template-columns:24px auto;gap:3px}.resources b{font-size:15px}#hero-chip b{font-size:10px}footer{height:290px;inset:auto 6px 6px;grid-template-columns:130px 1fr}.commands{grid-column:1/-1;max-height:170px;padding:8px}.commands #actions{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.commands .eyebrow{display:none}.commands button{min-height:118px}.map-panel canvas{width:100px;height:100px}.map-panel,.selection{max-height:120px}.selection h2{font-size:18px}#unit-portrait,#selection-art{width:62px;height:62px;margin-top:8px}.objectives{top:72px;left:10px;width:210px;max-height:calc(100dvh - 400px)}#dialog{bottom:310px;width:calc(100% - 24px)}#visual-tour{width:190px;right:10px;top:72px}}
@media(max-width:480px){#mission-cards{grid-template-columns:1fr}#hero-skills .cards{grid-template-columns:1fr}.brand{display:none}.resources small{font-size:8px}.commands #actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Approved option A: fixed-size command icons, details on hover/focus. */
footer{height:236px;grid-template-columns:190px minmax(230px,1fr) 334px}
.commands #actions{grid-template-columns:repeat(4,72px);grid-auto-rows:72px;gap:6px;justify-content:start;margin-top:10px}
.commands button{width:72px;height:72px;min-height:72px;padding:2px;gap:0;justify-content:center;overflow:visible}
.commands button .painted-icon{width:66px;height:66px;border:0}
.commands button .command-name,.commands button small{display:none}
.commands .key-badge{top:3px;right:3px;padding:1px 3px;background:#101818f2}
.commands .state-badge{top:3px;left:3px;padding:1px 3px;background:#10201ef2}
#command-tooltip,#dialog{bottom:264px}
.objectives{max-height:calc(100dvh - 340px)}
#visual-tour{max-height:calc(100dvh - 338px)}
@media(max-width:1100px){footer{grid-template-columns:160px minmax(200px,1fr) 334px}}
@media(max-width:800px){footer{height:290px;grid-template-columns:130px 1fr}.commands{max-height:170px}.commands #actions{grid-template-columns:repeat(4,72px);margin:0}.map-panel,.selection{max-height:120px}#command-tooltip,#dialog{bottom:310px}#command-tooltip{right:12px;max-width:calc(100vw - 24px)}.objectives{max-height:calc(100dvh - 400px)}#visual-tour{max-height:calc(100dvh - 392px)}}
@media(max-width:480px){.commands #actions{grid-template-columns:repeat(4,64px);grid-auto-rows:64px}.commands button{width:64px;height:64px;min-height:64px}.commands button .painted-icon{width:58px;height:58px}}

/* Centered compact dock: selection never stretches across the viewport. */
footer{left:50%;right:auto;transform:translateX(-50%);width:min(1000px,calc(100% - 24px));grid-template-columns:190px minmax(0,1fr) 334px}
.selection.multi-selection #unit-portrait,.selection.multi-selection #selection-art,.selection.multi-selection #unit-name,.selection.multi-selection #unit-info,.selection.multi-selection #unit-vitals{display:none}
.selection.multi-selection #portraits{flex-wrap:wrap;align-content:flex-start;margin-top:16px;gap:8px}
#portraits{flex-wrap:wrap}
#worker-status{clear:both;margin-top:12px;padding:6px 0;color:#b9e0d3;font:12px/1.5 system-ui;border-top:1px solid var(--line)}
#command-tooltip{right:max(24px,calc((100vw - 1000px)/2 + 14px))}
@media(max-width:1100px){footer{grid-template-columns:160px minmax(0,1fr) 334px}}
@media(max-width:800px){footer{width:calc(100% - 12px);grid-template-columns:130px minmax(0,1fr)}.selection.multi-selection #portraits{margin-top:10px;gap:6px}#command-tooltip{right:12px}}
.objectives{left:auto;right:18px}
#visual-tour{left:18px;right:auto}
@media(max-width:800px){.objectives{right:10px}#visual-tour{left:10px}}

/* Keep campaign actions visible within the viewport, including laptop screens. */
#campaign article,#briefing article{display:flex;flex-direction:column;max-height:calc(100dvh - 48px);padding:18px 26px;overflow:hidden}
#campaign h2.small-title,#briefing h2{font-size:30px;margin:8px 0 12px;flex-shrink:0}
#campaign article>button,#briefing article>button{flex-shrink:0;min-height:40px;padding:10px 16px;margin-top:8px}
#campaign #mission-cards{min-height:0;overflow:auto;gap:10px;margin:0;grid-template-rows:repeat(3,minmax(0,1fr))}
#campaign .card{min-height:0;padding:10px 12px;gap:3px}
#campaign .chapter-art{height:clamp(32px,8dvh,88px);margin-bottom:2px}
#campaign .card strong{font-size:18px;line-height:1.15}
#campaign .card em{font-size:12px;line-height:1.25}
#campaign .card .status{font-size:11px;line-height:1.25;margin-top:2px}
#briefing .chapter-banner{height:clamp(44px,10dvh,100px);margin:0 0 10px;flex-shrink:0}
#briefing .quote{font-size:14px;line-height:1.4;margin:0 0 10px;padding:6px 12px;flex-shrink:0}
#briefing .brief-grid{min-height:0;overflow:auto;gap:24px;margin:0;padding-top:10px}
#briefing .brief-grid p,#briefing .brief-grid ul{font-size:13px;line-height:1.4;margin:6px 0 10px}
#briefing .brief-grid li{margin-bottom:5px}
#briefing .segmented{margin-top:6px}
#briefing .segmented button{min-height:36px;padding:7px 4px}
#briefing .brief-difficulty{display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:12px;align-items:center;flex-shrink:0;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line)}
#briefing .brief-difficulty b{font:11px system-ui;color:var(--gold);text-transform:uppercase;letter-spacing:.1em}
#briefing .brief-difficulty .segmented{margin:0}
#briefing .brief-difficulty .hint{grid-column:2;margin:4px 0 0;font-size:12px;line-height:1.3}
@media(max-height:680px){#campaign article,#briefing article{padding:12px 20px}#campaign h2.small-title,#briefing h2{font-size:26px;margin:5px 0 8px}#campaign .chapter-art{height:clamp(24px,6dvh,40px)}#campaign .card{padding:8px 10px}#campaign .card strong{font-size:16px}#briefing .chapter-banner{height:44px}#briefing .brief-grid p,#briefing .brief-grid ul{font-size:12px;line-height:1.35}#briefing .brief-grid li{margin-bottom:4px}}
@media(max-width:800px){#campaign article,#briefing article{max-height:calc(100dvh - 32px);padding:16px}#campaign #mission-cards{grid-template-rows:none;grid-auto-rows:min-content}#briefing .brief-grid{gap:8px}#campaign .chapter-art{height:48px}}
@media(min-width:801px) and (max-height:800px){#briefing .chapter-banner{height:56px;margin-bottom:8px}#briefing .brief-grid p,#briefing .brief-grid ul{font-size:12px;line-height:1.35}#briefing .brief-grid li{margin-bottom:4px}#briefing .quote{margin-bottom:8px}}
/* Explicit dock rows keep the small-screen minimap inside its panel. */
@media(max-width:800px){footer{height:300px;grid-template-rows:132px minmax(0,1fr)}.map-panel,.selection,.commands{max-height:none}.map-panel{padding:8px;overflow:hidden}.map-panel canvas{width:100px;height:100px}.selection{padding:10px}.commands{padding:8px}#dialog,#command-tooltip{bottom:320px}}