/*
 * MR Theory Board · Template 4 GAME FINAL
 * Περιλαμβάνει multiplayer game 1–10 παικτών.
 * Το αρχείο πρέπει να αποθηκευτεί ως:
 * assets/css/tonoi-imitonia.css
 */

/*
 * MR Theory Board · Τόνοι/Ημιτόνια GAME v2 · 2026-07-11
 * ΠΛΗΡΕΣ CSS αρχείο.
 * Περιλαμβάνει όλο το προηγούμενο template + multiplayer game 1–10 παικτών.
 */

/* =========================================================
   MR Theory Board · Template 4 · Τόνοι / Ημιτόνια
   Αρχείο: assets/css/tonoi-imitonia.css
   ========================================================= */

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

.mrtb-app[data-scene="tones-semitones"] .mrtb-shell{
  grid-template-rows:auto auto minmax(0,1fr) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-board-wrap{
  background:
    radial-gradient(circle at 10% 12%,rgba(255,255,255,.86) 0 34px,transparent 36px),
    radial-gradient(circle at 86% 10%,rgba(255,255,255,.7) 0 46px,transparent 48px),
    linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px) 0 0/42px 42px,
    linear-gradient(0deg,rgba(255,255,255,.24) 1px,transparent 1px) 0 0/42px 42px,
    linear-gradient(180deg,#82ddff 0%,#b8efff 46%,#b9f27d 100%) !important;
}

.mrtb-app[data-scene="tones-semitones"]:not(.mrtb-tools-hidden) .mrtb-sidebar{
  display:grid !important;
}

/* Το κανονικό Hide/Show της κεντρικής εργαλειοθήκης λειτουργεί και εδώ. */
.mrtb-app[data-scene="tones-semitones"].mrtb-tools-hidden .mrtb-sidebar{
  display:none !important;
}

.mrtb-app[data-scene="tones-semitones"].mrtb-tools-hidden .mrtb-shell{
  grid-template-rows:auto minmax(0,1fr) !important;
}

.mrtb-app[data-scene="tones-semitones"] [data-action="toggle-tools"]{
  display:inline-flex !important;
}

/* Το Draw μένει πάνω από όλη τη σελίδα, όχι πίσω από τις κάρτες. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-draw-canvas{
  display:block !important;
  z-index:200 !important;
  pointer-events:none !important;
}

.mrtb-app[data-scene="tones-semitones"].mrtb-draw-on .mrtb-draw-canvas{
  pointer-events:auto !important;
  cursor:crosshair !important;
}

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

.mrtb-tones-scene{
  --tones-ink:#263044;
  --tones-muted:#5d6b82;
  --tones-yellow:#ffb433;
  --tones-orange:#ff8c2b;
  --tones-pink:#ff6b9a;
  --tones-blue:#4697ff;
  --tones-purple:#a878ff;
  --tones-green:#32c972;
  position:absolute;
  left:18px;
  right:18px;
  top:14px;
  z-index:55;
  min-height:850px;
  padding:14px 14px 28px;
  color:var(--tones-ink);
  font-family:inherit;
  user-select:none;
}

.mrtb-tones-scene button,
.mrtb-tones-scene select{
  font:inherit;
}

.mrtb-tones-scene button{
  cursor:pointer;
}

/* ===== Hero ===== */
.mrtb-tones-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,214,.92));
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 12px 24px rgba(35,72,92,.13),inset 0 -4px 0 rgba(0,0,0,.05);
}

.mrtb-tones-hero-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,#fff4a7,#ffb433);
  color:#263044;
  font-family:"Times New Roman",serif;
  font-size:30px;
  font-weight:900;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 8px 14px rgba(255,180,51,.22);
}

.mrtb-tones-hero-copy strong{
  display:block;
  font-size:24px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-tones-hero-copy span{
  display:block;
  margin-top:4px;
  color:var(--tones-muted);
  font-size:13px;
  font-weight:850;
}

.mrtb-tones-rule{
  display:grid;
  grid-template-columns:auto auto auto auto auto auto auto auto;
  align-items:center;
  gap:5px;
  padding:8px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(38,48,68,.08);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);
}

.mrtb-tones-rule b{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(180deg,#ffe88c,#ffb433);
  font-size:16px;
  font-weight:1000;
}

.mrtb-tones-rule span{
  color:#526079;
  font-size:10px;
  font-weight:950;
}

.mrtb-tones-rule i{
  color:#ff8c2b;
  font-style:normal;
  font-weight:1000;
}

/* ===== Tabs ===== */
.mrtb-tones-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.mrtb-tones-tabs button{
  min-height:64px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:9px;
  padding:8px 12px;
  border:0;
  border-radius:18px;
  color:var(--tones-ink);
  text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(237,246,255,.92));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.07),0 7px 14px rgba(35,72,92,.1);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.mrtb-tones-tabs button:hover{
  transform:translateY(-2px);
}

.mrtb-tones-tabs button.active{
  background:linear-gradient(180deg,#fff3a9,#ffbf43);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 9px 18px rgba(255,180,51,.22);
}

.mrtb-tones-tabs button i{
  grid-row:1 / 3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.8);
  font-size:22px;
  font-style:normal;
}

.mrtb-tones-tabs button b{
  align-self:end;
  font-size:15px;
  font-weight:1000;
}

.mrtb-tones-tabs button small{
  align-self:start;
  color:#5d6b82;
  font-size:10px;
  font-weight:850;
}

.mrtb-tones-content{
  margin-top:10px;
}

/* ===== Common cards ===== */
.mrtb-tones-controls-card,
.mrtb-tones-visual-card,
.mrtb-tones-ruler-card,
.mrtb-tones-force-card,
.mrtb-tones-conversion-intro,
.mrtb-tones-conversion-main,
.mrtb-tones-enharmonic-intro,
.mrtb-tones-keyboard-card,
.mrtb-tones-definition-card{
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 10px 20px rgba(35,72,92,.11),inset 0 -4px 0 rgba(0,0,0,.045);
}

.mrtb-tones-section-title strong{
  display:block;
  font-size:15px;
  font-weight:1000;
}

.mrtb-tones-section-title span{
  display:block;
  margin-top:2px;
  color:var(--tones-muted);
  font-size:11px;
  font-weight:850;
}

.mrtb-tones-play{
  min-height:36px;
  padding:7px 13px;
  border:0;
  border-radius:13px;
  white-space:nowrap;
  color:#16375f;
  background:linear-gradient(180deg,#c8e8ff,#65b7ff);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 6px 12px rgba(70,151,255,.18);
  font-size:12px;
  font-weight:1000;
}

.mrtb-tones-play:active{
  transform:translateY(2px);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.1),0 3px 7px rgba(70,151,255,.15);
}

/* ===== Distances controls ===== */
.mrtb-tones-distance-layout{
  display:grid;
  gap:10px;
}

.mrtb-tones-controls-card{
  padding:11px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
}

.mrtb-tones-controls-head,
.mrtb-tones-conversion-intro,
.mrtb-tones-enharmonic-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mrtb-tones-controls-head strong,
.mrtb-tones-conversion-intro strong,
.mrtb-tones-enharmonic-intro strong{
  display:block;
  font-size:17px;
  font-weight:1000;
}

.mrtb-tones-controls-head span,
.mrtb-tones-conversion-intro span,
.mrtb-tones-enharmonic-intro span{
  display:block;
  margin-top:2px;
  color:var(--tones-muted);
  font-size:11px;
  font-weight:850;
}

.mrtb-tones-pair-picker{
  display:grid;
  grid-template-columns:minmax(125px,.45fr) minmax(260px,1fr) auto minmax(260px,1fr);
  align-items:center;
  gap:9px;
  margin-top:9px;
}

.mrtb-tones-pair-picker > label{
  display:grid;
  gap:4px;
}

.mrtb-tones-pair-picker > label > span{
  color:#526079;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mrtb-tones-pair-picker select{
  width:100%;
  min-height:52px;
  padding:7px 32px 7px 11px;
  border:2px solid rgba(38,48,68,.08);
  border-radius:14px;
  color:var(--tones-ink);
  background:#fff;
  font-size:15px;
  font-weight:1000;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);
}

.mrtb-tones-note-control{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#eff7ff);
  border:2px solid rgba(38,48,68,.07);
}

.mrtb-tones-note-control.side-a{
  box-shadow:inset 5px 0 0 #ffb433;
}

.mrtb-tones-note-control.side-b{
  box-shadow:inset -5px 0 0 #4697ff;
}

.mrtb-tones-note-name{
  min-width:58px;
  text-align:center;
}

.mrtb-tones-note-name span{
  display:block;
  color:#68758d;
  font-size:9px;
  font-weight:950;
}

.mrtb-tones-note-name strong{
  display:block;
  margin-top:1px;
  font-size:18px;
  font-weight:1000;
}

.mrtb-tones-accidental-buttons{
  display:grid;
  grid-template-columns:repeat(5,minmax(34px,1fr));
  gap:4px;
}

.mrtb-tones-accidental-buttons button{
  min-height:40px;
  border:0;
  border-radius:11px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e8eff9);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);
  font-family:"Noto Music","Times New Roman",serif;
  font-size:22px;
  font-weight:900;
}

.mrtb-tones-accidental-buttons button:hover{
  transform:translateY(-1px);
}

.mrtb-tones-accidental-buttons button.active{
  background:linear-gradient(180deg,#fff0a8,#ffb433);
  outline:3px solid rgba(255,180,51,.25);
}

.mrtb-tones-pair-arrow{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#ffad5a,#ff7f24);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);
  font-size:22px;
  font-weight:1000;
}

.mrtb-tones-presets{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  margin-top:8px;
}

.mrtb-tones-presets button{
  min-height:42px;
  display:grid;
  place-items:center;
  gap:1px;
  padding:5px;
  border:0;
  border-radius:12px;
  color:#263044;
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07),0 4px 8px rgba(35,72,92,.07);
}

.mrtb-tones-presets button.active{
  background:linear-gradient(180deg,#e2ffd8,#83e695);
  outline:3px solid rgba(50,201,114,.2);
}

.mrtb-tones-presets button b{
  font-size:12px;
  font-weight:1000;
}

.mrtb-tones-presets button small{
  color:#657188;
  font-size:9px;
  font-weight:900;
}

/* ===== Main staff visual ===== */
.mrtb-tones-visual-card{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);
  align-items:stretch;
  gap:10px;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.68);
}

.mrtb-tones-staff-svg{
  display:block;
  width:100%;
  height:270px;
  overflow:visible;
}

.mrtb-svg-note{
  animation:mrtb-tone-note-pop .28s cubic-bezier(.2,1.45,.35,1) both;
}

.mrtb-svg-note.note-b{
  animation-delay:.06s;
}

@keyframes mrtb-tone-note-pop{
  from{opacity:0;transform:scale(.65)}
  to{opacity:1;transform:scale(1)}
}

.mrtb-svg-force-arrow{
  animation:mrtb-tone-arrow-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes mrtb-tone-arrow-pulse{
  from{opacity:.62}
  to{opacity:1}
}

.mrtb-tones-result{
  min-height:250px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:1fr auto;
  align-items:center;
  gap:10px;
  padding:13px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#edf6ff);
  border:3px solid rgba(70,151,255,.18);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.05);
}

.mrtb-tones-result.level-half{
  border-color:rgba(255,107,154,.35);
  background:linear-gradient(180deg,#fff,#fff0f5);
}

.mrtb-tones-result.level-whole{
  border-color:rgba(70,151,255,.35);
}

.mrtb-tones-result.level-three{
  border-color:rgba(50,201,114,.35);
  background:linear-gradient(180deg,#fff,#edfff3);
}

.mrtb-tones-result.level-same{
  border-color:rgba(168,120,255,.38);
  background:linear-gradient(180deg,#fff,#f5efff);
}

.mrtb-tones-result-badge{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:24px;
  background:linear-gradient(180deg,#ffe78d,#ffb433);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.1),0 8px 15px rgba(255,180,51,.18);
}

.mrtb-tones-result.level-half .mrtb-tones-result-badge{
  background:linear-gradient(180deg,#ffd6e4,#ff6b9a);
}

.mrtb-tones-result.level-whole .mrtb-tones-result-badge{
  background:linear-gradient(180deg,#cce9ff,#4697ff);
}

.mrtb-tones-result.level-three .mrtb-tones-result-badge{
  background:linear-gradient(180deg,#d5ffc8,#32c972);
}

.mrtb-tones-result.level-same .mrtb-tones-result-badge{
  background:linear-gradient(180deg,#eadbff,#a878ff);
}

.mrtb-tones-result-badge span{
  font-size:38px;
  line-height:.9;
  font-weight:1000;
}

.mrtb-tones-result-badge small{
  margin-top:4px;
  font-size:10px;
  font-weight:950;
}

.mrtb-tones-result-copy strong{
  display:block;
  font-size:25px;
  line-height:1;
  font-weight:1000;
}

.mrtb-tones-result-copy b{
  display:block;
  margin-top:5px;
  color:#526079;
  font-size:13px;
  font-weight:1000;
}

.mrtb-tones-result-copy p{
  margin:7px 0 0;
  color:#5d6b82;
  font-size:11px;
  line-height:1.35;
  font-weight:850;
}

.mrtb-tones-equation{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  align-items:center;
  gap:6px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.9);
  border:2px dashed rgba(38,48,68,.14);
}

.mrtb-tones-equation span{
  min-height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f3f7fc;
  font-size:19px;
  font-weight:1000;
}

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

.mrtb-tones-equation em{
  padding:7px 10px;
  border-radius:11px;
  color:#fff;
  background:#263044;
  font-size:13px;
  font-style:normal;
  font-weight:1000;
}

/* ===== Ruler + accidental force ===== */
.mrtb-tones-lower-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:10px;
}

.mrtb-tones-ruler-card,
.mrtb-tones-force-card{
  min-height:205px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
}

.mrtb-tones-ruler{
  position:relative;
  display:grid;
  grid-template-columns:repeat(calc(var(--steps) + 1),minmax(0,1fr));
  align-items:start;
  gap:0;
  margin:30px 18px 0;
}

.mrtb-tones-ruler::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:13px;
  height:10px;
  border-radius:999px;
  background:#dce5f1;
}

.mrtb-tones-ruler.level-half::after,
.mrtb-tones-ruler.level-whole::after,
.mrtb-tones-ruler.level-three::after,
.mrtb-tones-ruler.level-same::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:13px;
  height:10px;
  border-radius:999px;
  opacity:.75;
}

.mrtb-tones-ruler.level-half::after{background:#ff6b9a}
.mrtb-tones-ruler.level-whole::after{background:#4697ff}
.mrtb-tones-ruler.level-three::after{background:#32c972}
.mrtb-tones-ruler.level-same::after{right:auto;width:14px;background:#a878ff}

.mrtb-tones-ruler-point{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  place-items:center;
  text-align:center;
}

.mrtb-tones-ruler-point i{
  width:34px;
  height:34px;
  display:block;
  border-radius:999px;
  background:#fff;
  border:7px solid #aebbd0;
  box-shadow:0 5px 9px rgba(35,72,92,.12);
}

.mrtb-tones-ruler-point.note-a i{
  border-color:#ffb433;
}

.mrtb-tones-ruler-point.note-b i{
  border-color:#4697ff;
}

.mrtb-tones-ruler-point.same i{
  border-color:#a878ff;
  box-shadow:0 0 0 7px rgba(168,120,255,.2),0 5px 9px rgba(35,72,92,.12);
}

.mrtb-tones-ruler-point span{
  min-height:26px;
  margin-top:7px;
  color:#526079;
  font-size:10px;
  font-weight:1000;
}

.mrtb-tones-ruler-label{
  margin-top:9px;
  padding:7px 9px;
  border-radius:12px;
  text-align:center;
  color:#526079;
  background:#f2f6fb;
  font-size:11px;
  font-weight:900;
}

.mrtb-tones-force-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}

.mrtb-tones-force-lane{
  min-width:0;
  padding:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f1f7ff);
  border:2px solid rgba(38,48,68,.07);
}

.mrtb-tones-force-note{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:6px;
}

.mrtb-tones-force-note > b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#263044;
  font-size:11px;
}

.mrtb-tones-force-note strong{
  font-size:17px;
  font-weight:1000;
}

.mrtb-tones-force-note small{
  color:#68758d;
  font-size:9px;
  font-weight:900;
}

.mrtb-tones-force-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  margin:22px 8px 2px;
}

.mrtb-tones-force-track::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:8px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#7f9cff,#c6d3e8 50%,#ff8c2b);
}

.mrtb-tones-force-track > span{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
}

.mrtb-tones-force-track > span i{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  border:4px solid #aebbd0;
}

.mrtb-tones-force-track > span.natural i{
  border-color:#263044;
}

.mrtb-tones-force-track > span small{
  margin-top:3px;
  color:#718096;
  font-size:8px;
  font-weight:900;
}

.mrtb-tones-force-token{
  position:absolute;
  z-index:4;
  left:calc((100% - 18px) * (var(--pos) / 4));
  top:-20px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#263044;
  background:linear-gradient(180deg,#fff2a1,#ffb433);
  border:3px solid #263044;
  box-shadow:0 7px 12px rgba(35,72,92,.18);
  font-family:"Noto Music","Times New Roman",serif;
  font-size:19px;
  font-weight:1000;
  transform:translateX(-8px);
  animation:mrtb-force-token .3s cubic-bezier(.2,1.4,.35,1) both;
}

.mrtb-tones-force-lane.down .mrtb-tones-force-token{
  background:linear-gradient(180deg,#dce6ff,#7f9cff);
}

@keyframes mrtb-force-token{
  from{transform:translateX(-8px) scale(.45);opacity:0}
  to{transform:translateX(-8px) scale(1);opacity:1}
}

.mrtb-tones-force-legend{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:10px;
}

.mrtb-tones-force-legend span{
  padding:5px 6px;
  border-radius:10px;
  text-align:center;
  font-size:9px;
  font-weight:950;
}

.mrtb-tones-force-legend .flat{background:#e7edff;color:#405db1}
.mrtb-tones-force-legend .natural{background:#eef1f5;color:#263044}
.mrtb-tones-force-legend .sharp{background:#fff0db;color:#b65508}

/* ===== Conversion tab ===== */
.mrtb-tones-conversion-layout{
  display:grid;
  gap:10px;
}

.mrtb-tones-conversion-intro,
.mrtb-tones-enharmonic-intro{
  padding:12px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.84);
}

.mrtb-tones-conversion-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.mrtb-tones-conversion-buttons button{
  min-height:66px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:9px;
  padding:8px 11px;
  border:0;
  border-radius:18px;
  color:#263044;
  text-align:left;
  background:linear-gradient(180deg,#fff,#eaf2fc);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 6px 12px rgba(35,72,92,.09);
}

.mrtb-tones-conversion-buttons button span{
  grid-row:1 / 3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:#263044;
  font-size:22px;
  font-weight:1000;
}

.mrtb-tones-conversion-buttons button b{
  align-self:end;
  font-size:15px;
  font-weight:1000;
}

.mrtb-tones-conversion-buttons button small{
  align-self:start;
  color:#637188;
  font-size:10px;
  font-weight:900;
}

.mrtb-tones-conversion-buttons button.active{
  background:linear-gradient(180deg,#fff3aa,#ffbf43);
  outline:4px solid rgba(255,180,51,.2);
}

.mrtb-tones-conversion-buttons button.active span{
  background:#ff7f24;
}

.mrtb-tones-conversion-main{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:10px;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.7);
}

.mrtb-tones-conversion-staff{
  min-width:0;
}

.mrtb-tones-conversion-staff .mrtb-tones-staff-svg{
  height:300px;
}

.mrtb-tones-conversion-explain{
  display:grid;
  align-content:center;
  gap:10px;
  padding:12px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#f1f7ff);
  border:3px solid rgba(70,151,255,.18);
}

.mrtb-tones-conversion-main.level-half .mrtb-tones-conversion-explain{border-color:rgba(255,107,154,.3)}
.mrtb-tones-conversion-main.level-three .mrtb-tones-conversion-explain{border-color:rgba(50,201,114,.3)}

.mrtb-tones-conversion-formula{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:7px;
  text-align:center;
}

.mrtb-tones-conversion-formula span{
  min-height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  border:3px solid rgba(38,48,68,.08);
  font-size:24px;
  font-weight:1000;
}

.mrtb-tones-conversion-formula i{
  color:#ff8c2b;
  font-size:28px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-conversion-formula b{
  grid-column:1 / 3;
  justify-self:end;
  font-size:52px;
  line-height:.85;
  font-weight:1000;
}

.mrtb-tones-conversion-formula small{
  align-self:end;
  color:#526079;
  font-size:12px;
  font-weight:1000;
}

.mrtb-tones-conversion-text{
  padding:10px;
  border-radius:15px;
  background:rgba(255,255,255,.92);
}

.mrtb-tones-conversion-text b{
  display:block;
  font-size:15px;
  font-weight:1000;
}

.mrtb-tones-conversion-text p{
  margin:5px 0 0;
  color:#5d6b82;
  font-size:11px;
  line-height:1.4;
  font-weight:850;
}

.mrtb-tones-conversion-timeline{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:7px;
}

.mrtb-tones-conversion-step{
  min-width:0;
  min-height:155px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto;
  gap:5px;
  padding:10px;
  border:0;
  border-radius:20px;
  color:#263044;
  text-align:left;
  background:linear-gradient(180deg,#fff,#edf5ff);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.07),0 8px 15px rgba(35,72,92,.09);
}

.mrtb-tones-conversion-step.active{
  background:linear-gradient(180deg,#ecffe8,#a9ff97);
  outline:4px solid rgba(50,201,114,.2);
}

.mrtb-tones-step-note{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.mrtb-tones-step-note span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#263044;
  color:#fff;
  font-family:"Noto Music","Times New Roman",serif;
  font-size:19px;
}

.mrtb-tones-step-note b{
  font-size:21px;
  font-weight:1000;
}

.mrtb-tones-step-distance{
  display:grid;
  place-items:center;
  align-content:center;
  min-width:58px;
  min-height:58px;
  border-radius:16px;
  color:#263044;
  background:linear-gradient(180deg,#ffe78d,#ffb433);
}

.mrtb-tones-step-distance strong{
  font-size:27px;
  line-height:.9;
  font-weight:1000;
}

.mrtb-tones-step-distance small{
  margin-top:2px;
  font-size:8px;
  font-weight:950;
}

.mrtb-tones-conversion-step em{
  grid-column:1 / -1;
  font-size:14px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-conversion-step p{
  grid-column:1 / -1;
  margin:0;
  color:#617086;
  font-size:10px;
  line-height:1.3;
  font-weight:850;
}

.mrtb-tones-conversion-plus{
  align-self:center;
  min-width:64px;
  display:grid;
  place-items:center;
  padding:8px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(180deg,#ffad5a,#ff7f24);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 6px 12px rgba(255,127,36,.17);
  font-size:20px;
  font-weight:1000;
}

.mrtb-tones-conversion-plus small{
  margin-top:3px;
  text-align:center;
  font-size:8px;
  line-height:1.05;
  font-weight:900;
}

.mrtb-tones-warning-card{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius:17px;
  background:linear-gradient(180deg,#fff5c5,#ffe484);
  border:2px solid rgba(255,180,51,.35);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);
}

.mrtb-tones-warning-card > b{
  padding:6px 9px;
  border-radius:10px;
  color:#fff;
  background:#ff7f24;
  font-size:11px;
  font-weight:1000;
}

.mrtb-tones-warning-card p{
  margin:0;
  color:#5d520e;
  font-size:11px;
  font-weight:900;
}

/* ===== Enharmonic tab ===== */
.mrtb-tones-enharmonic-layout{
  display:grid;
  gap:10px;
}

.mrtb-tones-enharmonic-picker{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}

.mrtb-tones-enharmonic-picker button{
  min-height:40px;
  padding:5px;
  border:0;
  border-radius:12px;
  color:#263044;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07),0 4px 8px rgba(35,72,92,.07);
  font-size:11px;
  font-weight:1000;
}

.mrtb-tones-enharmonic-picker button.active{
  background:linear-gradient(180deg,#eadcff,#a878ff);
  outline:3px solid rgba(168,120,255,.2);
}

.mrtb-tones-enharmonic-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr);
  align-items:center;
  gap:10px;
}

.mrtb-tones-spelling-card{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto auto;
  padding:11px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#edf5ff);
  border:3px solid rgba(38,48,68,.08);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.06),0 9px 18px rgba(35,72,92,.1);
}

.mrtb-tones-spelling-card.spelling-a{border-color:rgba(255,180,51,.35)}
.mrtb-tones-spelling-card.spelling-b{border-color:rgba(70,151,255,.35)}

.mrtb-tones-spelling-card > span{
  color:#657188;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mrtb-tones-spelling-card > strong{
  grid-column:1;
  font-size:32px;
  line-height:1;
  font-weight:1000;
}

.mrtb-tones-spelling-card > small{
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  min-width:58px;
  min-height:58px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  background:#263044;
  font-family:"Noto Music","Times New Roman",serif;
  font-size:24px;
  font-weight:900;
}

.mrtb-tones-mini-staff{
  grid-column:1 / -1;
  display:block;
  width:100%;
  height:145px;
  margin-top:5px;
  border-radius:16px;
  background:rgba(255,255,255,.68);
}

.mrtb-tones-same-sound{
  position:relative;
  min-height:210px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  text-align:center;
}

.mrtb-tones-sound-rings{
  position:relative;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
}

.mrtb-tones-sound-rings i{
  position:absolute;
  inset:0;
  border:4px solid rgba(168,120,255,.55);
  border-radius:999px;
  animation:mrtb-sound-ring 1.7s ease-out infinite;
}

.mrtb-tones-sound-rings i:nth-child(2){animation-delay:.45s}
.mrtb-tones-sound-rings i:nth-child(3){animation-delay:.9s}

@keyframes mrtb-sound-ring{
  0%{transform:scale(.35);opacity:0}
  25%{opacity:1}
  100%{transform:scale(1.12);opacity:0}
}

.mrtb-tones-sound-rings b{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#cfb4ff,#8c5bec);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 8px 15px rgba(168,120,255,.22);
  font-size:32px;
}

.mrtb-tones-same-sound > strong{
  font-size:16px;
  font-weight:1000;
}

.mrtb-tones-same-sound > span{
  color:#657188;
  font-size:10px;
  font-weight:900;
}

.mrtb-tones-equals{
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:210px;
  height:64px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  color:#a878ff;
  font-size:70px;
  font-weight:1000;
  opacity:.18;
}

.mrtb-tones-keyboard-card{
  padding:11px;
  border-radius:22px;
  background:rgba(255,255,255,.84);
}

.mrtb-tones-keyboard{
  position:relative;
  width:min(760px,100%);
  height:135px;
  margin:10px auto 2px;
}

.mrtb-tones-white-keys{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:3px;
}

.mrtb-tones-white-keys > span{
  position:relative;
  border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,#fff,#e7eef8);
  border:2px solid rgba(38,48,68,.14);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.1),0 5px 9px rgba(35,72,92,.08);
}

.mrtb-tones-white-keys > span.target{
  background:linear-gradient(180deg,#f1e7ff,#b58bff);
  outline:5px solid rgba(168,120,255,.25);
}

.mrtb-tones-black-keys{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.mrtb-tones-black-keys > span{
  position:absolute;
  left:calc((100% / 8) * var(--key));
  top:0;
  width:calc((100% / 8) * .64);
  height:82px;
  transform:translateX(-50%);
  border-radius:0 0 11px 11px;
  color:#fff;
  background:linear-gradient(180deg,#303a50,#101623);
  box-shadow:inset 0 -7px 0 rgba(255,255,255,.07),0 6px 10px rgba(0,0,0,.2);
}

.mrtb-tones-black-keys > span.target{
  background:linear-gradient(180deg,#d3baff,#8a55e9);
  outline:5px solid rgba(168,120,255,.25);
}

.mrtb-tones-keyboard i{
  position:absolute;
  left:50%;
  bottom:10px;
  width:max-content;
  max-width:120px;
  transform:translateX(-50%);
  color:#263044;
  text-align:center;
  font-size:10px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-black-keys i{
  bottom:7px;
  color:#fff;
}

.mrtb-tones-definition-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-radius:20px;
  background:linear-gradient(180deg,#f6f0ff,#ddcaff);
}

.mrtb-tones-definition-symbol{
  min-width:190px;
  padding:10px 13px;
  border-radius:15px;
  color:#fff;
  background:#7040c8;
  text-align:center;
  font-size:22px;
  font-weight:1000;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);
}

.mrtb-tones-definition-card > div:nth-child(2) b{
  display:block;
  font-size:16px;
  font-weight:1000;
}

.mrtb-tones-definition-card > div:nth-child(2) p{
  margin:3px 0 0;
  color:#5c5271;
  font-size:11px;
  font-weight:900;
}

.mrtb-tones-zero{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:20px;
  color:#fff;
  background:#a878ff;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.1);
  font-size:30px;
  line-height:.85;
  font-weight:1000;
}

.mrtb-tones-zero small{
  margin-top:4px;
  font-size:8px;
  font-weight:950;
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .mrtb-tones-hero{
    grid-template-columns:auto 1fr;
  }

  .mrtb-tones-rule{
    grid-column:1 / -1;
    justify-self:stretch;
    justify-content:center;
  }

  .mrtb-tones-pair-picker{
    grid-template-columns:140px 1fr auto 1fr;
  }

  .mrtb-tones-visual-card,
  .mrtb-tones-conversion-main{
    grid-template-columns:1fr;
  }

  .mrtb-tones-result{
    min-height:0;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto;
  }

  .mrtb-tones-equation{
    grid-column:auto;
  }

  .mrtb-tones-lower-grid{
    grid-template-columns:1fr;
  }

  .mrtb-tones-conversion-staff .mrtb-tones-staff-svg{
    height:270px;
  }

  .mrtb-tones-enharmonic-stage{
    grid-template-columns:1fr 160px 1fr;
  }
}

@media (max-width:900px){
  .mrtb-tones-scene{
    left:6px;
    right:6px;
    top:6px;
    padding:6px 6px 20px;
  }

  .mrtb-tones-hero{
    grid-template-columns:auto 1fr;
    padding:9px;
    border-radius:18px;
  }

  .mrtb-tones-hero-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:24px;
  }

  .mrtb-tones-hero-copy strong{
    font-size:18px;
  }

  .mrtb-tones-hero-copy span{
    font-size:10px;
  }

  .mrtb-tones-rule{
    display:flex;
    flex-wrap:wrap;
    padding:6px;
  }

  .mrtb-tones-tabs{
    gap:5px;
  }

  .mrtb-tones-tabs button{
    min-height:58px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    place-items:center;
    gap:1px;
    padding:5px;
    text-align:center;
  }

  .mrtb-tones-tabs button i{
    grid-row:auto;
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:17px;
  }

  .mrtb-tones-tabs button b{
    font-size:12px;
  }

  .mrtb-tones-tabs button small{
    display:none;
  }

  .mrtb-tones-controls-head,
  .mrtb-tones-conversion-intro,
  .mrtb-tones-enharmonic-intro{
    align-items:flex-start;
  }

  .mrtb-tones-controls-head strong,
  .mrtb-tones-conversion-intro strong,
  .mrtb-tones-enharmonic-intro strong{
    font-size:14px;
  }

  .mrtb-tones-controls-head span,
  .mrtb-tones-conversion-intro span,
  .mrtb-tones-enharmonic-intro span{
    font-size:9px;
  }

  .mrtb-tones-pair-picker{
    grid-template-columns:1fr;
  }

  .mrtb-tones-pair-arrow{
    width:34px;
    height:34px;
    margin:0 auto;
    transform:rotate(90deg);
  }

  .mrtb-tones-presets{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mrtb-tones-presets button:last-child{
    grid-column:1 / -1;
  }

  .mrtb-tones-visual-card{
    padding:5px;
  }

  .mrtb-tones-staff-svg,
  .mrtb-tones-conversion-staff .mrtb-tones-staff-svg{
    height:auto;
    min-height:220px;
  }

  .mrtb-tones-result{
    grid-template-columns:auto 1fr;
  }

  .mrtb-tones-equation{
    grid-column:1 / -1;
  }

  .mrtb-tones-result-copy strong{
    font-size:20px;
  }

  .mrtb-tones-force-grid{
    grid-template-columns:1fr;
  }

  .mrtb-tones-force-legend{
    grid-template-columns:1fr;
  }

  .mrtb-tones-conversion-buttons{
    grid-template-columns:1fr;
  }

  .mrtb-tones-conversion-timeline{
    grid-template-columns:1fr;
  }

  .mrtb-tones-conversion-plus{
    min-width:0;
    min-height:48px;
  }

  .mrtb-tones-enharmonic-picker{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mrtb-tones-enharmonic-stage{
    grid-template-columns:1fr;
  }

  .mrtb-tones-same-sound{
    min-height:135px;
  }

  .mrtb-tones-equals{
    width:100%;
  }

  .mrtb-tones-keyboard{
    height:115px;
  }

  .mrtb-tones-black-keys > span{
    height:70px;
  }

  .mrtb-tones-definition-card{
    grid-template-columns:1fr auto;
  }

  .mrtb-tones-definition-symbol{
    grid-column:1 / -1;
    min-width:0;
  }
}

@media (max-width:560px){
  .mrtb-tones-play{
    min-height:32px;
    padding:5px 8px;
    font-size:10px;
  }

  .mrtb-tones-accidental-buttons button{
    min-height:36px;
    font-size:19px;
  }

  .mrtb-tones-result-badge{
    width:68px;
    height:68px;
    border-radius:19px;
  }

  .mrtb-tones-result-badge span{
    font-size:30px;
  }

  .mrtb-tones-equation{
    grid-template-columns:1fr auto 1fr;
  }

  .mrtb-tones-equation em{
    grid-column:1 / -1;
    text-align:center;
  }

  .mrtb-tones-conversion-formula span{
    min-height:48px;
    font-size:19px;
  }

  .mrtb-tones-enharmonic-picker{
    grid-template-columns:1fr 1fr;
  }
}

/* ===== Template 4 · μία ενιαία σελίδα ===== */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-tabs{
  display:none !important;
}

.mrtb-tones-content-single{
  margin-top:10px !important;
}

/* Η σκηνή μένει κάτω από το draw canvas. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-scene{
  z-index:55 !important;
}


/* =========================================================
   Template 4 · καθαρή σκηνή χωρίς το παλιό staff / piano
   ========================================================= */

.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-staff,
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-mini-piano,
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-board-note,
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-note-beam,
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-board-tuplet,
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] [data-board] > .mrtb-chord-stem-link{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Η νέα σκηνή και το Draw μένουν πάνω από οτιδήποτε δημιουργήσει το βασικό board. */
.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] .mrtb-tones-scene{
  position:absolute !important;
  z-index:120 !important;
}

.mrtb-app.mrtb-tones-mode[data-scene="tones-semitones"] .mrtb-draw-canvas{
  z-index:220 !important;
}


/* =========================================================
   Template 4 · Compact one-screen layout + reveal answer
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-scene{
  left:7px !important;
  right:7px !important;
  top:5px !important;
  min-height:690px !important;
  padding:5px 6px 10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-hero{
  gap:9px !important;
  padding:6px 9px !important;
  border-radius:18px !important;
  box-shadow:0 7px 14px rgba(35,72,92,.10),inset 0 -3px 0 rgba(0,0,0,.045) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-hero-icon{
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
  font-size:23px !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09),0 5px 9px rgba(255,180,51,.18) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-hero-copy strong{
  font-size:18px !important;
  line-height:1 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-hero-copy span{
  margin-top:2px !important;
  font-size:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-rule{
  gap:4px !important;
  padding:5px 7px !important;
  border-radius:14px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-rule b{
  min-width:23px !important;
  height:23px !important;
  border-radius:8px !important;
  font-size:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-rule span{
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-content-single{
  margin-top:6px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-distance-layout{
  gap:6px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-controls-card{
  padding:7px !important;
  border-radius:17px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-controls-head strong{
  font-size:14px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-controls-head span{
  font-size:9px !important;
}

.mrtb-tones-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-play,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-reveal{
  min-height:30px !important;
  padding:5px 9px !important;
  border:0 !important;
  border-radius:11px !important;
  white-space:nowrap !important;
  font-size:10px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
}

.mrtb-tones-reveal{
  color:#493100;
  background:linear-gradient(180deg,#fff2a8,#ffbd3f);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 5px 10px rgba(255,180,51,.15);
}

.mrtb-tones-reveal.active{
  color:#263044;
  background:linear-gradient(180deg,#dfffd6,#72dc89);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker{
  grid-template-columns:minmax(110px,.36fr) minmax(230px,1fr) 34px minmax(230px,1fr) !important;
  gap:6px !important;
  margin-top:5px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker > label{
  gap:2px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker > label > span{
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker select{
  min-height:40px !important;
  padding:4px 27px 4px 8px !important;
  border-radius:11px !important;
  font-size:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-note-control{
  gap:5px !important;
  padding:4px 6px !important;
  border-radius:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-note-name{
  min-width:48px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-note-name span{
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-note-name strong{
  font-size:15px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-accidental-buttons{
  grid-template-columns:repeat(5,minmax(29px,1fr)) !important;
  gap:3px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-accidental-buttons button{
  min-height:32px !important;
  border-radius:9px !important;
  font-size:18px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-arrow{
  width:34px !important;
  height:34px !important;
  font-size:18px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-presets{
  gap:4px !important;
  margin-top:5px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-presets button{
  min-height:32px !important;
  padding:3px 4px !important;
  border-radius:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-presets button b{
  font-size:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-presets button small{
  font-size:7.5px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-visual-card{
  grid-template-columns:minmax(0,1.55fr) minmax(255px,.45fr) !important;
  gap:7px !important;
  padding:6px !important;
  border-radius:18px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staff-svg{
  height:205px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result{
  min-height:195px !important;
  gap:7px !important;
  padding:8px !important;
  border-radius:17px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-badge{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-badge span{
  font-size:29px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-badge small{
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-copy strong{
  font-size:19px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-copy b{
  margin-top:3px !important;
  font-size:11px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-result-copy p{
  margin-top:4px !important;
  font-size:9px !important;
  line-height:1.25 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-equation{
  gap:4px !important;
  padding:5px !important;
  border-radius:12px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-equation span{
  min-height:32px !important;
  border-radius:9px !important;
  font-size:14px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-equation i{
  font-size:18px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-equation em{
  padding:5px 7px !important;
  border-radius:8px !important;
  font-size:10px !important;
}

.mrtb-tones-result-hidden{
  border-color:rgba(154,168,188,.45) !important;
  background:linear-gradient(180deg,#fff,#f1f4f8) !important;
}

.mrtb-tones-result-hidden .mrtb-tones-result-badge{
  background:linear-gradient(180deg,#eef2f7,#b8c3d3) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-lower-grid{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;
  gap:7px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler-card,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-card{
  min-height:132px !important;
  padding:7px !important;
  border-radius:17px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-section-title strong{
  font-size:12px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-section-title span{
  margin-top:1px !important;
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler{
  margin:17px 11px 0 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler::before,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler.level-half::after,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler.level-whole::after,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler.level-three::after,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler.level-same::after{
  top:10px !important;
  height:7px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler-point i{
  width:25px !important;
  height:25px !important;
  border-width:5px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler-point span{
  min-height:18px !important;
  margin-top:4px !important;
  font-size:7px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-ruler-label{
  margin-top:4px !important;
  padding:4px 6px !important;
  border-radius:9px !important;
  font-size:8px !important;
}

.mrtb-tones-hidden-ruler{
  min-height:62px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:7px;
  margin-top:5px;
  padding:7px;
  border-radius:13px;
  background:linear-gradient(180deg,#fff,#eef3f8);
  border:2px dashed rgba(82,96,121,.25);
}

.mrtb-tones-hidden-ruler span{
  min-height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  font-size:13px;
  font-weight:1000;
}

.mrtb-tones-hidden-ruler b{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#aeb9c9;
  color:#fff;
  font-size:22px;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-grid{
  gap:5px !important;
  margin-top:6px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane{
  padding:5px !important;
  border-radius:12px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-note{
  gap:4px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-note > b{
  width:20px !important;
  height:20px !important;
  border-radius:6px !important;
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-note strong{
  font-size:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-note small{
  font-size:7px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-track{
  margin:14px 5px 0 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-track > span i{
  width:14px !important;
  height:14px !important;
  border-width:3px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-track > span small{
  font-size:6px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-token{
  top:-15px !important;
  width:27px !important;
  height:27px !important;
  border-radius:9px !important;
  border-width:2px !important;
  font-size:15px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-legend{
  gap:3px !important;
  margin-top:5px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-legend span{
  padding:3px 4px !important;
  border-radius:7px !important;
  font-size:7px !important;
}

/* Όταν κρύβεται το toolbar, το board παίρνει αμέσως όλο τον χώρο. */
.mrtb-app[data-scene="tones-semitones"].mrtb-tools-hidden .mrtb-tones-scene{
  top:5px !important;
}

/* Tablet / μικρότερο desktop */
@media (max-width:1200px){
  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-hero-copy span{
    display:none !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-rule{
    grid-column:auto !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker{
    grid-template-columns:110px 1fr 32px 1fr !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-visual-card{
    grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr) !important;
  }
}

@media (max-width:900px){
  .mrtb-tones-head-actions{
    flex-wrap:wrap;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-picker{
    grid-template-columns:1fr !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-pair-arrow{
    margin:0 auto !important;
    transform:rotate(90deg) !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-visual-card,
  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-lower-grid{
    grid-template-columns:1fr !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staff-svg{
    height:auto !important;
    min-height:190px !important;
  }
}


/* =========================================================
   Template 4 · Οπτική σκάλα ημιτονίων
   Κάθε σκαλοπάτι = 1 ημιτόνιο
   ========================================================= */

/* ----- Κύρια σκάλα απόστασης ----- */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase{
  position:relative;
  height:92px;
  margin:4px 8px 0;
  overflow:visible;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step{
  position:absolute;
  left:var(--left);
  bottom:calc(9px + (var(--level) * var(--rise)));
  width:calc(var(--width) + 2px);
  min-width:0;
  z-index:2;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-platform{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:16px;
  border-radius:5px 5px 2px 2px;
  color:#fff;
  background:linear-gradient(180deg,#78baff,#4697ff);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 4px 7px rgba(35,72,92,.12);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-platform small{
  font-size:7px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
}

/* Το κάθετο μέρος του επόμενου σκαλοπατιού. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step:not(.last)::after{
  content:"";
  position:absolute;
  right:-2px;
  width:5px;
  height:var(--rise);
  border-radius:4px;
  background:#4697ff;
  box-shadow:2px 0 0 rgba(255,255,255,.6);
}

/* Ανεβαίνουμε προς τα δεξιά. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.direction-up .mrtb-tones-stair-step:not(.last)::after{
  bottom:16px;
}

/* Κατεβαίνουμε προς τα δεξιά. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.direction-down .mrtb-tones-stair-step:not(.last)::after{
  top:16px;
}

/* Αρχική και τελική νότα. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-a .mrtb-tones-stair-platform{
  background:linear-gradient(180deg,#ffd977,#ffb433);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-a:not(.last)::after{
  background:#ffb433;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-b .mrtb-tones-stair-platform{
  background:linear-gradient(180deg,#8dc5ff,#4697ff);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.same .mrtb-tones-stair-platform{
  background:linear-gradient(180deg,#d7c0ff,#a878ff);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-note{
  position:absolute;
  left:50%;
  top:20px;
  max-width:100%;
  transform:translateX(-50%);
  color:#263044;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  text-align:center;
  white-space:nowrap;
}

/* Χρώμα σκάλας ανά είδος απόστασης. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.level-half .mrtb-tones-stair-step:not(.note-a) .mrtb-tones-stair-platform,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.level-half .mrtb-tones-stair-step:not(.note-a)::after{
  background:#ff6b9a;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.level-three .mrtb-tones-stair-step:not(.note-a) .mrtb-tones-stair-platform,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase.level-three .mrtb-tones-stair-step:not(.note-a)::after{
  background:#32c972;
}

/* ----- Σκάλα αλλοιώσεων: ♭ χαμηλά, ♮ κέντρο, ♯ ψηλά ----- */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-staircase{
  position:relative;
  height:72px;
  margin:3px 5px 0;
  overflow:visible;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step{
  position:absolute;
  left:var(--step-left);
  bottom:calc(4px + (var(--step-index) * 9px));
  width:calc(20% + 1px);
  min-width:0;
  z-index:2;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step > i{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:12px;
  border-radius:4px 4px 1px 1px;
  color:#fff;
  background:linear-gradient(90deg,#7f9cff,#8aa7ff);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
  font-style:normal;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:nth-child(3) > i{
  background:#263044;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:nth-child(4) > i,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:nth-child(5) > i{
  background:linear-gradient(90deg,#ffae5c,#ff8c2b);
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:not(.last)::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:12px;
  width:4px;
  height:9px;
  border-radius:3px;
  background:inherit;
  background:#8aa7ff;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:nth-child(3)::after{
  background:#263044;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step:nth-child(4)::after{
  background:#ff8c2b;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step > i small{
  font-size:6px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step > em{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  color:#607087;
  font-size:6px;
  line-height:1;
  font-style:normal;
  font-weight:1000;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step.active > i{
  outline:3px solid rgba(255,184,46,.34);
  outline-offset:2px;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-step .mrtb-tones-force-token{
  position:absolute !important;
  left:50% !important;
  top:-24px !important;
  width:25px !important;
  height:25px !important;
  display:grid !important;
  place-items:center !important;
  transform:translateX(-50%) !important;
  border:2px solid #263044 !important;
  border-radius:8px !important;
  color:#263044 !important;
  background:linear-gradient(180deg,#fff1a1,#ffb433) !important;
  box-shadow:0 5px 9px rgba(35,72,92,.16) !important;
  font-family:"Noto Music","Times New Roman",serif !important;
  font-size:14px !important;
  font-weight:1000 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.down .mrtb-tones-force-step .mrtb-tones-force-token{
  background:linear-gradient(180deg,#e4eaff,#7f9cff) !important;
}

/* Τα παλιά οριζόντια tracks δεν χρησιμοποιούνται πλέον. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-track{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staircase{
    height:88px;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-staircase{
    height:68px;
  }
}


/* =========================================================
   Template 4 · Χρώματα σκάλας ανά νότα
   A / κάτω νότα = πορτοκαλί
   B / πάνω νότα = μπλε
   ========================================================= */

/* ----- Κύρια σκάλα απόστασης ----- */

/* Η αρχική / κάτω νότα παραμένει πορτοκαλί. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-a .mrtb-tones-stair-platform,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-a:not(.last)::after{
  background:linear-gradient(180deg,#ffd66f,#ff9f2f) !important;
}

/* Όλα τα επόμενα / επάνω βήματα έχουν το μπλε της δεύτερης νότας. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step:not(.note-a) .mrtb-tones-stair-platform,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step:not(.note-a):not(.last)::after{
  background:linear-gradient(180deg,#8bc8ff,#4697ff) !important;
}

/* Η τελική νότα Β είναι καθαρά μπλε. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.note-b .mrtb-tones-stair-platform{
  background:linear-gradient(180deg,#8bc8ff,#4697ff) !important;
}

/* Στην ταυτοφωνία κρατάμε το μωβ, επειδή και οι δύο νότες συμπίπτουν. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-stair-step.same .mrtb-tones-stair-platform{
  background:linear-gradient(180deg,#d9c3ff,#a878ff) !important;
}

/* ----- Σκάλα αλλοιώσεων της νότας A ----- */

/* Όλα τα σκαλοπάτια της πρώτης / κάτω νότας είναι πορτοκαλί. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-a .mrtb-tones-force-step > i,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-a .mrtb-tones-force-step::after{
  background:linear-gradient(180deg,#ffd66f,#ff9f2f) !important;
}

/* Η φυσική θέση της A λίγο πιο σκούρα για να ξεχωρίζει. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-a .mrtb-tones-force-step.natural > i{
  background:linear-gradient(180deg,#ffc14f,#f18418) !important;
}

/* Το σύμβολο αλλοίωσης της A έχει επίσης πορτοκαλί χρώμα. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-a .mrtb-tones-force-token{
  background:linear-gradient(180deg,#fff0a6,#ff9f2f) !important;
  border-color:#9f5108 !important;
}

/* ----- Σκάλα αλλοιώσεων της νότας B ----- */

/* Όλα τα σκαλοπάτια της δεύτερης / επάνω νότας είναι μπλε. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-b .mrtb-tones-force-step > i,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-b .mrtb-tones-force-step::after{
  background:linear-gradient(180deg,#9bd0ff,#4697ff) !important;
}

/* Η φυσική θέση της B λίγο πιο σκούρα για να ξεχωρίζει. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-b .mrtb-tones-force-step.natural > i{
  background:linear-gradient(180deg,#63b0ff,#2678d8) !important;
}

/* Το σύμβολο αλλοίωσης της B έχει επίσης μπλε χρώμα. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-b .mrtb-tones-force-token{
  background:linear-gradient(180deg,#d9eeff,#4697ff) !important;
  border-color:#175ba5 !important;
}

/* Τα ενεργά σκαλοπάτια τονίζονται με το ίδιο χρώμα της νότας. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-a .mrtb-tones-force-step.active > i{
  outline-color:rgba(255,159,47,.45) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-force-lane.side-b .mrtb-tones-force-step.active > i{
  outline-color:rgba(70,151,255,.45) !important;
}


/* =========================================================
   Template 4 · Multiplayer Game · 1 έως 10 παίκτες
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"].mrtb-tones-game-mode .mrtb-tones-scene{
  min-height:730px !important;
}

.mrtb-tones-game-shell{
  display:grid;
  gap:9px;
  min-height:700px;
  color:#263044;
}

.mrtb-tones-game-hero,
.mrtb-tones-game-hud{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border-radius:19px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.95));
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 9px 18px rgba(35,72,92,.12),inset 0 -3px 0 rgba(0,0,0,.05);
}

.mrtb-tones-game-hero-icon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(180deg,#ffe98a,#ffb433);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1);
  font-size:24px;
}

.mrtb-tones-game-hero > div:nth-child(2){
  min-width:0;
  flex:1;
}

.mrtb-tones-game-hero strong{
  display:block;
  font-size:19px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-tones-game-hero span{
  display:block;
  margin-top:3px;
  color:#627086;
  font-size:10px;
  font-weight:900;
}

.mrtb-tones-game-close{
  flex:0 0 auto;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  color:#641616;
  background:linear-gradient(180deg,#ffd0d0,#ff7474);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1);
  font:inherit;
  font-size:20px;
  font-weight:1000;
  cursor:pointer;
}

/* ----- Setup ----- */

.mrtb-tones-game-setup-card{
  width:min(1120px,100%);
  justify-self:center;
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 12px 24px rgba(35,72,92,.13),inset 0 -4px 0 rgba(0,0,0,.045);
}

.mrtb-tones-game-setup-section{
  display:grid;
  gap:8px;
  padding:11px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#eef6ff);
  border:2px solid rgba(38,48,68,.06);
}

.mrtb-tones-game-setup-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.mrtb-tones-game-setup-title b{
  font-size:15px;
  font-weight:1000;
}

.mrtb-tones-game-setup-title span{
  color:#647288;
  font-size:10px;
  font-weight:900;
}

.mrtb-tones-player-count{
  display:grid;
  grid-template-columns:repeat(10,minmax(44px,1fr));
  gap:6px;
}

.mrtb-tones-player-count button{
  min-height:46px;
  border:0;
  border-radius:13px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e9f1fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 5px 10px rgba(35,72,92,.08);
  font:inherit;
  font-size:18px;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-tones-player-count button.active{
  color:#fff;
  background:linear-gradient(180deg,#69b8ff,#327fdc);
  outline:4px solid rgba(70,151,255,.2);
}

.mrtb-tones-level-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.mrtb-tones-level-cards button{
  min-height:118px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  padding:11px;
  border:0;
  border-radius:19px;
  color:#263044;
  text-align:left;
  background:linear-gradient(180deg,#fff,#eef5ff);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.07),0 7px 14px rgba(35,72,92,.09);
  font:inherit;
  cursor:pointer;
}

.mrtb-tones-level-cards button i{
  grid-row:1 / 3;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  background:#263044;
  font-size:21px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-level-cards button b{
  align-self:end;
  font-size:17px;
  font-weight:1000;
}

.mrtb-tones-level-cards button span{
  align-self:start;
  color:#637188;
  font-size:10px;
  line-height:1.3;
  font-weight:900;
}

.mrtb-tones-level-cards button.active{
  background:linear-gradient(180deg,#fff2a9,#ffbf43);
  outline:4px solid rgba(255,180,51,.22);
}

.mrtb-tones-level-cards button.active i{
  background:#ff7f24;
}

.mrtb-tones-game-start{
  min-height:52px;
  border:0;
  border-radius:17px;
  color:#133e23;
  background:linear-gradient(180deg,#b7ffa4,#45d674);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.1),0 8px 15px rgba(50,201,114,.16);
  font:inherit;
  font-size:17px;
  font-weight:1000;
  cursor:pointer;
}

/* ----- HUD ----- */

.mrtb-tones-game-hud-title{
  min-width:0;
  flex:1;
}

.mrtb-tones-game-hud-title b{
  display:block;
  font-size:16px;
  font-weight:1000;
}

.mrtb-tones-game-hud-title span{
  color:#627086;
  font-size:9px;
  font-weight:900;
}

.mrtb-tones-game-hud-chip{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#eef4fb;
  color:#526079;
  font-size:9px;
  font-weight:950;
}

.mrtb-tones-game-hud-chip b{
  color:#263044;
  font-size:12px;
}

/* ----- Dynamic player grid ----- */

.mrtb-tones-game-grid{
  display:grid;
  grid-template-columns:repeat(var(--game-cols),minmax(0,1fr));
  gap:7px;
  align-items:stretch;
}

.mrtb-tones-player-card{
  min-width:0;
  display:grid;
  align-content:start;
  gap:5px;
  padding:7px;
  border-radius:17px;
  background:linear-gradient(180deg,#fff,#eef6ff);
  border:3px solid hsla(var(--player-hue),75%,55%,.3);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.05),0 7px 14px rgba(35,72,92,.09);
  overflow:hidden;
}

.mrtb-tones-player-card.correct{
  background:linear-gradient(180deg,#f5fff1,#caffd4);
  border-color:rgba(50,201,114,.62);
}

.mrtb-tones-player-card.wrong{
  background:linear-gradient(180deg,#fff7f7,#ffd5d5);
  border-color:rgba(255,91,91,.58);
}

.mrtb-tones-player-head{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:5px;
}

.mrtb-tones-player-head > b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:1000;
}

.mrtb-tones-player-head > span{
  min-width:30px;
  padding:3px 6px;
  border-radius:999px;
  text-align:center;
  color:#263044;
  background:hsl(var(--player-hue),85%,82%);
  font-size:9px;
  font-weight:1000;
}

.mrtb-tones-player-head > button{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  color:#fff;
  background:hsl(var(--player-hue),67%,48%);
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-tones-player-question{
  text-align:center;
  color:#526079;
  font-size:9px;
  font-weight:1000;
}

.mrtb-tones-game-staff{
  display:block;
  width:100%;
  height:105px;
  overflow:visible;
}

.mrtb-tones-game-note-pair,
.mrtb-tones-game-current-pair{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:4px;
  text-align:center;
}

.mrtb-tones-game-note-pair span,
.mrtb-tones-game-current-pair span{
  min-height:27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  font-size:12px;
  font-weight:1000;
}

.mrtb-tones-game-note-pair i,
.mrtb-tones-game-current-pair i{
  color:#ff8c2b;
  font-size:17px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-game-current-pair{
  grid-template-columns:1fr auto 1fr auto;
}

.mrtb-tones-game-current-pair em{
  min-width:27px;
  min-height:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#263044;
  font-size:10px;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-game-answer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

.mrtb-tones-game-answer-grid button{
  min-height:31px;
  padding:3px;
  border:0;
  border-radius:9px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e5edf8);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font:inherit;
  font-size:8.5px;
  line-height:1.05;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-tones-game-answer-grid button.chosen{
  background:linear-gradient(180deg,#fff0a3,#ffbc3e);
}

.mrtb-tones-game-answer-grid button:disabled{
  cursor:default;
}

.mrtb-tones-game-feedback{
  min-height:20px;
  display:grid;
  place-items:center;
  padding:3px 5px;
  border-radius:8px;
  color:#627086;
  background:rgba(255,255,255,.78);
  text-align:center;
  font-size:8px;
  line-height:1.15;
  font-weight:1000;
}

.mrtb-tones-player-card.correct .mrtb-tones-game-feedback{
  color:#177843;
}

.mrtb-tones-player-card.wrong .mrtb-tones-game-feedback{
  color:#b32b2b;
}

/* ----- Level 2 conversion ----- */

.mrtb-tones-conversion-target{
  min-height:36px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff2af,#ffc24e);
  font-size:8px;
  font-weight:900;
}

.mrtb-tones-conversion-target b{
  grid-column:1;
  font-size:11px;
  font-weight:1000;
}

.mrtb-tones-conversion-target small{
  grid-column:2;
  grid-row:1 / 3;
  min-width:42px;
  min-height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#fff;
  background:#ff7f24;
  font-size:7px;
  font-weight:1000;
}

.mrtb-tones-game-acc-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

.mrtb-tones-game-acc-selector{
  min-width:0;
  display:grid;
  gap:3px;
  padding:4px;
  border-radius:10px;
  background:#fff;
  border:2px solid rgba(38,48,68,.06);
}

.mrtb-tones-game-acc-selector.side-a{
  box-shadow:inset 4px 0 0 #ff9f2f;
}

.mrtb-tones-game-acc-selector.side-b{
  box-shadow:inset -4px 0 0 #4697ff;
}

.mrtb-tones-game-acc-selector > b{
  text-align:center;
  font-size:10px;
  font-weight:1000;
}

.mrtb-tones-game-acc-selector > div{
  display:grid;
  grid-template-columns:repeat(5,minmax(22px,1fr));
  gap:2px;
}

.mrtb-tones-game-acc-selector button{
  min-height:27px;
  padding:1px;
  border:0;
  border-radius:7px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e7edf6);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
  font-family:"Noto Music","Times New Roman",serif;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

.mrtb-tones-game-acc-selector button.active{
  background:linear-gradient(180deg,#fff0a5,#ffbd40);
  outline:2px solid rgba(255,180,51,.28);
}

.mrtb-tones-game-check{
  min-height:30px;
  border:0;
  border-radius:9px;
  color:#173e24;
  background:linear-gradient(180deg,#baffaa,#50d779);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);
  font:inherit;
  font-size:10px;
  font-weight:1000;
  cursor:pointer;
}

/* ----- Round actions ----- */

.mrtb-tones-game-round-actions{
  position:sticky;
  bottom:6px;
  z-index:20;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.mrtb-tones-game-round-actions button{
  min-width:230px;
  min-height:42px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(180deg,#5db0ff,#277bd7);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 9px 18px rgba(35,72,92,.2);
  font:inherit;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
  pointer-events:auto;
}

/* ----- Result ----- */

.mrtb-tones-result-grid{
  display:grid;
  grid-template-columns:repeat(var(--result-cols),minmax(0,1fr));
  gap:8px;
  padding:11px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:2px solid rgba(255,255,255,.94);
}

.mrtb-tones-result-grid article{
  min-height:130px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  padding:9px;
  border-radius:17px;
  background:linear-gradient(180deg,#fff,#edf5ff);
  border:3px solid hsla(var(--player-hue),75%,55%,.3);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.05);
}

.mrtb-tones-result-grid article.winner{
  background:linear-gradient(180deg,#fff5b9,#ffc750);
  outline:4px solid rgba(255,184,46,.25);
}

.mrtb-tones-result-grid article span{
  font-size:30px;
}

.mrtb-tones-result-grid article b{
  font-size:13px;
  font-weight:1000;
}

.mrtb-tones-result-grid article strong{
  font-size:25px;
  font-weight:1000;
}

.mrtb-tones-result-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}

.mrtb-tones-result-actions button{
  min-height:40px;
  padding:7px 12px;
  border:0;
  border-radius:13px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e8eff8);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);
  font:inherit;
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-tones-result-actions button.good{
  background:linear-gradient(180deg,#b7ffa5,#4dd778);
}

.mrtb-tones-result-actions button.blue{
  background:linear-gradient(180deg,#b7e0ff,#5aaeff);
}

/* ----- Responsive ----- */

@media (max-width:1350px){
  .mrtb-tones-game-grid{
    grid-template-columns:repeat(min(var(--game-cols),3),minmax(0,1fr));
  }

  .mrtb-tones-game-staff{
    height:96px;
  }
}

@media (max-width:1000px){
  .mrtb-tones-player-count{
    grid-template-columns:repeat(5,1fr);
  }

  .mrtb-tones-level-cards{
    grid-template-columns:1fr;
  }

  .mrtb-tones-game-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mrtb-tones-game-hud{
    flex-wrap:wrap;
  }

  .mrtb-tones-game-hud-title{
    flex-basis:60%;
  }
}

@media (max-width:620px){
  .mrtb-tones-game-grid{
    grid-template-columns:1fr;
  }

  .mrtb-tones-game-setup-title{
    display:grid;
  }

  .mrtb-tones-player-count{
    grid-template-columns:repeat(5,1fr);
  }

  .mrtb-tones-game-acc-row{
    grid-template-columns:1fr;
  }

  .mrtb-tones-result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   Template 4 GAME · σωστές θέσεις πενταγράμμου
   + απαγόρευση διασταυρωμένων νοτών
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-staff{
  width:100% !important;
  height:122px !important;
  min-height:122px !important;
  overflow:visible !important;
}

/* Αλλοιώσεις που θα έκαναν τη 2η νότα χαμηλότερη από την 1η. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-acc-selector button.forbidden{
  opacity:.28 !important;
  filter:grayscale(1) !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  background:#dfe4ec !important;
  outline:none !important;
}

/* Το επιλεγμένο κουμπί δεν πρέπει ποτέ να φαίνεται απαγορευμένο. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-acc-selector button.active:not(.forbidden){
  opacity:1 !important;
  filter:none !important;
}

@media (max-width:1350px){
  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-staff{
    height:116px !important;
    min-height:116px !important;
  }
}


/* =========================================================
   Template 4 GAME · Ονόματα παικτών
   ========================================================= */

.mrtb-tones-player-name-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin-top:3px;
}

.mrtb-tones-player-name-grid label{
  min-width:0;
  display:grid;
  gap:3px;
  padding:6px;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(38,48,68,.06);
}

.mrtb-tones-player-name-grid label span{
  color:#526079;
  font-size:8px;
  font-weight:1000;
}

.mrtb-tones-player-name-grid input{
  width:100%;
  min-width:0;
  min-height:35px;
  padding:6px 8px;
  border:2px solid rgba(38,48,68,.1);
  border-radius:9px;
  outline:0;
  color:#263044;
  background:#fff;
  font:inherit;
  font-size:11px;
  font-weight:950;
  user-select:text;
}

.mrtb-tones-player-name-grid input:focus{
  border-color:#4697ff;
  box-shadow:0 0 0 3px rgba(70,151,255,.16);
}

@media (max-width:1000px){
  .mrtb-tones-player-name-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:560px){
  .mrtb-tones-player-name-grid{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   Template 4 GAME · Layout fix
   Μικρό HUD + μεγαλύτερες ασκήσεις / πεντάγραμμα
   ========================================================= */

/* Το επάνω HUD δεν επιτρέπεται να τεντώνεται κατακόρυφα. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-shell.playing{
  min-height:0 !important;
  height:auto !important;
  align-content:start !important;
  grid-template-rows:auto auto auto !important;
  gap:6px !important;
}

/* Compact γραμμή Lv / γύρου / παικτών / σκορ. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-shell.playing .mrtb-tones-game-hud{
  align-self:start !important;
  min-height:50px !important;
  max-height:58px !important;
  padding:5px 8px !important;
  gap:6px !important;
  border-radius:14px !important;
  box-shadow:0 6px 13px rgba(35,72,92,.10),inset 0 -2px 0 rgba(0,0,0,.04) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-hud-title b{
  font-size:14px !important;
  line-height:1 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-hud-title span{
  display:block !important;
  margin-top:2px !important;
  font-size:8px !important;
  line-height:1 !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-hud-chip{
  padding:4px 8px !important;
  font-size:8px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-hud-chip b{
  font-size:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-shell.playing .mrtb-tones-game-close{
  width:29px !important;
  height:29px !important;
  font-size:17px !important;
}

/* Οι ασκήσεις ξεκινούν αμέσως κάτω από το HUD. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid{
  align-self:start !important;
  margin:0 !important;
  gap:8px !important;
}

/* =========================================================
   1–2 παίκτες: αξιοποίηση όλης της οθόνης
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2{
  min-height:clamp(500px,65vh,650px) !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-player-card,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-player-card{
  height:100% !important;
  min-height:500px !important;
  padding:11px !important;
  gap:8px !important;
  border-radius:20px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-player-head > b,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-player-head > b{
  font-size:15px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-player-head > span,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-player-head > span{
  min-width:40px !important;
  padding:5px 8px !important;
  font-size:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-player-head > button,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-player-head > button{
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
  font-size:19px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-conversion-target,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-conversion-target{
  min-height:55px !important;
  padding:7px 10px !important;
  border-radius:13px !important;
  font-size:10px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-conversion-target b,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-conversion-target b{
  font-size:15px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-conversion-target small,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-conversion-target small{
  min-width:58px !important;
  min-height:40px !important;
  font-size:9px !important;
}

/* Μεγαλύτερο πεντάγραμμο και μεγαλύτερες νότες μέσω κλιμάκωσης του SVG. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-staff{
  height:clamp(240px,31vh,310px) !important;
  min-height:240px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-staff{
  height:clamp(205px,27vh,260px) !important;
  min-height:205px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-current-pair,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-current-pair{
  gap:6px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-current-pair span,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-current-pair span{
  min-height:38px !important;
  border-radius:11px !important;
  font-size:15px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-current-pair i,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-current-pair i{
  font-size:23px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-current-pair em,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-current-pair em{
  min-width:36px !important;
  min-height:36px !important;
  font-size:13px !important;
}

/* Μεγαλύτεροι επιλογείς αλλοιώσεων. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-acc-row,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-acc-row{
  gap:7px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-acc-selector,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-acc-selector{
  padding:7px !important;
  gap:5px !important;
  border-radius:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-acc-selector > b,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-acc-selector > b{
  font-size:13px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-acc-selector button,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-acc-selector button{
  min-height:42px !important;
  border-radius:10px !important;
  font-size:21px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-check,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-check{
  min-height:42px !important;
  border-radius:12px !important;
  font-size:14px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-feedback,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-feedback{
  min-height:27px !important;
  font-size:10px !important;
}

/* =========================================================
   3–5 παίκτες: μεσαίο πεντάγραμμο
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-3 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-4 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-5 .mrtb-tones-game-staff{
  height:150px !important;
  min-height:150px !important;
}

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-3 .mrtb-tones-player-card,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-4 .mrtb-tones-player-card,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-5 .mrtb-tones-player-card{
  padding:8px !important;
  gap:6px !important;
}

/* 6–10 παίκτες παραμένουν compact για να χωρούν σωστά. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-6 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-7 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-8 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-9 .mrtb-tones-game-staff,
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-10 .mrtb-tones-game-staff{
  height:112px !important;
  min-height:112px !important;
}

/* Σε χαμηλότερη οθόνη κρατάμε το HUD compact χωρίς να κόβουμε τις κάρτες. */
@media (max-height:800px){
  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-1 .mrtb-tones-game-staff{
    height:220px !important;
    min-height:220px !important;
  }

  .mrtb-app[data-scene="tones-semitones"] .mrtb-tones-game-grid.players-2 .mrtb-tones-game-staff{
    height:190px !important;
    min-height:190px !important;
  }
}


/* =========================================================
   Template 4 · Πιανάκι μετακίνησης αλλοιώσεων
   Αντικαθιστά το παλιό section με τις σκάλες "δύναμης".
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-piano-card{
  min-height:132px !important;
  padding:7px !important;
  overflow:visible !important;
}

.mrtb-tones-piano-movements{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:5px;
}

.mrtb-tones-piano-move{
  min-width:0;
  display:grid;
  grid-template-columns:auto 18px auto minmax(0,1fr);
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border-radius:11px;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(38,48,68,.06);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.04);
}

.mrtb-tones-piano-move.side-a{
  box-shadow:inset 4px 0 0 #ff9f2f,inset 0 -2px 0 rgba(0,0,0,.04);
}

.mrtb-tones-piano-move.side-b{
  box-shadow:inset -4px 0 0 #4697ff,inset 0 -2px 0 rgba(0,0,0,.04);
}

.mrtb-tones-piano-move span,
.mrtb-tones-piano-move strong{
  font-size:11px;
  line-height:1;
  font-weight:1000;
}

.mrtb-tones-piano-move.side-a strong{
  color:#b95b08;
}

.mrtb-tones-piano-move.side-b strong{
  color:#175fae;
}

.mrtb-tones-piano-move i{
  color:#ff8c2b;
  text-align:center;
  font-size:15px;
  line-height:1;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-piano-move small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#647288;
  font-size:7px;
  font-weight:900;
}

.mrtb-tones-piano-distance{
  display:flex;
  justify-content:center;
  margin:4px 0 2px;
}

.mrtb-tones-piano-distance-copy{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  color:#526079;
  background:rgba(255,255,255,.74);
  border:2px dashed rgba(82,96,121,.16);
}

.mrtb-tones-piano-distance-copy b{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#263044;
  font-size:11px;
  font-weight:1000;
}

.mrtb-tones-piano-distance-copy span{
  font-size:8px;
  font-weight:1000;
}

/* Μικρό χρωματικό πιανάκι. Κάθε πλήκτρο = 1 ημιτόνιο. */
.mrtb-tones-movement-piano{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--piano-keys),minmax(24px,1fr));
  align-items:start;
  gap:2px;
  height:78px;
  padding:4px;
  border-radius:14px;
  background:#263044;
  box-shadow:0 7px 13px rgba(35,72,92,.14),inset 0 0 0 2px rgba(255,255,255,.1);
  overflow:visible;
}

.mrtb-tones-piano-key{
  position:relative;
  min-width:0;
  height:68px;
  z-index:1;
}

.mrtb-tones-piano-key-face{
  position:absolute;
  inset:0;
  display:block;
  border-radius:4px 4px 8px 8px;
  background:linear-gradient(180deg,#fff,#e8eef6);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.09);
  transition:transform .16s ease,opacity .16s ease,filter .16s ease;
}

.mrtb-tones-piano-key.black{
  height:45px;
  z-index:3;
}

.mrtb-tones-piano-key.black .mrtb-tones-piano-key-face{
  background:linear-gradient(180deg,#38445b,#111824);
  box-shadow:inset 0 -5px 0 rgba(255,255,255,.06),0 4px 7px rgba(0,0,0,.18);
}

/* Όλα τα μη επιλεγμένα πλήκτρα είναι ήσυχα. */
.mrtb-tones-piano-key:not(.selected-a):not(.selected-b) .mrtb-tones-piano-key-face{
  opacity:.62;
  filter:saturate(.45);
}

/* Τα ενδιάμεσα ημιτόνια φαίνονται ακόμα πιο αχνά. */
.mrtb-tones-piano-key.between .mrtb-tones-piano-key-face{
  opacity:.32 !important;
  filter:grayscale(.25) saturate(.25) !important;
}

.mrtb-tones-piano-key.between::after{
  content:"1 ημ.";
  position:absolute;
  left:50%;
  bottom:5px;
  z-index:6;
  transform:translateX(-50%);
  color:#647288;
  font-size:6px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
  opacity:.58;
}

/* 1η νότα = πορτοκαλί. */
.mrtb-tones-piano-key.selected-a .mrtb-tones-piano-key-face{
  opacity:1 !important;
  filter:none !important;
  background:linear-gradient(180deg,#ffd978,#ff9f2f) !important;
  box-shadow:
    inset 0 -7px 0 rgba(132,65,4,.18),
    0 0 0 3px rgba(255,159,47,.25),
    0 7px 13px rgba(255,159,47,.2) !important;
  transform:translateY(-3px);
}

/* 2η νότα = μπλε. */
.mrtb-tones-piano-key.selected-b .mrtb-tones-piano-key-face{
  opacity:1 !important;
  filter:none !important;
  background:linear-gradient(180deg,#9bd1ff,#4697ff) !important;
  box-shadow:
    inset 0 -7px 0 rgba(19,81,145,.18),
    0 0 0 3px rgba(70,151,255,.25),
    0 7px 13px rgba(70,151,255,.2) !important;
  transform:translateY(-3px);
}

/* Ταυτοφωνία: και τα δύο χρώματα στο ίδιο πλήκτρο. */
.mrtb-tones-piano-key.selected-both .mrtb-tones-piano-key-face{
  background:linear-gradient(135deg,#ffae38 0 48%,#4697ff 52% 100%) !important;
  box-shadow:
    inset 0 -7px 0 rgba(0,0,0,.12),
    0 0 0 4px rgba(168,120,255,.25),
    0 7px 13px rgba(92,70,145,.18) !important;
}

/* Θέση της φυσικής νότας πριν την αλλοίωση. */
.mrtb-tones-piano-key.natural-a:not(.selected-a) .mrtb-tones-piano-key-face{
  outline:2px dashed rgba(255,159,47,.82);
  outline-offset:-4px;
}

.mrtb-tones-piano-key.natural-b:not(.selected-b) .mrtb-tones-piano-key-face{
  outline:2px dashed rgba(70,151,255,.82);
  outline-offset:-4px;
}

.mrtb-tones-piano-origin{
  position:absolute;
  left:50%;
  top:4px;
  z-index:8;
  max-width:90%;
  transform:translateX(-50%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:2px 3px;
  border-radius:5px;
  background:rgba(255,255,255,.78);
  font-size:5.5px;
  line-height:1;
  font-style:normal;
  font-weight:1000;
}

.mrtb-tones-piano-origin.origin-a{
  color:#ad5608;
}

.mrtb-tones-piano-origin.origin-b{
  color:#185fae;
}

.mrtb-tones-piano-note-label{
  position:absolute;
  left:50%;
  top:-17px;
  z-index:12;
  min-width:46px;
  max-width:110px;
  transform:translateX(-50%);
  padding:3px 6px;
  border-radius:999px;
  color:#263044;
  background:#fff;
  text-align:center;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
  box-shadow:0 4px 8px rgba(35,72,92,.14);
}

.mrtb-tones-piano-note-label.note-a{
  border:2px solid #ff9f2f;
}

.mrtb-tones-piano-note-label.note-b{
  border:2px solid #4697ff;
}

.mrtb-tones-piano-note-label.both{
  border:2px solid #a878ff;
}

.mrtb-tones-piano-step{
  position:absolute;
  left:50%;
  bottom:7px;
  z-index:10;
  transform:translateX(-50%);
  min-width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#526079;
  background:rgba(255,255,255,.76);
  font-size:6px;
  line-height:1;
  font-weight:1000;
}

.mrtb-tones-piano-key.selected-a .mrtb-tones-piano-step,
.mrtb-tones-piano-key.selected-b .mrtb-tones-piano-step{
  color:#fff;
  background:#263044;
}

.mrtb-tones-piano-legend{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:5px;
  margin-top:4px;
}

.mrtb-tones-piano-legend span{
  padding:3px 5px;
  border-radius:7px;
  text-align:center;
  color:#627086;
  background:rgba(255,255,255,.72);
  font-size:6.5px;
  font-weight:1000;
}

.mrtb-tones-piano-legend .note-a{
  color:#a65308;
  background:#fff0dc;
}

.mrtb-tones-piano-legend .note-b{
  color:#175fae;
  background:#e2f1ff;
}

.mrtb-tones-piano-legend .between{
  opacity:.72;
}

/* Οι παλιές σκάλες δύναμης δεν χρησιμοποιούνται πλέον. */
.mrtb-tones-force-grid,
.mrtb-tones-force-legend,
.mrtb-tones-force-staircase{
  display:none !important;
}

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

  .mrtb-tones-piano-move{
    grid-template-columns:auto 18px auto 1fr;
  }

  .mrtb-tones-movement-piano{
    grid-template-columns:repeat(var(--piano-keys),minmax(20px,1fr));
  }
}


/* =========================================================
   Template 4 · Κανονικό πιάνο μίας οκτάβας
   ========================================================= */

.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-real-piano-card{
  min-height:132px !important;
  padding:7px !important;
  overflow:visible !important;
}

.mrtb-octave-distance-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  margin:4px auto 5px;
  padding:3px 8px;
  border-radius:999px;
  color:#526079;
  background:rgba(255,255,255,.88);
  border:2px dashed rgba(82,96,121,.17);
}

.mrtb-octave-distance-badge b{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#263044;
  font-size:11px;
  font-weight:1000;
}

.mrtb-octave-distance-badge span{
  font-size:8px;
  font-weight:1000;
}

.mrtb-octave-piano-wrap{
  padding:17px 4px 2px;
}

.mrtb-octave-piano{
  position:relative;
  width:100%;
  height:104px;
  margin:0 auto;
  border:4px solid #263044;
  border-radius:10px 10px 15px 15px;
  background:#263044;
  box-shadow:
    0 8px 15px rgba(35,72,92,.16),
    inset 0 0 0 2px rgba(255,255,255,.08);
}

.mrtb-octave-white-keys{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:3px;
  z-index:1;
}

.mrtb-octave-white-key{
  position:relative;
  min-width:0;
  height:100%;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#fff,#e8eef7);
  box-shadow:
    inset 0 -9px 0 rgba(0,0,0,.1),
    inset -2px 0 0 rgba(38,48,68,.12);
}

.mrtb-octave-key-name{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  color:#68758d;
  font-size:7px;
  font-weight:1000;
}

/* Τα πλήκτρα ανάμεσα στις δύο νότες είναι πιο αχνά. */
.mrtb-octave-white-key.between{
  opacity:.47;
  background:linear-gradient(180deg,#f8fbff,#cdd8e6);
}

.mrtb-octave-black-keys{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.mrtb-octave-black-key{
  position:absolute;
  left:var(--black-left);
  top:0;
  width:8.2%;
  height:62px;
  transform:translateX(-50%);
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#39455b,#111824);
  box-shadow:
    inset 0 -7px 0 rgba(255,255,255,.06),
    0 5px 9px rgba(0,0,0,.22);
}

.mrtb-octave-black-key.between{
  opacity:.42;
  background:linear-gradient(180deg,#7b8799,#424c5b);
}

/* 1η νότα: πορτοκαλί. */
.mrtb-octave-white-key.selected-a,
.mrtb-octave-black-key.selected-a{
  opacity:1 !important;
  background:linear-gradient(180deg,#ffd978,#ff9f2f) !important;
  box-shadow:
    inset 0 -9px 0 rgba(138,67,3,.16),
    0 0 0 4px rgba(255,159,47,.28),
    0 7px 14px rgba(255,159,47,.24) !important;
  z-index:7;
}

/* 2η νότα: μπλε. */
.mrtb-octave-white-key.selected-b,
.mrtb-octave-black-key.selected-b{
  opacity:1 !important;
  background:linear-gradient(180deg,#9cd2ff,#4697ff) !important;
  box-shadow:
    inset 0 -9px 0 rgba(18,75,135,.16),
    0 0 0 4px rgba(70,151,255,.28),
    0 7px 14px rgba(70,151,255,.24) !important;
  z-index:7;
}

/* Ταυτοφωνία: και τα δύο χρώματα στο ίδιο πλήκτρο. */
.mrtb-octave-white-key.selected-both,
.mrtb-octave-black-key.selected-both{
  opacity:1 !important;
  background:linear-gradient(135deg,#ffae38 0 48%,#4697ff 52% 100%) !important;
  box-shadow:
    inset 0 -9px 0 rgba(0,0,0,.12),
    0 0 0 4px rgba(168,120,255,.3),
    0 7px 14px rgba(92,70,145,.2) !important;
}

.mrtb-octave-note-tag{
  position:absolute;
  left:50%;
  top:-18px;
  z-index:12;
  min-width:46px;
  max-width:110px;
  transform:translateX(-50%);
  padding:3px 6px;
  border-radius:999px;
  color:#263044;
  background:#fff;
  text-align:center;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
  box-shadow:0 4px 8px rgba(35,72,92,.15);
}

.mrtb-octave-note-tag.note-a{
  border:2px solid #ff9f2f;
}

.mrtb-octave-note-tag.note-b{
  border:2px solid #4697ff;
}

.mrtb-octave-note-tag.both{
  border:2px solid #a878ff;
}

.mrtb-octave-step{
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:15;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border-radius:999px;
  color:#526079;
  background:rgba(255,255,255,.86);
  border:2px solid rgba(82,96,121,.15);
  font-size:6px;
  font-weight:1000;
}

.mrtb-octave-black-key .mrtb-octave-step{
  bottom:5px;
}

.mrtb-octave-step.between{
  opacity:.62;
}

.mrtb-octave-white-key.selected-a .mrtb-octave-step,
.mrtb-octave-black-key.selected-a .mrtb-octave-step,
.mrtb-octave-white-key.selected-b .mrtb-octave-step,
.mrtb-octave-black-key.selected-b .mrtb-octave-step{
  color:#fff;
  background:#263044;
  border-color:#263044;
}

.mrtb-octave-semitone-caption{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:5px;
  margin-top:5px;
}

.mrtb-octave-semitone-caption span{
  padding:3px 6px;
  border-radius:8px;
  color:#647288;
  background:rgba(255,255,255,.72);
  text-align:center;
  font-size:6.5px;
  font-weight:1000;
}

.mrtb-octave-semitone-caption .note-a{
  color:#a65308;
  background:#fff0dc;
}

.mrtb-octave-semitone-caption .note-b{
  color:#175fae;
  background:#e2f1ff;
}

/* Κρύβονται τα στοιχεία του προηγούμενου μη κανονικού piano. */
.mrtb-tones-piano-card:not(.mrtb-tones-real-piano-card),
.mrtb-tones-movement-piano,
.mrtb-tones-piano-distance,
.mrtb-tones-piano-legend{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-octave-piano{
    height:92px;
  }

  .mrtb-octave-black-key{
    height:55px;
  }

  .mrtb-octave-note-tag{
    min-width:40px;
    padding:3px 4px;
    font-size:7px;
  }
}


/* =========================================================
   Template 4 · Απόσταση πιο ψηλά + εγγραφή από πιάνο
   ========================================================= */

/* Δίνει περισσότερο καθαρό χώρο επάνω από τις αλλοιώσεις. */
.mrtb-app[data-scene="tones-semitones"] .mrtb-tones-staff-svg{
  overflow:visible !important;
}

/* Επιλογή ποια νότα γράφει το πιάνο. */
.mrtb-tones-piano-write-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:5px 0 3px;
}

.mrtb-tones-piano-write-controls > span{
  color:#526079;
  font-size:8px;
  font-weight:1000;
}

.mrtb-tones-piano-write-controls button{
  min-height:28px;
  padding:4px 9px;
  border:0;
  border-radius:9px;
  color:#263044;
  background:linear-gradient(180deg,#fff,#e8eef6);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font:inherit;
  font-size:8px;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-tones-piano-write-controls button.side-a.active{
  color:#7d3e05;
  background:linear-gradient(180deg,#ffe5a1,#ff9f2f);
  outline:3px solid rgba(255,159,47,.24);
}

.mrtb-tones-piano-write-controls button.side-b.active{
  color:#154d87;
  background:linear-gradient(180deg,#cde9ff,#4697ff);
  outline:3px solid rgba(70,151,255,.24);
}

/* Τα πλήκτρα είναι πραγματικά buttons. */
.mrtb-octave-white-key,
.mrtb-octave-black-key{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  pointer-events:auto !important;
}

.mrtb-octave-white-key:hover,
.mrtb-octave-black-key:hover{
  filter:brightness(1.05);
}

.mrtb-octave-white-key:active{
  transform:translateY(3px);
}

.mrtb-octave-black-key:active{
  transform:translateX(-50%) translateY(3px);
}

/* Τα labels μέσα στα πλήκτρα δεν κλέβουν το click. */
.mrtb-octave-note-tag,
.mrtb-octave-step,
.mrtb-octave-key-name{
  pointer-events:none !important;
}