/* ============ Tokens ============ */
:root{
  --ink:#1E1B4B; --ink-2:#3B3670;
  --indigo:#4F46E5; --indigo-2:#818CF8;
  --accent:#EA580C; --amber:#F59E0B;
  --green:#2BB673; --violet:#7C3AED; --sky:#0EA5E9; --pink:#FF6B9A;
  --bg:#0E1230; --panel:#171C46;
  --line:#C7D2FE; --cream:#EEF2FF;
  --clay:0 8px 0 rgba(30,27,75,.16), 0 16px 30px rgba(30,27,75,.18);
  --clay-sm:0 5px 0 rgba(30,27,75,.14), 0 10px 18px rgba(30,27,75,.14);
  --radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(900px 600px at 85% -10%, #2A2F6B 0%, transparent 60%),
    radial-gradient(800px 500px at 5% 110%, #1B2C5C 0%, transparent 55%),
    linear-gradient(160deg,#0B0E24 0%, #131737 55%, #0B0E24 100%);
  color:#EEF2FF; min-height:100vh; padding:26px 18px 60px;
}
h1,h2,h3,.hero-title,.s7-title{font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif;margin:0}
.app{max-width:1180px;margin:0 auto}

/* ============ Stage ============ */
.stage-shell{
  position:relative;width:100%;aspect-ratio:16/9;margin:0 auto;
  border-radius:32px;padding:0;
  box-shadow:0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(199,210,254,.18) inset;
}
.stage{
  position:absolute;inset:0;width:1280px;height:720px;transform-origin:top left;
  border-radius:32px;overflow:hidden;background:#EEF2FF;
  color:var(--ink);isolation:isolate;
}
.scene{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;
  transform:scale(1.015);transition:opacity .75s ease, transform .9s ease}
.scene.active{opacity:1;transform:scale(1);pointer-events:auto;z-index:2}

/* entrance utilities */
.scene .up,.scene .pop,.scene .in,.scene .actor{opacity:0}
.scene.active .up{animation:upIn .75s var(--d,0s) cubic-bezier(.22,.95,.3,1.15) both}
.scene.active .pop{animation:popIn .7s var(--d,0s) cubic-bezier(.2,1.3,.4,1) both}
.scene.active .in{animation:fadeIn .8s var(--d,0s) ease both}
.scene.active .actor{animation:actorIn .8s var(--d,0s) cubic-bezier(.2,1.2,.4,1) both}
@keyframes upIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.7) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes actorIn{0%{opacity:0;transform:translateY(26px) scale(.85)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ============ Character ============ */
.actor{position:relative;width:120px;height:200px;flex:0 0 auto;transform-origin:bottom center}
.actor svg{width:100%;height:100%;overflow:visible;display:block}
.actor .leg{transform-box:fill-box;transform-origin:top center}
.actor .arm{transform-box:fill-box;transform-origin:top center}
.actor[data-pose="idle"] svg{animation:bob 3.2s ease-in-out infinite}
.actor[data-pose="wave"] .arm-r{animation:waveArm 1.5s ease-in-out infinite}
.actor[data-pose="wave"] svg{animation:bob 3s ease-in-out infinite}
.actor[data-pose="jump"] svg{animation:jumpUp 1.5s cubic-bezier(.3,.7,.4,1) infinite}
.actor[data-pose="jump"] .arm-l{transform:rotate(38deg)}
.actor[data-pose="jump"] .arm-r{transform:rotate(-38deg)}
.actor[data-pose="run"] svg{animation:runBob .55s ease-in-out infinite}
.actor[data-pose="run"] .leg-l{animation:legFwd .55s ease-in-out infinite}
.actor[data-pose="run"] .leg-r{animation:legBack .55s ease-in-out infinite}
.actor[data-pose="run"] .arm-l{animation:legBack .55s ease-in-out infinite}
.actor[data-pose="run"] .arm-r{animation:legFwd .55s ease-in-out infinite}
.actor[data-pose="balance"] svg{animation:wobble 2.6s ease-in-out infinite}
.actor[data-pose="balance"] .leg-r{transform:rotate(-42deg) translateY(-4px)}
.actor[data-pose="balance"] .arm-l{transform:rotate(72deg)}
.actor[data-pose="balance"] .arm-r{transform:rotate(-72deg)}
.actor[data-pose="stretch"] .arm-l{transform:rotate(155deg)}
.actor[data-pose="stretch"] .arm-r{transform:rotate(-155deg)}
.actor[data-pose="stretch"] svg{animation:stretchB 3s ease-in-out infinite}
.actor[data-pose="point"] .arm-r{transform:rotate(-118deg)}
.actor[data-pose="point"] svg{animation:bob 3.4s ease-in-out infinite}
.actor[data-pose="sit"] .leg-l{transform:rotate(78deg)}
.actor[data-pose="sit"] .leg-r{transform:rotate(84deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes jumpUp{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(6px) scale(1.06,.94)}
  45%{transform:translateY(-34px) scale(.97,1.04)}80%{transform:translateY(0) scale(1.02,.98)}}
@keyframes runBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes legFwd{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(22deg)}}
@keyframes legBack{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-22deg)}}
@keyframes waveArm{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-58deg)}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes stretchB{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ============ Shared scenery ============ */
.sky-s1{position:absolute;inset:0;background:linear-gradient(180deg,#BFD8FF 0%,#DCE8FF 45%,#F3F0FF 100%)}
.sky-s5{position:absolute;inset:0;background:linear-gradient(180deg,#8ECBF5 0%,#C4E6FF 55%,#E7F6FF 100%)}
.sun{position:absolute;left:110px;top:52px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE9A8,#FFC53D 62%,#F59E0B);
  box-shadow:0 0 0 14px rgba(255,197,61,.22),0 0 60px rgba(255,197,61,.55);z-index:1}
.sun.small{width:84px;height:84px;left:auto;right:120px;top:40px}
.sun::after{content:"";position:absolute;inset:-34px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 3deg,transparent 3deg 15deg);
  animation:spin 42s linear infinite;opacity:.55}
.sun span{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.35);left:24px;top:74px;filter:blur(4px)}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;background:#fff;border-radius:60px;opacity:.95;filter:drop-shadow(0 12px 18px rgba(79,70,229,.12))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:150px;height:44px;top:110px;left:340px;animation:drift 26s ease-in-out infinite}
.cloud.c2{width:118px;height:36px;top:62px;left:640px;animation:drift 32s ease-in-out infinite reverse}
.cloud.c3{width:180px;height:50px;top:170px;left:1010px;animation:drift 24s ease-in-out infinite}
.cloud.c4{width:150px;height:44px;top:70px;left:230px;animation:drift 30s ease-in-out infinite}
.cloud.c5{width:120px;height:38px;top:130px;left:860px;animation:drift 26s ease-in-out infinite reverse}
.cloud::before{width:64%;height:170%;top:-58%;left:12%}
.cloud::after{width:44%;height:130%;top:-38%;right:10%}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(46px)}}
.hills{position:absolute;left:0;right:0;bottom:96px;height:150px;z-index:1}
.hills span{position:absolute;bottom:0;border-radius:50% 50% 0 0}
.hills span:nth-child(1){width:720px;height:150px;left:-80px;background:#9FE2B4}
.hills span:nth-child(2){width:820px;height:126px;right:-120px;background:#7FD79B}

/* ============ Scene 1 ============ */
.pill{display:inline-block;padding:9px 22px;border-radius:999px;background:#fff;color:var(--indigo);
  font-weight:700;font-size:20px;box-shadow:var(--clay-sm);border:3px solid #DDE3FF}
.s1-copy{position:absolute;right:66px;top:104px;width:620px;z-index:4;text-align:right}
.hero-title{font-size:74px;line-height:1.04;font-weight:800;color:#1E1B4B;margin:16px 0 10px;letter-spacing:-1px}
.hero-title em{font-style:normal;color:#4338CA;display:inline-block;position:relative;padding-bottom:6px}
.hero-title em::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:14px;border-radius:8px;
  background:linear-gradient(90deg,#FDE68A,#FBBF24);z-index:-1;transform:rotate(-.6deg)}
.hero-sub{font-size:24px;color:#3B3670;margin:0;font-weight:500}
.compass-hero{position:absolute;left:44px;top:170px;width:340px;height:340px;z-index:3;
  filter:drop-shadow(0 22px 26px rgba(79,70,229,.22))}
.compass-svg{width:100%;height:100%}
.compass-svg .spin-ring{transform-origin:150px 150px;animation:spin 26s linear infinite}
.actor-line{position:absolute;bottom:76px;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;gap:26px;z-index:4}
.actor-line .actor{width:112px;height:186px}

/* ============ Scene 2 : Classroom ============ */
.s2{background:#F6F2FF}
.wall{position:absolute;inset:0 0 150px 0;background:
  linear-gradient(180deg,#FBF8FF 0%,#EFE9FF 100%);}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:#E2D9FF}
.poster{position:absolute;width:86px;height:110px;border-radius:12px;background:#fff;border:6px solid #FDE68A;
  box-shadow:0 8px 0 rgba(30,27,75,.08)}
.poster.p1{left:74px;top:64px;background:linear-gradient(160deg,#FFE9A8,#FCD34D)}
.poster.p2{left:186px;top:84px;background:linear-gradient(160deg,#BFE3FF,#93C5FD);border-color:#FDBA74;transform:rotate(3deg)}
.floor{position:absolute;left:0;right:0;bottom:0;height:150px;
  background:repeating-linear-gradient(90deg,#D9B98F 0 68px,#CFA97C 68px 72px);
  box-shadow:inset 0 10px 18px rgba(30,27,75,.12)}
.board{position:absolute;right:56px;top:44px;width:556px;height:326px;border-radius:18px;
  background:linear-gradient(160deg,#357A66,#2A6353);border:16px solid #C08457;
  box-shadow:0 14px 0 rgba(30,27,75,.16), inset 0 0 60px rgba(0,0,0,.18);z-index:3}
.board::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:16px;border-radius:0 0 10px 10px;background:#A9714A}
.board-tag{position:absolute;top:-2px;right:26px;background:#FDE68A;color:#7C4A12;font-weight:700;
  font-size:18px;padding:4px 16px;border-radius:0 0 10px 10px}
.board h2{position:absolute;right:34px;top:26px;color:#F2FFF9;font-size:34px;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.compass-mini{position:absolute;left:26px;top:58px;width:150px;height:150px;opacity:.95}
.dir-row{position:absolute;right:30px;bottom:20px;display:flex;gap:10px;flex-wrap:wrap;width:310px;justify-content:flex-end}
.dir{padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.92);font-size:17px;font-weight:700}
.dir.sh{color:#4338CA}.dir.jn{color:#0F8A57}.dir.qr{color:#C2410C}.dir.gr{color:#6D28D9}
.teacher-spot{position:absolute;left:56px;top:168px;width:300px;height:420px;z-index:4}
.teacher-spot .actor{position:absolute;bottom:0;left:20px;width:140px;height:232px}
.bubble{position:absolute;left:6px;top:-16px;width:296px;padding:16px 20px;border-radius:22px 22px 6px 22px;
  background:#fff;color:var(--ink);font-size:21px;font-weight:700;line-height:1.45;
  box-shadow:var(--clay-sm);border:3px solid #E0E7FF}
.bubble::after{content:"";position:absolute;left:26px;bottom:-16px;border:10px solid transparent;
  border-top-color:#fff;border-left-color:#fff;transform:rotate(-14deg)}
.pupils{position:absolute;right:48px;bottom:104px;left:300px;display:flex;justify-content:space-between;z-index:5}
.pupil{position:relative;width:158px;height:198px}
.pupil .actor{position:absolute;bottom:52px;right:16px;width:104px;height:174px;z-index:1}
.pupil .desk{position:absolute;left:0;right:0;bottom:0;height:74px;border-radius:12px 12px 8px 8px;z-index:2;
  background:linear-gradient(180deg,#E8B98C,#D6A271);border-bottom:9px solid #B9855B;
  box-shadow:0 10px 0 rgba(30,27,75,.1)}
.pupil:nth-child(2) .actor{animation-delay:.4s}

/* ============ Scene 3 : Signals ============ */
.s3{background:linear-gradient(160deg,#F7F9FF 0%,#E7EAFF 60%,#F3E8FF 100%)}
.s3-glow{position:absolute;width:720px;height:720px;border-radius:50%;right:-160px;top:-260px;
  background:radial-gradient(circle,rgba(129,140,248,.30),transparent 62%)}
.s3-title{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:48px;font-weight:800;color:#1E1B4B}
.signal-row{position:absolute;top:146px;left:44px;right:44px;display:flex;gap:30px;justify-content:center;z-index:3}
.signal-card{width:352px;padding:24px 22px 18px;border-radius:28px;background:#fff;
  border:4px solid #E0E7FF;box-shadow:var(--clay);text-align:center}
.s-icon{width:98px;height:98px;margin:0 auto 6px;border-radius:28px;display:grid;place-items:center;background:#EEF2FF;
  box-shadow:inset 0 -6px 0 rgba(30,27,75,.06)}
.s-icon svg{width:66px;height:66px}
.signal-card h3{font-size:27px;font-weight:800;margin:4px 0 8px}
.signal-card p{font-size:18px;line-height:1.55;color:#3B3670;margin:0 0 12px;min-height:56px}
.chip{display:inline-block;font-size:16px;font-weight:700;padding:5px 14px;border-radius:999px;background:#EEF2FF;color:#3730A3}
.card-v{border-color:#C7D2FE}.card-v .s-icon{background:#E0E7FF}
.card-a{border-color:#FED7AA}.card-a .s-icon{background:#FFEDD5}
.card-a .chip{background:#FFEDD5;color:#9A3412}
.card-d{border-color:#BAE6FD}.card-d .s-icon{background:#E0F2FE}
.card-d .chip{background:#E0F2FE;color:#075985}
.s3-foot{position:absolute;bottom:114px;left:0;right:0;text-align:center;font-size:22px;font-weight:700;
  color:#EEF2FF;background:#312E81;width:max-content;margin:0 auto;padding:12px 30px;border-radius:999px;
  box-shadow:0 10px 24px rgba(49,46,129,.35)}

/* ============ Scene 4 : Compass challenges ============ */
.s4{background:radial-gradient(circle at 50% 55%,#FFFFFF 0%,#EEF2FF 45%,#DDE3FF 100%)}
.s4-bg{position:absolute;inset:0;background-image:
  linear-gradient(rgba(129,140,248,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(129,140,248,.10) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(circle at 50% 55%,#000 45%,transparent 78%)}
.s4-title{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:36px;font-weight:800;color:#1E1B4B}
.compass-mid{position:absolute;left:50%;top:264px;margin-left:-136px;width:272px;height:272px;z-index:2;
  filter:drop-shadow(0 20px 24px rgba(79,70,229,.20))}
.chal{position:absolute;width:300px;padding:10px 18px 12px;border-radius:24px;background:#fff;
  border:4px solid #E0E7FF;box-shadow:var(--clay);text-align:center;z-index:4}
.chal h3{font-size:19px;font-weight:800;margin:2px 0 6px;line-height:1.25}
.ch-top{display:flex;align-items:center;justify-content:space-between}
.ch-dir{font-weight:800;font-size:19px;color:#312E81}
.ch-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.dn{background:#4F46E5;box-shadow:0 0 0 4px rgba(79,70,229,.16)}
.ds{background:#2BB673;box-shadow:0 0 0 4px rgba(43,182,115,.18)}
.de{background:#EA580C;box-shadow:0 0 0 4px rgba(234,88,12,.18)}
.dw{background:#7C3AED;box-shadow:0 0 0 4px rgba(124,58,237,.18)}
.ch-icon{width:56px;height:56px;margin:0 auto 4px}
.ch-icon svg{width:48px;height:48px}
.ch-tag{display:inline-block;font-size:15px;font-weight:700;color:#3B3670;background:#EEF2FF;padding:3px 12px;border-radius:999px}
.chal-n{top:74px;left:50%;margin-left:-190px;width:380px;border-color:#C7D2FE;display:flex;align-items:center;gap:14px;text-align:right;padding:14px 18px}
.chal-s{top:540px;left:50%;margin-left:-190px;width:380px;border-color:#BBF7D0;display:flex;align-items:center;gap:14px;text-align:right;padding:14px 18px}
.chal-e{right:44px;top:296px;border-color:#FED7AA}
.chal-w{left:44px;top:296px;border-color:#DDD6FE}

/* ============ Scene 5 : Outdoor yard ============ */
.s5{background:linear-gradient(180deg,#8ECBF5 0%,#C4E6FF 55%,#E7F6FF 100%)}
.fence{position:absolute;left:0;right:0;bottom:286px;height:76px;z-index:1;
  background:repeating-linear-gradient(90deg,#FFFFFF 0 20px,rgba(255,255,255,0) 20px 44px);opacity:.9}
.fence::before{content:"";position:absolute;left:0;right:0;top:18px;height:12px;background:#fff;opacity:.95;border-radius:6px}
.grass{position:absolute;left:-4%;right:-4%;bottom:-10px;height:330px;z-index:2;
  background:linear-gradient(180deg,#8FE0A7 0%,#57C77F 60%,#3FAE69 100%);
  border-radius:46% 46% 0 0 / 70px 70px 0 0;box-shadow:inset 0 14px 30px rgba(255,255,255,.25)}
.mark{position:absolute;width:96px;height:60px;border:5px dashed rgba(255,255,255,.85);border-radius:50%;
  color:#fff;font-family:"Baloo Bhaijaan 2";font-size:26px;display:grid;place-items:center;font-weight:700;opacity:.9}
.mark.m1{left:110px;bottom:152px}.mark.m2{left:430px;bottom:96px}
.mark.m3{right:430px;bottom:96px}.mark.m4{right:110px;bottom:152px}
.s5-title{position:absolute;top:22px;left:0;right:0;text-align:center;font-size:34px;font-weight:800;color:#0C3A5B;
  text-shadow:0 2px 0 rgba(255,255,255,.7)}
.yard{position:absolute;left:44px;right:44px;bottom:112px;display:flex;justify-content:space-around;align-items:flex-end;z-index:3}
.yard-kid{position:relative;width:230px;text-align:center}
.yard-kid .actor{width:118px;height:196px;margin:0 auto}
.k-label{display:inline-block;background:#fff;color:#1E1B4B;padding:4px 16px;border-radius:999px;font-weight:800;
  font-size:17px;box-shadow:var(--clay-sm);margin-bottom:6px}
.whistle{position:absolute;top:84px;left:44px;z-index:6;
  background:#1E1B4B;color:#FDE68A;font-weight:700;font-size:18px;padding:9px 22px;border-radius:999px;
  display:flex;align-items:center;gap:10px;box-shadow:0 10px 22px rgba(30,27,75,.3)}
.ring{width:12px;height:12px;border-radius:50%;background:#FDE68A;box-shadow:0 0 0 0 rgba(253,230,138,.8);
  animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(253,230,138,.8)}70%{box-shadow:0 0 0 14px rgba(253,230,138,0)}100%{box-shadow:0 0 0 0 rgba(253,230,138,0)}}

/* ============ Scene 6 : Digital ============ */
.s6{background:radial-gradient(circle at 50% 40%,#241A63 0%,#150F3E 55%,#0A0724 100%);color:#EAF2FF}
.grid-floor{position:absolute;left:-30%;right:-30%;bottom:-14%;height:66%;
  transform:perspective(460px) rotateX(64deg);transform-origin:bottom center;
  background-image:linear-gradient(rgba(56,189,248,.45) 2px,transparent 2px),
    linear-gradient(90deg,rgba(56,189,248,.45) 2px,transparent 2px);
  background-size:86px 86px;opacity:.45;
  mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.orb.o1{width:420px;height:420px;background:#4F46E5;left:-90px;top:-120px}
.orb.o2{width:380px;height:380px;background:#0EA5E9;right:-80px;bottom:-100px}
.s6-title{position:absolute;top:26px;left:0;right:0;text-align:center;font-size:40px;font-weight:800;color:#EAF2FF;z-index:4}
.s6-title::after{content:"";display:block;width:180px;height:5px;margin:8px auto 0;border-radius:6px;
  background:linear-gradient(90deg,#38BDF8,#A78BFA)}
.holo{position:absolute;left:50%;top:120px;margin-left:-215px;width:430px;padding:18px 22px 22px;z-index:4;
  border-radius:28px;background:rgba(23,28,70,.55);backdrop-filter:blur(14px);
  border:2px solid rgba(56,189,248,.45);
  box-shadow:0 0 60px rgba(56,189,248,.35), inset 0 0 40px rgba(56,189,248,.12)}
.holo-top{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;color:#BAE6FD}
.live{color:#4ADE80}
.holo-name{color:#C7D2FE}
.holo-arrow{width:190px;height:190px;margin:6px auto 2px}
.holo-arrow svg{width:100%;height:100%}
.holo-arrow svg circle{animation:spin 12s linear infinite;transform-origin:60px 60px}
.holo-stat{text-align:center;margin-bottom:10px}
.holo-stat b{display:block;font-size:30px;font-family:"Baloo Bhaijaan 2";color:#fff}
.holo-stat span{font-size:17px;color:#BAE6FD}
.holo-score{display:flex;gap:8px;justify-content:center}
.holo-score i{width:34px;height:10px;border-radius:6px;background:rgba(255,255,255,.22)}
.holo-score i.on{background:linear-gradient(90deg,#38BDF8,#4ADE80);box-shadow:0 0 12px rgba(56,189,248,.7)}
.holo-kid{position:absolute;z-index:3}
.holo-kid .actor{width:96px;height:160px}
.k1{left:78px;bottom:126px}.k2{right:78px;bottom:126px}.k3{left:300px;bottom:150px}
.s6-foot{position:absolute;bottom:86px;right:44px;left:44px;text-align:center;font-size:20px;font-weight:700;
  color:#BAE6FD;z-index:5}

/* ============ Scene 7 : Steps ============ */
.s7{background:linear-gradient(165deg,#F8FAFF 0%,#EAEEFF 55%,#F6ECFF 100%)}
.s7-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(79,70,229,.16) 1.6px,transparent 1.6px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 50% 20%,#000,transparent 72%)}
.s7-title{position:absolute;top:26px;left:0;right:0;text-align:center;font-size:46px;font-weight:800;color:#1E1B4B}
.s7-sub{position:absolute;top:106px;left:0;right:0;text-align:center;margin:0;font-size:21px;color:#4338CA;font-weight:600}
.steps{position:absolute;top:146px;left:60px;right:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;z-index:2}
.step{position:relative;background:#fff;border:4px solid #E0E7FF;border-radius:26px;padding:20px 22px 18px;
  box-shadow:var(--clay);min-height:196px}
.step .num{position:absolute;top:-18px;left:-10px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(160deg,#4F46E5,#7C3AED);color:#fff;
  font-family:"Baloo Bhaijaan 2";font-size:26px;font-weight:800;box-shadow:0 8px 0 rgba(79,70,229,.25)}
.step h3{font-size:24px;font-weight:800;margin:6px 0 8px;color:#1E1B4B}
.step p{margin:0;font-size:18px;line-height:1.6;color:#3B3670}
.step:nth-child(2) .num{background:linear-gradient(160deg,#0EA5E9,#2BB673)}
.step:nth-child(3) .num{background:linear-gradient(160deg,#F59E0B,#EA580C)}
.step:nth-child(4) .num{background:linear-gradient(160deg,#EA580C,#E11D48)}
.step:nth-child(5) .num{background:linear-gradient(160deg,#7C3AED,#C026D3)}
.step:nth-child(6) .num{background:linear-gradient(160deg,#2BB673,#0F9D8A)}

/* ============ Scene 8 : Closing ============ */
.s8{background:radial-gradient(circle at 50% 42%,#3B3F8F 0%,#232A63 45%,#131737 100%);color:#EEF2FF}
.s8-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 2px,transparent 2px);
  background-size:58px 58px;opacity:.35;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.22}50%{opacity:.45}}
.medal{position:absolute;left:50%;top:86px;margin-left:-92px;width:184px;height:184px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF5CC,#FBBF24 55%,#F59E0B);display:grid;place-items:center;
  box-shadow:0 0 0 14px rgba(251,191,36,.18),0 20px 40px rgba(0,0,0,.35);z-index:3}
.compass-badge{width:128px;height:128px}
.s8-title{position:absolute;top:290px;left:0;right:0;text-align:center;font-size:52px;font-weight:800;color:#fff}
.s8-sub{position:absolute;top:388px;left:0;right:0;text-align:center;font-size:24px;color:#C7D2FE;margin:0}
.rules{position:absolute;top:438px;left:0;right:0;display:flex;gap:16px;justify-content:center;z-index:3}
.rule{background:rgba(255,255,255,.12);border:2px solid rgba(199,210,254,.4);border-radius:999px;
  padding:10px 22px;font-size:19px;font-weight:700;color:#EAF2FF;backdrop-filter:blur(6px)}
.cta{position:absolute;top:524px;left:50%;transform:translateX(-50%);background:linear-gradient(160deg,#FBBF24,#EA580C);
  color:#231437;font-family:"Baloo Bhaijaan 2";font-size:30px;font-weight:800;padding:14px 46px;border-radius:999px;
  box-shadow:0 12px 0 rgba(0,0,0,.28),0 22px 40px rgba(234,88,12,.4);z-index:3}
.confetti i{position:absolute;width:12px;height:18px;border-radius:3px;top:-30px;opacity:.9;
  animation:fall 6s linear infinite}
.confetti i:nth-child(1){left:8%;background:#FBBF24;animation-delay:.2s}
.confetti i:nth-child(2){left:18%;background:#38BDF8;animation-delay:1.4s;width:10px;height:10px;border-radius:50%}
.confetti i:nth-child(3){left:28%;background:#F472B6;animation-delay:.8s}
.confetti i:nth-child(4){left:38%;background:#4ADE80;animation-delay:2.1s}
.confetti i:nth-child(5){left:47%;background:#FBBF24;animation-delay:1.1s;width:14px;height:8px}
.confetti i:nth-child(6){left:56%;background:#A78BFA;animation-delay:.5s}
.confetti i:nth-child(7){left:64%;background:#38BDF8;animation-delay:2.6s}
.confetti i:nth-child(8){left:72%;background:#F472B6;animation-delay:1.6s;width:10px;height:10px;border-radius:50%}
.confetti i:nth-child(9){left:80%;background:#FBBF24;animation-delay:2.9s}
.confetti i:nth-child(10){left:88%;background:#4ADE80;animation-delay:.9s}
.confetti i:nth-child(11){left:94%;background:#A78BFA;animation-delay:2.2s;width:14px;height:8px}
.confetti i:nth-child(12){left:13%;background:#FBBF24;animation-delay:3.4s}
@keyframes fall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(820px) rotate(520deg)}}

/* ============ HUD & captions ============ */
.hud{position:absolute;top:16px;left:18px;z-index:20;display:flex;gap:8px}
.hud-tag{background:rgba(20,20,50,.62);color:#EAF2FF;font-size:15px;font-weight:700;padding:6px 14px;border-radius:999px;
  backdrop-filter:blur(8px);border:1px solid rgba(199,210,254,.28)}
.hud-tag b{color:#FDE68A}
.caption{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:930px;max-width:94%;
  min-height:48px;display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:16px;
  background:rgba(16,16,44,.80);backdrop-filter:blur(10px);border:1px solid rgba(199,210,254,.22);z-index:20}
.caption .who{flex:0 0 auto;background:linear-gradient(160deg,#FBBF24,#F59E0B);color:#2A1B00;font-weight:800;
  font-size:14px;padding:3px 12px;border-radius:999px}
.caption p{margin:0;color:#F4F6FF;font-size:16.5px;line-height:1.5;font-weight:500}
.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;
  display:flex;align-items:center;gap:12px;padding:16px 30px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(160deg,#FBBF24,#EA580C);color:#2A1200;font-family:"Baloo Bhaijaan 2";font-size:22px;
  font-weight:800;box-shadow:0 12px 0 rgba(0,0,0,.3),0 24px 44px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease, opacity .3s ease}
.big-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.big-play.hide{opacity:0;pointer-events:none}

/* ============ Player bar ============ */
.player{display:flex;align-items:center;gap:10px;margin:18px auto 0;padding:10px 16px;border-radius:999px;
  background:rgba(23,28,70,.72);border:1px solid rgba(199,210,254,.2);backdrop-filter:blur(10px);
  box-shadow:0 16px 34px rgba(0,0,0,.35);max-width:820px}
.pbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.09);color:#EAF2FF;transition:background .2s ease, transform .2s ease}
.pbtn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.pbtn.main{width:46px;height:46px;background:linear-gradient(160deg,#FBBF24,#EA580C);color:#2A1200;
  box-shadow:0 6px 0 rgba(0,0,0,.25)}
.pbtn .i-pause{display:none}
.player.playing .pbtn .i-play{display:none}
.player.playing .pbtn .i-pause{display:block}
.pbtn .i-off{display:none}
.player.muted .pbtn .i-on{display:none}
.player.muted .pbtn .i-off{display:block}
.track{flex:1;display:flex;gap:4px;height:26px;align-items:center;cursor:pointer}
.seg{position:relative;flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;
  transition:height .2s ease}
.seg:hover{height:12px}
.seg b{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#38BDF8,#818CF8);border-radius:99px;
  transition:width .12s linear}
.seg.done b{width:100%}
.time{font-size:14px;color:#C7D2FE;font-variant-numeric:tabular-nums;font-weight:600;min-width:86px;text-align:center}

/* ============ Guide ============ */
.guide{margin-top:26px;background:rgba(23,28,70,.55);border:1px solid rgba(199,210,254,.16);
  border-radius:26px;padding:24px 28px;backdrop-filter:blur(8px)}
.guide-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.guide-head h3{font-size:24px;font-weight:800;color:#FDE68A}
.guide-head span{font-size:15px;color:#A5B4FC}
.guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide-list li{background:rgba(255,255,255,.05);border:1px solid rgba(199,210,254,.18);border-radius:16px;
  padding:14px 16px;transition:transform .25s ease, background .25s ease}
.guide-list li:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
.guide-list b{display:block;font-size:16px;color:#FDE68A;margin-bottom:4px}
.guide-list span{font-size:15px;line-height:1.6;color:#DDE3FF}
.guide-note{margin:16px 0 0;font-size:13.5px;color:#9FA8E0;line-height:1.7}

.caption-out{display:none}
@media (max-width:860px){
  .caption{display:none}
  .caption-out{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 16px;border-radius:18px;
    background:rgba(23,28,70,.85);border:1px solid rgba(199,210,254,.22)}
  .caption-out .who{flex:0 0 auto;background:linear-gradient(160deg,#FBBF24,#F59E0B);color:#2A1B00;font-weight:800;
    font-size:13px;padding:3px 10px;border-radius:999px}
  .caption-out p{margin:0;font-size:15px;line-height:1.65;color:#EEF2FF}
  body{padding:14px 10px 40px}
  .guide-list{grid-template-columns:1fr}
  .player{padding:8px 10px;gap:6px}
  .time{display:none}
  .big-play{font-size:18px;padding:12px 22px}
}
@media (prefers-reduced-motion:reduce){
  .scene *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

.chal-n .ch-icon,.chal-s .ch-icon{flex:0 0 auto;margin:0;width:58px;height:58px}
.chal-n .ch-top,.chal-s .ch-top{justify-content:flex-start;gap:8px}
.chal-n h3,.chal-s h3{margin:0 0 4px;font-size:18px}
.chal-n .ch-tag,.chal-s .ch-tag{font-size:14px;padding:2px 10px}
.chal-n .ch-body,.chal-s .ch-body{min-width:0}