/* Sound Path (My Voice games and the Bridge tab). Calm by default: slow motion,
   no flashing, everything stops under "calm" or reduced motion. Builds on tokens.css. */
dialog.sp { display: none; }
dialog.sp[open] { display: grid; gap: 12px; justify-items: center; }
.sp-stage { min-height: 220px; display: grid; place-items: center; gap: 12px; width: 100%; }
.sp-stage.pop { animation: sp-pop .5s ease; }
@keyframes sp-pop { 50% { transform: scale(1.04); } }
.sp-big { font: 800 var(--fs-xl, 2rem) var(--font); margin: 0; text-align: center; }
.sp-soft { color: var(--ink-soft); margin: 0; text-align: center; }
.sp-stickers { font-size: 2rem; margin: 0; }
.sp-word { font-size: 64px; line-height: 1; }
.sp-always { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sp-abtn { min-width: 120px; min-height: 64px; border-radius: 18px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 700 var(--fs-md, 1.25rem) var(--font); cursor: pointer; }
.sp-judge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px; border: 1px dashed var(--ink-soft); border-radius: 14px; }
.sp-jl { font-size: var(--fs-xs, .875rem); color: var(--ink-soft); width: 100%; text-align: center; }

/* Sing and Tap: two big drums, high (left) and low (right) */
.sp-drums { display: flex; gap: 28px; justify-content: center; }
.sp-drum { width: clamp(120px, 26vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--wc-action, #2f6f6a); background: var(--wc-action-tint, #e3f0ee); color: var(--ink); font: 800 var(--fs-lg, 1.5rem) var(--font); cursor: pointer; }
.sp-drum.lo { border-color: var(--lumen, #c49a5f); }
.sp-drum.on { animation: sp-hit .6s ease; }
@keyframes sp-hit { 30% { transform: scale(1.08); box-shadow: 0 0 0 10px rgb(0 0 0 / .06); } }

/* Word Train: one carriage per part of the word */
.sp-train { display: flex; gap: 8px; align-items: flex-end; font-size: 48px; transition: transform 2.4s ease-in; }
.sp-train.go { transform: translateX(60vw); }
.sp-car { display: grid; place-items: center; min-width: 96px; height: 72px; padding: 0 10px; border-radius: 12px; background: var(--wc-action-tint, #e3f0ee); border: 3px solid var(--wc-action, #2f6f6a); cursor: pointer; }
.sp-car b { font: 800 var(--fs-md, 1.25rem) var(--font); }
.sp-car.off { opacity: .35; border-style: dashed; }
.sp-car.on { animation: sp-hit .6s ease; }

/* Sound World: voice moves the train, pitch lifts the balloon, long sounds fill the jar */
.sp-world { display: grid; grid-template-columns: 1fr 70px; grid-template-rows: 160px 60px; gap: 10px; width: min(560px, 90vw); }
.sp-sky { position: relative; border-radius: 16px; background: var(--wc-action-tint, #e3f0ee); }
.sp-balloon { position: absolute; left: 45%; bottom: 0; font-size: 44px; transition: bottom .3s ease; }
.sp-track { position: relative; grid-column: 1; border-bottom: 6px solid var(--ink-soft); }
.sp-wtrain { position: absolute; left: 0; bottom: 4px; font-size: 44px; transition: left .2s linear; }
.sp-jar { grid-column: 2; grid-row: 1 / 3; position: relative; border: 4px solid var(--ink-soft); border-top: 0; border-radius: 0 0 16px 16px; overflow: hidden; }
.sp-jar i { position: absolute; inset: auto 0 0 0; height: 0; background: var(--wc-action, #2f6f6a); transition: height .3s ease; }

/* "Say it with me" chip over the board */
.sp-chip { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 25; padding: 10px 18px; border-radius: 999px; background: var(--paper, #fff); color: var(--ink); border: 2px solid var(--wc-action, #2f6f6a); font: 600 var(--fs-md, 1.25rem) var(--font); box-shadow: 0 4px 16px rgb(0 0 0 / .12); animation: sp-breath 3s ease-in-out infinite; }
.sp-chip.heard { border-color: var(--lumen, #c49a5f); }
@keyframes sp-breath { 50% { box-shadow: 0 4px 24px rgb(0 0 0 / .2); } }

dialog.sp.is-calm *, dialog.sp.is-calm { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { dialog.sp *, .sp-chip { animation: none !important; transition: none !important; } }

/* Bridge tab */
.sp-tlist { list-style: none; margin: 0 0 8px; padding: 0; }
.sp-tlist li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sp-tlist li > span:first-child { font-size: 1.5rem; }
.sp-tlist .link-btn { margin-left: auto; }
.sp-phs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-ph { min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 700 var(--fs-sm, 1rem) var(--font); cursor: pointer; }
.sp-key .sp-ph { min-width: 22px; min-height: 22px; display: inline-grid; place-items: center; cursor: default; margin: 0 2px 0 8px; }
.sp-ph.lv-once { border-color: var(--wc-action, #2f6f6a); }
.sp-ph.lv-often { background: var(--wc-action-tint, #e3f0ee); border-color: var(--wc-action, #2f6f6a); }
.sp-ph.lv-word { background: var(--wc-action, #2f6f6a); border-color: var(--wc-action, #2f6f6a); color: #fff; }
.sp-bigword { font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 800; margin: 8px 0 0; text-align: center; }
.sp-bigword.on { color: var(--ember-deep); }

/* Increment B: Watch my mouth, Mouth Mirror, Sound and treat */
.sp-clip { display: block; width: min(360px, 80vw); aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: var(--dusk); margin: 0 auto; }
.sp-mirror { position: relative; display: grid; place-items: center; }
.sp-face { width: min(220px, 55vw); height: auto; }
.sp-mouth { transition: rx .08s linear, ry .08s linear; }
.sp-cam { position: absolute; right: -8px; bottom: -8px; width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid var(--paper); transform: scaleX(-1); }
.sp-treat { text-align: center; }
.sp-fav { display: inline-block; font-size: clamp(5rem, 22vw, 8rem); line-height: 1; }
.sp-fav.on { animation: sp-bounce .6s ease; }
@keyframes sp-bounce { 40% { transform: translateY(-14px) scale(1.06); } }
.sp-rec { flex-basis: 100%; }
.sp-rec video { width: 200px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #000; display: block; }
#spClips li { flex-wrap: wrap; }
#spFavs .is-on { outline: 3px solid var(--lumen); }