/* Tone Switch Quest (tone-switch.js). Effects are clipped to the stage and unclickable. */
.ts-stage { position:relative; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:1rem; padding:1.25rem; background:var(--bs-body-bg); color:var(--bs-body-color); }
.ts-stage [hidden], #ttClassic[hidden], #tone-switch[hidden] { display:none !important; }
.ts-stage button { min-height:44px; }
.ts-toolbar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin:.8rem 0; }
.ts-run { font-weight:600; color:#c2410c; }
[data-bs-theme="dark"] .ts-run { color:#fdba74; }

.ts-board { list-style:none; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.35rem; padding:0; margin:0 0 1rem; }
.ts-chip { text-align:center; font-size:.8rem; line-height:1.15; padding:.4rem .2rem; border-radius:.6rem; border:2px solid var(--bs-border-color); background:var(--bs-tertiary-bg); transition:transform .2s, background-color .2s; }
.ts-chip-label { display:block; font-size:.68rem; color:var(--bs-secondary-color); }
.ts-chip-current { border-color:#6f42c1; box-shadow:0 0 0 3px rgba(111,66,193,.25); }
.ts-chip-cleared { border-color:#198754; background:#d1e7dd; color:#0f5132; animation:ts-chip-pop .45s ease-out; }
.ts-chip-missed { border-color:#d97706; background:#fff3cd; color:#664d03; }
[data-bs-theme="dark"] .ts-chip-cleared { background:#123f32; color:#b7f7da; border-color:#75d9ac; }
[data-bs-theme="dark"] .ts-chip-missed { background:#4a3407; color:#ffe4a3; border-color:#f0b54a; }
[data-bs-theme="dark"] .ts-chip-cleared .ts-chip-label, [data-bs-theme="dark"] .ts-chip-missed .ts-chip-label { color:inherit; }
.ts-chip-cleared .ts-chip-label, .ts-chip-missed .ts-chip-label { color:inherit; }

.ts-card { position:relative; border-radius:.9rem; padding:1rem; background:var(--bs-tertiary-bg); }
.ts-syllable { text-align:center; }
#tsSyllable { font-size:2rem; font-weight:700; letter-spacing:.04em; }
.ts-sounds { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ts-sound { border:2px solid #6f42c1; background:var(--bs-body-bg); color:var(--bs-body-color); border-radius:.9rem; padding:1rem .5rem; font-weight:600; font-size:1.05rem; }
.ts-sound.ts-heard { background:#efe7fb; }
.ts-sound.playing { box-shadow:0 0 0 4px rgba(111,66,193,.35); }
[data-bs-theme="dark"] .ts-sound { border-color:#b197fc; }
[data-bs-theme="dark"] .ts-sound.ts-heard { background:#2d2440; }
.ts-sound-pinyin { font-weight:700; color:#6f42c1; }
[data-bs-theme="dark"] .ts-sound-pinyin { color:#d0bfff; }

.ts-choices { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ts-choice { background:var(--bs-body-bg); color:var(--bs-body-color); border:2px solid var(--bs-border-color); padding:.9rem; border-radius:.75rem; font-weight:600; overflow-wrap:anywhere; }
.ts-choice:disabled:not(.ts-right):not(.ts-wrong) { opacity:.55; }

.ts-recall-row { margin-bottom:1rem; }
.ts-recall-label { font-weight:600; overflow-wrap:anywhere; }
.ts-tones { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.5rem; }
.ts-tone { display:flex; flex-direction:column; align-items:center; background:var(--bs-body-bg); color:var(--bs-body-color); border:2px solid var(--bs-border-color); border-radius:.75rem; padding:.45rem .2rem; }
.ts-tone small { font-size:.7rem; color:var(--bs-secondary-color); }
.ts-tone-1 { border-color:#0d6efd; } .ts-tone-2 { border-color:#198754; } .ts-tone-3 { border-color:#e0a800; } .ts-tone-4 { border-color:#dc3545; }

.ts-stage .ts-right { border-color:#198754 !important; background:#d1e7dd !important; color:#0f5132 !important; opacity:1; animation:ts-pop-btn .3s ease-out; }
.ts-stage .ts-wrong { border-color:#b02a37 !important; background:#f8d7da !important; color:#842029 !important; opacity:1; }
.ts-stage .ts-right small, .ts-stage .ts-wrong small { color:inherit; }
[data-bs-theme="dark"] .ts-stage .ts-right { background:#123f32 !important; color:#b7f7da !important; border-color:#75d9ac !important; }
[data-bs-theme="dark"] .ts-stage .ts-wrong { background:#542027 !important; color:#ffd0d5 !important; border-color:#ff8d9a !important; }

@media (hover:hover) {
    .ts-sound:enabled:hover, .ts-choice:enabled:hover, .ts-tone:enabled:hover { border-color:#6f42c1; background:#f6f1fd; }
    [data-bs-theme="dark"] .ts-sound:enabled:hover, [data-bs-theme="dark"] .ts-choice:enabled:hover, [data-bs-theme="dark"] .ts-tone:enabled:hover { background:#2d2440; border-color:#b197fc; }
}
.ts-sound:active, .ts-choice:enabled:active, .ts-tone:enabled:active { transform:scale(.97); }
.ts-stage :focus-visible { outline:3px solid #0ea5e9; outline-offset:3px; }

#tsReveal { margin-top:1rem; padding:1rem; background:var(--bs-body-bg); border-radius:.75rem; }
.ts-reveal-words { padding-left:1.1rem; }
.ts-reveal-words li { margin-bottom:.4rem; overflow-wrap:anywhere; }
.ts-reveal-hanzi { font-size:1.35rem; }
.ts-reveal-pinyin { font-weight:700; }
.ts-cleared { font-size:1.1rem; }
.ts-cleared-count { font-size:2.4rem; font-weight:800; color:#6f42c1; vertical-align:middle; }
[data-bs-theme="dark"] .ts-cleared-count { color:#d0bfff; }
.ts-trouble { padding:.9rem; border-radius:.75rem; background:var(--bs-tertiary-bg); }
.ts-words li { margin-bottom:.6rem; overflow-wrap:anywhere; }

.ts-shake { animation:ts-shake .4s ease-in-out; }
.ts-effect { position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:3; animation:ts-burst .75s ease-out forwards; }
.ts-float { position:absolute; transform:translate(-50%, 0); font-weight:800; color:#198754; pointer-events:none; z-index:3; animation:ts-float .9s ease-out forwards; }
.ts-pop { position:absolute; top:35%; left:50%; transform:translate(-50%, -50%); font-size:1.6rem; font-weight:800; color:#c2410c; text-shadow:0 2px 6px rgba(0,0,0,.15); pointer-events:none; z-index:4; animation:ts-pop 1.1s ease-out forwards; }
.ts-confetti { position:absolute; top:-12px; width:8px; height:12px; border-radius:2px; pointer-events:none; z-index:3; animation:ts-confetti 1.7s ease-in forwards; }
@keyframes ts-burst { to { transform:translate(var(--dx), var(--dy)) rotate(180deg); opacity:0; } }
@keyframes ts-float { to { transform:translate(-50%, -40px); opacity:0; } }
@keyframes ts-pop { 0% { transform:translate(-50%, -50%) scale(.6); opacity:0; } 25% { transform:translate(-50%, -50%) scale(1.15); opacity:1; } 100% { transform:translate(-50%, -80%) scale(1); opacity:0; } }
@keyframes ts-confetti { to { transform:translate(var(--drift), 520px) rotate(540deg); opacity:.2; } }
@keyframes ts-shake { 0%, 100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
@keyframes ts-chip-pop { 50% { transform:scale(1.12); } }
@keyframes ts-pop-btn { 50% { transform:scale(1.05); } }

@media (max-width:575.98px) {
    .ts-board { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .ts-stage { padding:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
    .ts-stage *, .ts-stage *::before, .ts-stage *::after { animation:none !important; transition:none !important; }
    .ts-effect, .ts-float, .ts-pop, .ts-confetti { display:none; }
}

/* Ranked run: band picker, plays left, heart loss, combo badge. */
.ts-bands { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
.ts-band { display:flex; flex-direction:column; gap:.2rem; text-align:left; background:var(--bs-body-bg); color:var(--bs-body-color); border:2px solid var(--bs-border-color); border-radius:.75rem; padding:.7rem .8rem; }
.ts-band small { color:var(--bs-secondary-color); font-size:.78rem; }
.ts-band.ts-band-on { border-color:#6f42c1; background:#efe7fb; box-shadow:0 0 0 3px rgba(111,66,193,.25); }
[data-bs-theme="dark"] .ts-band.ts-band-on { background:#2d2440; border-color:#b197fc; }
[data-bs-theme="dark"] .ts-band.ts-band-on small { color:#d0bfff; }
@media (hover:hover) { .ts-band:hover { border-color:#6f42c1; } [data-bs-theme="dark"] .ts-band:hover { border-color:#b197fc; } }
.ts-sound-left { font-weight:400; font-size:.85rem; color:var(--bs-secondary-color); }
.ts-sound:disabled { opacity:.6; }
.ts-heart-lost { display:inline-block; animation:ts-heart .5s ease-in-out; }
@keyframes ts-heart { 25% { transform:scale(1.3); color:#dc3545; } 60% { transform:scale(.85); } }
#tsCombo[data-level="5"] { box-shadow:0 0 0 3px rgba(250,204,21,.55); }
@media (prefers-reduced-motion:reduce) { .ts-heart-lost { animation:none !important; } }