:root{
  --ink:#19324a;
  --muted:#61758a;
  --surface:#ffffff;
  --surface-2:#f4f8fb;
  --line:#d8e4ee;
  --blue:#0f7cc2;
  --blue-deep:#075d99;
  --green:#2e9b57;
  --orange:#ef8d23;
  --red:#d84c4c;
  --purple:#7b5ed7;
  --shadow:0 18px 55px rgba(14,55,88,.20);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-rounded,"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#eaf5fb;min-width:320px}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:4px solid rgba(15,124,194,.28);outline-offset:2px}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,3vw,32px);background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.brand-mini{display:flex;align-items:center;gap:10px;min-width:0}.brand-mini strong{display:block;font-size:clamp(.92rem,1.8vw,1.08rem)}.brand-mini span{display:block;font-size:.78rem;color:var(--muted)}
.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(145deg,var(--blue),#39a8df);box-shadow:0 6px 16px rgba(15,124,194,.22)}
.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.hud-pill{height:42px;padding:0 12px;display:flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px}.hud-pill b{font-size:1rem}.hud-pill small{color:var(--muted)}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:white;color:var(--ink);font-weight:900}.icon-btn:hover{background:var(--surface-2)}
main{flex:1}.map-section{padding:clamp(12px,2vw,24px)}.map-stage-wrap{max-width:1440px;margin:0 auto}.map-stage{position:relative;aspect-ratio:1408/768;border-radius:26px;overflow:hidden;background:#9eddf1;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.75)}
.map-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.map-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,49,77,.10),transparent 28%,transparent 72%,rgba(4,49,77,.10))}
.map-title-card{position:absolute;left:50%;top:2.4%;transform:translateX(-50%);z-index:3;text-align:center;padding:10px 18px 12px;background:rgba(255,255,255,.92);border:3px solid rgba(255,255,255,.7);border-radius:20px;box-shadow:0 8px 24px rgba(14,55,88,.18);min-width:min(440px,56%)}
.map-title-card .eyebrow{font-size:.65rem}.map-title-card h1{margin:1px 0 0;font-size:clamp(1.1rem,2.6vw,2rem);line-height:1.02;color:#0d5d97}.map-title-card p{margin:3px 0 0;font-weight:800;font-size:clamp(.72rem,1.4vw,1rem);color:#ef7f1b}
.eyebrow{display:block;font-size:.72rem;font-weight:900;letter-spacing:.12em;color:var(--blue-deep)}
.mission-card{position:absolute;z-index:4;left:1.2%;top:16%;width:min(250px,22%);background:rgba(255,255,255,.95);border-radius:18px;border:2px solid white;box-shadow:0 10px 28px rgba(14,55,88,.19);padding:12px}.mission-card-head{display:flex;align-items:center;gap:8px;font-size:clamp(.72rem,1.5vw,1rem);margin-bottom:8px}.mission-card ol{margin:0;padding-left:22px;font-size:clamp(.62rem,1.1vw,.84rem);line-height:1.25}.mission-card li+li{margin-top:5px}.mission-card li.done{text-decoration:line-through;color:var(--green)}.progress-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.67rem;color:var(--muted);margin-top:10px}.progress-track,.mini-track{height:8px;background:#e5eef5;border-radius:99px;overflow:hidden}.progress-track span,.mini-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#66c879);border-radius:inherit;transition:width .35s ease}
.hotspot{--x:50%;--y:50%;position:absolute;z-index:5;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink)}
.hotspot-dot{width:clamp(34px,4.2vw,58px);height:clamp(34px,4.2vw,58px);display:grid;place-items:center;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 6px 18px rgba(8,68,105,.26);font-size:clamp(1rem,2.1vw,1.8rem);transition:transform .2s ease,filter .2s ease}.hotspot .hotspot-dot{animation:pulse 2.2s ease-in-out infinite}.hotspot-label{font-size:clamp(.55rem,1vw,.8rem);font-weight:900;background:rgba(255,255,255,.95);padding:4px 8px;border-radius:999px;box-shadow:0 3px 12px rgba(14,55,88,.15);white-space:nowrap}
.hotspot .lock{display:none;position:absolute;right:-7px;top:-7px;width:23px;height:23px;border-radius:50%;background:#334a5e;color:#fff;font-size:11px;place-items:center;border:2px solid #fff}.hotspot.locked{filter:grayscale(.85);opacity:.78}.hotspot.locked .lock{display:grid}.hotspot.locked .hotspot-dot{animation:none;border-color:#6f7f8c}.hotspot.completed .hotspot-dot{border-color:var(--green);background:#edfff3}.hotspot.completed::after{content:"✓";position:absolute;right:-7px;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;display:grid;place-items:center;border:2px solid white}.hotspot:hover:not(.locked) .hotspot-dot{transform:scale(1.1)}
.action-row{max-width:1440px;margin:14px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.primary-btn,.secondary-btn,.ghost-btn{min-height:46px;border-radius:14px;padding:11px 18px;border:0;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary-btn{color:white;background:linear-gradient(180deg,#26a85b,#1f8f4c);box-shadow:0 8px 18px rgba(46,155,87,.22)}.primary-btn:hover{filter:brightness(1.04)}.secondary-btn{color:white;background:linear-gradient(180deg,#1692da,#0d72b4);box-shadow:0 8px 18px rgba(15,124,194,.20)}.ghost-btn{background:white;color:var(--ink);border:1px solid var(--line)}.wide{width:100%}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px clamp(16px,3vw,32px);font-size:.78rem;color:#537083;background:#dceef7;border-top:1px solid #c8e2ef}
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(7,31,49,.62);backdrop-filter:blur(8px)}.modal.is-open{display:flex}.modal-panel{position:relative;width:min(760px,100%);max-height:min(90vh,850px);overflow:auto;background:var(--surface);border-radius:var(--radius);box-shadow:0 26px 80px rgba(0,0,0,.3);padding:clamp(20px,4vw,34px)}.close-btn{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:white;font-size:1.6rem;color:var(--muted);z-index:2}.close-btn:hover{background:var(--surface-2)}
.start-panel{width:min(820px,100%)}.start-hero{display:flex;gap:18px;align-items:center;padding-right:38px}.mascot{font-size:clamp(3rem,8vw,5rem);filter:drop-shadow(0 8px 9px rgba(14,55,88,.13))}.start-hero h2,.mission-top h2,.info-panel h2,.report-panel h2{margin:.2rem 0 .45rem;font-size:clamp(1.45rem,3vw,2.1rem)}.start-hero p,.mission-top p{margin:0;color:var(--muted);line-height:1.55}
.player-form{margin-top:22px;display:grid;gap:18px}.player-form label>span,.player-form legend{display:block;font-weight:900;margin-bottom:7px}.player-form input[type=text]{width:100%;min-height:48px;border:1px solid var(--line);border-radius:13px;padding:11px 13px;font-size:1rem}.player-form fieldset{border:0;padding:0;margin:0}.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grade-card{display:block}.grade-card input{position:absolute;opacity:0;pointer-events:none}.grade-card span{height:100%;display:flex;flex-direction:column;gap:4px;padding:14px;border:2px solid var(--line);border-radius:15px;background:#fff;cursor:pointer}.grade-card small{color:var(--muted);line-height:1.3}.grade-card input:checked+span{border-color:var(--blue);background:#eef8fe;box-shadow:0 0 0 3px rgba(15,124,194,.08)}.microcopy{font-size:.78rem;color:var(--muted);text-align:center;margin:14px 0 0}
.mission-panel{width:min(780px,100%)}.mission-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-right:36px}.mission-icon{font-size:3.2rem}.mission-status{display:flex;align-items:center;gap:12px;margin:18px 0 12px;font-size:.8rem;color:var(--muted)}.mission-status .mini-track{flex:1}.challenge-card{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,24px)}.challenge-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.domain-badge{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;font-weight:900;font-size:.75rem;background:#e9f5ff;color:#086da9}.domain-badge.num{background:#f1edff;color:#6848c4}.read-btn{border:1px solid var(--line);background:white;border-radius:12px;padding:8px 11px;font-weight:800;color:var(--ink)}.stimulus{margin:14px 0;background:white;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:13px;padding:14px 16px;line-height:1.55;color:#29465e;white-space:pre-line}.challenge-card h3{font-size:clamp(1rem,2vw,1.2rem);line-height:1.45;margin:14px 0}.answers{display:grid;gap:9px}.answer-option{display:flex;align-items:flex-start;gap:10px;border:2px solid var(--line);border-radius:13px;background:white;padding:11px 13px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.answer-option:hover{border-color:#a6cde5}.answer-option input{margin-top:3px;accent-color:var(--blue)}.answer-option.selected{border-color:var(--blue);background:#eff8fd}.answer-option.correct{border-color:var(--green);background:#eefbf2}.answer-option.wrong{border-color:var(--red);background:#fff0f0}.feedback{min-height:0;margin-top:12px;border-radius:13px;padding:0;line-height:1.45}.feedback.show{padding:12px 14px;background:#fff;border:1px solid var(--line)}.feedback.good{border-color:#b8e3c4;background:#effbf3}.feedback.bad{border-color:#f0c0c0;background:#fff3f3}.challenge-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.hidden{display:none!important}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.help-grid>div{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);padding:14px;border-radius:15px}.help-grid span{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-weight:900}.help-grid p{margin:4px 0;line-height:1.45}.tip-box{margin-top:14px;border-radius:15px;padding:14px;background:#fff8e7;border:1px solid #f2d698}.tip-box em{font-style:normal;color:#b86b10;font-weight:900}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.metric{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px}.metric small{display:block;color:var(--muted);font-size:.72rem}.metric b{display:block;margin-top:3px;font-size:1.2rem}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.report-table{border-collapse:collapse;width:100%;min-width:650px}.report-table th,.report-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.82rem}.report-table th{background:#edf6fb;color:#36576d}.report-table tr:last-child td{border-bottom:0}.report-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.toast{position:fixed;z-index:80;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#173247;color:#fff;padding:11px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:.25s ease;font-weight:800;font-size:.88rem}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(15,124,194,0))}50%{filter:drop-shadow(0 0 8px rgba(15,124,194,.55))}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media (max-width:900px){.map-title-card{top:1.2%;min-width:52%;padding:7px 12px}.mission-card{top:auto;bottom:2%;left:1.4%;width:28%;padding:8px}.mission-card ol{display:none}.mission-card-head{margin-bottom:4px}.progress-line{margin-top:4px}.hotspot-label{display:none}.hotspot-dot{border-width:3px}.topbar{position:static}}
@media (max-width:650px){.brand-mini span{display:none}.hud-pill{padding:0 8px}.map-section{padding:8px}.map-stage{border-radius:16px}.map-title-card{left:50%;top:1%;min-width:62%;border-radius:13px;padding:5px 8px}.map-title-card .eyebrow{display:none}.map-title-card p{font-size:.62rem}.mission-card{width:34%;border-radius:11px}.mission-card-head{font-size:.65rem}.progress-line{font-size:.55rem}.hotspot-dot{width:34px;height:34px;font-size:.95rem}.action-row>*{flex:1 1 100%}.grade-grid{grid-template-columns:1fr}.start-hero{align-items:flex-start}.mascot{font-size:3rem}.help-grid,.report-summary{grid-template-columns:1fr 1fr}.modal{padding:10px}.modal-panel{border-radius:18px;padding:18px}.mission-icon{font-size:2.3rem}footer{font-size:.7rem}}
@media (max-width:420px){.brand-mini strong{font-size:.8rem}.brand-mark{width:36px;height:36px}.hud-pill small{display:none}.icon-btn,.hud-pill{height:36px}.icon-btn{width:36px}.mission-card{display:none}.help-grid,.report-summary{grid-template-columns:1fr}.map-title-card h1{font-size:.92rem}.map-title-card p{display:none}.hotspot-dot{width:31px;height:31px;font-size:.85rem}.start-hero{display:block}.mascot{margin-bottom:8px}}
@media print{body{background:white}.app-shell,.modal:not(#reportModal),#reportModal .close-btn,.report-actions{display:none!important}#reportModal{position:static;display:block!important;background:white;padding:0}#reportModal .modal-panel{box-shadow:none;max-height:none;width:100%;padding:0}.report-table{min-width:0} @page{margin:14mm}}

/* ===== TYPOGRAPHY SYSTEM — refined for elementary learners ===== */
:root{
  --font-display:"Fredoka","Comfortaa","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --font-body:"Nunito","Inter","Clear Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-xs:clamp(.72rem,.68rem + .12vw,.79rem);
  --fs-sm:clamp(.82rem,.78rem + .16vw,.91rem);
  --fs-body:clamp(.94rem,.89rem + .20vw,1.05rem);
  --fs-lead:clamp(1rem,.94rem + .30vw,1.17rem);
  --fs-h3:clamp(1.08rem,.98rem + .46vw,1.34rem);
  --fs-h2:clamp(1.55rem,1.28rem + 1.05vw,2.22rem);
  --fs-hero:clamp(1.35rem,1rem + 1.55vw,2.35rem);
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.52;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font-family:var(--font-body)}

/* Display faces: playful, but reserved for hierarchy */
.brand-mini strong,
.map-title-card h1,
.start-hero h2,.mission-top h2,.info-panel h2,.report-panel h2,
.mission-card-head strong,
.primary-btn,.secondary-btn,.ghost-btn,
.hotspot-label,
.metric b{
  font-family:var(--font-display);
}

.brand-mini strong{
  font-size:clamp(1rem,.93rem + .25vw,1.16rem);
  font-weight:650;
  line-height:1.12;
  letter-spacing:.005em;
}
.brand-mini span{
  margin-top:3px;
  font-size:var(--fs-xs);
  font-weight:650;
  letter-spacing:.018em;
}
.brand-mark{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.02em;
}

.hud-pill b{font-family:var(--font-display);font-size:1.08rem;font-weight:650}
.hud-pill small{font-size:.78rem;font-weight:700}
.icon-btn{font-family:var(--font-display);font-size:1.05rem;font-weight:700}

.map-title-card{padding:12px 22px 14px}
.map-title-card .eyebrow{font-size:clamp(.61rem,.56rem + .15vw,.72rem)}
.map-title-card h1{
  margin:2px 0 0;
  font-size:var(--fs-hero);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.018em;
}
.map-title-card p{
  margin:5px 0 0;
  font-size:clamp(.76rem,.68rem + .32vw,1rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.115em;
  line-height:1.2;
}

.mission-card-head{
  font-size:clamp(.8rem,.69rem + .43vw,1.03rem);
  line-height:1.15;
}
.mission-card-head strong{font-weight:650}
.mission-card ol{
  font-size:clamp(.69rem,.61rem + .31vw,.87rem);
  line-height:1.34;
  font-weight:700;
}
.progress-line{font-size:clamp(.62rem,.59rem + .12vw,.71rem);font-weight:700}

.hotspot-label{
  font-size:clamp(.6rem,.53rem + .28vw,.82rem);
  font-weight:650;
  letter-spacing:.004em;
  line-height:1.1;
  padding:5px 9px;
}

.primary-btn,.secondary-btn,.ghost-btn{
  min-height:48px;
  padding:11px 20px;
  font-size:clamp(.94rem,.87rem + .24vw,1.05rem);
  font-weight:650;
  letter-spacing:.005em;
  line-height:1.15;
}

footer{
  font-size:clamp(.72rem,.68rem + .14vw,.81rem);
  font-weight:650;
  line-height:1.35;
}

.start-hero h2,.mission-top h2,.info-panel h2,.report-panel h2{
  margin:.28rem 0 .52rem;
  font-size:var(--fs-h2);
  line-height:1.08;
  font-weight:650;
  letter-spacing:-.012em;
}
.start-hero p,.mission-top p{
  font-size:var(--fs-body);
  line-height:1.58;
  font-weight:550;
}

.player-form label>span,.player-form legend{
  font-size:clamp(.9rem,.85rem + .17vw,1rem);
  font-weight:800;
  line-height:1.25;
}
.player-form input[type=text]{
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
}
.grade-card b{
  font-family:var(--font-display);
  font-size:clamp(1rem,.94rem + .2vw,1.1rem);
  font-weight:650;
  line-height:1.15;
}
.grade-card small{
  margin-top:3px;
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.36;
}
.microcopy{font-size:var(--fs-xs);font-weight:600;line-height:1.45}

.mission-status{font-size:var(--fs-sm);font-weight:700}
.domain-badge{font-size:var(--fs-xs);font-weight:800;letter-spacing:.015em}
.read-btn{font-size:var(--fs-sm);font-weight:800}
.stimulus{
  font-size:var(--fs-body);
  line-height:1.68;
  font-weight:600;
}
.challenge-card h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.005em;
}
.answer-option{
  font-size:var(--fs-body);
  font-weight:650;
  line-height:1.42;
}
.feedback{font-size:var(--fs-body);font-weight:650;line-height:1.5}

.help-grid p{font-size:var(--fs-body);font-weight:600;line-height:1.5}
.tip-box{font-size:var(--fs-body);font-weight:600;line-height:1.5}
.metric small{font-size:var(--fs-xs);font-weight:700}
.metric b{font-size:clamp(1.2rem,1.06rem + .55vw,1.5rem);font-weight:650}
.report-table th,.report-table td{font-size:var(--fs-sm);line-height:1.4}
.report-table th{font-weight:800}
.toast{font-size:var(--fs-sm);font-weight:800}

@media (max-width:650px){
  .map-title-card{padding:6px 10px}
  .map-title-card h1{font-size:clamp(.98rem,.82rem + .7vw,1.25rem)}
  .map-title-card p{font-size:.66rem}
  .mission-card-head{font-size:.7rem}
  .progress-line{font-size:.58rem}
  .hotspot-label{font-size:.68rem}
  .primary-btn,.secondary-btn,.ghost-btn{font-size:.98rem}
}
@media (max-width:420px){
  .brand-mini strong{font-size:.88rem}
  .map-title-card h1{font-size:.94rem}
  .start-hero h2,.mission-top h2,.info-panel h2,.report-panel h2{font-size:1.5rem}
  .challenge-card h3{font-size:1.08rem}
}