/* Ciudad Viva / Horizon interface — all panels float over the playable world. */
:root{color-scheme:dark;--ink:#e6eef1;--green:#e1b86f;--green2:#83dbbc;--sage:#293f48;--paper:#101d2b;--line:#aecbd126;--muted:#a1b7bf;--gold:#e1b86f;--red:#f3967c;--hud:linear-gradient(145deg,#1d3442f7,#10212df5);--shadow:0 12px 35px #04111a5c,inset 0 1px #cee6d510;--radius:6px;font-family:Bahnschrift,'Segoe UI',sans-serif;background:#0e1c28}
body{background:#0e1c28}button,input,select,textarea{font-family:inherit}button{transition:background .15s,border-color .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.09)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #b6edcf;outline-offset:3px}::selection{background:#d0aa6866;color:#fff}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#0b1e2a55}::-webkit-scrollbar-thumb{background:#4b6876;border-radius:4px}
.button{background:linear-gradient(#eccb8c,#d6ab60);border:1px solid #f2d292;border-radius:4px;color:#172b34;font-size:12px;letter-spacing:.25px;box-shadow:0 2px 0 #6a5539;font-weight:650}.button:hover:not(:disabled){background:#f2cf85;transform:translateY(-1px)}.button.secondary{background:#223b48;border-color:#6c93924d;color:#cfdfde;box-shadow:none}.button.secondary:hover:not(:disabled){background:#315361}.icon-button{color:#bbd0d5;border-radius:4px}.icon-button:hover,.icon-button.active{background:#345a60;color:#baf5d5}.pill{color:#abdcc5;border-color:#b4d8bf40;border-radius:4px;background:#172f3a99}.brand{color:#e6e9dd}.brand-mark{border:1px solid #93c6ad66;background:linear-gradient(135deg,#589881,#285761);color:#e2f6d2;clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);border-radius:0}.brand span{color:#8dcab4;font-weight:300}.brand.small>div:last-child{font-size:17px;letter-spacing:1.6px}.eyebrow{font-size:9px;letter-spacing:1.65px;color:#b8cabb}.text-button{color:#a7dfc8}.dot,.live-dot{background:#8ae4b9;box-shadow:0 0 7px #89e6b044}.offline{background:#f09575}em{font-family:inherit;font-style:normal;font-weight:600;color:#a9e6c0}h1,h2,h3{font-family:Bahnschrift,'Segoe UI',sans-serif;font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{color:#e4ecec;background:#102530;border:1px solid #55748080;border-radius:4px}input::placeholder,textarea::placeholder{color:#829ba7}select option{background:#17303c;color:#edf3ec}input[type=range],input[type=checkbox]{accent-color:#d9b26d}label{color:#cddbdc}kbd{background:#304853;border-color:#506a75;color:#d9e5d7;border-radius:3px}
.game{position:fixed;inset:0;width:100%;height:100dvh;display:block;overflow:hidden;background:#193b45;isolation:isolate;user-select:none}
.game-workspace{position:absolute;inset:0;display:block;min-height:0;overflow:visible}.map-section{position:absolute;inset:0;min-width:0;width:100%;height:100%;overflow:hidden}.map-section>#city-map{display:block;width:100%;height:100%;outline:none;touch-action:none}.game-header{display:contents}
.brand-button{position:absolute;z-index:5;left:16px;top:14px;width:222px;height:72px;padding:11px 14px;display:flex;align-items:flex-start;background:var(--hud);border:1px solid #b3d1c536;box-shadow:var(--shadow);border-radius:6px;color:var(--ink)}.brand-button .brand.small .brand-mark{width:34px;height:42px;margin-top:2px}.brand-button .brand.small>div:last-child{font-size:14px;letter-spacing:2px}.brand-button .brand small{display:none}.city-title{position:absolute;z-index:6;top:48px;left:74px;border:0!important;padding:0!important;max-width:154px;display:block;pointer-events:none}.city-title>.eyebrow{display:none}.city-name{font-size:11px;font-weight:500;max-width:154px;background:transparent;border:0;color:#bacdce;padding:0;pointer-events:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.city-name svg{width:11px;opacity:.6;margin-left:4px}
.city-stats{position:absolute;z-index:5;left:248px;top:14px;right:16px;height:72px;min-height:72px;display:grid;grid-template-columns:1.18fr .85fr .8fr 1fr 1fr 1.1fr;gap:0;padding:0;background:var(--hud);border:1px solid #b3d1c536;box-shadow:var(--shadow);border-radius:6px}.stat,.stat:first-child{padding:12px 15px 8px;border-right:1px solid #a8d2d01c;min-width:0;overflow:hidden}.stat:last-child{border-right:0}.stat>span{font-size:8px;letter-spacing:1px;color:#a9bdc3;gap:6px;white-space:nowrap}.stat>span svg{width:13px;height:13px;color:#a6d2c2}.stat>strong{font-size:21px;font-weight:600;letter-spacing:.25px;color:#e9e7cc;margin:5px 0 3px;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}.stat>small{font-size:8px;color:#93aeb5;white-space:nowrap}.stat-unit{font-size:10px;color:#96b1ba}.utility-stat>strong{font-size:14px;margin:8px 0 6px}.date-stat>strong{font-size:13px;letter-spacing:1px;margin:5px 0}.meter{height:3px;background:#36515b;margin:0;border-radius:1px}.meter i{background:#dcbd77;border-radius:1px}.meter.blue i{background:#74c6d6}.time-controls{gap:3px}.time-controls button{min-width:24px;height:20px;padding:2px 5px;font-size:9px;border:1px solid #aecbd120;background:#182f3d;color:#b9cdd3;border-radius:3px}.time-controls button.active{background:#d8b76e;border-color:#edcd90;color:#15303c}
.main-nav{position:absolute;z-index:6;right:16px;top:104px;display:flex;flex-direction:column;gap:6px;padding:0;margin:0;max-height:calc(100dvh - 325px);overflow:visible}.main-nav>button,.main-nav>.icon-button{position:relative;width:43px;height:39px;min-height:39px;padding:10px;display:flex;align-items:center;justify-content:center;background:var(--hud);border:1px solid #a6c9cc36;border-radius:5px;box-shadow:0 4px 12px #071b293b;color:#c1d7d8}.main-nav>button>svg{width:18px;height:18px}.main-nav>button>span{position:absolute;right:51px;background:#162e3bec;border:1px solid #a5d2bd55;border-radius:3px;padding:8px 11px;display:none;white-space:nowrap;color:#dce9de;font-size:11px;pointer-events:none}.main-nav>button:hover>span,.main-nav>button:focus-visible>span{display:block}.main-nav b{position:absolute;right:-4px;top:-4px;font-size:8px;background:#69b697;color:#112e32;border-radius:3px;padding:2px 4px;min-width:14px}.main-nav .budget-button{font-size:0;margin:0;border:1px solid #d5b97566;background:linear-gradient(145deg,#655534,#3c3c2b);color:#edcf87;box-shadow:0 4px 12px #071b293b}.main-nav .budget-button>svg:last-child{display:none}
.map-top{position:absolute;top:104px;left:16px;right:78px;gap:20px;z-index:2;align-items:flex-start}.map-label{background:#183744d9;border:1px solid #a9c7be33;border-radius:4px;padding:10px 12px;box-shadow:0 6px 16px #08243725;font-size:11px;max-width:222px;min-width:192px;gap:7px;backdrop-filter:blur(8px)}.map-label small{display:block!important;color:#b4c8c6;font-size:7px;letter-spacing:.8px;margin-left:13px;line-height:1.5}.map-buttons{display:flex;gap:4px}.map-buttons button{width:32px;height:32px;background:#1a3545ee;border:1px solid #abcac539;box-shadow:0 4px 15px #06172333;color:#cee2d9;border-radius:4px}.map-buttons button.active{background:#4b6c62;color:#e6f6cd;border-color:#b5d69677}.map-buttons #mobile-build{display:none}
.hud-left{position:absolute;top:174px;left:16px;z-index:3;width:222px;display:grid;gap:8px;pointer-events:none}.hud-mission{padding:12px 14px;text-align:left;border:1px solid #c9ac6d66;border-left:3px solid #d2b56e;border-radius:4px;background:linear-gradient(120deg,#263d44ed,#17303cdd);color:#d5e0d9;pointer-events:auto;box-shadow:0 8px 20px #05243126}.hud-mission .eyebrow{display:block;font-size:8px;color:#dcbe7d;letter-spacing:1px}.hud-mission strong{font-size:13px;display:block;line-height:1.35;margin:7px 0}.hud-mission p{font-size:10px;line-height:1.6;color:#b5c9cb}.hud-mission small{display:block;color:#d5bc7b;font-size:9px;margin-top:8px}.hud-demands{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#193542de;border:1px solid #bdd8ca30;box-shadow:0 4px 16px #041d2d26;border-radius:4px;pointer-events:auto}.hud-demands>span{font-size:7px;letter-spacing:.9px;color:#a6c2c6;max-width:53px}.hud-rci{display:flex;align-items:flex-end;gap:8px;flex:1;height:27px}.hud-rci>div{flex:1;position:relative;display:flex;align-items:flex-end;gap:4px;height:27px}.hud-rci i{display:block;width:9px;min-height:2px;box-shadow:0 0 8px #72dc8c11}.hud-rci b{font-size:9px;color:#cadad3;font-weight:500}.hud-rci .residential{background:#79d694}.hud-rci .commercial{background:#74c7ea}.hud-rci .industrial{background:#e5bc6e}
.build-panel{display:flex!important;position:absolute;z-index:6;left:50%;right:auto;top:auto;bottom:27px;transform:translateX(-50%);width:min(820px,calc(100% - 440px));min-width:410px;max-height:190px;flex-direction:column;background:var(--hud);border:1px solid #aaccc642;border-top:2px solid #d3b476;border-radius:6px;box-shadow:0 15px 45px #051b2960,inset 0 1px #cee6d50b;overflow:visible;backdrop-filter:blur(12px)}
.build-panel>.panel-title{position:absolute;left:-51px;bottom:0;padding:0;width:42px;height:43px;min-height:43px;background:var(--hud);border:1px solid #a6c9cc40;border-radius:4px;display:grid;place-items:center;box-shadow:var(--shadow)}.build-panel>.panel-title>div{display:none}.build-panel>.panel-title .icon-button{width:40px;height:40px;color:#cbdccf}.build-tabs{display:flex;justify-content:flex-start;padding:0 148px 0 7px;gap:2px;height:47px;min-height:47px;border-bottom:1px solid #b3d4cf20}.build-tabs button{flex:1;min-width:40px;max-width:73px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:5px 3px 4px;color:#9cb6c1;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:10px}.build-tabs button>span{font-size:8px;letter-spacing:.25px}.build-tabs button.active{background:linear-gradient(#dbbf7020,#e2bd7025);border-bottom-color:#e8c580;color:#f0d58f}.build-tabs button>svg{width:17px;height:17px}.tool-search{position:absolute;right:9px;top:9px;width:128px;margin:0}.tool-search input{height:28px;min-height:28px!important;font-size:9px!important;padding:6px 6px 6px 25px!important;background:#0d2430cc!important;border-color:#b3d4c933!important}.tool-search>svg{top:7px;left:7px;width:12px}.tools-list{display:flex;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;padding:8px;min-height:110px;height:118px;scrollbar-width:thin;scrollbar-color:#50727d #112632}
.tool{display:flex;position:relative;flex:0 0 104px;min-width:104px;min-height:91px;max-height:96px;padding:3px 6px 7px;flex-direction:column;align-items:stretch;text-align:center;justify-content:flex-end;gap:0;background:linear-gradient(150deg,#34505a88,#1c3443aa);border:1px solid #88a9b03d;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px #d0e4cf08}.tool:hover{background:linear-gradient(150deg,#47665f99,#2a4c59);border-color:#b6d6c777;transform:translateY(-2px)}.tool.selected{border-color:#e4c17a;background:linear-gradient(#806b3b44,#365047);box-shadow:inset 0 -2px #dcc078,0 0 14px #b6d38d10}.tool.selected:after{content:'◆';position:absolute;right:5px;top:5px;font-size:8px;color:#f0ce87}.tool.locked{opacity:.48}.tool.locked:after{content:'🔒';position:absolute;right:5px;top:5px;font-size:9px;filter:grayscale(1)}.tool>svg,.tool-icon{display:none}.tool .tool-portrait{width:88px;height:58px;display:block;align-self:center;filter:drop-shadow(0 3px 2px #06162144);margin-top:-4px}.tool-name{display:block;flex:none;min-width:0}.tool-name strong{display:block;font-size:9px;line-height:1.15;font-weight:500;color:#dbe5db;white-space:normal;height:20px;display:flex;align-items:center;justify-content:center}.tool-name small{font-size:9px;line-height:1;color:#e1c88e;margin:1px 0 0;white-space:nowrap}.no-tools{font-size:11px;margin:auto;color:#b5c8c7;min-width:220px}.tool-detail{display:none;position:absolute;bottom:calc(100% + 9px);left:0;width:min(365px,100%);min-height:0;padding:12px 15px;border:1px solid #adcfc542;border-left:3px solid #8ed5b1;border-radius:4px;background:var(--hud);box-shadow:var(--shadow);pointer-events:auto;z-index:7}.build-panel.has-tool .tool-detail{display:block}.tool-detail p{font-size:10px;line-height:1.6;color:#bdcfcf;margin:6px 0}.tool-detail .eyebrow{color:#d9dfbf;font-size:9px}.tool-detail>div{font-size:10px;color:#dfbc78}.tool-detail .text-button{font-size:11px}.build-preview{left:50%;bottom:212px;transform:translateX(-50%);max-width:340px;padding:10px 14px;border-radius:4px;background:#153c40f2;border:1px solid #88d5ba66;color:#d8f1db;box-shadow:var(--shadow);z-index:5}.build-preview small{color:#9fc9bc}.build-preview.invalid{background:#492d2cf2;border-color:#dc947b66;color:#f0bca0}.build-preview.invalid small{color:#dfa88f}
.minimap-wrap{position:absolute;right:16px;bottom:70px;z-index:4;background:#17323fe8;border:1px solid #b8d2c350;border-radius:5px;padding:7px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.minimap-wrap>span{color:#c4d5c2;font-size:7px;letter-spacing:1.4px;margin:1px 0 7px}.minimap-wrap canvas{width:126px;height:126px;border:1px solid #d2ddbd55;border-radius:2px;image-rendering:pixelated}.map-bottom{bottom:27px;left:16px;right:16px;z-index:3}.view-options,.zoom-options{background:#193643ed;border:1px solid #9cbcb347;border-radius:4px;box-shadow:var(--shadow);color:#c5d6d4}.view-options{max-width:166px;color:#96c3b9}.view-options select{font-size:10px;color:#d4e0d3;padding:9px 22px 9px 5px;background:transparent;min-height:32px}.zoom-options{width:141px;justify-content:space-around}.zoom-options button{padding:11px;color:#d3e6d9}.zoom-options button:hover{background:#426254}.map-legend{left:16px;top:370px;width:160px;background:#173441e8;border:1px solid #9bc7b444;border-radius:4px;color:#d4e7d2;z-index:3}
.overview-panel{position:absolute;display:block;z-index:7;right:78px;top:104px;bottom:235px;width:290px;background:var(--hud);border:1px solid #a8ccbc40;border-radius:6px;box-shadow:var(--shadow);overflow:auto;max-height:none}.overview-panel.closed{display:none!important}.overview-panel.mobile-open{display:block!important}.overview-panel .panel-title{height:63px;min-height:63px;padding:15px 17px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#1a333fee;z-index:2}.overview-panel .panel-title h2{font-size:19px;margin-top:4px;color:#e1dec3}.close-overview{display:flex}.overview-panel .panel-title>.live-dot{display:none}.city-advice{padding:15px 14px 0;margin-bottom:17px}.advisor-heading{color:#add9c1}.advice-item,.advice-item.good{background:#2748468c;border-color:#90b49f35;border-radius:4px}.advice-item.danger{background:#6c453933;border-color:#d095714a}.advice-item>strong{color:#d9e3d3}.advice-item>p{color:#a7c1bd}.active-project-button{background:#30584e;border-color:#7dba9770}.demand-block{padding:5px 16px 18px}.demand-row{font-size:11px}.demand-row b{color:#b3d4c4}.demand-track{background:#36515a}.demand-track i{background:#83d99d}.demand-track i.commercial{background:#71c3e3}.demand-track i.industrial{background:#e1b96c}.active-mission{margin:0 13px;padding:15px;background:#61532d26;border-color:#d3b47066;border-radius:4px}.active-mission .eyebrow,.active-mission>div strong{color:#dfc58c}.active-mission p,.active-mission>div{color:#b8c6b9}.active-mission h3{color:#e5e4c9}.urban-indicators{padding:17px 16px}.urban-indicators>div,.news-item p{color:#acc2c6}.urban-indicators strong{color:#d3dec7}.news-block{padding:17px 16px}.news-item small{color:#7fa0b0}.inspector-header{padding-top:18px}.inspector-header .tool-icon{display:grid;background:#355254;color:#cbe2c1;border-radius:5px}.inspect-values,.overview-panel #inspector>.muted{padding-left:16px;padding-right:16px}.growth-report{margin:15px;background:#31514855;border-color:#90b79e44;border-radius:4px}.growth-track{background:#375560}.growth-track>i{background:#87d6aa}.growth-checks .met{color:#a0dfb6}.growth-checks .missing{color:#dfb779}.inspect-district{margin:0 15px}.inspector-actions{padding:0 15px}.overview-panel #inspector>.button{margin:15px;width:calc(100% - 30px)}
.game-footer{position:absolute;z-index:4;bottom:0;left:0;right:0;height:22px;min-height:22px;background:#0c253be0;border:0;padding:0 16px;font-size:8px;letter-spacing:.2px;color:#99b8bb;pointer-events:none}.game-footer #map-hint{font-size:8px}.connection-overlay{background:#0d253be8;color:#deeddc;z-index:12}.connection-overlay>span{color:#a4c2c3}#toasts{bottom:225px;max-width:90vw}.toast{background:#173440f5;border:1px solid #a1c9b555;border-left:3px solid #d3b978;border-radius:4px;color:#d9e5d3;box-shadow:var(--shadow);font-size:11px}.toast.good{background:#1c3e40f5;border-color:#8cb59b66;color:#c7ead3}.toast.bad{background:#472f32f2;border-color:#d79a7555;color:#edc3a6}
.restore-hud{display:none;position:absolute;z-index:30;bottom:22px;right:22px;border:1px solid #a6ceb077;border-radius:4px;padding:10px 15px;background:#153242dd;color:#d2e9d3;cursor:pointer;font-size:11px}.game.cinematic .brand-button,.game.cinematic .city-title,.game.cinematic .city-stats,.game.cinematic .main-nav,.game.cinematic .build-panel,.game.cinematic .overview-panel,.game.cinematic .map-top,.game.cinematic .map-bottom,.game.cinematic .minimap-wrap,.game.cinematic .hud-left,.game.cinematic .game-footer,.game.cinematic .map-legend,.game.cinematic .build-preview{display:none!important}.game.cinematic .restore-hud{display:block}
.modal-backdrop{background:#04101aba;backdrop-filter:blur(7px)}.modal{background:linear-gradient(130deg,#233b48,#132b3a);border:1px solid #a5ccb45c;border-top:3px solid #d1b278;border-radius:6px;box-shadow:0 35px 100px #020b12bb;color:#d9e5df}.modal>header{background:linear-gradient(100deg,#d8bd6813,transparent);padding:23px 26px 19px}.modal>header h2{font-size:25px;letter-spacing:.2px;color:#eddfb8}.modal>header p{color:#a7c0c5}.modal-content{padding:23px 26px 27px}.modal-content .muted,.modal-content p{color:#b1c5c7}.modal-content h3{color:#dedcc0}.modal-content .button{color:#1c3039}.modal-content .button.secondary{color:#d5e4d8}.modal-content .text-button{color:#aedfca}.modal-content .tiny{font-size:10px}.planning-tabs button{border-radius:3px;color:#b7c9ce}.planning-tabs button.active{background:#bdb67722;border-color:#d8bd7266;color:#ebd395}.planning-tabs button:hover{background:#456255}.district-row.active{background:#48705c66;border-color:#a7cea655}.district-detail .policy-explanation{background:#37575066;color:#b7d4c5}.project-card{background:#25404c;border-color:#92b7b447;border-radius:5px}.project-card.completed{background:#2b4c4399;border-color:#90b77e55}.project-card.running{border-color:#d1b779;box-shadow:inset 0 0 0 1px #bda76933}.project-symbol{background:#52755b55;color:#c4e3bc;border-radius:4px}.project-cost{color:#e0c788}.project-card>small{color:#a4d6b8}.planning-empty h3,.tourism-hero h3,.victory h3{font-family:inherit}.tourism-hero{background:linear-gradient(120deg,#49715b55,#b39c5630);border-color:#afd2ae50;border-radius:5px}.tourism-hero>svg{color:#cee3ba}.tourism-metrics strong{color:#e4cd96}.tourism-buildings button{background:#2b4550;border-color:#abc5b639;border-radius:4px}.statistics-grid>div{background:#2a4650;border-radius:4px}.chart-tabs button.active{background:#d4b4742e;color:#e9d197;border-color:#bfa66c}.line-chart text{fill:#a8c0c6}.mission-item{border-color:#9dbfac44;border-radius:4px}.mission-item.current{background:#c1a86019;border-color:#d9b66e99}.mission-item.done{background:#3e64533d}.mission-number{background:#486756;color:#def1cd;border-radius:5px}.mission-item>strong,.milestone-grid small{color:#dfc58a}.milestone-grid>div.done{background:#3f625844;border-color:#9fc29266}.milestone-grid>div{color:#b1c6be;border-color:#abc4b63b;border-radius:4px}.invite-box,.chat-log,.save-callout{background:#2b47524d;border-color:#b0ccc03f;border-radius:4px}.invite-link-row input{background:#102935!important}.save-symbol{background:#365953;color:#b3dab9;border-radius:4px}.chat-message strong{color:#b1d8b9}.chat-message small{color:#8eacb6}.player-avatar{border-radius:5px}.guide-number{color:#d2b578}.budget-summary strong{color:#e7d69e}.range-row output{color:#e1c993}.policy small{color:#9cbdad}
/* Title screen and saved-city menu use the same art and materials as the HUD. */
.welcome{position:relative;min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr;background:#122c39;overflow:hidden}.welcome-left{position:relative;z-index:2;padding:44px 6vw;background:linear-gradient(90deg,#0c1d2ded,#153041b3);pointer-events:none}.welcome-left .brand{pointer-events:auto}.welcome-title{margin:auto 0;padding:80px 0 90px}.welcome-title h1{font-size:clamp(42px,4.8vw,78px);letter-spacing:-1px;line-height:1.05;text-transform:uppercase;color:#edf0dd;margin:25px 0}.welcome-title em{color:#b6d3a1}.welcome-title p{font-size:14px;color:#bccfcb;line-height:1.8}.welcome-bottom{font-size:10px;color:#b5cdc8}.welcome-right{position:static;background:transparent;z-index:auto;display:flex;align-items:center;justify-content:center}.welcome-right canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1;z-index:0}.welcome-gradient{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#0a192ace,transparent 45%),linear-gradient(90deg,#10233288,transparent)}.login-card{position:relative;z-index:3;width:370px;background:linear-gradient(140deg,#223f4aef,#102837f5);backdrop-filter:blur(15px);border:1px solid #aec6ac55;border-top:3px solid #d8ba7c;border-radius:6px;box-shadow:0 25px 80px #07141b88;padding:29px}.login-card h2{font-family:inherit;font-size:25px;line-height:1.2;color:#ecdeb8;margin:18px 0 10px}.login-card>p{color:#a8c2c8;font-size:12px}.login-card>small{color:#9bb7bf}.art-caption{z-index:3;color:#c7ddcd;background:#102c3ab0;padding:10px 15px;border-radius:4px}
.lobby{position:relative;min-height:100dvh;padding:0 5vw;background:radial-gradient(ellipse at 0 40%,#305456,#122836 75%);overflow:hidden}.lobby-header,.lobby-footer{position:relative;z-index:2;border-color:#c4d4b628}.lobby-body{position:relative;z-index:1;max-width:1260px;margin:auto;padding:45px 0;align-items:center;gap:8%}.lobby-intro{position:static}.lobby-intro>h1,.lobby-intro>p,.lobby-intro>.eyebrow{position:relative;z-index:2;text-shadow:0 3px 20px #071f26}.lobby-intro h1{font-family:inherit;font-size:58px;text-transform:uppercase;line-height:1.04;color:#eeeddb;letter-spacing:-1px}.lobby-intro h1 em{color:#bad2a5}.lobby-intro>p{color:#bfcebe}.lobby-art{position:absolute;left:-15%;top:150px;bottom:-50px;width:70%;height:auto;opacity:.85;pointer-events:none;z-index:0;mask-image:linear-gradient(transparent,#000 15%,#000 70%,transparent)}.lobby-panel{position:relative;z-index:2;padding:25px;background:var(--hud);border:1px solid #a5c7b752;border-top:3px solid #d4b572;border-radius:6px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.lobby .section-heading h2{font-size:20px;color:#e3d5b1}.lobby .section-heading>span{color:#96b0b5}.terrain-card{background:#233d49;border-color:#91afa74a;border-radius:4px}.terrain-card:has(input:checked){background:#4b64533b;border-color:#d9bb7e;box-shadow:inset 0 -2px #cfb071}.terrain-card strong{color:#dce5d3}.terrain-card small{color:#a1bdbf}.city-card{background:#27444bb5;border-color:#9fbea753;border-radius:4px}.city-card strong{color:#e6dfbc}.city-card small{color:#a9c2c4}.join-section{background:#34514a4d;border-color:#aac1a53d}.lobby-footer{color:#93b2b8}.profile-button{color:#c0d5cc}
@media(min-width:1600px){.build-panel{width:880px;max-height:206px}.tools-list{height:130px}.tool{flex-basis:118px;min-width:118px;max-height:108px}.tool-name strong{font-size:10px}.tool .tool-portrait{width:100px;height:66px}.hud-left{width:246px}.hud-mission p{font-size:11px}.overview-panel{width:320px}.stat>strong{font-size:23px}.utility-stat>strong,.date-stat>strong{font-size:15px}}
@media(max-width:1150px){.brand-button{width:185px;left:12px}.brand-button .brand.small>div:last-child{font-size:12px}.city-title{left:68px;max-width:121px}.city-name{max-width:121px;font-size:10px}.city-stats{left:207px;right:12px}.stat,.stat:first-child{padding:12px 10px 8px}.stat>strong{font-size:18px}.utility-stat>strong,.date-stat>strong{font-size:12px}.stat>span{font-size:7px}.stat-unit{font-size:8px}.stat>small{font-size:7px}.hud-left{width:185px;left:12px}.hud-mission{padding:11px}.hud-mission p{font-size:9px}.hud-mission strong{font-size:12px}.map-top{left:12px;right:72px}.map-label{min-width:174px;max-width:185px}.build-panel{width:calc(100% - 372px)}.build-tabs{padding-right:8px}.tool-search{position:absolute;top:-35px;right:0;width:148px}.tool-search input{background:#173341e8!important}.minimap-wrap{right:12px}.main-nav{right:12px}.map-bottom{left:12px;right:12px}.view-options{max-width:143px}.view-options select{font-size:9px}.overview-panel{right:68px;bottom:227px;width:272px}.lobby-intro h1{font-size:47px}}


@media(max-height:650px) and (min-width:651px){.hud-mission p{display:none}.hud-left{top:157px}.hud-mission{padding:9px 12px}.hud-mission strong{font-size:11px}.hud-demands{padding:7px 10px}.map-label{padding:7px 11px}.main-nav{gap:3px;top:94px}.main-nav>button,.main-nav>.icon-button{height:30px;min-height:30px;width:35px;padding:7px}.map-top{top:94px;right:65px}.overview-panel{top:94px;bottom:204px;right:62px}.tools-list{height:99px}.tool{min-height:82px;max-height:82px}.tool .tool-portrait{width:72px;height:47px}.tool-name strong{font-size:8px}.build-tabs{height:41px;min-height:41px}.build-preview{bottom:183px}.minimap-wrap canvas{width:88px;height:88px}.minimap-wrap{bottom:67px}.map-bottom>.view-options{bottom:158px}.tool-detail p{font-size:9px;line-height:1.4}.tool-detail{padding:8px 11px}.map-legend{top:295px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.brand-button .brand>div:last-child{align-self:flex-start;padding-top:3px}
.dock-context{flex:1 0 170px;min-width:170px;padding:9px 14px;border-left:1px solid #b0cec72b;margin-left:4px;display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:left}.dock-context .eyebrow{font-size:8px;letter-spacing:.9px;color:#e0c589}.dock-context p{font-size:10px;color:#a9c2c7;line-height:1.6;max-width:400px}.dock-context small{font-size:8px;color:#90b2ba;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.dock-context kbd{font-size:7px;min-width:0;padding:2px 4px;background:#2a434e;border:1px solid #76929144;color:#cadccf}.build-panel.inline-details .tool-detail{display:none}
@media(max-width:1150px){.dock-context{flex-basis:180px;min-width:180px}.dock-context small{display:none}.dock-context p{font-size:9px}}


.hud-menu-toggle{display:none}.game.cinematic .hud-menu-toggle{display:none!important}