/* Așezare fidelă tobei utilizatoarei: perechi 3, 1, 6, 4, 5, 7, 2 și FA♯4 în centru. */
.mallet-guide{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px;color:var(--muted)}
.mallet-guide label{font-weight:800;color:var(--text)}
.mallet-guide span{padding:5px 9px;border-radius:20px;font-weight:800;font-size:.8rem}
.left-hand{background:#1b5f72;color:#8ff1ff}.right-hand{background:#633c91;color:#e6c7ff}
.mallet-guide small{flex-basis:100%;text-align:center}
.drum{overflow:hidden}
.tongue,.tongue.inner{left:var(--x);top:var(--y);width:15%;height:24%;transform:translate(-50%,-50%) rotate(var(--rot));transform-origin:center;display:grid;place-content:center;padding:0;border-radius:48% 48% 38% 38%}
.tongue.low-tongue{width:18%;height:27%}
.tongue.middle-tongue{width:14.5%;height:23%}
.tongue.high-tongue{width:12.5%;height:20%}
.tongue>span{transform:rotate(calc(-1 * var(--rot)))}
.tongue.center-tongue{left:50%;top:50%;width:24%;height:27%;transform:translate(-50%,-50%);z-index:3;background:linear-gradient(100deg,#21465a,#396475,#183749)}
.tongue.center-tongue>span{transform:none}.tongue .note-name{position:static}
.tongue .key{left:50%;transform:translateX(-50%) rotate(calc(-1 * var(--rot)))}
.tongue.center-tongue .key{transform:translateX(-50%)}
.tongue:after{content:attr(data-play-hand);position:absolute;right:5px;bottom:5px;border-radius:50%;width:20px;height:20px;display:grid;place-content:center;font-size:.66rem;font-weight:900;background:#263954;color:#fff;opacity:0}
.tongue.expected:after{opacity:1}
.tongue.expected-left:after{background:#19a9c2}.tongue.expected-right:after{background:#9b63df}
.tongue.expected,.tongue.inner.expected{animation:newPulse .7s infinite alternate}
@keyframes newPulse{to{filter:brightness(1.35);box-shadow:0 0 42px #ffd84f}}
.tongue:hover:not(:disabled){transform:translate(-50%,-50%) rotate(var(--rot));filter:brightness(1.15)}
.tongue.center-tongue:hover:not(:disabled){transform:translate(-50%,-50%)}
.drum-center{top:67%;width:auto;height:auto;aspect-ratio:auto;border:0;background:none;box-shadow:none;z-index:4}
.drum-center span{font-size:.9rem}.drum-center small{font-size:.62rem}
@media(max-width:520px){.tongue.low-tongue{width:18%;height:26%}.tongue.middle-tongue{width:15%;height:22%}.tongue.high-tongue{width:13%;height:19%}.tongue:after{width:16px;height:16px;font-size:.55rem}}

/* Toba și comenzile încap simultan pe un ecran de calculator. */
.instrument-grid{display:grid;grid-template-columns:minmax(400px,520px) minmax(270px,1fr);gap:22px;align-items:center;max-width:940px;margin:8px auto 0}
.instrument-grid .drum-wrap{width:min(100%,520px);margin:0 auto}
.study-panel>.play-tools,.number-tools{border:1px solid #304867;border-radius:15px;background:#0d192b;padding:14px}
.number-tools{width:100%}.number-tools h3{margin:0 0 9px;color:#e7f2ff}.number-tools .number-score{width:100%;margin-top:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}.number-tools .num-note{width:100%;min-width:0;padding:8px 4px}.number-tools .num-note small{margin-top:4px;color:#fff2a8;font-size:.88rem;line-height:1.1;font-weight:900}
.play-tools{align-self:stretch;background:#0b1729;border:1px solid #304867;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.play-tools h3{margin:0;color:#e7f2ff}.play-tools .mode-picker{display:grid;grid-template-columns:repeat(3,1fr)}
.play-tools .mallet-guide{justify-content:flex-start;margin:0;padding:12px;background:#13233b;border-radius:12px}
.play-tools .mallet-guide small{text-align:left}.keyboard-help{border-left:4px solid var(--cyan);background:#12223a;border-radius:8px;padding:12px}
.keyboard-help h3{font-size:1rem;margin-bottom:7px}.keyboard-help p{margin:5px 0;color:#dbe8fa}.keyboard-help small{color:var(--muted)}
.play-tools details{background:#111f35}.play-tools .key-map{grid-template-columns:repeat(3,1fr);max-height:275px;overflow:auto}
.play-tools .key-map span{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:.75rem}.play-tools .key-map b,.play-tools .key-map small{grid-column:1/-1}.play-tools .key-map small{color:var(--muted)}
.kbd-left{background:#52d6e8!important}.kbd-right{background:#bd87ff!important}
.tongue .key{white-space:nowrap;font-size:.88rem;padding:3px 7px;font-weight:900}
@media(max-width:900px){.instrument-grid{grid-template-columns:1fr}.instrument-grid .drum-wrap{width:min(560px,100%)}.play-tools{max-width:650px;width:100%;margin:auto}.play-tools .mallet-guide{justify-content:center}.play-tools .mallet-guide small{text-align:center}}
@media(max-width:520px){.instrument-grid .drum-wrap{width:100%}.play-tools .mode-picker{grid-template-columns:1fr}.play-tools .key-map{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1049px){.number-tools .number-score{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:520px){.number-tools .number-score{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Spațiu de studiu pe două coloane: portativul și toba se văd simultan. */
@media(min-width:1050px){
  main{grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr);align-items:start}
  main>.controls,main>.song-card,main>.lesson-panel,main>.notes-panel,main>.study-panel,main>.guide{grid-column:1/-1}
  main>.lesson-panel{grid-row:3;margin-top:0}
  main>.score-panel{grid-column:1;grid-row:4;min-width:0}
  main>.instrument-panel{grid-column:2;grid-row:4;min-width:0}
  main>.notes-panel{grid-row:5;min-width:0}
  main>.study-panel{grid-row:6;min-width:0;margin-top:0}
  main>.guide{grid-row:7}
  .score-panel .staff svg{min-width:620px}
  .instrument-panel .instrument-grid{display:flex;flex-direction:column;max-width:100%;height:100%;gap:14px}
  .instrument-panel{height:100%;min-height:0;padding:14px}
  .instrument-panel .drum-wrap{position:sticky;top:72px;width:min(100%,540px,calc(100vh - 105px))}
  .instrument-panel .play-tools{width:100%;max-width:520px;margin:0 auto}
  .lesson-panel{padding:14px}
  .lesson-panel .status{min-height:38px}
  .lesson-panel .actions{margin-top:8px}
  .lesson-panel .actions button{padding:8px 10px;font-size:.82rem}
  .study-panel>.play-tools{width:100%;max-width:none}
}