/* ================================================================
symmetry.css
----------------------------------------------------------------
ONE stylesheet for the whole Class 5 Math "Symmetry" topic
(Topic 12). It replaces these six files:
symmetry-foundations.css (sym-) Tier 1 A.1-A.5
symmetry-lines.css (sln-) Tier 2 B.1-B.5
symmetry-figures.css (syl-) Tier 3 C.1-C.5
mirror-reflection.css (mir-) Tier 4 D.1-D.5
rotational-symmetry.css (rsy-) Tier 5 E.1-E.6
symmetry-together.css (spt-) Tier 6 F.1-F.6
All class names are unchanged, so the HTML and JS need no edits.
Only the tags change - use just this one:
How the duplicates were removed
- Rules that were identical across files (SVG outlines, letter
strokes, stage card, hint, status, buttons, tap-points, answer
chips, picker row, popup hooks, responsive steps ...) now exist
ONCE, written as grouped selectors.
- Small differences (a different size, colour or padding) are kept
as short per-family overrides placed right after the shared rule.
- The per-file figure-size variables (--sln-fig, --syl-fig,
--rsy-fig, --mir-fig, --spt-fig) are all aliases of ONE variable,
--sy-fig, which the media queries change in a single place.
- The repeated notebook-paper background and the system font stack
are now the variables --sy-paper and --sy-font.
Layout
1. Shared tokens and popup hooks
2. Shared drawing paint
3. Shared stage / hint / status / pair / buttons / tap-points
4. Shared answer chips (ALWAYS one row)
5. Tier-specific styles (A sym, B sln, C syl, D mir, E rsy, F spt)
6. Responsive (phones, touch, landscape)
7. Reduced motion
================================================================ */
/* ================================================================
1. SHARED TOKENS AND POPUP HOOKS
================================================================ */
:root {
--sy-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--sy-paper: repeating-linear-gradient(0deg, #fbfaff 0 22px, #f2eeff 22px 23px);
}
/* One drawing-size variable for tiers 2-6 (tier 1 keeps its own three
--sym-* variables, see section 5A). The old per-tier names stay as
aliases in case any HTML / JS reads them. */
.quiz-overlay:is([data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="mir"], [data-sy="spt"]) .quiz-modal {
--sy-fig: 250px;
--sln-fig: var(--sy-fig);
--syl-fig: var(--sy-fig);
--rsy-fig: var(--sy-fig);
--mir-fig: var(--sy-fig);
--spt-fig: var(--sy-fig);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* the popup shell itself is the page's shared quiz shell */
.quiz-overlay:is([data-sy="sym"], [data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="mir"], [data-sy="spt"]) .quiz-question b {
color: var(--secondary, #4b3f8f);
}
.quiz-overlay:is([data-sy="sym"], [data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="mir"], [data-sy="spt"]) :is(.bq-btn, .bq-next-btn) {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.quiz-overlay:is([data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="mir"], [data-sy="spt"]) :is(.bq-next-btn, .bq-summary-buttons) {
margin-bottom: env(safe-area-inset-bottom, 0px);
}
/* ================================================================
2. SHARED DRAWING PAINT
================================================================ */
/* flat palette used by tiers 1-3 (sf- / sln- / syl-) */
.sf-pink, .sln-pink, .syl-pink { fill: var(--pink, #ff7eb3); }
.sf-purple, .sln-purple, .syl-purple { fill: var(--purple, #a78bfa); }
.sf-red, .sln-red, .syl-red { fill: #ef5b5b; }
.sf-green, .sln-green, .syl-green { fill: #4cc38a; }
.sf-sun, .sln-sun, .syl-sun { fill: var(--sun, #ffd23f); }
.sf-sky, .sln-sky, .syl-sky { fill: var(--sky, #5cc3ff); }
.sf-orange, .sln-orange, .syl-orange { fill: #ffa53c; }
.sf-mint, .sln-mint, .syl-mint { fill: var(--mint, #4fe3b5); }
.sf-brown, .sln-brown, .syl-brown { fill: #b9793f; }
/* svg root of every drawing (tier 1's .sym-svg differs, see 5A) */
.sln-svg, .syl-svg, .rsy-svg, .mir-svg, .spt-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* dark outline */
.so, .sln-o, .syl-o, .rsy-o, .spt-o {
stroke: #3b2f63;
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
}
/* letters / digits drawn as thick outlined strokes */
.sln-lt-out, .syl-lt-out, .rsy-lt-out, .spt-lt-out {
fill: none;
stroke: #3b2f63;
stroke-width: 27;
stroke-linecap: round;
stroke-linejoin: round;
}
.sln-lt-in, .syl-lt-in, .rsy-lt-in, .rsy-lt-gl, .spt-lt-in {
fill: none;
stroke-width: 17;
stroke-linecap: round;
stroke-linejoin: round;
}
.sln-lt-in, .syl-lt-in { stroke: #a78bfa; }
/* faint dashed outline left behind while a picture moves */
.sln-ghost-o, .rsy-ghost-o, .spt-ghost-o {
fill: none;
stroke: #b3a8dc;
stroke-width: 2.5;
stroke-dasharray: 6 6;
stroke-linejoin: round;
}
.spt-ghost-o { stroke-width: 3; }
/* dashed mirror / fold line (tiers 2 and 3) */
.sln-axis, .syl-axis {
stroke: #e2528a;
stroke-width: 5;
stroke-dasharray: 11 8;
stroke-linecap: round;
fill: none;
}
.sln-axis.is-answer, .syl-axis.is-answer { stroke: #10b981; stroke-dasharray: 3 8; stroke-width: 6; }
.sln-axis-reveal .sln-axis, .syl-axis-reveal .syl-axis { stroke: #10b981; stroke-width: 4.5; stroke-dasharray: 9 7; }
/* mirror lines that fade in once the question is answered (tiers 2, 3, 6) */
.sln-axis-reveal, .syl-axis-reveal, .spt-axis-reveal { opacity: 0; transition: opacity .4s ease; }
.sln-reveal .sln-axis-reveal, .syl-reveal .syl-axis-reveal, .spt-reveal .spt-axis-reveal { opacity: 1; }
/* little pictures inside answer chips */
.sln-thumb .sln-axis, .syl-thumb .syl-axis { stroke-width: 10; stroke-dasharray: 18 12; }
.sln-thumb .sln-lt-out, .syl-thumb .syl-lt-out, .rsy-opt-thumb .rsy-lt-out, .spt-thumb .spt-lt-out { stroke-width: 30; }
.sln-thumb .sln-lt-in, .syl-thumb .syl-lt-in, .rsy-opt-thumb .rsy-lt-in, .rsy-opt-thumb .rsy-lt-gl, .spt-thumb .spt-lt-in { stroke-width: 19; }
.sln-thumb .sln-o, .sln-opt-thumb .sln-o,
.syl-thumb .syl-o, .syl-opt-thumb .syl-o,
.rsy-opt-thumb .rsy-o { stroke-width: 5; }
/* ================================================================
3. SHARED STAGE, HINT, STATUS, PAIR, BUTTONS, TAP-POINTS
================================================================ */
/* column that holds a stage + hint + controls */
.sln-wrap, .syl-wrap, .rsy-wrap, .mir-wrap, .spt-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 8px auto 0;
}
.spt-wrap { width: 100%; }
/* the square picture card */
.sln-stage, .syl-stage, .rsy-stage, .mir-stage, .spt-stage {
position: relative;
width: var(--sy-fig);
aspect-ratio: 1 / 1;
box-sizing: border-box;
padding: 6px;
border-radius: 20px;
background: var(--sy-paper);
border: 2px solid var(--line, #e3def6);
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08);
transition: border-color .3s, box-shadow .3s;
}
.sln-stage > svg, .syl-stage > svg, .rsy-stage > svg, .mir-stage > svg, .spt-stage > svg { width: 100%; height: 100%; }
.rsy-stage {
border-radius: 22px;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%),
repeating-linear-gradient(0deg, #fbfaff 0 22px, #f1edff 22px 23px);
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08), inset 0 0 22px rgba(167, 139, 250, 0.10);
}
/* "revealed" frame (tiers 2 and 3) - must come before the ok / bad states */
.sln-stage.sln-reveal, .syl-stage.syl-reveal { border-color: #b7a9f2; }
/* right / wrong frames */
.sln-stage.sln-ok, .spt-stage.spt-ok, .rsy-stage.is-fit, .mir-stage.mir-good {
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.20);
}
.sln-stage.sln-bad, .spt-stage.spt-bad, .mir-stage.mir-bad {
border-color: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}
.rsy-stage.is-nofit { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }
.mir-stage.mir-reveal, .mir-stage.mir-on { border-color: #b7a9f2; }
/* hint line */
.sln-hint, .syl-hint, .rsy-hint, .mir-hint, .spt-hint {
margin: 0;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #7a71a8;
line-height: 1.35;
max-width: 340px;
}
.sln-hint-top, .syl-hint-top, .rsy-hint-top, .spt-hint-top { margin-top: 4px; }
.sln-hint b, .syl-hint b, .rsy-hint b, .mir-hint b, .spt-hint b { color: var(--secondary, #4b3f8f); }
/* status line */
.sln-status, .rsy-status, .mir-status {
margin: 0;
min-height: 22px;
text-align: center;
font-size: 14px;
font-weight: 800;
color: #7a71a8;
}
.rsy-status { max-width: 340px; line-height: 1.3; }
.sln-status.is-yes, .rsy-status.is-yes { color: #059669; }
.sln-status.is-no, .rsy-status.is-no { color: #dc2626; }
/* two or three small stages side by side */
.sln-pair, .rsy-pair, .spt-pair { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 440px; }
.spt-pair { gap: 10px; }
.sln-cell, .rsy-cell, .spt-cell {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.sln-cell, .rsy-cell { max-width: calc(var(--sy-fig) * 0.62); }
.spt-cell { max-width: calc(var(--sy-fig) * 0.5); }
.sln-stage.sln-mini, .rsy-stage.rsy-mini, .spt-stage.spt-mini { width: 100%; padding: 4px; border-radius: 16px; }
.sln-cap, .rsy-cap { font-size: 13px; font-weight: 800; color: #7a71a8; }
/* outlined pill button (fold / mirror / spin) */
.sln-fold-btn, .mir-btn, .spt-btn {
min-height: 48px;
padding: 10px 22px;
border: 2px solid var(--primary, #6c5ce7);
border-radius: 999px;
background: #fff;
color: var(--primary, #6c5ce7);
font: inherit;
font-weight: 800;
font-size: 15px;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18);
transition: transform .08s ease, background .15s;
}
.sln-fold-btn:active:not(:disabled), .mir-btn:active:not(:disabled), .spt-btn:active:not(:disabled) {
transform: translateY(2px);
box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18);
background: rgba(108, 92, 231, 0.10);
}
.sln-fold-btn:disabled, .mir-btn:disabled, .spt-btn:disabled { opacity: .55; cursor: default; }
/* tap-a-point badges (B.1 fold lines, E.2 centre of rotation) */
.sln-cand, .rsy-cand { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.sln-badge, .rsy-badge { fill: #fff; stroke: #e2528a; stroke-width: 3; transition: fill .2s, stroke .2s; }
.sln-badge-t, .rsy-badge-t {
fill: #e2528a;
font: 800 16px/1 var(--sy-font);
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
}
.sln-cand:active .sln-badge, .rsy-cand:active .rsy-badge { fill: #ffe3ef; }
.sln-cand.is-yes .sln-badge, .rsy-cand.is-yes .rsy-badge { stroke: #10b981; fill: #e8fbf3; }
.sln-cand.is-yes .sln-badge-t, .sln-cand.is-yes .sln-badge-m, .rsy-cand.is-yes .rsy-badge-t { fill: #10b981; }
.sln-cand.is-no .sln-badge, .rsy-cand.is-no .rsy-badge { stroke: #ef4444; fill: #fdeeee; }
.sln-cand.is-no .sln-badge-t, .sln-cand.is-no .sln-badge-m, .rsy-cand.is-no .rsy-badge-t { fill: #ef4444; }
/* ================================================================
4. SHARED ANSWER CHIPS - ALWAYS ONE ROW
================================================================ */
.quiz-number-options:is(.sym-picker, .sln-picker, .syl-picker, .rsy-picker, .mir-picker, .spt-picker),
.quiz-overlay[data-sy="mir"] .quiz-number-options {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 440px;
margin: 16px auto 4px;
}
.quiz-number-options:is(.sym-picker, .sln-picker, .syl-picker, .rsy-picker, .mir-picker, .spt-picker):empty,
.quiz-overlay[data-sy="mir"] .quiz-number-options:empty { display: none; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt) {
display: inline-flex;
flex: 1 1 0;
min-width: 0;
max-width: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
height: auto !important;
min-height: 54px !important;
max-height: none !important;
box-sizing: border-box !important;
padding: 10px 6px;
white-space: normal !important;
overflow: visible;
font-weight: 800;
font-size: 15.5px;
line-height: 1.2;
text-align: center;
color: var(--secondary, #4b3f8f);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
transition: transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
}
.quiz-number-opt.spt-opt { font-size: 15px; overflow-wrap: anywhere; }
.quiz-number-opt.mir-opt { padding: 10px 5px; overflow-wrap: break-word; font-size: clamp(12.5px, 3.7vw, 15.5px); }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt):active:not(:disabled) {
transform: scale(.96);
background: rgba(108, 92, 231, 0.10);
}
@media (hover: hover) {
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt):hover:not(:disabled) {
border-color: var(--primary, #6c5ce7);
}
}
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-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:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-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);
}
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt).has-thumb { padding: 6px 4px 8px; }
/* picture inside a chip */
.sym-opt-thumb, .sln-opt-thumb, .syl-opt-thumb, .rsy-opt-thumb, .spt-opt-thumb, .mir-opt-thumb {
display: block;
width: 100%;
max-width: 78px;
}
.sln-opt-thumb, .syl-opt-thumb, .rsy-opt-thumb, .spt-opt-thumb, .mir-opt-thumb { aspect-ratio: 1 / 1; }
.sym-opt-thumb { max-width: 74px; }
.mir-opt-thumb { max-width: 96px; overflow: hidden; border-radius: 8px; }
.mir-opt-thumb.mir-thumb-wide { aspect-ratio: 10 / 7; max-width: 110px; }
/* small "A / B / C" letter under a picture */
.sym-opt-letter, .sln-opt-letter, .syl-opt-letter, .rsy-opt-letter, .spt-opt-letter { font-size: 13px; font-weight: 800; opacity: .8; }
/* ================================================================
5A. TIER 1 - FOUNDATIONS (sym-)
A.1 Matching Halves, A.2 Fold and Match, A.3 Nature, A.4 Mirror
Line, A.5 Symmetric or Not
================================================================ */
.sf-white { fill: #ffffff; }
.sf-dark { fill: #3b2f63; }
.sf-cream { fill: #fff1cf; }
.sf-gray { fill: #c4bfd6; }
.sf-ice { fill: #d6ecff; }
.sf-cheek { fill: #ffb3c7; }
.sf-arch { fill: #8c7ae6; }
.nofill { fill: none; }
.sl-ice { stroke: var(--sky, #38a8ff); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sl-brown { stroke: #9c6a3b; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sl-purple { stroke: #7c5cf0; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sym-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sym-svg.sym-half-svg { overflow: hidden; height: 100%; }
.sym-axis { stroke: #e2528a; stroke-width: 2.6; stroke-dasharray: 7 6; stroke-linecap: round; fill: none; }
.sym-axis-reveal { opacity: 0; transition: opacity .35s ease; }
.sym-reveal .sym-axis-reveal { opacity: 1; }
/* the "odd one out" part of a not-symmetric picture lights up on reveal */
.sym-reveal .sym-odd * { stroke: #ef4444; stroke-dasharray: 5 4; stroke-width: 3.4; }
.quiz-overlay[data-sy="sym"] .quiz-modal {
--sym-board: 220px;
--sym-fig: 236px;
--sym-frame: 280px;
}
.sym-hint { margin: 2px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #7a71a8; }
/* A.1 Matching Halves Intro */
.sym-halves { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px auto 0; }
.sym-board {
position: relative;
display: flex;
width: var(--sym-board);
height: var(--sym-board);
box-sizing: border-box;
border: 2px solid var(--line, #e3def6);
border-radius: 20px;
background: linear-gradient(180deg, #fdfcff, #f1edff);
overflow: hidden;
transition: box-shadow .3s, border-color .3s;
}
.sym-board-half { position: relative; flex: 0 0 50%; height: 100%; box-sizing: border-box; }
.sym-board-half .sym-svg { width: 100%; height: 100%; }
.sym-board-half.is-drop { background: rgba(108, 92, 231, 0.06); outline: 3px dashed #b7a9f2; outline-offset: -3px; }
.sym-board-half.is-drop.is-hot { background: rgba(16, 185, 129, 0.12); outline-color: #10b981; }
.sym-board-half.is-drop.is-filled { outline: none; background: transparent; }
.sym-board-half.is-drop.is-bad { background: rgba(239, 68, 68, 0.10); outline: 3px dashed #ef4444; }
.sym-drop-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: #c9bff5; pointer-events: none; }
.sym-board::after {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 50%;
width: 0;
border-left: 3px dashed #e2528a;
opacity: 0;
transition: opacity .4s;
pointer-events: none;
}
.sym-board.is-joined { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22); animation: symJoin .5s ease; }
.sym-board.is-joined::after { opacity: 1; }
@keyframes symJoin { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.sym-tray { display: flex; justify-content: center; gap: 16px; }
.sym-half-opt {
width: calc(var(--sym-board) * 0.36);
aspect-ratio: 1 / 2;
box-sizing: border-box;
padding: 4px;
border: 2px solid var(--line, #e3def6);
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 0 rgba(75, 63, 143, 0.12);
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition: box-shadow .15s, border-color .15s, opacity .15s;
}
.sym-half-opt .sym-svg { pointer-events: none; }
.sym-half-opt:active { cursor: grabbing; }
.sym-half-opt.is-dragging { opacity: .25; }
.sym-half-opt.is-correct { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
.sym-half-opt.is-wrong { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.sym-half-opt:disabled { cursor: default; }
.sym-ghost {
position: fixed;
z-index: 10100;
pointer-events: none;
padding: 0;
filter: drop-shadow(0 10px 14px rgba(32, 22, 66, 0.35));
transform: scale(1.05);
}
.sym-ghost .sym-svg { pointer-events: none; }
/* A.2 Fold and Match + A.5 Symmetric or Not (same paper card) */
.sym-fold-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8px auto 0; }
.sym-fold-stage, .sym-shape-card {
width: var(--sym-fig);
padding: 10px;
box-sizing: content-box;
border-radius: 20px;
background: var(--sy-paper);
border: 2px solid var(--line, #e3def6);
}
.sym-fold-right { transform-origin: 100px 100px; transition: transform .95s cubic-bezier(.45, .05, .25, 1), opacity .5s, filter .5s; }
.sym-fold-stage.is-folded .sym-fold-right { transform: scaleX(-1); opacity: .72; filter: hue-rotate(-45deg) saturate(1.25); }
.sym-fold-btn {
min-height: 46px;
padding: 10px 20px;
border: 2px solid var(--primary, #6c5ce7);
border-radius: 999px;
background: #fff;
color: var(--primary, #6c5ce7);
font: inherit;
font-weight: 800;
font-size: 15px;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.sym-fold-btn:active { background: rgba(108, 92, 231, 0.10); }
/* A.3 Symmetry in Nature and Around Us */
.sym-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 440px; margin: 10px auto 0; }
.sym-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
aspect-ratio: 1 / 1.1;
min-width: 0;
box-sizing: border-box;
padding: 6px 4px 5px;
border: 2.5px solid var(--line, #e3def6);
border-radius: 18px;
background: #fff;
font: inherit;
cursor: pointer;
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.10);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform .08s ease, border-color .15s, background .15s, box-shadow .15s;
}
.sym-tile:active:not(:disabled) { transform: scale(.96); }
.sym-tile-art { display: block; width: 76%; }
.sym-tile-name { font-size: 12px; font-weight: 800; color: var(--text, #2d2550); line-height: 1.1; text-align: center; }
.sym-tile-flag { position: absolute; top: 4px; right: 6px; font-size: 16px; font-weight: 800; }
.sym-tile.is-picked { border-color: var(--primary, #6c5ce7); background: #f4f1ff; box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.20); }
.sym-tile.is-right { border-color: #10b981; background: rgba(16, 185, 129, 0.10); }
.sym-tile.is-right .sym-tile-flag { color: #10b981; }
.sym-tile.is-wrong-pick { border-color: #ef4444; background: rgba(239, 68, 68, 0.09); }
.sym-tile.is-wrong-pick .sym-tile-flag { color: #ef4444; }
.sym-tile.is-missed { border: 2.5px dashed #10b981; background: #fff; }
.sym-tile.is-missed .sym-tile-flag { color: #10b981; }
.sym-tile:disabled { cursor: default; }
.sym-count { margin: 10px 0 0; text-align: center; font-weight: 800; font-size: 14px; color: var(--secondary, #4b3f8f); }
/* A.4 The Mirror Line */
.sym-line-wrap { display: flex; justify-content: center; margin: 8px auto 0; }
.sym-line-frame {
position: relative;
width: var(--sym-frame);
aspect-ratio: 1 / 1;
box-sizing: border-box;
border: 2px solid var(--line, #e3def6);
border-radius: 20px;
background: var(--sy-paper);
touch-action: none;
user-select: none;
-webkit-user-select: none;
cursor: grab;
outline: none;
}
.sym-line-frame:focus-visible { box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.30); }
.sym-line-frame .sym-svg { width: 100%; height: 100%; }
.sym-mline { stroke: #e2528a; stroke-width: 3.4; stroke-dasharray: 9 6; stroke-linecap: round; }
.sym-mline-handle { fill: #e2528a; stroke: #fff; stroke-width: 3; }
.sym-mline.is-good, .sym-mline-handle.is-good { stroke: #10b981; }
.sym-mline-handle.is-good { fill: #10b981; stroke: #fff; }
.sym-mline.is-bad { stroke: #ef4444; }
.sym-mline-handle.is-bad { fill: #ef4444; stroke: #fff; }
.sym-mline.is-answer { stroke: #10b981; stroke-dasharray: 3 6; }
.sym-line-frame.is-done { cursor: default; }
/* A.5 card centring */
.sym-shape-stage { display: flex; justify-content: center; margin: 8px auto 0; }
/* ================================================================
5B. TIER 2 - LINES OF SYMMETRY (sln-)
B.1 Fold It Yourself, B.2 Draw the Line, B.3 Direction,
B.4 One Line or Many, B.5 Is This a Line of Symmetry
================================================================ */
.sln-ghost { opacity: 0; transition: opacity .3s; }
.is-folding .sln-ghost { opacity: 1; }
.sln-cut-mv { fill-opacity: .85; }
.sln-mover .sln-cut-mv { fill: #ffb347 !important; }
.sln-stage.sln-bad .sln-mover .sln-cut-mv { fill: #ff8a8a !important; }
.sln-stage.sln-ok .sln-mover .sln-cut-mv { fill: #7be0b0 !important; }
.sln-hit { stroke: transparent; stroke-width: 38; stroke-linecap: round; fill: none; pointer-events: stroke; }
.sln-fold-line { stroke: #e2528a; stroke-width: 4.5; stroke-dasharray: 10 8; stroke-linecap: round; fill: none; pointer-events: none; }
.sln-badge-m { font: 800 20px/1 var(--sy-font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sln-cand:focus-visible .sln-badge { stroke-width: 5; }
.sln-cand.is-yes .sln-fold-line { stroke: #10b981; }
.sln-cand.is-no .sln-fold-line { stroke: #ef4444; }
@media (hover: hover) { .sln-cand:hover .sln-fold-line { stroke-width: 6; } }
/* B.2 Draw the Line */
.sln-draw-frame {
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
cursor: crosshair;
outline: none;
}
.sln-draw-frame:focus-visible { box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.30); }
.sln-draw-frame.is-done { cursor: default; }
.sln-user, .sln-answers { pointer-events: none; }
.sln-drawn { stroke: #e2528a; stroke-width: 6; stroke-dasharray: 12 8; stroke-linecap: round; fill: none; }
.sln-dot { fill: #e2528a; stroke: #fff; stroke-width: 3; }
.sln-drawn.is-good { stroke: #10b981; stroke-dasharray: none; }
.sln-dot.is-good { fill: #10b981; }
.sln-drawn.is-bad { stroke: #ef4444; }
.sln-dot.is-bad { fill: #ef4444; }
/* ================================================================
5C. TIER 3 - LETTERS, NUMBERS, EVERYDAY FIGURES (syl-)
C.1 Alphabet, C.2 Numbers, C.3 Rangoli / Logos / Flags,
C.4 Symmetric Words, C.5 Regular Polygons
================================================================ */
/* many-line reveals (24 spokes) use thinner lines */
.syl-axis-reveal.syl-many .syl-axis { stroke-width: 2; stroke-dasharray: none; }
/* letter / digit / polygon thumbnails inside the chips are a little larger */
.syl-opt-thumb .syl-lt-out { stroke-width: 28; }
.syl-opt-thumb .syl-lt-in { stroke-width: 18; }
/* icons inside the class chips (No line / Vertical / Horizontal / Both) */
.syl-ico { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.syl-ico-bg { fill: #f6f3ff; stroke: #cfc6f3; stroke-width: 2; }
.syl-ico-l { stroke: #e2528a; stroke-width: 3.2; stroke-dasharray: 5 4; stroke-linecap: round; }
.syl-ico-x { stroke: #ef4444; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.syl-opt-label { display: block; max-width: 100%; font-size: clamp(11px, 3.3vw, 14.5px); font-weight: 800; line-height: 1.15; white-space: nowrap; }
.quiz-number-opt.syl-opt.has-thumb:has(.syl-ico) { gap: 5px; padding: 8px 3px 9px; }
/* word chips (C.4): the word itself, printed big */
.quiz-number-opt.syl-opt.syl-opt-word { padding: 8px 4px; }
.syl-word-chip { display: block; font-size: clamp(14px, 4.4vw, 19px); font-weight: 900; letter-spacing: .06em; color: var(--secondary, #4b3f8f); white-space: nowrap; }
/* wide stage for words and the pattern strip */
.syl-stage.syl-wide { width: min(100%, 380px); aspect-ratio: 5 / 2; padding: 4px; border-radius: 18px; }
.syl-stage.syl-strip { aspect-ratio: 400 / 158; }
.syl-svg-word { width: 100%; height: 100%; }
.syl-blank { fill: #fff; stroke: #e2528a; stroke-width: 4; stroke-dasharray: 9 7; }
.syl-blank-t { fill: #e2528a; font: 900 60px/1 var(--sy-font); text-anchor: middle; dominant-baseline: central; }
.syl-tile-name { fill: #7a71a8; font: 800 15px/1 var(--sy-font); text-anchor: middle; }
.syl-tile-n { fill: var(--secondary, #4b3f8f); font: 900 19px/1 var(--sy-font); text-anchor: middle; }
.syl-tile-q { fill: #e2528a; font: 900 19px/1 var(--sy-font); text-anchor: middle; }
/* ================================================================
5D. TIER 4 - REFLECTION AND THE MIRROR (mir-)
D.1 Mirror Images, D.2 Complete the Other Half, D.3 Reflect the
Dots, D.4 Reflection or Slide, D.5 Mirror Writing
================================================================ */
/* colour fills: soft satin gradient (defined in mirror-reflection.js) */
.mir-c-pink { fill: #ff7eb3; fill: url(#mirG-pink); }
.mir-c-purple { fill: #a78bfa; fill: url(#mirG-purple); }
.mir-c-sky { fill: #5cc3ff; fill: url(#mirG-sky); }
.mir-c-orange { fill: #ffa53c; fill: url(#mirG-orange); }
.mir-c-mint { fill: #4fe3b5; fill: url(#mirG-mint); }
.mir-c-green { fill: #4cc38a; fill: url(#mirG-green); }
.mir-c-red { fill: #ef5b5b; fill: url(#mirG-red); }
.mir-c-sun { fill: #ffd23f; fill: url(#mirG-sun); }
.mir-sheen { fill: url(#mirG-sheen); pointer-events: none; }
.mir-r-blue { fill: #3aa0ff; fill: url(#mirR-blue); }
.mir-r-green { fill: #2fd08a; fill: url(#mirR-green); }
.mir-r-red { fill: #f25555; fill: url(#mirR-red); }
/* outline sits UNDER the fills, so it is drawn 6 wide and shows 3 */
.mir-ln { fill: none; stroke: #3b2f63; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
/* the reflection is hidden until the mirror is placed */
.mir-pre .mir-rf { visibility: hidden; }
/* dashed mirror line, glass mirror */
.mir-axis { stroke: #e2528a; stroke-width: 4.5; stroke-dasharray: 10 8; stroke-linecap: round; fill: none; }
.mir-divider { stroke: #b3a8dc; stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; fill: none; }
.mir-glass { fill: #cfe6fa; fill: url(#mirG-glass); stroke: #7d97cf; stroke-width: 2; }
.mir-glint { fill: #fff; fill-opacity: .75; }
.mir-glass-g { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.mir-on .mir-glass-g { opacity: 1; }
.mir-panel { fill: #fff; fill-opacity: .7; stroke: #b3a8dc; stroke-width: 2.5; stroke-dasharray: 6 6; }
.mir-panel-q { transition: opacity .4s; }
.mir-on .mir-panel-q { opacity: 0; }
.mir-letter { font-size: 26px; font-weight: 900; line-height: 1.1; }
/* D.2 dot paper */
.mir-gl { stroke: #ddd6f5; stroke-width: 1; }
.mir-gl.ax { stroke: #a99fd6; stroke-width: 2; }
.mir-dot { fill: #8f84c4; stroke: #fff; stroke-width: 1.2; pointer-events: none; }
.mir-hit { fill: #000; fill-opacity: 0; pointer-events: all; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mir-draw.is-done .mir-hit { cursor: default; pointer-events: none; }
.mir-picks, .mir-fig { pointer-events: none; }
.mir-pick { fill: #e2528a; stroke: #fff; stroke-width: 3; }
.mir-pick.is-good { fill: #10b981; }
.mir-pick.is-bad { fill: #ef4444; }
.mir-ring { fill: none; stroke: #10b981; stroke-width: 4; }
/* D.3 coordinate grid */
.mir-grid .mir-gl { stroke-width: 1; }
.mir-num { font: 700 10.5px/1 var(--sy-font); fill: #7a71a8; }
.mir-mlabel { font: 800 12px/1 var(--sy-font); fill: #e2528a; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.mir-plabel { font: 800 14px/1 var(--sy-font); fill: #3b2f63; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.mir-ball { stroke: #2d2563; stroke-width: 2; }
.mir-spec { fill: #fff; fill-opacity: .8; pointer-events: none; }
.mir-conn { stroke: #10b981; stroke-width: 3; stroke-dasharray: 4 6; stroke-linecap: round; }
.mir-rev { opacity: 0; transition: opacity .45s ease; }
.mir-reveal .mir-rev { opacity: 1; }
/* D.5 mirror writing */
.mir-word {
font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--sy-font);
font-weight: 900;
fill: #4b3f8f;
fill: url(#mirG-ink);
stroke: #2d2563;
stroke-width: .6px;
stroke-linejoin: round;
user-select: none;
-webkit-user-select: none;
}
.mir-board { fill: #fff8e2; fill: url(#mirG-board); stroke: #3b2f63; stroke-width: 4; }
.mir-thumbbg { fill: #fffdf4; stroke: #d3caf3; stroke-width: 2; }
.mir-wheel { fill: #3b2f63; stroke: #1f1846; stroke-width: 3; }
/* ================================================================
5E. TIER 5 - ROTATIONAL SYMMETRY (rsy-)
E.1 Spin and Match, E.2 Centre of Rotation, E.3 Angle,
E.4 Order, E.5 Real Life, E.6 Trap Questions
================================================================ */
.rsy-gl { stroke: none; pointer-events: none; }
.rsy-lt-gl { pointer-events: none; }
.rsy-ghost-th { fill: none; stroke: #d3c9f7; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
/* details drawn on top of the coloured shapes */
.rsy-det-w { fill: #fff; fill-opacity: .3; pointer-events: none; }
.rsy-det-d { fill: #3b2f63; fill-opacity: .12; pointer-events: none; }
.rsy-lat { fill: none; stroke: #fff; stroke-opacity: .65; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rsy-spoke { stroke: #3b2f63; stroke-width: 3.6; stroke-linecap: round; }
.rsy-tick { stroke: #3b2f63; stroke-width: 5.5; stroke-linecap: round; }
.rsy-arc { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.rsy-arrowhead { fill: #fff; }
.rsy-hand { stroke: #3b2f63; stroke-width: 6.5; stroke-linecap: round; }
.rsy-hand-min { stroke-width: 4.5; }
.rsy-num { font: 800 15px/1 var(--sy-font); fill: #3b2f63; text-anchor: middle; dominant-baseline: central; }
.rsy-opt-thumb .rsy-num { font-size: 17px; }
.rsy-reddot { fill: #ef4444; stroke: #fff; stroke-width: 4; }
.rsy-dial-ring { fill: #fbfaff; stroke: #cfc5f4; stroke-width: 3; stroke-dasharray: 6 6; }
.rsy-ray { stroke: #3b2f63; stroke-width: 4.5; stroke-linecap: round; }
.rsy-pinc { fill: #3b2f63; }
/* pointers on the turning stage */
.rsy-ptr { fill: #ef4444; stroke: #3b2f63; stroke-width: 2.5; stroke-linejoin: round; }
.rsy-ptr-ref { fill: #ece8fb; stroke: #b3a8dc; stroke-width: 2.5; stroke-linejoin: round; }
/* buttons under the stage */
.rsy-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.rsy-btn {
min-height: 48px;
padding: 10px 20px;
border: 2px solid var(--primary, #6c5ce7);
border-radius: 999px;
background: var(--primary, #6c5ce7);
color: #fff;
font: inherit;
font-weight: 800;
font-size: 15px;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.30);
transition: transform .08s ease, box-shadow .12s, background .15s;
}
.rsy-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(75, 63, 143, 0.30); }
.rsy-btn:disabled { opacity: .6; cursor: default; }
.rsy-btn-ghost { background: #fff; color: var(--primary, #6c5ce7); box-shadow: 0 3px 0 rgba(108, 92, 231, 0.18); }
.rsy-btn-ghost:active:not(:disabled) { background: rgba(108, 92, 231, 0.10); box-shadow: 0 1px 0 rgba(108, 92, 231, 0.18); }
@media (hover: hover) { .rsy-btn:hover:not(:disabled) { filter: brightness(1.06); } }
/* E.2 tap-the-centre points */
.rsy-hit { fill: transparent; stroke: none; pointer-events: all; }
.rsy-cand:focus-visible .rsy-badge { stroke-width: 5.5; }
.rsy-cand.is-yes .rsy-badge { stroke-width: 4.5; }
@media (hover: hover) { .rsy-cand:hover .rsy-badge { stroke-width: 4.5; } }
/* ================================================================
5F. TIER 6 - PUTTING IT TOGETHER (spt-)
F.1 Line vs Rotational, F.2 Compare, F.3 Letters Revisited,
F.4 Build a Symmetric Design, F.5 Mystery Shape, F.6 World
================================================================ */
/* gradient definitions (injected by the script) */
.spt-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* matte gradient fills + faint gloss */
.spt-pink { fill: url(#sptg-pink) #f47fae; }
.spt-purple { fill: url(#sptg-purple) #a08af5; }
.spt-red { fill: url(#sptg-red) #ec5f5f; }
.spt-green { fill: url(#sptg-green) #52c790; }
.spt-sun { fill: url(#sptg-sun) #ffd84a; }
.spt-sky { fill: url(#sptg-sky) #63c6ff; }
.spt-orange { fill: url(#sptg-orange) #ffab47; }
.spt-mint { fill: url(#sptg-mint) #57e6b9; }
.spt-brown { fill: url(#sptg-brown) #bf7f45; }
.spt-navy { fill: url(#sptg-navy) #4b5fd9; }
.spt-white { fill: url(#sptg-white) #f6f3ff; }
.spt-ice { fill: url(#sptg-ice) #dff3ff; }
.spt-shadow { fill: url(#sptg-shadow) #4d4180; }
.spt-gloss { fill: url(#sptg-gloss) rgba(255, 255, 255, 0.25); stroke: none; pointer-events: none; }
.spt-o2 { stroke: #3b2f63; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.spt-lt-in { stroke: #a08af5; }
.spt-lt-hi { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.spt-lt-ghost { fill: none; stroke: #ddd5f7; stroke-width: 27; stroke-linecap: round; stroke-linejoin: round; }
.spt-stage.spt-sm { width: calc(var(--sy-fig) * 0.72); }
.spt-cap { font-size: 12px; font-weight: 800; color: #7a71a8; text-align: center; line-height: 1.25; }
/* dashed mirror lines, shown once the question is answered */
.spt-axis { stroke: #10b981; stroke-width: 4.5; stroke-dasharray: 9 7; stroke-linecap: round; fill: none; }
.spt-axis.spt-axis-thin { stroke-width: 2; stroke-dasharray: 5 5; }
.spt-axis-reveal { pointer-events: none; }
/* chip thumbnails */
.spt-thumb .spt-o { stroke-width: 6; }
.spt-thumb .spt-o2 { stroke-width: 4; }
.spt-thumb .spt-lt-hi { stroke-width: 4; }
.spt-thumb .spt-axis { stroke-width: 9; stroke-dasharray: 16 11; }
.spt-pair-chip { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.spt-pair-chip b { font-size: 17px; }
.spt-action-row { display: flex; justify-content: center; margin: 12px 0 0; }
.spt-action-row .bq-btn { min-height: 48px; min-width: 140px; }
/* F.4 Build a Symmetric Design - steppers and mirror switch */
.spt-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; width: 100%; max-width: 440px; }
.spt-step, .spt-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border: 2px solid var(--line, #e3def6);
border-radius: 999px;
background: #fff;
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08);
}
.spt-step-l { font-size: 13px; font-weight: 800; color: #7a71a8; padding-left: 6px; }
.spt-step-n { min-width: 22px; text-align: center; font-size: 20px; font-weight: 800; color: var(--secondary, #4b3f8f); }
.spt-step-b {
width: 46px; height: 46px;
border: 0; border-radius: 50%;
background: rgba(108, 92, 231, 0.12);
color: var(--primary, #6c5ce7);
font: inherit; font-size: 24px; font-weight: 800; line-height: 1;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: transform .08s ease, background .15s;
}
.spt-step-b:active:not(:disabled) { transform: scale(.92); background: rgba(108, 92, 231, 0.24); }
.spt-step-b:disabled { opacity: .5; }
.spt-toggle { gap: 4px; padding: 4px; }
.spt-tog {
min-height: 46px;
padding: 6px 14px;
border: 0; border-radius: 999px;
background: transparent;
color: #7a71a8;
font: inherit; font-size: 14px; font-weight: 800;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background .15s, color .15s;
}
.spt-tog.is-on { background: var(--primary, #6c5ce7); color: #fff; }
.spt-tog:disabled { opacity: .6; }
/* F.5 Mystery Shape - clue card + silhouette */
.spt-clue {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 2px dashed #cfc5f3;
border-radius: 16px;
background: #fffdf5;
box-shadow: 0 3px 0 rgba(75, 63, 143, 0.08);
text-align: left;
}
.spt-clue-line { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #4a4270; }
.spt-clue-line b { color: var(--secondary, #4b3f8f); }
.spt-clue-extra { color: #6a5fa0; }
.spt-clue-who { margin: 4px 0 0; font-size: 16px; font-weight: 800; color: var(--primary, #6c5ce7); }
.spt-qmark { fill: #fff; font: 800 64px/1 var(--sy-font); text-anchor: middle; dominant-baseline: central; }
.spt-real, .spt-sil { transition: opacity .45s ease; }
.spt-real { opacity: 0; }
.spt-reveal .spt-real { opacity: 1; }
.spt-reveal .spt-sil { opacity: 0; }
/* F.6 Symmetry in the World - lettered sentences */
.spt-says { list-style: none; margin: 4px auto 0; padding: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
.spt-says li {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 12px;
border: 2px solid var(--line, #e3def6);
border-radius: 14px;
background: #fff;
font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #4a4270;
text-align: left;
}
.spt-says li b {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(108, 92, 231, 0.14); color: var(--primary, #6c5ce7); font-size: 13px;
}
/* ================================================================
6. RESPONSIVE (phones, touch, landscape)
Only the drawings and chips shrink; the popup itself keeps the
page's shared quiz-modal responsiveness.
================================================================ */
@media (max-width: 560px) {
.quiz-overlay:is([data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="spt"]) .quiz-modal { --sy-fig: 232px; }
.quiz-overlay[data-sy="mir"] .quiz-modal { --sy-fig: min(300px, calc(100vw - 72px)); }
.quiz-overlay[data-sy="sym"] .quiz-modal { --sym-board: 200px; --sym-fig: 210px; --sym-frame: 262px; }
.quiz-number-options:is(.sym-picker, .sln-picker, .syl-picker, .rsy-picker, .spt-picker),
.quiz-overlay[data-sy="mir"] .quiz-number-options { gap: 8px; margin-top: 14px; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt) { padding: 9px 5px; min-height: 52px !important; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt) { font-size: 15px; }
.quiz-number-opt:is(.mir-opt, .spt-opt) { padding: 9px 4px; }
.quiz-number-opt.spt-opt { font-size: 14px; }
.sln-opt-thumb, .syl-opt-thumb, .rsy-opt-thumb, .spt-opt-thumb { max-width: 68px; }
.mir-opt-thumb { max-width: 76px; }
.mir-opt-thumb.mir-thumb-wide { max-width: 84px; }
.mir-letter { font-size: 24px; }
.sym-tiles { gap: 8px; }
.sym-tile-name { font-size: 11.5px; }
.sym-tray { gap: 14px; }
}
@media (max-width: 380px) {
.quiz-overlay:is([data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="spt"]) .quiz-modal { --sy-fig: 204px; }
.quiz-overlay[data-sy="sym"] .quiz-modal { --sym-board: 176px; --sym-fig: 188px; --sym-frame: 236px; }
.quiz-number-options:is(.sym-picker, .sln-picker, .syl-picker, .rsy-picker),
.quiz-overlay[data-sy="mir"] .quiz-number-options { gap: 6px; }
.quiz-number-options.spt-picker { gap: 5px; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt) { font-size: 13.5px; padding: 8px 3px; }
.quiz-number-opt:is(.mir-opt, .spt-opt) { padding: 8px 2px; }
.quiz-number-opt.spt-opt { font-size: 12.5px; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt).has-thumb { padding: 5px 2px 6px; }
.sln-opt-thumb, .syl-opt-thumb, .rsy-opt-thumb, .spt-opt-thumb { max-width: 58px; }
.mir-opt-thumb { max-width: 64px; }
.mir-opt-thumb.mir-thumb-wide { max-width: 70px; }
.sln-hint, .syl-hint, .rsy-hint, .mir-hint, .spt-hint { font-size: 12.5px; }
.rsy-btn { padding: 10px 14px; font-size: 14px; }
.sym-tile-name { font-size: 10.5px; }
.syl-ico { width: 26px; height: 26px; }
.syl-word-chip { letter-spacing: .03em; }
.spt-pair-chip { font-size: 11.5px; }
.spt-pair-chip b { font-size: 15px; }
.spt-clue-line { font-size: 14px; }
.spt-says li { font-size: 12.5px; }
.spt-tog { padding: 6px 10px; font-size: 13px; }
}
@media (pointer: coarse) {
.sln-fold-btn, .mir-btn, .spt-btn, .rsy-btn { min-height: 50px; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt) { min-height: 56px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
.quiz-overlay:is([data-sy="sln"], [data-sy="syl"], [data-sy="rsy"], [data-sy="mir"], [data-sy="spt"]) .quiz-modal { --sy-fig: 176px; }
.quiz-overlay[data-sy="sym"] .quiz-modal { --sym-board: 170px; --sym-fig: 170px; --sym-frame: 200px; }
}
/* ================================================================
7. REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
.sym-board.is-joined { animation: none; }
.quiz-number-opt:is(.sym-opt, .sln-opt, .syl-opt, .rsy-opt, .mir-opt, .spt-opt),
.sym-fold-right, .sym-tile,
.sln-stage, .syl-stage, .rsy-stage, .mir-stage, .spt-stage,
.sln-fold-btn, .rsy-btn, .mir-btn, .spt-btn,
.sln-ghost, .sln-axis-reveal, .syl-axis-reveal, .spt-axis-reveal,
.mir-glass-g, .mir-rev, .mir-panel-q,
.spt-real, .spt-sil, .spt-step-b, .spt-tog { transition: none; }
}