.hub-tab-view.city-fullview{padding:0;position:relative;overflow:hidden;min-height:0}
.city-stage,.city-loader,.city-map2d{position:absolute;inset:0}
.city-stage{overflow:hidden;background:#0b1526}
.city-loader{display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.92);z-index:5}
.city-hud,.city-detail-panel,.city-chip,.city-tabs{background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.3);color:#e2e8f0}
.city-detail-level,.city-detail-name{font-size:22px;font-weight:800}
.city-hud-bar,.city-build-bar{height:10px;border-radius:9px;background:rgba(148,163,184,.22);overflow:hidden}
.city-hud-fill,.city-build-fill{width:0;height:100%;background:#f59e0b}
.city-detail-tier,.city-action-note{margin-top:8px;font-size:13px;font-weight:600;color:#94a3b8}
.city-hud-col{position:absolute;left:14px;z-index:2;top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.city-hud{pointer-events:none;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:16px}
.city-hud-icon{font-size:26px}
.city-hud-label,.city-detail-section-title{font-size:12px;font-weight:800;letter-spacing:.08em;color:#94a3b8}
.city-hud-value{font-size:20px;font-weight:800}
.city-hud-value strong{color:#fbbf24;font-size:24px}
.city-hud-bar{width:170px;height:6px;margin-top:4px}
.city-hud-tier{margin-top:4px;font-size:12px;font-weight:700;color:#93c5fd}
.city-hud-builds{padding:6px 12px;border-radius:99px;border:1px solid #f59e0b;color:#fcd34d;font-weight:800}
.city-hud-actions,.city-tabs,.city-lock-list{display:flex;gap:6px;flex-wrap:wrap}
.city-chip,.city-tab,.city-lock-chip{padding:8px 14px;border-radius:12px;font:inherit;font-size:14px;font-weight:800;color:#e2e8f0;cursor:pointer}
.city-tabs{position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:4px;border-radius:14px;z-index:3}
.city-tab{border:0;background:0}
.city-tab.active,.city-detail-level{background:#0284c7;color:#fff}
.city-detail-panel{position:absolute;top:14px;right:14px;bottom:14px;width:clamp(260px,30%,440px);display:flex;flex-direction:column;overflow:hidden;border-radius:20px;z-index:9996}
.city-detail-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;border:1.5px solid #475569;background:#1e293b;color:#e2e8f0;font-weight:800;cursor:pointer}
.city-detail-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 60px 14px 18px;border-bottom:1px solid rgba(148,163,184,.18)}
.city-detail-level{padding:8px 12px;border-radius:12px;white-space:nowrap}
.city-detail-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.city-detail-stats,.city-detail-action{display:flex;flex-direction:column;gap:8px}
.city-stat-row,.city-next-card,.city-build-card,.city-max-card,.city-lock-card{padding:9px 12px;border-radius:12px;background:#1e293b}
.city-stat-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.city-stat-label{flex:1;min-width:120px;font-size:14px;font-weight:600;color:#cbd5e1}
.city-stat-value,.city-next-row strong{font-size:15px;font-weight:800;color:#f8fafc}
.city-stat-value.tone-good{color:#4ade80}.city-stat-value.tone-mid{color:#fbbf24}.city-stat-value.tone-bad{color:#f87171}
.city-stat-next{font-size:13px;font-weight:800;color:#34d399}
.city-next-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:14px;font-weight:600;color:#94a3b8}
.city-next-visual{margin-top:8px;padding:7px 10px;border-radius:10px;border:1px solid #a855f7;color:#d8b4fe;font-size:13px;font-weight:700}
.city-build-title,.city-lock-title,.city-max-card,.city-build-time strong{color:#fcd34d;font-weight:800}
.city-build-title,.city-lock-title{margin-bottom:8px}
.city-build-time{margin-top:8px;font-size:14px}
.city-max-card{text-align:center}
.city-lock-card{border:1px solid #f59e0b}
.city-lock-chip{padding:5px 10px;border:1px solid #475569;background:#0f172a;font-size:13px}
.city-btn{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;width:100%;min-height:52px;padding:10px 16px;border:0;border-radius:14px;font:inherit;font-size:17px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,#16a34a,#22c55e)}
.city-btn:hover,.city-chip:hover{filter:brightness(1.15)}
.city-btn-speed{background:linear-gradient(135deg,#b45309,#f59e0b)}
.city-btn-speed.is-free{background:linear-gradient(135deg,#16a34a,#22c55e)}
.city-btn:disabled{background:#475569;cursor:not-allowed}
.city-btn-cost{padding:4px 10px;border-radius:99px;background:rgba(15,23,42,.35);font-size:15px}
.city-action-note{margin:0;text-align:center}
@container game (max-width: 900px){.city-hud{padding:6px 10px}}
.cprod-card{position:absolute;top:14px;right:14px;z-index:2;box-sizing:border-box;width:452px;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:16px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.3);color:#e2e8f0}
.cprod-card.is-ready{border-color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.35),0 6px 22px rgba(34,197,94,.25)}
.cprod-head{flex:0 0 58px}
.cprod-title{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.25;color:#94a3b8}
.cprod-items{flex:0 0 244px;display:grid;grid-template-columns:repeat(3,78px);gap:5px}
.cprod-item{box-sizing:border-box;width:78px;display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:9px;background:rgba(148,163,184,.14);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.cprod-item b{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.cprod-cash b{color:#4ade80}
.cprod-btn{flex:0 0 104px;box-sizing:border-box;width:104px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px;border:0;border-radius:12px;font:inherit;font-size:14px;font-weight:800;line-height:1.15;color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 14px rgba(34,197,94,.35);transition:transform .12s,filter .12s}
.cprod-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.cprod-btn:active:not(:disabled){transform:translateY(0)}
.cprod-btn:disabled{cursor:default;background:rgba(148,163,184,.18);color:#94a3b8;box-shadow:none;font-size:12px}
.cprod-btn small{font-size:10px;font-weight:700;opacity:.85}
.city-detail-open .cprod-card{display:none}
.city-stage{container-type:inline-size}
@container (max-width:1300px){.cprod-card{width:auto;padding:6px}.cprod-head,.cprod-items{display:none}}