:root {
  --background: #03060a;
  --panel: #0a111a;
  --panel-light: #101a25;
  --panel-deep: #05090e;
  --line: #354657;
  --line-soft: rgba(112, 139, 161, 0.22);
  --text: #e7edf2;
  --muted: #b0bdc8;
  --memory: #d9a23f;
  --warning: #da755f;
  --system: #b8c7d4;
  --index: #8fb4cc;
  --empathy: #d9a23f;
  --pressure: #da755f;
  --skepticism: #8fb4cc;
  --mixed: #b5a5cc;
  --focus: #f2ca72;

  --active-accent: var(--memory);
  --active-glow: rgba(217, 162, 63, 0.14);
  --maximum-width: 1400px;
  --border-radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--background);
}

body {
  padding: clamp(8px, 1.2vw, 18px);
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(42, 62, 82, 0.52), transparent 42%),
    linear-gradient(180deg, #04080d, var(--background) 38%);
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

.game-shell {
  width: 100%;
  max-width: var(--maximum-width);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  background: rgba(4, 8, 13, 0.97);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.015);
  --active-accent: var(--memory);
  --active-glow: rgba(217, 162, 63, 0.14);
}

.game-shell[data-module="neutral"] {
  --active-accent: var(--system);
  --active-glow: rgba(159, 178, 196, 0.11);
}

.game-shell[data-module="echo"] {
  --active-accent: var(--memory);
  --active-glow: rgba(217, 162, 63, 0.17);
}

.game-shell[data-module="index"] {
  --active-accent: var(--index);
  --active-glow: rgba(143, 180, 204, 0.15);
}

.game-shell[data-module="sentry"] {
  --active-accent: var(--warning);
  --active-glow: rgba(218, 117, 95, 0.17);
}

.game-shell[data-module="compression"] {
  --active-accent: #b6bec6;
  --active-glow: rgba(182, 190, 198, 0.12);
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 25px 28px 23px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 40%),
    var(--panel);
}

.title-block {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--memory);
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.fragment-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family:
    "Arial Black",
    "Bahnschrift Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-size: clamp(3rem, 5.6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.84;
  text-transform: uppercase;
  text-shadow:
    2px 0 0 rgba(218, 117, 95, 0.18),
    -2px 0 0 rgba(143, 180, 204, 0.14);
}

.fragment-title::after {
  position: absolute;
  right: -18px;
  bottom: 5px;
  width: 12px;
  height: 3px;
  background: var(--memory);
  box-shadow:
    -5px -9px 0 rgba(217, 162, 63, 0.48),
    4px -17px 0 rgba(217, 162, 63, 0.23);
  content: "";
}

.subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.header-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.utility-button,
.choice-button {
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.utility-button {
  min-height: 44px;
  padding: 10px 15px;
  color: var(--muted);
  font-size: 0.9rem;
}

.utility-button:hover,
.utility-button:focus-visible,
.choice-button:hover,
.choice-button:focus-visible {
  border-color: var(--focus);
  outline: none;
}

.utility-button:hover,
.choice-button:hover {
  background: rgba(226, 166, 58, 0.07);
}

.choice-button:active {
  transform: translateY(1px);
}

.status-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--panel-light);
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
}

.status-item:last-child {
  border-right: 0;
}

.status-item span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-item strong {
  min-width: 2rem;
  padding: 3px 7px;
  border: 1px solid rgba(217, 162, 63, 0.35);
  background: rgba(217, 162, 63, 0.06);
  color: var(--memory);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.status-flash {
  animation: status-flash 380ms ease-out;
}

@keyframes status-flash {
  0% {
    color: #fff3c8;
    text-shadow: 0 0 14px rgba(242, 202, 114, 0.9);
  }

  100% {
    color: var(--memory);
    text-shadow: none;
  }
}

.visual-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(340px, 36vw, 460px);
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #050a10;
  transition:
    background 350ms ease,
    box-shadow 350ms ease;
}

.visual-panel::before,
.visual-panel::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.visual-panel::before {
  z-index: 2;
  background:
    radial-gradient(circle at 52% 60%, var(--active-glow), transparent 43%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.42));
}

.visual-panel::after {
  z-index: 3;
  opacity: 0.34;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.026) 4px
    );
  mix-blend-mode: screen;
}

.game-shell[data-module="echo"] .visual-panel {
  background:
    radial-gradient(ellipse at 58% 78%, rgba(217, 162, 63, 0.11), transparent 45%),
    linear-gradient(145deg, #07111b, #020509 72%);
}

.game-shell[data-module="index"] .visual-panel {
  background-color: #07111a;
  background-image:
    linear-gradient(rgba(143, 180, 204, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 180, 204, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
}

.game-shell[data-module="sentry"] .visual-panel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(218, 117, 95, 0.05) 0,
      rgba(218, 117, 95, 0.05) 12px,
      transparent 12px,
      transparent 25px
    ),
    #080b10;
}

.game-shell[data-module="compression"] .visual-panel {
  background:
    linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(182, 190, 198, 0.05) 24% 25%,
      transparent 25% 49%,
      rgba(182, 190, 198, 0.05) 49% 50%,
      transparent 50% 74%,
      rgba(182, 190, 198, 0.05) 74% 75%,
      transparent 75%
    ),
    #080c11;
}

.visual-meta {
  position: absolute;
  z-index: 6;
  inset: 15px 18px auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(199, 211, 221, 0.68);
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.visual-meta::after {
  position: absolute;
  top: 25px;
  left: 50%;
  width: max-content;
  max-width: min(78vw, 440px);
  padding: 4px 9px;
  border: 1px solid rgba(184, 199, 212, 0.28);
  background: rgba(3, 6, 10, 0.72);
  color: var(--active-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  transform: translateX(-50%);
  content: "ARCHIVE CASE / ACTIVE";
}

.game-shell[data-visual-variant="archive"] .visual-meta::after {
  content: "ARCHIVE CASE / AUTHORIZATION";
}

.game-shell[data-visual-variant="memory-neutral"] .visual-meta::after,
.game-shell[data-visual-variant="memory-pressure"] .visual-meta::after,
.game-shell[data-visual-variant="memory-empathy"] .visual-meta::after,
.game-shell[data-visual-variant="memory-index"] .visual-meta::after {
  content: "WATER BEFORE THE STREET";
}

.game-shell[data-visual-variant="report-cards"] .visual-meta::after,
.game-shell[data-visual-variant="report-label"] .visual-meta::after {
  content: "WORKING EVIDENCE FILE";
}

.game-shell[data-visual-variant="memory-distant"] .visual-meta::after {
  content: "THE ILLUMINATED ROUTE";
}

.game-shell[data-visual-variant="compression"] .visual-meta::after {
  content: "FINALIZATION / COMPRESSION REVIEW";
}

.game-shell[data-visual-variant="final-report"] .visual-meta::after,
.game-shell.ending-state .visual-meta::after {
  content: "FINALIZATION / GENERATED REPORT";
}

.visual-corners {
  position: absolute;
  z-index: 5;
  inset: 30px;
  border: 1px solid transparent;
  pointer-events: none;
}

.visual-corners::before,
.visual-corners::after {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: var(--active-accent);
  border-style: solid;
  opacity: 0.46;
  content: "";
}

.visual-corners::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.visual-corners::after {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.visual-placeholder {
  position: relative;
  z-index: 4;
  width: min(90%, 720px);
  padding: 34px;
  color: var(--muted);
  font-family: "Courier New", monospace;
  text-align: center;
}

.visual-placeholder::before {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 19px;
  background: var(--active-accent);
  box-shadow: 0 0 18px var(--active-glow);
  content: "";
}

.visual-placeholder p {
  margin: 0;
  color: var(--active-accent);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.65;
  text-shadow: 0 0 18px var(--active-glow);
}

.game-shell[data-visual-variant="archive"] .visual-placeholder::before {
  animation: connection-pulse 1.8s ease-in-out infinite;
}

.game-shell[data-visual-variant="archive"] .visual-placeholder::after {
  display: block;
  margin-top: 24px;
  color: var(--system);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.8;
  white-space: pre-line;
  content: "ARCHIVE CASE: FRAGMENTS\A ECHO // COMPOSITE INTERVIEW";
}

@keyframes connection-pulse {
  0%,
  100% {
    width: 46px;
    opacity: 0.55;
  }

  50% {
    width: 92px;
    opacity: 1;
  }
}

.scene-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(340px, 36vw, 460px);
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(0.72) contrast(1.06) brightness(0.84);
  transform: scale(1.015);
  transition:
    filter 360ms ease,
    transform 360ms ease,
    object-position 360ms ease;
}

.game-shell[data-visual-variant="memory-neutral"] .scene-image {
  filter: saturate(0.75) contrast(1.08) brightness(0.83);
}

.game-shell[data-visual-variant="memory-pressure"] .scene-image {
  object-position: 44% 54%;
  filter: grayscale(0.18) saturate(0.58) contrast(1.32) brightness(0.72);
  transform: scale(1.045) translateX(-0.5%);
}

.game-shell[data-visual-variant="memory-pressure"] .visual-panel::after {
  opacity: 0.7;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(218, 117, 95, 0.03) 0,
      rgba(218, 117, 95, 0.03) 2px,
      transparent 2px,
      transparent 6px
    ),
    linear-gradient(90deg, transparent 0 47%, rgba(218, 117, 95, 0.13) 48% 50%, transparent 51%);
}

.game-shell[data-visual-variant="memory-empathy"] .scene-image {
  object-position: 54% 58%;
  filter: saturate(0.88) contrast(1.02) brightness(0.92);
  transform: scale(1.025);
}

.game-shell[data-visual-variant="memory-index"] .scene-image {
  object-position: 58% 51%;
  filter: saturate(0.45) contrast(1.14) brightness(0.78) hue-rotate(8deg);
}

.game-shell[data-visual-variant="memory-index"] .visual-panel::after {
  opacity: 0.56;
  background:
    linear-gradient(rgba(143, 180, 204, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 180, 204, 0.09) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.018) 5px);
  background-size: 48px 48px, 48px 48px, auto;
}

.game-shell[data-visual-variant="report-cards"] .scene-image,
.game-shell[data-visual-variant="report-label"] .scene-image {
  object-position: 50% 56%;
  filter: grayscale(0.4) saturate(0.48) contrast(1.12) brightness(0.68);
  transform: scale(1.08);
}

.game-shell[data-visual-variant="report-cards"] .visual-panel::before,
.game-shell[data-visual-variant="report-label"] .visual-panel::before {
  background:
    linear-gradient(90deg, rgba(7, 17, 26, 0.85) 0 29%, transparent 29% 34%, rgba(7, 17, 26, 0.82) 34% 63%, transparent 63% 68%, rgba(7, 17, 26, 0.82) 68%),
    radial-gradient(circle at 52% 60%, var(--active-glow), transparent 43%);
}

.game-shell[data-visual-variant="memory-distant"] .visual-panel {
  background:
    radial-gradient(circle at 70% 44%, rgba(217, 162, 63, 0.18), transparent 8%),
    radial-gradient(circle at 57% 52%, rgba(217, 162, 63, 0.12), transparent 7%),
    linear-gradient(155deg, #06101a, #020509 70%);
}

.system-overlay {
  position: absolute;
  z-index: 8;
  inset: auto 26px 25px;
  max-width: calc(100% - 52px);
  padding: 15px 18px;
  border-left: 3px solid var(--warning);
  background: rgba(4, 8, 13, 0.92);
  color: var(--warning);
  font-family: "Courier New", monospace;
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.36);
}

.system-overlay p {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.dialogue-panel {
  position: relative;
  padding: 36px 40px 40px;
  background:
    linear-gradient(90deg, var(--active-glow), transparent 26%),
    var(--panel);
  box-shadow: inset 4px 0 0 var(--active-accent);
  transition:
    background 300ms ease,
    box-shadow 300ms ease;
}

.interview-guidance {
  max-width: 82ch;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(159, 178, 196, 0.35);
  border-left: 3px solid var(--system);
  background: rgba(159, 178, 196, 0.06);
  color: var(--system);
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

.speaker-name {
  margin: 0 0 11px;
  color: var(--active-accent);
  font-family: "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dialogue-text {
  min-height: 132px;
  max-width: 68ch;
  white-space: pre-line;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 1.65vw, 1.38rem);
  line-height: 1.65;
}

.game-shell[data-module="echo"] .dialogue-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.22rem, 1.8vw, 1.46rem);
  line-height: 1.68;
}

.game-shell[data-module="index"] .dialogue-text,
.game-shell[data-module="sentry"] .dialogue-text,
.game-shell[data-module="compression"] .dialogue-text {
  letter-spacing: 0.008em;
}

.decision-prompt {
  max-width: 68ch;
  margin: 25px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(54, 69, 85, 0.75);
  color: var(--text);
  font-family: "Courier New", monospace;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.choices {
  display: grid;
  gap: 11px;
  margin-top: 17px;
}

.choice-button {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 76px;
  padding: 18px 20px;
  border-left-width: 3px;
  text-align: left;
}

.game-shell[data-visual-variant="archive"] .choice-button:only-child {
  min-height: 92px;
  border-color: rgba(217, 162, 63, 0.5);
  background:
    linear-gradient(
      90deg,
      rgba(217, 162, 63, 0.09),
      transparent 55%
    );
}

.choice-button::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, var(--choice-glow, var(--active-glow)), transparent 47%);
  pointer-events: none;
  transition: opacity 150ms ease;
  content: "";
}

.choice-button:hover::after,
.choice-button:focus-visible::after {
  opacity: 1;
}

.choice-button > * {
  position: relative;
  z-index: 1;
}

.choice-button.method-pressure {
  --choice-accent: var(--pressure);
  --choice-glow: rgba(218, 117, 95, 0.13);
  border-left-color: var(--pressure);
}

.choice-button.method-empathy {
  --choice-accent: var(--empathy);
  --choice-glow: rgba(217, 162, 63, 0.13);
  border-left-color: var(--empathy);
}

.choice-button.method-skepticism {
  --choice-accent: var(--skepticism);
  --choice-glow: rgba(143, 180, 204, 0.13);
  border-left-color: var(--skepticism);
}

.choice-button.method-mixed {
  --choice-accent: var(--mixed);
  --choice-glow: rgba(181, 165, 204, 0.13);
  border-left-color: var(--mixed);
}

.choice-button.method-neutral {
  --choice-accent: var(--active-accent);
  --choice-glow: var(--active-glow);
  border-left-color: var(--active-accent);
}

.choice-label {
  display: block;
  margin-bottom: 7px;
  color: var(--choice-accent, var(--active-accent));
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.choice-text {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.55;
}

.choice-method {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--choice-accent, var(--muted));
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ending-restart-button {
  text-align: center;
}

.module-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: #070b10;
}

.module-bar span {
  min-height: 46px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  text-align: center;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.module-bar span:last-child {
  border-right: 0;
}

.module-bar .module-active {
  color: #ffffff;
  font-weight: 700;
  background: var(--active-glow);
  box-shadow:
    inset 0 3px 0 var(--active-accent),
    0 0 18px var(--active-glow);
}

.report-panel {
  position: relative;
  z-index: 5;
  width: min(92%, 880px);
  color: #101820;
  background: #d8d9d5;
  border: 1px solid #697178;
  box-shadow: 12px 14px 0 rgba(16, 24, 32, 0.17);
}

.report-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border-bottom: 2px solid #101820;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.report-heading strong {
  color: #6f261f;
  text-align: right;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.report-grid div {
  min-height: 86px;
  padding: 13px 15px;
  border-right: 1px solid #7f878c;
  border-bottom: 1px solid #7f878c;
}

.report-grid div:nth-child(3n) {
  border-right: 0;
}

.report-grid dt {
  margin-bottom: 9px;
  color: #485159;
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-grid dd {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 1.35rem;
  font-weight: 700;
}

.report-note {
  margin: 0;
  padding: 12px 15px 14px;
  color: #39434a;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.game-shell.ending-state {
  --active-accent: #6f261f;
  --active-glow: rgba(111, 38, 31, 0.08);
  background: #d8d9d5;
  color: #101820;
}

.game-shell.ending-state .game-header,
.game-shell.ending-state .status-bar,
.game-shell.ending-state .dialogue-panel,
.game-shell.ending-state .module-bar {
  color: #101820;
  background: #d8d9d5;
  border-color: #737b80;
}

.game-shell.ending-state .game-header {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(16, 24, 32, 0.035) 32px),
    #d8d9d5;
}

.game-shell.ending-state .eyebrow,
.game-shell.ending-state .speaker-name,
.game-shell.ending-state .choice-label {
  color: #6f261f;
}

.game-shell.ending-state .fragment-title,
.game-shell.ending-state .subtitle,
.game-shell.ending-state .dialogue-text,
.game-shell.ending-state .choice-text,
.game-shell.ending-state .status-item span,
.game-shell.ending-state .module-bar span,
.game-shell.ending-state .utility-button {
  color: #101820;
}

.game-shell.ending-state .status-item,
.game-shell.ending-state .module-bar span,
.game-shell.ending-state .utility-button,
.game-shell.ending-state .choice-button {
  border-color: #737b80;
}

.game-shell.ending-state .status-item strong {
  color: #6f261f;
}

.game-shell.ending-state .visual-panel {
  min-height: 360px;
  background:
    linear-gradient(#c3c6c4 1px, transparent 1px),
    #d1d3d0;
  background-size: 100% 36px;
}

.game-shell.ending-state .visual-panel::before,
.game-shell.ending-state .visual-panel::after,
.game-shell.ending-state .visual-corners {
  display: none;
}

.game-shell.ending-state .visual-meta {
  color: #475158;
}

.game-shell.ending-state .dialogue-panel {
  box-shadow: inset 4px 0 0 #6f261f;
}

.game-shell.ending-state .dialogue-text {
  font-family: "Courier New", monospace;
  font-size: 1.12rem;
  line-height: 1.65;
}

.game-shell.ending-state .choice-button:hover,
.game-shell.ending-state .choice-button:focus-visible {
  background: rgba(111, 38, 31, 0.06);
  border-color: #6f261f;
}

.game-shell.ending-state .module-bar .module-active {
  color: #101820;
  background: rgba(111, 38, 31, 0.08);
  box-shadow: inset 0 2px 0 #6f261f;
}

.node-enter {
  animation: node-enter 280ms ease-out;
}

@keyframes node-enter {
  from {
    opacity: 0.42;
    transform: translateY(4px);
    filter: blur(1px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hidden {
  display: none !important;
}

.warning-state {
  animation: warning-pulse 900ms ease 2;
}

@keyframes warning-pulse {
  0%,
  100% {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
  }

  50% {
    box-shadow:
      0 28px 90px rgba(0, 0, 0, 0.58),
      inset 0 0 72px rgba(218, 117, 95, 0.17);
  }
}


/* Improve readability of small archival interface labels. */
.visual-meta,
.module-bar span,
.eyebrow {
  font-weight: 700;
}

.visual-meta,
.module-bar span {
  color: #c2ced8;
}

/* Wix/iframe-safe sizing. The iframe defines the viewport, so the game fills
   the available width without applying a second vw-based restriction. */
html {
  overflow-x: hidden;
}

.game-shell,
.game-header,
.status-bar,
.visual-panel,
.dialogue-panel,
.module-bar {
  min-width: 0;
}

.scene-image,
.report-panel {
  max-width: 100%;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .game-header {
    padding: 23px 24px 21px;
  }

  .fragment-title {
    font-size: clamp(3rem, 7vw, 4.35rem);
  }

  .dialogue-panel {
    padding: 32px 30px 36px;
  }

  .dialogue-text,
  .decision-prompt {
    max-width: 64ch;
  }

  .choice-button {
    padding: 17px 18px;
  }
}

/* Scale the interface for large desktop monitors without stretching body text. */
@media (min-width: 1800px) {
  .game-header {
    padding: 30px 36px 28px;
  }

  .fragment-title {
    font-size: 5rem;
  }

  .subtitle {
    font-size: 1.15rem;
  }

  .eyebrow {
    font-size: 0.95rem;
  }

  .status-item {
    min-height: 58px;
    padding: 16px 22px;
    font-size: 1rem;
  }

  .status-item strong {
    min-width: 2.4rem;
    font-size: 1rem;
  }

  .visual-meta {
    font-size: 0.86rem;
  }

  .visual-placeholder p {
    font-size: 1.08rem;
  }

  .game-shell[data-visual-variant="archive"] .visual-placeholder::after {
    font-size: 0.92rem;
    line-height: 1.75;
  }

  .dialogue-panel {
    padding: 40px 48px 44px;
  }

  .speaker-name {
    font-size: 1.05rem;
  }

  .dialogue-text {
    max-width: 66ch;
    font-size: 1.38rem;
    line-height: 1.65;
  }

  .game-shell[data-module="echo"] .dialogue-text {
    font-size: 1.46rem;
  }

  .decision-prompt {
    font-size: 1.05rem;
  }

  .choice-button {
    min-height: 84px;
    padding: 20px 22px;
  }

  .game-shell[data-visual-variant="archive"] .choice-button:only-child {
    min-height: 96px;
  }

  .choice-label {
    font-size: 1rem;
  }

  .choice-text {
    font-size: 1.12rem;
  }

  .choice-method {
    font-size: 0.84rem;
  }

  .module-bar span {
    min-height: 52px;
    padding: 16px 14px;
    font-size: 0.9rem;
  }

  .utility-button {
    min-height: 46px;
    padding: 11px 17px;
    font-size: 0.95rem;
  }
}

@media (max-width: 760px) {
  body {
    padding: 0;
  }

  .game-shell {
    width: 100%;
    min-height: 0;
    border: 0;
  }

  .game-header {
    flex-direction: column;
    padding: 22px 18px;
  }

  .header-controls {
    justify-content: flex-start;
  }

  .fragment-title {
    font-size: clamp(2.55rem, 14vw, 4.2rem);
  }

  .status-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .status-item:nth-child(2) {
    border-right: 0;
  }

  .status-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .visual-panel,
  .scene-image {
    min-height: 320px;
    height: 320px;
  }

  .visual-meta {
    inset: 12px 13px auto;
    font-size: 0.7rem;
  }

  .visual-meta::after {
    top: 24px;
    max-width: 78vw;
    font-size: 0.67rem;
  }

  .visual-corners {
    inset: 25px 17px;
  }

  .system-overlay {
    inset: auto 15px 15px;
    max-width: calc(100% - 30px);
  }

  .dialogue-panel {
    padding: 28px 20px 32px;
  }

  .module-bar {
    grid-template-columns: 1fr;
  }

  .module-bar span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .module-bar span:last-child {
    border-bottom: 0;
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid div:nth-child(3n) {
    border-right: 1px solid #7f878c;
  }

  .report-grid div:nth-child(2n) {
    border-right: 0;
  }

  .report-heading {
    flex-direction: column;
    gap: 5px;
  }

  .report-heading strong {
    text-align: left;
  }
}

@media (max-width: 440px) {
  .status-item {
    min-height: 50px;
    padding: 12px 13px;
    font-size: 0.82rem;
  }

  .visual-meta span:last-child {
    display: none;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

  .report-grid div,
  .report-grid div:nth-child(3n),
  .report-grid div:nth-child(2n) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   UNRESOLVED MEDIA VISUAL INTEGRATION
   Palette sampled from the current team website and adapted for
   readable browser gameplay. The ending report intentionally retains
   its light institutional rupture.
   ================================================================== */

:root {
  --background: #03080c;
  --panel: #1a3a4a;
  --panel-light: #244858;
  --panel-deep: #0f1f29;
  --line: #41616e;
  --line-soft: rgba(215, 232, 240, 0.16);
  --text: #d7e8f0;
  --muted: #aac1cb;
  --memory: #e2a755;
  --warning: #c22a2d;
  --system: #f3e4b5;
  --index: #34d8d4;
  --empathy: #e2a755;
  --pressure: #c22a2d;
  --skepticism: #34d8d4;
  --mixed: #f07a2e;
  --focus: #f3e4b5;
  --site-red: #c22a2d;
  --site-cyan: #34d8d4;
  --site-orange: #f07a2e;
  --site-teal: #1a3a4a;
  --site-teal-light: #2c4f60;
}

html {
  background: var(--background);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(44, 79, 96, 0.72), transparent 43%),
    linear-gradient(180deg, #061017, var(--background) 42%);
}

.game-shell {
  border-color: rgba(65, 97, 110, 0.95);
  background: var(--site-teal);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(52, 216, 212, 0.035);
}

.game-shell[data-module="neutral"] {
  --active-accent: var(--system);
  --active-glow: rgba(243, 228, 181, 0.12);
}

.game-shell[data-module="echo"] {
  --active-accent: var(--memory);
  --active-glow: rgba(226, 167, 85, 0.17);
}

.game-shell[data-module="index"] {
  --active-accent: var(--index);
  --active-glow: rgba(52, 216, 212, 0.14);
}

.game-shell[data-module="sentry"] {
  --active-accent: var(--warning);
  --active-glow: rgba(194, 42, 45, 0.17);
}

.game-shell[data-module="compression"] {
  --active-accent: var(--text);
  --active-glow: rgba(215, 232, 240, 0.11);
}

.game-header {
  border-bottom: 2px solid rgba(194, 42, 45, 0.78);
  background:
    linear-gradient(90deg, rgba(52, 216, 212, 0.025), transparent 42%),
    var(--site-teal);
}

.eyebrow {
  color: var(--memory);
  font-weight: 700;
}

.fragment-title {
  color: var(--text);
  text-shadow:
    3px 0 0 rgba(194, 42, 45, 0.9),
    -3px 0 0 rgba(52, 216, 212, 0.72);
}

.fragment-title::before {
  position: absolute;
  z-index: 2;
  top: 54%;
  left: -1%;
  width: 105%;
  height: 3px;
  background: rgba(194, 42, 45, 0.86);
  box-shadow: 3px 2px 0 rgba(52, 216, 212, 0.46);
  pointer-events: none;
  content: "";
}

.fragment-title::after {
  background: var(--memory);
  box-shadow:
    -5px -9px 0 rgba(226, 167, 85, 0.52),
    4px -17px 0 rgba(226, 167, 85, 0.26);
}

.subtitle {
  color: var(--muted);
}

.utility-button,
.choice-button {
  border-color: var(--line);
  background: rgba(15, 31, 41, 0.24);
}

.utility-button {
  color: var(--text);
}

.utility-button:hover,
.utility-button:focus-visible,
.choice-button:hover,
.choice-button:focus-visible {
  border-color: var(--site-cyan);
  box-shadow: 0 0 0 1px rgba(52, 216, 212, 0.18);
}

.utility-button:hover,
.choice-button:hover {
  background: rgba(52, 216, 212, 0.055);
}

.status-bar {
  border-bottom: 2px solid rgba(194, 42, 45, 0.62);
  background: var(--panel-light);
}

.status-item {
  border-right-color: var(--line);
}

.status-item span {
  color: var(--text);
}

.status-item strong {
  border-color: rgba(226, 167, 85, 0.52);
  background: rgba(226, 167, 85, 0.07);
  color: var(--memory);
}

.visual-panel {
  border-bottom: 2px solid rgba(194, 42, 45, 0.62);
  background: var(--panel-deep);
}

.game-shell[data-module="echo"] .visual-panel {
  background:
    radial-gradient(ellipse at 58% 78%, rgba(226, 167, 85, 0.12), transparent 45%),
    linear-gradient(145deg, #143746, #0b1b24 72%);
}

.game-shell[data-module="index"] .visual-panel {
  background-color: #143442;
  background-image:
    linear-gradient(rgba(52, 216, 212, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 216, 212, 0.065) 1px, transparent 1px);
}

.game-shell[data-module="sentry"] .visual-panel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(194, 42, 45, 0.065) 0,
      rgba(194, 42, 45, 0.065) 12px,
      transparent 12px,
      transparent 25px
    ),
    #102832;
}

.game-shell[data-module="compression"] .visual-panel {
  background:
    linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(215, 232, 240, 0.055) 24% 25%,
      transparent 25% 49%,
      rgba(215, 232, 240, 0.055) 49% 50%,
      transparent 50% 74%,
      rgba(215, 232, 240, 0.055) 74% 75%,
      transparent 75%
    ),
    #143442;
}

.visual-meta {
  color: rgba(215, 232, 240, 0.76);
}

.visual-meta::after {
  border-color: rgba(215, 232, 240, 0.27);
  background: rgba(15, 31, 41, 0.82);
}

.visual-placeholder p {
  color: var(--active-accent);
}

.system-overlay {
  border-left-color: var(--warning);
  background: rgba(15, 31, 41, 0.94);
  color: #f18b7f;
}

.dialogue-panel {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--active-glow), transparent 27%),
    var(--site-teal);
}

.interview-guidance {
  border-color: rgba(243, 228, 181, 0.34);
  border-left-color: var(--system);
  background: rgba(243, 228, 181, 0.055);
  color: var(--system);
}

.speaker-name,
.decision-prompt,
.choice-label {
  font-family:
    "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}

.speaker-name {
  color: var(--active-accent);
}

.dialogue-text,
.choice-text {
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.game-shell[data-module="echo"] .dialogue-text {
  color: #e7eef2;
  font-family: Georgia, "Times New Roman", serif;
}

.decision-prompt {
  border-top-color: rgba(215, 232, 240, 0.24);
  color: var(--system);
}

.choice-button {
  border-color: var(--line);
  background: rgba(15, 31, 41, 0.34);
}

.game-shell[data-visual-variant="archive"] .choice-button:only-child {
  border-color: rgba(226, 167, 85, 0.62);
  background:
    linear-gradient(90deg, rgba(226, 167, 85, 0.105), transparent 58%),
    rgba(15, 31, 41, 0.34);
}

.choice-button.method-pressure {
  --choice-accent: var(--site-red);
  --choice-glow: rgba(194, 42, 45, 0.15);
}

.choice-button.method-empathy {
  --choice-accent: var(--memory);
  --choice-glow: rgba(226, 167, 85, 0.14);
}

.choice-button.method-skepticism {
  --choice-accent: var(--site-cyan);
  --choice-glow: rgba(52, 216, 212, 0.14);
}

.choice-button.method-mixed {
  --choice-accent: var(--site-orange);
  --choice-glow: rgba(240, 122, 46, 0.14);
}

.choice-method {
  background: rgba(15, 31, 41, 0.35);
}

.module-bar {
  border-top: 2px solid rgba(194, 42, 45, 0.72);
  background: #153440;
}

.module-bar span {
  border-right-color: var(--line);
  color: var(--text);
}

.module-bar .module-active {
  color: #ffffff;
  background: var(--active-glow);
}

/* Preserve the report as a formal visual rupture, but carry the team glitch
   accents into its heading and active state. */
.game-shell.ending-state .fragment-title {
  color: #101820;
  text-shadow:
    2px 0 0 rgba(194, 42, 45, 0.52),
    -2px 0 0 rgba(52, 216, 212, 0.42);
}

.game-shell.ending-state .fragment-title::before {
  background: rgba(194, 42, 45, 0.64);
  box-shadow: 2px 1px 0 rgba(52, 216, 212, 0.34);
}

@media (max-width: 760px) {
  .fragment-title::before {
    height: 2px;
  }

  .eyebrow {
    font-size: 0.73rem;
  }
}



/* FINAL SYNCHRONIZED BUILD */
.game-shell[data-visual-variant="memory-conflict"] .visual-meta::after {
  content: "TWO LOCATIONS / CONFLICTING SOURCES";
}

.system-overlay.info-overlay {
  border-left-color: var(--active-accent);
  color: var(--active-accent);
}

.system-overlay.warning-overlay {
  border-left-color: var(--warning);
  color: var(--warning);
}

.choice-button.method-system,
.choice-button.method-final {
  --choice-accent: var(--active-accent);
  --choice-glow: var(--active-glow);
  border-left-color: var(--active-accent);
}

.choice-button.method-final {
  min-height: 86px;
}

.content-note {
  margin: 0;
  color: var(--secondary-text, #d7d4c8);
  font-size: 0.84rem;
  line-height: 1.5;
}

.game-shell.ending-state .dialogue-text {
  white-space: pre-line;
}

@media (max-width: 720px) {
  .scene-image {
    height: clamp(260px, 58vw, 390px);
  }
}

/* ==================================================================
   FINAL READABILITY + AUDIO POLISH PASS
   Approved after full playthrough review. Story and visual identity
   remain unchanged; this pass improves hierarchy, spacing, report
   density, and preservation of wide photographic compositions.
   ================================================================== */

/* Keep the glitch identity without visually striking through the title. */
.fragment-title::before,
.game-shell.ending-state .fragment-title::before {
  display: none !important;
}

/* The content/originality note should establish context, then recede. */
.interview-guidance {
  max-width: 72ch;
  margin-bottom: 26px;
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.78;
}

/* Readability: give the conversation a clearer reading column and more air. */
.dialogue-panel {
  padding: 40px 46px 46px;
}

.speaker-name {
  margin-bottom: 14px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.dialogue-text {
  min-height: 0;
  max-width: 64ch;
  font-size: clamp(1.22rem, 1.7vw, 1.44rem);
  line-height: 1.7;
}

.game-shell[data-module="echo"] .dialogue-text {
  max-width: 62ch;
  font-size: clamp(1.28rem, 1.82vw, 1.5rem);
  line-height: 1.72;
}

.decision-prompt {
  max-width: 64ch;
  margin-top: 30px;
  padding-top: 20px;
  font-size: 1.03rem;
  line-height: 1.45;
}

.choices {
  gap: 13px;
  margin-top: 20px;
}

.choice-button {
  min-height: 82px;
  padding: 20px 22px;
}

/* The actual decision is the dominant element; the explanatory line supports it. */
.choice-label {
  margin-bottom: 7px;
  font-size: clamp(1.04rem, 1.3vw, 1.14rem);
  line-height: 1.35;
  letter-spacing: 0.025em;
  text-transform: none;
}

.choice-text {
  max-width: 74ch;
  color: #b9cbd4;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.48;
}

/* Status stays available without competing with the interview. */
.status-bar {
  background: #203f4e;
}

.status-item {
  min-height: 49px;
  padding: 12px 17px;
  font-size: 0.88rem;
}

.status-item span {
  color: #9eb5c0;
  font-weight: 600;
}

.status-item strong {
  min-width: 1.9rem;
  padding: 2px 6px;
  border-color: rgba(226, 167, 85, 0.33);
  background: rgba(226, 167, 85, 0.035);
  color: #dcb06d;
}

/* Small system labels remain legible, especially on text-only screens. */
.visual-meta {
  font-size: 0.82rem;
}

.visual-placeholder p {
  font-size: clamp(1.04rem, 1.35vw, 1.17rem);
  line-height: 1.75;
}

.system-overlay p {
  font-size: 1rem;
  line-height: 1.6;
}

.module-bar span {
  font-size: 0.86rem;
}

/* Preserve the full illuminated-route composition rather than cropping the line
   of figures aggressively on wide desktop/iframe layouts. */
.scene-image[data-image-key^="route_"] {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #0b1820;
}

/* These conflict composites depend on seeing the full multi-source layout.
   Preserve their full frame rather than cropping away evidence at the edges. */
.scene-image[data-image-key="location_conflict"],
.scene-image[data-image-key="location_sentry"] {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #0b1820;
}


/* A little more institutional detail without losing the abrupt report rupture. */
.report-panel {
  width: min(94%, 980px);
}

.report-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #7f878c;
  background: rgba(16, 24, 32, 0.045);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
}

.report-meta span {
  padding: 9px 12px;
  border-right: 1px solid #8b9296;
  color: #4f5960;
}

.report-meta span:last-child {
  border-right: 0;
}

.report-meta strong {
  display: block;
  margin-top: 3px;
  color: #101820;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.report-grid {
  grid-template-columns: repeat(4, 1fr);
}

.report-grid div {
  min-height: 90px;
}

.report-grid div:nth-child(3n) {
  border-right: 1px solid #7f878c;
}

.report-grid div:nth-child(4n) {
  border-right: 0;
}

.report-grid dt {
  font-size: 0.84rem;
  line-height: 1.35;
}

.report-grid dd {
  font-size: 1.22rem;
  line-height: 1.25;
}

.report-note {
  padding: 14px 16px 16px;
  font-size: 0.98rem;
  line-height: 1.6;
}

.game-shell.ending-state .visual-panel {
  min-height: 410px;
}

.game-shell.ending-state .dialogue-text {
  max-width: 72ch;
  font-size: 1.16rem;
  line-height: 1.7;
}

@media (min-width: 1800px) {
  .dialogue-panel {
    padding: 44px 54px 50px;
  }

  .dialogue-text {
    font-size: 1.46rem;
  }

  .game-shell[data-module="echo"] .dialogue-text {
    font-size: 1.54rem;
  }

  .choice-label {
    font-size: 1.14rem;
  }

  .choice-text {
    font-size: 1rem;
  }
}

@media (max-width: 900px) {
  .dialogue-panel {
    padding: 34px 30px 38px;
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid div:nth-child(4n) {
    border-right: 1px solid #7f878c;
  }

  .report-grid div:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 600px) {
  .dialogue-panel {
    padding: 28px 22px 32px;
  }

  .dialogue-text,
  .game-shell[data-module="echo"] .dialogue-text {
    font-size: 1.16rem;
    line-height: 1.65;
  }

  .choice-button {
    min-height: 78px;
    padding: 17px 18px;
  }

  .choice-label {
    font-size: 1rem;
  }

  .choice-text {
    font-size: 0.9rem;
  }

  .report-meta {
    grid-template-columns: 1fr;
  }

  .report-meta span {
    border-right: 0;
    border-bottom: 1px solid #8b9296;
  }

  .report-meta span:last-child {
    border-bottom: 0;
  }
}


/* ==================================================================
   SPEAKER IDENTIFICATION + QUIETER DECISION FEEDBACK
   Speaker names carry a consistent voice color while dialogue remains
   high-contrast. Method choices keep their separate card convention.
   ================================================================== */

.speaker-name {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  color: var(--system);
  transition: color 160ms ease;
}

.speaker-name::before {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 0.45rem;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.9;
  content: "";
}

.speaker-name[data-speaker="echo"] {
  color: var(--memory);
}

.speaker-name[data-speaker="index"] {
  color: var(--site-cyan);
}

.speaker-name[data-speaker="sentry"],
.speaker-name[data-speaker="error"] {
  color: #f47f76;
}

.speaker-name[data-speaker="compression"] {
  color: #c6d4da;
}

.speaker-name[data-speaker="resolution"] {
  color: var(--system);
}

.speaker-name[data-speaker="system"] {
  color: #b7cbd4;
}


/* ==================================================================
   FINAL SPEAKER READABILITY OVERRIDE
   Increase voice-name prominence without changing dialogue hierarchy.
   ================================================================== */
.speaker-name {
  font-size: clamp(1.18rem, 1.55vw, 1.42rem);
  font-weight: 800;
  letter-spacing: 0.105em;
  margin-bottom: 13px;
}

.speaker-name::before {
  width: 0.56rem;
  height: 0.56rem;
  flex-basis: 0.56rem;
}

@media (max-width: 700px) {
  .speaker-name {
    font-size: 1.12rem;
  }
}


/* ==================================================================
   INLINE SPEAKER HANDOFFS
   When another archive voice speaks inside the current dialogue card,
   color only that inline name so the eye can identify the handoff
   without adding another slide or changing the dialogue body color.
   ================================================================== */
.inline-speaker-label {
  display: inline;
  font-size: 0.9em;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.inline-speaker-label[data-speaker="echo"] {
  color: var(--memory);
}

.inline-speaker-label[data-speaker="index"] {
  color: var(--site-cyan);
}

.inline-speaker-label[data-speaker="sentry"],
.inline-speaker-label[data-speaker="error"] {
  color: #f47f76;
}

.inline-speaker-label[data-speaker="compression"] {
  color: #c6d4da;
}

.inline-speaker-label[data-speaker="resolution"] {
  color: var(--system);
}

/* ==================================================================
   MODULE STATE COLOR PASS
   Keep the earlier speaker/dialogue preview unchanged. Only clarify
   INDEX / SENTRY / COMPRESSION standby vs active states, with a very
   small size increase for scanability.
   ================================================================== */
.module-bar span {
  min-height: 48px;
  padding: 14px 12px;
  font-size: 0.86rem;
  font-weight: 650;
}

/* Standby keeps each module's identity visible, but subdued. */
#index-status {
  color: rgba(82, 211, 211, 0.52);
}

#sentry-status {
  color: rgba(244, 127, 118, 0.48);
}

#compression-status {
  color: rgba(198, 212, 218, 0.50);
}

/* Active states brighten the same module color and gain a restrained
   background/top signal without materially enlarging the footer. */
#index-status.module-active {
  color: #78f0ec;
  background: rgba(52, 216, 212, 0.085);
  box-shadow: inset 0 2px 0 #34d8d4;
}

#sentry-status.module-active {
  color: #ff9a92;
  background: rgba(244, 127, 118, 0.085);
  box-shadow: inset 0 2px 0 #f47f76;
}

#compression-status.module-active {
  color: #e2edf2;
  background: rgba(198, 212, 218, 0.075);
  box-shadow: inset 0 2px 0 #c6d4da;
}

/* ==================================================================
   DIALOGUE LINE GROUPING
   Keep wrapped text tight within one spoken line while giving each
   authored dialogue unit a quiet non-bullet visual signifier.
   ================================================================== */
.dialogue-text {
  white-space: normal;
  line-height: 1.48;
}

.game-shell[data-module="echo"] .dialogue-text {
  line-height: 1.5;
}

.dialogue-line {
  --line-signal: rgba(159, 178, 196, 0.46);
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  column-gap: 0.72rem;
  align-items: start;
}

.dialogue-line + .dialogue-line {
  margin-top: 0.62rem;
}

.dialogue-line::before {
  content: "";
  width: 3px;
  height: 1.42rem;
  margin-top: 0.18em;
  border-radius: 2px;
  background: var(--line-signal);
  box-shadow: 0 0 8px color-mix(in srgb, var(--line-signal) 36%, transparent);
}

.dialogue-line-content {
  min-width: 0;
}

.dialogue-line[data-speaker="echo"] {
  --line-signal: rgba(216, 167, 93, 0.68);
}

.dialogue-line[data-speaker="index"] {
  --line-signal: rgba(82, 211, 211, 0.66);
}

.dialogue-line[data-speaker="sentry"],
.dialogue-line[data-speaker="error"] {
  --line-signal: rgba(244, 127, 118, 0.70);
}

.dialogue-line[data-speaker="compression"] {
  --line-signal: rgba(198, 212, 218, 0.62);
}

.dialogue-line[data-speaker="resolution"] {
  --line-signal: rgba(243, 228, 181, 0.62);
}

@media (max-width: 700px) {
  .dialogue-line {
    grid-template-columns: 3px minmax(0, 1fr);
    column-gap: 0.58rem;
  }

  .dialogue-line + .dialogue-line {
    margin-top: 0.55rem;
  }
}

/* ==================================================================
   FINAL REPORT CONTRAST OVERRIDE
   Preserve each speaker/module identity on the pale generated-report
   screen using darker, high-contrast versions of the normal palette.
   Normal dark-screen colors remain unchanged.
   ================================================================== */
.game-shell.ending-state .speaker-name[data-speaker="echo"],
.game-shell.ending-state .inline-speaker-label[data-speaker="echo"] {
  color: #84510f;
}

.game-shell.ending-state .speaker-name[data-speaker="index"],
.game-shell.ending-state .inline-speaker-label[data-speaker="index"] {
  color: #075f64;
}

.game-shell.ending-state .speaker-name[data-speaker="sentry"],
.game-shell.ending-state .speaker-name[data-speaker="error"],
.game-shell.ending-state .inline-speaker-label[data-speaker="sentry"],
.game-shell.ending-state .inline-speaker-label[data-speaker="error"] {
  color: #842f2b;
}

.game-shell.ending-state .speaker-name[data-speaker="compression"],
.game-shell.ending-state .inline-speaker-label[data-speaker="compression"] {
  color: #405965;
}

.game-shell.ending-state .speaker-name[data-speaker="resolution"],
.game-shell.ending-state .inline-speaker-label[data-speaker="resolution"] {
  color: #6f261f;
}

/* Keep the dialogue-line signal readable on the report background. */
.game-shell.ending-state .dialogue-line[data-speaker="echo"] {
  --line-signal: rgba(132, 81, 15, 0.84);
}

.game-shell.ending-state .dialogue-line[data-speaker="index"] {
  --line-signal: rgba(7, 95, 100, 0.82);
}

.game-shell.ending-state .dialogue-line[data-speaker="sentry"],
.game-shell.ending-state .dialogue-line[data-speaker="error"] {
  --line-signal: rgba(132, 47, 43, 0.84);
}

.game-shell.ending-state .dialogue-line[data-speaker="compression"] {
  --line-signal: rgba(64, 89, 101, 0.80);
}

.game-shell.ending-state .dialogue-line[data-speaker="resolution"] {
  --line-signal: rgba(111, 38, 31, 0.82);
}

/* Module status colors also switch to report-safe dark tones. */
.game-shell.ending-state #index-status {
  color: #385d60;
}

.game-shell.ending-state #sentry-status {
  color: #80423e;
}

.game-shell.ending-state #compression-status {
  color: #4c5d66;
}

.game-shell.ending-state #index-status.module-active {
  color: #064c50;
  background: rgba(7, 95, 100, 0.08);
  box-shadow: inset 0 2px 0 #075f64;
}

.game-shell.ending-state #sentry-status.module-active {
  color: #6f2623;
  background: rgba(132, 47, 43, 0.08);
  box-shadow: inset 0 2px 0 #842f2b;
}

.game-shell.ending-state #compression-status.module-active {
  color: #344a54;
  background: rgba(64, 89, 101, 0.08);
  box-shadow: inset 0 2px 0 #405965;
}