/* ================================================================
   decimal-equiv-pv.css
   ----------------------------------------------------------------
   Styles for the "Equivalence & Place Value Shifting" skill group
   on the Class 4 Math page:

     - C.1  Equivalent Decimals Visual Match — a 10-strip and a
            100-grid, shaded independently, that the child judges as
            "same amount or not" (Yes/No), with a visual overlay
            proof revealed after answering (new .epv-match-*
            classes).

     - C.2  Trailing Zero Explorer — a tenths bar zooms into a finer
            hundredths/thousandths strip showing the exact same
            shaded amount, cut into smaller pieces, then the child
            picks the decimal that names the zoomed-in picture (new
            .epv-zero-* classes).

     - C.3  Decimal <-> Fraction Bridge — a shaded strip/grid shown
            side-by-side with both a fraction and a decimal label
            (one blanked out), so decimals are never a separate
            universe from fractions (new .epv-bridge-* classes).

     - C.4  Zooming In: Tenths -> Hundredths -> Thousandths — an
            animated magnifying zoom that drills into one piece to
            reveal it is really 10 smaller equal pieces, repeating
            the "divide by 10 again" pattern (new .epv-zoom-*
            classes).

   Every skill here shares the same 5-question-per-slot / star-
   reward / "practice more?" quiz shell as the rest of the site (via
   the .bq- / .quiz- classes from quiz-popup-theme.css and quiz-
   modal-responsive.css, loaded elsewhere). This file defines its
   own self-contained "epv-" prefixed classes (including its own
   answer-chip wrapper, .epv-picker) instead of reusing any other
   skill file's markup, same philosophy as decimal-rwv.css's
   .drw-* classes. Load this file after the shared quiz shell
   stylesheets, e.g.:

     <link rel="stylesheet" th:href="@{/css/quiz-popup-theme.css}" />
     <link rel="stylesheet" th:href="@{/css/quiz-modal-responsive.css}" />
     <link rel="stylesheet" th:href="@{/css/decimal-equiv-pv.css}" />

   Layout note: every answer-chip row (.epv-picker) is a centered,
   wrapping flex row with equal-basis chips so options always line
   up on the same row(s) rather than stacking oddly — this holds on
   both desktop and small Android phone viewports (see the
   @media blocks at the end of this file).
   ================================================================ */

/* ---------- shared: answer-chip picker row ----------
   IMPORTANT: this row must NEVER wrap onto a second line. The
   site-wide .quiz-number-options class (reused elsewhere for
   numeric-keypad-style quizzes) assumes multi-row layouts and
   applies its own height / row-spacing rules; if our 4 chips ever
   wrap to 2 rows, those inherited rules can shove the leftover
   chip on row 2 far away from row 1. So instead of wrapping, the
   chips shrink to fit on one row (flex-shrink + min-width:0), and
   every layout-critical property below carries !important so it
   can't be silently overridden by that shared class. ---------- */
.epv-picker {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px;
    margin: 18px auto 4px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
.epv-opt {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    flex-shrink: 1;
    min-width: 0;
    max-width: 160px;
    padding: 12px 6px;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible;
    font-weight: 800;
    font-size: 17px;
    color: var(--secondary);
    text-align: center;
    line-height: 1.25;
}
.quiz-number-opt.epv-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.epv-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);
}
/* Yes/No picker (C.1) is just a 2-chip .epv-picker with wider chips */
.epv-picker.epv-yesno .epv-opt {
    max-width: 180px;
    font-size: 18px;
}

.epv-target-caption {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    text-align: center;
    margin: 4px auto 2px;
}
.epv-target-caption .epv-target-val {
    font-weight: 800;
    color: var(--secondary);
    font-size: 17px;
}

/* ================================================================
   C.1 Equivalent Decimals Visual Match
   ================================================================ */
.epv-match-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 14px auto 6px;
}
.epv-match-panels {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}
.epv-match-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.epv-match-panel-label {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-muted, #667);
    text-align: center;
}
.epv-match-tenbar {
    display: flex;
    width: 150px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.epv-match-tenbar-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
}
.epv-match-tenbar-seg:last-child { border-right: none; }
.epv-match-tenbar-seg.is-shaded { background: var(--mint); }
.epv-match-tenbar-seg.is-proof { background: var(--sun) !important; }

.epv-match-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    background: var(--line);
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.epv-match-cell { background: #fff; }
.epv-match-cell.is-shaded { background: var(--mint); }
.epv-match-cell.is-proof { background: var(--sun) !important; }

.epv-match-caption {
    font-weight: 700;
    font-size: 14px;
    color: var(--secondary);
    text-align: center;
}
.epv-match-vs {
    font-weight: 800;
    font-size: 22px;
    color: var(--line);
    align-self: center;
    margin-top: 40px;
}
.epv-match-proof {
    display: none;
    max-width: 340px;
    text-align: center;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    background: rgba(255, 200, 60, 0.15);
    border: 2px dashed var(--sun);
    border-radius: 12px;
    padding: 10px 12px;
}
.epv-match-wrap.show-proof .epv-match-proof { display: block; }
.epv-match-wrap.show-proof .epv-match-tenbar,
.epv-match-wrap.show-proof .epv-match-grid {
    box-shadow: 0 0 0 3px rgba(255, 200, 60, 0.55);
}

/* ================================================================
   C.2 Trailing Zero Explorer
   ================================================================ */
.epv-zero-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 14px auto 6px;
}
.epv-zero-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.epv-zero-label {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-muted, #667);
}
.epv-zero-tenbar {
    display: flex;
    width: min(280px, 88%);
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.epv-zero-tenbar-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
}
.epv-zero-tenbar-seg:last-child { border-right: none; }
.epv-zero-tenbar-seg.is-shaded { background: var(--sky); }

.epv-zero-arrow {
    font-size: 20px;
    color: var(--secondary);
    animation: epvZeroPulse 1.4s ease-in-out infinite;
}
@keyframes epvZeroPulse {
    0%, 100% { transform: translateY(0); opacity: .75; }
    50% { transform: translateY(4px); opacity: 1; }
}

.epv-zero-finebar {
    display: flex;
    width: min(280px, 88%);
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
    animation: epvZoomIn .5s ease-out;
}
.epv-zero-finebar-seg {
    flex: 1 1 0;
    border-right: 1px solid rgba(0,0,0,0.08);
    background: transparent;
}
.epv-zero-finebar-seg:last-child { border-right: none; }
.epv-zero-finebar-seg.is-shaded { background: var(--sky); }
/* thousandths view: overlay fine "micro-cut" ticks on each shaded
   segment to hint it is really 10 tinier pieces, without rendering
   1000 separate DOM nodes (keeps this smooth on low-end phones) */
.epv-zero-finebar.is-microcut .epv-zero-finebar-seg {
    background-image: repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0.14) 0,
        rgba(0,0,0,0.14) 1px,
        transparent 1px,
        transparent 10%
    );
}
@keyframes epvZoomIn {
    0% { transform: scaleX(0.85); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

.epv-zero-caption {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    text-align: center;
    max-width: 320px;
    margin-top: 2px;
}
.epv-zero-caption .epv-zero-eq {
    color: var(--secondary);
    font-weight: 800;
}

/* ================================================================
   C.3 Decimal <-> Fraction Bridge
   ================================================================ */
.epv-bridge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 14px auto 6px;
}
.epv-bridge-tenbar {
    display: flex;
    width: min(300px, 90%);
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.epv-bridge-tenbar-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
}
.epv-bridge-tenbar-seg:last-child { border-right: none; }
.epv-bridge-tenbar-seg.is-shaded { background: var(--pink); }

.epv-bridge-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    background: var(--line);
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: 190px;
    height: 190px;
}
.epv-bridge-cell { background: #fff; }
.epv-bridge-cell.is-shaded { background: var(--pink); }

.epv-bridge-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.epv-bridge-chip {
    font-weight: 800;
    font-size: 19px;
    color: var(--secondary);
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 6px 14px;
}
.epv-bridge-chip.is-blank {
    color: var(--line);
    border-style: dashed;
}
.epv-bridge-equals {
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
}

/* ================================================================
   C.4 Zooming In: Tenths -> Hundredths -> Thousandths
   ================================================================ */
.epv-zoom-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 12px auto 6px;
    width: 100%;
}
.epv-zoom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}
.epv-zoom-block {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 3px solid var(--line);
    background: #fff;
    overflow: hidden;
}
.epv-zoom-block.is-shaded { background: var(--mint); }
.epv-zoom-block.is-target {
    box-shadow: 0 0 0 3px rgba(255, 200, 60, 0.8);
}
.epv-zoom-tenbar {
    display: flex;
    width: min(280px, 88%);
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.epv-zoom-tenbar-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
    position: relative;
}
.epv-zoom-tenbar-seg:last-child { border-right: none; }
.epv-zoom-tenbar-seg.is-shaded { background: var(--mint); }
.epv-zoom-tenbar-seg.is-target {
    box-shadow: inset 0 0 0 3px var(--sun);
}
.epv-zoom-magnifier {
    font-size: 22px;
    color: var(--secondary);
    animation: epvZoomBounce 1.3s ease-in-out infinite;
}
@keyframes epvZoomBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(3px) scale(1.08); }
}
.epv-zoom-sub {
    display: flex;
    width: min(260px, 82%);
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--sun);
    background: #fff;
    animation: epvZoomIn .5s ease-out;
}
.epv-zoom-sub-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
}
.epv-zoom-sub-seg:last-child { border-right: none; }
.epv-zoom-sub-seg.is-shaded { background: var(--sky); }

.epv-zoom-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    background: var(--line);
    border: 2px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: 180px;
    height: 180px;
    animation: epvZoomIn .5s ease-out;
}
.epv-zoom-cell { background: #fff; }
.epv-zoom-cell.is-shaded { background: var(--mint); }

.epv-zoom-caption {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    text-align: center;
    max-width: 320px;
}

/* ---------- responsive: Android phone browsers + small desktop ---------- */
@media (max-width: 560px) {
    .epv-picker { gap: 6px; margin: 14px auto 4px; max-width: 360px; }
    .epv-opt { font-size: 14.5px; padding: 10px 4px; }
    .epv-picker.epv-yesno .epv-opt { font-size: 16px; }

    .epv-match-panels { gap: 14px; }
    .epv-match-tenbar { width: 120px; height: 46px; }
    .epv-match-grid { width: 120px; height: 120px; }
    .epv-match-vs { margin-top: 30px; font-size: 18px; }
    .epv-match-proof { font-size: 12.5px; max-width: 280px; }

    .epv-zero-tenbar { height: 44px; }
    .epv-zero-finebar { height: 44px; }
    .epv-zero-caption { font-size: 12.5px; }

    .epv-bridge-tenbar { height: 46px; }
    .epv-bridge-grid { width: 150px; height: 150px; }
    .epv-bridge-chip { font-size: 16px; padding: 5px 11px; }

    .epv-zoom-block { width: 52px; height: 52px; }
    .epv-zoom-tenbar { height: 44px; }
    .epv-zoom-sub { height: 40px; }
    .epv-zoom-grid { width: 150px; height: 150px; }
    .epv-zoom-caption { font-size: 12.5px; }
}
@media (max-width: 380px) {
    .epv-picker { gap: 5px; max-width: 300px; }
    .epv-opt { font-size: 13px; padding: 8px 3px; min-height: 46px !important; }
    .epv-picker.epv-yesno .epv-opt { font-size: 14.5px; }

    .epv-match-panels { gap: 10px; }
    .epv-match-tenbar { width: 100px; height: 40px; }
    .epv-match-grid { width: 100px; height: 100px; }
    .epv-match-vs { display: none; }

    .epv-zero-tenbar, .epv-zero-finebar { height: 38px; }

    .epv-bridge-grid { width: 128px; height: 128px; }
    .epv-bridge-chip { font-size: 14.5px; padding: 4px 9px; }

    .epv-zoom-block { width: 44px; height: 44px; }
    .epv-zoom-grid { width: 128px; height: 128px; }
}