/* The accent is blue until you're read in to the breach, then red. */
:root {
  --accent: #58a6ff;
}
:root.breached {
  --accent: #f85149;
}
body {
  background-color: #0d1117;
  color: #c9d1d9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  max-width: 800px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.brand {
  font-size: 13px;
  font-weight: bold;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.link-btn {
  font-family: inherit;
  background: none;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.link-btn:hover {
  color: #f0f6fc;
  border-color: var(--accent);
}
.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}
.stat-box {
  flex: 1 1 110px;
}
.stat-label {
  display: block;
  font-size: 11px;
  color: #8b949e;
  text-transform: uppercase;
  font-weight: bold;
}
.stat-val {
  font-size: 18px;
  font-weight: bold;
  color: #f0f6fc;
}
.meter {
  height: 4px;
  background: #30363d;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: #3fb950;
  transition: width 0.4s ease;
}
.meter-fill.mid {
  background: #d29922;
}
.meter-fill.low {
  background: #f85149;
}
.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 20px;
  outline: none;
}
.act-tag {
  font-size: 12px;
  font-weight: bold;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
h1 {
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 16px 0;
}
h2 {
  font-size: 15px;
  color: #f0f6fc;
  margin: 24px 0 8px 0;
}
.narrative {
  font-size: 15px;
  line-height: 1.6;
  color: #e6edf3;
  margin: 0 0 24px 0;
}
.summary {
  color: #8b949e;
}
.lessons {
  font-size: 14px;
  line-height: 1.6;
  color: #e6edf3;
  padding-left: 20px;
  margin: 0 0 24px 0;
}
.choice-btn {
  font-family: inherit;
  display: block;
  width: 100%;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #f0f6fc;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.choice-btn:hover,
.choice-btn:focus-visible {
  background: #30363d;
  border-color: var(--accent);
}
.restart-btn {
  text-align: center;
  font-weight: bold;
}
.choice-cost {
  display: block;
  font-size: 12px;
  color: #8b949e;
  margin-top: 4px;
  font-family: monospace;
}
.log-heading {
  margin-bottom: 6px;
}
.log-panel {
  background: #090d13;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 12px;
  font-family: monospace;
  font-size: 12px;
  color: #8b949e;
  max-height: 240px;
  overflow-y: auto;
}
.log-entry + .log-entry {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #21262d;
}
.log-title {
  color: #c9d1d9;
}
.log-outcome {
  color: #8b949e;
  margin-top: 2px;
}
.log-effects {
  color: var(--accent);
  margin-top: 2px;
}
.disclaimer a {
  color: #8b949e;
}
.disclaimer {
  font-size: 11px;
  color: #6e7681;
  text-align: center;
  margin-top: 20px;
}

/* Interludes: quieter, closer, one paragraph at a time. */
.interlude {
  background: #0f1319;
  border-color: #21262d;
}
.interlude .narrative {
  color: #c9d1d9;
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.clock {
  font-family: monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.reveal {
  opacity: 0;
  animation: reveal 0.8s ease forwards;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.next-btn {
  font-family: inherit;
  margin-top: 12px;
  background: none;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  padding: 10px 28px;
  font-size: 14px;
  cursor: pointer;
}
.next-btn:hover,
.next-btn:focus-visible {
  border-color: var(--accent);
  color: #f0f6fc;
}
.stat-box.silence .stat-val {
  color: #f85149;
}

/* The edges of the screen close in as the pressure builds (set by game.js). */
:root {
  --pressure: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(ellipse at center, transparent 45%, #000 100%);
  opacity: calc(var(--pressure) * 0.85);
  transition: opacity 1.5s ease;
}

/* An interlude where the mood turns: blue drains to red, and the last
   line lands in red. */
.turning h1,
.turning .clock {
  animation: turn 1.6s ease forwards;
  animation-delay: var(--turn-delay, 0s);
}
.turning .narrative:last-of-type {
  color: #f85149;
  font-weight: bold;
}
@keyframes turn {
  to { color: #f85149; }
}

/* The author's note on the final screen. */
.author-note {
  border-top: 1px solid #30363d;
  padding-top: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: #c9d1d9;
}
.author-note p {
  margin: 0 0 8px 0;
}
.author-note a {
  color: var(--accent);
  font-weight: bold;
}

/* Act dividers: the number and title alone, centred. */
.divider-art {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto 28px auto;
}
.divider {
  text-align: center;
  padding: 40px 24px;
  animation: reveal 1.2s ease;
}
.divider-act {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b949e;
  margin-bottom: 12px;
}
.divider-title {
  font-size: 30px;
  margin-bottom: 40px;
}

/* A scene that cuts in hard: a red flash and a shudder. */
.jolt {
  animation: jolt 0.9s ease-out;
}
@keyframes jolt {
  0% { background: #5a1414; border-color: #f85149; transform: translateX(0); }
  10% { transform: translateX(-6px); }
  20% { transform: translateX(6px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(0); }
  100% { background: #161b22; border-color: #30363d; }
}

@media (prefers-reduced-motion: reduce) {
  .turning h1,
  .turning .clock {
    animation: none;
    color: #f85149;
  }
  .jolt,
  .divider {
    animation: none;
  }
  .reveal {
    animation: none;
    opacity: 1;
  }
  body::before {
    transition: none;
  }
}