:root{--bg:#08101d;--panel:#131d30;--line:#2b3958;--txt:#f8faff;--mut:#aeb8d1;--gold:#ffd24b;--good:#55d98a;--bad:#ff6875;--blue:#78a9ff}
*{box-sizing:border-box}body{margin:0;background:#050913;color:var(--txt);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
button,input,select{font:inherit}.app{max-width:520px;margin:auto;min-height:100vh;background:linear-gradient(#101829,#09101d)}
header{height:58px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #202c46;background:#0c1424;position:sticky;top:0;z-index:10}.brand{font-weight:950}.grow{flex:1}
.screen{display:none;padding:13px}.screen.on{display:block}.card{background:var(--panel);border:1px solid #283653;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 12px 30px #0004}
h1,h2,h3{margin:0 0 9px}p{margin:0 0 10px}.mut{font-size:13px;color:var(--mut)}.chip{font-size:11px;font-weight:850;padding:5px 8px;border-radius:999px;background:#263551}.badge{background:var(--gold);color:#141414}
.btn{border:0;border-radius:13px;padding:11px 13px;font-weight:850;cursor:pointer;transition:transform .12s cubic-bezier(.3,.7,.4,1),filter .12s ease,box-shadow .12s ease}.btn:active:not(:disabled){transform:scale(.955);filter:brightness(.94)}.btn:disabled{cursor:not-allowed}.primary{background:var(--gold);color:#151515}.secondary{background:#263552;color:#fff}.ghost{background:transparent;color:#fff;border:1px solid #3a4b70}.small{padding:8px 10px;font-size:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(hover:hover){.btn:not(:disabled):hover{filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.btn{transition:filter .12s ease}.btn:active:not(:disabled){transform:none}}
input{width:100%;padding:11px;border-radius:12px;border:1px solid #3a4b70;background:#0e1628;color:#fff}.battle{height:228px;border-radius:19px;border:1px solid #31415e;background:radial-gradient(circle at 50% 17%,#42587e,#1a2944 43%,#101727 100%);position:relative;overflow:hidden;margin-bottom:11px}
.sky{position:absolute;top:9px;left:10px;right:10px;padding:7px 9px;border-radius:11px;background:#09101ebb;font-size:11px;z-index:2}.bar{height:6px;border-radius:99px;background:#2a3550;overflow:hidden;margin-top:5px}.bar span{display:block;height:100%;background:var(--gold)}
.ground{position:absolute;left:0;right:0;bottom:0;height:45px;background:#15243a}.unit{position:absolute;bottom:34px;width:126px;text-align:center;min-height:142px}.hero{left:4px}.enemy{right:4px}.sprite{position:relative;height:112px;font-size:72px;line-height:112px;filter:drop-shadow(0 7px 6px #0007);z-index:2;animation:idleBob 2.6s ease-in-out infinite}.hero .sprite{height:118px;line-height:118px;animation:idleBobHero 2.8s ease-in-out infinite}.nm{font-weight:900;font-size:12px}.hp{height:8px;border-radius:99px;background:#4e2734;overflow:hidden;margin:4px 10px}.hp span{display:block;height:100%;background:var(--good)}
.hero-frame{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:118px;width:auto;max-width:none;object-fit:contain;opacity:0;transition:opacity .06s;pointer-events:none}.hero-frame-idle{opacity:1}.hero-frame-attack{height:122px;bottom:-2px;left:82%}.unit#hero.attacking .hero-frame-idle{opacity:0}.unit#hero.attacking .hero-frame-attack{opacity:1}
/* The Chibi pack reads bigger than the base Wira art at the same --pa-hero-h,
   crowding the arena. Scaling the individual .hero-frame images (tried
   first) left #heroVisual's own box at full size, which the finisher
   cinematic measures via getBoundingClientRect() to size .cinematicHero —
   so the finisher portrait rendered at full scale while everything else
   was smaller. Scaling #hero itself instead shrinks the whole box (images,
   canvas-read geometry, and anything measuring #heroVisual) consistently.
   #hero itself never carries an animation (only its child .sprite does),
   so this transform never gets clobbered by one; transform-origin keeps
   feet grounded at #hero's own bottom edge. */
body.hero-wirachibi #game #hero{transform:scale(.85);transform-origin:50% 100%}
@keyframes idleBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes idleBobHero{0%,100%{transform:translateY(0) rotate(0deg) scaleX(1)}48%{transform:translateY(-6px) rotate(-1.5deg) scaleX(1.01)}}
.unit#hero.attacking .sprite{animation:lungeRight .45s cubic-bezier(.3,0,.4,1)}.unit#enemy.attacking .sprite{animation:lungeLeft .45s cubic-bezier(.3,0,.4,1)}
@keyframes lungeRight{0%{transform:translateX(0) scale(1)}35%{transform:translateX(-8px) scale(.96)}55%,75%{transform:translateX(34px) scale(1.08)}100%{transform:translateX(0) scale(1)}}
@keyframes lungeLeft{0%{transform:translateX(0) scale(1)}35%{transform:translateX(8px) scale(.96)}55%,75%{transform:translateX(-34px) scale(1.08)}100%{transform:translateX(0) scale(1)}}
.unit.hit .sprite{animation:hitPunch .45s cubic-bezier(.2,0,.3,1)}
@keyframes hitPunch{0%{transform:translateX(0) scale(1);filter:drop-shadow(0 7px 6px #0007) brightness(1)}8%{transform:translateX(0) scale(1.22,.78);filter:drop-shadow(0 7px 6px #0007) brightness(3.2) saturate(0)}24%{transform:translateX(22px) scale(.86,1.14) rotate(9deg);filter:drop-shadow(0 7px 6px #0007) brightness(1.6)}45%{transform:translateX(-13px) scale(1.05) rotate(-5deg)}65%{transform:translateX(6px) scale(1) rotate(2deg)}100%{transform:translateX(0) scale(1) rotate(0);filter:drop-shadow(0 7px 6px #0007) brightness(1)}}
.impact-flash{position:absolute;inset:20px -20px -8px;border-radius:50%;background:radial-gradient(circle,rgba(230,250,255,.95) 0%,rgba(120,210,255,.55) 40%,rgba(255,255,255,0) 70%);opacity:0;pointer-events:none;z-index:3}.unit.tint-red .impact-flash{background:radial-gradient(circle,rgba(255,235,230,.95) 0%,rgba(255,90,90,.6) 40%,rgba(255,255,255,0) 70%)}.unit.hit .impact-flash{animation:flashPop .4s ease-out}@keyframes flashPop{0%{opacity:1;transform:scale(.25)}50%{opacity:.9}100%{opacity:0;transform:scale(1.7)}}
.impact-slash{position:absolute;inset:28px -22px 0;pointer-events:none;z-index:4}.impact-slash:before,.impact-slash:after{content:"";position:absolute;left:-4%;right:-4%;top:50%;height:6px;background:linear-gradient(90deg,transparent,#eaffff 15%,#4fc3f7 50%,#eaffff 85%,transparent);transform:translateY(-50%) rotate(-22deg) scaleX(0);opacity:0;transform-origin:center;box-shadow:0 0 14px 2px #cdf3ff,0 0 26px 6px #4fc3f7}.impact-slash:after{top:60%}.unit.tint-red .impact-slash:before,.unit.tint-red .impact-slash:after{background:linear-gradient(90deg,transparent,#ffe3e3 15%,#ff4d5e 50%,#ffe3e3 85%,transparent);box-shadow:0 0 14px 2px #ffdada,0 0 26px 6px #ff4d5e}.unit.hit .impact-slash:before{animation:slashA .38s cubic-bezier(.2,.8,.3,1)}.unit.hit .impact-slash:after{animation:slashB .38s cubic-bezier(.2,.8,.3,1) .05s}@keyframes slashA{0%{transform:translateY(-50%) rotate(-22deg) scaleX(0);opacity:0}18%{opacity:1}58%{transform:translateY(-50%) rotate(-22deg) scaleX(1);opacity:1}100%{transform:translateY(-50%) rotate(-22deg) scaleX(1);opacity:0}}@keyframes slashB{0%{transform:translateY(-50%) rotate(22deg) scaleX(0);opacity:0}18%{opacity:1}58%{transform:translateY(-50%) rotate(22deg) scaleX(1);opacity:1}100%{transform:translateY(-50%) rotate(22deg) scaleX(1);opacity:0}}
.impact-burst{position:absolute;top:64%;left:50%;font-size:40px;line-height:1;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:5;filter:drop-shadow(0 0 8px #7dd8ff)}.unit.tint-red .impact-burst{filter:drop-shadow(0 0 8px #ff5a5a)}.unit.hit .impact-burst{animation:burstPop .45s cubic-bezier(.2,.9,.3,1)}@keyframes burstPop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-15deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.5) rotate(8deg);opacity:1}55%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.finisher-ice{position:absolute;top:44%;left:50%;height:145px;width:auto;transform:translate(-50%,-260px) scale(.4) rotate(-8deg);opacity:0;pointer-events:none;z-index:6;filter:drop-shadow(0 0 14px #7dd8ff)}.unit.hit.finisher .finisher-ice{animation:iceFall .78s cubic-bezier(.5,0,.65,1)}@keyframes iceFall{0%{transform:translate(-50%,-280px) scale(.35) rotate(-10deg);opacity:0}30%{opacity:1}58%{transform:translate(-50%,-6px) scale(1.05) rotate(2deg);opacity:1}68%{transform:translate(-50%,6px) scale(1.35);opacity:1}82%{transform:translate(-50%,2px) scale(1.4);opacity:1}100%{transform:translate(-50%,2px) scale(1.5);opacity:0}}
.unit.hit.finisher .sprite{animation:hitPunchBig .65s cubic-bezier(.2,0,.3,1)}@keyframes hitPunchBig{0%{transform:translateX(0) scale(1);filter:brightness(1)}8%{transform:translateX(0) scale(1.35,.68);filter:brightness(4) saturate(0)}26%{transform:translateX(30px) scale(.8,1.2) rotate(14deg);filter:brightness(1.9)}50%{transform:translateX(-18px) scale(1.08) rotate(-8deg)}72%{transform:translateX(8px) rotate(3deg)}100%{transform:translateX(0) scale(1) rotate(0);filter:brightness(1)}}
.battle.shake{animation:arenaShake .46s}.battle.finisher-shake{animation:arenaShakeBig .65s}@keyframes arenaShake{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}@keyframes arenaShakeBig{0%,100%{transform:translate(0)}12%{transform:translate(-7px,3px)}24%{transform:translate(8px,-3px)}38%{transform:translate(-7px,-3px)}52%{transform:translate(7px,3px)}68%{transform:translate(-4px,2px)}82%{transform:translate(3px,-1px)}}
.mathFinisherAura{position:absolute;left:68px;bottom:5px;width:215px;height:auto;max-width:none;transform:translateX(-50%) scale(.3,.2) rotate(-10deg);transform-origin:50% 50%;opacity:0;visibility:hidden;pointer-events:none;z-index:1;filter:drop-shadow(0 0 7px rgba(96,222,255,.8));mix-blend-mode:screen}.mathFinisherAura.active{visibility:visible;animation:mathAuraCharge .76s cubic-bezier(.16,.72,.22,1) both}.mathFinisherAura[data-aura="operations"]{filter:drop-shadow(0 0 8px rgba(255,206,68,.86))}.mathFinisherAura[data-aura="fractions"]{filter:drop-shadow(0 0 8px rgba(167,105,255,.85))}.mathFinisherAura[data-aura="data"]{filter:drop-shadow(0 0 8px rgba(255,96,230,.76))}@keyframes mathAuraCharge{0%{opacity:0;transform:translateX(-50%) scale(.25,.17) rotate(-16deg);filter:brightness(.7)}18%{opacity:.82;transform:translateX(-50%) scale(.72,.46) rotate(-7deg);filter:brightness(1.15)}48%{opacity:1;transform:translateX(-50%) scale(1,.62) rotate(0);filter:brightness(1.45)}72%{opacity:.95;transform:translateX(-50%) scale(1.08,.67) rotate(5deg);filter:brightness(1.7)}100%{opacity:0;transform:translateX(-50%) scale(1.2,.72) rotate(10deg);filter:brightness(2)}}@media (orientation:landscape) and (max-height:650px){.mathFinisherAura{left:clamp(48px,8vw,92px);bottom:1px;width:180px}}@media (prefers-reduced-motion:reduce){.mathFinisherAura.active{animation:mathAuraReduced .76s ease-out both}@keyframes mathAuraReduced{0%,100%{opacity:0}20%,72%{opacity:.9;transform:translateX(-50%) scale(1,.62)}}}
.arena-flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0}.arena-flash.pulse-ice{animation:arenaPulseIce .36s}.arena-flash.pulse-red{animation:arenaPulseRed .36s}@keyframes arenaPulseIce{0%{opacity:.58;background:#dff7ff}100%{opacity:0;background:transparent}}@keyframes arenaPulseRed{0%{opacity:.52;background:#ffdadf}100%{opacity:0;background:transparent}}
.qcard{background:#f7f9ff;color:#11192a;border-radius:19px;padding:15px}.qmeta{display:flex;font-size:11px;color:#6d7690}.question{font-size:27px;font-weight:950;min-height:84px;text-align:center;display:grid;place-items:center;padding:7px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}.ans{border:2px solid transparent;border-radius:14px;background:#e7edff;color:#11192a;padding:14px 5px;font-weight:950;font-size:19px}.ans.ok{background:#ddf9e9;border-color:#30b972}.ans.no{background:#ffe3e6;border-color:#e45260}.feedback{min-height:58px;padding-top:9px;font-size:13px;font-weight:750;color:#3d4862}
.bottom{position:sticky;bottom:0;display:flex;justify-content:space-around;padding:8px;background:#0c1424;border-top:1px solid #202c46}.tabs{display:flex;gap:6px;overflow:auto;margin-bottom:9px}.tabs button{white-space:nowrap}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:#0f1728;padding:10px;border-radius:12px;text-align:center;font-size:11px;color:var(--mut)}.stat b{display:block;color:#fff;font-size:19px}
.skill{padding:9px 0;border-bottom:1px solid #283550}.meter{height:7px;border-radius:99px;background:#28344d;overflow:hidden;margin:5px 0}.meter span{display:block;height:100%;background:var(--blue)}.notice{padding:10px;border-left:4px solid var(--gold);background:#302b17;border-radius:10px;font-size:12px}.focus{outline:2px solid var(--gold);border-radius:12px;padding:9px}.weak{color:#ffb1b7}.good{color:#7ce7a6}.hidden{display:none!important}
.parentSummary>p{line-height:1.45}.parentInsight{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:13px}.parentInsight b{display:block;margin-bottom:6px;color:#fff}.parentInsight ul{margin:0;padding-left:19px}.parentInsight li+li{margin-top:5px}.parentInsight p,.parentInsight small{display:block;margin:0;color:var(--mut);line-height:1.4}.parentInsight.attention{background:#302b17;border-left:4px solid var(--gold)}.parentInsight.positive{background:#122c27;border-left:4px solid #54d6a0}
.parentJourney{position:relative;min-height:210px;overflow:hidden;padding:22px 44% 22px 18px;background:radial-gradient(circle at 86% 46%,#1f6382 0,#173653 24%,transparent 55%),linear-gradient(135deg,#152b48,#0b172b);border-color:#36749a}.parentJourney:after{content:"";position:absolute;inset:auto -8% -55% 24%;height:180px;background:radial-gradient(ellipse,#56d8dd26,transparent 67%);pointer-events:none}.parentJourneyCopy{position:relative;z-index:2}.parentJourney h2{font-size:24px;line-height:1.08;margin:5px 0 10px;color:#fff}.parentJourney p{font-size:13px;line-height:1.5;color:#c3d4e9;margin:0}.parentJourney>img{position:absolute;z-index:1;right:-2%;bottom:-12%;width:47%;height:116%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 16px #0008)}
.parentStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.parentStats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:11px 10px;border:1px solid #30476b;border-radius:15px;background:linear-gradient(145deg,#182b47,#101b30)}.parentStats span{grid-row:1/3;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#223c60;color:#ffe07a}.parentStats b{font-size:17px;line-height:1}.parentStats small{font-size:9px;color:#9fb0c9;margin-top:3px}
.powerSection{padding:15px}.parentSectionHead{margin:0 0 12px}.parentSectionHead h3{margin:2px 0 0}.parentLegend{font-size:9px;color:#8fa4c1;text-align:right}.powerList{display:grid;gap:9px}.powerCard{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid #2d4261;border-radius:15px;background:#101d31}.powerSeal{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#283c5d,#17243a 68%);border:2px solid #475775;color:#8290a7;box-shadow:inset 0 0 0 3px #111c2e}.powerSeal span{font-weight:1000}.powerCard.level-1 .powerSeal{border-color:#d78855;color:#ffd0a3;background:radial-gradient(circle,#71412b,#31251f 68%)}.powerCard.level-2 .powerSeal{border-color:#6dbbea;color:#d6f2ff;background:radial-gradient(circle,#23577a,#172b45 68%)}.powerCard.level-3 .powerSeal{border-color:#f0c34d;color:#fff2a8;background:radial-gradient(circle,#8a6a1a,#403516 68%);box-shadow:0 0 16px #ffd25c45,inset 0 0 0 3px #2f2813}.powerCopy{min-width:0;flex:1}.powerTitle{display:flex;align-items:center;justify-content:space-between;gap:8px}.powerTitle b{font-size:14px}.powerStars{white-space:nowrap;letter-spacing:1px}.powerStars i{font-style:normal;color:#3b4961;text-shadow:none}.powerStars i.lit{color:#ffd34f;text-shadow:0 0 8px #f6b83d66}.powerCopy>small{display:block;color:#6fd8b2;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}.level-1 .powerCopy>small{color:#ffb984}.level-0 .powerCopy>small{color:#8899b2}.powerCopy p{margin:5px 0 0;color:#aebdd2;font-size:11px;line-height:1.4}.parentEmpty{text-align:center;padding:24px 12px;color:#9babc3}.parentEmpty span{display:block;font-size:30px;color:#496987}.parentEmpty b{display:block;color:#dce8f8;margin:5px}.parentEmpty p{font-size:11px;margin:0}
.nextMission{position:relative;display:flex;gap:12px;align-items:center;padding:16px;border-color:#80672b;background:linear-gradient(135deg,#2f2a19,#171b27 56%)}.missionRune{flex:0 0 52px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle,#ffe074,#b76c15);color:#fff7d0;font-size:29px;box-shadow:0 0 20px #e9aa3740}.nextMissionCopy{min-width:0;flex:1}.nextMission h3{margin:2px 0 4px;color:#fff1bd}.nextMission p{margin:0;color:#c9c0a7;font-size:11px;line-height:1.4}.coachAction{display:flex;gap:8px;align-items:center;margin-top:9px;padding:8px;border-radius:11px;background:#0f1927a8}.coachAction img{width:37px;height:37px;object-fit:contain;object-position:center top;border-radius:9px;background:#18354f}.coachAction span{font-size:10px;color:#aebed1;line-height:1.35}.coachAction b{display:block;color:#78d9df;font-size:9px;text-transform:uppercase;letter-spacing:.05em}.nextMission>.btn{flex:0 0 auto}.parentEmpty+.nextMission{margin-top:10px}.skillParentCopy{min-width:0}.skillParentCopy b{display:block}.skill .powerStars{font-size:11px}.tabs button[data-parent-tab].active{background:#2679d7;color:#fff;box-shadow:0 5px 16px #1675d442}
@media(max-width:430px){.parentJourney{min-height:194px;padding:18px 40% 18px 15px}.parentJourney>img{right:-8%;width:52%;height:108%}.parentJourney h2{font-size:20px}.parentJourney p{font-size:11px}.parentStats>div{grid-template-columns:1fr;text-align:center;padding:9px 4px}.parentStats span{display:none}.parentStats b{font-size:15px}.parentLegend{display:none}.powerCard{padding:10px 9px}.powerSeal{flex-basis:40px;width:40px;height:40px}.powerTitle{align-items:flex-start}.nextMission{align-items:flex-start;flex-wrap:wrap}.missionRune{flex-basis:44px;width:44px;height:44px}.nextMissionCopy{width:calc(100% - 56px)}.nextMission>.btn{width:100%}}
@media(min-width:760px){#summaryTab{display:grid;grid-template-columns:1.08fr .92fr;gap:12px}#summaryTab>.parentJourney,#summaryTab>.parentStats{grid-column:1/-1}.parentStats{margin:0}.powerSection,.nextMission{margin:0}.parentJourney{min-height:235px;padding-right:38%}.parentJourney>img{width:38%;right:3%}}
@keyframes atkR{50%{transform:translateX(42px)}}@keyframes atkL{50%{transform:translateX(-42px)}}@keyframes hit{50%{transform:translateX(7px);filter:brightness(2)}}.atkR{animation:atkR .35s}.atkL{animation:atkL .35s}.hit{animation:hit .35s}

.heroPickWrap{margin-top:14px}.heroGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.heroPick{background:#111b2d;border:1px solid #31415e;border-radius:18px;padding:10px;display:flex;gap:10px;align-items:center;color:#fff;text-align:left;cursor:pointer}.heroPick img{width:72px;height:72px;object-fit:cover;border-radius:14px;background:#243754}.heroPick.active{outline:2px solid #ffd248;border-color:#ffd248;box-shadow:0 0 0 3px rgba(255,210,72,.15)}.heroMeta{display:flex;flex-direction:column;gap:2px}.heroMeta span{font-size:12px;color:#c6d3ef}.unit.tint-bloom .impact-flash{background:radial-gradient(circle,rgba(255,245,210,.98) 0%,rgba(255,198,230,.70) 34%,rgba(164,255,182,.48) 58%,rgba(255,255,255,0) 76%)}.unit.tint-bloom .impact-burst{filter:drop-shadow(0 0 8px #ffd16d)}.unit.tint-bloom .impact-slash:before,.unit.tint-bloom .impact-slash:after{background:linear-gradient(90deg,transparent,#fff5ca 15%,#ffd86d 45%,#95ffac 70%,transparent);box-shadow:0 0 14px 2px #fff0bc,0 0 26px 6px #8bffb4}25%{opacity:1}58%{transform:translate(-50%,-6px) scale(1.02);opacity:1}68%{transform:translate(-50%,6px) scale(1.20);opacity:1}84%{transform:translate(-50%,2px) scale(1.28);opacity:1}100%{transform:translate(-50%,2px) scale(1.36);opacity:0}}.arena-flash.pulse-bloom{animation:arenaBloom .38s ease-out}@keyframes arenaBloom{0%{opacity:0;background:#ffd45f}10%{opacity:.6;background:#ffd45f}55%{opacity:.35;background:#b4ffb7}100%{opacity:0;background:#ffd45f}}



/* Animation-only transplant from the original MathGame build. */
#hero .sprite,#enemy .sprite{
  position:relative;z-index:1;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.5));
  animation:mg-idle-bob 2.6s ease-in-out infinite;
}
#hero .sprite{height:104px;width:130px;margin:0 auto;animation:mg-idle-bob-hero 2.8s ease-in-out infinite}
#enemy .sprite{height:104px;line-height:104px}
.hero-frame{position:absolute;top:0;left:50%;bottom:auto;transform:translateX(-50%);height:92px;width:auto;max-width:none;object-fit:contain;opacity:0;transition:opacity .06s;pointer-events:none}
.hero-frame-idle{opacity:1}
.hero-frame-attack{height:104px;top:-6px;left:50%;bottom:auto}
#hero.attacking .hero-frame-idle{opacity:0}
#hero.attacking .hero-frame-attack{opacity:1}

@keyframes mg-idle-bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(2deg)}
}
@keyframes mg-idle-bob-hero{
  0%,100%{transform:translateY(0) rotate(0deg) scaleX(1)}
  48%{transform:translateY(-6px) rotate(-1.5deg) scaleX(1.01)}
}
#hero.attacking .sprite{animation:mg-lunge-right .45s cubic-bezier(.3,0,.4,1)}
#enemy.attacking .sprite{animation:mg-lunge-left .45s cubic-bezier(.3,0,.4,1)}
@keyframes mg-lunge-right{
  0%{transform:translateX(0) scale(1)}
  35%{transform:translateX(-8px) scale(.96)}
  55%{transform:translateX(34px) scale(1.08)}
  75%{transform:translateX(34px) scale(1.08)}
  100%{transform:translateX(0) scale(1)}
}
@keyframes mg-lunge-left{
  0%{transform:translateX(0) scale(1)}
  35%{transform:translateX(8px) scale(.96)}
  55%{transform:translateX(-34px) scale(1.08)}
  75%{transform:translateX(-34px) scale(1.08)}
  100%{transform:translateX(0) scale(1)}
}
.unit.hit .sprite{animation:mg-hitpunch .45s cubic-bezier(.2,0,.3,1)}
@keyframes mg-hitpunch{
  0%{transform:translateX(0) scale(1);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1)}
  8%{transform:translateX(0) scale(1.22,.78);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(3.2) saturate(0)}
  24%{transform:translateX(22px) scale(.86,1.14) rotate(9deg);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1.6)}
  45%{transform:translateX(-13px) scale(1.05) rotate(-5deg)}
  65%{transform:translateX(6px) scale(1) rotate(2deg)}
  100%{transform:translateX(0) scale(1) rotate(0);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1)}
}
.impact-flash{position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(230,250,255,.95) 0%,rgba(120,210,255,.55) 40%,rgba(255,255,255,0) 70%);opacity:0;pointer-events:none;z-index:3}
.unit.hit .impact-flash{animation:mg-flashpop .4s ease-out}
.unit.hit.tint-red .impact-flash{background:radial-gradient(circle,rgba(255,235,230,.95) 0%,rgba(255,90,90,.6) 40%,rgba(255,255,255,0) 70%)}
@keyframes mg-flashpop{0%{opacity:1;transform:scale(.25)}50%{opacity:.9}100%{opacity:0;transform:scale(1.7)}}
.impact-burst{position:absolute;top:50%;left:50%;font-size:40px;line-height:1;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:5;filter:drop-shadow(0 0 8px #7dd8ff)}
.unit.tint-red .impact-burst{filter:drop-shadow(0 0 8px #ff5a5a)}
.unit.hit .impact-burst{animation:mg-burstpop .45s cubic-bezier(.2,.9,.3,1)}
@keyframes mg-burstpop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-15deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.5) rotate(8deg);opacity:1}55%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.impact-slash{position:absolute;inset:-22px;pointer-events:none;z-index:4}
.impact-slash:before,.impact-slash:after{content:"";position:absolute;left:-4%;right:-4%;top:50%;height:6px;background:linear-gradient(90deg,transparent,#eaffff 15%,#4fc3f7 50%,#eaffff 85%,transparent);transform:translateY(-50%) rotate(-22deg) scaleX(0);opacity:0;transform-origin:center;box-shadow:0 0 14px 2px #cdf3ff,0 0 26px 6px #4fc3f7}
.impact-slash:after{top:60%}
.unit.tint-red .impact-slash:before,.unit.tint-red .impact-slash:after{background:linear-gradient(90deg,transparent,#ffe3e3 15%,#ff4d5e 50%,#ffe3e3 85%,transparent);box-shadow:0 0 14px 2px #ffdada,0 0 26px 6px #ff4d5e}
.unit.hit .impact-slash:before{animation:mg-slash-a .38s cubic-bezier(.2,.8,.3,1)}
.unit.hit .impact-slash:after{animation:mg-slash-b .38s cubic-bezier(.2,.8,.3,1) .05s}
@keyframes mg-slash-a{0%{transform:translateY(-50%) rotate(-22deg) scaleX(0);opacity:0}20%{opacity:1}55%{transform:translateY(-50%) rotate(-22deg) scaleX(1);opacity:1}100%{transform:translateY(-50%) rotate(-22deg) scaleX(1);opacity:0}}
@keyframes mg-slash-b{0%{transform:translateY(-50%) rotate(22deg) scaleX(0);opacity:0}20%{opacity:1}55%{transform:translateY(-50%) rotate(22deg) scaleX(1);opacity:1}100%{transform:translateY(-50%) rotate(22deg) scaleX(1);opacity:0}}

.unit.hit.finisher .impact-flash{animation:mg-flashpop-big .65s ease-out}
@keyframes mg-flashpop-big{0%{opacity:1;transform:scale(.2)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.unit.hit.finisher .impact-slash:before,.unit.hit.finisher .impact-slash:after{height:10px}
.unit.hit.finisher .impact-slash:before{animation:mg-slash-a-big .5s cubic-bezier(.2,.8,.3,1)}
.unit.hit.finisher .impact-slash:after{animation:mg-slash-b-big .5s cubic-bezier(.2,.8,.3,1) .06s}
@keyframes mg-slash-a-big{0%{transform:translateY(-50%) rotate(-26deg) scaleX(0);opacity:0}18%{opacity:1}55%{transform:translateY(-50%) rotate(-26deg) scaleX(1.25);opacity:1}100%{transform:translateY(-50%) rotate(-26deg) scaleX(1.25);opacity:0}}
@keyframes mg-slash-b-big{0%{transform:translateY(-50%) rotate(26deg) scaleX(0);opacity:0}18%{opacity:1}55%{transform:translateY(-50%) rotate(26deg) scaleX(1.25);opacity:1}100%{transform:translateY(-50%) rotate(26deg) scaleX(1.25);opacity:0}}
.unit.hit.finisher .impact-burst{display:none}
.finisher-ice{position:absolute;top:50%;left:50%;height:150px;width:auto;transform:translate(-50%,-260px) scale(.4) rotate(-8deg);opacity:0;pointer-events:none;z-index:6;filter:drop-shadow(0 0 14px #7dd8ff)}
.unit.hit.finisher .finisher-ice{animation:mg-ice-fall .78s cubic-bezier(.5,0,.65,1)}
@keyframes mg-ice-fall{0%{transform:translate(-50%,-280px) scale(.35) rotate(-10deg);opacity:0}30%{opacity:1}58%{transform:translate(-50%,-6px) scale(1.05) rotate(2deg);opacity:1}68%{transform:translate(-50%,6px) scale(1.35);opacity:1}82%{transform:translate(-50%,2px) scale(1.4);opacity:1}100%{transform:translate(-50%,2px) scale(1.5);opacity:0}}
.unit.hit.finisher .sprite{animation:mg-hitpunch-big .65s cubic-bezier(.2,0,.3,1)}
@keyframes mg-hitpunch-big{0%{transform:translateX(0) scale(1);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1)}8%{transform:translateX(0) scale(1.35,.68);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(4) saturate(0)}26%{transform:translateX(30px) scale(.8,1.2) rotate(14deg);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1.9)}50%{transform:translateX(-18px) scale(1.08) rotate(-8deg)}72%{transform:translateX(8px) scale(1) rotate(3deg)}100%{transform:translateX(0) scale(1) rotate(0);filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) brightness(1)}}

.battle.shake{animation:mg-arenashake .45s}
@keyframes mg-arenashake{0%,100%{transform:translateX(0) translateY(0)}12%{transform:translateX(-16px) translateY(3px) rotate(-1deg)}26%{transform:translateX(13px) rotate(1deg)}40%{transform:translateX(-11px)}54%{transform:translateX(9px)}68%{transform:translateX(-6px)}82%{transform:translateX(3px)}}
.battle.finisher-shake{animation:mg-arenashake-big .65s}
@keyframes mg-arenashake-big{0%,100%{transform:translateX(0) translateY(0) scale(1)}10%{transform:translateX(-22px) translateY(4px) scale(1.02) rotate(-1.4deg)}24%{transform:translateX(19px) scale(1.02) rotate(1.4deg)}38%{transform:translateX(-15px)}52%{transform:translateX(12px)}66%{transform:translateX(-8px)}80%{transform:translateX(4px)}}
.arena-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8;mix-blend-mode:screen}
.arena-flash.pulse-ice{animation:mg-arena-ice .35s ease-out}
.arena-flash.pulse-red{animation:mg-arena-red .35s ease-out}
@keyframes mg-arena-ice{0%{opacity:0;background:#7dd8ff}10%{opacity:.55;background:#7dd8ff}100%{opacity:0;background:#7dd8ff}}
@keyframes mg-arena-red{0%{opacity:0;background:#ff3344}10%{opacity:.55;background:#ff3344}100%{opacity:0;background:#ff3344}}



/* BUNGA FINAL BLOW V2 — grounded thorn-root parallax */
.finisher-bloom{
  position:absolute;
  left:-55%;
  bottom:-8px;
  top:auto;
  width:255%;
  height:auto;
  max-width:none;
  transform-origin:18% 88%;
  transform:translateX(-10%) translateY(52px) scaleX(.28) scaleY(.48) rotate(-3deg);
  opacity:0;
  pointer-events:none;
  z-index:6;
  filter:
    drop-shadow(0 0 9px rgba(255,213,92,.72))
    drop-shadow(0 0 16px rgba(118,236,135,.52));
  mix-blend-mode:screen;
}

.unit.hit.finisher.tint-bloom .finisher-bloom{
  animation:bunga-root-finisher 1.02s cubic-bezier(.18,.72,.18,1) both;
}

@keyframes bunga-root-finisher{
  0%{
    opacity:0;
    transform:translateX(-12%) translateY(58px) scaleX(.22) scaleY(.35) rotate(-4deg);
    filter:brightness(.65) saturate(.8)
      drop-shadow(0 0 4px rgba(115,230,130,.3));
  }
  12%{
    opacity:.45;
    transform:translateX(-9%) translateY(33px) scaleX(.38) scaleY(.72) rotate(-2deg);
  }
  28%{
    opacity:.88;
    transform:translateX(-3%) translateY(10px) scaleX(.63) scaleY(.96) rotate(0deg);
    filter:brightness(1.15) saturate(1.15)
      drop-shadow(0 0 10px rgba(255,213,92,.7))
      drop-shadow(0 0 18px rgba(112,239,130,.5));
  }
  48%{
    opacity:1;
    transform:translateX(7%) translateY(0) scaleX(.88) scaleY(1.04) rotate(1deg);
  }
  64%{
    opacity:1;
    transform:translateX(18%) translateY(-2px) scaleX(1.08) scaleY(1.10) rotate(1deg);
    filter:brightness(1.45) saturate(1.3)
      drop-shadow(0 0 14px rgba(255,225,113,.95))
      drop-shadow(0 0 25px rgba(111,255,143,.68));
  }
  76%{
    opacity:.96;
    transform:translateX(24%) translateY(-1px) scaleX(1.16) scaleY(1.06) rotate(0deg);
  }
  100%{
    opacity:0;
    transform:translateX(31%) translateY(-2px) scaleX(1.23) scaleY(.98) rotate(0deg);
    filter:brightness(1.8) saturate(1.35)
      drop-shadow(0 0 16px rgba(255,232,135,.95));
  }
}

/* layered motion to make the roots feel like they pass through the enemy plane */
.unit.hit.finisher.tint-bloom::before,
.unit.hit.finisher.tint-bloom::after{
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  bottom:12px;
  height:46px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
}
.unit.hit.finisher.tint-bloom::before{
  z-index:2;
  background:
    radial-gradient(ellipse at 55% 75%,
      rgba(84,255,123,.34) 0%,
      rgba(255,215,91,.22) 38%,
      rgba(0,0,0,0) 72%);
  animation:bunga-ground-glow .8s ease-out both;
}
.unit.hit.finisher.tint-bloom::after{
  z-index:7;
  background:
    radial-gradient(ellipse at 55% 62%,
      rgba(255,244,190,.58) 0%,
      rgba(255,196,220,.28) 28%,
      rgba(0,0,0,0) 66%);
  animation:bunga-front-flash .44s ease-out .48s both;
}
@keyframes bunga-ground-glow{
  0%{opacity:0;transform:scaleX(.35) scaleY(.3)}
  24%{opacity:.8;transform:scaleX(.75) scaleY(.7)}
  62%{opacity:.9;transform:scaleX(1.16) scaleY(.95)}
  100%{opacity:0;transform:scaleX(1.35) scaleY(.7)}
}
@keyframes bunga-front-flash{
  0%{opacity:0;transform:scale(.25)}
  35%{opacity:1;transform:scale(.92)}
  100%{opacity:0;transform:scale(1.5)}
}

/* Bunga finisher should read as a ground strike, not falling from above */
.unit.hit.finisher.tint-bloom .impact-slash:before,
.unit.hit.finisher.tint-bloom .impact-slash:after{
  height:5px;
  top:61%;
  transform-origin:10% 50%;
}
.unit.hit.finisher.tint-bloom .impact-slash:before{
  animation:bunga-thorn-lash-a .48s cubic-bezier(.1,.75,.2,1) .32s both;
}
.unit.hit.finisher.tint-bloom .impact-slash:after{
  animation:bunga-thorn-lash-b .52s cubic-bezier(.1,.75,.2,1) .39s both;
}
@keyframes bunga-thorn-lash-a{
  0%{transform:translateY(-50%) rotate(-7deg) scaleX(.05);opacity:0}
  22%{opacity:1}
  66%{transform:translateY(-50%) rotate(-7deg) scaleX(1.22);opacity:1}
  100%{transform:translateY(-50%) rotate(-7deg) scaleX(1.32);opacity:0}
}
@keyframes bunga-thorn-lash-b{
  0%{transform:translateY(-50%) rotate(8deg) scaleX(.05);opacity:0}
  18%{opacity:.95}
  64%{transform:translateY(-50%) rotate(8deg) scaleX(1.16);opacity:1}
  100%{transform:translateY(-50%) rotate(8deg) scaleX(1.27);opacity:0}
}

.arena-flash.pulse-bloom{
  animation:bunga-arena-bloom .5s ease-out;
}
@keyframes bunga-arena-bloom{
  0%{opacity:0;background:#5dff83}
  12%{opacity:.30;background:#75ff93}
  52%{opacity:.42;background:#ffd85c}
  100%{opacity:0;background:#ffd85c}
}


/* v8 overrides */
select{width:100%;padding:11px;border-radius:12px;border:1px solid #3a4b70;background:#0e1628;color:#fff}
.question{font-size:26px;line-height:1.25}
.question svg,.question .vhtml{max-width:100%}
.heroPick img{object-fit:contain;background:#243754;padding:4px}
#hero .sprite{height:122px;width:150px}
#enemy .sprite{display:grid;place-items:center;height:112px;width:112px;margin-left:auto;background:transparent}
.finisher-bloom{position:absolute;left:-72%;bottom:-10px;top:auto;width:260%;height:auto;max-width:none;transform-origin:18% 88%;transform:translateX(-4%) translateY(58px) scaleX(.22) scaleY(.38) rotate(0deg);opacity:0;pointer-events:none;z-index:6;filter:drop-shadow(0 0 9px rgba(255,213,92,.72)) drop-shadow(0 0 16px rgba(118,236,135,.52));mix-blend-mode:screen}
.unit.hit.finisher.tint-bloom .finisher-bloom{animation:bunga-root-finisher 1.02s cubic-bezier(.18,.72,.18,1) both}
@keyframes bunga-root-finisher{0%{opacity:0;transform:translateX(-8%) translateY(60px) scaleX(.18) scaleY(.30)}16%{opacity:.55;transform:translateX(-2%) translateY(36px) scaleX(.34) scaleY(.56)}34%{opacity:.92;transform:translateX(6%) translateY(16px) scaleX(.54) scaleY(.82)}54%{opacity:1;transform:translateX(18%) translateY(4px) scaleX(.78) scaleY(.98)}70%{opacity:1;transform:translateX(28%) translateY(0px) scaleX(.98) scaleY(1.04)}100%{opacity:0;transform:translateX(34%) translateY(-1px) scaleX(1.08) scaleY(1.02)}}
.unit.hit.finisher.tint-bloom::before,.unit.hit.finisher.tint-bloom::after{content:"";position:absolute;left:-14px;right:-14px;bottom:12px;height:46px;border-radius:50%;pointer-events:none;opacity:0}
.unit.hit.finisher.tint-bloom::before{z-index:2;background:radial-gradient(ellipse at 58% 75%,rgba(84,255,123,.34) 0%,rgba(255,215,91,.22) 38%,rgba(0,0,0,0) 72%);animation:bunga-ground-glow .8s ease-out both}
.unit.hit.finisher.tint-bloom::after{z-index:7;background:radial-gradient(ellipse at 60% 62%,rgba(255,244,190,.58) 0%,rgba(255,196,220,.28) 28%,rgba(0,0,0,0) 66%);animation:bunga-front-flash .44s ease-out .48s both}
@keyframes bunga-ground-glow{0%{opacity:0;transform:scaleX(.35) scaleY(.3)}24%{opacity:.8;transform:scaleX(.75) scaleY(.7)}62%{opacity:.9;transform:scaleX(1.16) scaleY(.95)}100%{opacity:0;transform:scaleX(1.35) scaleY(.7)}}
@keyframes bunga-front-flash{0%{opacity:0;transform:scale(.25)}35%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(1.5)}}
.unit.hit.finisher.tint-bloom .impact-slash:before,.unit.hit.finisher.tint-bloom .impact-slash:after{height:5px;top:61%;transform-origin:10% 50%;background:linear-gradient(90deg,transparent,#fff5ca 15%,#ffd86d 45%,#95ffac 70%,transparent);box-shadow:0 0 14px 2px #fff0bc,0 0 26px 6px #8bffb4}
.unit.hit.finisher.tint-bloom .impact-slash:before{animation:bunga-thorn-lash-a .48s cubic-bezier(.1,.75,.2,1) .32s both}
.unit.hit.finisher.tint-bloom .impact-slash:after{animation:bunga-thorn-lash-b .52s cubic-bezier(.1,.75,.2,1) .39s both}
@keyframes bunga-thorn-lash-a{0%{transform:translateY(-50%) rotate(-7deg) scaleX(.05);opacity:0}22%{opacity:1}66%{transform:translateY(-50%) rotate(-7deg) scaleX(1.08);opacity:1}100%{transform:translateY(-50%) rotate(-7deg) scaleX(1.18);opacity:0}}
@keyframes bunga-thorn-lash-b{0%{transform:translateY(-50%) rotate(8deg) scaleX(.05);opacity:0}18%{opacity:.95}64%{transform:translateY(-50%) rotate(8deg) scaleX(1.04);opacity:1}100%{transform:translateY(-50%) rotate(8deg) scaleX(1.14);opacity:0}}
.arena-flash.pulse-bloom{animation:bunga-arena-bloom .5s ease-out}
@keyframes bunga-arena-bloom{0%{opacity:0;background:#5dff83}12%{opacity:.30;background:#75ff93}52%{opacity:.42;background:#ffd85c}100%{opacity:0;background:#ffd85c}}

/* ===== Phase 2 product layer ===== */
.eyebrow{font-size:10px;letter-spacing:.12em;font-weight:900;color:#8fa2c9;margin-bottom:4px}.label{font-weight:800;margin-bottom:5px}.setupHero{margin-top:8px;padding:18px}.setupHero h1{font-size:28px}.heroStart{width:100%;font-size:15px;margin-top:14px;padding:14px}.heroPick{min-height:100px}.heroPick img{object-fit:contain!important;background:linear-gradient(#243754,#15243a)!important}
.hubProfile{display:flex;align-items:center;gap:12px;padding:12px;overflow:hidden;background:linear-gradient(135deg,#172741,#111c31)}.hubProfile>img{width:92px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 12px #0007)}.hubProfileInfo{min-width:0;flex:1}.hubProfileInfo h2{font-size:24px;margin-bottom:4px}.levelPill,.coinPill{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:#263958}.coinPill{background:#3a321a;color:#ffe28a}.parentIcon,.iconBtn{border:1px solid #405277;background:#111c31;color:#fff;border-radius:12px;width:40px;height:40px;font-size:18px;font-weight:900;transition:transform .12s cubic-bezier(.3,.7,.4,1)}.iconBtn:active{transform:scale(.9)}.xpRow{display:flex;align-items:center;gap:7px;margin-top:8px}.xpTrack,.dailyTrack,.missionMeter,.missionProgress{height:7px;background:#24324d;border-radius:99px;overflow:hidden}.xpTrack{flex:1}.xpTrack span,.dailyTrack span,.missionMeter span,.missionProgress span{display:block;height:100%;background:linear-gradient(90deg,#ffd24b,#ff9c4a)}.xpRow small{font-size:9px;color:#9eacc8;white-space:nowrap}.daily{display:flex;align-items:center;gap:10px;padding:12px}.dailyIcon{font-size:26px}.dailyTrack{margin-top:7px;height:6px}.dailyTrack span{background:linear-gradient(90deg,#55d98a,#70e2d2)}.dailyReward{font-size:10px;font-weight:900;color:#ffe18a;text-align:right;max-width:72px}.sectionHead{display:flex;justify-content:space-between;align-items:end;margin:17px 2px 10px}.sectionHead h2{margin:0}.missionGrid{display:grid;gap:10px}.missionCard{width:100%;border:1px solid #31425f;border-radius:17px;background:linear-gradient(135deg,#17243b,#101a2c);padding:12px;display:flex;align-items:center;gap:11px;color:#fff;text-align:left;box-shadow:0 8px 22px #0002;transition:transform .12s cubic-bezier(.3,.7,.4,1)}.missionCard:not(.locked):active{transform:scale(.982)}.missionCard.current{border-color:#ffd24b;box-shadow:0 0 0 2px #ffd24b25,0 9px 25px #0003}.missionCard.locked{opacity:.48;filter:saturate(.5)}.missionIcon{width:50px;height:50px;border-radius:15px;background:#243654;display:grid;place-items:center;font-size:25px}.missionBody{flex:1;min-width:0}.missionBody b{font-size:15px}.missionKicker{font-size:9px;color:#91a2c7;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.missionStars{font-size:12px;color:#ffd24b;letter-spacing:2px;margin:4px 0}.missionMeter{height:5px;margin:5px 0}.missionMeter span{background:linear-gradient(90deg,#63d997,#7cafff)}.missionBody small{font-size:9px;color:#91a2c7}.missionArrow{font-size:30px;color:#7083a7}
.gameTop{display:flex;align-items:center;gap:9px;margin-bottom:9px}.missionHud{flex:1}.missionHud b{font-size:13px}.missionProgress{margin-top:5px;height:5px}.missionProgress span{background:linear-gradient(90deg,#ffd24b,#f49949)}.missionCount{font-size:11px;font-weight:900;color:#aebbd5}.battleMeta{margin-bottom:8px}.combo{font-size:11px;color:#ffd76b;font-weight:900}.qcard{box-shadow:0 12px 30px #0004}.hintBtn{margin-top:10px;border:1px solid #cad4ef;background:#fff;color:#34405c;border-radius:12px;padding:9px 12px;font-size:11px;font-weight:900}.feedback{min-height:42px}.question{min-height:102px}.resultScreen{padding-top:25px}.resultCard{text-align:center;padding:22px}.resultBurst{font-size:50px;filter:drop-shadow(0 6px 9px #0005)}.resultCard h1{font-size:28px}.resultStars{font-size:35px;color:#ffd24b;letter-spacing:5px;margin:10px 0}.resultScore{font-weight:900;font-size:16px}.resultRewards{display:flex;justify-content:center;gap:10px;margin:16px 0}.resultRewards span{background:#1c2a44;border-radius:12px;padding:9px 12px;font-weight:900;color:#ffe28c}.coachNote{text-align:left;background:#0e1728;border:1px solid #293958;padding:12px;border-radius:14px;margin:15px 0}.coachNote p{font-size:12px;color:#b6c2dc;margin:5px 0 0}.resultCard>.btn{width:100%;margin-top:8px}.parentTop{display:flex;gap:10px;align-items:center;margin-bottom:12px}.parentTop h2{margin:0}.rewardToast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#161f32;border:1px solid #ffd24b;color:#fff;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:900;opacity:0;pointer-events:none;z-index:99;transition:.2s}.rewardToast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:380px){.hubProfile>img{width:78px}.heroGrid{grid-template-columns:1fr}.missionCard{padding:10px}.question{font-size:23px}}


/* Phase 2.1 — hero visual normalization + clearer Auto Coach entry */
.heroPick img{object-fit:contain!important;padding:4px}
#pickImgBunga{transform:scale(1.08);transform-origin:center}
.hubProfile>img{object-fit:contain!important}
body.hero-bunga #hubHeroImg{transform:scale(1.10);transform-origin:center bottom}
.autoCoachCard{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid rgba(255,210,75,.65);background:linear-gradient(135deg,#253859 0%,#1b2943 58%,#302a18 100%);color:#fff;border-radius:18px;padding:14px;margin:2px 0 7px;box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.025);cursor:pointer}
.autoCoachCard:active{transform:scale(.985)}
.autoCoachIcon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center;font-size:24px;background:linear-gradient(145deg,#ffd653,#efad24);color:#1a1a1a;box-shadow:0 6px 18px rgba(255,194,48,.22)}
.autoCoachBody{min-width:0;flex:1}.autoCoachTitle{font-weight:950;font-size:17px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}.autoCoachTitle span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#1a1a1a;background:#ffd24b;border-radius:99px;padding:3px 7px}.autoCoachDesc{color:#c5d0e8;font-size:12px;line-height:1.35;margin-top:4px}.autoCoachArrow{font-size:34px;color:#ffd24b;line-height:1}.coachChoiceHint{text-align:center;color:#8795b4;font-size:11px;font-weight:750;margin:6px 0 10px}


/* Developer question-bank testing */
.devPanel{border:1px solid #5c7dff;background:linear-gradient(135deg,#121d35,#101727);box-shadow:0 0 0 1px rgba(92,125,255,.16) inset}
.devHead{display:flex;align-items:flex-start;gap:10px}.devHead>div:first-child{flex:1}.devBadge{font-size:10px;font-weight:950;letter-spacing:.08em;background:#6d8cff;color:#07101f;border-radius:999px;padding:6px 9px}
.devControls{display:grid;grid-template-columns:1fr;gap:9px;margin:12px 0}.devControls label span{display:block;font-size:11px;font-weight:850;color:#aeb8d1;margin:0 0 5px}.devControls select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid #40527d;background:#0c1527;color:#fff}
.devPrimary{background:#6d8cff;color:#07101f}.missionCard.devUnlocked:not(.locked){opacity:1}.missionCard.devUnlocked:after{content:"DEV";position:absolute;right:12px;top:10px;font-size:8px;font-weight:950;letter-spacing:.08em;color:#8ea5ff}
.autoCoachCard{width:100%;border:1px solid #40527a;border-radius:17px;background:linear-gradient(135deg,#26385f,#1a2948);color:#fff;padding:13px 14px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;margin-bottom:12px}.autoCoachCard .autoIcon{font-size:24px}.autoCoachCard span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.autoCoachCard b{font-size:14px}.autoCoachCard small{font-size:11px;color:#c4d0e8;line-height:1.3}.autoArrow{font-size:25px;color:#91a4c8}

/* Phase 2.3 Learning Engine */
.devScenario{margin-top:12px;padding-top:12px;border-top:1px solid #30415f}.devScenario>b{font-size:12px;color:#ffd24b;display:block;margin-bottom:8px}
.learningScreen{padding-bottom:26px}.learningTop{padding:4px 3px 10px}.learningTop h2{margin-top:3px}.learningIntro{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#172744,#10203a);border-color:#35507a}.coachAvatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#233a60;font-size:25px;flex:0 0 auto}.learningIntro p{margin:5px 0 0;color:#bdc9df;font-size:13px;line-height:1.45}.learningSteps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0 12px}.learnStep{font-size:9px;text-align:center;color:#7886a2;display:grid;gap:4px;justify-items:center}.learnStep span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#172238;border:1px solid #344664;font-weight:900}.learnStep.active{color:#fff}.learnStep.active span{background:#ffd24b;color:#10131b;border-color:#ffd24b;box-shadow:0 0 0 4px #ffd24b22}.learnStep.done{color:#74d99f}.learnStep.done span{background:#183b2d;color:#74d99f;border-color:#2f8f60}
.learningBody{text-align:center;min-height:330px;padding:18px}.learningBody h2{font-size:25px;margin:8px 0 14px}.stageTag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;color:#ffd24b;background:#302b17;padding:5px 9px;border-radius:999px}.learningBody p{font-size:15px;line-height:1.55;color:#d6def0;margin:14px auto;max-width:400px}.learningCaption{font-size:12px;color:#aab7cf;margin-top:8px}.learningNext{width:100%;margin-top:18px}
.cpaBlocks{display:flex;justify-content:center;gap:22px;align-items:end;margin:20px 0}.cpaBlocks>div{display:flex;gap:4px;align-items:end;position:relative;padding-bottom:24px}.cpaBlocks small{position:absolute;bottom:0;left:0;right:0;color:#aeb8d1}.tenBlock{width:20px;height:70px;border-radius:5px;background:repeating-linear-gradient(to bottom,#78a9ff 0 6px,#9bc1ff 6px 7px);border:1px solid #b9d3ff}.ones{font-size:24px;color:#ffd24b;letter-spacing:4px}
.fractionModel{display:flex;width:min(310px,90%);height:55px;margin:22px auto;border:2px solid #91a4c7;border-radius:10px;overflow:hidden}.fractionModel span{flex:1;border-right:1px solid #91a4c7;background:#1a263d}.fractionModel span:last-child{border-right:0}.fractionModel .filled{background:#6ecb98}.percentGrid{display:grid;grid-template-columns:repeat(10,1fr);width:min(340px,95%);height:38px;margin:22px auto;gap:3px}.percentGrid span{background:#1c2a43;border:1px solid #566986;border-radius:3px}.percentGrid .on{background:#ffd24b;border-color:#ffe581}
.barModel{display:flex;width:min(360px,95%);height:54px;margin:22px auto}.barModel .part{display:grid;place-items:center;font-size:11px;font-weight:850;border:2px solid #91a4c7}.barModel .main{flex:3;background:#274a78;border-radius:10px 0 0 10px}.barModel .extra{flex:1;background:#725329;border-left:0;border-radius:0 10px 10px 0}.ratioModel,.timeModel,.moneyModel,.groupsModel{display:flex;justify-content:center;gap:12px;align-items:center;margin:24px auto;font-size:22px}.ratioModel span,.timeModel b,.moneyModel b,.groupsModel span{padding:12px 16px;border-radius:12px;background:#1c2b45;border:1px solid #425878}.shapeModel{font-size:48px;margin:22px auto}.miniBars{height:120px;display:flex;gap:12px;align-items:end;justify-content:center;margin:18px}.miniBars span{width:46px;background:#78a9ff;border-radius:8px 8px 0 0}.areaGrid{display:grid;grid-template-columns:repeat(4,38px);justify-content:center;gap:3px;margin:22px}.areaGrid span{height:38px;background:#73c99b;border:1px solid #b4e6cd}.coordHint{font-family:monospace;font-size:22px;line-height:1.8;padding:16px;border-radius:13px;background:#111b2d;width:max-content;margin:20px auto}.abstractBridge{display:flex;align-items:center;justify-content:center;gap:18px;margin:38px 0}.abstractBridge span{padding:18px;border-radius:13px;background:#1d304e;border:1px solid #42618f;font-weight:900}.abstractBridge b{font-size:28px;color:#ffd24b}
.learningPrompt{font-size:13px;color:#aeb8d1;margin:20px 0 8px}.learningChoices,.learningAnswers{display:grid;gap:10px;margin-top:12px}.learningChoices button,.learningAnswers button{border:1px solid #435775;background:#18263e;color:#fff;padding:14px;border-radius:13px;font-weight:800}.learningChoices button.correct,.learningAnswers button.correct{background:#17452e;border-color:#55d98a}.learningChoices button.wrong,.learningAnswers button.wrong{background:#532932;border-color:#ff6875}.learningQuestion{background:#f7f9ff;color:#11192a;border-radius:16px;padding:16px;font-size:22px;font-weight:900;margin:14px 0}.learningFeedback{min-height:42px;padding:10px 0;color:#cfd8eb;font-weight:700;font-size:13px}
@media(max-width:390px){.learnStep{font-size:8px}.learningBody{padding:14px}.learningBody h2{font-size:22px}.cpaBlocks{gap:10px}.tenBlock{width:17px;height:62px}}
/* Phase 2.4: D2 concept-specific Learning Camp visuals */
.lessonGoal{margin:12px auto 16px;max-width:430px;padding:10px 12px;border-radius:12px;background:#101d32;border:1px solid #2c476d;color:#dce8ff;font-size:13px;font-weight:800;line-height:1.45}.placeTable{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:8px;max-width:350px;margin:16px auto}.placeTable span{display:grid;gap:3px;padding:14px 8px;border-radius:12px;background:#172944;border:1px solid #3a5378}.placeTable span.focus{border-color:#ffd24b;box-shadow:0 0 0 3px #ffd24b1f}.placeTable b{font-size:27px;color:#fff}.placeTable small{color:#aebdd5}.lessonLine{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:22px auto}.lessonLine span{padding:9px 11px;border-radius:10px;background:#172944;border:1px solid #3c567d;font-weight:900}.lessonLine i{font-style:normal;color:#ffd24b;font-weight:900}.dotCloud{display:grid;grid-template-columns:repeat(10,10px);gap:5px;justify-content:center;margin:20px auto}.dotCloud i{width:10px;height:10px;border-radius:50%;background:#6fc5ff}.roundLine{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;max-width:390px;margin:24px auto}.roundLine>div{height:8px;background:#4e6384;border-radius:99px;position:relative}.roundLine i{position:absolute;top:-5px;width:18px;height:18px;border-radius:50%;background:#ffd24b}.roundLine b{position:absolute;top:17px;transform:translateX(-35%);font-size:11px;color:#ffd24b}.regroup{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:20px auto}.regroup>div{display:grid;gap:4px;padding:13px;border-radius:12px;background:#172944;border:1px solid #3a5378}.regroup b{font-size:20px}.regroup small{color:#aebdd5}.moneyColumns{display:grid;gap:6px;max-width:210px;margin:18px auto;padding:14px;border-radius:12px;background:#f7f9ff;color:#162038;text-align:right;font-variant-numeric:tabular-nums}.moneyColumns b{border-top:2px solid #162038;padding-top:6px}.clockVisual{display:grid;justify-items:center;gap:6px;margin:18px auto}.clockVisual b{font-size:60px}.clockVisual small{color:#aebdd5}.rulerVisual{height:72px;max-width:360px;margin:18px auto;border-bottom:5px solid #f0c34a;display:flex;align-items:flex-end;justify-content:space-between;color:#fff}.rulerVisual i{height:27px;border-left:2px solid #f0c34a}.balanceVisual{display:flex;justify-content:center;align-items:center;gap:18px;margin:20px auto}.balanceVisual b{font-size:42px}.balanceVisual span{padding:10px;border-radius:10px;background:#172944;border:1px solid #3a5378;font-weight:900}.jugVisual{width:110px;height:150px;border:4px solid #7db7e8;border-top:0;border-radius:0 0 18px 18px;margin:20px auto;position:relative;overflow:hidden}.jugVisual div{position:absolute;left:0;right:0;bottom:0;height:55%;background:#419bdc99}.jugVisual span{position:absolute;left:0;right:0;top:45%;font-weight:900;color:#fff}.tallyVisual{display:grid;grid-template-columns:auto auto auto;gap:12px;align-items:center;justify-content:center;margin:22px auto;font-size:24px}.tallyVisual b{letter-spacing:2px}.lessonEquation span:last-child{font-size:14px;max-width:240px}.learningBody .shapeModel{font-size:42px;margin:22px 0}
@media(max-width:390px){.placeTable{grid-template-columns:repeat(3,1fr)}.placeTable b{font-size:23px}.lessonGoal{font-size:12px}.lessonLine{gap:5px}.lessonLine span{padding:8px;font-size:12px}}

.topNav{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.topNav b{display:block;font-size:15px}.topNav .eyebrow{margin-bottom:2px}
.loginCard,.setupHero{padding:16px}.loginGrid{margin-top:8px}.label{margin-bottom:5px}
.heroStart{width:100%;margin-top:10px}
#game .gameTop .iconBtn{width:42px;height:42px;background:#17243b;border-color:#536789;box-shadow:0 6px 16px #0003}
.learningTop .iconBtn,.topNav .iconBtn{flex:0 0 auto}
.enemySpriteWrap{display:grid;place-items:center}
#enemySprite{display:inline-block;filter:drop-shadow(0 8px 8px #0007);transform-origin:center bottom;font-size:78px;transition:transform .22s ease,filter .22s ease}
#enemy.tone-slime #enemySprite{filter:hue-rotate(65deg) drop-shadow(0 8px 10px rgba(100,255,130,.35))}
#enemy.tone-bat #enemySprite{filter:hue-rotate(260deg) drop-shadow(0 8px 10px rgba(180,120,255,.3))}
#enemy.tone-goblin #enemySprite{filter:hue-rotate(12deg) saturate(1.2) drop-shadow(0 8px 10px rgba(255,140,120,.25))}
#enemy.tone-ghost #enemySprite{filter:grayscale(.15) brightness(1.15) drop-shadow(0 8px 10px rgba(210,230,255,.35))}
#enemy.tone-snake #enemySprite{filter:hue-rotate(95deg) saturate(1.2) drop-shadow(0 8px 10px rgba(170,255,120,.28))}
#enemy.tone-golem #enemySprite{filter:saturate(.8) sepia(.15) drop-shadow(0 8px 10px rgba(200,220,255,.24))}
#enemy.tone-eye #enemySprite{filter:hue-rotate(315deg) saturate(1.2) drop-shadow(0 8px 10px rgba(255,120,190,.28))}
#enemy.tone-boss #enemySprite{font-size:84px;filter:saturate(1.3) drop-shadow(0 8px 12px rgba(255,90,120,.35))}
.unit#hero.attacking .sprite{animation:lungeRight2 .52s cubic-bezier(.22,.88,.32,1)}
.unit#enemy.attacking .sprite{animation:lungeLeft2 .52s cubic-bezier(.22,.88,.32,1)}
@keyframes lungeRight2{0%{transform:translateX(0) scale(1)}18%{transform:translateX(-10px) scale(.96)}45%{transform:translateX(44px) scale(1.12) rotate(-2deg)}62%{transform:translateX(26px) scale(1.04)}100%{transform:translateX(0) scale(1)}}
@keyframes lungeLeft2{0%{transform:translateX(0) scale(1)}18%{transform:translateX(10px) scale(.96)}45%{transform:translateX(-44px) scale(1.12) rotate(2deg)}62%{transform:translateX(-26px) scale(1.04)}100%{transform:translateX(0) scale(1)}}
@media (max-width:480px){.learningSteps{grid-template-columns:repeat(5,1fr)} .learnStep{font-size:8px}}
.soundBtn,.miniSoundBtn{border:1px solid #405277;background:#111c31;color:#fff;border-radius:10px;width:34px;height:34px;font-size:16px;margin-right:7px;display:grid;place-items:center;cursor:pointer}.miniSoundBtn{width:36px;height:36px;margin:0 0 0 6px;flex:0 0 auto}
.loginHero{text-align:center;padding:30px 8px 18px}.loginMark{width:74px;height:74px;border-radius:24px;margin:0 auto 12px;display:grid;place-items:center;font-size:38px;background:linear-gradient(145deg,#18365c,#0f1d34);border:1px solid #3a5b88;box-shadow:0 16px 40px #0006,0 0 0 5px #1a2d4920}.loginHero h1{font-size:30px;margin-bottom:4px}.loginHero p{color:#9fb0cd;font-size:13px}.loginCard h2{font-size:22px}.quickLoginGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}.quickLogin{border:1px solid #385078;background:linear-gradient(145deg,#182943,#111c30);color:#fff;border-radius:15px;padding:12px 8px;display:grid;gap:4px;text-align:center;cursor:pointer}.quickLogin span{font-size:27px}.quickLogin b{font-size:13px}.quickLogin small{font-size:9px;color:#9fb0cd;line-height:1.3}.quickLogin.student{border-color:#3b73a9}.quickLogin.parent{border-color:#6a5d9d}.loginDivider{display:flex;align-items:center;gap:8px;color:#70809e;font-size:10px;margin:14px 0}.loginDivider:before,.loginDivider:after{content:"";height:1px;background:#2a3852;flex:1}.loginLabel{margin-top:9px}.demoHint{margin-top:9px;padding:9px 10px;border-radius:10px;background:#0d1728;color:#92a4c2;font-size:9px;line-height:1.55}.demoHint b{color:#dce8ff}.loginError{display:none;margin-top:9px;padding:9px 10px;border-radius:10px;background:#3a1820;border:1px solid #7e3442;color:#ffc4cc;font-size:11px;font-weight:700}.loginError.show{display:block}
#enemy.tone-place #enemySprite{filter:drop-shadow(0 8px 10px rgba(75,150,255,.4));color:#63a8ff}
#enemy.tone-operation #enemySprite{filter:drop-shadow(0 8px 10px rgba(255,90,90,.38));color:#ff6b6b}
#enemy.tone-fraction #enemySprite{filter:drop-shadow(0 8px 10px rgba(170,100,255,.38));color:#b77cff}
#enemy.tone-time #enemySprite{filter:drop-shadow(0 8px 10px rgba(80,220,255,.4));color:#71e5ff}
#enemy.tone-money #enemySprite{filter:drop-shadow(0 8px 10px rgba(70,210,125,.38))}
#enemy.tone-measurement #enemySprite{filter:drop-shadow(0 8px 10px rgba(255,165,65,.38))}
#enemy.tone-geometry #enemySprite{filter:drop-shadow(0 8px 10px rgba(60,205,255,.38))}
#enemy.tone-data #enemySprite{filter:drop-shadow(0 8px 10px rgba(125,115,255,.38))}

/* Phase 3.0 production math-monster assets */
.enemySpriteWrap{height:118px;line-height:normal;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
#enemySprite{display:block;width:auto;height:122px;max-width:150px;object-fit:contain;object-position:center bottom;transform-origin:center bottom;filter:drop-shadow(0 8px 8px #0008);transition:filter .2s ease}
#enemy.tone-place #enemySprite{filter:drop-shadow(0 8px 10px rgba(75,150,255,.34))}
#enemy.tone-operation #enemySprite{filter:drop-shadow(0 8px 10px rgba(255,90,90,.30))}
#enemy.tone-fraction #enemySprite{filter:drop-shadow(0 8px 10px rgba(170,100,255,.30))}
#enemy.tone-time #enemySprite{filter:drop-shadow(0 8px 10px rgba(80,190,255,.30))}
#enemy.tone-money #enemySprite{filter:drop-shadow(0 8px 10px rgba(70,210,125,.30))}
#enemy.tone-measurement #enemySprite{filter:drop-shadow(0 8px 10px rgba(255,165,65,.30))}
#enemy.tone-geometry #enemySprite{filter:drop-shadow(0 8px 10px rgba(60,205,255,.30))}
#enemy.tone-data #enemySprite{filter:drop-shadow(0 8px 10px rgba(125,115,255,.30))}
.unit#enemy.attacking #enemySprite{animation:lungeLeft2 .52s cubic-bezier(.22,.88,.32,1)}
.unit#enemy.hit #enemySprite{animation:hitPunch .45s cubic-bezier(.2,0,.3,1)}
.unit#enemy.hit.finisher #enemySprite{animation:hitPunchBig .65s cubic-bezier(.2,0,.3,1)}

/* Phase 3.1: minion -> boss battle progression */
#enemy[data-enemy-tier="minion"] #enemySprite{height:104px;max-width:126px;filter:drop-shadow(0 8px 7px rgba(0,0,0,.5))}
#enemy[data-enemy-tier="boss"] #enemySprite{height:126px;max-width:158px}
#enemy.tone-minion-a #enemySprite{filter:drop-shadow(0 8px 8px rgba(80,175,255,.28))}
#enemy.tone-minion-b #enemySprite{filter:drop-shadow(0 8px 8px rgba(255,95,100,.25))}
#enemy.tone-minion-c #enemySprite{filter:drop-shadow(0 8px 8px rgba(165,105,255,.25))}

/* Learning Coach v2: worked example -> guided step -> independent -> transfer */
.coachPortrait{overflow:hidden;padding:0!important;background:radial-gradient(circle at 50% 35%,#3f7492,#172b4b 72%)!important}.coachPortrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.42) translateY(10%)}
.learningIntro{position:relative;min-height:116px;align-items:stretch;padding:12px 13px 12px 116px;overflow:hidden}.coachAvatar{position:absolute;left:3px;bottom:0;width:112px;height:120px;background:radial-gradient(circle at 45% 45%,#315c78 0,#172744 67%,transparent 68%);border-radius:0;overflow:hidden}.coachAvatar img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:opacity .16s ease,transform .22s ease;filter:drop-shadow(0 7px 9px #0006)}.coachAvatar img.pose-teach{transform:scale(1.03)}.coachAvatar img.pose-encourage{transform:scale(1.02)}
.coachSpeech{position:relative;align-self:center;min-width:0}.coachSpeech:before{content:"";position:absolute;left:-14px;top:25px;border:7px solid transparent;border-right-color:#2b456b}.coachName{display:inline-block;margin-bottom:4px;color:#ffd76b;font-size:9px;font-weight:950;letter-spacing:.12em}.coachSpeech b{display:block;font-size:14px;line-height:1.25}.learningIntro .coachSpeech p{margin-top:5px}
@media(max-width:380px){.learningIntro{padding-left:99px}.coachAvatar{width:96px;height:112px}.coachSpeech b{font-size:13px}.learningIntro .coachSpeech p{font-size:12px}}
.workedProblem{background:#f5f7ff;color:#172039;border-radius:16px;padding:16px;font-size:21px;font-weight:900;text-align:center;margin:12px 0;border:1px solid #dce4f7}
.workedSteps{display:grid;gap:9px;margin:13px 0}
.workedSteps>div{display:flex;gap:10px;align-items:flex-start;background:#101a2c;border:1px solid #2e4162;border-radius:14px;padding:10px 12px}
.workedSteps>div>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#ffd24b;color:#121722;font-weight:950}
.workedSteps p{margin:2px 0 0;line-height:1.45;color:#e8edf8;font-size:14px}
.learningChoices{display:grid;gap:9px;margin-top:12px}
.learningChoices button{border:1px solid #40577c;background:#17253b;color:#fff;padding:13px;border-radius:13px;font-weight:850;transition:transform .12s ease}
.learningChoices button.correct{background:#163d2c;border-color:#43cf85;animation:learningCorrectPop .48s cubic-bezier(.22,.85,.28,1) both}
.learningChoices button.wrong{background:#48202a;border-color:#ff6e7b;animation:learningWrongShake .4s cubic-bezier(.22,.8,.28,1) both}
@keyframes learningCorrectPop{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(67,207,133,0)}40%{transform:scale(1.05);box-shadow:0 0 0 3px rgba(67,207,133,.4),0 0 20px rgba(67,207,133,.35)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(67,207,133,0)}}
@keyframes learningWrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.learningChoices button.correct,.learningChoices button.wrong{animation:none!important}}

/* Phase 3.2 — Parent PIN + Restu Parent */
.parentPinCard,.restuLock{max-width:460px;margin:14px auto;padding:18px}.pinIcon,.restuShield{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 12px;background:#1d2d4a;font-size:32px;border:1px solid #385077}.pinInput{text-align:center;font-size:28px;letter-spacing:.32em;font-weight:900;padding-left:.32em}.restuScreen{padding-bottom:28px}.restuLock{text-align:center}.restuLock h1{font-size:27px}.restuStudy{text-align:left;background:#101b2e;border:1px solid #30435f;border-radius:16px;padding:14px;margin:16px 0}.restuStudy p{font-size:13px;color:#b9c5da;margin:6px 0 0;line-height:1.45}.restuTimer{display:grid;gap:4px;padding:16px;border-radius:16px;background:#192844;margin:12px 0}.restuTimer span{font-size:11px;color:#9eb0cb;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.restuTimer b{font-size:38px;color:#ffd24b;letter-spacing:.06em}.restuDivider{display:flex;align-items:center;gap:10px;color:#7f90ac;font-size:10px;margin:18px 0 12px}.restuDivider:before,.restuDivider:after{content:"";height:1px;background:#31415d;flex:1}.restuLock input{text-align:center}.restuLock .btn:disabled{opacity:.45;cursor:not-allowed}

/* =========================================================
   Phase 3.4.2 — Responsive viewport pass
   Mobile-first: preserve phone layout, expand cleanly on
   tablets and desktop without stretching the game edge-to-edge.
   ========================================================= */

/* Fluid safety for every viewport */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:280px;overflow-x:hidden}
.app{width:100%;max-width:520px;margin-inline:auto;min-height:100dvh}
img,svg{max-width:100%}
.question{overflow-wrap:anywhere}
.answers{min-width:0}
.ans{min-width:0}

/* Small phones: keep existing compact behaviour */
@media (max-width:600px){
  .app{max-width:520px}
  .screen{padding:13px}
  .battle{height:228px}
}

/* Tablet portrait / small landscape */
@media (min-width:601px) and (max-width:1024px){
  body{background:radial-gradient(circle at 50% 8%,#16223a 0,#08101d 46%,#050913 100%)}
  .app{max-width:820px;box-shadow:0 0 55px rgba(0,0,0,.42)}
  header{height:64px;padding-inline:22px}
  .screen{padding:18px 22px}
  .card{padding:18px;border-radius:21px}

  .battle{height:292px;border-radius:23px;margin-bottom:16px}
  .sky{top:13px;left:16px;right:16px;padding:9px 12px;font-size:13px}
  .ground{height:58px}
  .unit{bottom:43px;width:180px;min-height:185px}
  .hero{left:24px}.enemy{right:24px}
  #hero .sprite{height:160px;width:190px}
  .hero-frame{height:158px}
  .hero-frame-attack{height:164px}
  .enemySpriteWrap{height:162px}
  #enemySprite{height:158px;max-width:190px}
  #enemy[data-enemy-tier="minion"] #enemySprite{height:138px;max-width:166px}
  #enemy[data-enemy-tier="boss"] #enemySprite{height:166px;max-width:205px}
  .nm{font-size:14px}.hp{height:9px;margin-inline:14px}

  .qcard{padding:20px 22px;border-radius:23px}
  .qmeta{font-size:13px}
  .question{font-size:32px;min-height:112px;padding:12px 18px}
  .answers{gap:13px}
  .ans{font-size:22px;padding:18px 10px;border-radius:16px}
  .feedback{font-size:14px;min-height:54px}

  .heroGrid{grid-template-columns:1fr 1fr;gap:14px}
  .missionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hubProfile>img{width:120px;height:138px}
  .hubProfileInfo h2{font-size:28px}
  .statgrid{grid-template-columns:repeat(3,minmax(0,1fr))}

  .learningBody,.parentPinCard,.restuLock{max-width:720px;margin-inline:auto}
  .resultCard{max-width:650px;margin-inline:auto}
}

/* Desktop / large tablet landscape */
@media (min-width:1025px){
  body{background:radial-gradient(circle at 50% 6%,#182742 0,#09111f 44%,#04070d 100%)}
  .app{max-width:980px;min-height:100dvh;box-shadow:0 0 80px rgba(0,0,0,.55)}
  header{height:68px;padding-inline:28px}
  .brand{font-size:18px}
  .screen{padding:22px 28px 28px}
  .card{padding:20px;border-radius:22px}

  /* Battle stays a game scene rather than becoming a wide website banner. */
  #game{max-width:900px;margin-inline:auto}
  .battle{height:330px;border-radius:24px;margin-bottom:18px}
  .sky{top:14px;left:20px;right:20px;padding:10px 14px;font-size:14px}
  .ground{height:64px}
  .unit{bottom:48px;width:210px;min-height:210px}
  .hero{left:42px}.enemy{right:42px}
  #hero .sprite{height:182px;width:220px}
  .hero-frame{height:180px}
  .hero-frame-attack{height:188px}
  .enemySpriteWrap{height:182px}
  #enemySprite{height:178px;max-width:220px}
  #enemy[data-enemy-tier="minion"] #enemySprite{height:154px;max-width:184px}
  #enemy[data-enemy-tier="boss"] #enemySprite{height:188px;max-width:228px}
  .nm{font-size:15px}.hp{height:10px;margin-inline:18px}

  .qcard{padding:22px 26px;border-radius:24px}
  .qmeta{font-size:13px}
  .question{font-size:34px;min-height:118px;padding:14px 24px}
  .answers{gap:14px;max-width:820px;margin-inline:auto}
  .ans{font-size:23px;padding:19px 12px;border-radius:17px}
  .feedback{font-size:14px;min-height:52px}

  /* Hub/parent use the extra width without changing the mobile information hierarchy. */
  #hub,#parent,#setup,#login,#learning,#result,#restu,#parentPin{max-width:900px;margin-inline:auto}
  .missionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .heroGrid{grid-template-columns:1fr 1fr;gap:16px}
  .hubProfile>img{width:130px;height:150px}
  .hubProfileInfo h2{font-size:30px}
  .statgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .learningBody{max-width:820px;margin-inline:auto}
  .parentPinCard,.restuLock{max-width:600px;margin-inline:auto}
  .resultCard{max-width:680px;margin-inline:auto}
  .loginCard,.setupHero{max-width:760px;margin-inline:auto}

  .bottom{max-width:980px;margin-inline:auto}
}

/* Very wide displays: intentionally stop scaling after desktop game size. */
@media (min-width:1440px){
  .app{max-width:1040px}
  #game,#hub,#parent,#setup,#login,#learning,#result,#restu,#parentPin{max-width:940px}
}


/* Phase 3.6 — branding + Khazanah reward MVP */
.brand{display:flex;align-items:center;gap:8px}.brandLogo{width:34px;height:34px;object-fit:contain}.brandedLogin{text-align:center;padding:10px 0 2px}.loginLogo{display:block;width:min(88%,430px);max-height:230px;object-fit:contain;margin:0 auto -8px}.brandedLogin p{margin:0;color:#f4c94d;font-weight:800;letter-spacing:.3px}.treasureNav{background:linear-gradient(145deg,#17345d,#0d1d36)}
.treasureScreen{padding-bottom:40px}.treasureTop{margin-bottom:12px}.treasureHero{display:flex;align-items:center;gap:14px;margin-bottom:12px}.treasureIcon{font-size:42px}.treasureHero p{margin:4px 0 0}.treasureTabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px;background:#0a1730;border:1px solid #28466f;border-radius:16px;margin-bottom:12px}.treasureTab{border:0;border-radius:11px;padding:12px;background:transparent;color:#9fb2cf;font-weight:900;font-size:14px}.treasureTab.active{background:linear-gradient(135deg,#1479e8,#075cc3);color:white;box-shadow:0 5px 18px #006de74d}.treasureGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.petCard{overflow:hidden;border-radius:20px;border:1px solid #355177;background:linear-gradient(180deg,#122747,#0a182d);box-shadow:0 12px 28px #0003}.petCard.locked{filter:saturate(.55)}.petArtWrap{aspect-ratio:1/1;background:radial-gradient(circle at 50% 35%,#225889,#0b1830 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}.petArtWrap img{width:100%;height:100%;object-fit:cover}.petSilhouette{width:66%;height:66%;border-radius:50%;display:grid;place-items:center;background:#07101f;color:#50617a;font-size:56px;font-weight:1000}.petInfo{padding:12px}.petInfo h3{margin:3px 0 5px;font-size:17px}.petInfo p{font-size:12px;color:#aebbd0;min-height:44px}.petStatus{display:inline-flex;padding:4px 8px;border-radius:999px;background:#18375d;color:#86c9ff;font-size:10px;font-weight:900;text-transform:uppercase}.petCard.owned .petStatus{background:#123f32;color:#69e6aa}.badgeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.badgeCard{min-height:164px;border:1px solid #355177;border-radius:18px;padding:14px;background:linear-gradient(180deg,#132947,#09182e);text-align:center;display:flex;flex-direction:column;align-items:center}.badgeMedal{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle,#ffd95b,#9c5d00);border:4px solid #f4bb22;box-shadow:0 0 22px #f0b91e55;margin-bottom:8px}.badgeCard.locked{opacity:.6;filter:grayscale(.75)}.badgeCard.locked .badgeMedal{background:#1c2737;border-color:#516078;box-shadow:none}.badgeCard b{font-size:14px}.badgeCard small{color:#aebbd0;margin:4px 0 9px;line-height:1.3}.badgeCard span{margin-top:auto;font-size:10px;color:#6fe2ac;font-weight:900}.badgeCard.locked span{color:#8997aa}
.battlePet{position:absolute;left:31%;bottom:7%;z-index:4;width:15%;max-width:76px;pointer-events:none;filter:drop-shadow(0 6px 5px #0008)}.battlePet img{width:100%;max-height:95px;object-fit:contain;border-radius:18px;animation:petIdle 2.2s ease-in-out infinite}@keyframes petIdle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
.unlockOverlay{position:fixed;inset:0;z-index:100;background:#030812d9;backdrop-filter:blur(8px);display:grid;place-items:center;padding:22px}.unlockCard{width:min(92vw,390px);border-radius:24px;padding:22px;text-align:center;background:linear-gradient(180deg,#112f5a,#07162c);border:2px solid #e7af2e;box-shadow:0 0 60px #e6b12944;position:relative;overflow:hidden}.unlockSpark{font-size:40px;color:#ffd84e}.unlockImage{width:210px;height:210px;object-fit:contain;margin:6px auto 10px;border:0;border-radius:0;filter:drop-shadow(0 10px 9px #0008)}.unlockIcon{font-size:96px;margin:15px}.unlockCard h2{margin:5px 0}.unlockCard p{color:#c0cbe0}.hidden{display:none!important}
@keyframes trophyUnlockCrestReveal{0%{opacity:0;transform:perspective(760px) rotateY(-170deg) rotateZ(-7deg) scale(.52);filter:brightness(.55) drop-shadow(0 0 0 transparent)}35%{opacity:1;transform:perspective(760px) rotateY(22deg) rotateZ(3deg) scale(1.06);filter:brightness(1.2) drop-shadow(0 0 26px var(--trophy-glow,#ffd84e99))}58%{transform:perspective(760px) rotateY(-10deg) rotateZ(-1deg) scale(.98)}78%{transform:perspective(760px) rotateY(4deg) rotateZ(1deg) scale(1.02)}100%{opacity:1;transform:perspective(760px) rotateY(0) rotateZ(0) scale(1);filter:drop-shadow(0 10px 9px #0008) drop-shadow(0 0 12px var(--trophy-glow,#ffd84e66))}}
.trophyUnlockArt{transform-style:preserve-3d;backface-visibility:visible;animation:trophyUnlockCrestReveal 1.15s cubic-bezier(.2,.85,.25,1) both}
.unlockOverlay[data-reward-type="badge"] .unlockCard{--trophy-glow:#ffd84e99}
.unlockOverlay[data-reward-tier="bronze"] .unlockCard{border-color:#c9793c;--trophy-glow:#c9793caa;box-shadow:0 0 60px #c9793c44}
.unlockOverlay[data-reward-tier="silver"] .unlockCard{border-color:#b9e6ff;--trophy-glow:#b9e6ffaa;box-shadow:0 0 60px #b9e6ff44}
.unlockOverlay[data-reward-tier="gold"] .unlockCard{border-color:#ffd84e;--trophy-glow:#ffd84ecc;box-shadow:0 0 60px #ffd84e55}
@media(prefers-reduced-motion:reduce){.trophyUnlockArt{animation:none;opacity:1;transform:none}}
@media(max-width:600px){.loginLogo{width:82%;max-height:180px}.treasureGrid{grid-template-columns:1fr 1fr}.petInfo{padding:10px}.petInfo h3{font-size:14px}.battlePet{left:30%;bottom:6%;width:17%;max-width:64px}.brandLogo{width:28px;height:28px}.brand span{font-size:18px}}
@media(min-width:780px){.treasureGrid{grid-template-columns:repeat(3,1fr)}.badgeGrid{grid-template-columns:repeat(3,1fr)}}

/* =========================================================
   Phase 3.6.1 — UI shell repair
   Compact login branding + SVG navigation + mobile safe area.
   ========================================================= */
:root{--nav-h:72px}
body[data-screen="login"] .appHeader{display:none}
body[data-screen="login"] .app{background:radial-gradient(circle at 50% 0,#122c54 0,#081426 48%,#050b15 100%)}
#login{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:32px}
.loginShell{width:min(100%,460px);margin:0 auto}
.loginBrand{text-align:center;margin:0 auto 14px;padding:0 12px}
.loginLogoFrame{width:148px;height:104px;margin:0 auto 8px;border-radius:22px;overflow:hidden;border:1px solid #35557d;background:#08111f;box-shadow:0 14px 34px #0007,0 0 0 4px #ffffff08}
.loginLogo{width:100%;height:100%;max-height:none;margin:0;display:block;object-fit:cover;object-position:center}
.loginBrand p{margin:0;color:#e9bd49;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.loginCard{padding:20px 18px 18px;margin:0;border-radius:22px}
.loginCard h2{font-size:28px;margin:4px 0 5px}.loginCard>.mut{line-height:1.45}
.quickLoginGrid{margin-top:16px}.quickLogin span{font-size:25px}.quickLogin{min-height:122px}
.appHeader .brandMark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#16345a,#0a1b31);border:1px solid #355579;color:#bde6ff;font-size:19px}
.brandLogo{display:none!important}

/* SVG button language */
.iconBtn svg,.treasureTab svg,.treasureIcon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconBtn svg{width:22px;height:22px}.topNav .iconBtn,.gameTop .iconBtn,.parentTop .iconBtn{display:grid;place-items:center}
.treasureIcon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#10294b;color:#ffd24f;border:1px solid #36557a}
.treasureIcon svg{width:30px;height:30px}.treasureTab{display:flex;align-items:center;justify-content:center;gap:7px}.treasureTab svg{width:19px;height:19px}

/* Primary bottom navigation */
.appBottomNav{display:none;position:fixed;z-index:80;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,1fr);gap:4px;background:#07111fee;border-top:1px solid #263c5d;backdrop-filter:blur(18px);box-shadow:0 -8px 28px #0006}
.appBottomNav.show{display:grid}.navItem{border:0;background:transparent;color:#7f91ad;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;font:inherit;font-size:10px;font-weight:850;padding:4px 2px;transition:.16s ease}
.navItem svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.navItem.active{color:#f7cf51;background:#12243e}.navItem:active{transform:scale(.96)}
body[data-screen="hub"] #hub,body[data-screen="treasure"] #treasure,body[data-screen="parent"] #parent{padding-bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom))}
#missionSection{scroll-margin-top:84px}

/* Khazanah is a first-class destination */
.treasureHero{background:linear-gradient(145deg,#102d50,#0a1c32);border-color:#355578}.treasureTop{position:sticky;top:0;z-index:5;background:#08101dee;padding:8px 0;margin-top:-6px;backdrop-filter:blur(12px)}

/* Keep screens inside viewport and stop image/canvas blowouts */
.screen{min-width:0}.screen img{max-width:100%}.loginHero{display:none!important}
@media(max-width:600px){
  :root{--nav-h:68px}
  .appHeader{height:58px;padding:0 14px}.brand span{font-size:17px}
  #login{padding-inline:14px}.loginLogoFrame{width:132px;height:92px}.loginCard{padding:18px 16px}.loginCard h2{font-size:25px}
  .quickLoginGrid{gap:9px}.quickLogin{padding:13px 8px;min-height:112px}.quickLogin b{font-size:14px}.quickLogin small{font-size:10px}
  .appBottomNav{width:100%}
}
@media(min-width:601px){.appBottomNav{width:min(100%,820px)}.loginLogoFrame{width:170px;height:120px}}
@media(min-width:1025px){.appBottomNav{width:min(100%,980px)}body[data-screen="hub"] #hub,body[data-screen="treasure"] #treasure,body[data-screen="parent"] #parent{padding-bottom:100px}}

/* v3.8.19 coin shop and unique pet impact effects */
.petCard.shopItem{border-color:#66552a;background:linear-gradient(180deg,#1c2b42,#171c28)}
.petCard.shopItem .petStatus{background:#4b3d18;color:#ffe18a}
.shopBuy{min-width:84px}.coinShort{display:block;margin-top:6px;color:#d6bd72;font-size:10px;font-weight:800}
.petImpactFx{position:absolute;z-index:12;width:clamp(110px,31%,230px);height:auto;transform:translate(-50%,-50%) scale(.2) rotate(-10deg);transform-origin:center;opacity:0;pointer-events:none;filter:drop-shadow(0 0 13px #72e9ff);mix-blend-mode:screen}
.petImpactFx.active{animation:petImpactV3819 .72s cubic-bezier(.16,.78,.25,1) both}
.petImpactFx[data-pet="pembaris"]{filter:drop-shadow(0 0 14px #bff6ff)}
.petImpactFx[data-pet="arif"]{filter:drop-shadow(0 0 14px #4effd0)}
.petImpactFx[data-pet="tiko"]{filter:drop-shadow(0 0 14px #ffd85d)}
@keyframes petImpactV3819{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-16deg)}24%{opacity:1;transform:translate(-50%,-50%) scale(.88) rotate(0)}52%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(7deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.petImpactFx.active{animation:petImpactReducedV3819 .45s ease-out both}@keyframes petImpactReducedV3819{0%,100%{opacity:0}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}}}

/* v3.8.20 — pet scale normalization and readable follow-up combo. */
#hero.attacking .battlePet{animation:none!important}
#hero.attacking .battlePet .battle-pet-frame{opacity:0!important;animation:none!important}
#hero.attacking .battlePet .battle-pet-idle{opacity:1!important}
.battlePet .battle-pet-frame{width:calc(100% * var(--pet-art-scale,1))!important;min-width:0!important}
.battlePet.pet-attacking{animation:petFollowUpDash .76s cubic-bezier(.2,.72,.25,1) both!important;will-change:transform}
.battlePet.pet-attacking .battle-pet-frame{opacity:0!important;animation:none!important}
.battlePet.pet-phase-anticipation .battle-pet-anticipation{opacity:1!important}
.battlePet.pet-phase-contact .battle-pet-attack{opacity:1!important}
.battlePet.pet-phase-follow-through .battle-pet-follow-through{opacity:1!important}
.battlePet.pet-phase-recover .battle-pet-idle{opacity:1!important}
@keyframes petFollowUpDash{0%{transform:translate3d(0,0,0)}18%{transform:translate3d(-5px,1px,0)}47%,59%{transform:translate3d(var(--pet-dash-x,150px),-7px,0)}74%{transform:translate3d(calc(var(--pet-dash-x,150px) - 10px),-2px,0)}100%{transform:translate3d(0,0,0)}}
#enemy.pet-hit .sprite{animation:petFollowUpReaction .33s ease-out both}
@keyframes petFollowUpReaction{0%,100%{transform:translateX(0)}22%{transform:translateX(7px) rotate(2deg);filter:brightness(1.7)}55%{transform:translateX(-3px) rotate(-1deg)}}

.devMiniCopy{font-size:11px;line-height:1.45;margin:0 0 9px}

/* Phase 3.6.3: dedicated Misi screen + fixed DEV control */
.devQuickBtn{border:1px solid #f3c84b;background:#2b2410;color:#ffd95a;font:900 11px/1 system-ui;border-radius:10px;padding:8px 9px;margin-right:7px;letter-spacing:.08em;box-shadow:0 0 0 1px #0005 inset}.devQuickBtn.hidden{display:none}
.loginVersion{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:8px;cursor:default}.devToggle.active{background:#ffd24b;color:#111827;border-color:#ffe58a;box-shadow:0 0 18px #ffd24b44}
.devOverlay{position:fixed;inset:0;z-index:300;background:#020712cc;backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:16px}.devOverlay.hidden{display:none}.devModal{width:min(100%,620px);max-height:88dvh;overflow:auto;position:relative;border-radius:24px 24px 16px 16px}.devModal .devPanel{margin:0}.devClose{position:absolute;right:12px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid #405273;background:#101a2d;color:#fff;font-size:25px;line-height:1}.dev-open{overflow:hidden}
.hubQuickGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.hubQuickCard{border:1px solid #263d61;background:#101c31;color:#fff;border-radius:18px;padding:14px;display:grid;grid-template-columns:44px 1fr 18px;align-items:center;text-align:left;gap:10px;font:inherit}.hubQuickCard b{display:block;font-size:15px}.hubQuickCard small{display:block;color:#95a7c4;margin-top:3px}.hubQuickIcon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#1c3153;color:#ffd95a;font-size:20px}.hubQuickCard.coach{background:linear-gradient(135deg,#18224b,#312064)}.hubQuickCard.mission{background:linear-gradient(135deg,#102849,#12395a)}.hubQuickCard.treasure{background:linear-gradient(135deg,#312310,#463814)}
.hubLoadout{width:100%;display:block;color:#fff;text-align:left;margin-top:10px;padding:13px 14px;background:linear-gradient(135deg,#102443,#1c2948);border-color:#314c73;font:inherit}.loadoutHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.loadoutHead span:first-child{display:flex;flex-direction:column}.loadoutHead small{color:#92a6c5;margin-top:2px}.loadoutArrow{font-size:24px;color:#9db4d6}.loadoutItems{display:grid;grid-template-columns:1fr 1fr;gap:9px}.loadoutSlot{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px;min-width:0;padding:7px;background:#09182dcc;border:1px solid #294467;border-radius:13px}.loadoutSlot>span:last-child{min-width:0}.loadoutSlot small{display:block;color:#8196b6;font-size:9px;text-transform:uppercase;font-weight:900}.loadoutSlot b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.loadoutThumb{width:42px;height:42px;border-radius:11px;background:radial-gradient(circle,#285584,#0b1728);display:grid;place-items:center;overflow:hidden}.loadoutThumb.aura{background:radial-gradient(circle,#493d80,#11172b)}.loadoutThumb img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 5px #0007)}
.purchaseOverlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:#020817e8;backdrop-filter:blur(10px)}.purchaseOverlay.hidden{display:none}.purchaseCard{position:relative;width:min(390px,94vw);overflow:hidden;text-align:center;padding:25px 22px 22px;border-radius:28px;background:linear-gradient(160deg,#142d51,#0b1730 68%);border:2px solid #f1c84a;box-shadow:0 24px 80px #000b,0 0 42px #e7bd3644;color:#fff}.purchaseRays{position:absolute;inset:-70%;background:repeating-conic-gradient(from 0deg,#ffd95a22 0 8deg,transparent 8deg 20deg);animation:purchaseRays 8s linear infinite}.purchaseCheck{position:relative;width:48px;height:48px;margin:0 auto 7px;border-radius:50%;display:grid;place-items:center;background:#48d494;color:#09251c;font-size:28px;font-weight:1000;box-shadow:0 0 24px #48d49488;animation:purchasePop .55s cubic-bezier(.2,1.5,.4,1)}.purchaseArt{position:relative;width:180px;height:180px;margin:6px auto;display:grid;place-items:center;background:radial-gradient(circle,#385b9a77,transparent 68%)}.purchaseArt img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 14px 18px #0008);animation:purchaseFloat 1.8s ease-in-out infinite}.purchaseCard h2{position:relative;margin:4px 0}.purchaseCard p{position:relative;color:#b8c8df}.purchaseEquipped{position:relative;display:inline-flex;padding:7px 12px;margin:4px 0 14px;border-radius:999px;background:#123e34;color:#72e6ae;font-size:12px;font-weight:950}.purchaseCard .btn{position:relative;width:100%}@keyframes purchasePop{0%{transform:scale(.1) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes purchaseFloat{50%{transform:translateY(-8px) scale(1.04)}}@keyframes purchaseRays{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.purchaseRays,.purchaseArt img,.purchaseCheck{animation:none}}

/* v3.14.1 — RPG-first mobile hub and properly staged companion. */
.hubTopNav{margin-bottom:8px}.hubProfile{position:relative;min-height:156px;padding:0;gap:0;background:linear-gradient(90deg,#10223ce8,#132642e8),url('../assets/battlefields/forest-temple/arena-v1.webp') center/cover;isolation:isolate}.hubProfile:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 28%,#09162bd9 58%,#09162bf2);z-index:-1}.hubScene{position:relative;align-self:stretch;width:48%;min-width:145px;height:156px;overflow:visible}.hubHeroCharacter{position:absolute!important;left:3%;bottom:5px;width:72%!important;height:143px!important;object-fit:contain!important;object-position:center bottom;filter:drop-shadow(0 8px 8px #0009)!important;z-index:1}.hubScenePet{position:absolute;left:59%;bottom:7px;width:39%;height:78px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 6px #0009);z-index:2;transform-origin:center bottom}.hubScenePet[data-pet="aurora"]{width:42%;height:80px;left:57%}.hubScenePet[data-pet="pembaris"]{width:43%;height:82px;left:56%}.hubScenePet[data-pet="arif"],.hubScenePet[data-pet="tiko"]{width:38%;height:74px;left:60%}.hubProfileInfo{position:relative;z-index:3;padding:19px 14px 16px 4px}.hubProfileInfo h2{font-size:26px;margin:2px 0 7px}.hubProfileInfo .xpRow{display:block}.hubProfileInfo .xpTrack{width:100%;margin-bottom:4px}.hubProfileInfo .xpRow small{display:block;text-align:right}.hubContinue{width:100%;display:grid;grid-template-columns:54px 1fr 24px;align-items:center;gap:11px;margin-top:10px;padding:14px;color:#fff;text-align:left;font:inherit;background:radial-gradient(circle at 12% 50%,#d59d2944,transparent 30%),linear-gradient(135deg,#2c230f,#17233b 62%);border:1px solid #d6a938;box-shadow:0 10px 25px #0004,0 0 0 1px #ffd45817}.continueSword{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle,#ebc04955,#0f1c32);font-size:26px;color:#ffd24b}.continueBody{min-width:0;display:flex;flex-direction:column}.continueBody>small{font-size:9px;font-weight:950;letter-spacing:.08em;color:#f3c955}.continueBody>b{font-size:16px;margin:3px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continueProgress{height:5px;border-radius:99px;background:#26364f;overflow:hidden}.continueProgress>span{display:block;height:100%;background:linear-gradient(90deg,#ffd24b,#ff9b3e)}.continueBody>em{font-size:9px;font-style:normal;color:#aebcd3;margin-top:4px}.continueArrow{font-size:28px;color:#f2c956}.hubCoachCompact{width:100%;display:grid;grid-template-columns:46px 1fr 18px;align-items:center;gap:10px;margin-top:9px;padding:10px 13px;border:1px solid #4b3b8b;border-radius:17px;background:linear-gradient(135deg,#18224b,#312064);color:#fff;text-align:left;font:inherit}.hubCoachPortrait{width:44px;height:44px;border-radius:13px;overflow:hidden;background:#13284b}.hubCoachPortrait img{width:100%;height:100%;object-fit:cover}.hubCoachCompact b{display:block;font-size:14px}.hubCoachCompact small{color:#aeb8da}.hubDailyCompact{margin-top:9px;border:1px solid #263d61;border-radius:17px;background:#101c31}.hubDailyCompact .grow b{font-size:13px}.hubDailyCompact #dailyText{font-weight:700;color:#a9b8d0;margin-left:4px}.hubDailyCompact .dailyReward{max-width:none;white-space:nowrap}.hubLoadout{margin-top:9px;padding:10px 12px}.hubLoadout .loadoutHead{margin-bottom:7px}.hubLoadout .loadoutHead small{font-size:9px}.hubLoadout .loadoutSlot{grid-template-columns:36px 1fr;padding:5px}.hubLoadout .loadoutThumb{width:36px;height:36px}.hubLoadout .loadoutThumb img{width:70%;height:70%;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 4px #0008)}
@media(max-width:380px){.hubScene{width:45%;min-width:132px}.hubHeroCharacter{width:76%!important}.hubScenePet{left:58%;width:40%}.hubProfileInfo{padding-right:10px}.hubContinue{grid-template-columns:48px 1fr 20px;padding:12px}.continueSword{width:46px;height:46px}.continueBody>b{font-size:14px}}
body[data-screen="missions"] #missions{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}
@media(min-width:601px){.hubQuickGrid{grid-template-columns:repeat(3,1fr)}.devOverlay{align-items:center}.devModal{border-radius:24px}}

/* Phase 3.6.4 - Immersive castle login */
body[data-screen="login"] .app{
  background:linear-gradient(180deg,#dff4ff 0,#f5fbff 42%,#eef5ff 100%);
}
#login{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:28px}
.loginShell{width:min(100%,460px);margin:0 auto}
.loginSceneWrap{margin:0 0 12px;padding:0 10px}
.loginScene{
  width:100%;display:block;aspect-ratio:941/953;object-fit:cover;object-position:center top;
  border-radius:28px;box-shadow:0 18px 46px #17365b24;border:1px solid #ffffffcc;
}
.loginCard{
  margin:0 14px;padding:20px 18px 18px;border-radius:26px;background:#ffffffef;color:#13213a;
  border:1px solid #dbe7f5;box-shadow:0 18px 45px #163b6b1f;backdrop-filter:blur(12px);
}
.loginCard h2{color:#13213a}.loginCard .mut,.loginCard .label{color:#6b7890}
.loginCard input{background:#f8fbff;color:#15213a;border-color:#d8e4f2}
.loginCard input::placeholder{color:#9ba8ba}
.quickLogin{background:#f6f9fe;color:#17213a;border-color:#d9e5f4;box-shadow:0 6px 16px #274c7a12}
.quickLogin small{color:#738198}.quickLogin.student{background:linear-gradient(145deg,#eef7ff,#f9fcff);border-color:#74aef0}.quickLogin.parent{background:linear-gradient(145deg,#f6f0ff,#fff);border-color:#b09ae7}
.loginDivider{color:#8b98aa}.loginDivider:before,.loginDivider:after{background:#dce5ef}
.demoHint{background:#f3f7fc;color:#738198;border:1px solid #e0e8f2}.demoHint b{color:#223653}
.loginError{background:#fff0f2;border-color:#f2bcc5;color:#8e2f3d}
@media(max-width:600px){
  .loginSceneWrap{padding:0 8px}.loginScene{border-radius:22px}.loginCard{margin:0 10px;padding:18px 16px}
}

/* Phase 3.6.5 — Pet scale & Khazanah art framing */
.petArtWrap{padding:12px;overflow:hidden}
.petArtWrap img{width:82%;height:82%;object-fit:contain;object-position:center;border-radius:14px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28))}
.battlePet{left:23%;bottom:7%;width:27%;max-width:118px;min-width:74px;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%}
.battlePet{height:126px}.battlePet .battle-pet-frame{position:absolute;left:50%;bottom:0;width:100%;height:100%;max-height:126px;object-fit:contain;object-position:center bottom;border-radius:0;filter:drop-shadow(0 7px 6px rgba(0,0,0,.45));transform:translateX(-50%);transition:opacity .06s;pointer-events:none}.battle-pet-idle{opacity:1;animation:petIdleFrame 2.2s ease-in-out infinite}.battle-pet-attack{opacity:0}.unit#hero.attacking .battle-pet-idle{opacity:0;animation:none}.unit#hero.attacking .battle-pet-attack{opacity:1;animation:petAttack .52s cubic-bezier(.22,.88,.32,1)}@keyframes petIdleFrame{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-4px) rotate(1deg)}}@keyframes petAttack{0%{transform:translateX(-50%) translateY(0) scale(.96)}45%{transform:translateX(-34%) translateY(-5px) scale(1.08)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
@media(max-width:600px){.petArtWrap{padding:14px}.petArtWrap img{width:78%;height:78%}.battlePet{left:22%;bottom:6.5%;width:29%;max-width:108px;min-width:78px}.battlePet img{max-height:118px}}
@media(min-width:601px){.battlePet{left:24%;bottom:6.5%;width:24%;max-width:128px}.battlePet img{max-height:132px}}
.treasureTabs{grid-template-columns:repeat(3,1fr)}.auraArtWrap{background:radial-gradient(ellipse at 50% 64%,#293765,#0a1428 72%);padding:0}.auraArtWrap img{width:100%;height:100%;object-fit:contain;padding:5%;filter:drop-shadow(0 0 10px #55cfff88)}.auraCard.owned{border-color:#7067c9}.auraCard .petStatus{background:#30275f;color:#c9baff}

/* v3.8.12 — pause a wrong answer for visible guidance and a retry. */
.hintBtn.needs-help{border-color:#f0b72e;background:#fff1a8;color:#5c4100;box-shadow:0 0 0 4px rgba(255,203,61,.28),0 0 22px rgba(255,190,30,.7);animation:hintBeacon .85s ease-in-out infinite}.hintBtn.used{border-color:#58c5aa;background:#e3fff6;color:#165f50}.retryPrompt{display:inline-block;margin-top:5px;color:#176e5d;font-weight:950}.ans:disabled{cursor:default}.ans.no:disabled{opacity:.68}@keyframes hintBeacon{50%{transform:translateY(-2px) scale(1.05);box-shadow:0 0 0 7px rgba(255,203,61,.16),0 0 30px rgba(255,190,30,.9)}}@media(prefers-reduced-motion:reduce){.hintBtn.needs-help{animation:none}}

/* v3.8.15 — accessible selection, readable secondary copy and keyboard focus */
.heroPick{border-color:#536583}
.heroPick.active{outline:3px solid #ffd248;outline-offset:1px}
.heroMeta>span{color:#dce7ff}
.heroSelected{display:none;width:max-content;margin-top:4px;padding:3px 7px;border-radius:999px;background:#ffd248;color:#171717;font-size:10px;font-style:normal;font-weight:950}
.heroPick.active .heroSelected{display:inline-flex;align-items:center;gap:3px}
.heroPick:focus-visible,.missionCard:focus-visible,.btn:focus-visible,.iconBtn:focus-visible,.hintBtn:focus-visible,.ans:focus-visible{outline:3px solid #fff;outline-offset:3px}
.eyebrow{color:#b8c7e4}
.missionKicker{color:#b7c5e0}
.missionBody small{font-size:10px;line-height:1.35;color:#c3d0e9}
.missionArrow{color:#9aafd2}

/* v3.30.0 — achievement medals show a real target, progress and earned state. */
.badgeProgress{width:100%;height:6px;border-radius:99px;background:#071326;overflow:hidden;margin:7px 0}.badgeProgress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f1b82b,#ffe578);box-shadow:0 0 8px #ffd95b77}.badgeCard.owned{border-color:#c7972f;background:radial-gradient(circle at 50% 18%,#5b431b55,transparent 42%),linear-gradient(180deg,#172d4b,#0a182d)}.badgeCard.owned .badgeMedal{animation:badgeEarnedGlow 2.6s ease-in-out infinite}@keyframes badgeEarnedGlow{50%{box-shadow:0 0 30px #f0b91e88;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){.badgeCard.owned .badgeMedal{animation:none}}
/* Trophy expansion: Pahlawan Angka shield crests. Legacy medals stay readable. */
.badgeCard[class*="tier-"] .badgeMedal{border-radius:20% 20% 28% 28%;clip-path:polygon(50% 0,92% 14%,86% 66%,50% 100%,14% 66%,8% 14%);position:relative;filter:drop-shadow(0 5px 5px #0006)}
.badgeCard[class*="tier-"] .badgeMedal:after{content:"";position:absolute;inset:7px;border:1px solid #ffffff55;clip-path:inherit}
.badgeCard.tier-bronze .badgeMedal{background:linear-gradient(145deg,#f2bd7d,#8c431f 70%);border-color:#d8894e;color:#fff0d0}
.badgeCard.tier-silver .badgeMedal{background:linear-gradient(145deg,#dff5ff,#4b7796 70%);border-color:#9ed5ee;color:#fff}
.badgeCard.tier-gold .badgeMedal{background:linear-gradient(145deg,#fff09a,#a96a08 70%);border-color:#f4c83e;color:#fff8c6}
.badgeCard.tier-legacy .badgeMedal{background:linear-gradient(145deg,#ffe58a,#a96a08 70%);border-color:#f4c83e;color:#fff8c6}
.badgeCard.locked[class*="tier-"] .badgeMedal{background:#1c2737;border-color:#516078;filter:grayscale(.7);opacity:.85}

/* Money comparison (questions/helpers.js moneyCompare): on a phone the two groups sit side by side;
   notes in one row, coins in another, and pieces of the same value overlap in one pile (owner:
   save space, colour and value are enough). Each piece in a pile leaves a 10 px edge showing so
   the child can still count it; the top piece shows its value in full. */
.moneyStack,.moneyPile{display:contents}
@media (max-width:560px){
  .moneyCompare{gap:16px 8px!important;margin:12px auto 10px!important}
  .moneyCompare .moneyGroupCard{flex:1 1 0!important;padding:18px 6px 10px!important;justify-content:flex-start!important}
  .moneyCompare .moneyGroupCard>span{font-size:11px!important;padding:2px 9px!important;top:-11px!important}
  .moneyCompare .moneyVisual{flex-direction:column!important;flex-wrap:nowrap!important;gap:6px!important}
  .moneyCompare .moneyStack{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}
  .moneyCompare .moneyPile{display:flex}
  .moneyCompare .paMoneyPiece{width:52px!important;height:28px!important}
  .moneyCompare .paMoneyPiece[width="58"]{width:32px!important;height:32px!important}
  .moneyCompare .moneyPile .paMoneyPiece+.paMoneyPiece{margin-left:-42px}
  .moneyCompare .moneyPile .paMoneyPiece[width="58"]+.paMoneyPiece{margin-left:-23px}
}