@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap");

:root {
  color-scheme: dark;
  --ink: #eee9db;
  --muted: #aaa99f;
  --gold: #dfbb5a;
  --green: #6ebc58;
  --panel: rgba(13, 18, 15, 0.94);
  --panel-soft: rgba(17, 23, 20, 0.89);
  --border: rgba(231, 218, 177, 0.13);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --ui-font-size: 14px;
  --ui-spacing: 1;
  --overlay-font-size: 14px; --overlay-heading-size: 15px; --overlay-item-size: 11px; --overlay-small-size: 10px;
  --topbar-font-size: 14px; --topbar-value-size: 17px; --topbar-rate-size: 13px; --topbar-season-size: 16px; --topbar-clock-size: 10px;
  --toolbar-font-size: 14px; --toolbar-item-size: 11px; --toolbar-heading-size: 12px; --toolbar-small-size: 9px;
  --panel-font-size: 14px; --panel-title-size: 20px; --panel-heading-size: 15px; --panel-value-size: 18px; --panel-small-size: 12px; --panel-tooltip-size: 11px; --panel-tooltip-title-size: 13px;
}
html[data-ui-size="compact"] { --ui-font-size: 12px; --ui-spacing: .88; }
html[data-ui-size="large"] { --ui-font-size: 16px; --ui-spacing: 1.14; }

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #182216; color: var(--ink); font: var(--ui-font-size)/1.4 Inter, system-ui, sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hidden { display: none !important; }

.app-shell { height: 100%; display: grid; grid-template-rows: 58px 1fr; }
.topbar {
  z-index: 20; display: grid; grid-template-columns: minmax(530px, 1fr) auto 220px 190px; align-items: center;
  height: 58px; background: linear-gradient(180deg, #121713 0%, #0b0f0c 100%); border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 30px rgba(0,0,0,.38); user-select: none;
}
.resources { display: flex; height: 100%; align-items: stretch; }
.resource { min-width: 112px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border-right: 1px solid rgba(255,255,255,.055); }
.resource-icon { width: 27px; height: 27px; display: grid; place-items: center; color: #2f2816; background: linear-gradient(145deg, #f1d675, #b77c26); border: 2px solid #f4d77b; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(82,45,6,.3), 0 2px 5px #000; font-weight: 900; }
.resource[data-resource="wood"] .resource-icon { border: 0; background: transparent; color: #b5824c; font-size: 25px; transform: rotate(-12deg); box-shadow: none; }
.resource[data-resource="stone"] .resource-icon { border: 0; background: transparent; color: #abb7bc; font-size: 24px; box-shadow: none; }
.resource[data-resource="food"] .resource-icon { background: radial-gradient(circle at 35% 35%, #d56731, #8a281b 70%); border-color: #5a7f33; }
.resource[data-resource="research"] .resource-icon { color: #efe0a5; background: #29362d; border-color: #7c9c75; border-radius: 7px; font-size: 9px; letter-spacing: -.03em; }
.resource[data-resource="people"] .resource-icon { border: 0; background: transparent; box-shadow: none; color: #b99b71; font-size: 24px; }
.resource-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.resource-rate { color: #65b85a; font-size: 13px; margin-left: -4px; }
.season-clock { height: 100%; min-width: 210px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border-inline: 1px solid rgba(255,255,255,.055); }
.sun-icon { color: #f4ce4b; font-size: 32px; line-height: 1; text-shadow: 0 0 14px rgba(247,205,63,.35); }
.sun-icon.night{color:#c6d2e8;text-shadow:0 0 14px rgba(155,184,235,.35)}
.season-clock strong { font-size: 16px; white-space: nowrap; }
.season-clock .clock-time{display:block;margin-top:1px;color:#aaa99f;font-size:10px;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:.08em}
.time-controls, .global-controls { display: flex; gap: 7px; justify-content: center; }
.icon-button, .speed-button, .close-button, .collapse-button { border: 1px solid rgba(255,255,255,.09); background: linear-gradient(#1c221e,#111713); border-radius: 10px; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.icon-button, .speed-button { width: 39px; height: 39px; color: #d7c9aa; font-weight: 700; }
.speed-button { width: 44px; font-size: 11px; letter-spacing: -3px; padding-right: 8px; }
.icon-button:hover, .speed-button:hover, .icon-button.active, .speed-button.active { background: #293126; border-color: rgba(224,190,94,.36); color: #f0d47d; }

.game-stage { position: relative; min-height: 0; overflow: hidden; background: #253a22; }
#gameCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
#gameCanvas.dragging { cursor: grabbing; }
#gameCanvas.building { cursor: crosshair; }
.glass-panel { background: linear-gradient(145deg, rgba(20,27,23,.95), rgba(9,14,11,.93)); border: 1px solid var(--border); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(14px); }

.objectives { position: absolute; left: 18px; top: 20px; width: 270px; padding: 9px 14px 10px; border-radius: 10px; }
.left-hud-stack{position:absolute;left:18px;top:390px;width:270px;display:grid;gap:9px;max-height:calc(100% - 405px);overflow:auto;scrollbar-width:thin}
.status-panel{padding:8px 12px;border-radius:10px}
.status-panel .panel-heading{margin-bottom:6px}
.storage-line{margin:3px 0}.storage-line .line-head{display:flex;justify-content:space-between;font-size:10px;color:#b8bbb1}.storage-bar,.status-bar{height:5px;margin-top:2px;border-radius:99px;overflow:hidden;background:#202622}.storage-bar span,.status-bar span{display:block;height:100%;background:linear-gradient(90deg,#4f8761,#81bd66)}.storage-bar.warn span,.status-bar.warn span{background:#d3a843}.storage-bar.bad span,.status-bar.bad span{background:#c85e4e}.minor-resources{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07);color:#b8bbb1;font-size:10px}.status-metric{margin:6px 0}.status-metric .line-head{display:flex;justify-content:space-between;font-size:10px}.status-foot{display:flex;justify-content:space-between;margin-top:6px;color:#969b93;font-size:10px}
.sound-control{position:relative}.sound-popover{position:absolute;right:0;top:46px;width:185px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#111713;box-shadow:var(--shadow);z-index:50}.sound-popover label{display:block;margin-bottom:6px;color:#aeb2aa;font-size:10px}.sound-popover input{width:100%}
.panel-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 8px; margin-bottom: 10px; }
.panel-heading h2, .drawer h2 { margin: 0; color: #e4c983; font: 15px Marcellus, serif; text-transform: uppercase; letter-spacing: .06em; }
.collapse-button { width: 24px; height: 24px; }
.objective-group + .objective-group { border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; padding-top: 6px; }
.objective-group h3 { margin: 0 0 4px; color: #bbb8aa; font-size: 10px; text-transform: uppercase; }
.objective { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 7px; min-height: 21px; font-size: 11px; }
.objective .check { width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #6f756c; border-radius: 50%; font-size: 9px; }
.objective.done .check { border-color: #52ad48; background: #3b9e3f; color: white; }
.objective .progress { color: #c8c4b8; font-variant-numeric: tabular-nums; }
.objective.active-objective { margin: 2px -5px; padding: 3px 5px; border-radius: 5px; color: #f1e7c9; background: rgba(194,157,70,.12); }.objective.active-objective .check { border-color: #d1aa50; color: #e4c36d; }
.founding-choice,.founding-event { display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(226,193,104,.22); }.founding-choice h3,.founding-event h3 { margin: 0 0 2px; color: #e1c36e; font-size: var(--overlay-item-size); }.founding-event p { margin: 0 0 3px; color: #aaa99f; font-size: var(--overlay-small-size); line-height: 1.35; }.founding-choice button,.founding-event button { display: grid; gap: 2px; padding: 7px 8px; border: 1px solid #3b493d; border-radius: 6px; color: #e8e2d4; background: #172119; text-align: left; cursor: pointer; }.founding-choice button:hover,.founding-event button:hover { border-color: #9f8747; background: #202d22; }.founding-choice small,.founding-event small { color: #929a91; font-size: var(--overlay-small-size); line-height: 1.3; }

.inspector { position: absolute; z-index:18; width: 345px; max-height: calc(100% - 130px); padding: 17px; overflow: auto; border-radius: 13px; }
.inspector-header { display: grid; grid-template-columns: 50px 1fr 32px; align-items: center; gap: 11px; }
.building-mark { width: 48px; height: 48px; display: grid; place-items: center; color: #d7aa68; font: 28px Marcellus, serif; background: rgba(255,255,255,.03); border-radius: 8px; }
.inspector h2 { margin: 0; font: 20px Marcellus, serif; }
.inspector-header p { margin: 2px 0 0; color: var(--muted); }
.close-button { width: 32px; height: 32px; color: #dfc47e; font-size: 22px; }
.description { color: #a9aba3; margin: 12px 0; padding: 11px 0; border-block: 1px solid rgba(255,255,255,.08); }
.section-title { display: flex; justify-content: space-between; margin: 14px 0 8px; font-weight: 600; }
.workers { display: flex; gap: 7px; }
.worker-slot { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 7px; border: 1px solid #66563b; background: #171b17; color: #bd9c6d; font-size: 23px; }
.worker-slot.empty { color: #3e433f; border-color: #262c28; }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.panel-button, .primary-button { min-height: 39px; border: 1px solid #30483a; border-radius: 7px; background: linear-gradient(#24482c,#1e3a25); cursor: pointer; }
.panel-button.secondary { background: #1b2528; border-color: #28363a; }
.panel-button:hover, .primary-button:hover { filter: brightness(1.17); }
.panel-button:disabled { opacity: .35; cursor: not-allowed; }
.stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.stat-row span:last-child { color: #78c868; }
.efficiency { height: 8px; margin: 10px 0; overflow: hidden; border-radius: 99px; background: #202622; }
.efficiency span { display: block; height: 100%; background: linear-gradient(90deg,#518baa,#d6d8cc); }
.costs { display: flex; gap: 8px; margin: 8px 0 10px; }
.cost-chip { flex: 1; padding: 7px 6px; border-radius: 6px; background: #0c110e; text-align: center; font-size: 12px; }
.priority-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 9px; }
.priority-row button { height: 36px; border: 1px solid #263129; background: #101511; border-radius: 7px; cursor: pointer; }
.priority-row button.active { color: #f6da75; border-color: #d1ad39; background: #48441e; }
.panel-button.danger { color: #efb0a6; border-color: #743f37; background: #321c18; }
.panel-button.danger:hover { background: #4a2520; }
.warning-text { color: #e87967; }
.construction-state { margin: 2px 0 12px; padding: 9px 10px; border-left: 3px solid #71ad68; border-radius: 5px; background: rgba(74,119,68,.13); font-weight: 600; }
.construction-state.warning-text { border-left-color: #d0a94e; background: rgba(151,112,42,.13); color: #e0b554; }

.bottom-nav { position: absolute; left: 20px; bottom: 18px; height: 78px; display: flex; padding: 0 4px; border-radius: 10px; }
.nav-item { position: relative; min-width: 98px; padding: 8px 13px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-right: 1px solid rgba(255,255,255,.09); background: transparent; color: #d8d2c2; cursor: pointer; font-size: 11px; }
.nav-item:last-child { border-right: 0; }
.nav-item span { color: #b89361; font-size: 27px; line-height: 1; }
.nav-item.active { color: #f3d788; background: rgba(218,176,75,.09); }
.nav-item kbd { position: absolute; right: 6px; bottom: 4px; border: 0; color: #7f817b; font-size: 9px; }
.build-dock { position: absolute; left: 20px; right: 390px; bottom: 108px; padding: 10px; border-radius: 10px; transition: transform .2s ease, opacity .2s ease; }
.build-dock.hidden-dock { transform: translateY(18px); opacity: 0; pointer-events: none; }
.dock-header { display: flex; justify-content: space-between; padding: 0 4px 8px; color: #8f948c; font-size: 11px; }
.dock-header strong { color: #dbc584; font-size: 12px; text-transform: uppercase; }
.building-list { display: grid; grid-template-columns: repeat(10, minmax(76px, 1fr)); gap: 5px; }
.building-card { min-width: 0; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.018); cursor: pointer; }
.building-card:hover { background: rgba(255,255,255,.06); }
.building-card.active { border-color: #dbb841; background: rgba(181,142,40,.13); box-shadow: inset 0 0 12px rgba(234,195,75,.08); }
.building-card.unavailable { opacity: .42; }
.building-card.resource-shortage { opacity: .66; cursor: pointer; }
.building-card .building-thumb { color: #c18c59; font: 34px Marcellus,serif; line-height: 1; text-shadow: 0 4px 5px #000; }
.building-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.building-card small { color: #8f928b; font-size: 9px; }
.building-card:disabled { pointer-events: auto; }
.building-card small { max-width: 100%; min-height: 20px; padding: 0 2px; overflow: hidden; line-height: 1.15; white-space: normal; }

.drawer { position: absolute; left: 20px; bottom: 108px; width: 470px; min-height: 210px; max-height: 58%; padding: 16px; border-radius: 10px; overflow: auto; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-header button { border: 0; background: transparent; color: #d7bd78; font-size: 22px; cursor: pointer; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.info-tile { padding: 13px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; }
.info-tile small { display: block; color: #979b94; }
.info-tile b { display: block; margin-top: 4px; font-size: 18px; }
.job-line { display: grid; grid-template-columns: 1fr auto; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.07); }
.resident-list { display: grid; gap: 5px; max-height: 240px; overflow: auto; }
.resident-line { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.resident-line:hover { background: rgba(255,255,255,.07); }
.resident-line span, .resident-line small { display: block; }
.resident-line small { color: #8f948c; }
.resident-line strong { color: #79be6e; }.resident-line strong.low { color: #dc7465; }
.resident-summary { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.035); }
.resident-summary strong { color: #e5c968; font-size: 28px; }.resident-summary span { color: #a7aba4; }
.need-row { margin: 8px 0; }.illness-box { display: grid; gap: 3px; margin: 10px 0; padding: 10px; border-left: 3px solid #cf6555; background: rgba(133,53,45,.16); }.illness-box span { color: #c8aaa5; font-size: 11px; }
.trade-policies { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.trade-policies label { display: grid; gap: 3px; color: #aeb2aa; font-size: 10px; }.trade-policies select { padding: 6px; border: 1px solid #344238; border-radius: 5px; color: #e3ded2; background: #111812; }
.farm-crop-select { width: 100%; padding: 8px 10px; border: 1px solid #526443; border-radius: 6px; color: #eee6d2; background: #111912; cursor: pointer; }
.crop-description { margin: 7px 0 2px; color: #aeb5a8; font-size: 11px; line-height: 1.4; }
.crop-description small { display: block; margin-top: 3px; color: #7f887e; }
.settings-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(4,7,6,.76); backdrop-filter: blur(5px); }
.settings-card { position: relative; width: min(900px, calc(100vw - 40px)); height: min(650px, calc(100vh - 40px)); display: grid; grid-template-columns: 210px 1fr; overflow: hidden; border: 1px solid rgba(232,220,180,.15); border-radius: 14px; background: #111713; box-shadow: 0 28px 90px #000c; }
.settings-sidebar { padding: 24px 12px; background: #0b100d; border-right: 1px solid rgba(255,255,255,.07); }
.settings-sidebar h2 { margin: 0 10px 20px; color: #e0bd62; font: 24px Marcellus,serif; }
.settings-sidebar button { width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: #9ca29b; text-align: left; cursor: pointer; }
.settings-sidebar button:hover,.settings-sidebar button.active { color: #f0eadc; background: #263029; }
.settings-sidebar .developer-category { margin-top: 18px; color: #d7ad62; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 6px 6px; }
.settings-main { min-width: 0; padding: 28px 32px; overflow: auto; }
.settings-main header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.settings-main header small { color: #777f78; text-transform: uppercase; letter-spacing: .12em; }.settings-main header h2 { margin: 2px 0 0; font-size: 25px; }
.setting-row { min-height: calc(70px * var(--ui-spacing)); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: calc(13px * var(--ui-spacing)) 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
.setting-row span,.setting-row small { display: block; }.setting-row small { margin-top: 3px; color: #8f9690; }.setting-row select,.new-save-row input { min-width: 150px; padding: 8px 10px; border: 1px solid #344038; border-radius: 6px; background: #0c120e; color: #e5e0d4; }
.setting-row input[type="checkbox"] { width: 42px; height: 22px; accent-color: #b99b44; }.setting-volume input { width: 220px; }
.settings-danger { margin-top: 24px; }.new-save-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 16px; }.new-save-row input { min-width: 0; }
.settings-subheading { margin: 26px 4px 4px; color: #d9c27f; font: 14px Marcellus,serif; letter-spacing: .06em; text-transform: uppercase; }
.save-file-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 12px 13px; border: 1px solid rgba(211,179,93,.18); border-radius: 8px; background: rgba(186,151,65,.045); }.save-file-actions b,.save-file-actions small { display: block; }.save-file-actions small { margin-top: 3px; color: #858d86; }.save-file-input { display: none; }
.save-list { display: grid; gap: 8px; }.save-slot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }.save-slot small { display: block; margin-top: 3px; color: #858d86; }.save-slot > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.save-slot button { padding: 6px 8px; border: 1px solid #35433a; border-radius: 5px; background: #18221b; cursor: pointer; }.save-slot .danger-text { color: #df8274; }
.developer-warning { display: grid; gap: 5px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(218,171,78,.3); border-radius: 8px; background: rgba(135,91,24,.13); }.developer-warning b { color: #e4bd70; }.developer-warning span { color: #aaa89e; font-size: 12px; line-height: 1.45; }
.cheat-resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.cheat-resource-grid button { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px 13px; border: 1px solid #334238; border-radius: 7px; color: #e7e1d4; background: #172019; text-align: left; cursor: pointer; }.cheat-resource-grid button:hover { border-color: #8d773e; background: #202c22; }.cheat-resource-grid button span { font-weight: 700; }.cheat-resource-grid button small { grid-column: 1; color: #879087; }.cheat-resource-grid button b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #78bd6e; font-size: 15px; }

/* Bereichsweise Typografie: verändert Schrift, nicht die Position der UI. */
.topbar { font-size: var(--topbar-font-size); }
.topbar .resource-value { font-size: var(--topbar-value-size); }
.topbar .resource-rate { font-size: var(--topbar-rate-size); }
.topbar .season-clock strong { font-size: var(--topbar-season-size); }
.topbar .clock-time { font-size: var(--topbar-clock-size); }

.objectives,.left-hud-stack { font-size: var(--overlay-font-size); }
.objectives .panel-heading h2,.left-hud-stack .panel-heading h2 { font-size: var(--overlay-heading-size); }
.objective-group h3 { font-size: var(--overlay-small-size); }
.objective { font-size: var(--overlay-item-size); }
.storage-line .line-head,.minor-resources,.status-metric .line-head,.status-foot { font-size: var(--overlay-small-size); }

.bottom-nav,.build-dock { font-size: var(--toolbar-font-size); }
.nav-item { font-size: var(--toolbar-item-size); }
.nav-item kbd,.building-card small { font-size: var(--toolbar-small-size); }
.dock-header,.building-card b { font-size: var(--toolbar-item-size); }
.dock-header strong { font-size: var(--toolbar-heading-size); }

.inspector,.drawer,.hover-tooltip,.map-label,.toast { font-size: var(--panel-font-size); }
.inspector h2 { font-size: var(--panel-title-size); }
.drawer h2 { font-size: var(--panel-heading-size); }
.info-tile b { font-size: var(--panel-value-size); }
.cost-chip,.toast div { font-size: var(--panel-small-size); }
.hover-tooltip { font-size: var(--panel-tooltip-size); }
.hover-tooltip strong { font-size: var(--panel-tooltip-title-size); }
@media(max-width:700px){.settings-card{grid-template-columns:130px 1fr}.settings-main{padding:20px 16px}.settings-sidebar{padding:18px 8px}.save-slot,.save-file-actions{align-items:flex-start;flex-direction:column}.setting-row{align-items:flex-start;flex-direction:column;gap:8px}}
.corner-controls { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 7px; }
.map-label { position: absolute; z-index: 4; min-width: 120px; padding: 5px 9px; color: #f3ead7; background: rgba(8,12,9,.82); border: 1px solid rgba(239,209,123,.24); border-radius: 5px; pointer-events: none; box-shadow: 0 4px 12px #0008; font-size: 12px; }
.map-label b { color: #e2bd59; float: right; margin-left: 16px; }
.hover-tooltip{position:absolute;z-index:17;width:270px;padding:11px 12px;border:1px solid rgba(225,202,134,.22);border-radius:8px;background:rgba(9,14,11,.95);box-shadow:var(--shadow);pointer-events:none;font-size:11px;color:#b8bbb3}.hover-tooltip strong{display:block;color:#eee8d8;font-size:13px}.hover-tooltip .tag{display:inline-block;margin:4px 0 7px;padding:2px 5px;border-radius:4px;background:#26372a;color:#83c978;font-size:9px;text-transform:uppercase}.hover-tooltip .tag.warn{background:#4b3d20;color:#efca72}.hover-tooltip .tag.bad{background:#4a2925;color:#ef9185}.hover-tooltip .tag.good{background:#26372a;color:#83c978}.hover-tooltip .tip-row{display:flex;justify-content:space-between;gap:12px;margin-top:5px}.hover-tooltip .tip-row b{text-align:right;color:#ddd7c6}.hover-tooltip .tip-row.requirement b{color:#e5bd62}.hover-tooltip .tip-foot{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);color:#8f948c}
.season-clock { cursor: help; }
.hover-tooltip.calendar-tooltip { width: 430px; max-width: calc(100vw - 24px); padding: 14px; border-color: rgba(222,190,91,.42); background: rgba(9,14,11,.98); }
.calendar-timeline { display: grid; grid-template-columns: 1fr 24px 1.18fr 24px 1fr; align-items: center; }
.calendar-season { display: grid; gap: 2px; min-width: 0; padding: 9px 7px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.025); text-align: center; }
.calendar-season small { color: #81877e; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.calendar-season b { overflow: hidden; color: #c4c7be; font: 13px Marcellus,serif; text-overflow: ellipsis; }
.calendar-season span { color: #777e76; font-size: 9px; }
.calendar-season.current { border-color: rgba(224,190,81,.48); background: rgba(179,137,37,.13); box-shadow: inset 0 0 14px rgba(231,190,65,.06); }
.calendar-season.current b { color: #f0d16d; font-size: 15px; }
.calendar-season.current span { color: #c1ad73; }
.timeline-link { height: 1px; background: rgba(214,184,92,.28); }
.timeline-link i { display: block; width: 5px; height: 5px; margin: -2px auto 0; border-radius: 50%; background: #c8a74f; }
.season-progress-head { display: flex; justify-content: space-between; margin: 12px 1px 5px; color: #a6aba2; }
.season-progress-head b { color: #d7c384; font-weight: 600; }
.season-progress { height: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: #202820; }
.season-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c983e,#ddbd4e); box-shadow: 0 0 8px rgba(218,185,68,.35); }
.calendar-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.calendar-details div { display: grid; gap: 2px; padding: 7px 8px; border-radius: 6px; background: rgba(255,255,255,.027); }
.calendar-details small { color: #81877e; font-size: 9px; }
.calendar-details b { color: #ded9ca; font-size: 12px; font-variant-numeric: tabular-nums; }
.panel-button.resource-shortage { border-color: rgba(211,157,67,.38); color: #d4b477; }
.resource-shortage-tooltip { position: fixed; z-index: 90; width: max-content; min-width: 190px; max-width: min(280px,calc(100vw - 16px)); padding: 10px 12px; border: 1px solid rgba(224,164,64,.5); border-radius: 8px; background: rgba(17,20,15,.97); box-shadow: 0 12px 30px rgba(0,0,0,.48); color: #d8d4c8; pointer-events: none; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .15s ease,transform .15s ease; }
.resource-shortage-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
.resource-shortage-tooltip strong { display: block; color: #f0c86e; font-size: 13px; }
.resource-shortage-tooltip small { display: block; margin: 2px 0 7px; color: #989d94; font-size: 10px; }
.resource-shortage-tooltip div { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.055); font-size: 12px; }
.resource-shortage-tooltip div b { color: #e08a72; font-variant-numeric: tabular-nums; }
.build-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 9px 14px; border-radius: 8px; background: #111812e8; border: 1px solid #d0ad4e66; color: #e9d495; }
.toast-container { position: absolute; right: 20px; top: 18px; z-index: 40; display: grid; gap: 8px; }
.toast { width: 280px; padding: 11px 13px; border-left: 3px solid #d4ae4d; border-radius: 6px; background: #101610ee; box-shadow: var(--shadow); animation: toast-in .22s ease-out; }
.toast.good{border-left-color:#69b65c}.toast.warn{border-left-color:#d5a84d}.toast.bad{border-left-color:#c85b4e}.toast b{display:block;margin-bottom:2px}.toast div{color:#aeb2aa;font-size:12px}
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }
.help-modal { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4,7,5,.62); backdrop-filter: blur(4px); }
.help-card { position: relative; width: min(600px, calc(100% - 40px)); padding: 38px; border-radius: 14px; text-align: center; }
.help-card .close-button { position: absolute; top: 12px; right: 12px; }
.eyebrow { color: #b29d6d; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; }
.help-card h1 { margin: 2px 0 10px; color: #e4c86f; font: 46px Marcellus,serif; }
.help-card > p { color: #b8bbb3; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0; text-align: left; }
.help-grid span { padding: 10px; color: #989d95; background: rgba(255,255,255,.035); border-radius: 7px; }
.help-grid b { display: block; color: #e4dfd2; }
.primary-button { min-width: 190px; padding: 11px 18px; color: #edf2e9; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .global-controls { display: none; }
  .resource { min-width: 102px; padding: 0 10px; }
  .resource[data-resource="food"] { display: none; }
  .build-dock { right: 20px; }
  .inspector { width: 320px; }
  .left-hud-stack{display:none}
}
@media (max-width: 760px) {
  .app-shell { grid-template-rows: 52px 1fr; }
  .topbar { height: 52px; grid-template-columns: 1fr auto; }
  .resource { min-width: 76px; padding: 0 6px; gap: 5px; }
  .resource-icon { display: none; }
  .resource-rate { display: none; }
  .resource-value { font-size: 14px; }
  .resource[data-resource="people"] { display: none; }
  .season-clock { min-width: 160px; padding: 0 8px; }
  .sun-icon { font-size: 22px; }
  .time-controls { display: none; }
  .objectives { display: none; }
  .inspector { inset: auto 10px 105px 10px; width: auto; transform: none; max-height: 55%; }
  .bottom-nav { left: 10px; right: 10px; bottom: 10px; height: 70px; overflow-x: auto; }
  .nav-item { min-width: 74px; padding-inline: 8px; }
  .build-dock { left: 10px; right: 10px; bottom: 90px; overflow-x: auto; }
  .building-list { display: flex; }
  .building-card { min-width: 82px; }
  .corner-controls { display: none; }
}