/* MR Theory Board · Ear Training v0.6.8 */

.mrtb-app[data-scene="ear-training"] .mrtb-ear-training-scene{
  position:absolute;
  left:22px;
  right:22px;
  top:12px;
  z-index:65;
  min-height:138px;
  padding:11px 13px;
  border:3px solid rgba(255,255,255,.92);
  border-radius:24px;
  color:#263044;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,247,255,.94));
  box-shadow:0 14px 28px rgba(35,72,92,.18),inset 0 -4px 0 rgba(38,48,68,.05);
  backdrop-filter:blur(10px);
}

.mrtb-ear-topline,
.mrtb-ear-control-row,
.mrtb-ear-status-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.mrtb-ear-topline{
  justify-content:space-between;
}

.mrtb-ear-title{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:250px;
}

.mrtb-ear-title > span:last-child{
  display:grid;
  gap:2px;
}

.mrtb-ear-title strong{
  font-size:18px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ear-title small{
  max-width:520px;
  color:#59677f;
  font-size:10.5px;
  line-height:1.15;
  font-weight:850;
}

.mrtb-ear-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:13px;
  font-size:22px;
  background:linear-gradient(180deg,#fff3a7,#ffc34f);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 7px 14px rgba(255,185,46,.22);
}

.mrtb-ear-levels{
  display:grid;
  grid-template-columns:repeat(5,minmax(68px,1fr));
  gap:5px;
  flex:1 1 auto;
  max-width:580px;
}

.mrtb-ear-levels button{
  border:0;
  min-height:38px;
  padding:4px 6px;
  border-radius:12px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#eaf1fb);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09),0 4px 9px rgba(35,72,92,.1);
  font:inherit;
  cursor:pointer;
}

.mrtb-ear-levels button b,
.mrtb-ear-levels button small{
  display:block;
  line-height:1.05;
}

.mrtb-ear-levels button b{
  font-size:13px;
  font-weight:1000;
}

.mrtb-ear-levels button small{
  margin-top:2px;
  color:#617088;
  font-size:8px;
  font-weight:850;
}

.mrtb-ear-levels button.active{
  background:linear-gradient(180deg,#ffe886,#ffb82e);
  outline:3px solid rgba(255,184,46,.22);
}

.mrtb-ear-levels button:disabled{
  cursor:default;
  opacity:.58;
}

.mrtb-ear-control-row{
  margin-top:8px;
  justify-content:space-between;
}

.mrtb-ear-meta{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  min-width:250px;
}

.mrtb-ear-meta span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 8px;
  border-radius:999px;
  background:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.07);
  color:#44526b;
  font-size:10.5px;
  font-weight:950;
  white-space:nowrap;
}

.mrtb-ear-tempo{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:210px;
  padding:4px 8px;
  border-radius:13px;
  background:rgba(255,255,255,.88);
}

.mrtb-ear-tempo span{
  display:grid;
  min-width:82px;
  color:#56657e;
  font-size:9px;
  font-weight:900;
}

.mrtb-ear-tempo b{
  color:#263044;
  font-size:11px;
}

.mrtb-ear-tempo input{
  width:120px;
  accent-color:#4697ff;
}

.mrtb-ear-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}

.mrtb-ear-btn{
  min-height:29px;
  border:0;
  border-radius:10px;
  padding:4px 9px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#eaf1fb);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 4px 9px rgba(35,72,92,.1);
  font:inherit;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
  cursor:pointer;
}

.mrtb-ear-btn.play{ background:linear-gradient(180deg,#bce2ff,#5aaeff); }
.mrtb-ear-btn.hint{ background:linear-gradient(180deg,#fff2aa,#ffc649); }
.mrtb-ear-btn.clear{ background:linear-gradient(180deg,#fff,#e5edf8); }
.mrtb-ear-btn.check{ background:linear-gradient(180deg,#bcffac,#45d376); }
.mrtb-ear-btn.next{ background:linear-gradient(180deg,#ffd0e0,#ff79a7); }

.mrtb-ear-btn:disabled{
  cursor:default;
  filter:grayscale(.45);
  opacity:.46;
}

.mrtb-ear-status-row{
  margin-top:7px;
  min-height:27px;
  justify-content:space-between;
}

.mrtb-ear-status{
  flex:1 1 auto;
  min-height:27px;
  padding:6px 10px;
  border-radius:11px;
  color:#526079;
  background:rgba(255,255,255,.8);
  font-size:10.5px;
  font-weight:900;
}

.mrtb-ear-status.playing{ color:#174f88; background:#dff1ff; }
.mrtb-ear-status.ready{ color:#31516c; background:#edf8ff; }
.mrtb-ear-status.good{ color:#08723a; background:#d9ffe5; }
.mrtb-ear-status.bad{ color:#aa2929; background:#ffe3e3; }
.mrtb-ear-status.hint{ color:#7b5900; background:#fff2b9; }

.mrtb-ear-play-progress{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  max-width:310px;
  min-width:80px;
  overflow:hidden;
}

.mrtb-ear-play-progress i{
  display:block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:999px;
  background:#c7d3e3;
  transition:.12s ease;
}

.mrtb-ear-play-progress i.done{ background:#75b9ff; }
.mrtb-ear-play-progress i.active{
  width:12px;
  flex-basis:12px;
  background:#ffb82e;
  transform:scale(1.2);
}

.mrtb-ear-solution{
  position:absolute;
  left:13px;
  right:13px;
  top:100%;
  margin-top:6px;
  z-index:68;
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:7px 9px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:13px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 18px rgba(35,72,92,.14);
  font-size:10px;
  font-weight:900;
}

.mrtb-ear-solution[hidden]{ display:none !important; }

.mrtb-ear-solution > span{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.mrtb-ear-solution em{
  padding:3px 6px;
  border-radius:999px;
  background:#edf5ff;
  font-style:normal;
  white-space:nowrap;
}

.mrtb-ear-bar-separator{
  align-self:center;
  padding:0 2px;
  color:#ff8a3d;
  font-size:17px;
  font-style:normal;
  font-weight:1000;
}

/* Η σκηνή Ear Training κρατά το υπάρχον notation engine. */
.mrtb-app[data-scene="ear-training"] .mrtb-staff{
  top:166px !important;
  left:22px !important;
  right:22px !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-mini-piano{
  top:544px !important;
  bottom:auto !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-toast{
  bottom:166px !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-staff-label{
  background:linear-gradient(180deg,#fff0a2,#ffc44c) !important;
}

/* Ένα ή δύο μέτρα αντί για τις τρεις προεπιλεγμένες υποδιαιρέσεις. */
.mrtb-app[data-scene="ear-training"] .mrtb-barline.b2{
  display:none !important;
}

.mrtb-app[data-scene="ear-training"][data-ear-bars="1"] .mrtb-barline.b1{
  display:none !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-barline.b3{
  left:99.5% !important;
  width:4px !important;
  opacity:.9;
}

.mrtb-app[data-scene="ear-training"][data-ear-bars="2"] .mrtb-barline.b1{
  display:block !important;
  left:50% !important;
  width:3px !important;
  opacity:.78;
}

/* Κατά την ακρόαση το πιάνο κρύβεται, ώστε να μη δίνει οπτικό hint. */
.mrtb-app.mrtb-ear-playing[data-scene="ear-training"] .mrtb-mini-piano{
  visibility:hidden !important;
  pointer-events:none !important;
}

.mrtb-app.mrtb-ear-playing[data-scene="ear-training"] .mrtb-staff{
  filter:saturate(.75);
}

/* Μετά τον έλεγχο κλειδώνει η απάντηση μέχρι Clear ή Next. */
.mrtb-app.mrtb-ear-checked[data-scene="ear-training"] .mrtb-staff,
.mrtb-app.mrtb-ear-checked[data-scene="ear-training"] .mrtb-note-hitbox,
.mrtb-app.mrtb-ear-checked[data-scene="ear-training"] .mrtb-mini-piano{
  pointer-events:none !important;
}

/* Πράσινες σωστές / κόκκινες λανθασμένες νότες. */
.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-correct .mrtb-note-head{
  border-color:#11934d !important;
  background:#32c972 !important;
  box-shadow:0 0 0 6px rgba(50,201,114,.22) !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-correct .mrtb-stem,
.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-correct .mrtb-flag{
  border-color:#11934d !important;
  background:#11934d !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-wrong .mrtb-note-head{
  border-color:#cf3030 !important;
  background:#ff5f5f !important;
  box-shadow:0 0 0 6px rgba(255,95,95,.22) !important;
}

.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-wrong .mrtb-stem,
.mrtb-app[data-scene="ear-training"] .mrtb-board-note.mrtb-ear-wrong .mrtb-flag{
  border-color:#cf3030 !important;
  background:#cf3030 !important;
}

/* Δεν χρειάζονται αλλαγή κλειδιού, συγχορδίες ή δεύτερο πεντάγραμμο εδώ. */
.mrtb-app[data-scene="ear-training"] [data-action="staff-treble"],
.mrtb-app[data-scene="ear-training"] [data-action="staff-bass"],
.mrtb-app[data-scene="ear-training"] [data-action="select-multi"],
.mrtb-app[data-scene="ear-training"] [data-action="add-staff"]{
  display:none !important;
}

@media (max-width:1100px){
  .mrtb-app[data-scene="ear-training"] .mrtb-ear-training-scene{
    left:12px;
    right:12px;
    min-height:164px;
  }

  .mrtb-ear-topline{
    align-items:flex-start;
  }

  .mrtb-ear-title{
    min-width:220px;
  }

  .mrtb-ear-control-row{
    flex-wrap:wrap;
  }

  .mrtb-ear-meta{
    min-width:0;
  }

  .mrtb-ear-actions{
    flex:1 1 100%;
    justify-content:flex-start;
  }

  .mrtb-app[data-scene="ear-training"] .mrtb-staff{
    top:194px !important;
  }

  .mrtb-app[data-scene="ear-training"] .mrtb-mini-piano{
    top:572px !important;
  }
}

@media (max-width:900px){
  .mrtb-app[data-scene="ear-training"] .mrtb-ear-training-scene{
    left:8px;
    right:8px;
    top:8px;
    min-height:214px;
    padding:8px;
    border-radius:18px;
  }

  .mrtb-ear-topline{
    display:grid;
    gap:7px;
  }

  .mrtb-ear-title{
    min-width:0;
  }

  .mrtb-ear-title strong{
    font-size:16px;
  }

  .mrtb-ear-title small{
    font-size:9px;
  }

  .mrtb-ear-levels{
    width:100%;
    max-width:none;
    grid-template-columns:repeat(5,1fr);
  }

  .mrtb-ear-levels button{
    min-width:0;
    padding:4px 2px;
  }

  .mrtb-ear-levels button small{
    display:none;
  }

  .mrtb-ear-control-row{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  .mrtb-ear-meta{
    gap:4px;
  }

  .mrtb-ear-tempo{
    min-width:0;
    width:100%;
  }

  .mrtb-ear-tempo input{
    flex:1 1 auto;
    width:auto;
  }

  .mrtb-ear-actions{
    gap:4px;
  }

  .mrtb-ear-btn{
    min-height:27px;
    padding:3px 6px;
    font-size:10px;
  }

  .mrtb-ear-status-row{
    display:grid;
    gap:4px;
  }

  .mrtb-ear-play-progress{
    max-width:100%;
    justify-content:flex-start;
  }

  .mrtb-ear-solution{
    max-height:92px;
    overflow:auto;
  }

  .mrtb-app[data-scene="ear-training"] .mrtb-staff{
    top:234px !important;
    left:8px !important;
    right:8px !important;
  }

  .mrtb-app[data-scene="ear-training"] .mrtb-mini-piano{
    top:562px !important;
  }
}