:root{font-family:system-ui,sans-serif;color:#243b32;background:#f5efe6}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}a{color:inherit}h1{font-size:clamp(2rem,6vw,3.5rem);margin:8px 0}h2{margin:0}.tag{color:#b85f43;font-weight:700}button{font:inherit;border:2px solid #cbd4ca;border-radius:18px;background:#fffdf8;color:#243b32;padding:12px 18px;cursor:pointer;min-height:48px}button:hover{border-color:#b85f43}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #b85f43;outline-offset:3px}button[aria-pressed=true]{background:#f7dbad;border-color:#b85f43}.toolbar,.modes,.actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.stage{background:#fffdf8;border:1px solid #ddd9cc;border-radius:30px;padding:24px;margin:20px 0;box-shadow:0 12px 40px #243b3208}.buddy{font-size:50px;display:inline-block}.celebrate{animation:dance .3s alternate 3}@keyframes dance{to{transform:rotate(15deg) scale(1.2)}}#status{background:#edf0e7;border-radius:16px;padding:16px;min-height:64px;line-height:1.5}#slots{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.slot{flex:1;min-width:100px;position:relative;min-height:140px}.slot b{display:block;color:#8a9c8c}.slot span{font-size:36px}.slot small{display:block}#cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}svg{width:100%;max-height:190px;fill:currentColor}#cards button{padding:8px}small{font-size:13px}.primary{background:#243b32;color:#fff}.lit{color:#b85f43;fill:#d8a75a;filter:drop-shadow(0 0 5px #d8a75a)}#field{height:400px;position:relative;overflow:hidden;border-radius:22px;background:#edf0e7}.fall{position:absolute;top:-100px;width:110px;padding:4px;animation:fall 10s linear forwards}@keyframes fall{to{top:var(--fall-end,410px)}}.still #field{display:flex;flex-wrap:wrap;align-content:start;gap:10px;padding:14px}.still .fall{position:static;animation:none}#slots:has([data-melody]){display:block}.noteChoices{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.noteChoices button{flex:1;padding:10px}.foot{font-size:14px;line-height:1.7;color:#53685b}#intervals{font-weight:600}[hidden]{display:none!important}@media(max-width:600px){main{padding:14px}.stage{padding:16px}#cards{grid-template-columns:repeat(2,1fr)}.slot{min-width:110px}header{align-items:start}.toolbar button{padding:10px}.noteChoices button{flex:0 0 21%}}

#instruction{font-size:1.35rem;font-weight:700}#help{background:#f7dbad;margin-bottom:12px}#slots .slot{min-height:165px}#slots .slot small{font-size:16px}#stillLabel{line-height:1.6}#slots:has([data-melody]) svg{max-height:300px}.slot{border-style:dashed}.slot:has(svg){border-style:solid}

.guide-glow{outline:4px solid #d8a75a!important;outline-offset:5px;box-shadow:0 0 0 9px #d8a75a33}.success{background:#dfead4!important;border:3px solid #466b50;font-size:1.3rem;font-weight:800;padding:22px!important}

#catchProgress{font-size:1.6rem;font-weight:800;color:#B85F43;letter-spacing:3px}

#slots:has([data-melody]) svg{max-height:none;height:auto;display:block}.music-friend{display:none;fill:#d8a75a;font-size:30px}.lit .music-friend{display:block}#missionText{background:#f7dbad;padding:14px;border-radius:14px;font-weight:650}.smallHint{font-size:16px}.noteChoices{position:sticky;bottom:8px;background:#fffdf8;border-radius:16px;padding:8px;box-shadow:0 4px 20px #243b3215}

.tag{color:#91492f}.slot b{color:#46604c}.correct-box{border:3px solid #466b50;background:#edf4e7}.try-box{border:3px dashed #91492f}.check-mark{font-size:16px!important;font-weight:700}.playDock{position:sticky;bottom:0;z-index:5;background:#fffdf8;padding:12px;border:1px solid #cbd4ca;border-radius:18px}.noteChoices{position:static}#noteTools{padding:12px;background:#edf0e7;border-radius:16px}#visualTarget{background:#f7dbad;border-radius:18px;padding:12px;margin:15px 0}.targetRow{display:flex;gap:12px}.targetRow>div{width:140px}.targetRow .lit{fill:#91492f;filter:drop-shadow(0 0 6px #d8a75a)}@media(prefers-reduced-motion:reduce){.celebrate{animation:none}}

body[data-game="echo"]:has(#field:not([hidden])) .playDock{position:static}body.catch-playing main>header,body.catch-playing main>.tag,body.catch-playing main>h1,body.catch-playing main>p:not(.foot),body.catch-playing .modes,body.catch-playing #buddy,body.catch-playing #round,body.catch-playing #instruction,body.catch-playing #help,body.catch-playing #stillLabel,body.catch-playing #pulseLabel,body.catch-playing #catchStart,body.catch-playing .foot{display:none!important}body.catch-playing main{padding:8px}body.catch-playing .stage{margin:0;padding:12px}body.catch-playing #status{margin:8px 0;padding:8px;min-height:0;font-size:16px}body.catch-playing #field{height:clamp(240px,48svh,400px)}body.catch-playing #catchProgress{margin:8px 0;font-size:1.25rem}body.catch-playing #visualTarget{padding:6px;margin:6px 0}body.catch-playing #visualTarget svg{max-height:55px}body.catch-playing .actions{margin:8px 0}body.catch-playing .playDock{padding:6px;margin:8px 0}.stage{scroll-margin-top:8px}

.stylePicker{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px}.stylePicker select{font:inherit;padding:8px;border-radius:12px;border:1px solid #8a9c8c;background:#fffdf8;color:#243b32}.catch-playing .stylePicker{display:none}#catchFinish{padding:16px;background:#f7dbad;border-radius:22px;text-align:center}body:has(#catchFinish:not([hidden])) .finishActions{display:flex!important;gap:8px;flex-wrap:wrap}body:has(#catchFinish:not([hidden])) #pauseCatch,body:has(#catchFinish:not([hidden])) #next,body:has(#catchFinish:not([hidden])) #field,body:has(#catchFinish:not([hidden])) #passCards{display:none!important}#catchTools{margin:6px 0;gap:6px}#catchTools button{padding:8px;font-size:14px}.buddy{position:relative;width:68px;height:68px;border-radius:45% 45% 40% 40%;background:#d8a75a;color:#243b32;box-shadow:0 5px 0 #b85f4333;text-align:center;vertical-align:middle}.buddy-eyes{display:block;font-size:28px;line-height:40px;letter-spacing:5px}.buddy-mouth{display:block;font-size:26px;line-height:10px}.buddy-note{position:absolute;right:-10px;top:-15px;font-size:30px}.catch-playing #buddy{display:none!important}body[data-style="calm"] .buddy{background:#edf0e7}
body[data-style="playground"]{background:radial-gradient(circle at 8% 12%,#e8edcc 0,transparent 30%),radial-gradient(circle at 93% 28%,#f2d9c1 0,transparent 35%),#f5efe6}body[data-style="playground"] .stage{border:3px solid #dfc59e;box-shadow:0 8px 0 #d8a75a22}body[data-style="playground"] h1{color:#91492f}body[data-style="playground"] .primary{background:#8e3b46;border-color:#8e3b46;box-shadow:0 4px 0 #5f2732}body[data-style="playground"] #cards button:nth-child(4n+1){background:#f8e4b8}body[data-style="playground"] #cards button:nth-child(4n+2){background:#e4edcf}body[data-style="playground"] #cards button:nth-child(4n+3){background:#f3d7c4}body[data-style="playground"] #cards button:nth-child(4n+4){background:#f1dce3}body[data-style="playground"] .slot{border-color:#c19957;background:#fffaf0}body[data-style="playground"] #field{background:linear-gradient(#f5e8cc,#e8edcf);border:2px solid #d8a75a}body[data-style="playground"] .fall{border:2px solid #b98a43;box-shadow:0 4px 0 #d8a75a55}body[data-style="playground"] .lit{filter:drop-shadow(0 0 6px #d8a75a);fill:#b85f43}body[data-style="playground"] .noteChoices button{background:#f8e4b8}body[data-style="playground"]:has(.lit) .buddy{animation:dance .4s alternate infinite}@media(prefers-reduced-motion:reduce){body[data-style="playground"]:has(.lit) .buddy{animation:none}}
body.catch-playing #field{height:clamp(210px,38svh,350px)}body.catch-playing #catchProgress{font-size:1rem;letter-spacing:1px}body.catch-playing #listen,body.catch-playing #pauseCatch,body.catch-playing #next{padding:8px 12px}body.catch-playing .finishActions button{padding:8px;font-size:14px}

#slots:not(:has([data-melody])){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.slot{min-width:0!important;width:100%;padding:10px}.slot svg{max-height:120px}.buddy{width:110px;height:110px;background:transparent!important;box-shadow:none;display:inline-block}.buddy img{width:100%;height:100%;object-fit:contain}#instruction{margin:8px 0}#slots{margin:14px 0}.stage{padding:18px}.tag{margin:10px 0}#status{min-height:44px;padding:10px}h1{font-size:clamp(2rem,5vw,3rem)}body[data-game="create"] .playDock{position:sticky;bottom:0}.smallHint{margin:8px 0}#intervals{display:none}#noteTools{padding:8px}#noteTools small{display:none}#noteTools .actions{margin:5px 0}.noteChoices{margin:6px 0;padding:4px}.music-friend{font-size:22px}.stage>.buddy{float:right;margin-left:12px}body[data-style="calm"] .buddy img{filter:saturate(.6)}@media(max-width:600px){#slots:not(:has([data-melody])){grid-template-columns:repeat(2,minmax(0,1fr))}.slot{min-height:140px!important}#cards{grid-template-columns:repeat(2,minmax(0,1fr))}.buddy{width:80px;height:80px}.stage{padding:12px}.noteChoices button{flex:0 0 calc(25% - 6px);min-width:0}}

.beatDots{display:flex;gap:8px;margin:10px 0}.beatDots span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e3e8d8;color:#243b32;font-size:14px}.beatDots .beat-on{background:#d8a75a;outline:2px solid #91492f}.catch-playing .beatDots{display:none}.lit text{font-weight:800}body[data-game="create"] #help{margin-bottom:4px}body[data-game="create"] #round{margin-top:4px}body[data-game="create"] .stage{overflow:visible}

#slots:not(:has([data-melody])):has(>.slot:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}