/* class7-math-ch5-common.css
   Lines and Angles (Class 7, Chapter 5), Tiers 1-10: the ONE stylesheet every tier uses.
   Pictures, single-line answer chips and the native phone feel for all popups with class "c75-overlay".
   The popup frame (overlay, modal, stars, buttons) comes from the shared quiz css.
   Matt "paper" pictures with a soft sheen, pastel kid-friendly colours, no harsh contrast. */

.quiz-overlay.c75-overlay .quiz-modal { -webkit-tap-highlight-color: transparent !important; overscroll-behavior: contain !important; }

/* ---------- readable question text on every screen ---------- */
.quiz-overlay.c75-overlay .quiz-question {
    font-family: "Nunito", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(16px, 4.5vw, 21px) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    color: #2A2858 !important;
    text-align: center !important;
    margin: 6px 4px 10px !important;
    overflow-wrap: break-word !important;
}

/* ---------- the picture card ---------- */
.quiz-overlay.c75-overlay .c75-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.c75-overlay .c75-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.c75-overlay .c75-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;
}
.c75-pulse { animation: c75Pulse 1.8s ease-in-out infinite; }
.c75-hop { animation: c75Bob 1.6s ease-in-out infinite; }
@keyframes c75Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes c75Bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- the 4 answer chips: ONE line, always ---------- */
.quiz-overlay.c75-overlay .c75-picker,
.quiz-overlay.c75-overlay [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.c75-overlay .c75-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 3px !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(15px, 4.6vw, 23px) !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 answers shrink a little (still one row of four chips) */
.quiz-overlay.c75-overlay .c75-opt.c75-sm { font-size: clamp(12px, 3.7vw, 19px) !important; }
.quiz-overlay.c75-overlay .c75-opt.c75-xs { font-size: clamp(10.5px, 3.1vw, 16px) !important; letter-spacing: -.1px !important; }
.quiz-overlay.c75-overlay .c75-opt.c75-xxs { font-size: clamp(9.5px, 2.7vw, 14px) !important; letter-spacing: -.2px !important; }
.quiz-overlay.c75-overlay .c75-opt.c75-wrap { white-space: normal !important; line-height: 1.15 !important; padding: 8px 4px !important; overflow-wrap: break-word !important; }
.quiz-overlay.c75-overlay .c75-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.c75-overlay .c75-opt:disabled { cursor: default !important; }
.quiz-overlay.c75-overlay .c75-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .55 !important; }
.quiz-overlay.c75-overlay .c75-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: c75Pop .35s ease !important;
}
.quiz-overlay.c75-overlay .c75-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: c75Shake .32s ease !important;
}
@keyframes c75Pop { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes c75Shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

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

/* probe: lets class7-math-ch5-common.js know this file really loaded */
.c75-probe { --c75-loaded: 1; }