/* class7-math-ch13-common.css - Geometric Twins (topic 13), shared look for every tier.
   The modal itself comes from the shared quiz css; this file only styles the pictures and forces the 4 chips onto ONE line. */
.c13-overlay { --c13-ink: #3b2f5e; --c13-line: #d9d3f0; --c13-soft: #f6f2ff; }

/* ---- picture stage: soft matte card with a faint dot grid ---- */
.c13-overlay .c13-stage { margin: 8px 0 12px; padding: 10px 8px 6px; border-radius: 20px; text-align: center;
    background: radial-gradient(circle at 1px 1px, rgba(150,116,238,.14) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #fbf9ff, #f1ecff);
    border: 2px solid var(--c13-line); box-shadow: inset 0 -3px 0 rgba(150,116,238,.10); }
.c13-overlay .c13-svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.c13-overlay .c13-hint { margin: 6px 0 2px; font-size: 13px; color: #7a6fa3; font-weight: 700; }
.c13-ico { width: 1.4em; height: 1.4em; vertical-align: -.3em; }

/* ---- shapes: matte fill, soft outline, gentle shine on top ---- */
.c13-overlay .c13-shp { stroke: rgba(59,47,94,.38); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 3px 2px rgba(59,47,94,.16)); }
.c13-overlay .c13-sheen { stroke: none; pointer-events: none; }
.c13-overlay .c13-ghost { fill: rgba(255,255,255,.35); stroke: #ff7f6e; stroke-width: 2.6; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.c13-overlay .c13-mid { stroke: #cfc6ee; stroke-width: 2; stroke-dasharray: 3 7; }
.c13-overlay .c13-board { fill: url(#c13-g-cream); stroke: #c9bd9a; stroke-width: 3; }
.c13-overlay .c13-bar { fill: url(#c13-g-sky); stroke: rgba(59,47,94,.3); stroke-width: 2; }

/* ---- bent lines (the "symbol" arms) ---- */
.c13-overlay .c13-arm { fill: none; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 3px 2px rgba(59,47,94,.18)); }
.c13-overlay .c13-arm1 { stroke: #ff8f7d; }
.c13-overlay .c13-arm2 { stroke: #55aef0; }
.c13-overlay .c13-armshine { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: translate(-1.5px,-1.5px); }
.c13-overlay .c13-dot { fill: #fff; stroke: var(--c13-ink); stroke-width: 2.4; }
.c13-overlay .c13-arc { fill: none; stroke: #9674ee; stroke-width: 3; stroke-linecap: round; }

/* ---- svg text ---- */
.c13-overlay .c13-t { text-anchor: middle; font-family: Nunito, Poppins, Arial, sans-serif; font-weight: 800; font-size: 15px; fill: var(--c13-ink); }
.c13-overlay .c13-start { text-anchor: start; }
.c13-overlay .c13-t-s { font-size: 13px; }
.c13-overlay .c13-t-w { fill: #fff; font-size: 15px; paint-order: stroke; stroke: rgba(59,47,94,.35); stroke-width: 2.5px; }
.c13-overlay .c13-tag { font-size: 17px; fill: #7b5bd6; }

/* ---- the 4 answer chips ALWAYS stay on one line (phones included) ---- */
.c13-overlay .quiz-number-options { display: flex !important; flex-wrap: nowrap !important; justify-content: stretch; gap: 6px; width: 100%; }
.c13-overlay .c13-opt { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 8px 3px; display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: Nunito, Poppins, Arial, sans-serif; font-weight: 800; font-size: clamp(11px, 3.3vw, 15px); line-height: 1.15; white-space: normal; overflow-wrap: anywhere; hyphens: auto;
    border-radius: 14px; border: 2px solid var(--c13-line); background: linear-gradient(180deg, #fff, #f5f0ff); color: var(--c13-ink); box-shadow: 0 3px 0 #ded6f6;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .12s ease; }
.c13-overlay .c13-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #ded6f6; }
.c13-overlay .c13-opt.is-correct { background: linear-gradient(180deg, #d9f8e8, #aeeccb); border-color: #45c996; box-shadow: 0 3px 0 #86d9b2; color: #12603f; }
.c13-overlay .c13-opt.is-wrong { background: linear-gradient(180deg, #ffe3dd, #ffc2b8); border-color: #ff7f6e; box-shadow: 0 3px 0 #f0a094; color: #8a2a1c; }
@media (min-width: 700px) { .c13-overlay .c13-opt { font-size: 16px; min-height: 58px; padding: 10px 8px; } .c13-overlay .c13-svg { max-width: 520px; } }
@media (max-width: 360px) { .c13-overlay .quiz-number-options { gap: 4px; } .c13-overlay .c13-opt { font-size: 10.5px; padding: 6px 2px; } }
@media (prefers-reduced-motion: reduce) { .c13-overlay .c13-opt { transition: none; } }

/* ---- triangles ---- */
.c13-overlay .c13-hi { fill: none; stroke: #ff7f6e; stroke-width: 6; stroke-linecap: round; }
.c13-overlay .c13-tick { fill: none; stroke: #3b2f5e; stroke-width: 2.6; stroke-linecap: round; }
.c13-overlay .c13-vx { font-size: 14px; fill: #7b5bd6; }
.c13-overlay .c13-circ { fill: none; stroke: #9674ee; stroke-width: 2.2; stroke-dasharray: 6 5; opacity: .75; }
.c13-overlay .c13-circ2 { stroke: #ff7f6e; }
.c13-overlay .c13-fold { stroke: #45c996; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }