/* Lively vintage classroom palette: cream, clear blue, apricot, spring green and lilac. */
:root {
  --paper: #fff7e8;
  --ink: #303e47;
  --muted: #5d6870;
  --line: #cfc9bc;
  --green: #167b88;
  --gold: #856036;
  --red: #a5493d;
  --white: #fffdf5;
}
body { background: var(--paper); }
.site-header { background: #fffdf5; border-bottom: 2px solid #d1d5ce; }
.brand { color: #3f5f6e; }
.brand span, .back-link { color: #5d6870; }
.intro-subtitle { color: #3f5f6e; }
.intro-body { color: #4f616a; }
.intro-rule { color: #805e36; }
.intro-art { box-shadow: 12px 14px 0 #f0dfbd; }
.intro-art:after { background: linear-gradient(transparent, rgba(20,35,58,.85)); }
input { border-color: #b7c4c6; background: #fffdf5; }
.primary { background: #167b88; border-color: #167b88; color: #fffdf5; border-radius: 7px; }
.primary:hover { background: #0f616c; }
.secondary { background: #fffdf5; color: #3f5f6e; border-color: #a5b8bc; border-radius: 7px; }
.text-button { color: #3f5f6e; }

/* Slate blue: overview of the country. */
.country-panel { background: #cceeff; border: 1px solid #77bbde; border-top: 4px solid #287ca4; border-radius: 10px; }
.country-panel .eyebrow, .country-score { color: #245e7b; }
.country-state { color: #3f5f6e; border-color: #a1b6b7; }
.mini-track { background: #c1d0cc; }
.mini-track i { background: #287ca4; }
.mini-metric > div, .score-label, .country-caption { color: #4a6168; }
.stage-meta { color: #5d6870; }
.scene-panel h1 { color: #303e47; }

/* White with a blue label: story and evidence. */
.scene-copy { background: #fffdf5; padding: 20px 22px; border: 1px solid #d8c499; border-radius: 9px; }
.scene-copy .scene-label { display: inline-block; color: #3f5f6e; background: #e2e9e4; padding: 4px 10px; border-radius: 4px; letter-spacing: 1px; }
.scene-background { color: #5d6870; }
.scene-copy .scene-key { color: #354b54; font-weight: 500; }
.timeline-note { color: #66675e; background: #e8e5dc; padding: 9px 12px; border-left: 3px solid #a0a08f; border-radius: 0 5px 5px 0; }

/* Apricot: the question is the focal point, regardless of the answer. */
.decision-question { background: #ffdd96; border: 1px solid #d9a259; border-left: 5px solid #db801d; border-radius: 0 9px 9px 0; }
.question-kicker { color: #946023; }
.question-call { color: #a44923; }
.question-detail { color: #63442a; }

/* A separate cool surface groups the three equally weighted choices. */
.choices { background: #fff0ae; border: 1px solid #dfc361; border-radius: 9px; padding: 14px; }
.choice { background: #fffdf5; border-color: #bbc5bb; border-radius: 7px; color: #303e47; }
.choice-letter { background: #d7ecf5; color: #456574; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 20px; }
.choice small { color: #5d6870; }
.choice:not(:disabled):hover { background: #edf0e6; border-color: #287ca4; }
.choice.selected { background: #c5eaf4; border-color: #287ca4; box-shadow: inset 3px 0 #287ca4; }
.choice:disabled:not(.selected) { opacity: 1; background: #fffcf2; border-color: #d3d4c7; }
.chosen-mark { color: #3f5f6e; font-weight: 600; }

/* Sage: consequences and explanation; mauve: the separate chart surface. */
.feedback { background: #def5bb; border: 1px solid #89bb55; border-top: 4px solid #508c2c; border-radius: 9px; }
.feedback .section-heading h2 { color: #28552e; }
.feedback .section-heading > b { color: #28552e; }
.grouped-chart { background: #fffdf5; border: 1px solid #bc80dc; border-radius: 7px; padding: 30px 14px 12px 8px; }
.chart-axis { color: #695075; }
.chart-columns { border-bottom-color: #b68acb; background: repeating-linear-gradient(to top, #d8b7eb 0 1px, transparent 1px 25%); }
.vertical-bar.before { background: #edac27; }
.vertical-bar.after { background: #287ca4; }
.before-key:before { background: #edac27; }
.after-key:before { background: #287ca4; }
.vertical-bar b { color: #885500; }
.vertical-bar.after b { color: #3f5f6e; }
.group-labels strong { color: #303e47; }
.gain { color: #3f6447; }
.loss { color: #9a4138; }
.result-sentence { color: #28552e; border-left-color: #508c2c; background: #bfe98e; padding: 10px 14px; border-radius: 0 5px 5px 0; }
.reason-list { color: #3d5d36; }
.historical { color: #855c32; }
.simulation { color: #3f5f6e; }
.history-note { border-top-color: #bdcbb1; color: #52605a; }
.history-note summary { color: #3f5f6e; }
.story-progress li.current { color: #3f5f6e; border-color: #287ca4; }
.story-progress li.done { border-color: #8ebed0; }
.story-progress li { color: #5d6870; }
.story-progress li > span { color: #5d6870; }

/* The same section colours carry through to the final review. */
.summary-heading { background: #cceeff; border: 1px solid #77bbde; padding: 24px; border-radius: 10px; }
.summary-heading h1, .final-score { color: #245e7b; }
.summary-section { background: #fffdf5; border: 1px solid #d8c499; border-radius: 9px; padding: 24px; }
.summary-section h2 { color: #3f5f6e; }
.trend-wrap { background: #f0dcff; border-radius: 7px; }
.grid-line { stroke: #d2c3d0; }
.axis-text { fill: #5d6870; }
.value-text { fill: #3f5f6e; }
.historical-line { stroke: #d9961d; }
.player-line { stroke: #287ca4; }
.player-point { fill: #287ca4; stroke: #fffdf5; }
.trend-legend span + span { color: #855c32; }
.summary-section .governance { background: #c8efa4; color: #28552e; border-left: 3px solid #508c2c; border-radius: 0 5px 5px 0; }
.review-card { border-color: #d1cbbb; background: #fff9ed; border-radius: 7px; }
.review-heading { color: #245e7b; }
.review-heading > span { color: #856036; }
.review-card .reflection { color: #795632; background: #ffedc8; padding: 10px 12px; border: 0; border-radius: 5px; }
blockquote { background: #ffdd96; color: #6c4b2e; border-left-color: #db801d; padding-right: 18px; border-radius: 0 8px 8px 0; }
.site-footer { color: #5d6870; }

@media (max-width: 640px) {
  .scene-copy { padding: 14px; }
  .choices { padding: 9px; }
  .choice-letter { width: 27px; height: 29px; font-size: 18px; }
  .choice { gap: 10px; }
  .grouped-chart { padding: 25px 7px 9px 4px; grid-template-columns: 22px minmax(0, 1fr); gap: 5px; }
  .chart-columns, .group-labels { gap: 6px; }
  .column-pair { gap: 4px; }
  .vertical-bar { flex-basis: 19px; }
  .summary-heading, .summary-section { padding: 17px 14px; }
  .review-card { padding: 14px 12px; }
  .review-heading h3 { font-size: 17px; }
  .summary-section h2 { font-size: 21px; }
  .result-sentence { padding: 9px 10px; }
}

/* A continuous mauve panel separates the chart from its sage feedback card. */
.feedback .chart-legend {
  background: #f0dcff; color: #634175;
  padding: 11px 12px 0; margin-bottom: 0;
  border: 1px solid #bc80dc; border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.grouped-chart {
  background: #f0dcff; border-color: #bc80dc;
  border-top: 0; border-radius: 0 0 7px 7px;
}
.vertical-bar.after { background: #963ac1; }
.vertical-bar.after b { color: #7823a0; }
.after-key:before { background: #963ac1; }
.group-labels strong { color: #4f2b65; }
.value-text { fill: #7823a0; }
.player-line { stroke: #963ac1; }
.player-point { fill: #963ac1; }
.trend-legend span:first-child { color: #7823a0; }

/* Show each scene in full, with its intrinsic aspect ratio and no crop. */
.stage-illustration { margin: 0 0 18px; overflow: hidden; border: 1px solid #d8c499; border-radius: 9px; background: #fffdf5; }
.stage-illustration img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 640px) {
  .stage-illustration { margin-bottom: 14px; border-radius: 7px; }
}

/* Reference palette: warm paper, imperial red, ink blue and antique gold.
   These overrides intentionally change colour only; the existing regions and layout stay intact. */
:root {
  --paper: #f8efe0;
  --ink: #241e1c;
  --muted: #6b625d;
  --line: #ddcdb8;
  --green: #2d6685;
  --gold: #c18a27;
  --red: #a52d25;
  --white: #fffaf0;
}
body { background: #f8efe0; color: #241e1c; }
.site-header { background: #fffaf0; border-bottom-color: #d9c5a9; }
.brand, .intro-subtitle, .text-button, .secondary { color: #2d5d7b; }
.brand span, .back-link, .intro-body, .scene-background, .stage-meta, .site-footer { color: #6b625d; }
.intro-rule, .historical, .review-heading > span { color: #9b671b; }
.intro-art { box-shadow: 12px 14px 0 #ead8ba; }
input { border-color: #cdb99b; background: #fffaf0; }
.primary { background: #a52d25; border-color: #a52d25; color: #fffaf0; }
.primary:hover { background: #81211d; }
.secondary { background: #fffaf0; border-color: #8faabd; }

/* Existing region forms, recoloured only. */
.country-panel { background: #f1dfc4; border-color: #d3ae78; border-top-color: #a52d25; }
.country-panel .eyebrow, .country-score { color: #7d241e; }
.country-state { color: #8e3c24; border-color: #c69a62; }
.mini-track { background: #e4cda7; }
.mini-track i { background: #a52d25; }
.mini-metric > div, .score-label, .country-caption { color: #665044; }
.scene-panel h1 { color: #241e1c; }
.scene-copy { background: #fffaf0; border-color: #dfcdb1; }
.scene-copy .scene-label { color: #8b4b24; background: #f3e2c5; }
.scene-copy .scene-key { color: #3d2e28; }
.timeline-note { color: #6b625d; background: #f0e3d0; border-left-color: #bb9361; }
.decision-question { background: #fff0d8; border-color: #e0b274; border-left-color: #a52d25; }
.question-kicker { color: #8c4d20; }
.question-call { color: #8e211d; }
.question-detail { color: #51362a; }
.choices { background: #f1e0c5; border-color: #d6b47b; }
.choice { background: #fffaf0; border-color: #d8c8ad; color: #241e1c; }
.choice-letter { background: #f0dfc2; color: #8d3b25; }
.choice small { color: #6b625d; }
.choice:not(:disabled):hover { background: #fff4df; border-color: #b8792d; }
.choice.selected { background: #f4d8c1; border-color: #a52d25; box-shadow: inset 3px 0 #a52d25; }
.chosen-mark { color: #8e211d; }
.feedback { background: #dcebc7; border-color: #9eb878; border-top-color: #5d843d; }
.feedback .section-heading h2, .feedback .section-heading > b { color: #315f31; }
.result-sentence { color: #315f31; background: #c5dfa6; border-left-color: #5d843d; }
.reason-list { color: #4e6447; }
.simulation { color: #2d5d7b; }
.history-note { border-top-color: #b9c99e; color: #5a6455; }
.history-note summary { color: #2d5d7b; }
.story-progress li.current { color: #8e211d; border-color: #a52d25; }
.story-progress li.done { border-color: #c18a58; }
.story-progress li, .story-progress li > span { color: #6b625d; }

/* The chart remains its own region, with a warm parchment surface and clear bars. */
.feedback .chart-legend, .grouped-chart { background: #ead8e4; border-color: #c79ab8; }
.chart-axis { color: #685465; }
.chart-columns { border-bottom-color: #a9859d; background: repeating-linear-gradient(to top, #d8b8ce 0 1px, transparent 1px 25%); }
.vertical-bar.before { background: #d09b3c; }
.vertical-bar.after { background: #8e3e68; }
.before-key:before { background: #d09b3c; }
.after-key:before { background: #8e3e68; }
.vertical-bar b { color: #8d5e20; }
.vertical-bar.after b, .value-text { color: #713051; fill: #713051; }
.group-labels strong { color: #4b303f; }
.gain { color: #3e6a3b; }
.loss { color: #a52d25; }
.trend-wrap { background: #ead8e4; }
.historical-line { stroke: #c18a27; }
.player-line, .player-point { stroke: #8e3e68; fill: #8e3e68; }
.trend-legend span:first-child { color: #713051; }
.trend-legend span + span { color: #8d5e20; }

.summary-heading { background: #f1dfc4; border-color: #d3ae78; }
.summary-heading h1, .final-score, .summary-section h2, .review-heading { color: #7d241e; }
.summary-section { background: #fffaf0; border-color: #dfcdb1; }
.summary-section .governance { background: #dcebc7; color: #315f31; border-left-color: #5d843d; }
.review-card { border-color: #dfcdb1; background: #fff8eb; }
.review-card .reflection { color: #7a4b24; background: #f5dfbf; }
blockquote { background: #fff0d8; color: #71351f; border-left-color: #a52d25; }