/* class7-capstone.css
   Large Numbers (Class 7, Chapter 1), Tier 19 "Did You Ever Wonder...? (Thought Experiments)", Tier 20 "Puzzle Zone and
   Pro Level" and Tier 21 "Review, Reflect, Retell (Capstone)". Pictures, the single-line answer chips and the native
   phone feel for the twenty-two popups (ids start with "ly"). The popup frame itself comes from the shared quiz css. */

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

/* ---------------- the picture card: matt paper, soft inner edge ---------------- */
.quiz-overlay[id^="ly"] .ly-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^="ly"] .ly-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^="ly"] .ly-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^="ly"] .ly-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^="ly"] .ly-speak:active { transform: scale(.95) !important; }

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

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

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

/* probe: lets class7-capstone.js know this file really loaded */
.ly-probe { --ly-loaded: 1; }
/* keep the stage and the chip row a sensible width inside the wide themed popup */
.quiz-overlay[id^="ly"] .ly-picker,
.quiz-overlay[id^="ly"] [id$="Options"] { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="ly"] .ly-stage { margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="ly"] .ly-hint { text-align: center !important; }
.quiz-overlay[id^="ly"] .ly-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^="ly"] .quiz-modal { -webkit-overflow-scrolling: touch !important; }
.quiz-overlay[id^="ly"] .ly-stage { -webkit-user-select: none !important; user-select: none !important; }

/* the A-D number cards that follow the main picture: kept short so the answer chips stay on screen */
.quiz-overlay[id^="ly"] .ly-stage.ly-compact { margin-top: 0 !important; padding: 8px 8px 8px !important; }
.quiz-overlay[id^="ly"] .ly-stage.ly-compact .ly-svg { max-height: 196px !important; }
.quiz-overlay[id^="ly"] .ly-stage + .ly-stage { margin-top: -4px !important; }