/* =====================================================
   Code Galaxy — bright "game map" theme
   White, playful & professional. A winding road runs
   THROUGH circular level nodes (CodeCombat / Candy Crush
   style). No emoji anywhere — icons are inline SVG/CSS.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --paper:#f3f6ff;
  --card:#ffffff;
  --ink:#2a3252;
  --muted:#7b85ac;
  --line:#e7ecfb;

  --blue:#4c6fff;
  --purple:#9a6bff;
  --pink:#ff5fa2;
  --green:#22c55e;
  --mint:#34d399;
  --gold:#ffb020;
  --orange:#ff8a3c;

  --good:var(--green);

  --font:'Nunito','Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Fredoka','Nunito',system-ui,sans-serif;

  --shadow:0 14px 34px rgba(74,99,182,.14), 0 3px 8px rgba(74,99,182,.07);
  --shadow-sm:0 6px 16px rgba(74,99,182,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 86% -6%, #e6edff, transparent),
    radial-gradient(760px 520px at -6% 28%, #ffe6f2, transparent),
    radial-gradient(780px 620px at 104% 102%, #e3fbf0, transparent),
    radial-gradient(680px 520px at 0% 100%, #fff3e0, transparent),
    var(--paper);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

#stars{display:none}

.auth-wrap,.journey,.topbar,.teacher-main,.celebrate{position:relative; z-index:2}

h1,h2{font-family:var(--font-display); letter-spacing:.2px}

.glass{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

/* shared inline-icon sizing */
.ic{width:24px; height:24px; display:block}

/* monogram avatars (replace emoji avatars) */
.avatar{
  display:grid; place-items:center; flex:none; border-radius:50%;
  color:#fff; font-family:var(--font-display); font-weight:700; line-height:1;
  box-shadow:var(--shadow-sm);
}

/* ---------- AUTH ---------- */
.auth-page{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px}
.auth-page .site-footer{border-top:none; padding-top:22px}
.auth-wrap{width:100%; max-width:440px; text-align:center}
.logo-rocket{
  width:74px; height:74px; margin:0 auto; border-radius:24px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:grid; place-items:center; color:#fff;
  box-shadow:0 12px 26px rgba(76,111,255,.36);
  animation:float 3s ease-in-out infinite;
}
.logo-rocket .ic{width:40px; height:40px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.logo h1{
  font-family:var(--font-display);
  font-size:44px; font-weight:700; margin:.18em 0 0;
  background:linear-gradient(95deg,var(--blue),var(--purple) 45%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.5px;
}
.tagline{color:var(--muted); margin:.2em 0 1.2em; font-weight:600}
.card{padding:26px}
.tabs{display:flex; gap:8px; margin-bottom:18px; background:#eef1fb; padding:6px; border-radius:16px}
.tab{flex:1; padding:11px; border-radius:12px; text-decoration:none; color:var(--muted); font-weight:800; transition:.2s}
.tab:hover{color:var(--ink)}
.tab.active{background:#fff; color:var(--blue); box-shadow:var(--shadow-sm)}
.form{display:flex; flex-direction:column; gap:6px; text-align:left}
.form label{font-size:13px; color:var(--muted); margin-top:8px; font-weight:800}
.form input[type=text],.form input[type=password],.form input[type=date]{
  padding:13px 15px; border-radius:14px; border:2px solid var(--line);
  background:#fbfcff; color:var(--ink); font-size:15px; font-family:inherit; outline:none; transition:.2s;
}
.form input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(76,111,255,.16); background:#fff}
.btn-blast{
  margin-top:18px; padding:16px; border:none; border-radius:16px; cursor:pointer;
  font-family:var(--font-display); font-size:18px; font-weight:600; color:#fff;
  background:linear-gradient(95deg,var(--blue),var(--purple));
  box-shadow:0 10px 24px rgba(76,111,255,.38); transition:transform .15s, box-shadow .2s, filter .2s;
}
.btn-blast:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 32px rgba(76,111,255,.46); filter:saturate(1.08)}
.btn-blast:active{transform:translateY(0)}
.alert{background:#fff0f3; border:1.5px solid #ffc2d1; color:#d23365; padding:11px 14px; border-radius:14px; margin-bottom:14px; font-size:14px; font-weight:700}

/* colour-swatch avatar picker */
.avatar-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:6px 0}
.avatar-grid input{display:none}
.avatar-opt{
  display:block; height:42px; border-radius:50%; cursor:pointer;
  border:3px solid #fff; box-shadow:0 0 0 2px var(--line), var(--shadow-sm); transition:.15s;
}
.avatar-opt:hover{transform:scale(1.12)}
.avatar-grid input:checked + .avatar-opt{box-shadow:0 0 0 3px var(--blue), var(--shadow-sm); transform:scale(1.14)}
.teacher-toggle{margin-top:14px; font-size:13px; color:var(--muted)}
.teacher-toggle summary{cursor:pointer; padding:8px 0; font-weight:800}
.field-hint{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4; font-weight:600}
.foot-note{color:#9aa3c8; font-size:12px; margin-top:18px; font-weight:600}

/* ---------- TOPBAR ---------- */
.topbar{display:flex; align-items:center; gap:16px; justify-content:space-between;
  margin:16px; padding:12px 18px; border-radius:22px; position:sticky; top:12px; z-index:30}
.topbar-left{display:flex; align-items:center; gap:12px}
.me-avatar{width:46px; height:46px; font-size:20px}
.me-name{font-weight:800; font-size:16px}
.me-rank{font-size:12px; color:var(--orange); font-weight:800}
.topbar-mid{flex:1; max-width:420px}
.xp-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:800}
.xp-label{font-weight:800}
.xp-bar{height:13px; background:#eaeefb; border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.xp-fill{height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--mint),var(--blue),var(--purple));
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.btn-ghost{color:var(--muted); text-decoration:none; padding:9px 15px; border-radius:12px; border:2px solid var(--line); font-size:13px; font-weight:800; transition:.2s}
.btn-ghost:hover{color:var(--blue); border-color:var(--blue); background:#f3f6ff}

/* ---------- JOURNEY INTRO ---------- */
.journey{max-width:880px; margin:0 auto; padding:10px 16px 110px}
.journey-intro{text-align:center; margin:18px 0 18px}
.journey-intro h1{font-size:32px; margin:.2em 0; color:var(--ink)}
.journey-intro p{color:var(--muted); font-weight:600}
.track-badge{
  display:inline-block; margin:6px 0 4px; padding:8px 15px; border-radius:99px;
  font-size:13px; font-weight:800;
  background:#e6fbef; color:#179a52; border:1.5px solid #bff0d2;
}

/* ---------- THE GAME MAP ---------- */
.map{position:relative; margin:6px auto 0}

/* the winding road, drawn as one SVG path under the nodes.
   preserveAspectRatio:none lets it stretch to the full width; non-scaling
   strokes keep the road thickness + dots crisp at any width. */
.map-road{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
.road-base{fill:none; stroke:#e1e8ff; stroke-width:22; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.road-dash{fill:none; stroke:#b3c4ff; stroke-width:5; stroke-linecap:round; stroke-dasharray:0.5 22; vector-effect:non-scaling-stroke;
  animation:roadflow 5s linear infinite}
@keyframes roadflow{to{stroke-dashoffset:-22.5}}

/* horizontal divider that marks the boundary between stages */
.stage-divider{position:absolute; left:0; right:0; z-index:2; height:0; pointer-events:none}
.stage-divider::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:0;
  border-top:2px dashed #cfd8f2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

/* free-space coding doodles (self-drawn, copyright-free) */
.map-deco{
  position:absolute; z-index:0; pointer-events:none; width:92px;
  filter:drop-shadow(0 8px 14px rgba(74,99,182,.16));
  opacity:.95; animation:decofloat 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -0.7s);
}
.map-deco svg{width:100%; height:auto; display:block}
@keyframes decofloat{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--r,0deg))}
  50%{transform:translate(-50%,calc(-50% - 12px)) rotate(var(--r,0deg))}
}

/* stage banner chips that sit over the road between worlds */
.map-banner{
  position:absolute; left:50%; transform:translate(-50%,-50%); z-index:3;
  display:flex; align-items:center; gap:9px; max-width:330px;
  padding:7px 16px 7px 7px; border-radius:99px;
  background:#fff; border:2px solid var(--line); box-shadow:var(--shadow-sm); white-space:nowrap;
  transition:transform .18s, box-shadow .2s;
  animation:bannerpop .5s both;
}
.map-banner:hover{transform:translate(-50%,-50%) scale(1.05); box-shadow:var(--shadow)}
@keyframes bannerpop{from{opacity:0; transform:translate(-50%,calc(-50% + 10px))}to{opacity:1; transform:translate(-50%,-50%)}}
.banner-num{
  flex:none; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--c,var(--blue)); color:#fff; font-weight:800; font-size:13px;
}
.banner-name{
  font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis;
}

/* a level = a circle the road passes through */
.map-node{
  position:absolute; transform:translate(-50%,-50%); z-index:1;
  width:70px; height:70px; cursor:pointer;
}
.map-node.is-start{width:86px; height:86px}
.map-node.node-finish{width:82px; height:82px; cursor:default}
.map-node:hover{z-index:6}

.node-circle{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:19px;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.45), transparent 58%), var(--c,var(--blue));
  border:5px solid #fff;
  box-shadow:0 0 0 3px var(--c,var(--blue)), 0 10px 20px rgba(74,99,182,.22);
  transition:transform .18s cubic-bezier(.2,1.5,.4,1), box-shadow .2s;
  /* staggered entrance — pop in one after another (backwards fill, so hover still works after) */
  animation:nodepop .5s cubic-bezier(.2,1.5,.4,1) backwards;
  animation-delay:calc(var(--i,0) * 0.035s);
}
/* completed missions periodically shimmer like earned trophies */
.node-done .node-circle::after{
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);
  animation:nodeshine 5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 0.22s);
}
@keyframes nodeshine{0%{left:-70%}16%{left:140%}100%{left:140%}}
@keyframes nodepop{0%{opacity:0; transform:scale(.2)}60%{transform:scale(1.12)}100%{opacity:1; transform:scale(1)}}
.map-node:hover .node-circle{transform:scale(1.2) translateY(-3px); box-shadow:0 0 0 3px var(--c,var(--blue)), 0 16px 28px rgba(74,99,182,.3), 0 0 28px var(--c,var(--blue))}
.map-node:active .node-circle{transform:scale(1.08)}
.node-circle .ic{width:26px; height:26px}
.is-start .node-circle .ic,.node-finish .node-circle .ic{width:32px; height:32px}

.node-done .node-circle{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), transparent 58%), linear-gradient(135deg,var(--green),var(--mint));
  box-shadow:0 0 0 3px var(--green), 0 10px 20px rgba(34,197,94,.3);
}
.node-done:hover .node-circle{box-shadow:0 0 0 3px var(--green), 0 16px 28px rgba(34,197,94,.34), 0 0 28px rgba(34,197,94,.7)}
.node-current .node-circle{
  background:linear-gradient(135deg,var(--gold),var(--orange));
  box-shadow:0 0 0 3px var(--gold), 0 0 0 0 rgba(255,176,32,.5);
  animation:nodepop .5s cubic-bezier(.2,1.5,.4,1) backwards, nodepulse 1.6s 0.6s infinite;
}
@keyframes nodepulse{
  0%,100%{box-shadow:0 0 0 3px var(--gold), 0 0 0 0 rgba(255,176,32,.5)}
  50%{box-shadow:0 0 0 3px var(--gold), 0 0 0 16px rgba(255,176,32,0)}
}
.node-current:hover .node-circle{box-shadow:0 0 0 3px var(--gold), 0 16px 28px rgba(255,154,60,.36), 0 0 30px var(--gold)}
/* the current mission gently bounces and wears a spinning target ring — "do me next!" */
.node-current{animation:nodebob 1.5s ease-in-out infinite}
@keyframes nodebob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}
.node-current::before{
  content:""; position:absolute; inset:-13px; border-radius:50%; z-index:-1;
  border:3px dashed var(--gold); opacity:.7;
  animation:spin 7s linear infinite;
}
.node-current::after{
  content:"Play!"; position:absolute; left:50%; bottom:100%; margin-bottom:12px;
  padding:5px 13px; border-radius:99px; white-space:nowrap;
  background:linear-gradient(95deg,var(--gold),var(--orange)); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  box-shadow:0 6px 14px rgba(255,154,60,.45);
  animation:calloutbob 1.1s ease-in-out infinite;
}
@keyframes calloutbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
.node-current.is-start::after{content:none} /* avoid clashing with the stage banner */
.node-locked{cursor:pointer}
.node-locked .node-circle{
  background:#eef1fb; color:#aab3d4; border-color:#fff;
  box-shadow:0 0 0 3px #dfe5f6, 0 8px 16px rgba(74,99,182,.13);
}
.node-locked:hover .node-circle{transform:scale(1.08); box-shadow:0 0 0 3px #cfd8f2, 0 12px 22px rgba(74,99,182,.2)}
/* shake the whole node (not the circle) so it never clobbers the circle's entrance animation */
.node-locked:hover{animation:lockshake .45s ease}
@keyframes lockshake{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% - 3px),-50%)}
  50%{transform:translate(calc(-50% + 3px),-50%)}
  75%{transform:translate(calc(-50% - 2px),-50%)}
}
.node-finish .node-circle{
  background:linear-gradient(135deg,#ffd76a,#ff9a3c);
  box-shadow:0 0 0 3px #ffcf5a, 0 12px 24px rgba(255,154,60,.36);
  animation:nodepop .5s cubic-bezier(.2,1.5,.4,1) backwards, finishglow 2.6s ease-in-out 0.6s infinite;
}
@keyframes finishglow{0%,100%{box-shadow:0 0 0 3px #ffcf5a, 0 12px 24px rgba(255,154,60,.36), 0 0 0 rgba(255,176,32,.5)}50%{box-shadow:0 0 0 3px #ffcf5a, 0 12px 24px rgba(255,154,60,.36), 0 0 26px rgba(255,176,32,.85)}}
.node-finish .ic{animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.node-label{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:9px;
  width:128px; text-align:center; font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.2;
  transition:transform .18s, color .18s;
}
.node-locked .node-label{color:#9aa3c8; font-weight:700}
.node-finish .node-label{color:var(--orange)}
.map-node:hover .node-label{transform:translateX(-50%) translateY(3px) scale(1.07); color:var(--blue)}
.node-locked:hover .node-label{color:var(--muted)}
/* last mission of a stage: label sits ABOVE the circle so it clears the next stage banner */
.is-stage-end .node-label{top:auto; bottom:100%; margin-top:0; margin-bottom:9px}
.is-stage-end:hover .node-label{transform:translateX(-50%) translateY(-3px) scale(1.07)}

.map-foot{max-width:460px; margin:26px auto 0; text-align:center; color:var(--muted); font-weight:600}
.map-foot strong{color:var(--ink)}

@media(max-width:760px){
  .map-deco{display:none}   /* not enough side room on small screens */
}
@media(max-width:560px){
  .node-label{width:96px; font-size:11px; margin-top:7px}
  .map-node{width:60px; height:60px}
  .map-node.is-start{width:72px; height:72px}
  .node-circle .ic{width:22px; height:22px}
}

@media(prefers-reduced-motion:reduce){
  .road-dash,.node-circle,.node-current,.node-current .node-circle,.node-current::before,.node-current::after,
  .node-done .node-circle::after,.node-finish .node-circle,.node-finish .ic,.map-banner,.map-deco,.node-locked:hover{animation:none}
}

/* ---------- CELEBRATION ---------- */
.celebrate[hidden]{display:none}
.celebrate{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(42,50,82,.34); animation:fadein .2s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.celebrate-card{padding:36px 52px; text-align:center; animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
.celebrate-emoji{display:grid; place-items:center}
.celebrate-emoji .ic{width:62px; height:62px; color:var(--gold)}
.celebrate-title{font-family:var(--font-display); font-size:26px; font-weight:700; margin-top:6px; color:var(--ink)}
.celebrate-sub{color:var(--orange); font-weight:800; margin-top:4px}

.confetti{position:fixed; top:-20px; width:10px; height:14px; z-index:79; border-radius:3px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg); opacity:.9}}

/* ---------- TEACHER ---------- */
.teacher-main{max-width:920px; margin:0 auto; padding:10px 16px 80px}
.teacher-main h1{text-align:center; font-size:30px; color:var(--ink)}
.stat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0}
.stat-card{padding:20px; text-align:center; transition:transform .18s, box-shadow .2s}
.stat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.stat-num{font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--blue)}
.stat-lbl{color:var(--muted); font-size:13px; font-weight:700}
.teacher-hint{padding:15px 18px; font-size:13.5px; color:var(--muted); margin-bottom:18px; line-height:1.5; font-weight:600}
.empty{padding:30px; text-align:center; color:var(--muted); font-weight:700}

.student-list{display:flex; flex-direction:column; gap:10px}
.student{padding:0; overflow:hidden}
.student summary{
  list-style:none; cursor:pointer; display:grid;
  grid-template-columns:40px 1fr auto 160px 48px; gap:12px; align-items:center;
  padding:15px 18px;
}
.student summary::-webkit-details-marker{display:none}
.student summary{transition:background .18s}
.student summary:hover{background:#f5f8ff}
.student[open]{box-shadow:var(--shadow)}
.s-avatar{width:40px; height:40px; font-size:18px}
.s-name{font-weight:800}
.s-user{color:var(--muted); font-weight:600; font-size:12px}
.s-rank{font-size:12.5px; color:var(--orange); font-weight:800}
.s-bar{height:11px; background:#eaeefb; border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.s-fill{display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--blue)); border-radius:99px}
.s-pct{font-weight:800; text-align:right}
.s-detail{padding:4px 18px 18px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line)}
.s-stage{display:flex; align-items:center; gap:10px; font-size:14px; padding-top:10px}
.s-stage-num{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#eef1fb; color:var(--muted); font-weight:800; font-size:12px}
.s-stage-name{flex:1; color:var(--muted); font-weight:700}
.s-stage-prog{font-weight:800; padding:3px 11px; border-radius:99px; background:#eef1fb; color:var(--muted); font-size:12px}
.s-stage-prog.full{background:#e6fbef; color:#179a52}

.s-track{
  display:inline-block; margin-left:8px; padding:2px 10px; border-radius:99px;
  font-size:11px; font-weight:800; vertical-align:middle;
  background:#e7ecff; color:var(--blue); border:1px solid #d3dcff;
}
.s-track.jr{ background:#e6fbef; color:#179a52; border-color:#bff0d2 }

/* ---------- responsive ---------- */
@media(max-width:680px){
  .topbar{flex-wrap:wrap}
  .topbar-mid{order:3; max-width:100%; flex-basis:100%}
  .student summary{grid-template-columns:34px 1fr 60px; row-gap:6px}
  .s-rank{display:none}
  .s-bar{grid-column:1 / -1}
  .stat-cards{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .stat-num{font-size:24px}
}

/* ---------- LESSON MODAL ---------- */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px}
.modal-backdrop{position:absolute; inset:0; background:rgba(42,50,82,.5); backdrop-filter:blur(3px); animation:fadein .2s}
.modal-card{
  position:relative; z-index:1; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  padding:28px; border-radius:26px; border-top:6px solid var(--planet-color, var(--blue));
  animation:pop .32s cubic-bezier(.2,1.3,.4,1);
}
.modal-x{
  position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%;
  border:2px solid var(--line); background:#f4f6ff; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer; transition:.15s;
}
.modal-x:hover{background:#fff0f3; color:#d23365; border-color:#ffc2d1; transform:scale(1.08) rotate(90deg)}
.modal-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.modal-tool{
  font-weight:800; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 13px; border-radius:99px; color:#fff;
  background:var(--planet-color, var(--blue));
}
.modal-stage{font-size:12px; color:var(--muted); font-weight:700}
.modal-title{font-family:var(--font-display); margin:.1em 0; font-size:25px; color:var(--ink)}
.modal-topic{margin:0 0 6px; color:var(--muted); font-size:14px; font-weight:600}
.modal-section{margin-top:18px}
.modal-section h3{margin:0 0 8px; font-size:15px; color:var(--ink); font-weight:800}
.modal-section ul{margin:0; padding-left:4px; list-style:none; display:flex; flex-direction:column; gap:7px}
.modal-section ul li{position:relative; padding-left:24px; font-size:14px; color:#46507a; font-weight:600}
.modal-section ul li::before{
  content:""; position:absolute; left:5px; top:7px; width:8px; height:8px; border-radius:50%;
  background:var(--planet-color, var(--blue));
}
.modal-section p{margin:0; font-size:14.5px; color:#46507a; line-height:1.5; font-weight:600;
  background:#f5f7ff; border:1.5px solid var(--line); border-radius:14px; padding:13px 15px}
.modal-foot{margin-top:22px; text-align:center}
.modal-foot .btn-blast{width:100%; margin-top:0}
.btn-ghost-wide{
  width:100%; padding:14px; border-radius:16px; cursor:pointer; font-size:15px; font-weight:800;
  color:var(--muted); background:#f4f6ff; border:2px solid var(--line); transition:.18s;
}
.btn-ghost-wide:hover{color:var(--blue); border-color:var(--blue)}
.modal-note{margin-top:12px; font-size:13px; color:var(--muted); line-height:1.4; font-weight:600}

@media(max-width:560px){
  .modal-card{padding:22px 18px}
  .modal-title{font-size:21px}
}

/* ---------- MODAL: resources & "what to do" ---------- */
.modal-res-btn{
  width:100%; margin-top:18px; padding:13px; border-radius:14px; cursor:pointer;
  font-weight:800; font-size:14px; color:var(--ink);
  background:#f4f6ff; border:2px solid var(--line); transition:.15s;
}
.modal-res-btn:hover{ border-color:var(--planet-color, var(--blue)); background:#eef2ff }
.modal-res[hidden]{display:none}
.modal-res{
  margin-top:12px; padding:15px 16px; border-radius:14px;
  background:#f7f9ff; border:1.5px solid var(--line); animation:fadein .2s;
}
.modal-res h4{ margin:4px 0 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:800 }
.modal-res h4:nth-of-type(2){ margin-top:14px }
.tag-row{ display:flex; flex-wrap:wrap; gap:7px }
.tag{
  font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:99px;
  background:#e7ecff; color:var(--blue); border:1px solid #d3dcff;
}
.res-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.res-list a{
  color:var(--blue); text-decoration:none; font-size:14px; font-weight:700; line-height:1.35;
}
.res-list a:hover{ text-decoration:underline }

.modal-teach-btn{ border-color:#bff0d2; background:#eafbf1; color:#179a52 }
.modal-teach-btn:hover{ border-color:var(--green); background:#dcf7e6 }
.modal-teach{ border-color:#bff0d2; background:#f1fcf5 }
.teach-list{ list-style:none; counter-reset:teachstep; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.teach-list li{
  counter-increment:teachstep; position:relative; padding-left:40px;
  font-size:14px; line-height:1.45; color:#33405e; font-weight:600;
}
.teach-list li::before{
  content:counter(teachstep); position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--green),var(--mint));
  box-shadow:0 4px 10px rgba(34,197,94,.35);
}

/* ---------- date input ---------- */
.form input[type=date]::-webkit-calendar-picker-indicator{ opacity:.65; cursor:pointer }

/* ---------- extra polish: entrances & hovers ---------- */
.topbar{animation:dropin .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes dropin{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:translateY(0)}}
.me-avatar{transition:transform .18s}
.topbar-left:hover .me-avatar{transform:scale(1.08) rotate(-6deg)}
.s-avatar{transition:transform .18s}
.student summary:hover .s-avatar{transform:scale(1.08) rotate(-5deg)}

.journey-intro{animation:risein .55s ease both}
.journey-intro h1{animation:risein .6s .05s ease both}
@keyframes risein{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}

.logo-rocket{cursor:default}
.logo:hover .logo-rocket{animation:wiggle .6s ease}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}25%{transform:rotate(8deg) scale(1.06)}50%{transform:rotate(-10deg)}75%{transform:rotate(6deg)}}

.btn-ghost:hover{transform:translateY(-1px)}
.xp-fill{position:relative; overflow:hidden}
.xp-fill::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%); transform:translateX(-100%); animation:xpshine 2.6s ease-in-out infinite}
@keyframes xpshine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}

@media(prefers-reduced-motion:reduce){
  .topbar,.journey-intro,.journey-intro h1{animation:none}
  .xp-fill::after{animation:none; display:none}
}

/* ============================================================
 *  Teacher content editors (curriculum + projects)
 * ============================================================ */
.editor-main,.projects-main{max-width:920px; margin:0 auto; padding:22px 18px 80px}
.editor-main h1{font-family:var(--font-display); font-size:30px; color:var(--ink); text-align:center; margin:.2em 0}
.editor-lead{text-align:center; color:var(--muted); font-weight:700; max-width:640px; margin:0 auto 18px}

.flash{padding:12px 16px; border-radius:14px; text-align:center; font-weight:800;
  color:var(--green); border:2px solid #c7f0d6; background:#effdf4; margin:0 0 16px}

/* age-group tabs */
.track-tabs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 16px}
.track-tab{padding:11px 18px; border-radius:14px; border:2px solid var(--line); background:#fff;
  color:var(--muted); font-weight:800; text-decoration:none; transition:.2s}
.track-tab:hover{color:var(--blue); border-color:var(--blue); background:#f3f6ff}
.track-tab.on{color:#fff; border-color:transparent; background:linear-gradient(95deg,var(--blue),var(--purple)); box-shadow:var(--shadow-sm)}

.editor-bar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:14px 18px; border-radius:18px; margin:0 0 18px; font-weight:700; color:var(--ink)}
.pill{display:inline-block; margin-left:8px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:800;
  background:#e7ecff; color:var(--blue); border:1px solid #d3dcff}
.pill.ghost{background:#f4f6ff; color:var(--muted); border-color:var(--line)}

/* a stage block in the editor */
.ed-stage{padding:16px 18px; border-radius:22px; margin:0 0 18px; border-left:6px solid var(--sc,var(--blue))}
.ed-stage-head{display:flex; align-items:center; gap:12px}
.ed-stage-head h2{font-family:var(--font-display); font-size:20px; color:var(--ink); margin:0; flex:1}
.ed-stage-num{display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--sc,var(--blue)); color:#fff; font-weight:800; flex:none}
.ed-count{color:var(--muted); font-weight:800; font-size:13px}
.ed-stage-tools{display:flex; gap:4px}
.icon-btn{width:30px; height:30px; border-radius:9px; border:2px solid var(--line); background:#fff;
  color:var(--muted); font-weight:800; cursor:pointer; transition:.2s}
.icon-btn:hover:not([disabled]){color:var(--blue); border-color:var(--blue); background:#f3f6ff}
.icon-btn[disabled]{opacity:.35; cursor:default}

/* collapsible edit panels */
.ed-edit,.ed-level{margin-top:10px; border:2px solid var(--line); border-radius:16px; background:#fbfcff; overflow:hidden}
.ed-edit>summary,.ed-level>summary{cursor:pointer; padding:12px 16px; font-weight:800; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:10px}
.ed-edit>summary::-webkit-details-marker,.ed-level>summary::-webkit-details-marker{display:none}
.ed-edit>summary:hover,.ed-level>summary:hover{background:#f3f6ff}
.ed-edit[open]>summary,.ed-level[open]>summary{border-bottom:2px solid var(--line)}
.ed-level-n{display:grid; place-items:center; width:26px; height:26px; border-radius:8px; flex:none;
  background:#e7ecff; color:var(--blue); font-weight:800; font-size:13px}
.ed-level-t{flex:1}
.ed-level-tool{color:var(--muted); font-weight:700; font-size:12.5px}
.ed-add>summary .ed-level-n{background:#e7fbef; color:var(--green)}
.ed-add-stage>.ed-edit>summary{color:var(--blue)}

/* forms */
.ed-form{padding:16px; display:flex; flex-direction:column; gap:12px}
.f{display:flex; flex-direction:column; gap:6px; font-weight:800; font-size:13px; color:var(--ink)}
.f code{font-weight:700; color:var(--purple); background:#f4f0ff; padding:1px 6px; border-radius:6px}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.f input[type=text],.f input[type=color],.f textarea{
  padding:11px 13px; border-radius:12px; border:2px solid var(--line); background:#fff; color:var(--ink);
  font-size:14.5px; font-family:inherit; font-weight:600; outline:none; transition:.2s; width:100%}
.f textarea{resize:vertical; line-height:1.45}
.f input:focus,.f textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(76,111,255,.14)}
.f-color input[type=color]{height:44px; padding:4px; cursor:pointer}
.ed-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ed-form .btn-blast{padding:11px 20px; font-size:14px}

.ed-level-foot{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 16px}
.inline{display:inline}
.btn-ghost.sm{padding:7px 12px; font-size:12px}
.btn-ghost.danger{color:#e25563; border-color:#f3cdd2}
.btn-ghost.danger:hover{color:#fff; background:#f5536b; border-color:#f5536b}
.ed-danger{padding:0 16px 16px}

/* ============================================================
 *  Suggested projects
 * ============================================================ */
.proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.proj-card{padding:20px; border-radius:22px; border-top:6px solid var(--blue)}
.proj-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.proj-head h2{font-family:var(--font-display); font-size:21px; color:var(--ink); margin:0; flex:1}
.proj-level{font-size:12px; font-weight:800; color:var(--blue); background:#e7ecff;
  border:1px solid #d3dcff; padding:3px 10px; border-radius:99px; white-space:nowrap}
.proj-blurb{color:var(--muted); font-weight:700; margin:10px 0}
.proj-tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.proj-card h3{font-size:13.5px; color:var(--ink); font-weight:800; margin:16px 0 6px;
  text-transform:uppercase; letter-spacing:.04em}
.proj-steps{margin:0; padding-left:22px; color:var(--ink); font-weight:600; line-height:1.55}
.proj-steps li{margin-bottom:5px}
.proj-res{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.proj-res a{color:var(--blue); font-weight:800; text-decoration:none}
.proj-res a:hover{text-decoration:underline}
.proj-edit{margin-top:16px}

@media(max-width:560px){
  .f-grid{grid-template-columns:1fr}
  .editor-bar{flex-direction:column; align-items:flex-start}
}

/* ============================================================
 *  Site footer (copyright)
 * ============================================================ */
.site-footer{
  text-align:center; padding:26px 18px 30px; margin-top:10px;
  color:var(--muted); font-weight:700; font-size:13px;
}
.app-page .site-footer{border-top:1px solid var(--line)}

/* ============================================================
 *  Teacher signup-code (compact, near the footer)
 * ============================================================ */
.teacher-code-mini{max-width:880px; margin:26px auto 0; display:flex; align-items:center;
  justify-content:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; font-weight:700}
.teacher-code-mini code{font-family:'Fredoka','Nunito',monospace; font-weight:600; font-size:13px;
  letter-spacing:.03em; color:var(--purple); background:#f4f0ff; border:1px dashed #d8caff;
  padding:4px 12px; border-radius:10px; user-select:all}
.tc-copy{border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800;
  font-size:11px; padding:5px 11px; border-radius:9px; cursor:pointer; transition:.2s}
.tc-copy:hover{color:var(--blue); border-color:var(--blue); background:#f3f6ff}
.tc-copy.copied{color:#fff; background:var(--green); border-color:var(--green)}

/* ============================================================
 *  LANDING PAGE
 *  Modern patterns: glass navbar (backdrop blur), oversized
 *  clamp() typography, gradient-mesh blobs, bento grid,
 *  scroll-reveal, marquee, gently pulsing CTA.
 * ============================================================ */
.landing{overflow-x:hidden}
.landing main{position:relative; z-index:2}

/* --- soft gradient-mesh blobs drifting behind everything --- */
.l-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.l-blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:blobdrift 18s ease-in-out infinite alternate}
.l-blob-1{width:560px; height:560px; left:-140px; top:-120px; background:radial-gradient(circle,#cdd9ff,transparent 65%)}
.l-blob-2{width:640px; height:640px; right:-180px; top:16%; background:radial-gradient(circle,#ffd9ea,transparent 65%); animation-delay:-6s}
.l-blob-3{width:520px; height:520px; left:30%; bottom:-220px; background:radial-gradient(circle,#d2f7e4,transparent 65%); animation-delay:-12s}
@keyframes blobdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}

/* --- glass navbar --- */
.l-nav{
  position:sticky; top:12px; z-index:50; margin:14px auto 0; max-width:1080px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 14px 10px 16px; border-radius:20px;
  background:rgba(255,255,255,.72); border:1px solid rgba(231,236,251,.9);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 8px 28px rgba(74,99,182,.1);
  transition:box-shadow .3s, background .3s;
}
.l-nav.scrolled{box-shadow:0 14px 34px rgba(74,99,182,.18); background:rgba(255,255,255,.88)}
.l-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.l-brand-mark{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 6px 14px rgba(76,111,255,.35);
}
.l-brand-mark .ic{width:22px; height:22px}
.l-brand-name{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  background:linear-gradient(95deg,var(--blue),var(--purple) 55%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.l-links{display:flex; gap:4px}
.l-links a{
  padding:9px 14px; border-radius:12px; text-decoration:none;
  color:var(--muted); font-weight:800; font-size:14px; transition:.2s;
}
.l-links a:hover{color:var(--blue); background:#f0f4ff}
.l-nav-cta{display:flex; align-items:center; gap:10px}
.btn-nav{margin-top:0; padding:11px 18px; font-size:15px; border-radius:13px; text-decoration:none; display:inline-block}

/* --- hero --- */
.l-hero{
  max-width:1080px; margin:0 auto; padding:64px 22px 30px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
}
.l-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px;
  font-size:13px; font-weight:800; color:var(--purple);
  background:#f4f0ff; border:1.5px solid #e2d6ff;
  animation:risein .6s ease both;
}
.ic-sm{width:15px; height:15px}
.ic-btn{width:20px; height:20px}
.l-hero h1{
  margin:.35em 0 0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px, 5.6vw, 66px); line-height:1.04; letter-spacing:-.5px; color:var(--ink);
  animation:risein .6s .08s ease both;
}
.l-grad{
  background:linear-gradient(95deg,var(--blue),var(--purple) 45%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.l-sub{
  margin:20px 0 0; max-width:480px; color:var(--muted);
  font-size:17.5px; line-height:1.65; font-weight:600;
  animation:risein .6s .16s ease both;
}
.l-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; animation:risein .6s .24s ease both}
.btn-big{
  margin-top:0; display:inline-flex; align-items:center; gap:10px;
  padding:17px 28px; font-size:17px; border-radius:17px; text-decoration:none;
}
a.btn-blast{text-decoration:none}
.btn-ghost.btn-big{font-size:15px; font-weight:800}
/* CTA breathes gently once it is on screen */
.l-pulse{animation:risein .6s .24s ease both, ctapulse 2.6s 1.2s ease-in-out infinite}
@keyframes ctapulse{
  0%,100%{box-shadow:0 10px 24px rgba(76,111,255,.38)}
  50%{box-shadow:0 10px 24px rgba(76,111,255,.38), 0 0 0 12px rgba(76,111,255,0.001), 0 0 34px rgba(154,107,255,.4)}
}
.l-stats{display:flex; gap:36px; margin:38px 0 0; padding:0; animation:risein .6s .32s ease both}
.l-stat dt{
  font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.l-stat dd{margin:2px 0 0; color:var(--muted); font-weight:700; font-size:13px}

/* --- hero visual: miniature galaxy map --- */
.l-hero-visual{position:relative; min-height:420px; animation:risein .7s .2s ease both}
.l-orbit{position:absolute; border:2px dashed #d5deff; border-radius:50%; opacity:.8}
.l-orbit-a{width:118%; height:118%; left:-9%; top:-9%; animation:spin 60s linear infinite}
.l-orbit-b{width:88%; height:88%; left:6%; top:6%; animation:spin 42s linear infinite reverse}
.l-map-card{
  position:relative; z-index:1; padding:18px 18px 20px; border-radius:26px;
  transform:rotate(-1.5deg); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.l-hero-visual:hover .l-map-card{transform:rotate(0deg) translateY(-6px)}
.l-map-head{display:flex; align-items:center; gap:7px; margin-bottom:4px}
.l-map-dot{width:11px; height:11px; border-radius:50%; background:var(--c,var(--blue)); opacity:.85}
.l-map-title{margin-left:8px; font-size:12.5px; font-weight:800; color:var(--muted)}
.l-map-stage{position:relative} /* nodes are placed in % of the map, not the card */
.l-map{width:100%; height:auto; display:block}
.l-road-base{fill:none; stroke:#e1e8ff; stroke-width:16; stroke-linecap:round}
/* offset must move an exact multiple of the dash period (.5+18=18.5)
   per loop, or the dashes visibly snap when the animation restarts */
.l-road-dash{fill:none; stroke:#b3c4ff; stroke-width:4; stroke-linecap:round; stroke-dasharray:.5 18; animation:l-roadflow 4s linear infinite}
@keyframes l-roadflow{to{stroke-dashoffset:-18.5}}
.l-node{
  position:absolute; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff; transform:translate(-50%,-50%);
  border:4px solid #fff;
}
.l-node .ic{width:22px; height:22px}
.l-done{background:linear-gradient(135deg,var(--green),var(--mint)); box-shadow:0 0 0 2.5px var(--green), 0 8px 16px rgba(34,197,94,.3)}
.l-lock{background:#eef1fb; color:#aab3d4; box-shadow:0 0 0 2.5px #dfe5f6, 0 6px 12px rgba(74,99,182,.12)}
.l-goal{background:linear-gradient(135deg,#ffd76a,#ff9a3c); box-shadow:0 0 0 2.5px #ffcf5a, 0 8px 16px rgba(255,154,60,.32)}
.l-now{
  background:linear-gradient(135deg,var(--gold),var(--orange));
  box-shadow:0 0 0 2.5px var(--gold), 0 10px 18px rgba(255,154,60,.4);
  animation:nodebob 1.5s ease-in-out infinite;
}
.l-play-tag{
  position:absolute; left:50%; bottom:100%; margin-bottom:10px; transform:translateX(-50%);
  padding:4px 12px; border-radius:99px; white-space:nowrap; font-style:normal;
  background:linear-gradient(95deg,var(--gold),var(--orange)); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  box-shadow:0 6px 14px rgba(255,154,60,.45);
  animation:calloutbob 1.1s ease-in-out infinite;
}
.l-xp{display:flex; flex-direction:column; gap:7px; margin-top:8px; padding:12px 14px; border-radius:16px; background:#f6f8ff; border:1.5px solid var(--line)}
.l-xp-row{display:flex; justify-content:space-between; align-items:baseline; font-size:13px}
.l-xp-row b{font-weight:800; color:var(--ink)}
.l-xp-row i{font-style:normal; font-weight:800; font-size:12px; color:var(--orange)}
.l-xp-bar{height:11px; border-radius:99px; background:#eaeefb; border:1px solid var(--line); overflow:hidden}
.l-xp-fill{display:block; height:100%; width:62%; border-radius:99px; background:linear-gradient(90deg,var(--mint),var(--blue),var(--purple)); position:relative; overflow:hidden}
.l-xp-fill::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%); transform:translateX(-100%); animation:xpshine 2.6s ease-in-out infinite}

/* floating tool chips around the map */
.l-float{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:99px; font-weight:800; font-size:13.5px; color:var(--ink);
  background:rgba(255,255,255,.9); border:1.5px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm); animation:decofloat 6s ease-in-out infinite;
}
.l-float .ic{width:18px; height:18px}
.l-float-1{left:-6%; top:16%; color:var(--orange); --r:-4deg; animation-delay:-1s}
.l-float-2{right:-4%; top:52%; color:var(--blue); --r:3deg; animation-delay:-3s}
.l-float-3{left:-3%; bottom:-4%; color:var(--green); --r:-2deg; animation-delay:-5s}
.l-float-1,.l-float-2,.l-float-3{transform:translate(-50%,-50%) rotate(var(--r,0deg))}

/* --- marquee --- */
.l-marquee{
  margin:40px 0 0; padding:16px 0; overflow:hidden; white-space:nowrap;
  border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line);
  background:rgba(255,255,255,.55);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.l-marquee-track{display:inline-flex; gap:34px; padding-right:34px; animation:marquee 26s linear infinite}
.l-marquee:hover .l-marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.l-mq-item{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--muted)}
.l-mq-item .ic{color:var(--gold)}
.l-mq-item:nth-child(3n) .ic{color:var(--pink)}
.l-mq-item:nth-child(3n+1) .ic{color:var(--blue)}

/* --- shared section shell --- */
.l-section{max-width:1080px; margin:0 auto; padding:76px 22px 8px}
.l-h2{
  text-align:center; margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px, 4vw, 44px); line-height:1.12; color:var(--ink); letter-spacing:-.3px;
}
.l-lead{text-align:center; max-width:560px; margin:14px auto 0; color:var(--muted); font-weight:600; font-size:16.5px; line-height:1.6}

/* scroll-reveal: JS adds .in when the element enters the viewport.
   Scoped to body.js so content stays visible if scripts never load. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1; transform:none}
.l-steps .reveal:nth-child(2),.l-bento .reveal:nth-child(2),.l-planets .reveal:nth-child(2){transition-delay:.08s}
.l-steps .reveal:nth-child(3),.l-bento .reveal:nth-child(3),.l-planets .reveal:nth-child(3){transition-delay:.16s}
.l-bento .reveal:nth-child(4),.l-planets .reveal:nth-child(4){transition-delay:.1s}
.l-bento .reveal:nth-child(5),.l-planets .reveal:nth-child(5){transition-delay:.18s}

/* --- how it works --- */
.l-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
.l-step{position:relative; padding:30px 24px 26px; transition:transform .25s, box-shadow .25s}
.l-step:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.l-step-num{
  position:absolute; top:18px; right:20px; font-family:var(--font-display); font-weight:700;
  font-size:44px; line-height:1; color:var(--c,var(--blue)); opacity:.14;
}
.l-step-ic{
  width:54px; height:54px; border-radius:17px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--c,var(--blue)), color-mix(in srgb, var(--c,var(--blue)) 60%, #fff));
  background-color:var(--c,var(--blue));
  box-shadow:0 8px 18px rgba(74,99,182,.24);
}
.l-step-ic .ic{width:28px; height:28px}
.l-step h3{font-family:var(--font-display); font-size:20px; margin:16px 0 8px; color:var(--ink)}
.l-step p{margin:0; color:var(--muted); font-weight:600; font-size:14.5px; line-height:1.6}

/* --- bento grid --- */
.l-bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:38px}
.l-tile{grid-column:span 2; padding:26px 24px; transition:transform .25s, box-shadow .25s}
.l-tile-wide{grid-column:span 4}
.l-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.l-tile-ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--c,var(--blue));
  background:color-mix(in srgb, var(--c,var(--blue)) 13%, #fff);
  border:1.5px solid color-mix(in srgb, var(--c,var(--blue)) 26%, #fff);
}
@supports not (background:color-mix(in srgb,#fff 10%,#fff)){
  .l-tile-ic{background:#eef2ff; border-color:#dbe3ff}
  .l-step-ic{background:var(--c,var(--blue))}
}
.l-tile-ic .ic{width:25px; height:25px}
.l-tile h3{font-family:var(--font-display); font-size:19px; margin:14px 0 8px; color:var(--ink)}
.l-tile p{margin:0; color:var(--muted); font-weight:600; font-size:14.5px; line-height:1.6}
.l-tile .tag-row{margin-top:16px}
.l-minimap{display:flex; align-items:center; margin-top:20px}
.l-mini-node{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--c); border:3px solid #fff; box-shadow:0 0 0 2px var(--c), 0 5px 10px rgba(74,99,182,.18);
}
.l-mini-now{animation:nodepulse-sm 1.6s infinite}
@keyframes nodepulse-sm{
  0%,100%{box-shadow:0 0 0 2px var(--c), 0 0 0 0 rgba(255,176,32,.5)}
  50%{box-shadow:0 0 0 2px var(--c), 0 0 0 10px rgba(255,176,32,0)}
}
.l-minimap i{flex:1; height:4px; margin:0 2px; border-radius:99px; background:#e1e8ff}

/* --- planets --- */
.l-planets{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px}
.l-planet{
  display:flex; gap:18px; align-items:flex-start; padding:22px;
  border-left:6px solid var(--c,var(--blue)); transition:transform .25s, box-shadow .25s;
}
.l-planet:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.l-planet-ball{
  position:relative; flex:none; width:58px; height:58px; border-radius:50%; margin-top:4px;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 55%), var(--c,var(--blue));
  box-shadow:0 10px 20px rgba(74,99,182,.22), inset -6px -8px 16px rgba(0,0,0,.12);
}
.l-planet-ball i{
  position:absolute; left:-16%; top:44%; width:132%; height:12px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.75); transform:rotate(-16deg);
  box-shadow:0 1px 2px rgba(74,99,182,.18);
}
.l-planet-stage{font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--c,var(--blue))}
.l-planet h3{font-family:var(--font-display); font-size:21px; margin:4px 0 6px; color:var(--ink)}
.l-planet p{margin:0; color:var(--muted); font-weight:600; font-size:14.5px; line-height:1.55}

/* --- final CTA banner --- */
.l-banner{
  position:relative; overflow:hidden; text-align:center;
  margin:20px 0 30px; padding:64px 30px 60px; border-radius:32px; color:#fff;
  background:
    radial-gradient(500px 260px at 82% -20%, rgba(255,255,255,.22), transparent),
    radial-gradient(420px 260px at 8% 110%, rgba(255,95,162,.35), transparent),
    linear-gradient(115deg,var(--blue),var(--purple) 58%, #7b4dff);
  box-shadow:0 24px 54px rgba(94,84,255,.35);
}
.l-banner h2{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,44px); margin:0}
.l-banner p{margin:12px auto 26px; max-width:440px; color:rgba(255,255,255,.85); font-weight:600; font-size:16px}
.btn-white{
  display:inline-flex; align-items:center; gap:10px; padding:17px 30px; border-radius:17px;
  background:#fff; color:var(--blue); text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:17px;
  box-shadow:0 12px 28px rgba(20,24,60,.28); transition:transform .18s, box-shadow .2s;
}
.btn-white:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 18px 36px rgba(20,24,60,.34)}
.l-banner-star{position:absolute; color:rgba(255,255,255,.5); animation:spin 14s linear infinite}
.l-banner-star .ic{width:30px; height:30px}
.l-bs-1{left:8%; top:22%}
.l-bs-2{right:10%; top:30%; animation-duration:20s}
.l-bs-3{left:22%; bottom:14%; animation-duration:26s}
.l-bs-2 .ic{width:20px; height:20px}
.l-bs-3 .ic{width:16px; height:16px}

/* --- landing footer tweak --- */
.landing .site-footer{position:relative; z-index:2}

/* --- responsive --- */
@media(max-width:980px){
  .l-hero{grid-template-columns:1fr; gap:56px; padding-top:44px; text-align:center}
  .l-sub{margin-left:auto; margin-right:auto}
  .l-cta-row,.l-stats{justify-content:center}
  .l-hero-visual{max-width:480px; margin:0 auto; width:100%}
  .l-steps{grid-template-columns:1fr}
  .l-bento{grid-template-columns:1fr 1fr}
  .l-tile,.l-tile-wide{grid-column:span 1}
}
@media(max-width:760px){
  .l-links{display:none}
  .l-planets{grid-template-columns:1fr}
  .l-stats{gap:24px}
  .l-float-1{left:0}
  .l-float-2{right:0}
  .l-float-3{left:0; bottom:0}
}
@media(max-width:520px){
  .l-nav{margin:10px; top:8px}
  .btn-nav{padding:10px 14px; font-size:14px}
  .l-hero{padding-left:16px; padding-right:16px}
  .l-stat dt{font-size:27px}
  .btn-big{padding:15px 22px; font-size:15.5px}
  .l-section{padding-left:16px; padding-right:16px; padding-top:60px}
  .l-banner{border-radius:24px; padding:48px 22px}
}

@media(prefers-reduced-motion:reduce){
  .l-blob,.l-orbit-a,.l-orbit-b,.l-road-dash,.l-now,.l-play-tag,.l-xp-fill::after,
  .l-float,.l-marquee-track,.l-pulse,.l-mini-now,.l-banner-star,
  .l-chip,.l-hero h1,.l-sub,.l-cta-row,.l-stats,.l-hero-visual{animation:none}
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* auth page: logo links back to the landing page */
.logo-link{display:block; text-decoration:none}
.foot-link{color:var(--muted); font-weight:800; text-decoration:none}
.foot-link:hover{color:var(--blue); text-decoration:underline}

/* ============================================================
 *  DASHBOARD POLISH — glass topbar, gradient heading, softer map
 * ============================================================ */
.app-page .topbar{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.journey-intro h1{
  font-size:clamp(32px, 4.4vw, 42px);
  background:linear-gradient(95deg,var(--blue),var(--purple) 45%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.journey-intro p{max-width:540px; margin:.5em auto 0; font-size:15.5px}
.map-foot{
  background:rgba(255,255,255,.85); border:1.5px solid var(--line);
  border-radius:18px; padding:16px 22px; box-shadow:var(--shadow-sm);
}
.node-label{text-shadow:0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(243,246,255,.9)}

/* ============================================================
 *  ARCADE — one educational mini-game per world
 * ============================================================ */
/* "Play" button inside each stage banner */
.banner-play{
  display:inline-flex; align-items:center; gap:6px; margin-left:2px;
  border:none; cursor:pointer; padding:7px 13px; border-radius:99px; color:#fff;
  background:var(--c,var(--blue));
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  box-shadow:0 4px 10px rgba(74,99,182,.28); transition:transform .15s, filter .15s;
}
.banner-play .ic{width:17px; height:17px}
.banner-play:hover{transform:scale(1.09); filter:saturate(1.2) brightness(1.05)}
.banner-play:active{transform:scale(1.0)}

/* modal card */
.arcade-card{max-width:600px}
.arcade-head{text-align:center; margin-top:4px}
.arcade-world{
  display:inline-block; padding:5px 13px; border-radius:99px; color:#fff;
  background:var(--planet-color, var(--blue));
  font-weight:800; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase;
}
.arcade-title{font-family:var(--font-display); font-size:27px; margin:.25em 0 .1em; color:var(--ink)}
.arcade-tagline{margin:0; color:var(--muted); font-weight:600; font-size:14px}
.arcade-hud{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin:14px 0 4px}
.hud-chip{
  display:inline-flex; gap:7px; align-items:center;
  background:#f4f6ff; border:1.5px solid var(--line); padding:7px 14px; border-radius:99px;
  font-size:12.5px; font-weight:800; color:var(--muted);
}
.hud-chip i{font-style:normal}
.hud-chip b{color:var(--ink); display:inline-flex; align-items:center; gap:2px}
.hud-heart{color:#ff5fa2; display:inline-flex}
.hud-heart .ic{width:15px; height:15px}
.hud-heart.out{color:#dfe5f6}
.arcade-stage{margin-top:14px}

/* shared bits */
.oh-ask{font-weight:800; color:var(--ink); margin:0 0 12px; text-align:center}
.oh-why{
  margin:14px 0 0; background:#f5f7ff; border:1.5px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:13.5px; font-weight:700; color:#46507a; text-align:center;
}
.oh-next{margin:14px auto 0; width:auto; display:block; padding:12px 26px}
.rr-msg{min-height:20px; margin:0; text-align:center; font-weight:700; color:var(--muted); font-size:14px}
@keyframes ashake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)} 75%{transform:translateX(-3px)}
}

/* end-of-game panel */
.arcade-end{text-align:center; padding:26px 8px 10px}
.arcade-end-ic{display:grid; place-items:center}
.arcade-end-ic .ic{width:54px; height:54px; color:var(--gold)}
.arcade-end.is-win .arcade-end-ic .ic{animation:spin 8s linear infinite}
.arcade-end h3{font-family:var(--font-display); font-size:24px; margin:.4em 0 .15em; color:var(--ink)}
.arcade-end p{margin:0; color:var(--muted); font-weight:700}
.arcade-again{margin-top:16px; width:auto; padding:13px 28px}

/* ---- Robo Runner ---- */
.rr-wrap{display:flex; flex-direction:column; gap:12px; align-items:center}
.rr-board{width:100%; max-width:330px; background:#e8edff; padding:8px; border-radius:16px; border:2px solid var(--line)}
.rr-grid{position:relative; display:grid; border-radius:10px; overflow:hidden}
.rr-cell{
  aspect-ratio:1/1; background:#fff; border:2.5px solid #e8edff; border-radius:9px;
  display:grid; place-items:center; padding:7px;
}
.rr-cell svg{width:82%; height:82%}
.rr-cell .ic{width:58%; height:58%}
.rr-cell.rr-star{background:#fff7e2; color:var(--gold)}
.rr-cell.rr-rock{background:#f2f4fc}
.rr-bot{
  position:absolute; left:0; top:0; display:grid; place-items:center; padding:7px; z-index:2;
  transition:left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.rr-bot svg{width:86%; height:86%; filter:drop-shadow(0 4px 8px rgba(74,99,182,.3))}
.rr-crash{animation:ashake .5s}
.rr-sad{animation:rrsad .7s}
@keyframes rrsad{0%,100%{opacity:1}50%{opacity:.45}}
.rr-queue{
  min-height:46px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
  background:#f7f9ff; border:1.5px dashed #cfd8f2; border-radius:14px; padding:8px 10px; width:100%;
}
.rr-hint{color:var(--muted); font-size:12.5px; font-weight:700}
.rr-q{
  width:34px; height:34px; border-radius:10px; border:none; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple)); display:grid; place-items:center;
  transition:.15s;
}
.rr-q .ic{width:18px; height:18px}
.rr-q:hover{filter:brightness(1.12); transform:scale(1.08)}
.rr-pad{display:grid; grid-template-columns:repeat(4, 56px); gap:8px; justify-content:center}
.rr-key{
  height:52px; border-radius:14px; border:2px solid var(--line); background:#fff; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:.15s; box-shadow:var(--shadow-sm);
}
.rr-key:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}
.rr-key .ic{width:24px; height:24px}
.rr-actions{display:flex; gap:10px; width:100%; max-width:330px}
.rr-go{flex:1; margin-top:0; padding:13px}
.rr-clear{flex:0 0 auto; width:auto; padding:13px 18px; margin:0}

/* ---- Output Hunter / quiz shared ---- */
.oh-wrap{text-align:center}
.code-block{
  background:#20263f; color:#dbe4ff; text-align:left; border-radius:14px; padding:15px 18px;
  font-family:'Menlo','Consolas','Courier New',monospace; font-size:14px; line-height:1.6;
  white-space:pre-wrap; margin:0 0 14px; box-shadow:inset 0 0 0 1.5px #323a5e;
}
.oh-choices{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.oh-chip{
  padding:11px 20px; border-radius:13px; border:2px solid var(--line); background:#fff;
  font-family:'Menlo','Consolas',monospace; font-weight:700; font-size:14px; color:var(--ink);
  cursor:pointer; transition:.15s;
}
.oh-chip:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}
.oh-chip.is-right{background:#e6fbef; border-color:var(--green); color:#179a52}
.oh-chip.is-wrong{background:#fff0f3; border-color:#f5536b; color:#d23365; animation:ashake .4s}

/* ---- Bug Zapper ---- */
.bz-wrap{text-align:center}
.bz-code{display:flex; flex-direction:column; gap:6px; text-align:left}
.bz-line{
  display:flex; gap:10px; align-items:center; width:100%;
  border:2px solid transparent; background:#20263f; color:#dbe4ff; border-radius:11px;
  padding:10px 14px; font-size:13.5px; cursor:pointer; transition:.15s; text-align:left;
}
.bz-line code{font-family:'Menlo','Consolas',monospace; white-space:pre}
.bz-line:hover{border-color:var(--blue); transform:translateX(3px)}
.bz-n{
  flex:none; width:22px; height:22px; border-radius:7px; background:#323a5e; color:#9fb0e8;
  display:grid; place-items:center; font-size:11px; font-weight:800; font-family:var(--font);
}
.bz-line.is-wrong{border-color:#f5536b; animation:ashake .4s}
.bz-line.is-bug{border-color:var(--green); background:#173428; color:#b8f5cf}
.bz-line.is-bug .bz-n{background:#1f5c3d; color:#b8f5cf}

/* ---- Asteroid Sort ---- */
.as-wrap{text-align:center}
.as-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px}
.as-rock{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.4), transparent 55%), linear-gradient(135deg,#8a97c9,#5d6ca3);
  box-shadow:0 8px 16px rgba(74,99,182,.28); transition:.15s; display:grid; place-items:center;
}
.as-rock:hover{transform:translateY(-3px)}
.as-rock.is-sel{
  outline:3px solid var(--gold); transform:scale(1.12);
  box-shadow:0 0 0 5px rgba(255,176,32,.22), 0 10px 20px rgba(74,99,182,.3);
}
.as-star{color:#dfe5f6; display:inline-block; vertical-align:-4px; margin-left:2px}
.as-star.on{color:var(--gold)}
.as-star .ic{width:19px; height:19px; display:inline-block}

/* ---- Tag Match ---- */
.tm-wrap{text-align:center}
.tm-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.tm-card{position:relative; border:none; background:transparent; cursor:pointer; height:78px; padding:0; perspective:600px}
.tm-inner{position:absolute; inset:0; transition:transform .4s; transform-style:preserve-3d}
.tm-card.is-open .tm-inner,.tm-card.is-done .tm-inner{transform:rotateY(180deg)}
.tm-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:12px;
  padding:6px; line-height:1.25;
}
.tm-back{background:linear-gradient(135deg,var(--blue),var(--purple)); color:rgba(255,255,255,.9)}
.tm-back .ic{width:22px; height:22px}
.tm-front{background:#fff; border:2px solid var(--line); transform:rotateY(180deg); color:var(--ink)}
.tm-front.is-code{font-family:'Menlo','Consolas',monospace; background:#20263f; color:#dbe4ff; border-color:#20263f}
.tm-card.is-done .tm-front{border-color:var(--green); box-shadow:0 0 0 2.5px rgba(34,197,94,.3)}
.tm-card.is-done{cursor:default}

/* ---- Planet Echo ---- */
.pe-wrap{text-align:center}
.pe-ring{display:grid; grid-template-columns:repeat(2, 108px); gap:16px; justify-content:center; margin:12px 0 16px}
.pe-planet{
  width:108px; height:108px; border-radius:50%; border:4px solid #fff; cursor:pointer;
  box-shadow:0 10px 20px rgba(74,99,182,.24);
  transition:transform .12s, filter .15s, box-shadow .15s;
  filter:saturate(.55) brightness(.95);
}
.pe-planet.is-lit{
  filter:saturate(1.3) brightness(1.14); transform:scale(1.09);
  box-shadow:0 0 26px rgba(255,214,74,.55), 0 10px 24px rgba(74,99,182,.3);
}
.pe-planet:active{transform:scale(.96)}

/* ---- arcade responsive ---- */
@media(max-width:560px){
  .tm-grid{grid-template-columns:repeat(3,1fr)}
  .pe-ring{grid-template-columns:repeat(2, 92px)}
  .pe-planet{width:92px; height:92px}
  .rr-pad{grid-template-columns:repeat(4, 50px)}
  .rr-key{height:46px}
  .as-rock{width:50px; height:50px; font-size:17px}
  .banner-play{padding:6px 10px; font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .rr-bot{transition:none}
  .tm-inner{transition:none}
  .arcade-end.is-win .arcade-end-ic .ic{animation:none}
}

/* ============================================================
 *  ARCADE v2 — stories, chapters, and the new game engines
 * ============================================================ */
.arcade-card{max-width:640px}

/* story screen */
.story{text-align:center; padding:6px 6px 10px}
.story-hero{width:96px; margin:0 auto 6px; filter:drop-shadow(0 10px 18px rgba(74,99,182,.25)); animation:float 3s ease-in-out infinite}
.story-hero svg{width:100%; height:auto}
.story-p{max-width:440px; margin:12px auto 0; color:#46507a; font-weight:600; font-size:14.5px; line-height:1.65; text-align:center}
.story .oh-next{margin-top:20px}

/* chapter select */
.ch-select{padding:4px 2px}
.ch-done{text-align:center; font-weight:800; color:#179a52; background:#e6fbef; border:1.5px solid #bff0d2; border-radius:12px; padding:10px 14px; margin:0 0 12px}
.ch-list{display:flex; flex-direction:column; gap:10px}
.ch-card{
  text-align:left; border:2px solid var(--line); background:#fbfcff; border-radius:16px;
  padding:14px 16px; cursor:pointer; transition:.18s; font-family:inherit;
}
.ch-card:hover:not(.is-locked){border-color:var(--planet-color,var(--blue)); transform:translateX(4px); background:#fff}
.ch-card.is-locked{opacity:.55; cursor:default}
.ch-head{display:flex; align-items:center; gap:10px}
.ch-num{
  flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--planet-color,var(--blue)); color:#fff; font-weight:800; font-size:14px;
}
.ch-num .ic{width:15px; height:15px}
.ch-head h3{font-family:var(--font-display); font-size:16.5px; margin:0; color:var(--ink)}
.ch-card p{margin:7px 0 0; color:var(--muted); font-weight:600; font-size:13px}
.ch-stars{margin-top:8px}
.ch-stars .as-star .ic{width:16px; height:16px}
.ch-foot{margin-top:12px}
.ch-story-btn{font-size:13px; padding:11px}
.end-stars{margin:6px 0 2px}
.end-stars .as-star .ic{width:26px; height:26px}
.end-finale{font-weight:800; color:var(--purple); max-width:420px; margin:10px auto 0 !important}
.end-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.end-btns .arcade-again{margin-top:0}
.arcade-map-btn{width:auto; padding:13px 22px}

/* grid quest additions */
.rr-cell.rr-starcell{background:#fff7e2; color:var(--gold)}
.rr-cell.rr-starcell.rr-got{background:#e6fbef; color:#b7e6c8}
.rr-cell.rr-flag{background:#f0edff; color:var(--purple)}
.rr-q i{font-style:normal; font-size:11px; font-weight:800; margin-right:2px}
.rr-pad-wide{grid-template-columns:repeat(7, minmax(38px, 52px))}
.rr-mult{
  height:52px; border-radius:14px; border:2px solid var(--line); background:#fff; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted); transition:.15s;
}
.rr-mult.on{border-color:var(--purple); color:var(--purple); background:#f4f0ff; box-shadow:0 0 0 3px rgba(154,107,255,.15)}

/* order puzzle (chains + code lines) */
.chain-list{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.chain-card{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:2px solid var(--line); background:#fff; border-radius:13px; padding:11px 14px;
  cursor:pointer; transition:.15s; font-family:inherit; font-weight:700; font-size:13.5px; color:var(--ink);
}
.chain-card:hover{border-color:var(--blue)}
.chain-card.is-set{border-color:var(--green); background:#effdf4; cursor:default}
.chain-card.is-no{border-color:#f5536b; animation:ashake .4s}
.chain-slot{
  flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:#eef1fb; color:var(--muted); font-weight:800; font-size:13px;
}
.chain-card.is-set .chain-slot{background:var(--green); color:#fff}
.chain-text{line-height:1.35}

/* binary search scanner */
.bs-wrap{text-align:center}
.bs-bar{position:relative; height:20px; border-radius:99px; background:#eaeefb; border:1.5px solid var(--line); overflow:hidden; margin:12px 0}
.bs-fill{position:absolute; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,#8fd8ff,var(--blue)); opacity:.75; transition:left .3s, width .3s}
.bs-disp{
  min-height:40px; display:grid; place-items:center; font-family:var(--font-display); font-size:22px; color:var(--ink);
  background:#20263f; color:#8fe3ff; border-radius:12px; padding:6px; margin-bottom:10px; letter-spacing:2px;
}
.bs-disp i{font-style:normal; font-size:13px; color:#7b85ac; letter-spacing:0}
.bs-pad{display:grid; grid-template-columns:repeat(6, 1fr); gap:7px}
.bs-key{
  padding:12px 0; border-radius:11px; border:2px solid var(--line); background:#fff; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); transition:.15s;
}
.bs-key:hover{border-color:var(--blue); color:var(--blue)}
.bs-back{color:#d23365}
.bs-scan{grid-column:span 2; background:linear-gradient(95deg,var(--blue),var(--purple)); border:none; color:#fff}
.bs-scan:hover{color:#fff; filter:brightness(1.1)}

/* web builder */
.wb-wrap{display:flex; flex-direction:column; gap:14px}
.wb-browser{border:2px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.wb-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#eef1fb; border-bottom:1.5px solid var(--line)}
.wb-url{margin-left:8px; background:#fff; border-radius:8px; padding:4px 12px; font-size:12px; font-weight:700; color:var(--muted); flex:1; text-align:left}
.wb-page{padding:16px 18px 20px; min-height:120px; text-align:left; transition:background .3s, color .3s}
.wb-page.wq-dark{background:#20263f; color:#dbe4ff}
.wq-h1{font-family:var(--font-display); font-size:24px; margin:0 0 8px}
.wq-img{display:block; background:linear-gradient(135deg,#ffd9ea,#cdd9ff); border-radius:4px; padding:22px 10px; text-align:center; font-weight:800; color:#7b85ac; font-size:12px; margin:8px 0; max-width:220px}
.wq-ul{margin:8px 0; padding-left:20px; font-weight:600; font-size:14px}
.wq-a{color:var(--blue); text-decoration:underline; font-weight:700; font-size:14px}
.wq-btn{margin-top:10px; padding:9px 16px; border:2px solid #cfd8f2; border-radius:9px; background:#f4f6ff; font-weight:800; cursor:pointer; font-family:inherit; display:block}
.wq-footer{margin-top:14px; padding-top:8px; border-top:1.5px dashed #cfd8f2; font-size:12px; font-weight:700; color:var(--muted)}
.wq-count{margin-top:8px; font-weight:800; font-size:13px; color:#179a52}
.wq-greet{margin-top:8px; font-weight:800; color:var(--purple)}
.wq-night{margin-top:10px; padding:7px 14px; border-radius:99px; border:2px solid #cfd8f2; background:#20263f; color:#ffd24a; font-weight:800; font-size:12px; cursor:pointer}
.wq-note{margin-top:8px; font-size:12px; font-weight:700; color:var(--muted)}
.wb-quiz .oh-choices{margin-top:4px}
.wb-choices .oh-chip{font-size:12.5px; padding:10px 14px}

/* git terminal */
.gt-term{
  background:#20263f; color:#dbe4ff; border-radius:12px; padding:13px 15px; text-align:left;
  font-family:'Menlo','Consolas',monospace; font-size:13px; line-height:1.6; white-space:pre-wrap;
  margin:0 0 12px; min-height:52px; box-shadow:inset 0 0 0 1.5px #323a5e;
}
.gt-prompt{color:#8fe3ff}
.gt-ok{color:#7ce7a7}
.gt-err{color:#ff8fa8}
.gt-cursor{display:inline-block; width:8px; height:15px; background:#8fe3ff; vertical-align:-2px; animation:gtblink 1s steps(1) infinite}
@keyframes gtblink{50%{opacity:0}}
.gt-choices .oh-chip{font-size:13px}
.gt-conflict{border-left:4px solid #f5536b}
.gt-res{display:flex; flex-direction:column; gap:9px}
.gt-res-opt{
  border:2px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; padding:0; overflow:hidden;
  transition:.15s; text-align:left;
}
.gt-res-opt:hover{border-color:var(--blue)}
.gt-res-opt pre{
  margin:0; padding:11px 14px; font-family:'Menlo','Consolas',monospace; font-size:12.5px; line-height:1.55;
  color:var(--ink); white-space:pre-wrap;
}
.gt-res-opt.is-right{border-color:var(--green); background:#effdf4}
.gt-res-opt.is-wrong{border-color:#f5536b; background:#fff0f3; animation:ashake .4s}

/* SQL playground */
.sql-wrap{text-align:center}
.sql-table{
  width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 0 0 1.5px var(--line);
}
.sql-table th{background:#eef1fb; color:var(--ink); font-weight:800; padding:8px 10px; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
.sql-table td{padding:8px 10px; border-top:1px solid #eef1fb; text-align:left; font-weight:600; color:#46507a}
.sql-empty{color:var(--muted); font-weight:700; padding:10px}
.sql-slot{display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap}
.sql-kw{
  flex:none; font-family:'Menlo','Consolas',monospace; font-weight:700; font-size:13px;
  background:#20263f; color:#8fe3ff; padding:7px 12px; border-radius:9px; min-width:64px; text-align:center;
}
.sql-opts{display:flex; gap:7px; flex-wrap:wrap}
.sql-opt{
  padding:8px 14px; border-radius:10px; border:2px solid var(--line); background:#fff; cursor:pointer;
  font-family:'Menlo','Consolas',monospace; font-weight:700; font-size:12.5px; color:var(--ink); transition:.15s;
}
.sql-opt:hover{border-color:var(--blue); color:var(--blue)}
.sql-opt.on{border-color:var(--purple); color:var(--purple); background:#f4f0ff; box-shadow:0 0 0 3px rgba(154,107,255,.14)}
.sql-echo{font-size:13px; padding:11px 14px; margin:10px 0 4px}
.sql-out{margin-top:10px}
.sql-out .oh-next{margin-top:12px}

/* join matching */
.jn-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px}
.jn-col h4{margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800}
.jn-card{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; margin-bottom:8px;
  border:2px solid var(--line); border-radius:12px; background:#fff; padding:10px 13px; cursor:pointer; transition:.15s;
  font-family:inherit;
}
.jn-card b{font-size:14px; color:var(--ink)}
.jn-card span{font-size:11.5px; font-weight:700; color:var(--muted); font-family:'Menlo','Consolas',monospace}
.jn-card:hover{border-color:var(--blue)}
.jn-card.is-sel{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,176,32,.2)}
.jn-card.is-done{border-color:var(--green); background:#effdf4; cursor:default}
.jn-card.is-no{border-color:#f5536b; animation:ashake .4s}

/* API console */
.api-wrap{text-align:center}
.api-out{margin-top:12px}
.api-flight{position:relative; height:34px; overflow:hidden; border-radius:10px; background:#eef1fb; border:1.5px dashed #cfd8f2}
.api-pkt{
  position:absolute; top:50%; transform:translateY(-50%); left:-40%;
  font-family:'Menlo','Consolas',monospace; font-weight:700; font-size:12px; color:#fff;
  background:linear-gradient(95deg,var(--blue),var(--purple)); padding:5px 12px; border-radius:99px;
  animation:apifly .65s ease-in forwards;
}
@keyframes apifly{to{left:105%}}
.api-res{border-radius:13px; overflow:hidden; text-align:left; margin-top:10px; box-shadow:0 0 0 2px var(--line)}
.api-res.is-ok{box-shadow:0 0 0 2px #bff0d2}
.api-res.is-err{box-shadow:0 0 0 2px #ffc2d1}
.api-status{padding:9px 14px; font-weight:800; font-size:13px; background:#eef1fb; color:var(--ink)}
.api-res.is-ok .api-status{background:#e6fbef; color:#179a52}
.api-res.is-err .api-status{background:#fff0f3; color:#d23365}
.api-res pre{
  margin:0; padding:12px 14px; background:#20263f; color:#8fe3ff;
  font-family:'Menlo','Consolas',monospace; font-size:12.5px; line-height:1.6; white-space:pre-wrap;
}
.st-choices .oh-chip{font-family:var(--font); font-size:13px}

@media(max-width:560px){
  .jn-cols{grid-template-columns:1fr}
  .bs-pad{grid-template-columns:repeat(4,1fr)}
  .bs-scan{grid-column:span 2}
  .rr-pad-wide{grid-template-columns:repeat(7, minmax(34px, 44px))}
}
@media(prefers-reduced-motion:reduce){
  .story-hero,.gt-cursor,.api-pkt{animation:none}
  .api-pkt{left:auto; right:8px}
}

/* Data Vault v2 — clickable table rows/columns and filter picking */
.sql-table.is-clicky .sql-tr-btn{cursor:pointer; transition:background .12s}
.sql-table.is-clicky .sql-tr-btn:hover td{background:#f0f4ff}
.sql-table .sql-th-btn{cursor:pointer; transition:.12s}
.sql-table .sql-th-btn:hover{background:#dfe7ff; color:var(--blue)}
.sql-table th.is-right-cell{background:#c9f3da; color:#179a52}
.sql-table th.is-wrong-cell{background:#ffd6df; color:#d23365}
.sql-table tr.is-right-row td{background:#e6fbef}
.sql-table tr.is-wrong-row td{background:#fff0f3}
.sql-table tr.is-pick td{background:#e7ecff; box-shadow:inset 3px 0 0 var(--blue)}

/* ============================================================
 *  ARCADE v3 — visual chapter hero, Scratch blocks, bulbs, sniper
 * ============================================================ */
.ch-hero{
  position:relative; height:92px; border-radius:18px; margin-bottom:12px; overflow:hidden;
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(94,84,255,.25);
}
.ch-hero-art{width:64px; height:64px; display:block; filter:drop-shadow(0 6px 10px rgba(20,24,60,.3)); animation:float 3s ease-in-out infinite}
.ch-hero-art svg{width:100%; height:100%}

/* Scratch-style blocks (self-drawn, no trademarks) */
.scb-stack{display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0 0 14px; text-align:left}
.scb{
  color:#fff; font-weight:700; font-size:13px; font-family:var(--font);
  padding:8px 14px; border-radius:8px; box-shadow:0 2px 0 rgba(0,0,0,.18);
  white-space:nowrap;
}
.scb-hat{border-radius:16px 16px 8px 8px}
.scb-event{background:#f5c400; color:#5b4a00}
.scb-control{background:#ffab19}
.scb-motion{background:#4c97ff}
.scb-looks{background:#9966ff}
.scb-sensing{background:#5cb1d6}
.scb-variables{background:#ff8c1a}
.scb-sound{background:#cf63cf}
@media(max-width:560px){ .scb{font-size:11.5px; padding:7px 10px; white-space:normal} }

/* binary bulbs */
.bulb-row{display:flex; gap:14px; justify-content:center; margin:6px 0 16px}
.bulb-cell{display:flex; flex-direction:column; align-items:center; gap:4px}
.bulb-svg{width:44px; height:57px}
.bulb-cell.on .bulb-svg{filter:drop-shadow(0 0 10px rgba(255,210,74,.8))}
.bulb-cell span{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted)}
.bulb-cell.on span{color:var(--gold)}

/* selector sniper */
.sel-el{
  display:block; width:100%; text-align:left; margin:7px 0; padding:10px 12px;
  border:2px dashed #dfe5f6; border-radius:10px; background:#fbfcff; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13.5px; color:var(--ink); transition:.15s;
}
.sel-el:hover{border-color:var(--blue); background:#f0f4ff}
.sel-el .sel-tag{
  display:inline-block; margin-right:10px; padding:2px 8px; border-radius:6px;
  background:#20263f; color:#8fe3ff; font-family:'Menlo','Consolas',monospace; font-size:10.5px; font-weight:700;
}
.sel-el.is-hit{border:3px solid var(--gold); background:#fff7e2; box-shadow:0 0 0 3px rgba(255,176,32,.25)}
.sel-el.is-miss{border-color:#f5536b; animation:ashake .4s}
.sel-code{margin-bottom:12px}