/* ============================================================
   Curie's Adventure Academy
   1. tokens + base      2. app chrome      3. hub / world map
   4. level + questions  5. result/modals   6. scene visuals + FX
   ============================================================ */

/* ---------- 1. Tokens & base ---------- */
:root{
  --bg:#1a1036;
  --bg2:#2a1a52;
  --card:#ffffff;
  --text:#2E2750;
  --muted:#6b6490;
  --line:rgba(0,0,0,.08);
  --accent:#6C5CE7;
  --accent2:#FF6FA5;
  --gold:#FFC93C;
  --green:#3DDC97;
  --red:#FF5A5A;
  --blue:#4FB6F5;
  --radius:18px;
  --kb:0px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --gnd:34%;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  font-family:'Baloo 2','Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 15% -10%, #4a2e8a 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #7a3a8a 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-color:#1a1036;
  background-attachment:fixed;
  overflow-x:hidden;
}
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select{ font:inherit; }
h1,h2,h3{ margin:0 0 .4em; line-height:1.15; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); font-size:14px; }
.screen{ max-width:720px; margin:0 auto; padding:14px 14px calc(26px + var(--safe-b)); }

.big-btn{
  display:block; width:100%; padding:16px 20px; border-radius:999px;
  background:linear-gradient(135deg,#7C6CF7,#FF6FA5); color:#fff;
  font-size:19px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 8px 0 #4b3bb0, 0 14px 26px rgba(0,0,0,.3);
  transition:transform .08s, box-shadow .08s;
}
.big-btn:active{ transform:translateY(5px); box-shadow:0 3px 0 #4b3bb0, 0 6px 14px rgba(0,0,0,.3); }
.ghost-btn{
  display:block; width:100%; padding:13px 18px; border-radius:999px; margin-top:10px;
  background:rgba(255,255,255,.12); color:#fff; font-weight:700; border:2px solid rgba(255,255,255,.28);
}
.ghost-btn:active{ transform:translateY(2px); }
.chip-btn{
  padding:9px 15px; border-radius:999px; background:#F2EEFF; color:#4a3f8a;
  font-weight:700; font-size:14px; border:2px solid #ded4ff;
}
.icon-btn{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; font-size:19px; flex:0 0 auto;
}
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.shake{ animation:shakeX .45s; }

/* ---------- 2. Profiles, create, top bar ---------- */
.screen-profiles{ padding-top:calc(34px + var(--safe-t)); text-align:center; }
.brand h1{ font-size:30px; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.brand-sub{ color:#d9d0ff; margin:0 0 22px; font-size:15px; }
.brand-art{ font-size:0; }
.brand-art::before{ content:'🐙'; font-size:68px; display:block; animation:bob 3s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(3deg)} }

.profile-list{ display:grid; gap:12px; margin-bottom:18px; }
.profile-card{ display:flex; align-items:stretch; gap:8px; }
.profile-pick{
  flex:1; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius);
  background:rgba(255,255,255,.95); box-shadow:0 6px 0 rgba(0,0,0,.22); text-align:left;
}
.profile-pick:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.22); }
.profile-avatar{ font-size:40px; }
.profile-meta{ display:flex; flex-direction:column; }
.profile-name{ font-size:20px; font-weight:800; }
.profile-sub{ font-size:13px; color:var(--muted); }
.profile-del{ width:44px; border-radius:var(--radius); background:rgba(255,255,255,.14); color:#fff; font-size:16px; }

.screen-create{ padding-top:calc(26px + var(--safe-t)); }
.screen-create h2{ color:#fff; font-size:25px; text-align:center; }
.field{ display:block; margin:0 0 16px; }
.field > span{ display:block; color:#ded6ff; font-weight:700; font-size:14px; margin-bottom:7px; }
.field input[type=text], .field input:not([type]), #newName, .field select{
  width:100%; padding:14px 16px; border-radius:14px; border:2px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.96); color:var(--text); font-size:18px; font-weight:700;
}
.field input[type=range]{ width:100%; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.16);
  color:#fff; font-weight:700; font-size:14px; border:2px solid transparent;
}
.chip.on{ background:#fff; color:var(--accent); border-color:var(--gold); }
.avatar-row{ display:flex; flex-wrap:wrap; gap:8px; }
.avatar-opt{ width:50px; height:50px; border-radius:14px; font-size:27px; background:rgba(255,255,255,.16); border:2px solid transparent; }
.avatar-opt.on{ background:#fff; border-color:var(--gold); transform:scale(1.06); }
.buddy-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.buddy-opt{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 5px;
  border-radius:14px; background:rgba(255,255,255,.14); border:2px solid transparent; color:#fff;
}
.buddy-opt.on{ background:#fff; color:var(--text); border-color:var(--gold); }
.buddy-art{ width:52px; height:52px; display:block; }
.buddy-label{ font-size:10.5px; font-weight:700; line-height:1.15; text-align:center; }
.create-actions{ display:flex; flex-direction:column-reverse; gap:0; margin-top:6px; }

#topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:8px;
  padding:calc(8px + var(--safe-t)) 12px 8px;
  background:rgba(20,12,45,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.who-chip{ display:flex; align-items:center; gap:5px; color:#fff; font-weight:800; font-size:14px; min-width:0; }
.who-avatar{ font-size:22px; }
.who-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:72px; }
.stats{ display:flex; gap:6px; margin-left:auto; }
.stat{
  position:relative; display:flex; align-items:center; gap:4px;
  padding:7px 11px; border-radius:999px; font-weight:800; font-size:14px;
  background:rgba(255,255,255,.14); color:#fff;
}
.stat.coin{ background:linear-gradient(135deg,#FFD166,#FF9F1C); color:#4a2c00; }
.stat.xp{ background:linear-gradient(135deg,#9B8CFF,#6C5CE7); }
.stat.streak{ background:linear-gradient(135deg,#FF8A3D,#FF4D4D); }
.xp-bar{ position:absolute; left:8px; right:8px; bottom:3px; height:3px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden; }
.xp-bar > span{ display:block; height:100%; background:#FFE066; width:0; transition:width .5s; }
.voice-btn{
  display:flex; align-items:center; gap:5px; padding:9px 14px; border-radius:999px;
  background:linear-gradient(135deg,#FF6FA5,#FFC93C); color:#3a1030; font-weight:900; font-size:14px;
  box-shadow:0 3px 0 rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.35) inset;
  animation:voicePulse 2.8s ease-in-out infinite;
}
@keyframes voicePulse{ 0%,100%{ box-shadow:0 3px 0 rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.35) inset, 0 0 0 0 rgba(255,201,60,.6); } 50%{ box-shadow:0 3px 0 rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.35) inset, 0 0 0 9px rgba(255,201,60,0); } }

/* ---------- 3. Hub / world map ---------- */
.hub{ color:#fff; }
.world-strip{
  display:flex; gap:9px; overflow-x:auto; padding:12px 2px 6px; margin:0 -2px 10px;
  scrollbar-width:none;
}
.world-strip::-webkit-scrollbar{ display:none; }
.world-chip{
  position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 12px; border-radius:16px; background:rgba(255,255,255,.14); color:#fff;
  border:2px solid transparent; min-width:76px;
}
.world-chip.on{ background:#fff; color:var(--text); border-color:var(--gold); transform:translateY(-2px); }
.world-chip.locked{ opacity:.45; }
.world-chip-emoji{ font-size:25px; }
.world-chip-name{ font-size:11px; font-weight:800; }
.world-chip-crown{ position:absolute; top:-7px; right:-4px; font-size:16px; }

.world-header{ text-align:center; margin-bottom:12px; }
.world-title{ font-size:25px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.3); }
.world-blurb{ font-size:14px; color:#e3dbff; margin-bottom:9px; }
.world-prog{ position:relative; height:22px; border-radius:999px; background:rgba(0,0,0,.3); overflow:hidden; }
.world-prog-fill{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--green),#8CF0C4); transition:width .6s; }
.world-prog-label{ position:relative; display:block; line-height:22px; font-size:12px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); }

.subject-tabs{ display:flex; gap:7px; margin-bottom:14px; }
.subj-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px;
  border-radius:14px; background:rgba(255,255,255,.13); color:#fff; border:2px solid transparent;
}
.subj-tab.on{ background:var(--subj); color:#20183c; border-color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.subj-emoji{ font-size:21px; }
.subj-name{ font-size:11px; font-weight:800; }

.skill-path{ position:relative; padding:4px 0 18px; }
.skill-path::before{
  content:''; position:absolute; left:50%; top:10px; bottom:30px; width:7px; margin-left:-3.5px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.34) 0 12px, transparent 12px 24px);
  border-radius:4px;
}
.path-node{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  width:50%; margin:0 0 18px; text-align:center;
}
.path-node.left{ margin-right:auto; }
.path-node.right{ margin-left:auto; }
.path-node.boss{ width:100%; margin:6px auto 10px; }
/* dotted stub joining each node to the central path */
.path-node::after{
  content:''; position:absolute; top:33px; width:50%; height:0;
  border-top:5px dotted rgba(255,255,255,.32); z-index:0;
}
.path-node.left::after{ left:50%; }
.path-node.right::after{ right:50%; }
.path-node.boss::after{ display:none; }
.node-btn{ position:relative; z-index:1; }
.node-btn{
  flex:0 0 auto; width:70px; height:70px; border-radius:50%;
  display:grid; place-items:center; font-size:31px;
  background:var(--subj,#6C5CE7); border:4px solid #fff;
  box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 0 4px rgba(255,255,255,.18);
  transition:transform .1s;
}
.node-btn:active:not(:disabled){ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.3); }
.path-node.locked .node-btn{ background:#5a5478; border-color:rgba(255,255,255,.4); box-shadow:0 4px 0 rgba(0,0,0,.25); }
.boss-btn{ width:88px; height:88px; font-size:40px; background:linear-gradient(135deg,#FF4D4D,#8B1E3F); border-color:var(--gold); }
.node-info{ width:100%; min-width:0; }
.node-name{ font-weight:800; font-size:14.5px; line-height:1.2; }
.node-tiers{ display:flex; gap:5px; justify-content:center; font-size:12px; color:#ded6ff; font-weight:700; }
.tier-pip{
  display:inline-grid; place-items:center; min-width:30px; height:20px; padding:0 5px;
  border-radius:6px; background:rgba(255,255,255,.22); color:#fff; font-size:11px; letter-spacing:-1px;
}
.tier-pip.got{ background:var(--gold); color:#4a2c00; }

.island-section{ margin-top:6px; }
.island-section h3{ color:#fff; font-size:19px; }
.island-section h3 small{ display:block; font-size:12.5px; font-weight:600; color:#d6cdff; }
.island-list{ display:grid; gap:10px; }
.island-card{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius);
  background:rgba(255,255,255,.94); color:var(--text); text-align:left;
  border-left:7px solid var(--isl); box-shadow:0 5px 0 rgba(0,0,0,.2);
}
.island-card:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.2); }
.island-emoji{ font-size:34px; flex:0 0 auto; }
.island-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.island-name{ font-weight:800; font-size:16px; }
.island-done{ color:var(--green); }
.island-blurb{ font-size:12.5px; color:var(--muted); }
.island-bar{ display:block; height:7px; border-radius:4px; background:#e9e4f7; overflow:hidden; }
.island-bar-fill{ display:block; height:100%; background:var(--isl); transition:width .5s; }
.island-prog{ font-size:11px; color:var(--muted); font-weight:700; }
.hub-foot{ text-align:center; color:#cdc3ff; font-size:13px; margin-top:16px; }

/* World themes tint the hub backdrop. */
.world-tidepool{ background:radial-gradient(700px 400px at 50% 0%, rgba(110,220,230,.3), transparent 70%); }
.world-meadow{ background:radial-gradient(700px 400px at 50% 0%, rgba(120,230,150,.28), transparent 70%); }
.world-harbor{ background:radial-gradient(700px 400px at 50% 0%, rgba(120,190,255,.3), transparent 70%); }
.world-forest{ background:radial-gradient(700px 400px at 50% 0%, rgba(90,200,140,.26), transparent 70%); }
.world-caves{ background:radial-gradient(700px 400px at 50% 0%, rgba(180,140,224,.3), transparent 70%); }
.world-clouds{ background:radial-gradient(700px 400px at 50% 0%, rgba(200,220,255,.3), transparent 70%); }
.world-volcano{ background:radial-gradient(700px 400px at 50% 0%, rgba(255,120,80,.3), transparent 70%); }
.world-galaxy{ background:radial-gradient(700px 400px at 50% 0%, rgba(150,120,255,.34), transparent 70%); }

/* ---------- 4. Level screen ---------- */
.screen-level{ position:relative; max-width:860px; min-height:100vh; min-height:100dvh; padding:0 0 var(--kb); }
.level-head{
  position:relative; z-index:12; display:flex; align-items:center; gap:10px;
  padding:calc(8px + var(--safe-t)) 12px 8px;
}
.level-title{
  flex:1; min-width:0; font-weight:800; font-size:15px; color:#fff;
  padding:7px 13px; border-radius:999px; background:rgba(20,12,45,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prog-dots{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.prog-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); }
.prog-dots .dot.done{ background:var(--green); }
.prog-dots .dot.now{ background:var(--gold); transform:scale(1.4); }
.prog-dots .lives{ margin-left:5px; font-size:12px; letter-spacing:-2px; }

.level-card, .story-card{
  position:fixed; left:0; right:0; bottom:var(--kb); z-index:12;
  max-width:860px; margin:0 auto; max-height:72vh; overflow-y:auto;
  background:rgba(255,255,255,.97); border-radius:22px 22px 0 0;
  padding:16px 16px calc(18px + var(--safe-b));
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
}
.story-chapter{ font-size:12px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.story-text{ font-size:17.5px; line-height:1.55; margin-bottom:14px; }

.q-big{ margin-bottom:10px; text-align:center; }
.q-objects{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; font-size:30px; line-height:1.1; }
.q-coin{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; font-size:12px; font-weight:800; box-shadow:inset 0 -3px 0 rgba(0,0,0,.2); }
.q-passage{ text-align:left; background:#F7F4FF; border-left:5px solid var(--accent); border-radius:12px; padding:11px 13px; font-size:15px; line-height:1.5; max-height:34vh; overflow-y:auto; }
.q-passage-title{ font-weight:900; color:var(--accent); margin-bottom:4px; }
.q-passage p{ margin:0; }
.q-prompt{ font-size:21px; font-weight:800; line-height:1.3; text-align:center; margin-bottom:14px; }

.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px; }
.choices.many{ grid-template-columns:repeat(2,1fr); }
.choices.tiles{ grid-template-columns:repeat(3,1fr); }
.choice{
  padding:16px 14px; border-radius:16px; font-size:19px; font-weight:800;
  background:#F2EEFF; color:#3a3268; border:3px solid #ded4ff;
  box-shadow:0 4px 0 #cfc3f5; transition:transform .08s;
  min-height:58px;
}
.choice:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 #cfc3f5; }
.choice.right{ background:#D9FBE9; border-color:var(--green); box-shadow:0 4px 0 #2bbd7f; animation:pop .4s; }
.choice.wrong{ background:#FFE3E3; border-color:var(--red); box-shadow:0 4px 0 #d64141; animation:shakeX .4s; }
.choice.dead{ opacity:.4; }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.08)} 100%{transform:scale(1)} }
.choice.tile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px; }
.choice-cap{ font-size:13px; font-weight:800; }
.lt-tile{
  width:100%; aspect-ratio:1/1; max-height:96px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.12);
}
.lt-tile-letter-big{ font-size:38px; font-weight:900; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.25); line-height:1; }
.lt-tile-emoji{ font-size:27px; line-height:1; }
.lt-tile-name{ font-size:11px; font-weight:800; color:#3A3358; }

.type-wrap{ display:flex; gap:7px; }
#typeInput{
  flex:1; min-width:0; padding:15px 16px; border-radius:14px; border:3px solid #ded4ff;
  background:#fff; font-size:21px; font-weight:800; color:var(--text);
}
#typeInput:focus{ outline:none; border-color:var(--accent); }
.mic-btn{ width:54px; border-radius:14px; background:#F2EEFF; border:3px solid #ded4ff; font-size:21px; }
.mic-btn.listening{ background:#FFE3EE; border-color:var(--accent2); animation:micPulse 1.1s infinite; }
@keyframes micPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,111,165,.6) } 50%{ box-shadow:0 0 0 10px rgba(255,111,165,0) } }
.go-btn{ padding:0 20px; border-radius:14px; background:linear-gradient(135deg,#7C6CF7,#FF6FA5); color:#fff; font-weight:900; font-size:17px; box-shadow:0 4px 0 #4b3bb0; }

.feedback{ min-height:24px; margin-top:11px; text-align:center; font-weight:800; font-size:15px; }
.feedback.good{ color:#1f9d64; }
.feedback.bad{ color:#d13b3b; }
.feedback.hint{ color:#8a6a00; }
.card-foot{ display:flex; gap:8px; justify-content:center; margin-top:10px; }

/* ---------- 5. Result + modals ---------- */
.overlay{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px;
  background:rgba(12,6,30,.78); backdrop-filter:blur(5px);
}
.result-card{
  width:100%; max-width:420px; background:#fff; border-radius:26px; padding:24px 20px;
  text-align:center; box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.res-stars{ font-size:46px; line-height:1; margin-bottom:6px; }
.res-star{ display:inline-block; color:#ded4ff; }
.res-star.got{ color:var(--gold); text-shadow:0 0 16px rgba(255,201,60,.8); animation:starPop .5s backwards; }
@keyframes starPop{ 0%{transform:scale(0) rotate(-120deg); opacity:0} 70%{transform:scale(1.35) rotate(10deg)} 100%{transform:scale(1) rotate(0); opacity:1} }
.result-card h2{ font-size:27px; }
.result-card p{ color:var(--muted); margin:0 0 14px; font-size:15px; }
.res-rewards{ display:flex; justify-content:center; gap:12px; margin-bottom:16px; font-weight:900; font-size:19px; }
.res-rewards span:first-child{ color:#d98400; }
.res-rewards span:last-child{ color:var(--accent); }
.res-actions{ display:flex; flex-direction:column-reverse; }
.res-actions .ghost-btn{ background:#F2EEFF; color:#4a3f8a; border-color:#ded4ff; }

.modal{
  position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(12,6,30,.7); backdrop-filter:blur(4px); padding:0;
}
.sheet{
  width:100%; max-width:520px; max-height:86vh; overflow-y:auto;
  background:#fff; border-radius:24px 24px 0 0; padding:20px 18px calc(22px + var(--safe-b));
  box-shadow:0 -10px 40px rgba(0,0,0,.4);
}
.sheet.wide{ max-width:640px; }
.sheet h3{ font-size:21px; }
.sheet .field > span{ color:var(--muted); }
.sheet .field select, .sheet .field input{ border-color:#ded4ff; background:#F8F6FF; }
.sheet-row{
  display:block; width:100%; text-align:left; padding:14px 15px; border-radius:14px;
  background:#F5F2FF; font-weight:800; font-size:16px; margin-bottom:8px;
}
.sheet-row:active{ background:#E9E3FF; }
.toggle-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:#F5F2FF; margin-bottom:9px; font-weight:700; }
.toggle-row input{ width:22px; height:22px; accent-color:var(--accent); }
.toggle-row small{ color:var(--muted); font-weight:600; }

.tier-body{ display:grid; gap:9px; margin-bottom:6px; }
.tier-row{
  display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px;
  background:#F5F2FF; border:3px solid transparent; text-align:left;
}
.tier-row.t1{ border-color:#e0b58a; } .tier-row.t2{ border-color:#c3c9d6; } .tier-row.t3{ border-color:var(--gold); }
.tier-row.locked{ opacity:.5; }
.tier-medal{ font-size:28px; }
.tier-text{ flex:1; display:flex; flex-direction:column; }
.tier-text small{ color:var(--muted); font-size:12.5px; }
.tier-stars{ font-weight:900; color:#d98400; }

.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px; margin-bottom:8px; }
.badge{
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  padding:11px 7px; border-radius:14px; background:#F5F2FF; opacity:.55;
}
.badge.got{ opacity:1; background:linear-gradient(160deg,#FFF6DF,#FFE9B8); box-shadow:0 3px 0 #e7c884; }
.badge-emoji{ font-size:30px; }
.badge-name{ font-size:12px; font-weight:900; }
.badge-desc{ font-size:10.5px; color:var(--muted); line-height:1.25; }

.stat-body{ margin-bottom:6px; }
.stat-row{ display:flex; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--line); font-size:15px; }
.stat-row span{ color:var(--muted); }
.grade-body{ display:grid; gap:7px; margin-bottom:6px; }
.grade-row{ padding:13px 15px; border-radius:14px; background:#F5F2FF; font-weight:800; text-align:left; }
.grade-row.on{ background:var(--accent); color:#fff; }

/* ---------- 6. Scene stage ---------- */
.sv-stage{
  position:fixed; inset:0; z-index:1; overflow:hidden;
  --gnd:34%;
  background:linear-gradient(180deg,#2a1a52,#1a1036);
}
.sv-decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sv-stage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:var(--gnd);
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
  pointer-events:none;
}
.sv-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:9; }
.sv-flash.sv-go{ animation:svFlash .34s ease-out; }
@keyframes svFlash{ 0%{opacity:.6} 100%{opacity:0} }
.sv-actionLabel{
  position:absolute; left:50%; top:16%; transform:translateX(-50%) scale(.7);
  padding:7px 16px; border-radius:999px; background:rgba(20,12,45,.86); color:#fff;
  font-weight:900; font-size:15px; opacity:0; transition:opacity .18s, transform .18s; z-index:10; white-space:nowrap;
}
.sv-actionLabel.sv-show{ opacity:1; transform:translateX(-50%) scale(1); }
.sv-shake{ animation:svShake .42s; }
@keyframes svShake{ 0%,100%{transform:translate(0)} 15%{transform:translate(-6px,3px)} 35%{transform:translate(6px,-3px)} 55%{transform:translate(-4px,2px)} 80%{transform:translate(4px,-1px)} }
.sv-obstacle{ position:absolute; width:clamp(42px,7vw,72px); height:clamp(42px,7vw,72px); transition:opacity .35s, transform .35s, filter .35s; z-index:4; }
.sv-cleared{ opacity:.22; filter:grayscale(1); transform:scale(.72); }
.sv-wiggle{ animation:svWiggle 2.4s ease-in-out infinite; }
@keyframes svWiggle{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(4deg)} }

/* backdrops per scene */
.sv-stageCockpit{ background:radial-gradient(900px 600px at 50% 40%, #241a52, #08040f); }
.sv-stageSub{ background:linear-gradient(180deg,#1b6f9c 0%,#0b3b5e 55%,#041f33 100%); }
.sv-stageMountain{ background:linear-gradient(180deg,#5b4a86 0%,#8c6fa8 45%,#3a2a52 100%); }
.sv-stageBridge{ background:linear-gradient(180deg,#7ec8f0 0%,#bfe7ff 45%,#5a9ec4 100%); }
.sv-stageRobots{ background:linear-gradient(180deg,#2b3550 0%,#3f4c6b 60%,#1d2435 100%); }
.sv-stageWeather{ background:linear-gradient(180deg,#5f7fb5 0%,#9fc0e6 50%,#4a5e85 100%); }
.sv-stageBody{ background:radial-gradient(800px 500px at 50% 45%, #a4315f, #4a0f27); }
.sv-stageLanguages{ background:linear-gradient(180deg,#2d1b5e 0%,#5b2d8c 55%,#1a0f38 100%); }
.sv-stageSocial{ background:linear-gradient(180deg,#8fd6f0 0%,#d9f3c9 55%,#7cb36a 100%); }
.sv-stageCulture{ background:linear-gradient(180deg,#3a1d5e 0%,#8c3d6f 55%,#2a1038 100%); }
.sv-stageChinese{ background:linear-gradient(180deg,#1b1440 0%,#4a2060 55%,#180c30 100%); }
.sv-stageRockets{ background:linear-gradient(180deg,#0f2a52 0%,#2a5a8c 50%,#1a3550 100%); }

/* space cockpit */
.sv-warpLayer{ position:absolute; inset:0; overflow:hidden; }
.sv-warpLayer.sv-surge .sv-starStreak{ animation-duration:.22s !important; }
.sv-starStreak{
  position:absolute; left:50%; top:50%; width:2px; height:34%;
  background:linear-gradient(180deg, transparent, #cfe8ff);
  transform-origin:top center; transform:rotate(var(--ang));
  animation:svWarp 1s linear infinite;
}
@keyframes svWarp{ 0%{ transform:rotate(var(--ang)) scaleY(.1); opacity:0 } 40%{opacity:1} 100%{ transform:rotate(var(--ang)) scaleY(1.6); opacity:0 } }
.sv-reticle{ position:absolute; left:50%; top:42%; width:clamp(54px,9vw,84px); height:clamp(54px,9vw,84px); transform:translate(-50%,-50%); opacity:.65; z-index:5; }
.sv-ufoAmbient{ position:absolute; width:clamp(50px,8vw,86px); height:clamp(32px,5vw,54px); transform:scale(var(--ufoScale,.4)); animation:svDrift 6s ease-in-out infinite; opacity:.7; }
@keyframes svDrift{ 0%,100%{ transform:scale(var(--ufoScale,.4)) translateX(0) } 50%{ transform:scale(var(--ufoScale,.4)) translateX(22px) } }
.sv-ufoFlinch{ filter:brightness(2.2); }
.sv-foeSlot{ position:absolute; left:50%; top:42%; width:clamp(70px,13vw,130px); height:clamp(44px,8vw,82px); transform:translate(-50%,-50%) scale(.2); opacity:0; z-index:6; }
.sv-foeSlot.sv-approach{ animation:svApproach 1.1s ease-out forwards; }
@keyframes svApproach{ 0%{ transform:translate(-50%,-50%) scale(.15); opacity:0 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1 } }
.sv-foeSlot.sv-dead{ animation:svFoeDead .42s ease-out forwards; }
@keyframes svFoeDead{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1.8) rotate(25deg); opacity:0 } }
.sv-ufoBody{ width:100%; height:100%; animation:svWiggle 1.8s ease-in-out infinite; }
.sv-dashboard{
  position:absolute; left:0; right:0; bottom:0; height:calc(var(--gnd) * .5);
  background:linear-gradient(180deg,#2a3350,#131a2c);
  border-top:4px solid #6fdcff55; border-radius:40% 40% 0 0 / 22px 22px 0 0;
}

/* ocean */
.sv-bubble{ position:absolute; bottom:-10px; border-radius:50%; background:rgba(255,255,255,.4); animation:svRise linear infinite; }
@keyframes svRise{ 0%{ transform:translateY(0); opacity:0 } 15%{opacity:.8} 100%{ transform:translateY(-70vh); opacity:0 } }
.sv-foeSea{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.sv-tilt{ animation:svTilt .5s; }
@keyframes svTilt{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-16deg)} 65%{transform:rotate(11deg)} }

/* geology / mountain */
.sv-ledge{
  width:clamp(62px,11vw,112px); height:clamp(14px,2.2vh,22px); border-radius:8px;
  background:linear-gradient(180deg,#9b8468,#6a5742); box-shadow:0 4px 0 #4a3a2a; z-index:3;
}
.sv-flagPole{ position:absolute; left:50%; bottom:100%; width:4px; height:clamp(28px,4vh,44px); background:#c9b89a; }
.sv-flag{ position:absolute; left:4px; top:0; width:clamp(18px,3vw,28px); height:clamp(12px,2vw,18px); background:var(--red); clip-path:polygon(0 0,100% 20%,0 45%); }

/* math / bridge */
.sv-chasmDeep{ position:absolute; left:14%; right:14%; bottom:0; height:var(--gnd); background:linear-gradient(180deg,#2a3a4a,#0d1620); border-radius:10px 10px 0 0; }
.sv-cliffL, .sv-cliffR{
  position:absolute; bottom:0; width:16%; height:calc(var(--gnd) + clamp(30px,4.5vh,60px));
  background:linear-gradient(180deg,#7fae5f,#4a6a3a); z-index:3;
}
.sv-cliffL{ left:0; border-radius:0 14px 0 0; }
.sv-cliffR{ right:0; border-radius:14px 0 0 0; }
.sv-goalFlagPole{ position:absolute; right:7%; bottom:calc(var(--gnd) + clamp(30px,4.5vh,60px)); width:4px; height:clamp(34px,5vh,54px); background:#e8dfc8; z-index:4; }
.sv-goalFlag{ position:absolute; left:4px; top:0; width:clamp(20px,3.4vw,32px); height:clamp(14px,2.2vw,22px); background:var(--gold); clip-path:polygon(0 0,100% 22%,0 48%); }
.sv-plankSlot{
  width:clamp(46px,8vw,80px); height:clamp(40px,6vh,80px);
  bottom:var(--gnd); z-index:3; transform:translateX(-50%);
}
.sv-plank{
  position:absolute; left:0; right:0; top:clamp(10px,1.6vh,20px); height:clamp(10px,1.6vh,16px); border-radius:4px;
  background:linear-gradient(180deg,#d9ae74,#9a7548); box-shadow:0 3px 0 #6f5330;
  opacity:0; transform:translateY(-26px) rotate(-18deg);
  transition:opacity .25s, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.sv-plank.sv-placed{ opacity:1; transform:translateY(0) rotate(0); }
.sv-plank.sv-fall{ animation:svPlankFall .55s ease-in forwards; }
@keyframes svPlankFall{ 0%{opacity:1; transform:translateY(0) rotate(0)} 100%{opacity:0; transform:translateY(90px) rotate(70deg)} }

/* robots */
.sv-gearDeco{ position:absolute; top:16%; border-radius:50%; border:6px dashed #6a7890; animation:svSpin 9s linear infinite; opacity:.5; }
@keyframes svSpin{ to{ transform:rotate(360deg) } }
.sv-claw{
  position:absolute; left:52%; top:12%; width:clamp(26px,4vw,40px); height:clamp(34px,5vh,52px);
  background:linear-gradient(180deg,#b9c3d4,#7a8698); clip-path:polygon(40% 0,60% 0,60% 62%,100% 100%,74% 100%,50% 76%,26% 100%,0 100%,40% 62%);
  transition:transform .3s; z-index:6;
}
.sv-conveyor{
  position:absolute; left:0; right:0; bottom:calc(var(--gnd) - clamp(8px,1.2vh,14px)); height:clamp(12px,2vh,20px);
  background:repeating-linear-gradient(90deg,#4a5568 0 14px,#39424f 14px 28px);
  border-top:3px solid #6a7890; animation:svBelt 1.2s linear infinite; z-index:2;
}
@keyframes svBelt{ to{ background-position:-28px 0 } }
.sv-robotRig{ position:absolute; right:8%; bottom:var(--gnd); width:clamp(120px,19vw,200px); height:clamp(145px,23vw,245px); z-index:4; }
.sv-robotGhost{ opacity:.45; }
.sv-robotPart{ opacity:0; transition:opacity .3s; }
.sv-robotPart.sv-on{ opacity:1; }
.sv-robotPart.sv-snap{ animation:svSnap .42s; transform-box:fill-box; transform-origin:center; }
@keyframes svSnap{ 0%{transform:scale(1.5) translateY(-16px)} 60%{transform:scale(.92)} 100%{transform:scale(1)} }
.sv-partOnBelt{ bottom:var(--gnd); width:clamp(34px,5.5vw,52px); height:clamp(30px,5vw,46px); z-index:5; transition:opacity .3s, transform .4s; }
.sv-partOnBelt.sv-picked{ opacity:0; transform:translateY(-70px) scale(.5); }
.sv-partOnBelt.sv-fumble{ animation:svFumble .5s; }
@keyframes svFumble{ 0%,100%{transform:translateY(0) rotate(0)} 40%{transform:translateY(14px) rotate(-26deg)} }

/* weather */
.sv-windStreak{ position:absolute; left:-20%; height:3px; border-radius:3px; background:rgba(255,255,255,.55); animation:svWind linear infinite; }
@keyframes svWind{ 0%{ transform:translateX(0); opacity:0 } 20%{opacity:.9} 100%{ transform:translateX(130vw); opacity:0 } }
.sv-stormCloud{ width:clamp(56px,9vw,96px); height:clamp(38px,6vw,66px); z-index:4; }
.sv-cloudBolt{ animation:svBolt 1.6s steps(1) infinite; }
@keyframes svBolt{ 0%,70%{opacity:0} 75%,85%{opacity:1} 90%,100%{opacity:0} }
.sv-balloon{ position:absolute; width:clamp(50px,8vw,84px); height:clamp(68px,11vw,116px); transform:translateX(-50%); transition:left .6s cubic-bezier(.3,1.2,.5,1), bottom .6s cubic-bezier(.3,1.2,.5,1); z-index:5; }
.sv-balloon.sv-burst{ animation:svBalloonUp .6s; }
@keyframes svBalloonUp{ 0%,100%{ transform:translateX(-50%) scale(1) } 45%{ transform:translateX(-50%) scale(1.14) translateY(-12px) } }
.sv-balloon.sv-knock{ animation:svBalloonKnock .55s; }
@keyframes svBalloonKnock{ 0%,100%{ transform:translateX(-50%) rotate(0) } 30%{ transform:translateX(-50%) rotate(-17deg) } 65%{ transform:translateX(-50%) rotate(12deg) } }

/* body */
.sv-cellWall{
  position:absolute; left:50%; bottom:calc(var(--gnd) + 6px); transform:translateX(-50%);
  width:clamp(150px,30vw,300px); height:clamp(150px,30vw,300px); border-radius:50%;
  border:clamp(7px,1.2vw,12px) solid #ffb3c9; background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.3), rgba(255,120,160,.2));
  z-index:2;
}
.sv-cellWall.sv-heal{ animation:svHeal .6s; }
@keyframes svHeal{ 0%,100%{ border-color:#ffb3c9; box-shadow:none } 50%{ border-color:#7ee787; box-shadow:0 0 30px #7ee787 } }
.sv-cellWall.sv-hit{ animation:svCellHit .5s; }
@keyframes svCellHit{ 0%,100%{ border-color:#ffb3c9 } 50%{ border-color:#ff4d4d; box-shadow:0 0 24px #ff4d4d } }
.sv-germ{ z-index:5; }
.sv-germ.sv-lunge{ animation:svLunge .5s; }
@keyframes svLunge{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.4)} }

/* languages / portals */
.sv-portalStar{ position:absolute; border-radius:50%; background:#fff; animation:svTwinkle 2.4s ease-in-out infinite; }
@keyframes svTwinkle{ 0%,100%{opacity:.25} 50%{opacity:1} }
.sv-portal{ bottom:calc(var(--gnd) + clamp(10px,1.6vh,22px)); width:clamp(46px,8vw,80px); height:clamp(46px,8vw,80px); transform:translateX(-50%); z-index:3; }
.sv-ring{ width:100%; height:100%; border-radius:50%; border:clamp(5px,.9vw,9px) solid #fff; opacity:.75; animation:svRingSpin 5s linear infinite; }
@keyframes svRingSpin{ to{ transform:rotate(360deg) } }
.sv-portal.sv-active .sv-ring{ box-shadow:0 0 28px currentColor; opacity:1; transform:scale(1.2); }
.sv-portal.sv-sealed .sv-ring{ opacity:.3; border-style:dotted; }
.sv-portal.sv-reject{ animation:shakeX .45s; }

/* social / village */
.sv-cottage{
  position:absolute; bottom:var(--gnd); width:clamp(56px,10vw,100px); height:clamp(50px,9vw,88px);
  background:linear-gradient(180deg,#f3dcb5,#d9b887); border-radius:4px; z-index:2;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08);
}
.sv-cottage::before{ content:''; position:absolute; left:-8%; right:-8%; bottom:100%; height:46%; background:#c0573f; clip-path:polygon(50% 0,100% 100%,0 100%); }
.sv-friend{ bottom:calc(var(--gnd) + clamp(4px,.8vh,10px)); transform:translateX(-50%); z-index:4; }
.sv-happyMark{ opacity:0; transition:opacity .3s; }
.sv-friend.sv-helped .sv-happyMark{ opacity:1; }
.sv-friend.sv-helped .sv-sadMark{ opacity:0; }
.sv-friend.sv-helped{ opacity:1; filter:none; transform:translateX(-50%) scale(1.05); animation:svHop .6s; }
@keyframes svHop{ 0%,100%{ transform:translateX(-50%) translateY(0) scale(1.05) } 45%{ transform:translateX(-50%) translateY(-16px) scale(1.05) } }
.sv-heartPop{ position:fixed; font-size:28px; transform:translate(-50%,-50%); z-index:200; pointer-events:none; opacity:0; }
.sv-heartPop.sv-go{ animation:svHeart .75s ease-out forwards; }
@keyframes svHeart{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4)} 30%{opacity:1; transform:translate(-50%,-50%) scale(1.2)} 100%{opacity:0; transform:translate(-50%,-180%) scale(1)} }

/* culture / festival */
.sv-bunting{
  position:absolute; left:0; right:0; top:8%; height:26px;
  background:repeating-linear-gradient(90deg,#FF6B6B 0 18px,#FFD34D 18px 36px,#4FD6C4 36px 54px,#A855F7 54px 72px);
  clip-path:polygon(0 0,100% 0,100% 30%,96% 100%,92% 30%,88% 100%,84% 30%,80% 100%,76% 30%,72% 100%,68% 30%,64% 100%,60% 30%,56% 100%,52% 30%,48% 100%,44% 30%,40% 100%,36% 30%,32% 100%,28% 30%,24% 100%,20% 30%,16% 100%,12% 30%,8% 100%,4% 30%,0 100%);
  opacity:.9;
}
.sv-festStand{
  position:absolute; left:0; right:0; bottom:calc(var(--gnd) - 4px); height:clamp(14px,2.2vh,24px);
  background:repeating-linear-gradient(90deg,#8a5a3a 0 22px,#6f4730 22px 44px); z-index:2;
}
.sv-festGhost{ opacity:.4; }
.sv-festPart{ opacity:0; transition:opacity .3s; }
.sv-festPart.sv-on{ opacity:1; }
.sv-festPart.sv-snap{ animation:svSnap .42s; transform-box:fill-box; transform-origin:center; }

/* chinese / lanterns */
.sv-cnMoon{ position:absolute; right:12%; top:9%; width:clamp(44px,7vw,74px); height:clamp(44px,7vw,74px); border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff6d8,#ffe9a8); box-shadow:0 0 44px rgba(255,233,168,.6); }
.sv-cnStar{ position:absolute; border-radius:50%; background:#fff; animation:svTwinkle 2.8s ease-in-out infinite; }
.sv-lantern{ width:clamp(34px,5.6vw,56px); height:clamp(46px,7.6vw,76px); transform:translateX(-50%); z-index:4; animation:svSway 3.4s ease-in-out infinite; }
@keyframes svSway{ 0%,100%{ transform:translateX(-50%) rotate(-5deg) } 50%{ transform:translateX(-50%) rotate(5deg) } }
.sv-lanternGlow{ opacity:.35; transition:opacity .3s; }
.sv-lantern.sv-lit .sv-lanternGlow{ opacity:1; filter:drop-shadow(0 0 14px #FF8A3D); }
.sv-lantern.sv-lit{ opacity:1; filter:none; }

/* rockets / launchpad */
.sv-countdownNum{
  position:absolute; left:50%; top:11%; transform:translateX(-50%);
  font-size:clamp(28px,6vw,54px); font-weight:900; color:#FFE066;
  text-shadow:0 0 22px rgba(255,224,102,.7); z-index:7;
}
.sv-gantry{
  position:absolute; bottom:var(--gnd); width:clamp(12px,1.8vw,20px); height:clamp(80px,13vh,150px);
  background:repeating-linear-gradient(180deg,#8a97ab 0 8px,#5a6a80 8px 16px); z-index:2;
}
.sv-launchRocket{
  position:absolute; left:50%; bottom:var(--gnd); transform:translateX(-50%);
  width:clamp(40px,6.4vw,66px); height:clamp(100px,16vw,166px); z-index:5;
  transition:bottom 1.4s cubic-bezier(.4,0,.8,.4);
}
.sv-launchRocket.sv-rumble{ animation:svRumble .14s linear infinite; }
@keyframes svRumble{ 0%,100%{ transform:translateX(-50%) translate(0) } 25%{ transform:translateX(-50%) translate(-2px,1px) } 75%{ transform:translateX(-50%) translate(2px,-1px) } }
.sv-launchRocket.sv-misfire{ animation:svMisfire .45s; }
@keyframes svMisfire{ 0%,100%{ transform:translateX(-50%) rotate(0) } 40%{ transform:translateX(-50%) rotate(-8deg) } }
.sv-flame{
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:60%; height:0; border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#FFE066,#FF6B6B,transparent);
  transition:height .18s; opacity:0;
}
.sv-flame.sv-on{ height:46px; opacity:1; }
.sv-flame.sv-big{ height:110px; opacity:1; }
.sv-smokeCloud{
  position:absolute; left:50%; bottom:calc(var(--gnd) - 14px); transform:translateX(-50%);
  width:clamp(90px,16vw,190px); height:clamp(40px,7vw,80px); border-radius:50%;
  background:radial-gradient(circle,#e8ecf2,rgba(232,236,242,0)); opacity:0;
}
.sv-smokeCloud.sv-puff{ animation:svPuff 1.6s ease-out forwards; }
@keyframes svPuff{ 0%{opacity:0; transform:translateX(-50%) scale(.4)} 25%{opacity:.9} 100%{opacity:0; transform:translateX(-50%) scale(2.3)} }

/* ---------- Critter ---------- */
.adv-critter{
  position:absolute; left:10%; bottom:var(--gnd);
  width:clamp(64px,11vw,120px); height:clamp(64px,11vw,120px);
  transform:translateX(-50%) scale(var(--critterScale,1));
  transform-origin:bottom center; z-index:6;
  transition:left .55s cubic-bezier(.3,1.2,.5,1), bottom .55s cubic-bezier(.3,1.2,.5,1), top .55s cubic-bezier(.3,1.2,.5,1);
  animation:critterIdle 2.6s ease-in-out infinite;
}
@keyframes critterIdle{ 0%,100%{ transform:translateX(-50%) scale(var(--critterScale,1)) translateY(0) } 50%{ transform:translateX(-50%) scale(var(--critterScale,1)) translateY(-6px) } }
.adv-shadow{ position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:70%; height:12px; border-radius:50%; background:rgba(0,0,0,.28); filter:blur(3px); }
.adv-sweat{ position:absolute; right:4%; top:6%; font-size:17px; opacity:0; }
.blinkEye{ animation:svBlink 5s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes svBlink{ 0%,94%,100%{ transform:scaleY(1) } 97%{ transform:scaleY(.1) } }
.celeb-spin{ animation:celebSpin .7s } @keyframes celebSpin{ to{ transform:translateX(-50%) rotate(360deg) } }
.celeb-bounce{ animation:celebBounce .7s } @keyframes celebBounce{ 0%,100%{transform:translateX(-50%) translateY(0)} 40%{transform:translateX(-50%) translateY(-26px)} }
.celeb-wiggle{ animation:celebWiggle .7s } @keyframes celebWiggle{ 0%,100%{transform:translateX(-50%) rotate(0)} 25%{transform:translateX(-50%) rotate(-16deg)} 75%{transform:translateX(-50%) rotate(16deg)} }

/* ---------- Transient FX ---------- */
.adv-float-txt{
  position:absolute; transform:translateX(-50%); font-weight:900; font-size:21px; color:#FFE066;
  text-shadow:0 2px 4px rgba(0,0,0,.5); pointer-events:none; z-index:20;
  animation:svFloatUp 1s ease-out forwards;
}
@keyframes svFloatUp{ 0%{opacity:0; transform:translateX(-50%) translateY(0) scale(.6)} 25%{opacity:1; transform:translateX(-50%) translateY(-14px) scale(1.1)} 100%{opacity:0; transform:translateX(-50%) translateY(-62px) scale(1)} }
.adv-fly-coin{
  position:absolute; transform:translateX(-50%); font-size:22px; pointer-events:none; z-index:20;
  animation:svFlyCoin .76s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes svFlyCoin{
  0%{ transform:translate(-50%,0) scale(.6); opacity:0 }
  18%{ opacity:1; transform:translate(-50%,0) scale(1.2) }
  55%{ transform:translate(calc(-50% + var(--midx)), var(--midy)) scale(1) }
  100%{ transform:translate(calc(-50% + var(--endx)), var(--endy)) scale(.4); opacity:0 }
}
.adv-spark{ position:absolute; transform:translate(-50%,-50%); font-size:15px; pointer-events:none; z-index:19; animation:svSpark .7s ease-out forwards; }
@keyframes svSpark{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.3)} 25%{opacity:1} 100%{opacity:0; transform:translate(-50%,-50%) var(--tx) scale(.4)} }
.sv-debris{ position:fixed; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:200; opacity:0; }
.sv-debris.sv-go{ animation:svDebris .6s ease-out forwards; }
@keyframes svDebris{ 0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot))} }
.sv-poof{ position:fixed; font-size:26px; transform:translate(-50%,-50%); pointer-events:none; z-index:200; opacity:0; }
.sv-poof.sv-go{ animation:svPoof .55s ease-out forwards; }
@keyframes svPoof{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.3)} 35%{opacity:1; transform:translate(-50%,-50%) scale(1.3)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.8)} }
.sv-fwParticle{ position:fixed; width:8px; height:8px; border-radius:50%; pointer-events:none; z-index:220; }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:210; overflow:hidden; }
.confetti-piece{ position:absolute; top:-14px; border-radius:2px; animation:svConfetti linear forwards; }
@keyframes svConfetti{ 0%{ transform:translateY(0) rotate(0); opacity:1 } 100%{ transform:translateY(110vh) rotate(720deg); opacity:.2 } }
.flourish{
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  font-size:68px; pointer-events:none; z-index:60; animation:svFlourish 1.1s ease-out forwards;
}
@keyframes svFlourish{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-30deg)} 30%{opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(8deg)} 100%{opacity:0; transform:translate(-50%,-140%) scale(1) rotate(0)} }
.sv-fsDim{ position:fixed; inset:0; background:rgba(8,4,20,.68); pointer-events:none; z-index:215; opacity:0; }
.sv-fsDim.sv-gold{ background:radial-gradient(circle at 50% 42%, rgba(255,201,60,.3), rgba(8,4,20,.8)); }
.sv-goldBorderPulse{ position:fixed; inset:0; pointer-events:none; z-index:216; opacity:0; box-shadow:inset 0 0 0 7px var(--gold), inset 0 0 60px rgba(255,201,60,.6); }
.sv-centerBanner{
  position:fixed; left:50%; top:46%; transform:translate(-50%,-50%);
  padding:14px 26px; border-radius:20px; background:rgba(20,12,45,.9); color:#fff;
  font-weight:900; font-size:21px; text-align:center; max-width:88vw;
  pointer-events:none; z-index:230; box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.sv-centerBanner.sv-big{ font-size:clamp(22px,5.6vw,38px); background:linear-gradient(135deg,rgba(108,92,231,.96),rgba(255,111,165,.96)); border:3px solid var(--gold); }
.sv-streakBadge{
  position:fixed; left:50%; top:calc(14px + var(--safe-t)); transform:translate(-50%,-140%);
  padding:10px 20px; border-radius:999px; color:#fff; font-weight:900; font-size:15px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:235; pointer-events:none;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1), opacity .3s; opacity:0; white-space:nowrap; max-width:92vw;
}
.sv-streakBadge.sv-show{ transform:translate(-50%,0); opacity:1; }

/* ---------- Decorations ---------- */
.dec-star{ position:absolute; border-radius:50%; background:#fff; animation:svTwinkle 3s ease-in-out infinite; }
.dec-planet{ position:absolute; right:8%; top:12%; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 34% 34%,#ffb3d9,#a0529c); opacity:.55; }
.dec-shootingstar{ position:absolute; left:-10%; width:70px; height:2px; background:linear-gradient(90deg,transparent,#fff); animation:svWind linear infinite; }
.dec-bubble{ position:absolute; bottom:-10px; border-radius:50%; background:rgba(255,255,255,.3); animation:svRise linear infinite; }
.dec-seaweed{ position:absolute; bottom:0; width:8px; border-radius:6px; background:#2f7a5a; animation:svSway 4s ease-in-out infinite; transform-origin:bottom center; }
.dec-lantern{ position:absolute; width:22px; height:30px; border-radius:40%; background:radial-gradient(circle at 40% 30%,#ffd2a0,#ff6b3d); box-shadow:0 0 18px rgba(255,138,61,.6); animation:svSway 3.6s ease-in-out infinite; }
.dec-floaticon{
  position:absolute; font-size:clamp(22px,4.4vw,34px); font-weight:900; color:rgba(255,255,255,.72);
  text-shadow:0 2px 6px rgba(0,0,0,.45); animation:critterIdle 4.5s ease-in-out infinite;
}
.dec-circuitline{ position:absolute; height:2px; background:rgba(124,231,255,.3); }
.dec-circuitdot{ position:absolute; width:6px; height:6px; border-radius:50%; background:#7CE7FF; box-shadow:0 0 9px #7CE7FF; animation:svTwinkle 2s ease-in-out infinite; }
.dec-crystal{ position:absolute; bottom:0; width:16px; height:40px; clip-path:polygon(50% 0,100% 100%,0 100%); opacity:.5; animation:svTwinkle 3.4s ease-in-out infinite; }
.dec-dust{ position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.6); animation:svRise linear infinite; }
.dec-cloud{ position:absolute; left:-20%; width:90px; height:30px; border-radius:999px; background:rgba(255,255,255,.35); animation:svWind linear infinite; }

/* ---------- Responsive ---------- */
@media (min-width:720px){
  .q-prompt{ font-size:24px; }
  .level-card, .story-card{ border-radius:22px; bottom:14px; margin:0 auto; width:calc(100% - 28px); }
  .choices{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 7. Sky filler: each stage gets layered backdrop art so the
   space between the HUD and the question card reads as a place, not a void.
   All CSS gradients - no extra requests, no extra DOM. ---------- */
.sv-stage::before{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  pointer-events:none; z-index:0; background-repeat:no-repeat;
}
/* rolling hills + clouds behind the bridge */
.sv-stageBridge::before{
  background-image:
    radial-gradient(60px 60px at 18% 20%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(84px 84px at 26% 23%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(56px 56px at 34% 21%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(52px 52px at 72% 13%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(70px 70px at 80% 15%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(130% 42% at 50% 100%, rgba(90,158,120,.55), transparent 62%),
    radial-gradient(90% 30% at 14% 100%, rgba(70,130,100,.5), transparent 62%);
}
/* sun rays + hills behind the village */
.sv-stageSocial::before{
  background-image:
    radial-gradient(70px 70px at 84% 12%, rgba(255,244,180,.95), transparent 68%),
    radial-gradient(58px 58px at 22% 18%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(78px 78px at 31% 21%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(120% 36% at 30% 100%, rgba(108,170,100,.55), transparent 64%),
    radial-gradient(110% 30% at 78% 100%, rgba(140,190,110,.5), transparent 64%);
}
/* distant peaks behind the climb */
.sv-stageMountain::before{
  background-image:
    radial-gradient(44px 44px at 78% 14%, rgba(255,246,216,.9), transparent 68%),
    linear-gradient(140deg, transparent 56%, rgba(60,46,92,.6) 56.5%),
    linear-gradient(-140deg, transparent 56%, rgba(78,60,112,.55) 56.5%);
  background-size:auto, 60% 60%, 60% 60%;
  background-position:0 0, left 76%, right 76%;
}
/* light shafts + a distant trench floor under the sub */
.sv-stageSub::before{
  background-image:
    linear-gradient(170deg, rgba(190,235,255,.22) 0 10px, transparent 10px 46px),
    radial-gradient(140% 26% at 50% 100%, rgba(3,22,38,.85), transparent 70%);
}
/* nebula + distant planet in the portal world */
.sv-stageLanguages::before{
  background-image:
    radial-gradient(180px 120px at 22% 24%, rgba(168,85,247,.35), transparent 70%),
    radial-gradient(150px 110px at 78% 16%, rgba(79,214,196,.28), transparent 70%),
    radial-gradient(42px 42px at 86% 30%, rgba(255,211,77,.8), transparent 70%);
}
/* factory skyline behind the robot bay */
.sv-stageRobots::before{
  background-image:
    linear-gradient(90deg, rgba(26,33,50,.75) 0 42px, transparent 42px 78px, rgba(26,33,50,.6) 78px 136px, transparent 136px 190px, rgba(26,33,50,.7) 190px 246px, transparent 246px 300px);
  background-size:300px 34%;
  background-position:left 62%;
  background-repeat:repeat-x;
}
/* layered cloud banks for the balloon ride */
.sv-stageWeather::before{
  background-image:
    radial-gradient(92px 46px at 20% 22%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(120px 54px at 72% 14%, rgba(255,255,255,.5), transparent 72%),
    radial-gradient(150% 30% at 50% 100%, rgba(60,80,120,.55), transparent 66%);
}
/* soft tissue glow around the cell */
.sv-stageBody::before{
  background-image:
    radial-gradient(240px 240px at 22% 24%, rgba(255,140,180,.2), transparent 70%),
    radial-gradient(200px 200px at 80% 18%, rgba(255,110,150,.18), transparent 70%);
}
/* festival skyline + glow */
.sv-stageCulture::before{
  background-image:
    radial-gradient(180px 120px at 50% 90%, rgba(255,211,77,.3), transparent 70%),
    linear-gradient(90deg, rgba(42,16,56,.6) 0 50px, transparent 50px 110px, rgba(42,16,56,.5) 110px 170px, transparent 170px 240px);
  background-size:auto, 240px 30%;
  background-position:0 0, left 68%;
  background-repeat:no-repeat, repeat-x;
}
/* rooftops under the lanterns */
.sv-stageChinese::before{
  background-image:
    linear-gradient(90deg, transparent 0 10px, rgba(20,10,40,.72) 10px 120px, transparent 120px 150px);
  background-size:150px 16%;
  background-position:left 78%;
  background-repeat:repeat-x;
}
/* launch complex + horizon haze */
.sv-stageRockets::before{
  background-image:
    radial-gradient(60px 60px at 15% 16%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(90px 40px at 23% 18%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(150% 24% at 50% 100%, rgba(10,30,54,.8), transparent 70%);
}
/* crystal cavern haze */
.sv-stageMountain::after, .sv-stageSub::after{ }

/* Floating subject icons need dark ink on the light-sky stages. */
.sv-stageBridge .dec-floaticon,
.sv-stageSocial .dec-floaticon,
.sv-stageWeather .dec-floaticon{
  color:rgba(32,48,96,.34); text-shadow:0 1px 0 rgba(255,255,255,.6);
}