/* Shared Babyface Playworld: vivid shell, calm reading/drawing surfaces. */
@media screen {
:root{--world-blue:#0757d9;--world-deep:#063d9b;--world-ink:#153266;--world-lemon:#edff37;--world-pink:#ffacd6;--world-cyan:#8deaff;--world-shadow:#c8d730}
body,body[data-page="games"]{background:linear-gradient(145deg,#fff2f8 0%,#ffd6e9 48%,#e4edff 100%);color:var(--world-ink)}
.main{max-width:1440px;margin-inline:auto}
.main>h1,.heading-row h1{color:var(--world-ink);letter-spacing:-.7px}
.main>.eyebrow,.heading-row .eyebrow{display:inline-block;background:var(--world-lemon);color:var(--world-ink);padding:9px 13px;border-radius:11px;box-shadow:0 3px 0 var(--world-shadow);margin-bottom:15px}
.page-intro,.heading-row p{color:#415273;line-height:1.6}
.topbar,body[data-page="games"] .topbar{background:#fff7fbee;border-bottom:2px solid #f5c3de}
.sidebar,body[data-page="games"] .sidebar{background:linear-gradient(180deg,#fff5fb,#ffd9ed);border-color:#f2bdd7}
.sidebar .nav button{border-color:#fff;box-shadow:0 4px 0 #e8b6d0;color:var(--world-ink)}
.sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active,body[data-page="games"] .sidebar .nav button.active{background:var(--world-blue);border-color:var(--world-blue);color:#fff;box-shadow:0 5px 0 var(--world-deep)}
.sidebar .nav button.active .nav-icon,body[data-page="games"] .sidebar .nav button.active .nav-icon{background:var(--world-lemon);border-color:var(--world-lemon)}
.sidebar .nav button.active .nav-icon .icon,body[data-page="games"] .sidebar .nav button.active .nav-icon .icon{color:var(--world-ink)}
.sidebar .side-note{background:var(--world-lemon);border-color:#fff;box-shadow:0 5px 0 var(--world-shadow);color:var(--world-ink)}
.age-control button.selected,body[data-page="games"] .age-control button.selected{background:var(--world-lemon);color:var(--world-ink);box-shadow:0 3px 0 var(--world-shadow)}
.primary,.games-invite .primary,.art-feature .primary{background:var(--world-lemon);color:var(--world-ink);border:2px solid #f7ffab;box-shadow:0 5px 0 var(--world-shadow);border-radius:17px;min-height:48px;font-weight:900}
.primary:hover{background:#e5f82c;color:var(--world-ink)}
.secondary{background:#fff;border:2px solid #aec8f7;color:var(--world-deep);box-shadow:0 3px 0 #cbdcf7;min-height:46px;border-radius:15px}
.chip.selected,.parent-tabs .chip.selected,body[data-page="library"] .chip.selected{background:var(--world-blue);color:#fff;border-color:var(--world-blue);box-shadow:0 3px 0 var(--world-deep)}
.panel,.board,.journey,.family-card,.product,.stat{border:2px solid #fff;box-shadow:0 6px 0 #edbdd54d,0 10px 25px #593e7510;border-radius:26px}
.text-btn{color:var(--world-deep);min-height:44px}
.notice,.offline{background:#f4f8ff;border:2px solid #bfd5fc;color:var(--world-ink);border-radius:18px}
.footer{color:#465578}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #152e68;outline-offset:4px}
/* Home: the supplied cast stays intact; the frame becomes a blue stage. */
.cast-banner{background:linear-gradient(120deg,#063cab,#0974e8);border:3px solid white;box-shadow:0 8px 0 #df9abc55,0 14px 30px #3460a31f;border-radius:30px}
.cast-copy,.cast-copy h2,.cast-copy p{color:#fff}
.cast-copy .pill{background:var(--world-pink);color:var(--world-ink);border-color:#ffd9ec}
.cast-copy .primary{background:var(--world-lemon);color:var(--world-ink)}
.cast-banner[data-scene="1"]{background:linear-gradient(120deg,#063cab,#0974e8)}
.cast-banner[data-scene="2"]{background:linear-gradient(120deg,#a51d6b,#dd438f)}
.canvas-toolbar .primary{background:var(--world-lemon);color:var(--world-ink);box-shadow:0 5px 0 var(--world-shadow)}
.art-feature .primary:hover,.cast-copy .primary:hover{background:#e5f82c;color:var(--world-ink)}
.cast-tabs button{color:#fff;background:#ffffff16;border:1px solid #ffffff88;min-height:44px}
.cast-tabs button[aria-pressed="true"]{background:var(--world-lemon);color:var(--world-ink);border-color:var(--world-lemon)}
.cast-caption{background:var(--world-lemon);color:var(--world-ink)}
.activity-card{background:#fff;border:2px solid white;box-shadow:0 6px 0 #e9b7d5;border-radius:25px}
.activity-card .art-symbol{background:var(--world-blue);color:white;box-shadow:0 5px 0 var(--world-deep)}
.activity-card:nth-child(2) .art-symbol{background:var(--world-pink);color:var(--world-ink);box-shadow:0 5px 0 #dc7cae}
.activity-card:nth-child(3) .art-symbol{background:var(--world-lemon);color:var(--world-ink);box-shadow:0 5px 0 var(--world-shadow)}
.activity-card:nth-child(4) .art-symbol{background:var(--world-cyan);color:var(--world-ink);box-shadow:0 5px 0 #58bace}
.games-invite{background:linear-gradient(115deg,#0644b9,#057de8);border:3px solid #fff;box-shadow:0 6px 0 #d797bf66}
.games-invite h2,.games-invite .eyebrow,.games-invite p{color:#fff}
/* Discovery library and lessons. */
body[data-page="library"]{background:linear-gradient(145deg,#fff2f8,#ffd6e9 48%,#e4edff)}
body[data-page="library"] .filters{background:#fff7fc;border:2px solid white;box-shadow:0 5px 0 #eac1d7}
body[data-page="library"] .lesson-card{--tile:#0757d9;--tile-dark:#063d9b;border:2px solid white}
body[data-page="library"] .lesson-card:nth-child(4n+2){--tile:#ffacd6;--tile-dark:#ad3c76}
body[data-page="library"] .lesson-card:nth-child(4n+3){--tile:#edff37;--tile-dark:#87941b}
body[data-page="library"] .lesson-card:nth-child(4n+4){--tile:#8deaff;--tile-dark:#298297}
body[data-page="library"] .lesson-card:not(:nth-child(4n+1)) .lesson-symbol{color:var(--world-ink);text-shadow:0 3px 0 #ffffff88}
body[data-page="library"] .lesson-card:not(:nth-child(4n+1)) .lesson-play{color:var(--world-ink)}
.learning-layout .board{border-top:8px solid var(--world-blue);background:#fff}
.learning-layout .host{background:linear-gradient(150deg,#e2f4ff,#ffdeee);border:2px solid white;border-radius:24px}
.answer{background:#edff68;color:var(--world-ink);border:2px solid #bfd136;box-shadow:0 5px 0 #bccd2c}
.answer:nth-child(2n){background:#ffc2df;border-color:#e994bf;box-shadow:0 5px 0 #dc8bb5}
.big-number{color:var(--world-blue);text-shadow:0 5px 0 #d6e5ff}
.feedback{background:#f0f6ff;color:var(--world-ink);border-radius:16px}
.trace-wrap,.color-stage{background:#fff;border:3px solid #b3d0ff;border-radius:22px;overflow:hidden}
/* Art stays white where the child draws, with candy-colored frames. */
.art-overview .art-feature{background:linear-gradient(125deg,#0757d9,#057de8);border:3px solid white;box-shadow:0 7px 0 #d6a1c5}
.art-overview .art-feature h2,.art-overview .art-feature .subtle{color:#fff}
.art-overview .art-feature:nth-child(2){background:linear-gradient(125deg,#bc2376,#e2449b)}
.art-paper{background:#fff;border-radius:22px;box-shadow:0 6px 0 #00328435}
.art-family{background:#fff5cf;border-color:#fff}
.gallery figure{background:white;border:3px solid #fff;border-radius:22px;box-shadow:0 5px 0 #e8bbd5}
/* Parent/shop data keeps calm white surfaces and blue/lemon landmarks. */
body[data-page="parents"] .panel,body[data-page="shop"] .product{border-top:7px solid var(--world-blue);background:#fff}
.parent-grid .stat{background:#fff}.parent-grid .stat:nth-child(2){background:#fffbc7}.parent-grid .stat:nth-child(3){background:#ffe4f1}
.stat strong{color:var(--world-blue)}
.product-art{background:var(--world-blue);color:#fff;border-radius:20px}
.product:nth-child(2) .product-art{background:var(--world-pink);color:var(--world-ink)}
.product:nth-child(3) .product-art{background:var(--world-lemon);color:var(--world-ink)}
.comparison th{background:#e8f1ff;color:var(--world-ink)}
/* Actual play screen, not only the game-selection banners. */
body[data-page="games"] .kid-game-board{background:radial-gradient(ellipse at 100% 0,#148df0,transparent 65%),#0757d9;border:3px solid #fff;border-radius:30px;padding:24px;box-shadow:0 8px 0 #e3a5c7,0 16px 28px #14356d22}
.kid-game-board .game-options .chip{background:#fff;color:var(--world-deep);border:2px solid #fff;box-shadow:0 3px 0 #00378c}
.kid-game-board .game-options .chip.selected{background:var(--world-lemon);color:var(--world-ink);border-color:#f7ff9c;box-shadow:0 4px 0 var(--world-shadow)}
.kid-game-board .game-instruction{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;max-width:100%;min-height:210px;padding:24px 46% 24px 22px;border:2px solid #ffffffaa;border-radius:24px;background-image:linear-gradient(90deg,#0345b6ef,#0345b699 47%,transparent 73%),var(--guide-scene);background-position:center;background-size:cover;overflow:hidden;text-align:left}
.kid-game-board .game-guide{display:none}
.kid-game-board .game-instruction h2{color:#fff;font-size:clamp(22px,2.4vw,30px);line-height:1.22;margin:0 0 16px;text-wrap:balance;text-shadow:0 2px 0 #07368440}
.kid-game-board .game-instruction .secondary{background:#fff;color:#073d99;border-color:white;box-shadow:0 4px 0 #002f8644;display:inline-flex;gap:7px;align-items:center;justify-content:center;max-width:100%;min-height:46px;font-size:14px;padding:10px 12px}
.kid-game-board .game-progress{display:table;margin:20px auto;background:#fff;color:var(--world-deep);padding:9px 18px;border-radius:30px;font-size:16px}
.kid-game-board .game-cell{background:var(--world-lemon);color:#173365;border:3px solid #f9ffac;border-radius:23px;box-shadow:0 6px 0 #b2bf2d;min-height:104px;transition:transform .12s,box-shadow .12s;opacity:1}
.kid-game-board .game-cell:nth-child(4n+2){background:#ffc0df;border-color:#ffe1f0;box-shadow:0 6px 0 #db86b3}
.kid-game-board .game-cell:nth-child(4n+3){background:#94edff;border-color:#cefbff;box-shadow:0 6px 0 #53b5cd}
.kid-game-board .game-cell:nth-child(4n+4){background:#fff;border-color:#e5efff;box-shadow:0 6px 0 #98b8eb}
.kid-game-board .game-cell:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #003b9c}
.kid-game-board .game-cell.game-open{background:#fff7b7;color:#163264;border-color:#fff;box-shadow:0 6px 0 #d4bd62}
.kid-game-board .game-cell.game-matched{background:#b1f2d7;color:#095941;border-color:#e3fff0;box-shadow:0 5px 0 #59b59a}
.kid-game-board .game-cell.game-hint{outline:4px solid white;outline-offset:4px;box-shadow:0 0 0 9px #fa49a5}
.kid-game-board .game-feedback{margin-top:26px;background:#fff;color:var(--world-ink);border-left:7px solid var(--world-lemon);font-size:16px;line-height:1.5;min-height:54px}
.kid-game-board>.text-btn{color:var(--world-ink);background:var(--world-lemon);border-radius:14px;padding:10px 18px;box-shadow:0 4px 0 var(--world-shadow)}
.kid-game-board .count-fruit{background:white;border-color:#ccefff}
.kid-game-board .music-stage .flow-note{color:#fff}
.kid-game-board .music-key{border-color:#fff8;box-shadow:0 6px 0 #013285}
.kid-game-board .music-key.lit{border-color:var(--world-lemon);outline-color:var(--world-lemon)}
.kid-game-board .game-finish h2,.kid-game-board .game-finish p{color:#fff}
.kid-game-board .game-finish-friend{border:4px solid var(--world-lemon)}
@media(max-width:650px){
 .sidebar,body[data-page="games"] .sidebar{background:#fff;border-top:2px solid #f4c1da}
 .sidebar .nav button,.sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active,body[data-page="games"] .sidebar .nav button.active{box-shadow:none;border:0}
 .sidebar .nav button.active,.sidebar .nav button[data-nav="art"].active,body[data-page="games"] .sidebar .nav button.active{background:var(--world-lemon);color:var(--world-ink)}
 .sidebar .nav button.active .nav-icon,body[data-page="games"] .sidebar .nav button.active .nav-icon{background:var(--world-blue);border-color:var(--world-blue)}
 .sidebar .nav button.active .nav-icon .icon,body[data-page="games"] .sidebar .nav button.active .nav-icon .icon{color:#fff}
 .main{padding-left:14px;padding-right:14px}
 .cast-banner{border-radius:25px}.cast-copy{padding:25px 22px}
 .page-intro{font-size:16px}
 body[data-page="games"] .kid-game-board{padding:17px 12px 24px;border-radius:25px}
 .kid-game-board .game-instruction{padding:20px 43% 20px 15px;min-height:225px;border-radius:20px;background-position:60% center}
 .kid-game-board .game-instruction h2{font-size:23px}
 .kid-game-board .game-instruction .secondary{font-size:14px;flex-wrap:wrap;padding:9px 10px}
 .kid-game-board .game-cell{min-height:94px;font-size:46px;border-radius:21px}
 .kid-game-board .game-options{margin-bottom:18px}
 .kid-game-board .game-progress{margin:18px auto}
 .kid-game-board .game-feedback{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.kid-game-board .game-cell{transition:none;transform:none}}
.low-motion .kid-game-board .game-cell{transition:none;transform:none}
}

/* Character picture cards: equal surfaces keep comparison about the pictures. */
.game-round-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:#edff37;color:#153266;padding:16px 20px;border-radius:22px;margin-bottom:20px;scroll-margin-top:20px}
.game-round-bar strong{font-size:1.4rem}.game-round-bar span{font-size:1rem}
.game-round-bar progress{width:100%;height:12px;accent-color:#0757d9;border:0;border-radius:20px;overflow:hidden}
.game-round-bar progress::-webkit-progress-bar{background:#fff9;border-radius:20px}.game-round-bar progress::-webkit-progress-value{background:#0757d9;border-radius:20px}
.game-finish [data-next-round]{display:block;margin:18px auto;min-height:56px}
.round-difficulty{color:#fff;font-size:1rem;font-weight:700;margin:0 0 20px;text-align:center}
.remember-button{display:block;margin:0 auto 22px;min-height:56px}
.puzzle-guide{display:flex;align-items:center;gap:22px;background:#ffffff;border:3px solid #ffacd6;border-radius:26px;padding:18px;margin-bottom:24px;color:#153266}
.puzzle-guide>img{width:100px;height:125px;object-fit:contain;border-radius:18px}.puzzle-guide h1{font-size:30px;margin:5px 0 12px}.puzzle-guide .eyebrow{color:#ab2667}
.puzzle-art{display:inline-block;width:80px;height:80px;flex:0 0 80px;background-size:800px 800px;background-repeat:no-repeat;background-color:white;border-radius:16px;vertical-align:middle}
.puzzle-legend{background:white;border-radius:24px;border:3px solid #8deaff;padding:20px;margin-bottom:24px;color:#153266}.puzzle-legend h2{font-size:20px;margin:0 0 14px}
.symbol-key{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.symbol-key>div{display:flex;flex-direction:column;align-items:center;background:#f2f8ff;border:2px solid #dae8ff;border-radius:18px;padding:8px}.symbol-key strong{font-size:34px;line-height:1.2}
.puzzle-board .puzzle-question{color:white;text-align:center;font-size:25px;margin:20px 0}.puzzle-theme{color:white;text-align:center;font-size:16px}
.puzzle-sequence{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:26px}.puzzle-slot{display:flex;flex-direction:column;align-items:center;background:white;border:4px solid white;border-radius:20px;padding:8px;box-shadow:0 5px 0 #033c9c}.puzzle-slot>span:last-child{font-size:36px;font-weight:900;color:#153266;min-height:48px}
.puzzle-slot.current,.number-puzzle-cell.current{border:4px solid #edff37;box-shadow:0 0 0 3px #edff37,0 6px 0 #adbd23}
.symbol-options{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.puzzle-board .symbol-options .game-cell{min-width:68px;width:80px;min-height:72px;font-size:38px;background:#ffacd6;border:3px solid white;color:#153266;box-shadow:0 5px 0 #b675a5}
.puzzle-board .symbol-options .game-hint{outline:5px solid #edff37;outline-offset:2px;background:#edff37}
.number-puzzle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;background:#fff4;padding:15px;border-radius:24px;max-width:650px;margin:20px auto}.number-puzzle.young{grid-template-columns:repeat(3,minmax(0,1fr))}
.number-puzzle-cell{display:flex;align-items:center;justify-content:center;min-height:94px;background:white;color:#153266;font-size:34px;font-weight:900;border:4px solid white;border-radius:16px;position:relative}.number-puzzle-cell small{position:absolute;right:5px;top:2px;font-size:16px;color:#247737}
.puzzle-target{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;padding:8px;width:fit-content;margin:18px auto;color:#153266;font-size:32px;gap:15px}.puzzle-board .number-options .game-cell{width:60px;min-width:60px;min-height:60px;font-size:27px}
@media(max-width:650px){.puzzle-guide{padding:12px;gap:12px}.puzzle-guide>img{width:65px;height:90px}.puzzle-guide h1{font-size:24px}.puzzle-legend{padding:12px}.symbol-key{gap:6px}.symbol-key>div{padding:3px}.puzzle-sequence{gap:10px}.puzzle-slot{padding:3px}.number-puzzle{gap:6px;padding:8px}.number-puzzle-cell{min-height:62px;font-size:25px;border-width:2px}.number-puzzle-cell .puzzle-art{zoom:.6}.puzzle-board .puzzle-question{font-size:22px}.puzzle-board .symbol-options .game-cell{min-width:50px;width:54px;min-height:60px;font-size:30px}}
.animal-count{max-width:650px;margin:0 auto 18px}
.kid-game-board .animal-grid .game-cell{background:#fffdf8;color:#153266;border:3px solid #fff;box-shadow:0 6px 0 #7bade8;overflow:hidden;padding:8px;min-height:160px}
.animal-picture{display:block;object-fit:contain;object-position:center;border-radius:16px;pointer-events:none;user-select:none}
.kid-game-board .animal-grid .animal-picture{width:100%;height:155px;margin:auto}
.kid-game-board .animal-grid .game-matched{background:#d9f6d4;border-color:#b7ed68;box-shadow:0 6px 0 #6fa653}
.kid-game-board .animal-grid .game-hint{border-color:#edff37;outline:4px solid #edff37;outline-offset:2px}
.kid-game-board .animal-grid .game-cell small{position:absolute;right:9px;top:7px;background:#edff37;color:#153266;border-radius:50%;padding:3px 9px}
.kid-game-board .animal-grid .game-cell{position:relative}
.animal-target{display:flex;align-items:center;justify-content:center;gap:18px;background:#fffdf8;border:3px solid #edff37;border-radius:24px;padding:12px;margin:0 auto 22px;max-width:420px;color:#153266;font-size:18px}
.animal-target .animal-picture{width:86px;height:86px;object-fit:cover}
.kid-game-board .hide-cell .animal-picture{width:100%;height:145px;object-fit:contain;background:#fffdf8}
.kid-game-board .animal-count{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:#fffdf8;border-radius:24px;padding:16px;color:#153266}
.animal-count .animal-picture{width:66px;height:66px;object-fit:cover}
.kid-game-board .music-key{display:flex;align-items:center;flex-direction:column;padding:12px 6px;gap:6px;overflow:hidden}
.kid-game-board .music-key .animal-picture{width:100%;height:140px;background:#fffdf8}
.kid-game-board .music-key.lit{outline:6px solid #edff37;outline-offset:2px;filter:brightness(1.12);transform:translateY(-5px)}
@media(max-width:650px){.kid-game-board .animal-grid .game-cell{min-height:144px;padding:6px}.kid-game-board .animal-grid .animal-picture{height:132px}.kid-game-board .music-key .animal-picture{height:104px}.animal-count .animal-picture{width:52px;height:52px}.kid-game-board .hide-cell .animal-picture{height:120px}}
@media(prefers-reduced-motion:reduce){.kid-game-board .music-key.lit{transform:none}}

/* Illustrated discovery destinations, shared by phone and desktop. */
/* Shared page flow: the navigation has no independent scrolling surface. */
@media(min-width:651px){
 #app{display:grid;grid-template-columns:252px minmax(0,1fr);align-items:stretch;min-height:100vh;background:linear-gradient(120deg,#ffe0ee,#e8e9ff)}
 #app>.sidebar,body[data-page="games"] #app>.sidebar{position:relative;inset:auto;width:auto;height:auto;max-height:none;overflow:visible;align-self:stretch;background:transparent;border:0;box-shadow:none;padding:24px 16px}
 #app>.app-shell{margin-left:0;min-width:0;background:transparent}
 #app>.sidebar .side-note{margin-top:24px}
 #app>.sidebar .signature{margin-top:20px}
 .sidebar .nav{gap:14px;margin-top:24px}
 .sidebar .nav button{min-height:78px;padding:10px;gap:12px;border-radius:22px}
 .sidebar .nav-icon{width:58px;height:58px;flex:0 0 58px;border-radius:18px;overflow:hidden;background:#fff}
 .sidebar .nav-label{font-size:16px;line-height:1.35}
 .app-shell>.topbar{background:#ffffff75;border-bottom:1px solid #fff}
}
@media(min-width:651px) and (max-width:1000px){#app{grid-template-columns:220px minmax(0,1fr)}.sidebar .nav-label{font-size:14px}.sidebar .nav-icon{width:48px;height:48px;flex-basis:48px}}
.nav-friend{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:inherit}
.nav button[data-nav="parents"] .nav-friend{object-position:center}
@media(max-width:650px){.sidebar .nav-icon{overflow:hidden}.sidebar .nav-friend{object-position:center 15%}}
.vivid-lesson .board{background:linear-gradient(160deg,#0746bd,#087eea);border:3px solid white;color:white;box-shadow:0 9px 0 #d795c0}
.vivid-lesson .board h2,.vivid-lesson .board .flow-note,.vivid-lesson .board .instruction{color:white}
.vivid-lesson .board .progress-track{background:#ffffff40}
.vivid-lesson .board .progress-track span{background:#edff37}
.letter-play-stage{display:grid;grid-template-columns:1fr 40%;gap:16px;align-items:center;margin:24px 0}
.letter-play-stage>img{width:100%;height:240px;object-fit:cover;object-position:right;border-radius:28px;border:3px solid #ffffffaa}
.letter-tiles{display:flex;gap:14px;align-items:stretch}
.letter-tiles>span{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;padding:20px 8px;border:3px solid white;border-radius:26px;background:#edff37;color:#163d88;box-shadow:0 8px 0 #a9b920;font:900 clamp(70px,8vw,128px)/1.15 Nunito,sans-serif}
.letter-tiles>span+span{background:#ffbfdf;box-shadow:0 8px 0 #d37bad}
.letter-tiles small{font:700 14px/1.5 'Be Vietnam Pro',sans-serif;margin-top:12px}
.vivid-lesson .host{background:#fff8fd;border:3px solid white;border-radius:28px}
.vivid-lesson .host>img{height:150px;object-fit:cover;object-position:center 15%;border-radius:22px}
body.speaking .vivid-lesson .host{outline:4px solid #edff37}
@media(max-width:760px){.letter-play-stage{grid-template-columns:1fr;gap:20px;margin:18px 0}.letter-play-stage>img{height:130px;object-position:right 40%;order:-1}.letter-tiles>span{font-size:90px;padding:10px 8px}.vivid-lesson .board{padding:24px 16px}.vivid-lesson .board h2{font-size:28px}.vivid-lesson .host>img{height:85px;width:85px}.vivid-lesson .lesson-controls{gap:12px}}
.activities:has(.discovery-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.activities .discovery-card{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;text-align:left;min-height:310px;padding:28px;border:3px solid white;border-radius:30px;background:#0757d9;box-shadow:0 8px 0 #d997c2,0 16px 30px #1654a31a;transition:transform .18s,box-shadow .18s}
.discovery-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.discovery-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#063786f5 0%,#0753bce0 30%,#0766c750 57%,transparent 78%)}
.activities .discovery-card{flex-direction:row;justify-content:flex-start}
.discovery-copy{display:block;width:54%;max-width:330px;position:relative;align-self:center;flex-shrink:0;min-width:0}
.discovery-symbol .icon{width:26px;height:26px}
.count-pictures{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:24px auto;max-width:680px}
.count-picture{position:relative;width:min(100%,300px);aspect-ratio:20/11.5;overflow:hidden;background:white;border-radius:20px;outline:4px solid #edff37;box-shadow:0 8px 0 #b9c71a}
.count-picture img{position:absolute;width:500%;height:869.565%;max-width:none;pointer-events:none}
.count-options .game-cell{border-radius:50%;width:64px;height:64px;min-height:64px;aspect-ratio:1;font-size:30px;background:#edff37;color:#153266}
/* Picture rounds fill each card with character artwork. */
.kid-game-board .animal-grid .game-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:0;padding:0;background:#e4f2ff;isolation:isolate}
.kid-game-board .animal-grid .animal-picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:19px;margin:0}
.kid-game-board .animal-grid .game-cell small{z-index:1;box-shadow:0 2px 7px #12346955}
.kid-game-board .animal-grid .game-matched .animal-picture{filter:saturate(1.08)}
.kid-game-board .hide-cell .animal-picture{width:100%;height:100%;object-fit:cover;background:transparent}
.kid-game-board .music-key .animal-picture{width:100%;height:clamp(95px,14vw,155px);object-fit:cover;object-position:center 35%;border-radius:17px;background:#e4f2ff}
@media(max-width:650px){.kid-game-board .animal-grid .game-cell{min-height:0;padding:0}.kid-game-board .animal-grid .animal-picture,.kid-game-board .hide-cell .animal-picture{height:100%}.kid-game-board .music-key .animal-picture{height:112px}}
@media(max-width:420px){.activities .discovery-card{padding:20px 16px}.activities .discovery-card h3{font-size:25px}.activities .discovery-card .discovery-copy{width:56%}.discovery-cta{padding:10px 9px;gap:5px;font-size:14px;max-width:100%}.activities .discovery-card p{font-size:15px}.count-options .game-cell{width:54px;height:54px;min-height:54px}}
.discovery-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:44px;padding:0 10px;border-radius:14px;border:1px solid #ffffffb0;background:#ffffff21;color:#edff37;font-weight:900;font-size:24px;margin-bottom:16px;box-shadow:0 3px 0 #022c6840}
.activities .discovery-card h3{color:white;font-size:clamp(24px,2.2vw,34px);line-height:1.16;margin:0 0 12px;letter-spacing:-.5px;text-shadow:0 2px 4px #00357b55}
.activities .discovery-card p{color:#fff;font-size:16px;line-height:1.5;margin:0 0 22px;padding:0;max-width:240px}
.discovery-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#edff37;border:2px solid #f9ffa5;color:#153266;font-size:16px;font-weight:900;border-radius:15px;padding:12px 15px;min-height:48px;box-shadow:0 4px 0 #adbd23}
.discovery-cta .icon{width:20px;height:20px;flex-shrink:0}
.activities .discovery-card:hover{transform:translateY(-4px);box-shadow:0 12px 0 #d997c2,0 20px 30px #1654a325}
.discovery-card:focus-visible{outline:4px solid #0757d9;outline-offset:5px}
.games-invite.discovery-invite{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:300px;padding:36px 42px;margin-top:32px;border-radius:32px;background:#0757d9}
.discovery-game-scene{position:absolute;right:0;top:0;width:68%;height:100%;object-fit:cover;object-position:right 48%;z-index:-2}
.discovery-invite::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#073d9e 0%,#0758c8 32%,#0758c899 53%,transparent 75%)}
.discovery-invite-copy{max-width:54%}.discovery-invite-copy h2{font-size:clamp(30px,3.6vw,48px);line-height:1.15;margin:12px 0}.discovery-invite-copy p{font-size:17px;margin-bottom:24px}.discovery-invite .primary{font-size:17px;padding:14px 22px}
@media(max-width:1100px){.activities .discovery-card{min-height:300px;padding:22px}.activities .discovery-card h3{font-size:27px}.discovery-copy{width:58%}.discovery-cta{font-size:14px;padding:11px}.activities:has(.discovery-card){gap:20px}}
@media(max-width:760px){.activities:has(.discovery-card){grid-template-columns:1fr}.activities .discovery-card{min-height:280px;padding:24px}.discovery-copy{width:53%}.activities .discovery-card h3{font-size:28px}.discovery-symbol{height:38px;font-size:22px;margin-bottom:12px}.activities .discovery-card p{font-size:16px;margin-bottom:18px}.games-invite.discovery-invite{padding:26px 24px;min-height:300px}.discovery-invite-copy{max-width:58%}.discovery-invite-copy h2{font-size:32px}.discovery-invite-copy p{font-size:16px}.discovery-game-scene{width:100%;object-position:65% center}.discovery-invite .primary{font-size:15px;padding:12px}.discovery-invite::before{background:linear-gradient(90deg,#073d9ef5 0%,#0758c8d9 35%,#0758c844 65%,transparent 85%)}}
@media(prefers-reduced-motion:reduce){.activities .discovery-card{transition:none}.activities .discovery-card:hover{transform:none}}

/* Companion portraits have their own safe framing at every screen size. */
.learning-layout .host.companion-card,.host.companion-card{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;padding:16px;background:linear-gradient(145deg,#e9f8ff,#fff1f8);border:3px solid #fff;border-radius:28px;box-shadow:0 7px 0 #dba0c9;color:#153266;overflow:hidden}
.companion-card .companion-portrait{padding:4px;width:100%;max-width:240px;aspect-ratio:1;margin:0 auto;background:#e9f8ff;border:3px solid #fff;border-radius:24px;overflow:hidden;box-shadow:0 4px 0 #b6d9f5}
.companion-card .companion-portrait img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;border:0;border-radius:0;transform:none;grid-row:auto}
.companion-card .companion-copy{min-width:0}
.companion-card .companion-label{display:block;font-size:10px;font-weight:800;letter-spacing:1px;color:#175ddd;margin-bottom:7px}
.companion-card .companion-copy h3{font-size:23px;line-height:1.18;margin:0 0 12px;color:#153266}
.companion-card .companion-copy p{font-size:15px;line-height:1.65;color:#344e78;margin:0;background:#ffffffc9;border-radius:16px;padding:12px}
.companion-card .companion-listen{grid-column:1/-1;min-height:54px;width:100%;margin:0;background:#edff37;color:#12356e;border:2px solid #faffb3;border-radius:17px;box-shadow:0 4px 0 #b1c325;font-size:15px;font-weight:800}
.companion-card .companion-audio-info{grid-column:1/-1;font-size:11px;color:#526583}
.companion-audio-info summary{cursor:pointer;padding:7px 0;min-height:32px}
.companion-card .companion-audio-info p{font-size:11px;line-height:1.6;margin:8px 0 0;color:#526583}
@media(max-width:900px){.learning-layout .host.companion-card,.host.companion-card{grid-template-columns:112px minmax(0,1fr);gap:16px;padding:18px}.companion-card .companion-copy h3{font-size:23px}.companion-card .companion-portrait{align-self:start}.companion-card .companion-copy p{font-size:14px;padding:10px}.companion-card .companion-label{font-size:9px}}
@media(max-width:380px){.learning-layout .host.companion-card,.host.companion-card{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px}.companion-card .companion-copy h3{font-size:20px}.companion-card .companion-copy p{font-size:13px}}