/* ================================================================
   mirror-reflection.css
   ----------------------------------------------------------------
   Styles for the "Reflection and the mirror" skill group on the
   Class 5 Math page (Topic 12, Symmetry - Tier 4):

     - D.1  Mirror Images           - place a mirror, the reflection swings in
     - D.2  Complete the Other Half - tap dots on dot paper, then Check
     - D.3  Reflect the Dots        - coordinate grid, points and triangles
     - D.4  Reflection or Slide?    - trap questions with two figures
     - D.5  Mirror Writing          - backwards words, AMBULANCE

   The popup shell is the page's shared quiz shell (same markup as
   symmetry-lines-modals.html), so this file only styles the drawings
   and the answer chips. Fully self-contained (own "mir-" classes) and
   reads the site colour variables (--primary, --secondary, --sun,
   --line ...) each with a fallback.

   Finish: every colour fill is a soft top-to-bottom satin gradient
   (defined in mirror-reflection.js) plus a faint white sheen on the
   upper part, with a deep-purple outline - a matte body with a
   gentle shine. Glass mirrors and glossy balls use their own gradients.

   Layout notes
   - Answer chips ALWAYS stay on ONE row (flex-wrap: nowrap): 4 picture
     chips, 4 number / word / coordinate chips or 3 word chips shrink to
     fit instead of wrapping. Text inside a chip may wrap to 2 lines.
   - Drawings scale with --mir-fig (steps down / adapts on phones).
   - Touch targets >= 46px, instant :active feedback, no 300ms delay or
     grey tap flash (native Android feel); the dot paper uses
     touch-action: manipulation so taps never zoom the page.

     <link rel="stylesheet" th:href="@{/css/mirror-reflection.css}" />
   ================================================================ */

/* ---------- colour fills (gradients live in mirror-reflection.js) ---------- */
.mir-c-pink   { fill: #ff7eb3; fill: url(#mirG-pink); }
.mir-c-purple { fill: #a78bfa; fill: url(#mirG-purple); }
.mir-c-sky    { fill: #5cc3ff; fill: url(#mirG-sky); }
.mir-c-orange { fill: #ffa53c; fill: url(#mirG-orange); }
.mir-c-mint   { fill: #4fe3b5; fill: url(#mirG-mint); }
.mir-c-green  { fill: #4cc38a; fill: url(#mirG-green); }
.mir-c-red    { fill: #ef5b5b; fill: url(#mirG-red); }
.mir-c-sun    { fill: #ffd23f; fill: url(#mirG-sun); }
.mir-sheen    { fill: url(#mirG-sheen); pointer-events: none; }
.mir-r-blue   { fill: #3aa0ff; fill: url(#mirR-blue); }
.mir-r-green  { fill: #2fd08a; fill: url(#mirR-green); }
.mir-r-red    { fill: #f25555; fill: url(#mirR-red); }

/* outline sits UNDER the fills, so it is drawn 6 wide and shows 3 */
.mir-ln { fill: none; stroke: #3b2f63; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }

.mir-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- popup + stage ---------- */
.quiz-overlay[id^="mir"] .quiz-modal { --mir-fig: 250px; }
.quiz-overlay[id^="mir"] .quiz-question b { color: var(--secondary, #4b3f8f); }
.quiz-overlay[id^="mir"] .bq-btn,
.quiz-overlay[id^="mir"] .bq-next-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.quiz-overlay[id^="mir"] .bq-next-btn { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="mir"] .bq-summary-buttons { margin-bottom: env(safe-area-inset-bottom, 0px); }
.quiz-overlay[id^="mir"] .quiz-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.mir-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px auto 0; }
.mir-stage {
    position: relative;
    width: var(--mir-fig);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 20px;
    background: repeating-linear-gradient(0deg, #fbfaff 0 22px, #f2eeff 22px 23px);
    border: 2px solid var(--line, #e3def6);
    box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08);
    transition: border-color .3s, box-shadow .3s;
}
.mir-stage > svg { width: 100%; height: 100%; }
.mir-stage.mir-good { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.20); }
.mir-stage.mir-bad  { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); }
.mir-stage.mir-reveal, .mir-stage.mir-on { border-color: #b7a9f2; }
.mir-hint { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: #7a71a8; line-height: 1.35; max-width: 340px; }
.mir-hint b { color: var(--secondary, #4b3f8f); }
.mir-status { margin: 0; min-height: 22px; text-align: center; font-size: 14px; font-weight: 800; color: #7a71a8; }

/* the reflection is hidden until the mirror is placed */
.mir-pre .mir-rf { visibility: hidden; }

/* dashed mirror line, glass mirror */
.mir-axis { stroke: #e2528a; stroke-width: 4.5; stroke-dasharray: 10 8; stroke-linecap: round; fill: none; }
.mir-divider { stroke: #b3a8dc; stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; fill: none; }
.mir-glass { fill: #cfe6fa; fill: url(#mirG-glass); stroke: #7d97cf; stroke-width: 2; }
.mir-glint { fill: #fff; fill-opacity: .75; }
.mir-glass-g { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.mir-on .mir-glass-g { opacity: 1; }
.mir-panel { fill: #fff; fill-opacity: .7; stroke: #b3a8dc; stroke-width: 2.5; stroke-dasharray: 6 6; }
.mir-panel-q { transition: opacity .4s; }
.mir-on .mir-panel-q { opacity: 0; }

/* ---------- mirror / reveal button ---------- */
.mir-btn {
    min-height: 48px;
    padding: 10px 22px;
    border: 2px solid var(--primary, #6c5ce7);
    border-radius: 999px;
    background: #fff;
    color: var(--primary, #6c5ce7);
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18);
    transition: transform .08s ease, background .15s;
}
.mir-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18); background: rgba(108, 92, 231, 0.10); }
.mir-btn:disabled { opacity: .55; cursor: default; }

/* ================================================================
   Answer chips: ALWAYS a single line
   ================================================================ */
.quiz-number-options.mir-picker,
.quiz-overlay[id^="mir"] .quiz-number-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    margin: 16px auto 4px;
}
.quiz-overlay[id^="mir"] .quiz-number-options:empty { display: none; }
.quiz-number-opt.mir-opt {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 10px 5px;
    white-space: normal !important;
    overflow: visible;
    overflow-wrap: break-word;
    font-weight: 800;
    font-size: clamp(12.5px, 3.7vw, 15.5px);
    line-height: 1.2;
    text-align: center;
    color: var(--secondary, #4b3f8f);
    -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.mir-opt:active:not(:disabled) { transform: scale(.96); background: rgba(108, 92, 231, 0.10); }
@media (hover: hover) {
    .quiz-number-opt.mir-opt:hover:not(:disabled) { border-color: var(--primary, #6c5ce7); }
}
.quiz-number-opt.mir-opt.is-correct { border-color: #10b981; background: rgba(16, 185, 129, 0.08); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.quiz-number-opt.mir-opt.is-wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.quiz-number-opt.mir-opt.has-thumb { padding: 6px 4px 8px; }
.mir-opt-thumb { display: block; width: 100%; max-width: 96px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.mir-opt-thumb.mir-thumb-wide { aspect-ratio: 10 / 7; max-width: 110px; }
.mir-letter { font-size: 26px; font-weight: 900; line-height: 1.1; }

/* ================================================================
   D.2  dot paper
   ================================================================ */
.mir-gl { stroke: #ddd6f5; stroke-width: 1; }
.mir-gl.ax { stroke: #a99fd6; stroke-width: 2; }
.mir-dot { fill: #8f84c4; stroke: #fff; stroke-width: 1.2; pointer-events: none; }
.mir-hit { fill: #000; fill-opacity: 0; pointer-events: all; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mir-draw.is-done .mir-hit { cursor: default; pointer-events: none; }
.mir-picks, .mir-fig { pointer-events: none; }
.mir-pick { fill: #e2528a; stroke: #fff; stroke-width: 3; }
.mir-pick.is-good { fill: #10b981; }
.mir-pick.is-bad  { fill: #ef4444; }
.mir-ring { fill: none; stroke: #10b981; stroke-width: 4; }

/* ================================================================
   D.3  coordinate grid
   ================================================================ */
.mir-grid .mir-gl { stroke-width: 1; }
.mir-num { font: 700 10.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: #7a71a8; }
.mir-mlabel { font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: #e2528a; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.mir-plabel { font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: #3b2f63; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.mir-ball { stroke: #2d2563; stroke-width: 2; }
.mir-spec { fill: #fff; fill-opacity: .8; pointer-events: none; }
.mir-conn { stroke: #10b981; stroke-width: 3; stroke-dasharray: 4 6; stroke-linecap: round; }
.mir-rev { opacity: 0; transition: opacity .45s ease; }
.mir-reveal .mir-rev { opacity: 1; }

/* ================================================================
   D.5  mirror writing
   ================================================================ */
.mir-word {
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 900;
    fill: #4b3f8f;
    fill: url(#mirG-ink);
    stroke: #2d2563;
    stroke-width: .6px;
    stroke-linejoin: round;
    user-select: none;
    -webkit-user-select: none;
}
.mir-board { fill: #fff8e2; fill: url(#mirG-board); stroke: #3b2f63; stroke-width: 4; }
.mir-thumbbg { fill: #fffdf4; stroke: #d3caf3; stroke-width: 2; }
.mir-wheel { fill: #3b2f63; stroke: #1f1846; stroke-width: 3; }

/* ================================================================
   Responsive (phones): drawings grow to use the popup width, chips
   shrink but stay on one line.
   ================================================================ */
@media (max-width: 560px) {
    .quiz-overlay[id^="mir"] .quiz-modal { --mir-fig: min(300px, calc(100vw - 72px)); }
    .quiz-overlay[id^="mir"] .quiz-number-options { gap: 8px; margin-top: 14px; }
    .quiz-number-opt.mir-opt { padding: 9px 4px; min-height: 52px !important; }
    .mir-opt-thumb { max-width: 76px; }
    .mir-opt-thumb.mir-thumb-wide { max-width: 84px; }
    .mir-letter { font-size: 24px; }
}
@media (max-width: 380px) {
    .quiz-overlay[id^="mir"] .quiz-number-options { gap: 6px; }
    .quiz-number-opt.mir-opt { padding: 8px 2px; }
    .quiz-number-opt.mir-opt.has-thumb { padding: 5px 2px 6px; }
    .mir-opt-thumb { max-width: 64px; }
    .mir-opt-thumb.mir-thumb-wide { max-width: 70px; }
    .mir-hint { font-size: 12.5px; }
}
@media (pointer: coarse) {
    .mir-btn { min-height: 50px; }
    .quiz-number-opt.mir-opt { min-height: 56px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
    .quiz-overlay[id^="mir"] .quiz-modal { --mir-fig: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-number-opt.mir-opt, .mir-btn, .mir-stage, .mir-glass-g, .mir-rev, .mir-panel-q { transition: none; }
}