/* ================================================================
   decimal-rwv.css
   ----------------------------------------------------------------
   Styles for the "Reading, Writing & Visualizing Decimals" skill
   group on the Class 4 Math page:

     - B.1  Decimal Match (Picture <-> Symbol) — a shaded 10-strip
            OR a 100-grid (chosen at random each question) that the
            child matches to its decimal notation (new .drw-match-*
            classes).

     - B.2  Build the Decimal — given a target decimal ("0.6" /
            "0.45"), the child taps blank segments of a 10-strip or
            cells of a 100-grid to shade the matching amount, then
            presses Check (new .drw-build-* classes).

     - B.3  Decimal Grids (10-strip vs 100-grid) — two live sliders
            drive a 10-strip (tenths) and a 100-grid (hundredths)
            side by side; the decimal readout updates as the child
            drags, and Check compares it to a target (new
            .drw-grids-* classes).

     - B.4  Decimals on a Number Line (Intro) — a 0-1 number line
            with tick marks at every tenth; the child taps the tick
            that matches a given decimal (new .drw-line-* classes).

     - B.5  Decimal of a Group (Discrete objects) — a set of exactly
            10 or 100 star icons; the child taps stars to color the
            matching amount for a given decimal (new .drw-group-*
            classes).

     - B.6  Real-World Decimal Spotting — a CSS-drawn price tag,
            ruler, or stopwatch showing a decimal reading; the child
            taps the matching decimal from answer chips (new
            .drw-scene-* 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 "drw-" prefixed classes (including its own
   answer-chip wrapper, .drw-picker) instead of reusing any other
   skill file's markup, so it has no hidden cross-file dependency —
   same philosophy as decimal-foundations.css's .dec-* 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-rwv.css}" />
   ================================================================ */

/* ---------- shared: answer-chip picker row ---------- */
/* flex-wrap is intentionally "nowrap": there are always exactly 4
   decimal-value chips and they must always sit in a single row
   (same reasoning as decimal-foundations.css's .dec-picker). Each
   .drw-opt is a flexible (not fixed-width) item so the row shrinks
   to fit the quiz card instead of wrapping to a second line. */
.drw-picker {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 18px auto 4px;
    width: 100%;
    max-width: 380px;
}
.drw-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 160px;
    padding: 12px 8px;
    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.drw-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.drw-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);
}

/* ---------- shared: a tappable "Check" / "Reset" action row ---------- */
.drw-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px auto 4px;
    flex-wrap: wrap;
}
.drw-action-row .bq-btn {
    min-width: 120px;
}
.drw-live-readout {
    font-weight: 800;
    font-size: 20px;
    color: var(--secondary);
    text-align: center;
    margin: 6px auto 0;
}
.drw-target-caption {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    text-align: center;
    margin: 4px auto 2px;
}
.drw-target-caption .drw-target-val {
    font-weight: 800;
    color: var(--secondary);
    font-size: 17px;
}

/* ================================================================
   B.1 Decimal Match (Picture <-> Symbol)
   ================================================================ */
.drw-match-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 16px auto 6px;
}
.drw-match-tenbar {
    display: flex;
    width: min(320px, 90%);
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.drw-match-tenbar-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
}
.drw-match-tenbar-seg:last-child { border-right: none; }
.drw-match-tenbar-seg.is-shaded { background: var(--mint); }

.drw-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: 200px;
    height: 200px;
}
.drw-match-cell { background: #fff; }
.drw-match-cell.is-shaded { background: var(--mint); }

.drw-match-caption {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    text-align: center;
    max-width: 300px;
}

/* ================================================================
   B.2 Build the Decimal
   ================================================================ */
.drw-build-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 14px auto 4px;
}
.drw-build-tenbar {
    display: flex;
    width: min(320px, 90%);
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.drw-build-seg {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease;
    padding: 0;
}
.drw-build-seg:last-child { border-right: none; }
.drw-build-seg.is-shaded { background: var(--sky); }
.drw-build-seg:disabled { cursor: default; }

.drw-build-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: 200px;
    height: 200px;
}
.drw-build-cell {
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease;
}
.drw-build-cell.is-shaded { background: var(--sky); }
.drw-build-cell:disabled { cursor: default; }

.drw-build-count {
    font-weight: 800;
    font-size: 15px;
    color: var(--secondary);
    text-align: center;
}

/* ================================================================
   B.3 Decimal Grids (10-strip vs 100-grid, interactive sliders)
   ================================================================ */
.drw-grids-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 12px auto 4px;
    width: 100%;
}
.drw-grids-panels {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    width: 100%;
}
.drw-grids-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.drw-grids-panel-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.7;
}
.drw-grids-tenbar {
    display: flex;
    flex-direction: column;
    width: 46px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--line);
    background: #fff;
}
.drw-grids-tenbar-seg {
    flex: 1 1 0;
    width: 100%;
    border-top: 2px solid var(--line);
    background: transparent;
}
.drw-grids-tenbar-seg:first-child { border-top: none; }
.drw-grids-tenbar-seg.is-shaded { background: var(--pink); }

.drw-grids-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: 200px;
    height: 200px;
}
.drw-grids-cell { background: #fff; }
.drw-grids-cell.is-shaded { background: var(--sun); }

.drw-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin: 2px auto;
}
.drw-slider-row label {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    width: 92px;
    flex: 0 0 auto;
}
.drw-slider {
    flex: 1 1 auto;
    accent-color: var(--secondary);
    height: 26px;
}
.drw-slider-val {
    font-weight: 800;
    font-size: 15px;
    color: var(--secondary);
    width: 22px;
    text-align: center;
    flex: 0 0 auto;
}

/* ================================================================
   B.4 Decimals on a Number Line (Intro)
   ================================================================ */
.drw-line-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 22px auto 12px;
    width: 100%;
}
.drw-number-line {
    position: relative;
    width: min(420px, 92%);
    height: 70px;
}
.drw-line-track {
    position: absolute;
    left: 0; right: 0; top: 30px;
    height: 4px;
    border-radius: 2px;
    background: var(--secondary);
    opacity: 0.25;
}
.drw-line-tick {
    position: absolute;
    top: 20px;
    width: 2px;
    height: 24px;
    background: var(--secondary);
    opacity: 0.3;
    transform: translateX(-1px);
    pointer-events: none;
}
.drw-line-tick.is-end {
    opacity: 0.8;
    width: 3px;
    height: 30px;
    top: 17px;
}
.drw-line-label {
    position: absolute;
    top: 48px;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 13px;
    color: var(--secondary);
    opacity: 0.85;
    pointer-events: none;
}
.drw-line-hit {
    position: absolute;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transform: translate(-50%, 0);
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.drw-line-hit:hover { background: rgba(46,155,245,0.10); }
.drw-line-hit-dot {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.35;
    transform: translate(-50%, -50%);
}
.drw-line-hit.is-correct { background: rgba(16,185,129,0.18); border-color: #10b981; }
.drw-line-hit.is-correct .drw-line-hit-dot { background: #10b981; opacity: 1; }
.drw-line-hit.is-wrong { background: rgba(239,68,68,0.18); border-color: #ef4444; }
.drw-line-hit.is-wrong .drw-line-hit-dot { background: #ef4444; opacity: 1; }
.drw-line-hit:disabled { cursor: default; }

/* ================================================================
   B.5 Decimal of a Group (Discrete objects)
   ================================================================ */
.drw-group-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 14px auto 4px;
}
.drw-group-grid {
    display: grid;
    gap: 6px;
    justify-content: center;
}
.drw-group-grid.is-ten {
    grid-template-columns: repeat(5, 1fr);
    max-width: 220px;
}
.drw-group-grid.is-hundred {
    grid-template-columns: repeat(10, 1fr);
    max-width: 240px;
    gap: 3px;
}
.drw-group-icon {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--line);
    font-size: 26px;
    line-height: 1;
    transition: color .15s ease, transform .1s ease;
}
.drw-group-grid.is-hundred .drw-group-icon { font-size: 13px; }
.drw-group-icon.is-colored { color: var(--sun); }
.drw-group-icon:active { transform: scale(0.9); }
.drw-group-icon:disabled { cursor: default; }
.drw-group-count {
    font-weight: 800;
    font-size: 15px;
    color: var(--secondary);
    text-align: center;
}

/* ================================================================
   B.6 Real-World Decimal Spotting
   ================================================================ */
.drw-scene-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 16px auto 6px;
}

/* -- price tag scene -- */
.drw-scene-tag {
    position: relative;
    width: 168px;
    height: 108px;
    background: linear-gradient(135deg, var(--sun), #ffcf6b);
    border-radius: 14px 34px 14px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.drw-scene-tag::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(0,0,0,0.15);
}
.drw-scene-tag::after {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 14px solid var(--sun);
}
.drw-scene-tag-price {
    font-weight: 800;
    font-size: 26px;
    color: #7a4a00;
}

/* -- ruler scene -- */
.drw-scene-ruler {
    position: relative;
    width: min(320px, 90%);
    height: 70px;
    background: #fef6e4;
    border: 3px solid #d8b673;
    border-radius: 8px;
    overflow: visible;
}
.drw-scene-ruler-tick {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 16px;
    background: #a87f34;
}
.drw-scene-ruler-tick.is-major { height: 26px; width: 2.5px; }
.drw-scene-ruler-num {
    position: absolute;
    bottom: 28px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #7a5a20;
}
.drw-scene-ruler-marker {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 70px;
    background: #e0453c;
    transform: translateX(-50%);
}
.drw-scene-ruler-marker::after {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0453c;
}

/* -- stopwatch scene -- */
.drw-scene-stopwatch {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #2f3a4a;
    border: 6px solid #4b5a70;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.drw-scene-stopwatch::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    background: #4b5a70;
    border-radius: 4px;
}
.drw-scene-stopwatch-readout {
    font-family: 'Courier New', monospace;
    font-weight: 800;
    font-size: 19px;
    color: #6df0a2;
    background: #1c232e;
    padding: 6px 8px;
    border-radius: 6px;
}

.drw-scene-caption {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    text-align: center;
    max-width: 300px;
}

/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
    .drw-picker { gap: 8px; margin: 14px auto 4px; max-width: 320px; }
    .drw-opt { padding: 9px 6px; font-size: 15px; min-height: 46px !important; }

    .drw-match-tenbar { height: 44px; }
    .drw-match-grid { width: 160px; height: 160px; }

    .drw-build-tenbar { height: 44px; }
    .drw-build-grid { width: 160px; height: 160px; }

    .drw-grids-panels { gap: 14px; }
    .drw-grids-tenbar { width: 36px; height: 160px; }
    .drw-grids-grid { width: 160px; height: 160px; }
    .drw-slider-row { max-width: 300px; }
    .drw-slider-row label { width: 76px; font-size: 12px; }

    .drw-number-line { height: 60px; }
    .drw-line-track { top: 26px; }
    .drw-line-tick { top: 17px; height: 20px; }
    .drw-line-tick.is-end { top: 14px; height: 26px; }
    .drw-line-label { top: 40px; font-size: 11.5px; }
    .drw-line-hit { width: 26px; height: 26px; top: 15px; }
    .drw-line-hit-dot { width: 8px; height: 8px; }

    .drw-group-grid.is-ten { max-width: 190px; }
    .drw-group-grid.is-hundred { max-width: 210px; }
    .drw-group-icon { font-size: 22px; }
    .drw-group-grid.is-hundred .drw-group-icon { font-size: 11px; }

    .drw-scene-tag { width: 140px; height: 90px; }
    .drw-scene-tag-price { font-size: 21px; }
    .drw-scene-ruler { height: 60px; }
    .drw-scene-ruler-marker { height: 60px; }
    .drw-scene-stopwatch { width: 110px; height: 110px; }
    .drw-scene-stopwatch-readout { font-size: 16px; }
}
@media (max-width: 380px) {
    .drw-picker { gap: 6px; max-width: 280px; }
    .drw-opt { padding: 7px 4px; font-size: 13.5px; }

    .drw-match-grid { width: 136px; height: 136px; }
    .drw-build-grid { width: 136px; height: 136px; }

    .drw-grids-tenbar { width: 30px; height: 136px; }
    .drw-grids-grid { width: 136px; height: 136px; }
    .drw-slider-row label { width: 66px; font-size: 11px; }

    .drw-group-grid.is-ten { max-width: 165px; }
    .drw-group-grid.is-hundred { max-width: 185px; }

    .drw-scene-tag { width: 122px; height: 80px; }
    .drw-scene-tag-price { font-size: 18px; }
    .drw-scene-stopwatch { width: 96px; height: 96px; }
    .drw-scene-stopwatch-readout { font-size: 14px; }
}