@font-face{font-family:Zisa;src:url('../../assets/fonts/Nunito-Variable.ttf') format('truetype');font-display:swap}
.child-along,.child-rhythm{font-family:Zisa,Arial,sans-serif;background:#fff9ed;color:#38314b}
.child-along .shell,.child-rhythm .shell{max-width:1120px}
.child-along h1,.child-rhythm h1{font-size:32px;color:#59438c}
.child-along button,.child-rhythm button{min-height:48px;border-radius:15px;font-size:17px}
.child-along .song-settings{border-radius:20px}.child-along .prepare>p{display:none}
.child-along .playboard{border-radius:24px;border:2px solid #ddd2ec}
.child-along .board-top{background:#eee7f9}.child-along .board-top p{font-size:17px}
.child-along #falling{height:auto;min-height:240px;display:flex;align-items:center;justify-content:center;gap:24px;background:#faf7ff;padding:18px}
.play-cue{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:290px;min-height:206px;border:3px solid #ded6ed;border-radius:26px;background:#f0edf5;color:#716880;font-weight:800;box-shadow:0 5px 0 #d9d1e5;transition:none}
.play-cue:disabled{opacity:1;cursor:default}.play-cue:disabled:hover{background:#f0edf5}
.play-cue.now,.play-cue.now:hover{background:var(--cue-color);border-color:var(--cue-color);color:var(--cue-ink);box-shadow:0 5px 0 #0002,0 0 0 5px #fff}
#cueAction{font-size:27px}#cueNote{font-size:64px;line-height:1.05}#cueName{font-size:19px}
.next-cue{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px;color:#8b8097}.next-cue>span:first-child{font-size:13px}.next-cue>span:last-child{font-size:20px;font-weight:800;padding:12px;border:2px dashed #d8cfdf;border-radius:16px}
.child-along #targets{padding:10px 8px 18px;gap:6px}.child-along .target{margin:0;min-height:72px;border-radius:16px;font-size:19px}.child-along .target small{display:none}.child-along .target.active{outline:5px solid #342843;outline-offset:2px;transform:translateY(-4px)}.child-along .target.tapped{filter:brightness(1.25);box-shadow:inset 0 0 0 4px #fff}
.child-along .along-controls{gap:10px}.child-along .along-controls button{padding:12px 18px;min-height:54px}.song-options,.rhythm-options{background:white;border:1px solid #e1d8eb;border-radius:15px;padding:12px 16px;margin:12px 0}.song-options summary,.rhythm-options summary{cursor:pointer;font-size:15px;font-weight:700;color:#6c5a7e;min-height:30px}.song-options .options{margin:12px 0 0;gap:18px}.song-options .options label{font-size:15px;min-height:40px}.child-along #status{font-size:16px}
.child-rhythm .rhythm-intro{font-size:19px;line-height:1.5;color:#70617e;margin:4px 0 18px}.child-rhythm .rhythm-tabs button{padding:12px 20px}.child-rhythm .stage{border-radius:24px;border:3px solid #dfd8eb;padding:20px 24px;background:#fff;transition:background .15s,border-color .15s}.child-rhythm .stage-head h2{font-size:20px}.child-rhythm .stage-head span{font-size:14px}
.child-rhythm #phase{font-size:clamp(25px,4vw,38px);margin:18px 0 10px;color:#4c4770;min-height:50px}.child-rhythm #actionCue{display:flex;align-items:center;justify-content:center;gap:16px;min-height:84px;color:#526a86;font-weight:800}.child-rhythm #clapIcon{font-size:54px;line-height:1}.child-rhythm #clapWord{font-size:30px;min-width:130px}.child-rhythm #actionCue.on #clapIcon{transform:scale(1.18)}
.child-rhythm #singleScore{margin:10px 0 0}.child-rhythm #singleScore svg{max-height:230px}.child-rhythm #pulse{display:flex;margin:10px 0 0;gap:18px}.child-rhythm #pulse span{width:40px;height:40px;font-size:20px}.child-rhythm #pulse span.active{background:#2e82b8}
.child-rhythm [data-phase=listen] .stage{background:#edf7ff;border-color:#5b9ccc}.child-rhythm [data-phase=listen] #phase{color:#246a9a}.child-rhythm [data-phase=answer] .stage,.child-rhythm [data-phase=perform] .stage{background:#edfaed;border-color:#65ae74}.child-rhythm [data-phase=answer] #phase,.child-rhythm [data-phase=perform] #phase,.child-rhythm [data-phase=answer] #actionCue{color:#27733a}.child-rhythm [data-phase=answer] #pulse .active{background:#338b49}
.child-rhythm .transport{padding:0}.child-rhythm #practice{background:#6047aa;font-size:22px;min-width:190px;min-height:60px}.child-rhythm .transport #stop{font-size:20px;min-height:60px}.child-rhythm #status{font-size:16px}.child-rhythm .playback{margin-top:12px}
.child-rhythm .presenting{background:#fff9ed}.child-rhythm .presenting #singleScore{margin-top:10px}.child-rhythm .presenting .rhythm-intro,.child-rhythm .presenting .rhythm-tabs,.child-rhythm .presenting>.settings,.child-rhythm .presenting .rhythm-options{display:none}
@media(max-width:650px){.child-along .shell,.child-rhythm .shell{padding:12px}.child-along h1,.child-rhythm h1{font-size:25px}.child-along .board-top{flex-wrap:wrap;gap:4px}.child-along .board-top p{font-size:15px}.child-along #falling{min-height:210px;padding:14px 10px;gap:12px}.play-cue{min-width:0;width:70%;min-height:180px;padding:10px}#cueAction{font-size:23px}#cueNote{font-size:54px}#cueName{font-size:16px}.next-cue{min-width:55px}.next-cue>span:last-child{padding:8px;font-size:17px}.child-along #targets{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px}.child-along .target{min-height:62px;font-size:17px}.child-along .along-controls button{font-size:15px;padding:10px}.child-along .prepare{padding:10px 0}.child-along #needed{flex-wrap:wrap}.child-along .needed{padding:6px}.child-along .live-tag{font-size:12px}.child-rhythm .stage{padding:12px}.child-rhythm #phase{font-size:25px;line-height:1.25}.child-rhythm #clapIcon{font-size:46px}.child-rhythm #clapWord{font-size:26px}.child-rhythm .rhythm-intro{font-size:17px}.child-rhythm .rhythm-tabs button{font-size:15px;padding:10px}.child-rhythm #pulse{gap:14px}.child-rhythm #levelHelp{font-size:13px}.child-rhythm .transport #practice{min-width:140px}.child-rhythm header .header-actions{font-size:12px}.child-rhythm #singleScore{overflow-x:auto}.child-rhythm #singleScore svg{min-width:480px}.child-rhythm .training #singleScore svg{min-width:0}}
@media(prefers-reduced-motion:reduce){.child-along *,.child-rhythm *{transition:none!important}.child-rhythm #actionCue.on #clapIcon{transform:none}}
.child-rhythm [data-phase=ready] .stage{background:#fff5d5;border-color:#e0b956}.child-rhythm [data-phase=ready] #phase,.child-rhythm [data-phase=ready] #actionCue{color:#80601a}.child-rhythm [data-phase=ready] #clapIcon{font-size:76px}.child-rhythm [data-phase=ready] #clapWord{font-size:24px}
.child-rhythm .transport{position:sticky;bottom:8px;z-index:5;align-items:center;background:#fffdf8f5;padding:10px;border:1px solid #e3d9c5;border-radius:18px;box-shadow:0 4px 16px #4a31551a}
.child-rhythm #pause{font-size:20px;min-height:60px;background:#fff2c5;border-color:#ddc36f}
.child-rhythm .presenting{height:100vh;overflow-y:auto}
.child-along #falling{display:block;height:210px;min-height:0;padding:0;position:relative;overflow:hidden;background:#fff}
.child-along .strike-line{top:62%;bottom:auto;height:6px;background:#66518c;box-shadow:0 0 0 3px #fff9;z-index:2;pointer-events:none}
.child-along .strike-line>span{position:absolute;right:8px;top:10px;background:#f1eafc;color:#5e4487;border-radius:9px;padding:5px 8px;font-size:11px;font-weight:900;letter-spacing:.5px}
.child-along #countdown{left:auto;right:12px;top:12px;transform:none;width:60px;height:60px;font-size:34px;z-index:3}
.child-along #boardMessage{top:auto;bottom:10px;left:10px;right:10px;font-size:16px;color:#665177}
.child-along .drop{z-index:3;cursor:default}.child-along #targets{grid-template-columns:repeat(8,minmax(0,1fr));gap:0;padding:8px 0 14px}.child-along .target{margin:0 4px}
@media(max-width:650px){.child-along #falling{height:190px}.child-along .target{margin:0 2px;font-size:12px;min-height:64px}.child-along .target.active{outline-width:3px;outline-offset:0}.child-along #boardMessage{font-size:13px}.child-along .strike-line>span{font-size:9px}.child-along #countdown{width:48px;height:48px;font-size:28px}}