/* class7-math-common.css : shared look for every Class 7 quiz popup (generated by class7-math-common.js).
   Pictures (matte + gloss), single-line answer chips, Android bottom-sheet feel. Tier files add only their own bits. */

/* ---------- text inside pictures ---------- */
.c7-svg { width: 100%; height: auto; display: block; font-family: "Nunito", "Poppins", system-ui, sans-serif; }
.c7-t { text-anchor: middle; fill: #2b2f5b; font-weight: 800; font-size: 14px; }
.c7-start { text-anchor: start; }
.c7-b { font-weight: 800; }
.c7-white { fill: #fff; }
.c7-muted { fill: #6b739e; font-weight: 700; }
.c7-t-xs { font-size: 10.5px; }
.c7-t-s { font-size: 12.5px; }
.c7-t-lbl { font-size: 15px; }
.c7-t-num { font-size: 30px; fill: #ff8a1f; }
.c7-ico { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- picture card: soft matte panel ---------- */
.c7-stage {
    margin: 10px auto 12px; padding: 10px 10px 8px; max-width: 560px; border-radius: 22px;
    background: linear-gradient(180deg, #fffdf6 0%, #f1f6ff 100%);
    border: 1.5px solid #e3e8fb; box-shadow: 0 6px 18px rgba(80, 90, 160, .12), inset 0 1px 0 #fff;
}
.c7-hint { margin: 4px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #6b739e; line-height: 1.3; }

/* ---------- pictures: odometer, chart, blocks, bubbles ---------- */
.c7-meter { fill: #e9edff; stroke: #cdd6f6; stroke-width: 1.5; }
.c7-wheel { fill: url(#g-glass); stroke: #1b2552; stroke-width: 1.5; }
.c7-wheel.off { opacity: .28; }
.c7-wgloss { fill: #fff; opacity: .09; }
.c7-wd { fill: #fff; font-size: 38px; font-weight: 800; }
.c7-wq { fill: #ffcf5a !important; }
.c7-comma { fill: #f2a900; font-size: 36px; font-weight: 800; }
.c7-wglow { stroke: #ffcf5a; stroke-width: 3; animation: c7-glow 1.4s ease-in-out infinite; }
.c7-cd { font-size: 40px; font-weight: 800; fill: #2b2f5b; }
.c7-hi { fill: none; stroke: #2b2f5b; stroke-width: 3.5; animation: c7-glow 1.4s ease-in-out infinite; }
.c7-hi2 { fill: none; stroke: #8b93c0; stroke-width: 2.5; stroke-dasharray: 6 5; }
.c7-band { stroke-width: 3; filter: saturate(1.25); }
.c7-panel { filter: drop-shadow(0 2px 3px rgba(60, 70, 140, .15)); }
.c7-band-row { fill: #fff; stroke: #d6dcf5; stroke-dasharray: 5 4; opacity: .85; }
.c7-brace { fill: none; stroke: #6b739e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.c7-ghost { fill: #fff6df; stroke: #ffb703; stroke-width: 2.5; stroke-dasharray: 7 5; }
.c7-arrowp { fill: none; stroke: #6b739e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.c7-bubble { fill: #fff; stroke: #cfd7f7; stroke-width: 2.5; filter: drop-shadow(0 3px 4px rgba(60, 70, 140, .15)); }
.c7-bubble-tail { fill: none; stroke: #cfd7f7; stroke-width: 2.5; stroke-linejoin: round; }
.c7-bt { fill: #2b2f5b; font-weight: 800; }
.c7-bt-num { fill: #3d8ff0; }
.c7-pulse { animation: c7-pulse 1.6s ease-in-out infinite; }
@keyframes c7-glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes c7-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ---------- pond (frog and stepping stones; Tier 1 + Tier 2) ---------- */
.c7-frog { transform-box: fill-box; transform-origin: 50% 100%; animation: c7-bob 2.2s ease-in-out infinite; }
@keyframes c7-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.c7-ripple { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.c7-arc { fill: none; stroke: #6b7bc4; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; }
.c7-pill { fill: #ffe58a; stroke: #f2b200; stroke-width: 1.5; }
.c7-pill-q { fill: #ffd9c9; stroke: #ff8a5c; }
.c7-stn { font-size: 16px; font-weight: 800; fill: #2b3a78; }
.c7-stn-s { font-size: 13px; }
.c7-q-stone { filter: drop-shadow(0 0 6px #ffb703); animation: c7-glow 1.4s ease-in-out infinite; }
.c7-wd-s { font-size: 29px; }
.c7-cd-s { font-size: 32px; }
.c7-hd { font-size: 8.4px; letter-spacing: -.1px; }

/* ---------- ladders (blocks / units): ring, arrows, ? marker ---------- */
.c7-lad-hl { fill: #fff7d6; stroke: #ffb703; stroke-width: 2.5; animation: c7-glow 1.4s ease-in-out infinite; }
.c7-lad-arrow { fill: none; stroke: #8b93c0; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c7-wq-o { fill: #ff8a1f !important; font-size: 14px; }
.c7-t-unit { font-size: 21px; font-weight: 800; }

/* ---------- shared bits used by several tiers ---------- */
.c7-pile { fill: #fff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(60, 70, 140, .15)); }
.c7-eq { fill: #ff8a1f; }

/* ---------- answer chips: ALWAYS one line of 4 ---------- */
.c7-picker {
    display: flex !important; flex-wrap: nowrap !important; align-items: stretch; justify-content: center;
    gap: clamp(6px, 1.8vw, 12px); width: 100%; margin: 6px 0 4px; padding: 0;
}
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt {
    flex: 1 1 0; min-width: 0; width: auto; max-width: none; margin: 0;
    height: auto !important; min-height: 56px; padding: 6px 2px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 16px; border: 2px solid #dbe2fb; background: linear-gradient(180deg, #ffffff, #f2f5ff);
    color: #2b2f5b; font-family: inherit; font-weight: 800; line-height: 1.1;
    font-size: clamp(13px, 4.2vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: clip;
    box-shadow: 0 3px 0 #cbd4f5, 0 6px 12px rgba(80, 90, 160, .1);
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt.c7-md { font-size: clamp(11px, 3.5vw, 16px); }
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt.c7-sm { font-size: clamp(9.5px, 2.9vw, 13px); letter-spacing: -.2px; }
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #cbd4f5; }
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt:disabled { cursor: default; opacity: 1; }
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt.is-correct { background: linear-gradient(180deg, #c9f7dd, #8be6b4); border-color: #2bbf80; color: #0f6b46; box-shadow: 0 3px 0 #1f9d68; animation: c7-pop .35s ease; }
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt.is-wrong { background: linear-gradient(180deg, #ffe0dc, #ffb4aa); border-color: #ff6f59; color: #9a2a1a; box-shadow: 0 3px 0 #d4412c; animation: c7-shake .3s ease; }
@keyframes c7-pop { 50% { transform: scale(1.06); } }
@keyframes c7-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* picture chips (block pictures with a short name) */
.quiz-overlay .c7-picker .quiz-number-opt.c7-opt.c7-pic { padding: 6px 2px 6px; min-height: 84px; line-height: 1.15; overflow: visible; }
.c7-opt-ico { display: block; width: 100%; max-width: 50px; height: clamp(36px, 10vw, 48px); flex: 0 0 auto; }
.c7-opt-word { display: block; font-size: clamp(10px, 3vw, 13px); font-weight: 800; }

/* ---------- popup polish ---------- */
.c7-overlay { overscroll-behavior: contain; }
.c7-overlay .quiz-modal { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.c7-overlay .quiz-question { font-weight: 700; line-height: 1.4; }
.c7-overlay .bq-next-btn { min-height: 52px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- phones: bottom sheet that feels native ---------- */
@media (max-width: 600px) {
    .c7-overlay { align-items: flex-end !important; padding: 0 !important; }
    .c7-overlay .quiz-modal {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        max-height: 96vh; max-height: 96dvh; overflow-y: auto;
        border-radius: 26px 26px 0 0 !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .c7-overlay .quiz-close { width: 44px; height: 44px; }
    .c7-stage { margin-left: -4px; margin-right: -4px; padding: 8px 6px 6px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .c7-pulse, .c7-wglow, .c7-hi, .c7-frog, .c7-ripple { animation: none !important; }
}