/* ================================================================
primes-composites.css
----------------------------------------------------------------
Styles for the "Discovering Primes and Composites" skill group on
the Class 5 Math page:
- A.1 Counting Factors Game — a number's counters are shown as
a loose pile; the child sorts it into "just 1 factor,"
"exactly 2 factors," or "more than 2 factors" (new
.dpc-cluster / .dpc-picker classes).
- A.2 Meet the Primes — a number is shown arranged the ONLY
way it can be (a single row), teaching that exactly-2-
factor numbers are called "prime" (new .dpc-dotgrid
classes, single-row layout).
- A.3 Meet the Composites — a number is shown arranged into a
non-trivial rows x columns rectangle, teaching that
more-than-2-factor numbers are called "composite."
- A.4 The Odd One Out: Number 1 — five different angles all
proving 1 is its own special club (neither prime nor
composite), one counter shown each time.
- A.5 Prime or Composite? Sorting Game — any number 1-20 is
shown as a pile of counters; the child sorts it into
Prime / Composite / Neither, then sees a "proof" chip
row listing every factor found.
This file is fully self-contained ("dpc-" prefixed classes) so it
has no hidden dependency on prime-time.css or any other skill's
stylesheet — same philosophy as prime-time.css's "pt-" classes
and decimal-rwv.css's "drw-" classes. Load it after the shared
quiz shell stylesheets, e.g.:
================================================================ */
/* ---------- 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 (Android browsers down to ~320px are
the explicit target here). Each .dpc-opt is a flexible 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. */
.dpc-picker {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
gap: 10px;
margin: 18px auto 4px;
width: 100%;
max-width: 420px;
}
.dpc-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/bucket-label chips (A.1, A.2, A.3, A.4, A.5) need a smaller
base size since labels like "More than 2 factors" run long. */
.dpc-opt.dpc-opt-text {
font-size: 13.5px;
}
/* Number chips (numeric-answer variants) show a big digit plus a
small dot pile, so the digit itself can stay large. */
.dpc-opt.dpc-opt-number {
font-size: 24px;
}
.quiz-number-opt.dpc-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.dpc-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 ---------- */
.dpc-stage-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
margin: 10px auto 4px;
}
.dpc-caption {
font-weight: 700;
font-size: 14.5px;
color: var(--text);
text-align: center;
max-width: 340px;
}
.dpc-caption strong {
color: var(--secondary);
}
/* ---------- A.2 / A.3: rows x columns dot array ---------- */
.dpc-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);
}
.dpc-dotgrid .dpc-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary);
display: block;
}
/* A single-row grid (used for primes, A.2) gets a subtle highlight
ring to visually read as "only one line, nothing else." */
.dpc-dotgrid.dpc-single-row {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.06);
}
/* ---------- A.1 / A.4 / A.5: loose "pile" of counters ---------- */
.dpc-cluster {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 3px;
max-width: 130px;
}
.dpc-cluster .dpc-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--primary);
display: block;
}
/* Bigger standalone pile used as a stage visual. */
.dpc-stage-wrap .dpc-cluster {
max-width: 220px;
gap: 6px;
}
.dpc-stage-wrap .dpc-cluster .dpc-dot {
width: 16px;
height: 16px;
}
/* Miniature pile nested inside an answer chip (numeric variants). */
.dpc-opt-dots {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 2px;
max-width: 78px;
}
.dpc-opt-dots .dpc-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--secondary);
opacity: 0.55;
display: block;
}
.dpc-opt-num {
display: block;
font-size: 1em;
}
/* ---------- A.5: "proof" chip row shown after answering ---------- */
/* Lists the factors actually found for the number just sorted, so
the child sees the evidence behind Prime / Composite / Neither. */
.dpc-proof-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
max-width: 360px;
}
.dpc-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;
}
.dpc-proof-label {
font-weight: 700;
font-size: 13px;
color: var(--text);
text-align: center;
width: 100%;
margin-bottom: -2px;
}
/* ---------- phone responsiveness (Android + iOS + desktop) ---------- */
@media (max-width: 560px) {
.dpc-picker { gap: 8px; margin: 14px auto 4px; max-width: 340px; }
.dpc-opt { padding: 8px 5px; min-height: 50px !important; }
.dpc-opt.dpc-opt-text { font-size: 12px; }
.dpc-opt.dpc-opt-number { font-size: 20px; }
.dpc-dotgrid { padding: 10px; gap: 5px; }
.dpc-dotgrid .dpc-dot { width: 16px; height: 16px; }
.dpc-cluster { max-width: 110px; gap: 2px; }
.dpc-cluster .dpc-dot { width: 8px; height: 8px; }
.dpc-stage-wrap .dpc-cluster { max-width: 180px; gap: 5px; }
.dpc-stage-wrap .dpc-cluster .dpc-dot { width: 13px; height: 13px; }
.dpc-opt-dots { max-width: 62px; }
.dpc-opt-dots .dpc-dot { width: 5px; height: 5px; }
.dpc-caption { font-size: 13px; max-width: 280px; }
.dpc-proof-chip { font-size: 12px; padding: 4px 10px; }
.dpc-proof-label { font-size: 12px; }
}
/* Common small-Android widths (Galaxy A/M series, budget phones). */
@media (max-width: 400px) {
.dpc-picker { gap: 7px; max-width: 320px; }
.dpc-opt { padding: 7px 4px; min-height: 48px !important; }
.dpc-opt.dpc-opt-text { font-size: 11px; }
.dpc-opt.dpc-opt-number { font-size: 18px; }
}
@media (max-width: 380px) {
.dpc-picker { gap: 6px; max-width: 300px; }
.dpc-opt { padding: 6px 3px; min-height: 46px !important; }
.dpc-opt.dpc-opt-text { font-size: 10.5px; }
.dpc-opt.dpc-opt-number { font-size: 17px; }
.dpc-dotgrid { padding: 8px; gap: 4px; }
.dpc-dotgrid .dpc-dot { width: 13px; height: 13px; }
.dpc-cluster { max-width: 96px; }
.dpc-cluster .dpc-dot { width: 7px; height: 7px; }
.dpc-stage-wrap .dpc-cluster { max-width: 155px; gap: 4px; }
.dpc-stage-wrap .dpc-cluster .dpc-dot { width: 11px; height: 11px; }
.dpc-opt-dots { max-width: 50px; }
.dpc-opt-dots .dpc-dot { width: 4px; height: 4px; }
}
/* Extra-narrow Android browsers (e.g. 320px viewport). */
@media (max-width: 340px) {
.dpc-picker { gap: 5px; max-width: 280px; }
.dpc-opt { padding: 5px 2px; min-height: 44px !important; }
.dpc-opt.dpc-opt-text { font-size: 9.5px; }
.dpc-opt.dpc-opt-number { font-size: 15px; }
}