/* class7-math-GP-P2-ch6.css   (COMMON css for the whole chapter, Tiers 1 to 21)
   Ganita Prakash, Class 7 Part II, Chapter 6 "Constructions and Tilings" (class7-math.html, Topic 20).
   Pictures, the 4 answer chips (ONE line, every chip the SAME width and height) and the native phone feel
   for all popups of this chapter (ids start with "gpc6"). The popup frame itself (overlay, modal, stars,
   buttons) comes from the shared quiz css, exactly like every other tier. */

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

/* ---------------- the picture card: matt paper, soft inner edge ---------------- */
.quiz-overlay[id^="gpc6"] .gc6-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^="gpc6"] .gc6-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 330px !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^="gpc6"] .gc6-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;
}

/* ---------------- the 4 answer chips: ONE line, SAME size, text always inside ---------------- */
.quiz-overlay[id^="gpc6"] .gc6-picker,
.quiz-overlay[id^="gpc6"] [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[id^="gpc6"] .gc6-opt {
    position: relative !important;
    flex: 1 1 0 !important;
    width: 0 !important;                 /* flex-basis 0 + equal grow = four equal widths */
    min-width: 0 !important;
    max-width: none !important;
    height: 64px !important;             /* one fixed height for every chip */
    min-height: 64px !important;
    margin: 0 !important;
    padding: 4px 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;      /* two short words may stack inside the chip */
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
    overflow: hidden !important;
    box-sizing: border-box !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, 24px) !important;
    line-height: 1.12 !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^="gpc6"] .gc6-opt.gc6-sm { font-size: clamp(13px, 3.9vw, 20px) !important; }
.quiz-overlay[id^="gpc6"] .gc6-opt.gc6-xs { font-size: clamp(11.5px, 3.3vw, 17px) !important; letter-spacing: -.1px !important; }
.quiz-overlay[id^="gpc6"] .gc6-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^="gpc6"] .gc6-opt:disabled { cursor: default !important; }
.quiz-overlay[id^="gpc6"] .gc6-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .55 !important; }
.quiz-overlay[id^="gpc6"] .gc6-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: gc6Pop .35s ease !important;
}
.quiz-overlay[id^="gpc6"] .gc6-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: gc6Shake .32s ease !important;
}
@keyframes gc6Pop { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes gc6Shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

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


/* short, wide windows (a laptop in landscape): keep picture and chips on one screen */
@media (min-width: 700px) and (max-height: 640px) {
    .quiz-overlay[id^="gpc6"] .gc6-svg { max-height: 40vh !important; }
    .quiz-overlay[id^="gpc6"] .gc6-opt { height: 60px !important; min-height: 60px !important; }
}


/* feedback box: grows with its text, sits above the Next button (never overlaps it) */
.quiz-overlay[id^="gpc6"] .bq-feedback { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; text-align: left !important; box-sizing: border-box !important; }
.quiz-overlay[id^="gpc6"] .bq-feedback * { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }
.quiz-overlay[id^="gpc6"] .bq-next-btn { position: relative !important; margin-top: 12px !important; clear: both !important; }

/* probe: lets class7-math-GP-P2-ch6.js know this file really loaded */
.gc6-probe { --gc6-loaded: 1; }