/* ============================================================
   MANDATE · MANDAT — bilingual civics game, grades 1–8
   Design: warm parchment × walnut × Canada red × brass gold.
   Rules: 44px+ targets, 4.5:1 contrast, reduced-motion safe.
   ============================================================ */
:root{
  --paper:#f7f0e1; --paper2:#efe5cf; --cream:#fbf7ec;
  --walnut:#4a2e1c; --walnut2:#6b4326; --panel-line:#c9b68d;
  --ink:#2b2015; --muted:#6d5b41; --faint:#9c8a6c;
  --red:#c8102e; --red-dark:#a20d24; --gold:#b98a2e; --gold-bright:#d9a93f;
  --navy:#1f3a5f; --green:#2f7d4f; --sky:#cfe3ee;
  --good:#2f7d4f; --bad:#b3261e;
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 10px 30px rgba(43,32,21,.18);
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  background-image:radial-gradient(1200px 600px at 50% -10%, #fff8e9 0%, transparent 60%),
                   repeating-linear-gradient(0deg, transparent 0 34px, rgba(74,46,28,.028) 34px 35px);
  color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
}
button{font-family:inherit; cursor:pointer}
.hidden{display:none !important}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:99; border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--navy); outline-offset:2px; border-radius:6px}

/* ============ TOP BAR ============ */
#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 22px;
  background:linear-gradient(180deg, #5a3a22, #4a2e1c);
  border-bottom:3px solid var(--gold);
  box-shadow:0 4px 18px rgba(43,32,21,.25);
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:12px; border:none; background:none; color:#fff; cursor:pointer; padding:4px 8px; border-radius:12px}
.brand:hover{background:rgba(255,255,255,.08)}
.brand-leaf{font-size:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.brand-word{display:flex; flex-direction:column; text-align:left}
.brand-word b{font-family:var(--serif); font-size:22px; letter-spacing:3px; color:#f7ead0}
.brand-word i{font-style:normal; font-size:11.5px; color:#d8c39a; letter-spacing:.4px}

.top-center{display:flex; align-items:center; gap:18px}
.pm-chip{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.10);
  border:1px solid rgba(217,169,63,.55); border-radius:40px; padding:7px 16px 7px 10px; color:#fff;
}
.pm-chip:hover{background:rgba(255,255,255,.16); cursor:pointer}
.pm-face{font-size:24px; background:var(--paper); border-radius:50%; width:38px; height:38px; display:grid; place-items:center}
.pm-name{font-weight:700; font-size:16px; color:#fbf3df}
.pm-title{font-size:11.5px; color:#d8c39a; text-transform:uppercase; letter-spacing:1.2px}
.stars{display:flex; gap:3px; font-size:20px; min-width:110px}
.stars .on{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.stars .off{opacity:.28; filter:grayscale(1)}

/* THE toggle */
.lang-toggle{
  display:flex; align-items:center; gap:10px; background:#3a2313;
  border:2px solid var(--gold); border-radius:50px; padding:6px 10px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.25);
}
.lang-opt{
  display:flex; flex-direction:column; align-items:center; min-width:74px; min-height:48px;
  border:none; border-radius:40px; padding:6px 16px; background:transparent;
  color:#cdb27f; font-weight:800; font-size:18px; letter-spacing:1px; transition:all .2s;
}
.lang-opt span{font-size:10.5px; font-weight:600; letter-spacing:.4px; opacity:.85}
.lang-opt.active{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#2b2015; box-shadow:0 2px 8px rgba(0,0,0,.35)}
.lang-opt:not(.active):hover{background:rgba(217,169,63,.18); color:#f2e2bb}
.lang-flip{color:var(--gold-bright); font-size:18px}

/* ============ WELCOME ============ */
.scene-cover{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(217,169,63,.20), transparent 65%),
    linear-gradient(180deg, #3a2313 0%, #2a180c 100%);
}
.welcome-card{
  width:min(620px, 92vw); background:var(--cream); border:2px solid var(--gold);
  border-radius:26px; padding:40px 44px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.welcome-crest{font-size:52px; margin-bottom:6px}
.welcome-title{font-family:var(--serif); font-size:34px; margin:0 0 10px; color:var(--walnut)}
.welcome-p{color:var(--muted); font-size:19px; margin:0 auto 22px; max-width:46ch}
.welcome-form{display:flex; flex-direction:column; gap:12px; align-items:center}
.welcome-form label{font-weight:700; color:var(--walnut); font-size:15px; letter-spacing:.6px; text-transform:uppercase}
#nameInput{
  width:min(340px, 80%); text-align:center; font-size:26px; font-family:var(--serif);
  padding:12px 18px; border:2px solid var(--panel-line); border-radius:14px; background:#fff; color:var(--ink);
}
#nameInput:focus{border-color:var(--gold)}
.welcome-note{margin-top:18px; font-size:14px; color:var(--faint)}

/* buttons */
.btn-big{
  font-size:20px; font-weight:800; padding:16px 34px; min-height:56px; border-radius:16px;
  border:none; box-shadow:0 6px 0 rgba(0,0,0,.22), var(--shadow); transition:transform .12s, box-shadow .12s;
}
.btn-big:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.22)}
.btn-red{background:linear-gradient(180deg, #e0304e, var(--red)); color:#fff}
.btn-red:hover{filter:brightness(1.06)}
.btn-gold{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#2b2015}
.btn-navy{background:linear-gradient(180deg, #2d517f, var(--navy)); color:#fff}
.btn-plain{background:#fff; border:2px solid var(--panel-line); color:var(--ink); font-weight:700}
.btn-med{font-size:17px; font-weight:800; padding:11px 22px; min-height:48px; border-radius:13px; border:none;
  box-shadow:0 4px 0 rgba(0,0,0,.18); transition:transform .12s}
.btn-med:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18)}

/* ============ MAIN / VIEWS ============ */
#main{flex:1; display:flex; flex-direction:column; min-height:0}
.view{flex:1; animation:viewin .35s ease}
@keyframes viewin{from{opacity:0; transform:translateY(8px)} to{opacity:1}}

/* office hub */
#office{position:relative; display:flex; flex-direction:column}
#officeScene{flex:1; display:flex; justify-content:center; align-items:center; padding:8px 16px 4px; min-height:0}
#officeScene svg{width:min(1220px, 96vw); height:auto; max-height:calc(100vh - 210px); border-radius:22px; box-shadow:var(--shadow)}
.office-title{text-align:center; padding:6px 0 14px}
.office-title h2{font-family:var(--serif); font-size:26px; margin:0; color:var(--walnut)}
.office-title p{margin:2px 0 0; color:var(--muted); font-size:15.5px}
.office-meta{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:10px}
.status-pill{display:inline-flex; align-items:center; gap:6px; background:rgba(74,46,28,.08); color:var(--walnut); border:1px solid rgba(185,138,46,.55); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:700}
.status-note{display:inline-flex; align-items:center; background:#fff; border:1px solid var(--panel-line); border-radius:999px; padding:7px 14px; color:var(--muted); font-size:13.5px; box-shadow:0 3px 12px rgba(43,32,21,.08)}
.status-tags, .mod-focus{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:6px}
.mini-tag{
  display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(185,138,46,.6); background:linear-gradient(180deg, rgba(217,169,63,.12), rgba(217,169,63,.04));
  color:var(--walnut); font-size:12px; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
}

/* glowing dots inside SVG */
.dot{cursor:pointer}
.dot .dot-ring{transform-origin:center; animation:dotpulse 2s infinite}
.dot:hover .dot-core, .dot:focus .dot-core{fill:#ffd76e}
.dot .dot-label{opacity:0; transition:opacity .2s; pointer-events:none}
.dot:hover .dot-label, .dot:focus .dot-label{opacity:1}
.dot.locked{cursor:not-allowed}
@keyframes dotpulse{0%{opacity:.85; transform:scale(.6)} 70%{opacity:0; transform:scale(1.7)} 100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .dot .dot-ring{animation:none; opacity:.5}
  .view{animation:none}
}

/* ============ MODULE FRAME ============ */
.mod-head{
  display:flex; align-items:center; gap:16px; padding:14px 26px;
  background:linear-gradient(180deg, #fff, var(--cream)); border-bottom:2px solid var(--panel-line);
}
.mod-back{
  display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800;
  background:#fff; border:2px solid var(--panel-line); border-radius:13px; padding:10px 18px; min-height:48px; color:var(--walnut);
}
.mod-back:hover{border-color:var(--gold)}
.mod-titles h2{font-family:var(--serif); font-size:27px; margin:0; color:var(--walnut)}
.mod-titles p{margin:0; color:var(--muted); font-size:15px}
.mod-focus{padding:10px 26px 0; justify-content:flex-start; border-bottom:1px solid rgba(201,182,141,.7)}
.mod-tabs{margin-left:auto; display:flex; gap:8px}
.mod-tab{
  font-size:16px; font-weight:800; padding:10px 20px; min-height:48px; border-radius:13px;
  border:2px solid var(--panel-line); background:#fff; color:var(--muted);
}
.mod-tab.active{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#2b2015; border-color:var(--gold)}
.mod-body{padding:20px 26px 30px; max-width:1240px; margin:0 auto; width:100%}

/* ============ CONFEDERATION ============ */
.confed-wrap{display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:start}
@media(max-width:980px){.confed-wrap{grid-template-columns:1fr}}
.map-card{background:#fff; border:2px solid var(--panel-line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.map-card svg{width:100%; height:auto; display:block}
.prov{cursor:pointer; transition:opacity .3s}
.prov path, .prov polygon{stroke:#fff; stroke-width:2; transition:fill .4s, opacity .4s}
.prov.future path, .prov.future polygon{fill:#ddd2b8 !important; opacity:.5}
.prov.joined.pop path, .prov.joined.pop polygon{animation:provpop .5s ease}
@keyframes provpop{0%{opacity:0} 50%{opacity:1} 100%{opacity:1}}
.prov:hover path, .prov:hover polygon{filter:brightness(1.12)}
.prov.selected path, .prov.selected polygon{stroke:var(--ink); stroke-width:3}
.prov-label{font-family:var(--sans); font-size:13px; font-weight:800; fill:#fff; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.4)}
.prov.future .prov-label{fill:#a89a7c}

/* timeline scrubber */
.timeline{margin-top:14px; padding:6px 4px 2px}
.tl-track{position:relative; height:64px}
.tl-rail{position:absolute; left:0; right:0; top:30px; height:6px; background:var(--paper2); border-radius:4px}
.tl-fill{position:absolute; left:0; top:30px; height:6px; background:linear-gradient(90deg, var(--red), var(--gold)); border-radius:4px; transition:width .3s}
.tl-stop{
  position:absolute; top:22px; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--panel-line); transform:translateX(-50%); padding:0;
}
.tl-stop.hit{border-color:var(--red); background:var(--red)}
.tl-stop:hover{border-color:var(--gold)}
.tl-stop .tl-year{position:absolute; top:26px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:800; color:var(--muted); white-space:nowrap}
.tl-stop:nth-child(even) .tl-year{top:-22px}
.tl-controls{display:flex; align-items:center; gap:12px; margin-top:8px}
.tl-year-big{font-family:var(--serif); font-size:44px; font-weight:700; color:var(--walnut); min-width:130px; text-align:center; font-variant-numeric:tabular-nums}
.tl-count{font-size:15px; color:var(--muted)}

/* province fact card */
.fact-card{background:#fff; border:2px solid var(--panel-line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.fact-head{padding:18px 22px 14px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px}
.fact-head h3{font-family:var(--serif); font-size:26px; margin:0}
.fact-head .fact-abbr{font-size:15px; font-weight:900; background:rgba(255,255,255,.25); padding:4px 12px; border-radius:20px}
.fact-body{padding:16px 22px 20px}
.fact-row{display:flex; gap:10px; margin-bottom:10px; font-size:16.5px}
.fact-row b{min-width:120px; color:var(--muted); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.5px; padding-top:2px}
.fact-story{background:var(--cream); border:1.5px solid var(--panel-line); border-radius:14px; padding:14px 16px; font-size:17px; line-height:1.6; margin-top:6px}
.speak-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:15px; font-weight:800; background:#fff; border:2px solid var(--panel-line);
  border-radius:40px; padding:9px 18px; min-height:44px; color:var(--walnut);
}
.speak-btn:hover{border-color:var(--gold)}
.speak-btn.speaking{background:var(--gold-bright); border-color:var(--gold)}
.fact-empty{padding:40px 24px; text-align:center; color:var(--muted); font-size:17px}
.fact-empty .big{font-size:44px; display:block; margin-bottom:8px}

/* ============ GAMES shared ============ */
.game-stage{background:#fff; border:2px solid var(--panel-line); border-radius:var(--r); box-shadow:var(--shadow); padding:24px; max-width:900px; margin:0 auto}
.game-title{font-family:var(--serif); font-size:24px; color:var(--walnut); margin:0 0 4px; text-align:center}
.game-sub{text-align:center; color:var(--muted); margin:0 0 18px; font-size:16px}
.game-hud{display:flex; justify-content:center; gap:22px; margin-bottom:16px; font-weight:800; font-size:17px}
.game-hud .lives{color:var(--red)}
.game-hud .score{color:var(--green)}
.chip-pool{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0 20px; min-height:64px}
.chip{
  font-size:17px; font-weight:800; padding:12px 20px; min-height:52px; border-radius:14px;
  border:2.5px solid var(--panel-line); background:var(--cream); color:var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.12);
}
.chip:hover{border-color:var(--gold); transform:translateY(-2px)}
.chip:disabled{opacity:.35; cursor:default; transform:none}
.chip.correct-flash{background:#d9efe1; border-color:var(--good)}
.chip.wrong-flash{background:#f8dcd9; border-color:var(--bad); animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.slot-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.slot{
  min-width:150px; min-height:70px; border:2.5px dashed var(--panel-line); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 12px; background:var(--paper);
}
.slot .slot-year{font-weight:900; color:var(--muted); font-size:15px}
.slot .slot-got{font-weight:800; color:var(--walnut); font-size:16px}
.slot.filled{border-style:solid; border-color:var(--good); background:#eaf5ee}
.game-msg{text-align:center; font-size:18px; font-weight:700; min-height:30px; margin:12px 0 4px}
.game-msg.good{color:var(--good)} .game-msg.bad{color:var(--bad)}
.game-end{text-align:center; padding:20px 0 6px}
.game-end .medal{font-size:64px}
.game-end h3{font-family:var(--serif); font-size:28px; color:var(--walnut); margin:8px 0 4px}
.game-end p{color:var(--muted); margin:0 0 18px}

/* quiz */
.quiz-q{font-family:var(--serif); font-size:24px; color:var(--walnut); text-align:center; margin:6px 0 20px; line-height:1.4}
.quiz-opts{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:720px; margin:0 auto}
@media(max-width:700px){.quiz-opts{grid-template-columns:1fr}}
.quiz-opt{
  font-size:18px; font-weight:700; padding:16px 18px; min-height:64px; border-radius:16px;
  border:2.5px solid var(--panel-line); background:#fff; color:var(--ink); text-align:center;
}
.quiz-opt:hover{border-color:var(--gold); background:var(--cream)}
.quiz-opt.right{background:#d9efe1; border-color:var(--good)}
.quiz-opt.wrong{background:#f8dcd9; border-color:var(--bad)}
.quiz-opt:disabled{cursor:default}
.quiz-progress{display:flex; gap:6px; justify-content:center; margin-bottom:16px}
.quiz-progress i{width:26px; height:8px; border-radius:5px; background:var(--paper2)}
.quiz-progress i.done-good{background:var(--good)}
.quiz-progress i.done-bad{background:var(--bad)}
.quiz-progress i.now{background:var(--gold)}
.quiz-explain{max-width:680px; margin:14px auto 0; background:var(--cream); border:1.5px solid var(--panel-line); border-radius:14px; padding:12px 16px; font-size:16px}

/* law game steps */
.law-visual{display:flex; justify-content:center; gap:14px; margin:10px 0 18px; font-size:36px}
.law-visual .stage-ic{opacity:.3; transition:all .3s; text-align:center}
.law-visual .stage-ic.lit{opacity:1; transform:scale(1.15)}
.law-visual .stage-ic small{display:block; font-size:11px; font-weight:800; color:var(--muted)}

/* ============ NEWSPAPER ============ */
.paper-wrap{max-width:1000px; margin:0 auto; background:#fdfaf2; border:2px solid var(--panel-line); border-radius:6px; box-shadow:var(--shadow); padding:30px 38px}
.paper-mast{text-align:center; border-bottom:3.5px double var(--ink); padding-bottom:14px; margin-bottom:6px}
.paper-mast h2{font-family:var(--serif); font-size:44px; margin:0; letter-spacing:1px; color:var(--ink)}
.paper-mast .paper-date{font-size:13.5px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-top:4px}
.paper-cols{columns:2; column-gap:34px; column-rule:1px solid var(--panel-line); padding-top:16px}
@media(max-width:800px){.paper-cols{columns:1}}
.story{break-inside:avoid; margin-bottom:22px; cursor:pointer; border-radius:10px; padding:8px}
.story:hover{background:#f4eeda}
.story h3{font-family:var(--serif); font-size:23px; margin:0 0 6px; color:var(--ink); line-height:1.25}
.story .story-kicker{font-size:12px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; color:var(--red)}
.story p{margin:4px 0 0; font-size:15.5px; color:#463a28}
.story .story-more{font-size:14px; font-weight:800; color:var(--navy)}
.story-art{font-size:40px; float:right; margin:0 0 4px 10px}

/* story reader modal content */
.reader h3{font-family:var(--serif); font-size:30px; margin:4px 0 4px; color:var(--walnut)}
.reader .story-kicker{font-size:12.5px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; color:var(--red)}
.reader p{font-size:18px; line-height:1.65}
.reader .word-chip{background:var(--cream); border:1.5px solid var(--panel-line); border-radius:14px; padding:14px 16px; margin-top:14px}
.reader .word-chip b{color:var(--navy)}
.reader .why{border-left:4px solid var(--gold); padding:4px 0 4px 14px; color:var(--muted); font-size:16.5px; margin-top:10px}

/* ============ MODAL ============ */
#modalWrap{position:fixed; inset:0; z-index:70; background:rgba(43,32,21,.55); display:grid; place-items:center; padding:20px}
.modal{
  width:min(760px, 94vw); max-height:88vh; overflow:auto; background:var(--cream);
  border:2px solid var(--gold); border-radius:22px; padding:30px 34px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.modal-close{
  position:absolute; top:14px; right:14px; width:46px; height:46px; border-radius:50%;
  border:2px solid var(--panel-line); background:#fff; font-size:18px; font-weight:900; color:var(--walnut);
}
.modal-close:hover{border-color:var(--red); color:var(--red)}
.modal h2{font-family:var(--serif); color:var(--walnut); margin-top:0}
.modal .src-list{list-style:none; padding:0}
.modal .src-list li{padding:10px 0; border-bottom:1px solid var(--panel-line); font-size:16px}
.modal .src-list a{color:var(--navy); font-weight:700}

/* ============ FOOTER ============ */
#foot{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:10px 20px 14px; font-size:14px; color:var(--faint);
}
.foot-link{background:none; border:none; color:var(--navy); font-size:14px; font-weight:700; text-decoration:underline; padding:6px}
.foot-dot{opacity:.5}
.foot-plain{font-size:13.5px}

/* ============ TOASTS & CONFETTI ============ */
#toasts{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
  background:var(--walnut); color:#f7ead0; font-weight:700; font-size:16px;
  padding:12px 22px; border-radius:40px; border:1.5px solid var(--gold); box-shadow:var(--shadow);
  animation:toastin .3s ease;
}
@keyframes toastin{from{opacity:0; transform:translateY(12px)} to{opacity:1}}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:75; overflow:hidden}
.confetti-bit{position:absolute; top:-20px; font-size:22px; animation:confall linear forwards}
@keyframes confall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion: reduce){
  .confetti-bit{display:none}
  .chip.wrong-flash{animation:none}
}

/* FR: slightly longer strings need room */
body[data-lang="fr"] .brand-word b{letter-spacing:2px}
body[data-lang="fr"] .quiz-opt{font-size:17px}

@media(max-width:760px){
  #topbar{flex-wrap:wrap; justify-content:center}
  .top-center{order:3}
  body{font-size:17px}
}

/* ============ EXPLORE: Atlas / Peoples / People ============ */
.bigfact{
  background:var(--cream); border:2px solid var(--panel-line); border-radius:20px;
  padding:26px 30px; margin:10px auto 18px; max-width:560px; box-shadow:var(--shadow);
}
.bigfact-icon{font-size:56px; margin-bottom:6px}
.bigfact-text{font-family:var(--serif); font-size:22px; line-height:1.5; color:var(--walnut); margin:0}
.row-center{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px}
.place-card, .person-card{
  background:#fff; border:2px solid var(--panel-line); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--shadow); position:relative; cursor:pointer;
  transition:transform .15s, border-color .15s;
}
.place-card:hover, .person-card:hover{transform:translateY(-3px); border-color:var(--gold)}
.place-card.pc-read{border-color:var(--good)}
.pc-icon{font-size:40px; margin-bottom:4px}
.place-card h4, .person-card h4{font-family:var(--serif); font-size:20px; margin:0 0 4px; color:var(--walnut)}
.pc-where{display:inline-block; font-size:13px; font-weight:800; color:var(--navy);
  background:var(--paper2); border-radius:20px; padding:3px 12px; margin-bottom:8px}
.pc-role{font-size:13.5px; font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px}
.place-card p, .person-card p{margin:4px 0 8px; font-size:15.5px; line-height:1.55; color:#463a28}
.pc-speak{padding:7px 14px; min-height:40px}

.peoples-sec{background:var(--cream); border:1.5px solid var(--panel-line); border-radius:16px;
  padding:16px 20px; margin-bottom:14px}
.peoples-sec .ps-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.peoples-sec .ps-icon{font-size:30px}
.peoples-sec h3{font-family:var(--serif); font-size:20px; color:var(--walnut); margin:0; flex:1}
.peoples-sec p{margin:0; font-size:16.5px; line-height:1.6}

/* ============ SCHOOL BRANDING ============ */
#brandChip{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(217,169,63,.4); border-radius:14px; padding:6px 14px}
.brand-emblem{font-size:24px}
.brand-emblem-img{width:30px; height:30px; object-fit:contain; border-radius:6px; background:#fff; padding:2px}
.brand-school{display:flex; flex-direction:column; line-height:1.25}
.brand-school b{color:#f7ead0; font-size:13.5px}
.brand-school i{font-style:normal; color:#cdb27f; font-size:11px}
.brand-welcome{background:var(--paper2); border:1.5px solid var(--panel-line); border-radius:14px;
  padding:12px 16px; font-size:15.5px; color:var(--walnut); margin:0 0 20px}
.brand-welcome .brand-ack{display:block; font-size:13.5px; color:var(--muted); margin-top:6px; font-style:italic}
@media(max-width:1100px){#brandChip .brand-school i{display:none}}

/* ============ 3D OFFICE ============ */
#officeScene.is3d{display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 16px 4px}
#o3dWrap{
  position:relative; width:min(1220px, 96vw); height:calc(100vh - 268px); min-height:340px;
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow); background:#2a180c;
}
#o3dWrap canvas{display:block; width:100%; height:100%}
#o3dTip{
  position:absolute; transform:translate(-50%,-100%); pointer-events:none; opacity:0;
  transition:opacity .15s; background:#2b2015; color:#f7ead0; border:1.5px solid var(--gold);
  border-radius:12px; padding:8px 14px; text-align:center; max-width:220px; z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
#o3dTip b{display:block; font-size:15px}
#o3dTip span{display:block; font-size:12px; color:#cdb27f; margin-top:2px}
#stationBar{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:min(1220px,96vw)}
.station-chip{
  display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px;
  background:#fff; border:2px solid var(--panel-line); border-radius:30px;
  font-size:14px; font-weight:800; color:var(--walnut); transition:all .15s;
}
.station-chip i{font-style:normal; color:var(--gold); font-size:15px}
.station-chip:hover{border-color:var(--gold); transform:translateY(-2px)}
.station-chip.locked{opacity:.55}
.station-chip.locked i{color:var(--faint)}
@media(max-width:900px){#o3dWrap{height:52vw; min-height:300px}}

/* ============ CITIZENSHIP CHALLENGE ============ */
#citBtn{
  display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 16px;
  background:linear-gradient(180deg, #7d2231, #63182a); border:2px solid var(--gold);
  border-radius:40px; color:#f7ead0; font-weight:800; font-size:14.5px; transition:all .15s;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
#citBtn:hover{transform:translateY(-2px); filter:brightness(1.12)}
#citBtn i{font-style:normal; font-size:18px}
#citBtn b{background:var(--gold); color:#2b2015; border-radius:20px; padding:2px 9px; font-size:12.5px}
@media(max-width:1150px){#citBtn span{display:none}}

.cit-hero{text-align:center; background:var(--cream); border:2px solid var(--panel-line);
  border-radius:18px; padding:20px 22px 16px; margin-bottom:16px}
.cit-crest{font-size:44px}
.cit-hero h3{font-family:var(--serif); font-size:23px; color:var(--walnut); margin:6px 0 14px}
.cit-stats{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.cit-stats > div{background:#fff; border:1.5px solid var(--panel-line); border-radius:14px;
  padding:10px 18px; min-width:120px}
.cit-stats b{display:block; font-family:var(--serif); font-size:24px; color:var(--red)}
.cit-stats span{font-size:12.5px; color:var(--muted)}

.cit-progress{height:10px; background:var(--paper2); border-radius:8px; overflow:hidden; margin-bottom:10px}
.cit-progress i{display:block; height:100%; background:linear-gradient(90deg, var(--red), var(--gold-bright)); transition:width .3s}
.cit-meta{display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:14px; color:var(--muted); margin-bottom:8px; flex-wrap:wrap}
.cit-tier{font-weight:800; border-radius:20px; padding:3px 12px; font-size:12.5px}
.cit-tier.core{background:#e7f0e5; color:var(--green)}
.cit-tier.deep{background:#f4e6ee; color:#8f2d62}
.cit-why{background:var(--paper2); border-left:5px solid var(--gold); border-radius:0 12px 12px 0;
  padding:12px 16px; margin:12px 0; font-size:15.5px; line-height:1.55; color:var(--walnut)}

.cit-analysis, .cit-meaning{background:#fff; border:2px solid var(--panel-line); border-radius:18px;
  padding:18px 22px; margin:14px 0}
.cit-analysis h4, .cit-meaning h4{font-family:var(--serif); font-size:19px; color:var(--walnut); margin:0 0 12px}
.cit-bar{display:grid; grid-template-columns:220px 1fr 56px; gap:12px; align-items:center; margin-bottom:9px}
.cb-label{font-size:14px; color:var(--muted); text-align:right}
.cb-track{height:16px; background:var(--paper2); border-radius:10px; overflow:hidden}
.cb-track i{display:block; height:100%; border-radius:10px}
.cb-track i.good{background:var(--green)} .cb-track i.bad{background:var(--bad)}
.cb-track i.mid{background:var(--gold-bright)} .cb-track i.line{background:var(--navy)}
.cb-val{font-family:var(--serif); font-size:15px}
.cit-tierbox{display:flex; gap:18px; flex-wrap:wrap; background:var(--paper2); border-radius:12px;
  padding:12px 16px; margin-top:12px; font-size:15px}
.cit-dim{color:var(--faint); font-size:13px}
.cit-note{margin:12px 0 0; font-size:15.5px; line-height:1.55; color:var(--walnut); font-style:italic}
.cit-meaning p{margin:0; font-size:16px; line-height:1.6}
@media(max-width:760px){.cit-bar{grid-template-columns:1fr; gap:4px} .cb-label{text-align:left}}

/* certificate */
.cert{display:grid; place-items:center; margin:18px 0 10px}
.cert-inner{
  width:min(640px, 94%); background:var(--cream); border:3px solid var(--gold);
  outline:2px solid var(--panel-line); outline-offset:6px; border-radius:6px;
  text-align:center; padding:30px 34px; box-shadow:var(--shadow);
}
.cert-crest{font-size:40px}
.cert-title{font-family:var(--serif); font-size:26px; letter-spacing:2px; color:var(--walnut); text-transform:uppercase; margin:6px 0 14px}
.cert-line{font-size:15px; color:var(--muted); margin:4px 0}
.cert-name{font-family:var(--serif); font-size:34px; color:var(--red); margin:8px 0; border-bottom:2px solid var(--panel-line); display:inline-block; padding:0 26px 6px}
.cert-date{font-size:14px; color:var(--walnut); margin-top:12px; font-weight:700}
.cert-foot{font-size:11.5px; color:var(--faint); margin-top:14px}
@media print{
  body.print-cert *{visibility:hidden}
  body.print-cert #certCard, body.print-cert #certCard *{visibility:visible}
  body.print-cert #certCard{position:fixed; inset:0; display:grid; place-items:center; margin:0}
}

/* ============ HIGGSFIELD HERO ON WELCOME ============ */
.scene-cover{
  background:
    linear-gradient(rgba(42,24,12,.5), rgba(42,24,12,.74)),
    url("../assets/hero.png") center/cover no-repeat,
    #2a180c;
}
#btnTrailer{margin-top:2px}