/* =========================================================
   MR Theory Board · Σολφέζ
   Αυτόνομο stylesheet για το Template 7
   ========================================================= */

.mrtb-app[data-scene="solfege"] .mrtb-staff,
.mrtb-app[data-scene="solfege"] .mrtb-mini-piano,
.mrtb-app[data-scene="solfege"] .mrtb-board-note,
.mrtb-app[data-scene="solfege"] .mrtb-note-beam,
.mrtb-app[data-scene="solfege"] .mrtb-chord-stem-link{
  display:none !important;
}

.mrtb-app[data-scene="solfege"] .mrtb-values-section{
  display:none !important;
}

.mrtb-app[data-scene="solfege"] .mrtb-sidebar{
  grid-template-columns:1fr !important;
}

.mrtb-app[data-scene="solfege"] .mrtb-board-wrap{
  background:
    radial-gradient(circle at 10% 8%,rgba(255,255,255,.82) 0 34px,transparent 36px),
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.68) 0 44px,transparent 46px),
    linear-gradient(180deg,rgba(117,221,255,.9),rgba(185,242,125,.88)) !important;
}

.mrtb-solfege-scene,
.mrtb-solfege-scene *{
  box-sizing:border-box;
}

.mrtb-solfege-scene{
  --sol-ink:#263044;
  --sol-muted:#607089;
  --sol-yellow:#ffbd3f;
  --sol-blue:#4697ff;
  --sol-pink:#ff6b9a;
  --sol-green:#32c972;
  position:absolute;
  left:18px;
  right:18px;
  top:16px;
  z-index:12;
  min-height:790px;
  padding:14px 14px 34px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:28px;
  color:var(--sol-ink);
  background:rgba(255,255,255,.68);
  box-shadow:0 16px 34px rgba(35,72,92,.14),inset 0 0 0 3px rgba(255,255,255,.3);
  backdrop-filter:blur(5px);
}

.mrtb-solfege-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:94px;
  padding:14px 16px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,249,255,.9));
  box-shadow:0 10px 20px rgba(35,72,92,.1),inset 0 -4px 0 rgba(0,0,0,.05);
}

.mrtb-solfege-header h2{
  margin:2px 0 3px;
  font-size:30px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-header p{
  margin:0;
  max-width:670px;
  color:var(--sol-muted);
  font-size:13px;
  font-weight:850;
}

.mrtb-solfege-kicker{
  display:inline-block;
  color:#536178;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.mrtb-solfege-tabs{
  display:flex;
  gap:7px;
  flex:0 0 auto;
}

.mrtb-solfege-tabs button{
  min-width:178px;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:18px;
  padding:8px 12px;
  color:var(--sol-ink);
  background:linear-gradient(180deg,#fff,#eaf2fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 7px 13px rgba(35,72,92,.1);
  font:inherit;
  font-weight:950;
  text-align:left;
  cursor:pointer;
}

.mrtb-solfege-tabs button b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:12px;
  background:rgba(70,151,255,.16);
  font-size:17px;
}

.mrtb-solfege-tabs button span{
  font-size:12px;
  line-height:1.1;
}

.mrtb-solfege-tabs button.active{
  background:linear-gradient(180deg,#fff1a7,#ffc34e);
  transform:translateY(-1px);
}

.mrtb-solfege-tabs button.active b{
  background:rgba(255,255,255,.7);
}

.mrtb-solfege-content{
  margin-top:12px;
}

.mrtb-solfege-lesson-grid{
  display:grid;
  grid-template-columns:minmax(520px,1.35fr) minmax(320px,.75fr);
  gap:12px;
}

.mrtb-solfege-card{
  border:2px solid rgba(38,48,68,.07);
  border-radius:24px;
  padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,248,255,.9));
  box-shadow:0 10px 20px rgba(35,72,92,.1),inset 0 -4px 0 rgba(0,0,0,.045);
}

.mrtb-solfege-card h3{
  margin:3px 0 0;
  font-size:21px;
  line-height:1.08;
  font-weight:1000;
}

.mrtb-solfege-card-title,
.mrtb-solfege-exercise-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mrtb-solfege-card-title > div > span{
  color:var(--sol-muted);
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mrtb-solfege-primary,
.mrtb-solfege-secondary,
.mrtb-solfege-note-toggle{
  min-height:38px;
  border:0;
  border-radius:13px;
  padding:7px 12px;
  color:var(--sol-ink);
  font:inherit;
  font-size:12px;
  font-weight:1000;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 6px 12px rgba(35,72,92,.11);
}

.mrtb-solfege-primary{
  background:linear-gradient(180deg,#b8e4ff,#4697ff);
}

.mrtb-solfege-secondary{
  background:linear-gradient(180deg,#fff,#e8f0fa);
}

.mrtb-solfege-note-toggle{
  background:linear-gradient(180deg,#e7f4ff,#b8dcff);
}

.mrtb-solfege-note-toggle.active{
  background:linear-gradient(180deg,#ffe078,#ffb433);
}

.mrtb-solfege-primary:hover,
.mrtb-solfege-secondary:hover,
.mrtb-solfege-note-toggle:hover{
  transform:translateY(-1px);
}

/* ===== Μέτρημα χεριού 4/4 ===== */

.mrtb-conduct-stage{
  position:relative;
  height:244px;
  margin-top:12px;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.92) 0 80px,transparent 82px),
    linear-gradient(180deg,#dff5ff,#f3ffe3);
  border:2px dashed rgba(38,48,68,.13);
}

.mrtb-conduct-path{
  position:absolute;
  left:50%;
  top:42px;
  width:250px;
  height:164px;
  transform:translateX(-50%);
  opacity:.56;
  pointer-events:none;
}

.mrtb-conduct-path::before,
.mrtb-conduct-path::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:4px;
  height:164px;
  border-radius:999px;
  background:repeating-linear-gradient(180deg,rgba(38,48,68,.4) 0 8px,transparent 8px 15px);
  transform:translateX(-50%) rotate(35deg);
  transform-origin:center;
}

.mrtb-conduct-path::after{
  transform:translateX(-50%) rotate(-35deg);
}

.mrtb-conduct-hand{
  position:absolute;
  left:50%;
  top:26px;
  z-index:4;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:translate(-50%,0);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 20px rgba(35,72,92,.18),inset 0 -4px 0 rgba(0,0,0,.07);
  font-size:34px;
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),transform .28s ease;
}

.mrtb-conduct-hand[data-step="0"]{ left:50%; top:156px; transform:translate(-50%,0) rotate(4deg); }
.mrtb-conduct-hand[data-step="1"]{ left:76%; top:108px; transform:translate(-50%,0) rotate(15deg); }
.mrtb-conduct-hand[data-step="2"]{ left:24%; top:86px; transform:translate(-50%,0) rotate(-15deg); }
.mrtb-conduct-hand[data-step="3"]{ left:50%; top:26px; transform:translate(-50%,0) rotate(0deg); }

.mrtb-conduct-point{
  position:absolute;
  z-index:3;
  min-width:88px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:16px;
  color:var(--sol-ink);
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 15px rgba(35,72,92,.1),inset 0 -3px 0 rgba(0,0,0,.07);
  font:inherit;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
  transition:.18s ease;
}

.mrtb-conduct-point b{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#dceeff;
  font-size:14px;
}

.mrtb-conduct-point.active{
  background:linear-gradient(180deg,#fff1a7,#ffc34e);
  transform:scale(1.08);
  box-shadow:0 10px 20px rgba(255,184,46,.28),inset 0 -4px 0 rgba(0,0,0,.1);
}

.mrtb-conduct-point.p1{ left:50%; bottom:8px; transform:translateX(-50%); }
.mrtb-conduct-point.p1.active{ transform:translateX(-50%) scale(1.08); }
.mrtb-conduct-point.p2{ right:12px; top:104px; }
.mrtb-conduct-point.p3{ left:12px; top:82px; }
.mrtb-conduct-point.p4{ left:50%; top:6px; transform:translateX(-50%); }
.mrtb-conduct-point.p4.active{ transform:translateX(-50%) scale(1.08); }

.mrtb-conduct-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:9px;
}

.mrtb-conduct-steps span{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:12px;
  background:rgba(255,255,255,.85);
  color:#4f5e76;
  font-size:11px;
  font-weight:950;
}

.mrtb-conduct-steps b{
  color:var(--sol-ink);
}

.mrtb-solfege-tip{
  margin:9px 0 0;
  padding:9px 11px;
  border-radius:14px;
  background:rgba(255,237,150,.46);
  color:#4c586d;
  font-size:12px;
  font-weight:850;
}

/* ===== Παλμός ===== */

.pulse-card{
  background:linear-gradient(180deg,#fff9d9,#fff1ad);
}

.pulse-card > p{
  margin:12px 0 0;
  color:#59677f;
  font-size:12px;
  line-height:1.45;
  font-weight:850;
}

.mrtb-pulse-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:18px;
}

.mrtb-pulse-row button{
  min-height:84px;
  border:0;
  border-radius:18px;
  color:var(--sol-ink);
  background:linear-gradient(180deg,#fff,#e9f3ff);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.09),0 8px 14px rgba(35,72,92,.1);
  font:inherit;
  cursor:pointer;
}

.mrtb-pulse-row button b{
  display:block;
  font-size:30px;
  line-height:1;
  font-weight:1000;
}

.mrtb-pulse-row button small{
  display:block;
  margin-top:4px;
  color:#617089;
  font-size:9px;
  font-weight:950;
}

.mrtb-pulse-row button.pop{
  animation:mrtb-solfege-pulse .32s ease;
}

@keyframes mrtb-solfege-pulse{
  0%{ transform:scale(.9); }
  55%{ transform:scale(1.12); background:#ffc34e; }
  100%{ transform:scale(1); }
}

.mrtb-solfege-formula{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:6px;
  align-items:center;
  margin-top:16px;
}

.mrtb-solfege-formula span{
  min-height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  padding:5px;
  background:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:1000;
  text-align:center;
}

.mrtb-solfege-formula i{
  color:#ff8c2b;
  font-style:normal;
  font-size:24px;
  font-weight:1000;
}

/* ===== Παραδείγματα ===== */

.examples-card{
  margin-top:12px;
}

.mrtb-solfege-demo-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.mrtb-solfege-demo{
  display:grid;
  grid-template-columns:210px minmax(520px,1fr) 42px;
  align-items:center;
  gap:10px;
  min-height:106px;
  padding:9px 10px;
  border-radius:19px;
  background:rgba(255,255,255,.84);
  border:2px solid rgba(38,48,68,.065);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.035);
}

.mrtb-solfege-demo-copy b,
.mrtb-solfege-demo-copy span,
.mrtb-solfege-demo-copy small{
  display:block;
}

.mrtb-solfege-demo-copy b{
  font-size:14px;
  font-weight:1000;
}

.mrtb-solfege-demo-copy span{
  margin-top:2px;
  color:#64728a;
  font-size:10px;
  font-weight:850;
}

.mrtb-solfege-demo-copy small{
  margin-top:6px;
  color:#f0801c;
  font-size:11px;
  font-weight:1000;
}

.mrtb-solfege-play-demo{
  width:40px;
  height:40px;
  border:0;
  border-radius:13px;
  background:linear-gradient(180deg,#b8e4ff,#4697ff);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 6px 11px rgba(35,72,92,.1);
  color:#1d365a;
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
}

/* ===== Κοινό πεντάγραμμο σολφέζ ===== */

.mrtb-solfege-mini-score{
  position:relative;
  height:86px;
  min-width:0;
  padding-left:72px;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f4f8fd);
  overflow:hidden;
}

.mrtb-solfege-clef{
  position:absolute;
  left:8px;
  top:10px;
  z-index:3;
  width:38px;
  color:#20263a;
  font-family:"Times New Roman",serif;
  font-size:58px;
  line-height:1;
  pointer-events:none;
}

.mrtb-solfege-time{
  position:absolute;
  left:48px;
  top:23px;
  z-index:3;
  display:grid;
  color:#20263a;
  font-size:22px;
  line-height:.78;
  font-weight:1000;
  pointer-events:none;
}

.mrtb-solfege-staff{
  position:relative;
}

.mrtb-solfege-staff > i{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background:#30384a;
  pointer-events:none;
}

.mrtb-solfege-staff > i:nth-child(1){ top:10px; }
.mrtb-solfege-staff > i:nth-child(2){ top:23px; }
.mrtb-solfege-staff > i:nth-child(3){ top:36px; }
.mrtb-solfege-staff > i:nth-child(4){ top:49px; }
.mrtb-solfege-staff > i:nth-child(5){ top:62px; }

.mrtb-solfege-staff.compact{
  height:82px;
}

.mrtb-solfege-measure{
  position:absolute;
  inset:0 5px 0 0;
  display:grid;
  grid-template-columns:repeat(var(--note-count),minmax(28px,1fr));
  align-items:center;
  border-left:2px solid rgba(38,48,68,.68);
  border-right:4px double rgba(38,48,68,.8);
}

.mrtb-solfege-note-token{
  position:relative;
  min-width:0;
  height:80px;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.mrtb-solfege-note-token.demo-active{
  border-radius:14px;
  background:rgba(255,195,78,.38);
}

.mrtb-solfege-note-glyph{
  position:absolute;
  left:50%;
  top:calc(39px - (var(--pitch) * 6.5px));
  width:28px;
  height:42px;
  transform:translate(-50%,-50%);
}

.mrtb-solfege-note-glyph .head{
  position:absolute;
  left:2px;
  top:19px;
  width:18px;
  height:12px;
  border:2.5px solid #1f2535;
  border-radius:50%;
  background:#1f2535;
  transform:rotate(-18deg);
}

.mrtb-solfege-note-glyph.whole .head,
.mrtb-solfege-note-glyph.half .head{
  background:#fff;
}

.mrtb-solfege-note-glyph.whole .head{
  left:1px;
  width:22px;
  height:13px;
  border-width:3px;
}

.mrtb-solfege-note-glyph .stem{
  position:absolute;
  left:19px;
  top:-4px;
  width:3px;
  height:30px;
  border-radius:4px;
  background:#1f2535;
}

.mrtb-solfege-note-glyph.whole .stem{
  display:none;
}

.mrtb-solfege-note-glyph .flag{
  position:absolute;
  left:19px;
  width:15px;
  height:10px;
  border-top:3px solid #1f2535;
  border-radius:0 11px 10px 0;
  transform:rotate(24deg);
  transform-origin:left top;
}

.mrtb-solfege-note-glyph .flag.f1{ top:-4px; }
.mrtb-solfege-note-glyph .flag.f2{ top:5px; }

.mrtb-solfege-note-glyph.whole .flag,
.mrtb-solfege-note-glyph.half .flag,
.mrtb-solfege-note-glyph.quarter .flag{
  display:none;
}

.mrtb-solfege-note-glyph.eighth .flag.f2{
  display:none;
}

.mrtb-solfege-note-name{
  position:absolute;
  left:50%;
  top:62px;
  z-index:5;
  display:none;
  min-width:42px;
  padding:2px 5px;
  border:2px solid #ffd45d;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.95);
  text-align:center;
  white-space:nowrap;
  box-shadow:0 4px 8px rgba(35,72,92,.09);
}

.mrtb-solfege-note-name b,
.mrtb-solfege-note-name small{
  display:inline;
  font-size:9px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-note-name small{
  margin-left:3px;
  color:#65728a;
}

.mrtb-app.mrtb-show-note-names .mrtb-solfege-note-name{
  display:block;
}

/* ===== Σύντομες ασκήσεις ===== */

.exercise-shell{
  min-height:650px;
}

.mrtb-solfege-exercise-head h3{
  font-size:25px;
}

.mrtb-solfege-exercise-head p{
  margin:4px 0 0;
  color:#63718a;
  font-size:12px;
  font-weight:850;
}

.mrtb-solfege-status{
  min-width:118px;
  min-height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(180deg,#effff2,#b9f7c8);
  color:#16743e;
  font-size:12px;
  font-weight:1000;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07);
}

.mrtb-solfege-exercise-picker{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:13px;
}

.mrtb-solfege-exercise-picker button{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:16px;
  padding:7px 10px;
  color:var(--sol-ink);
  background:linear-gradient(180deg,#fff,#eaf2fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 6px 11px rgba(35,72,92,.09);
  font:inherit;
  font-size:11px;
  font-weight:950;
  text-align:left;
  cursor:pointer;
}

.mrtb-solfege-exercise-picker button b{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  border-radius:10px;
  background:rgba(70,151,255,.16);
  font-size:15px;
}

.mrtb-solfege-exercise-picker button.active{
  background:linear-gradient(180deg,#fff1a7,#ffc34e);
}

.mrtb-solfege-exercise-picker button.active b{
  background:rgba(255,255,255,.72);
}

.mrtb-solfege-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:9px;
  border-radius:18px;
  background:rgba(255,255,255,.8);
  border:2px solid rgba(38,48,68,.06);
}

.mrtb-solfege-tempo{
  min-width:255px;
  flex:1 1 280px;
  display:grid;
  gap:4px;
  padding:4px 8px;
}

.mrtb-solfege-tempo span{
  display:flex;
  justify-content:space-between;
  color:#526079;
  font-size:10px;
  font-weight:950;
}

.mrtb-solfege-tempo b{
  color:var(--sol-ink);
}

.mrtb-solfege-tempo input{
  width:100%;
  accent-color:#4697ff;
  cursor:pointer;
}

.mrtb-solfege-switch{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:12px;
  background:#eef5fd;
  color:#526079;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
}

.mrtb-solfege-switch input{
  width:16px;
  height:16px;
  accent-color:#4697ff;
}

.mrtb-solfege-active-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:11px;
}

.mrtb-solfege-active-copy > div:first-child b,
.mrtb-solfege-active-copy > div:first-child span{
  display:block;
}

.mrtb-solfege-active-copy > div:first-child b{
  font-size:16px;
  font-weight:1000;
}

.mrtb-solfege-active-copy > div:first-child span{
  margin-top:2px;
  color:#627087;
  font-size:11px;
  font-weight:850;
}

.mrtb-solfege-beat-display{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}

.mrtb-solfege-beat-display span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#edf4fc;
  color:#63718a;
  font-size:14px;
  font-weight:1000;
  transition:.12s ease;
}

.mrtb-solfege-beat-display span.active{
  background:linear-gradient(180deg,#ffe078,#ffb433);
  color:#263044;
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 7px 12px rgba(255,184,46,.27),inset 0 -3px 0 rgba(0,0,0,.1);
}

.mrtb-solfege-score-window{
  margin-top:10px;
  padding:8px;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#eef6ff);
  border:2px solid rgba(38,48,68,.07);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.04);
}

.mrtb-solfege-karaoke{
  position:relative;
  min-width:920px;
  height:270px;
  padding-left:118px;
  padding-top:54px;
}

.mrtb-solfege-clef.large{
  left:12px;
  top:79px;
  width:68px;
  font-size:92px;
}

.mrtb-solfege-time.large{
  left:76px;
  top:105px;
  font-size:36px;
}

.mrtb-solfege-staff.exercise{
  position:relative;
  height:160px;
}

.mrtb-solfege-staff.exercise > i:nth-child(1){ top:28px; }
.mrtb-solfege-staff.exercise > i:nth-child(2){ top:52px; }
.mrtb-solfege-staff.exercise > i:nth-child(3){ top:76px; }
.mrtb-solfege-staff.exercise > i:nth-child(4){ top:100px; }
.mrtb-solfege-staff.exercise > i:nth-child(5){ top:124px; }

.mrtb-solfege-exercise-notes{
  position:absolute;
  inset:0 18px 0 0;
  display:flex;
  align-items:stretch;
  min-width:max-content;
}

.mrtb-solfege-exercise-bar{
  position:relative;
  min-width:300px;
  height:160px;
  display:flex;
  align-items:stretch;
  border-left:3px solid rgba(38,48,68,.72);
}

.mrtb-solfege-exercise-bar:last-child{
  border-right:6px double rgba(38,48,68,.88);
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-token{
  width:var(--duration-width);
  min-width:var(--duration-width);
  height:160px;
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-glyph{
  top:calc(88px - (var(--pitch) * 12px));
  transform:translate(-50%,-50%) scale(1.35);
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-name{
  top:134px;
  min-width:54px;
  padding:3px 7px;
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-name b,
.mrtb-solfege-exercise-bar .mrtb-solfege-note-name small{
  font-size:10px;
}

.mrtb-solfege-note-token.karaoke-active{
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,231,129,.14),rgba(255,190,67,.38));
  box-shadow:inset 0 0 0 3px rgba(255,184,46,.2);
}

.mrtb-solfege-note-token.karaoke-active .mrtb-solfege-note-glyph{
  filter:drop-shadow(0 0 5px rgba(255,153,38,.5));
}

.mrtb-solfege-cursor{
  position:absolute;
  left:0;
  top:28px;
  z-index:8;
  width:0;
  height:36px;
  opacity:0;
  pointer-events:none;
  will-change:transform;
}

.mrtb-solfege-cursor.visible{
  opacity:1;
}

.mrtb-solfege-cursor span{
  position:absolute;
  left:-15px;
  top:0;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(180deg,#ff8bb2,#ff4f88);
  box-shadow:0 8px 15px rgba(255,79,136,.3),inset 0 -4px 0 rgba(0,0,0,.11);
  font-size:15px;
  animation:mrtb-solfege-cursor-bob .55s ease-in-out infinite alternate;
}

@keyframes mrtb-solfege-cursor-bob{
  from{ transform:translateY(0); }
  to{ transform:translateY(5px); }
}

.mrtb-solfege-help-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}

.mrtb-solfege-help-row span{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:13px;
  background:rgba(255,255,255,.78);
  color:#5c6a81;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

.mrtb-solfege-help-row b{
  color:#263044;
}

/* ===== Tablet ===== */

@media (max-width:1200px){
  .mrtb-solfege-lesson-grid{
    grid-template-columns:1fr;
  }

  .mrtb-solfege-demo{
    grid-template-columns:180px minmax(460px,1fr) 42px;
  }

  .mrtb-solfege-header{
    align-items:flex-start;
  }

  .mrtb-solfege-tabs button{
    min-width:150px;
  }

  .mrtb-solfege-exercise-picker{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== Mobile / μικρή οθόνη ===== */

@media (max-width:900px){
  .mrtb-app[data-scene="solfege"] .mrtb-sidebar{
    max-height:112px !important;
  }

  .mrtb-solfege-scene{
    left:8px;
    right:8px;
    top:8px;
    padding:8px 8px 24px;
    border-radius:20px;
  }

  .mrtb-solfege-header{
    display:grid;
    padding:10px;
    border-radius:18px;
  }

  .mrtb-solfege-header h2{
    font-size:24px;
  }

  .mrtb-solfege-header p{
    font-size:11px;
  }

  .mrtb-solfege-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-tabs button{
    min-width:0;
    min-height:48px;
    padding:6px 8px;
    border-radius:14px;
  }

  .mrtb-solfege-tabs button b{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .mrtb-solfege-card{
    padding:10px;
    border-radius:18px;
  }

  .mrtb-solfege-card-title,
  .mrtb-solfege-exercise-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .mrtb-solfege-card h3{
    font-size:18px;
  }

  .mrtb-conduct-stage{
    height:220px;
  }

  .mrtb-conduct-point{
    min-width:72px;
    min-height:42px;
  }

  .mrtb-conduct-point.p2{ right:4px; }
  .mrtb-conduct-point.p3{ left:4px; }

  .mrtb-conduct-steps{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-pulse-row button{
    min-height:66px;
  }

  .mrtb-pulse-row button b{
    font-size:24px;
  }

  .mrtb-solfege-formula{
    grid-template-columns:1fr;
  }

  .mrtb-solfege-formula i{
    transform:rotate(90deg);
    text-align:center;
  }

  .mrtb-solfege-demo-list{
    overflow-x:auto;
    padding-bottom:4px;
  }

  .mrtb-solfege-demo{
    min-width:790px;
    grid-template-columns:170px 520px 42px;
  }

  .mrtb-solfege-exercise-picker{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-controls{
    align-items:stretch;
  }

  .mrtb-solfege-controls > button{
    flex:1 1 auto;
  }

  .mrtb-solfege-tempo{
    flex-basis:100%;
    min-width:0;
  }

  .mrtb-solfege-active-copy{
    align-items:flex-start;
    flex-direction:column;
  }

  .mrtb-solfege-score-window{
    padding:4px;
  }

  .mrtb-solfege-karaoke{
    min-width:860px;
  }

  .mrtb-solfege-help-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MR Theory Board · Σολφέζ v0.6.8
   Διορθώσεις: σωστές θέσεις νοτών, 4/4 χέρι,
   ενεργό BPM και κανονικό beaming.
   ========================================================= */

/* Η πρώτη σελίδα έχει μόνο το χρήσιμο block του μετρήματος. */
.mrtb-solfege-lesson-grid{
  grid-template-columns:minmax(0,1fr) !important;
}

.mrtb-solfege-card.conducting-card{
  grid-column:1 / -1;
}

.mrtb-solfege-card.pulse-card{
  display:none !important;
}

/* ===== Σωστή κίνηση χεριού 4/4: κάτω → αριστερά → δεξιά → πάνω ===== */

.mrtb-conduct-path{
  position:absolute !important;
  left:50% !important;
  top:24px !important;
  width:300px !important;
  height:190px !important;
  transform:translateX(-50%) !important;
  opacity:.62 !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.mrtb-conduct-path polyline{
  fill:none;
  stroke:rgba(38,48,68,.42);
  stroke-width:5;
  stroke-dasharray:10 9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mrtb-conduct-hand[data-step="0"]{
  left:50% !important;
  top:156px !important;
  transform:translate(-50%,0) rotate(4deg) !important;
}

.mrtb-conduct-hand[data-step="1"]{
  left:24% !important;
  top:88px !important;
  transform:translate(-50%,0) rotate(-15deg) !important;
}

.mrtb-conduct-hand[data-step="2"]{
  left:76% !important;
  top:88px !important;
  transform:translate(-50%,0) rotate(15deg) !important;
}

.mrtb-conduct-hand[data-step="3"]{
  left:50% !important;
  top:24px !important;
  transform:translate(-50%,0) rotate(0deg) !important;
}

.mrtb-conduct-point.p2{
  left:12px !important;
  right:auto !important;
  top:92px !important;
}

.mrtb-conduct-point.p3{
  left:auto !important;
  right:12px !important;
  top:92px !important;
}

/* ===== Πραγματική ρύθμιση BPM ===== */

.mrtb-solfege-controls{
  position:relative;
  z-index:20;
}

.mrtb-solfege-tempo{
  min-width:300px !important;
  flex:1 1 340px !important;
  grid-template-columns:minmax(150px,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:4px !important;
  padding:5px 8px !important;
  border-radius:14px;
  background:#eef5fd;
  pointer-events:auto !important;
}

.mrtb-solfege-tempo > span{
  grid-column:1;
}

.mrtb-solfege-tempo-editor{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-columns:32px 70px 32px;
  align-items:center;
  gap:4px;
}

.mrtb-solfege-tempo-editor button{
  width:32px;
  height:32px;
  border:0;
  border-radius:10px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#dcecff);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1);
  font:inherit;
  font-size:18px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
  pointer-events:auto !important;
}

.mrtb-solfege-tempo-editor button:active{
  transform:translateY(1px);
}

.mrtb-solfege-tempo-editor input{
  width:70px;
  height:32px;
  border:2px solid rgba(70,151,255,.25);
  border-radius:10px;
  padding:3px 5px;
  color:#263044;
  background:#fff;
  font:inherit;
  font-size:14px;
  font-weight:1000;
  text-align:center;
  user-select:text !important;
  pointer-events:auto !important;
}

.mrtb-solfege-tempo > input[type="range"]{
  grid-column:1 / -1;
  width:100% !important;
  height:22px;
  margin:0;
  cursor:ew-resize !important;
  pointer-events:auto !important;
  touch-action:none;
  accent-color:#4697ff;
}

/* ===== Πεντάγραμμο και νότες στις σωστές θέσεις ===== */

/* Στο κλειδί Σολ:
   Ντο = βοηθητική κάτω, Ρε = κάτω από το πεντάγραμμο,
   Μι = κάτω γραμμή, Φα = πρώτο διάστημα. */
.mrtb-solfege-demo{
  min-height:126px !important;
}

.mrtb-solfege-mini-score{
  height:106px !important;
}

.mrtb-solfege-staff.compact{
  height:100px !important;
}

.mrtb-solfege-measure{
  height:100px !important;
}

.mrtb-solfege-note-token{
  z-index:3;
  height:100px !important;
}

.mrtb-solfege-note-glyph{
  z-index:5;
  top:calc(71px - (var(--pitch) * 6.5px)) !important;
}

/* Η κεφαλή της Ντο βρίσκεται στη βοηθητική γραμμή. */
.mrtb-solfege-note-token[data-pitch="C"]::after{
  content:"";
  position:absolute;
  left:50%;
  top:74px;
  z-index:2;
  width:34px;
  height:2px;
  border-radius:4px;
  transform:translateX(-50%);
  background:#30384a;
  pointer-events:none;
}

.mrtb-solfege-note-name{
  top:82px !important;
  z-index:9 !important;
}

/* Κατεύθυνση stem όπως στην κανονική γραφή. */
.mrtb-solfege-note-glyph.stem-up .stem{
  left:19px !important;
  top:-4px !important;
  height:30px !important;
}

.mrtb-solfege-note-glyph.stem-down .stem{
  left:2px !important;
  top:25px !important;
  height:30px !important;
}

.mrtb-solfege-note-glyph.stem-down .flag{
  left:-12px !important;
  border-radius:11px 0 0 10px !important;
  transform-origin:right top !important;
  transform:rotate(204deg) !important;
}

.mrtb-solfege-note-glyph.stem-down .flag.f1{
  top:51px !important;
}

.mrtb-solfege-note-glyph.stem-down .flag.f2{
  top:42px !important;
}

/* Μεγάλο πεντάγραμμο ασκήσεων. */
.mrtb-solfege-karaoke{
  height:305px !important;
}

.mrtb-solfege-staff.exercise,
.mrtb-solfege-exercise-bar,
.mrtb-solfege-exercise-bar .mrtb-solfege-note-token{
  height:190px !important;
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-glyph{
  top:calc(143px - (var(--pitch) * 12px)) !important;
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-token[data-pitch="C"]::after{
  top:147px !important;
  width:46px !important;
  height:3px !important;
}

.mrtb-solfege-exercise-bar .mrtb-solfege-note-name{
  top:164px !important;
}

/* ===== Beaming: όγδοα ανά 2, δέκατα έκτα ανά 4 ===== */

.mrtb-solfege-measure,
.mrtb-solfege-exercise-bar{
  isolation:isolate;
}

.mrtb-solfege-beam-svg{
  position:absolute;
  inset:0;
  z-index:7;
  display:block;
  overflow:visible;
  pointer-events:none;
}

.mrtb-solfege-note-token.mrtb-solfege-beamed .stem,
.mrtb-solfege-note-token.mrtb-solfege-beamed .flag{
  display:none !important;
}

.mrtb-solfege-note-token.mrtb-solfege-beamed .head{
  position:absolute;
  z-index:8;
}

.mrtb-solfege-note-token.karaoke-active{
  z-index:4;
}

.mrtb-solfege-cursor{
  z-index:12 !important;
}

@media (max-width:900px){
  .mrtb-solfege-tempo{
    min-width:100% !important;
    flex-basis:100% !important;
  }

  .mrtb-solfege-tempo-editor{
    grid-template-columns:30px 64px 30px;
  }

  .mrtb-solfege-tempo-editor input{
    width:64px;
  }

  .mrtb-conduct-path{
    width:250px !important;
  }
}

/* =========================================================
   MR Theory Board · Σολφέζ v0.6.9
   Γενικός μετρονόμος, συνεχόμενο μέτρημα και looping ασκήσεων.
   ========================================================= */

/* ===== Γενικός μετρονόμος σε ΟΛΟ το template ===== */
.mrtb-solfege-global-metronome{
  position:relative;
  z-index:30;
  display:grid;
  grid-template-columns:auto auto minmax(300px,1fr) auto auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 12px;
  border:2px solid rgba(38,48,68,.07);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,247,255,.92));
  box-shadow:0 9px 18px rgba(35,72,92,.1),inset 0 -3px 0 rgba(0,0,0,.04);
  pointer-events:auto !important;
}

.mrtb-solfege-global-title{
  min-width:132px;
  display:grid;
  gap:2px;
}

.mrtb-solfege-global-title span{
  color:#607089;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.mrtb-solfege-global-title strong{
  color:#263044;
  font-size:18px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-global-tempo{
  display:grid;
  grid-template-columns:34px 72px 34px minmax(150px,1fr);
  align-items:center;
  gap:5px;
  min-width:300px;
  padding:5px 7px;
  border-radius:14px;
  background:#eef5fd;
  pointer-events:auto !important;
}

.mrtb-solfege-global-tempo button{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#dcecff);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1);
  font:inherit;
  font-size:19px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
  pointer-events:auto !important;
}

.mrtb-solfege-global-tempo button:active{
  transform:translateY(1px);
}

.mrtb-solfege-global-tempo input[type="number"]{
  width:72px;
  height:34px;
  border:2px solid rgba(70,151,255,.25);
  border-radius:10px;
  padding:3px 5px;
  color:#263044;
  background:#fff;
  font:inherit;
  font-size:14px;
  font-weight:1000;
  text-align:center;
  user-select:text !important;
  pointer-events:auto !important;
}

.mrtb-solfege-global-tempo input[type="range"]{
  width:100%;
  min-width:150px;
  height:24px;
  margin:0;
  accent-color:#4697ff;
  cursor:ew-resize;
  pointer-events:auto !important;
  touch-action:none;
}

.mrtb-solfege-global-beats{
  display:grid;
  grid-template-columns:repeat(4,52px);
  gap:5px;
}

.mrtb-solfege-global-beats span{
  min-height:42px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  column-gap:4px;
  border-radius:12px;
  color:#617089;
  background:#edf4fc;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);
  transition:.12s ease;
}

.mrtb-solfege-global-beats b{
  font-size:14px;
  font-weight:1000;
}

.mrtb-solfege-global-beats i{
  color:#263044;
  font-style:normal;
  font-size:17px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-global-beats small{
  grid-column:1 / -1;
  font-size:7px;
  line-height:1;
  font-weight:950;
}

.mrtb-solfege-global-beats span.active{
  color:#263044;
  background:linear-gradient(180deg,#ffe788,#ffb433);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 7px 13px rgba(255,184,46,.27),inset 0 -3px 0 rgba(0,0,0,.1);
}

.mrtb-solfege-primary.danger,
.mrtb-solfege-global-metronome .mrtb-solfege-primary.danger{
  color:#571313;
  background:linear-gradient(180deg,#ffc7c7,#ff7373);
}

/* ===== Συνεχόμενο μέτρημα χεριού ===== */
.mrtb-solfege-card [data-solfege-conduct].danger{
  color:#571313;
  background:linear-gradient(180deg,#ffc7c7,#ff7373);
}

/* Η σειρά και οι θέσεις είναι: κάτω → αριστερά → δεξιά → πάνω. */
.mrtb-conduct-point.p2{
  left:12px !important;
  right:auto !important;
  top:92px !important;
}

.mrtb-conduct-point.p3{
  left:auto !important;
  right:12px !important;
  top:92px !important;
}

/* ===== Συνεχόμενη επανάληψη ασκήσεων ===== */
.mrtb-solfege-loop-note{
  min-height:36px;
  display:flex;
  align-items:center;
  padding:6px 10px;
  border-radius:12px;
  color:#56657e;
  background:rgba(255,237,150,.5);
  font-size:10px;
  font-weight:950;
}

/* ===== Χρόνος και κίνηση ακριβώς κάτω από τον κέρσορα ===== */
.mrtb-solfege-karaoke{
  height:350px !important;
  padding-top:70px !important;
}

.mrtb-solfege-cursor{
  top:22px !important;
  height:70px !important;
  overflow:visible !important;
}

.mrtb-solfege-cursor .mrtb-solfege-cursor-arrow{
  position:absolute;
  left:-15px;
  top:0;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(180deg,#ff8bb2,#ff4f88);
  box-shadow:0 8px 15px rgba(255,79,136,.3),inset 0 -4px 0 rgba(0,0,0,.11);
  font-size:15px;
  animation:mrtb-solfege-cursor-bob .55s ease-in-out infinite alternate;
}

.mrtb-solfege-cursor-count{
  position:absolute;
  left:0;
  top:35px;
  min-width:142px;
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  padding:5px 9px;
  border:2px solid rgba(255,107,154,.22);
  border-radius:999px;
  color:#263044;
  background:rgba(255,255,255,.97);
  box-shadow:0 7px 14px rgba(35,72,92,.13);
  font-size:10px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
}

.mrtb-solfege-hand-count-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:9px;
}

.mrtb-solfege-hand-count-row span{
  min-height:52px;
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid rgba(38,48,68,.06);
  border-radius:15px;
  color:#617089;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.04);
  transition:.12s ease;
}

.mrtb-solfege-hand-count-row b{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#263044;
  background:#dceeff;
  font-size:14px;
  font-weight:1000;
}

.mrtb-solfege-hand-count-row i{
  color:#263044;
  font-style:normal;
  font-size:22px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-hand-count-row small{
  font-size:10px;
  font-weight:1000;
}

.mrtb-solfege-hand-count-row span.active{
  color:#263044;
  background:linear-gradient(180deg,#fff1a7,#ffc34e);
  transform:translateY(-3px);
  box-shadow:0 8px 15px rgba(255,184,46,.24),inset 0 -4px 0 rgba(0,0,0,.08);
}

@media (max-width:1250px){
  .mrtb-solfege-global-metronome{
    grid-template-columns:auto auto minmax(280px,1fr) auto;
  }

  .mrtb-solfege-global-metronome > .mrtb-solfege-switch{
    grid-column:4;
  }

  .mrtb-solfege-global-beats{
    grid-column:1 / -1;
    grid-template-columns:repeat(4,minmax(70px,1fr));
  }
}

@media (max-width:900px){
  .mrtb-solfege-global-metronome{
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:8px;
    border-radius:16px;
  }

  .mrtb-solfege-global-title{
    min-width:0;
  }

  .mrtb-solfege-global-metronome > .mrtb-solfege-primary{
    width:100%;
  }

  .mrtb-solfege-global-tempo{
    grid-column:1 / -1;
    grid-template-columns:32px 66px 32px minmax(110px,1fr);
    min-width:0;
  }

  .mrtb-solfege-global-tempo input[type="number"]{
    width:66px;
  }

  .mrtb-solfege-global-beats{
    grid-column:1 / -1;
    grid-template-columns:repeat(4,1fr);
  }

  .mrtb-solfege-global-metronome > .mrtb-solfege-switch{
    grid-column:1 / -1;
    justify-content:center;
  }

  .mrtb-solfege-hand-count-row{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-cursor-count{
    min-width:126px;
    font-size:9px;
  }
}

/* =========================================================
   v0.7.0 · Παιχνίδι Σολφέζ 3 Levels
   ========================================================= */

/* Τρίτο tab χωρίς να στριμώχνεται η κορυφή. */
.mrtb-solfege-tabs button{
  min-width:150px;
}

/* Παρεστιγμένη τελεία για το Lv3. */
.mrtb-solfege-note-glyph .dot{
  display:none;
  position:absolute;
  left:25px;
  top:22px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1f2535;
}

.mrtb-solfege-note-glyph.dotted .dot{
  display:block;
}

.mrtb-solfege-note-glyph.dotted.stem-down .dot{
  left:25px;
  top:22px;
}

.mrtb-solfege-game-shell{
  position:relative;
  overflow:visible;
  padding:14px;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.88) 0 28px,transparent 30px),
    radial-gradient(circle at 91% 10%,rgba(255,255,255,.72) 0 38px,transparent 40px),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(235,247,255,.92));
}

.mrtb-solfege-game-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff9d8,#ffe98f);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.055),0 8px 16px rgba(35,72,92,.09);
}

.mrtb-solfege-game-head h3{
  margin:3px 0 3px;
  font-size:22px;
  line-height:1.08;
  font-weight:1000;
}

.mrtb-solfege-game-head p{
  margin:0;
  color:#5d6a81;
  font-size:12px;
  font-weight:850;
}

.mrtb-solfege-game-status{
  min-width:148px;
  min-height:48px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:16px;
  color:#18355d;
  background:linear-gradient(180deg,#cceaff,#78bcff);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 8px 15px rgba(70,151,255,.2);
  text-align:center;
  font-size:13px;
  font-weight:1000;
}

.mrtb-solfege-game-levels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:10px;
}

.mrtb-solfege-game-levels button{
  min-height:98px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 9px;
  border:2px solid rgba(38,48,68,.07);
  border-radius:19px;
  padding:9px 11px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#edf5ff);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.06),0 7px 13px rgba(35,72,92,.09);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.mrtb-solfege-game-levels button b{
  grid-row:1 / 3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#263044;
  background:#dceeff;
  font-size:18px;
  font-weight:1000;
}

.mrtb-solfege-game-levels button span{
  align-self:end;
  font-size:14px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-solfege-game-levels button small{
  align-self:start;
  color:#627087;
  font-size:9px;
  line-height:1.15;
  font-weight:850;
}

.mrtb-solfege-game-levels button:hover:not(:disabled){
  transform:translateY(-2px);
}

.mrtb-solfege-game-levels button.active{
  border-color:rgba(255,184,46,.52);
  background:linear-gradient(180deg,#fff4b7,#ffc74e);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.08),0 9px 17px rgba(255,184,46,.2);
}

.mrtb-solfege-game-levels button.active b{
  background:rgba(255,255,255,.72);
}

.mrtb-solfege-game-levels button:disabled{
  cursor:default;
  opacity:.68;
}

.mrtb-solfege-game-controls{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:9px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.04);
}

.mrtb-solfege-game-controls button:disabled{
  opacity:.5;
  cursor:default;
}

.mrtb-solfege-game-speed{
  min-width:190px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 8px;
  margin-left:auto;
  padding:7px 10px;
  border-radius:14px;
  background:#eef6ff;
}

.mrtb-solfege-game-speed span{
  color:#637089;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}

.mrtb-solfege-game-speed strong{
  font-size:12px;
  font-weight:1000;
}

.mrtb-solfege-game-speed i{
  position:relative;
  grid-column:1 / -1;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#d7e5f4;
}

.mrtb-solfege-game-speed i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--speed-progress,0%);
  border-radius:inherit;
  background:linear-gradient(90deg,#55d983,#ffcc4f,#ff6b75);
  transition:width .28s ease;
}

.mrtb-solfege-game-info{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:9px;
}

.mrtb-solfege-game-info > span{
  min-height:54px;
  display:grid;
  place-items:center;
  border:2px solid rgba(38,48,68,.055);
  border-radius:15px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.04);
}

.mrtb-solfege-game-info small{
  color:#6a768d;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.7px;
}

.mrtb-solfege-game-info b{
  font-size:15px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-game-score-window{
  position:relative;
  margin-top:10px;
  padding:8px;
  overflow-x:auto;
  overflow-y:hidden;
  border:3px solid rgba(255,255,255,.92);
  border-radius:23px;
  background:linear-gradient(180deg,#fff,#eef6ff);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.045),0 10px 20px rgba(35,72,92,.1);
}

.mrtb-solfege-game-karaoke{
  min-width:920px;
  height:350px !important;
  padding-top:82px !important;
}

.mrtb-solfege-game-staff,
.mrtb-solfege-game-bar,
.mrtb-solfege-game-bar .mrtb-solfege-note-token{
  height:190px !important;
}

.mrtb-solfege-game-notes{
  min-width:760px;
}

.mrtb-solfege-game-bar{
  flex:1 0 auto;
  min-width:calc(var(--game-measure-width, 360px));
}

.mrtb-solfege-game-time{
  top:126px !important;
}

.mrtb-solfege-game-karaoke .mrtb-solfege-clef.large{
  top:99px !important;
}

.mrtb-solfege-game-cursor{
  top:28px !important;
  z-index:30;
}

.mrtb-solfege-game-overlay{
  position:absolute;
  left:50%;
  top:14px;
  z-index:45;
  min-width:250px;
  min-height:72px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  gap:1px 10px;
  transform:translateX(-50%);
  padding:8px 15px;
  border:3px solid rgba(255,255,255,.88);
  border-radius:19px;
  color:#263044;
  background:linear-gradient(180deg,rgba(255,245,177,.98),rgba(255,196,75,.96));
  box-shadow:0 12px 24px rgba(35,72,92,.16),inset 0 -4px 0 rgba(0,0,0,.08);
  pointer-events:none;
  transition:.18s ease;
}

.mrtb-solfege-game-overlay span{
  align-self:end;
  font-size:12px;
  font-weight:1000;
}

.mrtb-solfege-game-overlay b{
  grid-row:1 / 3;
  grid-column:2;
  min-width:48px;
  text-align:center;
  font-size:38px;
  line-height:1;
  font-weight:1000;
}

.mrtb-solfege-game-overlay small{
  align-self:start;
  color:#5f687a;
  font-size:9px;
  font-weight:900;
}

.mrtb-solfege-game-overlay[data-phase="countin"]{
  color:#fff;
  background:linear-gradient(180deg,#6db9ff,#397fe3);
}

.mrtb-solfege-game-overlay[data-phase="countin"] small{
  color:rgba(255,255,255,.86);
}

.mrtb-solfege-game-overlay.compact{
  left:auto;
  right:12px;
  top:12px;
  min-width:150px;
  min-height:56px;
  transform:none;
  grid-template-columns:auto auto;
  padding:6px 10px;
  background:linear-gradient(180deg,rgba(212,255,220,.98),rgba(85,217,131,.96));
}

.mrtb-solfege-game-overlay.compact b{
  min-width:34px;
  font-size:27px;
}

.mrtb-solfege-game-overlay.compact small{
  font-size:8px;
}

.mrtb-solfege-note-token.game-active{
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,237,153,.16),rgba(255,187,67,.42));
  box-shadow:inset 0 0 0 3px rgba(255,184,46,.22);
}

.mrtb-solfege-note-token.game-active .mrtb-solfege-note-glyph{
  filter:drop-shadow(0 0 7px rgba(255,142,36,.6));
}

.mrtb-solfege-game-count-row{
  display:grid;
  grid-template-columns:repeat(var(--game-count-columns,4),minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}

.mrtb-solfege-game-count-row span{
  min-height:52px;
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid rgba(38,48,68,.06);
  border-radius:15px;
  color:#617089;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.04);
  transition:.12s ease;
}

.mrtb-solfege-game-count-row b{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#263044;
  background:#dceeff;
  font-size:14px;
  font-weight:1000;
}

.mrtb-solfege-game-count-row i{
  color:#263044;
  font-style:normal;
  font-size:22px;
  font-weight:1000;
}

.mrtb-solfege-game-count-row small{
  font-size:10px;
  font-weight:1000;
}

.mrtb-solfege-game-count-row span.active{
  color:#263044;
  background:linear-gradient(180deg,#fff1a7,#ffc34e);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 9px 16px rgba(255,184,46,.23),inset 0 -4px 0 rgba(0,0,0,.08);
}

.mrtb-solfege-game-rules{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:9px;
}

.mrtb-solfege-game-rules span{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:14px;
  color:#5d6a81;
  background:rgba(255,255,255,.82);
  font-size:9px;
  line-height:1.15;
  font-weight:900;
}

.mrtb-solfege-game-rules b{
  color:#263044;
  font-size:13px;
  font-weight:1000;
}

.mrtb-solfege-global-metronome .mrtb-solfege-primary:disabled{
  opacity:.72;
  cursor:default;
  transform:none;
  background:linear-gradient(180deg,#d9f7df,#79dc91);
}

@media (max-width:1200px){
  .mrtb-solfege-tabs button{
    min-width:128px;
  }

  .mrtb-solfege-game-controls{
    flex-wrap:wrap;
  }

  .mrtb-solfege-game-speed{
    margin-left:0;
    flex:1 1 220px;
  }

  .mrtb-solfege-game-rules{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:900px){
  .mrtb-solfege-tabs{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-tabs button{
    min-width:0;
    min-height:50px;
    padding:6px;
  }

  .mrtb-solfege-tabs button b{
    width:28px;
    height:28px;
    flex-basis:28px;
    font-size:14px;
  }

  .mrtb-solfege-tabs button span{
    font-size:9px;
  }

  .mrtb-solfege-game-head{
    align-items:flex-start;
  }

  .mrtb-solfege-game-head h3{
    font-size:17px;
  }

  .mrtb-solfege-game-status{
    min-width:104px;
    min-height:42px;
    font-size:10px;
  }

  .mrtb-solfege-game-levels{
    grid-template-columns:1fr;
  }

  .mrtb-solfege-game-levels button{
    min-height:74px;
  }

  .mrtb-solfege-game-info{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-game-karaoke{
    min-width:850px;
  }

  .mrtb-solfege-game-rules{
    grid-template-columns:1fr;
  }

  .mrtb-solfege-game-overlay{
    min-width:205px;
  }
}


/* =========================================================
   v0.7.1 · Ροή παιχνιδιού από το επάνω κουμπί
   ========================================================= */

/* Το τρίτο εσωτερικό tab αφαιρέθηκε. Το παιχνίδι ανοίγει μόνο
   από το επάνω κουμπί «Παιχνίδι Σολφέζ». */
.mrtb-solfege-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.mrtb-solfege-tabs button{
  min-width:190px;
}

/* Η παλιά κίτρινη εισαγωγική κάρτα του παιχνιδιού δεν χρησιμοποιείται. */
.mrtb-solfege-game-head{
  display:none !important;
}

.mrtb-solfege-game-levels{
  margin-top:0;
}

.mrtb-solfege-game-controls .mrtb-solfege-game-status{
  min-width:138px;
  min-height:40px;
  padding:6px 10px;
  border-radius:14px;
}

@media (max-width:900px){
  .mrtb-solfege-tabs{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-solfege-tabs button{
    min-width:0;
  }

  .mrtb-solfege-game-controls .mrtb-solfege-game-status{
    width:100%;
  }
}


/* =========================================================
   v0.7.3 · Αναγνώριση ονόματος νότας + ελαστικός χρόνος
   ========================================================= */

.mrtb-solfege-voice-toggle{
  min-height:38px;
  border:0;
  border-radius:13px;
  padding:7px 11px;
  color:#263044;
  background:linear-gradient(180deg,#f5f8fc,#dce7f3);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 6px 12px rgba(35,72,92,.1);
  font:inherit;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
  cursor:pointer;
}

.mrtb-solfege-voice-toggle.active{
  color:#103b25;
  background:linear-gradient(180deg,#caffd5,#53da82);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 8px 15px rgba(50,201,114,.22);
}

.mrtb-solfege-voice-toggle.listening{
  animation:mrtb-solfege-mic-pulse 1.15s ease-in-out infinite alternate;
}

.mrtb-solfege-voice-toggle:disabled{
  opacity:.52;
  cursor:default;
  animation:none;
}

@keyframes mrtb-solfege-mic-pulse{
  from{ box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 0 0 0 rgba(50,201,114,.34); }
  to{ box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 0 0 8px rgba(50,201,114,0); }
}

.mrtb-solfege-voice-box{
  min-width:205px;
  min-height:40px;
  display:grid;
  align-content:center;
  gap:2px;
  padding:6px 10px;
  border:2px solid rgba(38,48,68,.06);
  border-radius:13px;
  background:#f3f7fb;
  color:#69758b;
}

.mrtb-solfege-voice-box span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  line-height:1.1;
  font-weight:900;
}

.mrtb-solfege-voice-box b{
  color:#263044;
  font-size:10px;
  line-height:1.1;
  font-weight:1000;
}

.mrtb-solfege-voice-box.active{
  border-color:rgba(50,201,114,.22);
  background:linear-gradient(180deg,#f1fff5,#dff9e7);
}

.mrtb-solfege-voice-box.listening::before{
  content:"●";
  float:left;
  margin-right:5px;
  color:#23bc62;
  animation:mrtb-solfege-listening-dot .75s ease-in-out infinite alternate;
}

.mrtb-solfege-voice-box.error{
  border-color:rgba(235,72,72,.25);
  background:linear-gradient(180deg,#fff4f4,#ffe1e1);
}

@keyframes mrtb-solfege-listening-dot{
  from{ opacity:.35; }
  to{ opacity:1; }
}

.mrtb-solfege-note-token.voice-correct,
.mrtb-solfege-note-token.voice-wrong,
.mrtb-solfege-note-token.voice-missed{
  position:relative;
  border-radius:17px;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.mrtb-solfege-note-token.voice-correct{
  background:linear-gradient(180deg,rgba(194,255,211,.32),rgba(58,214,110,.64)) !important;
  box-shadow:inset 0 0 0 4px rgba(24,174,78,.32),0 7px 14px rgba(35,190,88,.18) !important;
}

.mrtb-solfege-note-token.voice-wrong,
.mrtb-solfege-note-token.voice-missed{
  background:linear-gradient(180deg,rgba(255,224,224,.3),rgba(255,104,104,.58)) !important;
  box-shadow:inset 0 0 0 4px rgba(220,54,54,.28),0 7px 14px rgba(220,54,54,.16) !important;
}

.mrtb-solfege-note-token.voice-correct::before,
.mrtb-solfege-note-token.voice-wrong::before,
.mrtb-solfege-note-token.voice-missed::before{
  position:absolute;
  left:50%;
  top:3px;
  z-index:38;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:2px solid rgba(255,255,255,.94);
  border-radius:999px;
  color:#fff;
  box-shadow:0 5px 11px rgba(35,72,92,.18);
  font-size:14px;
  line-height:1;
  font-weight:1000;
  pointer-events:none;
}

.mrtb-solfege-note-token.voice-correct::before{
  content:"✓";
  background:#24bd64;
}

.mrtb-solfege-note-token.voice-wrong::before{
  content:"✕";
  background:#ed5555;
}

.mrtb-solfege-note-token.voice-missed::before{
  content:"—";
  background:#e77858;
}

.mrtb-solfege-note-token.voice-correct .head{
  border-color:#128f48 !important;
  background:#24bd64 !important;
}

.mrtb-solfege-note-token.voice-wrong .head,
.mrtb-solfege-note-token.voice-missed .head{
  border-color:#b72f36 !important;
  background:#ed5555 !important;
}

/* Η ενεργή πορτοκαλί νότα δεν σκεπάζει το αποτέλεσμα φωνής. */
.mrtb-solfege-note-token.game-active.voice-correct,
.mrtb-solfege-note-token.game-active.voice-wrong,
.mrtb-solfege-note-token.game-active.voice-missed{
  transform:translateY(-2px);
}

.mrtb-solfege-game-overlay[data-phase="voicewait"]{
  color:#153624;
  background:linear-gradient(180deg,rgba(221,255,228,.98),rgba(93,221,133,.96));
}

@media (max-width:1200px){
  .mrtb-solfege-voice-box{
    flex:1 1 220px;
  }
}

@media (max-width:900px){
  .mrtb-solfege-voice-toggle{
    flex:1 1 150px;
  }

  .mrtb-solfege-voice-box{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   v0.7.5 · πιο αξιόπιστη αναγνώριση λέξεων
   ========================================================= */

.mrtb-solfege-voice-box{
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:8px;
  min-width:260px;
}

.mrtb-solfege-voice-box [data-solfege-voice-status]{
  grid-column:1;
}

.mrtb-solfege-voice-box [data-solfege-voice-score]{
  grid-column:2;
  grid-row:1;
  white-space:nowrap;
}

.mrtb-solfege-voice-box [data-solfege-voice-transcript]{
  grid-column:1 / -1;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#4d5d73;
  font-size:8px;
  line-height:1.2;
  font-weight:900;
}

@media (max-width:900px){
  .mrtb-solfege-voice-box{
    grid-template-columns:1fr;
    min-width:0;
  }

  .mrtb-solfege-voice-box [data-solfege-voice-score],
  .mrtb-solfege-voice-box [data-solfege-voice-status],
  .mrtb-solfege-voice-box [data-solfege-voice-transcript]{
    grid-column:1;
    grid-row:auto;
  }
}