/* ================================================================
   lkg-evs-family.css
   ----------------------------------------------------------------
   Styles that are SPECIFIC to "My Family & My Home" (Tier 4) on the LKG EVS page (lkg-evs.html):

     D.1 Meet My Family     D.2 Who Is This?       D.3 Family Tree        D.4 My House
     D.5 Rooms of the Home  D.6 Things at Home     D.7 Home or Not Home?

   Load order:  lkg-ready.css -> lkg-evs.css -> lkg-evs-me.css -> lkg-evs-body.css -> lkg-evs-family.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 4 and adds the few Tier 4 pieces. Every Tier 4 popup id starts with
   "lkevsfm" (lkEvsFmMeet, ...Who, ...Tree, ...House, ...Rooms, ...Things, ...Home).

   Finish (matt + shine, kid psychology)
   - Tier 1 mint, Tier 2 lilac, Tier 3 sky blue. Tier 4 is about HOME and FAMILY, so the picture board is a
     warm "hearth paper": pale cream melting into a soft apricot, with a faint dot texture. Warm cream and apricot
     feel safe, cosy and loved; the board is matt (no glare) and every glossy object keeps strong contrast on it:
     skin tones, sky blue, mint, purple, pink and the red roofs all stand out against the soft apricot.
   - 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 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 person or part to the finger wins) and the page never scrolls sideways.
   ================================================================ */

/* ---------- the picture board ---------- */
.quiz-overlay[id^="lkevsfm"] .quiz-modal { --fm-paper-1: #fffcf4; --fm-paper-2: #ffe6cf; --fm-line: #f6d3b3; --fm-ink: #b05a22; }
.quiz-overlay[id^="lkevsfm"] .lk-stage {
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 58%),
        radial-gradient(rgba(220, 130, 60, .11) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
        linear-gradient(180deg, var(--fm-paper-1) 0%, var(--fm-paper-2) 100%);
    border-color: var(--fm-line);
    box-shadow: 0 3px 0 rgba(200, 120, 50, .10), inset 0 0 24px rgba(255, 190, 120, .26);
}
.quiz-overlay[id^="lkevsfm"] .lk-hint { color: #a98462; }
.quiz-overlay[id^="lkevsfm"] .lk-hint b { color: var(--fm-ink); }
.quiz-overlay[id^="lkevsfm"] .lk-ground { fill: #ffe0c2; stroke: rgba(200, 120, 50, .35); }

/* ---------- gentle feedback (same idea as Tiers 1 to 3, for the longer id prefix) ---------- */
.quiz-overlay[id^="lkevsfm"] .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^="lkevsfm"] .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: room and family words (still ONE line of 4) ---------- */
.quiz-overlay[id^="lkevsfm"] .quiz-number-opt.lk-wordchip { font-family: 'Poppins', 'Nunito', sans-serif; font-weight: 700; letter-spacing: .2px; }

/* ---------- ticks, rings, the family frame ---------- */
.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.1); opacity: .7; } }
.lk-item.lk-tap { cursor: grab; -webkit-tap-highlight-color: transparent; }
.lk-item.lk-tap:active { cursor: grabbing; }
.lk-bask.lk-tap { -webkit-tap-highlight-color: transparent; }
.lk-showme { background: #22c08a; color: #fff; border-color: #22c08a; }

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