/* No Safe Harbor: an old-terminal look in Southeast Alaska colors.
   Four themes (the Theme button cycles them): Rainforest (default), Clarence Strait, Sockeye, Fog. */

/* Rainforest: dark spruce and wet moss, text the color of low fog. */
:root {
  --bg: #0d1813;
  --panel: #13221b;
  --fg: #cfe0d2;
  --dim: #7d9a86;
  --bright: #eef5ee;
  --accent: #9fd3c7;       /* people: glacier-water teal */
  --clue: #f0a07a;         /* evidence and leads: salmonberry */
  --rule: #24382e;
  --bar: #7fa86b;          /* status bar: new moss */
  --bar-fg: #0d1813;
  --glow: 0 0 6px rgba(207, 224, 210, 0.18);
  --scan: rgba(0, 0, 0, 0.16);
  --font: "IBM Plex Mono", "Cascadia Mono", "Consolas", "Menlo", "DejaVu Sans Mono", monospace;
}

/* Clarence Strait: deep gray-blue water under low cloud, with a buoy-orange status bar. */
:root[data-theme="strait"] {
  --bg: #0c1720;
  --panel: #12212d;
  --fg: #d3e1ea;
  --dim: #7f97a8;
  --bright: #f1f6f9;
  --accent: #8fd0e0;
  --clue: #ffc66b;
  --rule: #213645;
  --bar: #e8873a;
  --bar-fg: #0c1720;
  --glow: 0 0 6px rgba(211, 225, 234, 0.16);
  --scan: rgba(0, 0, 0, 0.16);
}

/* Sockeye: dark green river water with spawning-red highlights. */
:root[data-theme="sockeye"] {
  --bg: #101a14;
  --panel: #17241c;
  --fg: #e4ddd2;
  --dim: #94a090;
  --bright: #fff8ee;
  --accent: #a9d39a;
  --clue: #ff7d6b;
  --rule: #2a3a2f;
  --bar: #c8402f;
  --bar-fg: #fff8ee;
  --glow: 0 0 6px rgba(255, 125, 107, 0.14);
  --scan: rgba(0, 0, 0, 0.14);
}

/* Fog: a light theme for daytime, rain-gray paper and spruce ink. */
:root[data-theme="fog"] {
  --bg: #e7ecea;
  --panel: #dbe3e0;
  --fg: #22322b;
  --dim: #5f7268;
  --bright: #0f1e17;
  --accent: #1f6a73;
  --clue: #b2442b;
  --rule: #bccac4;
  --bar: #2f5d4a;
  --bar-fg: #eef3f0;
  --glow: none;
  --scan: rgba(0, 0, 0, 0);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the transcript scrolls, the page never does */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

#app {
  display: flex;
  flex-direction: column;
  /* Pinned to the visible part of the screen (ui.js tracks it as the phone keyboard opens and closes). */
  position: fixed;
  left: 0;
  right: 0;
  top: var(--app-top, 0);
  height: 100vh;
  height: var(--app-h, 100dvh);
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Subtle scanlines. */
.crt::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, var(--scan) 3px);
}

#status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 12px 0 0;
  background: var(--bar);
  color: var(--bar-fg);
  font-weight: 700;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

#status-right { display: flex; align-items: center; gap: 8px; }

#theme-toggle {
  font: inherit;
  font-size: 0.75rem;
  background: var(--bar-fg);
  color: var(--bar);
  border: 0;
  padding: 2px 8px;
  cursor: pointer;
}

#stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}

#output {
  flex: 1;
  overflow-y: auto;
  padding: 16px 4px;
  text-shadow: var(--glow);
  scrollbar-color: var(--dim) transparent;
}

#output p {
  margin: 0 0 0.9em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#output .echo { color: var(--dim); margin-top: 1.2em; }
#output .room-title { color: var(--bright); font-weight: 700; margin-bottom: 0.2em; }
#output .intro { color: var(--bright); }
#output .intro::first-line { font-size: 1.6em; letter-spacing: 0.2em; }
#output .npc { color: var(--accent); }
#output .speech { color: var(--fg); border-left: 2px solid var(--dim); padding-left: 10px; }
#output .clue { color: var(--clue); font-weight: 700; }
#output .hint { color: var(--clue); font-style: italic; }
#output .document {
  background: var(--panel);
  border: 1px dashed var(--dim);
  padding: 10px 12px;
}
#output .journal { background: var(--panel); padding: 12px; border-left: 3px solid var(--clue); }
#output .help { color: var(--bright); }
#output .meta { color: var(--dim); font-style: italic; }
#output .exits { color: var(--dim); font-size: 0.9em; }
#output .ending { color: var(--bright); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; }

#cmd-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.prompt { color: var(--bright); font-weight: 700; text-shadow: var(--glow); }

#cmd {
  flex: 1;
  min-width: 0;
  font-size: 16px; /* below 16px, iPhones zoom the whole page when you tap the input */
  background: transparent;
  border: 0;
  outline: none;
  color: var(--bright);
  font: inherit;
  caret-color: var(--fg);
  text-shadow: var(--glow);
}

#quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 14px;
}

#quick button {
  font: inherit;
  font-size: 0.8rem;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  cursor: pointer;
}

#quick button:hover,
#quick button:focus-visible,
#theme-toggle:focus-visible { color: var(--bright); border-color: var(--dim); outline: none; }

#cmd::placeholder { color: var(--dim); opacity: 0.8; }

@media (max-width: 560px) {
  html, body { font-size: 15px; }
  #app { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #status { font-size: 0.78rem; padding: 6px 10px; margin-top: 6px; flex-wrap: nowrap; }
  #status-loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #status-right { flex: none; gap: 6px; }
  #status .lbl { display: none; }
  #theme-toggle { padding: 2px 6px; }
  #output { padding: 10px 2px; }
  #output .intro::first-line { font-size: 1.3em; letter-spacing: 0.1em; }
  /* One row of buttons that scrolls sideways, instead of two rows eating the screen. */
  #quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #quick::-webkit-scrollbar { display: none; }
  #quick button { flex: none; padding: 6px 10px; }
  #cmd-form { padding: 8px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  #output p.new { animation: appear 160ms ease-out; }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Graph-paper map (opens over the transcript; you can keep typing) */

#map-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fbf8ef;
  color: #2f2f2f;
  border: 1px solid var(--dim);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

#map-panel[hidden] { display: none; }

#map-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #c9d8e8;
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 0.9rem;
}

#map-where::before { content: "◯ "; color: #c0392b; font-weight: 700; }
#map-where strong { color: #c0392b; }

#map-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#map-tip { font-size: 0.75rem; color: #555; margin-right: 4px; }

#map-tools button {
  font: inherit;
  font-size: 0.8rem;
  background: #fffdf6;
  color: #2f2f2f;
  border: 1px solid #9dbbdc;
  padding: 2px 10px;
  min-width: 2.2em;
  cursor: pointer;
}
#map-tools button:hover, #map-tools button:focus-visible { border-color: #2f2f2f; outline: none; }

#map-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* The sheet fills the panel; which part of it shows is the SVG viewBox (pan and zoom).
   The printed sheet and your pencil layer sit exactly on top of each other. */
.map-svg { display: block; width: 100%; height: 100%; }
#map-scroll .map-svg { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#map-scroll { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#map-scroll.dragging { cursor: grabbing; }
.map-svg text { user-select: none; -webkit-user-select: none; }
@media (max-width: 560px) {
  #map-tip { display: none; }
  #map-bar { flex-wrap: wrap; padding: 4px 8px; font-size: 0.8rem; gap: 4px; }
  #map-tools { gap: 4px; }
  #map-tools button { font-size: 0.72rem; padding: 2px 7px; }
}

.map-svg text {
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  fill: #2f2f2f;
}
.map-svg .map-room-label { font-weight: 700; }
.map-svg .map-here .map-room-label { fill: #a5281b; }
/* Every map label gets a paper-colored halo, so lines and hatching never cut through the letters. */
.map-svg text {
  paint-order: stroke fill;
  stroke: #fbf8ef;
  stroke-width: 4px;
  stroke-linejoin: round;
}
/* Names printed on the sheet use a clean serif, like a real topo map; your own notes stay handwritten. */
.map-svg .map-label-island,
.map-svg .map-label-water,
.map-svg .map-label-river,
.map-svg .map-label-lake {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}
.map-svg .map-label-island { fill: #7f8ea3; letter-spacing: 5px; font-weight: 700; font-style: normal; stroke-width: 5px; }
.map-svg .map-label-water { fill: #2f5b8c; letter-spacing: 1.5px; }
.map-svg .map-label-river { fill: #1f5596; }
.map-svg .map-label-lake { fill: #1f5596; }
.map-svg .map-q { fill: #444; font-weight: 700; }
.map-svg .map-title { fill: #333; }
.map-svg .map-site-name { font-weight: 700; fill: #1f1f1f; }
.map-svg .map-site-room { fill: #2a2a2a; }
.map-svg .map-here-text { fill: #a5281b; font-weight: 700; }
.map-svg .map-you-text { font-weight: 700; letter-spacing: 1px; }
.map-svg .map-label-town { font-family: Georgia, "Times New Roman", serif; font-weight: 700; fill: #1f1f1f; font-size: calc(18px * var(--k, 1)); }
.map-svg .map-site-name { font-size: calc(18px * var(--k, 1)); }
.map-svg.far .map-label-island { font-size: calc(30px * var(--k, 1)); }
.map-svg .map-you-text { fill: #fffdf6; stroke: none; font-family: Arial, "Helvetica Neue", sans-serif; }
.map-svg .map-pin { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--k, 1)); }
/* Zoomed way out: keep towns, roads you've driven and your pin; hide the small print. */
.map-svg.far .map-site-room, .map-svg.far .map-site-card, .map-svg.far .map-label-road,
.map-svg.far .map-label-lake, .map-svg.far .map-label-river, .map-svg.far .map-you-tag { display: none; }
.map-svg .map-label-road { font-family: Georgia, "Times New Roman", serif; font-style: italic; fill: #6b4a17; stroke-width: 3.5px; }
@media (prefers-reduced-motion: no-preference) {
  .map-svg .map-you-ring { transform-box: fill-box; transform-origin: center; animation: map-pulse 1.8s ease-out infinite; }
  @keyframes map-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
}

/* The key sits over the map's corner, so it's on screen however you pan and zoom. */
#map-legend {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  background: rgba(255, 253, 246, 0.94);
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  padding: 4px 8px 6px;
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 0.78rem;
  color: #222;
  max-width: calc(100% - 16px);
}
#map-legend-toggle { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: #222; cursor: pointer; }
#map-legend-body > div { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
#map-legend-body svg { flex: none; }
#map-scale { margin-top: 4px; }
#map-scale-bar { display: inline-block; height: 6px; border: 2px solid #2f2f2f; border-top: 0; }
.map-legend-note { font-size: 0.7rem; color: #555; }
.map-svg .map-legend-text { fill: #222; }

#quick #map-toggle { color: var(--bright); border-color: var(--dim); }
#quick #map-toggle[aria-pressed="true"] { background: var(--bar); color: var(--bar-fg); border-color: var(--bar); }

/* ---------- Case notebook (opens over the transcript, like the map) */

#notebook-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fdfbf3;
  color: #2b2b2b;
  border: 1px solid var(--dim);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
#notebook-panel[hidden] { display: none; }

#notebook-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #c9d8e8;
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 0.85rem;
  color: #555;
}
#notebook-bar button {
  font: inherit;
  background: #fffdf6;
  color: #2f2f2f;
  border: 1px solid #9dbbdc;
  padding: 2px 10px;
  cursor: pointer;
}
#notebook-bar button:hover, #notebook-bar button:focus-visible { border-color: #2f2f2f; outline: none; }

/* Ruled paper with a red margin line. */
#notebook-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 24px 44px;
  background:
    linear-gradient(to right, transparent 30px, #e7a5a0 30px, #e7a5a0 31px, transparent 31px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #dbe6f2 25px, #dbe6f2 26px);
  background-attachment: local;
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 0.9rem;
  line-height: 1.6;
}

.nb-head { margin-bottom: 8px; }
.nb-title { font-family: var(--font); font-weight: 700; letter-spacing: 0.15em; font-size: 1rem; color: #222; }
.nb-claim { letter-spacing: 0; font-weight: 400; font-size: 0.8rem; color: #666; margin-left: 8px; }
.nb-bar { height: 10px; margin: 8px 0 6px; background: #ece6d4; border: 1px solid #b9ae8c; max-width: 420px; }
.nb-bar span { display: block; height: 100%; background: #2e7d4f; transition: width 300ms ease; }
.nb-stats { font-size: 0.85rem; color: #444; }

.nb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 720px) { .nb-cols { grid-template-columns: 1fr; } #notebook-body { padding-left: 38px; } }
.nb-col { min-width: 0; }

#notebook-body h3 {
  font-family: var(--font);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a2a1f;
  margin: 16px 0 4px;
}
.nb-count { color: #777; letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 4px; }
#notebook-body ul, #notebook-body ol { list-style: none; margin: 0; padding: 0; }
#notebook-body li { margin: 0 0 6px; }
.nb-theory { margin: 0; font-size: 1rem; color: #1d3f6e; }
.nb-empty { margin: 0; color: #888; font-style: italic; }
.nb-box { color: #8a2a1f; }
.nb-done { color: #888; }
.nb-turn { font-family: var(--font); font-size: 0.75rem; color: #888; }
.nb-kind { font-weight: 700; }
.nb-log-evidence .nb-kind { color: #2e7d4f; }
.nb-log-lead .nb-kind { color: #8a2a1f; }
.nb-latest { background: rgba(255, 230, 120, 0.45); }
.nb-summary li::before { content: "— "; color: #999; }
.nb-evidence li { border-left: 3px solid #2e7d4f; padding-left: 8px; }
.nb-ev-title { font-weight: 700; }
.nb-pts { font-family: var(--font); font-size: 0.75rem; color: #2e7d4f; }
.nb-ev-note { font-size: 0.82rem; color: #444; }
.nb-evidence li.nb-missing { border-left-color: #ccc; color: #bbb; letter-spacing: 0.3em; }
.nb-where { color: #777; font-size: 0.8rem; }
.nb-places { margin: 0; }

#quick #notebook-toggle { color: var(--bright); border-color: var(--dim); }
#quick #notebook-toggle[aria-pressed="true"] { background: var(--bar); color: var(--bar-fg); border-color: var(--bar); }
#quick #notebook-toggle.has-new { border-color: var(--clue); color: var(--clue); }

/* ---------- Start screen */

#start-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  text-shadow: var(--glow);
}
#start-screen[hidden] { display: none; }

.start-card { max-width: 520px; text-align: center; }
.start-icon { display: block; margin: 0 auto 12px; border-radius: 12px; }
.start-card h1 { margin: 0; font-size: 2rem; letter-spacing: 0.25em; color: var(--bright); }
.start-sub { margin: 4px 0 28px; color: var(--fg); }
#start-info { margin: 8px 0 18px; color: var(--dim); font-size: 0.85rem; }
.start-tip { margin-top: 24px; color: var(--dim); font-size: 0.8rem; }

.start-card button {
  font: inherit;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 10px 16px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--dim);
  cursor: pointer;
}
.start-card button.start-primary { background: var(--bar); color: var(--bar-fg); font-weight: 700; border-color: var(--bar); }
.start-card button:hover, .start-card button:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
@media (max-width: 560px) { .start-card h1 { font-size: 1.5rem; letter-spacing: 0.15em; } }

/* ---------- Map at any zoom
   Lines are drawn in screen pixels, so they stay crisp from the whole island down to one street.
   Marks inside .map-k are sized in screen pixels too (scaled by --px, one pixel in map units). */
.map-svg path, .map-svg line, .map-svg rect, .map-svg circle, .map-svg polyline { vector-effect: non-scaling-stroke; }
.map-svg .map-k { transform: scale(var(--px, 1)); }
.map-svg .map-label-street { font-family: Georgia, "Times New Roman", serif; font-size: 11px; fill: #4b4336; stroke-width: 3px; }
.map-svg .map-room-tag .map-site-room { font-size: 13px; font-weight: 700; stroke-width: 3.5px; }

/* Town street maps only when zoomed in close; the island-wide roads step aside there. */
.map-svg:not(.near) .map-detail { display: none; }
.map-svg.near .map-coarse { mask: url(#map-town-holes); }
.map-svg:not(.near) .map-room-tag { display: none; }
.map-svg.near > rect.map-site-card, .map-svg.near > text.map-site-name, .map-svg.near > text.map-site-room, .map-svg.near > text.map-q,
.map-svg.near .map-label-water, .map-svg.near .map-label-island, .map-svg.near .map-label-lake,
.map-svg.near .map-label-river, .map-svg.near .map-label-road { display: none; }
.map-svg.near [filter] { filter: none; }

/* The development copy (at /dev/) carries a small "DEV PREVIEW" tag in the status bar,
   so it's never mistaken for the real thing. */
.is-dev #status-loc::before {
  content: "DEV PREVIEW";
  display: inline-block;
  margin-right: 10px;
  padding: 1px 7px;
  border: 1.5px dashed var(--bar-fg);
  border-radius: 3px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* ---------- Wide screens
   The story keeps a comfortable reading width (about 78 characters a line), and the map or the
   notebook docks beside it instead of covering it, so the rest of the screen does useful work. */
@media (min-width: 1200px) {
  html, body { font-size: 17px; }
  #app {
    max-width: 1880px;
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  #stage { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
  #stage:has(> #map-panel:not([hidden])),
  #stage:has(> #notebook-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(480px, 50%); }
  #output { grid-column: 1; grid-row: 1; min-height: 0; padding: 20px 12px; }
  #output p { max-width: 820px; margin-left: auto; margin-right: auto; } /* about 78 characters */
  #map-panel, #notebook-panel {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin: 14px 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    z-index: 1;
  }
}
@media (min-width: 1600px) {
  #stage:has(> #map-panel:not([hidden])),
  #stage:has(> #notebook-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(620px, 52%); }
}