.hero-avatar svg{width:58px;height:66px;display:block}.hero-avatar{width:58px}.city-mode{background:#eee9db;color:#344338;--muted:#7a806e;--line:#7e795425;--gold:#ac8743}.city-mode .topbar{background:#fbf6e9;border-color:#dcd4bd}.city-mode .brand-seal{border:0;box-shadow:none;color:#137d72;font-family:inherit}.city-mode .brand small{color:#8c937e}.city-mode .resource b{color:#384433}.city-mode small{color:#7b836e}.city-mode .resource-symbol{color:#bb903d}.city-mode .server-picker select{color:#485c46}.city-mode .sidebar{background:#f8f2e5;border-color:#e0d8c4}.city-mode .nav-item{color:#8e937d}.city-mode .nav-item.active{background:#168675;color:#fff7df;border-color:#168675}.city-mode .war-banner{background:#e6ecd8;border-color:#cad6b8;min-height:68px;margin-bottom:14px}.city-mode .war-emblem{color:#9d8548;font-size:29px}.city-mode .war-copy h2{color:#47553f}.city-mode .war-copy p,.city-mode .war-time small{color:#6d7d5c}.city-mode .war-time b{color:#86713d;font-size:19px}.city-mode .war-banner button{color:#5a6f4d;border-color:#b2c49c}.city-mode .map-card{border-color:#d7ceb8;background:#fcf7e9}.city-mode .map-heading{background:#fcf7e9;padding:14px 20px}.city-mode h1{color:#334b3b;font-family:inherit;font-size:22px;font-weight:700;letter-spacing:0}.city-mode .map-heading .eyebrow{color:#8c936f}.city-mode h1 span{color:#798a6c}.city-mode .map-live{color:#64815f}.city-mode .map-legend,.city-mode .map-compass,.city-mode .map-note,.city-mode .map-controls,.city-mode .march-status{display:none}.city-mode .map-stage{height:clamp(450px,58vh,780px)}.city-mode .map-footer{color:#638263;background:#f4f1e3;border-color:#ddd9c1}.city-mode .detail-column{background:#fbf6ea;border:1px solid #dcd2bc;height:calc(clamp(450px,58vh,780px) + 180px)}.city-mode .panel-tabs{border-color:#e4dcc8}.city-mode .panel-tabs button{color:#7e856f}.city-mode .panel-tabs button.active{color:#167f70;border-color:#168a77}.city-mode .panel{scrollbar-color:#c7c7ad #fbf6ea;padding:20px}.city-mode select{background:#f2eddd;color:#405441;border-color:#d6ceb4;font-size:11px}.city-mode button{border-color:#d7ceb5;color:#475d43;background:#f5efdc}.city-mode button:hover:not(:disabled){background:#e9e5cf}.city-mode .primary{background:#168674;color:#fff9e5;border-color:#168674}.city-mode .primary:hover:not(:disabled){background:#0f7768}.city-mode .test-toolbar{border-color:#d4ccb7}.city-mode .test-toolbar>span{color:#849170}.city-mode .footnote{color:#8d957d}.city-mode .holding-card{background:#f8f4e7;border-color:#d8d4bd;color:#4c6849}.city-mode .holding-card.empty{background:#f1efdf;color:#829573}.city-mode .holding-card.empty b{color:#849174}.city-mode .section-heading h2{font-weight:700;color:#4a6445}.city-mode .text-button{color:#527e65}.city-mode .castle-directory{display:none}.city-mode .panel .field-label{color:#6b7c5d}.city-mode .panel .eyebrow{color:#8e996e;font-size:9px;letter-spacing:1px}.city-panel-header h2{font-size:22px;line-height:1.4;margin:7px 0 12px;color:#3f503a}.city-panel-header select{width:100%}.city-section-title{font-size:18px;margin:23px 0 13px;color:#3d4d37}.city-stat{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:11px 0;border-bottom:1px solid #c6bfa02b}.city-stat b{font-size:15px;font-weight:600}.city-stat small{font-size:9px;font-weight:400}.worker-row{display:flex;align-items:center;gap:7px;margin:13px 0;font-size:13px}.worker-row>span{flex:1;font-weight:600}.worker-row button{padding:0;width:30px;height:29px;background:#f3ecd9;border:1px solid #d5c7a7;font-size:18px}.worker-row b{min-width:32px;text-align:center;font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}.worker-row small{width:30px;font-size:9px}.city-production{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;padding:12px;background:#eff0d9;border-radius:6px;font-size:10px;line-height:1.7}.city-production b{color:#178270;margin-left:4px;font-size:12px}.city-helper{font-size:10px;line-height:1.8;color:#8b8d73;margin:11px 0}.city-mode .divider{border-color:#d7cdae}.building-card{border:1px solid #ddd2b7;border-radius:10px;padding:16px;background:#fff9eb}.building-card h3{font-size:19px;margin:9px 0;color:#365343}.building-card h3 small{font-size:12px}.building-card p{font-size:11px;line-height:1.8;color:#7c846d}.build-cost{font-size:10px;line-height:1.9;margin:12px 0;color:#93783c}.build-progress{background:#e0edcf;border-radius:5px;font-size:11px;padding:10px;margin:12px 0;color:#487440;display:flex;justify-content:space-between}.city-training{padding:15px;border:1px solid #dfd2b6;border-radius:7px;margin-top:15px}.city-training h3{font-size:14px}.city-training p{font-size:11px;line-height:1.8;margin:10px 0}.building-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:17px 0}.building-shortcuts button{font-size:10px;padding:8px 3px}.building-shortcuts button.selected{background:#d2e6cd;color:#296c50;border-color:#97bc91}#city-map{cursor:pointer;background:#bfd197}.city-mode .map-footer>span:last-child{font-size:10px}.join-form{display:flex;flex-direction:column;gap:12px}.join-form input{padding:10px;color:#304333;background:#f1ecd9;border:1px solid #baae8a;border-radius:5px}.server-capacity{font-size:10px;color:#809371}.city-mode .server-capacity{color:#69815d}.city-mode .profile b{color:#496546}.city-mode .profile .avatar{color:#e8eacb}.city-mode .toast{color:#e5ebd2}
@media(max-width:850px){.city-mode .detail-column{height:auto}.city-mode .map-stage{height:460px}.city-mode .panel{padding:20px}.city-mode .sidebar{background:#fbf6eaf5}.city-mode .war-banner{display:none}.city-mode .map-footer>span:last-child{display:none}.city-mode .building-shortcuts button{font-size:12px}.city-mode .map-heading{padding:15px}}
@media(max-width:430px){.city-mode .map-stage{height:290px}.city-mode .map-live{display:none}.city-mode h1{font-size:19px}.city-mode .topbar{padding:12px}.city-mode .map-heading .eyebrow{font-size:8px}.city-mode .city-production{font-size:11px}}
.quantity-control{margin:18px 0;color:inherit;min-width:0}
.quantity-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.quantity-heading label{font-weight:600}.quantity-heading output{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.quantity-heading small{font-size:10px;white-space:nowrap}.quantity-limits{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}
.quantity-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;height:36px;margin:3px 0 0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;accent-color:#168674}
.quantity-slider::-webkit-slider-runnable-track{height:7px;border-radius:8px;background:#74957b50}
.quantity-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:23px;margin-top:-8px;border-radius:50%;background:#168674;border:3px solid #f8f4e5;box-shadow:0 1px 4px #18362d40}
.quantity-slider::-moz-range-track{height:7px;border-radius:8px;background:#74957b50}
.quantity-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#168674;border:3px solid #f8f4e5}
.quantity-slider:disabled{opacity:.45;cursor:not-allowed}.quantity-slider:focus-visible{outline:2px solid #b49a57;outline-offset:2px;border-radius:8px}
.city-mode .quantity-control{color:#384f40}.city-mode .quantity-heading output{color:#167c6d}.panel[aria-busy="true"]{cursor:progress}

.city-mode .growth-guide{background:#e4edd9;color:#334b38;border-color:#bdcfae}.city-mode .growth-guide small{color:#586d4c}.city-mode .formation-inputs input{background:#f7f2e3;color:#334b38;border-color:#b9c9a9}.city-mode .recovery-panel{border-color:#c6d5b9}

.building-preview{display:block;width:100%;height:148px;object-fit:contain;margin:4px auto 12px}.city-mode .building-card{overflow:hidden}
.city-mode .map-stage{height:auto;aspect-ratio:3/2}

/* City overview and single-screen facility views */
.city-view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:4px}
.city-view-head h2{font-size:20px;margin:4px 0 0;color:#3f503a}.city-view-head>small{font-size:10px;color:#7b836e;white-space:nowrap}
.facility-head{align-items:center}.facility-head select{flex:1;min-width:0}
.city-back{padding:7px 10px;font-size:11px;white-space:nowrap}
.city-mini-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;margin:14px 0 7px;color:#3d4d37}.city-mini-title small{font-size:9px;font-weight:400;color:#8b8d73;text-align:right}
.city-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.city-totals span{display:flex;flex-direction:column;gap:2px;padding:8px 6px;background:#eff0d9;border-radius:6px;font-variant-numeric:tabular-nums}
.city-totals i{font-style:normal;font-size:10px;color:#6f7a60}.city-totals b{font-size:13px;color:#178270}.city-totals small{font-size:9px}
.city-roster{display:flex;flex-direction:column;gap:5px}
.city-mode .city-row{display:grid;grid-template-columns:1fr auto;gap:3px 8px;text-align:left;padding:8px 10px;background:#fff9eb;border:1px solid #ddd2b7;border-radius:7px}
.city-mode .city-row.selected{border-color:#97bc91;background:#eaf3e2}
.city-row-name,.city-row-troops{display:flex;flex-direction:column;gap:1px}.city-row-name b{font-size:12px}.city-row-name small,.city-row-troops small{font-size:9px}
.city-row-troops{text-align:right}.city-row-troops b{font-size:13px;color:#2f6a55;font-variant-numeric:tabular-nums}
.city-row-status{grid-column:1/-1;display:flex;gap:10px;font-size:10px}.city-row-status i{font-style:normal;color:#9a9a86}.city-row-status i.on{color:#9b6f24;font-weight:600}
.city-mode .panel .building-shortcuts{margin:6px 0 0}.building-shortcuts small{display:block;font-size:9px;opacity:.75}
.facility-card{display:flex;gap:12px;align-items:center;margin-top:10px}
.facility-thumb{width:96px;height:84px;object-fit:contain;flex:none;background:#eff0d9;border-radius:8px}
.facility-card h2{font-size:18px;margin:3px 0;color:#365343}.facility-card h2 small{font-size:12px}.facility-card p{font-size:10px;line-height:1.6;color:#7c846d;margin:0}
.facility-upgrade{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 10px;background:#fff9eb;border:1px solid #ddd2b7;border-radius:8px;font-size:10px;color:#93783c;line-height:1.6}
.facility-upgrade small{display:block;font-size:9px;color:#8b8d73}.facility-upgrade button{white-space:nowrap;padding:8px 12px}
.city-mode .build-progress{margin:10px 0 0;padding:8px 10px}
.city-stat em{font-style:normal;color:#178270}.city-mode .panel .city-stat{padding:7px 0}
.city-mode .panel .quantity-control{margin:8px 0}
.compact-sliders .quantity-control{margin:2px 0}.compact-sliders .quantity-slider{height:26px}.compact-sliders .quantity-heading{font-size:12px}.compact-sliders .quantity-heading output{font-size:14px}.compact-sliders .quantity-limits{display:none}
.city-mode .city-training{margin-top:0;padding:10px 12px}
.training-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
.city-mode .training-kinds button{font-size:10px;padding:7px 2px}.city-mode .training-kinds button[aria-pressed="true"]{background:#168674;color:#fff9e5;border-color:#168674}
.training-summary{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:4px}.training-summary b{color:#167c6d;font-size:13px}
.city-mode .training-summary .text-button{background:none;border:0;padding:2px 0;font-size:10px;text-decoration:underline}
.city-mode .city-training .training-cost{font-size:10px;line-height:1.6;margin:4px 0 8px;color:#7c846d}
.city-mode .recovery-panel{margin-top:8px;padding:8px 10px;font-size:10px}.city-mode .recovery-panel h3{font-size:12px;margin:0}.city-mode .recovery-panel p{margin:4px 0;font-size:10px}
/* Short phones: tighten the header, goal card and map heading so the whole city or world map sits above the bottom tab bar. */
@media(max-width:850px) and (max-height:760px){.city-mode .topbar,.world-mode .topbar{padding:8px 12px;gap:6px 10px;min-height:0}.topbar .brand-seal{width:32px;height:35px;font-size:22px}.topbar .brand b{font-size:18px}.topbar .brand small{display:none}.topbar .resources{row-gap:4px}.city-mode main{padding-top:8px}.city-mode .growth-guide{flex-direction:row;align-items:center;padding:10px 12px;margin:0 0 8px;gap:10px}.city-mode .growth-guide .eyebrow{display:none}.city-mode .growth-guide b{margin-top:0;font-size:13px}.city-mode .growth-guide small{margin-top:3px;font-size:10px}.city-mode .growth-guide button{align-self:center;padding:7px 10px;font-size:11px;white-space:nowrap}.city-mode .map-heading{padding:8px 12px}.city-mode .map-heading .eyebrow{display:none}.world-mode .map-stage{height:calc(100dvh - 290px);min-height:240px}}
.building-shortcuts button{position:relative}.city-mode .building-shortcuts button.actionable{border-color:#9fbf8f;background:#f3f6e4}
.action-marks{display:flex;justify-content:center;gap:2px;margin-top:3px}.action-mark{font-style:normal;font-size:9px;line-height:1;padding:2px 4px;border-radius:7px;color:#fffaf0;font-weight:700}.action-mark.upgrade{background:#2f8a5c}.action-mark.train{background:#b5543c}.action-mark.workers{background:#b9862f}.action-legend .action-mark{display:inline-block}