/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * macrostructure: Narrative Workflow · genre: compact survival game · theme: studied-DNA (source: user references + bigtech simulator)
 * navigation: N9 · footer: Ft2 · enrichment: none · studied reference: bigtech simulator
 * motion: metric transition + modal fade only · responsive targets: 320 / 375 / 414 / 768
 */

:root {
  color-scheme: dark;

  --color-canvas: #130c11;
  --color-canvas-2: #1a1017;
  --color-paper: #21191f;
  --color-paper-2: #1b151a;
  --color-paper-3: #30272d;
  --color-paper-glass: #241c22e8;
  --color-ink: #fff8fa;
  --color-ink-2: #eee5e9;
  --color-muted: #b3a6ac;
  --color-soft: #8f8389;
  --color-rule: #493d44;
  --color-rule-strong: #6b5b64;
  --color-accent: #df8fbd;
  --color-accent-mid: #efb9d5;
  --color-accent-2: #f8e0ea;
  --color-accent-ink: #29151f;
  --color-focus: #f8d3e5;
  --color-success: #efb4d2;
  --color-success-bg: #35242d;
  --color-error: #ed8cab;
  --color-error-bg: #392029;
  --color-warning: #dca0c0;
  --color-warning-bg: #30212a;
  --color-metric-body: #e58fc1;
  --color-metric-spirit: #efb1d1;
  --color-metric-budget: #d985b7;
  --color-metric-risk: #f3c9dd;
  --color-overlay: #0c070ae8;
  --color-overlay-routine: #130c1114;
  --color-feedback-overlay: color-mix(in oklch, var(--color-canvas) 28%, transparent);
  --color-shadow: #05030470;
  --color-shadow-strong: #050304b8;
  --color-haze-pink: #d987b729;
  --color-haze-purple: #7049662e;
  --color-haze-white: #f7e2e80f;
  --color-transparent: transparent;

  --gradient-accent: linear-gradient(90deg, var(--color-accent), var(--color-accent-mid) 52%, var(--color-accent-2));
  --gradient-accent-reverse: linear-gradient(90deg, var(--color-accent-2), var(--color-accent-mid) 52%, var(--color-accent));
  --gradient-canvas:
    radial-gradient(circle at 14% 8%, var(--color-haze-pink), var(--color-transparent) 32%),
    radial-gradient(circle at 86% 28%, var(--color-haze-purple), var(--color-transparent) 38%),
    radial-gradient(circle at 48% 100%, var(--color-haze-white), var(--color-transparent) 42%);
  --gradient-card: linear-gradient(145deg, var(--color-paper-glass), var(--color-paper-2));

  --font-display: "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", sans-serif;
  --font-mono: "Noto Sans SC", sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --radius-sm: 0.75rem;
  --radius-input: 1.1rem;
  --radius-card: 1.5rem;
  --radius-panel: 2rem;
  --radius-pill: 999px;
  --rule-thin: 1px;
  --rule-accent: 2px;

  --shadow-card: 0 1.1rem 3.5rem var(--color-shadow);
  --shadow-modal: 0 2rem 6rem var(--color-shadow-strong);
  --shadow-soft-glow: 0 0 2rem var(--color-haze-pink);
  --shadow-accent: 0 0 0 1px var(--color-accent), 0 0 1.6rem var(--color-haze-pink);
}

html,
body {
  min-height: 100%;
  overflow-x: clip;
  background-color: var(--color-canvas);
}

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

body {
  background-color: var(--color-canvas);
  background-image: var(--gradient-canvas);
  background-attachment: fixed;
  color: var(--color-ink);
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 7% 21%, var(--color-haze-white) 0 0.12rem, var(--color-transparent) 0.15rem),
    radial-gradient(circle at 92% 13%, var(--color-haze-pink) 0 0.1rem, var(--color-transparent) 0.14rem),
    radial-gradient(circle at 84% 78%, var(--color-haze-white) 0 0.1rem, var(--color-transparent) 0.14rem);
  opacity: 0.8;
}

.app-shell {
  position: relative;
  z-index: var(--z-base);
}

.screen.is-active {
  animation: deep-screen-in var(--dur-long) var(--ease-out) both;
}

@keyframes deep-screen-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-xs));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Cover */
.cover-art,
.cover-shade,
.pixel-stage {
  display: none;
}

#cover.screen.is-active {
  align-items: center;
  justify-content: center;
}

.cover-copy {
  width: min(100%, 42rem);
  padding: clamp(var(--space-lg), 6vw, var(--space-2xl));
  overflow: hidden;
  border-color: var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--gradient-card);
  box-shadow: var(--shadow-modal);
  backdrop-filter: blur(1rem);
}

.cover-copy::before {
  inset-inline: 8% 8%;
  block-size: 0.16rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-soft-glow);
}

.cover-copy::after {
  display: none;
}

.eyebrow,
.toast-overline {
  color: var(--color-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
}

h1 {
  max-width: 11ch;
  margin-block-start: var(--space-xl);
  color: var(--color-ink);
  font-size: clamp(3rem, 12vw, 5.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

h1 span {
  width: fit-content;
  margin-block-start: var(--space-md);
  color: var(--color-accent-mid);
}

.cover-lede {
  color: var(--color-ink-2);
}

.identity-brief {
  margin-block: var(--space-xl) var(--space-lg);
  padding: var(--space-sm) 0;
  border: 0;
  background: var(--color-transparent);
}

.identity-brief span,
.player-role span,
.resource-heading span {
  color: var(--color-soft);
}

.identity-brief strong {
  color: var(--color-ink);
}

.identity-brief p,
.fine-print,
.game-disclaimer,
.result-disclaimer {
  color: var(--color-muted);
}

.cover-rule {
  gap: var(--space-xs);
}

.cover-rule span {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-muted);
}

.cover-rule i {
  display: none;
}

/* Buttons */
.primary-button,
.feedback-next,
.briefing-confirm,
.routine-continue,
.failure-restart-button {
  min-height: 3.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: var(--color-accent-ink);
  font-weight: 800;
  box-shadow: var(--shadow-soft-glow);
}

.primary-button b,
.feedback-next > span,
.routine-continue i {
  color: var(--color-accent-ink);
}

.primary-button:focus-visible,
.feedback-next:focus-visible,
.briefing-confirm:focus-visible,
.routine-continue:focus-visible {
  outline-color: var(--color-focus);
}

button:focus-visible,
summary:focus-visible {
  outline-color: var(--color-focus);
}

/* Persistent roster */
.roster-fab {
  min-height: 3rem;
  padding-inline: var(--space-md);
  border-color: var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper-glass);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(1rem);
}

.roster-layer,
.feedback-layer,
.briefing-layer {
  background: var(--color-overlay);
  backdrop-filter: blur(0.65rem);
}

.roster-panel,
.feedback-card,
.briefing-card {
  border-color: var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--gradient-card);
  box-shadow: var(--shadow-modal);
}

.roster-header,
.briefing-header,
.briefing-footer {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.roster-header h2,
.briefing-header h2 {
  color: var(--color-ink);
}

.roster-close,
.briefing-close {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
}

.roster-grid {
  gap: var(--space-sm);
}

.roster-card {
  border-color: var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}

.roster-portrait,
.feedback-avatar {
  overflow: hidden;
  border-color: var(--color-accent-mid);
  border-radius: 50%;
  background: var(--color-paper-3);
  box-shadow: var(--shadow-soft-glow);
  image-rendering: auto;
}

.roster-copy > span,
.roster-copy p,
.roster-note {
  color: var(--color-muted);
}

/* Game HUD */
.game-screen {
  gap: var(--space-sm);
}

.game-header {
  inset-block-start: var(--space-xs);
  padding: var(--space-sm);
  border-color: var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-glass);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(1rem);
}

.episode-mark {
  min-width: 3.4rem;
  block-size: 3.4rem;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.episode-mark span,
.episode-mark small {
  color: var(--color-ink);
}

.trust-copy span,
.trust-copy strong {
  color: var(--color-ink);
}

.trust-track,
.stat-linear-track {
  background: var(--color-paper-3);
  box-shadow: inset 0 0 0 var(--rule-thin) var(--color-rule);
}

.trust-track i,
.stat-linear-track i,
.trust-track i[data-level="strong"],
[data-stat="risk"].is-good .stat-linear-track i {
  background: var(--gradient-accent);
  box-shadow: var(--shadow-soft-glow);
}

.trust-track i[data-level="crisis"],
[data-stat="risk"].is-danger .stat-linear-track i,
.stat-strip > div.is-critical .stat-linear-track i {
  background: var(--gradient-accent-reverse);
}

.player-role {
  border: 0;
  border-radius: 0;
  background: var(--color-transparent);
}

.player-role strong {
  color: var(--color-ink-2);
}

.resource-heading {
  margin-block-start: var(--space-xs);
  color: var(--color-ink-2);
}

.resource-heading::before {
  background: var(--gradient-accent);
}

.stat-strip {
  gap: var(--space-sm);
}

.stat-strip > div {
  min-height: 5rem;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-transparent);
  box-shadow: none;
}

.stat-strip > div::after {
  background: var(--color-haze-pink);
}

.stat-heading span,
.stat-strip strong {
  color: var(--color-ink);
}

.stat-heading span small,
.stat-caption {
  color: var(--color-soft);
}

.stat-strip > div.is-danger,
.stat-strip > div.is-critical {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  box-shadow: var(--shadow-soft-glow);
}

.stat-strip > div.is-good strong,
.stat-strip > div.is-changing.is-gain strong {
  color: var(--color-accent-2);
}

.stat-strip > div.is-danger strong,
.stat-strip > div.is-changing.is-loss strong {
  color: var(--color-error);
}

.stat-delta-fly {
  border-color: var(--color-accent-mid);
  background: var(--color-success-bg);
  color: var(--color-accent-2);
}

.stat-delta-fly.is-loss {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Question and action cards */
.question-card {
  padding: clamp(var(--space-md), 3vw, var(--space-xl));
  border-color: var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
}

.question-card::before,
.feedback-card::before,
.result-hero::before {
  inset-inline: 8%;
  block-size: 0.16rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-soft-glow);
}

.question-kicker,
.question-card > p,
.routine-progress > span {
  color: var(--color-muted);
}

.question-stage,
.crisis-location {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.question-stage[data-stage="action"],
.question-stage[data-stage="done"] {
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.question-card h2 {
  margin-block-start: var(--space-md);
  color: var(--color-ink);
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.routine-progress {
  border-color: var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}

.choices,
.crisis-choices {
  gap: var(--space-sm);
}

.choices button,
.crisis-choices button {
  border-color: var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: none;
}

.choices button > b,
.crisis-choices button > b,
.routine-feedback-icon {
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.action-icon {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-3);
  box-shadow: var(--shadow-soft-glow);
}

.action-list .choice-text,
.crisis-choices span {
  color: var(--color-ink);
}

.choice-description {
  color: var(--color-muted);
}

.action-list .action-cta,
.crisis-choices small {
  color: var(--color-soft);
}

.action-cta i {
  color: var(--color-accent-mid);
}

.choices button.is-selected {
  border-color: var(--color-accent-mid);
  background: var(--color-success-bg);
  box-shadow: var(--shadow-accent);
}

.choices button.is-selected > b {
  border: 0;
  background: var(--gradient-accent);
  color: var(--color-accent-ink);
}

.game-disclaimer {
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  background: var(--color-transparent);
}

/* Modal, crisis and settlement */
.feedback-card,
.briefing-card {
  animation: deep-modal-in 300ms var(--ease-out) both;
}

@keyframes deep-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-md)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.feedback-card {
  width: min(100%, 48rem);
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.feedback-layer:has(.routine-feedback-card) .feedback-card {
  background: var(--color-paper-glass);
  backdrop-filter: blur(1rem);
}

.feedback-card h3,
.settlement-subhead h4 {
  color: var(--color-ink);
}

.routine-feedback-copy,
.crisis-trigger,
.crisis-stakes {
  color: var(--color-ink-2);
}

.workplace-receipt,
.settlement-workplace {
  border: 0;
  background: var(--color-transparent);
}

.workplace-receipt strong,
.settlement-workplace strong,
.workplace-kicker {
  color: var(--color-accent-mid);
}

.workplace-receipt p,
.settlement-workplace p {
  color: var(--color-muted);
}

.routine-feedback-delta,
.delta-item {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}

.routine-feedback-delta.is-good,
.delta-item.is-good {
  border-color: var(--color-accent-mid);
  background: var(--color-success-bg);
  color: var(--color-accent-2);
}

.routine-feedback-delta.is-bad,
.delta-item.is-bad {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.routine-feedback-note,
.settlement-subhead small,
.settlement-subhead > span {
  color: var(--color-soft);
}

.crisis-location {
  margin-block-start: var(--space-sm);
}

.crisis-card h3 {
  margin-block-start: var(--space-sm);
  font-size: clamp(1.65rem, 5vw, 2.45rem);
  line-height: 1.1;
}

.crisis-stakes {
  border-color: var(--color-rule);
  border-inline-start-color: var(--color-accent-mid);
  background: var(--color-paper-2);
  color: var(--color-muted);
}

.workplace-kicker {
  border-color: var(--color-accent);
}

.crisis-choices button > b {
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.settlement-chapter {
  border: 0;
  border-radius: 0;
  background: var(--color-transparent);
}

.trust-change {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settlement-resource-track {
  border: 0;
  background: var(--color-paper-3);
}

.settlement-resource-track b {
  background: var(--gradient-accent);
}

.settlement-resource.is-bad .settlement-resource-track b {
  background: var(--gradient-accent-reverse);
}

.settlement-chapter span,
.settlement-metric-label,
.trust-change-value > span,
.trust-hp-scale {
  color: var(--color-soft);
}

.trust-change-value strong,
.trust-change-value.is-current strong,
.trust-change.is-down .trust-change-value.is-current strong {
  color: var(--color-ink);
}

.trust-change em {
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.trust-hp-track {
  border: 0;
  background: var(--color-paper-3);
  box-shadow: none;
}

.trust-hp-track::before {
  background: var(--color-transparent);
}

.trust-hp-track::after {
  background: var(--color-rule-strong);
}

.trust-hp-previous {
  background: var(--color-paper-3);
}

.trust-hp-current,
.trust-change.is-down .trust-hp-current,
.trust-change:not(.is-up):not(.is-down) .trust-hp-current {
  background: var(--gradient-accent);
  box-shadow: var(--shadow-soft-glow);
}

.feedback-summary-item {
  border: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.feedback-summary-item.is-negative {
  border-color: var(--color-rule);
  background: transparent;
}

.feedback-summary-item.is-positive,
.feedback-summary-item.is-ally {
  border-color: var(--color-rule);
  background: transparent;
}

.feedback-summary-item.is-positive,
.feedback-summary-item.is-ally {
  border-color: var(--color-accent-mid);
  background: var(--color-success-bg);
}

.feedback-summary-copy p,
.notice-stack p {
  color: var(--color-ink-2);
}

.feedback-trust,
.notice-stack p {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
}

.feedback-trust.is-up,
.feedback-trust.is-ally {
  background: var(--color-success-bg);
  color: var(--color-accent-2);
}

.feedback-trust.is-down {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Briefing */
.briefing-header {
  border-block-end-color: var(--color-rule);
}

.briefing-header p,
.briefing-header h2 span,
.briefing-footer small,
.briefing-metaphor-note {
  color: var(--color-muted);
}

.briefing-section > h3::before {
  background: var(--gradient-accent);
}

.briefing-section > h3 b,
.briefing-protocol span,
.briefing-warning strong {
  color: var(--color-accent-mid);
}

.briefing-status,
.briefing-resource-grid article,
.briefing-protocol,
.briefing-warning {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.briefing-status.is-pass,
.briefing-status.is-fail,
.briefing-warning {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-2);
}

.briefing-status h4,
.briefing-resource-grid strong,
.briefing-protocol strong {
  color: var(--color-ink-2);
}

.briefing-resource-grid article > span {
  color: var(--color-accent-mid);
  font-weight: 800;
}

.briefing-status p,
.briefing-resource-grid p,
.briefing-warning p {
  color: var(--color-muted);
}

/* Result and failure */
.result-hero,
.result-panel {
  border-color: var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--gradient-card);
  color: var(--color-ink);
}

.result-hero {
  box-shadow: var(--shadow-card);
}

.result-role-label,
.result-stamp,
.badge-row span,
.failure-code,
.failure-lock,
.panel-title span {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.result-role-label,
.result-stamp,
.secondary-role,
.evidence-grid strong,
.final-stats strong,
.relation-summary em {
  color: var(--color-accent-mid);
}

.survival-score {
  background: var(--gradient-accent);
  color: var(--color-accent-ink);
}

.survival-score span {
  color: var(--color-accent-ink);
}

.evidence-grid > div,
.relation-summary > div,
.final-stats > div,
.ledger-row {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.role-summary,
.result-panel > p,
.evidence-grid span,
.final-stats span,
.relation-summary span,
.ledger-person > span:last-child,
.meme-panel small {
  color: var(--color-muted);
}

.evidence-panel blockquote,
.failure-last-panel blockquote {
  border-color: var(--color-accent);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}

.ledger {
  border-color: var(--color-rule);
}

.ledger-row i {
  background: var(--color-paper-3);
}

.ledger-row i b {
  background: var(--gradient-accent);
}

.meme-panel,
.ending-panel {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.meme-kicker,
.failure-event,
.failure-stop-panel strong {
  color: var(--color-accent-mid) !important;
}

.result-content.is-failure .failure-hero,
.failure-status-panel,
.failure-last-panel,
.failure-stop-panel {
  border-color: var(--color-rule-strong);
  background: var(--gradient-card);
}

.failure-hero::after {
  color: var(--color-haze-pink);
}

.failure-code {
  background: var(--gradient-accent);
  color: var(--color-accent-ink);
}

.failure-reason-label,
.failure-lock {
  border-color: var(--color-accent-mid);
  background: var(--color-paper-3);
  color: var(--color-accent-2);
}

.failure-hero h3,
.failure-metric-grid > div.is-breached strong,
.failure-metric-grid > div.is-breached small {
  color: var(--color-accent-2);
}

.failure-summary,
.failure-last-panel > p:last-child,
.failure-stop-panel p {
  color: var(--color-muted);
}

.failure-metric-grid > div {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
}

.failure-metric-grid > div.is-breached {
  border-color: var(--color-accent-mid);
  background: var(--color-success-bg);
}

.failure-stop-panel .panel-title > span {
  background: var(--gradient-accent);
  color: var(--color-accent-ink);
}

.result-disclaimer {
  color: var(--color-soft);
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover,
  .feedback-next:hover,
  .briefing-confirm:hover,
  .routine-continue:hover {
    background: var(--gradient-accent-reverse);
    color: var(--color-accent-ink);
    filter: brightness(1.03);
    transform: translateY(-1px);
  }

  .choices button:not(:disabled):hover,
  .crisis-choices button:not(:disabled):hover,
  .roster-card:hover {
    border-color: var(--color-accent-mid);
    background: var(--color-paper-3);
    box-shadow: var(--shadow-soft-glow);
    transform: translateY(-1px);
  }

  .roster-fab:hover,
  .roster-close:hover,
  .briefing-close:hover {
    border-color: var(--color-accent-mid);
    background: var(--color-paper-3);
    color: var(--color-ink);
  }
}

@media (min-width: 40rem) {
  .cover-copy {
    padding: var(--space-2xl);
  }

  .crisis-card,
  .settlement-card {
    padding: var(--space-xl);
  }
}

@media (min-width: 60rem) {
  .game-header,
  .resource-heading,
  .stat-strip,
  .question-card,
  .game-disclaimer {
    width: min(100%, 56rem);
    margin-inline: auto;
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .choices,
  .crisis-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 24rem) {
  .cover-copy,
  .question-card,
  .feedback-card {
    border-radius: var(--radius-card);
  }

  .question-card h2,
  .crisis-card h3 {
    font-size: clamp(1.75rem, 9vw, 2.45rem);
  }

  .stat-strip {
    gap: var(--space-xs);
  }

  .stat-strip > div {
    padding-inline: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active,
  .feedback-card,
  .briefing-card {
    animation-name: none;
  }
}

/* Compact narrative workflow */
.feedback-layer,
.feedback-layer:has(.routine-feedback-card) {
  place-items: center;
  background: var(--color-feedback-overlay);
  backdrop-filter: blur(0.1rem);
}

.feedback-card {
  width: min(100%, 40rem);
  max-height: min(calc(100dvh - 2rem), 42rem);
  padding: var(--space-lg);
}

.routine-feedback-card,
.instant-feedback-card {
  width: min(100%, 32rem);
  max-height: min(calc(100dvh - 2rem), 32rem);
  padding: var(--space-md);
}

.crisis-card,
.settlement-card {
  width: min(100%, 40rem);
  padding: var(--space-lg);
}

.routine-feedback-icon {
  flex-basis: 2.65rem;
  width: 2.65rem;
  font-size: 1.35rem;
}

.routine-feedback-card h3 {
  font-size: clamp(1.35rem, 4vw, 1.7rem);
}

.routine-feedback-deltas,
.routine-feedback-card .feedback-next {
  margin-block-start: var(--space-sm);
}

.routine-feedback-delta {
  min-height: 2.2rem;
}

/* Rules: one compact reading column, fewer boxes. Footer remains unchanged. */
.briefing-card {
  width: min(100%, 46rem);
  max-height: min(calc(100dvh - 1rem), 46rem);
}

.briefing-header {
  padding: var(--space-md) var(--space-lg);
}

.briefing-header h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
}

.briefing-scroll {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.briefing-section + .briefing-section {
  margin-block-start: var(--space-lg);
}

.briefing-section > h3 {
  margin-block-end: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-md);
}

.briefing-section > h3::before {
  display: none;
}

.briefing-status,
.briefing-resource-grid article,
.briefing-protocol,
.briefing-warning {
  border: 0;
  border-radius: var(--radius-sm);
}

.briefing-status {
  padding: var(--space-sm);
}

.briefing-status.is-pass {
  background: var(--color-success-bg);
}

.briefing-status.is-fail {
  background: var(--color-error-bg);
}

.briefing-status.is-pass h4 {
  color: var(--color-accent-2);
}

.briefing-status.is-fail h4 {
  color: var(--color-error);
}

.briefing-resource-grid {
  gap: 0 var(--space-md);
}

.briefing-resource-grid article {
  padding: var(--space-sm) 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}

.briefing-resource-grid article > span {
  font-family: var(--font-emoji);
  font-size: var(--text-md);
}

.briefing-protocol {
  background: transparent;
}

.briefing-protocol p {
  grid-template-columns: 5.2rem minmax(0, 1fr);
  padding: var(--space-xs) 0;
}

.briefing-protocol p + p {
  border-block-start-color: var(--color-rule);
}

.briefing-warning {
  margin-block-start: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-3);
}

/* Settlement: bigtech-style compact deltas and animated bars. */
.settlement-card .toast-overline {
  margin-block-end: var(--space-2xs);
}

.settlement-workplace {
  margin-block-start: var(--space-xs);
}

.settlement-metrics-grid {
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-sm);
  padding-block: var(--space-sm);
}

.settlement-metric-head > span,
.settlement-resource-head span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.settlement-metric-head strong,
.settlement-resource-head strong {
  font-size: var(--text-md);
}

.trust-hp-track,
.settlement-resource-track {
  block-size: 0.46rem;
  margin-block-start: var(--space-2xs);
  background: var(--color-paper-3);
}

.trust-hp-previous,
.settlement-resource-track i {
  background: var(--color-rule-strong);
  opacity: 0.62;
}

.trust-hp-current,
.trust-change.is-down .trust-hp-current,
.trust-change:not(.is-up):not(.is-down) .trust-hp-current,
.settlement-resource-track b,
.settlement-resource.is-bad .settlement-resource-track b {
  background: var(--gradient-accent);
  box-shadow: none;
}

.settlement-reactions {
  margin-block-start: var(--space-sm);
}

.feedback-summary-item {
  padding-block: var(--space-xs);
}

@media (min-width: 40rem) {
  .crisis-card,
  .settlement-card {
    padding: var(--space-lg);
  }
}

@media (min-width: 60rem) {
  .app-shell {
    width: min(100%, 60rem);
    padding-inline: var(--space-lg);
  }

  .game-header,
  .resource-heading,
  .stat-strip,
  .question-card,
  .game-disclaimer {
    width: min(100%, 56rem);
  }

  .game-screen {
    gap: var(--space-xs);
  }

  .game-header {
    padding: var(--space-xs) var(--space-sm);
  }

  .stat-strip {
    gap: var(--space-xs) var(--space-md);
  }

  .stat-strip > div {
    min-height: 4rem;
  }

  .question-card {
    padding: var(--space-md);
  }

  .question-card h2 {
    margin-block-start: var(--space-sm);
    font-size: clamp(2rem, 4.4vw, 3rem);
  }

  .routine-progress {
    min-height: 2.2rem;
    padding-inline: 0;
    border: 0;
    background: transparent;
  }

  .action-list .action-button {
    min-height: 5.6rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .action-icon {
    width: 2.15rem;
    font-size: 1.15rem;
  }
}

@media (max-width: 40rem) {
  .feedback-card,
  .routine-feedback-card,
  .instant-feedback-card,
  .crisis-card,
  .settlement-card {
    width: min(100%, 34rem);
    padding: var(--space-md);
  }

  .briefing-header,
  .briefing-scroll,
  .briefing-footer {
    padding-inline: var(--space-md);
  }
}