/* FINAL VISUAL DIRECTION — edit these tokens to change the playroom palette. */
:root{--playroom-bg:#100d16;--playroom-panel:#21182d;--playroom-line:#614579;--playroom-accent:#bf91ff;--playroom-copy:#f9f0ff}
body{background-color:var(--playroom-bg)}header{box-shadow:0 10px 35px #09060d44}.wrap{max-width:1250px}.hero{padding-top:65px;padding-bottom:85px;gap:55px}.hero h1{font-size:clamp(48px,5.3vw,76px);line-height:1.02;letter-spacing:-3px}.hero .eyebrow{color:#cfa8ff}.hero .intro{font-size:17px;line-height:1.9;max-width:470px}.hero-art{isolation:isolate}.hero-art:after{content:'';position:absolute;inset:-35px;background:radial-gradient(ellipse,#9465d52a,transparent 70%);z-index:-2}.hero-art>img{border-radius:34px 75px 40px 65px;object-position:center}.art-sticker{font-size:12px}.ribbon{font-size:13px;letter-spacing:.3px}.play-section{background:radial-gradient(ellipse at 20% 30%,#4f286421,transparent 65%);padding-top:90px}.section-heading h2{font-size:clamp(36px,4.7vw,59px);letter-spacing:-2.3px}.games{gap:24px}.game-card{overflow:hidden;min-width:0;padding:26px;border:1px solid #74558b55;background:linear-gradient(145deg,#3b264b,#271d36);border-radius:29px;box-shadow:0 9px 0 #08060b;isolation:isolate}.game-card:before{content:'';position:absolute;width:230px;height:180px;background:radial-gradient(ellipse,#caa5ff14,transparent 70%);top:-30px;right:-25px;z-index:-1}.game-card:nth-child(2){background:linear-gradient(145deg,#253d3b,#202331)}.game-card:nth-child(3){background:linear-gradient(145deg,#49305b,#281b3c)}.game-card:nth-child(4){background:linear-gradient(145deg,#482637,#2e1c30)}.game-card:nth-child(5){background:linear-gradient(145deg,#23374c,#211c34)}.game-card:nth-child(6){background:linear-gradient(145deg,#3d304a,#271d34)}.game-card .game-art{height:170px;margin-bottom:13px}.game-card strong{font-size:26px;letter-spacing:-1px}.game-card .game-tag{font-size:9px;letter-spacing:2px;background:#ffffff0b;align-self:start;border:1px solid #d9c6ee22}.game-card>span:not(.game-art):not(.game-tag):not(.game-arrow){font-size:12px;line-height:1.7;max-width:85%;color:#d5c3e1}.game-arrow{bottom:25px;right:24px;background:#ffffff12;border:1px solid #fff2;width:37px;height:37px;color:#f3e6ff}.game-art.costume-teaser{gap:0}.costume-teaser img{width:110px;height:140px;object-fit:cover;border-width:5px;box-shadow:0 10px 25px #0004}.play-note{font-size:11px;letter-spacing:.2px;margin-top:35px}.math-section{padding-top:60px}.math-panel{border-radius:38px;padding:50px;background:radial-gradient(ellipse at 95% 0,#7951a233,transparent 60%),linear-gradient(140deg,#281a35,#1b1525);box-shadow:0 18px 60px #0002;border-color:#6c4b84}.math-panel .section-heading h2{font-size:clamp(35px,4.2vw,54px)}.math-panel .section-heading{gap:50px}.math-form{background:#100c1777;border:1px solid #58406955;padding:25px;border-radius:24px}.operation-picks label:has(input:checked){background:#53336d;border-color:#be91e3;box-shadow:inset 0 0 0 1px #be91e333}.math-form .math-field>strong{font-size:17px;line-height:1.6}.math-form .math-field>small{font-size:11px;font-weight:600;color:#bca3cc}.math-intro{font-size:13px;max-width:390px}.friends-section{background:radial-gradient(ellipse at 50% 60%,#51306b55,transparent 70%),#1d1429}.friend-image img{filter:drop-shadow(0 20px 25px #0003)}.bonz .friend-image img{border-radius:25px;object-fit:contain}.parent-panel{background:linear-gradient(135deg,#2d1c3b,#1c1525)}#watch{padding-top:65px}.video-card{border-radius:24px}.video-copy h3{letter-spacing:-.4px}.video-card:nth-child(1 of .video-card:not([hidden])) .thumbnail img{object-fit:contain;background:#120e1b}.abc-card-art{font-size:73px;font-weight:900;letter-spacing:-15px;color:#d7b1ff;text-shadow:3px 6px 0 #0002;transform:rotate(-7deg)}.abc-stage{padding-bottom:10px}.abc-picture{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#70419b33,transparent 70%);border-radius:30px;margin:20px auto;max-width:330px}.abc-big-letter{font-size:110px;font-weight:900;line-height:1.3;color:#dfbbff;text-shadow:0 5px 0 #63398b}.abc-emoji{font-size:85px}.abc-word{font-size:24px;font-weight:900;margin-top:12px}.abc-options{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.abc-letter{width:90px;height:90px;background:linear-gradient(140deg,#634188,#3c2853);border:2px solid #b48bd6;color:#f6e9ff;border-radius:22px;font-size:39px;font-weight:900;box-shadow:0 6px 0 #08060c}.abc-letter.correct{background:#315446;border-color:#9de0b4}.games>.game-card:nth-last-child(-n+2){grid-column:span 2}
@media(max-width:1000px){.nav-links{gap:16px}.hero{gap:28px}.hero h1{font-size:53px}.game-card{padding:22px}.game-card strong{font-size:22px}.costume-teaser img{width:85px;height:120px}.game-card .game-art{height:145px}.math-panel{padding:35px}}@media(max-width:700px){.hero{padding-top:43px;padding-bottom:50px;gap:40px}.hero h1{font-size:52px;letter-spacing:-2px}.hero .intro{font-size:15px}.hero-art>img{border-radius:30px 60px 30px 50px}.ribbon{font-size:10px}.nav-links{gap:6px;font-size:10px}.games{gap:19px}.games>.game-card,.games>.game-card:nth-last-child(-n+2){grid-column:auto;padding:22px 20px 22px 145px;min-height:172px;transform:none;margin:0}.game-card .game-art{height:140px;margin-bottom:0}.game-card strong{font-size:22px}.game-card>span:not(.game-art):not(.game-tag):not(.game-arrow){font-size:11px;max-width:100%}.costume-teaser img{width:85px;height:110px}.math-section{padding-top:20px}.math-panel{padding:28px 18px;border-radius:28px}.math-panel .section-heading{gap:23px}.math-form{padding:18px 13px;border-radius:19px}.operation-picks label{padding:9px 10px}.math-panel .section-heading h2{font-size:37px}.section-heading h2{font-size:40px}.hero .eyebrow{font-size:8px;letter-spacing:1.6px}.abc-letter{width:70px;height:75px;font-size:30px}.abc-big-letter{font-size:90px}.friends-section{border-radius:35px}.section{padding-bottom:60px}}@media(max-width:390px){.hero h1{font-size:45px}.nav-links{font-size:9px;gap:5px}.games>.game-card,.games>.game-card:nth-last-child(-n+2){padding-left:120px}.game-card strong{font-size:20px}.hero .button{font-size:12px}}

.reward-card{display:flex;align-items:center;flex-direction:column;gap:15px;padding:20px;border:1px solid #74538c;border-radius:20px;margin:20px auto;max-width:560px}.reward-card video{width:100%;border-radius:15px;background:#100b17}.reward-card>strong{font-size:18px}

.music-start-hint{position:fixed;bottom:75px;right:18px;z-index:20;border:1px solid #c09aea;border-radius:20px;background:#39244f;color:#fff;padding:13px 18px;box-shadow:0 8px 30px #0005;font-size:12px;font-weight:900}.music-start-hint[hidden]{display:none!important}@media(max-width:700px){.music-start-hint{right:12px;bottom:65px;font-size:11px}}

.reward-popup{width:min(540px,94vw);background:radial-gradient(ellipse at top,#4e2e6c,#1c1426 70%);text-align:center;position:relative;padding:30px;border:1px solid #ae7cd0}.reward-close{position:absolute;right:13px;top:13px}.reward-popup .eyebrow{font-size:9px;margin:12px 35px 18px}.reward-portrait{height:230px;border-radius:30px;overflow:hidden;margin:15px auto;width:100%;border:2px solid #9c71b955}.reward-portrait img{width:100%;height:100%;object-fit:cover;object-position:center}.reward-popup-stars{color:#ffdf8a;font-size:25px;letter-spacing:7px;margin:10px 0}.reward-popup h2{font-size:37px;margin:18px 0}.reward-character-message{font-size:14px;color:#ddc9ec;line-height:1.8;margin:15px 0 24px}.reward-video-slot video{width:100%;border-radius:15px;margin:15px 0}.reward-video-slot .button{margin-bottom:15px}@media(max-width:700px){.reward-portrait{height:180px}.reward-popup h2{font-size:30px}.reward-popup{padding:23px}}

.game-welcome{gap:30px;margin:25px auto 35px;max-width:650px}.game-welcome img{height:230px;width:230px;object-fit:cover;border-radius:30px;box-shadow:0 12px 40px #0004;transform:rotate(-4deg);border:4px solid #d7bcf133}.game-welcome p{font-size:27px;max-width:240px;line-height:1.3}.game-card .illustrated-game-art{height:195px;transform:none;position:relative;left:auto;top:auto;max-width:100%;width:100%;margin:0 auto 16px}.illustrated-game-art img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:22px;box-shadow:0 9px 20px #0003;transform:rotate(-3deg);transition:transform .2s}.game-card:hover .illustrated-game-art img{transform:translateY(-4px) rotate(1deg)}@media(max-width:700px){.game-welcome{gap:18px}.game-welcome img{width:155px;height:155px;border-radius:23px}.game-welcome p{font-size:20px;max-width:150px}.game-card .illustrated-game-art{position:absolute;left:12px;top:25px;width:115px;height:120px;margin:0}.illustrated-game-art img{border-radius:17px;width:100%;height:100%;object-fit:cover}}@media(max-width:390px){.game-card .illustrated-game-art{width:95px;height:110px;left:10px}.game-welcome img{width:130px;height:130px}.game-welcome p{font-size:18px}}

.hero-copy,.hero-art{min-width:0}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.hero-actions{align-items:center}.hero-maths{border-color:#9873b9!important;background:#382449!important}.math-back{display:grid;place-items:center;background:#3c2850;color:#f8edff;border:1px solid #9470b0;border-radius:50%;width:44px;height:44px;flex:0 0 44px;font-size:24px}.missing-answer-form{flex-direction:column;align-items:center}.missing-equation{display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;font-size:clamp(27px,5vw,49px);font-weight:900;margin:20px 0}.math-answer-row .math-box-answer{width:105px;height:95px;border:3px solid #d0a7ff;border-radius:17px;background:#2d1c3d;font-size:42px;padding:10px}.math-box-answer[readonly]{background:#38234a;border-color:#8e70a6}.missing-answer-form>.button{margin-top:12px}@media(max-width:900px){.hero{grid-template-columns:1fr;gap:45px}.hero-copy{max-width:650px}.hero-art{width:min(600px,100%);margin:auto}.hero h1{font-size:clamp(43px,7vw,65px)}}@media(max-width:700px){.missing-equation{gap:10px;font-size:29px}.math-answer-row .math-box-answer{width:78px;height:75px;font-size:30px}.math-session-top{flex-wrap:wrap}.math-back{width:40px;height:40px;flex-basis:40px}.hero-actions .button{font-size:12px}}

.math-skip{border:0;background:none;color:#ccb4df;padding:12px;font-size:12px;text-decoration:underline}.math-skip[hidden]{display:none!important}

.math-panel .math-illustrated-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:35px;align-items:center;margin-bottom:38px}.math-illustrated-heading .math-intro{margin-top:23px;max-width:510px}.math-story-visual{position:relative;min-width:0;transform:rotate(2deg)}.math-story-visual img{width:100%;height:auto;border:5px solid #b991dc33;border-radius:30px 55px 30px 45px;box-shadow:0 15px 40px #0003}.math-story-visual>span{position:absolute;bottom:-12px;left:15px;background:#67428b;color:#fff;border:1px solid #b992dc;padding:10px 15px;border-radius:15px;font-size:11px;font-weight:900;transform:rotate(-4deg)}.math-skill-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:23px}.math-skill-chips span{font-size:10px;font-weight:800;border:1px solid #8a65a755;color:#d9bced;background:#ffffff06;border-radius:30px;padding:7px 10px}.page-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.page-choice{font-size:10px}.color-swatches{gap:10px}.coloring-tools .save-color{font-size:12px}@media(max-width:850px){.math-panel .math-illustrated-heading{grid-template-columns:1fr;gap:30px}.math-story-visual{max-width:520px;margin:0 auto 12px}.math-illustrated-heading .math-intro{font-size:13px}.math-skill-chips span{font-size:10px}}@media(max-width:700px){.page-choices{display:flex;overflow-x:auto;gap:9px;padding:4px 2px 10px;scroll-snap-type:x mandatory}.page-choice{min-width:85px;flex:0 0 85px;scroll-snap-align:start;min-height:99px}.page-choice img{height:64px}.color-swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.math-panel .math-illustrated-heading{gap:25px}.math-story-visual img{border-radius:23px 40px 23px 32px}.math-story-visual>span{font-size:10px}.math-skill-chips{gap:6px}.math-skill-chips span{padding:6px 8px;font-size:9px}}

/* v20: mark the child's incorrect answer directly, keeping the solution readable. */
.math-answer-incorrect{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;min-height:2.1em;padding:.1em .4em;margin:.15em .3em;border:2px solid #ff6e83;border-radius:50%;color:#fff0f2;font-weight:800;background:#ff496214}
.math-review-row.incorrect{border-color:#a94e67}
.math-review-row.incorrect>span:first-child{color:#ff8294;font-weight:800}

/* Keep modal panels anchored to the viewport, including stacked rewards. */
dialog:modal{position:fixed;inset:0;margin:auto;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}


.reward-video-slot video{display:block;width:100%;aspect-ratio:12/7;object-fit:contain;background:#17121e}

/* Equal visible character height, using alpha bounds without altering source artwork. */
.friends-grid{align-items:start}
.friend:nth-child(2){margin-top:0}
.friend-image{height:235px;display:flex;align-items:center;justify-content:center;overflow:visible;background:none}
.friend-image:before{display:none}
.friend-cutout{height:100%;width:100%;max-width:100%;overflow:visible;filter:drop-shadow(0 12px 16px #0003);transition:transform .25s}
.friend:hover .friend-cutout{transform:translateY(-6px)}
@media(max-width:700px){.friend-image{height:220px}}

/* Reserve playback button space so loading cannot move the close/continue targets. */
.reward-video-slot>button[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}
.reward-popup{animation:none!important;transition:none!important}