/* ================================================================
   lkg-evs-me.css
   ----------------------------------------------------------------
   Styles that are SPECIFIC to "Myself (Identity)" (Tier 2) on the LKG EVS
   page (lkg-evs.html):

     B.1 This Is Me      B.2 My Name Card     B.3 How Old Am I?
     B.4 Boy or Girl     B.5 My Favourites    B.6 Identity Match

   Load order:  lkg-ready.css  ->  lkg-evs.css  ->  lkg-evs-me.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 Yes/No two-chip layout. This sheet only changes
   the LOOK for Tier 2 and adds the few Tier 2 pieces. Every Tier 2 popup id starts
   with "lkevsme" (lkEvsMeThis, ...Name, ...Age, ...Bg, ...Fav, ...Match).

   Finish (matt + shine, kid psychology)
   - Tier 1 is calm mint "nature paper". Tier 2 is about ME, so the picture board is a
     warm "sunrise paper": soft peach-cream melting into lavender, with a faint dot
     texture. It is matt (no glare), friendly and safe, and every glossy object keeps
     strong contrast on it: skin tones, sunny yellow, coral, sky blue, mint and
     lilac all stand out against the pale warm paper.
   - Objects keep their glossy gradients + white highlights from the SVG kit.
   - A wrong answer is soft sunshine-amber, never harsh red; a right one is fresh mint.
   - Nothing flashes. Candle flames only breathe gently, and everything that moves
     stops for children (or phones) that ask for reduced motion.
   - Touch targets are big and the page never scrolls sideways on a phone.
   ================================================================ */

/* ---------- the picture board ---------- */
.quiz-overlay[id^="lkevsme"] .quiz-modal { --me-paper-1: #fffaf4; --me-paper-2: #ebdfff; --me-line: #dccdf6; --me-ink: #5b3fa0; }
.quiz-overlay[id^="lkevsme"] .lk-stage {
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 58%),
        radial-gradient(rgba(150, 100, 230, .10) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
        linear-gradient(180deg, var(--me-paper-1) 0%, var(--me-paper-2) 100%);
    border-color: var(--me-line);
    box-shadow: 0 3px 0 rgba(110, 70, 190, .10), inset 0 0 24px rgba(190, 150, 255, .22);
}
.quiz-overlay[id^="lkevsme"] .lk-hint { color: #7d6aa8; }
.quiz-overlay[id^="lkevsme"] .lk-hint b { color: var(--me-ink); }
.quiz-overlay[id^="lkevsme"] .lk-ground { fill: #e8dcff; stroke: rgba(110, 70, 190, .35); }

/* ---------- gentle feedback (same idea as Tier 1, repeated for the longer id prefix) ---------- */
.quiz-overlay[id^="lkevsme"] .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^="lkevsme"] .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: names and letters (still ONE line of 4) ---------- */
.quiz-overlay[id^="lkevsme"] .quiz-number-opt.lk-namechip { font-family: 'Poppins', 'Nunito', sans-serif; font-weight: 700; letter-spacing: .2px; }
.quiz-overlay[id^="lkevsme"] .quiz-number-opt.lk-letterchip {
    font-family: 'Poppins', 'Nunito', sans-serif; font-weight: 800; font-size: clamp(26px, 8vw, 38px); line-height: 1;
}

/* ---------- B.2 / B.6: places and things a finger drags ---------- */
.lk-item.lk-tap, .lk-bask.lk-tap, .lk-dot.lk-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lk-item.lk-tap { cursor: grab; }
.lk-item.lk-tap:active { cursor: grabbing; }
.lk-slot { transition: fill .15s, stroke .15s; }
.lk-bask.lk-tap:active .lk-slot { fill: #fff9d6; stroke: #ffb300; }

/* ---------- B.3: the candle holders on the big cake ---------- */
.lk-holder { transition: r .15s; }
.lk-dot.lk-tap:hover .lk-holder, .lk-dot.lk-tap:active .lk-holder { r: 12; }
.lk-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: lkFlicker 1.6s ease-in-out infinite; }
.lk-flame ~ .lk-flame { animation-delay: -.5s; }
@keyframes lkFlicker { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.94, 1.08); } }
.lk-donebtn { background: #22c08a; color: #fff; border-color: #22c08a; }

/* ---------- B.5: the "My favourites" board ---------- */
.lk-favcard { transition: fill .15s, stroke .15s; }
.lk-favcard.is-seen { fill: rgba(228, 255, 240, .96); stroke: #34c58f; }
.lk-favcard.is-now { stroke: #ffb300; stroke-width: 5; }

/* ---------- small phones: keep the chips and tiles comfortable ---------- */
@media (max-width: 380px) {
    .quiz-overlay[id^="lkevsme"] .quiz-number-opt.lk-namechip { font-size: 15px; }
    .quiz-overlay[id^="lkevsme"] .quiz-number-opt.lk-letterchip { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-flame { animation: none; }
    .lk-slot, .lk-favcard, .lk-holder { transition: none; }
}