/* ---- 00-base.css ---- */
:root {
  --bg: #0f1620; --panel: rgba(18, 26, 38, 0.92); --panel-2: rgba(28, 38, 54, 0.9); --ink: #eef2f6; --muted: #9fb0c3;
  --accent: #f0b35a; --accent-2: #5aa9c9; --line: rgba(255,255,255,0.08); --danger: #e85d75;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  /* B8: one knob for interface size, and one opaque surface for panels that sit over the world. */
  --ui-scale: 1;
  --panel-solid: #121a26;
  --creator-w: min(560px, 100vw);
}
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--ui-scale)); }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; }
#app { position: fixed; inset: 0; }
canvas.game { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; }
button, .button { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { border-color: rgba(255,255,255,0.25); }
button.primary { background: var(--accent); color: #1a1205; border-color: transparent; font-weight: 600; }
button.mini { padding: .2rem .5rem; font-size: .8rem; }
button.active { outline: 2px solid var(--accent); }
input, textarea, select { font: inherit; color: var(--ink); background: #0b111a; border: 1px solid var(--line); border-radius: 6px; padding: .45rem .6rem; width: 100%; }
input[type="range"] { padding: 0; }
input[type="checkbox"] { width: auto; }
label { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; font-size: .9rem; }
label.check { flex-direction: row; align-items: center; gap: .5rem; }
h1 { font-size: 2.6rem; margin: 0 0 .3rem; letter-spacing: -.02em; color: var(--accent); }
h2 { margin: 0 0 .6rem; } h3 { margin: 1rem 0 .3rem; font-size: 1rem; color: var(--accent-2); } h4 { margin: .8rem 0 .2rem; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
p { line-height: 1.5; margin: .4rem 0; }
.muted { color: var(--muted); } .tiny { font-size: .8rem; } .mono { font-family: var(--mono); }
.hidden { display: none !important; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; margin-top: 1rem; }
.stack { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.stack button { width: 100%; padding: .7rem; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }

/* ---- 10-screens.css ---- */
/* Screens */
.screen { position: absolute; inset: 0; padding: 1rem; overflow: auto; }
.screen.center { display: grid; place-items: center; }
.screen.scroll { display: block; }
.menu-bg { background: radial-gradient(1200px 600px at 50% 110%, #1d3a55 0%, #0f1620 60%); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.card.narrow { width: min(460px, 100%); }
.card.wide { width: min(880px, 100%); margin: 0 auto; }
.world-cards { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.world-card { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 150px; padding: .6rem; text-align: left; }
.world-card img { width: 100%; height: auto; border-radius: 6px; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; margin: .5rem 0; }
.preset { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .5rem .6rem; }
.swatches { display: flex; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); }
.preview { display: block; margin: .3rem 0 .6rem; background: #1c2a3a; border-radius: 8px; }
.world-card > button[data-world] { display: flex; flex-direction: column; gap: .3rem; width: 100%; text-align: left; }
.world-card [data-notes] { border-radius: 999px; padding: .15rem .5rem; color: #e5bc82; background: #3d3025; }

/* The one-game menus share the night and lamplight palette of the approved mock. */
.main-menu, .settings-screen, .screen:has([data-screen="pick-world"]), .screen:has([data-screen="load-game"]) {
  --panel: #151f30; --panel-2: #1d2a40; --line: #2b3b57; --ink: #e9edf4; --muted: #9aa8bf; --accent: #f2b54a;
  background: radial-gradient(ellipse at 50% 120%, #1f3550 0%, #0d1420 65%);
  font-size: 15px;
}
.main-menu > .card { background: transparent; border: 0; box-shadow: none; padding: 16px; width: min(560px, 100%); text-align: center; }
.main-menu h1 { font-family: Georgia, serif; font-size: clamp(40px, 7vw, 68px); font-weight: 400; text-transform: uppercase; letter-spacing: .18em; color: var(--ink); text-shadow: 0 0 30px #f2b54a59; margin: 10px 0; }
.menu-lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px 6px #f2b54a73; margin: 0 auto; }
.main-menu .stack { width: min(320px, 100%); margin: 10px auto 0; gap: 8px; }
.main-menu .stack button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; text-align: left; font-size: 16px; font-weight: 600; }
.main-menu small { color: var(--muted); font-size: 12px; font-weight: 400; text-align: right; max-width: 190px; white-space: pre-line; }
.main-menu .primary small { color: #5a420f; }
.quit-screen > .card { background: transparent; border: 0; box-shadow: none; text-align: center; }
.quit-screen h2 { font: 400 34px Georgia, serif; letter-spacing: .08em; }
.main-menu button:disabled { opacity: .55; cursor: default; }
.main-menu button:hover, .main-menu button:focus-visible { border-color: var(--accent); outline: none; }
.screen:has([data-screen="pick-world"]) { display: block; padding: 18px 20px; }
.card.wide[data-screen="pick-world"] { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: min(100%, 1200px); }
[data-screen="pick-world"] > .row > .grow, .settings-heading .grow { flex: 1; }
[data-screen="pick-world"] h2, .settings-screen h2 { font: 400 24px Georgia, serif; letter-spacing: .04em; }
[data-screen="pick-world"] h3 { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
[data-screen="pick-world"] .world-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
[data-screen="pick-world"] .world-card { width: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 8px; }
[data-screen="pick-world"] .world-card > button { background: transparent; border: 0; padding: 0; }
[data-screen="pick-world"] .world-card img { height: 70px; object-fit: cover; }
@media (max-width: 520px) { .main-menu small { max-width: 155px; } }
.settings-screen > .card { background: transparent; border: 0; box-shadow: none; padding: 0; width: min(100%, 1200px); }
.settings-tabs, .settings-presets { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.settings-tabs button, .settings-presets button { background: transparent; border: 0; border-radius: 0; padding: 6px 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.settings-tabs [aria-selected="true"], .settings-presets [aria-pressed="true"] { background: var(--accent); color: #1b1305; }
.settings-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.settings-panel[hidden] { display: none; }
.settings-panel label { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); align-items: center; gap: 8px 14px; margin: 8px 0; }
.settings-panel label.check { display: flex; }
.settings-choice { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); align-items: center; gap: 8px 14px; margin: 8px 0; }
.settings-choice > label { display: block; margin: 0; }
.settings-choice input[hidden], .settings-choice select[hidden] { display: none; }
.settings-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.settings-toggle button { border: 0; border-radius: 0; padding: 6px 10px; background: transparent; font-size: 12px; font-weight: 600; color: var(--muted); }
.settings-toggle [aria-pressed="true"] { background: var(--accent); color: #1b1305; }
.settings-panel h3 { color: var(--ink); font-size: 15px; font-weight: 400; margin-top: 0; }
.settings-model { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.settings-model [role="status"] { grid-column: 1 / -1; }
.settings-model [role="status"]:empty { display: none; }
.settings-panel details { margin-top: 12px; }
.settings-panel summary { cursor: pointer; color: var(--accent); }
.random-island-card { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 8px; }
.new-game-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
.world-copy-card { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 8px; }
.random-island-card > button { background: transparent; border: 0; padding-left: 0; font-weight: 600; }
.random-island-card .row input { width: 130px; }
.random-island-card label:has(input[type="checkbox"]) { flex-direction: row; }
.random-island-card .row [aria-pressed="true"] { background: var(--accent); color: #1b1305; }
[data-screen="pick-world"] .world-card:has([aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.random-island-card:has(> [aria-pressed="true"]) { border-color: var(--accent); }
.random-island-card img { width: 100%; height: 110px; object-fit: contain; background: #3f78b5; border-radius: 6px; }
.load-screen { --panel: #151f30; --panel-2: #1d2a40; --line: #2b3b57; --ink: #e9edf4; --muted: #9aa8bf; --accent: #f2b54a; background: radial-gradient(ellipse at 50% 120%, #1f3550, #0d1420 65%); }
.load-page { max-width: 880px; margin: 0 auto; }
.load-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.load-page h2 { font: 400 24px Georgia, serif; letter-spacing: .04em; }
.load-page .save-slot { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.load-page .stack button { width: auto; padding: 7px 12px; }
.save-detail { flex: 1; min-width: 150px; }
.save-thumb { width: 90px; height: 56px; border-radius: 6px; object-fit: cover; }
.save-thumb-empty { background: #3f78b5; }
.save-mode { display: inline-block; padding: 2px 7px; font-size: 11px; border-radius: 99px; }
.save-mode.creator { color: #c9a2ff; background: #c9a2ff26; }
.save-mode.player { color: #6fc3e8; background: #6fc3e826; }
@media (max-width: 520px) { .settings-panel label, .settings-choice { grid-template-columns: 1fr; } }

/* ---- 11-loading.css ---- */
/* NARNIA-0457: the world stays central while real work reports progress. */
.loading { z-index: 50; background: radial-gradient(ellipse at 50% 120%, #1f3550 0%, #0d1420 65%); }
.loading[hidden], .loading-stall[hidden], .loading-fail[hidden], .loading-steps[hidden] { display: none; }
.loading-content { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; }
.loading-content h2 { font-family: var(--font-display, Georgia, serif); font-size: 34px; font-weight: 400; letter-spacing: .12em; margin: 0 0 10px; overflow-wrap: anywhere; }
.loading-bar { width: min(360px, 90%); height: 6px; background: #1e2c42; border-radius: 9px; overflow: hidden; }
.loading-fill { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.loading-current { color: var(--muted); font-size: 13px; margin: 0; min-height: 20px; }
.loading-figures { width: min(360px, 90%); justify-content: space-between; font-size: 12px; color: var(--muted); margin: 0; }
.loading-stall, .loading-fail { width: 100%; margin-top: .8rem; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: left; }
.loading-error { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .loading-fill { transition: none; } }

/* ---- 20-hud.css ---- */
/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { display: flex; gap: .5rem; padding: .6rem; align-items: stretch; flex-wrap: wrap; }
.card-mini { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .7rem; pointer-events: auto; }
.hud-clock { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.hud-date { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.hud-speed { display: flex; gap: .25rem; align-items: center; height: 100%; }
.hud-speed button { padding: .3rem .5rem; font-size: .8rem; }
.hud-stats { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.hud-buttons { margin-left: auto; display: flex; gap: .4rem; align-items: center; pointer-events: auto; }
.hud-hint { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; opacity: 0; transition: opacity .15s; font-size: .9rem; }
.hud-hint.show { opacity: 1; }
/* K2.7: who you are while a villager is taken over. */
.hud-takeover { position: absolute; top: 4.5rem; right: 1rem; background: var(--panel); border: 1px solid var(--accent, var(--line)); border-radius: 999px; padding: .3rem .9rem; font-size: .9rem; opacity: 0; transition: opacity .15s; }
.hud-takeover.show { opacity: 1; }
.toast { position: absolute; top: 6.5rem; left: 50%; transform: translateX(-50%); z-index: 8; width: max-content; max-width: min(40rem, calc(100vw - 2rem)); box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .9rem; opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }
/* NARNIA-0112: the first-person aim, at the screen's centre. */
.crosshair { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; z-index: 2; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgba(255, 255, 255, .85); box-shadow: 0 0 2px rgba(0, 0, 0, .8); }
.crosshair::before { left: 6px; top: 0; width: 2px; height: 14px; }
.crosshair::after { left: 0; top: 6px; width: 14px; height: 2px; }
.crosshair[hidden] { display: none; }
.story-log { position: absolute; left: .6rem; bottom: .6rem; width: min(380px, 60vw); font-size: .78rem; color: var(--muted); pointer-events: none; text-shadow: 0 1px 2px #000; }
.log-line { margin: .1rem 0; } .log-creator { color: var(--accent); } .log-warn { color: var(--danger); } .log-body { color: #b9d99a; }

/* ---- 21-wheel.css ---- */
/* The wheel (K1.2): colours by group, talk / body acts / force */
.wheel { position: absolute; inset: 0; display: none; pointer-events: auto; background: radial-gradient(circle at center, rgba(8,12,18,.35), rgba(8,12,18,.1) 60%); z-index: 20; }
.wheel.open { display: block; }
.wheel-ring { position: absolute; width: 0; height: 0; }
.wheel-centre { position: absolute; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: .6rem; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: .85rem; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.wheel-act { position: absolute; left: 0; top: 0; min-width: 96px; max-width: 170px; padding: .45rem .7rem; border-radius: 12px; background: var(--panel); border: 2px solid var(--wheel-c); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: .1rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.wheel-act .wheel-key { position: absolute; top: -.55rem; left: -.45rem; font-size: .7rem; background: var(--wheel-c); color: #10161f; border-radius: 999px; padding: 0 .35rem; }
.wheel-act .wheel-label { font-size: .95rem; font-weight: 600; }
.wheel-act .wheel-reason { font-size: .7rem; color: var(--muted); line-height: 1.2; }
.wheel-act.focus { background: var(--panel-2); outline: 2px solid var(--wheel-c); outline-offset: 2px; }
.wheel-act.greyed { --wheel-c: #5b6573; cursor: not-allowed; }
.wheel-act.greyed .wheel-label { color: var(--muted); }
.wheel-talk { --wheel-c: var(--accent-2); }
.wheel-body { --wheel-c: #8fc56b; }
.wheel-force { --wheel-c: var(--danger); }

/* ---- 22-dialogue.css ---- */
/* Dialogue */
.dialogue { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 1rem; }
.dlg-card { width: min(720px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; }
.dlg-who { font-weight: 700; color: var(--accent); }
.dlg-text { font-size: 1.05rem; line-height: 1.5; margin: .4rem 0; }
.dlg-reply-info { font-family: monospace; margin: .25rem 0 .6rem; }
.dlg-suggestions { display: grid; gap: .4rem; margin-top: .8rem; }
.dlg-suggestions > .chip { text-align: left; border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; }
.dlg-say { display: flex; gap: .5rem; margin-top: .6rem; }
.close { padding: .2rem .5rem; }

/* ---- 23-books.css ---- */
/* The books (K4.1): the player's money, the prices and the Town Hall's accounts, a narrower panel on the same side. */
.books {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 80vw);
  background: var(--panel-solid); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  box-shadow: -12px 0 40px rgba(0,0,0,.45);
}
.books .sect { border: 1px solid var(--line); border-radius: 10px; padding: .25rem .6rem .6rem; background: rgba(255,255,255,.015); }
.books h4 { margin: .3rem 0 .4rem; color: var(--accent-2); }
.books-row { display: flex; gap: .6rem; font-size: .85rem; padding: .12rem 0; border-bottom: 1px dotted var(--line); }
.books-row.warn, .books .warn { color: var(--danger); }
.books-row .grow { flex: 1 1 auto; }

/* ---- 24-digest.css ---- */
/* The digest (K2.6): what happened while you skipped ahead, over the village, the world waiting. */
.hud-speed button.skip { padding: .3rem .55rem; }
.hud.skipping .hud-clock { color: var(--accent); }
.digest { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; padding: 1rem; z-index: 25; background: rgba(8,12,18,.45); pointer-events: auto; }
.digest-card { width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.digest-head { margin: .5rem 0 .3rem; line-height: 1.4; }
.digest-stop { margin: .2rem 0 .5rem; padding: .4rem .7rem; border-left: 3px solid var(--danger); background: rgba(255,255,255,.04); }
.digest-body { overflow: auto; flex: 1; min-height: 0; padding-right: .3rem; }
.digest-day { margin: .55rem 0 .15rem; font-weight: 600; }
.digest-line { margin: .1rem 0 .1rem .6rem; line-height: 1.35; }
.digest-foot { display: flex; justify-content: flex-end; margin-top: .7rem; }
.gs-skip { position: relative; }
.gs-skip summary { cursor: pointer; list-style: none; padding: .35rem .6rem; color: var(--ig-ink, #16212b); background: var(--ig-panel, #f7f9fb); border: 1px solid var(--ig-line, #cfd8e0); border-radius: 6px; white-space: nowrap; }
.gs-skip summary:focus-visible { outline: 2px solid var(--ig-accent, #1f7fd1); }
.gs-skip-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; display: grid; gap: 4px; padding: 6px; color: var(--ig-ink, #16212b); background: var(--ig-panel, #f7f9fb); border: 1px solid var(--ig-line, #cfd8e0); border-radius: 8px; box-shadow: 0 8px 24px #16212b26; }
.gs-skip-menu button { text-align: left; }
.skip-overlay { --panel: #f7f9fb; --line: #cfd8e0; --muted: #5b6b78; --accent: #1f7fd1; color: #16212b; font: 14px Barlow,system-ui,sans-serif; background: #16212b59; }
.skip-card { width: min(680px, 100%); gap: .7rem; background: #f7f9fb; border-color: #cfd8e0; box-shadow: 0 12px 45px #16212b40; }
.skip-overlay button { color: #16212b; background: #f7f9fb; border: 1px solid #cfd8e0; border-radius: 7px; padding: 7px 11px; font: 500 13px Barlow,system-ui,sans-serif; }
.skip-overlay button:hover { background: #e6eef6; }
.skip-overlay button.primary { color: #fff; background: #1f7fd1; border-color: #1f7fd1; }
.skip-overlay button.primary:hover { background: #176ab4; }
.skip-overlay button:focus-visible { outline: 2px solid #1f7fd1; outline-offset: 2px; }
.skip-overlay .muted { color: #5b6b78; }
.skip-overlay [hidden] { display: none !important; }
.skip-card h2 { margin: 0; font-size: 1.15rem; }
.skip-card p { margin: 0; }
.skip-card progress { width: 100%; height: 10px; accent-color: var(--accent); }
.skip-tiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.skip-tile { display: flex; flex-direction: column; gap: 3px; padding: .65rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.skip-tile strong { font-size: 1.3rem; }
.skip-tile span { font-size: .75rem; color: var(--muted); }
.skip-stories { overflow: auto; max-height: 220px; min-height: 0; }
.skip-stories h3 { font-size: .8rem; margin: 0 0 .4rem; }
.skip-story { display: grid; grid-template-columns: 125px 1fr; gap: 8px; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .8rem; }
.skip-card .digest-foot { justify-content: flex-start; gap: .5rem; }
@media (max-width: 560px) { .skip-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); } .skip-story { grid-template-columns: 1fr; gap: 2px; } }

/* ---- 30-creator.css ---- */
/* Creator (B8): one full-height, opaque panel with a single scrollbar. */
/* NARNIA-0239 (K14.2): docked in the God mode shell's tool panel (People, Places, Dials); each section's data-for says which tool shows it. */
.creator { display: flex; flex-direction: column; pointer-events: auto; }
.creator.hidden { display: none; }
.creator[data-tool="people"] [data-for]:not([data-for~="people"]),
.creator[data-tool="places"] [data-for]:not([data-for~="places"]),
.creator[data-tool="dials"] [data-for]:not([data-for~="dials"]) { display: none; }
.gs-tool.wide { width: min(26rem, 100%); }
.gs-grow { margin-right: auto; }
.gs-jump { margin-bottom: .4rem; }
.creator-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--panel-solid); }
.creator-scroll { display: flex; flex-direction: column; gap: .6rem; }
.creator-dials { display: flex; flex-direction: column; gap: .6rem; }
.creator-blurb { margin: 0; }
.creator-time { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.creator-time button { padding: .25rem .5rem; font-size: .8rem; }
.creator .sect { border: 1px solid var(--line); border-radius: 10px; padding: .25rem .6rem .6rem; background: rgba(255,255,255,.015); }
.creator .sect > summary { cursor: pointer; padding: .4rem 0; font-weight: 600; color: var(--accent-2); list-style: none; }
.creator .sect > summary::marker, .creator .sect > summary::-webkit-details-marker { display: none; }
.creator .sect > summary::before { content: "▸ "; color: var(--muted); }
.creator .sect[open] > summary::before { content: "▾ "; }
.creator-prompt { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: start; }
.creator-input { resize: vertical; min-height: 3.2rem; font-size: .9rem; }
.creator-pick { display: grid; grid-template-columns: 1fr; gap: .35rem; margin-bottom: .5rem; }
.creator-body { padding-right: .2rem; }
.slider { margin: .15rem 0; font-size: .8rem; }
.slider input { margin: 0; }

/* ---- 31-godmode.css ---- */
/* God mode (K11.6): search, the status panels with their edit fields, the feed, the population. */
.god-hits { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0; }
.god-title { margin: .4rem 0 .2rem; }
.god-run { width: auto; display: inline; margin-right: .3rem; }
.god-notice { color: var(--accent); margin: .1rem 0 .3rem; }
.god-field input.god-num { width: 5.5rem; padding: .1rem .3rem; font-size: .8rem; }
.god-field, .god .books-row { gap: .4rem; align-items: center; }
.god-pick, .god-owner { max-width: 11rem; padding: .1rem .3rem; font-size: .8rem; }
.god-feed { display: flex; flex-direction: column; gap: .15rem; margin-top: .3rem; }
.god-line.gossip { color: var(--accent); }
.god-filter { width: 50%; padding: .15rem .3rem; font-size: .8rem; }
.god-chips { flex-wrap: wrap; gap: .25rem; }
.god-chip.on { border-color: var(--accent); color: var(--accent); }
.god-poplist { display: flex; flex-direction: column; gap: .1rem; margin-top: .3rem; }   /* no scroll of its own: the Creator panel scrolls once (smoke checks it) */
.god-person { text-align: left; white-space: normal; overflow-wrap: anywhere; }
/* K10.1 (NARNIA-0098): population over time: one line in the accent, the readings in the text colours, a table under it. */
.god-trend { margin: .3rem 0 .4rem; display: flex; flex-direction: column; gap: .2rem; }
.god-trend-line { width: 100%; height: 40px; color: var(--accent); display: block; }
.god-trend-table { border-collapse: collapse; }
.god-trend-table th { text-align: right; font-weight: normal; opacity: .7; padding: 0 .4rem 0 0; }
.god-trend-table td { text-align: right; padding: 0 .4rem 0 0; }

/* ---- 32-creator-fit.css ---- */
/* NARNIA-0231: no label in the Creator panel is cut off at 1280x720, 1920x1080 or 1280x900. Text wraps (long words break),
   flex and grid children may shrink below their content, and controls stay inside the panel; the one scrollbar is .creator-scroll's. */
.creator { overflow-wrap: anywhere; }
.creator * { min-width: 0; }
.creator button, .creator label, .creator summary, .creator .row > * { white-space: normal; }
.creator .mem-row:not(.open) { white-space: nowrap; }
.creator select, .creator input:not([type=checkbox]):not([type=radio]):not([type=range]), .creator textarea { max-width: 100%; box-sizing: border-box; }
.creator table { table-layout: auto; max-width: 100%; }
.creator .row { flex-wrap: wrap; }

/* ---- 33-inspector.css ---- */
/* The inspector (K2.5): the plan as a table, the current intent marked. */
.inspector-thinking { margin: .1rem 0 .3rem; }
.plan { width: 100%; border-collapse: collapse; }
.plan td { padding: .15rem .3rem; vertical-align: top; border-top: 1px solid var(--line); }
.plan tr.current td { color: var(--accent); }
.plan .plan-score { text-align: right; white-space: nowrap; }
.plan .plan-parts { font-size: .72rem; }
.bond { margin: .1rem 0; }
.inspector-notice { color: var(--danger); margin: .1rem 0 .3rem; }
.inspector-order, .inspector-bond { margin: .3rem 0; gap: .3rem; }
.inspector-bond label { white-space: nowrap; }
.mini-select { padding: .1rem .3rem; font-size: .8rem; }
.mem-edit { width: 100%; padding: .1rem .3rem; font-size: .78rem; }
.bond-pick { padding: 0 .3rem; }
/* Memories: who · when · gist, expanding on click. */
.mem-list { display: flex; flex-direction: column; gap: .15rem; }
.mem-row { display: block; width: 100%; text-align: left; padding: .25rem .4rem; background: transparent; border: 1px solid transparent; border-radius: 6px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row:hover { border-color: var(--line); background: rgba(255,255,255,.04); }
.mem-row.open { border-color: var(--line); background: rgba(255,255,255,.05); white-space: normal; }
.mem-who { color: var(--accent-2); font-weight: 600; }
.mem-sal { float: right; margin-left: .5rem; }
.mem-full { padding: .1rem .6rem .45rem; color: var(--muted); border-left: 2px solid var(--line); margin: 0 0 .2rem .4rem; }

/* ---- 40-touch.css ---- */
/* Touch */
.touch { position: absolute; right: .8rem; bottom: .8rem; display: none; gap: 1rem; align-items: flex-end; }
@media (pointer: coarse) { .touch { display: flex; } .story-log { display: none; } }
.dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 2px; }
.tbtn { width: 44px; height: 44px; padding: 0; border-radius: 10px; background: rgba(18,26,38,.8); font-size: 1rem; touch-action: none; user-select: none; }
.tbtn.act { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #1a1205; font-weight: 700; }

/* ---- 41-labels.css ---- */
/* Shared label layer (3D backend). While the Creator panel is open the layer stops at its edge,
   so place names cannot show through an opaque panel (B8). */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
body.creator-open .labels { right: var(--creator-w); }
body.creator-open .story-log { display: none; }
/* Blank-screen check (NARNIA-0020, scripts/blank.mjs): while the canvas is captured, every DOM overlay
   under #app (labels, HUD, log, dialogue, Creator panel, touch controls) is hidden, so labels over a
   black canvas cannot pass for a drawn frame. Layout is untouched; the class is removed after the capture. */
body.capture-canvas #app > :not(canvas.game) { visibility: hidden !important; }
.label { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .78rem; padding: .12rem .45rem; border-radius: 999px; background: rgba(20, 24, 30, .62); color: #f3efe6; text-shadow: 0 1px 2px #000; will-change: transform, opacity; }
.label-place { font-weight: 600; font-size: .8rem; }
.label-npc { background: rgba(0,0,0,.45); }
.label-player { color: #ffe27a; font-weight: 700; background: rgba(0,0,0,.45); }

/* ---- 42-creator-blocks.css ---- */
/* Inside the Creator panel these are plain blocks: the panel owns the only scrollbar (B8). */
/* The world rules panel (K2.8): one row per dial, grouped by module; a changed dial is marked and can be reset. */
.world-rules { padding: 0; }
.world-rules summary { cursor: pointer; }
.world-rules h4 { margin: .5rem 0 .2rem; text-transform: capitalize; }
.rules-row { align-items: center; gap: .4rem; padding: .15rem 0; border-left: 2px solid transparent; padding-left: .3rem; }
.rules-row.changed { border-left-color: var(--accent-2); }
.rules-row > label { display: flex; flex: 1; align-items: center; justify-content: flex-start; text-align: left; gap: .3rem; }
.rules-help { flex-basis: 100%; }
.rules-status.warn { color: var(--danger); }
.mini-select { padding: .1rem .3rem; }
.row.wrap { flex-wrap: wrap; }
.save-slot { align-items: stretch; flex-wrap: nowrap; } .save-slot > button { text-align: left; } .save-thumb { object-fit: cover; border-radius: 4px; background: var(--panel-2); flex: none; }
.row .grow { flex: 1; }
.mini-num { width: 4.2rem; padding: .1rem .3rem; }
.mini-text { width: 7rem; padding: .1rem .3rem; }
button.mini.danger { color: var(--danger); }

/* ---- 50-connect.css ---- */
/* Connect a model */
.connect .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: .8rem 0; }
.connect .preset { text-align: left; display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem; }
.connect .fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.connect .fields label:first-child { grid-column: 1 / -1; }
.connect .help { white-space: pre-wrap; margin: .5rem 0; }
.connect-status { flex: 1; font-size: .9rem; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--line); min-height: 2.2rem; }
.connect-status.ok { border-color: #4caf7d; color: #9ce6bb; }
.connect-status.bad { border-color: var(--danger); color: #ffb3c1; }
.connect-status.busy { color: var(--muted); }
/* Builder chat — grows with the conversation, and is not in the DOM flow until there is one. */
.builder-log { display: flex; flex-direction: column; gap: .3rem; padding: .3rem .5rem .5rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.builder-line.you strong { color: var(--accent-2); } .builder-line.builder strong { color: var(--accent); }
.builder-line.pending { color: var(--muted); } .builder-line .warn, .builder-line.warn { color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 51-voice.css ---- */
/* Voice */
button.mic { padding: .45rem .6rem; font-size: 1rem; }
button.mic.active { background: var(--danger); border-color: transparent; }
.dlg-listening { font-size: .9rem; color: var(--accent); padding: .2rem .4rem; border-left: 3px solid var(--accent); }
/* What you last said, so a mis-heard sentence is visible and can be fixed and said again (B2). */
.dlg-you { font-size: .85rem; color: var(--ink); display: flex; gap: .4rem; align-items: baseline; margin-bottom: .2rem; padding-right: 2.5rem; }
.dlg-you-text { color: var(--accent-2); }
.dlg-you button.mini { flex: 0 0 auto; }
/* Typing indicator (B1) — three pulsing dots while the model composes. */
.dlg-typing { display: flex; gap: .3rem; padding: .35rem .1rem; }
.dlg-typing.inline { display: inline-flex; vertical-align: middle; padding: 0; }
.dlg-typing span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); opacity: .3; animation: dot 1.1s infinite; }
.dlg-typing span:nth-child(2) { animation-delay: .18s; }
.dlg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .dlg-typing span { animation: none; opacity: .6; } }
.dlg-text.dim { opacity: .45; }

/* ---- 52-phone.css ---- */
/* K1.3: outcome chips. Player mode reads a feeling; Creator mode (.creator-view) reads numbers. */
/* The phone (K2.9): one card over the game, like the dialogue, with the messages and the contacts. */
.phone { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 4.5rem 1rem 1rem; pointer-events: auto; }
.phone-card { width: min(560px, 100%); max-height: calc(100% - 2rem); overflow-y: auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.phone-card h4 { margin: .8rem 0 .3rem; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.phone-msg { padding: .35rem .5rem; margin: .2rem 0; border-radius: 8px; background: rgba(255,255,255,.04); font-size: .92rem; line-height: 1.4; }
.phone-msg.mine { background: rgba(120,180,255,.08); }
.phone-msg.pending { border: 1px solid var(--accent); }
.phone-answers { display: flex; gap: .4rem; margin-top: .3rem; }
.phone-answers .chip { padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; }
.phone-contact { display: flex; align-items: center; gap: .6rem; padding: .3rem .2rem; border-bottom: 1px solid var(--line); }
.phone-contact .phone-name { flex: 1 1 auto; font-weight: 600; }
.phone-button.unread { color: var(--accent); font-weight: 700; }
.dialogue.by-phone .dlg-card { border-color: var(--accent); }
.dlg-asks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.dlg-asks .chip { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .35rem .7rem; border-radius: 999px; font-size: .85rem; line-height: 1.2; }
.dlg-asks .chip:disabled { opacity: .45; cursor: default; }
.chip-label { font-weight: 600; }
.chip-odds { color: var(--muted); font-size: .78rem; font-style: italic; }
.creator-view .chip-odds { font-family: var(--mono); font-style: normal; color: var(--accent-2); }
.dlg-answer { display: inline-block; margin: .2rem 0; padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); background: var(--panel-2); }
.dlg-answer.outcome-agree { border-color: #6fbf73; color: #a9e2ab; }
.dlg-answer.outcome-decline { border-color: var(--danger); color: #f2a3b1; }
.dlg-answer.outcome-putOff { border-color: var(--accent); color: var(--accent); }
.creator-view .dlg-answer { font-family: var(--mono); font-size: .78rem; }
.dlg-answer.refused { border-style: dashed; }

/* ---- 60-character.css ---- */
/* The character screen (K11.2, NARNIA-0102): six category tabs over a draft, a turning, zooming preview */
.card.wide.character { width: min(1240px, 100%); }
/* NARNIA-0406: the character fills most of the screen, zoomed in, on a soft stage; the tabs sit beside it. */
.look-cols { grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 1fr); }
@media (max-width: 720px) { .look-cols { grid-template-columns: 1fr; } }
.look-preview { width: 100%; max-width: 480px; height: auto; aspect-ratio: 3 / 4; max-height: 72vh; margin: 0 auto; display: block; border-radius: 12px; cursor: grab; touch-action: none; }
.look-flip { font-weight: 600; }
.look-price { margin: .4rem 0 0; font-weight: 600; color: var(--accent); }
.presets-row { margin: .3rem 0 .6rem; }
.look-preview:active { cursor: grabbing; }
.look-view { gap: .3rem; }
/* K11.4: what the handles on the figure do, under the view buttons. */
.look-shape-hint { margin: .3rem 0 0; }
.look-summary { margin: .2rem 0 .6rem; }
/* K11.3: the character screen over the village (Creator → Edit look); the refusal line under the panels. */
.look-editor { position: absolute; inset: 0; z-index: 30; pointer-events: auto; }
.look-editor .screen.look-edit { background: rgba(8, 12, 18, .78); }
.look-notice { color: var(--danger); margin: .3rem 0 0; }
/* NARNIA-0226 (K13.4): the New person screen's goals, home, job and arrival */
.np-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem .8rem; margin: .6rem 0 0; }
.np-field { display: flex; flex-direction: column; gap: .15rem; }
.np-field select, .np-field textarea { width: 100%; box-sizing: border-box; }
.np-field:first-child { grid-column: 1 / -1; }
/* K11.3: the gallery of saved looks, under the preview. */
.look-gallery { margin-top: .8rem; }
.look-gallery h4 { margin: 0; }
.look-gallery-save { gap: .3rem; margin: .3rem 0; }
.look-gallery-name { flex: 1; min-width: 0; }
.look-gallery-list { list-style: none; margin: 0; padding: 0; max-height: 11rem; overflow: auto; }
.look-gallery-list li { display: flex; align-items: center; gap: .3rem; padding: .15rem 0; border-bottom: 1px solid var(--line); }
.look-gallery-list .swatch.mini { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; flex: none; }
.look-gallery-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.small { padding: .25rem .55rem; font-size: .85rem; }
.row.between { justify-content: space-between; }
.look-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.look-tabs .tab { padding: .35rem .7rem; border-radius: 999px; font-size: .9rem; }
.look-tabs .tab.active { background: var(--accent); color: #0f1620; outline: none; }
.look-panel label.slider { display: flex; flex-direction: column; gap: .1rem; margin: .4rem 0; }
.look-panel .slider-head { display: flex; justify-content: space-between; }
.look-panel .ends { display: flex; justify-content: space-between; }
.look-panel input[type="range"] { width: 100%; }
.choices { display: flex; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.choices .chip { padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; }
.choices .chip.active { background: var(--accent); color: #0f1620; outline: none; }
.swatch.active { border-color: var(--accent); outline: 2px solid var(--accent); }
.occasion { margin: .3rem 0 .5rem; }
label.check { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }

/* ---- 70-world-search.css ---- */
/* K11.5 (NARNIA-0154): the God bar, under the HUD's top row. */
.world-search { position: static; max-width: 100%; }
.world-search-body { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; pointer-events: auto; position: relative; }
.world-search-body:has(.world-search-title) { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; }
.world-search-title { font-weight: 700; color: var(--accent); }
.world-search-label { color: var(--muted); font-size: .85rem; }
button.world-search-alex.on { background: var(--accent); color: #0f1620; }
.world-search-search { min-width: 11rem; padding: .2rem .5rem; font-size: .85rem; }
.world-search-release input { width: auto; margin: 0; }
.world-search-release { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.world-search-results { list-style: none; margin: 0; padding: 0; flex-basis: 100%; max-height: 14rem; overflow: auto; }
.world-search-results:empty { display: none; }
.world-search-hit { display: block; width: 100%; text-align: left; padding: .2rem .5rem; font-size: .85rem; background: transparent; border: 0; color: var(--ink); cursor: pointer; }
.world-search-hit:hover { background: var(--panel-2); }
.gs-ingame .world-search-body { display:flex; flex-direction:column; align-items:stretch; color:var(--ig-ink); }
.gs-ingame .world-search-search { min-width:0; width:100%; }
.gs-ingame .build-overlays { display:flex; flex-direction:column; gap:12px; }
.gs-ingame .build-overlays label { display:flex; flex-direction:column; gap:6px; }

/* ---- 71-worldmap.css ---- */
/* NARNIA-0211: the world map: a minimap bottom-right, the full island map over everything but the toasts. */
.worldmap { position: absolute; inset: 0; pointer-events: none; }
.worldmap[hidden] { display: none; }
.worldmap-mini { position: absolute; right: .8rem; bottom: .8rem; width: 176px; height: 176px; border-radius: 50%; border: 2px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.45); pointer-events: auto; cursor: zoom-in; background: #2a6996; z-index: 4; }
.worldmap-mini[hidden] { display: none; }
body.creator-open .worldmap-mini { right: calc(var(--creator-w) + .8rem); }
@media (pointer: coarse) { .worldmap-mini { bottom: 9.5rem; width: 128px; height: 128px; } }
.worldmap-full { position: fixed; inset: 0; z-index: 22; pointer-events: auto; background: #2a6996; }
.worldmap-full[hidden] { display: none; }
.worldmap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.worldmap-bar { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; }
.worldmap-btn { padding: .25rem .6rem; font-size: .85rem; }

/* ---- 72-godview.css ---- */
/* NARNIA-0213: the god view */
.godview { position: absolute; right: .6rem; top: 4.6rem; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; max-width: 22rem; }
.godview[hidden], .godview-chips[hidden] { display: none; }
.godview-bar, .godview-card { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.godview-card:empty { display: none; }
.godview-overlay { width: auto; padding: .15rem .4rem; font-size: .85rem; }
.godview-card { flex-direction: column; align-items: stretch; }
.godview-title { font-weight: 700; color: var(--accent); }
.godview-btn.on, .godview-speed.active { background: var(--accent); color: #0f1620; }
.godview-card-body { font-size: .85rem; color: var(--muted); }
.godview-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.story { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem; width: 22rem; max-width: 100%; }
.story-title { font-weight: 700; color: var(--accent); cursor: pointer; }
.story-filter { width: 48%; font-size: .8rem; }
.story-kind.on { background: var(--accent); color: #0f1620; }
.story-list { max-height: 14rem; overflow-y: auto; margin-top: .3rem; }
.story-line { padding: .15rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.story-line:hover { background: rgba(255,255,255,.06); }
.story-line.kind-secret, .story-line.kind-feud { color: #e0a060; }
.godview-chips { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.godview-chip { position: absolute; left: 0; top: 0; font-size: .7rem; padding: 0 .35rem; border-radius: 8px; background: rgba(15,22,32,.78); color: var(--ink); white-space: nowrap; border: 1px solid transparent; pointer-events: auto; cursor: pointer; }
.godview-chip.tone-good { border-color: #4caf6a; }
.godview-chip.tone-ok { border-color: #d9b34a; }
.godview-chip.tone-bad { border-color: #d9534f; background: rgba(90,20,20,.8); }
.godview-chip.selected { outline: 2px solid var(--accent); }
.worldmap-note { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; color: var(--muted); pointer-events: none; }
/* NARNIA-0502: mock v6 Story summary and chips. */
.story-summary { margin: .6rem 0; padding: .6rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.story-summary h4 { margin: 0 0 .5rem; }
.story-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: .7rem; }
.story-stat { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.story-stat b { font: 700 18px "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--accent); }
.story-stat span { font-size: 10.5px; color: var(--muted); }
.story-stat.type-moved-in b { color: #31855a; }
.story-stat.type-lost-job b, .story-stat.type-crime b { color: #b35a20; }
.story-stat.type-friend b { color: #8660b3; }
.story-stat.type-wedding b { color: #e879a9; }
.story-stat.type-baby b { color: #f59e0b; }
.story-stat.type-left b { color: var(--muted); }
.story-top { display: grid; grid-template-columns: 40px 1fr; gap: 6px; font-size: 12.5px; padding: 4px 0; }
.story-kinds { flex-wrap: wrap; gap: 4px; }
.story-kind[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
.story-footer { justify-content: space-between; margin-top: .5rem; }
.gs-ingame .story { --panel:var(--ig-panel); --bg:#eef2f6; --line:var(--ig-line); --ink:var(--ig-ink); --muted:var(--ig-muted); --accent:var(--ig-accent); width:100%; box-sizing:border-box; color:var(--ink); }
.story-line { display:grid; grid-template-columns:40px 1fr; gap:6px; }

/* ---- 80-godshell.css ---- */
/* NARNIA-0237 (K14.1): the God mode shell. A column (top bar, middle, story strip) so no area can cover another or leave the screen. */
.gs { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; pointer-events: none; min-width: 0; }
.gs[hidden], .gs [hidden] { display: none; }
.gs-on .hud-top, .gs-on .godview-card { display: none; }   /* the shell's bar is the clock and speeds; the inspector is the card */
.gs-top, .gs-rail, .gs-tool, .gs-inspector, .gs-strip { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); }
.gs-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .35rem .6rem; border-width: 0 0 1px; }
/* NARNIA-0242 (K15.1): the Menu button, top-left, over every mode; the bars beside it leave room. */
.game-menu-button { position: absolute; top: .45rem; left: .5rem; z-index: 30; padding: .35rem .7rem; font-weight: 700; pointer-events: auto; }
.hud-top, .gs-top { padding-left: 6.4rem; }
.game-menu { z-index: 40; background: rgba(8, 12, 18, .72); }
.gs-title { font-weight: 700; color: var(--accent); }
.gs-time { font-size: 1rem; font-weight: 700; }
.gs-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.gs-top button.on, .gs-top button.active { background: var(--accent); color: #0f1620; }
.gs-middle { flex: 1; min-height: 0; display: flex; gap: .5rem; padding: .5rem .5rem 0; position: relative; }
.gs-gap { flex: 1; min-width: 0; pointer-events: none; }
.gs-rail { display: flex; flex-direction: column; gap: .25rem; padding: .3rem; border-radius: 10px; align-self: flex-start; max-height: 100%; overflow: auto; }
.gs-rail-btn { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; font-size: .85rem; text-align: left; }
.gs-rail-btn.on { background: var(--accent); color: #0f1620; }
.gs-rail-key { opacity: .7; font-size: .75rem; }
.gs-tool { width: 16rem; max-width: 100%; align-self: flex-start; max-height: 100%; overflow: auto; border-radius: 10px; padding: .5rem .6rem; min-width: 0; }
.gs-tool .world-search, .gs-tool .build-overlays { position: static; max-width: none; background: none; border: 0; padding: 0; }
.gs-soon { color: var(--accent); }

/* ---- 81-land.css ---- */
/* NARNIA-0222: the Land tool */
.land, .land-body { display: flex; flex-direction: column; gap: 8px; }
.land-modes, .land-grounds, .land-history { display: flex; flex-wrap: wrap; gap: 4px; }
.land .mini.on { background: var(--accent); color: #fff; }
.land-row { display: grid; grid-template-columns: 64px 1fr 48px; gap: 6px; align-items: center; }
.land-note { color: var(--accent); }
.land-ring-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }
.land-ring { fill: rgba(255, 255, 255, 0.12); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.land-ring.raise { stroke: #86efac; fill: rgba(134, 239, 172, 0.15); }
.land-ring.lower { stroke: #fca5a5; fill: rgba(252, 165, 165, 0.15); }
.land-ring.reset { stroke: #fcd34d; stroke-dasharray: 6 4; fill: rgba(252, 211, 77, 0.1); }

/* ---- 82-build.css ---- */
/* NARNIA-0224: the Build tool. The lot under the pointer is green when a building may go there and red when not. */
.build-ring-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }
.build-lot { stroke-width: 3; vector-effect: non-scaling-stroke; }
.build-lot.ok { fill: rgba(74, 222, 128, 0.35); stroke: #22c55e; }
.build-lot.bad { fill: rgba(248, 113, 113, 0.35); stroke: #ef4444; }
.build-door.ok { fill: #22c55e; stroke: #fff; }
.build-door.bad { fill: #ef4444; stroke: #fff; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.build-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid #8886; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.build-item.on { border-color: #22c55e; box-shadow: 0 0 0 2px #22c55e66; }
.build-thumb { display: block; line-height: 0; }
.build-name { font-weight: 600; font-size: 0.8rem; }
.build-turn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.build-verdict.ok { color: #16a34a; }
.build-verdict.bad { color: #dc2626; }
.build-group-name { margin: 8px 0 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }

/* ---- 83-streets.css ---- */
/* NARNIA-0223: the Streets tool */
.streets, .streets-body { display: flex; flex-direction: column; gap: 8px; }
.streets-modes, .streets-kinds, .streets-history { display: flex; flex-wrap: wrap; gap: 4px; }
.streets .mini.on { background: var(--accent); color: #fff; }
.streets-note { color: var(--accent); }
.land-ring.street { stroke: #93c5fd; fill: none; stroke-width: 3; }
.land-ring.streetpin { stroke: #93c5fd; fill: rgba(147, 197, 253, 0.35); }
.land-ring.remove { stroke: #fca5a5; fill: rgba(252, 165, 165, 0.15); }

/* ---- 84-godshell-inspector.css ---- */
.gs-inspector { width: 20rem; max-width: 100%; align-self: flex-start; max-height: 100%; overflow: auto; border-radius: 10px; padding: .5rem .6rem; min-width: 0; }
.gs-inspector.collapsed { width: auto; padding: .25rem; }
.gs-insp-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gs-tabs, .gs-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0; align-items: center; }
.gs-levels { display: inline-flex; align-items: center; gap: .2rem; margin-left: .4rem; }
.gs-tab.on { background: var(--accent); color: #0f1620; }
.gs-insp-body { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
/* K13.6: the history panel, newest change first; undone ones are dim. */
.gs-history .row { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.gs-changes { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; font-size: .8rem; }
.gs-change { padding: .15rem 0; border-bottom: 1px solid var(--line, rgba(128, 128, 128, .25)); overflow-wrap: anywhere; }
.gs-change.undone, .god-edit.undone { opacity: .5; text-decoration: line-through; }
.gs-change-kind { font-weight: 600; margin-right: .25rem; }
/* NARNIA-0366: the quick card: key facts and a few actions for the selection, floated beside the inspector. */
.gs-quick { position: absolute; right: 22rem; top: 4rem; width: 17rem; max-width: 40vw; z-index: 6; pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.gs-quick[hidden] { display: none; }
.gs-quick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.gs-quick-head .gs-quick-close { margin-left: auto; }
.gs-quick-facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: .4rem 0; }
.gs-quick-facts dt, .gs-quick-facts dd { margin: 0; }
.gs-quick-actions button:disabled { opacity: .5; }
.gs-strip { border-width: 1px 0 0; padding: .3rem .6rem; max-height: 40vh; overflow: auto; margin-top: .5rem; }
.gs-strip-row { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.gs-strip-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.gs-strip-line { background: none; border: 0; padding: .05rem .2rem; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.gs-story .story { margin-top: .4rem; }
.gs-help { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(0,0,0,.45); }
.gs-help-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow: auto; }
.gs-help-card td { padding: .15rem .8rem .15rem 0; vertical-align: top; }
/* NARNIA-0367: the life view, a tabbed panel for one person */
.gs-life { position: absolute; right: 22rem; top: 4rem; width: 26rem; max-width: 55vw; max-height: 70vh; overflow: auto; z-index: 7; pointer-events: auto; background: var(--panel-solid, var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.gs-life[hidden] { display: none; }
.gs-life-head { display: flex; align-items: baseline; gap: .4rem; }
.gs-life-head .gs-life-close { margin-left: auto; }
.gs-life .gs-tabs { flex-wrap: wrap; margin: .3rem 0; }
.gs-life-rows { display: grid; grid-template-columns: 7rem 1fr; gap: .1rem .6rem; margin: .3rem 0; }
.gs-life-rows dt, .gs-life-rows dd { margin: 0; }
.gs-life-portrait { display: flex; flex-direction: column; align-items: center; width: 3rem; float: right; margin: 0 0 .3rem .5rem; }
.gs-life-portrait span { display: block; width: 2rem; }
.gs-life-portrait .hair { height: .5rem; border-radius: 1rem 1rem 0 0; }
.gs-life-portrait .face { height: 1.6rem; border-radius: 0 0 .8rem .8rem; }
.gs-life-portrait .top { height: 1.2rem; width: 2.6rem; border-radius: .3rem; }
.gs-life-portrait .bottom { height: 1rem; }
.gs-life-graph { position: relative; height: 15rem; margin: .3rem 0; }
.gs-life-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; padding: .15rem .4rem; border-radius: 1rem; border: 2px solid var(--line); background: var(--panel); font: inherit; }
.gs-life-node.self { left: 50%; top: 50%; border-color: var(--accent); }
.gs-life-node.warm { border-color: #6c6; }
.gs-life-node.cold { border-color: #c66; }
.gs-life-node.family { box-shadow: 0 0 0 2px rgba(140,180,255,.4); }
.gs-life-node.partner { box-shadow: 0 0 0 2px rgba(255,150,200,.4); }
.gs-life-node:disabled { opacity: .5; }
.gs-life-need { display: grid; grid-template-columns: 5rem 1fr 2.5rem; align-items: center; gap: .4rem; margin: .15rem 0; }
.gs-life-bar { display: block; height: .5rem; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.gs-life-bar span { display: block; height: 100%; background: #6c9; }
.gs-life-need.low .gs-life-bar span { background: #c66; }
.gs-life-day li.now { font-weight: 600; }
.gs-life-history, .gs-life-day, .gs-life-bonds { padding-left: 1rem; }
@media (max-width: 720px) {
  .gs-life { right: .5rem; top: .5rem; width: calc(100vw - 1rem); max-width: none; z-index: 8; }
}
@media (max-width: 720px) {
  .gs-rail-label { display: none; }
  .gs-tool, .gs-tool.wide { position: absolute; left: 3.2rem; top: .5rem; width: calc(100vw - 3.7rem); z-index: 1; }
  .gs-inspector { position: absolute; right: .5rem; top: .5rem; width: calc(100vw - 1rem); z-index: 2; }
  .gs-inspector.collapsed { width: auto; }
  .gs.gs-sel .gs-tool { display: none; }   /* one panel at a time on a phone: the inspector wins while something is selected */
}
@media (prefers-color-scheme: light) {
  .gs { --panel: rgba(248, 250, 252, 0.95); --panel-2: rgba(226, 232, 240, 0.95); --panel-solid: #f8fafc; --ink: #111827; --muted: #4b5563; --line: rgba(0,0,0,0.15); --accent: #b45309; color: var(--ink); }
  .gs button, .gs input, .gs select { color: var(--ink); background: var(--panel-2); }
  .gs .gs-top button.on, .gs .gs-rail-btn.on, .gs .gs-tab.on, .gs .gs-top button.active { background: var(--accent); color: #fff; }
}
/* NARNIA-0467: live People list and the world's frozen-person inventory. */
.gs-people-list { display: block; }
.gs-people-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.gs-people-filters [aria-pressed="true"] { border-color: var(--accent); background: var(--panel-2); }
.gs-person-dot { width: 8px; height: 8px; border-radius: 50%; }
.gs-person-summary { min-width: 0; display: grid; gap: .2rem; }
.gs-person-summary b, .gs-person-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-person-summary small { color: var(--muted); }
.gs-person-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 8px; align-items: center; gap: .6rem; box-sizing: border-box; height: 64px; width: 100%; padding: .6rem; text-align: left; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: .5rem; cursor: pointer; }
.gs-person-row[aria-pressed="true"] { border-color: var(--accent); }
.gs-person-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-inventory-page .person-card { margin-top: .5rem; }
.gs-inventory-badge { margin-left: auto; min-width: 1.2rem; padding: .1rem .3rem; border-radius: 1rem; background: var(--accent); color: #17130a; font-size: .7rem; text-align: center; }
.gs-inventory-badge[hidden] { display: none; }

.person-create-form { width: 100%; box-sizing: border-box; margin: 0; padding: 12px; display: grid; gap: 14px; }
.person-create-form label { display: grid; gap: 6px; }

/* ---- 85-zones.css ---- */
/* NARNIA-0264: the Zones tool and its overlay */
.zones, .zones-body { display: flex; flex-direction: column; gap: 8px; }
.zones-modes, .zones-kinds, .zones-history { display: flex; flex-wrap: wrap; gap: 4px; }
.zones .mini.on { background: var(--accent); color: #fff; }
.zones-note { color: var(--accent); }
.zones-demand { display: flex; flex-direction: column; gap: 4px; }
.zones-bar { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 6px; }
.zones-bar-track { height: 10px; background: rgba(255, 255, 255, 0.12); border-radius: 5px; overflow: hidden; }
.zones-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width 0.3s; }
.zones-bar-pct { text-align: right; }
.zone-overlay { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.zone-tile { fill-opacity: 0.6; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.zone-tile.residential { fill: #2fa84a; }
.zone-tile.commercial { fill: #4f8fe0; }
.zone-tile.industrial { fill: #e0b43c; }
.land-ring.zone { stroke: #fff; fill: rgba(255, 255, 255, 0.18); stroke-width: 2; }
/* NARNIA-0099: the building projects on the zoned land, in the panel and as lots on the overlay */
.zones-projects { display: flex; flex-direction: column; gap: 2px; }
.zones-projects-title { opacity: 0.8; }
.zones-project.building { color: var(--accent); }
.zones-project.built, .zones-project.cancelled { opacity: 0.6; }
.zone-lot { fill: rgba(255, 255, 255, 0.15); stroke: #fff; stroke-width: 2; stroke-dasharray: 6 4; }
.zone-lot.building { fill: rgba(255, 200, 80, 0.3); stroke: #ffc850; }
.zone-fit { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; stroke-dasharray: 3 3; }
.zones-why { display: block; color: #e8b86a; }

/* ---- 91-population.css ---- */
/* K13.8 (NARNIA-0248): the town population panel: a label, its slider and its value on one line */
.pop-panel label.row { display: flex; flex-direction: row; align-items: center; gap: .5rem; text-align: left; }
.pop-panel input[type=range] { flex: 0 0 45%; width: 45%; }
.pop-panel .pop-group { margin: .4rem 0; }
.pop-sample { margin: .3rem 0; padding-left: 1.1rem; }

/* ---- 91-world-check.css ---- */
/* The on-demand checker sits beside the map, above the tool docks. */
.world-check { position: absolute; z-index: 9; top: 8rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); max-height: calc(100vh - 13rem); overflow: auto; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.world-check > .mini { margin-left: .4rem; }
.check-issue { display: block; width: 100%; margin-top: .4rem; text-align: left; font-size: .85rem; border-left: 4px solid #e4ae44; }
.check-issue.error { border-left-color: #f15b60; }
.check-issue:disabled { opacity: 1; cursor: default; }
.check-markers { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.check-marker { position: absolute; transform: translate(-50%, -100%); max-width: 12rem; padding: .2rem .4rem; font-size: .75rem; color: #211800; background: #efb743; border: 2px solid #7d5200; pointer-events: auto; }
.check-marker.error { color: #fff; background: #bd263d; border-color: #ff8890; }
.check-zone-tip { position: absolute; z-index: 10; pointer-events: none; width: min(19rem, 90vw); background: var(--panel); color: var(--ink); border: 1px solid #efb743; border-radius: 6px; padding: .4rem; font-size: .8rem; }

/* ---- 92-look.css ---- */
/* NARNIA-0386: the Look test's styles were removed with it; this file is empty and Sal deletes it. */

/* ---- 94-world-builder.css ---- */
/* The 2D World Builder (NARNIA-0389): start screen and the canvas editor. */
.wb-start { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: flex; justify-content: center; padding: 2rem 1rem; background: var(--bg, #14181d); color: var(--fg, #e8eaed); }
.wb-start .card { width: 40rem; max-width: 100%; display: flex; flex-direction: column; gap: .8rem; height: fit-content; }
.wb-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wb-worlds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wb-worlds li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem .5rem; background: rgba(255, 255, 255, .05); }
.wb-worlds .grow { flex: 1; min-width: 8rem; }

/* Layout: one left control column (tool rail + tool panel), the map fills everything else. Like SimCity: controls on one side only. */
.wb-mode{
  --bg:#e9eef2; --panel:#f7f9fb; --rail:#dfe6ec; --ink:#16212b; --muted:#5b6b78; --line:#cfd8e0;
  --accent:#1f7fd1; --accent-ink:#ffffff; --hover:#e6eef6; --warn:#c2410c; --ok:#15803d;
  --res:#4cc94a; --com:#3a95f0; --ind:#f2c418; --mix:#a46ae8;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){.wb-mode:not([data-theme="light"]){--bg:#0f151b;--panel:#151d25;--rail:#0f161d;--ink:#e3eaf0;--muted:#8fa1b0;--line:#26323d;--accent:#4aa3f0;--accent-ink:#06121d;--hover:#1c2832;--warn:#fb923c;--ok:#4ade80;color-scheme:dark}}
.wb-mode[data-theme="dark"]{--bg:#0f151b;--panel:#151d25;--rail:#0f161d;--ink:#e3eaf0;--muted:#8fa1b0;--line:#26323d;--accent:#4aa3f0;--accent-ink:#06121d;--hover:#1c2832;--warn:#fb923c;--ok:#4ade80;color-scheme:dark}

.wb-mode{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;overflow:hidden}
.wb-mode{display:grid;grid-template-columns:56px 304px minmax(0,1fr);height:100%}
.wb-rail{background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;padding-block:8px;padding-left:env(safe-area-inset-left,0px);overflow-y:auto}
.wb-rail button{width:46px;height:46px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;position:relative}
.wb-rail button:hover{background:var(--hover);color:var(--ink)}
.wb-rail button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.wb-rail button:focus-visible,.wb-panel button:focus-visible,.wb-panel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wb-rail svg{width:22px;height:22px}
.wb-rail .wb-sep{width:30px;height:1px;background:var(--line);margin:4px 0}
.wb-rail .wb-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;border-radius:8px;background:var(--warn);color:#fff;font:600 10px/16px var(--body);padding:0 4px}
.wb-panel{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.wb-ph{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.wb-brand{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wb-brand b{font-family:var(--display);font-size:20px;letter-spacing:.02em}
.wb-brand span{font-size:12px;color:var(--muted)}
.wb-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wb-btn{font:500 13px var(--body);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.wb-btn:hover{background:var(--hover)}
.wb-btn.wb-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wb-btn.wb-icon{padding:5px 7px}
.wb-btn svg{width:16px;height:16px}
.wb-btn[disabled]{opacity:.45;cursor:default}
.wb-pb{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px;min-height:0}
.wb-ttl{font-family:var(--display);font-size:22px;line-height:1;letter-spacing:.02em}
.wb-lbl{font:600 11px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wb-grp{display:flex;flex-direction:column;gap:6px}
.wb-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.wb-tile{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:7px 8px;display:flex;gap:8px;align-items:center;cursor:pointer;text-align:left;color:var(--ink);font:500 13px/1.15 var(--body);min-height:44px}
.wb-tile:hover{background:var(--hover)}
.wb-tile[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--hover)}
.wb-tile i{flex:none;width:26px;height:26px;border-radius:6px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.wb-tile small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.wb-seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wb-seg button{flex:1;border:0;background:transparent;color:var(--ink);font:500 12px var(--body);padding:6px 4px;cursor:pointer;border-right:1px solid var(--line)}
.wb-seg button:last-child{border-right:0}
.wb-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.wb-hint{font-size:12.5px;color:var(--muted);line-height:1.45}
.wb-chk{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.wb-chk input{accent-color:var(--accent);width:16px;height:16px}
.wb-card{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.wb-card h4{margin:0;font:600 15px var(--body)}
.wb-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px}
.wb-kv dt{color:var(--muted)} .wb-kv dd{margin:0;font-variant-numeric:tabular-nums}
.wb-issue{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:7px 8px;cursor:pointer;background:var(--panel);text-align:left;color:var(--ink);font:13px/1.35 var(--body)}
.wb-issue:hover{background:var(--hover)}
.wb-issue b{color:var(--warn);font-weight:600}
.wb-pf{border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px}
.wb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-variant-numeric:tabular-nums}
.wb-stats div{display:flex;flex-direction:column}
.wb-stats b{font:600 16px var(--body)} .wb-stats span{font-size:11px;color:var(--muted)}
.wb-demand{display:flex;gap:10px;align-items:flex-end;height:46px}
.wb-demand .wb-bar{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px var(--body);color:var(--muted)}
.wb-demand .wb-tube{width:14px;height:32px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.wb-demand .wb-tube i{position:absolute;left:0;right:0;bottom:0;display:block}
.wb-speed{font:500 11px var(--mono);color:var(--muted)}
.wb-mapwrap{position:relative;min-width:0;min-height:0;overflow:hidden}
.wb-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
.wb-compass{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;background:rgba(15,22,29,.78);display:grid;place-items:center;color:#fff;font:700 10px var(--body);pointer-events:none}
.wb-scalebar{position:absolute;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:rgba(15,22,29,.78);color:#fff;font:500 11px var(--mono);padding:4px 8px;border-radius:6px;pointer-events:none;display:flex;flex-direction:column;gap:3px}
.wb-scalebar i{display:block;height:4px;border:2px solid #fff;border-top:0}
.wb-tip{position:absolute;pointer-events:none;background:rgba(15,22,29,.9);color:#fff;font:500 12px var(--body);padding:4px 8px;border-radius:6px;white-space:nowrap;transform:translate(14px,14px)}
.wb-toast{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:rgba(15,22,29,.92);color:#fff;padding:7px 14px;border-radius:8px;font:500 13px var(--body);pointer-events:none;transition:opacity .25s}
.wb-menu{position:absolute;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column;min-width:210px}
.wb-menu button,.wb-menu label{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:6px;font:500 13px var(--body);color:var(--ink);cursor:pointer;display:flex;gap:8px;align-items:center}
.wb-menu button:hover,.wb-menu label:hover{background:var(--hover)}
.wb-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
/* UI map overlay */
.wb-uimap{position:absolute;inset:0;background:var(--panel);overflow:auto;z-index:15;padding-block:20px 40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wb-uimap h2{font-family:var(--display);font-size:28px;margin:0 0 4px}
.wb-uimap p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.wb-tree{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.wb-tree section{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.wb-tree h3{margin:0 0 8px;font:600 15px var(--body);display:flex;gap:8px;align-items:center}
.wb-tree h3 svg{width:18px;height:18px;color:var(--accent)}
.wb-tree ul{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:3px}
.wb-tree li{font-size:13px;position:relative;padding-left:8px}
.wb-tree li::before{content:"";position:absolute;left:-12px;top:.7em;width:14px;border-top:2px solid var(--line)}
.wb-tree li em{font-style:normal;color:var(--muted);font-size:12px}
.wb-tree .wb-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.wb-tree li.wb-sub{font:600 11px var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:4px}
@media (max-width:760px){
  .wb-mode{overflow:auto}
  .wb-mode{grid-template-columns:1fr;grid-template-rows:auto 52vh auto;height:auto;min-height:100%}
  .wb-rail{flex-direction:row;overflow-x:auto;padding:4px max(8px,env(safe-area-inset-left,0px));border-right:0;border-bottom:1px solid var(--line);grid-row:1}
  .wb-rail .wb-sep{width:1px;height:30px;margin:0 4px}
  .wb-mapwrap{grid-row:2}
  .wb-panel{grid-row:3;border-right:0}
  .wb-pb{overflow:visible}
}
@media (prefers-reduced-motion:reduce){.wb-toast{transition:none}}

.wb-mode { position:fixed; inset:0; z-index:30; margin:0; }
.wb-mode *, .wb-mode *::before, .wb-mode *::after { box-sizing:border-box; }
.wb-mode button { min-width:0; margin:0; }
.wb-mode button:not(.wb-tile) { font-family:var(--body); }
.wb-panel input,.wb-panel select { max-width:100%; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:5px; }
.wb-panel label { display:flex; align-items:center; gap:6px; font-size:13px; }
.wb-panel p { margin:0; }
.wb-panel h4 { margin:0; }
.wb-issues { list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.wb-issue { font-size:13px; padding:8px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.wb-issue.error { border-left:3px solid #dc2626; }
.wb-canvas { outline:none; }
.wb-uimap[hidden], .wb-mode [hidden] { display:none !important; }
@media (max-width:760px) { .wb-mode { overflow-y:auto; } .wb-rail button { flex-shrink:0; } }
.wb-mode { color-scheme:light; }
@media (prefers-color-scheme:dark) { .wb-mode:not([data-theme="light"]) { color-scheme:dark; } }
@media (max-width:760px) {
  .wb-mode { grid-template-rows:56px 52vh max-content; align-content:start; }
  .wb-panel { min-height:max-content; }
  .wb-ph,.wb-pb,.wb-pf { flex:none; }
}
.wb-mode[data-theme="dark"] { color-scheme:dark; }
.wb-badge { background:#dc2626 !important; }
.wb-ph { position:relative; flex-shrink:0; }
.wb-menu { top:100%; left:14px; right:14px; }
.wb-footer-controls { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }

/* Views uses the mock's compact checkbox rows, independent of form-field layout. */
.wb-panel .wb-chk { flex-direction:row; justify-content:flex-start; gap:8px; margin:0; padding:3px 0; }
.wb-panel .wb-chk input { flex:none; width:16px; height:16px; margin:0; padding:0; }
.wb-issue.info b { color:var(--muted); }
.wb-issue .wb-btn { align-self:center; }

/* Modal exit choices inherit the builder palette and keep the map inert while saving. */
.wb-leave-prompt { max-width:calc(100vw - 2rem); padding:1.5rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); font-family:var(--body); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.wb-leave-prompt::backdrop { background:rgba(0,0,0,.4); }
.wb-leave-prompt p { margin:0 0 1rem; }

/* Live Build lives inside the in-game inspector; the rail owns category navigation. */
.live-build-panel { display:flex; flex-direction:column; gap:16px; min-width:0; color:inherit; }
.live-build-tools { display:flex; flex-direction:column; gap:8px; }
.live-build-tools h4 { margin:12px 0 2px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; }
.live-build-panel button,.live-build-panel input,.live-build-panel select { font:inherit; color:inherit; border:1px solid #ffffff26; border-radius:6px; background:#ffffff09; min-height:34px; }
.live-build-panel button { padding:7px 10px; cursor:pointer; text-align:left; }
.live-build-panel button:hover:not(:disabled) { background:#ffffff15; }
.live-build-panel button:focus-visible,.live-build-panel input:focus-visible,.live-build-panel select:focus-visible { outline:2px solid #70bdd1; outline-offset:2px; }
.live-build-panel button[aria-pressed="true"] { background:#70bdd122; border-color:#70bdd1; }
.live-build-panel button:disabled { opacity:.45; cursor:default; }
.live-build-choice { display:flex; align-items:center; gap:9px; }
.live-build-swatch { width:13px; height:13px; border-radius:3px; border:1px solid #ffffff40; flex:none; }
.live-build-field { display:flex; flex-direction:column; gap:5px; font-size:12px; margin-top:8px; }
.live-build-field input,.live-build-field select { box-sizing:border-box; width:100%; padding:6px 8px; }
.live-build-field option { color:#e6e9e8; background:#222b30; }
.live-build-hint { font-size:12px; line-height:1.5; opacity:.7; margin:8px 0 0; }

.parking-style-card { display:flex; flex-direction:column; gap:8px; border:1px solid var(--line,#ffffff26); border-radius:10px; padding:10px; }
.parking-style-card h4,.parking-style-card p { margin:0; }
.parking-style-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.parking-style-options button[aria-pressed=true] { border-color:var(--accent,#70bdd1); background:#70bdd122; }

/* NARNIA-0511: the same comparison works in World Builder and live Zones. */
.block-compare { box-sizing: border-box; width: min(1280px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid #52616b; border-radius: 18px; background: #172329; color: #eef1e9; box-shadow: 0 24px 80px #0009; }
.block-compare::backdrop { background: #071117b8; }
.block-compare header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.block-compare h2 { margin: 4px 0 16px; font-size: 28px; }
.block-compare-eyebrow { color: #b4ce9b; letter-spacing: .12em; font-size: 12px; margin: 0; }
.block-compare p { line-height: 1.5; }
.block-compare-note { color: #c0cfc9; font-size: 14px; }
.block-compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.block-compare article { padding: 16px; border: 1px solid #4b605d; border-radius: 12px; background: #213238; display: flex; flex-direction: column; }
.block-compare h3 { margin: 0 0 16px; font-size: 18px; }
.block-compare svg { width: 100%; height: auto; border-radius: 6px; }
.block-compare dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 14px; }
.block-compare dd { margin: 0; font-weight: bold; font-variant-numeric: tabular-nums; }
.block-compare article p { font-size: 14px; flex: 1; color: #c0cfc9; }
.block-compare button { min-height: 44px; border: 1px solid #91b68a; border-radius: 8px; padding: 10px 14px; background: #2d493e; color: #f0f4e8; cursor: pointer; }
.block-compare button[aria-pressed="true"] { background: #a8cc90; color: #172329; }
.block-compare button:focus-visible { outline: 3px solid #f2cf84; outline-offset: 3px; }
@media (max-width: 900px) { .block-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .block-compare { padding: 18px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .block-compare-grid { grid-template-columns: 1fr; } .block-compare h2 { font-size: 23px; } }

/* ---- 95-ingame.css ---- */
/* NARNIA-0458: the in-game frame shares the World Builder's quiet map workspace. */
.gs-ingame { --ig-panel:#f7f9fb; --ig-rail:#dfe6ec; --ig-ink:#16212b; --ig-muted:#5b6b78; --ig-line:#cfd8e0; --ig-accent:#1f7fd1; --ig-hover:#e6eef6; color:var(--ig-ink); font:14px Barlow,system-ui,sans-serif; }
.gs-ingame[hidden],.gs-ingame [hidden] { display:none!important; }
.gs-ingame .gs-top { min-height:48px; padding:6px 12px; background:var(--ig-panel); border-bottom:1px solid var(--ig-line); color:var(--ig-ink); gap:12px; flex-wrap:wrap; }
.gs-ingame .gs-title { font:600 22px "Barlow Condensed","Arial Narrow",sans-serif; }
.gs-ingame .gs-group { display:flex; align-items:center; gap:4px; }
.gs-ingame .gs-time { font-variant-numeric:tabular-nums; color:var(--ig-muted); white-space:nowrap; }
.gs-ingame .gs-rate { font-size:12px; color:var(--ig-muted); white-space:nowrap; padding:0 6px; align-self:center; }
.gs-ingame .gs-rate[hidden] { display:none; }
.gs-ingame button { color:var(--ig-ink); font:500 13px Barlow,system-ui,sans-serif; cursor:pointer; }
.gs-ingame button:focus-visible { outline:2px solid var(--ig-accent); outline-offset:2px; }
.gs-ingame .mini,.gs-ingame .gs-panel-button,.gs-ingame .gs-panel-zoom button { background:var(--ig-panel); border:1px solid var(--ig-line); border-radius:7px; padding:5px 9px; }
.gs-ingame button:hover { background:var(--ig-hover); }
.gs-ingame button[aria-pressed="true"],.gs-ingame .gs-speed.active { background:var(--ig-accent); color:#fff; border-color:var(--ig-accent); }
.gs-ingame .gs-middle { display:flex; min-height:0; position:relative; gap:0; padding:0; }
.gs-ingame .gs-rail,.gs-ingame .gs-panel { align-self:stretch; border-radius:0; border-width:0 1px 0 0; }
.gs-ingame .gs-rail { width:150px; flex:0 0 150px; background:var(--ig-rail); border-right:1px solid var(--ig-line); overflow:auto; padding:8px 6px; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.gs-ingame .gs-rail-section { border-bottom:1px solid var(--ig-line); padding-bottom:8px; }
.gs-ingame .gs-rail-group { width:100%; border:0; padding:8px 6px; background:transparent; font-weight:700; display:flex; align-items:center; justify-content:space-between; text-align:left; }
.gs-ingame .gs-rail-items { display:flex; flex-direction:column; gap:3px; }
.gs-ingame .gs-rail-item { display:flex; align-items:center; gap:9px; width:100%; min-height:38px; border:0; border-radius:7px; padding:8px; background:transparent; text-align:left; }
.gs-ingame .gs-rail-icon { width:22px; text-align:center; font-size:18px; }
.gs-ingame .gs-panel { flex:0 0 304px; width:304px; min-width:0; min-height:0; padding:0; display:flex; flex-direction:column; background:var(--ig-panel); border-right:1px solid var(--ig-line); overflow:hidden; }
.gs-ingame .gs-panel-header { padding:12px 14px; border-bottom:1px solid var(--ig-line); display:flex; flex-direction:column; gap:9px; }
.gs-ingame .gs-panel-world { font:600 20px "Barlow Condensed","Arial Narrow",sans-serif; }
.gs-ingame .gs-panel-actions { display:flex; flex-wrap:wrap; gap:6px; }
.gs-ingame .gs-panel-title { font:600 22px "Barlow Condensed","Arial Narrow",sans-serif; margin:4px 0 0; }
.gs-ingame .gs-tool-body { flex:1; min-height:0; overflow:auto; padding:12px 14px; }
.gs-ingame .gs-panel-footer { border-top:1px solid var(--ig-line); padding:10px 14px; font-size:12px; }
.gs-ingame .gs-panel-stats,.gs-ingame .gs-panel-footer-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gs-ingame .gs-panel-footer-row { margin-top:8px; }
.gs-ingame .gs-panel-demand { display:flex; align-items:center; gap:5px; }
.gs-ingame .gs-panel-demand meter { width:32px; }
.gs-ingame .gs-panel-zoom { display:flex; gap:3px; }
.gs-ingame .gs-gap { min-width:0; flex:1; }
.gs-ingame .gs-camera { position:absolute; right:18px; bottom:18px; pointer-events:auto; background:var(--ig-panel); border:1px solid var(--ig-line); box-shadow:0 3px 14px #16212b26; border-radius:12px; padding:7px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:145px; }
.gs-ingame .gs-camera-button { width:32px; height:32px; display:grid; place-items:center; background:transparent; border:1px solid var(--ig-line); border-radius:7px; font-size:19px; padding:0; }
.gs-ingame .gs-camera-pan { display:grid; grid-template-columns:repeat(3,32px); grid-template-rows:repeat(3,32px); gap:2px; }
.gs-ingame .gs-camera-up { grid-column:2; }
.gs-ingame .gs-camera-left { grid-column:1; grid-row:2; }
.gs-ingame .gs-camera-fit { grid-column:2; grid-row:2; }
.gs-ingame .gs-camera-right { grid-column:3; grid-row:2; }
.gs-ingame .gs-camera-down { grid-column:2; grid-row:3; }
.gs-ingame .gs-camera-zoom { display:flex; flex-direction:column; gap:3px; }
.gs-ingame .gs-camera-orbit { display:flex; gap:3px; border-top:1px solid var(--ig-line); padding-top:6px; }
.gs-ingame .gs-camera-orbit[hidden] { display:none; }
.gs-on .game-menu-button { display:none; }
@media (max-width:850px) { .gs-ingame .gs-rail { width:115px; flex-basis:115px; } .gs-ingame .gs-panel { width:260px; flex-basis:260px; } .gs-ingame .gs-camera { right:8px; bottom:8px; } }
@media (max-width:600px) { .gs-ingame .gs-rail { width:90px; flex-basis:90px; padding:5px 3px; } .gs-ingame .gs-rail-item { gap:3px; padding:6px 3px; font-size:11px; } .gs-ingame .gs-panel { width:220px; flex-basis:220px; } .gs-ingame .gs-top { gap:5px; padding:5px; } .gs-ingame .gs-time { font-size:11px; } .gs-ingame .gs-camera { transform:scale(.8); transform-origin:bottom right; } }

/* The mock keeps its rail/panel full height and the shared bar over the map. */
.gs-ingame .gs-top { position:absolute; top:8px; left:8px; right:8px; z-index:2; border:0; border-radius:8px; background:transparent; pointer-events:none; }
.gs-ingame .gs-top > * { pointer-events:auto; }
.gs-ingame .gs-top .gs-group { background:var(--ig-panel); border-radius:7px; }
.gs-ingame .gs-mode,.gs-ingame .gs-time { background:var(--ig-panel); border-radius:8px; padding:5px 9px; }
.gs-ingame .gs-rail { width:64px; flex-basis:64px; padding:8px 3px; }
.gs-ingame .gs-rail-group { font-size:9px; text-transform:uppercase; padding:7px 0; justify-content:center; gap:2px; }
.gs-ingame .gs-rail-item { justify-content:center; min-height:42px; padding:6px; }
.gs-ingame .gs-rail-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.gs-ingame .gs-gap { position:relative; }
.gs-ingame .gs-inspector { display:none; }
.gs-ingame.gs-sel .gs-inspector { display:block; position:absolute; right:8px; top:120px; max-height:calc(100% - 300px); overflow:auto; }
.gs-ingame .gs-strip { display:none; }
.gs-ingame .gs-strip:has(.gs-story:not([hidden])) { display:block; max-height:25vh; overflow:auto; }
@media(max-width:760px) {
  .gs-ingame .gs-middle { flex-wrap:wrap; }
  .gs-ingame .gs-rail { flex:0 0 100%; width:100%; height:54px; flex-direction:row; overflow:auto; align-items:flex-start; }
  .gs-ingame .gs-rail-section { display:flex; flex:0 0 auto; padding:0; border:0; }
  .gs-ingame .gs-rail-group { width:48px; height:42px; }
  .gs-ingame .gs-rail-items { flex-direction:row; }
  .gs-ingame .gs-rail-item { width:38px; }
  .gs-ingame .gs-panel { order:3; flex:0 0 100%; max-height:38%; width:100%; }
  .gs-ingame .gs-gap { flex:0 0 100%; height:calc(62% - 54px); }
  .gs-ingame .gs-panel-header { padding:5px 10px; gap:3px; }
  .gs-ingame .gs-panel-title { font-size:16px; }
  .gs-ingame .gs-panel-footer { padding:5px 10px; }
}

.gs-ingame .gs-top button[aria-pressed="true"] { background:var(--ig-accent); color:white; border-color:var(--ig-accent); }
.gs-ingame .gs-camera { width:160px; }
.gs-ingame .gs-panel-header { position:relative; }
.gs-ingame .gs-more { position:absolute; left:14px; top:75px; z-index:4; display:flex; flex-direction:column; gap:4px; padding:6px; background:var(--ig-panel); border:1px solid var(--ig-line); border-radius:8px; box-shadow:0 4px 16px #16212b33; }

.gs-ingame.gs-has-selection .gs-inspector.collapsed { display:block; position:absolute; right:8px; top:120px; width:auto; }
/* Reserve the open inspector's width so .gs-gap is the free map area for overlays. */
@media(min-width:761px) {
  .gs-ingame.gs-sel .gs-inspector { position:relative; right:auto; top:auto; flex:0 0 20rem; margin:120px 8px 0 0; }
}
@media(max-width:760px) {
  .gs-ingame .gs-middle { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:54px minmax(0,1fr) minmax(200px,32%); }
  .gs-ingame .gs-rail { grid-row:1; width:100%; height:54px; min-height:0; }
  .gs-ingame .gs-panel,.gs-ingame .gs-panel.wide { position:static; grid-row:3; width:100%; max-width:100%; height:100%; max-height:none; }
  .gs-ingame .gs-gap { grid-row:2; height:auto; }
  .gs-ingame.gs-sel .gs-panel { display:flex; }
  .gs-ingame .gs-tool-body { overflow-wrap:anywhere; }
}
.gs-ingame .person-card { margin-bottom:12px; padding:12px; border:1px solid var(--ig-line); border-radius:7px; background:var(--ig-panel); }
.gs-ingame .gs-people-page { --ink:var(--ig-ink); --muted:var(--ig-muted); --panel-2:var(--ig-panel); --line:var(--ig-line); --accent:var(--ig-accent); }
.gs-ingame .gs-people-page input[type="search"] { box-sizing:border-box; background:var(--ig-panel); color:var(--ig-ink); }
.gs-ingame .gs-people-filters button { background:var(--ig-panel); border:1px solid var(--ig-line); border-radius:7px; padding:5px 8px; }
.gs-ingame .person-card h3 { margin:0 0 7px; }
.gs-ingame .person-mind { border-left:2px solid var(--accent); padding-left:9px; font-size:13px; }
.gs-ingame .person-nudges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.gs-ingame .person-nudges[hidden],.gs-ingame .person-mind[hidden] { display:none; }
.gs-ingame .person-card button:disabled { opacity:.5; }
/* Building-local stairs stay beside the pointer, above the map and below dialogs. */
.building-stairs { position: fixed; z-index: 45; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); font-size: 12px; }
.building-stairs[hidden] { display: none; }
.building-stairs button { padding: 6px 9px; cursor: pointer; }
.building-stairs button:disabled { opacity: .35; cursor: default; }

/* NARNIA-0478: mock SVG rail and a camera corner clear of the minimap. */
.gs-ingame .gs-rail-items { align-items:center; gap:2px; }
.gs-ingame .gs-rail-item { width:46px; height:46px; min-height:46px; padding:0; border-radius:10px; color:var(--ig-muted); }
.gs-ingame .gs-rail-icon,.gs-ingame .gs-rail-icon svg { display:block; width:22px; height:22px; }
.gs-ingame .gs-rail-item:hover { background:var(--ig-hover); color:var(--ig-ink); }
.gs-ingame .gs-rail-item[aria-pressed="true"] { background:var(--ig-accent); color:#fff; }
/* Minimap outer width 180px, plus its right inset and a 12px gap.
   Fixed positioning shares the minimap viewport coordinates at every size. */
.gs-ingame .gs-camera { position:fixed; right:calc(.8rem + 180px + 12px); bottom:.8rem; width:auto; display:block; transform:none; }
.gs-ingame .gs-camera-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:146px; margin-top:6px; }
@media (pointer:coarse) {
  .gs-ingame .gs-camera { right:calc(.8rem + 132px + 12px); bottom:9.5rem; }
}

.gs-ingame .gs-save-name { width:100%; min-width:0; box-sizing:border-box; font:inherit; color:inherit; }

/* NARNIA-0520: a person's profile, shared by the Person tab and player card. */
.gs-ingame .person-profile-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.gs-ingame .person-profile-header > div:last-child { flex:1; min-width:0; }
.gs-ingame .person-profile-header p { margin:6px 0; }
.gs-ingame .person-portrait { float:none; flex:none; width:76px; margin:0; padding-top:4px; }
.gs-ingame .person-portrait span { width:42px; }
.gs-ingame .person-portrait .hair { height:12px; }
.gs-ingame .person-portrait .face { height:36px; }
.gs-ingame .person-portrait .top { height:30px; width:64px; }
.gs-ingame .person-portrait .bottom { height:22px; }
.gs-ingame .person-mood { display:inline-block; padding:3px 8px; border-radius:12px; background:var(--ig-hover); font-size:12px; }
.gs-ingame .person-link { background:transparent; color:var(--ig-accent); border:0; padding:2px 3px; text-align:left; text-decoration:underline; font:inherit; cursor:pointer; }
.gs-ingame .person-profile-section { margin-top:14px; padding-top:10px; border-top:1px solid var(--ig-line); }
.gs-ingame .person-profile-section h4 { margin:0 0 8px; }
.gs-ingame .person-profile-section p { margin:7px 0; }
.gs-ingame .person-needs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; font-size:12px; }
.gs-ingame .person-needs progress { display:block; width:100%; height:7px; accent-color:var(--ig-accent); }
.gs-ingame .person-day-strip { position:relative; display:flex; height:18px; margin:8px 0 12px; border:1px solid var(--ig-line); border-radius:4px; }
.gs-ingame .person-day-hour { flex:1; background:var(--ig-hover); border-right:1px solid var(--ig-line); }
.gs-ingame .person-day-hour[data-activity="working"] { background:#c99558; }
.gs-ingame .person-day-hour[data-activity="sleeping"] { background:#8a89b3; }
.gs-ingame .person-day-now { position:absolute; height:24px; top:-4px; width:2px; background:var(--ig-accent); }
.gs-ingame .person-profile-tabs { display:flex; gap:3px; margin-top:14px; }
.gs-ingame .person-profile-tabs button { flex:1 1 0; min-width:0; padding:6px 4px; font-size:12px; }
.gs-ingame .person-profile-tabs button[aria-pressed="true"] { background:var(--ig-accent); color:white; }
.gs-ingame .person-profile-section[hidden] { display:none; }
.gs-ingame .person-nudges { display:block; padding:14px; border:1px solid var(--ig-line); border-radius:12px; background:var(--ig-panel); }
.gs-ingame .person-nudges h4,.gs-ingame .person-mind h4 { margin:12px 0 8px; }
.gs-ingame .person-nudges textarea,.gs-ingame .person-mind textarea,.gs-ingame .person-mind input { box-sizing:border-box; width:100%; margin:6px 0; padding:9px; font:inherit; border:1px solid var(--ig-line); border-radius:7px; }
.gs-ingame .person-nudges [aria-pressed="true"] { background:var(--ig-accent); color:white; }
.gs-ingame .person-idea { margin-top:12px; padding-top:8px; border-top:1px solid var(--ig-line); }
.gs-ingame .person-idea progress,.gs-ingame .person-mind progress { display:block; width:100%; accent-color:var(--ig-accent); }
.gs-ingame .person-mind [aria-label="Edit current thought"] { width:100%; text-align:left; padding:10px; font:inherit; }
.gs-ingame .person-mind [role="status"]:empty,.gs-ingame .person-nudges [role="status"]:empty { display:none; }
@media(min-width:901px) {
  .gs-ingame .gs-panel.person-page { flex-basis:360px; width:360px; }
  .gs-ingame .person-portrait { width:96px; }
  .gs-ingame .person-portrait span { width:52px; }
  .gs-ingame .person-portrait .hair { height:14px; }
  .gs-ingame .person-portrait .face { height:48px; }
  .gs-ingame .person-portrait .top { height:44px; width:76px; }
  .gs-ingame .person-portrait .bottom { height:36px; }
}

/* NARNIA-0621: approved living-minds blocks and bottom status strip. */
.gs-ingame .gs-minds { margin-left:auto; display:flex; align-items:center; gap:6px; font:600 12px Barlow,sans-serif; border:1px solid var(--ig-line); border-radius:99px; padding:4px 10px; background:#fff; }
.gs-ingame .minds-dot { width:8px; height:8px; border-radius:99px; background:#7c8790; flex:none; }
.gs-ingame .gs-minds[data-ready="true"] .minds-dot { background:#15803d; }
.gs-ingame .mind-tier { color:#6d28d9; font-weight:600; }
.gs-ingame .mind-live { display:flex; flex-direction:column; gap:12px; font-size:13px; }
.gs-ingame .mind-live h4 { font:600 11px Barlow,sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--ig-muted); margin:0 0 6px; }
.gs-ingame .mind-plan-items { display:flex; flex-direction:column; gap:4px; }
.gs-ingame .mind-plan-item { display:grid; grid-template-columns:46px 1fr; gap:8px; }
.gs-ingame .mind-plan-item > .mono { font-size:12px; color:var(--ig-muted); }
.gs-ingame .mind-plan-item.current { font-weight:600; }
.gs-ingame .mind-plan-item.current > .mono { color:var(--ig-accent); }
.gs-ingame .mind-choice { border:1px solid var(--ig-line); background:#fff; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.gs-ingame .mind-option { display:flex; gap:8px; align-items:center; padding:5px 8px; color:var(--ig-muted); }
.gs-ingame .mind-option > b { font-size:11px; }
.gs-ingame .mind-option.chosen { background:#e6f0fa; border-radius:6px; color:#1f6fb8; }
.gs-ingame .mind-reason { font-style:italic; color:var(--ig-muted); }
.gs-ingame .gs-mind-queue { flex:none; box-sizing:border-box; min-height:44px; padding:8px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; background:var(--ig-panel); border-top:1px solid var(--ig-line); font-size:12.5px; pointer-events:auto; }
.gs-ingame .gs-mind-queue > b { font:600 12px Barlow,sans-serif; }
.gs-ingame .mind-queue-hint { margin-left:auto; color:var(--ig-muted); }


/* M65 mock A: thinking budget and model pressure. */
.gs-ingame .gs-minds[data-ready="true"] .minds-dot.warn { background:var(--ig-warn,#c7841a); }
.gs-ingame .mind-mode { border:1px solid var(--ig-line); border-radius:99px; padding:2px 8px; color:var(--ig-muted); font-size:11px; white-space:nowrap; }
.gs-ingame .mind-mode.growing { color:#15803d; }
.gs-ingame .mind-mode.backing-off { color:var(--ig-warn,#c7841a); }
.gs-ingame .mind-budget { display:inline-flex; align-items:center; gap:8px; }
.gs-ingame .mind-budget svg { display:block; flex:none; }
@media (max-width:1280px) { .gs-ingame .mind-budget svg { width:120px; } .gs-ingame .gs-mind-queue { gap:10px; } }
/* NARNIA-0678: opt-in tools occupy their own bottom row, so map/dialogue bounds clear them. */
.gs-ingame .gs-test-tools { flex:none; pointer-events:auto; display:flow-root; }
.gs-ingame .gs-test-tab { float:right; margin-right:12px; border-radius:8px 8px 0 0; background:#1d2732; color:#fff; padding:5px 12px; }
.gs-ingame .gs-test-drawer { background:#1d2732; color:#e7eef4; border-top:2px solid var(--ig-accent); }
.gs-ingame .gs-test-tabs { display:flex; gap:3px; padding:6px 10px 0; }
.gs-ingame .gs-test-tabs button { background:transparent; color:#a9b8c5; border:0; border-radius:6px 6px 0 0; }
.gs-ingame .gs-test-tabs [aria-selected="true"] { background:#2a3644; color:#fff; }
.gs-ingame .gs-test-close { margin-left:auto; }
.gs-ingame .gs-test-body { background:#2a3644; padding:8px 12px; max-height:28vh; overflow:auto; font-size:12.5px; }
.gs-ingame .gs-test-body .gs-mind-queue { background:transparent; color:inherit; border:0; padding:0; }
.gs-ingame .gs-test-body output { display:block; }
.test-mode-switch { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding-top:8px; }
.test-mode-switch small { flex-basis:100%; }
.gs-ingame .gs-test-drawer { margin-left:64px; }
.gs-ingame .gs-test-body { --ig-muted:#a9b8c5; --ig-line:#5d7286; }
.gs-ingame .gs-test-body button { border:1px solid #5d7286; border-radius:6px; padding:4px 9px; background:#1d2732; color:#fff; }
@media (max-width:760px) { .gs-ingame .gs-test-drawer { margin-left:0; } .gs-ingame .gs-test-tabs { flex-wrap:wrap; } }
.gs-ingame .gs-camera { margin-bottom:var(--test-tools-height,0px); }
.gs-ingame .gs-test-tools:has(.gs-test-drawer:not([hidden])) { background:var(--ig-rail); }
/* Keep conversation controls above the minimap while the drawer reserves their bottom space. */
.gs-on .dialogue { z-index:7; }
.test-mode-switch input { appearance:none; position:relative; flex:none; width:34px; height:18px; margin:0; padding:0; border:0; border-radius:9px; background:var(--muted); cursor:pointer; }
.test-mode-switch input::before { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; }
.test-mode-switch input:checked { background:var(--accent); }
.test-mode-switch input:checked::before { transform:translateX(16px); }
.test-mode-switch input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* M-67 approved Work card: heading, facts, duty rows, career. */
.gs-ingame .person-work .sec { padding:10px 0; border-bottom:1px solid var(--ig-line); }
.gs-ingame .person-work .kv { display:grid; grid-template-columns:100px 1fr; gap:6px 10px; margin:8px 0; font-size:12px; }
.gs-ingame .person-work dt { color:var(--ig-muted); }
.gs-ingame .person-work dd { margin:0; }
.gs-ingame .person-work .duty { display:grid; grid-template-columns:90px 1fr auto; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--ig-line); font-size:12px; }
.gs-ingame .person-work .tag { display:inline-block; font-size:11px; padding:1px 6px; border:1px solid currentColor; border-radius:9px; white-space:nowrap; }
.gs-ingame .person-work .t-ok { color:#2e8b57; }
.gs-ingame .person-work .t-acc { color:var(--ig-accent); }
.gs-ingame .person-work .t-mut { color:var(--ig-muted); }
.gs-ingame .person-work progress { width:100%; height:7px; accent-color:var(--ig-accent); }
.gs-ingame .person-work h4 { text-transform:none; }

/* ---- 96-ingame-footer.css ---- */
/* NARNIA-0458: town totals and the compact demand bars from the approved mock. */
.gs-ingame .gs-panel-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.gs-ingame .gs-panel-stat { display:flex; flex-direction:column; gap:2px; color:var(--ig-muted); font-size:11px; }
.gs-ingame .gs-panel-count { color:var(--ig-ink); font:600 18px "Barlow Condensed","Arial Narrow",sans-serif; font-variant-numeric:tabular-nums; }
.gs-ingame .gs-panel-footer-row { align-items:flex-end; }
.gs-ingame .gs-panel-demand { gap:8px; align-items:flex-end; }
.gs-ingame .gs-demand-item { display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; }
.gs-ingame .gs-demand-track { display:block; width:14px; height:30px; background:var(--ig-line); border-radius:3px; overflow:hidden; position:relative; }
.gs-ingame .gs-demand-fill { position:absolute; bottom:0; width:100%; background:#22c55e; }
.gs-ingame [data-demand-kind="shops"] .gs-demand-fill { background:#3b82f6; }
.gs-ingame [data-demand-kind="work"] .gs-demand-fill { background:#eab308; }
.gs-ingame .gs-demand-label { font-size:9px; color:var(--ig-muted); }
.gs-ingame .gs-panel-demand meter { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* NARNIA-0491: centred, signed demand bars, matching mock v4. */
.gs-ingame .gs-demand-item { border:1px solid transparent; background:transparent; border-radius:8px; padding:3px 4px; display:grid; grid-template-columns:auto auto; gap:2px 3px; color:var(--ig-ink); cursor:pointer; }
.gs-ingame .gs-demand-item:hover { border-color:var(--ig-line); background:var(--ig-hover); }
.gs-ingame .gs-demand-track { grid-row:1/3; height:32px; width:12px; }
.gs-ingame .gs-demand-track::after { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--ig-muted); }
.gs-ingame .gs-demand-item b { font-size:10px; color:var(--ig-muted); }
.gs-ingame .gs-demand-fill { transition:height .4s; }
.gs-ingame .gs-panel { position:relative; }
.gs-ingame .demand-details { padding:12px; border:1px solid var(--ig-line); border-radius:12px; background:var(--ig-panel); color:var(--ig-ink); }
.gs-ingame .gs-panel > .demand-details { position:absolute; left:10px; right:10px; bottom:112px; z-index:20; box-shadow:0 16px 40px #0005; max-height:calc(100% - 130px); overflow:auto; }
.gs-ingame .demand-details[hidden] { display:none; }
.gs-ingame .demand-details header,.gs-ingame .demand-heading { display:flex; align-items:center; gap:7px; }
.gs-ingame .demand-details header { justify-content:space-between; font-size:18px; }
.gs-ingame .demand-row { padding:10px 0; border-bottom:1px solid var(--ig-line); }
.gs-ingame .demand-row p { margin:5px 0; }
.gs-ingame .demand-chip { margin-left:auto; font-size:11px; border:1px solid var(--ig-line); border-radius:20px; padding:2px 6px; color:var(--ig-muted); }
.gs-ingame .demand-chip[data-status="Needs more"] { color:#c28a38; }
.gs-ingame .demand-chip[data-status="Balanced"] { color:#40936c; }
.gs-ingame .demand-comparison { display:grid; grid-template-columns:auto 1fr auto; gap:3px 8px; font-size:12px; margin-top:6px; align-items:center; }
.gs-ingame .demand-track { height:7px; background:var(--ig-line); border-radius:4px; overflow:hidden; }
.gs-ingame .demand-track i { display:block; height:100%; }
.gs-ingame .demand-dot { width:10px; height:10px; border-radius:3px; }
.gs-ingame .demand-details .homes { background:#62b563; }
.gs-ingame .demand-details .work { background:#d4b248; }
.gs-ingame .demand-details .shops { background:#5097d0; }
/* The shared footer replaces the legacy panel's construction-pressure meters. */
.gs-ingame .zones-demand { display:none; }

/* ---- 97-town-pages.css ---- */
/* NARNIA-0461: the same compact report frame on every Town page. */
.town-page { display:grid; gap:14px; }
.town-page h3 { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ig-muted); }
.town-status { justify-self:start; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:600; background:#e0f2e7; color:#216841; }
.town-status[data-status=watch] { background:#fff0ce; color:#845508; }
.town-status[data-status=problem] { background:#fce3df; color:#a33325; }
.town-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.town-tile { display:flex; flex-direction:column; gap:4px; background:white; border:1px solid var(--ig-line); border-radius:8px; padding:10px; min-width:0; }
.town-tile span,.town-tile small { font-size:11px; color:var(--ig-muted); }
.town-tile b { font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.town-page svg { width:100%; height:65px; color:var(--ig-accent); overflow:visible; }
.town-slider { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:7px; margin:12px 0; font-size:12px; }
.town-slider span { grid-column:1/-1; }
.town-slider input { width:100%; accent-color:var(--ig-accent); }
.town-slider output { text-align:right; font-variant-numeric:tabular-nums; }
.town-event { padding:8px 0; margin:0; border-bottom:1px solid var(--ig-line); font-size:12px; line-height:1.5; }

/* ---- 98-growth.css ---- */
/* NARNIA-0490: Town growth controls and monitor, below Create a person. */
.growth-card { border:1px solid var(--ig-line); border-radius:12px; background:var(--ig-panel,#fff); padding:12px; display:flex; flex-direction:column; gap:9px; margin:10px 0; }
.growth-card:not([open]) > :not(summary) { display:none; }
.growth-card summary { display:flex; align-items:center; gap:8px; cursor:pointer; }
.growth-card summary b { font-size:17px; }
.growth-card summary > :last-child { margin-left:auto; }
.growth-phase { border-radius:20px; padding:3px 7px; font-size:10px; background:#e0f2e7; color:#216841; }
.growth-card h3 { margin:5px 0 0; text-transform:uppercase; font-size:10px; letter-spacing:.07em; color:var(--ig-muted); }
.growth-stages,.growth-segment { display:flex; gap:4px; flex-wrap:wrap; }
.growth-stages span { flex:1; text-align:center; font-size:10px; background:var(--ig-line); padding:5px 2px; border-radius:5px; }
.growth-stages .on,.growth-segment [aria-pressed=true] { background:var(--ig-accent); color:white; }
.growth-segment button { flex:1; min-width:0; border:1px solid var(--ig-line); border-radius:6px; padding:6px 4px; font-size:11px; cursor:pointer; }
.growth-segment button:disabled { opacity:.5; cursor:default; }
.growth-slider { display:grid; grid-template-columns:1fr auto; gap:5px; font-size:12px; }
.growth-slider input { grid-column:1/-1; width:100%; accent-color:var(--ig-accent); }
.growth-slider:has(input:disabled) { opacity:.5; }
.growth-slider output { font-weight:600; font-variant-numeric:tabular-nums; }
.growth-chart svg { width:100%; height:auto; display:block; }
.growth-mixbar { display:flex; height:9px; gap:2px; overflow:hidden; border-radius:5px; }
.growth-legend { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:10px; color:var(--ig-muted); margin:5px 0; }
.growth-legend > :last-child { margin-left:auto; }
.growth-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
.growth-tiles > div { display:flex; flex-direction:column; padding:8px; border:1px solid var(--ig-line); border-radius:7px; }
.growth-tiles span { font-size:11px; color:var(--ig-muted); }
.growth-tiles b { font-size:20px; }
.growth-held { display:flex; flex-direction:column; gap:4px; border:1px solid #dec48d; background:#fff6df; padding:9px; border-radius:8px; font-size:12px; }
.growth-held.ok { background:#eaf5ee; border-color:#b0d8bd; }
.growth-held button { align-self:start; }
.growth-card .growth-checkbox { display:flex; flex-direction:row; align-items:center; gap:6px; }
.growth-card .growth-checkbox input[type=checkbox] { width:auto; margin:0; flex:none; }
.growth-routes button { display:flex; flex-direction:column; align-items:center; gap:2px; }
.growth-routes small { font-size:10px; font-weight:normal; }
.growth-gauge-caption { margin-left:20px; margin-top:-3px; }

/* Mayor oversight appears in both Growth and Town Overview. */
.mayor-plans { border-top: 1px solid var(--line, #ddd); margin-top: 14px; padding-top: 8px; }
.mayor-plan { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--line, #ddd); }
.mayor-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.mayor-lock-fields { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.mayor-lock-fields input { width: 56px; min-width: 0; }
.mayor-lock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
/* NARNIA-0607: approved Homes full report. */
.homes-page,.growth-housing { display:flex; flex-direction:column; gap:10px; }
.homes-heading,.homes-row-heading,.homes-occupancy { display:flex; align-items:center; gap:8px; }
.homes-heading { justify-content:space-between; }
.homes-heading h2 { margin:0; font:700 22px 'Barlow Condensed',sans-serif; }
.homes-badge { display:inline-block; flex-shrink:0; border:1px solid #5b6b78; color:#5b6b78; border-radius:99px; padding:2px 10px; font-size:12px; font-weight:700; }
.homes-badge[data-status=Overcrowded],.homes-badge[data-status=Full]:is(.growth-card *, .homes-heading *) { color:#c2410c; border-color:#c2410c; }
.homes-badge[data-status=Soon] { color:#15803d; border-color:#15803d; }
.homes-warning { display:flex; flex-direction:column; gap:6px; border-radius:9px; padding:9px 11px; background:#f6e7de; border:1px solid #e3b598; font-size:13px; line-height:1.4; }
.homes-warning b { color:#a8380a; font-size:14px; }
.homes-warning button { align-self:flex-start; }
.homes-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.homes-tiles .town-tile { border:1px solid var(--ig-line,#cfd8e0); border-radius:9px; padding:7px 9px; background:var(--ig-bg,#e9eef2); display:flex; flex-direction:column; gap:1px; }
.homes-tiles .town-tile span,.homes-tiles .town-tile small { color:var(--ig-muted,#5b6b78); font-size:11px; }
.homes-tiles .town-tile b { font-size:18px; }
.homes-filters { display:flex; border:1px solid var(--ig-line,#cfd8e0); border-radius:8px; overflow:hidden; }
.homes-filters button { flex:1; min-width:0; border:0; border-radius:0; padding:7px 4px; font-size:12px; }
.homes-filters button+button { border-left:1px solid var(--ig-line,#cfd8e0); }
.homes-filters [aria-pressed=true] { background:var(--ig-accent,#1f7fd1); color:white; }
.homes-list { display:flex; flex-direction:column; gap:5px; }
.homes-row { border:1px solid var(--ig-line,#cfd8e0); border-radius:9px; padding:7px 9px; background:var(--ig-bg,#e9eef2); display:flex; flex-direction:column; gap:4px; }
.homes-row-heading b { font-size:13px; }
.homes-row-heading .homes-badge { margin-left:auto; font-size:11px; padding:1px 8px; }
.homes-track { flex:1; height:9px; border-radius:5px; background:var(--ig-line,#cfd8e0); overflow:hidden; }
.homes-track i { display:block; height:100%; background:#3fbf4a; }
.homes-row[data-status=Overcrowded] .homes-track i { background:#c2410c; }
.homes-occupancy > span { font:500 12px 'JetBrains Mono',monospace; }
.homes-footnote { font-size:12.5px; color:var(--ig-muted,#5b6b78); line-height:1.45; }
.homes-link { align-self:flex-start; border:0; background:none; color:var(--ig-accent,#1f7fd1); padding:0; font-size:13px; cursor:pointer; }
.homes-page { box-sizing:border-box; border:1px solid var(--ig-line,#cfd8e0); border-radius:12px; padding:14px; background:var(--ig-panel,#f7f9fb); }
.homes-filters button { background:transparent; color:var(--ig-ink,#16212b); }
.homes-warning button { background:var(--ig-panel,#f7f9fb); color:var(--ig-ink,#16212b); border:1px solid var(--ig-line,#cfd8e0); border-radius:8px; padding:6px 12px; min-height:32px; font:500 13px Barlow,sans-serif; }
.growth-stages .done { background:#d3e6d6; color:#16212b; }
.growth-card summary b { font-family:'Barlow Condensed',sans-serif; font-size:19px; }
.growth-card summary > .homes-badge:last-child { margin-left:0; }
.gs-ingame .homes-link { color:var(--ig-accent,#1f7fd1); }

/* ---- 99-bonds.css ---- */
/* Mock C, approved 25 Oct: ported row, avatar, tags and bars. */
.bonds-view { --body:"Barlow",system-ui,sans-serif; --display:"Barlow Condensed","Arial Narrow",sans-serif; --love:#d0457a; --secret:#7b4fc4; --warn:#c7841a; --bad:#c2413b; }
.bonds-view .tag{display:inline-block;font:600 11px var(--body);padding:1px 7px;border-radius:9px;border:1px solid currentColor}
.bonds-view .t-love{color:var(--love)}.bonds-view .t-sec{color:var(--secret)}.bonds-view .t-ok{color:#2e8b57}.bonds-view .t-warn{color:var(--warn)}.bonds-view .t-bad{color:var(--bad)}.bonds-view .t-mut{color:var(--ig-muted)}
.bonds-view .bondrow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ig-line)}
.bonds-view .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--display);color:#fff}
.bonds-view .bars{display:grid;grid-template-columns:76px 1fr 34px;gap:4px 8px;align-items:center;font-size:11.5px;color:var(--ig-muted);margin-top:4px}
.bonds-view .bar{height:6px;border-radius:3px;background:var(--ig-rail);overflow:hidden}
.bonds-view .bar i{display:block;height:100%}
.bonds-view .person-link{font-weight:700}

/* Mock C: the Story affair card. */
.story-affair.gcard{background:var(--ig-panel);border:1px solid var(--ig-line);border-radius:10px;padding:12px 14px;color:var(--ig-ink);display:flex;flex-direction:column;gap:8px;min-width:0}
.story-affair h4{margin:0;font:600 16px "Barlow Condensed","Arial Narrow",sans-serif;color:var(--ig-ink)}
.story-affair .chips{display:flex;flex-wrap:wrap;gap:6px}
.story-affair .chip{border:1px solid var(--ig-line);border-radius:6px;padding:4px 8px;font-size:12.5px;background:var(--ig-panel);color:var(--ig-ink)}
.story-affair .chip.primary{border-color:var(--ig-accent);color:var(--ig-accent);font-weight:600}

/* ---- 99-feedback.css ---- */
/* KLQ-0020: the in-game Feedback form (mock v2). */
.gs-ingame .gs-top .fb-icon { width:14px; height:14px; margin-right:5px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.fb-scrim { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(22,33,43,.28); }
.fb-scrim[hidden], .fb-pill[hidden], .fb-toast[hidden] { display:none; }
.fb-pill { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:61; background:var(--ig-ink,#16212b); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px; pointer-events:none; }
.fb-panel { width:min(420px,100%); box-sizing:border-box; display:flex; flex-direction:column; gap:12px; padding:16px; background:var(--ig-panel,#f7f9fb); color:var(--ig-ink,#16212b); border:1px solid var(--ig-line,#cfd8e0); border-radius:10px; box-shadow:0 14px 40px rgba(10,20,30,.28); }
.fb-head { display:flex; align-items:center; justify-content:space-between; }
.fb-head h2 { margin:0; font:600 22px "Barlow Condensed",sans-serif; }
.fb-x { background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--ig-muted,#5b6b78); }
.fb-kinds { display:flex; border:1px solid var(--ig-line,#cfd8e0); border-radius:7px; overflow:hidden; }
.fb-kind { flex:1; padding:6px 8px; border:0; background:var(--ig-panel,#f7f9fb); color:var(--ig-ink,#16212b); cursor:pointer; }
.fb-kind.on { background:var(--ig-accent,#1f7fd1); color:#fff; }
.fb-prompt { font-weight:600; font-size:13px; }
.fb-text { box-sizing:border-box; width:100%; min-height:110px; padding:8px; background:#fff; border:1px solid var(--ig-line,#cfd8e0); border-radius:6px; font:inherit; resize:vertical; }
.fb-foot { display:flex; justify-content:flex-end; margin-top:-8px; }
.fb-count { font-size:11px; color:var(--ig-muted,#5b6b78); }
.fb-check { display:flex; align-items:center; gap:8px; font-size:13px; }
.fb-disclosure { font-size:12px; color:var(--ig-muted,#5b6b78); }
.fb-disclosure summary { cursor:pointer; }
.fb-details { margin:6px 0 0; padding-left:18px; }
.fb-buttons { display:flex; justify-content:flex-end; gap:8px; }
.fb-buttons button { padding:6px 14px; border:1px solid var(--ig-line,#cfd8e0); border-radius:7px; background:var(--ig-panel,#f7f9fb); cursor:pointer; }
.fb-buttons .fb-send { background:var(--ig-accent,#1f7fd1); border-color:var(--ig-accent,#1f7fd1); color:#fff; }
.fb-buttons .fb-send:disabled { opacity:.45; cursor:default; }
.fb-note { margin:0; font-size:12px; color:#b3261e; }
.fb-note:empty { display:none; }
.fb-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:62; display:flex; align-items:center; gap:8px; background:var(--ig-ink,#16212b); color:#fff; padding:8px 16px; border-radius:99px; font-weight:600; }
.fb-tick { color:#3fb950; font-weight:700; }