:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: #10192b;
  --panel-2: #172541;
  --line: rgba(167, 224, 235, .22);
  --text: #edf6f4;
  --muted: #9eb5c8;
  --cyan: #9be8df;
  --gold: #ffd98a;
  --coral: #fb7e78;
  --shadow: rgba(0, 0, 0, .42);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eaf2f5;
    --panel: #f7fbfc;
    --panel-2: #e3edf4;
    --line: rgba(20, 68, 95, .2);
    --text: #102238;
    --muted: #557088;
    --cyan: #176f76;
    --gold: #a56417;
    --coral: #ad414d;
    --shadow: rgba(33, 56, 75, .16);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf2f5;
  --panel: #f7fbfc;
  --panel-2: #e3edf4;
  --line: rgba(20, 68, 95, .2);
  --text: #102238;
  --muted: #557088;
  --cyan: #176f76;
  --gold: #a56417;
  --coral: #ad414d;
  --shadow: rgba(33, 56, 75, .16);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 0%, rgba(61, 127, 154, .18), transparent 32rem),
    radial-gradient(circle at 15% 40%, rgba(104, 62, 136, .1), transparent 30rem),
    var(--bg);
  color: var(--text);
}

button, summary { font: inherit; }
button { cursor: pointer; }
button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.app-shell {
  width: min(100%, 980px);
  min-height: 100vh;
  margin: auto;
  background: linear-gradient(130deg, rgba(26, 44, 73, .34), transparent 44%), var(--bg);
  box-shadow: 0 0 70px var(--shadow);
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 30px);
  border-bottom: 1px solid var(--line);
}

.brand {
  color: var(--text);
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid var(--cyan);
  background: linear-gradient(135deg, #2d5571, #12213b);
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);
}

.brand strong, .brand small {
  display: block;
  letter-spacing: .09em;
}
.brand strong { font-size: 13px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.top-actions { display: flex; gap: 8px; }
.icon-btn, .back-btn, .footer button {
  min-height: 44px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(14, 27, 47, .5);
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.icon-btn.active { color: var(--gold); border-color: var(--gold); }

.mission-strip {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px clamp(16px, 4vw, 30px);
  border-bottom: 1px solid var(--line);
  background: rgba(4, 10, 21, .35);
}

.label, .stat span, .eyebrow {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
.mission-name strong {
  display: block;
  margin-top: 3px;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .09em;
}
.status-group { display: flex; gap: clamp(10px, 3vw, 24px); }
.stat { min-width: 32px; text-align: right; }
.stat span, .stat strong { display: block; }
.stat strong { margin-top: 2px; font: 700 16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gold); }
[data-heat="high"] .heat-stat strong { color: var(--coral); }

.scene-wrap {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #081121;
}
.scene-art, .scene-art svg { width: 100%; height: 100%; display: block; }
.scene-art {
  position: absolute;
  inset: 0;
  animation: reveal .55s ease-out;
}
.scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 18, .03), rgba(4, 8, 18, .18) 50%, rgba(4, 8, 18, .85)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}
.scene-caption {
  position: absolute;
  bottom: 14px;
  left: clamp(16px, 4vw, 30px);
  right: clamp(16px, 4vw, 30px);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.location-pill, .chapter-pill {
  padding: 7px 9px;
  background: rgba(5, 13, 26, .78);
  border: 1px solid rgba(192, 241, 232, .37);
  color: var(--cyan);
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
}
.chapter-pill { color: var(--gold); }

.story-panel {
  padding: clamp(22px, 5vw, 38px) clamp(16px, 5vw, 52px) 26px;
}
.story-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.story-heading h1 {
  margin: 5px 0 0;
  max-width: 680px;
  font-size: clamp(27px, 6vw, 44px);
  line-height: .98;
  letter-spacing: -.045em;
}
.back-btn { flex: 0 0 auto; }
.back-btn:disabled { opacity: .32; cursor: not-allowed; }
.story-copy {
  max-width: 730px;
  margin: 20px 0 22px;
  color: var(--text);
  font-size: clamp(16px, 3.7vw, 19px);
  line-height: 1.5;
}
.signal-box {
  margin: 0 0 20px;
  padding: 11px 13px;
  border-left: 3px solid var(--gold);
  color: var(--gold);
  background: rgba(255, 216, 133, .08);
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

.choices { display: grid; gap: 9px; }
.choice {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--line);
  background: linear-gradient(100deg, rgba(60, 103, 131, .18), rgba(12, 23, 42, .68));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.choice:hover:not(:disabled) {
  transform: translateX(4px);
  border-color: var(--cyan);
  background: linear-gradient(100deg, rgba(72, 137, 151, .27), rgba(22, 38, 62, .92));
}
.choice:disabled { opacity: .42; cursor: not-allowed; }
.choice-index {
  color: var(--gold);
  font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.choice-main { font-size: 15px; font-weight: 700; }
.choice-main small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.choice-arrow { color: var(--cyan); font-size: 25px; line-height: 1; }
.primary-choice { border-color: var(--gold); }

.case-file {
  margin-top: 27px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-file summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.case-file summary span { color: var(--muted); font-size: 9px; }
.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 9px;
  padding: 0 0 16px;
}
.kit-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(67, 111, 139, .08);
}
.kit-glyph {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kit-item strong, .kit-item small { display: block; }
.kit-item strong { font-size: 13px; }
.kit-item small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.empty-kit { color: var(--muted); font-size: 13px; }

.footer {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(16px, 4vw, 30px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}

dialog {
  width: min(calc(100% - 28px), 640px);
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
dialog::backdrop { background: rgba(1, 6, 14, .72); backdrop-filter: blur(4px); }
.dialog-inner { position: relative; padding: 32px 22px 24px; }
.dialog-inner h2 { margin: 8px 0 15px; font-size: 28px; }
.dialog-inner p { color: var(--muted); line-height: 1.5; }
.dialog-inner .about-note { color: var(--cyan); border-left: 3px solid var(--cyan); padding-left: 11px; }
.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 38px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.map-grid { display: grid; gap: 8px; max-height: 55vh; overflow: auto; }
.map-item {
  padding: 11px;
  border-left: 3px solid var(--line);
  background: rgba(71, 111, 139, .08);
}
.map-item.current { border-left-color: var(--gold); background: rgba(255, 216, 133, .08); }
.map-item span, .map-item strong, .map-item small { display: block; }
.map-item span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.map-item strong { margin: 3px 0; font-size: 14px; }
.map-item small { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.danger-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 1px solid var(--coral);
  color: var(--coral);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

#toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 14px;
  transform: translate(-50%, 120px);
  opacity: 0;
  color: #07121f;
  background: var(--cyan);
  box-shadow: 0 8px 25px rgba(0,0,0,.32);
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  transition: .25s ease;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes reveal {
  from { transform: scale(1.04); opacity: .2; }
  to { transform: scale(1); opacity: 1; }
}

@media (min-width: 650px) {
  .scene-wrap { min-height: 350px; }
  .scene-caption { bottom: 20px; }
}

@media (max-width: 430px) {
  .mission-name strong { font-size: 10px; }
  .status-group { gap: 9px; }
  .stat strong { font-size: 14px; }
  .chapter-pill { display: none; }
  .story-heading h1 { font-size: 29px; }
}