* { box-sizing: border-box; }
:root { --bg: #101b1b; --panel: #192927; --line: #a3beb026; --muted: #9db5aa; --text: #e7ecdd; --gold: #d6bf80; }
body { margin: 0; color: var(--text); background: var(--bg); font: 13px/1.5 'Segoe UI', sans-serif; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .47; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }.small { font-size: 11px; }
.eyebrow { font-size: 9px; letter-spacing: .17em; color: var(--gold); text-transform: uppercase; font-weight: 600; }
.boot { padding: 60px; }.boot p { margin-top: 15px; }
.wordmark { font: 25px Georgia, serif; letter-spacing: .17em; color: #eee2bd; }
.topbar { min-height: 74px; display: flex; align-items: center; gap: 25px; padding: 15px 27px; border-bottom: 1px solid var(--line); background: #101e1c; }
.logo { border-right: 1px solid var(--line); padding-right: 25px; }
.logo p { font-size: 8px; letter-spacing: .19em; color: var(--muted); }
.campaign-heading { flex: 1; }.campaign-heading strong { font-size: 15px; font-weight: 500; }.campaign-heading p { font-size: 10px; color: var(--muted); margin-top: 2px; }
.top-actions { display: flex; gap: 7px; }
.btn { padding: 9px 13px; border: 1px solid #a3beb036; border-radius: 4px; background: #233833; font-size: 11px; }
.btn:hover:not(:disabled) { background: #30483e; }
.btn.primary { background: var(--gold); color: #1b2b25; border-color: var(--gold); font-weight: 600; }
.btn.ghost { background: transparent; }.btn.block { width: 100%; }.btn.small { padding: 6px 10px; }
.resources { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 0 25px; background: #13231f; }
.resource { padding: 14px 22px; border-right: 1px solid var(--line); }.resource:last-child { border: 0; }.resource span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }.resource strong { font: 22px/1.6 Georgia, serif; color: #eee6cc; }.resource small { font-size: 10px; margin-left: 6px; color: var(--muted); }
.game-layout { display: grid; grid-template-columns: 190px minmax(0,1fr) 320px; min-height: calc(100vh - 157px); }
@media(min-width:901px) { .game-layout { height: calc(100vh - 157px); min-height: 440px; }.left-panel, .right-panel { height: 100%; overflow-y: auto; }.map-area { display: flex; flex-direction: column; overflow: hidden; } #map-canvas { flex: 1; min-height: 0 !important; height: auto !important; }.map-caption { flex-shrink: 0; } }
.left-panel { padding: 23px 17px; border-right: 1px solid var(--line); background: #142521; }
.rank-card { padding-bottom: 17px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }.rank-card h2 { font: 20px Georgia,serif; margin: 8px 0; }.rank-card p { font-size: 10px; color: var(--muted); }
.city-progress { margin: 13px 0; }.city-progress strong { color: #dde1c5; font-size: 13px; }.bar { margin-top: 8px; height: 4px; background: #4c675c55; border-radius: 2px; overflow: hidden; }.bar-fill { height: 100%; background: #abc9a0; }
.district-header { display: flex; align-items: center; justify-content: space-between; margin: 21px 0 12px; }.district-header h3 { font-size: 11px; }.district-filter { width: 100%; border: 1px solid var(--line); border-radius: 3px; background: #1b3027; padding: 6px; font-size: 10px; margin-bottom: 11px; }
.district-list { display: grid; gap: 4px; }.district-row { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; }.district-row:hover { background: #294135; }.district-row.active { background: #d6bf8014; border-color: #d6bf8040; color: #e6cf99; }.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #a46e5b; flex: 0 0 auto; }.status-dot.secured { background: #a2c49a; }.district-number { color: #698377; font: 9px Consolas,monospace; margin-left: auto; }
.map-area { min-width: 0; position: relative; background: #172c2b; }
.map-top { position: absolute; z-index: 3; top: 23px; left: 25px; pointer-events: none; }.map-top h1 { font: 35px Georgia,serif; line-height: 1.25; margin: 7px 0 8px; }.map-top p { color: #b7c4b1; font-size: 10px; }
.map-badge { position: absolute; right: 19px; top: 23px; z-index: 3; background: #13231ed9; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 9px; color: #adbea8; max-width: 150px; }
#map-canvas { width: 100%; height: calc(100vh - 170px); min-height: 620px; position: relative; overflow: hidden; }
#map-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } #map-canvas canvas:active { cursor: grabbing; }
.map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }.map-label { position: absolute; transform: translate(-50%,-50%); border: 0; color: #eadfca; background: #101e19b5; border-radius: 3px; padding: 2px 5px; font-size: 8px; font-weight: 500; white-space: nowrap; pointer-events: auto; text-shadow: 0 1px 2px #000; }.map-label.selected { background: #d4bd7b; color: #17271f; text-shadow: none; font-size: 10px; z-index: 2; }.map-label.secured { color: #c4edbb; }
.map-label.selected.secured { background: #8bb780; color: #102719; }
.team-legend { color: #e0cf85; margin-right: 5px; }
.map-controls { position: absolute; z-index: 3; bottom: 66px; right: 20px; display: flex; gap: 5px; }.map-controls .btn { background: #173025e8; }
.map-legend { position: absolute; z-index: 3; bottom: 68px; left: 24px; display: grid; gap: 7px; font-size: 9px; color: #b6c5b6; }.legend-square { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 1px; }
.legend-unknown { background: #715951; }.legend-available { background: #a39357; }.legend-strong { background: #945446; }.legend-secured { background: #507562; }
.map-caption { padding: 12px 20px; color: #89a494; font-size: 9px; border-top: 1px solid var(--line); line-height: 1.6; background: #152923; }
.right-panel { padding: 23px 21px; border-left: 1px solid var(--line); background: #172823; }
.target-header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }.target-header h2 { font: 28px Georgia,serif; margin: 8px 0; }.tag { font-size: 9px; padding: 4px 7px; border: 1px solid #a3beb040; border-radius: 3px; color: #adc5ad; white-space: nowrap; }.tag.red { color: #d4a58b; border-color: #c18d6544; }.tag.gold { color: var(--gold); border-color: #d6bf8040; }
.target-description { color: #a3b9a7; font-size: 11px; margin: 8px 0 16px; }.target-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 18px; }.target-stat { background: #21352b; border: 1px solid var(--line); padding: 12px; border-radius: 4px; }.target-stat span { display: block; font-size: 9px; color: var(--muted); }.target-stat strong { font: 22px Georgia,serif; color: #e0dabd; display: block; margin: 5px 0; }
.divider { border-top: 1px solid var(--line); margin: 19px 0; }.target-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.section-label h3 { font-size: 12px; }
.strategy { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 4px; background: #1f332a; margin-top: 9px; padding: 13px; }.strategy:hover:not(:disabled) { border-color: #d6bf8070; background: #2b3c2d; }.strategy.selected { border-color: var(--gold); }.strategy .number { font: 9px Consolas,monospace; color: var(--gold); margin-right: 7px; }.strategy h3 { display: inline; font-size: 12px; }.strategy p { margin-top: 7px; font-size: 10px; color: #9fb4a0; line-height: 1.65; }.strategy-meta { display: flex; gap: 12px; margin-top: 9px; font-size: 9px; color: #d8ceaf; }.strategy-block { margin-top: 7px; color: #c5a88b; font-size: 9px; }.operation-hint { font-size: 10px; color: #aebc9e; line-height: 1.7; padding: 10px 12px; background: #253729; border-left: 2px solid var(--gold); margin-top: 13px; }
.income-note { font-size: 10px; color: #92a996; margin-top: 11px; }.log { margin-top: 15px; display: grid; gap: 10px; }.log-entry { border-left: 2px solid #9db79040; padding-left: 10px; font-size: 10px; color: #a7b7a0; }.log-entry span { color: var(--gold); font-size: 9px; }
.render-error { padding: 200px 40px 40px; color: #d8c5a0; }
#map-toast { position: fixed; z-index: 8; bottom: 23px; left: 50%; transform: translateX(-50%); opacity: 0; max-width: 650px; width: max-content; padding: 12px 18px; border: 1px solid #d6bf8050; border-radius: 5px; background: #294434; color: #e9e5c9; font-size: 12px; pointer-events: none; transition: opacity .15s; } #map-toast.visible { opacity: 1; }
dialog { width: min(680px,calc(100% - 35px)); max-height: 90vh; background: #1b2d24; color: var(--text); border: 1px solid #9eae8c55; border-radius: 6px; padding: 0; } dialog::backdrop { background: #07100ccd; backdrop-filter: blur(4px); }
.dialog-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.dialog-header h2 { font: 24px Georgia,serif; }.dialog-body { padding: 24px; }.dialog-body p { font-size: 12px; color: #afc0a7; line-height: 1.85; margin-bottom: 13px; }.dialog-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 17px; }.career-step { padding: 15px 0; border-bottom: 1px solid var(--line); }.career-step h3 { font-size: 14px; }.career-step p { margin: 7px 0 0; font-size: 11px; }.career-step.active h3 { color: var(--gold); }.career-step .tag { display: inline-block; margin-top: 7px; }
input[type="file"] { display: block; width: 100%; margin-top: 12px; font-size: 11px; }
input[type="file"]::file-selector-button { border: 1px solid var(--line); border-radius: 4px; background: #233833; color: var(--text); padding: 9px 12px; margin-right: 10px; cursor: pointer; }
@media(min-width:1600px) { .game-layout { grid-template-columns: 220px minmax(0,1fr) 350px; }.right-panel { padding: 27px; }.map-label { font-size: 10px; } }
@media(max-width:1120px) { .game-layout { grid-template-columns: 165px minmax(0,1fr) 285px; }.right-panel { padding: 20px 17px; }.left-panel { padding: 20px 12px; }.resource { padding: 13px; }.map-top { left: 18px; }.map-top h1 { font-size: 29px; }.map-badge { display: none; }.map-label { font-size: 7px; } }
@media(max-width:900px) { .game-layout { grid-template-columns: minmax(0,1fr) 290px; }.left-panel { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }.rank-card { display: none; }.district-list { grid-template-columns: repeat(4,minmax(0,1fr)); }.district-header { margin-top: 0; } #map-canvas { min-height: 620px; height: 72vh; }.map-controls { bottom: 105px; }.map-legend { bottom: 105px; }.resources { padding: 0 10px; }.topbar { padding: 13px 18px; gap: 14px; } }
@media(max-width:640px) { .topbar { flex-wrap: wrap; gap: 12px; }.logo { padding-right: 15px; }.campaign-heading { min-width: 150px; }.top-actions { width: 100%; }.resources { grid-template-columns: repeat(5,1fr); padding: 0 3px; }.resource { padding: 9px 7px; }.resource strong { font-size: 19px; }.resource span { font-size: 7px; }.resource small { font-size: 8px; display: block; margin-left: 0; }.game-layout { display: flex; flex-direction: column; }.map-area { order: 1; }.right-panel { order: 2; border-top: 1px solid var(--line); }.left-panel { order: 3; } #map-canvas { height: 64vh; min-height: 470px; }.map-top h1 { font-size: 29px; }.map-top p { max-width: 220px; }.map-controls { bottom: 97px; right: 13px; }.map-legend { bottom: 96px; left: 17px; }.map-caption { font-size: 8px; }.map-label { font-size: 8px; }.district-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.strategy p { font-size: 12px; }.strategy-meta { font-size: 11px; } #map-toast { max-width: calc(100% - 30px); width: max-content; }.target-description { font-size: 12px; } }
@media(prefers-reduced-motion:reduce) { * { transition: none !important; } }
.budget-resource strong { color: #e6ce8d; font-variant-numeric: tabular-nums; font-size: 23px; white-space: nowrap; }
.leader-card { margin-top: 17px; padding: 13px; border: 1px solid #a59f7355; border-radius: 5px; background: #1f322a; }
.team-card { margin-top: 13px; padding: 12px; border: 1px solid #8ea98255; border-radius: 5px; background: #20372d; }.team-card p { color: #aebda5; font-size: 10px; line-height: 1.7; margin: 7px 0 10px; }.team-card strong { color: #e0d4ae; }
.leader-header { display: flex; align-items: center; gap: 10px; }.leader-header > div:last-child { min-width: 0; }.leader-header strong { display: block; color: #e4d7b4; font: 17px Georgia,serif; }.leader-header span { display: block; color: #a7b5a1; font-size: 10px; margin-top: 4px; }
.leader-avatar { width: 44px; height: 55px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #9a8c6270; background: linear-gradient(150deg,#4c5842,#233a31); color: #e3c98a; font: 20px Georgia,serif; letter-spacing: 2px; }
.leader-card.captured { border-color: #91b68b77; }.leader-card.captured .leader-avatar { color: #b9d9aa; }.leader-header .leader-status { color: #d2bd86; font-size: 9px; }
.leader-card p { font-size: 10px; color: #abb99d; margin-top: 10px; line-height: 1.7; }.leader-weakness { margin: 10px 0; padding: 7px 9px; background: #d6bf8010; border-left: 2px solid #bdac72; color: #d8cda5; font-size: 10px; line-height: 1.6; }
.roster-total { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 9px; font-size: 10px; color: #b1bea5; }.roster-total strong { font: 18px Georgia,serif; color: #e1cf9f; }.roster-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.roster-grid > div { padding: 8px 4px; text-align: center; background: #12282066; border-radius: 3px; }.roster-grid strong { display: block; font-size: 15px; color: #dfd8bf; }.roster-grid span { display: block; margin-top: 4px; font-size: 8px; color: #8fa58d; }.leader-card .roster-note { font-size: 8px; color: #8ba28d; }
.strategy-bonus { margin-top: 8px; font-size: 9px; color: #d4cf94; }.funding-alert { color: #e3ab85; font-size: 11px; padding: 9px; background: #51332966; margin-bottom: 12px; }
.map-label.has-team { border: 1px solid #d6bf80aa; }.map-label.has-team::after { color: #e3d18d; }
.funding-summary { padding: 17px; background: #233b2c; border: 1px solid #b7aa7155; border-radius: 4px; margin: 18px 0; }.funding-summary span,.funding-summary small { display: block; font-size: 11px; color: #aebba0; }.funding-summary strong { display: block; margin: 9px 0; color: #e1c980; font: 29px Georgia,serif; }
@media(max-width:640px) { .budget-resource strong { font-size: 15px; }.leader-card p { font-size: 12px; }.roster-grid span { font-size: 10px; } }