/* kids-quiz-common.css
   Shared look for the picture quizzes for kids (any chapter, any class).
   Add the class "kq-theme" to a popup (<div class="quiz-overlay kq-theme" ...>) and load this file once.
   It gives: the matt picture card, the single-line answer chips (readable on small Android screens),
   the reason cards, the hint button, the glowing "?" box, and the phone / tablet / desktop sizes.
   The popup frame itself (overlay, modal, stars, buttons) still comes from the shared quiz css.
   The js side: quizEngine.forFile({ cls: "kq", ... }) so that the chips get the class "kq-opt".
   Chapter-only rules (for example the moving scale) stay in that chapter's own css file. */

/* ---------------- popup feel ---------------- */
.quiz-overlay.kq-theme .quiz-modal { -webkit-tap-highlight-color: transparent !important; overscroll-behavior: contain !important; }

/* ---------------- the picture card: matt paper, soft inner edge ---------------- */
.quiz-overlay.kq-theme .kq-stage {
    margin: 6px auto 12px !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: 10px 10px 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #FFFAEB 0%, #EEF7FF 100%) !important;
    box-shadow: inset 0 0 0 1.5px rgba(122, 104, 214, .16), 0 8px 18px rgba(60, 58, 110, .10) !important;
    box-sizing: border-box !important;
}
.quiz-overlay.kq-theme .kq-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    overflow: visible !important;
    font-family: "Nunito", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.quiz-overlay.kq-theme .kq-hint {
    margin-top: 6px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #5A4FA0 !important;
}
.quiz-overlay.kq-theme .kq-pulse { animation: kqPulse 1.8s ease-in-out infinite !important; }
@keyframes kqPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------------- the 4 answer chips: ONE line, always ---------------- */
.quiz-overlay.kq-theme .kq-picker,
.quiz-overlay.kq-theme [id$="Options"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 8px auto 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.quiz-overlay.kq-theme .kq-opt {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border: 2px solid #CFC6F5 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3EEFF 100%) !important;
    color: #2A2858 !important;
    font-family: "Nunito", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(14px, 4.4vw, 22px) !important;
    line-height: 1.1 !important;
    box-shadow: 0 3px 0 #CFC6F5, 0 6px 12px rgba(60, 58, 110, .10) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
/* longer labels: smaller text, or wrap inside the chip (the chips stay in one row) */
.quiz-overlay.kq-theme .kq-opt.kq-sm   { font-size: clamp(11px, 3.45vw, 18px) !important; }
.quiz-overlay.kq-theme .kq-opt.kq-xs   { font-size: clamp(9.5px, 2.8vw, 15px) !important; letter-spacing: -.2px !important; }
.quiz-overlay.kq-theme .kq-opt.kq-wrap { white-space: normal !important; font-size: clamp(12px, 3.7vw, 19px) !important; line-height: 1.15 !important; padding: 8px 4px !important; }
.quiz-overlay.kq-theme .kq-opt.kq-rich { font-size: clamp(11px, 3.4vw, 19px) !important; letter-spacing: -.2px !important; }
.quiz-overlay.kq-theme .kq-opt:active:not(:disabled) { transform: translateY(2px) scale(.97) !important; box-shadow: 0 1px 0 #CFC6F5, 0 2px 6px rgba(60, 58, 110, .12) !important; }
.quiz-overlay.kq-theme .kq-opt:disabled { cursor: default !important; }
.quiz-overlay.kq-theme .kq-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .55 !important; }
.quiz-overlay.kq-theme .kq-opt.is-correct {
    background: linear-gradient(180deg, #DDFBE8 0%, #9BEBB9 100%) !important;
    border-color: #2FB36A !important;
    color: #145A36 !important;
    box-shadow: 0 3px 0 #2FB36A, 0 6px 12px rgba(47, 179, 106, .25) !important;
    animation: kqPop .35s ease !important;
}
.quiz-overlay.kq-theme .kq-opt.is-wrong {
    background: linear-gradient(180deg, #FFE6E1 0%, #FFB8AA 100%) !important;
    border-color: #E5604D !important;
    color: #8A2616 !important;
    box-shadow: 0 3px 0 #E5604D, 0 6px 12px rgba(229, 96, 77, .22) !important;
    animation: kqShake .32s ease !important;
}
@keyframes kqPop   { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes kqShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* a sentence chip ( ? + 3 = 8 ) and the glowing "?" box inside text */
.quiz-overlay.kq-theme .kq-sent { display: inline-flex; align-items: center; justify-content: center; gap: .18em; white-space: nowrap; }
.quiz-overlay.kq-theme .kq-bx {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3em; height: 1.3em; margin: 0 .12em; box-sizing: border-box;
    border-radius: .32em; border: 2px dashed #E5A100;
    background: linear-gradient(180deg, #FFF0B8 0%, #FFCB45 100%);
    color: #2A2858; font-weight: 900; font-size: .82em; line-height: 1; vertical-align: -.2em;
}
.quiz-overlay.kq-theme .kq-opt .kq-bx { font-size: .8em; }
.quiz-overlay.kq-theme .kq-lt { font-style: italic; font-weight: 900; color: #5B3FC4; }   /* a letter that names a hidden number */

/* ---------------- reason / answer cards (choose A, B, C or D) ---------------- */
.quiz-overlay.kq-theme .kq-rks { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 2px 2px; }
.quiz-overlay.kq-theme .kq-rk {
    display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; box-sizing: border-box;
    border-radius: 14px; background: #fff; border: 2px solid #CFC6F5; box-shadow: 0 2px 0 #CFC6F5; text-align: left;
}
.quiz-overlay.kq-theme .kq-rkl {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px; color: #fff; background: linear-gradient(180deg, #9A82F0, #7B5CE0);
}
.quiz-overlay.kq-theme .kq-rkt { font-size: 14px; line-height: 1.3; font-weight: 700; color: #2A2858; }

/* ---------------- hint button ---------------- */
.quiz-overlay.kq-theme .kq-hintbtn {
    display: block !important;
    margin: 8px auto 0 !important;
    padding: 7px 18px !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #5A3A00 !important;
    background: linear-gradient(180deg, #FFE58A, #FFC83D) !important;
    box-shadow: 0 3px 8px rgba(229, 161, 0, .35) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}
.quiz-overlay.kq-theme .kq-hintbtn:active:not(:disabled) { transform: scale(.96) !important; }
.quiz-overlay.kq-theme .kq-hintbtn:disabled { opacity: .6 !important; cursor: default !important; }

/* ---------------- phones ---------------- */
@media (max-width: 480px) {
    .quiz-overlay.kq-theme .kq-stage { border-radius: 20px !important; padding: 8px 6px 10px !important; margin-bottom: 10px !important; }
    .quiz-overlay.kq-theme .kq-hint { font-size: 12.5px !important; }
    .quiz-overlay.kq-theme .kq-picker, .quiz-overlay.kq-theme [id$="Options"] { gap: 6px !important; }
    .quiz-overlay.kq-theme .kq-opt { min-height: 56px !important; border-radius: 14px !important; }
}
@media (max-width: 340px) {
    .quiz-overlay.kq-theme .kq-picker, .quiz-overlay.kq-theme [id$="Options"] { gap: 4px !important; }
}
/* ---------------- tablets and desktops: bigger pictures, roomier chips ---------------- */
@media (min-width: 700px) {
    .quiz-overlay.kq-theme .kq-stage { max-width: 600px !important; padding: 14px 14px 16px !important; }
    .quiz-overlay.kq-theme .kq-svg { max-height: 360px !important; }
    .quiz-overlay.kq-theme .kq-hint { font-size: 15px !important; }
    .quiz-overlay.kq-theme .kq-picker, .quiz-overlay.kq-theme [id$="Options"] { gap: 12px !important; }
    .quiz-overlay.kq-theme .kq-opt { min-height: 66px !important; }
    .quiz-overlay.kq-theme .kq-opt.kq-rich { font-size: 20px !important; }
    .quiz-overlay.kq-theme .kq-opt:hover:not(:disabled) { background: linear-gradient(180deg, #FFFFFF 0%, #E9E0FF 100%) !important; }
    .quiz-overlay.kq-theme .kq-rks { grid-template-columns: 1fr 1fr; gap: 10px; }
    .quiz-overlay.kq-theme .kq-rkt { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-overlay.kq-theme .kq-pulse, .quiz-overlay.kq-theme .kq-timer > i,
    .quiz-overlay.kq-theme .kq-opt.is-correct, .quiz-overlay.kq-theme .kq-opt.is-wrong { animation: none !important; }
}

/* ---------------- gentle timer bar (a calm countdown, no penalty) ---------------- */
.quiz-overlay.kq-theme .kq-timer { width: 100%; max-width: 360px; height: 10px; margin: 10px auto 2px; border-radius: 999px; background: #E9E4FA; overflow: hidden; }
.quiz-overlay.kq-theme .kq-timer > i { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #62D9B8, #FFCB45, #FF917F); transform-origin: left center; animation: kqTimer 25s linear forwards; }
.quiz-overlay.kq-theme .kq-timer.stop > i { animation-play-state: paused; }
@keyframes kqTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* probe: lets the js know this file really loaded */
.kq-probe { --kq-loaded: 1; }
/* keep the picture card centred inside a wide themed popup */
.quiz-overlay.kq-theme .kq-stage { margin-left: auto !important; margin-right: auto !important; }