:root{--bg:#151714;--panel:#20231f;--panel2:#292d27;--ink:#f5f3ea;--muted:#aeb5aa;--acid:#c7dc31;--line:#3a4038;--danger:#ff776f;--radius:22px;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#363d32 0,#1b1e1a 34%,var(--bg) 68%);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100dvh}.app-shell{min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.topbar{width:min(1100px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{color:var(--ink);text-decoration:none;font-weight:900;letter-spacing:.08em}.brand span{display:block;color:var(--acid);font-size:.62rem;letter-spacing:.18em}.top-actions{display:flex;gap:8px}.icon-button,.drum-tab,button,select,input{font:inherit}.icon-button{border:1px solid var(--line);background:#20231fcc;color:var(--ink);border-radius:12px;padding:10px 13px;text-decoration:none;cursor:pointer}.trainer{width:min(640px,100%);margin:22px auto 0}.intro{text-align:center}.eyebrow{color:var(--acid)!important;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800;margin:0 0 8px}.intro h1{font-size:clamp(1.8rem,7vw,3rem);line-height:1;margin:0}.intro p{color:var(--muted);line-height:1.5;margin:12px auto 18px;max-width:520px}.drum-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#0f110f;padding:5px;border-radius:16px;margin:0 auto 16px;max-width:360px}.drum-tab{border:0;background:transparent;color:var(--muted);border-radius:12px;padding:11px;cursor:pointer}.drum-tab.active{background:var(--panel2);color:var(--ink);box-shadow:0 5px 18px #0008}.stage{position:relative;aspect-ratio:1;max-height:min(58dvh,620px);margin:auto;display:grid;place-items:center;isolation:isolate;overflow:clip}.stage:before{content:"";position:absolute;width:72%;height:14%;bottom:3%;background:#000;filter:blur(30px);opacity:.65;border-radius:50%;z-index:-1}.stage img{width:100%;height:100%;object-fit:contain;user-select:none;transition:opacity .12s}.loading{position:absolute;color:var(--muted);z-index:3}.play-center{position:absolute;width:17%;aspect-ratio:1;border:0;border-radius:50%;background:linear-gradient(145deg,#d7ec42,#93a91a);box-shadow:0 8px 32px #a9c52b66;display:grid;place-items:center;cursor:pointer;transition:transform .15s}.play-center:hover{transform:scale(1.05)}.play-center span{width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:23px solid #1a1e16;margin-left:7px}.play-center.playing span{width:20px;height:24px;border:0;border-left:7px solid #1a1e16;border-right:7px solid #1a1e16;margin:0}.now-playing{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 12px}.now-playing>div{min-width:0}.label{display:block;color:var(--muted);font-size:.75rem}.now-playing strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{font-size:.75rem;background:#282d25;color:var(--acid);padding:7px 10px;border-radius:999px}.controls-card{background:#20231fe8;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 20px 60px #0006;backdrop-filter:blur(18px)}.field span,.speed-row label{display:block;color:var(--muted);font-size:.78rem;margin-bottom:7px}.field select{width:100%;color:var(--ink);background:#111310;border:1px solid var(--line);border-radius:13px;padding:13px}.speed-row{display:flex;justify-content:space-between;margin-top:18px}.speed-row output{color:var(--acid);font-weight:800}.range{width:100%;accent-color:var(--acid)}.transport{display:grid;grid-template-columns:auto auto 1fr;gap:8px;margin-top:16px}.transport button{border-radius:13px;padding:13px 15px;cursor:pointer}.secondary{background:var(--panel2);border:1px solid var(--line);color:var(--ink)}.primary{border:0;background:var(--acid);color:#151714;font-weight:900}.melody-info{color:var(--muted);text-align:center;line-height:1.45;font-size:.9rem}.hidden{display:none!important}
.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#20231f;border:1px solid var(--line);border-radius:15px;margin:0 auto 8px}.mode-tab{border:0;border-radius:11px;padding:10px 8px;background:transparent;color:var(--muted);cursor:pointer}.mode-tab.active{background:var(--acid);color:#151714;font-weight:850}.mode-hint{text-align:center;color:var(--muted);font-size:.82rem;min-height:2.4em}.hit-layer{position:absolute;inset:0;z-index:4;pointer-events:none;-webkit-tap-highlight-color:transparent}.hit-layer.enabled{pointer-events:auto}.hit-layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:pan-y}.tongue-zone,.drum-touch-surface{fill:rgba(255,255,255,.001);stroke:transparent;cursor:pointer;pointer-events:all}.record-badge{position:absolute;z-index:7;top:4%;left:50%;transform:translateX(-50%);background:#111d;border:1px solid #ffffff20;border-radius:999px;padding:7px 11px;font-size:.75rem;white-space:nowrap}.record-badge i{display:inline-block;width:8px;height:8px;background:#ff5148;border-radius:50%;margin-right:5px;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.mode-panel{min-height:110px}.panel-lead{color:var(--muted);text-align:center;line-height:1.5;margin:4px auto 16px}.panel-lead strong{color:var(--ink)}.transport.two{grid-template-columns:auto 1fr}.wide{display:block;width:100%;border-radius:13px;padding:14px;cursor:pointer}.recording-copy{color:#ff9a94}.review-summary{display:flex;justify-content:space-between;align-items:center;gap:12px}.review-summary span{color:var(--muted);font-size:.8rem}.review-actions{grid-template-columns:1fr 1fr 1fr}.my-melodies{margin:26px 0 70px}.section-heading{display:flex;justify-content:space-between;align-items:end}.section-heading h2{margin:3px 0 0}.count-pill{background:var(--acid);color:#151714;font-weight:900;border-radius:999px;padding:6px 10px}.saved-list{display:grid;gap:9px;margin-top:13px}.saved-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:13px 14px}.saved-item strong{display:block}.saved-meta{color:var(--muted);font-size:.75rem;margin-top:4px}.saved-actions{display:flex;gap:6px}.saved-actions button{border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:9px;padding:8px 10px;cursor:pointer}.saved-actions .delete-saved{color:var(--danger)}
.mode-hint:empty{display:none}.game-settings{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:6px;margin:4px 0 6px}.game-settings label{min-width:0}.game-settings span{display:block;color:var(--muted);font-size:.64rem;margin:0 0 3px 7px}.game-settings select{width:100%;min-width:0;background:#171a16;color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:9px 7px}.score-ring{position:absolute;inset:1.2%;z-index:1;border-radius:50%;background:conic-gradient(from var(--ring-start,0deg),var(--ring-colors,#394038 0 360deg));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));pointer-events:none}.turn-cue{position:absolute;z-index:8;background:#111e;border:1px solid var(--acid);color:var(--ink);border-radius:999px;padding:7px 11px;font-size:.72rem;white-space:nowrap}.turn-cue.player-1{bottom:3%;left:50%;transform:translateX(-50%)}.turn-cue.player-2{top:3%;left:50%;transform:translateX(-50%) rotate(180deg)}.turn-cue.player-3{left:1%;top:50%;transform:translateY(-50%) rotate(90deg)}.turn-cue.player-4{right:1%;top:50%;transform:translateY(-50%) rotate(-90deg)}
.mallet-layer,.mallet-pair,.mallet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mallet-layer{z-index:6}.mallet-pair{display:none;transform-origin:50% 50%}.mallet-pair.active{display:block}.mallet{object-fit:contain;opacity:0;transform-origin:50.62% 10.8%;filter:drop-shadow(0 3px 3px #0008)}.mallet.active{opacity:1}
.record-chord-head{z-index:2}
.brand{display:block}.brand-logo{display:block;width:min(210px,38vw);height:auto}.brand span{margin-top:3px;text-align:center;font-size:.57rem}
@media(max-width:520px){.app-shell{padding-left:12px;padding-right:12px}.topbar{align-items:flex-start}.brand{font-size:.9rem}.brand-logo{width:min(170px,42vw)}.icon-button{padding:8px 10px;font-size:.82rem}.trainer{margin-top:12px}.intro p{font-size:.88rem;margin-bottom:10px}.stage{max-height:none}.controls-card{padding:14px}.transport{grid-template-columns:1fr 1fr}.transport .primary{grid-column:1/-1}.transport.two{grid-template-columns:1fr 1.6fr}.transport.two .primary,.review-actions .primary{grid-column:auto}.review-actions{grid-template-columns:1fr 1fr}.review-actions .primary{grid-column:1/-1}.now-playing{margin-top:0}.saved-item{grid-template-columns:1fr}.saved-actions button{flex:1}}
@media(display-mode:standalone){.app-shell{padding-top:max(18px,env(safe-area-inset-top))}.brand span{color:#d7ed36}}
@media(max-width:520px){.game-settings{gap:4px;grid-template-columns:repeat(3,1fr)}.game-settings span{font-size:.56rem}.game-settings select{font-size:.66rem;padding:8px 3px}.trainer{width:100%}.stage{width:calc(100% + 12px);margin-left:-6px}}
.play-center{z-index:5;background:transparent;box-shadow:none}.play-center:hover{transform:none}.play-center span{display:none}
.record-step{margin-top:16px}.library-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}.library-filter{border:1px solid var(--line);border-radius:11px;padding:9px 5px;background:var(--panel2);color:var(--muted);cursor:pointer}.library-filter.active{background:var(--acid);border-color:var(--acid);color:#151714;font-weight:850}.library-list{display:grid;gap:6px;max-height:48dvh;overflow:auto;padding-bottom:4px}.library-item{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:4px;border-bottom:1px solid var(--line);padding:6px 0}.library-item.has-delete{grid-template-columns:42px minmax(0,1fr) 42px 42px}.library-item button,.library-player button{border:0;background:transparent;color:var(--ink);cursor:pointer}.library-item-play{font-size:1.05rem}.library-item-name{text-align:left;padding:10px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-item-favorite,#libraryFavoriteButton{font-size:1.45rem;color:var(--acid)!important}.library-item-delete{font-size:1.15rem;color:var(--danger)!important}.library-empty{text-align:center;color:var(--muted);padding:22px 0}.library-player{position:sticky;top:8px;z-index:8;margin-bottom:12px;padding:12px;background:#111e;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 35px #000b;backdrop-filter:blur(16px)}.library-player-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.library-player-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-player-controls{display:grid;grid-template-columns:42px 50px 42px 42px 1fr;align-items:center;gap:4px;margin-top:8px}.library-player-controls button{height:42px;border-radius:11px}.library-player-controls .primary{background:var(--acid);color:#151714}.library-player-controls button.active{color:var(--acid);background:#ffffff0d}#libraryLearnButton{border:1px solid var(--line);font-weight:800;white-space:nowrap}
/* The player/hand badge duplicates the controls and obscures the drum. */
.turn-cue{display:none!important}
.play-center.playing span{width:22px;height:22px;background:#1a1e16;border:0;margin:0}
.mode-switch,.mode-hint,#learnControls .field,.library-player{display:none!important}
#learnControls .transport{grid-template-columns:auto auto minmax(0,1fr) auto auto minmax(0,1fr)}
#mainRepeatButton.active{color:var(--acid);border-color:var(--acid)}
#libraryControls{margin-top:20px}
#speedControls{margin:4px 0 14px;padding:0 4px}.speed-row{margin-top:0}.melody-line{display:flex;align-items:baseline;gap:10px;min-width:0}.melody-duration{color:var(--muted);font-size:.78rem;white-space:nowrap}.record-button{border:2px solid #d96862;background:#171a16;color:var(--ink);font-weight:850}.record-button:before{content:"";display:inline-block;width:10px;height:10px;margin-right:9px;border-radius:50%;background:#e36d67;box-shadow:0 0 0 4px #e36d6720}.record-button:hover{background:#d9686217;border-color:#ed7b75}#freeSoundButton{display:none!important}.transport.two{grid-template-columns:1fr}
#playControls>.panel-lead{display:none}#playControls{min-height:0}
.trainer>#recordReview{margin:8px 0 14px;padding:14px 16px;background:#20231fe8;border:1px solid var(--line);border-radius:var(--radius)}
@media(max-width:520px){#learnControls .transport{grid-template-columns:repeat(4,1fr)}#learnControls .transport #playButton,#learnControls .transport #startRecordingButton{grid-column:span 2}#learnControls .transport .primary{grid-column:auto}}
.score-ring.melody-muted{background:#f05d57;filter:drop-shadow(0 0 7px #f05d5788)}#soundButton.melody-muted,#freeSoundButton.melody-muted{position:relative;border-color:#f05d57;color:#ffaaa6;box-shadow:inset 0 0 0 1px #f05d5740}#soundButton.melody-muted:after,#freeSoundButton.melody-muted:after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:#f05d57;transform:rotate(-12deg);box-shadow:0 0 4px #000}
@media(max-width:520px){#learnControls .transport{grid-template-columns:minmax(62px,.7fr) minmax(138px,1.7fr) minmax(62px,.7fr);grid-template-areas:"previous play next" "sound record repeat";gap:7px;margin-top:12px}#soundButton{grid-area:sound}#mainPreviousButton{grid-area:previous}#playButton{grid-area:play}#mainNextButton{grid-area:next}#mainRepeatButton{grid-area:repeat}#startRecordingButton{grid-area:record}#learnControls .transport button{grid-column:auto;min-width:0;min-height:48px;padding:8px 7px;border-radius:12px;font-size:.92rem}#playButton,#startRecordingButton{font-size:1rem}.library-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.library-filter{min-height:42px;padding:7px 8px;line-height:1.15}}@media(max-width:360px){#learnControls .transport{grid-template-columns:58px minmax(0,1fr) 58px}#soundButton{font-size:.78rem}}
@media(max-width:520px){#learnControls .transport #soundButton{grid-area:sound}#learnControls .transport #mainPreviousButton{grid-area:previous}#learnControls .transport #playButton{grid-area:play}#learnControls .transport #mainNextButton{grid-area:next}#learnControls .transport #mainRepeatButton{grid-area:repeat}#learnControls .transport #startRecordingButton{grid-area:record}}
#gameSettings.one-player{grid-template-columns:repeat(2,minmax(0,1fr))}