/* =========================================================
   THE CLEVER FOX — A Jungle Mystery  (Grade 6 English)
   Design canvas: 1600 x 820, scaled to fit any projector.
   ========================================================= */
:root{
  --gold:#ffd36b; --gold2:#ffe9a8; --amber:#f6a723; --orange:#ff8a2b; --red:#ff4d4d;
  --green:#2ecc71; --teal:#29d3c2; --cream:#fff4dc; --ink:#2a1708;
  --top-h:68px; --bar-h:104px;
}
@property --r { syntax:'<percentage>'; inherits:false; initial-value:150%; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#010805;color:#fff;
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none}
button:disabled{cursor:not-allowed;opacity:.45}
input,select{font-family:inherit}
.hidden{display:none!important}
.gold{color:var(--gold)} .red{color:var(--red)} .hl{color:var(--gold);text-shadow:0 0 18px rgba(255,200,80,.6)}
.hl-red{color:#ff6b6b;text-shadow:0 0 18px rgba(255,60,60,.6)}

#app{display:grid;grid-template-rows:var(--top-h) 1fr var(--bar-h);height:100vh}

/* ---------------- TOP BAR ---------------- */
#topbar{display:flex;align-items:center;gap:8px;padding:0 12px;z-index:60;
  background:linear-gradient(#0d2a19,#06170e);border-bottom:2px solid rgba(255,211,107,.35);box-shadow:0 4px 20px rgba(0,0,0,.6)}
.tb{height:48px;min-width:48px;padding:0 13px;border-radius:12px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);font-weight:900;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s,transform .15s;white-space:nowrap}
.tb:hover{background:rgba(255,211,107,.25);transform:translateY(-1px)}
.tb.off{opacity:.5;background:rgba(255,60,60,.18)}
.tbgroup{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.25)}
.tbgroup .tb{min-width:62px;padding:0 8px}
#tbCenter{flex:1;min-width:0;text-align:center}
#secTitle{font-family:Cinzel,serif;font-weight:900;font-size:22px;color:var(--gold);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dots{display:flex;gap:6px;justify-content:center;margin-top:5px}
.dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22);transition:.3s}
.dot.done{background:rgba(255,211,107,.55)}
.dot.on{background:var(--gold);box-shadow:0 0 10px var(--gold);transform:scale(1.3)}

/* ---------------- STAGE ---------------- */
#stageWrap{position:relative;overflow:hidden;background:#000}
#bgZoom{position:absolute;inset:0;transform-origin:50% 50%}
#bg{position:absolute;inset:-5%;background:center/cover no-repeat;animation:kb 40s ease-in-out infinite alternate;transition:filter 1.5s ease}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
#tint{position:absolute;inset:0;transition:background 1.2s}
.mist{position:absolute;inset:-10% -40%;pointer-events:none;opacity:.9;
  background:radial-gradient(ellipse 35% 22% at 20% 70%,rgba(220,255,235,.16),transparent 70%),
             radial-gradient(ellipse 30% 18% at 70% 80%,rgba(220,255,235,.13),transparent 70%),
             radial-gradient(ellipse 40% 20% at 45% 95%,rgba(220,255,235,.15),transparent 70%);
  animation:mist 26s ease-in-out infinite alternate}
.mist.m2{animation-duration:38s;animation-direction:alternate-reverse;opacity:.6;top:-20%}
@keyframes mist{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
#fireflies{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2s}
.firefly{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff7a8;box-shadow:0 0 12px 4px rgba(255,240,120,.7);
  animation:fly var(--d) ease-in-out infinite alternate, blink 2.6s ease-in-out infinite}
@keyframes fly{to{transform:translate(var(--x),var(--y))}}
@keyframes blink{50%{opacity:.15}}
body[data-theme=home] #fireflies,body[data-theme=intro] #fireflies,body[data-theme=detective] #fireflies,
body[data-theme=moral] #fireflies,body[data-theme=final] #fireflies,body[data-theme=story] #fireflies{opacity:1}
#leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.leaf{position:absolute;top:-60px;animation:fall linear forwards;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.leaf svg{width:100%;height:100%;animation:sway 2.8s ease-in-out infinite alternate}
@keyframes fall{to{transform:translate(var(--dx),115vh) rotate(var(--rot))}}
@keyframes sway{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.72))}

#stage{position:absolute;left:50%;top:50%;width:1600px;height:820px;transform:translate(-50%,-50%) scale(var(--sc,1));z-index:5}
#content{position:absolute;inset:0}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:30}
#flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
#iris{position:absolute;inset:0;pointer-events:none;z-index:45;--r:150%;
  background:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + .5%));transition:--r .45s ease-in}
#iris.closing{--r:0%}
.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-3px,2px)}20%,80%{transform:translate(6px,-3px)}30%,50%,70%{transform:translate(-10px,4px)}40%,60%{transform:translate(10px,-4px)}}

/* Themes (tint overlays) */
body[data-theme=home] #tint{background:linear-gradient(180deg,rgba(2,12,6,.35),rgba(2,12,6,.82))}
body[data-theme=intro] #tint{background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.1),rgba(0,6,18,.75))}
body[data-theme=mystery] #tint{background:linear-gradient(180deg,rgba(0,30,40,.55),rgba(0,12,16,.8))}
body[data-theme=chars] #tint{background:radial-gradient(ellipse at 50% 30%,rgba(255,170,60,.22),rgba(10,6,0,.82))}
body[data-theme=story] #tint{background:radial-gradient(ellipse at 50% 40%,rgba(60,0,10,.35),rgba(10,0,2,.9))}
body[data-theme=detective] #tint{background:radial-gradient(ellipse at 50% 50%,rgba(40,25,5,.45),rgba(5,3,0,.92))}
body[data-theme=game] #tint{background:linear-gradient(135deg,rgba(70,0,140,.72),rgba(0,90,120,.68))}
body[data-theme=moral] #tint{background:radial-gradient(ellipse at 50% 55%,rgba(255,180,40,.25),rgba(8,5,0,.9))}
body[data-theme=booklet] #tint{background:linear-gradient(180deg,rgba(8,26,14,.72),rgba(3,12,6,.9))}
body[data-theme=final] #tint{background:radial-gradient(ellipse at 50% 100%,rgba(255,110,20,.4),rgba(15,4,0,.88))}

/* ---------------- PROMPT BAR (teacher / class instructions) ---------------- */
#promptBar{position:absolute;top:12px;left:50%;transform:translate(-50%,-140%);z-index:25;max-width:1180px;
  display:flex;align-items:center;gap:18px;padding:10px 14px 10px 26px;border-radius:22px;
  background:linear-gradient(90deg,#ff3d7f,#ff8a2b);box-shadow:0 10px 30px rgba(255,61,127,.45),inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .6s cubic-bezier(.2,1.4,.4,1);pointer-events:auto}
#promptBar.show{transform:translate(-50%,0)}
#promptBar .pr-main{font-weight:900;font-size:32px;letter-spacing:.5px;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.25);animation:wig 2.6s ease-in-out infinite}
#promptBar .pr-sub{font-size:19px;font-weight:800;line-height:1.25;max-width:640px;color:#fff;opacity:.97}
#promptBar .pr-timer{height:56px;padding:0 18px;border-radius:14px;background:#1b0a02;color:var(--gold);font-weight:900;font-size:22px;white-space:nowrap;border:2px solid rgba(255,255,255,.4)}
#promptBar .pr-timer:hover{background:#000}
@keyframes wig{0%,100%{transform:rotate(0)}5%{transform:rotate(-3deg)}10%{transform:rotate(3deg)}15%{transform:rotate(0)}}

/* ---------------- TIMER ---------------- */
#timer{position:absolute;top:14px;right:18px;width:150px;height:150px;z-index:26;display:none;cursor:pointer;
  border-radius:50%;background:radial-gradient(circle,#0c2014 60%,#05110a);box-shadow:0 0 30px rgba(0,0,0,.7),0 0 0 4px rgba(255,211,107,.4)}
#timer.show{display:block;animation:popIn .5s cubic-bezier(.2,1.6,.4,1)}
#timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
#timer circle{fill:none;stroke-width:10}
#timer .track{stroke:rgba(255,255,255,.12)}
#timer .ring{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset 1s linear,stroke .3s}
#timer .t{position:absolute;inset:0;display:grid;place-items:center;font:900 54px Cinzel,serif;color:#fff}
#timer.danger .ring{stroke:var(--red)}
#timer.danger{animation:tpulse .5s infinite alternate}
#timer.danger .t{color:#ff8080}
@keyframes tpulse{to{transform:scale(1.08);box-shadow:0 0 40px rgba(255,60,60,.8),0 0 0 4px var(--red)}}
#timesUp{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:radial-gradient(circle,rgba(160,0,0,.55),rgba(0,0,0,.85));cursor:pointer}
#timesUp.show{display:grid}
#timesUp div{font:900 min(13vw,170px) Cinzel,serif;color:#fff;text-shadow:0 0 40px #ff2a2a,0 8px 0 #600;animation:tu .6s cubic-bezier(.2,1.8,.4,1),tblink .5s .6s infinite alternate}
@keyframes tu{from{transform:scale(3);opacity:0}}
@keyframes tblink{to{opacity:.6;transform:scale(.96)}}

/* ---------------- CAPTION (narrator) ---------------- */
#caption{position:absolute;left:50%;bottom:14px;transform:translate(-50%,40px);width:1240px;z-index:24;
  background:rgba(3,14,8,.86);backdrop-filter:blur(8px);border:2px solid rgba(255,211,107,.45);border-radius:22px;
  padding:14px 110px 16px 96px;font-size:30px;line-height:1.35;font-weight:800;opacity:0;pointer-events:none;transition:.45s;min-height:84px}
#caption.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#caption .mic{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#ff8ac2,#a44dff);display:grid;place-items:center;font-size:30px;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
#caption.speaking .mic{animation:micp 1s ease-in-out infinite}
@keyframes micp{50%{box-shadow:0 0 0 12px rgba(255,138,194,.25),0 0 30px #ff8ac2}}
#caption .who{font-size:14px;letter-spacing:3px;color:var(--gold);font-weight:900;margin-bottom:2px}
#caption[data-mood=mystery]{border-color:rgba(41,211,194,.6)} #caption[data-mood=mystery] #capText{color:#cffff8}
#caption[data-mood=dramatic],#caption[data-mood=lion]{border-color:rgba(255,77,77,.7)} #caption[data-mood=lion] #capText{color:#ffb3a8;font-style:italic}
#caption[data-mood=excited]{border-color:rgba(255,138,43,.8)} #caption[data-mood=warm]{border-color:rgba(255,211,107,.9)} #caption[data-mood=warm] #capText{color:var(--gold2)}
#capReplay,#capClose{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);font-size:20px}
#capReplay{right:58px} #capClose{right:10px}

/* ---------------- BOTTOM BAR / TEAMS ---------------- */
#bottombar{display:grid;grid-template-columns:150px 1fr 150px;gap:12px;align-items:center;padding:8px 12px;z-index:60;
  background:linear-gradient(#07190f,#020a06);border-top:2px solid rgba(255,211,107,.35)}
.navbtn{height:80px;border-radius:20px;font-size:24px;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(#2f7a48,#174528);border:2px solid #57b977;box-shadow:0 6px 0 #0b2a17,0 10px 20px rgba(0,0,0,.4);transition:transform .1s}
.navbtn.next{background:linear-gradient(#ffbf4d,#e5780f);border-color:#ffe08f;box-shadow:0 6px 0 #8a4300,0 10px 20px rgba(0,0,0,.4);color:#2b1300}
.navbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #000}
.navbtn.next.pulse{animation:nextp 1.4s ease-in-out infinite}
@keyframes nextp{50%{box-shadow:0 6px 0 #8a4300,0 0 30px #ffbf4d}}
#teams{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-width:0}
.team{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 8px;border-radius:18px;min-width:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,transparent),rgba(255,255,255,.03));border:2px solid var(--c)}
.team.leader{box-shadow:0 0 22px var(--c)}
.team.leader .badge:after{content:'👑';position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:24px}
.team .badge{position:relative;width:62px;height:62px;border-radius:50%;background:center/cover;border:3px solid var(--c);box-shadow:0 0 14px var(--c);flex:none}
.team .badge span{position:absolute;right:-8px;bottom:-6px;font-size:24px;filter:drop-shadow(0 2px 2px #000)}
.team .info{flex:1;min-width:0}
.team .nm{font-weight:900;font-size:14px;letter-spacing:1px;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .sc{font:900 36px Cinzel,serif;line-height:1}
.team .pts{display:grid;grid-template-columns:repeat(2,52px);gap:4px}
.pbtn{height:38px;border-radius:10px;font-weight:900;font-size:17px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);transition:.1s}
.pbtn:hover{background:var(--c);color:#111}
.pbtn:active{transform:scale(.92)}
.pbtn.minus{font-size:14px;background:rgba(0,0,0,.35);opacity:.8}
.team.bump{animation:bump .7s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{30%{transform:scale(1.08) translateY(-6px)}}
.floatpts{position:absolute;left:50%;top:-6px;font:900 44px Cinzel,serif;color:var(--gold);text-shadow:0 0 20px rgba(255,200,60,.9),0 3px 0 #000;
  pointer-events:none;animation:floatUp 1.5s ease-out forwards;z-index:5}
.floatpts.neg{color:#ff8080}
@keyframes floatUp{from{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-30px) scale(1.2)}to{transform:translate(-50%,-110px) scale(1);opacity:0}}

@media (max-width:1300px){.team .nm{display:none}.team .badge{width:48px;height:48px}.tb{font-size:14px;padding:0 9px}.tbgroup .tb{min-width:52px}}
@media (max-height:780px){:root{--top-h:58px;--bar-h:92px}.navbtn{height:70px}.tb{height:42px}}

/* ---------------- CONFETTI ---------------- */
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:250}

/* ---------------- OVERLAYS ---------------- */
.overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.overlay.show{display:grid;animation:fadeIn .3s}
.ov-box{width:min(1300px,94vw);max-height:90vh;overflow:auto;padding:26px 30px;border-radius:26px;
  background:linear-gradient(160deg,#0f3220,#06170e);border:2px solid rgba(255,211,107,.45);box-shadow:0 30px 80px #000}
.ov-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.ov-head h2{margin:0;font:900 34px Cinzel,serif;color:var(--gold)}
.story-box{width:min(1100px,94vw)}
#storyText p{font:600 clamp(20px,2vw,30px)/1.6 Lora,serif;color:var(--cream);margin:0 0 18px}
#storyText em{color:var(--gold);font-style:normal}
@keyframes fadeIn{from{opacity:0}}

.navgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.navtile{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:2px solid rgba(255,211,107,.3);transition:.2s;min-height:84px}
.navtile:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(255,211,107,.16)}
.navtile .ic{font-size:40px;width:56px;text-align:center}
.navtile .lb{font-weight:900;font-size:21px;letter-spacing:.5px}
.navtile .nb{font-size:14px;color:var(--gold);font-weight:900;letter-spacing:2px}
.navtile.cur{border-color:var(--gold);box-shadow:0 0 20px rgba(255,211,107,.4)}

/* =========================================================
   GENERIC STAGE COMPONENTS
   ========================================================= */
.pane{position:absolute;inset:112px 40px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .7s,transform .7s cubic-bezier(.2,1.2,.4,1);z-index:6}
.pane.show{opacity:1;transform:none;pointer-events:auto}
.rv{opacity:0;transform:translateY(30px) scale(.96);transition:opacity .7s,transform .8s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.rv.show{opacity:1;transform:none;pointer-events:auto}
.title-xl{font:900 120px/1 Cinzel,serif;margin:0;text-align:center;letter-spacing:2px;
  background:linear-gradient(180deg,#fff6d0 0%,#ffd36b 45%,#d18a17 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(255,200,80,.35))}
.title-lg{font:900 66px/1.1 Cinzel,serif;margin:0;text-align:center;color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.7),0 0 30px rgba(255,200,80,.35)}
.title-md{font:900 44px/1.15 Cinzel,serif;margin:0;text-align:center;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.7)}
.sub{font-size:38px;font-weight:800;text-align:center;line-height:1.35;text-shadow:0 3px 12px #000}
.kicker{font-weight:900;font-size:22px;letter-spacing:6px;color:var(--gold);text-shadow:0 2px 6px #000}
.glass{background:rgba(4,18,10,.74);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.14);border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.btn{height:80px;padding:0 38px;border-radius:22px;font-size:30px;font-weight:900;letter-spacing:.5px;color:#fff;
  background:linear-gradient(#3a8d57,#1d5733);border:3px solid rgba(255,255,255,.35);box-shadow:0 7px 0 rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.4);transition:transform .12s,box-shadow .12s,filter .2s}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn.gold{background:linear-gradient(#ffd36b,#e58a0f);color:#2b1300;border-color:#fff1bf}
.btn.green{background:linear-gradient(#3ee07f,#14934a)}
.btn.red{background:linear-gradient(#ff6060,#b31b1b)}
.btn.teal{background:linear-gradient(#36e2d0,#0f8f86)}
.btn.purple{background:linear-gradient(#b072ff,#6a22d6)}
.btn.dark{background:linear-gradient(#2a2a2a,#111);border-color:rgba(255,211,107,.6);color:var(--gold)}
.btn.mega{height:150px;min-width:340px;font-size:58px;border-radius:34px}
.btn.chosen{outline:6px solid #fff;outline-offset:6px;transform:scale(1.06)}
.bigq{font:900 54px Cinzel,serif;color:#fff;text-align:center;padding:18px 40px;border-radius:24px;
  background:linear-gradient(90deg,rgba(255,61,127,.25),rgba(255,138,43,.25));border:3px solid rgba(255,138,43,.7);text-shadow:0 3px 0 #000}
.pulse{animation:pls 1.8s ease-in-out infinite}
@keyframes pls{50%{transform:scale(1.04);box-shadow:0 0 40px rgba(255,138,43,.6)}}
.hintline{font:italic 600 34px Lora,serif;color:var(--gold2);text-shadow:0 2px 8px #000}
.reaction{min-height:120px;font-size:38px;font-weight:800;text-align:center;line-height:1.35;text-shadow:0 3px 10px #000}
.reaction.pop{animation:popIn .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes popIn{from{transform:scale(.4);opacity:0}}
.yn{display:flex;gap:70px}

/* Wooden sign */
.sign{position:relative;padding:26px 60px 30px;border-radius:16px;font:900 92px/1 Cinzel,serif;color:#ffd36b;letter-spacing:3px;
  background:repeating-linear-gradient(176deg,rgba(0,0,0,.09) 0 3px,transparent 3px 17px),linear-gradient(#94622f,#5b3816);
  border:7px solid #3a210b;box-shadow:inset 0 0 0 3px #b07a40,inset 0 -12px 30px rgba(0,0,0,.35),0 26px 50px rgba(0,0,0,.7);
  text-shadow:0 4px 0 #2a1505,0 0 26px rgba(255,170,50,.55);opacity:0}
.sign:before,.sign:after{content:'';position:absolute;top:-130px;width:6px;height:130px;background:linear-gradient(#5a4020,#c9a46a)}
.sign:before{left:70px} .sign:after{right:70px}
.sign.drop{opacity:1;animation:drop 1.6s cubic-bezier(.3,1.5,.5,1) both;transform-origin:50% -130px}
.sign.red{color:#ffefe0;background:repeating-linear-gradient(176deg,rgba(0,0,0,.1) 0 3px,transparent 3px 17px),linear-gradient(#b4262b,#6d0f13);text-shadow:0 4px 0 #300,0 0 26px rgba(255,80,60,.6)}
@keyframes drop{0%{transform:translateY(-120vh) rotate(-10deg)}55%{transform:translateY(0) rotate(5deg)}75%{transform:rotate(-3deg)}90%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}

/* Section heading (small, inside stage) */
.sechead{position:absolute;top:112px;left:0;right:0;text-align:center;font:900 46px Cinzel,serif;color:var(--gold);text-shadow:0 3px 0 #000,0 0 26px rgba(255,200,80,.4);z-index:7}

/* =========================================================
   HOME
   ========================================================= */
.home{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:40px 60px}
.home-hero{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.home-hero .title-xl{text-align:left;font-size:128px}
.home-hero .sub{text-align:left;font-size:34px}
.home-right{display:flex;flex-direction:column;gap:16px}
.home .navgrid{grid-template-columns:repeat(3,1fr);gap:10px}
.home .navtile{padding:10px 12px;min-height:72px;gap:10px}
.home .navtile .ic{font-size:32px;width:40px}
.home .navtile .lb{font-size:17px}
.settings{padding:16px 20px;display:flex;flex-direction:column;gap:12px;font-size:19px;font-weight:800}
.settings .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.settings select{height:48px;border-radius:12px;padding:0 10px;font-size:17px;font-weight:800;background:#0b2a17;color:#fff;border:1px solid rgba(255,211,107,.5);max-width:520px;flex:1}
.objectives{font-size:19px;line-height:1.5;color:#e9ffe9}
.objectives b{color:var(--gold)}
.home-start{font-size:38px;height:100px;padding:0 54px;border-radius:28px;animation:nextp 1.6s infinite}

/* =========================================================
   INTRO
   ========================================================= */
.shadows{position:absolute;left:0;right:0;bottom:60px;height:260px;opacity:0;transition:opacity 3s;pointer-events:none;z-index:4}
.shadows.show{opacity:1}
.shadow{position:absolute;bottom:var(--y);font-size:150px;filter:brightness(0) drop-shadow(0 0 10px rgba(255,190,110,.55)) blur(1px);opacity:.85;
  animation:prowl 22s linear infinite;animation-delay:var(--d)}
@keyframes prowl{0%{left:-15%;transform:scaleX(-1)}49%{left:105%;transform:scaleX(-1)}50%{left:105%;transform:scaleX(1)}100%{left:-15%;transform:scaleX(1)}}

/* =========================================================
   FOOTPRINT SCENE
   ========================================================= */
.scene-clip{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 60%,transparent 100%)}
.scene{position:absolute;inset:0;transform-origin:49% 50%;transition:transform 3.2s cubic-bezier(.4,0,.2,1)}
.scene.zoom{transform:scale(1.45)}
.scene.zoom2{transform:scale(1.2) translateX(-2%)}
.scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print{position:absolute;width:62px;height:82px;transform:translate(-50%,-50%) scale(var(--s)) rotate(-3deg);opacity:0;transition:opacity .4s}
.print svg{width:100%;height:100%;fill:rgba(28,14,4,.94);stroke:rgba(255,190,90,.8);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(255,170,60,.65))}
.print.show{opacity:1;animation:stamp .45s ease-out}
@keyframes stamp{from{transform:translate(-50%,-50%) scale(calc(var(--s) * 1.9)) rotate(-3deg);opacity:0}}
.prints.glow .print svg{animation:glowp 1.5s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes glowp{50%{stroke:#fff1a0;stroke-width:3;filter:drop-shadow(0 0 18px #ffcc33)}}
.outlane{position:absolute;left:55%;top:57%;width:15%;height:42%;border:5px dashed rgba(255,77,77,.95);border-radius:20px;
  transform:perspective(500px) rotateX(48deg) skewX(-14deg);transform-origin:50% 0;opacity:0;transition:opacity .8s;
  background:rgba(255,40,40,.12);box-shadow:0 0 40px rgba(255,60,60,.5),inset 0 0 40px rgba(255,60,60,.35)}
.outlane.show{opacity:1;animation:lane 1.4s ease-in-out infinite alternate}
.outlane span{position:absolute;inset:0;display:grid;place-items:center;font:900 150px Cinzel,serif;color:#ff6b6b;text-shadow:0 0 30px #f00;transform:rotateX(-48deg)}
@keyframes lane{to{background:rgba(255,40,40,.28);box-shadow:0 0 70px rgba(255,60,60,.8),inset 0 0 60px rgba(255,60,60,.5)}}
.tag{position:absolute;padding:14px 26px;border-radius:18px;font:900 38px Cinzel,serif;background:rgba(0,0,0,.72);border:3px solid var(--gold);color:var(--gold);box-shadow:0 0 30px rgba(255,200,80,.4);z-index:8}
.tag.in{left:7%;top:62%}
.qpanel{position:absolute;right:26px;top:122px;width:560px;padding:22px;display:flex;flex-direction:column;gap:16px;z-index:8}
.choices4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{position:relative;height:200px;border-radius:20px;overflow:hidden;border:4px solid rgba(255,255,255,.3);box-shadow:0 10px 24px rgba(0,0,0,.5);transition:.2s;background:#000}
.choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.3s}
.choice span{position:absolute;left:0;right:0;bottom:0;padding:10px;font:900 30px Cinzel,serif;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.choice:hover{transform:translateY(-4px) scale(1.02);border-color:var(--gold)}
.choice.right{border-color:var(--green);box-shadow:0 0 40px var(--green)}
.choice.right:after{content:'✅';position:absolute;top:8px;right:10px;font-size:52px;animation:popIn .5s}
.choice.wrong{border-color:var(--red);filter:grayscale(.85) brightness(.6);animation:shake .5s}
.choice.wrong:after{content:'❌';position:absolute;top:8px;right:10px;font-size:52px}
.feedback{min-height:84px;font-size:26px;font-weight:800;line-height:1.3;text-align:center;padding:8px}
.butwait{font:900 170px Cinzel,serif;color:#fff;text-shadow:0 0 50px rgba(255,80,80,.9),0 8px 0 #000;animation:bw 2.6s ease-in-out forwards}
@keyframes bw{0%{opacity:0;transform:scale(2.4);letter-spacing:40px}25%{opacity:1;transform:scale(1);letter-spacing:6px}75%{opacity:1}100%{opacity:0;transform:scale(.9)}}
.mystery-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:1250px;text-align:center;font:900 62px/1.1 Cinzel,serif;color:#fff;
  padding:20px 30px;border-radius:24px;background:rgba(0,0,0,.72);border:4px solid var(--red);box-shadow:0 0 60px rgba(255,60,60,.5);text-shadow:0 4px 0 #000}
.mystery-banner .red{color:#ff6b6b;text-shadow:0 0 30px #f00}

/* =========================================================
   CHARACTERS
   ========================================================= */
.chars{position:absolute;inset:182px 40px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start;z-index:6}
.char{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(#1d140a,#0a0703);border:4px solid var(--c);
  box-shadow:0 0 34px color-mix(in srgb,var(--c) 45%,transparent),0 20px 40px rgba(0,0,0,.6);
  opacity:0;transform:perspective(900px) rotateY(85deg) translateY(40px);transition:transform 1s cubic-bezier(.2,1.3,.4,1),opacity .6s,filter .6s}
.char.show{opacity:1;transform:none}
.char.show.dim{filter:brightness(.5) saturate(.6);transform:scale(.95)}
.char.show.spot{transform:scale(1.05) translateY(-8px);z-index:3;box-shadow:0 0 70px var(--c),0 20px 40px rgba(0,0,0,.6)}
.char .pic{height:290px;background:center/cover;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}
.char .cname{font:900 36px Cinzel,serif;color:var(--c);padding:14px 18px 2px;text-shadow:0 2px 0 #000}
.char .traits{padding:4px 12px}
.char .traits span{display:inline-block;margin:4px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid var(--c);font-weight:900;font-size:18px;letter-spacing:1px}
.char .clue{padding:8px 18px 18px;font:italic 600 23px/1.3 Lora,serif;color:#ffe9c2}
.char .snd{position:absolute;top:12px;right:12px;width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.65);font-size:30px;border:3px solid var(--c);z-index:2}
.char .snd:hover{background:var(--c)}
.vote{display:flex;align-items:center;gap:10px;padding:0 14px 16px}
.vote .vbtn{flex:1;height:60px;border-radius:16px;font-size:24px;font-weight:900;background:linear-gradient(#ffd36b,#e58a0f);color:#2b1300}
.vote .vminus{width:48px;height:60px;border-radius:14px;background:rgba(255,255,255,.12);font-size:24px;font-weight:900}
.vote .vc{font:900 44px Cinzel,serif;min-width:44px;text-align:center;color:var(--gold)}
.vbar{height:10px;margin:0 14px 14px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.vbar i{display:block;height:100%;width:0;background:var(--c);transition:width .5s}

/* =========================================================
   ACT IT OUT (theatre)
   ========================================================= */
.curtain{position:absolute;top:0;bottom:0;width:52%;z-index:20;pointer-events:none;transition:transform 2.2s cubic-bezier(.6,0,.2,1);
  background:repeating-linear-gradient(90deg,#5c0610 0 30px,#8f0f1d 30px 60px,#6e0814 60px 90px);box-shadow:inset 0 -40px 60px rgba(0,0,0,.6),0 0 60px #000}
.curtain:after{content:'';position:absolute;left:0;right:0;top:0;height:70px;background:linear-gradient(#c8961e,#7a560c);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.curtain.l{left:0;transform-origin:left} .curtain.r{right:0}
.curtains.open .curtain.l{transform:translateX(-92%)} .curtains.open .curtain.r{transform:translateX(92%)}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 60% at 50% 45%,rgba(255,240,200,.16),transparent 70%);z-index:1}
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:1440px}
.castcard{border-radius:22px;overflow:hidden;background:#140a06;border:4px solid var(--c);box-shadow:0 0 30px color-mix(in srgb,var(--c) 40%,transparent)}
.castcard .pic{height:230px;background:center/cover}
.castcard .role{font:900 30px Cinzel,serif;color:var(--c);padding:12px 14px 4px}
.castcard input{width:calc(100% - 28px);margin:6px 14px 16px;height:56px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:24px;font-weight:800;padding:0 14px}
.castcard input::placeholder{color:rgba(255,255,255,.45)}
.scenegrid{display:grid;grid-template-columns:470px 1fr;gap:40px;width:1480px;align-items:center}
.scenepic{height:470px;border-radius:50%;background:center/cover;border:6px solid var(--gold);box-shadow:0 0 80px rgba(255,220,140,.45),inset 0 0 60px #000;animation:breathe 5s ease-in-out infinite}
.scenebadge{display:inline-block;padding:8px 22px;border-radius:999px;background:var(--red);font:900 28px Cinzel,serif;letter-spacing:3px;box-shadow:0 0 20px rgba(255,60,60,.6)}
.storytext{font:700 44px/1.38 Lora,serif;color:var(--cream);margin:16px 0 20px;text-shadow:0 3px 10px #000}
.dir{font-size:27px;font-weight:800;line-height:1.35;padding:14px 20px;border-radius:16px;margin-top:12px}
.dir.actor{background:rgba(255,211,107,.14);border-left:8px solid var(--gold)}
.dir.aud{background:rgba(41,211,194,.14);border-left:8px solid var(--teal)}
.lionline{font:italic 700 104px/1.15 Lora,serif;text-align:center;color:#ffdccf;text-shadow:0 0 40px rgba(255,40,20,.9),0 6px 0 #000;max-width:1400px}
.lionline .ch{display:inline-block;opacity:0;animation:chIn .5s forwards}
@keyframes chIn{from{opacity:0;transform:translateY(30px) scale(1.6);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.lead{font:600 40px Lora,serif;color:var(--cream);text-shadow:0 2px 8px #000;text-align:center}
.freeze-wrap{position:relative;width:1300px;height:560px;border-radius:30px;overflow:hidden;border:5px solid #bfefff;box-shadow:0 0 80px rgba(150,230,255,.6)}
.freeze-wrap img{width:100%;height:100%;object-fit:cover;transition:filter 1s}
.freeze-wrap .ice{position:absolute;inset:0;background:linear-gradient(135deg,rgba(190,240,255,.45),rgba(120,200,255,.15) 40%,rgba(220,250,255,.5));opacity:0;transition:opacity .6s;mix-blend-mode:screen}
.freeze-wrap.frozen img{filter:saturate(.25) brightness(1.1) hue-rotate(160deg)}
.freeze-wrap.frozen .ice{opacity:1}
.freeze-word{position:absolute;inset:0;display:grid;place-items:center;font:900 190px Cinzel,serif;color:#eaffff;text-shadow:0 0 40px #5fd4ff,0 8px 0 #134;opacity:0}
.freeze-wrap.frozen .freeze-word{animation:fz .7s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes fz{from{opacity:0;transform:scale(2.5)}to{opacity:1;transform:none}}
.mag{position:absolute;width:240px;height:240px;border-radius:50%;border:12px solid #c99a3a;box-shadow:0 0 0 4px #4a2f08,inset 0 0 40px rgba(255,255,255,.35);
  left:58%;top:52%;animation:magmove 4s ease-in-out infinite alternate;backdrop-filter:brightness(1.4) contrast(1.2)}
.mag:after{content:'';position:absolute;width:30px;height:130px;background:linear-gradient(#6b4210,#3a2105);border-radius:12px;right:-50px;bottom:-110px;transform:rotate(-40deg)}
@keyframes magmove{to{left:66%;top:60%}}

/* =========================================================
   DETECTIVE
   ========================================================= */
.casefile{display:grid;grid-template-columns:460px 1fr;gap:50px;width:1480px;align-items:center}
.magfox{position:relative;width:440px;height:440px;border-radius:50%;background:center/cover;border:16px solid #c99a3a;
  box-shadow:0 0 0 5px #4a2f08,0 0 80px rgba(255,190,80,.4),inset 0 0 50px rgba(0,0,0,.6)}
.magfox:after{content:'';position:absolute;width:44px;height:200px;background:linear-gradient(#7a4c14,#3a2105);border-radius:16px;right:-40px;bottom:-170px;transform:rotate(-40deg);box-shadow:0 10px 20px #000}
.clues{display:flex;flex-direction:column;gap:20px}
.clue{position:relative;height:124px;perspective:1200px}
.clue .face{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;gap:22px;padding:0 30px;backface-visibility:hidden;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.clue .front{background:repeating-linear-gradient(45deg,#3a2a12 0 18px,#2e2010 18px 36px);border:3px dashed rgba(255,211,107,.5);font:900 42px Cinzel,serif;color:rgba(255,211,107,.75)}
.clue .back{background:linear-gradient(90deg,#f5e6c4,#e8d3a3);color:var(--ink);border:4px solid #a7752b;transform:rotateX(180deg);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.clue.open .front{transform:rotateX(-180deg)} .clue.open .back{transform:rotateX(0)}
.clue .cnum{font:900 24px Cinzel,serif;background:#8a1c1c;color:#fff;padding:6px 14px;border-radius:10px;white-space:nowrap}
.clue .ctext{font:700 40px Lora,serif;flex:1}
.clue .cicon{font-size:54px}
.clue .stampmark{position:absolute;right:20px;top:-14px;font:900 22px Cinzel,serif;color:#b31b1b;border:4px solid #b31b1b;padding:4px 12px;border-radius:8px;transform:rotate(8deg);opacity:0;background:rgba(255,255,255,.6)}
.clue.open .stampmark{animation:stampIn .4s .5s forwards}
@keyframes stampIn{from{opacity:0;transform:rotate(8deg) scale(3)}to{opacity:1;transform:rotate(8deg) scale(1)}}
.chips{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chip{padding:10px 20px;border-radius:999px;background:rgba(245,230,196,.14);border:2px solid rgba(245,230,196,.5);font-size:24px;font-weight:900}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:1400px}
.opt{display:flex;align-items:center;gap:20px;height:116px;padding:0 26px;border-radius:22px;text-align:left;font-size:36px;font-weight:900;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:3px solid rgba(255,255,255,.25);transition:.25s;position:relative}
.opt:hover{border-color:var(--gold);transform:translateY(-3px)}
.opt .L{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;font:900 38px Cinzel,serif;background:var(--gold);color:var(--ink)}
.opt.picked{border-color:var(--orange);box-shadow:0 0 30px rgba(255,138,43,.6);background:rgba(255,138,43,.18)}
.opt.no{opacity:.32;filter:grayscale(1);transform:scale(.97)}
.opt.no:after{content:'❌';position:absolute;right:20px;font-size:44px}
.opt.yes{border-color:var(--green);background:linear-gradient(135deg,rgba(46,204,113,.45),rgba(46,204,113,.15));box-shadow:0 0 60px rgba(46,204,113,.7);transform:scale(1.04);animation:yesPulse 1.2s ease-in-out 3}
.opt.yes .L{background:var(--green);color:#fff}
.opt.yes:after{content:'✅';position:absolute;right:20px;font-size:52px;animation:popIn .5s}
@keyframes yesPulse{50%{box-shadow:0 0 100px rgba(46,204,113,1)}}
.btnrow{display:flex;gap:24px;justify-content:center;align-items:center}
.teacher-note{font-size:24px;font-weight:800;color:var(--gold2);background:rgba(0,0,0,.5);padding:12px 22px;border-radius:14px;border:2px dashed rgba(255,211,107,.5)}
.foxquote{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:center;width:1460px}
.foxquote .pic{height:400px;border-radius:50%;background:center/cover;border:8px solid var(--orange);box-shadow:0 0 60px rgba(255,138,43,.6)}
.bubble{position:relative;padding:34px 40px;border-radius:34px;background:var(--cream);color:var(--ink);font:700 40px/1.45 Lora,serif;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.bubble:before{content:'';position:absolute;left:-40px;top:50%;border:24px solid transparent;border-right:30px solid var(--cream);transform:translateY(-50%)}
.bubble mark{background:linear-gradient(transparent 55%,rgba(255,211,107,.9) 55%);color:inherit;padding:0 4px}
.bubble mark.r{background:linear-gradient(transparent 55%,rgba(255,110,110,.85) 55%)}

/* =========================================================
   WHAT WOULD YOU DO
   ========================================================= */
.wwyd-card{width:1300px;padding:34px 44px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.wwyd-num{font:900 26px Cinzel,serif;letter-spacing:4px;color:var(--teal)}
.wwyd-ic{font-size:110px;line-height:1;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
.wwyd-text{font:700 48px/1.3 Lora,serif;color:#fff}
.tq{display:flex;gap:40px}
.tq .btn{height:130px;min-width:420px;font-size:46px;border-radius:30px}
.wwyd-fb{min-height:90px;font-size:32px;font-weight:800;line-height:1.3;max-width:1200px}
.rules{display:flex;gap:40px}
.rule{width:560px;padding:30px;border-radius:28px;text-align:center;font-size:30px;font-weight:800}
.rule .big{font-size:110px}
.rule.think{background:linear-gradient(160deg,rgba(54,226,208,.35),rgba(15,143,134,.25));border:4px solid var(--teal)}
.rule.quick{background:linear-gradient(160deg,rgba(255,211,107,.35),rgba(229,138,15,.25));border:4px solid var(--gold)}
.rule h3{margin:6px 0;font:900 44px Cinzel,serif}

/* =========================================================
   MORAL
   ========================================================= */
.chestwrap{position:relative;width:560px;height:440px;cursor:pointer}
.chestwrap .rays{position:absolute;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;border-radius:50%;opacity:0;transform:scale(.2);
  background:repeating-conic-gradient(rgba(255,214,107,.55) 0 8deg,transparent 8deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 65%);mask-image:radial-gradient(circle,#000 10%,transparent 65%);transition:opacity 1s,transform 1.4s}
.chestwrap.open .rays{opacity:1;transform:scale(1);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chestimg{position:absolute;inset:0;border-radius:34px;background:center/cover;box-shadow:0 0 60px rgba(255,190,60,.5),0 30px 60px #000;border:4px solid rgba(255,211,107,.6);animation:glowc 2s ease-in-out infinite;transition:transform .6s,filter .8s,opacity .8s}
@keyframes glowc{50%{box-shadow:0 0 110px rgba(255,190,60,.9),0 30px 60px #000}}
.chestwrap:hover .chestimg{transform:scale(1.03)}
.chestwrap.rattle .chestimg{animation:rattle .12s linear infinite}
@keyframes rattle{0%{transform:rotate(-2deg) translateX(-4px)}50%{transform:rotate(2deg) translateX(4px)}100%{transform:rotate(-2deg) translateX(-4px)}}
.chestwrap.open .chestimg{transform:scale(.7) translateY(140px);filter:brightness(1.6);opacity:.45}
.lockfly{position:absolute;left:50%;top:48%;font-size:90px;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.chestwrap.open .lockfly{animation:lockfly 1.2s ease-out forwards}
@keyframes lockfly{0%{opacity:1}100%{opacity:0;transform:translate(160px,-420px) rotate(540deg) scale(.5)}}
.clickme{font-size:34px;font-weight:900;color:var(--gold);animation:pls 1.4s infinite;padding:10px 24px;border-radius:16px}
.moral{font:900 92px/1.1 Cinzel,serif;text-align:center;color:#fff3c4;text-shadow:0 0 40px rgba(255,200,60,1),0 6px 0 #5a3500;opacity:0;transform:scale(.3)}
.moral.show{animation:moralIn 1.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes moralIn{to{opacity:1;transform:scale(1)}}
.endcard{font:italic 600 36px/1.4 Lora,serif;color:var(--cream);text-align:center;max-width:1300px;text-shadow:0 2px 8px #000}
.ideas{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:1300px}
.idea{height:130px;border-radius:24px;perspective:1000px;position:relative;cursor:pointer}
.idea .face{position:absolute;inset:0;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:38px;font-weight:900;backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.idea .front{background:linear-gradient(135deg,#3b2a0c,#1c1406);border:3px solid rgba(255,211,107,.6);color:var(--gold)}
.idea .back{background:linear-gradient(135deg,#ffe08f,#f1a92c);color:var(--ink);transform:rotateY(180deg)}
.idea.open .front{transform:rotateY(-180deg)} .idea.open .back{transform:rotateY(0)}
.medal{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.medal .disc{position:relative;width:380px;height:380px;border-radius:50%;padding:18px;
  background:conic-gradient(#fff3c4,#d18a17,#ffd36b,#a8670c,#fff3c4,#d18a17,#ffd36b);box-shadow:0 0 90px rgba(255,200,60,.8),0 20px 40px #000;animation:medalIn 1.6s cubic-bezier(.2,1.3,.4,1) both}
.medal .disc .pic{width:100%;height:100%;border-radius:50%;background:center/cover;border:6px solid #6b3f05;overflow:hidden;position:relative}
.medal .disc .pic:after{content:'';position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@keyframes medalIn{from{transform:rotateY(900deg) scale(.1);opacity:0}}
.medal .ribbons{position:absolute;top:300px;display:flex;gap:90px;z-index:-1}
.medal .ribbons i{width:90px;height:190px;background:linear-gradient(#e2332f,#8f1010);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.medal .ribbons i:first-child{transform:rotate(18deg)} .medal .ribbons i:last-child{transform:rotate(-18deg)}
.medal-title{font:900 76px Cinzel,serif;color:var(--gold);text-shadow:0 0 30px rgba(255,200,60,.7),0 5px 0 #000;animation:popIn .8s 1s both}

/* =========================================================
   BOOKLET
   ========================================================= */
.parch{position:relative;width:1340px;padding:34px 54px 30px;border-radius:18px;color:var(--ink);
  background:radial-gradient(ellipse at center,#fbf0d4 40%,#e9cf98 100%);box-shadow:0 30px 70px rgba(0,0,0,.75),inset 0 0 70px rgba(140,90,20,.45);border:3px solid #b98b45}
.parch:before{content:'';position:absolute;inset:12px;border:2px solid rgba(140,90,20,.45);border-radius:10px;pointer-events:none}
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.qnum{font:900 26px Cinzel,serif;letter-spacing:3px;color:#8a1c1c}
.think{font:900 40px Cinzel,serif;color:#fff;background:#d6336c;padding:6px 26px;border-radius:999px;animation:pls 1.2s infinite;box-shadow:0 0 0 4px #fff}
.think.gone{visibility:hidden}
.qtext{font:700 56px/1.2 Lora,serif;margin:6px 0 22px}
.bopts{display:flex;flex-direction:column;gap:14px}
.bopt{position:relative;display:flex;align-items:center;gap:22px;height:92px;padding:0 24px;border-radius:18px;text-align:left;font:700 40px Lora,serif;color:var(--ink);
  background:rgba(255,255,255,.55);border:3px solid rgba(120,80,20,.35);transition:.25s}
.bopt:hover{background:#fff;border-color:#b5761c}
.bopt .bl{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;font:900 34px Cinzel,serif;background:#5b3816;color:#ffe9a8}
.bopt.picked{border-color:var(--orange);background:#ffe7c7;box-shadow:0 0 0 4px rgba(255,138,43,.4)}
.bopt.no{opacity:.35;text-decoration:line-through}
.bopt.yes{background:linear-gradient(90deg,#c9f7d9,#8fe5ae);border-color:#14934a;box-shadow:0 0 40px rgba(46,204,113,.8);transform:scale(1.03)}
.bopt.yes .bl{background:#14934a;color:#fff}
.qstamp{position:absolute;right:50px;bottom:120px;font:900 64px Cinzel,serif;color:#14934a;border:8px solid #14934a;padding:6px 26px;border-radius:16px;transform:rotate(-12deg);opacity:0;pointer-events:none;background:rgba(255,255,255,.4)}
.qstamp.show{animation:bigStamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes bigStamp{from{opacity:0;transform:rotate(-12deg) scale(3.5)}to{opacity:.95;transform:rotate(-12deg) scale(1)}}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.fingers{font-size:22px;font-weight:900;color:#5b3816}
.mission{display:flex;flex-direction:column;align-items:center;gap:22px}
.mission .book{font-size:150px;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 40px rgba(255,211,107,.7))}

/* =========================================================
   FINAL
   ========================================================= */
.board{display:flex;gap:40px;align-items:flex-end;height:500px}
.col{width:260px;display:flex;flex-direction:column;align-items:center;gap:12px}
.col .badge{position:relative;width:140px;height:140px;border-radius:50%;background:center/cover;border:6px solid var(--c);box-shadow:0 0 30px var(--c)}
.col .badge .crown{position:absolute;top:-56px;left:50%;transform:translateX(-50%);font-size:60px;opacity:0;transition:.5s}
.col.lead .badge .crown{opacity:1;animation:bob 1.6s infinite}
.col .bar{width:100%;border-radius:18px 18px 6px 6px;background:linear-gradient(var(--c),color-mix(in srgb,var(--c) 40%,#000));box-shadow:0 0 30px color-mix(in srgb,var(--c) 50%,transparent);
  height:20px;transition:height 1.4s cubic-bezier(.2,1.2,.4,1);display:flex;align-items:flex-start;justify-content:center;padding-top:10px;font:900 56px Cinzel,serif;color:#fff;text-shadow:0 3px 0 #000;min-height:80px}
.col .nm{font:900 26px Cinzel,serif;color:var(--c)}
.finalq{font:900 84px Cinzel,serif;color:#fff;text-shadow:0 0 40px rgba(255,120,20,.9),0 5px 0 #000;text-align:center}
.fire{font:900 46px Cinzel,serif;color:var(--orange);text-shadow:0 0 30px rgba(255,90,0,.9);animation:pls 1.4s infinite}
.frame{font:italic 600 34px Lora,serif;color:var(--gold2)}
.expected{width:1300px;padding:24px 34px;border-radius:22px;background:rgba(46,204,113,.18);border:3px solid var(--green);font:700 36px/1.4 Lora,serif;color:#eaffef}
.award4{display:flex;gap:20px}
.award4 button{height:96px;padding:0 26px;border-radius:22px;font-size:28px;font-weight:900;background:linear-gradient(color-mix(in srgb,var(--c) 85%,#fff),color-mix(in srgb,var(--c) 70%,#000));color:#1a0a00;border:3px solid #fff;box-shadow:0 7px 0 rgba(0,0,0,.45)}
.award4 button.done{filter:grayscale(.6);opacity:.6}
.champ{display:flex;flex-direction:column;align-items:center;gap:14px}
.champ .badges{display:flex;gap:30px}
.champ .disc{width:330px;height:330px}
.champ-title{font:900 104px Cinzel,serif;background:linear-gradient(180deg,#fff6d0,#ffd36b 45%,#d18a17);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #000) drop-shadow(0 0 30px rgba(255,200,60,.6));animation:popIn 1s 1.2s both}
.champ-team{font:900 58px Cinzel,serif;color:#fff;text-shadow:0 4px 0 #000;animation:popIn .8s 1.6s both}
.fun{font:900 44px Nunito;color:var(--gold2);animation:popIn .8s 2.4s both}
.drumroll{font:900 90px Cinzel,serif;color:#fff;text-shadow:0 0 40px var(--orange);animation:shake .3s infinite}