/* ================================================================
   lkg-alphabet.css
   ----------------------------------------------------------------
   Styles for "Meeting the Alphabet (Capital Letters)" (Tier 3) on the
   LKG English page (lkg-english.html):

     - A.1  Alphabet Song Parade     (glowing letters sung in order)
     - A.2  Letter Shape Spotting    (letters hidden in garden scenes)
     - A.3  Meet the Letter          (one big letter, look and say)
     - A.4  Letter Match             (find the twin)
     - A.5  Letter Hunt              (tap every M in a scattered grid)
     - A.6  Look-Alike Trap          (E/F, O/Q, M/N, V/W)

   Same popup shell and picture card as Tier 1. The shared pieces
   (quiz-overlay / quiz-modal look, .lk-stage picture card, the voice
   buttons, the single-line .lk-picker answer chips, .lk-svg paint
   classes such as .lk-glow / .lk-ghost / .lk-wobble) already live in
   lkg-ready.css, so keep that file linked; this sheet only adds what
   the letters need (every class here starts with "la-").

   Finish (matt + shine, kid psychology): matt cream paper stage,
   glossy sunny-yellow, coral, sky-blue, mint, lavender and bubble-gum
   pink letter tiles with white letters; hidden letters wear warm,
   friendly colours with a soft white edge. Nothing flashes, nothing
   uses a harsh red "wrong" signal, one clear focus per picture.

   Android-native feel: >=56px touch targets, instant :active press,
   no 300ms delay, no grey tap flash, no accidental text selection.

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

/* ---------- letter chips (plain capital letters, ONE line of 4) ---------- */
.quiz-number-opt.lk-opt.la-letter {
    font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--secondary, #4b3f8f);
    min-height: 62px !important;
}
.quiz-number-opt.lk-opt.la-letter:active:not(:disabled) { transform: scale(.94); }

/* ---------- Song Parade: tiles that wake up one by one ---------- */
.la-tile { cursor: pointer; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; }
.la-tile.la-dim { opacity: .42; }
.la-ring { fill: none; stroke: #ffc933; stroke-width: 7; stroke-linejoin: round; opacity: .95; }
.la-ring.la-ring-done { stroke: #34c58f; stroke-width: 6; opacity: .9; }

/* ---------- hidden letters (scenes and objects) ---------- */
.la-hid {
    stroke: #fff; stroke-width: 4; paint-order: stroke; stroke-linejoin: round;
    font-weight: 900; pointer-events: none;
}
.la-spot { cursor: pointer; transform-box: fill-box; transform-origin: center; -webkit-tap-highlight-color: transparent; }

/* ---------- big letter (hear and see) ---------- */
.la-big { cursor: pointer; transform-box: fill-box; transform-origin: center; -webkit-tap-highlight-color: transparent; }

/* ---------- Letter Hunt tiles ---------- */
.la-hunt { cursor: pointer; transform-box: fill-box; transform-origin: center; -webkit-tap-highlight-color: transparent; transition: opacity .25s ease; }
.la-hunt.la-found { opacity: .78; cursor: default; }

/* ---------- Responsive (phones) ---------- */
@media (max-width: 560px) {
    .quiz-number-opt.lk-opt.la-letter { font-size: 34px; min-height: 60px !important; }
}
@media (max-width: 380px) {
    .quiz-number-opt.lk-opt.la-letter { font-size: 30px; min-height: 58px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .la-tile, .la-hunt { transition: none; }
}