@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{--navy:#102f54;--navy-2:#174b7a;--paper:#f4f7fc;--white:#fff;--ink:#182536;--muted:#526477;--line:#d9e2ee;--gold:#f2bd42;--blue:#1769aa;--red:#c83d4d;--green:#218653;--shadow:0 12px 32px rgba(22,55,90,.11)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.6}button,a{font:inherit}button{cursor:pointer}a{color:inherit}.site-header{height:auto;min-height:78px;padding:14px clamp(18px,5vw,72px);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #bba56e;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.04em}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:.01em}.brand small{font-size:11px;color:#c4cfd5}.header-links{display:flex;align-items:center;gap:24px;font-size:13px}.header-links a{text-decoration:none;color:#e5e9eb}.text-button{background:none;border:0;color:#e5e9eb;padding:8px 0}.shell{width:min(1100px,calc(100% - 36px));margin:32px auto 64px}.welcome-panel{display:grid;grid-template-columns:1.1fr .9fr;background:var(--navy);color:#fff;overflow:hidden;border-radius:16px;min-height:270px;box-shadow:var(--shadow)}.welcome-copy{padding:clamp(26px,4vw,48px)}.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8b6d32;margin:0 0 10px}.welcome-copy .eyebrow{color:var(--gold)}h1,h2,h3{line-height:1.2;margin:0;font-weight:700}h1,h2{font-family:'Libre Baskerville',Georgia,serif}h1{font-size:clamp(29px,4vw,43px);max-width:560px;letter-spacing:-.04em}.lead{color:#d7e0e5;max-width:540px;font-size:15px;margin:18px 0}.welcome-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.welcome-facts span{font-size:11px;border:1px solid #496071;border-radius:99px;padding:5px 10px;color:#e4e9ec}.welcome-image{min-height:270px;background:linear-gradient(90deg,rgba(23,43,59,.2),rgba(23,43,59,.04)),url('pics/map.jpg') center/cover no-repeat;filter:saturate(.7)}.setup-card{background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:24px;padding:clamp(22px,3.5vw,38px);box-shadow:var(--shadow)}.section-heading{max-width:700px;margin-bottom:24px}.section-heading h2{font-size:25px}.section-heading>p:last-child{color:var(--muted);margin:10px 0 0;font-size:14px}.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.role-card{text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;min-height:230px;transition:transform .15s,border-color .15s,box-shadow .15s;color:var(--ink)}.role-card:hover,.role-card:focus-visible{transform:translateY(-3px);border-color:#9aabb4;box-shadow:0 10px 22px #172b3b12;outline:none}.role-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#e8eef2;color:var(--blue);font-weight:700;font-size:13px;margin-bottom:17px}.role-confed .role-symbol{background:#f2e8e6;color:white}.role-duel .role-symbol{background:#f2ecd9;color:#80642d;font-size:10px}.role-title{font-size:17px;font-weight:700}.role-leader{font-size:11px;color:var(--muted);margin:3px 0 12px}.role-description{font-size:13px;color:#4d5a62;line-height:1.5}.role-cta{margin-top:auto;padding-top:20px;font-size:12px;font-weight:700;color:var(--blue);display:flex;justify-content:space-between;width:100%}.setup-note{font-size:11px;color:var(--muted);margin:22px 0 0}.hidden{display:none!important}.game-view{margin-top:26px}.campaign-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.campaign-topline h2{font-size:25px}.quiet-button,.icon-button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 13px;color:#44515a;font-size:12px}.progress-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 20px;margin-bottom:16px}.progress-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:10px}.progress-track{height:6px;background:#e8ebec;border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--blue);border-radius:99px;transition:width .25s}.timeline{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;margin-top:12px}.timeline span{height:4px;background:#e5e7e7;border-radius:5px}.timeline span.done{background:#7f9cae}.timeline span.current{background:var(--gold)}.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.status-card{background:linear-gradient(145deg,#fff 0%,#f1f7ff 100%);border:1px solid var(--line);border-radius:12px;padding:15px 17px}.status-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.status-value{font-size:23px;font-weight:700;margin:3px 0}.status-sub{font-size:10px;color:var(--muted)}.event-card,.outcome-card,.results-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(22px,3.5vw,36px);box-shadow:var(--shadow)}.event-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.tag{background:#f1ead9;color:#7d632d;padding:5px 9px;border-radius:5px;font-size:10px;letter-spacing:.1em;font-weight:700}.event-date{font-size:12px;color:var(--muted)}.event-card h3{font-family:'Libre Baskerville',Georgia,serif;font-size:clamp(22px,3vw,30px);max-width:720px}.briefing{font-size:15px;color:#46545d;line-height:1.8;max-width:850px;margin:17px 0 26px}.decision-area h4{font-size:13px;margin:0 0 12px}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.choice-button{position:relative;text-align:left;display:flex;flex-direction:column;gap:10px;border:1px solid #dce1e3;border-radius:10px;padding:17px;background:#fff;color:var(--ink);min-height:120px;line-height:1.55;font-size:13px;transition:border-color .15s,background .15s}.choice-button:hover,.choice-button:focus-visible{border-color:#1769aa;background:#eaf4ff;outline:2px solid transparent}.choice-letter{font-size:10px;letter-spacing:.12em;color:#1769aa;font-weight:800}.choice-button.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#e6f3ff}.choice-button.selected:after{content:'SELECTED';position:absolute;top:10px;right:10px;font-size:8px;font-weight:700;letter-spacing:.08em;color:var(--blue)}.submit-row{display:flex;justify-content:flex-end;margin-top:16px}.primary-button{border:0;background:#1769aa;color:#fff;padding:12px 17px;border-radius:8px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:16px}.primary-button:hover{background:#0e4d84;transform:translateY(-1px)}.primary-button:disabled{opacity:.4;cursor:not-allowed}.outcome-card{margin-top:16px;border-top:4px solid var(--gold)}.outcome-card h3{font-family:'Libre Baskerville',Georgia,serif;font-size:24px}.outcome-text{font-size:14px;line-height:1.8;color:#46545d;margin-top:16px}.outcome-text a{color:var(--blue)}.feedback-strip{border-radius:9px;padding:13px 15px;background:#eef4f0;color:#2c5c45;font-size:13px;margin:20px 0}.quiz-area{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.quiz-area h4{font-size:16px;margin:0 0 14px}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quiz-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer}.quiz-option:has(input:checked){border-color:var(--blue);background:#f2f7fa}.quiz-option input{margin-top:4px;accent-color:var(--blue)}.quiz-feedback{font-size:13px;margin-top:12px}.quiz-feedback.correct{color:#2c6b4c}.quiz-feedback.incorrect{color:#934e46}.game-actions{display:flex;justify-content:flex-end;margin-top:20px}.game-footer{display:flex;justify-content:space-between;gap:16px;padding:17px 4px;color:var(--muted);font-size:11px}.game-footer a{color:var(--blue);font-weight:700;text-decoration:none}.results-card{margin-top:26px}.results-card h2{font-size:30px}.results-score{font-size:48px;font-weight:700;color:var(--blue);margin:14px 0 0}.results-summary{color:var(--muted);font-size:14px}.result-list{display:grid;gap:9px;margin:22px 0}.result-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.result-row span:last-child{font-weight:700}.site-footer{border-top:1px solid #dfe2e1;padding:20px clamp(18px,5vw,72px);display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}.site-footer a{color:var(--blue);text-decoration:none}.notes-dialog{width:min(560px,calc(100% - 30px));border:0;border-radius:14px;padding:28px;box-shadow:0 25px 90px #0003;color:var(--ink);line-height:1.7}.notes-dialog::backdrop{background:#10202bb3}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-head h2{font-size:23px}.icon-button{font-size:24px;line-height:1;padding:4px 10px}.notes-dialog p{font-size:14px;color:#4b5961}.notes-dialog>a{color:var(--blue);font-size:13px;font-weight:700}
@media(max-width:760px){.site-header{align-items:flex-start}.header-links{gap:12px;flex-wrap:wrap;justify-content:flex-end}.welcome-panel{grid-template-columns:1fr}.welcome-image{min-height:150px;grid-row:1}.welcome-copy{padding-top:28px}.role-grid{grid-template-columns:1fr}.role-card{min-height:0}.role-cta{padding-top:14px}.choice-grid{grid-template-columns:1fr}.choice-button{min-height:0}.status-grid{grid-template-columns:1fr}.status-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px}.status-top{grid-column:1/-1}.status-value{margin:0}.status-sub{text-align:right}.quiz-options{grid-template-columns:1fr}.campaign-topline h2{font-size:21px}.game-footer{flex-direction:column}.shell{margin-top:18px}.header-links{font-size:11px}.brand strong{font-size:13px}.brand small{font-size:10px}}@media(max-width:460px){.site-header{padding:12px 14px;gap:8px}.brand-mark{width:38px;height:38px}.header-links{max-width:115px;display:grid;gap:3px}.shell{width:calc(100% - 24px)}.welcome-copy{padding:23px}.setup-card,.event-card,.outcome-card,.results-card{padding:20px}.progress-wrap{padding:14px}.timeline{gap:3px}.progress-meta{font-size:11px}}
.side-decision{margin:0 0 22px}.side-decision:last-of-type{margin-bottom:0}.side-decision>h4{font-size:12px;color:#4e5e67;margin:0 0 10px}.quiz-block{margin-top:16px}.quiz-block+.quiz-block{border-top:1px solid var(--line);padding-top:20px}.results-card .game-actions a{text-decoration:none}.muted{color:var(--muted)}

/* Phase 1 visual polish: warmer archival palette and clearer decision feedback */
:root{--paper:#f2eee5;--navy:#182b3b;--navy-2:#29485c;--gold:#d8b66d;--line:#ded6c7;--shadow:0 14px 34px rgba(39,35,27,.10)}
body{background:radial-gradient(ellipse at 50% 0%,#fffdf8 0%,#f2eee5 72%);background-attachment:fixed}
.site-header{box-shadow:0 3px 0 rgba(216,182,109,.75)}
.brand-mark{border-radius:50%;width:48px;height:48px;background:linear-gradient(145deg,#263f51,#142431);box-shadow:inset 0 0 0 3px #182b3b,inset 0 0 0 4px #bda66f}
.welcome-panel{border:1px solid #344a58;position:relative}
.welcome-copy{position:relative;z-index:1;background:linear-gradient(135deg,#182b3b 0%,#223e50 100%)}
.welcome-image{filter:saturate(.9);position:relative}
.setup-card,.progress-wrap,.status-card,.event-card,.outcome-card,.results-card{box-shadow:0 8px 22px rgba(39,35,27,.055);border-color:#e0d8cb}
.setup-card,.event-card{position:relative}
.event-card:before,.setup-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#1769aa 0%,#f2bd42 48%,#c83d4d 100%);border-radius:14px 14px 0 0}
.eyebrow{color:#8a6b2d}
.tag{background:#fff0c2;color:#704900;border:1px solid #f2ce69}
.choice-button{border-color:#d4dfeb;background:linear-gradient(180deg,#fff 0%,#f5f9ff 100%);box-shadow:0 2px 0 rgba(24,43,59,.025)}
.choice-button:hover,.choice-button:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(24,43,59,.08)}
.choice-button.selected{border-color:#2c6286;background:#edf4f7;box-shadow:inset 0 0 0 1px #2c6286,0 5px 12px #2c628610}
.choice-letter{display:inline-grid;place-items:center;width:25px;padding:10px;height:25px;border-radius:50%;background:#e9eef1;margin-bottom:2px}
.primary-button{box-shadow:0 4px 0 #0d1c27;transition:transform .15s,box-shadow .15s}
.primary-button:active{transform:translateY(2px);box-shadow:0 2px 0 #0d1c27}
.status-card{border-top:3px solid #c8b27d}
.status-card:nth-child(2){border-top-color:#7c9e8b}.status-card:nth-child(3){border-top-color:#b9877d}
.outcome-card{background:linear-gradient(180deg,#fff 0%,#fcfaf5 100%);border-top:4px solid var(--gold)}
.decision-results{display:grid;gap:10px;margin-top:4px}
.results-intro{font-size:15px!important;margin:0 0 2px!important;color:var(--navy)}
.decision-result{border:1px solid #ddd8ce;border-radius:11px;padding:15px 17px;background:#fff;overflow:hidden}
.decision-result-top{display:flex;align-items:center;gap:11px}
.decision-result-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;font-size:19px;font-weight:700}
.decision-result-heading{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.decision-result-heading strong{font-size:13px;color:#253640}
.decision-result-label{font-size:10px;letter-spacing:.07em;font-weight:800}
.decision-result-score{font-size:21px;font-weight:800;white-space:nowrap}
.decision-result-score small{font-size:10px;font-weight:600;opacity:.65}
.decision-result p{margin:10px 0 12px;font-size:13px;color:#4d5a62}
.decision-result-choice{padding:10px 12px;border-radius:7px;background:#f7f5f0;font-size:13px;line-height:1.5}
.decision-result-choice span{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:9px;font-weight:800;color:#6c7478;margin-bottom:3px}
.match-exact{border-left:5px solid #47765c;background:linear-gradient(105deg,#f0f7f1,#fff 65%)}.match-exact .decision-result-icon{background:#dcecdf;color:#2e6845}.match-exact .decision-result-label,.match-exact .decision-result-score{color:#2e6845}
.match-partial{border-left:5px solid #b58a32;background:linear-gradient(105deg,#fbf5e5,#fff 65%)}.match-partial .decision-result-icon{background:#f2e7c9;color:#89671e}.match-partial .decision-result-label,.match-partial .decision-result-score{color:#89671e}
.match-different{border-left:5px solid #a65e55;background:linear-gradient(105deg,#fbefed,#fff 65%)}.match-different .decision-result-icon{background:#f2ddda;color:#944b43}.match-different .decision-result-label,.match-different .decision-result-score{color:#944b43}
.quiz-area{background:#f8f6f0;border:1px solid #e3dccf;border-radius:10px;padding:20px;margin-top:24px}
.quiz-option{background:#fff}.quiz-option:hover{border-color:#9aabb4}
@media(max-width:760px){.decision-result-top{align-items:flex-start}.decision-result-score{font-size:18px}.decision-result{padding:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Phase 1 refinement: fill the campaign dashboard and strengthen selected choices */
.status-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.campaign-aside{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(145px,.9fr);min-height:180px;overflow:hidden;border:1px solid #ded6c7;border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(39,35,27,.055)}
.campaign-aside-image{min-height:180px;background:linear-gradient(0deg,rgba(24,43,59,.12),rgba(24,43,59,.04)),url('pics/map.jpg') center/cover no-repeat;filter:saturate(.8)}
.campaign-aside-caption{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px}
.campaign-aside-caption .eyebrow{margin:0;font-size:9px}
.campaign-aside-caption strong{font-family:'Libre Baskerville',Georgia,serif;font-size:17px;line-height:1.35;color:var(--navy)}
.campaign-aside-caption>span:last-child{font-size:12px;color:var(--muted)}
.choice-button{position:relative;min-height:128px;padding:19px 18px 18px 20px;gap:11px;overflow:hidden}
.choice-button .choice-letter{width:34px;height:34px;font-size:12px;font-weight:800;background:#e8edf0;color:#36566a;border:1px solid #d7e0e5}
.choice-button.selected{border-color:#2c6286;background:linear-gradient(135deg,#eaf3f7,#fff 85%);box-shadow:inset 0 0 0 2px #2c6286,0 8px 18px rgba(44,98,134,.12)}
.choice-button.selected:after{content:'✓ SELECTED';position:absolute;right:12px;top:12px;font-size:9px;letter-spacing:.08em;font-weight:800;color:#fff;background:#2c6286;border-radius:99px;padding:5px 8px}
.choice-button.selected .choice-letter{background:yellow;color:#fff;border-color:#2c6286}
.choice-button:focus-visible{outline:3px solid #d8b66d;outline-offset:3px}
.decision-result{animation:reveal-result .28s ease-out both}
@keyframes reveal-result{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.campaign-aside{grid-column:1/-1;grid-template-columns:1fr 1fr}.campaign-aside-image{min-height:140px}.campaign-aside-caption{padding:14px}.campaign-aside-caption strong{font-size:15px}.choice-button{min-height:110px}}
@media(max-width:480px){.campaign-aside{grid-template-columns:1fr}.campaign-aside-image{min-height:120px}.campaign-aside-caption{padding:14px}}

/* Stage-specific historical illustrations */
.event-intro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);gap:28px;align-items:start;margin:17px 0 26px;width:100%}
.event-intro .briefing{margin:0;max-width:none;min-width:0}
.briefing p{margin:0 0 12px}
.briefing p:last-child{margin-bottom:0}
.event-illustration{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#f0ede5;box-shadow:0 7px 20px rgba(22,39,52,.08)}
.event-illustration img{display:block;width:100%;height:240px;object-fit:contain;object-position:center;background:#f7f4ec}
.event-illustration figcaption{padding:9px 12px;font-size:10px;letter-spacing:.03em;color:var(--muted);background:#fff}.outcome-text p{margin:0 0 12px}.outcome-text p:last-child{margin-bottom:0}@media(max-width:760px){.event-intro{grid-template-columns:minmax(0,1fr);gap:18px}.event-illustration img{height:200px}.event-illustration{max-width:100%}}

/* Brighter, game-friendly choice markers and clearer interaction states */
.choice-letter{display:inline-flex;align-items:center;gap:8px;color:#145b91!important;font-size:11px!important;letter-spacing:.08em;font-weight:800!important}
.choice-letter:before{content:attr(data-letter);display:none}
.choice-button{box-shadow:0 3px 0 rgba(22,70,120,.05)}
.choice-button:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(23,105,170,.12)}
.choice-button.selected{border-width:2px!important;border-color:#1769aa!important;background:#e6f3ff!important}
.choice-button.selected:after{background:#1769aa;color:#fff;padding:4px 7px;border-radius:5px}
.tag{box-shadow:0 2px 0 rgba(112,73,0,.07)}


/* Classroom readability and stronger game identity */
body{font-size:17px;line-height:1.7;background:#edf3fb}
.shell{width:min(1240px,calc(100% - 40px));margin:34px auto 64px}
.site-header{background:linear-gradient(110deg,#102f54 0%,#1769aa 72%,#1c7c91 100%)}
.site-header .brand-mark{border:2px solid #f2bd42;color:#f2bd42}
h1{font-size:clamp(34px,4.2vw,50px)}
h2{font-size:clamp(29px,3.2vw,39px)}
h3,.event-card h3{font-size:clamp(29px,3.2vw,39px);letter-spacing:-.025em}
.eyebrow{font-size:12px;letter-spacing:.14em}
.event-meta{margin-bottom:16px}
.tag{font-size:13px;padding:7px 13px;border-radius:7px;background:#ffdf78;color:#5b3b00;border:1px solid #efbd35}
.event-date{font-size:13px;font-weight:800;color:#42566c}
.briefing{font-size:19px;line-height:1.75;color:#283c50;margin:20px 0 28px}
.briefing p{margin:0 0 16px}
.event-intro{grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:30px;margin:22px 0 30px}
.event-illustration{border:2px solid #d6e2f0;border-radius:14px;box-shadow:0 10px 24px rgba(20,63,110,.13)}
.event-illustration img{height:270px}
.event-illustration figcaption{font-size:12px;padding:11px 14px;font-weight:600}
.decision-area h4{font-size:18px;margin-bottom:12px}
.side-decision>h4{font-size:16px;color:#1769aa;margin:12px 0}
.choice-grid{gap:14px}
.choice-button{font-size:17px;line-height:1.55;min-height:145px;padding:20px;background:linear-gradient(150deg,#fff 0%,#f1f7ff 100%);border:2px solid #d5e1ef;border-radius:13px;gap:14px}
.choice-letter{font-size:13px!important;letter-spacing:.1em;color:#145b91!important}
.choice-button:hover,.choice-button:focus-visible{border-color:#1769aa;background:#e8f4ff;box-shadow:0 9px 20px rgba(23,105,170,.16)}
.choice-button.selected{background:#dff0ff!important;border-color:#1769aa!important;box-shadow:inset 0 0 0 1px #1769aa,0 7px 18px rgba(23,105,170,.13)}
.choice-button.selected:after{font-size:10px;padding:5px 8px}
.primary-button,.quiet-button{font-size:16px;padding:14px 20px;border-radius:10px}
.primary-button{background:linear-gradient(100deg,#1769aa,#1b7c91);box-shadow:0 4px 0 #0c4d80}
.primary-button:disabled{box-shadow:none}
.status-card{padding:20px 22px;border-radius:14px;border-top:4px solid #f2bd42}
.status-top{font-size:14px}
.status-value{font-size:30px;color:#1769aa}
.status-sub{font-size:13px}
.progress-card,.progress-panel{font-size:15px}
.progress-label,.progress-percent{font-size:14px}
.outcome-card{padding:clamp(22px,3vw,34px);border-top:5px solid #f2bd42}
.outcome-card h3{font-size:clamp(28px,3vw,36px)}
.outcome-text{font-size:18px;line-height:1.75;color:#283c50}
.outcome-text p{margin-bottom:16px}
.decision-results{gap:14px}
.results-intro{font-size:20px!important}
.decision-result{border-radius:13px;padding:19px 21px;font-size:16px}
.decision-result-heading strong{font-size:16px}
.decision-result-label{font-size:12px}
.decision-result-score{font-size:27px}
.decision-result p{font-size:16px;line-height:1.6}
.decision-result-choice{font-size:15px;padding:12px 14px}
.quiz-area,.quiz-block{font-size:17px}
.quiz-area{padding:22px;border-radius:13px;background:linear-gradient(135deg,#fff8e5,#f2f8ff);border:2px solid #dce5f0}
.quiz-area h4,.quiz-block h4{font-size:20px;line-height:1.45}
.quiz-option{font-size:16px!important;padding:13px 15px!important;min-height:48px}
.quiz-option input{width:18px;height:18px}
.quiz-feedback{font-size:16px}
#continueButton{font-size:17px;padding:15px 22px}
.campaign-aside{border-radius:14px;overflow:hidden}
@media(max-width:760px){
 .shell{width:min(100% - 24px,620px);margin:18px auto 40px}
 .briefing{font-size:17px;line-height:1.7}
 .event-intro{grid-template-columns:minmax(0,1fr);gap:18px}
 .event-illustration img{height:220px}
 .choice-grid{grid-template-columns:1fr!important}
 .choice-button{min-height:0;font-size:16px}
 .outcome-text{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}


/* Campaign launch screen: dramatic, high-contrast and student-friendly */
.welcome-panel{position:relative;grid-template-columns:1.08fr .92fr;min-height:350px;border-radius:20px;background:linear-gradient(125deg,#0d2b4d 0%,#145c96 62%,#187c91 100%);box-shadow:0 18px 38px rgba(12,43,77,.22)}
.welcome-copy{position:relative;z-index:1;padding:clamp(28px,4vw,52px)}
.welcome-copy .eyebrow{display:inline-flex;background:#f2bd42;color:#573900;padding:8px 12px;border-radius:7px;letter-spacing:.12em;font-size:12px}
.welcome-copy h1{font-size:clamp(36px,4.5vw,54px);line-height:1.12;max-width:610px;text-shadow:0 2px 0 rgba(0,0,0,.08)}
.welcome-copy .lead{font-size:19px;line-height:1.65;color:#f0f6ff;max-width:580px;margin:22px 0}
.welcome-facts{gap:10px;margin-top:26px}
.welcome-facts span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.36);color:#fff;font-size:13px;font-weight:700;padding:8px 12px}
.welcome-image{position:relative;min-height:350px;filter:none;background:linear-gradient(90deg,rgba(13,43,77,.05),rgba(13,43,77,.03)),url('pics/clash.jpg') center/cover no-repeat}
.welcome-image:after{content:"1861–1865  •  ELEVEN DECISIONS  •  ONE DIVIDED NATION";position:absolute;left:18px;right:18px;bottom:18px;padding:12px 14px;border-radius:8px;background:rgba(10,36,63,.88);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-align:center}
.setup-card{border-top:5px solid #f2bd42}
.section-heading h2{font-size:clamp(30px,3.5vw,40px)}
.section-heading>p:not(.eyebrow){font-size:17px;line-height:1.65;color:#41566b}
.role-grid{gap:16px}
.role-card{border:2px solid #d6e2f0;border-radius:15px;padding:22px;background:linear-gradient(155deg,#fff 0%,#eef6ff 100%);text-align:left;box-shadow:0 5px 0 rgba(18,70,115,.05);transition:transform .16s,box-shadow .16s,border-color .16s}
.role-card:hover,.role-card:focus-visible{transform:translateY(-4px);border-color:#1769aa;box-shadow:0 12px 24px rgba(23,105,170,.16);outline:3px solid rgba(23,105,170,.16)}
.role-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#1769aa;color:white;font-size:22px;font-weight:900;box-shadow:0 4px 0 #0d4d80}
.role-confed .role-symbol{background:#c83d4d;box-shadow:0 4px 0 #8c2633}
.role-duel .role-symbol{background:#f2bd42;color:#3f2c00;box-shadow:0 4px 0 #c18a14}
.role-title{font-size:23px;font-weight:900;color:#102f54}
.role-leader{font-size:15px;font-weight:800;color:#526477}
.role-description{font-size:16px;line-height:1.55;color:#273b50}
.role-cta{font-size:15px;font-weight:900;color:#1769aa}
.event-card,.outcome-card{box-shadow:0 12px 30px rgba(22,55,90,.09)}
.outcome-card{animation:revealOutcome .55s cubic-bezier(.2,.8,.2,1) both}
.decision-result{animation:popDecision .42s ease-out both}
.decision-result:nth-child(2){animation-delay:.08s}
@keyframes revealOutcome{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes popDecision{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.outcome-card,.decision-result{animation:none!important}}
@media(max-width:760px){.welcome-panel{grid-template-columns:1fr}.welcome-image{min-height:220px}.welcome-copy h1{font-size:36px}.welcome-copy .lead{font-size:17px}.role-card{padding:18px}}


/* Compact gameplay header: keep the decision itself above the fold */
.game-view{margin-top:10px}
.campaign-topline{margin-bottom:9px;gap:10px}
.campaign-topline h2{font-size:clamp(21px,2.4vw,29px);line-height:1.15}
.campaign-topline .eyebrow{margin-bottom:3px;font-size:10px}
.campaign-topline .quiet-button{padding:7px 12px}
.progress-wrap{padding:10px 16px;margin-bottom:10px;border-radius:10px}
.progress-meta{font-size:12px;margin-bottom:7px}
.progress-track{height:5px}
.timeline{margin-top:8px;gap:4px}
.timeline span{height:4px}
.status-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px;align-items:stretch}
.status-card{padding:11px 15px;border-radius:11px;border-top-width:3px}
.status-top{font-size:12px;line-height:1.25}
.status-value{font-size:25px;line-height:1.05;margin:4px 0}
.status-sub{font-size:11px;line-height:1.3;margin-bottom:5px}
.status-sub:last-child{margin-bottom:0}
.campaign-aside{min-height:0;grid-template-columns:minmax(0,1.05fr) minmax(130px,.95fr);border-radius:11px}
.campaign-aside-image{min-height:125px}
.campaign-aside-caption{padding:12px;gap:5px}
.campaign-aside-caption .eyebrow{font-size:9px}
.campaign-aside-caption strong{font-size:clamp(15px,1.5vw,19px);line-height:1.25}
.campaign-aside-caption>span:last-child{font-size:11px}
.event-card{padding:clamp(20px,2.6vw,30px)}
.event-meta{margin-bottom:10px}
.event-card h3{font-size:clamp(29px,3.2vw,40px);line-height:1.12}
.event-intro{margin:14px 0 20px;gap:22px}
@media(max-width:760px){
 .game-view{margin-top:8px}
 .campaign-topline{margin-bottom:8px}
 .progress-wrap{padding:10px 12px;margin-bottom:8px}
 .status-grid{grid-template-columns:1fr;margin-bottom:8px}
 .status-card{padding:12px 14px}
 .campaign-aside{grid-template-columns:1fr 1fr}
 .campaign-aside-image{min-height:115px}
 .event-card{padding:20px}
 .event-intro{margin:12px 0 18px}
}

/* Decision comparison step: distinguish the player's choice from the historical one */
.decision-results .results-intro{margin-bottom:8px}
.decision-result-choice{margin-top:8px}
.decision-result-choice.historical-choice{background:#edf4ef;border-left:3px solid #47765c}
.decision-result-choice.historical-choice span{color:#35664a}
#proceedToHistory{margin-top:8px}
#proceedToHistory:focus-visible{outline:3px solid #d8b66d;outline-offset:3px}

/* Quiz flow: hide Continue until the required answer(s) have been submitted */
#continueButton.hidden{display:none!important}
#quizArea .submit-row .hidden{display:none!important}
#continueButton.continue-ready{background:linear-gradient(100deg,#218653,#279b69);box-shadow:0 4px 0 #14633b}
#continueButton.continue-ready:hover{background:linear-gradient(100deg,#176b42,#218653)}

/* Sound toggle */
#soundToggle{font-weight:800;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:8px 11px;background:rgba(255,255,255,.09)}
#soundToggle:hover{background:rgba(255,255,255,.18)}
#soundToggle:focus-visible{outline:3px solid #f2bd42;outline-offset:3px}


/* Single sticky campaign dashboard: all progress and scores, no map panel */
.sticky-campaign-bar{
  position:sticky;top:0;z-index:50;
  margin:0 0 16px;padding:10px 14px 9px;
  background:rgba(239,246,253,.97);
  border:1px solid #d2dfeb;border-top:3px solid #f2bd42;
  border-radius:0 0 14px 14px;
  box-shadow:0 8px 22px rgba(16,47,84,.13);
  backdrop-filter:blur(12px);
}
.sticky-campaign-bar .campaign-topline{margin:0 0 7px;align-items:center;gap:14px}
.sticky-campaign-bar .campaign-topline .eyebrow{font-size:9px;margin:0 0 1px}
.sticky-campaign-bar .campaign-topline h2{font-size:clamp(17px,1.8vw,23px);line-height:1.15;margin:0}
.sticky-campaign-bar .campaign-topline .quiet-button{font-size:13px;padding:6px 10px;white-space:nowrap}
.sticky-campaign-bar .progress-wrap{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.sticky-campaign-bar .progress-meta{font-size:11px;margin:0 0 5px}
.sticky-campaign-bar .progress-track{height:5px}
.sticky-campaign-bar .timeline{margin-top:5px;gap:4px}
.sticky-campaign-bar .timeline span{height:4px}
.sticky-campaign-bar .status-grid{display:flex;align-items:stretch;gap:8px;margin:8px 0 0}
.sticky-campaign-bar .status-card{
  display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:5px 10px;
  flex:1;min-width:0;padding:7px 11px;border:1px solid #d6e2ef;border-top:2px solid #1769aa;
  border-radius:8px;background:#fff;box-shadow:none
}
.sticky-campaign-bar .status-card .status-top{font-size:11px;line-height:1.15;white-space:nowrap}
.sticky-campaign-bar .status-card .status-top span:last-child{display:none}
.sticky-campaign-bar .status-card .status-value{font-size:19px;line-height:1;margin:0;color:#1769aa}
.sticky-campaign-bar .status-card .status-sub{font-size:10px;line-height:1.15;margin:0;white-space:nowrap}
.sticky-campaign-bar .campaign-mini{
  display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:130px;
  padding:7px 11px;border-radius:8px;background:#fff2ca;border:1px solid #f0d278;color:#59400b
}
.sticky-campaign-bar .campaign-mini strong{font-size:11px;line-height:1.2}
.sticky-campaign-bar .campaign-mini span{font-size:10px}
@media(max-width:760px){
 .sticky-campaign-bar{padding:8px 9px;margin-bottom:10px;border-radius:0 0 10px 10px}
 .sticky-campaign-bar .campaign-topline h2{font-size:16px}
 .sticky-campaign-bar .status-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .sticky-campaign-bar .status-card{grid-template-columns:auto auto;gap:5px 8px;padding:7px}
 .sticky-campaign-bar .status-card .status-top{font-size:10px;white-space:normal}
 .sticky-campaign-bar .status-card .status-value{font-size:17px}
 .sticky-campaign-bar .status-card .status-sub{font-size:9px;white-space:normal}
 .sticky-campaign-bar .campaign-mini{grid-column:1/-1;min-width:0;padding:6px 8px}
 .sticky-campaign-bar .campaign-mini strong{font-size:10px}
}


/* Slim persistent top bar: scores + existing resource controls only */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:18px;padding:9px clamp(14px,3vw,34px);min-height:64px}
.brand-mark{width:44px;height:44px;min-width:44px}
.header-score-strip{display:none;align-items:center;gap:8px;flex:1;min-width:0}
body:has(#gameView:not(.hidden)) .header-score-strip:not(:empty){display:flex}
.header-score-strip .status-card{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:5px 10px;border:1px solid rgba(255,255,255,.25);border-top:2px solid #f2bd42;border-radius:8px;background:rgba(255,255,255,.09);box-shadow:none;color:#fff}
.header-score-strip .metric-chip{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.header-score-strip .metric-label{font-size:11px;line-height:1.15;color:#e7f1fa}
.header-score-strip .status-value{font-size:18px;line-height:1;color:#fff;margin:0}
.header-score-strip .status-sub{font-size:10px;color:#d6e6f3;margin:0}
.header-links{gap:clamp(8px,1.5vw,20px);white-space:nowrap}
.header-links a,.header-links button{font-size:13px}
.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 10px}
.stage-heading .eyebrow{margin:0 0 3px;font-size:10px;letter-spacing:.12em}
.stage-heading h2{font-size:clamp(26px,3vw,38px);line-height:1.12;margin:0}
.stage-progress{padding:0;margin:0 0 22px;border:0;background:transparent;box-shadow:none}
.stage-progress .progress-meta{font-size:12px;margin-bottom:6px}
.stage-progress .progress-track{height:6px}
.stage-progress .timeline{margin-top:6px;gap:5px}
.stage-progress .timeline span{height:4px}
@media(max-width:980px){
 .site-header{flex-wrap:wrap;gap:8px;padding:8px 14px}
 .brand{flex:1}
 .header-score-strip{order:3;flex-basis:100%;width:100%}
 .header-links{gap:10px}
 .header-links a,.header-links button{font-size:12px}
}
@media(max-width:600px){
 .site-header{position:sticky}
 .brand strong{font-size:14px}
 .brand small{font-size:10px}
 .header-links{width:100%;justify-content:space-between;order:2}
 .header-score-strip{order:3;gap:5px}
 .header-score-strip .status-card{padding:5px 6px;gap:7px}
 .header-score-strip .metric-chip{flex-wrap:wrap;gap:3px}
 .header-score-strip .metric-label{font-size:9px;white-space:normal}
 .header-score-strip .status-value{font-size:16px}
 .header-score-strip .status-sub{display:none}
 .stage-heading h2{font-size:25px}
}

/* Replace the 1861 badge with the supplied ActiveHistory logo */
.site-header .brand-mark.brand-logo{
  display:block;
  flex:0 0 72px;
  width:72px;
  height:72px;
  min-width:72px;
  object-fit:contain;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
}
@media(max-width:600px){
  .site-header .brand-mark.brand-logo{flex-basis:56px;width:56px;height:56px;min-width:56px}
}


/* Simplified stage header: one title, one progress bar, no restart control */
.stage-heading{display:block;margin:0 0 12px}
.stage-heading h2{font-size:clamp(28px,3.5vw,44px);line-height:1.16;margin:0}
.stage-heading .eyebrow{margin-bottom:6px}
.stage-progress{padding:0;margin:0 0 20px;background:transparent;border:0;box-shadow:none}
.stage-progress .progress-meta{justify-content:flex-end;margin:0 0 6px;font-size:11px;color:var(--muted)}
.stage-progress .progress-track{height:6px}
.event-meta{margin-bottom:14px}


/* Adviser perspectives and primary-source challenges */
.adviser-panel,.source-challenge{margin:1.1rem 0 1.35rem;padding:1.1rem;border:1px solid var(--border, #d8e1ec);border-radius:16px;background:var(--surface-soft, #f5f8fc)}
.adviser-panel-heading h3,.source-challenge h3{margin:.15rem 0 .5rem}
.adviser-note,.source-attribution{font-size:.9rem;opacity:.82}
.adviser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:.8rem 0}
.adviser-card{padding:1rem;border-radius:12px;background:var(--card, #fff);border:1px solid var(--border, #d8e1ec)}
.adviser-card h4{margin:.15rem 0 .45rem}.adviser-card p:last-child{margin-bottom:0}
.adviser-role{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:750;opacity:.75;margin:0}
.adviser-prompt{font-weight:700;margin:.7rem 0 0}
.source-extract{margin:.7rem 0;padding:1rem 1.1rem;border-left:4px solid var(--accent, #c18b32);background:var(--card, #fff);font-family:Georgia,serif;font-size:1.15rem;line-height:1.5}
.source-attribution{margin:.3rem 0 1rem;font-style:italic}
.source-options{display:grid;gap:.55rem;margin:.8rem 0}
.source-option{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;border:1px solid var(--border, #d8e1ec);border-radius:10px;background:var(--card, #fff);cursor:pointer}
.source-option input{margin-top:.3rem;flex:0 0 auto}.source-feedback{margin-top:.8rem;padding:.8rem;border-radius:10px}.source-feedback p{margin:.4rem 0 0}
.source-feedback.correct{background:#e7f6eb;color:#185b31}.source-feedback.incorrect{background:#fff3dc;color:#704b00}
@media(max-width:600px){.adviser-panel,.source-challenge{padding:.85rem}.source-extract{font-size:1.05rem}}
/* Prevent sections being hidden behind the sticky header */
#gameView,
#decisionArea,
#outcomeCard,
#results {
    scroll-margin-top: 110px;
}
.source-option:has(input:checked),
.quiz-option:has(input:checked) {
    background: #dbeafe;
    border-color: #2563eb;
    color: #1e40af;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}