/* ================================================================
   lkg-pro.css
   ----------------------------------------------------------------
   Styles for "Putting It All Together ("Pro" Level)" (Tier 10) on the
   LKG English page (lkg-english.html):

     - A.1  Letter, Sound & Picture Triple Match
     - A.2  Alphabet Order Race
     - A.3  Write My First Letter
     - A.4  Name Tracing
     - A.5  Spot the Mistake
     - A.6  Sound Blending Bridge
     - A.7  Picture Story Telling

   The popup shell, the picture card (.lk-stage), the voice buttons and the
   glossy SVG paint all come from lkg-ready.css + lkg-common.js, exactly like
   every other LKG tier, so this file only adds what Tier 10 needs:
   the answer chips (always ONE row of 4), letter / name chips, the finger
   writing pad, tappable letter tiles and the stepping stones.
   Every popup id starts with "lkpro"; every class starts with "lp-".

   Finish (matt + shine, kid psychology): soft matt cream / lilac paper with
   glossy sunny-yellow, coral, sky, mint, lavender and bubble-gum pink
   objects. Warm, high-contrast colours; never flashing, never a harsh red
   "wrong" signal; one clear focus per picture.

   Android-native feel: >=56px touch targets, instant :active press, no tap
   delay, no grey tap flash, safe-area padding, and no page scroll while a
   finger is writing in a picture.

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

/* ---------- popup shell touches ---------- */
.quiz-overlay[id^="lkpro"] .quiz-modal { --lk-fig: 250px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.quiz-overlay[id^="lkpro"] .quiz-question b { color: var(--secondary, #4b3f8f); }
.quiz-overlay[id^="lkpro"] .bq-btn,
.quiz-overlay[id^="lkpro"] .bq-next-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.quiz-overlay[id^="lkpro"] .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="lkpro"] .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* ================================================================
   Answer chips: ALWAYS a single line (4 chips)
   ================================================================ */
.quiz-overlay[id^="lkpro"] .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-overlay[id^="lkpro"] .quiz-number-options.lk-picker:empty { display: none; }
.quiz-overlay[id^="lkpro"] .quiz-number-opt.lk-opt {
    flex: 1 1 0; min-width: 0; max-width: none; overflow: hidden;
    padding-left: 3px; padding-right: 3px;
}

/* letter chips: big, friendly letters */
.lp-let { display: block; font-size: 34px; font-weight: 800; line-height: 1; color: var(--secondary, #4b3f8f); }
/* name chips ("ANU") and sound chips ("c - a - t") */
.lp-nm { display: block; font-size: 19px; font-weight: 800; letter-spacing: .5px; line-height: 1.1; color: var(--secondary, #4b3f8f); overflow-wrap: anywhere; }
.lp-sp { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; color: var(--secondary, #4b3f8f); white-space: nowrap; }

/* ---------- SVG paint for this tier ---------- */
.lp-tile { transform-box: fill-box; transform-origin: center; }
.lp-tile.lp-done { opacity: .55; }
.lp-tile.lp-done .lk-o { stroke: #10b981; stroke-width: 5; }
.lp-stone { transform-box: fill-box; transform-origin: center; }
.lp-stone.lp-lit { animation: lp-hop .5s ease-in-out infinite; }
.lp-stone.lp-lit .lk-o { stroke: #ffb300; stroke-width: 6; }
@keyframes lp-hop { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.07); } }

/* finger writing pad (A.3 write, A.4 trace) */
.lp-rule { fill: none; stroke: #c9c0f2; stroke-width: 2.5; stroke-dasharray: 8 8; stroke-linecap: round; pointer-events: none; }
.lp-ink { fill: none; stroke: #7c5cff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lp-guide {
    font: 800 120px/1 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    fill: rgba(124, 92, 255, .08); stroke: #7c5cff; stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round;
    text-anchor: middle; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.lp-ghost {
    font: 800 150px/1 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    fill: none; stroke: #7c5cff; stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round;
    text-anchor: middle; opacity: 0; transition: opacity .2s; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.lp-show .lp-ghost { opacity: .9; }

/* "type the child's name" row under the tracing pad */
.lp-namebox { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; max-width: 380px; }
.lp-name {
    flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 8px 14px; box-sizing: border-box;
    border: 2px solid var(--line, #ddd2fb); border-radius: 999px; background: #fff;
    font: inherit; font-size: 16px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--secondary, #4b3f8f);
}
.lp-name:focus { outline: none; border-color: var(--primary, #6c5ce7); box-shadow: 0 0 0 3px rgba(108, 92, 231, .18); }
.lp-usename { flex: 0 0 auto; }

/* ================================================================
   Responsive (phones): shrink the chip text only; chips stay on one row
   ================================================================ */
@media (max-width: 560px) {
    .quiz-overlay[id^="lkpro"] .quiz-modal { --lk-fig: 232px; }
    .quiz-overlay[id^="lkpro"] .quiz-number-options.lk-picker { gap: 8px; margin-top: 14px; }
    .lp-let { font-size: 30px; }
    .lp-nm { font-size: 15px; letter-spacing: 0; }
    .lp-sp { font-size: 13px; }
}
@media (max-width: 380px) {
    .quiz-overlay[id^="lkpro"] .quiz-modal { --lk-fig: 208px; }
    .quiz-overlay[id^="lkpro"] .quiz-number-options.lk-picker { gap: 6px; }
    .lp-let { font-size: 26px; }
    .lp-nm { font-size: 12.5px; }
    .lp-sp { font-size: 11px; }
}
@media (max-height: 560px) and (orientation: landscape) {
    .quiz-overlay[id^="lkpro"] .quiz-modal { --lk-fig: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-stone.lp-lit { animation: none; }
    .lp-ghost { transition: none; }
}