/* =====================================================================
   Kid world (levels 02-04): bright, animated, made to hold a toddler's attention.
   Art is SVG from js/art.js; sound and sparkles come from js/fx.js.
   ===================================================================== */
.art { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; overflow: visible; flex: none; }
.art.badge { display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, var(--b) 55%); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 3px 0 rgba(0, 0, 0, .12); }
.art.badge > span { font-size: .62em; line-height: 1; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

body.kidworld { --ink: #2a2140; --ink-2: #4a3f66; --muted: #6a5f86; --surface: #ffffff; --surface-2: #fff6e6; --line: #ffd9a0; --bg: #ffffff; background: transparent; color-scheme: light; color: var(--ink); }
body.kidworld .toast { font-size: 1.1rem; }
body.kidworld #toasts { z-index: 10000; bottom: 140px; }
/* No scrolling in the child session: the app scales each screen to fit (see HF.kidworld in fx.js). */
html:has(body.kidworld), body.kidworld { overflow: hidden; height: 100%; overscroll-behavior: none; }
body.kidworld #app { height: calc(100dvh - 64px); overflow: hidden; padding-bottom: 0; }
body.kidworld #app > .fade-in { transform-origin: top center; }
body.kidworld .topbar { background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); border-bottom: 0; }
body.kidworld #app { position: relative; z-index: 1; }
body.kidworld .footer, body.kidworld .tabbar { display: none; }
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky1, #8fd3ff) 0%, var(--sky2, #e9f8ff) 70%); pointer-events: none; }
#world .w-sun { position: absolute; right: 24%; top: 4%; width: 110px; height: 110px; animation: spin 40s linear infinite; }
#world .w-sun svg, #world .w-cloud svg, #world .w-fly svg { width: 100%; height: 100%; }
#world .w-cloud { position: absolute; width: 130px; height: 90px; opacity: .95; animation: drift 60s linear infinite; }
#world .c1 { top: 12%; left: -20%; animation-duration: 70s; } #world .c2 { top: 30%; left: -30%; width: 100px; animation-duration: 95s; animation-delay: -30s; } #world .c3 { top: 5%; left: -10%; width: 80px; animation-duration: 120s; animation-delay: -70s; }
#world .w-fly { position: absolute; width: 56px; height: 56px; animation: fly 22s ease-in-out infinite; }
#world .f1 { top: 55%; left: 6%; } #world .f2 { top: 40%; left: 70%; animation-duration: 28s; animation-delay: -9s; width: 46px; height: 46px; }
#world .w-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 26vh; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(160vw); } }
@keyframes fly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(60px, -40px) rotate(8deg); } 50% { transform: translate(120px, 10px) rotate(-4deg); } 75% { transform: translate(50px, 40px) rotate(6deg); } }

img.art { object-fit: contain; -webkit-user-drag: none; user-select: none; }

/* Pip the fox */
#pip { position: fixed; left: 8px; bottom: 6px; width: 120px; height: 120px; z-index: 5; cursor: pointer; filter: drop-shadow(0 6px 6px rgba(60, 40, 20, .25)); animation: pipbob 3s ease-in-out infinite; transform-origin: 50% 100%; }
#pip .pip-svg { width: 100%; height: 100%; overflow: visible; }
#pip .pip-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
#pip .pip-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: wag 1.8s ease-in-out infinite; }
#pip .pip-mouth { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }
#pip.talk .pip-mouth { animation: chat .26s ease-in-out infinite; }
#pip.cheer { animation: pipjump .6s ease-out 2; } #pip.cheer .pip-mouth { transform: scaleY(1); }
#pip.oops { animation: piptilt .7s ease-in-out; }
@keyframes pipbob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(1.02, .98); } }
@keyframes pipjump { 0% { transform: translateY(0) scale(1.1, .85); } 40% { transform: translateY(-46px) scale(.95, 1.1) rotate(-6deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes piptilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes wag { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes chat { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* Pop-in, squish and idle motion */
.pop-in { animation: popin .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes popin { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.squish { animation: squish .3s ease-out; }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(.9, 1.08); } 60% { transform: scale(1.08, .94); } 100% { transform: scale(1); } }
body.kidworld .learn-big .art, body.kidworld .lg-big .art, body.kidworld .explore-tile .art, body.kidworld .lg-choice .art, body.kidworld .count-obj .art { animation: idle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
@keyframes idle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg) scale(1.04); } }
body.kidworld .fade-in { animation: none; }

/* Cards and the lesson stage */
body.kidworld .card, body.kidworld .little-game { background: #fff; border: 4px solid #fff; border-radius: 32px; box-shadow: 0 8px 0 rgba(90, 60, 130, .14), 0 20px 40px rgba(60, 40, 120, .18); animation: popin .5s cubic-bezier(.3, 1.4, .5, 1) both; }
body.kidworld .lesson-top { background: rgba(255, 255, 255, .7); border-radius: 22px; padding: 8px 12px; }
body.kidworld .lesson-top b { font-size: 1.1rem; }
body.kidworld .qprog { display: flex; gap: 8px; justify-content: center; }
body.kidworld .qprog i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(90, 60, 130, .2); flex: none; }
body.kidworld .qprog i.ok { background: #ffd23c; } body.kidworld .qprog i.cur { background: #ff4d9e; animation: tilepulse 1s ease-in-out infinite; }
body.kidworld .learn-big { filter: drop-shadow(0 8px 6px rgba(60, 40, 20, .2)); }
body.kidworld .little-story h2, body.kidworld .card.guided h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); color: #4a2f94; }
body.kidworld .little-story p { font-size: 1.35rem; font-weight: 600; }
body.kidworld .lg-prompt { font-size: 1.5rem; font-weight: 800; color: #4a2f94; }
body.kidworld .icon-btn { width: 56px; height: 56px; border-radius: 50%; background: #e6f4ff; border: 0; box-shadow: 0 4px 0 #b9dcf5; font-size: 1.9rem; display: inline-grid; place-items: center; vertical-align: middle; }
body.kidworld .icon-btn.big-speaker { margin-left: auto; width: 64px; height: 64px; font-size: 2.2rem; }

/* Answer buttons: big, colorful, squishy */
body.kidworld .lg-choices { gap: 14px; }
body.kidworld .lg-choice { font-size: 4.6rem; min-height: 150px; border: 0; color: var(--ink); box-shadow: 0 8px 0 rgba(0, 0, 0, .16); transition: transform .12s, box-shadow .12s; animation: popin .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * .08s); }
body.kidworld .lg-choice:nth-child(4n+1) { background: linear-gradient(180deg, #ffe0ee, #ffc2dc); } body.kidworld .lg-choice:nth-child(4n+2) { background: linear-gradient(180deg, #e2f4ff, #b9e2ff); }
body.kidworld .lg-choice:nth-child(4n+3) { background: linear-gradient(180deg, #fff3c2, #ffe083); } body.kidworld .lg-choice:nth-child(4n+4) { background: linear-gradient(180deg, #dcf8dc, #b3eab3); }
body.kidworld .lg-choice:active { transform: translateY(6px) scale(.97); box-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
body.kidworld .lg-choice.right { background: linear-gradient(180deg, #b6f5c0, #5fe07a); animation: rightpulse .7s ease-out; box-shadow: 0 0 0 6px #fff, 0 0 40px 8px #7be08a; }
body.kidworld .lg-choice.right .art { animation: cheerspin .7s ease-out; }
body.kidworld .lg-choice.wrong { opacity: .45; animation: shake .4s; }
body.kidworld .lg-choice.txt, body.kidworld .lg-choice.pics { font-size: 2.6rem; }
@keyframes rightpulse { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes cheerspin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.25); } 100% { transform: rotate(0) scale(1); } }
.stars { display: inline-flex; gap: 2px; align-items: center; font-size: 1.5rem; }
.star-off { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 3px dashed #d4c6ff; box-sizing: border-box; transform: scale(.7); }

/* Guided buttons */
body.kidworld .g-btn { width: 96px; height: 96px; border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .18), 0 14px 24px rgba(60, 40, 120, .25); font-size: 3rem; }
body.kidworld .g-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
body.kidworld .g-btn.hear { background: linear-gradient(180deg, #8fd3ff, #4fb3ff); } body.kidworld .g-btn.go { background: linear-gradient(180deg, #5fe07a, #2fb34c); }
.g-btn .gi { width: 56%; height: 56%; } .g-btn .art { width: 62%; height: 62%; }
body.kidworld .g-btn.home { margin: 14px auto 0; display: grid; }

/* Home: big illustrated tiles */
body.kidworld .home-head { gap: 12px; margin-bottom: 8px; }
body.kidworld .home-head h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); color: #4a2f94; text-shadow: 0 3px 0 #fff; }
body.kidworld .kt-av.big { font-size: 4rem; width: 84px; height: 84px; display: grid; place-items: center; background: #fff; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 6px 0 rgba(90, 60, 130, .18); }
.kid-today .little-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
@media (min-width: 700px) { .kid-today .little-tiles { grid-template-columns: repeat(3, 1fr); } }
body.kidworld .little-tile.kt { position: relative; border: 5px solid #fff; border-radius: 32px; padding: 18px 8px 14px; font-size: 1.35rem; color: #2a2140; box-shadow: 0 10px 0 rgba(0, 0, 0, .14), 0 18px 30px rgba(60, 40, 120, .2); animation: popin .55s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * .09s); }
body.kidworld .little-tile.kt:active { transform: translateY(7px); box-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
body.kidworld .little-tile.kt .lt-ic { font-size: 5.4rem; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .18)); }
.little-tile.c0 { background: linear-gradient(180deg, #ffe0ee, #ffb3d4); } .little-tile.c1 { background: linear-gradient(180deg, #e2f4ff, #a6d8ff); } .little-tile.c2 { background: linear-gradient(180deg, #fff3c2, #ffd966); }
.little-tile.c3 { background: linear-gradient(180deg, #dcf8dc, #9fe29f); } .little-tile.c4 { background: linear-gradient(180deg, #efe1ff, #cdb0ff); } .little-tile.c5 { background: linear-gradient(180deg, #ffe6d2, #ffbe8c); }
body.kidworld .little-tile.kt.next { animation: popin .55s both, tilepulse 1.2s ease-in-out .6s infinite; box-shadow: 0 0 0 8px rgba(255, 255, 255, .85), 0 0 36px 10px #ffd23c, 0 10px 0 rgba(0, 0, 0, .14); }
body.kidworld .little-tile.kt.done { filter: saturate(.7); opacity: .85; }
.tile-done { position: absolute; top: -12px; right: -8px; width: 50px; height: 50px; font-size: 3rem; animation: popin .5s both; }
body.kidworld .empty .ei { font-size: 6rem; }
.sticker-link { position: fixed; right: 14px; bottom: 20px; z-index: 6; display: flex; align-items: center; gap: 6px; background: #fff; border: 5px solid #ffd23c; border-radius: 40px; padding: 8px 18px 8px 12px; text-decoration: none; color: #4a2f94; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.sticker-link .sl-art { font-size: 2.6rem; display: inline-block; } .sticker-link .sl-art:first-child { display: none; }
.sticker-link b { font-size: 1.8rem; }

/* End of lesson */
.endcard { padding: 24px 12px; }
.end-stars { font-size: 4.2rem; display: flex; justify-content: center; gap: 4px; }
.end-stars span { display: inline-block; animation: popin .6s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--i, 0) * .22s + .2s); }
.sticker-win { font-size: 10rem; margin: 6px 0; animation: stickerin 1.1s cubic-bezier(.3, 1.4, .5, 1) 1s both; filter: drop-shadow(0 10px 0 rgba(255, 255, 255, .8)) drop-shadow(0 12px 12px rgba(60, 40, 20, .3)); }
@keyframes stickerin { from { transform: scale(0) rotate(-200deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
.sticker-book { max-width: 760px; margin: 0 auto; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 16px; background: rgba(255, 255, 255, .8); border-radius: 32px; padding: 16px; box-shadow: 0 8px 0 rgba(90, 60, 130, .14); }
.sticker { font-size: 4.6rem; aspect-ratio: 1; border-radius: 24px; border: 3px dashed #d9ccff; background: #faf6ff; cursor: pointer; display: grid; place-items: center; }
.sticker .art { filter: brightness(0) opacity(.12); } .sticker.got { border: 3px solid #fff; background: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .12); animation: popin .5s both; animation-delay: calc(var(--i, 0) * .03s); }
.sticker.got .art { filter: none; animation: idle 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.3s); }

/* Games */
body.kidworld .explore-grid { gap: 14px; grid-template-columns: repeat(3, 1fr); }
body.kidworld .explore-grid.n4, body.kidworld .explore-grid.n2 { grid-template-columns: repeat(2, 1fr); }
body.kidworld .explore-tile { font-size: 5rem; border: 0; padding: 18px 0; border-radius: 28px; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); color: var(--ink); animation: popin .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * .08s); }
body.kidworld .explore-tile.c0 { background: linear-gradient(180deg, #ffe0ee, #ffb3d4); } body.kidworld .explore-tile.c1 { background: linear-gradient(180deg, #e2f4ff, #a6d8ff); } body.kidworld .explore-tile.c2 { background: linear-gradient(180deg, #fff3c2, #ffd966); }
body.kidworld .explore-tile.c3 { background: linear-gradient(180deg, #dcf8dc, #9fe29f); } body.kidworld .explore-tile.c4 { background: linear-gradient(180deg, #efe1ff, #cdb0ff); } body.kidworld .explore-tile.c5 { background: linear-gradient(180deg, #ffe6d2, #ffbe8c); }
body.kidworld .explore-tile.seen { box-shadow: 0 0 0 5px #fff, 0 0 0 9px #5fe07a, 0 8px 0 rgba(0, 0, 0, .15); }
.explore-tile.bounce { animation: squish .5s !important; } .explore-tile.bounce .art { animation: cheerspin .6s !important; }
body.kidworld .count-obj { font-size: 4.6rem; width: 112px; height: 112px; border: 0; background: linear-gradient(180deg, #fff, #ffeed2); box-shadow: 0 8px 0 rgba(0, 0, 0, .15); border-radius: 30px; animation: popin .5s both; animation-delay: calc(var(--i, 0) * .1s); }
body.kidworld .count-obj.counted { background: linear-gradient(180deg, #d4f9d8, #8ee79c); }
body.kidworld .count-badge { width: 44px; height: 44px; font-size: 1.6rem; top: -14px; right: -10px; border: 3px solid #fff; background: #ff4d9e; color: #fff; }
body.kidworld .count-num { font-size: 6rem; color: #ff4d9e; text-shadow: 0 4px 0 #fff; }
.count-num.bounce { animation: popin .4s both; }
body.kidworld .pop-field { height: 420px; background: linear-gradient(180deg, #b7e6ff, #f0fbff); border: 4px solid #fff; box-shadow: inset 0 0 30px rgba(79, 179, 255, .35); }
body.kidworld .bubble { width: 104px; height: 128px; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; border: 0; background: radial-gradient(circle at 32% 26%, #fff 0 9%, var(--bc, #ff4d9e) 38%, color-mix(in srgb, var(--bc, #ff4d9e) 70%, #000) 100%); box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .12); font-size: 3.2rem; display: grid; place-items: center; padding-bottom: 20px; }
body.kidworld .bubble::after { content: ""; position: absolute; bottom: -22px; left: 50%; width: 3px; height: 26px; background: rgba(60, 40, 80, .45); }
body.kidworld .bubble .bi { background: rgba(255, 255, 255, .9); border-radius: 50%; width: 66px; height: 66px; display: grid; place-items: center; font-size: 2.6rem; }
@keyframes rise-up { from { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-240px) rotate(3deg); } to { transform: translateY(-560px) rotate(-3deg); } }
.bubble.nope { animation: squish .4s !important; }
.pop-score { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.pop-score i { width: 30px; height: 30px; border-radius: 50%; border: 4px dashed #d4c6ff; box-sizing: border-box; }
.pop-score i.on { border: 4px solid #fff; background: radial-gradient(circle at 35% 30%, #fff, #ffd23c 45%, #ff9a2e); animation: popin .4s both; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
body.kidworld .match-card { border: 0; font-size: 4rem; border-radius: 26px; background: linear-gradient(180deg, #efe1ff, #cdb0ff); box-shadow: 0 8px 0 rgba(0, 0, 0, .15); animation: popin .5s both; animation-delay: calc(var(--i, 0) * .07s); }
body.kidworld .match-card .mc-back { font-size: 3.4rem; opacity: .9; }
body.kidworld .match-card.up { background: #fff; } body.kidworld .match-card.found { background: linear-gradient(180deg, #d4f9d8, #8ee79c); }
.match-card.flip { animation: flipcard .4s ease-out !important; } @keyframes flipcard { from { transform: rotateY(90deg) scale(.8); } to { transform: rotateY(0) scale(1); } }
body.kidworld .trace-ghost { stroke: #efe1ff; stroke-width: 16; } body.kidworld .trace line { stroke: #ff4d9e; stroke-width: 8; }
body.kidworld .trace .dot { fill: #fff; stroke: #cdb0ff; stroke-width: 3; } body.kidworld .trace .dot.done { fill: #ff4d9e; stroke: #fff; } body.kidworld .trace .dot.next { fill: #ffd23c; stroke: #ff9a2e; }
body.kidworld .video-thumb { border-radius: 26px; border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); }
body.kidworld .video-frame { border-radius: 26px; border: 5px solid #fff; }
body.kidworld .video-meta { display: none; }
body.kidworld .video-play { width: 100px; height: 72px; border-radius: 26px; font-size: 2.4rem; animation: tilepulse 1.2s ease-in-out infinite; }
@media (max-height: 640px) { #pip { width: 84px; height: 84px; } body.kidworld #app { padding-bottom: 100px; } }
@media (prefers-reduced-motion: reduce) { body.kidworld *, #pip, #pip * { animation: none !important; } }
body.kidworld .learn-big { font-size: clamp(8rem, 36vw, 12rem); }
body.kidworld .lg-choice { font-size: 7.5rem; min-height: 200px; }
body.kidworld .lg-big { font-size: clamp(7rem, 30vw, 10rem); }
body.kidworld .lg-choice.txt, body.kidworld .lg-choice.pics { font-size: 3.2rem; }
body.kidworld .explore-tile { font-size: 6.5rem; }