/* ================================================================
bringing-it-together.css
----------------------------------------------------------------
Styles for the "Bringing it together (why HCF & LCM matter)"
skill group (Tier 4 capstone) on the Class 5 Math page, placed
right after "LCM (Least Common Multiple)":
- A.1 HCF or LCM? Which Tool Do I Need? — a mixed word
problem where the child must recognize WHICH concept
applies ("cutting/grouping fairly" -> HCF, "things
repeating/lining up together" -> LCM) before picking the
right numeric answer (new .btg-story-* classes, plus a
.btg-tool-tag "HCF"/"LCM" chip revealed in the feedback).
- A.2 HCF/LCM in Fractions (the payoff connection) — alternates
between simplifying a fraction to lowest terms (using
the HCF) and finding a common denominator for two unlike
fractions (using the LCM), each shown as a stacked
fraction-bar visual (new .btg-frac-* classes).
- A.3 Mixed Celebration Challenge — a final 5-question round
that cycles through every story type learned (ribbon
cutting, gift bags, bus schedules, fraction simplifying,
common denominators), capped with a badge/reward screen
that celebrates instead of grades (new .btg-badge-*
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 "btg-" prefixed classes, including its own
answer-chip wrapper (.btg-picker), so it has no hidden cross-file
dependency — same philosophy as common-factors-multiples.css's
.cfm- classes. Load this file after the shared quiz shell
stylesheets, e.g.:
================================================================ */
/* ---------- shared: answer-chip picker row ---------- */
/* flex-wrap is intentionally "nowrap": there are always exactly 4
chips and they must always sit in a single row on every screen
size, including small Android phone browsers. Each .btg-opt is a
flexible (not fixed-width) item so the row shrinks to fit the
quiz card instead of wrapping to a second line. */
.btg-picker {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
gap: 10px;
margin: 18px auto 4px;
width: 100%;
max-width: 420px;
}
.btg-opt {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
max-width: 170px;
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: 16px;
color: var(--secondary);
text-align: center;
line-height: 1.2;
word-break: break-word;
}
.quiz-number-opt.btg-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.btg-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: target / instruction caption ---------- */
.btg-target-caption {
font-weight: 700;
font-size: 15px;
color: var(--text);
text-align: center;
margin: 4px auto 2px;
max-width: 360px;
}
.btg-target-caption .btg-target-val {
font-weight: 800;
color: var(--secondary);
font-size: 17px;
}
/* ================================================================
A.1 HCF or LCM? Which Tool Do I Need?
A.3 (Mixed Celebration Challenge) reuses this same story-card
layout for its ribbon / bags / buses questions.
================================================================ */
.btg-story-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 14px auto 6px;
width: 100%;
}
.btg-story-card {
display: flex;
align-items: flex-start;
gap: 10px;
width: min(420px, 94%);
padding: 14px 16px;
border-radius: 16px;
background: rgba(157, 92, 255, 0.07);
border: 2px solid var(--purple);
}
.btg-story-icon {
flex: 0 0 auto;
font-size: 26px;
line-height: 1;
margin-top: 1px;
}
.btg-story-text {
font-weight: 700;
font-size: 14.5px;
color: var(--text);
line-height: 1.45;
text-align: left;
}
.btg-tool-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 999px;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.3px;
margin: 2px 3px 0 0;
}
.btg-tool-tag.is-hcf {
color: #7a3fe0;
background: rgba(157, 92, 255, 0.14);
border: 2px solid var(--purple);
}
.btg-tool-tag.is-lcm {
color: #0e7fc9;
background: rgba(46, 155, 245, 0.14);
border: 2px solid var(--sky);
}
.btg-tool-hint {
font-weight: 700;
font-size: 12.5px;
color: var(--text);
opacity: 0.75;
text-align: center;
max-width: 320px;
}
/* ================================================================
A.2 HCF/LCM in Fractions (the payoff connection)
A.3 (Mixed Celebration Challenge) reuses this same fraction-bar
layout for its "simplify" and "common denominator" questions.
================================================================ */
.btg-frac-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 14px auto 4px;
width: 100%;
}
.btg-frac-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: nowrap;
}
.btg-frac-op {
font-weight: 800;
font-size: 22px;
color: var(--secondary);
opacity: 0.6;
}
.btg-frac-card {
display: flex;
flex-direction: column;
align-items: center;
min-width: 64px;
}
.btg-frac-num {
font-weight: 800;
font-size: 20px;
color: var(--purple);
padding: 0 6px 4px;
}
.btg-frac-bar {
width: 100%;
height: 3px;
background: var(--secondary);
border-radius: 2px;
}
.btg-frac-den {
font-weight: 800;
font-size: 20px;
color: var(--sky);
padding: 4px 6px 0;
}
.btg-frac-caption {
font-weight: 700;
font-size: 13px;
color: var(--text);
opacity: 0.8;
text-align: center;
max-width: 320px;
}
/* ================================================================
A.3 Mixed Celebration Challenge — badge / reward screen
================================================================ */
.btg-badge-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 6px auto 10px;
}
.btg-badge-medal {
font-size: 54px;
line-height: 1;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
}
.btg-badge-title {
font-weight: 800;
font-size: 16px;
color: var(--sun);
text-align: center;
}
.btg-mix-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 999px;
font-weight: 800;
font-size: 11.5px;
color: var(--secondary);
background: rgba(255, 193, 7, 0.16);
border: 2px solid var(--sun);
margin: 0 auto 4px;
width: fit-content;
}
/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
.btg-picker { gap: 7px; margin: 14px auto 4px; max-width: 350px; }
.btg-opt { padding: 9px 5px; font-size: 14px; min-height: 46px !important; }
.btg-story-card { padding: 11px 12px; gap: 8px; }
.btg-story-icon { font-size: 22px; }
.btg-story-text { font-size: 13px; }
.btg-tool-tag { font-size: 11px; padding: 2px 8px; }
.btg-frac-row { gap: 9px; }
.btg-frac-op { font-size: 18px; }
.btg-frac-card { min-width: 50px; }
.btg-frac-num, .btg-frac-den { font-size: 16px; padding: 0 4px 3px; }
.btg-frac-caption { font-size: 12px; max-width: 280px; }
.btg-badge-medal { font-size: 44px; }
.btg-badge-title { font-size: 14px; }
}
@media (max-width: 380px) {
.btg-picker { gap: 5px; max-width: 310px; }
.btg-opt { padding: 7px 4px; font-size: 12.5px; min-height: 44px !important; }
.btg-story-card { width: 98%; padding: 10px; }
.btg-story-text { font-size: 12.5px; }
.btg-frac-row { gap: 6px; }
.btg-frac-op { font-size: 16px; }
.btg-frac-card { min-width: 42px; }
.btg-frac-num, .btg-frac-den { font-size: 14px; }
.btg-badge-medal { font-size: 38px; }
}