/* ================================================================
   lkg-ready.css
   ----------------------------------------------------------------
   Styles for "Getting Ready (Listening, Looking & Holding)" (Tier 1)
   on the LKG English page (lkg-english.html):

     - A.1  Sound Detective        (hear a sound, tap the picture)
     - A.2  Same or Different      (twins, odd one out, what changed)
     - A.3  Left to Right Trail    (bee path, reading direction)
     - A.4  Big and Small          (sizes, baskets)
     - A.5  Finger Warm-Up         (bubbles, groove, press-and-hold)

   Same popup shell as the other skill quizzes (quiz-overlay /
   quiz-modal / bq-* classes): the popup look itself comes from the
   site's shared quiz theme sheets, so this file only styles the
   pictures, the voice buttons and the answer chips (every popup id
   starts with "lk"; every class starts with "lk-").

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

   Layout notes
   - Answer chips ALWAYS stay on ONE row (flex-wrap: nowrap), 4 chips.
   - Android-native feel: >=56px touch targets, instant :active press,
     no 300ms delay, no grey tap flash, safe-area padding, no
     accidental page scroll while a finger is drawing in a picture.

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

/* ---------- popup shell: uses the site's shared quiz theme ----------
   (quiz-popup-theme.css / quiz-modal-responsive.css / computation.css), exactly like
   every other skill popup. Only small LKG touches live here. */
.quiz-overlay[id^="lk"] .quiz-modal { --lk-fig: 250px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.quiz-overlay[id^="lk"] .quiz-question b { color: var(--secondary, #4b3f8f); }
.quiz-overlay[id^="lk"] .bq-btn,
.quiz-overlay[id^="lk"] .bq-next-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.quiz-overlay[id^="lk"] .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="lk"] .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* the voice buttons that sit at the end of every instruction (LKG kids cannot read yet) */
.lk-say, .lk-mute {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 40px; height: 40px; margin-left: 6px; padding: 0;
    border: 2px solid var(--primary, #6c5ce7); border-radius: 50%;
    background: #fff; color: var(--primary, #6c5ce7); font-size: 17px; line-height: 1;
    box-shadow: 0 3px 0 rgba(108, 92, 231, .22); cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s;
}
.lk-mute { width: 34px; height: 34px; font-size: 14px; border-color: #c9c0f2; box-shadow: 0 2px 0 rgba(108, 92, 231, .12); }
.lk-mute.is-off { background: #f1eefb; }
.lk-say:active, .lk-mute:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, .22); }

/* ---------- SVG paint ---------- */
.lk-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
/* pictures a finger can drag or press: stop the page from scrolling under the finger */
.lk-stage.lk-live .lk-svg { touch-action: none; }
.lk-o { stroke: rgba(80, 50, 130, 0.55); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lk-sh { filter: drop-shadow(0 4px 3px rgba(80, 50, 130, 0.22)); }
.lk-gloss { fill: #fff; opacity: 0.42; pointer-events: none; }
.lk-spark { fill: #fff; opacity: 0.95; pointer-events: none; }
.lk-nopt { pointer-events: none; }
.lk-t {
    font: 800 22px/1 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    fill: #3b2a73; text-anchor: middle; dominant-baseline: central;
    stroke: #fff; stroke-width: 5; paint-order: stroke; stroke-linejoin: round;
    pointer-events: none; user-select: none; -webkit-user-select: none;
}
.lk-t-lbl { font-size: 24px; }
.lk-t-small { font-size: 19px; }
.lk-t-white { fill: #fff; stroke: rgba(80, 50, 130, .55); stroke-width: 5; }
.lk-t-num { font-size: 30px; }
.lk-line { stroke: #3b2a73; stroke-width: 3; stroke-linecap: round; fill: none; }
.lk-dash { stroke-dasharray: 3 11; }
.lk-ground { fill: #bfe9c9; stroke: rgba(40, 110, 70, .45); stroke-width: 2.5; }
.lk-pill { fill: rgba(255, 255, 255, .92); stroke: rgba(80, 50, 130, .40); stroke-width: 2; }
.lk-hilite { fill: none; stroke: #ffb300; stroke-width: 5; }
.lk-glow { fill: none; stroke: #ffd54a; stroke-width: 6; opacity: .95; }
.lk-ghost { fill: none; stroke: #7c5cff; stroke-width: 3; stroke-dasharray: 5 5; opacity: .6; }
.lk-wood { fill: #f6c98d; stroke: rgba(120, 70, 20, .55); stroke-width: 2.5; }
.lk-groove-out { fill: none; stroke: #d9c9a8; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
.lk-groove-in { fill: none; stroke: #b99a68; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.lk-trail-out { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.lk-trail-in { fill: none; stroke: #ffc94d; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 16; }
.lk-trail-done { fill: none; stroke: #34c58f; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.lk-arrow { fill: none; stroke: #7c5cff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.lk-drag { cursor: grab; touch-action: none; }
.lk-drag:active { cursor: grabbing; }
.lk-tap { cursor: pointer; }
.lk-bob { animation: lk-bob 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lk-wobble { animation: lk-wobble .45s ease-in-out 1; transform-box: fill-box; transform-origin: center; }
.lk-pulse { animation: lk-pulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes lk-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes lk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- picture card ---------- */
.lk-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px auto 0; }
.lk-stage {
    position: relative; width: var(--lk-fig); aspect-ratio: 1 / 1; box-sizing: border-box;
    padding: 6px; border-radius: 20px;
    background:
        radial-gradient(120% 90% at 25% 10%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #f7f2ff 0%, #ece3ff 100%);
    border: 2px solid var(--line, #ddd2fb);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 22px rgba(167, 139, 250, .16);
}
.lk-stage > svg { width: 100%; height: 100%; }
.lk-stage.lk-wide { width: min(100%, calc(var(--lk-fig) * 1.7)); aspect-ratio: 2 / 1; }
.lk-hint { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: #7a71a8; line-height: 1.35; max-width: 380px; }
.lk-hint b { color: var(--secondary, #4b3f8f); }
.lk-btnrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lk-replay {
    min-height: 48px; padding: 8px 22px; border: 2px solid var(--primary, #6c5ce7); border-radius: 999px;
    background: #fff; color: var(--primary, #6c5ce7); font: inherit; font-weight: 800; font-size: 16px;
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.20); cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s;
}
.lk-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(124, 92, 255, 0.20); }
.lk-replay.lk-big { min-height: 60px; padding: 10px 30px; font-size: 19px; background: var(--primary, #6c5ce7); color: #fff; box-shadow: 0 4px 0 rgba(75, 63, 143, .35); }

/* ================================================================
   Answer chips: ALWAYS a single line (4 chips)
   ================================================================ */
.quiz-number-options.lk-picker {
    display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
    gap: 10px; width: 100%; max-width: 500px; margin: 16px auto 4px;
}
.quiz-number-options.lk-picker:empty { display: none; }
.quiz-number-options.lk-picker.lk-wait { opacity: .38; pointer-events: none; filter: grayscale(.35); }
.quiz-number-opt.lk-opt {
    display: inline-flex; flex: 1 1 0; min-width: 0; max-width: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: auto !important; min-height: 54px !important; max-height: none !important;
    box-sizing: border-box !important; padding: 10px 5px;
    white-space: normal !important; overflow: hidden; overflow-wrap: break-word;
    font-weight: 800; font-size: 15.5px; line-height: 1.2; text-align: center;
    color: var(--secondary, #4b3f8f);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    user-select: none; -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt.lk-opt.lk-sym { font-size: 34px; line-height: 1; }
.quiz-number-opt.lk-opt:active:not(:disabled) { transform: scale(.96); background: rgba(124, 77, 255, 0.10); }
@media (hover: hover) {
    .quiz-number-opt.lk-opt:hover:not(:disabled) { border-color: var(--primary, #6c5ce7); }
}
.quiz-number-opt.lk-opt:disabled { cursor: default; }
.quiz-number-opt.lk-opt.is-correct { border-color: #10b981; background: rgba(16, 185, 129, 0.08); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.quiz-number-opt.lk-opt.is-wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.quiz-number-opt.lk-opt.has-thumb { padding: 6px 4px 8px; }
.lk-opt-thumb { display: block; width: 100%; max-width: 84px; aspect-ratio: 1 / 1; }
.lk-opt-letter { font-size: 14px; font-weight: 800; opacity: .9; }
.lk-opt-emoji { font-size: 26px; line-height: 1; }

/* ================================================================
   Responsive (phones): shrink the drawings and chips only
   ================================================================ */
@media (max-width: 560px) {
    .quiz-overlay[id^="lk"] .quiz-modal { --lk-fig: 232px; }
    .quiz-number-options.lk-picker { gap: 8px; margin-top: 14px; }
    .quiz-number-opt.lk-opt { font-size: 13px; padding: 7px 3px; min-height: 56px !important; letter-spacing: -0.1px; }
    .lk-opt-thumb { max-width: 72px; }
}
@media (max-width: 380px) {
    .quiz-overlay[id^="lk"] .quiz-modal { --lk-fig: 208px; }
    .quiz-number-opt.lk-opt { font-size: 11.5px; padding: 6px 2px; }
    .quiz-number-opt.lk-opt.lk-sym { font-size: 28px; }
    .quiz-number-opt.lk-opt.has-thumb { padding: 5px 2px 6px; }
    .quiz-number-options.lk-picker { gap: 6px; }
    .lk-opt-thumb { max-width: 60px; }
    .lk-opt-emoji { font-size: 22px; }
    .lk-hint { font-size: 13px; }
}
@media (pointer: coarse) {
    .quiz-number-opt.lk-opt { min-height: 60px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
    .quiz-overlay[id^="lk"] .quiz-modal { --lk-fig: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.lk-opt, .lk-replay, .lk-say, .lk-mute { transition: none; }
    .lk-bob, .lk-pulse, .lk-wobble { animation: none; }
}

/* hands-on pictures: no text selection or long-press menu while a finger is working */
.lk-stage { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.lk-item.lk-tap, .lk-bead.lk-tap { transform-box: fill-box; transform-origin: center; }