/* Original CSS geometry. Effects are clipped to the stage and cannot receive clicks. */
#relay[hidden], #srExplanation[hidden], #tmModes[hidden], #tmClassic[hidden], #tmClassicStats[hidden] { display: none !important; }
.sr-stage { position: relative; overflow: hidden; }
.sr-primary { background: #6d28d9; color: white; min-height: 44px; }
.sr-primary:hover, .sr-primary:focus-visible { background: #5520aa; color: white; }
.sr-stage button:focus-visible, #tmModes button:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
#tmModes [aria-pressed=true] { background: #6d28d9; border-color: #6d28d9; color: white; }
.sr-chains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sr-chain { padding: .6rem; border: 1px solid #c4b5fd; border-radius: .7rem; font-size: .8rem; }
.sr-chain strong { display: block; margin-bottom: .4rem; }
.sr-links { display: flex; flex-wrap: wrap; gap: .25rem; }
.sr-link { border-radius: .35rem; padding: .2rem .3rem; background: #f1f5f9; color: #475569; }
.sr-link.sr-earned { color: #14532d; background: #dcfce7; }
.sr-link.sr-review { color: #7c2d12; background: #ffedd5; }
.sr-link.sr-supported { color: #075985; background: #e0f2fe; }
.sr-link.sr-active { outline: 2px solid #7c3aed; }
.sr-cue { font-size: 1.3rem; }
.sr-options { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-option, .sr-listen { min-height: 48px; overflow-wrap: anywhere; }
.sr-option { border: 1px solid #c4b5fd; background: #f5f3ff; color: #3b0764; border-radius: .6rem; padding: .75rem; width: 100%; }
.sr-option:disabled { opacity: .65; }
.sr-option.sr-right { background: #dcfce7; border: 2px solid #15803d; color: #14532d; opacity: 1; }
.sr-option.sr-wrong { background: #fee2e2; border: 2px solid #b91c1c; color: #7f1d1d; opacity: 1; }
.sr-character { font-size: 1.8rem; }
.sr-clip { display: grid; gap: .4rem; }
.sr-feedback { padding: .8rem; border-radius: .5rem; background: #f1f5f9; }
.sr-recap-word { border-top: 1px solid #cbd5e1; padding: 1rem 0; }
.sr-recap-word a { overflow-wrap: anywhere; }
.sr-dot, .sr-confetti { position: absolute; pointer-events: none; z-index: 5; width: 7px; height: 7px; border-radius: 50%; background: var(--sr-color); animation: sr-burst .65s ease-out forwards; }
.sr-confetti { top: -10px; border-radius: 1px; animation: sr-fall 1.1s ease-in forwards; }
@keyframes sr-burst { to { transform: translate(var(--sr-x), var(--sr-y)); opacity: 0; } }
@keyframes sr-fall { to { transform: translateY(600px) rotate(240deg); opacity: 0; } }
[data-bs-theme=dark] .sr-option { background: #302044; color: #ede9fe; }
[data-bs-theme=dark] .sr-feedback { background: #273244; }
[data-bs-theme=dark] .sr-link { background: #273244; color: #e2e8f0; }
[data-bs-theme=dark] .sr-link.sr-earned, [data-bs-theme=dark] .sr-option.sr-right { background: #163b2b; color: #bbf7d0; }
[data-bs-theme=dark] .sr-link.sr-review, [data-bs-theme=dark] .sr-option.sr-wrong { background: #4a2521; color: #fed7aa; }
[data-bs-theme=dark] .sr-link.sr-supported { background: #123849; color: #bae6fd; }
@media (min-width: 1200px) { .sr-chains { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sr-stage *, #tmModes * { animation: none !important; transition: none !important; } }