/* class7-scalewords.css
   Large Numbers (Class 7, Chapter 1), Tier 4 "Getting a Feel for Large Numbers (Scale and Comparison)" and
   Tier 5 "Reading and Writing Numbers (Indian Place Value)".
   Pictures, the single-line answer chips and the native phone feel for the twelve popups
   (ids start with "lz": lzsomu, lztall, lztimes, lzbig, lzconnect, lzown, lzchart, lzcomma,
   lzwords, lznum, lzzero, lzread). The popup frame itself comes from the shared quiz css. */

.quiz-overlay[id^="lz"] .quiz-modal { -webkit-tap-highlight-color: transparent !important; overscroll-behavior: contain !important; }

/* ---------------- the picture card: matt paper, soft inner edge ---------------- */
.quiz-overlay[id^="lz"] .lz-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[id^="lz"] .lz-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[id^="lz"] .lz-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[id^="lz"] .lz-speak {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 6px !important;
    padding: 5px 12px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #7CC6FF, #3F8FE0) !important;
    box-shadow: 0 3px 8px rgba(47, 134, 214, .35) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}
.quiz-overlay[id^="lz"] .lz-speak:active { transform: scale(.95) !important; }

/* odometer wheels roll, '?' stones glow softly, Hoppy bobs */
.quiz-overlay[id^="lz"] .lz-strip { transition: transform .75s cubic-bezier(.22, .8, .25, 1); }
.quiz-overlay[id^="lz"] .lz-late { transition: opacity .5s ease; }
.quiz-overlay[id^="lz"] .lz-pulse { animation: lzPulse 1.8s ease-in-out infinite !important; }
.quiz-overlay[id^="lz"] .lz-hop { animation: lzBob 1.6s ease-in-out infinite !important; }
@keyframes lzPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes lzBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------------- the 4 answer chips: ONE line, always ---------------- */
.quiz-overlay[id^="lz"] .lz-picker,
.quiz-overlay[id^="lz"] [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;
    margin: 8px 0 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.quiz-overlay[id^="lz"] .lz-opt {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !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(16px, 4.8vw, 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;
}
.quiz-overlay[id^="lz"] .lz-opt.lz-sm { font-size: clamp(14px, 4.1vw, 20px) !important; }
.quiz-overlay[id^="lz"] .lz-opt.lz-xs { font-size: clamp(13px, 3.6vw, 17px) !important; }
.quiz-overlay[id^="lz"] .lz-opt.lz-wrap { white-space: normal !important; font-size: clamp(14px, 4vw, 19px) !important; line-height: 1.15 !important; padding: 8px 4px !important; }
.quiz-overlay[id^="lz"] .lz-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[id^="lz"] .lz-opt:disabled { cursor: default !important; }
.quiz-overlay[id^="lz"] .lz-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .55 !important; }
.quiz-overlay[id^="lz"] .lz-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: lzPop .35s ease !important;
}
.quiz-overlay[id^="lz"] .lz-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: lzShake .32s ease !important;
}
@keyframes lzPop { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes lzShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------------- phones ---------------- */
@media (max-width: 480px) {
    .quiz-overlay[id^="lz"] .lz-stage { border-radius: 20px !important; padding: 8px 6px 10px !important; margin-bottom: 10px !important; }
    .quiz-overlay[id^="lz"] .lz-hint { font-size: 12.5px !important; }
    .quiz-overlay[id^="lz"] .lz-picker,
.quiz-overlay[id^="lz"] [id$="Options"] { gap: 6px !important; }
    .quiz-overlay[id^="lz"] .lz-opt { min-height: 58px !important; border-radius: 14px !important; }
}
@media (max-width: 340px) {
    .quiz-overlay[id^="lz"] .lz-picker,
.quiz-overlay[id^="lz"] [id$="Options"] { gap: 4px !important; }
    .quiz-overlay[id^="lz"] .lz-let { display: none !important; }
}
/* ---------------- very small phones ---------------- */
@media (max-width: 360px) {
    .quiz-overlay[id^="lz"] .lz-opt { font-size: 15px !important; padding: 8px 1px !important; }
    .quiz-overlay[id^="lz"] .lz-opt.lz-sm, .quiz-overlay[id^="lz"] .lz-opt.lz-wrap { font-size: 13.5px !important; }
}
/* ---------------- tablets and desktops: bigger pictures, roomier chips ---------------- */
@media (min-width: 700px) {
    .quiz-overlay[id^="lz"] .lz-stage { max-width: 600px !important; padding: 14px 14px 16px !important; }
    .quiz-overlay[id^="lz"] .lz-svg { max-height: 360px !important; }
    .quiz-overlay[id^="lz"] .lz-hint { font-size: 15px !important; }
    .quiz-overlay[id^="lz"] .lz-picker,
.quiz-overlay[id^="lz"] [id$="Options"] { gap: 12px !important; }
    .quiz-overlay[id^="lz"] .lz-opt { min-height: 66px !important; }
    .quiz-overlay[id^="lz"] .lz-opt:hover:not(:disabled) { background: linear-gradient(180deg, #FFFFFF 0%, #E9E0FF 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-overlay[id^="lz"] .lz-strip, .quiz-overlay[id^="lz"] .lz-late { transition: none; }
    .quiz-overlay[id^="lz"] .lz-pulse, .quiz-overlay[id^="lz"] .lz-hop,
    .quiz-overlay[id^="lz"] .lz-opt.is-correct, .quiz-overlay[id^="lz"] .lz-opt.is-wrong { animation: none !important; }
}

/* probe: lets class7-scalewords.js know this file really loaded */
.lz-probe { --lz-loaded: 1; }
/* keep the stage and the chip row a sensible width inside the wide themed popup */
.quiz-overlay[id^="lz"] .lz-picker,
.quiz-overlay[id^="lz"] [id$="Options"] { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="lz"] .lz-stage { margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="lz"] .lz-hint { text-align: center !important; }
.quiz-overlay[id^="lz"] .lz-opt { word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; -webkit-text-size-adjust: 100% !important; }
/* native-app feel: no text selection on pictures, crisp tap response, smooth momentum scroll in the popup */
.quiz-overlay[id^="lz"] .quiz-modal { -webkit-overflow-scrolling: touch !important; }
.quiz-overlay[id^="lz"] .lz-stage { -webkit-user-select: none !important; user-select: none !important; }