/* ================================================================
   lkg-evs-body.css
   ----------------------------------------------------------------
   Styles that are SPECIFIC to "My Body" (Tier 3) on the LKG EVS page (lkg-evs.html):

     C.1 Meet My Body Parts   C.2 Label the Body      C.3 What Do We Use?
     C.4 How Many?            C.5 Simon Says          C.6 Missing Part
     C.7 Keep My Body Healthy

   Load order:  lkg-ready.css -> lkg-evs.css -> lkg-evs-me.css -> lkg-evs-body.css
   lkg-ready.css is the shared base for every LKG popup (stage, voice buttons, SVG paint,
   single-line answer chips); lkg-evs.css gives every EVS popup (ids start with "lkevs") its chip
   feedback and the two-chip layout. This sheet only changes the LOOK for Tier 3 and adds the few
   Tier 3 pieces. Every Tier 3 popup id starts with "lkevsbd" (lkEvsBdMeet, ...Label, ...Use,
   ...Count, ...Simon, ...Missing, ...Care).

   Finish (matt + shine, kid psychology)
   - Tier 1 is calm mint, Tier 2 warm lilac. Tier 3 is about MY BODY, so the picture board is a soft
     "sky paper": pale butter-cream melting into baby blue, with a faint dot texture. Blue is calm,
     safe and clinical-free (never scary), and skin tones (peach, tan, brown), sunny yellow, coral,
     mint and orange all keep strong contrast against it.
   - Objects keep their glossy gradients + white highlights from the SVG kit; the board itself is matt.
   - A wrong answer is soft sunshine-amber, never harsh red; a right one is fresh mint.
   - Nothing flashes. Ticks and numbers simply appear; the only motion (the ring on a part) is a gentle
     breathing, and it stops for children (or phones) that ask for reduced motion.
   - Touch targets are big (the NEAREST part to the finger wins) and the page never scrolls sideways.
   ================================================================ */

/* ---------- the picture board ---------- */
.quiz-overlay[id^="lkevsbd"] .quiz-modal { --bd-paper-1: #fffcf1; --bd-paper-2: #dff0ff; --bd-line: #c9e2f7; --bd-ink: #2a6aa8; }
.quiz-overlay[id^="lkevsbd"] .lk-stage {
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 58%),
        radial-gradient(rgba(70, 140, 220, .10) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
        linear-gradient(180deg, var(--bd-paper-1) 0%, var(--bd-paper-2) 100%);
    border-color: var(--bd-line);
    box-shadow: 0 3px 0 rgba(50, 110, 190, .10), inset 0 0 24px rgba(130, 190, 250, .24);
}
.quiz-overlay[id^="lkevsbd"] .lk-hint { color: #5f87ad; }
.quiz-overlay[id^="lkevsbd"] .lk-hint b { color: var(--bd-ink); }
.quiz-overlay[id^="lkevsbd"] .lk-ground { fill: #d3e8fb; stroke: rgba(50, 110, 190, .35); }

/* ---------- gentle feedback (same idea as Tiers 1 and 2, for the longer id prefix) ---------- */
.quiz-overlay[id^="lkevsbd"] .quiz-number-opt.lk-opt.is-wrong {
    border-color: #ffb020; background: rgba(255, 176, 32, .14); box-shadow: 0 0 0 3px rgba(255, 176, 32, .22);
}
.quiz-overlay[id^="lkevsbd"] .quiz-number-opt.lk-opt.is-correct {
    border-color: #22c08a; background: rgba(34, 192, 138, .10); box-shadow: 0 0 0 3px rgba(34, 192, 138, .22);
}

/* ---------- text answer chips: body-part words (still ONE line of 4) ---------- */
.quiz-overlay[id^="lkevsbd"] .quiz-number-opt.lk-wordchip { font-family: 'Poppins', 'Nunito', sans-serif; font-weight: 700; letter-spacing: .2px; }

/* ---------- ticks, numbers and rings on the child ---------- */
.lk-mark { pointer-events: none; }
.lk-hilite { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: lkBreathe 1.8s ease-in-out infinite; }
@keyframes lkBreathe { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.12); opacity: .7; } }
.lk-bask.lk-tap:active circle:first-child { fill: #fff9d6; }
.lk-item.lk-tap { cursor: grab; -webkit-tap-highlight-color: transparent; }
.lk-item.lk-tap:active { cursor: grabbing; }
.lk-showme { background: #22c08a; color: #fff; border-color: #22c08a; }

/* ---------- small phones ---------- */
@media (max-width: 380px) {
    .quiz-overlay[id^="lkevsbd"] .quiz-number-opt.lk-wordchip { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-hilite { animation: none; }
}