/* Clear midnight surfaces and bright amber actions. Game-state colours stay distinct. */
:root {
  --bg: #0d1922;
  --panel: #14242f;
  --panel2: #233844;
  --border: #314a59;
  --text: #f0f4f7;
  --muted: #a9bdcc;
  --accent: #ffc34d;
  --amber: #ffc34d;
  --surface: #14242f;
  --surface-inner: #101f29;
  --surface-input: #0d1b25;
  --surface-edge: #304957;
  --surface-raised: #1a2e3b;
  --surface-hover: #233e4f;
  --surface-overlay: linear-gradient(155deg, #142630, #0e1c26 75%);
  --shelter-gold-soft: #ffc34d14;
  --shelter-green: #70deb2;
  --shelter-shadow: 0 16px 50px #030c1499;
}

/* A single flat canvas keeps every page and list length in the same palette. */
body { min-height: 100vh; background: var(--bg); }
body::before { display: none; }
.sidebar .nav-item.active { background: linear-gradient(90deg, #ffc34d16, #1a304211); border-color: #e4b34670; color: #ffd36a; box-shadow: inset 3px 0 #ffc34d; }
.sidebar .side-label { color: #7eabc7; }
.sidebar .sidebar-admin { color: #ffd064; border-color: #406279; }
.topbar .character-button, .topbar .supplies-button, .topbar .more-button { background: linear-gradient(145deg, #152a38ed, #101f29ef); border-color: #537695; color: #dce9f7; }
.topbar .character-button>.png-ui-icon, .topbar .supplies-button>.png-ui-icon,
.sidebar .nav-item>.png-ui-icon { filter: grayscale(1) brightness(1.18); }
.topbar .character-button>.header-chevron, .topbar .supplies-button>.header-chevron { color: #9dbbd8; border-color: currentColor; }
.topbar button[aria-expanded="true"] { background: #25445d; border-color: #ffc34d; }
.topbar .activity-symbol, .activity-symbol { background: #193344; border-color: #547b97; }
.progress i, .topbar .activity-bar .progress i, .summary-xp-progress i,
.character-vital:not(.vital-health)>.progress i { background: linear-gradient(90deg, #ffb52e, #ffd568); }
.activity-title>span, .eyebrow, .inventory-qty, .overview-level, .shop-card strong { color: #ffca55; }
.activity-card .activity-actions>button { background: linear-gradient(145deg, #274558, #1a3244); border-color: #577f98; color: #e6f2fc; }
.activity-card .activity-actions>button:hover:not(:disabled) { background: linear-gradient(145deg, #365e78, #23465f); border-color: #82b9dc; }
.activity-card .activity-actions>button.primary { background: linear-gradient(180deg, #ffd46b, #ffb932); border-color: #ffd774; color: #221a09; }
.activity-list>.activity-card.is-current { border-color: #ffc34d; border-left-color: #ffc34d; box-shadow: 0 0 16px #ffc34d09; }
.filters button { background: #172d3c; border-color: #3c6078; color: #c1d6e6; }
.filters button.selected { background: #203e3c; border-color: #7fc5ae; color: #e5fff2; }
.training-summary { background: var(--surface); border-color: var(--surface-edge); }
.item-art, .survivor-portrait { background: radial-gradient(ellipse at top, #2d4b60, #172b3a); border-color: #50758f; }
.character-menu .summary-readiness>strong { color: #69d6ed; }
.character-menu .summary-readiness>span>small { color: #a0cce7; }
.character-menu .summary-readiness:hover { background: #57b9f015; }
.more-menu>button[data-action="logout"] { border-top: 1px solid #587e974a; margin-top: 5px; color: #bed5e6; }
.expedition-summary b, .training-summary>span, .supply-effect, .mastery-banner>strong,
.resident-status, .character-stat-grid dd, .overview-level>span,
.character-honours>.eyebrow, .shop-pack-count { color: #ffce60; }
.clean-facility .facility-badge { background: #122633; border-color: #395f7a; color: #ffcf63; }
.clean-facility::before { display: none; }
/* The existing forest artwork fades into the page; no extra activity images. */
body::after {
  content: '';
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(1100px, 78vw);
  height: min(480px, 55vh);
  z-index: -1;
  pointer-events: none;
  background: url('assets/Current/ui/shelter/backgrounds/header-forest.png') right bottom / auto 100% no-repeat;
  mask-image: linear-gradient(110deg, transparent 8%, #000 70%), linear-gradient(0deg, #000 35%, transparent 100%);
  mask-composite: intersect;
  opacity: .18;
  filter: saturate(.45);
}
p { color: #bdcbd5; }
input, select, textarea, .admin-form textarea {
  background: var(--surface-input);
  border-color: var(--surface-edge);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: #91aabe; }
input:focus, select:focus, textarea:focus { border-color: #8ec3f1; }
input[readonly] { color: #a6b9c8; background: #172936; }
button { background: var(--surface-raised); border-color: #4d6b80; color: #e6eef5; }
button:hover:not(:disabled) { background: var(--surface-hover); border-color: #83b3d3; }
button.text-button, button.text-button:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--amber); }
button.primary { background: linear-gradient(180deg, #ffd46b, #ffb932); border-color: #ffd774; color: #221a09; }
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe18a, #ffc747); border-color: #ffea9e; }
button.danger, .modal button.danger { background: #4d302a; border-color: #966657; color: #f4beaa; }
button.danger:hover:not(:disabled) { background: #633b30; border-color: #c08b72; }
.sidebar .nav-item:hover:not(:disabled) { background: #729bc51c; }
.pill { background: #1c303d; border-color: #4f6c89; color: #c7daed; }
.pill.green { background: #163b32; border-color: #60816a; color: #70deb2; }
.pill.red { background: #492e27; border-color: #996b57; color: #edb09a; }
.progress { background: #111f25; }
.costs>span, .possible-loot>span { color: #c6d6e8; }

/* One navigation treatment for Skills, Storage, World, Collections and Survivors. */
.main-content .skills-tabs {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 0;
  margin: 0 0 26px;
  border: 0;
  border-bottom: 1px solid #6285a34d;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.main-content .skills-tabs>.skills-tab {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  min-height: 58px;
  padding: 13px 18px 16px;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 5px 5px 0 0;
  background: transparent;
  box-shadow: none;
  color: #b6c8d5;
  font: 600 13px/1.4 Segoe UI, system-ui, sans-serif;
  letter-spacing: .2px;
  text-transform: none;
  overflow: visible;
}
.main-content .skills-tabs>.skills-tab>.pixel-icon { width: 25px; height: 25px; opacity: .8; }
.main-content .skills-tabs>.skills-tab:hover:not(:disabled) { background: #80bcff10; border-color: transparent; color: #f4f7fa; }
.main-content .skills-tabs>.skills-tab.selected,
.main-content .skills-tabs>.skills-tab.selected:hover:not(:disabled) {
  background: linear-gradient(0deg, #ffc34d0d, #ffc34d00 80%);
  border-color: transparent;
  color: #ffd260;
  box-shadow: none;
}
.main-content .skills-tabs>.skills-tab.selected::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: #ffc34d;
  box-shadow: 0 -3px 14px #ffc34d0d;
}
.main-content .skills-tabs>.skills-tab:focus-visible { outline: 2px solid #9ad7ff; outline-offset: 3px; }
.tabs { border-color: #6285a34d; }
.tabs button { color: #b6c8d5; }
.tabs button.selected { color: #ffd260; border-bottom-color: var(--amber); background: linear-gradient(0deg, #ffc34d0a, transparent); }
.admin-tabs { padding: 0; gap: 10px; border: 0; border-bottom: 1px solid #6285a34d; background: transparent; }
.admin-tabs>button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; }
.admin-tabs>button.selected { background: linear-gradient(0deg, #ffc34d0a, transparent); border-bottom-color: var(--amber); color: #ffd260; }

.panel:not(.rarity-item), .building-card, .clean-facility, .quest-card, .achievement-card, .world-note, .route-card, .stat-row, .character-stats, .unlock-card, .shelf-panel, .collectible, .shop-card, .supporter-shop, .pass-boost, .companion-panel, .training-summary, .expedition-filters, .scene-panel, .tool-foldout, .beta-event, .admin-events article, .admin-local-note, .community-coming{
  background: var(--surface);
  border-color: var(--surface-edge);
  box-shadow: inset 0 1px #a8d8ff0a, 0 5px 20px #06101720;
}
.next-goal, .quest-card.quest-ready, .flame-achievement, .supporter-shop {
  background: var(--surface);
  border-color: #ffc34d66;
}
.clean-facility .facility-heading { background: transparent; border-bottom-color: #52749338; }
.clean-facility .facility-heading h3 { color: #edf4fc; }
.clean-facility .facility-heading .meta, .clean-facility .facility-label,
.clean-facility .facility-badge small, .clean-facility .card-bottom>span { color: #96aec7; }
.clean-facility .facility-badge strong { color: #ffcd60; }
.clean-facility:hover, .clean-facility:focus-within { border-color: #719ec5; }
.facility-art { background: radial-gradient(ellipse at center, #629ad61a, transparent 68%); }
.facility-complete .facility-state { border-top-color: #5a7e9e3b; border-bottom-color: #5a7e9e22; }
.facility-complete .facility-state strong { color: #c8d9ea; }
.facility-complete .facility-state small { color: #92a9c2; }
.facility-complete-mark { background: #69c4b712; border-color: #79bbaa60; color: #99debd; }
.scene-topline { color: #97b7d4; }
.scene-topline>span:last-child { color: #94d6b5; }
.scene-footer b, .scene-footer small { color: #d0dfed; }
.topbar { border-bottom-color: #314a59; }
.sidebar { border-right-color: #314a59; }
.sidebar .nav-item { color: #cad8e9; }

/* Keep coloured skill edges, without tinting the whole card olive or brown. */
.activity-list>.activity-card {
  min-height: 138px;
  padding: 15px 16px;
  gap: 12px;
  background: var(--surface);
  border-top-color: var(--surface-edge);
  border-right-color: var(--surface-edge);
  border-bottom-color: var(--surface-edge);
}
.activity-list>.activity-card:hover { background: var(--surface-raised); }
.activity-list>.activity-card>.item-art { background: var(--surface-inner); }
.activity-card .activity-info p { margin: 7px 0; color: #b7c9dc; }
.activity-card .activity-info>div:first-child>.meta { color: #9bb7d1; }
.building-card.damaged { background: linear-gradient(145deg, #493530, #263035); border-color: #94715b; }
.building-benefit, .resident-needs, .barn-production, .generator-controls.running {
  background: #70deb210;
  border-color: #70deb230;
  color: #9fe5c9;
}
.building-benefit.warning, .generator-controls { background: #a3724424; border-color: #bd936344; }
.empty-resident { background: linear-gradient(145deg, #203340aa, #12232eaa); border-color: #65849b77; }
.quest-number, .objective-notice-icon { background: #ffc34d14; color: #ffc34d; }
.resource-chip, .scene-footer, .scene-topline, .scene-pan-hint, .loadout-bonus, .equipped-bonus, .character-xp-note{
  background: var(--surface-input);
  border-color: var(--surface-edge);
}
.mastery-banner { background: linear-gradient(125deg, #ffc34d0d, #14242f); border-color: #8b825a80; }
.mastery-banner.unearned { background: var(--surface-inner); border-color: var(--surface-edge); }
.farming-flow, .building-receipt, .completion-benefits, .return-repairs,
.tutorial-cycle-progress { background: #70deb210; border-color: #70deb230; }
.return-continuing { background: var(--surface-raised); border-color: var(--surface-edge); color: #c1d6e6; }
.return-report .return-continuing{background:#163b32;border:0;color:#b6e5c9;padding:8px 11px;min-height:34px}
.recovery-banner { background: linear-gradient(130deg, #4c372d, #2e2d2b); border-color: #b18461; }
.recovery-banner.hardcore { background: linear-gradient(130deg, #4b2e2e, #30282c); border-color: #af7164; }

/* Character and item identity retain their rarity colours. */
.character-hero.character-overview.character-dashboard { background: var(--surface); border-color: var(--surface-edge); }
.character-command-panel, .character-honours, .character-vital, .loadout-summary-card,
.character-command-panel .character-stat-grid>div, .portrait-stage { background: var(--surface-inner); border-color: var(--surface-edge); }
.survivor-3d { background: radial-gradient(ellipse at 50% 35%, #53758b25, #101f29 78%); }
.overview-level { background: var(--surface-inner); border-color: #dba64570; }
.overview-level>b { color: #ffcf62; text-shadow: none; }
.overview-level small, .character-vital b small, .character-vital>small { color: #a8bed4; }
.loadout-summary-card .eyebrow, .character-vital>header>span { color: #9fb8d2; }
.loadout-summary-card h3, .temporary-summary.current-boosts h3, .character-vital b { color: #e5effa; }
.temporary-summary .boosts-empty { color: #a8bed4; }
.trophy-button { background: var(--surface-inner); border-color: #49687c; }
.trophy-button:hover { background: var(--surface-hover); border-color: #ffc34d; }
.overview-gear { background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 9%, #1c2f3b), #14242f); }
.overview-gear:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 16%, #314c65), #1e3548); }
.inventory-grid .inventory-item.rarity-item { background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 12%, #1c2f3b), #10212c); }
.inventory-grid .inventory-item:not(.rarity-item) { background: var(--surface); border-color: var(--surface-edge); }
.equipment-slot.rarity-item { background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 9%, #1c2f3b), #10212c); }
.loadout-picker .loadout-item { background: #11232e; border-color: color-mix(in srgb, var(--rarity) 30%, #304957); }
.loadout-picker .picker-current { background: #142a35; }
.trader-offer { background: linear-gradient(145deg, color-mix(in srgb, var(--rarity) 10%, #1c2f3b), #101f29); }
.skill-grid .skill-card { background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--skill-color) 14%, transparent), transparent 70%), var(--surface); }
.skill-grid .skill-card:hover:not(:disabled), .skill-grid .skill-card:focus-visible { background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--skill-color) 22%, transparent), transparent 80%), var(--surface-raised); }
.expedition-card-body { background: var(--surface); }
.victory-reward, .victory-reward.first-clear-reward { background: linear-gradient(120deg, #ffc34d16, #1a2d39); }
.beta-event-art { background: radial-gradient(ellipse at 50% 45%, #94723e40, transparent 70%), #1b2a30; }

/* Overlay surfaces stay close to the page palette; depth comes from shadow. */
.character-menu, .more-menu, .supplies-menu, .storage-filter-panel, .choice-panel,
.choice-panel.expedition-tier-panel, .modal, .item-popup {
  --surface: #12232e;
  --surface-inner: #0f1f29;
  --surface-raised: #172c38;
  background: var(--surface-overlay);
  border-color: #3b5666;
  box-shadow: inset 0 1px #a4d7ff08, var(--shelter-shadow);
}
.modal-backdrop, .choice-backdrop, .filter-drawer[open]::before { background: #071218c9; }
.modal-fixed-head {
  background: linear-gradient(100deg, #0d1c26f0, #0d1c26fa), url('assets/Current/ui/shelter/backgrounds/header-forest.png') center 64% / cover;
  border-bottom-color: #304957;
}
.modal-close { background: #132732; border-color: #3b5666; color: #d7e8f5; }
.modal-close:hover:not(:disabled) { background: #203b4a; border-color: #729aae; }
.modal h2, .modal h3 { color: #f2f5f8; }
.modal label, .modal .fine, .modal small.meta { color: var(--muted); }
.item-popup-head { background: #122530; }
.item-popup-art, .consumable-portrait { background: #0d1e28; border-color: #3b5666; }
.item-popup-actions:has(>button:nth-child(3))>.discard-button { background: #172c38; border-color: #3b5666; color: #bdcbd5; }
.item-popup-actions:has(>button:nth-child(3))>[data-action="sell-item"] { background: #142630; border-color: #ffc34d55; color: #ffd16b; }
.item-popup-actions:has(>button:nth-child(3))>.discard-button:hover:not(:disabled),
.item-popup-actions:has(>button:nth-child(3))>[data-action="sell-item"]:hover:not(:disabled) { background: #203744; border-color: #7797ab; }
.work-search, .storage-search, .filter-drawer, .choice-trigger { background: var(--surface-input); border-color: var(--surface-edge); }
.choice-trigger:hover:not(:disabled) { background: var(--surface-raised); border-color: #7db4da; }
.filter-drawer fieldset { background: var(--surface-inner); border-color: var(--surface-edge); }
.filter-drawer .storage-filter-panel fieldset { background: transparent; }
.choice-options>button:not(.tier-choice) { background: var(--surface-inner); border-color: var(--surface-edge); color: #dce9f2; }
.choice-options>button.selected:not(.tier-choice) { background: #1c3442; border-color: #547a8e; color: #ffdfa5; }
.more-menu button { background: transparent; }
.more-menu button:hover:not(:disabled), .supplies-list>button:hover:not(:disabled) { background: #70baff18; }
.character-menu .summary-progression { background: var(--surface-inner); border-color: #3b5666; }
.character-menu>.wide { background: var(--surface-raised); border-color: #496879; }
.queue-current, .queue-healing, .picker-current, .healing-food,
.return-skill-grid>div, .expedition-summary>span, .expedition-reward,
.combat-forecast, .discovery-loot, .tutorial-materials>span, .boost-details article { background: var(--surface-inner); border-color: var(--surface-edge); }
.queue-current, .healing-food[aria-pressed="true"] { background: #18303d; border-color: #54798b; }
.combat-forecast.lethal { background: #a75e4020; border-color: #b98361; }
.source-link { background: #172d3a; border-color: #3b596a; color: #dbeafb; }
.source-link:hover:not(:disabled) { background: #223d4b; }

/* Quiet notices and celebrations belong to the same shelter. */
#toast {
  background: var(--surface-overlay);
  border: 1px solid #3b5666;
  border-left: 3px solid var(--amber);
  border-radius: 7px;
  color: #eaf4ff;
  box-shadow: var(--shelter-shadow);
  padding: 13px 20px;
  font: 500 12px/1.55 Segoe UI, system-ui, sans-serif;
}

/* Dialogs always cover notifications, including notices created mid-dialog. */
#modal { position: relative; z-index: 20000; }
body:has(#modal:not(:empty), #level-celebration) :is(#toast, #achievement-notice, #objective-notice, #objective-coach) {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
}
/* Give transient messages one visible slot rather than stacking them. */
body:has(#toast.visible) :is(#achievement-notice, #objective-notice) {
  visibility: hidden !important; pointer-events: none !important; transition: none !important;
}
#achievement-notice, #objective-notice, #tutorial-dock, #objective-coach, .quest-notification {
  background: var(--surface-overlay);
  border-color: #8d733e;
  color: var(--text);
  box-shadow: inset 0 1px #a4d7ff08, var(--shelter-shadow);
}
#achievement-notice .achievement-notice-link, #achievement-notice .achievement-notice-close,
#objective-notice .objective-notice-close { background: transparent; }
.objective-header { background: #ffc34d; color: #211c10; }
.celebration-card { background: var(--surface-overlay); border-color: #a57f34; }
.celebration-medal { background: linear-gradient(150deg, var(--celebration-soft), #122936); }
.resource-tooltip, .trophy-tooltip { background: #10212b; color: #e2f0fb; border-color: #3b5666; box-shadow: var(--shelter-shadow); }
.boost-chip { background: #4b9edb10; border-color: #649ec244; }
.login-card { background: linear-gradient(145deg, #1e3546ef, #0f2230f5); border-color: #59819d; }

/* A task board inside the queue popup, with the running action and next slots. */
.modal:has(.queue-overview) { width: 580px; max-width: 100%; }
.modal:has(.queue-overview) .modal-fixed-head h2 { color: #ffd064; font: 700 17px/1.3 Segoe UI, system-ui, sans-serif; letter-spacing: 1.3px; }
.queue-overview { display: grid; gap: 18px; }
.queue-capacity { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #a7c2d5; font-size: 12px; }
.queue-capacity strong { color: #e5f2fc; font-size: 15px; font-variant-numeric: tabular-nums; }
.queue-slots { display: flex; gap: 4px; }
.queue-slots i { display: block; width: 16px; height: 5px; background: #2b465a; border-radius: 1px; }
.queue-slots i.filled { background: #ffc34d; }
.queue-now { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid #ad863e; border-radius: 7px; background: #122630; }
.queue-task-icon { display: grid; place-items: center; width: 44px; height: 44px; background: #122e3b; border: 0; border-radius: 6px; }
.queue-task-icon>.pixel-icon,.queue-task-icon>.skill-icon { max-width: 100%; max-height: 100%; }
.queue-task-icon>.queue-facility-art { width: 100%; height: 100%; min-height: 0; background: none; }
.queue-facility-art::before { display: none; }
.queue-task-icon .queue-facility-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; image-rendering: auto; filter: none; }
.queue-now small { display: block; color: #ffc34d; font-size: 9px; letter-spacing: 1.2px; margin-bottom: 5px; }
.queue-now b { color: #f0f5f9; font-size: 14px; }
.queue-now-status { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 9px; color: #a9c6d9; font-size: 10px; }
.queue-now .progress { height: 6px; }
.queue-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px; border: 1px dashed #4f748e; border-radius: 7px; background: #0c1e2a66; text-align: center; }
.queue-empty-art { display: block; width: 64px; height: 64px; object-fit: contain; }
.queue-empty h3 { font-size: 17px; color: #e7f1f8; }
.queue-empty p { margin: 0; max-width: 320px; color: #a6bed0; font-size: 12px; }
.queue-placeholders { display: grid; gap: 8px; }
.queue-placeholders span { height: 30px; border: 1px dashed #5479924d; border-radius: 4px; background: #10233255; }
.queue-placeholders span:last-child { opacity: .45; }
.queue-board { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.queue-board>li { display: grid; grid-template-columns: 20px 40px minmax(0,1fr) 32px; align-items: center; gap: 10px; padding: 12px; background: #11232e; border: 1px solid #304957; border-radius: 7px; }
.queue-board>li:first-child { border-left: 3px solid #ffc34d; }
.queue-order { font-size: 12px; color: #7da0b8; font-variant-numeric: tabular-nums; }
.queue-board>li:first-child .queue-order { color: #ffca55; }
.queue-board .queue-task-icon { width: 40px; height: 42px; }
.queue-task-copy { min-width: 0; }
.queue-task-copy b { display: block; font-size: 13px; color: #edf4fa; }
.queue-task-copy small { display: block; color: #9bb9cd; font-size: 10px; margin-top: 5px; line-height: 1.5; }
.queue-task-copy .queue-issue { color: #ffac91; }
.queue-task-copy .queue-repeat { color: #ffcd63; }
.queue-remove { width: 32px; height: 32px; padding: 0; font-size: 20px; color: #9cb8cb; background: transparent; border-color: transparent; }
.queue-remove:hover:not(:disabled) { color: #ffbdab; background: #ac533521; border-color: #986556; }
.queue-tip { border-top: 1px solid #57799144; padding-top: 14px; }
.queue-tip>p { margin: 0 0 9px; font-size: 12px; color: #c2d4e1; }
.queue-rules summary { cursor: pointer; color: #91b7d2; font-size: 11px; }
.queue-rules p { margin: 8px 0 0; font-size: 11px; color: #a7bece; line-height: 1.7; }
.queue-footer { display: flex; gap: 10px; }
.queue-footer>button { flex: 1; min-height: 42px; }

/* Shelter command centre: the artwork carries the warmth, surfaces stay midnight. */
.sidebar {
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #0d1922 0%, #0d1922 calc(100% - 420px), #0d192200 calc(100% - 270px)), url('assets/Current/ui/shelter/backgrounds/sidebar-shelter.png');
  background-position: top, center bottom -32px;
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat;
  border-color: var(--surface-edge);
}
.sidebar .sidebar-bottom { position: relative; z-index: 1; }
.sidebar .sidebar-admin { background: #0d1922d9; color: var(--muted); border-color: #30495780; }
.sidebar .nav-item.active { background: #ffc34d0c; border-color: #ffc34d70; }
.topbar { background-color: var(--bg); background-image: linear-gradient(90deg, #0d1922e8, #0d192299 65%, #0d1922bf), url('assets/Current/ui/shelter/backgrounds/header-forest.png'); border-color: var(--surface-edge); }
.topbar .character-button, .topbar .supplies-button, .topbar .more-button { background: #142633eb; border-color: #3d5d70; }
.topbar .activity-symbol { background: #152b38; border-color: #3c6176; }
.topbar [data-action="nav"][data-tab="activities"] { color: var(--accent); border-color: #ffc34d80; background: #0d1922c9; }
.main-content .skills-tabs>.skills-tab.selected, .main-content .skills-tabs>.skills-tab.selected:hover:not(:disabled),
.tabs button.selected, .admin-tabs>button.selected { background: transparent; }
.main-content .skills-tabs>.skills-tab { font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.training-summary, .work-search, .storage-search, .choice-trigger { box-shadow: inset 0 1px #b5d7e707; }
.loadout-bonus strong, .loadout-bonus b, .loadout-summary-metrics strong { color: var(--accent); }
.objective-notice-icon .shelter-ui-art { width: 34px; height: 34px; }
.objective-notice-icon { border-color: var(--surface-edge); background: var(--surface-inner); }
.generator-switch { background: var(--surface-inner); border-color: var(--surface-edge); color: var(--text); }
.generator-controls.running strong { color: #70deb2; }
.generator-fuel, .generator-controls>div>small { color: var(--muted); }
.clean-facility:hover, .clean-facility:focus-within { box-shadow: 0 0 0 1px #70a1bf25; }
.activity-card .activity-actions>button { background: var(--surface-raised); }
.activity-card .activity-actions>button:hover:not(:disabled) { background: var(--surface-hover); }
.filters button { background: var(--surface-inner); }
.filters button.selected { background: #203e3c; border-color: #6fbf9f; }
.item-art, .survivor-portrait { background: var(--surface-inner); border-color: var(--surface-edge); }
.scene-panel { overflow: hidden; }
.scene-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 18px; background: var(--surface-inner); }
.shelter-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.shelter-heading>img { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; image-rendering: pixelated; }
.shelter-heading>div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 18px; min-width: 0; }
.shelter-heading h1 { margin: 0; color: #f0f4f7; font: 700 22px/1.25 Segoe UI, system-ui, sans-serif; letter-spacing: .2px; overflow-wrap: anywhere; }
.shelter-heading>div>span { font: 9px/1.5 Consolas, monospace; letter-spacing: 1.7px; color: #8aa8ba; }
.scene-topline .shelter-status { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font: 700 9px/1.5 Segoe UI, system-ui, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; }
.shelter-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scene-topline .shelter-status.safe { color: #70deb2; }
.scene-topline .shelter-status.warning { color: #ffc34d !important; }
.scene-topline .shelter-status.danger { color: #f49487; }
.scene-footer { padding: 13px 18px; align-items: center; background: var(--surface-inner); }
.scene-footer b { font: 500 12px/1.5 Segoe UI, system-ui, sans-serif; }
.scene-footer small { font-size: 10px; color: #93aebe; margin-top: 3px; }
.scene-footer .weather { font-size: 11px; color: #b6cbd8; }
.base-aside .next-goal{ background: var(--surface-inner); border-color: var(--surface-edge); border-radius: 8px; box-shadow: inset 0 1px #a8d8ff08; }
.base-aside .next-goal { display: block; }
.objective-header { display: flex; align-items: center; gap: 12px; padding: 15px 16px 10px; background: transparent; color: var(--accent); flex-wrap:wrap; }
.objective-header .objective-directions-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 9px;border:1px solid #617d89;border-radius:20px;background:#102630;color:#c2d4dd;font:600 11px/1.3 Segoe UI,system-ui,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap}
.objective-directions-toggle::before{content:'';width:8px;height:8px;border-radius:50%;background:#748590;flex:0 0 auto}
.objective-directions-toggle[aria-pressed=true]::before{background:#7aefb7}
.objective-header .objective-directions-toggle:focus-visible{outline:2px solid #7aefb7;outline-offset:3px}
@media(max-width:400px){.objective-header .objective-directions-toggle{font-size:10px;padding:5px 7px;gap:5px}}
.shelter-ui-art { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.objective-header h2{ margin: 0; font: 700 13px/1.4 Segoe UI, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent); }
.objective-count { margin-left: auto; color: #87a5b8; font: 10px/1.5 Consolas, monospace; letter-spacing: 0; white-space: nowrap; }
.objective-body { width: auto; margin: 0 15px; padding: 16px; border: 1px solid var(--surface-edge); border-radius: 6px; background: var(--surface); }
.objective-status-line { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 2px 12px; }
.objective-status-line>.objective-state-mark { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.objective-status-line>h3 { grid-column: 2; grid-row: 2; }
.objective-state-mark { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid #ffc34d77; border-radius: 50%; color: var(--accent); font: 700 19px/1 Segoe UI, sans-serif; }
.objective-state-mark.is-complete { border: 2px solid #70deb2; color: #70deb2; }
.objective-kicker { grid-column: 2; grid-row: 1; display: block; margin: 0; font-size: 9px; line-height: 1.5; color: #92b1c3; }
.objective-body h3 { font: 650 15px/1.45 Segoe UI, system-ui, sans-serif; color: var(--text); margin: 0; }
.objective-body>p { margin: 12px 0 0; font-size: 12px; color: #d5e1e9; }
.objective-body>small { margin: 10px 0 17px; color: #a8bdca; font-size: 11px; line-height: 1.65; }
.objective-body>button { width: 100%; min-height: 42px; font-size: 12px; font-weight: 650; }
.objective-footer { display: flex; align-items: center; gap: 10px; margin: 14px 16px; color: #7798ac; font: 8px/1.5 Consolas, monospace; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.objective-footer::before, .objective-footer::after { content: ''; flex: 1; height: 1px; background: #30495780; }
.objective-ready { border-color: #ffc34d80 !important; }
.radio-dial { position: absolute; right: -7px; top: 50%; width: 124px; height: 124px; transform: translateY(-50%); border-radius: 50%; border: 1px solid #3e7a8c55; background: repeating-radial-gradient(circle, transparent 0 18px, #3e7a8c33 19px 20px); opacity: .65; }
.radio-dial::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, transparent 49.5%, #3e7a8c55 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, #3e7a8c55 50%, transparent 50.5%); }
.radio-dial::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 300deg, #70deb220 358deg, #70deb266); animation: radio-sweep 12s linear infinite; }
.radio-dial.has-signals i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffc34d; left: 29px; top: 32px; box-shadow: 38px 31px #ffc34d, 9px 48px #ffc34d; }
.radio-dial.is-paused { opacity: .2; }
.radio-dial.is-paused::after { animation: none; background: none; }
@keyframes radio-sweep { to { transform: rotate(360deg); } }
.radio-quiet-mark { grid-row: span 2; color: #70deb2; font: 26px/1 Segoe UI, sans-serif; }
.base-layout>.facility-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.facility-section-heading h2 { color: #afc4d2; font: 650 12px/1.4 Segoe UI, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1.1px; }
.facility-section-heading>span { font-size: 10px; color: #88a5b7; }
.facility-section-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; font-size: 10px; color: #88a5b7; }
.facility-testing-toggle { margin: 0; font-size: 10px; }
.facility-testing-toggle[aria-pressed="true"] { border: 0; color: var(--accent); background: #172d3a; }
.facility-test-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 4px 16px 14px; padding: 10px 12px; border: 0; border-radius: 12px; background: #112d3a; color: #9cb6c7; }
.facility-test-controls>span { flex: 1; font-size: 8px; letter-spacing: .7px; }
.facility-test-controls button { width: 32px; min-width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 9px; background: #294b5a; box-shadow: none; font-size: 20px; line-height: 1; }
.facility-test-controls button:disabled { opacity: .4; }
.facility-test-controls output { min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .base-layout>.facility-section-heading { flex-wrap: wrap; }
  .facility-test-controls button { width: 40px; height: 40px; }
}
.clean-facility { min-height: 0; background: var(--surface-inner); }
.clean-facility .facility-heading { grid-template-columns: 76px minmax(0,1fr) auto; gap: 12px; padding: 16px; border: 0; }
.clean-facility .facility-heading h3 { font-size: 16px; margin-bottom: 6px; }
.clean-facility .facility-heading .meta { font: 9px/1.5 Segoe UI, system-ui, sans-serif; letter-spacing: .8px; }
.clean-facility .facility-art { min-height: 82px; background: none; }
.clean-facility .facility-art img { width: 80px; max-width: 100%; }
.clean-facility .facility-art::before { display: none; }
.clean-facility .facility-badge { min-width: 68px; max-width: 94px; padding: 10px 8px; background: #172d3a; border-color: #365669; }
.clean-facility .facility-badge strong { font: 600 20px/1.25 Segoe UI, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); }
.clean-facility .facility-badge small { color: #9cb6c7; font-size: 8px; }
.facility-level-pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.facility-level-pips i { width: 10px; height: 5px; border-radius: 2px; background: #304957; }
.facility-level-pips i.filled { background: var(--accent); }
.damaged .facility-level-pips i.filled { background: #c28276; }
.clean-facility .facility-card-content { display: block; min-height: 0; padding: 0 16px 14px; }
.clean-facility .facility-body { padding: 13px 0 0; border-top: 1px solid #30495799; }
.clean-facility .facility-label { color: #9cb6c7; }
.clean-facility .facility-state { padding: 0; border: 0; }
.clean-facility .facility-state strong { color: #70deb2; font-size: 11px; font-weight: 500; }
.clean-facility .facility-state small { font-size: 8px; color: #88a5b7; }
.clean-facility .facility-complete-mark { width: 19px; height: 19px; flex-basis: 19px; color: #0d1922; background: #70deb2; border: 0; font-size: 12px; }
.clean-facility .facility-locked { margin: 0; min-height: 60px; }
.clean-facility .generator-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.facility-complete .generator-controls { margin-bottom: 0; }
.facility-complete .generator-controls+.facility-state { display: none; }
#facility-generator:not(.damaged):has(.generator-controls.offline),
#facility-generator:not(.damaged):has(.generator-controls.needs-fuel) {
  background: #152530;
  border-color: #3b5363;
}
#facility-generator:not(.damaged):has(.generator-controls.running) {
  background: #122c29;
  border-color: #426f60;
}
.generator-controls .generator-status { min-width: 0; }
.generator-controls strong { color: #a7bfcd; font-size: 11px; letter-spacing: .2px; font-weight: 600; }
.generator-controls.running strong { color: #70deb2; }
.generator-controls.needs-fuel strong { color: var(--accent); }
.generator-controls .generator-status>.generator-fuel { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 9px; line-height: 1.5; color: #94adbd; letter-spacing: 0; }
.clean-facility .generator-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #a7bfcd;
  letter-spacing: 0;
}
.generator-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.generator-switch-track { width: 36px; height: 20px; flex: 0 0 36px; border: 1px solid #496171; border-radius: 20px; background: #233846; transition: background .15s, border-color .15s; }
.generator-switch-track::after { content: ''; display: block; width: 12px; height: 12px; margin: 3px; border-radius: 50%; background: #acbec9; transition: transform .15s; }
.generator-switch input:checked+.generator-switch-track { background: #225447; border-color: #70deb2; }
.generator-switch input:checked+.generator-switch-track::after { background: #8bf0c6; transform: translateX(16px); }
.generator-switch input:checked~.generator-switch-label { color: #70deb2; }
.generator-switch input:focus-visible+.generator-switch-track { outline: 2px solid var(--accent); outline-offset: 4px; }
.generator-switch input:disabled { cursor: not-allowed; }
.generator-switch input:disabled~span { opacity: .45; }
.generator-switch-label { min-width: 18px; font-size: 11px; }
.reduce-motion .generator-switch-track, .reduce-motion .generator-switch-track::after { transition: none; }
@media(prefers-reduced-motion:reduce) { .generator-switch-track, .generator-switch-track::after { transition: none; } }
.clean-facility .card-bottom { gap: 8px; }
.building-card.damaged .facility-art:after { width: 30px; height: 30px; font-size: 28px; }
@media(min-width:1500px) { .base-layout>.building-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(min-width:1101px) {
  .main-content { max-width: 1600px; padding: 26px 30px 50px; }
  .base-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 16px 20px; }
}
@media(min-width:801px) and (max-width:1100px) { .base-aside { display: grid !important; grid-template-columns: 1fr 1fr; } }
@media(max-width:800px) {
  .sidebar { background: #0d1922f5; }
  .scene-topline { padding: 10px 12px; gap: 8px 12px; flex-wrap: wrap; }
  .shelter-heading h1 { font-size: 20px; }
  .scene-topline .shelter-status { margin-left: 49px; font-size: 8px; }
  .scene-footer { padding: 12px; gap: 10px; }
  .scene-footer b { font-size: 11px; }
  .scene-footer .weather { font-size: 10px; }
  .scene-footer small { font-size: 9px; }
  .clean-facility .facility-heading { grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px; padding: 14px; }
  .clean-facility .facility-card-content { padding: 0 14px 14px; }
}
@media(max-width:360px) {
  .clean-facility .facility-heading { grid-template-columns: 54px minmax(0,1fr) auto; gap: 8px; padding: 12px; }
  .clean-facility .facility-heading h3 { font-size: 14px; }
  .clean-facility .facility-badge { min-width: 62px; padding: 8px 6px; }
  .clean-facility .facility-badge strong { font-size: 17px; }
  .clean-facility .facility-art { min-height: 65px; }
  .facility-level-pips { gap: 2px; }
  .facility-level-pips i { width: 8px; }
  .objective-header { gap: 8px; padding: 12px; }
  .objective-body { margin: 0 12px; padding: 12px; }
  .objective-header h2{ font-size: 12px; letter-spacing: 1px; }
}
@media(prefers-reduced-motion:reduce) { .radio-dial::after { animation: none; } }
.reduce-motion .radio-dial::after { animation: none; }

@media(max-width:800px) {
  body::after { width: 100vw; height: 330px; opacity: .12; }
  .sidebar { background: #0d1922; }
  .sidebar .nav-item.active { box-shadow: inset 0 3px #ffc34d; }
  .sidebar nav { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .sidebar .nav-item[data-tab="journal"] { order: 1; }
  .sidebar .nav-item[data-tab="storage"] { order: 2; }
  .main-content .skills-tabs { gap: 5px; margin-bottom: 22px; }
  .main-content .skills-tabs>.skills-tab { flex: 1 1 0; padding: 12px 7px 14px; gap: 7px; min-height: 58px; font-size: 12px; }
  .main-content .skills-tabs>.skills-tab>.pixel-icon { width: 23px; height: 23px; }
  .activity-bar { background: #14242ff5; border-color: #4c7898; }
  .topbar>.activity-bar { background: #14242ff5; }
}
@media(max-width:600px) {
  .activity-list>.activity-card { min-height: 0; padding: 13px 12px; gap: 8px 11px; }
}
@media(max-width:480px) {
  .main-content .skills-tabs>.skills-tab { flex-direction: column; gap: 5px; font-size: 11px; line-height: 1.3; padding: 10px 3px 12px; }
  .main-content .skills-tabs>.skills-tab>.pixel-icon { width: 22px; height: 22px; }
  #toast { padding: 11px 15px; }
  .queue-slots i { width: 11px; }
  .queue-overview { gap: 14px; }
  .queue-capacity { gap: 10px; font-size: 11px; }
  .queue-board>li { grid-template-columns: 14px 32px minmax(0,1fr) 30px; gap: 7px; padding: 10px 8px; }
  .queue-board .queue-task-icon { width: 32px; height: 36px; }
  .queue-board .queue-task-icon>.pixel-icon,.queue-board .queue-task-icon>.skill-icon { max-width: 28px; max-height: 28px; }
  .queue-task-copy b { font-size: 12px; }
  .queue-empty { padding: 22px 12px; }
  .queue-footer { flex-wrap: wrap; }
}

.build-material-help{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.build-material-help h4{margin:0 0 14px;font-size:14px}.build-material-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;margin-top:16px;align-items:center}.build-material-row strong{font-size:12px}.build-material-row strong small{display:block;margin-top:4px;color:var(--muted);font-weight:400}.build-material-sources{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.build-material-sources button{white-space:normal;text-align:left;max-width:100%;min-height:38px}

/* Keep the return digest short; encounter detail opens only on request. */
#modal .return-raid-summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 22px;padding:14px 12px;border:0;border-radius:12px;background:#19313d;color:#f0c4b7}
#modal .return-raid-summary.is-held{color:#a5dbbe}
#modal .return-raid-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#db756820;font-size:23px;font-weight:800}
#modal .return-raid-summary.is-held .return-raid-mark{background:#73c9a120}
#modal .return-raid-summary strong{font-size:13px;line-height:1.4}
#modal .return-raid-summary .text-button{margin:0;padding:8px 0;min-height:44px;background:none;border:0;box-shadow:none;color:#e5cf99;font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
@media(max-width:360px){#modal .return-raid-summary{grid-template-columns:30px minmax(0,1fr)}#modal .return-raid-summary .text-button{grid-column:2;justify-self:start;padding:0;min-height:32px}}

/* Compact utility labels and remaining facility details. */
.recipe-heal{font-size:11px;font-style:normal;font-weight:600;color:#96d2b3;margin-left:8px;white-space:nowrap}.workshop-choice b{display:flex;align-items:center;justify-content:space-between;gap:8px}.achievement-reward{text-align:center;display:flex;justify-content:center;align-items:center}.quest-roadmap-mark img{height:26px;width:20px;object-fit:contain}.location-unlock{text-align:center;padding:24px 16px}.location-unlock img{width:60px;height:60px;object-fit:contain}.location-unlock p{line-height:1.6;color:#b6cbd1}
.radio-tutorial-note{position:absolute;z-index:20;left:16px;right:16px;bottom:calc(var(--mobile-dock-height,94px) + 22px);padding:20px;border:0;border-radius:22px;background:linear-gradient(145deg,#214857,#102c39);box-shadow:0 12px 36px #0008}.radio-tutorial-note strong{color:#ffe5a1;font-size:18px}.radio-tutorial-note p{font-size:14px;line-height:1.55;margin:10px 0 18px}.radio-tutorial-note button{display:block;width:auto;min-width:112px;min-height:40px;padding:9px 22px;margin:0 0 0 auto;border:0;border-radius:10px}
/* Quarters artwork and repair state; popup layout is in scene-hud.css. */
.crew-tile .crew-portrait{display:block;background-image:url('assets/Current/characters/portraits/survivor-portraits-v1.png');background-size:300% 200%;background-position:var(--portrait-x) var(--portrait-y);mask-image:none}
.empty-resident-symbol{position:relative;background:none}.empty-resident-symbol>img{width:100%;height:100%;object-fit:contain}.empty-resident-symbol>.crew-lock{position:absolute;width:32px;height:32px;right:0;bottom:0}.locked-slot .empty-resident-symbol>img:first-child{filter:grayscale(1) brightness(.35)}
.crew-halted .crew-roster{filter:grayscale(1);opacity:.65}.crew-halted [data-action='resident-assign']{display:none}.crew-halted .resident-timer{visibility:hidden}.facility-sheet[data-facility='shelter'] .damaged .facility-heading{filter:grayscale(1)}.town-shelter--damaged,.town-scene--damaged .town-shelter-art{filter:grayscale(1) brightness(.65)}