/* Fallback copies of prignano-theme's color tokens (for the bar and header), used if the shared
   theme can't load. The game screen keeps its own phosphor colors in both themes. */
:root {
  --bg: #f6f7f9;
  --fg: #111418;
  --muted: #5f6873;
  --card: #ffffff;
  --border: #e3e6ea;
  --accent: #2563d6;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --crt-bg: #050805;
  --crt-fg: #4bff7a;
  --crt-dim: #2a9e4c;
  --crt-font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --fg: #e6edf3; --muted: #8b949e; --card: #151b23; --border: #2a313c; --accent: #58a6ff;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117; --fg: #e6edf3; --muted: #8b949e; --card: #151b23; --border: #2a313c; --accent: #58a6ff;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100dvh; }
#site-header { flex-shrink: 0; }
#site-header.collapsed { display: none; }
#app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--crt-bg); }

.bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.bar button {
  font: inherit;
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.bar button:hover, .bar button:focus-visible { border-color: var(--accent); outline: none; }

[hidden] { display: none !important; }

/* The phosphor terminal. */
.crt { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--crt-bg);
  color: var(--crt-fg);
  font-family: var(--crt-font);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  line-height: 1.5;
  text-shadow: 0 0 6px rgba(75, 255, 122, 0.45);
}
.crt::after {
  /* Scanlines over the game screen only, turned off by Reduce effects. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
}
.out { max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.out .line { min-height: 1.5em; }
.out .line.typing::after { content: "█"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.choices { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; max-width: 72ch; }
.choices button, .screen .link {
  font: inherit;
  color: var(--crt-fg);
  background: transparent;
  border: 1px solid var(--crt-dim);
  border-radius: 2px;
  padding: 8px 14px;
  min-height: 44px;
  text-align: left;
  text-shadow: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.choices button:focus-visible {
  background: var(--crt-fg);
  color: var(--crt-bg);
  text-shadow: none;
  outline: none;
}
/* Hover only where there's a real pointer, so a tapped button doesn't stay lit on phones. */
@media (hover: hover) {
  .choices button:hover { background: var(--crt-fg); color: var(--crt-bg); text-shadow: none; }
}
.prompt { display: flex; align-items: center; gap: 8px; margin-top: 12px; max-width: 72ch; }
.prompt input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: max(16px, 1em); /* 16px or more stops iPhones zooming in on focus */
  color: var(--crt-fg);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--crt-dim);
  border-radius: 0;
  padding: 4px 0;
  caret-color: var(--crt-fg);
  text-transform: uppercase;
  text-shadow: inherit;
}
.prompt input:focus { outline: none; border-bottom-color: var(--crt-fg); }
.screen a { color: var(--crt-fg); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Crisis: meters and map above the terminal on phones, beside it on wide screens. */
.panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  color: var(--crt-fg);
  font-family: var(--crt-font);
  font-size: 0.8rem;
}
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px 16px; }
.meter { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(75, 255, 122, 0.15); }
.meter span:first-child { color: var(--crt-dim); }
.meter .danger { color: #ff9a4b; }
.meter span.ember { color: rgb(255, 179, 71); }
.meter span.tidewater { color: rgb(90, 209, 255); }
.playing .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); width: 100%; }
.playing .choices button { text-align: center; }
#map { width: 100%; height: 34dvh; display: block; }
@media (min-width: 900px) and (orientation: landscape) {
  .playing .crt { flex-direction: row; }
  .playing .panel { flex: 1.4; padding-bottom: 16px; }
  .playing #map { flex: 1; height: auto; min-height: 0; }
  .playing .screen { flex: 1; }
}

/* Intercept fills the game screen. Its controls sit in a bar under the playfield, so taps in the
   sky never hit a button, with a margin above the bar for thumbs. */
.intercepting .screen, .intercepting .panel { display: none !important; }
.sky { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #050a14; }
#sky { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--crt-bg);
  border-top: 1px solid var(--crt-dim);
  color: var(--crt-fg);
  font-family: var(--crt-font);
  font-size: 0.8rem;
}
.controls .status { flex: 1; min-width: 0; text-align: center; }
.controls button {
  font: inherit;
  color: var(--crt-fg);
  background: transparent;
  border: 1px solid var(--crt-dim);
  border-radius: 2px;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.controls button:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
  .controls button:not(:disabled):hover { background: var(--crt-fg); color: var(--crt-bg); }
}

/* Reduce effects (the player's switch, or the system's reduced-motion setting). */
.reduce .screen { text-shadow: none; }
.reduce .crt::after { display: none; }
.reduce .out .line.typing::after { animation: none; }