/* kidplay.css — Kids Play (Classes 1-5). Everything is scoped under #kp: the site shell loads last and
   answers generic class names, so a bare .card or .hero here would lose. No <header>/<section>/<main>
   in the markup for the same reason (the shell hides, pads or insets those). */
html body.kp-body{margin:0;background:#fff7ea!important;min-height:100vh}
#kp{--ink:#2b2340;--mut:#6b6280;--paper:#fff7ea;--card:#fff;--line:#f0e2c8;--ac:#ea7a27;--ok:#10b981;--sun:#f59e0b;
  width:100%;max-width:760px;margin:0 auto;padding:0 16px 48px;box-sizing:border-box;color:var(--ink);
  font-family:'Baloo 2',ui-rounded,'Noto Sans Devanagari',system-ui,sans-serif;font-size:19px;line-height:1.35;
  -webkit-tap-highlight-color:transparent}
#kp *,#kp *::before,#kp *::after{box-sizing:border-box}
#kp button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;margin:0}
#kp button:focus-visible,#kp a:focus-visible{outline:4px solid #60a5fa;outline-offset:3px}
#kp svg{display:block}
.llos-home-pill,.llos-shell-home-pill,.llos-search-fab,[class*="home-pill"]{display:none!important}

/* top bar */
#kp .kp-bar{position:sticky;top:var(--llos-sticky-top,0);z-index:5;display:flex;align-items:center;gap:12px;padding:12px 0;background:var(--paper)}
#kp .kp-x,#kp .kp-snd{flex:none;width:46px;height:46px;border-radius:14px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;color:var(--mut)}
#kp .kp-x svg,#kp .kp-snd svg{width:24px;height:24px}
#kp .kp-snd.off{opacity:.55}#kp .kp-snd.off .w{display:none}
#kp .kp-prog{flex:1;height:16px;border-radius:99px;background:#efe3cc;overflow:hidden}
#kp .kp-prog i{display:block;height:100%;width:0;border-radius:99px;background:var(--ok);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);transition:width .5s cubic-bezier(.3,1.4,.6,1)}
#kp .kp-stars{flex:none;display:flex;align-items:center;gap:4px;font-weight:800;font-size:20px;color:#b45309}
#kp .kp-stars svg{width:26px;height:26px;fill:var(--sun)}

/* Tara + speech bubble */
#kp .kp-guide{display:flex;align-items:flex-end;gap:10px;margin:8px 0 18px}
#kp .kp-tara{flex:none;width:96px;height:96px;transform-origin:50% 100%}
#kp .kp-tara .body{fill:var(--ac)}#kp .kp-tara .belly{fill:#fff;opacity:.35}
#kp .kp-tara .leaf{fill:#22c55e}#kp .kp-tara .stalk{stroke:#15803d;stroke-width:3;stroke-linecap:round}
#kp .kp-tara .pupil{fill:#1f1630}#kp .kp-tara .cheek{fill:#fb7185;opacity:.55}
#kp .kp-tara .m{fill:none;stroke:#1f1630;stroke-width:4;stroke-linecap:round}
#kp .kp-tara .oh{display:none;fill:#1f1630;stroke:none}
#kp .kp-tara .arm{fill:none;stroke:var(--ac);stroke-width:9;stroke-linecap:round;filter:brightness(.9)}
#kp .kp-tara .arm.l,#kp .kp-tara .arm.r{transform-origin:50% 60%;opacity:0}
#kp .kp-guide.happy .kp-tara{animation:kpBob 2.4s ease-in-out infinite}
#kp .kp-guide.cheer .kp-tara{animation:kpJump .7s cubic-bezier(.3,1.6,.6,1) 2}
#kp .kp-guide.cheer .arm{opacity:1}
#kp .kp-guide.oops .kp-tara{animation:kpTilt .6s ease-in-out}
#kp .kp-guide.oops .smile{display:none}#kp .kp-guide.oops .oh{display:block}
#kp .kp-guide .eyes{animation:kpBlink 4s infinite;transform-origin:50% 58%}
#kp .kp-bub{position:relative;flex:1;min-width:0;background:#fff;border:3px solid var(--line);border-radius:22px 22px 22px 6px;padding:12px 54px 12px 16px;font-weight:600;font-size:20px;box-shadow:0 4px 0 var(--line)}
#kp .kp-bub p{margin:0;overflow-wrap:anywhere}
#kp .kp-guide.kp-pulse .kp-bub{animation:kpPop .35s ease-out}
#kp .kp-say{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;background:var(--ac);color:#fff;display:grid;place-items:center}
#kp .kp-say svg{width:22px;height:22px}

/* map */
#kp .kp-maptop{text-align:center;margin:6px 0 4px}
#kp .kp-eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);background:#fff;border:2px solid var(--line);border-radius:99px;padding:3px 14px}
#kp .kp-h1{font-size:clamp(30px,7vw,44px);line-height:1.08;margin:10px 0 6px;font-weight:800;color:var(--ink)}
#kp .kp-path{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 26px;position:relative}
#kp .kp-node{--x:0;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translateX(calc((var(--x) - 1) * 90px));padding:4px}
#kp .kp-disc{width:92px;height:92px;border-radius:50%;background:var(--ac);display:grid;place-items:center;box-shadow:0 8px 0 rgba(0,0,0,.18),inset 0 -6px 0 rgba(0,0,0,.12);transition:transform .15s}
#kp .kp-disc svg{width:50px;height:50px}
#kp .kp-node:active .kp-disc{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
#kp .kp-node.now .kp-disc{animation:kpGlow 1.6s ease-in-out infinite}
#kp .kp-node.done .kp-disc{background:var(--sun)}
#kp .kp-node.locked .kp-disc{background:#d8cfbf;box-shadow:0 8px 0 #c2b8a6}
#kp .kp-node.locked .kp-nname{color:#a59a86}
#kp .kp-node.prize.done .kp-disc{background:#fff;border:4px solid var(--sun)}
#kp .kp-node.prize.done .kp-disc svg{width:76px;height:76px}
#kp .kp-nname{font-weight:800;font-size:18px}
#kp .kp-nst{display:flex;gap:3px;min-height:16px}
#kp .kp-nst i{width:16px;height:16px;background:#e6dac4;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 78%,20% 100%,30% 60%,0 38%,38% 36%)}
#kp .kp-nst i.on{background:var(--sun)}
#kp .kp-book{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:3px dashed var(--line);border-radius:20px;padding:12px 16px;margin-bottom:16px}
#kp .kp-book b{font-weight:800}#kp .kp-book>span{background:var(--sun);color:#fff;border-radius:99px;padding:0 10px;font-weight:800;margin-right:auto}
#kp .kp-book .kp-stk{width:44px;height:44px}
#kp .kp-jm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#f5f3ff;border:3px solid #ddd6fe;border-radius:20px;padding:12px 16px;margin-bottom:16px}
#kp .kp-jm b{width:100%;font-weight:800;color:#5b21b6}
#kp .kp-jmall{color:#5b21b6;font-weight:800;margin-left:auto}
#kp .kp-parent{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 16px;font-size:16px;color:var(--mut)}
#kp .kp-parent summary{font-weight:700;cursor:pointer;color:var(--ink)}
#kp .kp-parent a{color:var(--ac);font-weight:700}
#kp .kp-none{text-align:center;color:var(--mut)}

/* buttons */
#kp .kp-big{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:10px 30px;border-radius:20px;background:var(--ok);color:#fff;font-weight:800;font-size:22px;box-shadow:0 6px 0 #0b8a62;text-decoration:none;margin-top:10px;transition:transform .1s}
#kp .kp-big:active{transform:translateY(4px);box-shadow:0 2px 0 #0b8a62}
#kp .kp-maptop .kp-big{animation:kpGlowG 1.6s ease-in-out infinite}
#kp .kp-soft{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:8px 22px;border-radius:18px;background:#fff;border:3px solid var(--line);color:var(--ink);font-weight:700;font-size:19px;text-decoration:none;box-shadow:0 4px 0 var(--line)}
#kp .kp-go{display:flex;width:100%;margin-top:18px}
#kp .kp-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
#kp .kp-row .kp-big{margin-top:0}

/* shared answer states */
#kp .nope{animation:kpShake .45s}
#kp .kp-hint{position:relative;outline:4px dashed var(--sun);outline-offset:4px;animation:kpGlowY 1s ease-in-out infinite}
#kp .lock button{pointer-events:none}

/* Listen & Tap tiles */
#kp .kp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#kp .kp-tiles.n3{grid-template-columns:1fr}
#kp .kp-tile{min-height:84px;border-radius:22px;background:#fff;border:3px solid var(--line);box-shadow:0 6px 0 var(--line);font-weight:800;font-size:24px;padding:10px;display:grid;place-items:center;text-align:center;transition:transform .1s}
#kp .kp-tile:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
#kp .kp-tile.right{background:#d1fae5;border-color:var(--ok);box-shadow:0 6px 0 #6ee7b7;animation:kpPop .4s}
#kp .kp-tile.nope,#kp .kp-tile:disabled{opacity:.45}

/* Bubble Pop */
#kp .kp-sky{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:8px 0}
#kp .kp-bubble{width:min(44vw,210px);min-height:min(44vw,180px);border-radius:50%;display:grid;place-items:center;padding:20px;text-align:center;font-weight:800;font-size:19px;line-height:1.2;color:#1f1630;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.9) 0 6%,transparent 7%),radial-gradient(circle at 50% 55%,var(--b1),var(--b2));box-shadow:inset -8px -10px 0 rgba(0,0,0,.08),0 6px 14px rgba(0,0,0,.08);animation:kpFloat 3.2s ease-in-out infinite}
#kp .kp-bubble span{overflow-wrap:anywhere}
#kp .kp-bubble.c1{--b1:#fde68a;--b2:#fbbf24}#kp .kp-bubble.c2{--b1:#bfdbfe;--b2:#60a5fa}#kp .kp-bubble.c3{--b1:#fbcfe8;--b2:#f472b6}#kp .kp-bubble.c4{--b1:#e9d5ff;--b2:#c084fc}
#kp .kp-bubble.popped{animation:kpBurst .45s forwards;background:radial-gradient(circle,#d1fae5,#34d399)}
#kp .kp-bubble.nope,#kp .kp-bubble:disabled{opacity:.4;animation:kpShake .45s}

/* Match-Up */
#kp .kp-match{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
#kp .kp-col{display:flex;flex-direction:column;gap:12px}
#kp .kp-card{min-height:70px;border-radius:18px;background:#fff;border:3px solid var(--line);box-shadow:0 5px 0 var(--line);padding:10px 12px;font-weight:700;font-size:17px;text-align:left;line-height:1.25;overflow-wrap:anywhere}
#kp .kp-card.w{font-size:21px;font-weight:800;text-align:center;overflow-wrap:normal;word-break:keep-all;hyphens:auto}
#kp .kp-card.sel{border-color:#60a5fa;background:#eff6ff;transform:scale(1.03)}
#kp .kp-card.paired{pointer-events:none;animation:kpPop .35s}
#kp .kp-card.p1{background:#fef3c7;border-color:#f59e0b}#kp .kp-card.p2{background:#dbeafe;border-color:#3b82f6}
#kp .kp-card.p3{background:#fce7f3;border-color:#ec4899}#kp .kp-card.p4{background:#dcfce7;border-color:#22c55e}

/* Story Steps */
#kp .kp-slots{list-style:none;counter-reset:s;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
#kp .kp-slot{counter-increment:s;min-height:54px;border-radius:16px;border:3px dashed var(--line);display:flex;align-items:center;gap:10px;padding:8px 12px;font-weight:700;font-size:17px;color:var(--ink)}
#kp .kp-slot::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;background:#efe3cc;color:var(--mut);display:grid;place-items:center;font-weight:800}
#kp .kp-slot.filled{border-style:solid;border-color:var(--ok);background:#ecfdf5;animation:kpPop .35s}
#kp .kp-slot.filled::before{background:var(--ok);color:#fff}
#kp .kp-deck{display:flex;flex-direction:column;gap:10px}
#kp .kp-card.story{text-align:left}
#kp .kp-card.gone{display:none}

/* Spell It */
#kp .kp-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 18px}
#kp .kp-ls{width:54px;height:62px;border-radius:14px;border:3px dashed var(--line);display:grid;place-items:center;font-size:32px;font-weight:800;text-transform:uppercase}
#kp .kp-ls.on{border-style:solid;border-color:var(--ac);background:#fff;animation:kpPop .3s}
#kp .slots.win .kp-ls{background:#d1fae5;border-color:var(--ok)}
#kp .kp-lt{width:62px;height:66px;border-radius:16px;background:var(--ac);color:#fff;font-size:32px;font-weight:800;text-transform:uppercase;box-shadow:0 6px 0 rgba(0,0,0,.2)}
#kp .kp-lt.gone{visibility:hidden}
#kp .kp-g-spell .kp-soft{display:flex;margin:0 auto}

/* Yes or No */
#kp .kp-yn{background:#fff;border:3px solid var(--line);border-radius:24px;padding:20px;text-align:center;box-shadow:0 6px 0 var(--line);margin-bottom:18px}
#kp .kp-yn b{display:block;font-size:34px;font-weight:800;color:var(--ac)}
#kp .kp-yn span{display:block;font-size:21px;font-weight:600;margin-top:6px}
#kp .kp-yn.fix{border-color:var(--ok)}
#kp .kp-ynrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#kp .kp-ynb{min-height:96px;border-radius:24px;color:#fff;font-weight:800;font-size:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
#kp .kp-ynb svg{width:44px;height:44px}
#kp .kp-ynb.y{background:#10b981;box-shadow:0 7px 0 #0b8a62}#kp .kp-ynb.n{background:#f97316;box-shadow:0 7px 0 #c2410c}
#kp .kp-ynrow.lock .kp-ynb:not(.right):not(.nope){opacity:.35}
#kp .kp-ynb.right{animation:kpPop .4s}

/* results + sticker */
#kp .kp-result{text-align:center;padding-top:6px}
#kp .kp-result .kp-guide{text-align:left}
#kp .kp-rstars{display:flex;justify-content:center;gap:10px;margin:6px 0}
#kp .kp-rstars svg{width:84px;height:84px;fill:#e6dac4}
#kp .kp-rstars svg.on{fill:var(--sun);animation:kpStar .6s cubic-bezier(.3,1.6,.6,1) both}
#kp .kp-bigstk{display:grid;place-items:center;margin:4px 0}
#kp .kp-stk.big{width:200px;height:200px;animation:kpSpin 1s cubic-bezier(.3,1.5,.6,1) both;filter:drop-shadow(0 10px 0 rgba(0,0,0,.12))}
#kp .kp-cap{font-weight:800;font-size:22px;margin:6px 0 0}
#kp .kp-nojs{text-align:center}
.kp-conf{position:fixed;inset:0;pointer-events:none;z-index:9500;overflow:hidden}
.kp-conf i{position:absolute;top:-20px;width:10px;height:14px;animation:kpFall linear forwards}

@keyframes kpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kpJump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-22px) scale(1.06,.95)}100%{transform:translateY(0)}}
@keyframes kpTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
@keyframes kpBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes kpPop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes kpShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes kpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kpBurst{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1.05)}}
@keyframes kpGlow{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.18),0 0 0 0 rgba(245,158,11,.55)}50%{box-shadow:0 8px 0 rgba(0,0,0,.18),0 0 0 14px rgba(245,158,11,0)}}
@keyframes kpGlowG{0%,100%{box-shadow:0 6px 0 #0b8a62,0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 6px 0 #0b8a62,0 0 0 14px rgba(16,185,129,0)}}
@keyframes kpGlowY{0%,100%{outline-color:#f59e0b}50%{outline-color:#fde68a}}
@keyframes kpStar{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
@keyframes kpSpin{0%{transform:scale(0) rotate(-200deg)}100%{transform:scale(1) rotate(0)}}
@keyframes kpFall{to{transform:translateY(110vh) rotate(720deg)}}
@media (max-width:480px){
  #kp{font-size:18px}
  #kp .kp-tara{width:76px;height:76px}
  #kp .kp-bub{font-size:18px}
  #kp .kp-node{transform:translateX(calc((var(--x) - 1) * 64px))}
  #kp .kp-disc{width:82px;height:82px}
  #kp .kp-match{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px}
  #kp .kp-card{font-size:15px;padding:8px}
  #kp .kp-card.w{font-size:17px;padding:8px 4px}
  #kp .kp-tile{font-size:21px;min-height:76px}
  #kp .kp-lt{width:54px;height:60px}
}
@media (prefers-reduced-motion:reduce){#kp *,#kp *::before,#kp *::after{animation:none!important;transition:none!important}}