/* ================================================================
   lkg-rhymes.css
   ----------------------------------------------------------------
   Styles for "Rhymes & Storytelling" (Tier 8) on the LKG English page
   (lkg-english.html), used together with lkg-rhymes.js:

     - A.1  Rhyme Time            - A.5  Story Listening
     - A.2  Finger Play           - A.6  Story Questions
     - A.3  Rhyme Match           - A.7  What Comes Next?
     - A.4  Finish the Rhyme

   The popup itself (quiz-overlay / quiz-modal / bq-* classes) is built by
   lkg-common.js and styled by the site's shared quiz theme. The base picture,
   voice-button and single-line answer-chip rules (lk-svg, lk-stage, lk-wrap,
   lk-replay, lk-picker, lk-opt ...) come from lkg-ready.css, which must stay
   loaded BEFORE this file. This file only adds what is new in this tier.

   Finish (matt + shine, kid psychology): soft matt cream "paper" stage with
   glossy sunny-yellow, coral, sky-blue, mint, lavender and bubble-gum pink
   objects. Warm, friendly, high-contrast colours; nothing flashes, no harsh
   red "wrong" signals, one clear focus per picture.

   Android-native feel: >=56px touch targets, instant :active press, no grey
   tap flash, no accidental page scroll while a finger works on a picture.

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

/* ---------- the four answer chips: ALWAYS one single line (re-asserted for this tier) ---------- */
.quiz-overlay[id^="lkrh"] .quiz-number-options.lk-picker,
.quiz-overlay[id^="lkfinplay"] .quiz-number-options.lk-picker,
.quiz-overlay[id^="lkstory"] .quiz-number-options.lk-picker {
    display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
}
.quiz-overlay[id^="lkrh"] .quiz-number-opt.lk-opt,
.quiz-overlay[id^="lkfinplay"] .quiz-number-opt.lk-opt,
.quiz-overlay[id^="lkstory"] .quiz-number-opt.lk-opt { flex: 1 1 0; min-width: 0; }

/* emoji + word chips (actions, feelings) */
.quiz-number-opt.lk-opt .lk-opt-emoji { font-size: 30px; line-height: 1; }
.quiz-number-opt.lk-opt:has(.lk-opt-emoji):not(.has-thumb) { gap: 4px; }

/* ---------- emoji drawn inside a picture ---------- */
.lk-emoji {
    font: 54px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
    user-select: none; -webkit-user-select: none;
}
/* the big pink "?" that stands in for a missing picture */
.lk-t.lk-q { fill: #ff6fa5; stroke: #fff; stroke-width: 7; }

/* ---------- Rhyme Time: a picture lights up while its word is said ---------- */
.lk-pic { transform-box: fill-box; transform-origin: center; }
.lk-hl { animation: lk-hl 1s ease-in-out 1; }
@keyframes lk-hl {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255, 179, 0, 0)); }
    35%  { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(255, 179, 0, .95)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255, 179, 0, 0)); }
}

/* ---------- Finger Play: big round gesture buttons ---------- */
.lk-gbtn { cursor: pointer; transform-box: fill-box; transform-origin: center; touch-action: manipulation; }
.lk-gbtn:active { transform: scale(.94); }
.lk-dot { transition: fill .2s, stroke .2s; }

/* ---------- Finish the Rhyme: the missing-picture card ---------- */
.lk-qslot { transform-box: fill-box; transform-origin: center; animation: lk-bob 2.2s ease-in-out infinite; }

/* ---------- Story pages ---------- */
.lk-pagein { animation: lk-pagein .55s ease-out 1; }
@keyframes lk-pagein { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
.lk-stage .lk-hint { min-height: 2.7em; }

/* ---------- What Comes Next?: story cards and slots ---------- */
.lk-cardbg { fill: #fff; stroke: rgba(80, 50, 130, .35); stroke-width: 2.5; filter: drop-shadow(0 3px 2px rgba(80, 50, 130, .18)); }
.lk-slotbg { fill: rgba(255, 255, 255, .55); stroke: #b8a8ee; stroke-width: 3; stroke-dasharray: 9 8; }
.lk-slotq { fill: #fff6fb; stroke: #ff9cc8; }
.lk-card, .lk-slot { cursor: pointer; transform-box: fill-box; transform-origin: center; touch-action: manipulation; }
.lk-card:active { transform: scale(.97); }
.lk-card[data-placed="1"] { cursor: default; }
.lk-cardmove { transform-box: fill-box; }

/* ---------- Phones ---------- */
@media (max-width: 560px) {
    .quiz-number-opt.lk-opt .lk-opt-emoji { font-size: 24px; }
}
@media (max-width: 380px) {
    .quiz-number-opt.lk-opt .lk-opt-emoji { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-hl, .lk-qslot, .lk-pagein { animation: none; }
    .lk-dot { transition: none; }
}