/* ================================================================
   lkg-phonics.css
   ----------------------------------------------------------------
   Styles for "Phonics (Letter Sounds)" (Tier 5) on the LKG English
   page (lkg-english.html):

     - A.1  Sound of the Day       (letter sounds, talking mouth)
     - A.2  A for Apple            (letter <-> picture)
     - A.3  Beginning Sound Match
     - A.4  Sound Sorting Baskets  (tap a picture, tap its basket)
     - A.5  Odd One Out
     - A.6  Sound Hunt Scene       (tap everything that starts with /m/)
     - A.7  Sound and Letter       (hear it, tap the letter)

   Only the extras live here. The popup shell, the glossy SVG paint
   (lk-svg, lk-o, lk-gloss, lk-t, ...), the voice buttons, the stage card
   and the single-line answer chips come from lkg-ready.css and the
   site's shared quiz theme, exactly like Tier 2, 3 and 4.
   Every popup id of this tier starts with "lkph" (lkPhDay, lkPhPic ...).

   Finish (matt + shine, kid psychology): a soft matt cream "room" with
   glossy sunny-yellow, coral, sky, mint, lavender and bubble-gum
   objects. Calm, warm colours; a found picture glows soft green and a
   wrong tap only wobbles - never a harsh red flash.

     <link rel="stylesheet" th:href="@{/css/lkg-phonics.css}" />
   ================================================================ */

/* ---------- letter chips: a little bigger, they are the answers ---------- */
.quiz-overlay[id^="lkph"] .lk-opt-thumb { max-width: 92px; }
.quiz-overlay[id^="lkph"] .quiz-number-opt.lk-opt.has-thumb { padding: 6px 3px 8px; }
.quiz-overlay[id^="lkph"] .lk-opt-letter { font-size: 14px; }

/* ---------- the talking face (A.1 mouth question) ---------- */
.lk-speaker .lk-mouthg { transform-box: fill-box; transform-origin: center; }
.lk-speaker.lk-talk .lk-mouthg { animation: lk-ph-talk .42s ease-in-out infinite; }
@keyframes lk-ph-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }

/* ---------- tappable pictures in the hunt scenes / baskets / letter row ---------- */
.lk-ph-it, .lk-bask, .lk-ltr { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lk-ph-it, .lk-ltr { transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.lk-ph-it:active, .lk-ltr:active { transform: scale(.94); }
.lk-bask { transform-box: fill-box; transform-origin: center; }
.lk-bask:active { transform: scale(.98); }
.lk-ph-ring { stroke-linecap: round; animation: lk-ph-glow 1.3s ease-in-out infinite; }
@keyframes lk-ph-glow { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
.lk-ph-placed { pointer-events: none; }

/* the second button on a hunt stage ("Hear it" / "Say the names") sits beside "Show me" */
.lk-btnrow .lk-snd { min-height: 48px; }

/* ---------- phones ---------- */
@media (max-width: 380px) {
    .quiz-overlay[id^="lkph"] .lk-opt-thumb { max-width: 62px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-speaker.lk-talk .lk-mouthg, .lk-ph-ring { animation: none; }
    .lk-ph-it, .lk-ltr { transition: none; }
}