/* why：学生条固定在屏幕右上；只给观察内容屏留出条高与间距，不挤动其他专题。 */
#ringGame.active { padding-top: 64px; }
/* why：关闭的全局草稿条会盖住关底按钮；画板已打开时保留关闭入口。 */
#ringGame.active ~ #scratchpadBar #spToggle:not(.sp-on) { display: none !important; }
.ring-panel { max-width: 700px; margin: 0 auto; padding: 20px 16px 42px; color: #25313b; }
.ring-panel h2 { margin: 0 0 8px; line-height: 1.35; }
.ring-intro { font-size: 18px; line-height: 1.5; margin: 0 0 12px; }
#ringTrackSvg { display: block; width: min(100%, 410px); height: auto; margin: 0 auto; overflow: visible; touch-action: none; }
.ring-runner-handle { fill: transparent; stroke: none; pointer-events: all; touch-action: none; cursor: grab; }
.ring-runner-handle:focus-visible { fill: none; stroke: var(--warning); stroke-width: 3; outline: none; }
.ring-base { fill: #fffaf0; stroke: #79695d; stroke-width: 5; }
.ring-cell { fill: #79695d; }
.ring-cell-label, .ring-runner-label, .ring-hit-label { text-anchor: middle; dominant-baseline: middle; font-weight: 700; }
.ring-cell-label { font-size: 16px; fill: #25313b; }
.ring-trail-a, .ring-trail-b, .ring-first-arc { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring-trail-a { stroke: #b24b28; stroke-width: 8; }
.ring-trail-b { stroke: #176b78; stroke-width: 8; }
.ring-first-arc { stroke: #7462a0; stroke-width: 3; stroke-dasharray: 5 5; }
.ring-runner-a { fill: #b24b28; stroke: #fff; stroke-width: 2; }
.ring-runner-b { fill: #176b78; stroke: #fff; stroke-width: 2; }
.ring-runner-label { fill: #fff; font-size: 15px; }
.ring-hit { fill: #f3bf48; stroke: #5c4023; stroke-width: 2; }
.ring-hit-label { fill: #5c4023; font-size: 15px; }
.ring-readout { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0; font-size: 17px; }
.ring-result { min-height: 76px; padding: 14px; margin: 10px 0 16px; border-radius: 14px; background: #e6f4ef; font-size: 18px; line-height: 1.55; }
.ring-comparison { display: grid; gap: 10px; margin-bottom: 16px; }
.ring-evidence { border: 2px solid #88a59a; border-radius: 14px; padding: 12px; background: #fff; }
.ring-evidence p { margin: 6px 0 0; line-height: 1.5; }
.ring-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 2px solid #d9cfc0; border-radius: 16px; padding: 14px; background: #fff; }
.ring-controls h3 { grid-column: 1 / -1; margin: 0; }
.ring-controls label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }
.ring-controls input, .ring-controls select { box-sizing: border-box; width: 100%; min-height: 60px; padding: 8px; border: 2px solid #79695d; border-radius: 12px; background: #fff; color: #25313b; font-size: 18px; }
.ring-error { min-height: 24px; color: #a12828; font-weight: 700; line-height: 1.4; }
.ring-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ring-actions button { min-width: 60px; min-height: 60px; padding: 9px 14px; border: 2px solid #465c53; border-radius: 12px; background: #e6f4ef; color: #25313b; font-size: 17px; font-weight: 700; }
.ring-actions button:disabled { opacity: .55; }
.ring-actions button[hidden] { display: none; }
.ring-actions button:focus-visible, .ring-controls :focus-visible { outline: 3px solid #a12828; outline-offset: 3px; }
@media (max-width: 375px) { .ring-controls { grid-template-columns: 1fr; } }

/* 正式原题：题面始终在上方，静态图可独立收起。 */
.ring-solve { display: grid; gap: 14px; font-size: 18px; line-height: 1.55; }
.ring-solve h2, .ring-solve h3, .ring-solve p { margin-top: 0; }
.ring-solve h3 { font-size: 21px; margin-bottom: 8px; }
.ring-question-id { width: fit-content; padding: 5px 12px; border-radius: 999px; background: #e6f4ef; font-weight: 800; }
.ring-question, .ring-diagram-wrap, .ring-expression, .ring-answer,
#ringPrediction { padding: 16px; border: 2px solid #d9cfc0; border-radius: 16px; background: #fff; }
.ring-question p { line-height: 1.65; }
.ring-step { padding: 9px 12px; border-left: 5px solid #7462a0; background: #f4f0fa; font-weight: 700; }
.ring-diagram-wrap { display: grid; gap: 12px; }
.ring-diagram-wrap[hidden] { display: none; }
.ring-diagram-wrap svg { width: min(100%, 350px); height: auto; margin: auto; display: block; }
.ring-diagram-label { text-anchor: middle; font-size: 16px; font-weight: 700; fill: #25313b; }
.ring-selected-arc { fill: none; stroke: #7462a0; stroke-width: 10; stroke-linecap: round; }
.ring-covered-arc, .ring-uncovered-arc { fill: none; stroke-width: 10; }
.ring-covered-arc { stroke: #b24b28; }
.ring-uncovered-arc { stroke: #176b78; stroke-dasharray: 7 6; }
.ring-bar-label { fill: #25313b; font-size: 15px; font-weight: 700; }
.ring-diff-reference { fill: #f5ecce; stroke: #79695d; stroke-width: 2; }
.ring-diff-covered { fill: #7462a0; }
.ring-diff-gap { fill: #fff; stroke: #a12828; stroke-width: 2; stroke-dasharray: 6 4; }
.ring-fast-distance { fill: #b24b28; }
.ring-slow-distance { fill: #176b78; }
.ring-timeline-base { stroke: #d9cfc0; stroke-width: 5; }
.ring-timeline-first-segment { stroke: #b24b28; stroke-width: 7; }
.ring-timeline-segment { stroke: #7462a0; stroke-width: 7; }
.ring-timeline-origin { fill: #25313b; }
.ring-timeline-point { fill: #f3bf48; stroke: #5c4023; stroke-width: 2; }
.ring-timeline-label { fill: #25313b; font-size: 14px; font-weight: 700; text-anchor: middle; }
.ring-timeline-label-first { text-anchor: start; }
.ring-timeline-label-last { text-anchor: end; }
.ring-choice-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ring-choice-group h3, .ring-choice-group p { flex-basis: 100%; margin: 0; }
.ring-evidence-text { padding: 10px 12px; border-radius: 12px; background: #e6f4ef; margin: 0; }
.ring-solve label { display: block; font-weight: 700; margin: 0 0 6px; }
.ring-solve input { box-sizing: border-box; width: 100%; min-height: 60px; padding: 10px 12px; border: 2px solid #79695d; border-radius: 12px; font-size: 18px; background: #fff; color: #25313b; }
.ring-expression, .ring-answer { display: grid; gap: 10px; }
.ring-solve button { box-sizing: border-box; min-width: 60px; min-height: 60px; padding: 9px 14px; border: 2px solid #465c53; border-radius: 12px; background: #e6f4ef; color: #25313b; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ring-solve button[aria-pressed="true"] { background: #d4caee; border-color: #59477d; }
.ring-solve button[hidden] { display: none; }
.ring-solve button:focus-visible, .ring-solve input:focus-visible { outline: 3px solid #a12828; outline-offset: 3px; }
.ring-idle-hint { color: #465c53; min-height: 1.5em; }
.ring-solve .ring-result { margin: 0; min-height: 44px; }
.ring-unselected-arc { fill: none; stroke: #9dabb0; stroke-width: 8; stroke-dasharray: 9 7; }
.ring-axis-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.ring-axis-scroll svg { min-width: 0; width: 100%; max-width: 100%; }
.ring-cutoff { stroke: #a12828; stroke-width: 3; stroke-dasharray: 5 4; }
.ring-cutoff-label { fill: #a12828; text-anchor: end; }
.ring-meeting-first, .ring-meeting-second { fill: none; stroke-linecap: round; }
.ring-meeting-first { stroke: #b24b28; stroke-width: 11; }
.ring-meeting-second { stroke: #7462a0; stroke-width: 6; stroke-dasharray: 11 6; }
.ring-part-bars { display: grid; gap: 9px; padding: 12px; border: 2px solid #b8a993; border-radius: 12px; background: #fffaf0; }
.ring-part-bars > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ring-part-bars > div span { flex-basis: 100%; font-weight: 700; }
.ring-part-bars b { display: inline-block; width: 45px; height: 25px; border-radius: 5px; background: #b24b28; }
.ring-part-bars > div + div b { background: #176b78; }
.ring-part-bars p { margin: 0; }
.ring-record-selects, .ring-speed-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.ring-record-selects label, .ring-speed-inputs label { align-self: end; }
.ring-record-selects select { box-sizing: border-box; width: 100%; min-height: 60px; padding: 9px; border: 2px solid #79695d; border-radius: 12px; background: #fff; color: #25313b; font-size: 18px; }
.ring-record-selects button, .ring-speed-inputs button { grid-column: 1 / -1; }
.ring-record-sum { fill: #b24b28; }
.ring-record-diff { fill: #176b78; }
.ring-boundary-timeline { padding: 12px; border: 2px solid #b8a993; border-radius: 12px; background: #fffaf0; }
.ring-boundary-timeline svg { display: block; width: min(100%, 340px); height: auto; margin: 0 auto; }
.ring-boundary-timeline p { margin: 0; }
.ring-record-selects select:focus-visible { outline: 3px solid #a12828; outline-offset: 3px; }
.ring-event-wrap { min-width: 0; }
.ring-event-band { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.ring-event-band li { display: grid; gap: 4px; padding: 12px; border: 2px solid #b8a993; border-radius: 12px; background: #fffaf0; }
.ring-event-band li[data-connected="true"] { border-color: #176b78; background: #e6f4ef; }
.ring-event-band li strong { color: #59477d; }
.ring-event-band li small { font-size: 16px; font-weight: 700; }
.ring-event-band li[data-motion="stop"] { border-style: dashed; }
#ringDistanceBars rect { fill: #7462a0; rx: 6px; }
#ringUnitChoice { box-sizing: border-box; min-height: 60px; width: 100%; padding: 9px;
  border: 2px solid #79695d; border-radius: 12px; background: #fff; color: #25313b; font-size: 18px; }
#ringUnitChoice:focus-visible { outline: 3px solid #a12828; outline-offset: 3px; }
#ringS9Diagram { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; }
@media (max-width: 375px) {
  .ring-record-selects, .ring-speed-inputs { grid-template-columns: 1fr; }
}