:root {
  color-scheme: dark;
  --bg: #080808;
  --bg-deep: #050505;
  --surface: #111111;
  --surface-2: #171717;
  --surface-3: #202020;
  --line: #2e2e2e;
  --line-bright: #555555;
  --text: #f7f4eb;
  --muted: #aaa79f;
  --faint: #6b6964;
  --primary: #f3c62f;
  --primary-strong: #c39b0c;
  --accent: #fff6c5;
  --danger: #f0e2bf;
  --title-wash: rgba(243, 198, 47, .11);
  --grid-wash: rgba(255, 255, 255, .1);
  --map-ocean: #0b0b0b;
  --map-grid: #242424;
  --map-stroke: #727272;
  --map-selected: #f3c62f;
  --map-label: #f7f4eb;
  --map-neutral: #4b4b4b;
  --map-ally: #c6a72e;
  --map-tension: #d8d8d8;
  --map-supply: #8a8a8a;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --radius: 5px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .55);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.screen { min-height: 100vh; }

.title-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 7vh max(8vw, 28px); background: radial-gradient(circle at 79% 30%, var(--title-wash), transparent 29%), var(--bg-deep); }
.title-grid { position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(var(--grid-wash) 1px, transparent 1px), linear-gradient(90deg, var(--grid-wash) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, black, transparent 78%); }
.title-screen::after { content: ""; position: absolute; right: 7vw; bottom: 11vh; width: min(42vw, 480px); aspect-ratio: 1; border: 1px solid var(--primary); opacity: .28; border-radius: 50%; box-shadow: 0 0 0 50px var(--title-wash), 0 0 0 100px rgba(243, 198, 47, .04); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--primary); color: var(--primary); font-family: var(--serif); font-size: 13px; letter-spacing: -.08em; line-height: 1; }
.brand-kicker, .eyebrow, .section-label, .summary-label { display: block; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.brand strong, .brand h1 { display: block; margin: 3px 0 0; font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: .02em; }
.brand-title { position: relative; z-index: 1; align-self: flex-start; }.brand-title .brand-mark { width: 48px; height: 48px; font-size: 15px; }.brand-title h1 { font-size: 24px; }
.title-copy { position: relative; z-index: 1; max-width: 690px; margin: 14vh 0 38px; }.eyebrow { margin-bottom: 24px; color: var(--primary); }.title-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 7vw, 92px); font-weight: 400; letter-spacing: -.055em; line-height: .94; }.title-copy h2 em { color: var(--primary); font-style: normal; }.title-copy p:not(.eyebrow) { max-width: 505px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }.title-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 46px; border: 1px solid transparent; border-radius: var(--radius); padding: 0 20px; font-weight: 800; transition: background .2s, border-color .2s, transform .2s; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--primary); color: var(--bg-deep); }.button-primary:hover { background: var(--accent); }.button-ghost { border-color: var(--line-bright); background: transparent; color: var(--text); }.button-ghost:hover { border-color: var(--primary); background: rgba(243, 198, 47, .08); }.button-large { min-height: 54px; padding: 0 25px; }.button-wide { width: 100%; margin-top: 28px; }.button-arrow { font-size: 20px; font-weight: 400; }.version { position: relative; z-index: 1; margin-top: auto; color: var(--faint); font-size: 10px; letter-spacing: .16em; }

.setup-screen, .settings-screen { background: var(--bg-deep); padding: 36px max(5vw, 22px); }.setup-wrap { max-width: 1180px; margin: 0 auto; }.screen-header { display: flex; align-items: center; gap: 17px; margin-bottom: 42px; }.screen-header h1 { margin: 7px 0 0; font-family: var(--serif); font-size: clamp(29px, 4vw, 48px); font-weight: 400; letter-spacing: -.03em; }.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 21px; line-height: 1; }.icon-button:hover { border-color: var(--primary); color: var(--primary); }.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 60px; }.section-label { color: var(--muted); }.section-gap { margin-top: 36px; }.year-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }.year-choice { min-width: 100px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); text-align: left; }.year-choice strong { display: block; color: var(--text); font-family: var(--serif); font-size: 25px; font-weight: 400; }.year-choice span { display: block; margin-top: 4px; font-size: 11px; }.year-choice:hover, .year-choice.active { border-color: var(--primary); background: rgba(243, 198, 47, .1); }.year-choice.active strong { color: var(--primary); }.difficulty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }.difficulty-choice { min-height: 78px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }.difficulty-choice strong { display: block; color: var(--text); }.difficulty-choice small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; }.difficulty-choice:hover, .difficulty-choice.active { border-color: var(--primary); background: rgba(243, 198, 47, .08); }.difficulty-choice.active strong { color: var(--primary); }.country-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 9px; margin-top: 14px; }.country-choice { display: flex; align-items: center; gap: 9px; min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }.country-choice:hover, .country-choice.active { border-color: var(--primary); background: rgba(243, 198, 47, .09); }.country-choice img { width: 28px; height: 19px; object-fit: cover; border: 1px solid var(--line-bright); }.country-choice strong { display: block; font-size: 12px; }.country-choice small { display: block; margin-top: 3px; color: var(--muted); }.setup-summary { align-self: start; padding: 27px; border: 1px solid var(--line); background: linear-gradient(150deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); }.summary-year { margin: 26px 0 18px; color: var(--primary); font-family: var(--serif); font-size: 68px; line-height: .8; }.summary-divider { height: 1px; margin: 23px 0; background: var(--line); }.summary-row { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; color: var(--muted); font-size: 12px; }.summary-row strong { color: var(--text); text-align: right; }.summary-note { margin: 18px 0 0; color: var(--faint); font-size: 11px; line-height: 1.55; }
.settings-screen { display: grid; place-items: center; }.settings-card { width: min(100%, 620px); padding: clamp(24px, 5vw, 55px); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }.settings-card .screen-header { margin-bottom: 35px; }.settings-list { margin-bottom: 28px; border-top: 1px solid var(--line); }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); cursor: pointer; }.setting-row strong, .setting-row small { display: block; }.setting-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }.toggle { appearance: none; width: 42px; height: 23px; flex: 0 0 auto; border: 1px solid var(--line-bright); border-radius: 20px; background: var(--bg-deep); transition: .2s; }.toggle::before { content: ""; display: block; width: 17px; height: 17px; margin: 2px; border-radius: 50%; background: var(--muted); transition: .2s; }.toggle:checked { border-color: var(--primary); background: var(--primary-strong); }.toggle:checked::before { transform: translateX(18px); background: var(--bg-deep); }

.game-screen { position: relative; min-height: 100vh; height: 100vh; overflow: hidden; background: var(--bg-deep); }.game-topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 190px 1fr auto auto; align-items: center; gap: 18px; min-height: 66px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(8, 8, 8, .94); }.brand.compact .brand-mark { width: 33px; height: 33px; font-size: 11px; }.brand.compact .brand-kicker { font-size: 8px; }.brand.compact strong { font-size: 15px; }.global-nav { display: flex; justify-content: center; gap: 4px; min-width: 0; }.global-nav-button { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; }.global-nav-button b { color: var(--faint); font-size: 16px; font-weight: 400; }.global-nav-button:hover, .global-nav-button.active { border-color: var(--line-bright); background: rgba(243, 198, 47, .09); color: var(--primary); }.global-nav-button.active b { color: var(--primary); }.time-controls { display: flex; align-items: center; gap: 3px; }.date-chip { margin-right: 6px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .11em; white-space: nowrap; }.approval-chip { padding: 5px 7px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }.time-button, .pause-button { min-width: 30px; height: 30px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); font-size: 11px; }.time-button:hover, .time-button.active, .pause-button:hover, .pause-button.paused { border-color: var(--primary); color: var(--primary); background: rgba(243, 198, 47, .1); }.pause-button { margin-left: 4px; border-color: var(--line); font-weight: 800; }.topbar-actions { display: flex; align-items: center; gap: 8px; }.top-action { min-height: 33px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; }.top-action:hover { border-color: var(--line); color: var(--text); }.top-action b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 5px; border-radius: 50%; background: var(--primary); color: var(--bg-deep); font-size: 9px; }.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--primary); border-radius: 50%; background: rgba(243, 198, 47, .1); color: var(--primary); font-size: 9px; font-weight: 800; }
.map-stage { position: absolute; inset: 66px 0 0; background: var(--map-ocean); }.world-map { display: block; width: 100%; height: 100%; }.ocean { fill: var(--map-ocean); }.graticule path { fill: none; stroke: var(--map-grid); stroke-width: 1; opacity: .75; stroke-dasharray: 3 8; }.country-region { stroke: var(--map-stroke); stroke-width: .65; cursor: pointer; transition: fill .2s, stroke .2s, filter .2s; vector-effect: non-scaling-stroke; }.country-region:hover { stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(243, 198, 47, .35)); }.country-region.selected { stroke: var(--map-stroke); stroke-width: .65; filter: none; }.map-overlay { position: absolute; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); background: rgba(8, 8, 8, .78); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.map-overlay.top-left { top: 18px; left: 18px; }.map-overlay.top-left strong { margin-left: 16px; color: var(--primary); font-size: 9px; }.map-overlay.bottom-left { left: 18px; bottom: 18px; gap: 14px; }.map-key { display: inline-flex; align-items: center; gap: 6px; }.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }.map-mode-switch { position: absolute; z-index: 2; top: 18px; right: 18px; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); background: rgba(8, 8, 8, .82); }.tool-button { padding: 8px 10px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); font-size: 10px; }.tool-button:hover, .tool-button.active { border-color: var(--line-bright); color: var(--primary); background: var(--surface); }.map-hint { position: absolute; right: 18px; bottom: 18px; color: var(--faint); font-size: 10px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }.legend-dot.self { background: var(--primary); }.legend-dot.ally { background: var(--map-ally); }.legend-dot.tension { background: var(--map-tension); }
.country-panel, .action-panel { position: absolute; z-index: 4; top: 80px; right: 18px; width: 315px; max-height: calc(100vh - 98px); overflow-y: auto; padding: 19px; border: 1px solid var(--line-bright); background: rgba(17, 17, 17, .96); box-shadow: var(--shadow); }.action-panel { left: 18px; right: auto; width: min(490px, calc(100vw - 36px)); }.panel-top { display: flex; align-items: center; justify-content: space-between; }.panel-top .section-label { color: var(--faint); }.country-hero { display: grid; grid-template-columns: 46px 1fr; gap: 5px 11px; margin: 22px 0 17px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.country-flag { grid-row: span 2; width: 46px; height: 31px; object-fit: cover; align-self: start; border: 1px solid var(--line-bright); }.country-hero h2 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.05; }.country-hero p { margin: 0; color: var(--muted); font-size: 11px; }.country-code { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .16em; }.country-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0 20px; }.country-stat { padding: 10px; border: 1px solid var(--line); background: rgba(8, 8, 8, .45); }.country-stat span { display: block; color: var(--faint); font-size: 9px; }.country-stat strong { display: block; margin-top: 4px; font-size: 12px; line-height: 1.25; }.panel-section { margin-top: 20px; }.panel-section h4 { margin: 0 0 10px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }.opinion-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 11px; }.opinion-row span { color: var(--muted); }.opinion-value { color: var(--primary); }.opinion-meter { height: 3px; margin-top: 4px; background: var(--bg-deep); }.opinion-meter i { display: block; height: 100%; background: var(--primary); }.panel-actions { display: grid; gap: 7px; margin-top: 20px; }.panel-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--text); text-align: left; font-size: 11px; }.panel-action:hover { border-color: var(--primary); color: var(--primary); }.panel-action.danger:hover { border-color: var(--danger); color: var(--danger); }
.action-panel .tab-heading { display: block; margin: 23px 0 14px; }.action-panel .tab-heading h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 25px; font-weight: 400; }.action-panel .tab-heading p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.info-card { min-height: 132px; padding: 13px; border: 1px solid var(--line); background: var(--surface); }.info-card:hover { border-color: var(--primary); }.info-card .card-icon { color: var(--primary); font-size: 18px; }.info-card strong { display: block; margin-top: 9px; font-size: 12px; }.info-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }.action-card { display: flex; flex-direction: column; justify-content: space-between; gap: 11px; }.mini-button { align-self: flex-start; padding: 7px 9px; border: 1px solid var(--line-bright); border-radius: 3px; background: transparent; color: var(--primary); font-size: 10px; }.mini-button:hover { background: rgba(243, 198, 47, .1); }
.news-drawer { position: absolute; z-index: 6; top: 80px; right: 18px; width: min(360px, calc(100vw - 36px)); max-height: calc(100vh - 98px); overflow-y: auto; padding: 19px; border: 1px solid var(--line-bright); background: rgba(17, 17, 17, .97); box-shadow: var(--shadow); }.news-item { padding: 15px 0; border-bottom: 1px solid var(--line); }.news-item time { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.news-item strong { display: block; margin-top: 6px; font-size: 12px; }.news-item p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: 340px; padding: 13px 16px; border: 1px solid var(--primary); border-radius: 4px; background: var(--surface-2); box-shadow: var(--shadow); color: var(--text); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }.toast.visible { opacity: 1; transform: translateY(0); }
.map-zoom-controls { position: absolute; z-index: 3; left: 18px; top: 18px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); background: rgba(8, 8, 8, .86); color: var(--primary); font-size: 10px; font-weight: 800; }
.map-zoom-button { min-width: 30px; height: 30px; border: 1px solid transparent; background: transparent; color: var(--text); font-size: 18px; line-height: 1; }
.map-zoom-button:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }.map-zoom-button.reset { padding: 0 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.map-tooltip { position: absolute; z-index: 7; min-width: 190px; max-width: 270px; padding: 10px 12px; border: 1px solid var(--primary); background: rgba(8, 8, 8, .96); box-shadow: var(--shadow); pointer-events: none; }.map-tooltip strong, .map-tooltip span { display: block; }.map-tooltip strong { color: var(--text); font-family: var(--serif); font-size: 16px; }.map-tooltip span { margin-top: 5px; color: var(--primary); font-size: 10px; line-height: 1.4; }
.city-marker { pointer-events: none; opacity: .78; }.city-marker circle { fill: var(--primary); stroke: var(--bg-deep); stroke-width: .8; }.city-marker text { fill: var(--text); paint-order: stroke; stroke: var(--bg-deep); stroke-width: 1.6px; font-size: 5.5px; font-weight: 500; letter-spacing: .015em; opacity: .82; }.city-layer-hidden { display: none; }
.city-layer-major .city-marker:not(.major) { display: none; }
.city-marker text { fill: var(--muted); stroke: var(--bg-deep); stroke-width: 1px; paint-order: stroke; opacity: .52; }
.city-marker.major text { fill: var(--text); opacity: .72; }
.city-marker circle { opacity: .48; }
.city-marker circle { r: 1.55px; opacity: .72; }.city-marker text { font-size: 4.35px; font-weight: 500; opacity: .72; }.city-marker.major circle { r: 2px; opacity: .9; }.city-marker.major text { font-size: 4.8px; opacity: .88; }.map-infrastructure { pointer-events: none; }.rail-line { fill: none; stroke: var(--primary); stroke-width: 1.25; stroke-dasharray: 5 3; opacity: .9; vector-effect: non-scaling-stroke; }.build-site { fill: var(--primary); stroke: var(--bg-deep); stroke-width: 1.2; vector-effect: non-scaling-stroke; }.build-site.refinery { fill: var(--accent); }.build-site.airDefense { fill: var(--text); }.build-site.logistics { fill: var(--map-ally); }.build-site.researchCenter { fill: var(--map-supply); }.placement-hint { position: absolute; z-index: 4; left: 50%; top: 18px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); padding: 9px 12px; border: 1px solid var(--primary); background: rgba(8, 8, 8, .94); box-shadow: var(--shadow); color: var(--text); }.placement-hint strong { color: var(--primary); font-size: 9px; letter-spacing: .14em; white-space: nowrap; }.placement-hint span { color: var(--muted); font-size: 10px; white-space: nowrap; }.placement-hint .mini-button { margin-left: 4px; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0, 0, 0, .72); }.decision-modal { width: min(100%, 470px); padding: 22px; border: 1px solid var(--primary); background: var(--surface); box-shadow: var(--shadow); }.decision-modal h2 { margin: 24px 0 10px; font-family: var(--serif); font-size: 29px; font-weight: 400; }.decision-modal p { margin: 0; color: var(--muted); line-height: 1.5; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }.statement-label { display: block; margin: 20px 0 7px; color: var(--muted); font-size: 11px; }.decision-modal textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line-bright); background: var(--bg-deep); color: var(--text); line-height: 1.5; }.decision-modal textarea:focus { border-color: var(--primary); outline: none; }
@media (max-width: 1180px) { .game-topbar { grid-template-columns: 165px 1fr auto; }.topbar-actions { display: none; }.global-nav-button span { display: none; }.global-nav-button { padding: 0 12px; }.time-controls { justify-self: end; } }
@media (max-width: 800px) { .game-screen { height: auto; min-height: 100vh; overflow: visible; }.game-topbar { position: sticky; grid-template-columns: 1fr auto; gap: 8px; }.global-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; order: 3; border-top: 1px solid var(--line); }.global-nav-button span { display: inline; }.global-nav-button { flex: 0 0 auto; min-height: 38px; }.map-stage { position: relative; inset: auto; height: calc(100vh - 116px); min-height: 510px; }.country-panel, .action-panel { top: 78px; max-height: calc(100vh - 98px); }.game-topbar + .map-stage { margin-top: 50px; }.map-mode-switch { top: 68px; left: 12px; right: auto; }.map-overlay.top-left { top: 12px; left: 12px; }.map-overlay.bottom-left { left: 12px; bottom: 12px; }.map-hint { display: none; }.setup-grid { display: block; }.setup-summary { margin-top: 35px; }.country-pick-grid { grid-template-columns: repeat(2, 1fr); }.difficulty-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .title-screen { padding: 35px 22px; }.title-copy { margin-top: 11vh; }.title-copy h2 { font-size: 50px; }.title-copy p:not(.eyebrow) { font-size: 15px; }.title-actions { display: grid; }.button-large { width: 100%; }.setup-screen, .settings-screen { padding: 26px 15px; }.time-controls .date-chip { display: none; }.time-button { min-width: 27px; }.game-topbar { padding: 0 9px; }.brand.compact .brand-kicker { display: none; }.country-panel, .action-panel, .news-drawer { right: 10px; left: 10px; width: auto; }.action-panel { left: 10px; }.card-grid { grid-template-columns: 1fr; }.country-panel { top: 75px; }.map-mode-switch { overflow-x: auto; max-width: calc(100% - 24px); }.map-mode-switch .tool-button { white-space: nowrap; } }
@media (max-width: 560px) { .placement-hint { top: 55px; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; gap: 7px; }.placement-hint span { white-space: normal; text-align: center; }.city-marker text { font-size: 3.8px; } }

/* Clean map chrome and focused decision forms */
.map-overlay.top-left { display: none; }
.settings-select { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--line-bright); border-radius: 3px; background: var(--bg-deep); color: var(--text); }
.brief-field { display: block; margin-top: 15px; color: var(--muted); font-size: 11px; }
.brief-field > span:first-child { display: block; margin-bottom: 7px; }
.brief-field input:not([type="checkbox"]), .brief-field select, .brief-field textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line-bright); border-radius: 3px; background: var(--bg-deep); color: var(--text); }
.brief-field textarea { resize: vertical; }
.brief-field input:focus, .brief-field select:focus, .brief-field textarea:focus, .statement-label select:focus { border-color: var(--primary); outline: none; }
.check-line { display: flex !important; align-items: center; gap: 9px; color: var(--text); }
.check-line input { width: 18px; height: 18px; accent-color: var(--primary); }
.statement-label select { display: block; width: 100%; margin-top: 7px; min-height: 38px; padding: 0 9px; border: 1px solid var(--line-bright); background: var(--bg-deep); color: var(--text); }
.news-empty { color: var(--muted); line-height: 1.5; }
.election-polling { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.polling-row { display: grid; grid-template-columns: 1fr 82px 38px; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.polling-row b { color: var(--primary); text-align: right; }
.polling-meter { height: 4px; background: var(--bg-deep); }
.polling-meter i { display: block; height: 100%; background: var(--primary); }
@media (max-width: 560px) { .decision-modal { padding: 17px; }.settings-select { max-width: 130px; } }

.statecraft-grid { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.statecraft-grid .info-card { min-height: 148px; }

.country-overview { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.country-profile-note { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.country-stat-grid-wide { grid-template-columns: repeat(2, 1fr); margin: 13px 0 0; }
.country-stat-grid-wide .country-stat { min-height: 54px; }
.force-section { padding-top: 15px; border-top: 1px solid var(--line); }
.force-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.force-card { padding: 10px 7px; border: 1px solid var(--line); background: rgba(8, 8, 8, .42); text-align: center; }
.force-card strong { display: block; color: var(--primary); font-family: var(--serif); font-size: 21px; font-weight: 400; }
.force-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.region-section { padding-top: 15px; border-top: 1px solid var(--line); }
.country-regions { display: grid; gap: 8px; }
.country-region-row { display: grid; grid-template-columns: 1fr 34px; gap: 7px; color: var(--muted); font-size: 10px; }
.country-region-row b { color: var(--primary); text-align: right; }
.country-region-row .opinion-meter { grid-column: 1 / -1; margin-top: -3px; }
.decision-tree { display: grid; gap: 14px; margin-top: 4px; }
.decision-branch { padding: 11px; border: 1px solid var(--line); background: rgba(8, 8, 8, .36); }
.decision-branch h3 { margin: 0 0 9px; color: var(--primary); font-size: 10px; letter-spacing: .14em; }
.decision-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.decision-node { min-height: 110px; padding: 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--text); text-align: left; }
.decision-node:hover, .decision-node.active { border-color: var(--primary); background: rgba(243, 198, 47, .1); }
.decision-node-level { display: block; color: var(--faint); font-size: 9px; }
.decision-node strong { display: block; margin-top: 11px; font-size: 11px; line-height: 1.2; }
.decision-node small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.35; }
@media (max-width: 560px) { .decision-nodes { grid-template-columns: 1fr; }.decision-node { min-height: 0; }.country-stat-grid-wide { grid-template-columns: 1fr 1fr; } }

.city-layer-major .city-marker:not(.major) { display: none; }
.city-marker text { fill: var(--muted); stroke: none; stroke-width: 0; opacity: .38; font-weight: 400; }
.city-marker.major text { fill: var(--muted); opacity: .48; }
.city-marker circle { fill: var(--muted); stroke: none; opacity: .28; }
.city-marker.major circle { fill: var(--muted); opacity: .42; }
.news-filters { display: flex; gap: 5px; margin: 17px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.news-filters .tool-button { min-height: 34px; }
.news-section-list { max-height: calc(100vh - 260px); overflow-y: auto; }
@media (max-width: 560px) { .approval-chip { display: none; } }

.news-media { display: block; width: 100%; height: 104px; margin-bottom: 10px; overflow: hidden; background: var(--surface-3); filter: saturate(.82) contrast(1.05); opacity: .96; }
.news-illustration { display: block; width: 100%; height: 100%; }
.news-flash-visual { width: 150px; height: 108px; overflow: hidden; background: var(--surface-3); }
.news-flash-visual .news-illustration { width: 100%; height: 100%; }
.news-flash { position: fixed; z-index: 30; top: 50%; left: 50%; display: grid; grid-template-columns: 150px minmax(240px, 360px) 30px; gap: 15px; align-items: start; width: min(620px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--primary); background: rgba(17, 17, 17, .98); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .46), var(--shadow); transform: translate(-50%, -50%); }
.news-flash img, .news-flash-visual { width: 150px; height: 108px; object-fit: cover; filter: saturate(.7); }
.news-flash-copy strong { display: block; margin-top: 5px; font-size: 12px; line-height: 1.25; }
.news-flash-copy p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.news-flash .icon-button { width: 27px; height: 27px; font-size: 17px; }
.diplomacy-target { margin: 18px 0 12px; padding: 12px; border: 1px solid var(--primary); background: rgba(243, 198, 47, .06); }
.diplomacy-target h4 { margin: 5px 0 0; color: var(--text); font-family: var(--serif); font-size: 20px; font-weight: 400; }
.diplomacy-target p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.live-votes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.live-vote { display: grid; gap: 4px; margin-top: 9px; padding: 10px; border: 1px solid var(--line); background: rgba(8, 8, 8, .35); }
.live-vote strong { font-size: 11px; }
.live-vote span { color: var(--muted); font-size: 10px; }
.live-vote small { color: var(--faint); font-size: 9px; }
.vote-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.vote-tally span { color: var(--primary); font-size: 9px; }
@media (max-width: 560px) { .news-flash { top: 50%; left: 50%; right: auto; bottom: auto; grid-template-columns: 84px minmax(0, 1fr) 26px; width: calc(100vw - 20px); }.news-flash img, .news-flash-visual { width: 84px; height: 76px; } }