/* Space School — Mission Run (course map for enrolled students) */
.mr-head{padding:30px 22px 6px}
.mr-head h1{font-size:clamp(34px,4.6vw,58px);margin-top:6px}
.cs-backmap{display:inline-block;margin-bottom:10px;color:var(--sky);font-weight:800;text-decoration:none}
.mr{position:relative}

/* ---------- HUD ---------- */
.mr-hud{position:sticky;top:73px;z-index:12;margin:10px auto 0;max-width:1100px;padding:12px 16px;border-radius:24px;background:rgba(10,16,60,.82);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(0,0,0,.3);display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center}
.admin-bar .mr-hud{top:105px}
.mr-hud-l{display:flex;align-items:center;gap:12px}
.mr-ring{position:relative;width:52px;height:52px}
.mr-ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.mr-ring circle{fill:none;stroke-width:5}
.mr-ring .t{stroke:rgba(255,255,255,.12)}
.mr-ring .v{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p))}
.mr-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 14px Fredoka,sans-serif}
.mr-hud-t{display:block;font:700 18px Fredoka,sans-serif;color:#fff}
.mr-hud-s{color:var(--muted);font-weight:700;font-size:13.5px}
.mr-star{display:inline-block;width:14px;height:14px;vertical-align:-2px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mr-hud-r{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.mr-go{flex-direction:column;align-items:flex-start;line-height:1.15;padding:9px 20px}
.mr-go small{font-weight:700;font-size:12px;opacity:.85;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-details{color:var(--muted);font-weight:700;font-size:14px}
.mr-chips{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mr-chips::-webkit-scrollbar{display:none}
.mr-chips a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.mr-chips a i{width:9px;height:9px;border-radius:50%;background:var(--zc);box-shadow:0 0 8px var(--zc)}
.mr-chips a small{color:var(--muted)}
.mr-chips a.is-done{border-color:color-mix(in srgb,var(--zc) 70%,transparent);background:color-mix(in srgb,var(--zc) 18%,transparent)}

/* ---------- map ---------- */
.mr-map{position:relative;max-width:900px;margin:0 auto;padding:30px 16px 60px}
.mr-trail{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.mr-trail .all{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 14}
.mr-trail .lit{fill:none;stroke:url(#mrGrad);stroke:#ffd36b;stroke-width:7;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--lit,0));filter:drop-shadow(0 0 8px rgba(255,211,107,.8))}
.mr-zone{position:relative;z-index:1;padding:10px 0 20px}
.mr-zone::before{content:"";position:absolute;inset:0 -60px;background:radial-gradient(60% 50% at 50% 50%,color-mix(in srgb,var(--zc) 16%,transparent),transparent 75%);pointer-events:none;z-index:-1}
.mr-stop{position:relative;height:150px}
.mr-stop>*{position:absolute;left:var(--x,50%)}
.mr-node{top:22px;width:88px;height:88px;margin-left:-44px;padding:0;border:0;background:none;cursor:pointer;color:#fff;border-radius:50%;animation:mrfloat 5s ease-in-out infinite;animation-delay:calc(var(--d,0) * -0.6s);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.mr-node:hover,.mr-node:focus-visible{transform:scale(1.12)}
@keyframes mrfloat{50%{translate:0 -7px}}
.mr-shape{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--zc);filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));transition:filter .3s}
.mr-shape svg{width:38%;height:38%;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
/* lesson = planet */
.t-lesson .mr-shape{border-radius:50%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,#fff 55%,var(--zc)),var(--zc) 48%,color-mix(in srgb,#000 45%,var(--zc)));box-shadow:inset -8px -10px 18px rgba(0,0,0,.3)}
.t-lesson .mr-shape::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 70%,rgba(0,0,0,.18) 0 9%,transparent 10%),radial-gradient(circle at 30% 70%,rgba(0,0,0,.14) 0 6%,transparent 7%)}
/* quiz = crystal */
.t-quiz .mr-shape{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);background:linear-gradient(135deg,color-mix(in srgb,#fff 50%,var(--zc)) 0,var(--zc) 45%,color-mix(in srgb,#000 40%,var(--zc)) 100%)}
.t-quiz .mr-shape::before{content:"";position:absolute;left:25%;top:4%;width:50%;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);clip-path:polygon(0 0,100% 0,75% 100%,25% 100%)}
/* task = launch pad */
.t-task .mr-shape{border-radius:24px;transform:rotate(45deg) scale(.86);background:linear-gradient(135deg,color-mix(in srgb,#fff 40%,var(--zc)),var(--zc) 50%,color-mix(in srgb,#000 40%,var(--zc)));box-shadow:inset 0 0 0 5px rgba(255,255,255,.18)}
.t-task .mr-shape svg{transform:rotate(-45deg)}
/* final = gold star */
.t-final{width:120px;height:120px;margin-left:-60px;top:6px}
.t-final .mr-shape{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:linear-gradient(160deg,#fff6c7,#ffd36b 35%,#f59e0b 70%,#b45309)}
.t-final .mr-shape svg{width:30%;height:30%;color:#7c2d12;margin-top:10%}

/* states */
.mr-node:not(.is-done):not(.is-current) .mr-shape{filter:saturate(.55) brightness(.85) drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.mr-node.is-done .mr-shape{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--zc) 70%,transparent)) drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.mr-node.is-locked{cursor:not-allowed}
.mr-node.is-locked .mr-shape{filter:grayscale(1) brightness(.55)!important}
.mr-lock{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9px;background:#1b2340;border:2px solid rgba(255,255,255,.5);z-index:2}
.mr-lock::before{content:"";position:absolute;left:6px;top:-11px;width:14px;height:14px;border:3px solid rgba(255,255,255,.7);border-bottom:0;border-radius:10px 10px 0 0}
.mr-check{position:absolute;right:-2px;top:-2px;width:28px;height:28px;border-radius:50%;background:#22c55e;border:3px solid #0a1140;z-index:2}
.mr-check::after{content:"";position:absolute;left:8px;top:4px;width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.mr-node.is-current{transform:scale(1.14);z-index:3}
.mr-node.is-current::before,.mr-node.is-current::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px solid var(--gold);animation:mrpulse 2s ease-out infinite;pointer-events:none}
.mr-node.is-current::after{animation-delay:1s}
@keyframes mrpulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.45);opacity:0}}
.mr-stars{top:116px;margin-left:-36px;width:72px;display:flex;justify-content:center;gap:3px}
.mr-stars i{width:20px;height:20px;background:rgba(255,255,255,.18);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mr-stars i.on{background:linear-gradient(160deg,#fff6c7,#ffd36b 45%,#f59e0b);animation:mrstar .5s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(var(--k) * .12s + .4s)}
.mr-stars i:nth-child(2){transform:translateY(-5px)}
@keyframes mrstar{from{transform:scale(0) rotate(-90deg)}}
.mr-label{top:136px;width:150px;margin-left:-75px;text-align:center;font-weight:800;font-size:13px;color:#dfe5ff;line-height:1.25;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.mr-stop:has(.mr-stars) .mr-label{top:140px}
.mr-buddy{top:-74px;height:100px;margin-left:-50px;width:100px;object-fit:contain;z-index:4;pointer-events:none;animation:mrhop 1.6s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))}
@keyframes mrhop{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}55%{transform:translateY(-14px)}}

/* module gate */
.mr-gate{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 6px}
.mr-robot{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));animation:mrfloat 6s ease-in-out infinite}
.mr-bubble{position:relative;padding:12px 16px;border-radius:20px;background:#fff;color:#1b2340;max-width:260px;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.mr-bubble::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-right-color:#fff;border-left:0}
.mr-bubble small{display:block;color:color-mix(in srgb,var(--zc) 80%,#000);font-weight:800}
.mr-bubble b{display:block;font:700 20px Fredoka,sans-serif;color:#1b2340}
.mr-bubble span{display:block;font-size:13.5px;color:#475569;font-weight:700}

/* start + finish */
.mr-start{position:relative;z-index:1;display:flex;justify-content:center;margin-top:10px}
.mr-start span{padding:14px 40px;border-radius:50%/60%;background:linear-gradient(#3a4a7a,#1b2550);border:2px solid rgba(255,255,255,.2);font:700 20px Fredoka,sans-serif;letter-spacing:3px;color:#fff}
.mr-finish{position:relative;z-index:1;text-align:center;padding:10px 0 30px}
.mr-portal{position:relative;width:170px;height:170px;margin:0 auto}
.mr-portal i{position:absolute;inset:0;border-radius:50%;border:5px solid transparent;border-top-color:var(--gold);border-right-color:#5ee0ff;animation:csspin 4s linear infinite;opacity:.45}
.mr-portal i:nth-child(2){inset:16px;border-top-color:#f472b6;border-right-color:#a78bfa;animation-duration:6s;animation-direction:reverse}
.mr-portal i:nth-child(3){inset:32px;border-top-color:#4ade80;border-right-color:#fde047;animation-duration:3s}
.mr-portal span{position:absolute;inset:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;background:radial-gradient(circle,rgba(255,255,255,.15),rgba(10,16,60,.8));filter:grayscale(.6)}
.mr-finish.is-open .mr-portal i{opacity:1}
.mr-finish.is-open .mr-portal span{filter:none;background:radial-gradient(circle,#fff6c7,#f5a623 60%,#b45309);box-shadow:0 0 60px rgba(245,166,35,.8)}
.mr-finish h3{margin-top:12px;font-size:30px}
.mr-finish p{color:var(--muted);margin:6px 0 0}
.mr-nextlv{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:800;text-decoration:none}
.mr-nextlv img{width:48px;height:48px;object-fit:contain}
.mr-confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.mr-confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:mrfall linear forwards}
@keyframes mrfall{to{transform:translate3d(var(--dx),110vh,0) rotate(720deg)}}

/* ---------- bottom sheet ---------- */
.mr-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,6,30,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mr-sheet[hidden]{display:none}
.mr-sheet-in{position:relative;width:min(560px,100%);margin:0 12px 12px;padding:24px 22px 20px;border-radius:30px;background:linear-gradient(170deg,color-mix(in srgb,var(--zc,#5b3fd6) 35%,#16236a),#0c1550 70%);border:1px solid rgba(255,255,255,.18);box-shadow:0 -10px 60px rgba(0,0,0,.4);animation:mrup .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes mrup{from{transform:translateY(60px);opacity:0}}
.mr-x{position:absolute;right:14px;top:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}
.mr-sheet-k{margin:0;display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:800;font-size:13px}
.mr-sheet-in h3{font-size:28px;margin:10px 46px 8px 0}
.mr-sheet-info{color:#dfe5ff;font-weight:700;min-height:26px}
.mr-sheet-info .mr-stars{position:static;margin:6px 0 0;width:auto;justify-content:flex-start}
.mr-sheet-acts{display:flex;align-items:center;gap:10px;margin-top:16px}
.mr-sheet-acts .btn{flex:1}
.mr-sheet-acts .btn.is-disabled{background:rgba(255,255,255,.12);color:var(--muted);pointer-events:none}
.mr-nav{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:26px;cursor:pointer}
.mr-nav:disabled{opacity:.3;cursor:default}

@media (max-width:700px){
  .mr-hud{top:69px;grid-template-columns:1fr;padding:10px 12px;border-radius:18px;margin:8px 8px 0}
  .mr-hud-r{justify-content:space-between}
  .mr-go{flex:1}
  .mr-node{width:72px;height:72px;margin-left:-36px}
  .t-final{width:100px;height:100px;margin-left:-50px}
  .mr-stop{height:140px}
  .mr-stars{top:100px}.mr-label{top:122px;width:120px;margin-left:-60px;font-size:12px}
  .mr-buddy{height:80px;width:80px;margin-left:-40px;top:-58px}
  .mr-robot{width:80px;height:80px}.mr-bubble b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.mr-node,.mr-robot,.mr-buddy,.mr-portal i{animation:none}.mr-node.is-current::before,.mr-node.is-current::after{animation:none;opacity:.8}}
/* keep the zone glows and edge labels from widening the page on phones */
.mr{overflow-x:clip}
.mr-map{overflow-x:clip}

/* "in transit": still on its way from Earth */
.mr-node.is-transit{filter:grayscale(.75) brightness(.85);opacity:.85}
.mr-transit{position:absolute;right:-6px;top:-10px;font-size:20px;filter:drop-shadow(0 0 8px rgba(255,180,80,.8));animation:mrfly 1.6s ease-in-out infinite;pointer-events:none}
@keyframes mrfly{50%{transform:translate(3px,-5px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.mr-transit{animation:none}}
.mr-stage{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:3;padding:2px 9px;border-radius:999px;background:rgba(11,18,64,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fde68a;font:800 11.5px Nunito Sans,sans-serif;white-space:nowrap;pointer-events:none}
.mr-stage.s-bonus{color:#fbcfe8}.mr-stage.s-lesson{color:#a5f3fc}
