@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#171d19;--gold:#d5b779;--bright:#f4ecd8;--muted:#a4ad9c;--line:#c8b68828;--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#141a16;color:var(--bright);font:12px var(--sans);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#20291f;border-radius:3px;padding:8px 12px;transition:background .15s,border .15s,transform .15s}button:hover{background:#38412d;border-color:#a68e5b}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.35;cursor:default}button:active:not(:disabled){transform:translateY(1px)}kbd{font:8px var(--sans);border:1px solid #9b987044;padding:2px 4px;border-radius:2px;color:#b9bba2;margin-left:6px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
#hud{height:64px;background:linear-gradient(#23281f,#171d17);border-bottom:1px solid #ae98644d;display:flex;align-items:center;gap:16px;padding:0 22px;box-shadow:0 5px 20px #0005;position:relative;z-index:2}.wordmark{display:flex;align-items:center;gap:12px;flex-shrink:0}.wordmark>span:last-child{font:600 14px var(--serif);letter-spacing:2.5px}.wordmark small{display:block;font:7px var(--sans);letter-spacing:2.6px;color:var(--muted);margin-top:4px}.crest{position:relative;display:block;font:28px var(--serif);color:var(--gold);width:31px;border:1px solid #ae98644d;height:38px;text-align:center;padding-top:1px;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}.crest span{font-size:13px;position:absolute;top:16px;left:12px;color:#ddd2af}.icon-button{width:30px;height:30px;padding:3px;font-size:20px;background:transparent;border-color:transparent;color:#bdbea7}.menu-button{font-size:10px;padding:9px 13px}.age-status{min-width:90px;border-left:1px solid var(--line);padding-left:16px;display:flex;flex-direction:column;gap:4px;align-items:center}.age-status #ageName{font-size:9px;letter-spacing:1.5px;color:var(--gold)}#clock{font:10px var(--sans);color:#a5aa98;font-variant-numeric:tabular-nums}#resources{flex:1;display:flex;gap:26px;justify-content:center}#resources .resource{display:flex;align-items:center;gap:8px}.resource-icon{width:24px;height:24px;filter:drop-shadow(0 1px 1px #000)}.resource strong{font:600 15px var(--sans);font-variant-numeric:tabular-nums}.resource small{font-size:7px;letter-spacing:1.3px;color:#a5ae98;display:block;margin-top:4px}.resource.pop{border-left:1px solid var(--line);padding-left:22px}.resource.pop.over strong{color:#ec9a80}
#battlefield{height:calc(100dvh - 244px);position:relative;background:#151e1b;overflow:hidden}#fog,#overlay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}#terrain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}#map{position:relative;width:100%;height:100%;display:block;outline:none;touch-action:none;cursor:default}.location{position:absolute;left:26px;top:24px;display:flex;align-items:center;gap:12px;pointer-events:none;text-shadow:0 2px 8px #000}.location-line{width:26px;height:1px;background:var(--gold)}.location div{font:10px var(--sans);letter-spacing:2.5px;color:#efe9d2}.location small{font-size:7px;display:block;letter-spacing:1.7px;margin-top:6px;color:#c1c8b3}#objective{position:absolute;top:24px;right:26px;font-size:9px;letter-spacing:.5px;color:#dbdfcc;background:#172317aa;padding:9px 13px;border:1px solid #b6a06a33;border-radius:3px;pointer-events:none}.objective-dot{width:5px;height:5px;border:1px solid var(--gold);display:inline-block;transform:rotate(45deg);margin-right:8px}#banner{position:absolute;left:50%;top:22px;transform:translateX(-50%);border:1px solid #b69e6555;padding:9px 17px;background:#142016e8;backdrop-filter:blur(5px);border-radius:3px;text-align:center;font-size:10px;display:none;max-width:48%;color:#e3d6b4}#toast{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);background:#162118ef;border:1px solid #a18b5566;padding:12px 22px;border-radius:3px;display:none;font-size:11px;max-width:85%;text-align:center;box-shadow:0 4px 20px #0004}#placementHint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);background:#162118ef;padding:12px 22px;border:1px solid #a18b55;font-size:10px;white-space:nowrap}.map-controls{position:absolute;bottom:20px;right:24px;display:flex;align-items:center;background:#172218d9;border:1px solid var(--line);border-radius:3px;padding:3px}.map-controls button{border:0;background:transparent;padding:4px 10px;font-size:18px}.map-controls #helpBtn{border-left:1px solid var(--line);font-size:12px}.map-controls span{font-size:8px;min-width:35px;text-align:center;color:#bcc3ac}
#commandPanel{height:180px;background:linear-gradient(135deg,#23291f,#192018 50%,#141b16);border-top:1px solid #a28b555e;display:flex;gap:22px;padding:14px 22px;box-shadow:0 -8px 25px #0003;position:relative;z-index:2}.panel-label{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.5px;color:#aab199;min-height:22px;margin-bottom:6px}.panel-label>span:last-child{font-size:8px;color:#7e8b75}.overview{width:202px;flex-shrink:0}#mini{width:202px;height:120px;display:block;border:1px solid #b3a37355;box-shadow:inset 0 0 15px #0006;cursor:crosshair}.selection{width:290px;border-left:1px solid var(--line);padding-left:18px;flex-shrink:0}.selection-body{display:flex;align-items:center;gap:12px}.selection-body>div{min-width:0}#portrait{width:88px;height:85px;background:radial-gradient(#66714d33,transparent);flex-shrink:0}h2{font:600 25px var(--serif);margin:0 0 5px}#selectedInfo{font-size:9px;color:#aab398;margin:0 0 8px;line-height:1.4}.health-track{width:120px;height:3px;background:#ffffff15;border-radius:2px;overflow:hidden}#healthBar{display:block;width:100%;height:100%;background:#7d9d59}#healthText{display:block;color:#aab398;font-size:8px;margin-top:4px}#unitStats{margin-top:6px;font-size:9px;color:var(--gold)}#queue{display:flex;gap:5px;align-items:center;margin-top:6px;font-size:8px;color:#b3bb9f;max-width:100%;overflow:hidden}.queue-item{padding:4px 6px;font-size:8px;background:#ffffff08}.queue-item:first-child{color:var(--gold);border-color:#a7915a77}.commands{flex:1;border-left:1px solid var(--line);padding-left:20px;min-width:0}.commands .panel-label>span{color:#aab199}#age{background:#ffffff04;font-size:9px;padding:5px 9px;color:var(--gold);letter-spacing:0;text-transform:none}#actions{display:flex;gap:5px;align-items:flex-start;flex-wrap:wrap}.action{position:relative;width:65px;height:78px;padding:2px 3px 6px;background:linear-gradient(#343c2b66,#1c261c);border:1px solid #7f865444;border-radius:3px;display:flex;align-items:center;flex-direction:column;justify-content:flex-end}.action:hover{background:#4d553288}.action canvas{width:48px;height:45px;position:absolute;top:1px;pointer-events:none}.action .action-name{font-size:8px;line-height:1.3;white-space:nowrap;position:relative}.action .action-cost{font-size:7px;color:#b8bc9d;margin-top:3px;white-space:nowrap}.action .hotkey{position:absolute;top:4px;right:4px;font-size:7px;color:#b4b797}.action.text-action{width:65px;justify-content:center;gap:7px}.action.text-action .symbol{font-size:23px;color:var(--gold);line-height:1}.command-hint{color:#8c997f;font-size:8px;line-height:1.5;margin-top:10px;letter-spacing:.2px}
dialog{color:var(--bright);border:1px solid #a9905e66;background:#1b251c;border-radius:6px;padding:30px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#0a120be0;backdrop-filter:blur(5px)}#lobby{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0;padding:0;background:#1c2a20;overflow-y:auto}.lobby-art{position:absolute;inset:0;background:url('/assets/menu-valley.png') center center/cover no-repeat;filter:saturate(.8);pointer-events:none}.lobby-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101a15f5 0%,#142219db 30%,#17281b66 65%,#13231622),linear-gradient(0deg,#0b150dd9,transparent 35%,transparent 75%,#0b150d55);pointer-events:none}.lobby-top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:32px 48px}.lobby-top .wordmark>span:last-child{font-size:20px}.lobby-top .crest{width:38px;height:44px;font-size:31px}.lobby-top .crest span{left:16px;top:21px}.edition{font-size:8px;letter-spacing:2px;color:#e1dec0aa}.lobby-content{position:relative;max-width:510px;margin-left:8%;margin-top:clamp(25px,7vh,90px);padding-bottom:60px}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#d5b779;display:flex;align-items:center;gap:12px}.eyebrow>span{width:24px;height:1px;background:var(--gold)}h1{font:500 clamp(52px,6vw,84px)/.99 var(--serif);letter-spacing:-1.5px;margin:24px 0 22px;text-shadow:0 2px 22px #0004}h1 em{font-weight:500;color:#d8bd85}.lobby-description{font-size:12px;line-height:1.9;color:#c9cdb9;margin-bottom:25px}.game-settings{width:330px;margin:25px 0 15px}.game-settings label{display:block;font-size:7px;letter-spacing:1.7px;color:#aeb89e}.game-settings select{display:block;margin-top:8px;padding:10px 12px;width:100%;color:#d9dfca;background:#15221aaa;border:1px solid #8f9a6650;font-size:11px;border-radius:3px}.primary{position:relative;display:block;width:330px;min-height:62px;text-align:left;background:linear-gradient(100deg,#d9bf85,#bfa067);border:1px solid #e2cd9e;color:#252c1c;padding:13px 20px;border-radius:3px;box-shadow:0 4px 20px #0003}.primary:hover{background:linear-gradient(100deg,#e8d29e,#cfb57a);border-color:#efe0b8}.primary>span{display:block;font-size:14px;font-weight:600;letter-spacing:.4px}.primary small{font-size:9px;display:block;margin-top:5px;color:#50583b}.primary b{position:absolute;right:20px;top:19px;font-size:20px;font-weight:400}.secondary{width:330px;text-align:left;background:#17271b8c;border:1px solid #aab47b44;padding:12px 16px;font-size:11px;margin-top:9px}.secondary span{float:right}.multiplayer-label{display:flex;gap:12px;align-items:center;font-size:7px;letter-spacing:1.8px;width:330px;margin:22px 0 9px;color:#bdc4a5}.multiplayer-label span{height:1px;background:#c1ca9a30;flex:1}.multiplayer{display:flex;gap:10px;width:330px}.multiplayer>.secondary{width:145px;margin:0;padding:12px}.multiplayer form{display:flex;flex:1;border:1px solid #aab47b44;background:#17271b8c;border-radius:3px;min-width:0}.multiplayer input{width:100%;min-width:0;background:transparent;border:0;padding:11px;font-size:8px;letter-spacing:1px;color:#e0e4cf;text-transform:uppercase}.multiplayer form button{background:transparent;border:0;padding:7px 10px;font-size:10px;white-space:nowrap;color:var(--gold)}#lobbyStatus{font-size:10px;color:#edce96;max-width:330px;line-height:1.6}.lobby-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 48px;font-size:7px;letter-spacing:1.6px;color:#b6bea1;border-top:1px solid #ffffff12;background:#11201644}.lobby-bottom button{background:transparent;border:0;font-size:9px;color:#d0d6b8;letter-spacing:1px}#help{width:640px;max-width:calc(100% - 36px);max-height:90dvh;overflow:auto;padding:35px}#help h2{font-size:36px;margin:18px 0}#help p{color:#b5c0a5;font-size:11px;line-height:1.8}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:20px 0}.guide-grid strong{font:600 20px var(--serif);color:var(--gold)}dl{display:grid;grid-template-columns:1fr 1.4fr;font-size:10px;row-gap:12px;margin:20px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}dt{color:#dfdfc4}dd{margin:0;color:#a9b497}.help-note{font-size:9px!important}#closeHelp{min-height:42px;width:100%;margin-top:20px;font-size:12px}#result{width:480px;text-align:center;padding:45px}#result .eyebrow{justify-content:center}#result h1{font-size:78px}#result p{color:#bbc4a8;font-size:12px;line-height:1.7}#resultStats{display:flex;justify-content:center;gap:30px;margin:28px 0;color:var(--gold)}#resultStats strong{display:block;font-size:25px;margin-bottom:5px}#resultStats span{font-size:8px;letter-spacing:1px;color:#a9b596}#result .primary,#result .secondary{width:100%;font-size:12px;min-height:42px;text-align:center}
@media(min-width:1500px){#commandPanel{gap:30px}.overview{width:220px}#mini{width:220px}.selection{width:340px}.action{width:78px;height:82px}.action canvas{width:58px;height:49px}.action .action-name{font-size:9px}.action .action-cost{font-size:8px}.lobby-content{margin-top:10vh}}
@media(max-width:1100px){#hud{gap:10px;padding:0 14px}.wordmark>span:last-child{font-size:11px;letter-spacing:1px}#resources{gap:15px}.resource-icon{width:20px;height:20px}.resource.pop{padding-left:14px}.selection{width:245px;padding-left:12px}#commandPanel{gap:14px;padding:12px 15px}.overview{width:165px}#mini{width:165px;height:115px}.commands{padding-left:12px}.action{width:60px;height:71px}.action canvas{height:39px;width:44px}.action .action-name{font-size:7px}.age-status{min-width:74px;padding-left:10px}}
@media(max-width:800px){#hud .wordmark>span:last-child{display:none}#hud{gap:7px;height:57px;padding:0 11px}.age-status{display:none}#resources{gap:15px}.resource strong{font-size:13px}.resource small{font-size:6px}.resource-icon{width:17px;height:17px}.resource{gap:4px!important}.resource.pop{padding-left:10px}#fullscreen{display:none}.menu-button kbd{display:none}.menu-button{padding:8px;font-size:9px}#battlefield{height:calc(100dvh - 243px)}#commandPanel{height:186px;padding:9px 12px;gap:12px}.overview{width:120px}#mini{width:120px;height:100px}.selection{width:160px}.selection-body{gap:6px}.selection-body #portrait{width:49px;height:65px}h2{font-size:21px}.health-track{width:78px}.selection-body>div{width:100px}.commands{padding-left:11px}.action{width:53px;height:64px}.action canvas{width:38px;height:34px}.action .action-cost{font-size:6px}.action .action-name{font-size:6px}#actions{gap:3px}.command-hint{font-size:7px}#objective{display:none}.location{top:19px;left:18px}#age{font-size:7px;padding:4px}.panel-label{font-size:7px;letter-spacing:.7px}.map-controls{right:15px;bottom:15px}.lobby-top{padding:25px}.edition{font-size:6px;letter-spacing:1px}.lobby-content{margin-left:8%;margin-top:6vh}.lobby-bottom{padding:18px 25px}.lobby-bottom>span:last-child{display:none}}
@media(max-width:600px){#resources{gap:10px}.resource strong{font-size:12px}.resource-icon{width:15px;height:15px}.resource.pop{padding-left:7px}.crest{width:25px;height:31px;font-size:23px}.crest span{font-size:10px;top:14px;left:11px}#hud{gap:5px}#sound{width:24px;font-size:16px}.overview{display:none}.selection{border-left:0;padding-left:0;width:142px}.commands{min-width:0}#commandPanel{height:200px}#battlefield{height:calc(100dvh - 257px)}.selection-body{display:block}.selection-body #portrait{width:60px;height:52px;float:left;margin-right:5px}.selection-body>div{width:100%}h2{font-size:20px}.selection-body p{font-size:8px}#unitStats{font-size:8px}.health-track{width:70px;display:inline-block}#queue{margin-top:10px;flex-wrap:wrap}.commands .panel-label{gap:7px;align-items:flex-start}.command-hint{display:none}.action{width:54px;height:66px}.action .action-name{font-size:7px}#actions{gap:4px}#placementHint{width:90%;white-space:normal;line-height:1.6;text-align:center}#banner{max-width:90%;top:50px;width:max-content}.location div{font-size:8px}.location small{font-size:6px}.lobby-top .wordmark>span:last-child{font-size:15px}.edition{display:none}.lobby-art{background-position:65% center}.lobby-shade{background:linear-gradient(90deg,#101a15ee,#14221999),linear-gradient(0deg,#0b150df9,transparent)}.lobby-content{margin:35px 30px 0;max-width:calc(100% - 60px);padding-bottom:35px}h1{font-size:64px}.lobby-description{font-size:11px}.game-settings,.primary,.secondary,.multiplayer-label,.multiplayer{width:100%}.lobby-bottom{font-size:6px}.guide-grid{grid-template-columns:1fr;gap:10px}#help{padding:24px}#help h2{font-size:30px}dl{font-size:9px;grid-template-columns:1fr;gap:6px}dd{margin-bottom:8px}#result{padding:30px}}
@media(max-height:700px) and (min-width:700px){.lobby-top{padding:20px 40px}.lobby-content{margin-top:5px}.lobby-content h1{font-size:59px;margin:15px 0}.lobby-description{margin-bottom:15px}.game-settings{margin-top:15px}.lobby-content{padding-bottom:25px}.lobby-bottom{padding-top:12px;padding-bottom:12px}}

.action.stance-active{border-color:#cfbb7d;background:#cfbb7d18;box-shadow:inset 0 -2px #cfbb7d}

#queue{max-height:65px;overflow:auto}.queue-item{text-align:left;flex-shrink:0}

#queue{clear:both}.group-production .health-track,.group-production #healthText,.group-production #unitStats{display:none}.group-production #queue{max-height:65px}

#selectionTypes{display:flex;flex-wrap:wrap;gap:4px;max-height:52px;overflow:auto;margin-top:5px}.type-filter{padding:4px 6px;font-size:8px;color:var(--gold);background:#ffffff08}.group-units .health-track,.group-units #healthText,.group-units #unitStats{display:none}

#idleWorkers{font-size:9px;padding:5px 7px;color:var(--gold);white-space:nowrap}#controlGroups{position:absolute;left:18px;bottom:14px;display:flex;gap:4px;max-width:calc(100% - 180px);overflow:auto;z-index:2}#controlGroups button{font-size:10px;white-space:nowrap;padding:5px 7px;color:var(--gold);background:#17251de8}
@media(min-width:700px){#battlefield{height:calc(100dvh - 294px)}#commandPanel{height:230px}.action{height:68px}#actions{max-height:148px;overflow:auto}.command-hint{margin-top:6px}}

.garrison-selection #queue{flex-wrap:nowrap}
@media(max-width:700px){.garrison-selection #unitStats{display:none}}

.game-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.action.research-action{gap:4px}.research-action .symbol{font-size:19px}

.game-settings input{display:block;margin-top:8px;padding:10px 12px;width:100%;color:#d9dfca;background:#15221aaa;border:1px solid #8f9a6650;font-size:11px;border-radius:3px}

/* Chat panel */
#chatToggle{width:auto;min-width:64px;padding:0 10px}
#chatPanel{position:absolute;left:18px;top:70px;width:330px;max-height:55%;background:#162118ef;border:1px solid #a18b5566;border-radius:4px;padding:12px;z-index:3;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 30px #0006}
#chatPanel .panel-label{min-height:0;margin-bottom:0}
#chatMessages{flex:1;overflow:auto;font-size:10px;line-height:1.5;color:#c8d0b4;min-height:80px;word-wrap:break-word}
#chatMessages .author{color:var(--gold)}
#chatForm{display:flex;gap:6px}
#chatInput{flex:1;min-width:0;background:#0f1810aa;border:1px solid #8f9a6650;color:#e0e4cf;padding:7px 9px;font-size:10px;border-radius:3px}
#chatForm button{font-size:9px;color:var(--gold)}
#chatStatus{font-size:8px;color:#a9b596;margin:0}

/* Score readout (vs enemy) */
#scores{min-width:auto;align-items:flex-start}
#scoreText{font:10px var(--sans);color:#c8ceb4;letter-spacing:.3px}

/* Resign in lobby */
#resign{color:#d69a80}

/* Audio settings */
#audioSettings{width:360px;max-width:calc(100% - 36px)}
.audio-controls{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.audio-controls label{display:flex;justify-content:space-between;font-size:10px;color:#c8ceb4;margin-bottom:4px}
.audio-controls output{color:var(--gold);font-variant-numeric:tabular-nums}
.audio-controls input[type=range]{width:100%;accent-color:#d5b779}
#audioMute{width:100%;margin-bottom:9px;font-size:11px}
#closeAudio{width:100%;text-align:center;min-height:42px}

#progressPanel{position:absolute;right:18px;top:65px;width:390px;max-width:calc(100% - 36px);max-height:calc(100% - 125px);overflow:auto;z-index:4;background:#162118f5;border:1px solid #a18b5566;border-radius:4px;padding:14px;box-shadow:0 8px 30px #0006}
#progressPanel[hidden]{display:none}#progressPanel .panel-label{display:flex;justify-content:space-between;align-items:center}#progressPanel table{width:100%;border-collapse:collapse;font-size:12px}#progressPanel th,#progressPanel td{padding:7px 5px;border-bottom:1px solid #a18b5533;text-align:right;font-variant-numeric:tabular-nums}#progressPanel th:first-child{text-align:left}#progressPanel td:nth-child(2){color:#75c4ee}#progressPanel td:nth-child(3){color:#ed8d6b}#progressTime{font-size:10px;color:#c1c8b3;line-height:1.5}.map-controls #progressToggle{font-size:11px}

#progressPanel .age-comparison-status{display:block;font-size:9px;line-height:1.6;color:#c1c8b3}#progressPanel progress{display:block;width:100%;height:7px;margin-top:4px;accent-color:#75c4ee}#progressPanel td:nth-child(3) progress{accent-color:#ed8d6b}

#productionOverview{position:absolute;left:18px;top:65px;display:flex;gap:6px;max-width:calc(100% - 440px);max-height:130px;overflow:auto;flex-wrap:wrap;z-index:3;padding:4px}
#productionOverview[hidden]{display:none}.production-entry{width:150px;min-height:58px;text-align:left;background:#162118ed;padding:7px;font-size:10px;border:1px solid #a18b5566}.production-entry span,.production-entry small{display:block}.production-entry small{font-size:9px;color:#c1c8b3;margin:4px 0}.production-entry progress{width:100%;height:5px;accent-color:#d5b779}.production-entry:focus-visible{outline:2px solid #75c4ee;outline-offset:2px}
@media(max-width:850px){#productionOverview{max-width:calc(100% - 36px);max-height:100px}.production-entry{width:130px}}

.progress-metric{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.progress-metric select{max-width:75%;padding:5px;font-size:11px}#progressChart{display:block;width:100%;margin-top:8px}#progressChart text{fill:#c1c8b3;font:9px Inter,system-ui}#progressHistoryNote{font-size:10px;color:#c1c8b3;line-height:1.5}

.map-controls #attackAll{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;margin:0 5px;padding:5px 10px;border:1px solid #b49b5b66;border-radius:3px;background:linear-gradient(180deg,#b49b5b20,#b49b5b0b);color:#e5d3a0;font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;letter-spacing:.15px;transition:background .15s,border-color .15s}
.map-controls #attackAll svg{flex:none}.map-controls #attackAll:hover:not(:disabled){background:#b49b5b30;border-color:#d5b779aa}.map-controls #attackAll:active:not(:disabled){background:#b49b5b45}.map-controls #attackAll:focus-visible{outline:2px solid #75c4ee;outline-offset:2px}.map-controls #attackAll:disabled{opacity:.4;cursor:default}
@media(prefers-reduced-motion:reduce){.map-controls #attackAll{transition:none}}

#keyboardSettings{width:460px;max-width:calc(100% - 32px);max-height:85dvh;overflow:auto}#keyboardSettings p{font-size:11px;line-height:1.7;color:#b5c0a5}#keyboardBindings{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:10px}#keyboardBindings select{padding:7px;background:#17271b;color:#e0e4cf;border:1px solid #aab47b44}#keyboardBindings label{margin:0}#closeKeyboard{width:100%;margin-top:16px}
#speedControl select{font-size:11px;padding:5px;width:auto}#speedControl[hidden]{display:none}
.civilization-hint{display:block;font-size:10px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;color:#c1c8b3;margin-top:4px}

/* Keep map commands on one typographic scale; only zoom uses oversized glyphs. */
.map-controls{gap:3px;padding:5px;border-radius:7px;background:#172218f2;box-shadow:0 4px 18px #0003;max-width:calc(100% - 30px);flex-wrap:wrap;justify-content:flex-end}
.map-controls button,.map-controls #progressToggle,.map-controls #helpBtn,.map-controls #attackAll{min-height:32px;font:600 11px/1 var(--sans);letter-spacing:.1px;padding:0 10px;border-radius:4px;white-space:nowrap}
.map-controls button:hover:not(:disabled){background:#c8b68814}
.map-controls #minus,.map-controls #plus{width:30px;padding:0;font-size:20px;font-weight:400}
.map-controls #soloPause{min-width:64px;background:#c8b6880b;border:1px solid #c8b68820}
.map-controls #soloPause[aria-pressed="true"]{color:var(--gold);background:#d5b77918;border-color:#d5b77955}
.map-controls #speedControl{position:relative;display:flex;align-items:center;margin-right:5px}
.map-controls #speedControl:after{content:"";position:absolute;right:10px;width:5px;height:5px;border-right:1.5px solid #bfc6b3;border-bottom:1.5px solid #bfc6b3;transform:translateY(-2px) rotate(45deg);pointer-events:none}
.map-controls #speedControl select{appearance:none;-webkit-appearance:none;height:32px;width:98px;padding:0 25px 0 10px;font:600 11px/1 var(--sans);color:#e6e7d8;background:#c8b6880b;border:1px solid #c8b68820;border-radius:4px;cursor:pointer}
.map-controls #speedControl select:hover{background:#c8b68814;border-color:#c8b68855}
.map-controls #zoomLabel{min-width:38px;font:500 10px/1 var(--sans);font-variant-numeric:tabular-nums;color:#aeb8a3}
.map-controls #resetRotation{min-width:38px;font-weight:500;font-variant-numeric:tabular-nums;color:#aeb8a3}
.map-controls #attackAll{margin:0 4px;gap:6px;border-color:#b49b5b55}
.map-controls #attackAll svg{width:13px;height:13px}
.map-controls #helpBtn{width:30px;padding:0;margin-left:3px;border-radius:0;border-left:1px solid var(--line);color:#bfc6b3}
@media(max-width:500px){.map-controls{gap:1px;padding:4px;bottom:10px}.map-controls button,.map-controls #progressToggle,.map-controls #attackAll{padding:0 7px}.map-controls #soloPause{min-width:55px}.map-controls #speedControl{margin-right:0}.map-controls #speedControl select{width:87px}.map-controls #attackAll{margin:0 2px}.map-controls #zoomLabel{min-width:32px}.map-controls #resetRotation{min-width:30px}}

.map-controls #soloPause{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;padding:0}
.map-controls #speedControl select{width:60px}
@media(max-width:500px){.map-controls #soloPause{min-width:32px}.map-controls #speedControl select{width:60px}}

.map-controls #attackAll,.map-controls #progressToggle,.map-controls #chatToggle{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;padding:0}
.map-controls #attackAll svg{width:16px;height:16px}
.map-controls #progressToggle[aria-expanded="true"],.map-controls #chatToggle[aria-expanded="true"]{color:var(--gold);background:#d5b77918}
.map-controls #chatToggle{position:relative}
.map-controls .chat-unread{position:absolute;right:-3px;top:-4px;min-width:14px;padding:2px 3px;border-radius:8px;background:var(--gold);color:#172218;font:700 8px/1 var(--sans)}

.action.completed:disabled { opacity: 1; color: #c4d2a6; border-color: #667349; background: #273322; cursor: default; }

#objective.relic-mode { max-width: 300px; font-size: 11px; background: #172317ed; }
#relicVictoryDetails { display: block; margin-top: 7px; color: #c2cbb4; font-size: 10px; line-height: 1.5; }
#relicVictoryProgress { display: block; width: 100%; height: 6px; margin-top: 7px; accent-color: #cfb66b; }
#objective.relic-threatening { border-color: #c58162; }
#objective.relic-threatening progress { accent-color: #e69a75; }
#relicVictoryDetails[hidden], #relicVictoryProgress[hidden] { display: none; }
.relic-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:800px) { #objective.relic-mode { display: block; top: auto; bottom: 66px; right: 15px; max-width: calc(100% - 30px); } }

#progressPanel table{min-width:min(360px,100%)}#progressPanel:has(th:nth-child(4)){width:min(820px,calc(100% - 32px));overflow:auto}#progressPanel td:nth-child(4){color:#bba0ee}#progressPanel td:nth-child(5){color:#e4c760}#progressPanel td:nth-child(6){color:#71c99b}

#progressChart{height:138px}#progressPanel td:nth-child(4) progress{accent-color:#bba0ee}#progressPanel td:nth-child(5) progress{accent-color:#e4c760}#progressPanel td:nth-child(6) progress{accent-color:#71c99b}

.map-controls #diplomacyToggle{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;padding:0;color:#d5b779}
#diplomacyPanel{width:min(620px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:30px;background:#172218;color:var(--bright);border:1px solid #a18b5566;border-radius:7px}
#diplomacyPanel::backdrop{background:#07110bd9}#diplomacyPanel>p{color:#bfc6b3;line-height:1.7;font-size:12px}.diplomacy-kingdom{border-top:1px solid var(--line);padding:17px 0}.diplomacy-kingdom h3{margin:0;font-size:13px;font-weight:600}.diplomacy-status{color:#d5b779;font-size:11px}.diplomacy-actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.diplomacy-actions button{font-size:11px;min-height:34px}.diplomacy-kingdom small{display:block;color:#a4ad9c;font-size:10px;line-height:1.6}#closeDiplomacy{margin-top:10px}

/* Keep late-game stockpiles and essential controls visible on narrow screens. */
@media(max-width:600px) {
  #hud { display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; grid-template-rows:34px 30px; gap:0 6px; height:76px; padding:4px 10px; }
  #hud .wordmark { grid-column:1; grid-row:1; }
  #idleWorkers { grid-column:2; grid-row:1; justify-self:end; }
  #sound { grid-column:3; grid-row:1; }
  #menuBtn { grid-column:4; grid-row:1; }
  #resources { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; min-width:0; width:100%; }
  #resources .resource { justify-content:center; min-width:0; gap:3px!important; }
  #resources .resource.pop { border-left:0; padding-left:0; }
  #resources .resource-icon { width:12px; height:12px; flex-shrink:0; }
  #resources strong { font-size:11px; }
  #resources small { letter-spacing:.2px; }
  #battlefield { height:calc(100dvh - 276px); }
}
@media(max-width:360px) {
  .map-controls { right:8px; max-width:calc(100% - 16px); }
  #objective.relic-mode { bottom:104px; }
}

#resultCompare{margin:18px 0 6px;text-align:left}#resultCompare[hidden]{display:none}#resultMetrics{display:flex;gap:6px;margin:8px 0 2px;flex-wrap:wrap}#resultMetrics button{border:1px solid #a18b5555;background:transparent;color:#c1c8b3;font:10px Inter,system-ui;letter-spacing:.5px;padding:5px 10px;border-radius:3px;cursor:pointer}#resultMetrics button[aria-pressed=true]{background:#a18b5533;color:#f1e6c4;border-color:#a18b55}#resultChart{display:block;width:100%;height:150px;margin-top:6px}#resultChart text{fill:#c1c8b3;font:9px Inter,system-ui}#resultCompareNote{font-size:10px;color:#aab398;margin:4px 0 0}
.legend-swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px 1px 0;vertical-align:middle}
.legend-entry{white-space:nowrap}

#techTree{width:min(1040px,94vw);max-height:90vh;overflow:auto}#techTree .tech-lede{color:#aab398;font-size:11px;margin:4px 0 12px}#techAges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}#techAges button{border:1px solid #a18b5555;background:transparent;color:#c1c8b3;font:10px Inter,system-ui;letter-spacing:.5px;padding:6px 12px;border-radius:3px;cursor:pointer}#techAges button[aria-pressed=true]{background:#a18b5533;color:#f1e6c4;border-color:#a18b55}#techGrid{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-bottom:16px}.tech-card{border:1px solid #a18b5544;background:#ffffff06;border-radius:4px;padding:12px}.tech-card.locked{opacity:.62}.tech-card header{display:flex;gap:10px;align-items:center;margin-bottom:8px}.tech-card h3{margin:0;font:600 17px var(--serif);color:#f1e6c4}.tech-card small,.tech-row small{display:block;color:#aab398;font-size:9px;line-height:1.45}.tech-list{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid #a18b5533;display:grid;gap:7px}.tech-row{display:flex;gap:8px;align-items:center;font-size:10px}.tech-row.locked{opacity:.5}.tech-row strong{font-size:11px;color:#e6dcbc}.tech-row .tech-age{margin-left:auto;font-size:8px;letter-spacing:.8px;color:var(--gold);text-transform:uppercase;white-space:nowrap}