/* ================================================================
   lkg-evs-tiers.css
   ----------------------------------------------------------------
   The STRUCTURE shared by EVS tiers 6 - 10 on the LKG EVS page (lkg-evs.html):
     Tier 6 Animals Around Us (lkevsani*)      Tier 7 Food & Transport (lkevsfood*)     Tier 8 Seasons & Weather (lkevswx*)
     Tier 9 Good Habits & Safety (lkevshab*)   Tier 10 Putting It All Together (lkevswld*)

   Load it AFTER lkg-ready.css / lkg-evs.css / lkg-evs-helpers.css and BEFORE the five per-tier palette files
   (lkg-evs-animals.css, lkg-evs-food.css, lkg-evs-weather.css, lkg-evs-habits.css, lkg-evs-world.css), which only set the
   paper colours below. The popup markup is the one shared modal built by lkg-common.js, so nothing about the modal is redefined here.

   Finish (matt + shine, kid psychology)
   - The picture board is a soft matt "paper" with a faint dot texture, a different gentle colour for every tier, always chosen to sit
     opposite the colours of that tier's pictures so every glossy object keeps strong contrast.
   - Pictures keep the glossy gradients + white highlights from the SVG kit. A wrong answer is soft amber, never red (lkg-evs.css).
   - Nothing flashes; motion is a gentle wobble / bob, switched off for children who ask for reduced motion.

   Phones (native look): 48px+ touch targets, no 300ms delay / grey tap flash, no text selection while dragging, no sideways scroll,
   the bottom button clears the Android gesture bar. All four answer chips ALWAYS sit on ONE line (phone and desktop).
   ================================================================ */

:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) {
    --t-paper-1: #fbf9ff; --t-paper-2: #e8e0ff; --t-line: #d6c9fa; --t-ink: #5b3fb0; --t-dot: rgba(130, 90, 225, .10); --t-hint: #7a66b8; --t-glow: rgba(160, 130, 245, .22); --t-ground: #d8cffa;
}

/* ---------- the picture board (colours come from the per-tier file) ---------- */
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .lk-stage {
    background:
        radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 58%),
        radial-gradient(var(--t-dot) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
        linear-gradient(180deg, var(--t-paper-1) 0%, var(--t-paper-2) 100%);
    border-color: var(--t-line);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .06), inset 0 0 24px var(--t-glow);
    touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .lk-hint { color: var(--t-hint); }
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .lk-hint b { color: var(--t-ink); }
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .lk-ground { fill: var(--t-ground); stroke: rgba(0, 0, 0, .12); }
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-modal { overscroll-behavior: contain; }
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0); min-height: 48px; }

/* ---------- the four answer chips: ALWAYS one line ---------- */
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: column;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker .lk-opt {
    min-width: 0; min-height: 92px; padding: 6px 3px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker .lk-opt-thumb { max-width: 100%; }
:is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .lk-opt-letter {
    display: block; max-width: 100%; font-size: clamp(10px, 3.2vw, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- pieces drawn inside the pictures ---------- */
.lk-disc { cursor: pointer; transform-box: fill-box; transform-origin: center; }       /* numbered sound buttons (F.3) */
.lk-disc:active { transform: scale(.94); }
.lk-emo, .lk-emo-s { text-anchor: middle; dominant-baseline: central; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lk-emo { font-size: 104px; }                                                           /* emoji on the glossy action pictures */
.lk-emo-s { font-size: 44px; }                                                          /* the small badge on the behaviour pictures */

/* ---------- small phones / big screens ---------- */
@media (max-width: 380px) {
    :is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker { gap: 5px; }
    :is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker .lk-opt { min-height: 84px; padding: 4px 2px; }
}
@media (min-width: 900px) {
    :is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker { gap: 12px; }
    :is(.quiz-overlay[id^="lkevsani"], .quiz-overlay[id^="lkevsfood"], .quiz-overlay[id^="lkevswx"], .quiz-overlay[id^="lkevshab"], .quiz-overlay[id^="lkevswld"]) .quiz-number-options.lk-picker .lk-opt { min-height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-disc, .lk-disc:active { transition: none; transform: none; }
}