#trade-settings-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0 12px}#trade-settings-list button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:8px 6px;white-space:nowrap}#trade-settings-list svg{width:16px;height:16px;flex-shrink:0;color:var(--green)}
/* Main menu: three equal entry points, compact secondary tools. */
.front-menu .modal-content:has(.home-screen){zoom:1;max-width:1020px}
.home-screen{--home-border:#c7dac323}
.home-masthead{display:flex;align-items:center;justify-content:space-between;gap:20px}
.home-masthead .home-brand h1{font-size:clamp(26px,3.5vw,42px);letter-spacing:-1.5px}
.home-masthead .home-brand>svg{width:30px;height:30px}
.home-masthead .home-settings{margin:0;padding:10px 17px;color:#bfd0cc;flex-shrink:0}
.home-intro{display:flex;align-items:center;position:relative;min-height:205px;gap:25px}
.home-profile{flex:1;min-width:150px;max-width:290px;z-index:1}
.home-profile .profile-label{color:#bdcec4;font-size:12px;margin-bottom:10px}
.home-profile .profile-input{width:100%;font-size:15px;background:#0d1c20a6;border-color:#9dbda447;padding:13px 15px}
svg.home-scene{display:block;width:60%;height:auto;max-height:225px;margin-left:auto;overflow:visible;flex-shrink:0;stroke:none;stroke-width:0}
.home-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-mode{--accent:#9cdbb2;display:flex;align-items:flex-start;flex-direction:column;position:relative;text-align:left;min-width:0;min-height:222px;padding:25px;border:1px solid var(--home-border);border-radius:15px;background:linear-gradient(145deg,#63896720,#192b2a70);overflow:hidden;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.home-mode:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);pointer-events:none}
.home-multi{--accent:#a4cce3;background:linear-gradient(145deg,#537e8f20,#19252d70)}
.home-tutorial{--accent:#dfc78e;background:linear-gradient(145deg,#9b875320,#2d2b2070)}
.home-mode:not(:disabled):hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 30px #0002;background-color:#ffffff06}
.home-mode:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.home-mode-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--home-border);border-radius:12px;background:#ffffff04;color:var(--accent);margin-bottom:18px}
.home-mode-icon svg{width:25px;height:25px}
.home-mode>strong{font-size:26px;font-weight:600;letter-spacing:-.6px;line-height:1.2}
.home-mode-description{font-size:13px;line-height:1.5;color:#b8c7c6;margin-top:9px}
.home-mode-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px;margin-top:auto;padding-top:23px;color:var(--accent);font-size:12px;font-weight:600}
.home-mode-bottom>span{font-size:18px}
.home-sandboxes{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.home-sandboxes>span{font-size:11px;color:#a4b4b5;margin-right:5px}
.home-sandboxes button{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:12px;border-color:#c7dac320;color:#c8d6d2;background:#ffffff03}
.home-sandboxes svg{width:17px;height:17px;color:#a9beb1}
.front-menu .modal-content:has(.home-screen)>.legal-footer{font-size:12px;margin-top:28px;gap:4px 20px;border-color:#c7dac315}
.home-flag{transform-origin:285px 54px;animation:home-flag 4s ease-in-out infinite}
.home-smoke{animation:home-smoke 6s ease-in-out infinite}
.home-ember{animation:home-ember 2.3s ease-in-out infinite}
.home-birds{animation:home-birds 14s ease-in-out infinite alternate}
@keyframes home-flag{50%{transform:scaleX(.83) skewY(7deg)}}
@keyframes home-smoke{0%,100%{opacity:.12;transform:translateY(3px)}50%{opacity:.35;transform:translateY(-6px)}}
@keyframes home-ember{50%{opacity:.65;transform:translateY(-1px)}}
@keyframes home-birds{to{transform:translate(-22px,5px)}}
@media(max-width:700px){.home-modes{gap:10px}.home-mode{padding:18px;min-height:210px}.home-mode>strong{font-size:21px}.home-intro{min-height:170px}.home-mode-description{font-size:12px}.home-masthead .home-brand{gap:8px}.home-masthead .home-brand>svg{width:24px;height:24px}}
@media(max-width:540px){.home-masthead{gap:10px}.home-masthead .home-brand h1{font-size:25px;letter-spacing:-1px}.home-masthead .home-settings{font-size:12px;padding:9px 11px}.home-masthead .home-brand>svg{display:none}.home-intro{min-height:125px;gap:0}.home-profile{min-width:135px;max-width:180px}svg.home-scene{width:52%;margin-right:-10px}.home-modes{grid-template-columns:1fr;gap:10px}.home-mode{display:grid;grid-template-columns:40px 1fr;column-gap:14px;min-height:0;padding:16px}.home-mode-icon{grid-row:1/4;width:40px;height:40px;margin:0}.home-mode>strong{font-size:22px}.home-mode-description{margin-top:4px;grid-column:2}.home-mode-bottom{grid-column:2;font-size:11px;padding-top:9px}.home-mode-bottom>span{position:absolute;right:17px;top:18px}.home-mode>strong{padding-right:18px}.home-sandboxes{gap:8px;margin-top:17px}.home-sandboxes>span{display:none}.home-sandboxes button{padding:10px 12px}.front-menu .modal-content:has(.home-screen)>.legal-footer{margin-top:18px;gap:2px 14px}}
@media(prefers-reduced-motion:reduce){.home-scene *{animation:none!important}.home-mode{transition:none}.home-mode:not(:disabled):hover{transform:none}}
/* Shared Solo / Multiplayer setup language. Scoped away from in-game panels. */
dialog.front-menu .modal-content:has(.setup-page){zoom:1;max-width:1050px}
dialog.front-menu .modal-content:has(.setup-page #join-form){max-width:900px}
.front-menu #dialog-content:has(.setup-page){padding-top:26px;padding-bottom:26px}
.setup-page{--setup-accent:#9cdbb2;--setup-line:#c7dac323}
.multiplayer-setup{--setup-accent:#a4cce3}
.setup-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.setup-title{display:flex;align-items:center;gap:15px;min-width:0}
.setup-emblem{display:grid;place-items:center;flex-shrink:0;width:50px;height:50px;border:1px solid var(--setup-line);border-radius:14px;background:#ffffff04;color:var(--setup-accent)}
.setup-emblem svg{width:26px;height:26px}
.setup-title h1{font-size:34px;letter-spacing:-1px;line-height:1.2;margin:0;font-weight:650}
.setup-title p{font-size:13px;margin:5px 0 0;line-height:1.4;color:#b8c7c6}
.setup-back{flex-shrink:0;padding:11px 15px;color:#c0ceca;font-size:12px}
.setup-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:24px;align-items:start}
.setup-map-panel{min-width:0}
.setup-page .map-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.setup-page .map-options legend,.setup-page .difficulty-options legend{font-size:13px;color:#cad8d2;margin-bottom:13px;font-weight:600}
.setup-page .map-card{border-radius:12px;border-color:var(--setup-line);background:linear-gradient(145deg,#63896718,#192b2a60);transition:border-color .16s,background .16s}
.setup-page .map-card:hover{border-color:#a3bbae88}
.setup-page .map-card:has(input:checked){border-color:var(--setup-accent);box-shadow:0 0 0 1px var(--setup-accent);background:#8ee2bd0b}
.setup-page .map-card:has(input:focus-visible){outline-color:var(--setup-accent)}
.setup-page .map-card input{width:15px;height:15px;accent-color:var(--setup-accent);margin:0;top:9px;left:9px;z-index:1}
.setup-page .map-card img{aspect-ratio:2.5;object-fit:contain;background:#839770;opacity:.85;border-bottom:1px solid var(--setup-line)}
.setup-page .map-card-info{padding:11px 12px}
.setup-page .map-card strong{font-size:13px;line-height:1.4}
.setup-page .map-size{margin-top:7px;gap:5px;color:#b9cdb9;font-size:10px}
.setup-page .map-size span{padding:2px 5px;background:#ffffff03;border-color:#c7dac326}
.setup-page .setup-map-description{font-size:12px;line-height:1.5;color:#aebfb8;margin:15px 0 0;min-height:36px}
.setup-page .setup-host-note{font-size:11px;margin:7px 0 0;color:#9bb2c2}
.setup-page .difficulty-options{grid-template-columns:1fr;gap:9px}
.setup-page .difficulty-card{padding:13px 14px;border-radius:12px;border-color:var(--setup-line);background:linear-gradient(145deg,#63896712,#192b2a50);gap:10px}
.setup-page .difficulty-card:has(input:checked){border-color:var(--setup-accent);background:#8ee2bd0b}
.setup-page .difficulty-card input{margin-top:2px;width:14px;height:14px}
.setup-page .difficulty-card>span{flex:1}
.setup-page .difficulty-card strong{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;line-height:1.3}
.setup-page .difficulty-card small{font-size:11px;line-height:1.5;margin-top:5px}
.difficulty-bars{display:flex;align-items:end;gap:3px;height:13px;flex-shrink:0}
.difficulty-bars i{display:block;width:4px;height:5px;background:#ffffff15;border-radius:1px}.difficulty-bars i:nth-child(2){height:8px}.difficulty-bars i:nth-child(3){height:11px}.difficulty-bars i:nth-child(4){height:14px}.difficulty-bars i.lit{background:var(--setup-accent)}
.setup-page .difficulty-card[data-level=bartal] .lit{background:#e2b884}
.setup-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;margin-top:20px;border-top:1px solid var(--setup-line)}
.setup-page .setup-actions p{font-size:12px;line-height:1.5;color:#bdcec6;margin:0}
.setup-page .primary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-width:160px;background:var(--setup-accent);border-color:var(--setup-accent);padding:13px 18px}
.setup-page .primary:hover{filter:brightness(1.1)}
.setup-page .primary>span{font-size:18px}
.front-menu .modal-content:has(.setup-page)>.legal-footer{font-size:12px;margin-top:24px;gap:4px 20px;border-color:#c7dac315}
.join-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.2fr);gap:45px;align-items:center}
.join-panel{padding:28px;border:1px solid var(--setup-line);border-radius:16px;background:linear-gradient(145deg,#537e8f20,#19252d70)}
.setup-page .join-panel h2{font-size:22px;letter-spacing:-.5px;margin:0 0 24px;font-weight:600}
.setup-page #join-form{margin:0;gap:18px}
.setup-page #join-form label{font-size:12px;color:#bdcec8;gap:9px}
.setup-page #join-form input{padding:13px 14px;border-color:#9dbda447;background:#0d1c20a6;font-size:15px}
.setup-page #join-form #join-code{letter-spacing:1px}
.setup-page #join-code-hint{font-size:11px;line-height:1.4;margin:-10px 0 0;color:#aebfb8}
.setup-page #join-form .primary{width:100%;margin:4px 0 0}
.join-scene{text-align:center;min-width:0}
.join-scene svg.home-scene{width:100%;margin:0;max-height:240px}
.join-scene>div{margin:20px 0 0}.join-scene strong{font-size:22px;font-weight:550;letter-spacing:-.5px}.join-scene p{font-size:13px;margin:9px 0 0}
.lobby-party{min-width:0;padding:18px;border:1px solid var(--setup-line);border-radius:14px;background:linear-gradient(145deg,#537e8f18,#19252d70)}
.lobby-party-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.setup-page .lobby-party-heading h2{font-size:14px;letter-spacing:0;margin:0;font-weight:600}
.lobby-party-heading>span{font-size:11px;color:var(--setup-accent)}
.setup-page .lobby-row{gap:10px;padding:12px 0;border-color:var(--setup-line)}
.setup-page .lobby-row>div{min-width:0}.setup-page .lobby-row b{font-size:12px;overflow-wrap:anywhere;line-height:1.4}.setup-page .lobby-row em{font-style:normal;font-weight:400;color:#a4b4c3}.setup-page .lobby-row small{font-size:10px;margin-top:2px}
.setup-page .lobby-avatar{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;background:#ffffff06;border-radius:9px;color:var(--setup-accent)}
.lobby-avatar svg{width:17px;height:17px}.setup-page .lobby-ready{font-size:10px;white-space:nowrap;color:#b1bec5}.setup-page .is-ready .lobby-ready{color:#9cdbb2}
.setup-page .lobby-row button{width:26px;height:28px;flex-shrink:0;font-size:16px}
.lobby-open-slots{padding:13px 0 0;color:#99b0b8;font-size:11px}
.setup-page .lobby-invite{margin:18px 0 0;padding:12px;border-color:#a4cce333;background:#a4cce306}
.setup-page .lobby-invite label{font-size:11px}.setup-page .lobby-invite input{padding:9px;font-size:13px}.setup-page .lobby-invite button{font-size:11px;padding:8px}.setup-page .lobby-invite #invite-status{font-size:10px}
.lobby-action-buttons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ready-button{padding:14px 18px;font-size:13px;min-width:110px}.ready-button[aria-pressed=true]{color:#9cdbb2;border-color:#9cdbb288}
@media(max-width:900px){.setup-columns{grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr);gap:18px}.setup-page .map-options{grid-template-columns:repeat(2,minmax(0,1fr))}.join-layout{gap:24px}}
@media(max-width:650px){.setup-heading{margin-bottom:24px;gap:12px}.setup-title{gap:10px}.setup-emblem{width:38px;height:38px;border-radius:11px}.setup-emblem svg{width:21px;height:21px}.setup-title h1{font-size:26px}.setup-title p{font-size:11px}.setup-back{font-size:11px;padding:9px 11px}.setup-columns{grid-template-columns:1fr;gap:22px}.setup-page .difficulty-options{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-page .difficulty-card strong{font-size:13px}.difficulty-bars{display:none}.join-layout{grid-template-columns:1fr}.join-panel{padding:24px}.join-scene{display:none}.setup-actions{align-items:stretch;flex-direction:column;gap:14px}.setup-page .setup-actions .primary{justify-content:center}.lobby-action-buttons>*{flex:1}.setup-page .map-card img{aspect-ratio:2.4}.setup-page .setup-map-description{min-height:0}.setup-page .lobby-row b{font-size:13px}}
@media(max-width:380px){.setup-emblem{display:none}.setup-page .difficulty-options{grid-template-columns:1fr}.setup-page .map-card-info{padding:9px}.setup-page .map-card strong{font-size:12px}.setup-title h1{font-size:24px}.setup-back{padding:9px}.setup-page .map-size{font-size:9px;gap:3px}.front-menu .modal-content:has(.setup-page)>.legal-footer{gap:3px 14px}}
@media(prefers-reduced-motion:reduce){.setup-page .map-card{transition:none}}
/* Full-window battlefield with interactive HUD islands. */
:root{color-scheme:dark;--bg:#10151d;--panel:#15212ced;--muted:#a4b4c3;--text:#edf4f6;--gold:#8ee2bd;--line:#ffffff20;--green:#8ee2bd;--sans:'Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px var(--sans);height:100dvh;overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#ffffff08;transition:background .14s,border-color .14s}button:hover{background:#ffffff18;border-color:#8ee2bd99}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}svg use{pointer-events:none}.symbols{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}kbd{font:11px var(--sans);color:var(--muted)}
.game-screen,.battlefield{position:absolute;inset:0;overflow:hidden}#world{width:100%;height:100%;display:block;touch-action:none}.hud-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 24px #07121035}.resourcebar,.game-menu,.opponents,.quick-panel,.command-panel{position:absolute;z-index:3}.resourcebar{left:16px;top:16px;display:flex;align-items:center;padding:10px 12px;gap:16px}.resources{display:flex;gap:22px}.resource{display:flex;align-items:center;gap:7px;min-width:63px}.resource svg{width:19px;height:19px}.amount{display:block;font-size:18px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}.resource small{font-size:10px;color:var(--muted)}.resource.food svg{color:#f1cd7d}.resource.wood svg{color:#91d9ae}.resource.gold svg{color:#efbd61}.resource.stone svg{color:#aabdda}.resource.population svg{color:#b6bfff}.pop-cap{font-size:12px;color:var(--muted)}.age-button{padding:9px 11px;min-width:70px;color:var(--gold);font-weight:650;line-height:1.3}.age-button small{display:block;font-size:10px;font-weight:400}
.game-menu{right:16px;top:16px;padding:7px;display:flex;align-items:center;gap:5px}.game-menu #clock{font-variant-numeric:tabular-nums;font-size:12px;padding:0 7px;color:var(--muted)}.square{width:34px;height:34px;font-size:17px}.opponents{top:78px;right:16px;display:flex;flex-direction:column;gap:6px;max-width:225px}.enemy-card{display:flex;align-items:center;gap:8px;padding:8px 11px;text-align:left;background:var(--panel);font-size:11px}.enemy-card b{font-size:11px;font-weight:550;overflow-wrap:anywhere}.enemy-card small{color:var(--muted);margin-left:auto;white-space:nowrap}.enemy-card svg{width:16px;height:16px;flex-shrink:0;color:#e7a695}.enemy-card:disabled{opacity:.65}
.minimap-wrap{position:absolute;right:16px;bottom:62px;width:200px;padding:6px;border-radius:10px;background:var(--panel);border:1px solid var(--line);z-index:3}#minimap{display:block;width:100%;height:auto;border-radius:5px;cursor:crosshair}.map-tools{position:absolute;right:16px;bottom:16px;display:flex;gap:6px;z-index:3}.map-tools button{width:45px;height:36px;background:var(--panel);font-size:21px;display:grid;place-items:center}.map-tools svg{width:17px;height:17px}.quick-panel{bottom:199px;right:16px;width:200px;display:flex;gap:4px;padding:5px}.quick-panel button{flex:1;padding:6px 3px;font-size:11px;white-space:nowrap}.quick-panel button:last-child{color:var(--gold)}
.command-panel{left:16px;bottom:16px;width:min(660px,calc(100vw - 248px));max-height:calc(100dvh - 170px);padding:12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#577066 transparent}.unit-heading{display:flex;gap:10px;align-items:center;margin-bottom:10px}.unit-portrait{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#8ee2bd16;color:var(--gold);flex-shrink:0}.unit-portrait svg{width:20px;height:20px}.unit-heading>div:last-child{min-width:0;flex:1}.unit-heading h3{font-size:14px;margin:0 0 3px;font-weight:650}.unit-heading p{margin:0;font-size:11px;color:var(--muted);line-height:1.4}.hp{height:3px;max-width:180px;background:#ffffff16;margin-top:5px;border-radius:2px;overflow:hidden}.hp i{height:100%;display:block;background:var(--gold)}#actions{display:flex;flex-direction:column;gap:7px}.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.action{padding:8px;text-align:left;min-height:43px}.action svg{width:16px;height:16px;vertical-align:middle;margin-right:5px;color:var(--gold)}.action b{font-size:11px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.action small{display:block;font-size:10px;line-height:1.4;color:var(--muted);margin-top:4px}.action.active{background:#8ee2bd22;border-color:var(--gold)}.command-subtitle{font-size:10px;color:var(--muted);margin:2px 0 0}.help-copy{margin:0;color:var(--muted);font-size:11px;line-height:1.4}.training-queue{display:flex;align-items:center;gap:8px;height:44px;flex-shrink:0}#queue{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;flex:1;min-width:0}.queue-slot{height:40px;min-width:0;border:1px solid #ffffff0e;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--gold);font-size:10px;font-variant-numeric:tabular-nums}.queue-slot.filled{background:#ffffff08;border-color:#ffffff18}.queue-slot svg{width:16px;height:16px;flex-shrink:0}.queue-cancel{padding:6px;font-size:10px;flex:0 0 64px;white-space:nowrap}.queue-cancel:disabled{opacity:.3;cursor:default}.toast,.connection,.command-hint{position:absolute;left:50%;transform:translateX(-50%);z-index:4;background:var(--panel);border:1px solid #8ee2bd66;border-radius:9px;padding:9px 13px;font-size:12px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 4px 20px #07121022}.toast{top:90px;pointer-events:none}.connection{top:130px;pointer-events:none}.connection.offline{background:#60342ded;color:#ffe2bc}.command-hint{top:16px;display:flex;align-items:center;gap:12px}.command-hint button{width:25px;height:25px;font-size:18px}.pause-banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:14px 24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:22px;pointer-events:none;z-index:2}
dialog{border:1px solid #ffffff22;padding:0;background:#18222e;color:var(--text);box-shadow:0 25px 100px #07120eaa;max-width:700px;width:calc(100% - 40px);max-height:90dvh;border-radius:20px}dialog::backdrop{background:#0b1323a0;backdrop-filter:blur(7px)}.modal-content{padding:38px 40px}.modal-eyebrow{font-size:10px;color:var(--gold);letter-spacing:2px;font-weight:600}.modal-content h2{font-size:32px;font-weight:650;letter-spacing:-1px;line-height:1.25;margin:18px 0;color:var(--text)}.modal-content p{color:#a7b8c9;font-size:13px;line-height:1.8}.modal-features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin:26px 0}.modal-feature{padding:16px 12px;border:1px solid var(--line);border-radius:10px;background:#1d2a38}.modal-feature svg{color:var(--gold);width:24px;height:24px}.modal-feature b{display:block;font-size:13px;font-weight:600;margin:10px 0 7px}.modal-feature span{font-size:11px;color:var(--muted);line-height:1.7;display:block}.primary{background:#7de1ba;color:#0b3028;border:1px solid #9cf3ce;padding:13px 20px;border-radius:9px;font-weight:700;font-size:13px}.primary:hover{background:#a7f2d4;color:#12332a}.modal-buttons{display:flex;gap:10px;align-items:center;margin-top:25px;flex-wrap:wrap}.modal-buttons>button:not(.primary){padding:12px 16px;background:#253242}.modal-note{font-size:11px!important;color:#8297aa!important;margin-top:20px}.guide-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.guide-list div{font-size:12px;color:#a7b8c9;line-height:1.7}.guide-list b{display:block;color:#e8f1f7;font-weight:600;margin-bottom:6px}.stats-row{display:flex;gap:30px;margin:24px 0}.stats-row strong{font-size:27px;display:block;color:var(--gold)}.stats-row span{font-size:11px;color:var(--muted)}#join-form{display:grid;gap:17px;margin:24px 0}#join-form label{display:grid;gap:8px;font-size:12px;color:#c8d5e0}#join-form input{width:100%;padding:13px 14px;border:1px solid #ffffff22;border-radius:9px;background:#101a26;color:var(--text);font:15px var(--sans)}#join-form .primary{margin-top:5px}.lobby-row{display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.lobby-row>div{flex:1}.lobby-row b{font-size:14px;font-weight:600}.lobby-row small{display:block;margin-top:5px;font-size:11px;color:var(--muted)}.lobby-row>span{font-size:12px;color:var(--gold)}.lobby-row button{width:30px;height:30px;font-size:18px}#modal-status{color:#f1cc8b;padding:10px 12px;border-radius:8px;border:1px solid #cfac6f55;background:#403b2433}

.activity-legend{display:grid;gap:6px;margin:16px 0;font-size:12px;color:var(--muted)}.guide-list{gap:16px}.controls-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0;color:var(--muted);font-size:12px}.controls-list b{display:block;color:var(--text);margin-bottom:4px}.menu-options{flex-direction:column;align-items:stretch}.menu-options button{width:100%}.modal-content h2{font-size:28px}.modal-eyebrow{letter-spacing:1px}
@media(max-width:1100px){.resources{gap:12px}.resource{min-width:52px}.resourcebar{gap:10px}.command-panel{width:calc(100vw - 248px);max-width:660px}.command-hint{top:82px}.toast{top:130px}.connection{top:168px}}
@media(max-width:800px){.resourcebar{left:8px;top:8px;padding:8px;gap:7px}.resources{gap:8px}.resource{min-width:42px;gap:4px}.resource svg{width:15px;height:15px}.resource .amount{font-size:15px}.resource small{font-size:9px}.age-button{min-width:56px;padding:6px;font-size:11px}.game-menu{right:8px;top:8px;padding:5px;gap:3px}.game-menu #clock{display:none}.square{width:30px;height:30px}.opponents{right:8px;top:66px;max-width:155px}.enemy-card{padding:6px;font-size:10px}.minimap-wrap{width:158px;right:8px;bottom:52px}.map-tools{right:8px;bottom:8px;gap:4px}.map-tools button{width:36px;height:34px}.quick-panel{right:8px;bottom:165px;width:158px}.quick-panel button{font-size:10px}.command-panel{left:8px;bottom:8px;width:calc(100vw - 182px);padding:9px}.action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.action{padding:7px}.action b{font-size:10px}.action small{font-size:9px}.unit-heading p{font-size:10px}.modal-content{padding:24px}.controls-list{grid-template-columns:1fr}}
@media(max-width:560px){.resourcebar{right:8px;justify-content:space-between}.resources{flex:1;justify-content:space-around;gap:3px}.resource{min-width:0}.resource svg{display:none}.game-menu{top:70px}.opponents{top:116px}.command-hint{top:120px;left:8px;transform:none}.toast{top:170px}.connection{top:210px}.command-panel{width:calc(100vw - 16px);max-height:38dvh;bottom:8px}.minimap-wrap{bottom:calc(38dvh + 60px);width:120px}.map-tools{bottom:calc(38dvh + 17px)}.quick-panel{bottom:calc(38dvh + 148px);width:158px}.action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.action svg{display:none}}
@media(min-width:1101px){.command-panel{left:50%;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){button{transition:none}dialog::backdrop{backdrop-filter:none}}
/* Context panels shrink when fewer commands are available. */
.command-panel[data-kind="building"]{width:min(360px,calc(100vw - 248px))}.command-panel[data-kind="army"]{width:min(390px,calc(100vw - 248px))}.command-panel[data-kind="building"] .action-grid,.command-panel[data-kind="army"] .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.command-hint{top:88px}.toast{top:132px}.connection{top:172px}
@media(max-width:800px){.command-panel[data-kind="building"],.command-panel[data-kind="army"]{width:calc(100vw - 182px);max-width:390px}}
@media(max-width:560px){.command-panel[data-kind="building"],.command-panel[data-kind="army"]{width:calc(100vw - 16px);max-width:none}.command-hint{top:120px}.toast{top:170px}.connection{top:210px}}
/* The front menu occupies the whole window; match dialogs remain compact. */
dialog.front-menu{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:radial-gradient(ellipse at 15% 0%,#243c3b 0,transparent 55%),#111b24;box-shadow:none;overflow:auto}
.front-menu #dialog-content{min-height:100%;display:grid;place-items:center;padding:40px 28px}
.front-menu .modal-content{width:100%;max-width:1000px;padding:0}
.front-menu .modal-content:has(#join-form),.front-menu .modal-content:has(.controls-list){max-width:640px}
.home-heading{margin-bottom:38px}.home-brand{display:flex;align-items:center;gap:14px}.home-brand>svg{width:34px;height:34px;color:var(--gold)}.home-brand h1{font-size:40px;letter-spacing:-1.5px;line-height:1.2;font-weight:650;margin:0}.home-heading>p{max-width:580px;margin:14px 0 0;font-size:15px;line-height:1.6}
.home-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:48px}.profile-label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}.profile-input{display:block;width:100%;max-width:360px;padding:12px 14px;background:#0e1821;color:var(--text);border:1px solid #627b78;border-radius:8px;font-size:15px}.modal-content .profile-hint{font-size:11px;margin:7px 0 24px;line-height:1.4}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:24px 20px;background:#ffffff04;border:1px solid #ffffff23;border-radius:14px;min-width:0}.mode-card:hover{background:#8ee2bd0b;border-color:#8ee2bd99}.mode-card>svg{width:26px;height:26px;color:var(--gold);margin-bottom:20px}.mode-card>strong{font-size:25px;line-height:1.2;font-weight:600;letter-spacing:-.5px}.mode-meta{font-size:12px;color:var(--gold);margin-top:5px}.mode-description{font-size:12px;color:var(--muted);line-height:1.7;margin:18px 0 22px;flex:1}.mode-cta{font-size:12px;font-weight:650;display:flex;justify-content:space-between;width:100%;color:var(--text);gap:8px}.mode-cta>span{color:var(--gold);font-size:16px}.solo-card{background:#8ee2bd08;border-color:#8ee2bd55}.home-links{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap}.home-links button{border:0;background:none;padding:4px 0;font-size:12px;color:var(--muted)}.home-links button:hover{color:var(--text)}
.home-guide{border-left:1px solid #ffffff16;padding-left:32px}.modal-content .home-guide h2{font-size:18px;letter-spacing:0;margin:0 0 25px;font-weight:600}.home-guide ol{padding:0;margin:0;list-style:none;counter-reset:steps}.home-guide li{position:relative;counter-increment:steps;padding-left:30px;margin-bottom:22px}.home-guide li:before{content:counter(steps);position:absolute;left:0;top:0;color:var(--gold);font-size:12px;line-height:20px}.home-guide b{font-size:13px;font-weight:600}.modal-content .home-guide p{font-size:12px;line-height:1.65;margin:6px 0 0}.home-victory{padding-top:18px;border-top:1px solid #ffffff16}
@media(max-width:760px){.front-menu #dialog-content{padding:28px 20px}.home-heading{margin-bottom:28px}.home-brand h1{font-size:34px}.home-layout{grid-template-columns:1fr;gap:32px}.home-guide{border-left:0;border-top:1px solid #ffffff16;padding:26px 0 0}.profile-input{max-width:none}.mode-card{padding:20px}.home-guide ol{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.home-guide li{padding-left:0;padding-top:26px;margin:0 0 22px}}
@media(max-width:440px){.mode-grid{grid-template-columns:1fr}.mode-card{display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding:18px}.mode-card>svg{grid-row:1/3;margin:3px 0 0}.mode-card>strong{font-size:22px}.mode-meta{grid-column:2}.mode-description,.mode-cta{grid-column:1/-1}.mode-description{margin:12px 0 16px}.home-guide ol{grid-template-columns:1fr}.home-guide li{padding-top:0;padding-left:28px}.home-brand h1{font-size:30px}}

.quick-panel{flex-wrap:wrap}

/* Shared main-menu palette, with a compact in-game pause sheet. */
dialog.match-menu{max-width:480px;background:radial-gradient(ellipse at 0 0,#243c3b 0,transparent 75%),#111b24;border-color:#8ee2bd30;border-radius:20px}
.match-menu .modal-content{padding:32px}.pause-heading>svg{width:30px;height:30px;color:var(--gold)}.pause-heading h2{margin:16px 0 8px;font-size:32px;letter-spacing:-1px}.pause-heading p{margin:0;overflow-wrap:anywhere}
.match-summary{display:flex;justify-content:space-between;gap:16px;padding:17px 0;margin:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pause-actions{display:grid;gap:10px}.pause-actions button{min-height:48px;padding:12px 18px;text-align:left;font-weight:600}.pause-actions button:not(.primary){background:#ffffff04}.pause-actions button:hover{background:#ffffff12}.pause-actions .primary:hover{background:#a7f2d4}
.front-menu .modal-content:has(.difficulty-options){max-width:720px}.difficulty-options{padding:0;margin:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.difficulty-options legend{font-size:13px;font-weight:600;margin-bottom:14px}.difficulty-card{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:20px 16px;background:#ffffff04;border:1px solid var(--line);border-radius:14px}.difficulty-card:hover{border-color:#8ee2bd88}.difficulty-card:has(input:checked){border-color:var(--gold);background:#8ee2bd0d}.difficulty-card:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}.difficulty-card input{accent-color:var(--gold);margin:4px 0 0;flex-shrink:0}.difficulty-card strong{font-size:18px;font-weight:600;display:block}.difficulty-card small{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:12px}
@media(max-width:600px){.difficulty-options{grid-template-columns:1fr}.difficulty-card{padding:16px}.difficulty-card small{margin-top:5px}.match-menu .modal-content{padding:24px}}

.map-tools button[aria-pressed="true"]{color:var(--gold);border-color:#8ee2bd88;background:#234b42}

.command-panel[data-kind="resource"]{width:min(320px,calc(100vw - 32px))}.command-panel[data-kind="resource"] .unit-heading{margin-bottom:0}#resource-stock{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}#resource-detail:empty{display:none}
.map-options{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.map-options legend{font-size:14px;font-weight:600;margin-bottom:12px}.map-card{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#ffffff04}.map-card:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.map-card:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}.map-card input{position:absolute;top:7px;left:7px;accent-color:var(--gold)}.map-card img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover}.map-card span{display:block;padding:10px}.map-card strong{font-size:13px;display:block}.map-card small{font-size:11px;line-height:1.5;color:var(--muted);display:block;margin-top:5px}.map-card:has(input:disabled){cursor:default}.modal-content .map-note{font-size:11px;margin:12px 0 24px;color:var(--muted)}
@media(max-width:760px){.map-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

.vision-debug{height:34px;min-width:88px;padding:0 8px;font-size:11px;font-weight:650;white-space:nowrap}.vision-debug.revealed{color:#ffda86;border-color:#d8ad58;background:#d8ad5824}.vision-debug:disabled{cursor:default;opacity:.65}@media(min-width:561px) and (max-width:680px){.game-menu{top:70px}.opponents{top:116px}}
#debug-panel{width:min(380px,calc(100vw - 24px));padding:20px;zoom:1;max-height:calc(100dvh - 32px);overflow:auto;color:var(--text);background:#15212c;border:1px solid #8ee2bd55;border-radius:12px}
#debug-panel::backdrop{background:#08101955}#debug-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}#debug-panel h2{margin:0;font-size:19px}#debug-close{width:30px;height:30px;font-size:20px}#debug-panel p{font-size:13px;line-height:1.5;color:#bcced7}#debug-panel form{display:flex;flex-direction:column;gap:12px}#debug-panel label{font-size:13px}#debug-panel input{width:100%;padding:10px;font:14px var(--sans)}#debug-panel button{min-height:36px}#debug-status{margin-bottom:0}#debug-tools .vision-debug{width:100%;font-size:13px}

.settings-page .pause-heading{margin-bottom:20px}
.settings-section{margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;min-width:0}
.settings-section legend{padding:0 7px;font-size:12px;font-weight:700;color:var(--gold)}
.settings-audio{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:8px 16px}
.settings-audio+.settings-audio{margin-top:20px}
.settings-audio label{font-size:14px;color:var(--text)}
.settings-audio output{text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.settings-audio input{width:100%;min-width:0;margin:0;accent-color:var(--gold)}
.settings-audio button{min-height:32px;padding:5px 9px;font-size:12px}
.settings-audio button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;font-size:13px;cursor:pointer}
.settings-toggle input{width:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--gold)}
.settings-toggle+.settings-toggle{border-top:1px solid var(--line)}
.home-settings{margin-top:14px;padding:10px 18px}

.test-launch{width:100%;margin-top:12px;padding:14px;text-align:left;border-color:#d5b87366}.test-launch strong{display:block;color:var(--gold)}.test-launch span{display:block;margin-top:5px;font-size:12px;color:var(--muted)}

/* Trade controls stay within the selected-object HUD. */
.market-grid{display:grid;grid-template-columns:minmax(68px,1fr) 32px 30px 30px 51px 51px;gap:8px 4px;align-items:center;margin:12px 0}.market-grid>b{font-size:10px;color:var(--muted);font-weight:600;text-align:center}.market-grid>b:first-child{text-align:left}.market-resource{display:flex;align-items:center;gap:5px;font-size:11px}.market-resource svg{width:15px;height:15px;flex-shrink:0}.market-grid input[type=checkbox]{width:16px;height:16px;justify-self:center;accent-color:var(--gold)}.market-grid input[type=number],.market-budget-input input{width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;padding:6px 3px;background:#14242b;color:var(--text);font-size:11px;-moz-appearance:textfield}.market-grid input::-webkit-inner-spin-button{appearance:none}.market-dash{text-align:center;color:var(--muted)}.market-budget-input{display:flex;align-items:center;gap:12px;font-size:12px}.market-budget-input input{width:100px}.market-prices{font-size:10px;color:var(--muted);margin:10px 0}#market-form>.primary{width:100%;padding:8px}#market-form .help-copy{margin:9px 0;font-size:11px}#market-status,#market-budget{font-variant-numeric:tabular-nums}
.trade-players-button{position:absolute;right:20px;top:146px;padding:8px 12px;font-size:12px;pointer-events:auto;z-index:5}.diplomacy-panel{position:absolute;right:20px;top:185px;width:min(330px,calc(100vw - 40px));z-index:15;padding:14px;pointer-events:auto}.diplomacy-panel header{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:10px}.diplomacy-panel header button{padding:2px 8px}.trade-player{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.trade-player strong{font-size:12px;overflow-wrap:anywhere}.trade-player small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.trade-player button{font-size:11px;white-space:nowrap;padding:8px}.trade-player button[aria-pressed=true]{color:#ffbd9a;border-color:#af705a}.front-menu-open .trade-players-button{display:none}@media(max-width:560px){.trade-players-button{top:160px;right:12px}.diplomacy-panel{top:200px;right:12px}}
.scout-selectors{display:flex;flex:0 0 100%;gap:4px}.quick-panel .scout-selectors button{color:var(--text)}.quick-panel .scout-selectors button[aria-pressed="true"]{color:var(--gold);border-color:#8ee2bd99;background:#36584c}.scout-selectors button:disabled{opacity:.35;cursor:default}

/* Shrink UI islands with the viewport, never enlarge beyond their original size.
   The battlefield canvas retains real viewport coordinates and independent zoom. */
:root{--ui-scale:1;--hud-edge:16px;--hud-menu-top:16px;--hud-enemy-top:78px;--hud-map-bottom:62px;--hud-quick-bottom:199px;--hud-tools-bottom:16px}
.resourcebar{transform:scale(var(--ui-scale));transform-origin:top left;left:calc(var(--hud-edge)*var(--ui-scale));top:calc(var(--hud-edge)*var(--ui-scale))}
.game-menu,.opponents,.trade-players-button,.diplomacy-panel{transform:scale(var(--ui-scale));transform-origin:top right}
.game-menu,.opponents{right:calc(var(--hud-edge)*var(--ui-scale))}.game-menu{top:calc(var(--hud-menu-top)*var(--ui-scale))}.opponents{top:calc(var(--hud-enemy-top)*var(--ui-scale))}
.trade-players-button,.diplomacy-panel{right:calc(20px*var(--ui-scale))}.diplomacy-panel{max-height:calc(52dvh / var(--ui-scale));overflow:auto}
.minimap-wrap,.quick-panel,.map-tools{transform:scale(var(--ui-scale));transform-origin:bottom right;right:calc(var(--hud-edge)*var(--ui-scale))}
.minimap-wrap{bottom:calc(var(--hud-map-bottom)*var(--ui-scale))}.quick-panel{bottom:calc((var(--hud-map-bottom) + var(--minimap-height,130px) + 8px)*var(--ui-scale))}.map-tools{bottom:calc(var(--hud-tools-bottom)*var(--ui-scale))}
.command-panel{transform:scale(var(--ui-scale));transform-origin:bottom left;left:calc(var(--hud-edge)*var(--ui-scale));bottom:calc(var(--hud-edge)*var(--ui-scale));max-height:min(calc(100dvh - 170px),calc(50dvh / var(--ui-scale)))}
.toast,.connection,.command-hint{transform:translateX(-50%) scale(var(--ui-scale));transform-origin:top center}.command-hint{top:calc(88px*var(--ui-scale))}.toast{top:calc(132px*var(--ui-scale))}.connection{top:calc(172px*var(--ui-scale))}
.pause-banner{transform:translate(-50%,-50%) scale(var(--ui-scale))}
dialog:not(.front-menu){zoom:var(--ui-scale);max-height:calc(90dvh / var(--ui-scale))}.front-menu .modal-content{zoom:var(--ui-scale)}
@media(min-width:1101px){.command-panel{left:50%;transform:translateX(-50%) scale(var(--ui-scale));transform-origin:bottom center}}
@media(max-width:800px){:root{--hud-edge:8px;--hud-menu-top:8px;--hud-enemy-top:66px;--hud-map-bottom:52px;--hud-quick-bottom:165px;--hud-tools-bottom:8px}}
@media(max-width:680px){:root{--hud-menu-top:70px;--hud-enemy-top:116px}}
@media(max-width:560px){
 .command-panel[data-kind="building"]{max-width:360px}.command-panel[data-kind="army"]{max-width:390px}
 .resourcebar{right:auto;width:calc(100vw - 16px)}
 .command-panel{max-height:38dvh}.minimap-wrap{bottom:calc((38dvh + 60px)*var(--ui-scale))}.map-tools{bottom:calc((38dvh + 17px)*var(--ui-scale))}.quick-panel{bottom:calc((38dvh + 148px)*var(--ui-scale))}
 .command-hint{left:8px;transform:scale(var(--ui-scale));transform-origin:top left;top:calc(120px*var(--ui-scale))}.toast{top:calc(170px*var(--ui-scale))}.connection{top:calc(210px*var(--ui-scale))}
}

/* Compact command strip. Detailed palettes open only on demand, in the top layer. */
.command-panel[data-kind]{display:flex;align-items:center;gap:10px;width:max-content;max-width:calc((100vw - 32px) / var(--ui-scale) - 220px);height:auto;max-height:none;padding:6px 8px;overflow:visible;border-radius:9px}
.command-panel #selection-info{flex:0 0 auto;min-width:0;max-width:174px}.command-panel .unit-heading{margin:0;gap:7px;align-items:center}.command-panel .unit-heading>div:last-child{min-width:0}.command-panel .unit-heading h3{font-size:12px;line-height:1.25;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-panel .unit-heading p{font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-panel .unit-portrait{width:24px;height:24px;border-radius:5px}.command-panel .unit-portrait svg{width:16px;height:16px}.command-panel .hp{margin-top:3px}
.command-panel #actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px;min-width:0;max-width:100%;overflow:visible}.command-panel #actions:empty{display:none}.command-panel #actions>.action-grid{display:contents}
.command-panel .action{flex:0 0 auto;min-height:32px;min-width:68px;padding:5px 7px;border-radius:5px;white-space:nowrap}.command-panel .action b{font-size:11px;line-height:1.2}.command-panel .action small{font-size:9px;line-height:1.2;margin-top:2px}.command-panel .action svg{display:inline-block;width:14px;height:14px;margin-right:4px}
.command-panel #actions>.help-copy:not(#farm-workers):not(#trade-status),.command-panel .command-subtitle{display:none}.command-panel #farm-workers,.command-panel #trade-status{flex:0 0 auto;max-width:160px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-panel .training-queue{height:30px;flex:0 0 164px;gap:4px;margin:0}.command-panel #queue{gap:3px}.command-panel .queue-slot{height:28px;border-radius:4px;font-size:9px;gap:0}.command-panel .queue-slot svg{width:12px;height:12px}.command-panel .queue-cancel{flex:0 0 24px;width:24px;padding:3px;font-size:15px}
.command-panel[data-kind="resource"] #selection-info{max-width:300px}.command-panel #resource-stock{font-size:12px}
.command-popover{position:fixed;inset:auto;margin:0;width:440px;max-width:calc((100vw - 16px) / var(--ui-scale));padding:10px;border:1px solid #8ee2bd55;border-radius:10px;color:var(--text);background:#15212c;box-shadow:0 8px 30px #07121070;overflow:auto;transform:scale(var(--ui-scale));transform-origin:bottom left;font:12px var(--sans);scrollbar-width:thin}
.command-popover::backdrop{background:transparent}.command-popover>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px}.command-popover>header>button{width:24px;height:24px;font-size:17px;padding:0}
.command-popover .demolition-warning{color:#ffbc99}
.command-popover .action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.command-popover .action{white-space:normal;min-width:0;padding:7px}.command-popover .action small{white-space:normal}
#market-settings{width:350px}#market-form{display:block}.market-grid{margin:8px 0;gap:5px 4px}#market-form>.help-copy:last-child{display:none}#market-form .help-copy{margin:6px 0}.market-prices{margin:7px 0}
.trade-resource-modes{display:grid;gap:6px;margin:10px 0}
.trade-resource-row{display:grid;grid-template-columns:1fr minmax(0,158px);align-items:center;gap:4px 10px;padding:7px 9px;background:#ffffff05;border:1px solid #ffffff12;border-radius:6px}
.trade-resource-row select{width:100%;min-width:0;min-height:30px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:#12232c;color:var(--text);font:inherit}
.trade-resource-row small{grid-column:1/-1;color:var(--muted);font-size:10px;line-height:1.4}
.trade-resource-row small[hidden]{display:none}
#market-form .trade-limits{grid-template-columns:minmax(76px,1fr) 32px 62px 72px}
#market-form .trade-limits input{min-width:0;width:100%;box-sizing:border-box}
#market-form .trade-limits input[type=checkbox]{width:16px;justify-self:center}
#market-form .trade-limits input:disabled{opacity:.35}
#market-form .market-budget-input{margin-top:10px;gap:7px}
.market-budget-input svg{width:15px;height:15px;color:#edc77e}
#market-form>button[type=submit]{width:100%;margin-top:2px;min-height:34px}
#trade-settings-list{grid-template-columns:1fr}
#market-settings{width:760px;transform-origin:top left;padding:12px}
#market-settings>.trade-window-handle{cursor:grab;touch-action:none;user-select:none;position:sticky;top:-12px;background:#15212c;padding:8px 0;z-index:1}
.trade-window-handle button{cursor:pointer}
.trade-channel-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.trade-channel-form{min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:#ffffff03}
.trade-channel-form h3{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:14px;color:var(--green)}
.trade-channel-form h3 svg{width:20px;height:20px}
.trade-channel-form .help-copy{font-size:10px;line-height:1.5;margin:6px 0}
.trade-mode-row{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:4px 5px;padding:8px 0;border-bottom:1px solid var(--line)}
.trade-mode-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.3fr);gap:7px}
.trade-foreign-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border-left:1px solid #8ee2bd44;padding-left:7px;min-width:0}
.trade-mode-buttons button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;min-width:0;font-size:9px;border-radius:5px}
.trade-mode-buttons button svg{width:18px;height:18px}
.trade-mode-buttons button[aria-pressed=true]{background:#33564e;border-color:#8ee2bd;color:#c3ffe6;box-shadow:inset 0 -2px #8ee2bd}
.trade-mode-row small{grid-column:1/-1;color:var(--muted);font-size:10px}
.trade-gold-reserve{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px 7px;margin:12px 0 6px;font-size:12px}
.trade-gold-reserve svg{width:18px;height:18px;color:var(--gold)}
.trade-gold-reserve output{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.trade-gold-reserve input[type=range]{grid-column:1/-1;width:100%;min-width:0;height:24px;margin:0;accent-color:var(--gold);cursor:pointer}
.trade-gold-reserve input[type=range]:disabled{opacity:.45;cursor:default}
.trade-range-scale{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.trade-channel-form>.primary{width:100%;margin-top:6px;padding:8px}
@media(max-width:650px){#market-settings{width:360px}.trade-channel-columns{grid-template-columns:1fr;gap:10px}.trade-channel-form{padding:8px}.trade-mode-row{grid-template-columns:65px minmax(0,1fr)}}
@media(min-width:1101px){.command-panel[data-kind]{max-width:calc((100vw - 32px) / var(--ui-scale) - 440px)}}
@media(max-width:560px){
 .command-panel[data-kind]{max-width:calc((100vw - 16px) / var(--ui-scale));flex-wrap:wrap;gap:5px}.command-panel #selection-info{max-width:100%;flex-basis:100%}.command-panel .unit-portrait{display:none}
 .minimap-wrap{bottom:calc((var(--command-height,70px) + 58px)*var(--ui-scale))}.map-tools{bottom:calc((var(--command-height,70px) + 15px)*var(--ui-scale))}.quick-panel{bottom:calc((var(--command-height,70px) + 66px + var(--minimap-height,80px))*var(--ui-scale))}
 .command-popover .action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Quiet menu footer; documents keep readable text independent of HUD scaling. */
.legal-footer{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin-top:22px;padding-top:12px;border-top:1px solid #ffffff12;font-size:calc(12px / var(--ui-scale));line-height:1.5}
.legal-footer a{display:inline-block;color:#a4b4c3;text-decoration:none;padding:5px 0}
.legal-footer a:hover{color:var(--text);text-decoration:underline}
.legal-footer a:focus-visible,.legal-copy a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.remember-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;color:var(--muted);font-size:calc(12px / var(--ui-scale));line-height:1.6;cursor:pointer}
.remember-preferences input{width:16px;height:16px;margin:0 3px 0 0;accent-color:var(--gold)}
.remember-preferences span{font-size:inherit}
#legal-dialog{zoom:1;width:min(760px,calc(100vw - 32px));max-width:760px;max-height:calc(100dvh - 32px);padding:0;background:#15212c;color:var(--text);border:1px solid #ffffff30;border-radius:16px;overflow:auto;overscroll-behavior:contain}
#legal-dialog::backdrop{background:#050c13c7;backdrop-filter:blur(4px)}
.legal-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 28px;background:#15212c;border-bottom:1px solid var(--line);z-index:1}
#legal-title{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.4px}
#legal-close{flex-shrink:0;padding:8px 12px;font-size:13px}
.legal-copy{padding:8px 28px 28px;font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.legal-copy p,.legal-copy li,.legal-copy dd{color:#c5d0da;font-size:14px;line-height:1.75}
.legal-copy h3{margin:26px 0 8px;font-size:16px;color:var(--text)}
.legal-copy a{color:#8ee2bd;text-underline-offset:3px}
.legal-copy ul{padding-left:22px}.legal-copy li{margin:9px 0}
.legal-copy dt{font-weight:600;margin-top:16px}.legal-copy dd{margin:5px 0 0}
.legal-copy .legal-draft{padding:12px 14px;border-left:2px solid #c9ad77;background:#c9ad770c;color:#e3cfaa;font-size:13px}
@media(max-width:560px){.legal-header{padding:16px}.legal-copy{padding:4px 16px 20px}#legal-title{font-size:19px}.legal-footer{gap:4px 14px}}
@media print{body{height:auto;overflow:visible}body>*:not(#legal-dialog){display:none!important}#legal-dialog[open]{position:static;width:100%;max-width:none;max-height:none;border:0;background:white;color:black;overflow:visible}.legal-header{position:static;background:white}#legal-close{display:none}.legal-copy p,.legal-copy li,.legal-copy dd,.legal-copy h3,.legal-copy a{color:black}.legal-copy .legal-draft{color:black}}

.resource-meter{height:7px;margin:7px 0 6px;overflow:hidden;border-radius:3px;background:#ffffff16}.resource-meter i{display:block;height:100%;background:repeating-linear-gradient(135deg,#8ee2bd 0 5px,#62af90 5px 9px)}


.command-panel .action.mixed{border-style:dashed;border-color:#b9cbe4;background:#b9cbe412}

/* Stable command sections: label above, aligned actions below, whole groups wrap. */
.command-panel[data-kind]{gap:12px;padding:8px 10px}
.command-panel #selection-info{padding-right:10px;border-right:1px solid var(--line)}
.command-panel #actions{align-items:stretch;gap:8px 12px}
.command-panel .command-group{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:0 1 auto;min-width:0;max-width:100%;padding:0;border:0;border-radius:0;background:none}
.command-panel .command-group>.action-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:5px;min-width:0}
.command-panel .command-group>.group-label{font-size:9px;line-height:12px;letter-spacing:.8px;text-transform:uppercase;color:#9fb7c4;padding:0 1px}
.command-panel .training-group>.group-label{color:#a7d9bf}.command-panel .construction-group>.group-label,.command-panel .development-group>.group-label{color:#d9c493}
.command-panel .action{display:grid;grid-template-columns:14px auto auto;align-items:center;align-content:center;column-gap:5px;row-gap:3px;min-height:42px;padding:6px 8px}
.command-panel .action svg{margin:0;grid-column:1;grid-row:1}.command-panel .action b{grid-column:2;grid-row:1}.command-panel .action kbd{grid-column:3;grid-row:1;margin:0}.command-panel .action small{grid-column:2 / -1;margin:0}
.command-panel .training-group .action{flex:1 0 auto;min-width:130px}
.command-panel .danger-group{border-left:1px solid #d5937740;padding-left:12px}.command-panel .danger-group>.group-label{color:#ca9f8d}.command-panel .danger-group>.action-grid>.action{color:#e4b49f;border-color:#b7806338;background:#bb755407}
.command-panel #farm-workers,.command-panel #trade-status{align-self:center;white-space:normal;max-width:230px;overflow:visible;line-height:1.4}
.command-panel #market-summary{align-self:center;white-space:normal;max-width:220px;line-height:1.5;font-size:10px}
#formation-menu{width:360px}.formation-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:9px}.formation-options .action small{display:block;white-space:normal}.formation-options .action.active{border-color:#9adebf;background:#8ee2bd19}
@media(max-width:560px){
 .command-panel[data-kind]{gap:8px;padding:8px 10px}.command-panel #selection-info{border-right:0;border-bottom:1px solid var(--line);padding:0 0 7px}
 .command-panel #actions{width:100%;gap:10px}.command-panel .training-group{width:100%}.command-panel .danger-group{padding-left:10px}
}
.action kbd{display:inline-block;margin-left:6px;padding:1px 3px;border:1px solid #ffffff24;border-radius:3px;font:9px var(--sans);color:#a9bcc8;vertical-align:1px;white-space:nowrap}
/* Readable building cards and full selected-unit activity, including scaled HUDs. */
#build-palette{width:440px;padding:8px}
#build-palette .build-age-group+.build-age-group{margin-top:12px;padding-top:10px;border-top:1px solid #c9ad6c44}
#build-palette .build-age-group h3{margin:0 0 7px;font-size:12px;font-weight:700;color:#dfc98d;letter-spacing:.04em}
#build-palette .build-age-group>.action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#build-palette .action{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:6px;row-gap:2px;align-content:center;min-height:51px;padding:6px 7px;text-align:left}
#build-palette .action svg{width:16px;height:16px;margin:0;grid-column:1;grid-row:1}
#build-palette .action b{grid-column:2;grid-row:1;white-space:normal;overflow-wrap:normal;word-break:normal;font-size:max(12px,calc(11px / var(--ui-scale)));line-height:1.25}
#build-palette .action kbd{grid-column:3;grid-row:1;margin:0;align-self:start}
#build-palette .action small{grid-column:2 / -1;grid-row:2;margin:0;font-size:max(11px,calc(10px / var(--ui-scale)));line-height:1.4;white-space:normal;overflow-wrap:normal}
.action.resource-short{border-color:#e9a07566;background:#a64d2914}
.build-shortage{display:flex;align-items:center;flex-wrap:wrap;column-gap:.3em;grid-column:2 / -1;margin-top:3px;font-size:11px;line-height:1.5;color:#ffc4a3}
#build-palette .build-shortage{grid-column:2 / -1;grid-row:3;margin:0;font-size:max(11px,calc(10px / var(--ui-scale)))}
.build-shortage[hidden]{display:none}
.build-shortage .resource-label{white-space:nowrap}
.command-hint.resource-short{border-color:#e9a075;background:#272f2bf5;color:#ffc4a3;text-align:left}
.build-shortage-notice{display:grid;gap:5px;line-height:1.5}
.build-shortage-notice strong{color:#ffe5d5;font-size:13px}
.build-shortage-notice>span{display:flex;flex-wrap:wrap;gap:6px}
.build-shortage-notice .resource-label{padding:3px 7px;border:1px solid #e9a07555;border-radius:5px;background:#a64d2922;font-size:13px}
.command-panel #selection-info{width:260px;max-width:260px;flex:0 0 260px}
.command-panel .unit-heading h3{font-size:max(13px,calc(12px / var(--ui-scale)))}
.command-panel #entity-status{font-size:max(12px,calc(12px / var(--ui-scale)));line-height:1.45;white-space:normal;overflow-wrap:normal;text-overflow:clip;max-height:5.8em;overflow:auto;color:#c3d2d9}
@media(max-width:560px){.command-panel #selection-info{width:100%;max-width:100%;flex-basis:100%}}
@media(max-width:420px){#build-palette{width:340px}#build-palette .build-age-group>.action-grid{grid-template-columns:1fr}#build-palette .action{min-height:45px}}
#demolition-confirm{width:280px}#demolition-confirm p,#dismiss-confirm p{font-size:12px;line-height:1.5;margin:0 0 9px}#demolition-confirm [data-action="demolish"],#dismiss-confirm [data-action="dismiss"]{border-color:#e1a07877;color:#ffd1ad}
#dismiss-confirm{width:300px}#dismiss-confirm>.action{margin:3px 4px 0 0}
.building-queue{position:absolute;z-index:3;width:216px;padding:8px;transform:scale(var(--ui-scale));transform-origin:top left;border-radius:8px;box-shadow:0 4px 16px #07121050}
.building-queue header{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:10px}.building-queue header strong{color:#a6ddc5;white-space:nowrap}.building-queue header span{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.building-queue .queue-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.building-queue .queue-slot{position:relative;height:30px;border-radius:4px;font-size:9px;gap:0;overflow:hidden}.building-queue .queue-slot svg{width:13px;height:13px}.building-queue .queue-slot i{position:absolute;bottom:0;left:0;height:2px;background:#8ee2bd}
.building-queue.unselected{opacity:.5;pointer-events:none}
.building-queue .queue-entry{min-width:0}.building-queue button.queue-slot{width:100%;padding:2px;cursor:pointer}.building-queue button.queue-slot:disabled{cursor:default;opacity:1}
.building-queue button.queue-slot:not(:disabled):hover{border-color:#edb2a0;background:#edb2a018}.building-queue button.queue-slot:focus-visible{outline:2px solid #edb2a0;outline-offset:1px}
.building-queue .queue-remove{position:absolute;right:1px;top:0;font-size:12px;line-height:12px;color:#ffd1bd;opacity:0;pointer-events:none}.building-queue button:not(:disabled):hover .queue-remove,.building-queue button:not(:disabled):focus-visible .queue-remove{opacity:1}
@media(hover:none){.building-queue button:not(:disabled) .queue-remove{opacity:1}}

.lobby-invite{padding:14px;border:1px solid #8ee2bd44;border-radius:10px;background:#8ee2bd08;margin:18px 0}.lobby-invite label{display:block;margin-bottom:8px;font-size:12px;font-weight:600}.lobby-invite>div{display:flex;gap:8px}.lobby-invite input{min-width:0;flex:1;width:100%;padding:10px 12px;background:#101a26;border:1px solid var(--line);border-radius:6px;color:var(--text);font:600 15px ui-monospace,monospace;letter-spacing:1px}.lobby-invite button{flex-shrink:0;padding:8px 12px}.lobby-invite #invite-status{margin:8px 0 0;font-size:11px;line-height:1.5}

/* Compact diplomacy lives beside the player list, independent of the command strip. */
.diplomacy-panel{width:min(360px,calc(100vw / var(--ui-scale) - 40px))}
.trade-player{display:block;padding:10px 0}.player-relation{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.player-relation strong{display:flex;align-items:center;gap:7px}.player-color{width:9px;height:9px;border-radius:50%;flex:none}.relation-badge{font-size:10px;color:var(--muted)}.relation-badge.allied{color:#9be1c4}.alliance-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.alliance-actions:empty{display:none}.trade-player button{padding:5px 8px}.player-trade{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}.player-trade small{margin:0}.danger-action,.trade-player .traitor-status{color:#ffc09f}.alliance-confirm{border:1px solid #a7795e;border-radius:7px;padding:8px;margin-top:8px;background:#302d29}.alliance-confirm p{font-size:11px;line-height:1.5;margin:0 0 7px}.alliance-confirm button+button{margin-left:5px}.diplomacy-status{font-size:11px;line-height:1.5;margin:0 0 9px;color:#e9c591}.diplomacy-panel button:focus-visible{outline:2px solid #a6e7d1;outline-offset:2px}

.map-card .map-size{display:block;margin-top:5px;font-size:11px;font-style:normal;font-weight:650;color:#e5ca85}

/* Map capacity and eight distinct realms, without expanding the battlefield HUD. */
.map-card .map-size{display:flex;flex-wrap:wrap;gap:5px}.map-size span{border:1px solid #e5ca8540;border-radius:5px;padding:2px 6px;background:#e5ca8508}.solo-roster{color:var(--gold);font-size:13px;margin:0 0 18px}.difficulty-card span{min-width:0}.difficulty-card strong{overflow-wrap:break-word}
.opponents{overflow:visible}.enemy-card{border-left:3px solid var(--team,var(--line));flex-shrink:0}.enemy-card svg{color:var(--team,#e7a695)}

/* Centered economy HUD. Its text stays readable independently of battlefield/HUD scale. */
.resourcebar{left:50%;right:auto;top:16px;transform:translateX(-50%);transform-origin:top center;width:min(820px,calc(100vw - 540px));padding:0;display:block;border-color:#e1bd6845;border-top:2px solid #dfbd72;background:#12232bf5;box-shadow:0 5px 24px #07121055}
.resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.16fr);gap:0;width:100%}
.resource{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:92px;padding:12px 8px 22px;border-radius:9px}
.resource+.resource:before{content:'';position:absolute;left:0;top:20%;height:58%;width:1px;background:#c3d2d92b}
.resource svg{display:block;flex-shrink:0;width:26px;height:26px}.resource-value{min-width:0}.resource .amount{font-size:clamp(22px,2vw,32px);font-weight:750;line-height:1.12;white-space:nowrap;letter-spacing:-.5px}.resource small{display:block;margin-top:5px;font-size:12px;color:#d2dce1}.resource .pop-cap{font-size:.55em;color:#cad4db;font-weight:600;letter-spacing:0}
.resource[data-long] .amount{font-size:clamp(18px,1.6vw,24px)}
.resource-income{position:absolute;bottom:4px;left:0;right:0;text-align:center;color:#a6f4cb;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}.income-glint{position:absolute;right:9px;top:7px;color:#ffe8a3;font-size:15px;pointer-events:none}
.realm-panel{position:absolute;z-index:3;left:calc(var(--hud-edge)*var(--ui-scale));top:16px;display:flex;align-items:center;gap:10px;padding:8px 10px;max-width:240px;transform:scale(var(--ui-scale));transform-origin:top left;background:#15212cf5}.realm-panel>svg{color:var(--green);width:24px;height:24px;flex-shrink:0}.realm-panel strong{font-size:13px;max-width:118px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.realm-panel .age-button{border:0;border-left:1px solid var(--line);border-radius:0;min-width:64px;padding:4px 0 4px 10px}
.command-hint{top:120px}.toast{top:162px}.connection{top:202px}
.command-panel[data-kind]{padding:12px 14px;gap:16px;background:#14232ef5;border-color:#91b4b63d;border-radius:12px}.command-panel #actions{gap:12px 16px}.command-panel .command-group>.group-label{font-size:10px;line-height:14px}.command-panel .action{min-height:46px;padding:8px 10px}.command-panel .action b{font-size:max(12px,calc(10px / var(--ui-scale)))}.command-panel .unit-portrait{width:34px;height:34px}.command-panel .unit-portrait svg{width:22px;height:22px}.command-panel .unit-heading{gap:10px}.command-panel .hp{height:4px;margin-top:6px}.command-panel #selection-info{padding-right:14px}
.quick-panel{background:#14232ef5;border-color:#91b4b63d}.quick-panel button{min-height:30px}.minimap-wrap{background:#14232ef5;border-color:#91b4b63d}
@media(min-width:1101px){.command-panel[data-kind]{max-width:min(1280px,calc((100vw - 32px) / var(--ui-scale) - 440px))}}
@media(max-width:1100px){
 .resourcebar{top:10px;width:min(760px,calc(100vw - 24px))}.resource .amount{font-size:28px}.realm-panel{top:116px}.game-menu{top:116px}.opponents{top:158px}.command-hint{top:116px;max-width:calc(100vw - 400px)}.toast{top:166px}.connection{top:206px}
}
@media(max-width:680px){
 .resourcebar{top:8px;width:calc(100vw - 16px)}.resource{gap:4px;min-height:94px;padding:8px 3px 20px;flex-direction:column}.resource svg{width:18px;height:18px}.resource-value{text-align:center}.resource .amount{font-size:clamp(14px,4vw,23px);letter-spacing:-.4px}.resource small{font-size:10px;margin-top:3px}.resource .pop-cap{font-size:.66em}.resource-income{font-size:11px;bottom:3px}.income-glint{font-size:12px;right:4px;top:4px}
 .resource[data-long] .amount{font-size:clamp(12px,3.6vw,20px)}
 .realm-panel{top:112px;max-width:220px;gap:6px}.realm-panel>svg{display:none}.realm-panel strong{max-width:110px}.game-menu{top:112px}.opponents{top:156px;max-width:155px}
 .command-hint{left:8px;top:156px;max-width:calc(100vw - 150px);transform:none;font-size:11px;padding:7px;gap:5px}.toast,.connection{left:8px;transform:none;max-width:calc(100vw - 150px);font-size:11px;padding:7px}.toast{top:214px}.connection{top:264px}
}
@media(max-width:560px){.command-panel[data-kind]{padding:10px;gap:8px;max-height:44dvh;overflow:auto}.command-panel #actions{gap:10px 12px}.command-panel #selection-info{padding:0 0 8px}.command-panel .action{padding:7px 8px}.command-panel .unit-portrait{display:grid}}
@media(prefers-reduced-motion:reduce){.income-glint{display:none}}

/* Every HUD island follows the same viewport scale, including short windows. */
:root{--hud-row-top:calc(var(--hud-edge)*var(--ui-scale));--hud-notice-top:calc((var(--economy-height,78px) + var(--hud-edge) + 8px)*var(--ui-scale))}
:root[data-stacked-hud]{--hud-row-top:calc((var(--economy-height,78px) + var(--hud-edge) + 8px)*var(--ui-scale));--hud-notice-top:calc((var(--economy-height,78px) + var(--hud-edge) + 78px)*var(--ui-scale))}
.resourcebar{top:calc(var(--hud-edge)*var(--ui-scale));width:min(720px,calc((100vw - 24px) / var(--ui-scale)));transform:translateX(-50%) scale(var(--ui-scale))}
.resource{min-height:74px;padding:9px 7px 17px;gap:8px;flex-direction:row}.resource svg{width:23px;height:23px}.resource .amount{font-size:max(26px,calc(16px / var(--ui-scale)))}.resource[data-long] .amount{font-size:max(20px,calc(12px / var(--ui-scale)))}.resource small{font-size:max(11px,calc(9px / var(--ui-scale)));margin-top:3px}.resource-income{bottom:2px;font-size:max(12px,calc(9px / var(--ui-scale)))}.income-glint{font-size:13px;top:4px;right:6px}
.realm-panel,.game-menu{top:var(--hud-row-top)}.opponents{top:calc(var(--hud-row-top) + 62px*var(--ui-scale))}
.command-hint,.toast,.connection{left:50%;transform:translateX(-50%) scale(var(--ui-scale));max-width:calc((100vw - 24px) / var(--ui-scale))}.command-hint{top:var(--hud-notice-top)}.toast{top:calc(var(--hud-notice-top) + 44px*var(--ui-scale))}.connection{top:calc(var(--hud-notice-top) + 84px*var(--ui-scale))}
.command-panel[data-kind]{max-height:calc(42dvh / var(--ui-scale));overflow:auto}.command-popover{max-height:calc((100dvh - 24px) / var(--ui-scale))}
@media(max-width:560px){
 .resourcebar{width:min(720px,calc((100vw - 16px) / var(--ui-scale)))}.resource{min-height:82px;flex-direction:column;gap:3px;padding:6px 3px 18px}.resource svg{width:19px;height:19px}.resource .amount{font-size:max(23px,calc(14px / var(--ui-scale)))}.resource[data-long] .amount{font-size:max(19px,calc(12px / var(--ui-scale)))}.resource .pop-cap{font-size:.65em}.resource-value{text-align:center}
 .command-hint,.toast,.connection{left:8px;transform:scale(var(--ui-scale));transform-origin:top left;max-width:calc((100vw - 120px) / var(--ui-scale))}
}
@media(max-height:600px){
 .command-panel[data-kind]{max-height:calc(36dvh / var(--ui-scale))}.diplomacy-panel{max-height:calc(44dvh / var(--ui-scale))}
}
/* All seven opponents remain visible; short windows trade height for two columns. */
@media(max-height:450px){.opponents:has(>.enemy-card:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(450px,calc((100vw - 16px) / var(--ui-scale)))}}

.command-panel[data-kind="resource"] #resource-name{white-space:normal;overflow-wrap:normal;text-overflow:clip}
.command-panel[data-kind="resource"] #selection-info{border-right:0;padding-right:0}

/* Non-blocking match-wide announcements, also visible above result dialogs. */
.realm-notices{position:fixed;inset:auto;left:50%;top:calc(var(--hud-notice-top,110px) + var(--realm-hint-gap,0px)*var(--ui-scale));margin:0;padding:0;border:0;background:transparent;color:var(--text);width:380px;max-width:calc((100vw - 24px) / var(--ui-scale));transform:translateX(-50%) scale(var(--ui-scale));transform-origin:top center;overflow:visible;pointer-events:none}
:root[data-realm-notices] .toast{top:calc(var(--hud-notice-top) + (var(--realm-stack-height) + var(--realm-hint-gap) + 10px)*var(--ui-scale))}
:root[data-realm-notices] .connection{top:calc(var(--hud-notice-top) + (var(--realm-stack-height) + var(--realm-hint-gap) + 50px)*var(--ui-scale))}
.realm-notices:popover-open{display:grid;gap:8px}.realm-notices::backdrop{background:transparent;pointer-events:none}
.realm-notice{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #ffffff26;border-left:4px solid var(--realm-color);border-radius:10px;background:#162831f5;box-shadow:0 5px 24px #06121855;animation:realm-notice-life 5.6s both}
.realm-notice>svg{width:27px;height:27px;flex-shrink:0;color:#e4cb89}.realm-notice[data-kind="fall"]>svg{color:#e6a599}.realm-notice>div{min-width:0}.realm-notice small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}.realm-notice strong{display:block;font-size:15px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
@keyframes realm-notice-life{0%{opacity:0;transform:translateY(-6px)}7%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.realm-notice{animation:none}}

/* Guided Solo objectives stay beside the battlefield, without pausing it. */
.tutorial-panel header{cursor:grab;touch-action:none;user-select:none}.tutorial-panel[data-dragging="true"] header{cursor:grabbing}.tutorial-panel header button{cursor:pointer}
.tutorial-launch{border-color:#cfb16d!important;background:#caa65d18!important}
.tutorial-panel{position:fixed;z-index:8;left:12px;top:140px;width:312px;max-width:calc(100vw - 24px);padding:14px 16px;border:1px solid #c9ad6c77;border-radius:12px;background:#14262af5;box-shadow:0 8px 28px #07141266;display:flex;flex-direction:column;overflow:visible;color:#efe9d7;line-height:1.45}
.tutorial-panel[hidden],.tutorial-panel #tutorial-body[hidden]{display:none}.tutorial-panel header,.tutorial-panel h2{flex-shrink:0}.tutorial-panel #tutorial-body{display:flex;flex-direction:column;flex-shrink:0}.tutorial-panel #tutorial-details{flex-shrink:0}.tutorial-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d7bf85;font-size:10px;font-weight:700;letter-spacing:.1em}.tutorial-panel header button{padding:0;width:26px;height:26px;font-size:17px;flex:none}
.tutorial-panel h2{font-size:17px;line-height:1.3;margin:8px 0 10px}.tutorial-panel p{font-size:13px;margin:0 0 10px}.tutorial-panel #tutorial-tip{font-size:12px;color:#b6c5bd}.tutorial-panel #tutorial-progress{display:block;font-size:12px;color:#dfc98d;margin:12px 0}.tutorial-panel[data-ready="true"] #tutorial-progress{color:#95ddb6}
.tutorial-panel footer{display:flex;gap:8px;justify-content:space-between}.tutorial-panel footer button{font-size:12px;min-height:34px;padding:6px 10px}.tutorial-panel button:disabled{opacity:.45;cursor:default}
.tutorial-panel #tutorial-next{border-width:2px}
.tutorial-panel #tutorial-objectives{list-style:none;flex-shrink:0;padding:0;margin:0 0 10px;display:grid;gap:6px;font-size:12px;line-height:1.35}
.tutorial-panel #tutorial-objectives li{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border:1px solid #c9ad6c44;border-radius:6px;background:#d7bf8509}.tutorial-panel #tutorial-objectives li>span:first-child{width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#d7bf8522;flex:none;color:#f1d793;font-weight:700}.tutorial-panel #tutorial-objectives li[data-done="true"]{color:#95ddb6;border-color:#95ddb655;background:#95ddb60c}.tutorial-panel #tutorial-objectives li[data-done="true"]>span:first-child{color:inherit}
.tutorial-panel footer{flex-shrink:0;padding:8px 0 2px}.tutorial-panel #tutorial-progress{flex-shrink:0;margin:8px 0 2px}
.tutorial-panel #tutorial-next:not(:disabled){border-color:#ffe39a;color:#fff4ce;background:#72531f;animation:tutorial-next-gold 1.2s ease-in-out infinite}
@keyframes tutorial-next-gold{0%,100%{border-color:#d9a641;background:#72531f;box-shadow:0 0 0 1px #e3b44d88,0 0 6px #efbd4877,inset 0 0 5px #f7cd6155}50%{border-color:#fff2b8;background:#aa7b28;box-shadow:0 0 0 3px #ffe18dcc,0 0 20px #ffc94de6,inset 0 0 12px #ffe8a788}}
@media(prefers-reduced-motion:reduce){.tutorial-panel #tutorial-next:not(:disabled){animation:none;border-color:#fff2b8;background:#8d6523;box-shadow:0 0 0 2px #ffe18daa,0 0 10px #ffc94d99}}
@media(max-width:680px){.tutorial-panel{left:8px;width:284px;max-width:calc(100vw - 16px);padding:10px 12px}.tutorial-panel h2{font-size:15px}.tutorial-panel p{font-size:12px}.tutorial-panel #tutorial-tip{font-size:11px}}

@media(max-height:440px) and (min-width:480px){
  .tutorial-panel{width:640px;padding:8px 12px;line-height:1.3}
  .tutorial-panel h2{margin:4px 0 8px;font-size:15px}
  .tutorial-panel #tutorial-body{display:grid;grid-template-columns:1fr 1.3fr;column-gap:14px}
  .tutorial-panel #tutorial-objectives{align-self:start;gap:4px;margin-bottom:0}
  .tutorial-panel #tutorial-objectives li{padding:5px 6px}
  .tutorial-panel #tutorial-progress,.tutorial-panel footer{grid-column:1/-1}
  .tutorial-panel p{font-size:12px;margin-bottom:6px}
  .tutorial-panel #tutorial-tip{font-size:11px}
  .tutorial-panel footer{padding-top:4px}
}

.command-panel .training-group+.training-group{border-left:1px solid #c9ad6c44;padding-left:12px}.command-panel .training-group[data-training-age]>.group-label{color:#dfc98d}
@media(max-width:560px){.command-panel .training-group+.training-group{border-left:0;border-top:1px solid #c9ad6c44;padding-left:0;padding-top:8px}}

.trade-channel-form [data-trade-status]:empty,.trade-channel-form [data-trade-funds]:empty{display:none}

.hint-surface{box-sizing:border-box;width:max-content;max-width:min(290px,calc(100vw - 16px));padding:10px 12px;grid-template-columns:18px minmax(0,1fr);gap:9px;border:1px solid #c9ad6c99;border-radius:9px;background:#14262afc;color:#efe9d7;box-shadow:0 6px 20px #07141266,inset 0 1px #fff1;pointer-events:none;font:12px/1.45 var(--sans);text-align:left;overflow-wrap:anywhere;white-space:normal}
#ui-tooltip{position:fixed;inset:auto;margin:0;display:none;transform:none}
#toast{z-index:12;transform:translateX(-50%);max-width:min(340px,calc(100vw - 16px));left:50%}
#toast:not([hidden]){display:grid;animation:ui-tooltip-in .1s ease-out}
#ui-tooltip:popover-open{display:grid;animation:ui-tooltip-in .1s ease-out}
.hint-surface .tooltip-symbol{display:grid;place-items:center;width:18px;height:18px;border:1px solid #d7bf8566;border-radius:50%;background:#d7bf8518;color:#e8cd8d;font:bold 12px/1 var(--sans)}
@keyframes ui-tooltip-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#ui-tooltip:popover-open,#toast:not([hidden]){animation:none}}
/* Resource markers follow the surrounding font and stay compact in the command strip. */
.resource-label{display:inline;white-space:nowrap;vertical-align:baseline}.resource-label>span{display:inline;vertical-align:baseline}
.resource-label[data-resource-icon="wood"]{--resource-ink:#92d5ad}.resource-label[data-resource-icon="stone"]{--resource-ink:#bacbd8}.resource-label[data-resource-icon="food"]{--resource-ink:#e5d59c}.resource-label[data-resource-icon="gold"]{--resource-ink:#e8c875}
.resource-label svg,.command-panel .action .resource-label svg,#build-palette .action .resource-label svg{display:inline-block;width:1.1em;height:1.1em;min-width:1.1em;flex:0 0 1.1em;margin:0 .2em 0 0;color:var(--resource-ink);vertical-align:-.16em;grid-column:auto;grid-row:auto}

body:has(#command-hint.resource-short:not([hidden])) .toast{top:calc(var(--hud-notice-top) + (var(--build-notice-height) + 8px)*var(--ui-scale))}

.tutorial-panel #tutorial-skip{color:#b6c5bd;background:transparent;border-color:#b6c5bd44}.tutorial-panel footer{flex-wrap:wrap}
/* One compact roster: scouting, diplomacy and trade share the same player rows. */
#diplomacy-panel{width:min(310px,calc((100vw - 16px)/var(--ui-scale)));padding:10px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
#diplomacy-panel>header{margin-bottom:8px;font-size:13px}
#diplomacy-panel #trade-settings-list{margin-bottom:8px}
#trade-players{display:grid;gap:5px;align-items:start}
#trade-players .trade-player{min-width:0;padding:0;border:1px solid var(--line);border-left:3px solid var(--team);border-radius:6px;background:#ffffff03}
.player-summary{display:flex;align-items:center;gap:3px;padding:3px}
#trade-players .player-expand{position:relative;flex:1;min-width:0;display:grid;gap:3px;padding:5px 18px 5px 5px;background:transparent;border:0;text-align:left;white-space:normal;box-shadow:none}
.player-expand strong{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.player-summary-status{display:flex;align-items:center;flex-wrap:wrap;gap:2px 7px;line-height:1.4}
.player-summary-status>span{font-size:10px;color:var(--muted)}
.player-summary-status .allied{color:#9be1c4}.player-summary-status .traitor-status,.embargo-badge{color:#ffc09f}
.player-chevron{position:absolute;right:4px;top:8px;color:var(--muted)}
#trade-players .player-focus{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:4px;background:#ffffff05}
.player-focus svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.player-details{padding:0 8px 8px;border-top:1px solid var(--line);margin:0 5px}
.player-details[hidden]{display:none}
#trade-players .trade-player.expanded{background:#8ee2bd09;border-color:#8ee2bd55;border-left-color:var(--team)}
#diplomacy-panel .diplomacy-status{margin-bottom:7px}
@media(max-height:450px){
 #diplomacy-panel:has(.trade-player:nth-child(5)){width:min(580px,calc((100vw - 16px)/var(--ui-scale)))}
 #trade-players:has(.trade-player:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
 #trade-players .trade-player.expanded{grid-column:1/-1}
 #trade-players .player-expand{padding-top:3px;padding-bottom:3px}
}
#diplomacy-panel{width:min(max(310px,230px/var(--ui-scale)),calc((100vw - 16px)/var(--ui-scale)))}
#diplomacy-panel>header{font-size:max(13px,11px/var(--ui-scale))}
#diplomacy-panel #trade-settings-list button,#diplomacy-panel .trade-player button,#diplomacy-panel .trade-player small{font-size:max(11px,10px/var(--ui-scale))}
#trade-players .player-expand strong{font-size:max(12px,11px/var(--ui-scale))}
.player-summary-status>span{font-size:max(10px,9px/var(--ui-scale))}
#trade-players .player-focus{width:max(28px,24px/var(--ui-scale));height:max(28px,24px/var(--ui-scale))}
/* Phone-only HUD. Desktop windows and tablets retain their existing UI. */
#phone-controls,#phone-placement{display:none}
.phone-ui{--ui-scale:1!important;--hud-edge:8px;--hud-notice-top:116px}
.phone-ui body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.phone-ui input,.phone-ui textarea{-webkit-user-select:text;user-select:text;font-size:16px!important}
.phone-ui button,.phone-ui summary{touch-action:manipulation}
.phone-ui #world,.phone-ui #minimap{touch-action:none}
.phone-ui .game-screen{height:100dvh}
.phone-ui .game-menu,.phone-ui .realm-panel,.phone-ui .resourcebar,.phone-ui .quick-panel,.phone-ui .command-panel,.phone-ui .minimap-wrap,.phone-ui .map-tools,.phone-ui .trade-players-button,.phone-ui .diplomacy-panel{transform:none;transform-origin:initial}
.phone-ui .resourcebar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));width:auto;height:52px;padding:5px 8px;box-sizing:border-box;gap:4px;max-width:none}
.phone-ui .resources{width:100%;display:flex;gap:3px;justify-content:space-between}
.phone-ui .resource{min-width:0;flex:1;gap:4px;padding:0 4px;border:0}
.phone-ui .resource svg{display:block;width:16px;height:16px;flex-shrink:0}
.phone-ui .resource .amount{font-size:18px}.phone-ui .resource small{font-size:10px}.phone-ui .pop-cap{font-size:11px}
.phone-ui .game-menu{top:calc(max(4px,env(safe-area-inset-top)) + 58px);right:max(8px,env(safe-area-inset-right));padding:2px;gap:2px}
.phone-ui .game-menu .square{width:44px;height:44px}.phone-ui #clock{display:none}
.phone-ui .realm-panel{top:calc(max(4px,env(safe-area-inset-top)) + 58px);left:max(8px,env(safe-area-inset-left));height:44px;max-width:calc(100vw - 170px);padding:2px 6px;gap:4px}
.phone-ui .realm-panel>svg,.phone-ui .realm-panel strong{display:none}.phone-ui .age-button{min-height:40px;font-size:12px}
.phone-ui #phone-controls:not([hidden]){position:absolute;display:flex;gap:4px;left:max(8px,env(safe-area-inset-left));bottom:max(6px,env(safe-area-inset-bottom));z-index:16;max-width:calc(100vw - 16px);padding:4px;background:#152730f5;border:1px solid var(--line);border-radius:10px;box-sizing:border-box}
.phone-ui #phone-controls button{min-height:44px;min-width:44px;padding:4px 7px;font-size:12px;white-space:nowrap}
.phone-ui #phone-controls button[aria-pressed=true],.phone-ui #phone-controls button[aria-expanded=true]{border-color:var(--green);background:#31584f;color:#c6ffdf}
.phone-ui .command-panel[data-kind]{display:none;left:auto;right:max(8px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));width:min(330px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 186px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:9px;box-sizing:border-box}
.phone-ui.phone-commands-open .command-panel:not([hidden]){display:block}
.phone-ui .unit-heading h3{font-size:15px}.phone-ui .unit-heading p{font-size:12px}
.phone-ui .command-panel .command-group{min-width:0}.phone-ui .command-panel #actions{display:flex;flex-direction:column;gap:8px}
.phone-ui .command-panel .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone-ui .action{min-height:44px;padding:8px}.phone-ui .action b{font-size:12px}.phone-ui .action svg{display:inline-block}.phone-ui kbd{display:none!important}
.phone-ui .command-popover{transform:none;max-width:calc(100vw - 16px);box-sizing:border-box}
.phone-ui #build-palette{width:min(440px,calc(100vw - 16px));padding:10px}
.phone-ui #build-palette .action{min-height:58px;grid-template-columns:18px minmax(0,1fr)}
.phone-ui #build-palette .action b{font-size:13px}.phone-ui #build-palette .action small{font-size:12px}
.phone-ui .command-popover>header button,.phone-ui #diplomacy-panel>header button{min-width:44px;min-height:44px}
.phone-ui #build-palette .build-age-group>.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone-ui .minimap-wrap,.phone-ui .quick-panel,.phone-ui .map-tools{display:none}
.phone-ui.phone-map-open .minimap-wrap{display:block;right:max(8px,env(safe-area-inset-right));bottom:calc(116px + env(safe-area-inset-bottom));width:190px;height:auto;max-height:130px}
.phone-ui.phone-map-open .quick-panel{display:grid;right:max(8px,env(safe-area-inset-right));bottom:calc(252px + env(safe-area-inset-bottom));width:240px;padding:5px;max-height:100px;box-sizing:border-box}
.phone-ui .quick-panel button{min-height:44px;font-size:12px;padding:4px}
.phone-ui.phone-map-open .map-tools{display:flex;right:max(8px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));gap:4px}
.phone-ui .map-tools button{width:44px;height:44px}
.phone-ui #diplomacy-panel{width:min(330px,calc(100vw - 16px));right:max(8px,env(safe-area-inset-right));box-sizing:border-box}
.phone-ui #trade-players .player-expand{min-height:44px}.phone-ui #trade-players .player-focus{width:44px;height:44px}
.phone-ui #diplomacy-panel button{min-height:44px;font-size:12px}.phone-ui #diplomacy-panel .player-expand strong{font-size:13px}
.phone-ui #trade-players-button{right:max(8px,env(safe-area-inset-right));min-height:44px;max-width:150px;font-size:12px}
.phone-ui #market-settings{width:min(760px,calc(100vw - 16px));max-width:calc(100vw - 16px);transform:none}
.phone-ui .trade-mode-buttons button{min-height:44px;min-width:0;font-size:11px}.phone-ui .trade-mode-row{grid-template-columns:60px minmax(0,1fr)}
.phone-ui .trade-channel-form input{min-height:44px}.phone-ui .trade-channel-form input[type=checkbox]{width:24px;height:24px;min-height:24px}
.phone-ui .trade-window-handle button{min-height:44px;min-width:44px}
.phone-ui #phone-placement:not([hidden]){position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:6px;left:50%;transform:translateX(-50%);bottom:calc(66px + env(safe-area-inset-bottom));z-index:17;width:max-content;max-width:calc(100vw - 20px);padding:8px;border:1px solid var(--green);border-radius:10px;background:#152730f5;box-sizing:border-box}
.phone-ui #phone-placement span{font-size:12px;flex:1 0 100%;text-align:center}.phone-ui #phone-placement button{min-height:44px;flex:1;padding:8px 16px}
.phone-ui .command-hint,.phone-ui .toast,.phone-ui .connection{transform:none;left:8px;max-width:calc(100vw - 174px);top:116px;font-size:12px;box-sizing:border-box}
.phone-ui .toast{top:174px}.phone-ui .connection{top:224px}
.phone-ui .command-hint button{min-width:36px;min-height:36px}
.phone-ui .tutorial-panel{max-width:calc(100vw - 16px);transform:none;width:300px;max-height:calc(100dvh - 130px);overflow:auto}
.phone-ui .tutorial-panel button{min-height:44px}.phone-ui .tutorial-panel h2{font-size:16px}.phone-ui .tutorial-panel p{font-size:12px}
.phone-ui dialog .modal-content{padding:18px}.phone-ui dialog button{min-height:44px}.phone-ui dialog .modal-content h2{font-size:24px}
.phone-ui #building-queues .queue-cancel{min-height:44px}
@media(orientation:portrait){
 .phone-ui .command-panel[data-kind]{max-height:36dvh;width:calc(100vw - 16px);left:8px;right:8px}
 .phone-ui .resource{display:block;text-align:center;padding:0 1px}.phone-ui .resource svg{display:none}.phone-ui .resource .amount{font-size:17px}
 .phone-ui #phone-controls{width:calc(100vw - 16px)}.phone-ui #phone-controls button{flex:1;padding:3px;font-size:11px}
 .phone-ui .trade-channel-columns{grid-template-columns:1fr}
}
@media(orientation:landscape) and (max-height:500px){
 .phone-ui.phone-map-open .quick-panel{right:210px;bottom:66px;width:240px}
 .phone-ui.phone-map-open .minimap-wrap{bottom:116px;width:170px;max-height:100px}
 .phone-ui #trade-players{grid-template-columns:1fr}
 .phone-ui #diplomacy-panel:has(.trade-player:nth-child(5)){width:min(330px,calc(100vw - 16px))}
 .phone-ui .tutorial-panel{width:280px}
}
.phone-ui .resource{min-height:0;height:40px;flex-direction:row;align-items:center;box-sizing:border-box}
.phone-ui .resource[data-long] .amount{font-size:15px}.phone-ui .resource small{margin-top:1px}
.phone-ui .resource-income{bottom:-3px;font-size:10px}.phone-ui .income-glint{top:0}
.phone-ui #trade-players-button{top:calc(max(4px,env(safe-area-inset-top)) + 58px)!important;right:calc(max(8px,env(safe-area-inset-right)) + 146px);max-width:145px}
@media(orientation:portrait){.phone-ui #trade-players-button{left:80px;right:auto;max-width:calc(100vw - 232px);padding:4px;font-size:11px}.phone-ui .resource{display:flex;flex-direction:column;gap:0;justify-content:center}}

.trade-minimum{display:grid;grid-template-columns:minmax(0,1fr) 82px;align-items:center;gap:8px;margin:10px 0 4px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.trade-minimum-label{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;min-width:0}.trade-resource-icons{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}.trade-resource-icons svg{width:14px;height:14px;margin:0;flex-shrink:0}
.trade-minimum input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:5px;padding:6px;background:#14242b;color:var(--text);font:inherit;font-variant-numeric:tabular-nums}.trade-minimum input[aria-invalid=true]{border-color:#e49e81}
.trade-explanation{color:var(--muted);font-size:11px;line-height:1.45;margin:7px 0 10px}
.trade-local-gold input{flex-shrink:0}.trade-local-gold span{min-width:0;line-height:1.4}
.trade-local-gold{display:flex;align-items:center;gap:7px;margin:10px 0;font-size:12px}.trade-local-gold input{accent-color:var(--green);margin:0}
.phone-ui select{min-height:44px;font-size:16px}
.phone-ui .settings-toggle input[type=checkbox]{width:24px;height:24px}
.phone-ui .game-screen{padding-bottom:env(safe-area-inset-bottom)}
.phone-ui #phone-controls button[aria-pressed=false],.phone-ui #phone-controls button[aria-expanded=false]{background:#1a2d34;border-color:var(--line);color:var(--text)}
/* Pause and Settings share the home menu's illustrated cards and quiet accents. */
dialog.match-menu:has(.session-page){zoom:1;width:min(820px,calc(100vw - 32px));max-width:820px;max-height:calc(100dvh - 32px);background:radial-gradient(ellipse at 10% 0%,#263e36 0,transparent 65%),#111d24;overflow:auto}
dialog:has(.session-page) .modal-content{zoom:1;padding:28px}
dialog.front-menu:has(.session-page) .modal-content{max-width:820px;padding:0}
dialog.front-menu:has(.session-page) #dialog-content{padding:24px 16px}
dialog:has(.session-page) .legal-footer{margin-top:20px;padding-top:14px;border-color:#c7dac315;gap:5px 18px;font-size:11px}
.session-page{--setup-accent:#9cdbb2;--setup-line:#c7dac323}
.network-pause{--setup-accent:#a4cce3}
.session-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.session-page .session-heading h2{font-size:30px;letter-spacing:-.8px;margin:0;line-height:1.2}
.session-heading .setup-emblem{width:42px;height:42px;border-radius:12px}
.session-heading .setup-emblem svg{width:23px;height:23px}
.session-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.session-overview{min-width:0;display:flex;flex-direction:column;border:1px solid var(--setup-line);border-radius:15px;background:linear-gradient(145deg,#63896720,#192b2a70);padding:18px;overflow:hidden}
.session-player{display:flex;align-items:center;gap:9px;font-size:14px;min-width:0}.session-player svg{width:17px;height:17px;color:var(--setup-accent);flex-shrink:0}.session-player strong{font-weight:550;overflow-wrap:anywhere}
.session-overview .home-scene{width:100%;max-height:138px;margin:2px 0 4px;flex:1}
.session-match{margin-top:auto}.session-match>strong{font-size:15px;font-weight:600;display:block;margin-bottom:8px}.session-match>div{display:flex;justify-content:space-between;gap:10px;color:#b8c7c6;font-size:11px;line-height:1.5}.session-match time{font-variant-numeric:tabular-nums;white-space:nowrap}
.session-actions{display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:0}
.session-action{display:flex;align-items:center;gap:12px;padding:15px 16px;min-height:58px;min-width:0;text-align:left;background:linear-gradient(145deg,#537e8f18,#19252d70);border-color:var(--setup-line);border-radius:12px;transition:background .15s,border-color .15s}
.session-action:hover{background:#ffffff09;border-color:var(--setup-accent)}.session-action:focus-visible{outline:2px solid var(--setup-accent);outline-offset:2px}
.session-action-icon{display:grid;place-items:center;color:var(--setup-accent);flex-shrink:0}.session-action-icon svg{width:21px;height:21px}
.session-action strong{font-size:14px;font-weight:600;line-height:1.3}.session-arrow{margin-left:auto;color:var(--setup-accent);font-size:18px}
.session-primary{background:linear-gradient(120deg,#9cdbb2,#80bfa8);border-color:#a7e1bd;color:#142d25;min-height:68px}.session-primary:hover{background:#b1e9c6;border-color:#b1e9c6}.session-primary strong{font-size:19px}.session-primary .session-action-icon,.session-primary .session-arrow{color:inherit}
.session-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.session-secondary .session-action{padding:13px 12px;gap:8px}.session-secondary .session-action strong{font-size:12px}.session-secondary .session-arrow{display:none}.session-secondary svg{width:18px;height:18px}
.session-danger{background:transparent}.session-danger .session-action-icon,.session-danger .session-arrow{color:#d4aa96}.session-danger strong{color:#d4b9ad}
.session-sandbox{display:flex;gap:6px;flex-wrap:wrap}.session-sandbox button{flex:1;padding:8px 6px;font-size:11px}
.settings-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.session-page .settings-section{margin:0;padding:18px;border-color:var(--setup-line);border-radius:15px;background:linear-gradient(145deg,#63896715,#192b2a70)}
.session-page .settings-section legend{font-size:14px;color:#cad8d2;font-weight:600;padding:0 8px}.settings-section legend svg{width:18px;height:18px;vertical-align:-4px;color:var(--setup-accent);margin-right:5px}
.session-page .settings-audio{gap:9px 12px;grid-template-columns:minmax(0,1fr) 64px}.session-page .settings-audio+.settings-audio{margin-top:24px;padding-top:20px;border-top:1px solid var(--setup-line)}
.session-page .settings-audio input{accent-color:var(--setup-accent);min-height:30px;cursor:pointer}.session-page .settings-audio button{min-height:34px;border-color:var(--setup-line)}
.session-page .settings-toggle{gap:12px;min-height:56px;font-size:13px;line-height:1.4}.session-page .settings-toggle:first-of-type{padding-top:0}.session-page .settings-toggle input[type=checkbox]{appearance:none;width:34px;height:20px;border:1px solid #8a9a9955;border-radius:20px;background:#ffffff0a;position:relative;cursor:pointer;transition:background .15s}
.session-page .settings-toggle input[type=checkbox]:before{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#a6b5b3;transition:transform .15s}
.session-page .settings-toggle input[type=checkbox]:checked{background:#9cdbb230;border-color:#9cdbb2}.session-page .settings-toggle input[type=checkbox]:checked:before{background:#9cdbb2;transform:translateX(14px)}
.session-page .settings-toggle select{font:inherit;max-width:110px;padding:7px;border:1px solid var(--setup-line);border-radius:7px;background:#14262a;color:var(--text)}
@media(max-width:600px){dialog.match-menu:has(.session-page){width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog:has(.session-page) .modal-content{padding:20px}.session-heading{margin-bottom:18px}.session-page .session-heading h2{font-size:26px}.session-layout{gap:14px}.session-overview{padding:14px}.session-secondary{grid-template-columns:1fr}.session-action{min-height:52px;padding:12px}.session-primary{min-height:60px}.settings-columns{gap:14px}.session-page .settings-section{padding:14px}.session-page .settings-toggle{font-size:12px}}
@media(max-width:480px){.session-layout,.settings-columns{grid-template-columns:1fr}.session-overview{position:relative;min-height:110px;padding-right:42%}.session-overview .home-scene{position:absolute;width:43%;right:4px;top:10px;max-height:100px}.session-match{margin-top:12px}.session-match>strong{font-size:13px}.session-match>div{flex-wrap:wrap;gap:4px 12px}.session-player{font-size:13px}.session-secondary{grid-template-columns:1fr 1fr}.session-heading .setup-title{gap:10px}.session-page .settings-audio+.settings-audio{margin-top:12px;padding-top:12px}.session-page .settings-toggle{min-height:44px}.session-page .settings-section{padding:12px 14px}.session-page .setup-back{padding:9px 12px}.session-page .session-heading h2{font-size:24px}dialog:has(.session-page) .legal-footer{margin-top:14px;padding-top:10px}}
@media(max-height:500px) and (min-width:481px){dialog:has(.session-page) .modal-content{padding:16px 20px}.session-heading{margin-bottom:12px}.session-heading .setup-emblem{width:32px;height:32px}.session-page .session-heading h2{font-size:24px}.session-action,.session-primary{min-height:44px;padding:10px 13px}.session-primary strong{font-size:16px}.session-actions{gap:7px}.session-secondary{grid-template-columns:1fr 1fr}.session-overview .home-scene{max-height:75px}.session-page .settings-section{padding:10px 14px}.session-page .settings-toggle{min-height:42px}.session-page .settings-audio+.settings-audio{margin-top:10px;padding-top:10px}dialog:has(.session-page) .legal-footer{margin-top:12px;padding-top:8px}}
@media(prefers-reduced-motion:reduce){.session-page *{transition:none!important}}
@media(max-width:360px){dialog:has(.session-page) .modal-content{padding:16px}.session-heading{margin-bottom:12px}dialog:has(.session-page) .legal-footer{margin-top:10px;padding-top:8px}}
/* Compact pause: match information is a strip, not a second hero illustration. */
dialog.match-menu:has(.pause-page){width:min(520px,calc(100vw - 24px));max-width:520px;max-height:calc(100dvh - 24px)}
dialog:has(.pause-page) .modal-content{padding:20px}
.pause-page .session-heading{margin-bottom:14px}.pause-page .session-heading h2{font-size:26px}.pause-page .setup-emblem{width:34px;height:34px}.pause-page .setup-emblem svg{width:20px;height:20px}
.pause-page .session-layout{grid-template-columns:1fr;gap:12px}
.pause-page .session-overview{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:6px 12px;min-height:0;padding:12px 14px;border-radius:11px}
.pause-page .session-player{grid-column:1;font-size:12px;gap:7px}.pause-page .session-player svg{width:14px;height:14px}
.pause-page .session-overview .home-scene{position:static;grid-column:2;grid-row:1/3;width:100px;height:56px;max-height:56px;margin:0;align-self:center}
.pause-page .session-match{grid-column:1;margin:0}.pause-page .session-match>strong{font-size:12px;margin-bottom:3px}.pause-page .session-match>div{font-size:11px;flex-wrap:wrap;gap:3px 12px}
.pause-page .session-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pause-page .session-secondary,.pause-page .session-sandbox,.pause-page .session-danger{grid-column:1/-1}.pause-page .session-secondary{grid-template-columns:1fr 1fr;gap:8px}
.pause-page .session-action{min-height:46px;padding:10px 12px;gap:9px;border-radius:9px}.pause-page .session-primary{min-height:46px}.pause-page .session-primary strong{font-size:15px}.pause-page .session-action strong{font-size:13px}.pause-page .session-action-icon svg{width:18px;height:18px}.pause-page .session-arrow{font-size:16px}
dialog:has(.pause-page) .legal-footer{margin-top:14px;padding-top:10px;gap:3px 12px;font-size:10px}
@media(max-width:360px){dialog:has(.pause-page) .modal-content{padding:16px}.pause-page .session-overview{grid-template-columns:minmax(0,1fr) 70px;padding:10px;gap:6px 8px}.pause-page .session-overview .home-scene{width:70px;height:42px}.pause-page .session-action{padding:10px;gap:7px}.pause-page .session-arrow{display:none}}
@media(max-height:400px){dialog:has(.pause-page) .modal-content{padding:14px 18px}.pause-page .session-heading{margin-bottom:10px}.pause-page .session-layout{gap:10px}.pause-page .session-overview{padding:9px 12px}dialog:has(.pause-page) .legal-footer{margin-top:10px;padding-top:8px}}