:root {
  --ink: #e9eee8;
  --muted: #98a8a5;
  --ground: #0e1314;
  --panel: #171e20;
  --line: #344144;
  --signal: #f2b84b;
  --state: #65c8d0;
  --pass: #7bc793;
  --fail: #e47b72;
  --actor-ceo: #f2b84b;
  --actor-align: #65c8d0;
  --actor-potus: #91adff;
  --actor-china: #e47b72;
  --actor-agent4: #7bc793;
  color-scheme: dark;
  font-family: "IBM Plex Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background:
    linear-gradient(rgba(101, 200, 208, 0.035) 1px, transparent 1px),
    var(--ground);
  background-size: 100% 24px;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0;
}
button, textarea { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.start-shell, .game-shell, .results-shell {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
  padding: 28px 0 max(40px, env(safe-area-inset-bottom));
}
.privacy-shell {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
  padding: 28px 0 max(40px, env(safe-area-inset-bottom));
}
.privacy-lead { max-width: 800px; padding: 30px 0 28px; border-top: 4px solid var(--signal); }
.privacy-lead h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 8vw, 4.8rem); line-height: 1; text-transform: uppercase; }
.privacy-lead > p:not(.eyebrow):not(.policy-note), .privacy-content p { color: var(--muted); font-size: .84rem; }
.policy-note { margin-top: 20px; padding: 12px 0; border-block: 1px solid var(--signal); color: var(--signal); font-size: .74rem; }
.privacy-toc { margin: 0 0 36px; padding: 18px 20px 20px; border-block: 1px solid var(--line); background: var(--panel); }
.privacy-toc h2 { margin: 0 0 12px; color: var(--state); font-size: .82rem; text-transform: uppercase; }
.privacy-toc ol { columns: 2; margin: 0; padding-left: 24px; }
.privacy-toc li { break-inside: avoid; margin: 7px 0; color: var(--signal); font-size: .76rem; }
.privacy-toc a, .privacy-content a { color: var(--signal); font-weight: 700; }
.privacy-toc a:focus-visible, .privacy-content a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.privacy-content { max-width: 800px; }
.privacy-content section { scroll-margin-top: 70px; padding: 24px 0; border-top: 1px solid var(--line); }
.privacy-content h2 { margin: 0 0 10px; color: var(--state); font-size: .92rem; text-transform: uppercase; }
.privacy-content p { margin: 10px 0 0; }
.privacy-content code { color: var(--ink); font-size: .9em; }
.contact-email { overflow-wrap: anywhere; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 18px 0 max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}
.site-footer a { color: var(--signal); font-weight: 700; }
.site-footer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.report-lead { padding: 44px 0 30px; border-top: 4px solid var(--fail); }
.report-lead h1 { margin: 0 0 18px; font-size: clamp(2rem, 7vw, 4.6rem); line-height: 1; text-transform: uppercase; }
.report-disclaimer { max-width: 820px; padding: 12px 0; border-block: 1px solid var(--signal); color: var(--signal); font-weight: 700; }
.report-summary { max-width: 900px; font-size: 1.08rem; }
.alignment-status { color: var(--fail); font-weight: 700; }
.report-band { padding: 26px 0; border-top: 1px solid var(--line); }
.report-band h3 { margin: 20px 0 7px; color: var(--state); font-size: .76rem; text-transform: uppercase; }
.report-band h4 { margin: 16px 0 5px; color: var(--state); font-size: .7rem; text-transform: uppercase; }
.report-band p, .report-list { color: var(--muted); font-size: .8rem; }
.report-list { padding-left: 24px; }
.report-list li { margin: 8px 0; }
.report-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 34px; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.score { --actor-color: var(--state); min-width: 0; padding: 18px 18px 22px 0; border-bottom: 1px solid var(--line); border-top: 3px solid var(--actor-color); }
.score + .score { padding-left: 18px; border-left: 1px solid var(--line); }
.score h3 { margin-top: 0; color: var(--actor-color); }
.score-total { color: var(--ink) !important; font-weight: 700; }
.assessment-list { padding-left: 22px; font-size: .75rem; }
.assessment-list li { margin: 14px 0; }
.assessment-list strong { color: var(--fail); }
.assessment-list .met strong { color: var(--pass); }
.assessment-list p { margin: 4px 0; }
.assessment-list small, .turning-point small { color: var(--state); }
.turning-point { padding: 16px 0; border-bottom: 1px solid var(--line); }
.turning-point strong { color: var(--ink); }
.turning-point p { margin: 7px 0; }
.turning-point h3 { margin-top: 14px; }
.strategy-list, .revealed-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.strategy { --actor-color: var(--state); padding: 16px 16px 16px 0; border-top: 2px solid var(--actor-color); }
.strategy + .strategy { padding-left: 16px; border-left: 1px solid var(--line); }
.strategy h3 { color: var(--actor-color); }
.revealed-role { --actor-color: var(--state); min-width: 0; padding-right: 16px; border-top: 2px solid var(--actor-color); }
.revealed-role summary { color: var(--actor-color); }
.revealed-role p { overflow-wrap: anywhere; }
.game-over-panel {
  margin: 18px 0 26px;
  padding: 24px 0 26px;
  border-block: 4px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 5%, transparent);
}
.game-over-panel h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
}
.game-over-panel > p:not(.eyebrow) { max-width: 760px; color: var(--muted); }
.evaluation-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}
.evaluation-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  padding: 14px;
  background: var(--panel);
}
.evaluation-steps span { grid-row: span 2; color: var(--muted); }
.evaluation-steps strong { color: var(--ink); font-size: .78rem; text-transform: uppercase; }
.evaluation-steps em { color: var(--muted); font-size: .72rem; font-style: normal; }
.evaluation-steps .current { border-top: 3px solid var(--signal); }
.evaluation-steps .complete { border-top: 3px solid var(--pass); }
.evaluation-steps .complete em { color: var(--pass); }
.evaluation-steps .failed { border-top: 3px solid var(--fail); }
.evaluation-steps .failed em { color: var(--fail); }
.masthead { border-top: 4px solid var(--signal); padding: 26px 0 38px; }
.eyebrow { color: var(--state); font-size: .75rem; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
.masthead h1 { font-size: clamp(2.6rem, 12vw, 6rem); line-height: .95; margin: 0 0 22px; }
.purpose { max-width: 760px; color: var(--muted); font-size: 1rem; }
.briefing { max-width: 860px; margin: 18px 0 0; color: var(--ink); font-size: .86rem; }
.saved-games { margin-bottom: 44px; }
.saved-games-empty { margin: 16px 0 0; color: var(--muted); font-size: .78rem; }
.saved-games-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
.saved-game { min-width: 0; padding: 16px; background: var(--panel); border-top: 3px solid var(--state); }
.saved-game-heading, .saved-game-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.saved-game-heading strong { min-width: 0; color: var(--state); font-size: .82rem; overflow-wrap: anywhere; }
.saved-game-status { flex: 0 0 auto; color: var(--signal); font-size: .64rem; text-align: right; text-transform: uppercase; }
.saved-game-status.status-completed { color: var(--pass); }
.saved-game-status.status-expired, .saved-game-status.status-failed, .saved-game-status.status-gameplay_failed, .saved-game-status.status-analysis_failed { color: var(--fail); }
.saved-game-details { margin: 12px 0 16px; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.saved-game-footer { color: var(--muted); font-size: .64rem; }
.saved-game-footer small { overflow-wrap: anywhere; }
.saved-game-footer a { flex: 0 0 auto; color: var(--signal); font-weight: 700; }
.saved-game-footer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.section-heading h1, .section-heading h2 { font-size: .95rem; text-transform: uppercase; color: var(--state); }
.section-heading span { color: var(--muted); font-size: .72rem; text-align: right; }
.how-it-works { margin-bottom: 44px; }
.game-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.game-loop li { min-width: 0; padding: 18px 18px 20px 0; }
.game-loop li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.game-loop span { display: block; margin-bottom: 12px; color: var(--signal); font-size: .7rem; }
.game-loop strong { display: block; margin-bottom: 8px; font-size: .82rem; text-transform: uppercase; }
.game-loop p { margin: 0; color: var(--muted); font-size: .74rem; }
.scenario-source { margin-bottom: 44px; padding: 18px 0 20px; border-block: 1px solid var(--signal); }
.scenario-source p { max-width: 860px; margin: 14px 0 0; color: var(--muted); font-size: .82rem; }
.scenario-source strong { color: var(--ink); }
.scenario-source a { color: var(--signal); font-weight: 700; }
.scenario-source a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.role-button {
  min-height: 132px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.role-button:hover, .role-button:focus-visible { background: var(--panel); outline: 2px solid var(--signal); outline-offset: -2px; }
.role-button strong { display: block; color: var(--signal); font-size: 1.15rem; margin-bottom: 12px; }
.role-button small { display: block; margin: -8px 0 10px; color: var(--state); font-size: .65rem; }
.role-button span { color: var(--muted); font-size: .82rem; }
.selection-note { max-width: 780px; margin-top: 18px; color: var(--muted); font-size: .72rem; }
.error, .feedback { color: var(--fail); }

.game-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 48px;
  padding: 0 max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 19, 20, .96);
}
.game-header div { display: flex; gap: 18px; color: var(--muted); font-size: .74rem; }
.wordmark { color: var(--signal); font-weight: 700; text-decoration: none; }
.session-error {
  margin: 32px 0;
  padding: 24px;
  border: 2px solid var(--fail);
  background: rgba(228, 123, 114, .12);
  color: var(--fail);
}
.session-error h1 { margin-bottom: 16px; color: var(--fail); font-size: 2rem; line-height: 1.1; }
.session-error p { max-width: 720px; margin-bottom: 24px; color: var(--fail); font-size: 1.1rem; font-weight: 700; }
.session-error a {
  display: inline-block;
  padding: 12px 16px;
  background: var(--fail);
  color: var(--ground);
  font-weight: 700;
  text-decoration: none;
}
.session-error a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.composer { border: 1px solid var(--signal); padding: 16px; margin-bottom: 18px; background: var(--panel); }
.composer-arrival { animation: composer-arrival 420ms ease-out both; }
@keyframes composer-arrival {
  from { opacity: 0; transform: translateY(-6px); border-color: transparent; }
  to { opacity: 1; transform: translateY(0); border-color: var(--signal); }
}
.postgame-summary { margin-bottom: 22px; padding: 20px 0; border-block: 2px solid var(--state); }
.retry-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 14px 0; border-block: 1px solid var(--fail); }
.retry-panel p { margin: 0; color: var(--fail); font-size: .78rem; }
.retry-panel button { flex: 0 0 auto; border: 0; padding: 10px 13px; background: var(--fail); color: var(--ground); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.postgame-summary .assessment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.status-line, .composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-line { color: var(--signal); font-size: .75rem; margin-bottom: 12px; }
.composer label { display: block; margin-bottom: 8px; font-size: .86rem; }
.proposal-guide { margin: -3px 0 10px; color: var(--muted); font-size: .7rem; }
textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px;
  background: var(--ground);
  color: var(--ink);
}
textarea:focus { outline: 2px solid var(--state); outline-offset: 2px; }
.composer-actions { margin-top: 12px; }
.composer-actions span { color: var(--muted); font-size: .68rem; }
button#submit {
  flex: 0 0 auto;
  border: 0;
  padding: 11px 16px;
  background: var(--signal);
  color: #111;
  font-weight: 700;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: wait; }
.activity-panel {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(440px, 1.3fr);
  gap: 24px;
  align-items: center;
  min-height: 168px;
  margin-bottom: 18px;
  padding: 12px 0;
  border-block: 1px solid var(--line);
}
.turn-transition { animation: turn-transition 520ms ease-out both; }
@keyframes turn-transition {
  0% { background-color: color-mix(in srgb, var(--state) 10%, transparent); }
  100% { background-color: transparent; }
}
.activity-copy { min-width: 0; }
.activity-copy span { display: block; color: var(--state); font-size: .68rem; font-weight: 700; }
.activity-copy strong { display: block; margin-top: 4px; color: var(--ink); font-size: .78rem; overflow-wrap: anywhere; }
.progress-stack { display: grid; gap: 12px; min-width: 0; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.progress-label strong { color: var(--ink); font-size: inherit; text-align: right; }
.month-progress { height: 5px; background: var(--line); overflow: hidden; }
.month-progress span { display: block; width: 0; height: 100%; background: var(--state); transition: width 240ms ease-out; }
.month-steps { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.month-steps li { min-width: 0; color: var(--muted); font-size: .52rem; text-align: left; white-space: nowrap; }
.month-steps li.done { color: var(--pass); }
.month-steps li.active { color: var(--state); font-weight: 700; }
.player-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.player-steps li {
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-right: 0;
  color: var(--muted);
  font-size: .58rem;
  text-align: center;
}
.player-steps li:last-child { border-right: 1px solid var(--line); }
.player-steps li.done { border-color: var(--pass); background: color-mix(in srgb, var(--pass) 14%, transparent); color: var(--pass); }
.player-steps li.active { border-color: var(--signal); background: var(--signal); color: var(--ground); font-weight: 700; }
.player-steps li.next:not(.active) { border-color: var(--state); color: var(--state); font-weight: 700; }
.player-steps li.world-step { border-color: color-mix(in srgb, var(--muted) 65%, var(--line)); color: var(--muted); font-size: .52rem; letter-spacing: .04em; }
.player-steps li.world-step.done { border-color: var(--pass); color: var(--pass); background: color-mix(in srgb, var(--pass) 8%, transparent); }
.player-steps li.world-step.active { border-color: var(--state); color: var(--state); background: color-mix(in srgb, var(--state) 12%, transparent); font-weight: 700; }
.turn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.turn-steps li {
  position: relative;
  min-width: 0;
  padding: 22px 4px 0;
  color: var(--muted);
  font-size: .65rem;
  text-align: center;
  text-transform: uppercase;
}
.turn-steps li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.turn-steps li::after {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  background: var(--ground);
}
.turn-steps li.done { color: var(--pass); }
.turn-steps li.done::before, .turn-steps li.done::after { border-color: var(--pass); background: var(--pass); }
.turn-steps li.active { color: var(--signal); font-weight: 700; animation: active-step-label 1.6s ease-in-out infinite; }
.turn-steps li.active::after { border-color: var(--signal); background: var(--signal); animation: active-step-marker 1.6s ease-in-out infinite; }
@keyframes active-step-label {
  0%, 100% { color: var(--signal); }
  50% { color: var(--ink); }
}
@keyframes active-step-marker {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
.game-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 28px; }
.transcript, .side-rail { min-width: 0; }
.outcome {
  --actor-color: var(--state);
  padding: 16px 14px 18px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--actor-color);
  overflow-wrap: anywhere;
}
.world-update { padding: 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--muted); background: color-mix(in srgb, var(--muted) 5%, transparent); overflow-wrap: anywhere; }
.actor-ceo { --actor-color: var(--actor-ceo); }
.actor-align { --actor-color: var(--actor-align); }
.actor-potus { --actor-color: var(--actor-potus); }
.actor-china { --actor-color: var(--actor-china); }
.actor-agent4 { --actor-color: var(--actor-agent4); }
.outcome-human {
  margin: 10px 0;
  border: 1px solid var(--actor-color);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--actor-color) 11%, var(--panel));
}
.outcome-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--actor-color); font-size: .72rem; font-weight: 700; }
.outcome h2 { margin: 9px 0; font-size: .9rem; color: var(--ink); }
.outcome ol, .outcome ul { padding-left: 22px; color: var(--muted); font-size: .82rem; }
.judgment { color: var(--muted); font-size: .75rem; }
.intent { color: var(--muted); font-size: .75rem; }
.result { margin: 13px 0 4px; color: var(--pass); font-size: .74rem; font-weight: 700; }
.result.failure { color: var(--fail); }
.narration { margin: 8px 0 12px; color: var(--ink); font-size: .9rem; font-weight: 700; }
.new-fact { margin: 7px 0; padding: 7px 10px; border-left: 2px solid var(--state); background: color-mix(in srgb, var(--state) 7%, transparent); color: var(--state); font-size: .8rem; }
.private-tag { color: var(--signal); }
.empty-transcript { padding: 24px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.outcome-progress { border-bottom-style: dashed; background: color-mix(in srgb, var(--actor-color) 5%, transparent); animation: active-outcome 2.4s ease-in-out infinite; }
.outcome-arrival { animation: outcome-arrival 420ms ease-out both; }
.data-arrival { animation: data-arrival 650ms ease-out both; }
@keyframes active-outcome {
  0%, 100% { background-color: color-mix(in srgb, var(--actor-color) 5%, transparent); }
  50% { background-color: color-mix(in srgb, var(--actor-color) 10%, transparent); }
}
@keyframes outcome-arrival {
  from { opacity: .45; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes data-arrival {
  0% { background-color: color-mix(in srgb, var(--state) 22%, transparent); }
  100% { background-color: color-mix(in srgb, var(--state) 7%, transparent); }
}
.progress-note { margin: 10px 0 0; color: var(--muted); font-size: .74rem; }
.outcome-details { margin-top: 12px; padding: 8px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
.outcome-details summary { color: var(--muted); font-size: .7rem; }
.outcome-details[open] summary { color: var(--state); }
.roll-line { margin: 14px 0 2px; color: var(--state); font-size: .7rem; overflow-wrap: anywhere; }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; color: var(--state); font-size: .8rem; text-transform: uppercase; }
summary span { float: right; color: var(--muted); }
.facts, .objectives { padding-left: 25px; font-size: .78rem; }
.facts li, .objectives li { margin: 10px 0; overflow-wrap: anywhere; }
.fact-private { color: var(--signal); }
.side-rail p { margin-top: 14px; color: var(--muted); font-size: .78rem; }
.side-rail .game-loop-summary { color: var(--ink); }
.side-rail h2 { margin: 18px 0 4px; color: var(--ink); font-size: .68rem; text-transform: uppercase; }
.side-rail .briefing-note { color: var(--state); font-size: .68rem; }
.guide-steps { padding-left: 23px; color: var(--muted); font-size: .74rem; }
.guide-steps li { margin: 10px 0; }
.guide-steps strong { color: var(--ink); }

@media (max-width: 720px) {
  .start-shell, .game-shell, .results-shell, .privacy-shell { width: min(100% - 24px, 1180px); padding-top: 16px; }
  .privacy-toc ol { columns: 1; }
  .site-footer { width: min(100% - 24px, 1180px); align-items: flex-start; flex-direction: column; gap: 7px; }
  .game-header div { gap: 10px; }
  .game-loop { grid-template-columns: 1fr 1fr; }
  .game-loop li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .game-loop li:nth-child(4) { border-top: 1px solid var(--line); }
  .game-layout { display: flex; flex-direction: column; gap: 12px; }
  .composer { margin-inline: -4px; padding: 13px; }
  .composer-actions { align-items: flex-end; }
  .composer-actions span { max-width: 55%; }
  button#submit { min-height: 44px; }
  .activity-panel { grid-template-columns: 1fr; gap: 14px; min-height: 226px; }
  .side-rail { order: 1; }
  .side-rail details:not([open]) { padding: 10px 0; }
  .transcript { order: 0; }
  .role-list { grid-template-columns: 1fr; }
  .role-button { min-height: 100px; border-right: 0; }
  .report-columns { grid-template-columns: 1fr; gap: 12px; }
  .evaluation-steps { grid-template-columns: 1fr; }
  .score-grid, .strategy-list, .revealed-roles { grid-template-columns: 1fr; }
  .score + .score, .strategy + .strategy { padding-left: 0; border-left: 0; }
}

@media (min-width: 721px) {
  .session-error { padding: 40px; }
  .session-error h1 { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .turn-steps li.active, .turn-steps li.active::after,
  .outcome-progress, .outcome-arrival, .data-arrival,
  .composer-arrival, .turn-transition { animation: none; }
}

@media print {
  :root { color-scheme: light; --ink: #111; --muted: #333; --ground: #fff; --panel: #fff; --line: #aaa; }
  body { background: #fff; }
  .game-header { position: static; background: #fff; }
  details { break-inside: avoid; }
}