/* ================================================================
   class6-math-common.css
   ----------------------------------------------------------------
   Shared look for every Class 6 Math Data Handling quiz popup
   (generated by class6-math-common.js). The inner popup look comes
   from the site's quiz theme sheets (quiz-popup-theme.css,
   quiz-modal-responsive.css); this file adds only:
       - the matt "paper" picture stage and its shiny sticker colours
     - ONE-ROW answer chips (4 chips, never wrap)
     - voice buttons, soft feedback, stars, tally-mark drawing
   Android-native feel: >=56px touch targets, instant :active press,
   no tap flash, safe-area padding, no scroll while a finger is busy.
   ================================================================ */
/* popup shell (open / close, tracker, stars, feedback) = site quiz theme + quiz-engine.js; only touch tweaks here */
.c6-overlay .quiz-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.c6-overlay .quiz-question b { color: var(--secondary, #4b3f8f); }
.c6-overlay .quiz-question { font-weight: 800; }
.c6-overlay .bq-btn, .c6-overlay .bq-next-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.c6-overlay .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.c6-overlay .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* speaker button at the end of every instruction (speaks only when tapped) */
.c6-say { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 44px; height: 44px; margin-left: 6px; padding: 0;
    border: 2px solid var(--primary, #6c5ce7); border-radius: 50%; background: #fff; color: var(--primary, #6c5ce7); font-size: 18px; line-height: 1;
    box-shadow: 0 3px 0 rgba(108, 92, 231, .22); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
    transition: transform .08s ease, box-shadow .15s; }
.c6-say:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, .22); }

/* ---------- picture stage: soft matt cream paper ---------- */
.c6-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px auto 0; }
.c6-stage { position: relative; width: min(100%, 500px); box-sizing: border-box; padding: 10px; border-radius: 24px; border: 2px solid #ddd2fb;
    background: radial-gradient(120% 90% at 20% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fbf8ff 0%, #efe7ff 100%);
    box-shadow: 0 4px 0 rgba(75, 63, 143, .08), inset 0 0 26px rgba(167, 139, 250, .16); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.c6-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.c6-hint { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: #7a71a8; line-height: 1.35; max-width: 400px; }
.c6-btnrow { display: flex; gap: 10px; justify-content: center; }
.c6-replay { min-height: 48px; padding: 8px 22px; border: 2px solid var(--primary, #6c5ce7); border-radius: 999px; background: #fff; color: var(--primary, #6c5ce7);
    font: inherit; font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 rgba(108, 92, 231, .2); cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; transition: transform .08s ease, box-shadow .15s; }
.c6-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, .2); }

/* svg paint */
.c6-pill { fill: rgba(255, 255, 255, .94); stroke: rgba(80, 50, 130, .35); stroke-width: 2; }
.c6-box { stroke: rgba(80, 50, 130, .4); stroke-width: 2.5; }
.c6-o { stroke: rgba(80, 50, 130, .55); stroke-width: 2.5; stroke-linejoin: round; }
.c6-glow { fill: none; stroke: #ffc83d; stroke-width: 5; }
.c6-ghost { fill: none; stroke: #7c5cff; stroke-width: 3; stroke-dasharray: 6 6; opacity: .65; }
.c6-wave { fill: none; stroke: #5fb0f2; stroke-width: 7; stroke-linecap: round; }
.c6-t { font: 800 22px/1 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: #3b2a73; text-anchor: middle; dominant-baseline: central;
    pointer-events: none; user-select: none; -webkit-user-select: none; }
.c6-t.c6-start { text-anchor: start; }
.c6-t-lbl { font-size: 20px; } .c6-t-s { font-size: 15px; } .c6-t-xs { font-size: 10.5px; }
.c6-t-num { font-size: 64px; fill: #4b3f8f; } .c6-t-huge { font-size: 76px; }
.c6-tally-mark { stroke: #3b2a73; stroke-linecap: round; fill: none; }
.c6-tally-strike { stroke: #f2705c; }
.c6-mk { stroke-dasharray: 1; stroke-dashoffset: 0; }
.c6-mk.c6-hide { stroke-dashoffset: 1; opacity: 0; }
.c6-mk.c6-draw { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .3s ease, opacity .08s; }
.c6-hide-vote { opacity: 0; transform: translateY(-14px); }
.c6-vote-in { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
.c6-vote { transform-box: fill-box; }
.c6-pulse { animation: c6-pulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes c6-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* small pictures inside prompts and chips */
.c6-ico { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.c6-ico.c6-inl { width: 1.7em; height: 1.7em; margin: 0 2px; }

/* ================================================================
   Answer chips: ALWAYS exactly one row of 4
   ================================================================ */
.quiz-number-options.c6-picker { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 10px; width: 100%; max-width: 540px; margin: 16px auto 4px; }
.quiz-number-options.c6-picker:empty { display: none; }
.quiz-number-options.c6-picker.c6-wait { opacity: .4; pointer-events: none; filter: grayscale(.3); }
.quiz-number-opt.c6-opt { display: inline-flex; flex: 1 1 0; min-width: 0; max-width: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: auto !important; min-height: 64px !important; max-height: none !important; box-sizing: border-box !important; padding: 8px 4px; margin: 0;
    white-space: normal !important; overflow: hidden; overflow-wrap: anywhere; font-weight: 800; font-size: 15px; line-height: 1.15; text-align: center; color: var(--secondary, #4b3f8f);
    background: #fff; border: 2px solid #d9d0f5; border-radius: 18px; box-shadow: 0 3px 0 rgba(108, 92, 231, .16); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s; }
.quiz-number-opt.c6-opt .c6-num { font-size: 30px; line-height: 1; }
.quiz-number-opt.c6-opt .c6-opt-ico { display: block; width: 100%; max-width: 46px; aspect-ratio: 1 / 1; }
.quiz-number-opt.c6-opt .c6-opt-ico .c6-ico { width: 100%; height: 100%; vertical-align: top; }
.quiz-number-opt.c6-opt .c6-opt-word { display: block; max-width: 100%; font-size: 13px; }
.quiz-number-opt.c6-opt .c6-thumb { display: block; width: 100%; max-width: 110px; height: auto; }
.quiz-number-opt.c6-opt:active:not(:disabled) { transform: scale(.96); background: rgba(124, 77, 255, .09); }
@media (hover: hover) { .quiz-number-opt.c6-opt:hover:not(:disabled) { border-color: var(--primary, #6c5ce7); } }
.quiz-number-opt.c6-opt:disabled { cursor: default; }
.quiz-number-opt.c6-opt.is-correct { border-color: #22b07d; background: rgba(34, 176, 125, .10); box-shadow: 0 0 0 3px rgba(34, 176, 125, .2); }
.quiz-number-opt.c6-opt.is-wrong { border-color: #ffa94d; background: rgba(255, 169, 77, .12); box-shadow: 0 0 0 3px rgba(255, 169, 77, .25); }  /* soft amber, never harsh red */

/* phones */
@media (max-width: 560px) {
    .c6-stage { padding: 6px; border-radius: 20px; }
    .quiz-number-options.c6-picker { gap: 6px; margin-top: 14px; }
    .quiz-number-opt.c6-opt { font-size: 13px; padding: 6px 3px; }
    .quiz-number-opt.c6-opt .c6-num { font-size: 26px; }
    .quiz-number-opt.c6-opt .c6-opt-word { font-size: 11.5px; }
    .quiz-number-opt.c6-opt .c6-opt-ico { max-width: 38px; }
}
@media (max-width: 380px) { .quiz-number-opt.c6-opt .c6-opt-word { font-size: 10.5px; } .c6-hint { font-size: 13px; } }
@media (pointer: coarse) { .quiz-number-opt.c6-opt { min-height: 68px !important; } }
@media (max-height: 560px) and (orientation: landscape) { .c6-stage { width: min(100%, 360px); } }
@media (prefers-reduced-motion: reduce) {
    .c6-pulse { animation: none; } .c6-mk.c6-draw, .c6-vote-in { transition: none; }
}

/* ================================================================
   Frequency tables, raw-list tiles, sentence / number-row chips
   (drawn by C6.freqTable, C6.tiles in class6-math-common.js)
   Matt pastel bodies + one small soft gloss strip = calm, shiny, friendly.
   ================================================================ */
.c6-thead { fill: #e6dcff; stroke: #cdbcf7; stroke-width: 2; }
.c6-th { font-size: 14px; fill: #5b45a8; letter-spacing: .02em; }
.c6-t-m { font-size: 17px; }
.c6-t-fr { font-size: 26px; fill: #157a58; }
.c6-fcell { fill: #dff7e8; stroke: #7fd3ae; stroke-width: 2.5; }
.c6-totalpill { fill: #fff3c9; stroke: #f0cf6a; stroke-width: 2; }
.c6-tile { stroke: rgba(80, 50, 130, .4); stroke-width: 2.5; }
.c6-gloss { fill: #fff; opacity: .65; pointer-events: none; }
.c6-banner { fill: #fff0f6; stroke: #f5b5cf; stroke-width: 2; }
.c6-hl { fill: #e0558a; font-size: 22px; }

/* a short run of numbers on one chip */
.quiz-number-opt.c6-opt .c6-seq { display: block; white-space: nowrap; font-weight: 800; font-size: clamp(12px, 3.7vw, 19px); letter-spacing: .04em; }
/* a short sentence on one chip */
.quiz-number-opt.c6-opt .c6-q { font-size: 13px; line-height: 1.2; }
/* letter badge above a picture chip */
.quiz-number-opt.c6-opt .c6-letter { display: block; font-size: 12px; font-weight: 800; line-height: 1; color: #7a71a8; }
@media (max-width: 560px) { .quiz-number-opt.c6-opt .c6-q { font-size: 11.5px; } }
@media (max-width: 380px) { .quiz-number-opt.c6-opt .c6-q { font-size: 10.5px; } }
/* ================================================================
   Pictographs (drawn by C6.pictograph in class6-math-common.js)
   ================================================================ */
.c6-keybox { fill: #fff; stroke: #cdbcf7; stroke-width: 2; }
.c6-reveal { opacity: 0; }
.c6-reveal.c6-on { opacity: 1; transition: opacity .35s ease; }
.c6-pop { animation: c6-pop .4s cubic-bezier(.3, 1.5, .6, 1) both; animation-delay: calc(var(--i, 0) * 45ms); transform-box: fill-box; transform-origin: center; }
@keyframes c6-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c6-pop { animation: none; } .c6-reveal.c6-on { transition: none; } }
/* long row names in a pictograph (e.g. "Gulab jamun") shrink a little so they never touch the pictures */
.c6-t.c6-long { font-size: 12.5px; }

/* ================================================================
   Bar graphs (drawn by C6.barGraph in class6-math-common.js; read in Tier 7, drawn in Tier 8)
   Matt pastel bars with a soft gloss strip, light gridlines.
   ================================================================ */
.c6-grid { stroke: #e3dafc; stroke-width: 1.5; }
.c6-axis { stroke: #b6a6ee; stroke-width: 2.5; stroke-linecap: round; }
.c6-t.c6-ylbl { font-size: 12.5px; fill: #7a71a8; }
.c6-t.c6-barlbl { font-size: 12px; }
.c6-t.c6-end { text-anchor: end; }
.c6-t.c6-valtxt { fill: #3b2a73; }
.c6-t.c6-t-xxs { font-size: 9.6px; }
.c6-bar { stroke-width: 2.5; stroke-linejoin: round; }
.c6-bar0 { fill: #8fd3f4; stroke: #4aa5d6; }
.c6-bar1 { fill: #ffd479; stroke: #e6a92c; }
.c6-bar2 { fill: #9be3b4; stroke: #4fbf7e; }
.c6-bar3 { fill: #ffb3c7; stroke: #e8749a; }
.c6-bar4 { fill: #c4b5fd; stroke: #8f78e8; }
.c6-bar5 { fill: #ffb98f; stroke: #ee8a4e; }
.c6-guide { stroke: #e0558a; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; }
.c6-barg { transform-box: fill-box; transform-origin: 50% 100%; animation: c6-grow .55s cubic-bezier(.3, 1.3, .6, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes c6-grow { from { transform: scaleY(.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c6-barg { animation: none; } }
.c6-barh { transform-box: fill-box; transform-origin: 0 50%; animation: c6-growh .55s cubic-bezier(.3, 1.3, .6, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes c6-growh { from { transform: scaleX(.05); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c6-barh { animation: none; } }