/* v8 — high-contrast readable typography */
:root {
  --ink: #ffffff;
  --muted: #d8eef4;
  --green: #a2ffd8;
  --amber: #ffe56a;
  --danger: #ffaaa7;
  --font-ui: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-display: "Inter Display", Inter, "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --font: clamp(14px, 1.08cqw, 20px);
  --small: clamp(11px, .78cqw, 15px);
  --title: clamp(22px, 1.78cqw, 34px);
  --choice: clamp(17px, 1.34cqw, 26px);
}

html, body,
button, input, output {
  font-family: var(--font-ui);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.choice-button strong,
.metric-card b,
.timeline-readout b,
.result-grade,
.result-hero h3 {
  font-family: var(--font-display);
  letter-spacing: -.015em;
}

/* Cyan is now reserved for borders and icons. Text uses white or pale mint. */
.eyebrow,
.console-role,
.mission-block strong,
.character-name,
.timeline-actions strong,
.memory-summary strong,
.campaign-mini b,
.risk-badge,
.match-badge {
  color: #eaffff;
}

.prompt-copy,
.choice-button span,
.coherence-intro,
.timeline-hint,
.result-hero p,
.bottom-strip span,
.decision-log,
.opening-labels,
.slider-block label,
.memory-segments span,
.segment-toggle span,
.coherence-choice span,
.coherence-profile span,
.roster-row span,
dt {
  color: #e2f4f8;
}

.choice-button small,
.metric-card.good b,
.slider-block output,
.coherence-choice small,
.memory-summary strong,
.campaign-mini b {
  color: #baffdf;
}

/* Darken panel interiors without losing the generated holographic frame. */
.holo-console::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1.15cqw 1.2cqw 1.05cqw;
  border-radius: .45cqw;
  background: rgba(0, 5, 15, .56);
  pointer-events: none;
}
.holo-console > * { position: relative; z-index: 1; }

.choice-button {
  background-image:
    linear-gradient(rgba(0, 5, 15, .62), rgba(0, 5, 15, .62)),
    var(--hud-panel-card);
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
.choice-button:hover,
.choice-button:focus-visible {
  background-image:
    linear-gradient(rgba(0, 8, 20, .46), rgba(0, 8, 20, .46)),
    var(--hud-panel-card);
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

.metric-card,
.slider-block,
.memory-summary,
.coherence-choice,
.segment-toggle,
.timeline-readout > div,
.bottom-strip > div,
.drawer-card,
.profile-list div,
.contract-list div,
.drawer-stat,
.coherence-profile > div,
.roster-row {
  background-color: rgba(0, 5, 15, .72) !important;
  background-blend-mode: multiply;
}

/* Strong dark outline keeps letters readable over blue light and imagery. */
.game-board h1,
.game-board h2,
.game-board h3,
.game-board strong,
.game-board b,
.game-board dd,
.game-board button,
.game-board .prompt-copy,
.game-board .choice-button span,
.game-board .choice-button small,
.game-board .eyebrow,
.game-board .console-role,
.game-board .character-name,
.game-board .bottom-strip span,
.game-board .bottom-strip strong,
.game-board dt,
.game-board .decision-log,
.game-board .timeline-hint {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 1),
    0 0 .22cqw rgba(0, 0, 0, .96),
    0 0 .5cqw rgba(0, 0, 0, .66);
}

.choice-button strong {
  color: #ffffff;
  font-weight: 850;
  line-height: 1.08;
}
.choice-button span {
  font-weight: 620;
  line-height: 1.32;
}
.choice-button small {
  font-weight: 850;
}

.role-segment span,
.critical-metrics span,
.mission-block span,
.bottom-strip strong,
.drawer-card h3,
dd {
  color: #ffffff;
}

.critical-metrics span,
.role-segment,
.bottom-strip > div {
  font-weight: 700;
}

/* Preserve compact layout while giving body copy more breathing room. */
.prompt-copy { line-height: 1.34; }
.console-header h2 { line-height: 1.12; font-weight: 850; }
.bottom-strip span { line-height: 1.24; }

@container (max-width: 760px) {
  :root {
    --font: clamp(13px, 1.04cqw, 18px);
    --small: clamp(10px, .76cqw, 14px);
    --title: clamp(19px, 1.65cqw, 29px);
    --choice: clamp(15px, 1.25cqw, 22px);
  }
}

.locked-plan-card {
  display: grid;
  gap: 18px;
  align-content: start;
}
.locked-plan-card .result-hero > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.locked-plan-card .primary-button {
  justify-self: end;
}