/* ================================================================
   lkg-speaking.css
   ----------------------------------------------------------------
   Styles for "Conversation & Speaking" (Tier 9) on the LKG English
   page (lkg-english.html):

     - A.1  Greeting Time        (good morning, thank you, please...)
     - A.2  Tell Me About Me     (name, age, likes, feelings, family)
     - A.3  Answer the Question  (colours, body, "which one...?")
     - A.4  Show and Tell        (toys and one-sentence descriptions)
     - A.5  Polite or Not?       (trap questions about kind words)

   The popup shell and the pictures' base paint (lk-o, lk-sh, lk-gloss,
   lk-stage, lk-opt ...) come from lkg-ready.css and the site's shared
   quiz theme, exactly like Tiers 1-5; every popup id here starts with
   "lkspk" so those "[id^=lk]" rules already apply. This file only adds
   what is new in this tier: emoji drawn inside pictures, short-sentence
   answer chips and the tappable speaker bubbles.

   Chips stay on ONE row (4 chips); sentence chips just use a slightly
   smaller, tighter font so a few words fit on a phone.

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

/* emoji used as a picture inside an SVG (animal discs, scene discs, speaker bubbles) */
.lk-emo {
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Twemoji Mozilla", sans-serif;
    user-select: none; -webkit-user-select: none;
}

/* answer chips holding a short sentence or a few words */
.quiz-number-opt.lk-opt .lk-sent-w { display: block; font-size: 13px; font-weight: 800; line-height: 1.18; letter-spacing: -0.1px; }
.quiz-overlay[id^="lkspk"] .lk-opt-emoji { font-size: 27px; }

/* speaker bubbles the child can tap to hear one child speak */
.lk-sp-tap {
    cursor: pointer; transform-box: fill-box; transform-origin: center;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform .08s ease;
}
.lk-sp-tap:active { transform: scale(.93); }
.lk-sp-tap.lk-sp-on .lk-o { stroke: #34c58f; stroke-width: 4; }
@media (hover: hover) { .lk-sp-tap:hover .lk-o { stroke: var(--primary, #6c5ce7); } }

/* the "Hear the choices" / "Hear all" button sits under the picture: keep it comfortably tappable */
.quiz-overlay[id^="lkspk"] .lk-replay { min-height: 48px; }

@media (max-width: 560px) {
    .quiz-number-opt.lk-opt .lk-sent-w { font-size: 11.5px; }
    .quiz-overlay[id^="lkspk"] .lk-opt-emoji { font-size: 24px; }
}
@media (max-width: 380px) {
    .quiz-number-opt.lk-opt .lk-sent-w { font-size: 10.5px; letter-spacing: -0.2px; }
    .quiz-overlay[id^="lkspk"] .lk-opt-emoji { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .lk-sp-tap { transition: none; }
}