/* ================================================================
   prime-time.css
   ----------------------------------------------------------------
   Styles for the "Prime Time -- What is a number 'made of'?" skill
   group on the Class 5 Math page:

     - A.1  Making Groups (Arrays Intro) — a target number of dot
            "counters" shown arranged in one equal-rows/equal-columns
            array; the child picks another rows x columns shape that
            uses the same total (new .pt-dotgrid classes).

     - A.2  Can We Make a Rectangle? — four candidate counter counts,
            each shown as a number chip with its own little dot pile;
            the child spots the one count that can NEVER form a neat
            rectangle (new .pt-cluster classes).

     - A.3  Factors as Building Blocks — a dot array is shown built
            from rows x columns; the child picks the pair of numbers
            that are both "building blocks" (factors) of the total.

     - A.4  Finding All the Factors of a Number — a pile of counters
            for a target number; the child picks the answer chip that
            lists EVERY factor of that number.

     - A.5  The Sneaky Duo: 1 and the Number Itself — trap-style
            questions proving 1 and the number itself always divide
            evenly, whatever the number turns out to be.

   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 "pt-" prefixed classes so it has no hidden
   cross-file dependency — 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/prime-time.css}" />
   ================================================================ */

/* ---------- shared: answer-chip picker row ---------- */
/* flex-wrap is intentionally "nowrap": there are always exactly 4
   answer chips and they must always sit in a single row on every
   screen size, phone included — same reasoning as decimal-rwv.css's
   .drw-picker. Each .pt-opt is a flexible (not fixed-width) item so
   the row shrinks to fit the quiz card instead of wrapping to a
   second line; text inside a chip may wrap to two lines, but the
   4 chips themselves never stack. */
.pt-picker {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 18px auto 4px;
    width: 100%;
    max-width: 420px;
}
.pt-opt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 170px;
    padding: 10px 6px;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: hidden;
    font-weight: 800;
    color: var(--secondary);
    text-align: center;
    line-height: 1.2;
    gap: 4px;
}
/* Text-phrase chips (e.g. "3 rows x 4 columns", factor lists) need a
   smaller base size since the label can run long. */
.pt-opt.pt-opt-text {
    font-size: 13.5px;
}
/* Number chips (A.2 / A.5) show a big digit plus a small dot pile,
   so the digit itself can stay large. */
.pt-opt.pt-opt-number {
    font-size: 24px;
}
.quiz-number-opt.pt-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.pt-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: stage wrapper + caption ---------- */
.pt-stage-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 4px;
}
.pt-caption {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    text-align: center;
    max-width: 340px;
}
.pt-caption strong {
    color: var(--secondary);
}

/* ---------- A.1 / A.3: equal rows x columns dot array ---------- */
.pt-dotgrid {
    display: grid;
    gap: 6px;
    padding: 14px;
    background: #fff;
    border: 3px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.pt-dotgrid .pt-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    display: block;
}

/* ---------- A.2 / A.4 / A.5: loose "pile" of counters ---------- */
.pt-cluster {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3px;
    max-width: 130px;
}
.pt-cluster .pt-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    display: block;
}
/* Bigger standalone pile used as a stage visual (A.4). */
.pt-stage-wrap .pt-cluster {
    max-width: 220px;
    gap: 6px;
}
.pt-stage-wrap .pt-cluster .pt-dot {
    width: 16px;
    height: 16px;
}
/* Miniature pile nested inside an answer chip (A.2 / A.5). */
.pt-opt-dots {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 2px;
    max-width: 78px;
}
.pt-opt-dots .pt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.55;
    display: block;
}
.pt-opt-num {
    display: block;
    font-size: 1em;
}

/* ---------- A.2: rectangle-check hint chips shown after answering ---------- */
.pt-proof-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.pt-proof-chip {
    font-weight: 800;
    font-size: 13px;
    color: var(--secondary);
    background: rgba(0,0,0,0.04);
    border: 2px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
    .pt-picker { gap: 8px; margin: 14px auto 4px; max-width: 340px; }
    .pt-opt { padding: 8px 5px; min-height: 50px !important; }
    .pt-opt.pt-opt-text { font-size: 12px; }
    .pt-opt.pt-opt-number { font-size: 20px; }

    .pt-dotgrid { padding: 10px; gap: 5px; }
    .pt-dotgrid .pt-dot { width: 16px; height: 16px; }

    .pt-cluster { max-width: 110px; gap: 2px; }
    .pt-cluster .pt-dot { width: 8px; height: 8px; }
    .pt-stage-wrap .pt-cluster { max-width: 180px; gap: 5px; }
    .pt-stage-wrap .pt-cluster .pt-dot { width: 13px; height: 13px; }
    .pt-opt-dots { max-width: 62px; }
    .pt-opt-dots .pt-dot { width: 5px; height: 5px; }

    .pt-caption { font-size: 13px; max-width: 280px; }
    .pt-proof-chip { font-size: 12px; padding: 4px 10px; }
}
@media (max-width: 380px) {
    .pt-picker { gap: 6px; max-width: 300px; }
    .pt-opt { padding: 6px 3px; min-height: 46px !important; }
    .pt-opt.pt-opt-text { font-size: 10.5px; }
    .pt-opt.pt-opt-number { font-size: 17px; }

    .pt-dotgrid { padding: 8px; gap: 4px; }
    .pt-dotgrid .pt-dot { width: 13px; height: 13px; }

    .pt-cluster { max-width: 96px; }
    .pt-cluster .pt-dot { width: 7px; height: 7px; }
    .pt-stage-wrap .pt-cluster { max-width: 155px; gap: 4px; }
    .pt-stage-wrap .pt-cluster .pt-dot { width: 11px; height: 11px; }
    .pt-opt-dots { max-width: 50px; }
    .pt-opt-dots .pt-dot { width: 4px; height: 4px; }
}