:root{
  --navy:#23306b; --ink:#2b2350; --orange:#f58a1f; --cream:#fff4dc; --parch:#f9e7b8; --parch2:#f1d38c;
  --green:#2fa36b; --sky:#8fe3ff; --gold:#ffc83d;
  --c-number:#1f9fdc; --c-pattern:#2f9e5b; --c-geometry:#7b61d9; --c-money:#e8912d; --c-treasure:#d9433b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#0f1634;overflow:hidden;font-family:'Montserrat','Nunito','Trebuchet MS','Segoe UI',Arial,sans-serif;color:var(--ink)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:#bfeaff;border-radius:6px}
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(24px) scale(.985);transition:opacity .55s ease,transform .55s ease,visibility 0s .55s}
.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
button:focus-visible{outline:5px solid #fff;outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;font-weight:800;font-size:38px;color:#fff;padding:24px 56px;border-radius:70px;
  background:linear-gradient(#ffa63d,#f07a0d);box-shadow:0 8px 0 #b85a08,0 16px 28px rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-3px);filter:brightness(1.07)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #b85a08,0 6px 12px rgba(0,0,0,.25)}
.btn.blue{background:linear-gradient(#4f7cff,#2f56d6);box-shadow:0 8px 0 #1c3796,0 16px 28px rgba(0,0,0,.28)}
.btn.green{background:linear-gradient(#3fcf8b,#1f9c62);box-shadow:0 8px 0 #12683f,0 16px 28px rgba(0,0,0,.28)}
.btn.purple{background:linear-gradient(#9a7dff,#6a47e0);box-shadow:0 8px 0 #432aa5,0 16px 28px rgba(0,0,0,.28)}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:0 8px 0 #b9c4e8,0 16px 28px rgba(0,0,0,.2)}
.btn.small{font-size:28px;padding:16px 36px}
.btn[disabled]{filter:grayscale(.85) brightness(1.05);opacity:.6;cursor:not-allowed;transform:none}

/* Brand + toolbar */
.brand{position:absolute;left:44px;top:32px;display:flex;align-items:center;gap:14px;z-index:20;
  background:rgba(255,255,255,.88);padding:10px 26px 10px 12px;border-radius:60px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.brand .logo{width:54px;height:54px}
.brand b{font-size:26px;letter-spacing:.5px;color:var(--navy)}
.brand span{font-size:17px;font-weight:600;display:block;color:#5e6aa8;margin-top:-2px;letter-spacing:2px}
#toolbar{position:absolute;right:36px;top:32px;display:flex;gap:12px;z-index:30;opacity:.5;transition:opacity .25s}
#toolbar:hover{opacity:1}
#toolbar button{background:rgba(255,255,255,.92);color:var(--navy);font-weight:800;font-size:22px;padding:12px 22px;border-radius:40px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
#toolbar button:hover{background:#fff}
#toolbar.hidden{display:none}

/* Shared decorations */
.sparkle{position:absolute;width:30px;height:30px;animation:twinkle 3s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
.cloud{position:absolute;opacity:.92;animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-300px)}to{transform:translateX(2300px)}}
.floaty{animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.blink{animation:blink 4.5s infinite;transform-origin:center;transform-box:fill-box}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.wag{animation:wag 2.6s ease-in-out infinite;transform-origin:225px 290px}
@keyframes wag{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* SCREEN 1 – welcome */
#s-welcome{background:linear-gradient(#5cc8ff 0%,#a8e6ff 45%,#ffe7b0 78%,#f8c46a 100%)}
#s-welcome .hills{position:absolute;left:0;bottom:0;width:100%;height:420px}
#s-welcome .title{position:absolute;left:110px;top:210px;width:980px}
#s-welcome .kicker{font-size:30px;font-weight:800;letter-spacing:8px;color:#fff;text-shadow:0 3px 0 rgba(35,48,107,.55)}
#s-welcome h1{font-size:128px;line-height:.98;font-weight:900;color:#fff;margin-top:14px;
  text-shadow:0 6px 0 #23306b,0 12px 0 rgba(35,48,107,.5),0 20px 30px rgba(0,0,0,.25);letter-spacing:-1px}
#s-welcome h1 em{font-style:normal;color:var(--gold)}
#s-welcome .tag{margin-top:34px;font-size:50px;font-weight:800;color:var(--navy);display:flex;gap:22px}
#s-welcome .tag span{background:#fff;padding:8px 28px;border-radius:50px;box-shadow:0 6px 0 rgba(35,48,107,.25)}
#s-welcome .btn{margin-top:56px;font-size:48px;padding:30px 78px}
#s-welcome .fox{position:absolute;right:120px;bottom:70px;width:640px}
#s-welcome .byline{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-weight:700;font-size:20px;color:#7a4a14;letter-spacing:2px}

/* SCREEN 2 – map */
#s-map{background:radial-gradient(circle at 50% 45%,#6fd4e8 0%,#2aa5cf 70%,#1b7fb0 100%)}
#s-map .mapbg{position:absolute;inset:0}
#s-map .head{position:absolute;left:0;right:0;top:26px;text-align:center}
#s-map .head h2{display:inline-block;font-size:60px;font-weight:900;color:#fff;background:linear-gradient(#b8742f,#8a521c);padding:8px 64px 12px;border-radius:20px;
  border:5px solid #f1d38c;text-shadow:0 4px 0 rgba(0,0,0,.3);box-shadow:0 10px 0 rgba(0,0,0,.2)}
#s-map .sub{margin-top:10px;font-size:26px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.node{position:absolute;width:330px;background:#fff8e6;border-radius:34px;padding:12px 12px 16px;text-align:center;
  box-shadow:0 14px 0 rgba(0,0,0,.18),0 24px 34px rgba(0,0,0,.25);border:6px solid var(--nc);transition:transform .2s,box-shadow .2s;color:var(--ink)}
.node:hover{transform:translateY(-8px) scale(1.03)}
.node .art{width:100%;height:200px;border-radius:22px;overflow:hidden;display:block}
.node .art svg{width:100%;height:100%;display:block}
.node .num{position:absolute;left:-18px;top:-18px;width:60px;height:60px;border-radius:50%;background:var(--nc);color:#fff;font-weight:900;font-size:32px;display:flex;align-items:center;justify-content:center;border:5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.node h3{font-size:31px;font-weight:900;margin-top:12px;color:var(--navy)}
.badge{display:inline-block;margin-top:8px;font-size:20px;font-weight:800;padding:6px 20px;border-radius:30px;letter-spacing:.5px}
.badge.todo{background:#e6e9f5;color:#6a74a8}
.badge.prog{background:#ffe9a8;color:#8a5a00}
.badge.done{background:#bff2d6;color:#0f7a49}
.node.done::after{content:"★";position:absolute;right:-16px;top:-22px;font-size:62px;color:var(--gold);text-shadow:0 3px 0 #b27a00;animation:bob 2.5s infinite}
#s-map .foot{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:28px}
#s-map .fox-mini{position:absolute;left:36px;bottom:30px;width:150px}

/* SCREEN 3 – intro */
.dest-bg{position:absolute;inset:0;transition:background .4s}
#s-intro .art{position:absolute;left:90px;top:170px;width:880px;height:640px;border-radius:44px;overflow:hidden;border:10px solid #fff;box-shadow:0 18px 0 rgba(0,0,0,.18),0 30px 50px rgba(0,0,0,.3);background:#fff}
#s-intro .art svg{width:100%;height:100%;display:block}
#s-intro .panel{position:absolute;left:1030px;top:130px;width:800px}
.label{font-size:26px;font-weight:800;letter-spacing:5px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.panel h2{font-size:84px;font-weight:900;color:#fff;line-height:1;margin:10px 0 28px;text-shadow:0 5px 0 rgba(0,0,0,.28)}
.box{background:rgba(255,255,255,.95);border-radius:28px;padding:24px 34px;margin-bottom:22px;box-shadow:0 8px 0 rgba(0,0,0,.14)}
.box h4{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--nc);margin-bottom:8px}
.placeholder{border:4px dashed #a9b3dd;border-radius:18px;background:#f4f6ff;color:#6b75a8;font-weight:700;font-size:28px;line-height:1.45;padding:20px 26px;text-align:center}
.placeholder small{display:block;font-weight:600;font-size:21px;margin-top:6px;opacity:.85}
#s-intro .actions{position:absolute;left:1030px;top:880px;display:flex;gap:24px;align-items:center}

/* SCREEN 4 – question */
#s-question .topbar{position:absolute;left:0;right:0;top:0;height:150px;display:flex;align-items:center;justify-content:center;gap:28px;padding-top:6px}
#s-question .qtitle{background:#fff;border-radius:60px;padding:14px 56px;box-shadow:0 8px 0 rgba(0,0,0,.18);text-align:center}
#s-question .qtitle small{display:block;font-size:22px;font-weight:800;letter-spacing:4px;color:var(--nc)}
#s-question .qtitle b{font-size:44px;font-weight:900;color:var(--navy)}
#s-question .qart{position:absolute;left:70px;top:180px;width:700px;height:560px}
#s-question .qart .placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;background:rgba(255,255,255,.92);border-color:var(--nc);color:var(--navy)}
#s-question .qart .ph-art{width:170px;margin-bottom:14px;opacity:.9}
#s-question .qbody{position:absolute;left:810px;top:180px;width:1040px;height:380px;background:#fff;border-radius:34px;padding:22px;box-shadow:0 10px 0 rgba(0,0,0,.16)}
#s-question .qbody .placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;font-size:36px}
#s-question .ans{position:absolute;left:810px;top:590px;width:1040px;height:150px;border-radius:30px;background:#e9fff3;border:6px solid #2fa36b;padding:16px;
  opacity:0;transform:translateY(20px) scale(.97);transition:all .45s cubic-bezier(.2,1.3,.4,1);box-shadow:0 10px 0 rgba(0,0,0,.14)}
#s-question .ans.show{opacity:1;transform:none}
#s-question .ans .placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;background:#f4fff9;border-color:#69c99c;color:#17774a;font-size:30px}
#s-question .ans .tagline{position:absolute;left:30px;top:-24px;background:#2fa36b;color:#fff;font-weight:900;font-size:22px;letter-spacing:3px;padding:4px 22px;border-radius:20px}
#s-question .controls{position:absolute;left:0;right:0;bottom:42px;display:flex;justify-content:center;gap:34px;align-items:center}
#s-question .dots{position:absolute;left:0;right:0;bottom:170px;display:flex;justify-content:center;gap:16px}
.dot{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.55);border:4px solid #fff;transition:all .3s}
.dot.on{background:var(--gold);transform:scale(1.35);border-color:#fff}
.dot.past{background:#fff}

.pg{flex:1;padding:34px 40px;position:relative}
.pg h3{font-size:40px;font-weight:900;color:#7a4a14;letter-spacing:3px;text-align:center;margin-bottom:6px}
.pg .line{height:5px;background:repeating-linear-gradient(90deg,#b98a3c 0 14px,transparent 14px 24px);margin-bottom:22px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;justify-items:center}
.slot{width:200px;text-align:center;background:none;color:#7a4a14;padding:6px 4px;border-radius:24px;transition:transform .2s,background .2s}
.slot:hover{transform:translateY(-4px);background:rgba(255,255,255,.45)}
.slot.sel{background:rgba(255,255,255,.8);box-shadow:0 0 0 6px var(--gold)}
.slot svg{width:150px;height:150px}
.slot b{display:block;font-size:20px;font-weight:900;margin-top:2px}
.stamp-pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(2.4) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.detail{text-align:center;margin-top:6px}
.detail .dart{width:380px;height:230px;margin:0 auto;border-radius:24px;overflow:hidden;border:6px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.15)}
.detail .dart svg{width:100%;height:100%;display:block}
.detail h4{font-size:46px;font-weight:900;color:var(--navy);margin-top:16px}
.detail p{font-size:24px;font-weight:700;color:#7a4a14;margin-top:6px}

/* SCREEN 6 – final */
#s-final{background:radial-gradient(circle at 50% 40%,#ffe58a 0%,#ffb84d 55%,#f07a4d 100%)}
#s-final .rays{position:absolute;left:50%;top:40%;width:2600px;height:2600px;margin:-1300px 0 0 -1300px;animation:spin 60s linear infinite;opacity:.35}
@keyframes spin{to{transform:rotate(360deg)}}
#s-final .center{position:absolute;left:0;right:0;top:100px;text-align:center}
#s-final h1{font-size:112px;font-weight:900;color:#fff;text-shadow:0 6px 0 #b84a0a,0 14px 24px rgba(0,0,0,.25)}
#s-final .sub{font-size:44px;font-weight:800;color:var(--navy);margin-top:6px}
#s-final .title-badge{display:inline-block;margin-top:26px;font-size:62px;font-weight:900;color:#fff;background:linear-gradient(#4f7cff,#2f40b8);padding:12px 70px;border-radius:70px;border:6px solid #fff;box-shadow:0 10px 0 #1c2a80,0 20px 30px rgba(0,0,0,.3)}
#s-final .stamps{position:absolute;left:0;right:0;top:600px;display:flex;justify-content:center;gap:26px}
#s-final .stamps div{text-align:center;font-weight:900;color:var(--navy);font-size:20px}
#s-final .stamps svg{width:150px;height:150px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.25))}
#s-final .stamps{top:640px;gap:18px}
#s-final .fox{position:absolute;left:30px;bottom:40px;width:400px}
#s-final .fox2{position:absolute;right:50px;bottom:40px;width:320px;transform:scaleX(-1)}
#s-final .btn{position:absolute;left:50%;bottom:50px;transform:translateX(-50%)}
#s-final .btn:hover{transform:translateX(-50%) translateY(-3px)}
.confetti{position:absolute;top:-40px;width:18px;height:30px;animation:fall linear infinite;opacity:.9}
@keyframes fall{to{transform:translateY(1200px) rotate(720deg)}}
.hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:15px;font-weight:600;color:rgba(255,255,255,.7);z-index:5;pointer-events:none}

/* ===== ROUND 2 ADDITIONS (content only; layout unchanged) ===== */
#s-question .qart svg{width:100%;height:100%;background:rgba(255,255,255,.92);border-radius:34px;border:6px solid var(--nc);box-shadow:0 10px 0 rgba(0,0,0,.16);font-family:'Montserrat','Nunito',sans-serif}
@keyframes popin{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes swayk{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.pop{transform-box:fill-box;transform-origin:center;animation:popin .5s cubic-bezier(.2,1.3,.4,1) both}
.sway{transform-box:fill-box;transform-origin:center bottom;animation:swayk 3.2s ease-in-out infinite}
#s-question .qbody{height:300px;display:flex;flex-direction:column;justify-content:center;padding:22px 150px 22px 40px}
#s-question .ans{top:708px;height:176px}
.opts{position:absolute;left:810px;top:495px;width:1040px;height:196px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:91px;gap:14px}
.opt{display:flex;align-items:center;gap:16px;background:#fff;border:5px solid var(--nc);border-radius:26px;padding:6px 18px;box-shadow:0 6px 0 rgba(0,0,0,.14);font-weight:800;color:var(--navy);font-size:28px;line-height:1.12;transition:all .35s;overflow:hidden}
.opt b{flex:none;width:52px;height:52px;border-radius:50%;background:var(--nc);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center}
.opts.rev .opt.c{background:#d8f8e6;border-color:#2fa36b;box-shadow:0 0 0 6px rgba(47,163,107,.35),0 6px 0 rgba(0,0,0,.14);transform:scale(1.03)}
.opts.rev .opt:not(.c){opacity:.45}
#s-question .qbody .qt{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--nc);margin-bottom:10px;text-transform:uppercase}
#s-question .qbody p{font-size:35px;font-weight:700;line-height:1.3;color:var(--navy);margin:4px 0}
#s-question .qbody p:last-child{font-weight:900}
#s-question .ans .ansbody{height:100%;display:flex;flex-direction:column;justify-content:center;padding:14px 22px 0;color:#17774a}
#s-question .ans .ansbody b{font-size:34px;font-weight:900;line-height:1.1}
#s-question .ans .ansbody span{font-size:22px;font-weight:700;line-height:1.3;margin-top:6px;color:#2b6a4c}
.bulb{position:absolute;left:1740px;top:150px;width:110px;height:110px;border-radius:50%;border:6px solid #fff;background:radial-gradient(circle at 35% 30%,#fff3a8,#ffc83d);font-size:58px;cursor:pointer;box-shadow:0 8px 0 rgba(0,0,0,.2),0 0 30px rgba(255,214,70,.8);animation:glow 2.2s ease-in-out infinite;z-index:5;line-height:1;padding:0}
.bulb:active{transform:translateY(4px)}
@keyframes glow{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.2),0 0 18px rgba(255,214,70,.5)}50%{box-shadow:0 8px 0 rgba(0,0,0,.2),0 0 46px rgba(255,214,70,1)}}
#theory{position:absolute;inset:0;background:rgba(20,28,70,.72);display:none;align-items:center;justify-content:center;z-index:50}
#theory.open{display:flex}
#theory .card{width:1240px;background:#fffbe6;border:8px solid #ffc83d;border-radius:44px;padding:44px 64px 40px;box-shadow:0 16px 0 rgba(0,0,0,.25);position:relative;animation:popin .4s cubic-bezier(.2,1.3,.4,1)}
#theory h3{font-size:46px;font-weight:900;color:#b27a00;margin-bottom:24px}
#theory p{font-size:42px;font-weight:700;line-height:1.35;color:var(--navy);margin:14px 0;padding-left:26px;border-left:10px solid #ffc83d}
#theory .close{position:absolute;right:26px;top:22px}
/* ===== 40-question / scoring additions ===== */
#s-welcome .namebox{margin-top:30px;display:flex;flex-direction:column;gap:8px;width:700px}
#s-welcome .namebox label{font-size:26px;font-weight:900;letter-spacing:6px;color:#fff;text-shadow:0 3px 0 rgba(35,48,107,.55)}
#s-welcome .namebox input{font:800 50px 'Montserrat','Nunito',sans-serif;color:var(--navy);padding:14px 30px;border-radius:50px;border:6px solid #fff;background:rgba(255,255,255,.96);box-shadow:0 8px 0 rgba(35,48,107,.25);outline:none;width:100%}
#s-welcome .namebox input:focus{border-color:var(--gold)}
#s-welcome .btn{margin-top:30px}
#s-welcome .btn:disabled{opacity:.5;filter:grayscale(.4);cursor:not-allowed}
.node .qlab{display:block;font-size:17px;font-weight:800;letter-spacing:.5px;color:#6a74a8;margin-top:4px;line-height:1.25;min-height:42px}
.chip{position:absolute;left:1230px;top:40px;display:flex;align-items:center;gap:16px;background:#fff;border-radius:50px;padding:10px 28px;box-shadow:0 8px 0 rgba(0,0,0,.18);font-weight:800;font-size:24px;color:var(--navy);max-width:340px;z-index:4}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.chip b{font-size:38px;font-weight:900;color:var(--nc)}
.chip b small{font-size:20px;color:#6a74a8}
.clearbtn{position:absolute;right:70px;bottom:54px;z-index:4}
.opt{cursor:pointer;position:relative}
.opts:not(.locked) .opt:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(0,0,0,.14)}
.opts.locked .opt{cursor:default}
.opts.locked .opt.c{background:#d8f8e6;border-color:#2fa36b;box-shadow:0 0 0 6px rgba(47,163,107,.35),0 6px 0 rgba(0,0,0,.14)}
.opts.locked .opt.w{background:#ffe1e1;border-color:#e0453f;box-shadow:0 0 0 6px rgba(224,69,63,.3),0 6px 0 rgba(0,0,0,.14)}
.opts.locked .opt:not(.c):not(.w){opacity:.45}
.opt.p::after{position:absolute;right:-8px;top:-18px;padding:4px 16px;border-radius:20px;color:#fff;font-size:22px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.opt.p.c::after{content:"✓ Correct!";background:#2fa36b}
.opt.w::after{content:"✗ Not quite";background:#e0453f}
.opts.locked .opt.w b{background:#e0453f}
.opts.locked .opt.c b{background:#2fa36b}
.slots{grid-template-columns:repeat(2,1fr)!important;gap:16px 10px!important}
.slot{width:300px!important}
.slot em{display:block;font-style:normal;font-size:24px;font-weight:900;color:#17774a}
#s-final .stamps .sc{font-size:32px;color:#b84a0a}
#s-final .stamps{top:610px!important;gap:46px!important}
#s-final .finbtns{position:absolute;left:0;right:0;bottom:50px;display:flex;gap:26px;justify-content:center}
#s-final .finbtns .btn{position:static;transform:none}
#s-final .finbtns .btn:hover{transform:translateY(-3px)}
#s-final .sub{font-size:38px!important}
#s-report{background:linear-gradient(135deg,#34408a,#5a3a9c 60%,#7a45a8)}
#s-report .rtitle{position:absolute;left:0;right:0;top:36px;text-align:center}
#s-report .rname{font-size:60px;font-weight:900;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.3)}
#s-report .ravg{font-size:30px;font-weight:700;color:#ffe27a;margin-top:6px}
#s-report .ravg b{font-size:44px;color:#fff}
#s-report .rgrid{position:absolute;left:60px;right:60px;top:170px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rcol{background:#fff;border-radius:28px;border:6px solid var(--nc);padding:16px 18px 18px;box-shadow:0 10px 0 rgba(0,0,0,.22)}
.rh{text-align:center;border-bottom:4px dashed #d7def5;padding-bottom:10px;margin-bottom:8px}
.rh small{display:block;font-size:18px;font-weight:800;letter-spacing:3px;color:var(--nc)}
.rh b{font-size:28px;font-weight:900;color:var(--navy)}
.rs{font-size:60px;font-weight:900;color:var(--nc);line-height:1.1}
.rs small{font-size:24px;color:#6a74a8;letter-spacing:0}
.rr{display:flex;gap:10px;align-items:center;font-size:17px;font-weight:700;color:var(--navy);padding:6px 4px;border-bottom:2px solid #eef1fb;line-height:1.15}
.rr i{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:20px;color:#fff}
.rr.ok i{background:#2fa36b}.rr.no i{background:#e0453f}.rr.na i{background:#b8bfd8}
.rr.no span{color:#a02a24}
#s-report .rbtns{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:26px}
.opt{overflow:visible!important}
.rr span{font-size:16px}
.clearbtn{right:40px!important}

.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
#s-map .mapbg{z-index:0}
.foxi{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 14px rgba(0,0,0,.25))}
img.sparkle{width:38px;height:38px;object-fit:contain}
img.cloud{height:auto}
.node .art img,#s-intro .art img,.detail .dart img{width:100%;height:100%;object-fit:cover;display:block}
.deco{position:absolute;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.28));pointer-events:none}
.bobx{animation:floaty 5s ease-in-out infinite}
#s-welcome .kicker,#s-welcome .namebox label{color:#23306b!important;text-shadow:0 2px 0 rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.9)}
#s-welcome .byline{color:#23306b!important;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.9);font-weight:800}
#s-map .head .sub{display:table;margin:8px auto 0;background:rgba(255,255,255,.88);color:#23306b!important;padding:6px 26px;border-radius:30px;text-shadow:none!important;font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:60;background:#23306b;color:#fff;font-weight:900;font-size:34px;padding:18px 44px;border-radius:60px;border:6px solid #ffc83d;box-shadow:0 12px 30px rgba(0,0,0,.3);animation:toastin .5s cubic-bezier(.2,1.5,.4,1),toastout .5s 2s forwards}
@keyframes toastin{from{transform:translate(-50%,-120px);opacity:0}}
@keyframes toastout{to{opacity:0;transform:translate(-50%,-30px)}}

.mback{position:absolute;inset:0;z-index:20;background:rgba(35,48,107,.38);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.modal{width:1180px;background:#fff;border-radius:48px;border:8px solid #ffc83d;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:30px 54px 36px;animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
.modal h2{font-size:52px;font-weight:900;color:var(--navy);text-align:center}
.modal h2 small{font-size:28px;color:#6a74a8}
.modal .sub2{text-align:center;font-size:23px;font-weight:700;color:#5b658f;margin:2px 0 20px}
.mrow{display:flex;gap:28px}.mf{flex:1;display:flex;flex-direction:column;gap:6px}
.mf label{font-size:21px;font-weight:900;letter-spacing:4px;color:var(--navy)}
.mf input{font:800 36px 'Montserrat','Nunito',sans-serif;color:var(--navy);padding:12px 26px;border-radius:40px;border:5px solid #cfd8f6;outline:none;width:100%}
.cmwrap{position:relative}.cmpre{position:absolute;left:28px;top:50%;transform:translateY(-50%);font:800 36px 'Montserrat','Nunito',sans-serif;color:#2b4fc4;pointer-events:none}.cmwrap input{padding-left:92px!important}
.mf input:focus{border-color:#ffc83d}
.chars{display:flex;gap:20px;margin-top:22px}
.charcard{flex:1;background:#f3f7ff;border:6px solid #d5def8;border-radius:34px;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.2s;position:relative}
.charcard img{height:200px;width:100%;object-fit:contain}
.charcard b{font-size:28px;color:var(--navy);font-weight:900}
.charcard:hover{transform:translateY(-6px)}
.charcard.on{border-color:#2fa36b;background:#e6fbef;box-shadow:0 0 0 6px rgba(47,163,107,.25)}
.charcard.on::after{content:'✓';position:absolute;right:-6px;top:-10px;width:48px;height:48px;border-radius:50%;background:#2fa36b;color:#fff;font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;border:4px solid #fff}
.modal .go{display:block;margin:24px auto 0;position:static!important}

.infob{position:absolute;left:428px;top:36px;z-index:9;width:70px;height:70px;border-radius:50%;border:5px solid #fff;background:linear-gradient(#5b8cff,#2b4fc4);color:#fff;font:italic 900 44px/1 Georgia,'Times New Roman',serif;cursor:pointer;box-shadow:0 8px 18px rgba(10,40,110,.4);display:flex;align-items:center;justify-content:center}
.infob:hover{transform:scale(1.08)}
.modal.info{width:960px;height:500px;display:flex;flex-direction:column;padding:16px 30px 14px}
.modal.info h2{margin:0 0 2px;font-size:32px}
.info .ibody{flex:1;overflow:auto}
.info .inav{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:6px;font-size:20px;font-weight:800;color:var(--navy)}
.info .inav button{padding:6px 18px;font-size:20px}
.info .inav button[disabled]{opacity:.3}
.info .ichips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.info .ichip{background:#eef3ff;border:2px solid #c9d5f5;border-radius:24px;padding:3px 12px;font-weight:800;font-size:16px;color:var(--navy)}
.info h3{margin:6px 0 6px;font-size:22px;color:#2b4fc4}
.info table{width:100%;border-collapse:collapse;font-size:17px;font-weight:700;color:var(--navy)}
.info th{background:var(--navy);color:#fff;padding:6px 10px;text-align:left}
.info td{padding:6px 10px;border-top:2px solid #e3e9fb;vertical-align:top}
.info .mapg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.info .mapc{background:#f3f6ff;border:2px solid #c9d5f5;border-radius:14px;padding:8px 14px;color:var(--navy)}.info .mapc b{display:block;font-size:20px}.info .mapc span{display:block;font-size:16px;font-weight:700;margin:1px 0}.info .mapc small{font-size:14px;font-weight:600;color:#5c6aa0}
.info .lv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.info .lvc{border-radius:16px;padding:10px 14px;border:3px solid}
.info .lvc b{display:block;font-size:21px}.info .lvc .sc{font-size:16px;font-weight:800;margin:3px 0}
.info .lvc p{margin:3px 0 0;font-size:15px;font-weight:600;line-height:1.3}
.info .good{background:#e3f7ea;border-color:#37a05f;color:#1c6a3c}.info .fair{background:#fff4d6;border-color:#e0a100;color:#8a5f00}.info .weak{background:#ffe5e5;border-color:#e0534f;color:#9b2b27}
.info .note{margin-top:8px;font-size:15px;font-weight:600;color:#5c6aa0}

.histbtn{position:absolute;left:40px;bottom:36px;z-index:25}
.modal.hist{width:1300px}
.htab{max-height:660px;overflow:auto;margin-top:14px;border-radius:20px;border:3px solid #d5def8}
.htab table{width:100%;border-collapse:collapse;font-size:24px;font-weight:700;color:var(--navy)}
.htab th{position:sticky;top:0;background:var(--navy);color:#fff;padding:12px;text-align:left}
.htab td{padding:10px 12px;border-top:2px solid #e6ebfa}
.hbtns{display:flex;justify-content:center;gap:22px;margin-top:22px}
.btn.red{background:linear-gradient(#ff7a6b,#e0483a);color:#fff}
#sndBtn{position:absolute;left:36px;bottom:30px;z-index:31;background:rgba(255,255,255,.92);border-radius:50%;width:64px;height:64px;font-size:30px;box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:.6}
#sndBtn:hover{opacity:1}
#s-welcome .histbtn{left:120px}
.fpl{position:absolute;inset:0;z-index:0;pointer-events:none}
#s-map .node{z-index:2}
.fp{position:absolute;width:34px;height:40px;transition:opacity .25s}
.hero{position:absolute;width:150px;transform:translate(-50%,-100%);z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.hero .nm{background:#23306b;color:#fff;font-weight:900;font-size:24px;padding:4px 18px;border-radius:30px;border:3px solid #ffc83d;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.hero img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.3));animation:floaty 2.4s ease-in-out infinite}
.trvl{position:absolute;left:50%;top:188px;transform:translateX(-50%);z-index:9;background:#fff;border-radius:40px;padding:12px 18px 12px 34px;font-size:28px;font-weight:900;color:var(--navy);box-shadow:0 8px 0 rgba(0,0,0,.15);display:flex;align-items:center;gap:20px;white-space:nowrap}
.trvl .btn{position:static}
.chip img{width:46px;height:46px;object-fit:contain;margin:-6px 0}
#s-final .fox2{transform:none!important}
#s-welcome .fox{z-index:1}

.modal.gpick{width:1180px}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.gbtn{border:0;border-radius:28px;padding:26px 14px 22px;background:linear-gradient(#5b8cff,#2b4fc4);color:#fff;font-family:inherit;cursor:pointer;box-shadow:0 8px 0 #1c378f,0 14px 26px rgba(20,40,120,.3);transition:transform .15s}
.gbtn:hover{transform:translateY(-4px)}.gbtn:active{transform:translateY(4px);box-shadow:0 3px 0 #1c378f}
.gbtn small{display:block;font-size:20px;letter-spacing:4px;opacity:.85;font-weight:800}
.gbtn b{display:block;font-size:92px;line-height:1.05;font-weight:900}
.gbtn em{display:block;font-style:normal;font-size:21px;font-weight:700;opacity:.95;margin-top:4px}
.gbtn.off{background:#c9d1e8;box-shadow:0 8px 0 #a2acc9;color:#6b7699;cursor:not-allowed}.gbtn.off:hover{transform:none}
.gchip{display:inline-flex;align-items:center;gap:14px;background:#eef2ff;border:3px solid #b9c6f5;border-radius:999px;padding:6px 8px 6px 22px;font-weight:900;font-size:22px;letter-spacing:3px;color:#23306b;margin-bottom:8px}
.gchip button{border:0;border-radius:999px;background:#fff;color:#2b4fc4;font:800 18px inherit;font-family:inherit;padding:6px 16px;cursor:pointer}

#s-intro .art{left:520px!important;top:190px!important;width:480px!important;height:560px!important}
.narr{position:absolute;left:34px;top:200px;width:470px;height:650px;z-index:6;animation:narrin .9s cubic-bezier(.2,1.3,.4,1)}
.narr .nimg{position:absolute;left:0;right:0;bottom:0;height:570px;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 100%}
.narr .nimg img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.3))}
.ntag{position:absolute;left:50%;top:0;transform:translateX(-50%);background:#fff;color:#23306b;font-weight:900;font-size:34px;padding:6px 30px;border-radius:40px;border:5px solid #ffc83d;box-shadow:0 6px 0 rgba(0,0,0,.18);max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.rp{position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);border:0;background:#fff;color:#23306b;font-weight:800;font-size:26px;font-family:inherit;padding:12px 30px;border-radius:40px;box-shadow:0 6px 0 rgba(0,0,0,.18);cursor:pointer}
.narr.talking .nimg{animation:talk .45s ease-in-out infinite alternate}
@keyframes talk{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-14px) scale(1.03,.98)}}
@keyframes narrin{from{transform:translateX(-440px);opacity:0}to{transform:none;opacity:1}}
#s-intro .box.reading{outline:8px solid #ffc83d;outline-offset:3px}
#timer{position:absolute;left:44px;top:104px;z-index:26;display:flex;align-items:center;gap:12px;background:#fff;border:5px solid #23306b;border-radius:50px;padding:4px 26px 4px 20px;box-shadow:0 6px 0 rgba(0,0,0,.18);font-size:30px;font-weight:900;color:#23306b}
#timer b{font-variant-numeric:tabular-nums;font-size:40px;letter-spacing:1px}
#timer.hidden{display:none}
#timer.warn{background:#ffc83d;border-color:#b27a00}
#timer.crit{background:#e0453f;border-color:#8a1f1a;color:#fff;animation:tpulse .8s infinite alternate}
@keyframes tpulse{to{transform:scale(1.07)}}
#tbanner{position:absolute;left:50%;top:790px;transform:translate(-50%,-30px);opacity:0;pointer-events:none;z-index:70;background:#e0453f;color:#fff;font-weight:900;font-size:44px;padding:20px 56px;border-radius:60px;border:7px solid #fff;box-shadow:0 14px 34px rgba(0,0,0,.35);transition:all .4s cubic-bezier(.2,1.4,.4,1);white-space:nowrap}
#tbanner.on{opacity:1;transform:translate(-50%,0)}
.tnote{text-align:center;font-weight:700;font-size:20px;color:#6a74a8;margin-top:12px}
.ggrid{grid-template-columns:repeat(4,1fr)!important;gap:16px!important;margin-top:18px!important}.gbtn{padding:14px 8px 14px!important;border-radius:22px!important}.gbtn b{font-size:54px!important}
.ggrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.gbtn b.cn{font-size:32px!important;line-height:62px!important;white-space:nowrap;letter-spacing:0!important}.gbtn small{font-size:16px!important}.gbtn em{font-size:15px!important;min-height:38px}.modal.gpick{width:1240px!important}

#fsTop{position:absolute;right:36px;top:32px;z-index:40;border:0;background:#fff;color:#23306b;font-family:inherit;font-weight:800;font-size:24px;padding:14px 28px;border-radius:40px;box-shadow:0 5px 14px rgba(0,0,0,.25);cursor:pointer}
#fsTop.hidden{display:none}
.boardbtn{top:276px!important;background:radial-gradient(circle at 35% 30%,#e9f0ff,#9db8ff)!important;box-shadow:0 8px 0 rgba(0,0,0,.2),0 0 26px rgba(120,160,255,.8)!important;animation:none!important;font-size:50px!important}
#board{position:absolute;inset:0;background:rgba(20,28,70,.78);display:none;align-items:center;justify-content:center;z-index:55}
#board.open{display:flex}
#board .bwrap{display:flex;width:1840px;height:1010px;background:#fff;border:8px solid #23306b;border-radius:34px;overflow:hidden;box-shadow:0 14px 0 rgba(0,0,0,.28)}
#board .bside{width:580px;background:#f1f6ff;border-right:4px solid #cfdcff;padding:22px 24px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
#board .bqt{font-size:28px;font-weight:900;color:#2f56d6;letter-spacing:1px;text-transform:uppercase}
#board .bart{width:100%;height:auto;background:#fff;border-radius:20px;border:4px solid #cfdcff}
#board .bqq p{font-size:26px;font-weight:700;color:#23306b;line-height:1.3;margin:4px 0}
#board .bsteps{margin-top:auto;background:#fffbe6;border:4px solid #ffc83d;border-radius:22px;padding:12px 18px}
#board .bsteps b{display:block;font-size:24px;color:#b27a00;margin-bottom:4px}
#board .bsteps p{font-size:21px;font-weight:700;color:#23306b;line-height:1.28;margin:5px 0;padding-left:12px;border-left:6px solid #ffc83d}
#board .bmain{flex:1;display:flex;flex-direction:column}
#board .btools{height:104px;display:flex;align-items:center;gap:12px;padding:0 20px;background:#fff;border-bottom:4px solid #e3e9fa}
#board .btools button{border:0;font-family:inherit;cursor:pointer;font-weight:800}
#board .bc{width:52px;height:52px;border-radius:50%;border:5px solid #fff!important;box-shadow:0 0 0 3px #c9d1e8}
#board .bc.on{box-shadow:0 0 0 6px #23306b}
#board .bs{width:52px;height:52px;border-radius:14px;background:#e3e9fa;color:#23306b;font-size:22px}
#board .bs.on{background:#23306b;color:#fff}
#board .bt{height:56px;padding:0 20px;border-radius:30px;background:#e3e9fa;color:#23306b;font-size:21px}
#board .bt.on{background:#23306b;color:#fff}
#board .bt.close{margin-left:auto;background:#ff7a3d;color:#fff}
#board .sep{width:4px;height:44px;background:#e3e9fa;border-radius:3px}
#bcv{display:block;width:1180px;height:860px;touch-action:none;cursor:crosshair;background:#fff}
#bcv.grid{background-color:#fff;background-image:linear-gradient(#dfe7fb 2px,transparent 2px),linear-gradient(90deg,#dfe7fb 2px,transparent 2px);background-size:60px 60px}

/* ===== Round 4: explorer redesign ===== */
#s-welcome{background:#f4d9a0}
#s-welcome .wshade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(18,40,84,.62) 0%,rgba(18,40,84,.28) 48%,rgba(18,40,84,0) 75%)}
#s-welcome .title,#s-welcome .brand{z-index:2}
.wnpc{position:absolute;bottom:0;z-index:1;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));width:auto}
.wnpc.w2{right:70px;height:820px}.wnpc.w1{right:560px;height:660px}
#s-welcome .byline{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2}
#s-final .fshade{position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(255,170,60,.38),rgba(255,120,60,.45))}
#s-final .rays{z-index:0;opacity:.22}
#s-final .sub{display:inline-block;background:rgba(255,255,255,.92);padding:8px 34px;border-radius:44px;font-size:36px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
#s-final .fox{width:420px;z-index:2}#s-final .fox2{width:330px;z-index:2}
#s-final .center,#s-final .stamps,#s-final .finbtns{z-index:3}
#s-final .stamps div{background:rgba(255,248,230,.9);border-radius:22px;padding:8px 14px 10px}

/* intro: quest-giver scene */
#s-intro{background:#2a3a2a}
#s-intro .scn{position:absolute;inset:0;background-size:cover;background-position:center}
#s-intro .scnshade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.28))}
#s-intro .qhead{position:absolute;left:0;right:0;top:34px;text-align:center;z-index:6}
#s-intro .qhead small{display:inline-block;font-size:25px;font-weight:800;letter-spacing:5px;color:#fff;background:rgba(35,48,107,.78);padding:6px 28px;border-radius:30px}
#s-intro .qhead b{display:block;margin:8px auto 0;width:max-content;max-width:1000px;font-size:78px;font-weight:900;color:#fff;line-height:1;padding:10px 60px 16px;border-radius:22px;background:linear-gradient(#b8742f,#8a521c);border:6px solid #f3d18a;box-shadow:0 8px 0 rgba(0,0,0,.28);text-shadow:0 4px 0 rgba(0,0,0,.3)}
#s-intro .stu{position:absolute;left:34px;bottom:-6px;width:470px;height:690px;z-index:5;animation:narrin .9s cubic-bezier(.2,1.3,.4,1)}
#s-intro .stu img{position:absolute;left:0;right:0;bottom:0;height:640px;width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 16px 16px rgba(0,0,0,.4))}
#s-intro .ntag{position:absolute;left:50%;top:48px;transform:translateX(-50%);background:#fff;color:#23306b;font-weight:900;font-size:34px;padding:6px 30px;border-radius:40px;border:5px solid #ffc83d;box-shadow:0 6px 0 rgba(0,0,0,.2);max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-intro .say{position:absolute;left:30px;top:-110px;background:#fff;color:#23306b;font-weight:800;font-size:27px;padding:12px 22px;border-radius:26px;border:4px solid #23306b;max-width:360px;line-height:1.2;opacity:0;animation:sayin .5s 1.1s forwards}
#s-intro .say::after{content:"";position:absolute;left:70px;bottom:-22px;border:12px solid transparent;border-top:12px solid #23306b;border-bottom:0;border-left-width:6px;border-right-width:18px}
@keyframes sayin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#s-intro .npc{position:absolute;right:26px;bottom:-6px;width:560px;height:800px;z-index:5;animation:npcin .9s .15s cubic-bezier(.2,1.3,.4,1) both}
@keyframes npcin{from{transform:translateX(480px);opacity:0}to{transform:none;opacity:1}}
#s-intro .npc img{position:absolute;right:0;bottom:0;height:760px;width:auto;max-width:100%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4));animation:floaty 4.2s ease-in-out infinite}
#s-intro .nplate{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;background:linear-gradient(#fff6dc,#f3d796);border:5px solid #8a521c;border-radius:20px;padding:6px 26px 8px;text-align:center;box-shadow:0 7px 0 rgba(0,0,0,.25);white-space:nowrap;z-index:2}
#s-intro .nplate b{display:block;font-size:30px;font-weight:900;color:#5a3512}
#s-intro .nplate small{display:block;font-size:18px;font-weight:800;letter-spacing:2px;color:#9a6a30;text-transform:uppercase}
#s-intro .bubble{position:absolute;left:520px;top:215px;width:830px;z-index:6;background:#fff9e8;border:7px solid #8a521c;border-radius:34px;padding:26px 38px 14px;box-shadow:0 12px 0 rgba(0,0,0,.22),0 30px 50px rgba(0,0,0,.3);animation:sayin .6s .5s both}
#s-intro .bubble::after{content:"";position:absolute;right:-48px;top:310px;border:26px solid transparent;border-left:44px solid #8a521c;border-right:0}
#s-intro .bubble::before{content:"";position:absolute;right:-30px;top:318px;border:18px solid transparent;border-left:32px solid #fff9e8;border-right:0;z-index:2}
#s-intro .bpart{padding:6px 0 12px}
#s-intro .bpart.m{border-top:4px dashed #d9b97a;padding-top:14px}
#s-intro .bpart h4{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--nc);margin-bottom:6px}
#s-intro .bpart p{font-size:31px;font-weight:700;line-height:1.38;color:#2b2350}
#s-intro .actions{position:absolute;left:520px;top:auto;bottom:46px;z-index:7;display:flex;gap:24px;align-items:center}

/* map: bright sea map with pill labels */
#s-map{background:#27aee0}
#s-map .mapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
#s-map .rt{position:absolute;inset:0;z-index:1;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(10,60,110,.25))}
.arr{position:absolute;z-index:2;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:linear-gradient(#ffe066,#ffb300);border:5px solid #fff;box-shadow:0 5px 10px rgba(10,60,110,.35);display:flex;align-items:center;justify-content:center;pointer-events:none}
.arr i{font-style:normal;font-size:36px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(150,90,0,.6);display:block;line-height:1}
#s-map .rib{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:5;min-width:820px;text-align:center;padding:12px 110px 18px;background:linear-gradient(#fff6da,#f4dba0);clip-path:polygon(0 8%,3% 0,97% 0,100% 8%,96% 50%,100% 92%,97% 100%,3% 100%,0 92%,4% 50%);filter:drop-shadow(0 8px 6px rgba(10,60,110,.3))}
#s-map .rib b{font-size:58px;font-weight:900;font-style:italic;letter-spacing:1px;color:#1d2f6f;line-height:1;text-shadow:0 3px 0 rgba(255,255,255,.7);white-space:nowrap}
#s-map .rsub{position:absolute;left:50%;top:104px;transform:translateX(-50%);z-index:6;padding:7px 34px;background:#fff8e4;border:3px solid #d8b56a;border-radius:14px;font-size:24px;font-weight:800;color:#1d2f6f;white-space:nowrap;box-shadow:0 5px 0 rgba(150,110,40,.35)}
.isl{position:absolute;width:420px;z-index:3;background:none;text-align:center;transition:transform .2s}
.isl:hover{transform:translateY(-6px) scale(1.04)}
.isl .pill{position:relative;display:flex;align-items:center;gap:14px;padding:8px 26px 8px 8px;border-radius:60px;background:linear-gradient(#fffaf0,#f7e8c8);border:4px solid #fff;box-shadow:0 8px 0 rgba(120,80,20,.28),0 14px 22px rgba(10,60,110,.3);text-align:left}
.isl .num{flex:none;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--nc) 38%,var(--nc) 100%);color:#fff;font-weight:900;font-size:38px;display:flex;align-items:center;justify-content:center;border:5px solid #fff;box-shadow:0 4px 8px rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.isl .nm b{display:block;font-size:29px;font-weight:900;color:#1d2f6f;line-height:1.05;white-space:nowrap}
.isl .nm small{display:block;font-size:15px;font-weight:800;color:#6a74a8;line-height:1.2;margin-top:3px;max-width:240px}
.isl .stat{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 22px 6px 10px;border-radius:30px;background:linear-gradient(#3b5a95,#27406f);border:3px solid #fff;color:#fff;font-weight:800;font-size:21px;box-shadow:0 5px 0 rgba(10,30,70,.35)}
.isl .stat img{width:32px;height:32px;object-fit:contain}
.isl.prog .stat{background:linear-gradient(#ffb84d,#f08c00)}
.isl.done .stat{background:linear-gradient(#3fcf8b,#1f9c62)}
#s-map .foot{bottom:34px;z-index:8}
#s-map .trvl{top:auto;bottom:34px;z-index:9}
#s-map .hero{z-index:7}

/* ===== math formatting ===== */
sup.mx,sub.mx{font-size:.7em;line-height:0;position:relative;vertical-align:baseline;font-weight:inherit}
sup.mx{top:-.52em;margin-left:.03em}sub.mx{top:.26em}
.mxf{display:inline-block;vertical-align:middle;text-align:center;margin:0 .1em;line-height:1.12;font-size:.94em;white-space:nowrap;position:relative;top:-.04em}
.mxn{display:block;padding:0 .16em .07em;border-bottom:.075em solid currentColor}
.mxd{display:block;padding:.07em .16em 0}
.mxf .mxf{font-size:.8em}
.mxr{display:inline-block;position:relative;padding-left:.72em;white-space:nowrap}
.mxs{position:absolute;left:0;top:0;width:.72em;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:miter;stroke-linecap:butt}
.mxc{display:inline-block;border-top:.075em solid currentColor;padding:.1em .12em 0 .04em;line-height:1.15}
.mxl{display:inline-flex;flex-direction:column;align-items:center;white-space:nowrap}
.mxls{font-size:.64em;line-height:1;margin-top:.12em}
.mxi{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;vertical-align:-.72em;line-height:1;white-space:nowrap;margin:0 .12em 0 .05em}
.mxis{grid-row:1/3;grid-column:1;align-self:center;font-size:1.95em;line-height:1;font-weight:400}
.mxih,.mxil{grid-column:2;font-size:.62em;line-height:1;margin-left:.1em}
.mxih{grid-row:1;align-self:start;margin-top:.1em}.mxil{grid-row:2;align-self:end;margin-bottom:.1em}
.mxis0{font-size:1.45em;line-height:.8;font-weight:400;vertical-align:-.1em}
.mxss{display:inline-flex;flex-direction:column;vertical-align:-.5em;font-size:.68em;line-height:1.05;margin-left:.04em;text-align:left}
.opt .mxf{font-size:.88em;line-height:1.05}
#s-question .ans .ansbody.row{flex-direction:row;align-items:center;gap:28px}#s-question .ans .ansbody.row b{flex:none;max-width:38%}#s-question .ans .ansbody.row span{margin-top:0;flex:1}
#s-question .ans .ansbody.tight span .mxf{font-size:.66em;line-height:.92}#s-question .ans .ansbody.tight b .mxf{font-size:.62em}
#s-question .ans .ansbody b .mxf{font-size:.8em;line-height:1.02}
#s-question .ans .ansbody span .mxf{font-size:.86em;line-height:1}
#s-question .ans .ansbody span .mxn{padding-bottom:.03em}#s-question .ans .ansbody span .mxd{padding-top:.03em}
.efwrap{width:1640px;background:#f4f6fc;border-radius:30px;border:6px solid #1e3a9f;padding:14px 20px 20px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.eftools{display:flex;align-items:center;gap:12px;margin-bottom:12px;height:62px}
.eftools .btn.small{font-size:21px;padding:10px 22px;box-shadow:0 5px 0 #b9c4e8}
.eftools .btn.blue{box-shadow:0 5px 0 #1c3796}.eftools .btn:not(.ghost):not(.blue){box-shadow:0 5px 0 #b85a08}
.eftools select{font:700 20px 'Montserrat','Nunito',sans-serif;color:#23306b;border:3px solid #cfd8f6;border-radius:30px;padding:10px 18px;max-width:560px;background:#fff}
.eftools .efst{font-weight:700;font-size:18px;color:#2fa36b;margin:0 auto 0 4px}
.efttl{font-size:26px;font-weight:900;color:#23306b;margin-right:auto}
.ef{position:relative;background:#fff;overflow:hidden;border:2px solid #cfd6ea;margin:0 auto}
.ef>*{position:absolute}
.efwm{left:0;right:0;top:300px;text-align:center;font-size:230px;font-weight:900;color:rgba(30,58,159,.045);pointer-events:none;line-height:1}
.eft{position:absolute;white-space:nowrap;line-height:1.1}
.efi{position:absolute;box-sizing:border-box;font-family:inherit;font-weight:700;color:#1e3a9f;background:#e9f0ff;border:1.5px solid #aebbe6;border-radius:8px;padding:0 14px;outline:none}
.efi:focus{border-color:#ffc83d;box-shadow:0 0 0 3px rgba(255,200,61,.5)}
.eft2{padding:12px 14px;resize:none;line-height:1.4;font-weight:600}
.efcb{position:absolute;width:30px;height:30px;box-sizing:border-box;border:2px solid #1e3a9f;border-radius:6px;background:#fff;cursor:pointer}
.efcb.on::after{content:"";position:absolute;left:8px;top:2px;width:8px;height:17px;border:solid #1e3a9f;border-width:0 4.5px 4.5px 0;transform:rotate(40deg)}
.efbtn{left:260px}
#s-welcome .histbtn,#s-welcome .evalbtn{font-size:26px;padding:14px 30px;margin-top:0}
#s-welcome .evalbtn{left:390px}
.evalbtn{position:absolute;bottom:36px;z-index:25}
#s-final .finbtns{gap:18px}#s-final .finbtns .btn{font-size:29px;padding:18px 30px;white-space:nowrap;gap:10px}

.efi.hd{background:transparent;border:0;border-bottom:3px solid rgba(255,255,255,.7);border-radius:0;color:#fff;font-weight:800;padding:0 14px}
.efi.hd::placeholder{color:rgba(255,255,255,.45)}
.efi.hd:focus{box-shadow:none;border-bottom-color:#ffc83d}
.efwm{top:250px!important}
.efnudge{position:absolute;left:50%;top:868px;transform:translateX(-50%);z-index:8;background:#fff;color:#c2410c;font-weight:900;font-size:30px;padding:12px 34px;border-radius:40px;border:5px solid #ffc83d;box-shadow:0 8px 0 rgba(0,0,0,.18);white-space:nowrap;animation:efpop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes efpop{from{opacity:0;transform:translateX(-50%) translateY(30px)}}
#s-final .finbtns .btn.jump{animation:efjump .9s ease-in-out infinite;background:linear-gradient(#ffd23d,#ff9a00);color:#23306b;box-shadow:0 8px 0 #b86a00,0 0 30px rgba(255,210,61,.9)}
@keyframes efjump{0%,100%{transform:translateY(0)}20%{transform:translateY(-34px)}40%{transform:translateY(0)}55%{transform:translateY(-16px)}70%{transform:translateY(0)}}

.efcap.mback{background:#e8edf9!important;backdrop-filter:none!important}
.efcap .eftools{display:none}
.efcap .efwrap{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.eftools{gap:9px}.eftools .btn.small{font-size:19px;padding:10px 16px}.eftools select{max-width:360px;font-size:18px}.eftools .efst{font-size:16px}
.eftools .btn,.eftools .efst{white-space:nowrap}.eftools select{max-width:300px!important}.eftools .btn.small{font-size:18px;padding:10px 14px}

.efi.efmiss{border-color:#e0453f!important;background:#fff1f0!important;box-shadow:0 0 0 3px rgba(224,69,63,.35)!important}
.efi.hd.efmiss{background:rgba(224,69,63,.35)!important;border-bottom-color:#ff8a80!important;box-shadow:none!important}
.efcb.efmiss{border-color:#e0453f!important;background:#fff1f0;box-shadow:0 0 0 3px rgba(224,69,63,.35)}
.efcap .efmiss{border-color:#aebbe6!important;background:transparent;box-shadow:none!important}
.efcap .efcb.efmiss{border-color:#1e3a9f!important;background:#fff}
.efcap .efi.efmiss:not(.hd){background:#e9f0ff!important}

/* ===== ELA additions ===== */
.ecard{width:100%;height:100%;background:rgba(255,255,255,.94);border-radius:34px;border:6px solid var(--nc);box-shadow:0 10px 0 rgba(0,0,0,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 30px;position:relative;overflow:hidden;font-family:'Montserrat','Nunito',sans-serif}
.ecard .ee{font-size:130px;line-height:1.1}
.ecard .eb{font-size:54px;font-weight:900;color:var(--navy);line-height:1.18;margin-top:10px}
.ecard .es{font-size:30px;font-weight:700;color:#6a74a8;margin-top:14px}
.ecard.pic{padding:0;background:#fff}
.ecard.pic img{width:100%;height:100%;object-fit:cover;display:block}
.rdbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font:900 26px 'Montserrat','Nunito',sans-serif;padding:12px 30px;border-radius:40px;border:5px solid #fff;background:linear-gradient(#ffd23d,#ff9a00);color:#23306b;box-shadow:0 6px 0 #b86a00,0 10px 20px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
.rdbtn:hover{filter:brightness(1.07)}
.qbody.short{height:auto!important;min-height:150px;padding:18px 150px 18px 40px!important}
.qbody.short p{font-size:32px}
.build{position:absolute;left:810px;top:392px;width:1040px;height:300px;display:flex;flex-direction:column;gap:22px}
.slots{min-height:118px;background:#fff;border:5px dashed var(--nc);border-radius:26px;padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;box-shadow:0 6px 0 rgba(0,0,0,.12)}
.slots .hint{font-size:28px;font-weight:700;color:#8a93b8;padding-left:10px}
.bank{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.tile{font:800 42px 'Montserrat','Nunito',sans-serif;color:var(--navy);background:#fff6d8;border:5px solid #e0b22e;border-radius:20px;padding:8px 26px;box-shadow:0 6px 0 rgba(0,0,0,.18);cursor:pointer}
.tile:hover{transform:translateY(-3px)}
.tile.on{background:#e3efff;border-color:var(--nc)}
.tile.ghost{visibility:hidden;cursor:default}
.build.locked .slots{border-style:solid}.build.locked .tile{cursor:default}
.build.ok .slots{border-color:#2fa36b;background:#d8f8e6}.build.no .slots{border-color:#e0453f;background:#ffe1e1}
.rub{position:absolute;left:810px;top:430px;width:1040px;height:224px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rb{background:#fff;border:5px solid var(--nc);border-radius:26px;box-shadow:0 6px 0 rgba(0,0,0,.14);font-family:inherit;color:var(--navy);padding:10px 12px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .25s}
.rb b{font-size:60px;font-weight:900;color:var(--nc);line-height:1}
.rb span{font-size:20px;font-weight:700;line-height:1.22}
.rub:not(.locked) .rb:hover{transform:translateY(-3px)}
.rub.locked .rb{cursor:default}
.rub.locked .rb:not(.p){opacity:.45}
.rb.p.pass{background:#d8f8e6;border-color:#2fa36b;box-shadow:0 0 0 6px rgba(47,163,107,.35)}.rb.p.pass b{color:#2fa36b}
.rb.p.fail{background:#ffe1e1;border-color:#e0453f;box-shadow:0 0 0 6px rgba(224,69,63,.3)}.rb.p.fail b{color:#e0453f}
.rubnote{position:absolute;left:810px;top:662px;width:1040px;text-align:center;font-size:20px;font-weight:800;color:#6a74a8}
.stbook{display:flex;width:1760px;height:900px;background:#fffbe6;border:10px solid #8a521c;border-radius:40px;overflow:hidden;box-shadow:0 18px 0 rgba(0,0,0,.3);animation:popin .4s cubic-bezier(.2,1.3,.4,1)}
.stpic{width:1000px;background:#fff;border-right:8px solid #e9c98d;flex:none}
.stpic img{width:100%;height:100%;object-fit:cover;display:block}
.sttxt{flex:1;padding:36px 44px 30px;display:flex;flex-direction:column}
.sttl{font-size:34px;font-weight:900;color:#8a521c}
.stpg{font-size:22px;font-weight:800;letter-spacing:3px;color:#b0894f;margin:4px 0 18px}
.sttxt p{font-size:40px;font-weight:700;line-height:1.5;color:#2b2350;flex:1;overflow:hidden}
.stnav{display:flex;gap:16px;align-items:center;padding-top:10px}
.bart2{height:290px;flex:none}.bart2 .ecard{border-width:4px;border-radius:20px;box-shadow:none;padding:10px}
.bart2 .ee{font-size:64px}.bart2 .eb{font-size:30px;margin-top:4px}.bart2 .es{font-size:18px;margin-top:6px}
.bart2 .rdbtn{display:none}
/* ELA feedback form: orange */
.efwrap{border-color:#c8430f!important;background:#fdf1e8!important}
.ef .efi:not(.hd){background:#fff1e6;border-color:#e0875a}
.ef .efcb{border-color:#c8430f}.ef .efcb.on::after{border-color:#1e3a9f}
.efwm{color:rgba(200,67,15,.05)!important;top:330px!important}
.eftools .efttl{color:#c8430f}
.mapc small{display:block}

/* ===== STORYBOOK WORLD – ELA visual identity (distinct from Math Explorer Journey) ===== */
#s-welcome h1,#s-final .center h1,#s-map .rib b,#s-intro .qhead b,.sttl,.gchip,.modal h2{font-family:Georgia,'Palatino Linotype','Book Antiqua',serif}
#s-welcome .wshade{background:linear-gradient(90deg,rgba(58,36,118,.62) 0%,rgba(58,36,118,.26) 50%,rgba(58,36,118,0) 78%)}
#s-welcome .sbsub{font-family:Georgia,serif;font-style:italic;font-size:46px;font-weight:700;color:#fff;margin-top:14px;text-shadow:0 3px 10px rgba(40,20,90,.75)}
#s-welcome .tag{margin-top:26px;font-size:34px}
#s-welcome .tag span{background:#fff8e6;color:#5a3a9a}
.wnpc.w2{right:90px;height:800px}
.charcard small{font-size:15px;font-weight:700;color:#6a74a8;text-align:center;line-height:1.15}
.charcard b{font-size:23px}
.charcard img{height:190px}
.chars{gap:16px}
.chip{padding:8px 26px 8px 12px}.chip img{width:74px;height:74px;margin:-14px 0}
.lvd{letter-spacing:3px;font-size:.8em;opacity:.85}
/* map */
#s-map .rib{min-width:1120px;padding:12px 90px 18px}
#s-map .rib b{font-size:44px;font-style:italic;letter-spacing:1px}
.isl .stat{background:linear-gradient(#8b86c9,#5d5aa6);font-size:22px;padding:6px 26px}
.isl.done .stat{background:linear-gradient(#3fcf8b,#1f9c62)}
.isl .stat img{display:none}
.hero{width:180px}.hero img{width:170px;height:170px}
.tgl{position:absolute;z-index:4;font:800 17px/1 inherit;font-family:inherit;color:#fff;background:linear-gradient(#a78bfa,#7c5ce0);border:3px solid #fff;border-radius:22px;padding:7px 16px;cursor:pointer;box-shadow:0 4px 0 rgba(60,30,120,.35);white-space:nowrap}
.tgl.on{background:linear-gradient(#9aa3c8,#6f7aa6)}
.tgl:hover{filter:brightness(1.08)}
#s-map .foot{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:9}
/* final + report */
#s-final .stamps .sc{font-size:22px;color:#6b3fb8}
#s-final .stamps div{min-width:250px}
#s-final .stamps{gap:34px!important}
#s-final .title-badge{background:linear-gradient(#a98bff,#6a43d4);font-size:54px;padding:10px 64px;font-family:Georgia,serif;letter-spacing:4px}
#s-report .rgrid{grid-template-columns:repeat(3,1fr)}
img.sparkle{width:46px;height:46px}

.qhero{position:absolute;left:34px;bottom:0;height:330px;z-index:3;filter:drop-shadow(0 12px 12px rgba(0,0,0,.3));pointer-events:none}
.chip img{width:64px!important;height:64px!important;margin:-10px 0!important}
/* welcome layout: title on the left, form shifted right */
#s-welcome .title{left:70px;top:190px;width:640px}
#s-welcome h1{font-size:104px!important;line-height:.98}
#s-welcome .sbsub{font-size:36px}
#s-welcome .tag{font-size:28px}
#s-welcome .modal{transform:translateX(330px) scale(.9)}
.wnpc.w2{right:auto;left:170px;height:400px}
#s-welcome .mback{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#s-welcome .modal{box-shadow:0 20px 60px rgba(40,20,90,.45)}
#s-welcome .kicker{color:#fff!important;text-shadow:0 2px 8px rgba(40,20,90,.8)!important}
#s-welcome .byline{display:none}

/* welcome: fixed-size card, no pop animation, no hover jumps */
#s-welcome .modal{animation:none!important;width:1120px!important;height:860px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:30px;padding-bottom:30px}
#s-welcome .charcard,#s-welcome .gbtn{transition:none!important}
#s-welcome .charcard:hover,#s-welcome .gbtn:hover{transform:none!important}
#s-welcome .charcard{min-height:300px;justify-content:flex-start}
/* reading passage stays on screen */
.psgcard{display:block!important;text-align:left!important;padding:18px 28px 12px!important;overflow-y:auto;overflow-x:hidden}
.psgcard::-webkit-scrollbar{width:14px}.psgcard::-webkit-scrollbar-thumb{background:#2faa86;border-radius:8px}.psgcard::-webkit-scrollbar-track{background:#e6f5ee;border-radius:8px}
.psgcard .psgt{font:900 30px Georgia,serif;color:#1d7a5e;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.psgcard .rdbtn{position:static!important;transform:none!important;font-size:18px;padding:6px 16px;margin:0}
.psgcard p{font-size:var(--pf,23.5px);line-height:1.36;margin:0 0 9px;font-weight:600;color:#23306b}
.psgcard p b{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;border-radius:50%;background:#2faa86;color:#fff;font-size:19px;margin-right:10px;vertical-align:middle}
.mapimg{object-fit:cover}

/* whiteboard on Reading: wide passage, write directly on it, board below */
#board .bstage{position:relative;flex:1;min-height:0}
#board .bwrap.rd .bside{display:none}
#board .bwrap.rd .btools{height:92px}
#board .bwrap.rd #bcv{position:absolute;left:0;top:0;width:100%;height:100%;background-color:transparent}
#board .bwrap.rd .bpsg{position:absolute;left:0;right:0;top:0;padding:14px 40px 0;background:linear-gradient(#fffdf4 0,#fffdf4 100%);height:640px;box-sizing:border-box;border-bottom:5px dashed #cfdcff}
#board .bwrap.rd .bpt{font:900 32px Georgia,serif;color:#1d7a5e;margin-bottom:6px}
#board .bwrap.rd .bpsg p{font-size:var(--bpf,41px);line-height:1.4;margin:0 0 8px;font-weight:600;color:#23306b}
#board .bwrap.rd .bpsg p b{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border-radius:50%;background:#2faa86;color:#fff;font-size:22px;margin-right:12px;vertical-align:middle}
#board .bwrap.rd .bpq{position:absolute;left:40px;right:40px;bottom:10px;font-size:36px;font-weight:900;color:#2f56d6}
/* Teacher-led editing */
.edcard{padding:22px 30px!important}
.edcard p{font-size:var(--edf,34px)!important;line-height:1.3!important;margin:0 0 calc(var(--edf,34px)*.4)!important}
.edcard p b{width:calc(var(--edf,34px)*1.15)!important;height:calc(var(--edf,34px)*1.15)!important;line-height:calc(var(--edf,34px)*1.15)!important;font-size:calc(var(--edf,34px)*.7)!important}
.rb.p.pass b{font-size:60px}
.edconf{z-index:9;position:absolute;left:1230px;top:712px;font-size:26px;padding:12px 34px}
.rub .rb span{font-size:25px}

#s-question .ans.edans{top:690px;height:226px;z-index:6}
#s-question .ans.edans .ansbody{justify-content:flex-start;padding:18px 22px 0}
#s-question .ans.edans .ansbody b{font-size:21px;line-height:1.2}
#s-question .ans.edans .ansbody span{font-size:16px;line-height:1.22;margin-top:6px}
#s-question .stu{z-index:0!important}
#s-question .ecard.psgcard{z-index:7}
#s-question .dots{z-index:8}
.psgcard .scrh{font:800 16px Montserrat,Inter,sans-serif;color:#2faa86;margin-left:auto;margin-right:12px}
#sndBtn{opacity:.85}
#sndBtn.pulse{animation:sndp 1.1s ease-in-out infinite alternate;opacity:1;box-shadow:0 0 0 6px rgba(255,180,60,.55),0 4px 12px rgba(0,0,0,.2)}
@keyframes sndp{to{transform:scale(1.14)}}

.ee:empty{display:none}
.hero .pin{display:block;width:84px;height:84px;margin:6px auto 0;border-radius:50%;background:#23306b;color:#fff;font:900 42px/84px Montserrat,Inter,sans-serif;text-align:center;border:5px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.4);animation:pinb 1.6s ease-in-out infinite alternate}
@keyframes pinb{to{transform:translateY(-8px)}}
.stpic{position:relative}.pcred{position:absolute;left:0;right:0;bottom:0;padding:6px 12px;font:600 13px Inter,Arial,sans-serif;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:right}
#stage[data-lvl="2"] .wshade{background:linear-gradient(180deg,rgba(20,26,58,.55),rgba(20,26,58,.3) 45%,rgba(20,26,58,.7))}
#stage[data-lvl="1"] .scnshade,#stage[data-lvl="2"] .scnshade{background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.34))}
#stage[data-lvl="1"] .fshade,#stage[data-lvl="2"] .fshade{background:rgba(20,26,58,.55)}

#board .bwrap.rd .bpt{display:flex;align-items:center;justify-content:space-between}
#board .bnav{display:flex;align-items:center;gap:14px;font:800 22px Montserrat,Inter,sans-serif;color:#1d7a5e}
#board .bnav i{font-style:normal}
#board .bnav button{font:800 22px Montserrat,Inter,sans-serif;padding:8px 22px;border:0;border-radius:14px;background:#2faa86;color:#fff;cursor:pointer;box-shadow:0 3px 0 #1d7a5e}
#board .bnav button:disabled{opacity:.35;cursor:default;box-shadow:none}
#board .bwrap.rd .bpq{font-size:32px}
#board .bnav{position:relative;z-index:5}

.stbook.wide .stpic{width:520px}
.stbook.wide .sttxt{padding:30px 40px 26px}

.stsrc,.psrc{font:italic 600 18px Inter,Arial,sans-serif;color:#8a6d3b;margin:-2px 0 6px}
.psrc{font-size:16px;margin:0 0 8px}
#board .bsrc{display:block;font:italic 600 20px Inter,Arial,sans-serif;color:#6b7aa8;margin-top:2px}
.tmsg{margin-top:10px;font-weight:800;opacity:.85}

/* order hint inside the answer box, never over the word tiles */
.slots .hint{position:static!important;display:block;bottom:auto;color:#8a93b8}
/* writing: answer box never blocks or covers the word tiles */
#s-question .ans:not(.show){pointer-events:none}
.build{height:auto!important;max-height:316px}
.build .tile{font-size:var(--tf,42px);padding:6px 20px}
.build .bank .tile.ghost{display:none}
.build .slots{min-height:96px}
/* ===== uniform text sizes + readable answer box ===== */
#s-question .qbody.lo{height:190px}
.opts.one{top:390px;height:300px;grid-template-columns:1fr;grid-auto-rows:1fr}
.opts.one .opt{padding:6px 22px}
.opt span{line-height:1.18}
.opts.rev .opt.w{opacity:1}
.opt.p::after{right:auto;left:-14px;top:-14px;width:42px;height:42px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;z-index:2}
.opt.p.c::after{content:"✓"}
.opt.w::after{content:"✗"}
#s-question .ans{top:706px;height:232px;z-index:9}
#s-question .ans .ansbody,#s-question .ans.edans .ansbody{justify-content:flex-start;padding:22px 26px 14px;overflow-y:auto;overscroll-behavior:contain}
#s-question .ans .ansbody b,#s-question .ans.edans .ansbody b{font-size:30px;line-height:1.2;flex:none}
#s-question .ans .ansbody span,#s-question .ans.edans .ansbody span{font-size:24px;line-height:1.36;margin-top:8px}
#s-question .ans.edans{top:690px;height:248px}
#s-question:has(.ans.show) .dots{visibility:hidden}
#s-question .ans .ansbody::-webkit-scrollbar{width:10px}
#s-question .ans .ansbody::-webkit-scrollbar-thumb{background:#8fd3b0;border-radius:6px}
/* edit / rubric questions: compact buttons while the answer is open */
#s-question:has(.ans.show) .rub{height:100px}
#s-question:has(.ans.show) .rub .rb{flex-direction:row;justify-content:center;gap:10px;padding:6px 10px}
#s-question:has(.ans.show) .rub .rb b{font-size:30px}
#s-question:has(.ans.show) .rub .rb span{font-size:22px}
#s-question:has(.ans.show.edans) .rubnote{display:none}
#s-question:has(.ans.show) .edconf{display:none!important}
#s-question .ans.show.edans{top:566px;height:374px}
#s-question .ans:not(.edans) .ansbody{padding:20px 26px 14px}
#s-question .ans{transition:opacity .3s!important}

/* ================= 3D & LIVELY LAYER ================= */
#stage{perspective:1800px;perspective-origin:50% 45%}
/* screens fly in from depth */
.screen{transform:translateZ(-260px) rotateX(7deg) scale(.97);transform-origin:50% 60%;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.3,1),visibility 0s .6s}
.screen.active{transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.3,1),visibility 0s}
/* parallax backgrounds follow the pointer */
#s-welcome .bgimg,#s-final .bgimg,#s-intro .scn,#s-question .dest-bg{transform:scale(1.07) translate3d(var(--px,0px),var(--py,0px),0);transition:transform .35s ease-out;will-change:transform}
#s-welcome .title,#s-intro .stu,#s-intro .npc{translate:calc(var(--px,0px)*-.5) calc(var(--py,0px)*-.5);transition:translate .35s ease-out}
/* slow "breathing" camera on backgrounds */
@keyframes fxbreath{0%,100%{scale:1}50%{scale:1.035}}
#s-welcome .bgimg,#s-final .bgimg,#s-intro .scn{animation:fxbreath 18s ease-in-out infinite}
/* tilt cards (driven by fx3d.js) */
.fxt{transform-style:preserve-3d;will-change:transform}
.fxt.fxon{transition:transform .08s linear!important;z-index:6}
.fxt:not(.fxon){transition:transform .5s cubic-bezier(.2,1.2,.4,1)!important}
.fxglare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),rgba(255,255,255,0) 55%);mix-blend-mode:screen;z-index:9}
.fxon>.fxglare{opacity:1}
/* deeper, layered shadows = thicker objects */
#s-question .ecard{box-shadow:0 10px 0 rgba(0,0,0,.16),0 26px 40px rgba(20,28,70,.28)}
#s-question .qbody{box-shadow:0 8px 0 rgba(0,0,0,.1),0 20px 34px rgba(20,28,70,.2)}
.opt{box-shadow:0 6px 0 rgba(0,0,0,.14),0 14px 22px rgba(20,28,70,.16)}
.btn{text-shadow:0 2px 0 rgba(0,0,0,.18)}
.gbtn{box-shadow:0 8px 0 #1c378f,0 20px 30px rgba(20,40,120,.38),inset 0 3px 0 rgba(255,255,255,.35)!important}
.gbtn b{text-shadow:0 2px 0 #1c378f,0 4px 0 rgba(0,0,0,.18)}
.tile{box-shadow:0 6px 0 rgba(0,0,0,.18),0 12px 16px rgba(20,28,70,.16)}
.charcard{box-shadow:0 8px 0 rgba(0,0,0,.08),0 18px 26px rgba(20,28,70,.16)}
/* extruded 3D title */
#s-welcome .title h1,#s-welcome .title .big{text-shadow:0 1px 0 #d9c27a,0 2px 0 #cdb469,0 3px 0 #bfa458,0 4px 0 #b09447,0 5px 0 #a08436,0 10px 18px rgba(0,0,0,.45)}
/* staggered pop-in for grade buttons */
@keyframes fxrise{from{opacity:0;transform:translateY(40px) rotateX(-50deg) scale(.8)}to{opacity:1;transform:none}}
.ggrid .gbtn{animation:fxrise .55s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i,0)*45ms);transform-origin:50% 100%}
/* lively characters */
@keyframes fxbob{0%,100%{translate:0 0;rotate:-1.2deg}50%{translate:0 -12px;rotate:1.2deg}}
.charcard img,#s-question .qhero,#s-intro .npc img,#s-intro .stu img{animation:fxbob 3.6s ease-in-out infinite}
.charcard:nth-child(2) img{animation-delay:-.9s}.charcard:nth-child(3) img{animation-delay:-1.8s}.charcard:nth-child(4) img{animation-delay:-2.7s}
.charcard.on img{animation-duration:1.6s}
/* map islands float at different heights */
@keyframes fxisl{0%,100%{translate:0 0}50%{translate:0 -10px}}
#s-map .isl{animation:fxisl 4.4s ease-in-out infinite}
#s-map .isl:nth-of-type(2){animation-delay:-1.4s}#s-map .isl:nth-of-type(3){animation-delay:-2.8s}
#s-map .isl .pill{box-shadow:0 8px 0 rgba(12,30,80,.25),0 22px 26px rgba(12,30,80,.3)}
#s-map .isl:hover{transform:translateY(-10px) scale(1.07) rotateX(8deg)}
/* living pictures: slow camera move inside every illustration */
@keyframes fxkb1{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.13) translate(-2.2%,-1.6%)}}
@keyframes fxkb2{from{transform:scale(1.12) translate(2%,1.2%)}to{transform:scale(1.02) translate(0,0)}}
.stpic{overflow:hidden}
.stpic img{animation:fxkb1 16s ease-in-out infinite alternate;transform-origin:50% 50%}
.stbook.fxalt .stpic img{animation-name:fxkb2}
#s-question .ecard.pic{overflow:hidden}
#s-question .ecard.pic img{animation:fxkb1 20s ease-in-out infinite alternate}
/* light sweep across pictures */
@keyframes fxsweep{0%,70%{left:-60%}100%{left:130%}}
.stpic::after,#s-question .ecard.pic::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-60%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));animation:fxsweep 7s ease-in-out infinite;pointer-events:none}
.stpic,#s-question .ecard.pic{position:relative}
/* 3D storybook: opens like a book, pages turn */
#storyModal{perspective:2200px}
@keyframes fxopen{0%{transform:rotateX(55deg) translateY(160px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.stbook{animation:fxopen .7s cubic-bezier(.2,1.1,.3,1)!important;transform-style:preserve-3d;box-shadow:0 18px 0 rgba(0,0,0,.3),0 50px 70px rgba(0,0,0,.45)!important}
.stbook.fxflip{animation:none!important}
@keyframes fxturnn{0%{transform:rotateY(-88deg);opacity:.2;filter:brightness(.7)}100%{transform:none;opacity:1;filter:none}}
@keyframes fxturnp{0%{transform:rotateY(88deg);opacity:.2;filter:brightness(.7)}100%{transform:none;opacity:1;filter:none}}
.stbook.fxflip .sttxt{transform-origin:0 50%;animation:fxturnn .6s cubic-bezier(.3,.9,.3,1) both;backface-visibility:hidden}
.stbook.fxflip.fxback .stpic{transform-origin:100% 50%;animation:fxturnp .6s cubic-bezier(.3,.9,.3,1) both}
.stbook.fxflip:not(.fxback) .stpic{animation:fxturnn .6s cubic-bezier(.3,.9,.3,1) both;transform-origin:100% 50%}
.stbook.fxflip.fxback .sttxt{animation-name:fxturnp}
.stbook::before{content:'';position:absolute;top:0;bottom:0;left:var(--spine,50%);width:46px;translate:-50% 0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.16) 45%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.05) 60%,rgba(0,0,0,0));pointer-events:none;z-index:3}
.stbook{position:relative}
/* answers pop toward the viewer */
.opts.locked .opt.ok,.opts.rev .opt.ok,.opt.sel{transform:translateZ(40px) scale(1.03)}
@keyframes fxans{0%{transform:rotateX(-70deg) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
#s-question .ans.show{animation:fxans .5s cubic-bezier(.2,1.3,.4,1);transform-origin:50% 0}
/* floating motes of light (not on question screens) */
.fxdust{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
#stage:has(#s-question.active) .fxdust,#stage:has(#s-report.active) .fxdust,#stage:has(.mback) .fxdust{display:none}
.fxdust i{position:absolute;bottom:-30px;width:var(--s,10px);height:var(--s,10px);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,236,150,.5) 45%,rgba(255,236,150,0) 70%);animation:fxmote var(--d,14s) linear infinite;animation-delay:var(--dl,0s);opacity:0}
@keyframes fxmote{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}85%{opacity:.6}100%{transform:translate3d(var(--dx,60px),-1180px,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.fxdust{display:none}.stpic img,#s-question .ecard.pic img,.charcard img,#s-map .isl,#s-welcome .bgimg,#s-final .bgimg,#s-intro .scn,.stpic::after,#s-question .ecard.pic::after{animation:none!important}.screen{transform:none}}
#stage:has(#bcv) .ecard.pic img,#stage:has(#bcv) .ecard.pic::after{animation:none!important}
.stbook{--spine:1004px}.stbook.wide{--spine:524px}

/* Grade 8+: text-only story pages */
.stbook.nopic{width:1500px}
.stbook.nopic .sttxt{padding:44px 70px 34px}
.stbook.nopic::before{display:none}
.stbook.nopic.fxflip .sttxt{transform-origin:50% 50%}