/* ================================================================
   pie-intro.css
   ----------------------------------------------------------------
   Styling for the "Meet π (Introduction to Pie)" skill quizzes
   (K.1-K.5) on the Class 6 Math page. Like pattern.css, this file
   does NOT restyle the popup itself: the shared .quiz-overlay /
   .quiz-modal / .card / .bq-* / .slot-dot / .quiz-number-opt rules
   from quiz-popup-theme.css + quiz-modal-responsive.css supply the
   modal look. This file only adds:
     - the picture box + SVG parts shown above the answer chips
     - a word-problem box
     - answer chips that ALWAYS stay on ONE line (CSS grid, one
       column per chip; long words shrink the font instead of
       wrapping the row)
     - correct / wrong colours for chips, feedback and stars
   Every selector is prefixed pie- / #pie so nothing collides.
   ================================================================ */

/* ---- picture box (SVG lives here) ---- */
.pie-visual-wrap { margin: 10px auto 4px; }
.pie-visual-box {
    width: clamp(170px, 56vw, 260px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: 3px solid var(--line, rgba(30,58,95,0.12));
    border-radius: 20px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 4px 0 rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pie-visual-box svg { width: 92%; height: 92%; display: block; }

/* ---- SVG parts ---- */
.pie-circle     { fill: #a9e0e3; stroke: #3fb6bd; stroke-width: 2.5; }
.pie-circle-out { fill: none; stroke: #2E9BF5; stroke-width: 3; }
.pie-hex        { fill: #fbfaf5; stroke: #1E3A5F; stroke-width: 3; stroke-linejoin: round; }
.pie-hex-open   { fill: none; stroke: #1E3A5F; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 6 4; }
.pie-square     { fill: rgba(245,166,35,0.15); stroke: #F5A623; stroke-width: 3.5; stroke-linejoin: round; }
.pie-spoke      { stroke: #8a94a6; stroke-width: 1.5; stroke-dasharray: 4 3; }
.pie-dot        { fill: #1E3A5F; }
.pie-dot-hl     { fill: #F5427D; stroke: #fff; stroke-width: 2; }
.pie-hl         { fill: none; stroke: #ff8a3d; stroke-width: 6; stroke-linecap: round; }
.pie-hl-ring    { fill: none; stroke: #ff8a3d; stroke-width: 7; }
.pie-label      { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; fill: #1E3A5F; text-anchor: middle; }
.pie-label-big  { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 26px; fill: #7B4FE0; text-anchor: middle; }
.pie-nl-axis    { stroke: #1E3A5F; stroke-width: 3; stroke-linecap: round; }
.pie-nl-tick    { stroke: #1E3A5F; stroke-width: 2; }
.pie-nl-zone    { stroke: #2E9BF5; stroke-width: 10; stroke-linecap: round; opacity: 0.55; }
.pie-nl-pin     { fill: #F5427D; }

/* ---- word-problem box (same idea as pattern.css .pat-word-box) ---- */
.pie-word-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px auto;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 14px;
    background: #fff8ec;
    border: 2px dashed var(--sun, #f5b942);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #6b4b1a;
    text-align: center;
}

/* ---- answer chips: ONE line always ----
   Scoped to #pieOptions and !important, exactly like pattern.css does
   for #patternOptions, so the shared .quiz-number-opt rules (fixed
   circles, nowrap) can't override it. --pie-n = number of chips. */
.pie-options-wrap {
    margin: 14px auto 0;
    max-width: 520px;
    box-sizing: border-box;
}
#pieOptions.quiz-number-options {
    display: grid !important;
    grid-template-columns: repeat(var(--pie-n, 4), minmax(0, 1fr)) !important;
    gap: clamp(6px, 2vw, 12px) !important;
    width: 100%;
    box-sizing: border-box;
}
#pieOptions .pie-opt-btn {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 52px !important;
    max-width: 100%;
    margin: 0 !important;
    border-radius: 14px !important;
    padding: 8px 4px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal !important;
    font-size: clamp(11px, 3.5vw, 18px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    box-sizing: border-box;
}
/* set by pie-intro.js when any chip holds a long word (e.g. "Circumference") */
#pieOptions.pie-opts-long .pie-opt-btn {
    font-size: clamp(9px, 2.9vw, 15px) !important;
    padding: 8px 2px !important;
}
#pieOptions .pie-opt-btn.is-correct-choice {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 14%, white);
    color: #0d7a53;
}
#pieOptions .pie-opt-btn.is-wrong-choice {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, white);
    color: #b91c1c;
}
#pieOptions .pie-opt-btn:disabled { cursor: default; transform: none; }

/* ---- feedback + summary stars ---- */
#pieQuizCard .bq-feedback.is-correct { color: #0d7a53; }
#pieQuizCard .bq-feedback.is-wrong   { color: #b91c1c; }
#pieSummaryCard .bq-star { font-size: 28px; color: #d1d5db; margin: 0 2px; }
#pieSummaryCard .bq-star.filled { color: #f5b942; }

/* ---- Android phone tuning ---- */
@media (max-width: 380px) {
    .pie-visual-box { width: clamp(150px, 54vw, 210px); border-width: 2px; border-radius: 16px; }
    #pieOptions.quiz-number-options { gap: 5px !important; }
    #pieOptions .pie-opt-btn { min-height: 46px !important; border-radius: 12px !important; }
}
@media (max-height: 700px) {
    .pie-visual-box { width: clamp(130px, 40vw, 190px); }
}