:root {
  --ink: #e8e3d6; --muted: #a9b0ad; --panel: rgba(25, 31, 31, .94);
  --panel-strong: #151b1b; --line: rgba(219, 207, 174, .2);
  --accent: #c99a4a; --accent-dark: #8d672c; --success: #5f9b72;
  --top-height: 0px; --nav-height: 66px; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: #182322; }
button, select, input { font: inherit; }
.game { position: relative; min-height: 100vh; }
#world-map { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; cursor: grab; touch-action: none; }
#world-map.dragging { cursor: grabbing; }

.top-stat { display: grid; gap: 2px; }
.top-stat small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.top-stat strong { white-space: nowrap; }
.top-resources { display: grid; gap: 6px; }
.resource-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; white-space: nowrap; border: 1px solid var(--line); background: rgba(255,255,255,.035); font-size: .82rem; }
.resource-icon { width: 1.2em; text-align: center; }

.my-city-panel { position: fixed; top: 14px; bottom: calc(var(--nav-height) + 14px); left: 14px; z-index: 4; width: 270px; padding: 16px; overflow-y: auto; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.24); backdrop-filter: blur(8px); transition: width 160ms ease, height 160ms ease; }
.my-city-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.my-city-heading h2 { margin: 2px 0 12px; font: 600 1.25rem Georgia, serif; }
.my-city-heading button { flex: none; width: 34px; padding: 4px; }
.my-city-content { display: grid; gap: 12px; }
.player-info-content { display: grid; gap: 9px; }
.player-info-content p { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.player-info-content strong { color: var(--ink); }
.player-info-buildings { display: grid; gap: 5px; margin: 4px 0; padding: 0; list-style: none; }
.player-info-buildings li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid var(--line); }
.city-stat { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.city-stat small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.my-city-panel[data-minimized="true"] { bottom: auto; width: 58px; height: 58px; padding: 11px; overflow: hidden; }
.my-city-panel[data-minimized="true"] .my-city-content,
.my-city-panel[data-minimized="true"] .player-info-content,
.my-city-panel[data-minimized="true"] .my-city-heading > div { display: none; }
.my-city-panel[data-minimized="true"] .my-city-heading { margin: 0; border: 0; }

.map-controls { position: fixed; top: calc(var(--top-height) + 12px); left: 50%; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 5px 7px; transform: translateX(-50%); border: 1px solid var(--line); background: rgba(21,27,27,.86); color: var(--muted); font-size: .75rem; }
.map-control-button { flex: none; width: 30px; min-height: 28px; padding: 3px; }
.game[data-phase="lobby"] .map-controls,
.game[data-phase="countdown"] .map-controls { display: none; }

.detail-panel, .match-panel { z-index: 3; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.24); backdrop-filter: blur(8px); }
.detail-panel { position: fixed; top: calc(var(--top-height) + 14px); right: 14px; bottom: calc(var(--nav-height) + 14px); width: min(460px, calc(100vw - 28px)); padding: 16px; overflow-y: auto; }
.market-panel { bottom: 316px; }
.trade-log-panel { top: auto; height: 222px; }
.panel-heading { margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 2px 0 12px; font: 600 1.25rem Georgia, serif; }
.eyebrow { color: var(--accent); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
h2, h3 { margin-top: 0; }
h3 { font-size: .95rem; }
.city-overview { display: grid; gap: 8px; }
.city-overview p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.city-overview strong { color: var(--ink); }
.economy-tick { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.economy-tick-heading { display: flex; justify-content: space-between; align-items: center; }
.economy-tick-heading small, .economy-tick p { color: var(--muted); }
.economy-tick-heading strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.economy-tick-track { height: 6px; overflow: hidden; background: rgba(255,255,255,.09); }
.economy-tick-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #709c72, #c4a45b); transition: width 80ms linear; }
.economy-tick p { margin: 0; font-size: .78rem; line-height: 1.35; }

.buildings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.building-category-tabs { display: none; gap: 6px; margin-bottom: 10px; }
.building-category-tabs button { flex: 1; color: var(--muted); background: rgba(255,255,255,.035); border-color: var(--line); }
.building-category-tabs button[aria-selected="true"] { color: #fff4d5; border-color: var(--accent); background: rgba(201,154,74,.18); }
.game[data-detail-mode="build"] .building-category-tabs { display: flex; }
.game[data-detail-mode="build"] .worker-controls { display: none; }
.game[data-detail-mode="workers"] .build-button,
.game[data-detail-mode="workers"] .demolish-building-button,
.game[data-detail-mode="workers"] .building-category-tabs { display: none; }
.building-card { padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.building-card h3 { margin: 0 0 7px; font-size: .95rem; }
.building-card p { margin: 6px 0; color: var(--muted); font-size: .78rem; }
.contracts { display: grid; gap: 10px; }
.contract-card { padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.contract-card h3 { margin: 0 0 6px; font-size: .95rem; }
.contract-card p { margin: 5px 0; color: var(--muted); font-size: .8rem; }
.contract-card[data-completed="true"] { opacity: .65; border-color: #4f7d5a; }
.worker-controls { display: grid; gap: 7px; margin-top: 8px; }
.worker-summary { font-size: .72rem; color: var(--muted); }
.worker-summary strong { color: var(--ink); }
.worker-summary .worker-starved { color: #e58b80; }
.worker-target-slider { width: 100%; accent-color: var(--success); cursor: grab; }
.worker-target-slider:active { cursor: grabbing; }
.worker-batch-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.worker-batch-actions button { min-width: 0; min-height: 27px; padding: 3px 2px; font-size: .64rem; }
.game[data-detail-mode="build"] .building-card[data-buildable="false"],
.game[data-detail-mode="build"][data-building-category="production"] .building-card[data-building-category="economic"],
.game[data-detail-mode="build"][data-building-category="economic"] .building-card[data-building-category="production"],
.game[data-detail-mode="workers"] .building-card[data-worker-assignable="false"] { display: none; }

.resources { display: grid; gap: 6px; }
.market-row { display: grid; grid-template-columns: minmax(90px, 1fr) 82px 190px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.commodity-identity { display: grid; grid-template-columns: 28px 1fr; align-items: center; }
.commodity-icon { grid-row: 1 / 3; font-size: 1.2rem; }
.commodity-identity small, .commodity-quote small { color: var(--muted); font-size: .68rem; }
.commodity-quote { display: grid; text-align: right; }
.commodity-quote strong { font-size: 1.05rem; }
.market-row[data-trend="up"] .commodity-quote small { color: #d49a71; }
.market-row[data-trend="down"] .commodity-quote small { color: #74b88a; }
.market-actions { display: flex; gap: 5px; }
.market-actions button { flex: 1; padding-inline: 6px; font-size: .74rem; }
.market-batch { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 38px; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.market-presets { display: flex; gap: 4px; }
.market-presets button { min-height: 26px; padding: 3px 7px; color: var(--muted); background: rgba(255,255,255,.06); font-size: .7rem; }
.trade-amount-slider { width: 100%; accent-color: var(--accent); cursor: grab; }
.trade-amount-slider:active { cursor: grabbing; }
.trade-amount-output { text-align: right; color: var(--ink); font-size: .76rem; font-variant-numeric: tabular-nums; }
.trade-batch-preview { grid-column: 1 / -1; color: var(--muted); font-size: .67rem; }

.age-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.age-progress-track { flex: 1; height: 9px; overflow: hidden; border: 1px solid var(--line); background: #0f1414; }
#age-progress-bar { display: block; width: 0; height: 100%; background: var(--accent); transition: width 180ms ease; }
#age-progress-value { min-width: 38px; text-align: right; }
.requirement-list { display: grid; gap: 5px; margin: 0 0 16px; padding: 0; list-style: none; }
.requirement-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.requirement-met > span:first-child { color: var(--success); }
.requirement-missing > span:first-child { color: #c96e63; }

button { min-height: 34px; padding: 7px 10px; border: 1px solid transparent; border-radius: 2px; color: #fff9e8; background: var(--accent-dark); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, opacity 120ms ease; }
button:hover:not(:disabled) { background: var(--accent); border-color: #efd49a; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .38; }
.build-button { width: 100%; background: #3f724e; }
.build-button:hover:not(:disabled) { background: var(--success); }
.demolish-building-button { width: 100%; margin-top: 0.45rem; background: #9f3a38; }
.demolish-building-button:hover:not(:disabled) { background: #c2413d; }
.sell-button { background: #4c5555; }
.sell-button:hover:not(:disabled) { background: #657070; }
.trade-route-panel select, .trade-route-panel input { width: 100%; margin: 5px 0 9px; padding: 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--panel-strong); }
#advance-age-button, #create-trade-route-button, #dispatch-caravan-button { width: 100%; }
#message, #city-message, #evolution-status, #trade-route-message { min-height: 1.2rem; margin-bottom: 0; color: var(--muted); font-size: .8rem; }
#trade-log, #trade-routes, #caravan-shipments, #npc-markets { margin: 0; padding-left: 20px; font-size: .8rem; }
#trade-log li, #trade-routes li, #caravan-shipments li, #npc-markets li { padding: 6px 0; border-bottom: 1px solid var(--line); }
#empty-log-message { color: var(--muted); }

.bottom-nav { position: fixed; right: 50%; bottom: 10px; z-index: 5; display: flex; gap: 2px; padding: 5px; transform: translateX(50%); border: 1px solid var(--line); background: rgba(16,22,22,.96); box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.bottom-nav button { display: grid; place-items: center; gap: 2px; min-width: 78px; padding: 5px 10px; color: var(--muted); background: transparent; font-size: .72rem; }
.bottom-nav button span { font-size: 1rem; }
.bottom-nav button[aria-pressed="true"] { color: #fff4d5; border-color: var(--accent-dark); background: rgba(201,154,74,.18); }

.notification-stack { position: fixed; top: calc(var(--top-height) + 14px); left: 50%; z-index: 10; display: grid; gap: 7px; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.procedural-debug { position: fixed; top: calc(var(--top-height) + 12px); left: 280px; z-index: 12; display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); background: var(--panel-strong); }
.procedural-debug select, .procedural-debug button { min-height: 30px; padding: 4px 7px; }
.game-notification { padding: 10px 14px; border-left: 3px solid var(--accent); background: rgba(17,22,22,.96); box-shadow: 0 6px 18px rgba(0,0,0,.3); color: var(--ink); font-size: .82rem; animation: notification-in 160ms ease-out; }
.notification-success { border-left-color: var(--success); }
.notification-error { border-left-color: #c96e63; }
.notification-leaving { opacity: 0; transform: translateY(-5px); transition: opacity 300ms ease, transform 300ms ease; }
.value-increase { animation: value-increase 480ms ease; }
.value-decrease { animation: value-decrease 480ms ease; }
.price-rise { animation: price-rise 480ms ease; }
.price-fall { animation: price-fall 480ms ease; }

@keyframes notification-in { from { opacity: 0; transform: translateY(-7px); } }
@keyframes value-increase { 40% { color: #8fd2a3; text-shadow: 0 0 10px rgba(95,155,114,.65); } }
@keyframes value-decrease { 40% { color: #e58b80; text-shadow: 0 0 10px rgba(184,103,92,.65); } }
@keyframes price-rise { 40% { border-color: #d49a71; background: rgba(180,92,55,.14); } }
@keyframes price-fall { 40% { border-color: #74b88a; background: rgba(70,135,88,.14); } }

.match-panel { position: fixed; top: 50%; left: 50%; width: min(90vw, 420px); padding: 28px; text-align: center; transform: translate(-50%,-50%); }
.match-panel h1 { margin-top: 0; font: 700 2rem Georgia, serif; }

@media (max-width: 900px) {
  .detail-panel { width: min(420px, calc(100vw - 28px)); }
  .bottom-nav button { min-width: 60px; }
}

@media (max-width: 650px) {
  :root { --top-height: 0px; --nav-height: 58px; }
  .my-city-panel { top: 8px; bottom: calc(var(--nav-height) + 8px); left: 8px; width: min(280px, 82vw); padding: 12px; }
  .detail-panel { top: calc(var(--top-height) + 8px); right: 8px; bottom: calc(var(--nav-height) + 8px); width: min(360px, 82vw); padding: 12px; }
  .market-panel { bottom: calc(var(--nav-height) + 8px); }
  .trade-log-panel { display: none !important; }
  .buildings { grid-template-columns: 1fr; }
  .market-row { grid-template-columns: 1fr 80px; }
  .market-actions { grid-column: 1 / -1; }
  .bottom-nav { right: 6px; left: 6px; bottom: 5px; transform: none; overflow-x: auto; }
  .bottom-nav button { min-width: 58px; padding-inline: 6px; }
  .map-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}