/* Touch-first controls and viewport fallbacks, including older mobile WebViews. */
[hidden]{display:none!important}
#app,.garden,.levelPage,.weekPage,.gamePage{min-height:100vh;min-height:100svh}
.stage{min-height:calc(100vh - 98px);min-height:calc(100svh - 98px)}
.levelPage,.weekPage{overflow-y:auto}
button:disabled{cursor:default}
.pictureChoice,.bingoCell,.wordStone{min-width:0}
.gameInstruction{margin:0 0 18px;text-align:center;font-size:17px;line-height:1.45;font-weight:800;color:#594878}
.pillButton{border:0;border-bottom:5px solid #5630b0;border-radius:23px;min-height:62px;padding:12px 28px;background:linear-gradient(135deg,#9871f0,#7143d2);color:white;font-size:20px;font-weight:900;box-shadow:0 8px 20px #7950cd30;cursor:pointer;touch-action:manipulation}
.pillButton:active{transform:translateY(3px);border-bottom-width:2px}
.pillButton:disabled{opacity:.65}
.spinLayout{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px}
.wheelWrap{position:relative;width:100%;max-width:380px;aspect-ratio:1;margin:15px auto}
.wordWheel{position:absolute;inset:0;border:9px solid white;border-radius:50%;box-shadow:0 0 0 4px #c7b5eb,0 15px 35px #4c2aa725;transition:transform 1.6s cubic-bezier(.12,.66,.12,1);overflow:hidden}
.wheelItem{position:absolute;width:29%;transform:translate(-50%,-50%)}
.wheelItem .vocabArt.small{width:100%;border-radius:16px;padding:3px;background:#fff}
.wheelHub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:24%;height:24%;border-radius:50%;border:6px solid white;background:#7652df;color:#ffdc64;font-size:43px;box-shadow:0 4px 8px #5b368040}
.wheelPointer{position:absolute;z-index:3;left:50%;top:-12px;transform:translateX(-50%);width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:34px solid #ed6e94;filter:drop-shadow(0 3px 1px #a34d7030)}
.wheelMask{position:absolute;inset:8px;z-index:2;border-radius:50%;background:linear-gradient(135deg,#ebe2ff,#d7efff);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:6px solid white;box-shadow:inset 0 0 0 3px #c8b3ed}
.wheelMask span{font-size:90px;color:#7652df}.wheelMask strong{font-size:23px}
.spinPanel{text-align:center;min-width:0}.spinAnswers{width:100%}.compactPrompt{display:flex;justify-content:center;margin-bottom:24px}
.spinChoices{gap:12px}.spinChoices .pictureChoice{min-height:180px;padding:6px}.spinChoices .vocabArt{width:100%;max-width:180px}
.spinButton{min-width:190px}
.bubblePrompt{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:14px;width:100%}
.bubblePrompt .voiceButton{width:64px;height:64px;flex-shrink:0}.bubblePrompt .voiceButton svg{width:30px;height:30px}.bubblePrompt .gameInstruction{margin:0;max-width:340px}
.bubbleArena{position:relative;width:100%;max-width:660px;aspect-ratio:600/440;border:3px solid #d1e9f5;border-radius:30px;background:radial-gradient(ellipse at 25% 7%,#fff 0 3%,transparent 3.5%),radial-gradient(ellipse at 87% 55%,#ffffff90 0 5%,transparent 5.5%),linear-gradient(#d4f3ff,#f0fbff 70%,#d2efdb);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.aimGuide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.aimGuide path{fill:none;stroke:#997ec9;stroke-width:5;stroke-dasharray:3 13;stroke-linecap:round}
.bubbleTarget{position:absolute;z-index:2;transform:translate(-50%,-50%);width:22%;aspect-ratio:1;min-width:0;padding:6%;padding:6px;border:4px solid #a77ceb;border-radius:50%;background:radial-gradient(circle at 32% 22%,#fff,#eee2ff);box-shadow:inset -5px -6px 10px #9f79d82e,0 6px 14px #5950a325;display:grid;place-items:center;cursor:crosshair;transition:box-shadow .15s,opacity .25s,transform .25s}
.bubbleColor1{border-color:#f1ae64;background:radial-gradient(circle at 32% 22%,#fff,#ffeacc)}
.bubbleColor2{border-color:#67c5af;background:radial-gradient(circle at 32% 22%,#fff,#dbfff2)}
.bubbleTarget .vocabArt.small{width:94%;max-width:108px;border-radius:50%;padding:2px;filter:none;background:#fff}
.bubbleTarget.aimed{box-shadow:0 0 0 5px #fff,0 0 0 8px #aa8ade70}
.bubbleTarget.popped{transform:translate(-50%,-50%) scale(1.35);opacity:0;pointer-events:none}
.bubbleCannon{position:absolute;left:50%;top:86.36%;width:15%;height:15%;transform:translate(-50%,-50%);pointer-events:none}
.cannonBarrel{position:absolute;left:50%;top:50%;width:38%;height:115%;border:4px solid #6743b7;border-radius:14px 14px 8px 8px;background:linear-gradient(90deg,#b795f7,#8d64d5);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg)}
.cannonBase{position:absolute;inset:0;border:5px solid #fff;border-radius:50%;background:linear-gradient(135deg,#956ce6,#6840b9);display:grid;place-items:center;color:#ffdf67;font-size:30px;box-shadow:0 5px 10px #7955a540}
.projectile{position:absolute;z-index:3;left:50%;top:86.36%;width:3.6%;aspect-ratio:1;border-radius:50%;background:#ffcb44;border:2px solid #fff;box-shadow:0 0 8px #f8b919;transform:translate(-50%,-50%);visibility:hidden;pointer-events:none}
.projectile.flying{visibility:visible;transition:left .5s linear,top .5s linear}
.arenaHint{position:absolute;bottom:2%;left:0;right:0;text-align:center;font-size:12px;color:#536b6d;font-weight:800;pointer-events:none}
.aimControls{display:grid;grid-template-columns:54px minmax(100px,1fr) 54px auto;align-items:center;gap:12px;width:100%;max-width:660px;margin-top:18px}
.aimButton{width:54px;height:54px;border:2px solid #d9cbee;border-radius:18px;background:#f1eafa;color:#6b46b7;font-size:22px;cursor:pointer}
.aimSlider{min-width:0;text-align:center;font-size:11px;font-weight:900;letter-spacing:.06em;color:#796597}
.aimSlider input{display:block;width:100%;height:34px;accent-color:#8256d2;cursor:pointer;touch-action:pan-y}
.fireButton{font-size:17px;min-height:56px;padding:10px 18px;background:linear-gradient(135deg,#ffa25c,#f77659);border-color:#d75540;box-shadow:0 7px 17px #ed83502b}
.gameCover.cover-spin,.gameCover.cover-bubbles{position:relative;background-image:none;overflow:hidden;display:grid;place-items:center}
.gameCover.cover-spin{background:linear-gradient(#e1dcff,#fcf0db)}
.gameCover.cover-spin:before{content:'★';display:grid;place-items:center;width:90px;height:90px;border:5px solid white;border-radius:50%;background:conic-gradient(#ffd47f 0 72deg,#a8e3d6 72deg 144deg,#b7a4ef 144deg 216deg,#ffc0d3 216deg 288deg,#9dd6f2 288deg);font-size:35px;color:white;box-shadow:0 4px 12px #785d9638}
.gameCover.cover-spin:after{content:'▼';position:absolute;top:23px;color:#e96391;font-size:25px}
.gameCover.cover-bubbles{background:linear-gradient(#bfefff,#eeffff)}
.gameCover.cover-bubbles:before{content:'';width:55px;height:55px;border-radius:50%;background:radial-gradient(circle at 28% 22%,white,#be9dea 60%);border:3px solid white;box-shadow:-32px -38px 0 -8px #ffbadd,34px -33px 0 -8px #a7e1d8,0 42px 0 -13px #ffd779}
@media(max-width:600px){
  .stage{padding:15px 11px;min-height:calc(100vh - 78px);min-height:calc(100svh - 78px)}
  .gamePage{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .gameInstruction{font-size:14px;margin-bottom:12px}
  .spinLayout{grid-template-columns:1fr;gap:10px}.wheelWrap{width:66%;max-width:255px;margin:12px auto}.wordWheel{border-width:6px}
  .wheelPointer{border-left-width:12px;border-right-width:12px;border-top-width:25px;top:-7px}
  .wheelHub{font-size:27px;border-width:4px}.wheelMask span{font-size:55px}.wheelMask strong{font-size:17px}
  .spinChoices{max-width:410px;margin:auto}.spinChoices .pictureChoice{min-height:136px;aspect-ratio:1.12}.spinChoices .vocabArt{max-width:146px}
  .compactPrompt{margin-bottom:13px}.compactPrompt .voiceButton{width:56px;height:56px}.compactPrompt .voiceButton svg{width:28px;height:28px}
  .bubblePrompt{gap:18px;margin:6px 0 20px}.bubblePrompt .voiceButton{width:56px;height:56px}.bubblePrompt .gameInstruction{font-size:14px;max-width:215px;text-align:left}
  .bubbleArena{border-radius:22px}.bubbleTarget{padding:4px;border-width:3px}.bubbleTarget.aimed{box-shadow:0 0 0 3px #fff,0 0 0 5px #aa8ade70}
  .cannonBase{font-size:19px;border-width:3px}.cannonBarrel{border-width:2px;border-radius:8px 8px 5px 5px}.arenaHint{font-size:10px}
  .aimControls{grid-template-columns:52px minmax(0,1fr) 52px;gap:9px;margin-top:12px}.aimButton{width:52px;height:52px}.fireButton{grid-column:1/-1;width:100%;font-size:18px;min-height:60px}
  .bingoCell .vocabArt.small{width:90%;max-width:150px}.gameCover.cover-spin:before{width:72px;height:72px}.gameCover.cover-spin:after{top:14px}
}
@media(max-height:540px) and (orientation:landscape){
  .spinLayout{grid-template-columns:1fr 1fr;gap:20px}.wheelWrap{width:85%;max-width:240px}.spinChoices .pictureChoice{min-height:115px}.bubbleArena{max-width:460px}.bubblePrompt{margin-bottom:10px}.aimControls{max-width:520px}
}
@media(hover:none){.gameCard:hover,.pictureChoice:hover,.bingoCell:hover,.wordStone:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.wordWheel{transition-duration:.01ms}.projectile.flying{transition-duration:.01ms}}
.level-mercury{--purple-deep:#8a4a1b;--purple:#ec9948}
.level-mercury .weekGate.open{background:linear-gradient(135deg,#fff1bb,#ffce6f);color:#945215}
.level-mercury .pageTitle small{color:#85551b;text-shadow:none}
.learningCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(940px,92vw);margin:0 0 20px}
.learnCard{display:flex;align-items:center;gap:12px;padding:15px 12px;border:2px solid #fff;border-radius:24px;background:#fff7e9;text-align:left;cursor:pointer;box-shadow:0 7px 20px #71463012;min-width:0}
.learnCard:nth-child(2){background:#eee7ff}.learnCard:nth-child(3){background:#e4f6f0}
.learnSymbol{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;border-radius:17px;background:#ffffffa0;font-size:23px;font-weight:900;color:#8051bf}
.learnCard strong{display:block;font-size:16px;line-height:1.2}.learnCard small{display:block;font-size:12px;line-height:1.3;color:#796883;margin-top:5px}
.reviewPicture{width:min(330px,70vw);aspect-ratio:1;border:4px solid #ede0fa;border-radius:32px;padding:8px;background:#fff9ec;display:grid;place-items:center;cursor:pointer}
.reviewPicture .vocabArt{width:100%;max-width:none;filter:none;border-radius:24px}
.reviewCaption{text-align:center;display:grid;justify-items:center;gap:5px;margin:14px 0 22px}
.reviewCaption strong{font-size:clamp(25px,5vw,37px);line-height:1.1}.reviewCaption small{font-size:18px;color:#887393}.dayBadge{padding:3px 12px;border-radius:999px;background:#efe6ff;color:#7955b8;font-size:12px;font-weight:900}
.reviewControls{display:flex;gap:28px;align-items:center}.reviewControls .voiceButton{width:62px;height:62px}.reviewControls .voiceButton svg{width:29px;height:29px}.reviewControls button:disabled{opacity:.35}
.symbolChoices{display:flex;justify-content:center;gap:22px;width:100%;max-width:650px}
.symbolChoice{flex:1;min-width:0;max-width:230px;aspect-ratio:1.15;border:4px solid #dac8f1;border-radius:30px;background:linear-gradient(#fff,#f6f0fe);font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(64px,10vw,130px);font-weight:800;cursor:pointer;box-shadow:0 9px 20px #57358612}
.symbolChoice.correct{background:#e8f9ed;border-color:#62c994}.symbolChoice.wrong{border-color:#ef8798;animation:shake .32s}
.letterPair{font-size:16px;min-height:24px;margin:25px 0 0;color:#837095;text-align:center}
.countBoard{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:17px;background:#fff9e6;border:3px solid #f8e2a5;border-radius:25px;width:min(490px,100%);margin:6px auto 24px}
.countCell{aspect-ratio:1;border-radius:12px;background:#f5ecd4;display:grid;place-items:center}.countCell.filled{background:#fff0a8;color:#edb018}.countCell svg{width:78%;height:78%;filter:drop-shadow(0 3px 0 #d8932540)}
.numberChoices .symbolChoice{font-size:clamp(44px,8vw,90px);max-width:160px}
@media(max-width:700px){
  .learningCards{grid-template-columns:1fr;gap:8px;width:93vw;margin-bottom:15px}.learnCard{padding:10px 14px;border-radius:18px}.learnSymbol{width:43px;height:43px;font-size:21px}.learnCard small{margin-top:3px}
  .reviewPicture{width:min(280px,72vw)}.reviewCaption{margin:12px 0 20px}.reviewCaption small{font-size:16px}
  .symbolChoices{gap:12px}.symbolChoice{border-radius:23px;font-size:80px}.letterPair{font-size:13px}
  .countBoard{gap:6px;padding:10px;border-radius:20px}.countCell{border-radius:9px}.numberChoices{gap:9px}
}


/* Mid-Autumn: original illustration atlas, framed per word without cropping faces. */
.vocabArt.midAutumnArt{background:none;display:grid;place-items:center;filter:drop-shadow(0 5px 7px #6f455412)}
.festivalSprite{display:block;background-image:url('assets/mid-autumn-atlas.webp');background-repeat:no-repeat}
.festivalEntry{width:min(490px,88vw);margin:20px auto 0;padding:14px 20px;border:2px solid #f9d26d;border-radius:24px;background:#fff8e7;display:flex;align-items:center;gap:16px;color:#653b91;text-align:left;box-shadow:0 9px 25px #85602913;cursor:pointer}
.festivalEntry>span:last-child{margin-left:auto;font-size:30px}.festivalEntry small{display:block;font-size:10px;font-weight:900;letter-spacing:.09em;color:#995619}.festivalEntry strong{font-family:'Baloo 2',Nunito,sans-serif;font-size:27px;line-height:1.1}.festivalMoon{font-size:49px;line-height:1;color:#df9324}.festivalEntry:hover{transform:translateY(-3px)}
.festivalWeek{background:radial-gradient(circle at 10% 5%,#fff2c9,transparent 50%),radial-gradient(circle at 95% 20%,#f4e5ff,transparent 50%),#fffafb}
.sentenceButton{display:flex;align-items:center;justify-content:center;gap:9px;border:2px solid #e9ddf5;border-radius:18px;background:#fcf7ff;color:#68429a;padding:10px 16px;max-width:95%;font-size:16px;font-weight:800;cursor:pointer;margin:4px auto 14px}.sentenceButton svg{width:23px;height:23px;flex-shrink:0}.sentenceButton.speaking{background:#ece1ff}.sentenceButton span{text-align:left}
@media(max-width:520px){.festivalEntry{margin-top:12px;padding:11px 16px;gap:12px}.festivalEntry strong{font-size:23px}.festivalMoon{font-size:40px}.festivalWeek .weekHead .pageTitle{font-size:30px}.sentenceButton{font-size:14px}.reviewPicture{max-width:54vw}.reviewCaption{margin-bottom:9px}}
.sprite-moon{width:100.0000%;height:99.0431%;background-size:300.00000% 302.89855%;background-position:0.00000% 0.00000%}
.sprite-lantern{width:96.1538%;height:100.0000%;background-size:313.50000% 301.44231%;background-position:49.76581% 0.00000%}
.sprite-moon-cake{width:100.0000%;height:98.5816%;background-size:296.45390% 300.71942%;background-position:100.00000% 0.00000%}
.sprite-party{width:100.0000%;height:95.4545%;background-size:300.00000% 314.28571%;background-position:0.00000% 48.88889%}
.sprite-kids{width:100.0000%;height:96.8293%;background-size:305.85366% 315.86902%;background-position:49.64455% 49.00817%}
.sprite-carp-lantern{width:100.0000%;height:83.6879%;background-size:296.45390% 354.23729%;background-position:100.00000% 46.22222%}
.sprite-lantern-parade{width:98.3945%;height:100.0000%;background-size:292.30769% 287.61468%;background-position:0.00000% 100.00000%}
.sprite-mask{width:91.7431%;height:100.0000%;background-size:313.50000% 287.61468%;background-position:50.23419% 100.00000%}
.sprite-moon-lady{width:87.9917%;height:100.0000%;background-size:295.05882% 259.62733%;background-position:100.00000% 100.00000%}
.festivalWeek .pageTitle small{color:#8b5b28;text-shadow:none}

/* My Body illustrations keep their complete silhouette in every game. */
.myBodyGame .vocabArt.uploaded.bodyArt{background:transparent;padding:0;object-fit:contain;border-radius:0;filter:none;width:100%;max-width:none;height:auto;aspect-ratio:1}
.myBodyGame .pictureChoice{padding:10px;min-height:0;aspect-ratio:1.12}
.myBodyGame .choices.three .pictureChoice{aspect-ratio:1}
.myBodyGame .pictureChoice .bodyArt{width:96%;max-width:310px}
.myBodyGame .pairFace{width:100%;min-width:0}
.myBodyGame .pairCard{padding:6px;min-height:0;aspect-ratio:1.08}
.myBodyGame .wordStone{padding:6px;min-height:0;aspect-ratio:1.12}
.myBodyGame .bingoCell{padding:4px}
.myBodyGame .bubbleTarget .bodyArt{width:100%;border-radius:0}
.myBodyGame .reviewPicture{width:min(360px,76vw);max-width:76vw;padding:6px;background:linear-gradient(145deg,#fff9ec,#f4edff)}
@media(max-width:600px){
  .myBodyGame .pictureChoice{padding:5px}
  .myBodyGame .pairGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px;gap:8px}
  .myBodyGame .pairCard{aspect-ratio:1.3;padding:6px}
  .myBodyGame .pairFace{width:78%}
  .myBodyGame .wordOptions{gap:6px}
  .myBodyGame .wordStone{padding:3px;aspect-ratio:1}
  .myBodyGame .bingoCell{padding:3px}
  .myBodyGame .reviewPicture{width:min(280px,74vw);max-width:74vw}
}
@media(max-height:540px) and (orientation:landscape){
  .myBodyGame .reviewPicture{width:min(220px,42vh)}
  .myBodyGame .pairGrid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:650px}
}

/* Multiple spoken examples and Mercury circle activities. */
.sentenceList{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:95%;margin:0 auto 15px}
.sentenceList .sentenceButton{margin:0;max-width:100%;font-size:15px}
.circleActivity{width:100%;max-width:710px;margin:auto;text-align:center}
.circleChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:14px auto;max-width:680px}
.circleChoice{min-width:0;min-height:44px;aspect-ratio:1;padding:10px;background:linear-gradient(145deg,#fff,#fff5df);border:3px solid #ead1af;border-radius:27px;cursor:pointer;box-shadow:0 8px 18px #ab772018}
.circleChoice svg{width:100%;height:100%;display:block}.circleChoice.wrong{border-color:#ed8399;animation:shake .32s}
.circleRotate{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:520px;margin:12px auto 24px}
.circleRotate small{display:block;font-size:15px;font-weight:800;color:#877093;margin-bottom:7px}
.circleRotate svg{width:100%;display:block}.circleRotate #circleTurn{transition:transform .25s ease}
.circleControls{display:flex;align-items:center;justify-content:center;gap:14px}.circleControls .pillButton{font-size:16px;padding:10px 17px}
.circlePuzzle{width:min(250px,48vw);margin:0 auto}.circlePuzzle svg{width:100%;display:block}
.pieceChoices{max-width:500px}.pieceChoices .circleChoice{aspect-ratio:1.15}
@media(max-width:600px){.sentenceList{display:grid;gap:5px;margin-bottom:12px}.sentenceList .sentenceButton{font-size:14px;padding:7px 12px}.circleChoices{gap:8px}.circleChoice{padding:4px;border-radius:18px}.circleRotate{gap:18px;max-width:440px}.circleControls{gap:8px}.circleControls .pillButton{font-size:13px;padding:9px}.circlePuzzle{width:48vw}}
@media(prefers-reduced-motion:reduce){.circleRotate #circleTurn{transition:none}}
/* October STAR: calendar navigation and shared preschool illustrations. */
.monthTabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px auto 23px}.monthTabs button{font-family:inherit;font-weight:900;font-size:17px;border:2px solid #fff;border-radius:99px;padding:9px 20px;color:#7652a7;background:#fff9;cursor:pointer;box-shadow:0 4px 10px #7c62ab20}.monthTabs button[aria-pressed=true]{background:linear-gradient(135deg,#8971e5,#b47be6);color:white;box-shadow:0 4px 0 #7553ac}
.weekGate.currentWeek{position:relative;filter:drop-shadow(0 0 9px #fff9b2)}.currentWeekLabel{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;white-space:nowrap;background:#fff2ab;color:#8b6023;border:2px solid white;border-radius:99px;padding:3px 8px}
.starOctoberArt{display:block!important;position:relative!important;background:#fff!important;overflow:hidden;border-radius:20px;aspect-ratio:1;isolation:isolate}.myBodyGame .vocabArt.starOctoberArt{width:100%;max-width:none;filter:none}.myBodyGame .pictureChoice .starOctoberArt{width:84%}.starOctoberSprite{position:absolute;left:50%;top:50%;width:var(--sprite-w,100%);height:var(--sprite-h,100%);transform:translate(-50%,-50%);background-image:url('assets/vocab/star-october-atlas-v2.webp');background-size:var(--atlas-w,400%) var(--atlas-h,300%);background-position:var(--atlas-x) var(--atlas-y);background-repeat:no-repeat}.starOctoberArt .elbowFocus{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#f6b027;stroke-width:1.3;filter:drop-shadow(0 0 1px white)}
.stickSquare{width:140px;max-width:30%;margin:7px auto}.stickSquare svg{display:block;width:100%;height:auto}.stickSquare[hidden]{display:none}

/* Kids Garden identity and lesson videos */
.brandIdentity{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 6px;border:1px solid rgba(255,255,255,.8);border-radius:21px;background:rgba(255,255,255,.94);box-shadow:var(--soft-shadow);cursor:pointer;text-align:left;transition:transform .16s ease}
.brandIdentity:hover{transform:translateY(-2px)}
.brandLogo{display:block;width:58px;height:58px;object-fit:contain;border-radius:12px;background:white}
.brandIdentity .brandText{font-family:"Baloo 2",Nunito,sans-serif;color:#087b41;font-size:18px;line-height:1.05;letter-spacing:.01em;white-space:nowrap;text-shadow:none}
.brandIdentity .brandText small{font:900 9px/1.2 Nunito,sans-serif;letter-spacing:.16em;color:#7652df;margin-top:4px}
.gameMeta strong{display:flex;align-items:center;justify-content:center;gap:8px}
.gameMeta strong span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gameBrandLogo{flex:0 0 auto;width:32px;height:32px;object-fit:contain;border-radius:7px;background:#fff}
.videoLibraryEntry,.lessonVideoEntry{display:flex;align-items:center;gap:16px;width:min(760px,92vw);padding:16px 21px;margin:22px auto 0;border:2px solid rgba(255,255,255,.9);border-radius:26px;background:linear-gradient(120deg,#fff8fc,#fff 58%,#effaf4);box-shadow:var(--soft-shadow);text-align:left;cursor:pointer;transition:transform .18s ease}
.videoLibraryEntry:hover,.lessonVideoEntry:hover{transform:translateY(-4px)}
.videoLibraryEntry>span:nth-child(2),.lessonVideoEntry>span:nth-child(2){flex:1;min-width:0}
.videoLibraryEntry strong,.lessonVideoEntry strong{display:block;font-family:"Baloo 2",Nunito,sans-serif;font-size:25px;line-height:1.2;color:var(--purple-deep)}
.videoLibraryEntry small,.lessonVideoEntry small{display:block;margin-top:4px;font-size:12px;font-weight:800;color:var(--muted);line-height:1.4}
.videoEntryPlay{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;padding-left:3px;border-radius:50%;background:linear-gradient(140deg,#ff95b6,#ad79dd);color:#fff;font-size:22px;box-shadow:0 8px 20px #dc9bc443}
.videoEntryArrow{font-size:25px;color:var(--purple)}
.lessonVideoEntry{width:min(940px,92vw);margin:0 auto 18px;padding:12px 16px}
.lessonVideoEntry>img{flex:0 0 auto;width:180px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.lessonVideoEntry>span>small:first-child{font-size:10px;letter-spacing:.1em;color:var(--purple);margin:0 0 5px}
.videoPage{min-height:100svh;background:radial-gradient(circle at 90% 3%,#ffe9f2,transparent 35%),linear-gradient(160deg,#eef9f4,#f3edff 75%)}
.videoLibraryMain,.lessonVideoMain{width:min(1040px,94vw);margin:auto;padding:38px 0 calc(42px + env(safe-area-inset-bottom))}
.videoLibraryMain .pageTitle,.lessonVideoMain .pageTitle{font-size:clamp(31px,4.8vw,55px);line-height:1.1}
.videoLibraryMain .pageTitle small,.lessonVideoMain .pageTitle small{color:#816ca3;font-size:11px;line-height:1.4;text-shadow:none;letter-spacing:.14em}
.videoIntro{text-align:center;color:var(--muted);font-size:15px;font-weight:800;line-height:1.5;margin:14px auto 25px}
.videoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lessonVideoCard{padding:0;border:3px solid white;border-radius:26px;background:#fff;box-shadow:var(--soft-shadow);overflow:hidden;cursor:pointer;text-align:left;transition:transform .18s ease,box-shadow .18s ease}
.lessonVideoCard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.videoPoster{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#d9eee3}
.videoPoster>img{display:block;width:100%;height:100%;object-fit:cover}
.videoPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:59px;height:59px;padding-left:4px;border:3px solid #fff;border-radius:50%;background:#7652dfe6;color:white;font-size:24px;box-shadow:0 6px 22px #34255f40}
.videoDuration{position:absolute;right:10px;bottom:10px;padding:4px 9px;border-radius:9px;background:#34255fd9;color:white;font-size:12px;font-weight:900}
.videoCardCopy{display:block;padding:16px 18px 19px}
.videoCardCopy strong{display:block;font-family:"Baloo 2",Nunito,sans-serif;font-size:25px;line-height:1.2;color:var(--purple-deep)}
.videoCardCopy small{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:var(--muted)}
.lessonVideoFrame{width:100%;aspect-ratio:16/9;overflow:hidden;border:4px solid white;border-radius:27px;background:#171323;box-shadow:var(--shadow)}
.lessonVideoFrame video{display:block;width:100%;height:100%;background:#171323}
.videoSummary{max-width:72ch;margin:21px auto;text-align:center;line-height:1.7;color:#6d6081;font-size:14px}
.videoActions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.videoBackLink,.videoLessonLink{display:block;padding:12px 17px;border:2px solid #fff;border-radius:17px;background:#fff;color:var(--purple-deep);font-weight:900;font-size:13px;text-decoration:none;cursor:pointer;box-shadow:0 5px 15px #7652df13}
.videoLessonLink{background:#f5edff}
.videoStatus{padding:14px 18px;border-radius:16px;background:#fff1f5;color:#8d3957;font-size:14px;line-height:1.5}
.videoStatus button{border:0;border-radius:10px;background:#7652df;color:white;padding:7px 12px;margin-left:6px;cursor:pointer}
@media(max-width:620px){.videoGrid{grid-template-columns:1fr;gap:18px}.videoLibraryMain,.lessonVideoMain{padding-top:25px}.videoIntro{font-size:13px;margin-bottom:20px}.lessonVideoFrame{border-width:3px;border-radius:17px}}
@media(max-width:520px){.brand{gap:7px}.brandIdentity{padding:4px 8px 4px 4px;gap:6px;border-radius:16px}.brandLogo{width:43px;height:43px;border-radius:9px}.brandIdentity .brandText{font-size:13px}.brandIdentity .brandText small{font-size:8px;letter-spacing:.1em}.gameBrandLogo{width:24px;height:24px}.gameMeta strong{gap:5px}.videoLibraryEntry{margin-top:17px;padding:12px 14px;gap:12px}.videoLibraryEntry strong{font-size:22px}.videoLibraryEntry small{font-size:10px}.videoEntryPlay{width:44px;height:44px;font-size:19px}.lessonVideoEntry{gap:10px;padding:9px;margin-bottom:14px}.lessonVideoEntry>img{width:110px;border-radius:11px}.lessonVideoEntry strong{font-size:18px}.lessonVideoEntry small{font-size:10px}.lessonVideoEntry>span>small:first-child{font-size:8px;letter-spacing:.02em}.lessonVideoEntry .videoEntryPlay{width:32px;height:32px;font-size:14px}.videoCardCopy strong{font-size:23px}.videoSummary{font-size:12px}.videoBackLink,.videoLessonLink{font-size:12px;padding:10px 13px}}

/* One path for each class: school year → month → weekly video and games. */
.calendarPage{min-height:100svh;color:#44345f;background:radial-gradient(ellipse at 100% 0,#f0e8ff,transparent 45%),radial-gradient(ellipse at 0 80%,#e0f4dc,transparent 50%),#f8f8ef}
.calendarPage.level-mercury{background:radial-gradient(ellipse at 100% 0,#ffebd6,transparent 45%),radial-gradient(ellipse at 0 80%,#e0f4ee,transparent 50%),#f8f8ef}
.calendarMain{width:min(1020px,92vw);margin:auto;padding:13px 0 calc(40px + env(safe-area-inset-bottom))}
.calendarBreadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;width:100%;font-size:12px;font-weight:800;color:#77698a;line-height:1.6;margin-bottom:19px}
.calendarBreadcrumb a{color:#655287;text-decoration:none;padding:5px 0}
.calendarBreadcrumb a:hover{text-decoration:underline}
.calendarBreadcrumb [aria-current]{color:#44345f}
.calendarHero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 0 29px}
.calendarEyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:#698471;margin:0 0 8px}
.calendarHero h1{font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.05;color:#514070;margin:0}
.calendarHero p:last-child{font-size:15px;font-weight:700;color:#82728f;line-height:1.5;margin:10px 0 0}
.calendarMascot{width:116px;flex:0 0 auto;filter:drop-shadow(0 9px 11px #71569c25)}
.monthGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.monthCard{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:200px;padding:18px 21px 15px;border:2px solid #fff;border-radius:25px;background:#fffaf0;box-shadow:0 6px 19px #5b466d0c;color:#54416f;text-align:left;font-family:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s}
.monthCard:nth-child(3n+2){background:#f0f6ed}.monthCard:nth-child(3n){background:#f4effb}
.monthCard:hover{transform:translateY(-4px);box-shadow:0 10px 25px #5b466d1b}
.monthCardTop{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-weight:800;font-size:11px;color:#9b8da6}
.monthCardTop>span:last-child{color:#c6b2db}
.monthCard strong{display:flex;align-items:baseline;gap:10px;font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;font-size:51px;line-height:1.2;margin:9px 0 4px}
.monthCard strong small{font-family:Nunito,sans-serif;font-size:17px;font-weight:800}
.monthCardSummary{display:block;flex:1;font-size:12px;font-weight:800;color:#918299;line-height:1.6}
.monthCardOpen{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:13px;padding-top:10px;border-top:1px solid #856b9c19;font-size:11px;font-weight:900;color:#8e759f}
.monthCardOpen>span{font-size:19px;line-height:1}
.monthCard.currentMonth{background:#fff4c9;border-color:#edcc73;box-shadow:0 6px 20px #d5b85c18}
.monthCardTop .monthCurrent{font-size:9px;font-weight:900;letter-spacing:.04em;border-radius:8px;padding:5px 7px;background:#f3d76f;color:#796025}
.calendarFootnote{font-size:12px;line-height:1.6;color:#8d7c95;font-weight:700;text-align:center;margin:25px 0 0}
.monthHero{margin:6px 0 25px}
.changeMonth{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:11px 15px;border:1px solid #e5dbee;border-radius:14px;background:#fff8;font-size:12px;font-weight:900;text-decoration:none;color:#76628e}
.changeMonth svg{width:17px;height:17px}
.monthWeeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.monthWeekCard{min-width:0;padding:21px;border:2px solid #fff;border-radius:27px;background:#fff;box-shadow:0 6px 22px #5140700b}
.monthWeekCard.currentWeekCard{border-color:#e5cd7f}
.monthWeekTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.weekPill{display:inline-block;padding:5px 11px;border-radius:10px;background:#f0eafa;font-size:12px;font-weight:900;color:#8b6caf}
.weekCurrent{font-size:9px;font-weight:900;letter-spacing:.04em;color:#a38533}
.monthWeekCard h2{font-family:"Baloo 2",Nunito,sans-serif;font-size:27px;font-weight:800;line-height:1.2;color:#55416f;margin:14px 0 7px}
.weekVocabulary{font-size:12px;line-height:1.6;color:#9b8ba5;margin:0 0 17px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:38px}
.weekVideoButton{display:block;width:100%;padding:0;overflow:hidden;border:1px solid #eee7f5;border-radius:18px;background:#faf7fe;color:#7a60a2;font-family:inherit;font-weight:900;cursor:pointer;text-align:left}
.weekVideoButton:hover .videoPlay{background:#8961e6}
.weekVideoButton .videoPlay{width:47px;height:47px;font-size:19px;border-width:2px}
.weekVideoLabel{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:12px}
.weekVideoPending{display:flex;align-items:center;justify-content:center;gap:10px;background:#f8f6fa;border:1px dashed #e1d9e9;border-radius:16px;padding:17px 12px;font-size:12px;font-weight:800;color:#b0a3bd;margin:0}
.weekVideoPending>span{font-size:24px;line-height:1}
.weekGamesButton{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:14px;padding:14px 16px;border:0;border-radius:14px;background:#e8f3e5;color:#517c56;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}
.weekGamesButton:hover{background:#dfefd9}
.weekGamesButton>span:last-child{font-size:20px;line-height:1}
.weekGamesButton.videoOnlyWeek{background:#f3eef9;color:#8e76a6}
.weekGamesPending{margin:9px 0 0;text-align:center;font-size:11px;font-weight:700;color:#aa9cb5}
.monthPager{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:28px;font-size:12px;font-weight:800;color:#b0a1bc}
.monthPager a{min-height:44px;display:flex;align-items:center;text-decoration:none;color:#8b779e}
.monthEmpty{padding:50px 20px;text-align:center;border:2px dashed #e2d9e9;border-radius:27px;background:#fff7}
.monthEmpty>span{font-size:50px;line-height:1;color:#bdcfa7}
.monthEmpty h2{font-family:"Baloo 2",Nunito,sans-serif;font-size:27px;color:#7e6b91;margin:15px 0 8px}
.monthEmpty p{font-size:14px;line-height:1.6;color:#a192ad;margin:0}
.monthEmpty a{display:inline-block;color:#7a6693;font-size:13px;font-weight:800;margin-top:23px;padding:10px}
.weekMain>.calendarBreadcrumb{width:min(940px,92vw);margin-bottom:16px}
.weekSectionTitle{width:min(940px,92vw);font-family:"Baloo 2",Nunito,sans-serif;font-size:22px;font-weight:800;color:#645184;margin:0 0 13px}
.weekContentPending{width:min(940px,92vw);padding:24px;border:2px dashed #d7cbe8;border-radius:22px;text-align:center;background:#fff9;color:#8c789c}
.weekContentPending h2{font-family:"Baloo 2",Nunito,sans-serif;font-size:24px;margin:0 0 7px}
.weekContentPending p{font-size:13px;line-height:1.6;margin:0}
.calendarPage button:focus-visible,.calendarPage a:focus-visible,.calendarBreadcrumb a:focus-visible{outline:3px solid #8961ce;outline-offset:4px}
@media(max-width:650px){.calendarMain{padding-top:8px}.calendarBreadcrumb{font-size:11px;margin-bottom:15px}.calendarHero{gap:12px;margin-bottom:23px}.calendarHero p:last-child{font-size:13px}.calendarMascot{width:90px}.monthGrid{gap:12px}.monthCard{padding:13px 12px 11px;border-radius:20px;min-height:174px}.monthCard strong{font-size:41px;gap:6px}.monthCard strong small{font-size:14px}.monthCardSummary{font-size:10px}.monthCardTop{font-size:10px}.monthCardTop .monthCurrent{font-size:7px;padding:4px}.monthCardOpen{font-size:10px;margin-top:9px;padding-top:9px}.calendarFootnote{font-size:11px}.monthWeeks{grid-template-columns:1fr;gap:19px}.monthWeekCard{padding:18px}.monthHero .calendarEyebrow{font-size:9px}.changeMonth{font-size:11px;padding:10px;gap:6px}.changeMonth svg{width:15px;height:15px}.monthEmpty{padding:35px 15px}.monthEmpty p{font-size:12px}.weekSectionTitle{font-size:20px}.weekContentPending{padding:19px}}
@media(max-width:400px){.monthGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.monthCard{min-height:174px}.calendarMascot{width:74px}.calendarHero h1{font-size:34px}.calendarHero p:last-child{font-size:12px}.calendarEyebrow{font-size:9px}.changeMonth{font-size:10px}.monthCardTop .monthCurrent{font-size:8px}.calendarBreadcrumb{gap:7px}}
@media(prefers-reduced-motion:reduce){.monthCard{transition:none}.monthCard:hover{transform:none}}