/* Little Learners, Oct 2026 additions: memory, coloring, piano, maze, clock, puzzle and language games. Navy + gold. */
.kid-stage{background:radial-gradient(120% 80% at 50% 0%,rgba(255,199,44,.14),transparent 60%),linear-gradient(160deg,#0B1F3A,#123A6B 60%,#1B4E8C)}
.kid-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(243,229,171,.22) 1px,transparent 1.6px);background-size:46px 46px;opacity:.5}
.kid-stage>*{position:relative;z-index:1}.kid-stage>.kid-fx{position:absolute;z-index:5}.kid-stage>.kid-cheer{position:absolute;z-index:6}.kid-stage>.kid-fsicon{position:absolute;z-index:30}
.kid-modes+.kid-modes{margin-top:-2px}
/* memory (Peekaboo Pairs + Word Pairs) */
.km-grid{display:grid;gap:clamp(8px,2.4vw,16px);width:100%;max-width:760px;margin:0 auto;grid-template-columns:repeat(2,1fr)}
.km-n6{grid-template-columns:repeat(3,1fr)}.km-n8{grid-template-columns:repeat(4,1fr)}.km-n12{grid-template-columns:repeat(4,1fr)}
@media (max-width:600px){.km-n8{grid-template-columns:repeat(2,1fr)}.km-n12{grid-template-columns:repeat(3,1fr)}}
@media (orientation:landscape) and (max-height:500px){.km-grid{max-width:none}.km-n8,.km-n12{grid-template-columns:repeat(6,1fr)}.km-n6{grid-template-columns:repeat(6,1fr)}.km-n4{grid-template-columns:repeat(4,1fr)}}
.km-card{position:relative;font:inherit;cursor:pointer;aspect-ratio:1;max-height:30vh;width:100%;border-radius:22px;border:3px solid #FFC72C;padding:0;background:linear-gradient(145deg,#0E2E5C,#021F54);box-shadow:0 6px 0 rgba(0,0,0,.3),inset 0 0 0 4px rgba(243,229,171,.12);transition:transform .35s;transform-style:preserve-3d;color:#021F54}
@media (orientation:landscape) and (max-height:500px){.km-card{max-height:34dvh;margin:0 auto}}
.km-back,.km-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:19px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.km-back{font-size:clamp(2rem,8vw,3.4rem);color:#FFC72C;background:repeating-linear-gradient(45deg,rgba(255,199,44,.09) 0 10px,transparent 10px 20px);text-shadow:0 0 14px rgba(255,199,44,.7)}
.km-face{transform:rotateY(180deg);background:linear-gradient(160deg,#F3E5AB,#E9D48A);font-size:clamp(2.6rem,11vw,4.6rem)}
.km-card.up{transform:rotateY(180deg)}
.km-card.done .km-face{box-shadow:inset 0 0 0 5px #FFC72C,0 0 22px rgba(255,199,44,.8)}
.km-card.kid-yay{animation:kmyay .6s}.km-card.kid-nudge{animation:kidwig .5s}
@keyframes kmyay{50%{transform:rotateY(180deg) scale(1.12)}}
.klm-face{flex-direction:column;padding:4px;text-align:center}
.klm-w{font-size:clamp(1rem,4.4vw,1.7rem);font-weight:900;line-height:1.1;word-break:break-word}
.klm-py{font-size:clamp(.8rem,3vw,1.1rem);font-weight:700;opacity:.8}
.klm-wcard .km-back{font-family:Georgia,serif;font-weight:900}
/* coloring */
.kp-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.kp-pic{width:100%;max-width:560px;border-radius:22px;background:linear-gradient(160deg,#0A2148,#103566);border:3px solid rgba(255,199,44,.6);padding:8px;box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
.kp-pic svg{display:block;width:100%;height:auto;max-height:48vh}
.kp-part{stroke:#FFC72C;stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:fill .25s}
.kp-pal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kp-crayon{width:56px;height:56px;border-radius:50%;border:3px solid rgba(243,229,171,.5);background:#021F54;padding:6px;cursor:pointer}
.kp-crayon span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset -4px -5px 0 rgba(0,0,0,.22)}
.kp-crayon[aria-pressed="true"]{border-color:#FFC72C;transform:scale(1.15);box-shadow:0 0 0 3px #021F54,0 0 16px rgba(255,199,44,.8)}
@media (orientation:landscape) and (max-height:500px){.kp-wrap{flex-direction:row;justify-content:center}.kp-pic svg{max-height:58dvh}.kp-pic{max-width:48vw}.kp-pal{max-width:260px}}
/* piano */
.kpn-keys{display:flex;gap:clamp(4px,1.2vw,10px);width:100%;max-width:900px;height:clamp(220px,46vh,420px);margin:0 auto;align-items:stretch}
.kpn-key{--kc:#FFC72C;flex:1;font:inherit;cursor:pointer;border:3px solid rgba(243,229,171,.7);border-radius:0 0 20px 20px;background:linear-gradient(180deg,#F3E5AB 0%,#F3E5AB 55%,var(--kc) 55%,var(--kc) 100%);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 10px;box-shadow:0 8px 0 rgba(0,0,0,.3);touch-action:none;transition:transform .08s}
.kpn-ani{font-size:clamp(1.6rem,6vw,3rem);margin-bottom:auto;margin-top:12px}
.kpn-note{font-weight:900;font-size:clamp(1.1rem,4vw,1.8rem);color:#021F54;background:rgba(243,229,171,.85);border-radius:999px;padding:0 .5em}
.kpn-key.hit{animation:kpnhit .3s}
@keyframes kpnhit{40%{transform:translateY(8px);box-shadow:0 0 0 rgba(0,0,0,.3);filter:brightness(1.2)}}
.kpn-key.kpn-next{border-color:#FFC72C;box-shadow:0 8px 0 rgba(0,0,0,.3),0 0 0 4px #FFC72C,0 0 26px 6px rgba(255,199,44,.85);animation:kpnglow 1s infinite alternate}
@keyframes kpnglow{to{filter:brightness(1.15)}}
@media (orientation:landscape) and (max-height:500px){.kpn-keys{height:58dvh}}
/* maze */
.kmz-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.kmz-cv{border-radius:18px;border:3px solid #FFC72C;touch-action:none;box-shadow:0 0 30px rgba(255,199,44,.25)}
.kmz-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px);gap:8px}
.kmz-arrow{font-size:1.8rem;border-radius:18px;border:3px solid #FFC72C;background:#021F54;cursor:pointer;padding:0}
.kmz-arrow:active{background:#FFC72C}
.kmz-n{grid-column:2;grid-row:1}.kmz-w{grid-column:1;grid-row:2}.kmz-s{grid-column:2;grid-row:2}.kmz-e{grid-column:3;grid-row:2}
@media (orientation:landscape) and (max-height:500px){.kmz-wrap{flex-direction:row;justify-content:center}}
@media (min-width:900px){.kmz-wrap{flex-direction:row;justify-content:center;gap:28px}}
/* clock */
.kck-wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;width:100%}
.kck-face{width:min(72vw,40vh,340px);height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.kck-rim{fill:#FFC72C}.kck-dial{fill:#F3E5AB}.kck-num{font-size:18px;font-weight:900;fill:#021F54;font-family:inherit}
.kck-tick{fill:#021F54;opacity:.4}.kck-hour{stroke:#021F54;stroke-width:9;stroke-linecap:round;transition:transform .4s}.kck-min{stroke:#1E88E5;stroke-width:5;stroke-linecap:round;transition:transform .4s}.kck-pin{fill:#FFC72C;stroke:#021F54;stroke-width:3}
.kck-side{display:flex;flex-direction:column;align-items:center;gap:12px}
.kck-digi{font-size:clamp(2.4rem,10vw,4rem);font-weight:900;color:#FFC72C;background:#021F54;border:3px solid rgba(255,199,44,.6);border-radius:16px;padding:0 .4em;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,199,44,.6)}
.kck-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kck-pick{font:inherit;cursor:pointer;min-width:120px;min-height:72px;border-radius:18px;border:3px solid rgba(255,255,255,.8);background:#F3E5AB;color:#021F54;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 0 rgba(0,0,0,.25);padding:6px 12px}
.kck-pick b{font-size:1.8rem}.kck-pick small{font-weight:700}
.kck-pick.kid-yay{animation:kidyay .6s}.kck-pick.kid-nudge{animation:kidwig .5s}
/* puzzle */
.kpz-wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:center;width:100%}
.kpz-board{display:grid;gap:4px;width:min(92vw,560px,calc(60vh * 4 / 3));aspect-ratio:4/3;background:#FFC72C;border-radius:16px;padding:4px;box-shadow:0 0 30px rgba(255,199,44,.3)}
.kpz-board.whole{gap:0}
.kpz-tile{border:0;padding:0;cursor:pointer;border-radius:10px;background-repeat:no-repeat;transition:transform .2s,box-shadow .2s}
.kpz-tile.sel{transform:scale(.92);box-shadow:0 0 0 5px #F3E5AB,0 0 18px #FFC72C}
.kpz-tile.ok{box-shadow:inset 0 0 0 2px rgba(255,199,44,.6)}
.kpz-tile.kid-yay{animation:kidyay .6s}
.kpz-peek{width:120px;aspect-ratio:4/3;border-radius:10px;border:3px solid #F3E5AB;background-size:cover;opacity:.95}
@media (orientation:landscape) and (max-height:500px){.kpz-board{width:calc(62dvh * 4 / 3)}}
/* rainbow words */
.krb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(84px,22vw,130px),1fr));gap:12px;width:100%}
.krb-find{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;margin:0 auto}
@media (orientation:landscape) and (max-height:500px){.krb-find{grid-template-columns:repeat(4,1fr);max-width:none}}
.krb-card{position:relative;font:inherit;cursor:pointer;aspect-ratio:1;max-height:32vh;width:100%;border-radius:22px;border:3px solid rgba(255,199,44,.75);background:linear-gradient(160deg,#F3E5AB,#E9D48A);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 rgba(0,0,0,.25);padding:6px}
.krb-card.kid-yay{animation:kidyay .6s}.krb-card.kid-nudge{animation:kidwig .5s}
.krb-pot{--pc:#E53935;position:relative;width:66%;height:62%;border-radius:12px 12px 40% 40%;background:var(--pc);border:4px solid #021F54;box-shadow:inset -8px -8px 0 rgba(0,0,0,.18)}
.krb-pot::before{content:"";position:absolute;left:-8%;right:-8%;top:-14%;height:20%;border-radius:8px;background:#021F54}
.krb-drop{position:absolute;right:10%;top:20%;width:16%;height:22%;border-radius:50%;background:rgba(255,255,255,.55)}
.krb-dots{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2px;font-size:clamp(1rem,4.5vw,1.7rem);line-height:1;max-width:96%}
.krb-n{position:absolute;right:6px;top:4px;font-weight:900;font-size:1.1rem;background:#021F54;color:#FFC72C;border-radius:999px;padding:0 .45em}
/* hello friends */
.kh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,40vw,200px),1fr));gap:12px;width:100%}
.kh-card,.kh-opt{font:inherit;cursor:pointer;border-radius:20px;border:3px solid rgba(255,199,44,.75);background:linear-gradient(160deg,#F3E5AB,#E9D48A);color:#021F54;display:flex;align-items:center;gap:10px;padding:10px 12px;box-shadow:0 6px 0 rgba(0,0,0,.25);text-align:left;min-height:72px}
.kh-card.kid-yay,.kh-opt.kid-yay{animation:kidyay .6s}.kh-opt.kid-nudge{animation:kidwig .5s}
.kh-pic{font-size:2.4rem;line-height:1}
.kh-ph{display:flex;flex-direction:column;line-height:1.15}
.kh-w{font-weight:900;font-size:clamp(1.15rem,4.6vw,1.6rem)}.kh-py{font-weight:700;opacity:.8}.kh-en{font-size:.85rem;opacity:.75}
.kh-scene{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
.kh-friend{font-size:clamp(4rem,16vw,6.5rem);line-height:1}
.kh-bubble{font-size:clamp(2.4rem,9vw,3.6rem);background:#F3E5AB;border:3px solid #FFC72C;border-radius:26px 26px 26px 4px;padding:8px 16px;margin-bottom:1.4em}
.kh-opts{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:520px;margin:0 auto}
.kh-opt{justify-content:center;text-align:center}.kh-opt .kh-ph{align-items:center}
@media (orientation:landscape) and (max-height:500px){.kh-opts{grid-template-columns:repeat(3,1fr);max-width:none}.kh-bubble{margin-bottom:1.6em}.kh-friend{font-size:3.4rem}}
.kh-opt .kh-en{display:none}.kh-opt.kid-yay .kh-en,.kh-opt.kid-nudge .kh-en{display:block}
.kpn-key:hover,.kpn-key:focus,.kpn-key:active{background:linear-gradient(180deg,#F3E5AB 0%,#F3E5AB 55%,var(--kc) 55%,var(--kc) 100%);color:#021F54}
.km-card:hover,.km-card:focus{background:linear-gradient(145deg,#0E2E5C,#021F54)}.krb-card:hover,.krb-card:focus,.kh-card:hover,.kh-card:focus,.kh-opt:hover,.kh-opt:focus,.kck-pick:hover,.kck-pick:focus{background:linear-gradient(160deg,#F3E5AB,#E9D48A);color:#021F54}
.kck-snap .kck-hour,.kck-snap .kck-min{transition:none}
.kh-card,.kh-opt{min-width:0}.kh-ph{min-width:0;flex:1}
.kh-w,.kh-en,.kh-py{overflow-wrap:anywhere;hyphens:auto;word-break:normal}
.kh-w{font-size:clamp(1rem,3.6vw,1.4rem)}
.kh-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.kh-w,.kh-en,.kh-py{overflow-wrap:break-word;hyphens:manual}
.kh-w.kh-long{font-size:clamp(.8rem,1.6vw,.95rem)}
.kh-card .kh-pic{flex:0 0 auto}
.kh-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr))}
.kid-title,.kw-title{overflow-wrap:break-word;text-wrap:balance;max-width:100%}
.kh-card{flex-direction:column;align-items:stretch;text-align:center;gap:4px}
.kh-card .kh-pic{align-self:center}
.kh-card .kh-ph{align-items:center;width:100%}
.kh-w,.kh-en,.kh-py{display:block;max-width:100%;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.kh-w.kh-long{font-size:clamp(1rem,3.2vw,1.3rem)}
.kh-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}