/* ================================================================
   lkg-evs.css
   ----------------------------------------------------------------
   Styles that are SPECIFIC to "Getting Ready (Looking, Listening &
   Noticing)" (Tier 1) on the LKG EVS page (lkg-evs.html):

     A.1 Sound Detective     A.2 Same or Different   A.3 My Five Senses
     A.4 Big, Small, Many & Few                      A.5 Yes or No Warm-Up

   Load it AFTER lkg-ready.css. That sheet is the shared base for every LKG
   popup (stage, voice buttons, SVG paint, the single-line answer chips), so
   nothing from it is repeated here - this file only adds the EVS look and the
   few EVS-only pieces. Every EVS popup id starts with "lkevs" (lkEvsSnd,
   lkEvsSame, lkEvsSense, lkEvsSize, lkEvsYn), so one selector covers them all.

   Finish (matt + shine, kid psychology)
   - The picture board is a soft matt "mint paper" with a faint dot texture:
     calm, natural (this is the Environmental Studies page) and it makes every
     glossy object pop - peach skin, sunny yellow, coral, sky blue, bubble-gum
     pink and lavender all keep strong contrast against it.
   - Objects keep the glossy gradients + white highlights from the SVG kit.
   - A wrong answer is a soft sunshine-amber, never a harsh red.
   - Nothing flashes; motion is a gentle wobble / bob and is switched off for
     children (or phones) that ask for reduced motion.
   ================================================================ */

/* ---------- the picture board ---------- */
.quiz-overlay[id^="lkevs"] .quiz-modal { --evs-paper-1: #f8fff9; --evs-paper-2: #e2f5ea; --evs-line: #cde8d6; --evs-ink: #2f6b4f; }
.quiz-overlay[id^="lkevs"] .lk-stage {
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 58%),
        radial-gradient(rgba(60, 150, 110, .09) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
        linear-gradient(180deg, var(--evs-paper-1) 0%, var(--evs-paper-2) 100%);
    border-color: var(--evs-line);
    box-shadow: 0 3px 0 rgba(40, 110, 70, .10), inset 0 0 24px rgba(110, 210, 160, .22);
}
.quiz-overlay[id^="lkevs"] .lk-hint { color: #5d8a74; }
.quiz-overlay[id^="lkevs"] .lk-hint b { color: var(--evs-ink); }
.quiz-overlay[id^="lkevs"] .lk-ground { fill: #cdeccf; stroke: rgba(40, 130, 80, .40); }

/* ---------- gentle feedback: a wrong chip glows amber, not red ---------- */
.quiz-overlay[id^="lkevs"] .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^="lkevs"] .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);
}

/* ---------- Yes / No: a question with only two chips (still ONE line) ----------
   (:has() = every current Android Chrome; older browsers simply keep the normal width) */
.quiz-overlay[id^="lkevs"] .quiz-number-options.lk-picker:has(.lk-opt:nth-child(2):last-child) { max-width: 380px; gap: 16px; }
.quiz-overlay[id^="lkevs"] .quiz-number-options.lk-picker:has(.lk-opt:nth-child(2):last-child) .lk-opt { font-size: 19px; min-height: 96px !important; }
.quiz-overlay[id^="lkevs"] .quiz-number-options.lk-picker:has(.lk-opt:nth-child(2):last-child) .lk-opt-thumb { max-width: 92px; }

/* ---------- A.3 My Five Senses: the five tappable cards ---------- */
.lk-sncard { fill: rgba(255, 255, 255, .88); stroke: #cde8d6; stroke-width: 3; transition: fill .15s, stroke .15s; }
.lk-sn.lk-tap:active .lk-sncard { fill: #fff9d6; }
.lk-sn.is-seen .lk-sncard { fill: rgba(228, 255, 240, .96); stroke: #34c58f; }
.lk-sn.is-now .lk-sncard { stroke: #ffb300; stroke-width: 5; }
.lk-sn { transform-box: fill-box; transform-origin: center; }
.lk-snverb { fill: #2f6b4f; }

/* ---------- A.4 / A.5: pictures a finger taps ---------- */
.lk-pic, .lk-pic .lk-picmove { transform-box: fill-box; transform-origin: center; }
.lk-pic.lk-tap:active { transform: scale(.96); }

/* ---------- small phones: keep the five sense cards and the 5-picture rows readable ---------- */
@media (max-width: 380px) {
    .quiz-overlay[id^="lkevs"] .quiz-number-options.lk-picker:has(.lk-opt:nth-child(2):last-child) .lk-opt { min-height: 84px !important; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-sncard { transition: none; }
}