/* Θεωρία 3 · Κεφάλαιο 1: Ionian Modes · compact staff edition */

.mrtb-app.mrtb-t3-ionian-active .mrtb-mini-piano{
  display:none !important;
}

.mrtb-t3-ionian-modes-scene,
.mrtb-t3-ionian-modes-scene *{
  box-sizing:border-box;
}

.mrtb-t3-ionian-modes-scene{
  position:absolute;
  inset:8px 10px auto;
  z-index:12;
  min-height:670px;
  padding:12px;
  border-radius:22px;
  color:#18243a;
  background:
    radial-gradient(circle at 6% 0%,rgba(93,194,255,.22),transparent 30%),
    radial-gradient(circle at 95% 8%,rgba(137,105,255,.17),transparent 28%),
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(239,247,255,.96));
  border:1px solid rgba(42,83,136,.14);
  box-shadow:0 14px 34px rgba(35,70,116,.14);
  overflow:hidden;
}

.mrtb-t3-ionian-modes-scene.classification-view{
  min-height:742px;
}

/* ===== compact header ===== */
.t3im-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,270px);
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.t3im-heading{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.t3im-kicker{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  background:#e6f2ff;
  color:#2368b9;
  font-size:9px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
  white-space:nowrap;
}

.t3im-heading h2{
  margin:0;
  font-size:clamp(21px,2vw,29px);
  line-height:1;
}

.t3im-heading p{
  margin:4px 0 0;
  color:#60708a;
  font-size:11px;
  font-weight:800;
}

.t3im-family-select{
  display:grid;
  gap:4px;
  padding:8px 9px;
  border-radius:15px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(46,88,143,.12);
  box-shadow:0 6px 15px rgba(42,76,118,.07);
}

.t3im-family-select > span{
  color:#61708a;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3im-family-select select{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:10px;
  padding:0 10px;
  background:#edf6ff;
  color:#1c2b45;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

/* ===== view buttons ===== */
.t3im-view-switch{
  display:flex;
  gap:7px;
  margin-bottom:8px;
}

.t3im-view-switch button{
  min-height:32px;
  border:0;
  border-radius:11px;
  padding:6px 11px;
  color:#34445f;
  background:#edf3fb;
  font:inherit;
  font-size:10px;
  font-weight:900;
  box-shadow:inset 0 -2px 0 rgba(23,46,78,.08);
  cursor:pointer;
}

.t3im-view-switch button.active{
  color:#fff;
  background:linear-gradient(145deg,#3578d8,#725ce1);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 6px 14px rgba(56,80,180,.2);
}

/* ===== mode tabs ===== */
.t3im-mode-tabs{
  display:grid;
  grid-template-columns:repeat(7,minmax(90px,1fr));
  gap:6px;
  margin-bottom:8px;
  overflow:auto;
  padding:1px 0 4px;
}

.t3im-mode-tabs button{
  min-width:90px;
  min-height:47px;
  display:grid;
  grid-template-columns:21px 1fr;
  grid-template-rows:auto auto;
  column-gap:6px;
  align-items:center;
  padding:6px 8px;
  border:0;
  border-radius:12px;
  color:#26354f;
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 -3px 0 rgba(24,50,84,.07),0 5px 11px rgba(40,74,118,.07);
  cursor:pointer;
}

.t3im-mode-tabs button > span{
  grid-row:1/3;
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dceafb;
  color:#35639c;
  font-size:10px;
  font-weight:950;
}

.t3im-mode-tabs b{
  align-self:end;
  text-align:left;
  font-size:10px;
  line-height:1;
}

.t3im-mode-tabs small{
  align-self:start;
  text-align:left;
  color:#748095;
  font-size:8px;
  font-weight:850;
}

.t3im-mode-tabs button.active{
  color:#fff;
  background:linear-gradient(145deg,#3677d5,#725be0);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 7px 15px rgba(58,78,179,.2);
}

.t3im-mode-tabs button.active > span{
  color:#fff;
  background:rgba(255,255,255,.18);
}

.t3im-mode-tabs button.active small{
  color:rgba(255,255,255,.78);
}

/* ===== main mode card ===== */
.t3im-main-card{
  --t3-accent:#3474d2;
  --t3-soft:#e6f1ff;
  padding:12px;
  border-radius:19px;
  background:rgba(255,255,255,.91);
  border:1px solid rgba(42,78,126,.12);
  box-shadow:0 10px 24px rgba(35,66,106,.09);
}

.t3im-main-card.minor{
  --t3-accent:#7057d7;
  --t3-soft:#eeeaff;
}

.t3im-mode-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,320px);
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.t3im-degree{
  display:block;
  margin-bottom:2px;
  color:var(--t3-accent);
  font-size:9px;
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.t3im-mode-head h3{
  margin:0;
  font-size:clamp(25px,2.9vw,38px);
  line-height:1;
}

.t3im-mode-head p{
  margin:4px 0 0;
  color:#62718a;
  font-size:11px;
  font-weight:800;
}

.t3im-quality{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:center;
  min-height:58px;
  padding:8px 10px;
  border-radius:14px;
  background:var(--t3-soft);
  border-left:5px solid var(--t3-accent);
}

.t3im-quality > span{
  grid-row:1/3;
  min-width:76px;
  padding:7px 8px;
  border-radius:10px;
  text-align:center;
  color:#fff;
  background:var(--t3-accent);
  font-size:10px;
  font-weight:950;
}

.t3im-quality strong{
  font-size:14px;
  line-height:1;
}

.t3im-quality small{
  color:#5e6c82;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}

/* ===== staff ===== */
.t3im-staff-shell{
  width:100%;
  margin:5px 0 8px;
  padding:5px;
  border-radius:18px;
  background:linear-gradient(180deg,#f9fcff,#edf5fc);
  border:1px solid rgba(36,72,119,.1);
  overflow:hidden;
}

.t3im-staff{
  display:block;
  width:100%;
  height:190px;
  overflow:visible;
}

.t3im-staff-paper{
  fill:rgba(255,255,255,.9);
  stroke:rgba(43,82,130,.08);
  stroke-width:2;
}

.t3im-staff-line,
.t3im-ledger{
  stroke:#202a3c;
  stroke-width:2.2;
  stroke-linecap:round;
}

.t3im-clef{
  fill:#202a3c;
  font-family:"Times New Roman",serif;
  font-size:77px;
  font-weight:400;
  pointer-events:none;
}

.t3im-staff-note{
  cursor:pointer;
  outline:none;
}

.t3im-notehead{
  fill:#202a3c;
  transition:transform .14s ease,fill .14s ease,filter .14s ease;
}

.t3im-note-stem{
  stroke:#202a3c;
  stroke-width:3.2;
  stroke-linecap:round;
  transition:stroke .14s ease;
}

.t3im-staff-accidental{
  fill:#202a3c;
  font-family:"Times New Roman",serif;
  font-size:27px;
  font-weight:900;
}

.t3im-staff-degree{
  fill:#61728c;
  font-size:11px;
  font-weight:950;
}

.t3im-staff-note-name{
  fill:#1f2d45;
  font-size:14px;
  font-weight:950;
}

.t3im-staff-note.is-third .t3im-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.65));
}

.t3im-staff-note.is-third .t3im-note-stem{
  stroke:#f1a800;
}

.t3im-staff-note.is-third .t3im-staff-degree,
.t3im-staff-note.is-third .t3im-staff-note-name{
  fill:#ad6800;
}

.t3im-third-callout rect{
  fill:#fff1bc;
  stroke:#f1ad16;
  stroke-width:1.5;
}

.t3im-third-callout text{
  fill:#9c6100;
  font-size:10px;
  font-weight:950;
}

.t3im-third-callout line{
  stroke:#e5a51c;
  stroke-width:1.5;
  stroke-dasharray:3 3;
}

.t3im-staff-note.is-playing .t3im-notehead{
  fill:#ff6f7f;
  transform:scale(1.16);
  transform-origin:center;
  filter:drop-shadow(0 0 9px rgba(255,91,115,.6));
}

.t3im-staff-note.is-playing .t3im-note-stem{
  stroke:#ff6f7f;
}

/* ===== compact note/formula row ===== */
.t3im-formula-row{
  display:grid;
  grid-template-columns:repeat(7,minmax(70px,1fr));
  gap:6px;
}

.t3im-formula-row button{
  position:relative;
  min-height:60px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:1px 6px;
  align-items:center;
  padding:6px 8px;
  border:0;
  border-radius:12px;
  color:#20304a;
  background:linear-gradient(180deg,#fff,#edf4fb);
  box-shadow:inset 0 -3px 0 rgba(27,53,89,.08),0 4px 10px rgba(34,63,104,.07);
  cursor:pointer;
}

.t3im-formula-row button > small{
  grid-row:1/3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--t3-accent);
  background:#e8f1fc;
  font-size:10px;
  font-weight:950;
}

.t3im-formula-row strong{
  align-self:end;
  font-size:17px;
  line-height:1;
}

.t3im-formula-row span{
  align-self:start;
  color:#748197;
  font-size:8px;
  font-weight:850;
}

.t3im-formula-row em{
  position:absolute;
  right:4px;
  top:4px;
  padding:2px 5px;
  border-radius:999px;
  color:#9c6100;
  background:#fff1bc;
  font-size:7px;
  font-style:normal;
  font-weight:950;
}

.t3im-formula-row button.tonic{
  color:#fff;
  background:linear-gradient(145deg,var(--t3-accent),#7058dc);
}

.t3im-formula-row button.tonic > small{
  color:#fff;
  background:rgba(255,255,255,.19);
}

.t3im-formula-row button.tonic span{
  color:rgba(255,255,255,.78);
}

.t3im-formula-row button.is-third{
  outline:3px solid rgba(241,168,0,.42);
  background:linear-gradient(180deg,#fff9df,#ffecaa);
}

.t3im-formula-row button.is-playing{
  transform:translateY(-3px);
  outline:3px solid rgba(255,91,115,.45);
}

.t3im-steps{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin:5px 0 7px;
}

.t3im-steps > span{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-height:20px;
  color:#718097;
  font-size:7px;
  font-weight:850;
}

.t3im-steps b{
  display:grid;
  place-items:center;
  width:23px;
  height:18px;
  border-radius:999px;
  color:#304866;
  background:#e9f1fb;
  font-size:9px;
}

.t3im-steps i{
  position:absolute;
  right:-7px;
  color:#aab5c4;
  font-style:normal;
}

.t3im-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.t3im-actions button{
  min-height:32px;
  border:0;
  border-radius:10px;
  padding:6px 10px;
  color:#fff;
  background:linear-gradient(145deg,var(--t3-accent),#7058dc);
  font:inherit;
  font-size:9px;
  font-weight:950;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 5px 11px rgba(50,75,146,.17);
  cursor:pointer;
}

.t3im-actions > span{
  margin-left:auto;
  color:#627089;
  font-size:9px;
  font-weight:800;
}


.t3im-reference-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.t3im-reference-card{
  padding:9px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 5px 12px rgba(36,65,102,.05);
}

.t3im-reference-card.major{
  background:linear-gradient(180deg,#f6fbff,#ffffff);
}

.t3im-reference-card.minor{
  background:linear-gradient(180deg,#f8f4ff,#ffffff);
}

.t3im-reference-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.t3im-reference-head span{
  display:block;
  color:#5f7190;
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3im-reference-head h4{
  margin:2px 0 1px;
  font-size:15px;
  line-height:1.05;
}

.t3im-reference-head p{
  margin:0;
  color:#6c7a90;
  font-size:8px;
  font-weight:800;
  line-height:1.25;
}

.t3im-reference-pill{
  display:grid;
  gap:2px;
  padding:6px 8px;
  border-radius:12px;
  text-align:center;
}

.t3im-reference-pill.major{
  color:#2965b4;
  background:#e6f2ff;
}

.t3im-reference-pill.minor{
  color:#694ac0;
  background:#eee7ff;
}

.t3im-reference-pill strong{
  font-size:10px;
  line-height:1;
}

.t3im-reference-pill small{
  font-size:8px;
  font-weight:900;
}

.t3im-reference-staff-shell{
  padding:4px;
  border-radius:14px;
  background:linear-gradient(180deg,#f9fcff,#eef5fc);
  border:1px solid rgba(36,72,119,.08);
  overflow:hidden;
}

.t3im-reference-staff{
  display:block;
  width:100%;
  height:168px;
}

.t3im-reference-note .t3im-notehead,
.t3im-reference-note .t3im-note-stem{
  transition:none;
}

.t3im-reference-note.is-third .t3im-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.65));
}

.t3im-reference-note.is-third .t3im-note-stem{
  stroke:#f1a800;
}

.t3im-reference-note.is-third .t3im-staff-degree,
.t3im-reference-note.is-third .t3im-staff-note-name{
  fill:#ad6800;
}

.t3im-reference-note-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-top:6px;
}

.t3im-reference-note-row span{
  min-width:0;
  padding:4px 2px;
  border-radius:7px;
  text-align:center;
  color:#33445e;
  background:#eef3f9;
}

.t3im-reference-note-row span.is-third{
  color:#8e5700;
  background:linear-gradient(180deg,#fff2bd,#ffdc72);
  outline:2px solid rgba(235,159,0,.28);
}

.t3im-reference-note-row small,
.t3im-reference-note-row b{
  display:block;
}

.t3im-reference-note-row small{
  color:#738095;
  font-size:6px;
  font-weight:900;
}

.t3im-reference-note-row b{
  margin-top:1px;
  font-size:9px;
}

/* ===== classification scene ===== */
.t3im-classification{
  padding:10px;
  border-radius:19px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(42,78,126,.11);
  box-shadow:0 10px 24px rgba(35,66,106,.08);
}

.t3im-class-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,440px);
  gap:12px;
  align-items:center;
  margin-bottom:9px;
  padding:8px 10px;
  border-radius:14px;
  background:linear-gradient(135deg,#edf6ff,#f3efff);
}

.t3im-class-intro span{
  display:block;
  color:#356ba9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3im-class-intro strong{
  display:block;
  margin-top:2px;
  font-size:13px;
}

.t3im-class-intro p{
  margin:0;
  color:#617087;
  font-size:9px;
  font-weight:800;
  line-height:1.25;
}

.t3im-class-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.t3im-class-column{
  padding:9px;
  border-radius:16px;
  background:#f7faff;
  border:1px solid rgba(42,78,126,.09);
}

.t3im-class-column.major{
  background:linear-gradient(180deg,#f0f8ff,#f8fbff);
}

.t3im-class-column.minor{
  background:linear-gradient(180deg,#f4f0ff,#faf8ff);
}

.t3im-class-column > header{
  margin-bottom:7px;
  padding:2px 3px 6px;
  border-bottom:1px solid rgba(43,78,124,.1);
}

.t3im-class-column > header span{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  color:#2f6cad;
  background:#dfeeff;
  font-size:8px;
  font-weight:950;
}

.t3im-class-column.minor > header span{
  color:#6748bb;
  background:#e9e1ff;
}

.t3im-class-column h3{
  margin:4px 0 1px;
  font-size:17px;
  line-height:1;
}

.t3im-class-column header p{
  margin:0;
  color:#6e7b90;
  font-size:8px;
  font-weight:800;
}

.t3im-compare-card{
  margin-top:6px;
  padding:7px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 4px 10px rgba(36,65,102,.05);
}

.t3im-compare-card.major{
  --compare-accent:#3274cc;
  --compare-soft:#e6f2ff;
}

.t3im-compare-card.minor{
  --compare-accent:#7056d4;
  --compare-soft:#eee9ff;
}

.t3im-compare-open{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  color:#24334d;
  background:transparent;
  font:inherit;
  cursor:pointer;
}

.t3im-compare-open > span{
  text-align:left;
}

.t3im-compare-open b,
.t3im-compare-open small{
  display:block;
}

.t3im-compare-open b{
  font-size:11px;
}

.t3im-compare-open small{
  margin-top:1px;
  color:#7a8598;
  font-size:7px;
  font-weight:800;
}

.t3im-compare-open em{
  padding:4px 7px;
  border-radius:999px;
  color:var(--compare-accent);
  background:var(--compare-soft);
  font-size:7px;
  font-style:normal;
  font-weight:950;
  white-space:nowrap;
}

.t3im-compare-rule{
  margin:5px 0;
  color:var(--compare-accent);
  font-size:8px;
  font-weight:950;
}

.t3im-compare-notes{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}

.t3im-compare-notes > span{
  min-width:0;
  padding:4px 2px;
  border-radius:7px;
  text-align:center;
  color:#33445e;
  background:#eef3f9;
}

.t3im-compare-notes small,
.t3im-compare-notes b{
  display:block;
}

.t3im-compare-notes small{
  color:#738095;
  font-size:6px;
  font-weight:900;
}

.t3im-compare-notes b{
  margin-top:1px;
  font-size:9px;
}

.t3im-compare-notes > span.diff{
  color:#8e5700;
  background:linear-gradient(180deg,#fff2bd,#ffdc72);
  outline:2px solid rgba(235,159,0,.28);
}

.t3im-compare-notes > span.diff small{
  color:#9a6200;
}

.t3im-difference-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
}

.t3im-difference-line > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  color:#795000;
  background:#fff0b4;
  font-size:7px;
  font-weight:900;
}

.t3im-difference-line b{
  color:#b57600;
}

.t3im-difference-line strong{
  font-size:9px;
}

.t3im-difference-line.base > span{
  color:#68768c;
  background:#edf2f8;
}

/* ===== responsive ===== */
@media (max-width:1100px){
  .mrtb-t3-ionian-modes-scene{
    min-height:720px;
  }

  .t3im-mode-head{
    grid-template-columns:minmax(0,1fr) minmax(205px,270px);
  }

  .t3im-formula-row{
    overflow:auto;
    padding-bottom:4px;
  }

  .t3im-formula-row button{
    min-width:72px;
  }
}

@media (max-width:900px){
  .mrtb-t3-ionian-modes-scene{
    inset:6px 6px auto;
    min-height:940px;
    padding:9px;
    border-radius:17px;
    overflow:auto;
  }

  .mrtb-t3-ionian-modes-scene.classification-view{
    min-height:1420px;
  }

  .t3im-header{
    grid-template-columns:1fr;
    gap:7px;
  }

  .t3im-heading{
    align-items:flex-start;
  }

  .t3im-kicker{
    display:none;
  }

  .t3im-view-switch{
    overflow:auto;
  }

  .t3im-view-switch button{
    min-width:max-content;
  }

  .t3im-mode-head{
    grid-template-columns:1fr;
  }

  .t3im-quality{
    grid-template-columns:auto 1fr;
  }

  .t3im-staff-shell{
    overflow:auto;
  }

  .t3im-staff{
    min-width:720px;
  }

  .t3im-formula-row{
    grid-template-columns:repeat(7,72px);
  }

  .t3im-steps{
    min-width:530px;
  }

  .t3im-actions{
    flex-wrap:wrap;
  }

  .t3im-actions > span{
    width:100%;
    margin-left:0;
  }

  .t3im-class-intro{
    grid-template-columns:1fr;
  }

  .t3im-reference-grid,
  .t3im-class-grid{
    grid-template-columns:1fr;
  }
}


/* ===== v0.8.7 · interactive comparison / toolbar accidentals ===== */
.mrtb-app.mrtb-t3-ionian-active .mrtb-values-section,
.mrtb-app.mrtb-t3-ionian-active [data-action="toggle-value-labels"]{
  display:none !important;
}

.t3im-toolbar-accidentals{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:30px;
  padding:3px 5px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff7cf,#ffe181);
  box-shadow:inset 0 -2px 0 rgba(123,78,0,.13),0 5px 10px rgba(77,57,20,.1);
}

.t3im-toolbar-accidentals[hidden]{
  display:none !important;
}

.t3im-toolbar-label{
  padding:0 3px;
  color:#775000;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}

.t3im-toolbar-accidentals button{
  width:31px;
  min-width:31px;
  height:27px;
  border:0;
  border-radius:9px;
  color:#20283a;
  background:rgba(255,255,255,.92);
  font-family:"Times New Roman",serif;
  font-size:20px;
  font-weight:900;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);
  cursor:pointer;
}

.t3im-toolbar-accidentals button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.t3im-toolbar-status{
  max-width:150px;
  padding:0 5px;
  color:#665126;
  font-size:8px;
  font-weight:900;
  line-height:1.1;
}

.t3im-fixed-example{
  display:grid;
  gap:2px;
  padding:8px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(46,88,143,.12);
  box-shadow:0 6px 15px rgba(42,76,118,.07);
}

.t3im-fixed-example span{
  color:#61708a;
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3im-fixed-example strong{
  font-size:13px;
}

.t3im-fixed-example small{
  color:#6d7a8f;
  font-size:8px;
  font-weight:800;
}

/* Ρίζα → 3η και Ρίζα → 5η χωρίς εμφανή ονομασία διαστήματος */
.t3im-root-arrow{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:7 5;
  opacity:.9;
  pointer-events:none;
}

.t3im-root-arrow.third{
  stroke:#e7a000;
}

.t3im-root-arrow.fifth{
  stroke:#398ccf;
}

#t3im-arrow-third path{
  fill:#e7a000;
}

#t3im-arrow-fifth path{
  fill:#398ccf;
}

.t3im-staff-note.is-root .t3im-notehead{
  fill:#7057d7;
  filter:drop-shadow(0 0 7px rgba(112,87,215,.45));
}

.t3im-staff-note.is-root .t3im-note-stem{
  stroke:#7057d7;
}

.t3im-staff-note.is-fifth .t3im-notehead{
  fill:#398ccf;
  filter:drop-shadow(0 0 7px rgba(57,140,207,.5));
}

.t3im-staff-note.is-fifth .t3im-note-stem{
  stroke:#398ccf;
}

.t3im-staff-note.is-fifth .t3im-staff-degree,
.t3im-staff-note.is-fifth .t3im-staff-note-name{
  fill:#246ea7;
}

.t3im-formula-row button.is-fifth{
  outline:3px solid rgba(57,140,207,.35);
  background:linear-gradient(180deg,#f2fbff,#dff3ff);
}

/* ===== interactive natural-scale labs ===== */
.t3im-lab-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:11px;
}

.t3im-lab-card{
  --lab-accent:#3377cf;
  --lab-soft:#e8f3ff;
  padding:9px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(39,74,120,.1);
  box-shadow:0 5px 13px rgba(36,65,102,.06);
}

.t3im-lab-card.minor{
  --lab-accent:#7057d7;
  --lab-soft:#eee9ff;
}

.t3im-lab-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,250px);
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.t3im-lab-head > div:first-child > span{
  display:block;
  color:var(--lab-accent);
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3im-lab-head h3{
  margin:2px 0 1px;
  font-size:16px;
  line-height:1;
}

.t3im-lab-head p{
  margin:0;
  color:#6b7890;
  font-size:8px;
  font-weight:800;
  line-height:1.2;
}

.t3im-lab-result{
  display:grid;
  gap:2px;
  min-height:58px;
  padding:7px 9px;
  border-radius:13px;
  color:#245d9f;
  background:var(--lab-soft);
  border-left:4px solid var(--lab-accent);
}

.t3im-lab-result.minor{
  color:#6547ba;
}

.t3im-lab-result.custom{
  color:#8a5a00;
  background:#fff2c7;
  border-left-color:#e5a000;
}

.t3im-lab-result small{
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}

.t3im-lab-result strong{
  font-size:14px;
  line-height:1;
}

.t3im-lab-result span{
  color:#68768b;
  font-size:7px;
  font-weight:800;
  line-height:1.2;
}

.t3im-lab-staff-shell{
  padding:4px;
  border-radius:14px;
  background:linear-gradient(180deg,#f9fcff,#edf5fc);
  border:1px solid rgba(36,72,119,.09);
  overflow:auto hidden;
}

.t3im-lab-staff{
  display:block;
  width:100%;
  min-width:650px;
  height:176px;
}

.t3im-lab-note.is-editable{
  cursor:pointer;
}

.t3im-edit-ring{
  fill:rgba(255,210,75,.15);
  stroke:#e4a300;
  stroke-width:2;
  stroke-dasharray:4 4;
  animation:t3im-edit-pulse 1.4s ease-in-out infinite;
}

@keyframes t3im-edit-pulse{
  50%{ opacity:.42; transform:scale(1.08); transform-origin:center; }
}

.t3im-lab-note.is-selected .t3im-edit-ring{
  fill:rgba(255,188,46,.28);
  stroke-width:4;
  stroke-dasharray:none;
}

.t3im-lab-note.is-altered .t3im-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 8px rgba(255,184,46,.65));
}

.t3im-lab-note.is-altered .t3im-note-stem{
  stroke:#f1a800;
}

.t3im-lab-note.is-selected .t3im-notehead{
  fill:#ff6577;
  filter:drop-shadow(0 0 9px rgba(255,101,119,.62));
}

.t3im-lab-note.is-selected .t3im-note-stem{
  stroke:#ff6577;
}

.t3im-lab-hints{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-top:5px;
}

.t3im-lab-hints button{
  min-width:0;
  min-height:49px;
  padding:4px 2px;
  border:0;
  border-radius:8px;
  color:#748095;
  background:#eef3f8;
  font:inherit;
}

.t3im-lab-hints button.is-editable{
  color:#7d5800;
  background:#fff1bb;
  outline:2px solid rgba(226,160,0,.25);
  cursor:pointer;
}

.t3im-lab-hints button.is-selected{
  color:#963b4a;
  background:#ffe5ea;
  outline:3px solid rgba(255,101,119,.36);
}

.t3im-lab-hints button.is-altered{
  background:#ffe28a;
}

.t3im-lab-hints small,
.t3im-lab-hints b,
.t3im-lab-hints span{
  display:block;
}

.t3im-lab-hints small{
  font-size:6px;
  font-weight:950;
}

.t3im-lab-hints b{
  margin-top:1px;
  font-size:10px;
}

.t3im-lab-hints span{
  min-height:17px;
  margin-top:2px;
  font-size:6px;
  font-weight:900;
  line-height:1.05;
}

.t3im-all-modes-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:9px 0 7px;
  padding:7px 9px;
  border-radius:12px;
  background:linear-gradient(135deg,#edf6ff,#f1ecff);
}

.t3im-all-modes-head span{
  color:#3469a9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3im-all-modes-head strong{
  font-size:10px;
}

.t3im-mode-staff-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.t3im-mode-staff-column{
  padding:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#f1f8ff,#fbfdff);
  border:1px solid rgba(42,78,126,.09);
}

.t3im-mode-staff-column.minor{
  background:linear-gradient(180deg,#f5f1ff,#fcfbff);
}

.t3im-mode-staff-column > header{
  margin-bottom:6px;
  padding:2px 3px 6px;
  border-bottom:1px solid rgba(43,78,124,.1);
}

.t3im-mode-staff-column > header span{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  color:#2f6cad;
  background:#dfeeff;
  font-size:8px;
  font-weight:950;
}

.t3im-mode-staff-column.minor > header span{
  color:#6748bb;
  background:#e9e1ff;
}

.t3im-mode-staff-column h3{
  margin:4px 0 0;
  font-size:16px;
}

.t3im-mode-staff-card{
  --mode-accent:#3375ca;
  --mode-soft:#e6f2ff;
  margin-top:6px;
  padding:7px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(39,74,120,.09);
  box-shadow:0 4px 10px rgba(36,65,102,.05);
}

.t3im-mode-staff-card.minor{
  --mode-accent:#7056d4;
  --mode-soft:#eee9ff;
}

.t3im-mode-staff-card > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}

.t3im-mode-staff-card > header span{
  display:block;
  color:#7a8598;
  font-size:7px;
  font-weight:850;
}

.t3im-mode-staff-card h4{
  margin:1px 0;
  font-size:11px;
}

.t3im-mode-staff-card header p{
  margin:0;
  color:var(--mode-accent);
  font-size:7px;
  font-weight:950;
}

.t3im-mode-staff-card header em{
  padding:4px 7px;
  border-radius:999px;
  color:var(--mode-accent);
  background:var(--mode-soft);
  font-size:7px;
  font-style:normal;
  font-weight:950;
  white-space:nowrap;
}

.t3im-mode-mini-staff-shell{
  padding:3px;
  border-radius:11px;
  background:linear-gradient(180deg,#fbfdff,#eef5fb);
  overflow:auto hidden;
}

.t3im-mode-mini-staff{
  display:block;
  width:100%;
  min-width:610px;
  height:148px;
}

.t3im-mode-mini-note.is-diff .t3im-notehead{
  fill:#f1a800;
  filter:drop-shadow(0 0 7px rgba(255,184,46,.62));
}

.t3im-mode-mini-note.is-diff .t3im-note-stem{
  stroke:#f1a800;
}

.t3im-mode-mini-note.is-diff .t3im-staff-degree,
.t3im-mode-mini-note.is-diff .t3im-staff-note-name{
  fill:#a76400;
}

.t3im-mode-difference{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}

.t3im-mode-difference span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  color:#795000;
  background:#fff0b4;
  font-size:7px;
  font-weight:900;
}

.t3im-mode-difference.base span{
  color:#68768c;
  background:#edf2f8;
}

@media (max-width:1100px){
  .t3im-lab-grid,
  .t3im-mode-staff-columns{
    grid-template-columns:1fr;
  }

  .t3im-lab-staff{
    min-width:720px;
  }
}

@media (max-width:900px){
  .t3im-toolbar-status,
  .t3im-toolbar-label{
    display:none;
  }

  .t3im-lab-head{
    grid-template-columns:1fr;
  }

  .t3im-all-modes-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .mrtb-t3-ionian-modes-scene.classification-view{
    min-height:2100px;
  }
}

/* ===== v0.8.8 · compact header στη σκηνή Major / Minor σύγκριση ===== */

/* Τα tabs Ionian / Dorian κτλ. δεν αποδίδονται πλέον από το JS
   στη σκηνή σύγκρισης. Οι κανόνες εδώ συμπτύσσουν το υπόλοιπο header. */
.mrtb-t3-ionian-modes-scene.classification-view{
  padding-top:8px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-header{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-heading{
  gap:7px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-kicker{
  min-height:22px;
  padding:3px 7px;
  font-size:7px;
  letter-spacing:.4px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-heading h2{
  font-size:clamp(18px,1.55vw,24px);
  line-height:1;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-heading p{
  display:none;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example{
  min-width:210px;
  padding:5px 9px;
  border-radius:12px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example > span{
  display:none;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example strong{
  font-size:10px;
  line-height:1.05;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example small{
  margin-top:2px;
  font-size:7px;
  line-height:1.1;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-view-switch{
  gap:5px;
  margin-bottom:5px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-view-switch button{
  min-height:27px;
  padding:4px 9px;
  border-radius:9px;
  font-size:8px;
  box-shadow:inset 0 -2px 0 rgba(23,46,78,.07);
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-classification{
  margin-top:0;
}

/* Επιπλέον ασφάλεια: ακόμη και αν μείνει παλιό cached HTML,
   τα mode tabs δεν εμφανίζονται στη σκηνή σύγκρισης. */
.mrtb-t3-ionian-modes-scene.classification-view .t3im-mode-tabs{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-t3-ionian-modes-scene.classification-view .t3im-header{
    grid-template-columns:1fr;
    gap:4px;
  }

  .mrtb-t3-ionian-modes-scene.classification-view .t3im-kicker{
    display:none;
  }

  .mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example{
    min-width:0;
    width:100%;
    padding:5px 8px;
  }

  .mrtb-t3-ionian-modes-scene.classification-view .t3im-fixed-example small{
    display:none;
  }

  .mrtb-t3-ionian-modes-scene.classification-view .t3im-view-switch{
    margin-bottom:4px;
  }
}

/* ===== v0.8.9 · καθαρή σκηνή σύγκρισης ===== */

/* Δεν υπάρχει πλέον εισαγωγικό section ούτε οι κάτω κάρτες όλων των modes. */
.mrtb-t3-ionian-modes-scene.classification-view{
  min-height:660px;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-classification-clean{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-lab-grid{
  margin:0;
  gap:12px;
  align-items:start;
}

.mrtb-t3-ionian-modes-scene.classification-view .t3im-lab-card{
  padding:12px;
  border-radius:19px;
}

.t3im-lab-scale-title{
  display:grid;
  gap:4px;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:16px;
  color:#245d9f;
  background:linear-gradient(135deg,#e8f4ff,#f7fbff);
  border-left:6px solid #3377cf;
}

.t3im-lab-card.minor .t3im-lab-scale-title{
  color:#6345ba;
  background:linear-gradient(135deg,#eee9ff,#faf8ff);
  border-left-color:#7057d7;
}

.t3im-lab-scale-title.custom{
  color:#855800;
  background:linear-gradient(135deg,#fff0b8,#fff9df);
  border-left-color:#e3a000;
}

.t3im-lab-scale-title > span{
  font-size:8px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3im-lab-scale-title h2{
  margin:0;
  font-size:clamp(25px,2.2vw,36px);
  line-height:1;
  letter-spacing:-.5px;
}

.t3im-lab-scale-title > strong{
  display:block;
  color:#243650;
  font-size:10px;
  line-height:1.25;
}

.t3im-lab-scale-title p{
  margin:0;
  color:#6a7890;
  font-size:8px;
  font-weight:850;
  line-height:1.2;
}

/* Οι παλιές περιοχές δεν πρέπει να εμφανιστούν ούτε από cached HTML. */
.mrtb-t3-ionian-modes-scene.classification-view .t3im-class-intro,
.mrtb-t3-ionian-modes-scene.classification-view .t3im-all-modes-head,
.mrtb-t3-ionian-modes-scene.classification-view .t3im-mode-staff-columns{
  display:none !important;
}

@media (max-width:900px){
  .mrtb-t3-ionian-modes-scene.classification-view{
    min-height:980px;
  }

  .mrtb-t3-ionian-modes-scene.classification-view .t3im-lab-grid{
    grid-template-columns:1fr;
  }

  .t3im-lab-scale-title h2{
    font-size:27px;
  }

  .t3im-lab-scale-title > strong{
    font-size:9px;
  }
}

/* ===== v0.9.0 · interval spelling + characteristic mode note ===== */

.t3im-mode-reference,
.t3im-mode-difference-summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin:0 0 7px;
  padding:7px 10px;
  border-radius:13px;
  border:1px solid rgba(40,76,124,.09);
}

.t3im-mode-reference.major,
.t3im-mode-difference-summary.major{
  color:#245f9f;
  background:linear-gradient(135deg,#edf7ff,#f8fcff);
}

.t3im-mode-reference.minor,
.t3im-mode-difference-summary.minor{
  color:#6549b8;
  background:linear-gradient(135deg,#f0ebff,#faf8ff);
}

.t3im-mode-reference{
  display:grid;
  grid-template-columns:auto auto 1fr;
}

.t3im-mode-reference > span,
.t3im-mode-difference-summary > div:first-child span{
  font-size:7px;
  font-weight:950;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.t3im-mode-reference > strong,
.t3im-mode-difference-summary > div:first-child strong{
  font-size:10px;
  line-height:1.1;
}

.t3im-mode-reference > small{
  color:#6c7a90;
  font-size:8px;
  font-weight:850;
}

.t3im-mode-difference-summary{
  justify-content:space-between;
}

.t3im-mode-difference-summary > div:first-child{
  display:grid;
  gap:2px;
}

.t3im-mode-difference-changes{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
}

.t3im-mode-difference-changes > span{
  display:grid;
  grid-template-columns:auto auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
  min-width:112px;
  padding:5px 8px;
  border-radius:11px;
  color:#8b3650;
  background:linear-gradient(135deg,#fff0f4,#ffe0e8);
  outline:2px solid rgba(236,82,116,.18);
}

.t3im-mode-difference-changes b,
.t3im-mode-difference-changes strong{
  font-size:12px;
  line-height:1;
}

.t3im-mode-difference-changes i{
  color:#d34f6d;
  font-size:10px;
  font-style:normal;
  font-weight:950;
}

.t3im-mode-difference-changes small{
  grid-column:1/4;
  margin-top:3px;
  text-align:center;
  color:#9b5366;
  font-size:7px;
  font-weight:950;
}

/* Spelling 1, 2, ♭3, ♯4... πάνω από κάθε νότα. */
.t3im-spelling-staff{
  height:210px;
}

.t3im-interval-spelling rect{
  fill:#ffffff;
  stroke:#91a5c2;
  stroke-width:1.4;
  filter:drop-shadow(0 2px 3px rgba(37,62,97,.12));
}

.t3im-interval-spelling text{
  fill:#253853;
  font-size:11px;
  font-weight:950;
}

.t3im-staff-note.is-root .t3im-interval-spelling rect{
  fill:#7057d7;
  stroke:#5941bd;
}

.t3im-staff-note.is-root .t3im-interval-spelling text{
  fill:#ffffff;
}

.t3im-interval-spelling.is-difference rect{
  fill:#ff5e7d;
  stroke:#cf3657;
  stroke-width:2;
  filter:drop-shadow(0 0 7px rgba(255,75,111,.46));
}

.t3im-interval-spelling.is-difference text{
  fill:#ffffff;
  font-size:12px;
}

.t3im-mode-diff-callout rect{
  fill:#fff0b7;
  stroke:#e0a015;
  stroke-width:1.2;
}

.t3im-mode-diff-callout text{
  fill:#8b5700;
  font-size:8px;
  font-weight:950;
}

/* Η χαρακτηριστική νότα υπερισχύει οπτικά από 3η/5η. */
.t3im-staff-note.is-mode-difference .t3im-notehead{
  fill:#ff4e70;
  filter:drop-shadow(0 0 9px rgba(255,66,105,.68));
}

.t3im-staff-note.is-mode-difference .t3im-note-stem{
  stroke:#ff4e70;
}

.t3im-staff-note.is-mode-difference .t3im-staff-accidental,
.t3im-staff-note.is-mode-difference .t3im-staff-degree,
.t3im-staff-note.is-mode-difference .t3im-staff-note-name{
  fill:#bd294a;
  font-weight:950;
}

.t3im-formula-row button.is-mode-difference{
  color:#8f2640;
  background:linear-gradient(180deg,#fff3f6,#ffdce5);
  outline:3px solid rgba(255,73,111,.4);
  box-shadow:inset 0 -3px 0 rgba(151,33,62,.1),0 5px 12px rgba(218,62,96,.14);
}

.t3im-formula-row button.is-mode-difference > small{
  color:#ffffff;
  background:#ff4e70;
}

.t3im-formula-row button.is-mode-difference span{
  color:#9d5365;
}

.t3im-formula-row button.is-mode-difference em{
  right:4px;
  top:3px;
  max-width:58px;
  overflow:hidden;
  padding:2px 5px;
  border-radius:999px;
  color:#8a2840;
  background:#ffffff;
  border:1px solid rgba(207,54,87,.2);
  font-size:6px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Τα βέλη παραμένουν χωρίς όνομα διαστήματος και περνούν πίσω από τα labels. */
.t3im-root-arrow{
  opacity:.68;
}

@media (max-width:900px){
  .t3im-mode-reference,
  .t3im-mode-difference-summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .t3im-mode-reference{
    display:flex;
  }

  .t3im-mode-difference-changes{
    width:100%;
    justify-content:flex-start;
  }

  .t3im-spelling-staff{
    min-width:720px;
    height:210px;
  }
}


/* =========================================================
   v0.9.2 · IONIAN MODES GAME · EXTENDED-STYLE UI
   ========================================================= */

.mrtb-app.mrtb-t3img-game-active .mrtb-t3-ionian-modes-scene{
  display:none !important;
}

.mrtb-app.mrtb-t3img-game-active .mrtb-mini-piano,
.mrtb-app.mrtb-t3img-game-active .t3im-toolbar-accidentals,
.mrtb-app.mrtb-t3img-game-active .mrtb-sidebar{
  display:none !important;
}

.mrtb-app.mrtb-t3img-game-active .mrtb-shell{
  grid-template-rows:auto minmax(0,1fr) !important;
}

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

.t3img-scene{
  position:absolute;
  inset:5px 7px auto;
  z-index:48;
  min-height:640px;
  padding:9px;
  border-radius:21px;
  color:#18253a;
  background:
    radial-gradient(circle at 5% 0%,rgba(65,190,255,.22),transparent 28%),
    radial-gradient(circle at 96% 5%,rgba(123,87,255,.18),transparent 27%),
    linear-gradient(155deg,rgba(249,253,255,.99),rgba(239,244,255,.98));
  border:1px solid rgba(38,76,128,.13);
  box-shadow:0 15px 34px rgba(31,66,111,.15);
}

/* ===== menu ===== */

.t3img-menu-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(245px,330px);
  gap:12px;
  align-items:center;
  padding:13px 48px 13px 15px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#246fc6,#7057dc);
  box-shadow:0 11px 23px rgba(49,74,163,.2);
}

.t3img-menu-head > div:first-child > span{
  font-size:8px;
  font-weight:950;
  letter-spacing:.7px;
  text-transform:uppercase;
  opacity:.76;
}

.t3img-menu-head h2{
  margin:3px 0 5px;
  font-size:clamp(24px,2.5vw,38px);
  line-height:1;
}

.t3img-menu-head p{
  max-width:760px;
  margin:0;
  font-size:10px;
  font-weight:760;
  line-height:1.35;
  opacity:.87;
}

.t3img-menu-example{
  display:grid;
  gap:3px;
  padding:11px 13px;
  border-radius:15px;
  color:#21304d;
  background:rgba(255,255,255,.94);
}

.t3img-menu-example small{
  color:#647491;
  font-size:7px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.t3img-menu-example strong{
  font-size:21px;
  line-height:1;
}

.t3img-menu-example b{
  color:#785000;
  font-size:13px;
}

.t3img-menu-example span{
  color:#68758b;
  font-size:7px;
  font-weight:900;
}

.t3img-close{
  position:absolute;
  right:10px;
  top:10px;
  width:31px;
  height:31px;
  border:0;
  border-radius:10px;
  color:#293956;
  background:#fff;
  font:inherit;
  font-size:19px;
  font-weight:900;
  cursor:pointer;
}

.t3img-setup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:9px;
}

.t3img-setup-card{
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(42,79,128,.1);
  box-shadow:0 7px 15px rgba(39,68,108,.06);
}

.t3img-setup-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}

.t3img-setup-title b{
  font-size:11px;
}

.t3img-setup-title span{
  color:#718097;
  font-size:7px;
  font-weight:900;
}

.t3img-counts{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:4px;
}

.t3img-counts button,
.t3img-rounds button{
  min-height:31px;
  border:0;
  border-radius:9px;
  color:#31445f;
  background:#edf3fa;
  font:inherit;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(28,54,88,.08);
}

.t3img-counts button.active,
.t3img-rounds button.active{
  color:#fff;
  background:linear-gradient(145deg,#2d78d1,#7257dd);
}

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

.t3img-name-inputs.count-1{
  grid-template-columns:minmax(240px,1fr);
}

.t3img-name-inputs.count-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.t3img-name-inputs label{
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:center;
  gap:5px;
  padding:4px;
  border-radius:9px;
  background:#f0f5fb;
}

.t3img-name-inputs label > span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:#5b6fab;
  font-size:8px;
  font-weight:950;
}

.t3img-name-inputs input{
  min-width:0;
  min-height:29px;
  border:0;
  border-radius:7px;
  padding:0 7px;
  color:#1d2d47;
  background:#fff;
  font:inherit;
  font-size:9px;
  font-weight:900;
  outline:none;
}

.t3img-levels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.t3img-levels button{
  min-height:68px;
  display:grid;
  gap:2px;
  align-content:center;
  padding:6px;
  border:0;
  border-radius:11px;
  color:#30415d;
  background:#edf3fa;
  font:inherit;
  cursor:pointer;
}

.t3img-levels button > b{
  color:#3972b7;
  font-size:8px;
}

.t3img-levels button strong{
  font-size:9px;
  line-height:1.05;
}

.t3img-levels button small{
  color:#758198;
  font-size:6px;
  font-weight:800;
  line-height:1.15;
}

.t3img-levels button.active{
  color:#fff;
  background:linear-gradient(145deg,#2e77d0,#7057d8);
}

.t3img-levels button.active > b,
.t3img-levels button.active small{
  color:rgba(255,255,255,.8);
}

.t3img-rounds{
  display:grid;
  grid-template-columns:auto repeat(3,1fr);
  gap:5px;
  align-items:center;
  margin-top:7px;
}

.t3img-rounds > span{
  color:#63738d;
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}

.t3img-start{
  display:block;
  min-width:290px;
  min-height:42px;
  margin:10px auto 0;
  border:0;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,#28a767,#47cf7e);
  font:inherit;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.13),0 8px 17px rgba(39,168,99,.2);
}

/* ===== round header ===== */

.t3img-game-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  margin-bottom:7px;
  padding:7px 9px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#263c71,#6256cc);
}

.t3img-game-head > div:first-child span{
  display:block;
  font-size:6px;
  font-weight:950;
  letter-spacing:.55px;
  text-transform:uppercase;
  opacity:.72;
}

.t3img-game-head > div:first-child strong{
  display:block;
  margin-top:1px;
  font-size:17px;
  line-height:1;
}

.t3img-round-banner{
  text-align:center;
}

.t3img-round-banner b,
.t3img-round-banner small{
  display:block;
}

.t3img-round-banner b{
  font-size:10px;
}

.t3img-round-banner small{
  margin-top:2px;
  font-size:7px;
  font-weight:850;
  opacity:.78;
}

.t3img-game-head > button{
  width:29px;
  height:29px;
  border:0;
  border-radius:9px;
  color:#253552;
  background:#fff;
  font:inherit;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}

/* ===== player grid/cards ===== */

.t3img-player-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  align-items:stretch;
}

.t3img-player-grid.count-1{
  grid-template-columns:minmax(520px,900px);
  justify-content:center;
}

.t3img-player-grid.count-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.t3img-player-grid.count-4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.t3img-player-card{
  display:grid;
  gap:5px;
  min-width:0;
  padding:7px;
  border-radius:15px;
  background:rgba(255,255,255,.96);
  border:2px solid rgba(45,82,131,.1);
  box-shadow:0 6px 14px rgba(35,64,103,.07);
  transition:.16s ease;
}

.t3img-player-card.locked{
  opacity:.78;
  border-color:rgba(53,112,190,.3);
}

.t3img-player-card.correct{
  border-color:#39bd73;
  background:linear-gradient(145deg,#f1fff7,#ffffff);
  box-shadow:0 0 0 3px rgba(57,189,115,.15),0 8px 18px rgba(35,112,73,.1);
}

.t3img-player-card.wrong{
  border-color:#ef6676;
  background:linear-gradient(145deg,#fff3f6,#ffffff);
  box-shadow:0 0 0 3px rgba(239,102,118,.13),0 8px 18px rgba(148,45,62,.09);
}

.t3img-player-card > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}

.t3img-player-card > header > strong{
  overflow:hidden;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.t3img-player-card > header > span{
  padding:3px 6px;
  border-radius:999px;
  color:#fff;
  background:#536baa;
  font-size:7px;
  font-weight:900;
}

.t3img-question-box{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:7px;
  align-items:center;
  padding:6px;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,#253c6d,#4f65b8);
}

.t3img-question-mark{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:13px;
  color:#2a5f9c;
  background:#e8f4ff;
}

.t3img-question-mark.minor{
  color:#6246b8;
  background:#eee9ff;
}

.t3img-question-mark span{
  font-size:5px;
  font-weight:950;
  text-transform:uppercase;
}

.t3img-question-mark b{
  font-size:20px;
  line-height:1;
}

.t3img-question-mark small{
  font-size:5px;
  font-weight:900;
}

.t3img-question-box > div:last-child small{
  display:block;
  font-size:5px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.65;
}

.t3img-question-box h3{
  margin:1px 0;
  font-size:clamp(17px,1.7vw,23px);
  line-height:1;
}

.t3img-question-box > div:last-child span{
  font-size:6px;
  font-weight:850;
  opacity:.72;
}

.t3img-live-answer{
  min-height:31px;
  display:grid;
  place-items:center;
  padding:4px 6px;
  border-radius:9px;
  color:#68758a;
  background:#edf3fa;
  font-size:9px;
  font-weight:950;
  text-align:center;
}

.t3img-live-answer.has-answer{
  color:#315783;
  background:#e1efff;
}

.t3img-live-answer.complete{
  color:#fff;
  background:linear-gradient(145deg,#2c9f65,#43ca79);
}

.t3img-answer-step{
  display:flex;
  align-items:center;
  gap:5px;
  color:#64738b;
}

.t3img-answer-step > span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#fff;
  background:#6074ad;
  font-size:7px;
  font-weight:950;
}

.t3img-answer-step b{
  font-size:7px;
}

.t3img-signature-groups{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
}

.t3img-signature-groups .sharps,
.t3img-signature-groups .flats{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.t3img-signature-groups .finish{
  display:grid;
  grid-template-columns:1fr 36px;
  gap:3px;
}

.t3img-signature-groups button,
.t3img-character-controls button{
  min-width:0;
  min-height:24px;
  border:0;
  border-radius:7px;
  color:#31425d;
  background:#edf3fa;
  font:inherit;
  font-size:7px;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(27,52,86,.06);
}

.t3img-signature-groups button.active{
  color:#fff;
  background:linear-gradient(145deg,#2e76cf,#6557d2);
}

.t3img-signature-groups .finish button:first-child{
  color:#6a778b;
  background:#f4f6f9;
}

.t3img-signature-groups .finish button:first-child.active{
  color:#fff;
  background:#687a9e;
}

.t3img-signature-groups button.done{
  color:#fff;
  background:#28a86a;
}

.t3img-signature-groups button.done.active{
  background:#177f4c;
  box-shadow:0 0 0 3px rgba(39,169,105,.17);
}

.t3img-character-controls{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(62px,.6fr);
  grid-template-areas:
    "letters accidentals"
    "symbols symbols";
  gap:3px;
}

.t3img-character-controls .letters{
  grid-area:letters;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.t3img-character-controls .accidentals{
  grid-area:accidentals;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.t3img-character-controls .symbols{
  grid-area:symbols;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.t3img-character-controls button.active{
  color:#fff;
  background:linear-gradient(145deg,#f09b20,#e15773);
}

.t3img-feedback{
  min-height:34px;
  display:grid;
  gap:2px;
  align-content:center;
  padding:5px 7px;
  border-radius:9px;
  color:#65748b;
  background:#f2f5f9;
  font-size:7px;
  font-weight:850;
  line-height:1.2;
}

.t3img-player-card.correct .t3img-feedback{
  color:#237f4d;
  background:#dff7e9;
}

.t3img-player-card.wrong .t3img-feedback{
  color:#a53a50;
  background:#ffe0e7;
}

.t3img-feedback > b{
  font-size:9px;
}

.t3img-feedback > span{
  display:block;
  font-size:7px;
}

.t3img-result-parts{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:2px;
}

.t3img-result-parts i{
  padding:2px 5px;
  border-radius:999px;
  font-size:6px;
  font-style:normal;
  font-weight:950;
}

.t3img-result-parts i.ok{
  color:#237f4d;
  background:#c8f0d8;
}

.t3img-result-parts i.bad{
  color:#a93b50;
  background:#ffcbd6;
}

/* ===== final ===== */

.t3img-final-card{
  width:min(900px,100%);
  margin:0 auto;
  padding:15px;
  border-radius:20px;
  text-align:center;
  background:rgba(255,255,255,.95);
  box-shadow:0 14px 32px rgba(34,65,107,.12);
}

.t3img-trophy{
  font-size:46px;
  line-height:1;
}

.t3img-final-card h2{
  margin:5px 0 3px;
  font-size:clamp(26px,3vw,42px);
  line-height:1;
}

.t3img-final-card > p{
  margin:0 0 11px;
  color:#687790;
  font-size:9px;
  font-weight:850;
}

.t3img-ranking{
  display:grid;
  gap:5px;
  text-align:left;
}

.t3img-ranking article{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:8px;
  align-items:center;
  min-height:48px;
  padding:6px 9px;
  border-radius:12px;
  background:#eef4fb;
  border:1px solid rgba(40,77,126,.08);
}

.t3img-ranking article.winner{
  background:linear-gradient(135deg,#fff0aa,#ffd66e);
  box-shadow:0 8px 18px rgba(210,153,29,.16);
}

.t3img-ranking article > span{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#5573a6;
  font-size:12px;
  font-weight:950;
}

.t3img-ranking article.winner > span{
  background:#d28c12;
}

.t3img-ranking article > strong{
  font-size:10px;
}

.t3img-ranking article > b{
  font-size:17px;
}

.t3img-final-actions{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:11px;
}

.t3img-final-actions button{
  min-height:34px;
  border:0;
  border-radius:10px;
  padding:6px 11px;
  color:#31445f;
  background:#e7edf5;
  font:inherit;
  font-size:8px;
  font-weight:950;
  cursor:pointer;
}

.t3img-final-actions button.again{
  color:#fff;
  background:linear-gradient(145deg,#2f79d1,#7058d8);
}

/* 7–9 παίκτες: πιο συμπαγείς κάρτες. */
.t3img-player-grid.count-7 .t3img-player-card,
.t3img-player-grid.count-8 .t3img-player-card,
.t3img-player-grid.count-9 .t3img-player-card{
  gap:4px;
  padding:6px;
}

.t3img-player-grid.count-7 .t3img-question-mark,
.t3img-player-grid.count-8 .t3img-question-mark,
.t3img-player-grid.count-9 .t3img-question-mark{
  width:48px;
  height:48px;
}

.t3img-player-grid.count-7 .t3img-question-box,
.t3img-player-grid.count-8 .t3img-question-box,
.t3img-player-grid.count-9 .t3img-question-box{
  grid-template-columns:51px 1fr;
  padding:5px;
}

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

  .t3img-player-grid.count-7,
  .t3img-player-grid.count-8,
  .t3img-player-grid.count-9{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .t3img-scene{
    inset:4px 5px auto;
    padding:7px;
    border-radius:17px;
  }

  .t3img-menu-head{
    grid-template-columns:1fr;
  }

  .t3img-setup{
    grid-template-columns:1fr;
  }

  .t3img-name-inputs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .t3img-game-head{
    grid-template-columns:1fr auto;
  }

  .t3img-round-banner{
    grid-column:1/3;
    grid-row:2;
  }

  .t3img-player-grid,
  .t3img-player-grid[class*="count-"]{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   v0.9.3 · Shared feedback overlay compatibility
   Το σχέδιο προέρχεται από το mrtb-game-feedback.css.
   ========================================================= */

.t3img-player-card.mrtb-feedback-host{
  overflow:visible;
}

.t3img-player-card > .mrtb-game-feedback-overlay{
  border-radius:13px;
}

.t3img-player-card.correct,
.t3img-player-card.wrong{
  transform:none;
}

/* =========================================================
   v0.9.4 · PREMIUM GAME VISUAL
   Μεγαλύτερα γράμματα · καθαρότερες κάρτες · έντονο game UI
   ========================================================= */

.t3img-scene{
  min-height:720px;
  padding:14px;
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 3%,rgba(37,180,255,.24),transparent 25%),
    radial-gradient(circle at 93% 4%,rgba(139,91,255,.23),transparent 27%),
    radial-gradient(circle at 48% 100%,rgba(58,221,167,.14),transparent 34%),
    linear-gradient(155deg,#f8fcff 0%,#eef5ff 48%,#f5f0ff 100%);
  border:1px solid rgba(54,83,142,.16);
  box-shadow:
    0 22px 55px rgba(33,62,110,.18),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* ===== Premium menu ===== */

.t3img-menu-head{
  min-height:150px;
  grid-template-columns:minmax(0,1fr) minmax(290px,390px);
  gap:18px;
  padding:22px 62px 22px 24px;
  border-radius:23px;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.18),transparent 25%),
    linear-gradient(135deg,#186dc8 0%,#415fd1 48%,#7955df 100%);
  box-shadow:
    0 18px 34px rgba(50,74,170,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.t3img-menu-head > div:first-child > span{
  font-size:11px;
  letter-spacing:1px;
}

.t3img-menu-head h2{
  margin:6px 0 9px;
  font-size:clamp(32px,3.4vw,50px);
  letter-spacing:-.045em;
}

.t3img-menu-head p{
  font-size:14px;
  line-height:1.45;
}

.t3img-menu-example{
  gap:6px;
  padding:18px 20px;
  border-radius:20px;
  box-shadow:
    0 14px 28px rgba(31,47,104,.18),
    inset 0 1px 0 #fff;
}

.t3img-menu-example small{
  font-size:10px;
}

.t3img-menu-example strong{
  font-size:30px;
}

.t3img-menu-example b{
  font-size:18px;
}

.t3img-menu-example span{
  font-size:10px;
}

.t3img-close{
  right:14px;
  top:14px;
  width:39px;
  height:39px;
  border-radius:13px;
  font-size:24px;
  box-shadow:0 8px 18px rgba(22,34,77,.2);
  transition:transform .15s ease,box-shadow .15s ease;
}

.t3img-close:hover{
  transform:scale(1.06) rotate(3deg);
  box-shadow:0 11px 24px rgba(22,34,77,.27);
}

.t3img-setup{
  gap:13px;
  margin-top:13px;
}

.t3img-setup-card{
  padding:16px;
  border-radius:21px;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 12px 28px rgba(40,69,115,.1),
    inset 0 1px 0 #fff;
}

.t3img-setup-title{
  margin-bottom:12px;
}

.t3img-setup-title b{
  font-size:16px;
}

.t3img-setup-title span{
  font-size:11px;
}

.t3img-counts{
  gap:7px;
}

.t3img-counts button,
.t3img-rounds button{
  min-height:43px;
  border-radius:13px;
  font-size:15px;
  box-shadow:
    inset 0 -3px 0 rgba(28,54,88,.08),
    0 5px 10px rgba(31,55,91,.06);
  transition:transform .14s ease,box-shadow .14s ease;
}

.t3img-counts button:hover,
.t3img-rounds button:hover{
  transform:translateY(-2px);
}

.t3img-counts button.active,
.t3img-rounds button.active{
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 9px 18px rgba(72,83,185,.22);
}

.t3img-name-inputs{
  gap:8px;
  margin-top:12px;
}

.t3img-name-inputs label{
  grid-template-columns:34px 1fr;
  gap:7px;
  padding:7px;
  border-radius:13px;
}

.t3img-name-inputs label > span{
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:12px;
}

.t3img-name-inputs input{
  min-height:39px;
  border-radius:10px;
  padding:0 11px;
  font-size:13px;
}

.t3img-levels{
  gap:8px;
}

.t3img-levels button{
  min-height:94px;
  gap:4px;
  padding:11px 9px;
  border-radius:15px;
  box-shadow:inset 0 -3px 0 rgba(36,56,88,.07);
  transition:transform .15s ease,box-shadow .15s ease;
}

.t3img-levels button:hover{
  transform:translateY(-2px);
}

.t3img-levels button > b{
  font-size:12px;
}

.t3img-levels button strong{
  font-size:13px;
  line-height:1.1;
}

.t3img-levels button small{
  font-size:9px;
  line-height:1.25;
}

.t3img-levels button.active{
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.13),
    0 10px 20px rgba(68,78,176,.2);
}

.t3img-rounds{
  gap:7px;
  margin-top:12px;
}

.t3img-rounds > span{
  font-size:10px;
}

.t3img-start{
  min-width:340px;
  min-height:54px;
  margin-top:15px;
  border-radius:17px;
  font-size:15px;
  letter-spacing:.01em;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.14),
    0 13px 25px rgba(39,168,99,.25);
  transition:transform .16s ease,box-shadow .16s ease;
}

.t3img-start:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.14),
    0 17px 30px rgba(39,168,99,.3);
}

/* ===== Premium round header ===== */

.t3img-game-head{
  min-height:72px;
  gap:14px;
  margin-bottom:12px;
  padding:12px 15px;
  border-radius:19px;
  background:
    radial-gradient(circle at 75% 15%,rgba(255,255,255,.16),transparent 22%),
    linear-gradient(135deg,#213d79,#465dca 55%,#7156d7);
  box-shadow:0 12px 24px rgba(44,60,135,.22);
}

.t3img-game-head > div:first-child span{
  font-size:9px;
}

.t3img-game-head > div:first-child strong{
  margin-top:3px;
  font-size:24px;
}

.t3img-round-banner b{
  font-size:15px;
}

.t3img-round-banner small{
  margin-top:4px;
  font-size:11px;
}

.t3img-game-head > button{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:23px;
  transition:transform .14s ease;
}

.t3img-game-head > button:hover{
  transform:scale(1.07) rotate(3deg);
}

/* ===== Premium player grid ===== */

.t3img-player-grid{
  gap:12px;
}

.t3img-player-card{
  --player-color:#3d78d5;
  --player-color-2:#7058dd;
  position:relative;
  gap:9px;
  padding:13px;
  border-radius:21px;
  border:1px solid rgba(44,77,127,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.98));
  box-shadow:
    0 14px 30px rgba(39,67,108,.11),
    inset 0 1px 0 #fff;
  overflow:hidden;
}

.t3img-player-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  background:linear-gradient(90deg,var(--player-color),var(--player-color-2));
}

.t3img-player-card:nth-child(2){
  --player-color:#ef704f;
  --player-color-2:#efaa38;
}

.t3img-player-card:nth-child(3){
  --player-color:#28a66b;
  --player-color-2:#47d295;
}

.t3img-player-card:nth-child(4){
  --player-color:#8d50d9;
  --player-color-2:#c45fe2;
}

.t3img-player-card:nth-child(5){
  --player-color:#d64f85;
  --player-color-2:#ff7ca7;
}

.t3img-player-card:nth-child(6){
  --player-color:#148fa6;
  --player-color-2:#2dc1cf;
}

.t3img-player-card:nth-child(7){
  --player-color:#5b70d4;
  --player-color-2:#8294f4;
}

.t3img-player-card:nth-child(8){
  --player-color:#bf7d22;
  --player-color-2:#f1b94a;
}

.t3img-player-card:nth-child(9){
  --player-color:#46757d;
  --player-color-2:#58a8a2;
}

.t3img-player-card.locked{
  opacity:.82;
  border-color:color-mix(in srgb,var(--player-color) 42%,transparent);
}

.t3img-player-card.correct{
  border-color:#35b970;
  box-shadow:
    0 0 0 4px rgba(53,185,112,.15),
    0 15px 32px rgba(35,112,73,.14);
}

.t3img-player-card.wrong{
  border-color:#ec5d72;
  box-shadow:
    0 0 0 4px rgba(236,93,114,.14),
    0 15px 32px rgba(148,45,62,.12);
}

.t3img-player-card > header{
  min-height:34px;
  gap:9px;
  padding-top:2px;
}

.t3img-player-card > header > strong{
  font-size:16px;
  letter-spacing:-.01em;
}

.t3img-player-card > header > span{
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--player-color),var(--player-color-2));
  font-size:11px;
  box-shadow:0 6px 12px color-mix(in srgb,var(--player-color) 25%,transparent);
}

.t3img-question-box{
  grid-template-columns:76px 1fr;
  gap:12px;
  min-height:92px;
  padding:11px;
  border-radius:17px;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.16),transparent 24%),
    linear-gradient(145deg,#203d74,#425fbd 60%,#6256c7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

.t3img-question-mark{
  width:72px;
  height:72px;
  border-radius:18px;
  box-shadow:0 8px 16px rgba(20,37,81,.2);
}

.t3img-question-mark span{
  font-size:7px;
}

.t3img-question-mark b{
  font-size:29px;
}

.t3img-question-mark small{
  font-size:7px;
}

.t3img-question-box > div:last-child small{
  font-size:7px;
  letter-spacing:.35px;
}

.t3img-question-box h3{
  margin:4px 0 3px;
  font-size:clamp(25px,2.4vw,35px);
  letter-spacing:-.035em;
}

.t3img-question-box > div:last-child span{
  font-size:10px;
}

.t3img-live-answer{
  min-height:46px;
  padding:8px 10px;
  border-radius:13px;
  font-size:14px;
  line-height:1.1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.t3img-live-answer.has-answer{
  color:#255284;
  background:linear-gradient(135deg,#e2f0ff,#eff6ff);
  border:1px solid rgba(50,114,194,.12);
}

.t3img-live-answer.complete{
  color:#fff;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 25%),
    linear-gradient(145deg,#269c62,#43cb7a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 8px 16px rgba(37,157,98,.2);
}

.t3img-answer-step{
  gap:8px;
  margin-top:2px;
}

.t3img-answer-step > span{
  width:27px;
  height:27px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--player-color),var(--player-color-2));
  font-size:11px;
  box-shadow:0 5px 10px color-mix(in srgb,var(--player-color) 22%,transparent);
}

.t3img-answer-step b{
  color:#455a78;
  font-size:11px;
}

.t3img-signature-groups{
  gap:5px;
}

.t3img-signature-groups .sharps,
.t3img-signature-groups .flats{
  gap:4px;
}

.t3img-signature-groups .finish{
  grid-template-columns:1fr 48px;
  gap:5px;
}

.t3img-signature-groups button,
.t3img-character-controls button{
  min-height:35px;
  border-radius:10px;
  font-size:11px;
  background:linear-gradient(180deg,#f7f9fd,#e9eff7);
  box-shadow:
    inset 0 -3px 0 rgba(27,52,86,.07),
    0 4px 8px rgba(34,60,98,.05);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.t3img-signature-groups button:hover:not(:disabled),
.t3img-character-controls button:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:
    inset 0 -3px 0 rgba(27,52,86,.07),
    0 7px 12px rgba(34,60,98,.1);
}

.t3img-signature-groups button.active{
  background:linear-gradient(145deg,var(--player-color),var(--player-color-2));
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 7px 13px color-mix(in srgb,var(--player-color) 24%,transparent);
}

.t3img-signature-groups .finish button:first-child{
  font-size:10px;
}

.t3img-signature-groups button.done{
  font-size:15px;
  background:linear-gradient(145deg,#25a767,#45cf7d);
}

.t3img-character-controls{
  grid-template-columns:minmax(0,1.55fr) minmax(92px,.65fr);
  gap:5px;
}

.t3img-character-controls .letters,
.t3img-character-controls .accidentals,
.t3img-character-controls .symbols{
  gap:4px;
}

.t3img-character-controls button.active{
  color:#fff;
  background:linear-gradient(145deg,#f0941c,#e34f72);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.11),
    0 7px 13px rgba(225,79,114,.22);
}

.t3img-feedback{
  min-height:46px;
  padding:8px 10px;
  border-radius:13px;
  font-size:10px;
  line-height:1.3;
}

.t3img-feedback > b{
  font-size:13px;
}

.t3img-feedback > span{
  font-size:10px;
}

.t3img-result-parts{
  gap:5px;
}

.t3img-result-parts i{
  padding:4px 8px;
  font-size:8px;
}

/* ===== Large layouts by player count ===== */

.t3img-player-grid.count-1{
  grid-template-columns:minmax(680px,1040px);
}

.t3img-player-grid.count-1 .t3img-player-card{
  padding:19px;
}

.t3img-player-grid.count-1 .t3img-player-card > header > strong{
  font-size:22px;
}

.t3img-player-grid.count-1 .t3img-question-box{
  grid-template-columns:96px 1fr;
  min-height:120px;
  padding:16px;
}

.t3img-player-grid.count-1 .t3img-question-mark{
  width:92px;
  height:92px;
}

.t3img-player-grid.count-1 .t3img-question-mark b{
  font-size:38px;
}

.t3img-player-grid.count-1 .t3img-question-box h3{
  font-size:42px;
}

.t3img-player-grid.count-1 .t3img-live-answer{
  min-height:58px;
  font-size:19px;
}

.t3img-player-grid.count-1 .t3img-signature-groups button,
.t3img-player-grid.count-1 .t3img-character-controls button{
  min-height:46px;
  font-size:15px;
}

.t3img-player-grid.count-2{
  gap:15px;
}

.t3img-player-grid.count-2 .t3img-player-card{
  padding:16px;
}

.t3img-player-grid.count-2 .t3img-player-card > header > strong{
  font-size:19px;
}

.t3img-player-grid.count-2 .t3img-question-box h3{
  font-size:34px;
}

.t3img-player-grid.count-2 .t3img-signature-groups button,
.t3img-player-grid.count-2 .t3img-character-controls button{
  min-height:39px;
  font-size:13px;
}

.t3img-player-grid.count-4{
  gap:12px;
}

/* ===== 5–6 players ===== */

.t3img-player-grid.count-5 .t3img-player-card,
.t3img-player-grid.count-6 .t3img-player-card{
  padding:11px;
  gap:7px;
}

.t3img-player-grid.count-5 .t3img-player-card > header > strong,
.t3img-player-grid.count-6 .t3img-player-card > header > strong{
  font-size:14px;
}

.t3img-player-grid.count-5 .t3img-question-box,
.t3img-player-grid.count-6 .t3img-question-box{
  grid-template-columns:65px 1fr;
  min-height:80px;
  padding:9px;
}

.t3img-player-grid.count-5 .t3img-question-mark,
.t3img-player-grid.count-6 .t3img-question-mark{
  width:61px;
  height:61px;
}

.t3img-player-grid.count-5 .t3img-question-box h3,
.t3img-player-grid.count-6 .t3img-question-box h3{
  font-size:24px;
}

.t3img-player-grid.count-5 .t3img-live-answer,
.t3img-player-grid.count-6 .t3img-live-answer{
  min-height:39px;
  font-size:12px;
}

.t3img-player-grid.count-5 .t3img-signature-groups button,
.t3img-player-grid.count-5 .t3img-character-controls button,
.t3img-player-grid.count-6 .t3img-signature-groups button,
.t3img-player-grid.count-6 .t3img-character-controls button{
  min-height:31px;
  font-size:10px;
}

/* ===== 7–9 players: compact αλλά ευανάγνωστο ===== */

.t3img-player-grid.count-7,
.t3img-player-grid.count-8,
.t3img-player-grid.count-9{
  gap:9px;
}

.t3img-player-grid.count-7 .t3img-player-card,
.t3img-player-grid.count-8 .t3img-player-card,
.t3img-player-grid.count-9 .t3img-player-card{
  gap:6px;
  padding:9px;
  border-radius:17px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > strong,
.t3img-player-grid.count-8 .t3img-player-card > header > strong,
.t3img-player-grid.count-9 .t3img-player-card > header > strong{
  font-size:13px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > span,
.t3img-player-grid.count-8 .t3img-player-card > header > span,
.t3img-player-grid.count-9 .t3img-player-card > header > span{
  padding:4px 7px;
  font-size:9px;
}

.t3img-player-grid.count-7 .t3img-question-box,
.t3img-player-grid.count-8 .t3img-question-box,
.t3img-player-grid.count-9 .t3img-question-box{
  grid-template-columns:58px 1fr;
  min-height:70px;
  padding:7px;
  border-radius:13px;
}

.t3img-player-grid.count-7 .t3img-question-mark,
.t3img-player-grid.count-8 .t3img-question-mark,
.t3img-player-grid.count-9 .t3img-question-mark{
  width:54px;
  height:54px;
  border-radius:13px;
}

.t3img-player-grid.count-7 .t3img-question-mark b,
.t3img-player-grid.count-8 .t3img-question-mark b,
.t3img-player-grid.count-9 .t3img-question-mark b{
  font-size:22px;
}

.t3img-player-grid.count-7 .t3img-question-box h3,
.t3img-player-grid.count-8 .t3img-question-box h3,
.t3img-player-grid.count-9 .t3img-question-box h3{
  font-size:21px;
}

.t3img-player-grid.count-7 .t3img-live-answer,
.t3img-player-grid.count-8 .t3img-live-answer,
.t3img-player-grid.count-9 .t3img-live-answer{
  min-height:35px;
  font-size:11px;
}

.t3img-player-grid.count-7 .t3img-answer-step b,
.t3img-player-grid.count-8 .t3img-answer-step b,
.t3img-player-grid.count-9 .t3img-answer-step b{
  font-size:9px;
}

.t3img-player-grid.count-7 .t3img-signature-groups button,
.t3img-player-grid.count-7 .t3img-character-controls button,
.t3img-player-grid.count-8 .t3img-signature-groups button,
.t3img-player-grid.count-8 .t3img-character-controls button,
.t3img-player-grid.count-9 .t3img-signature-groups button,
.t3img-player-grid.count-9 .t3img-character-controls button{
  min-height:29px;
  font-size:9px;
}

.t3img-player-grid.count-7 .t3img-feedback,
.t3img-player-grid.count-8 .t3img-feedback,
.t3img-player-grid.count-9 .t3img-feedback{
  min-height:38px;
  font-size:8px;
}

/* ===== Premium final ===== */

.t3img-final-card{
  width:min(980px,100%);
  padding:25px;
  border-radius:27px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,222,91,.22),transparent 28%),
    rgba(255,255,255,.97);
  box-shadow:0 22px 50px rgba(34,65,107,.17);
}

.t3img-trophy{
  font-size:68px;
}

.t3img-final-card h2{
  margin:8px 0 5px;
  font-size:clamp(34px,4vw,58px);
}

.t3img-final-card > p{
  margin-bottom:17px;
  font-size:13px;
}

.t3img-ranking{
  gap:8px;
}

.t3img-ranking article{
  grid-template-columns:48px 1fr auto;
  min-height:62px;
  padding:9px 13px;
  border-radius:16px;
}

.t3img-ranking article > span{
  width:41px;
  height:41px;
  font-size:16px;
}

.t3img-ranking article > strong{
  font-size:15px;
}

.t3img-ranking article > b{
  font-size:23px;
}

.t3img-final-actions{
  gap:9px;
  margin-top:17px;
}

.t3img-final-actions button{
  min-height:44px;
  border-radius:13px;
  padding:8px 16px;
  font-size:11px;
}

/* ===== Result overlay πάνω από τις premium cards ===== */

.t3img-player-card.mrtb-feedback-host{
  overflow:visible;
}

.t3img-player-card > .mrtb-game-feedback-overlay{
  border-radius:20px;
}

/* ===== Responsive ===== */

@media (max-width:1200px){
  .t3img-scene{
    padding:11px;
  }

  .t3img-player-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .t3img-player-grid.count-7,
  .t3img-player-grid.count-8,
  .t3img-player-grid.count-9{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .t3img-menu-head{
    min-height:0;
    grid-template-columns:1fr;
    padding:18px 52px 18px 18px;
  }

  .t3img-menu-head h2{
    font-size:32px;
  }

  .t3img-menu-head p{
    font-size:12px;
  }

  .t3img-setup{
    grid-template-columns:1fr;
  }

  .t3img-levels{
    grid-template-columns:1fr;
  }

  .t3img-name-inputs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .t3img-game-head{
    grid-template-columns:1fr auto;
  }

  .t3img-round-banner{
    grid-column:1/3;
    grid-row:2;
  }

  .t3img-player-grid,
  .t3img-player-grid[class*="count-"]{
    grid-template-columns:1fr;
  }

  .t3img-player-grid.count-1{
    grid-template-columns:1fr;
  }

  .t3img-player-card,
  .t3img-player-grid[class*="count-"] .t3img-player-card{
    padding:12px;
  }

  .t3img-question-box,
  .t3img-player-grid[class*="count-"] .t3img-question-box{
    grid-template-columns:72px 1fr;
  }

  .t3img-question-mark,
  .t3img-player-grid[class*="count-"] .t3img-question-mark{
    width:68px;
    height:68px;
  }

  .t3img-question-box h3,
  .t3img-player-grid[class*="count-"] .t3img-question-box h3{
    font-size:29px;
  }

  .t3img-signature-groups button,
  .t3img-character-controls button,
  .t3img-player-grid[class*="count-"] .t3img-signature-groups button,
  .t3img-player-grid[class*="count-"] .t3img-character-controls button{
    min-height:37px;
    font-size:12px;
  }
}

@media (prefers-reduced-motion:no-preference){
  .t3img-player-card{
    animation:t3imgPremiumCardIn .34s ease both;
  }

  .t3img-player-card:nth-child(2){animation-delay:.035s}
  .t3img-player-card:nth-child(3){animation-delay:.07s}
  .t3img-player-card:nth-child(4){animation-delay:.105s}
  .t3img-player-card:nth-child(5){animation-delay:.14s}
  .t3img-player-card:nth-child(6){animation-delay:.175s}
  .t3img-player-card:nth-child(7){animation-delay:.21s}
  .t3img-player-card:nth-child(8){animation-delay:.245s}
  .t3img-player-card:nth-child(9){animation-delay:.28s}

  @keyframes t3imgPremiumCardIn{
    from{
      opacity:0;
      transform:translateY(12px) scale(.985);
    }
    to{
      opacity:1;
      transform:none;
    }
  }
}

/* =========================================================
   v0.9.5 · MULTIPLE CHARACTERISTICS
   Οπλισμός → διαστήματα → αλλοιωμένες νότες
   ========================================================= */

.t3img-interval-controls,
.t3img-note-controls{
  display:grid;
  gap:6px;
  padding:7px;
  border-radius:14px;
  background:linear-gradient(180deg,#f5f8fc,#edf3f9);
  border:1px solid rgba(48,78,120,.08);
}

.t3img-interval-controls .symbols{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}

.t3img-interval-controls button,
.t3img-note-controls button{
  min-width:0;
  min-height:38px;
  border:0;
  border-radius:11px;
  color:#30425e;
  background:linear-gradient(180deg,#fff,#e9eff7);
  font:inherit;
  font-size:13px;
  font-weight:950;
  box-shadow:
    inset 0 -3px 0 rgba(27,52,86,.07),
    0 4px 8px rgba(34,60,98,.05);
  cursor:pointer;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    opacity .12s ease;
}

.t3img-interval-controls button:hover:not(:disabled),
.t3img-note-controls button:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:
    inset 0 -3px 0 rgba(27,52,86,.07),
    0 8px 13px rgba(34,60,98,.11);
}

.t3img-interval-controls button.active{
  color:#fff;
  background:linear-gradient(145deg,#f09a1f,#e34e72);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 8px 14px rgba(225,78,114,.23);
}

.t3img-interval-controls button.done,
.t3img-note-controls > button.done{
  color:#fff;
  background:linear-gradient(145deg,#28a76a,#45cf7e);
}

.t3img-interval-controls button.done.active,
.t3img-note-controls > button.done.active{
  background:linear-gradient(145deg,#177c4b,#29a965);
}

.t3img-interval-controls button:disabled,
.t3img-note-controls button:disabled{
  opacity:.48;
  cursor:default;
  transform:none;
  box-shadow:none;
}

.t3img-selected-notes{
  min-height:42px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  padding:5px;
  border-radius:11px;
  background:#fff;
  border:1px dashed rgba(63,91,132,.22);
}

.t3img-selected-notes > em{
  width:100%;
  color:#8995a7;
  text-align:center;
  font-size:9px;
  font-style:normal;
  font-weight:850;
}

.t3img-selected-notes > button{
  width:auto;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  color:#fff;
  background:linear-gradient(145deg,#3276ce,#7058d9);
  box-shadow:0 5px 10px rgba(67,80,176,.17);
}

.t3img-selected-notes > button b{
  font-size:13px;
}

.t3img-selected-notes > button span{
  font-size:13px;
  opacity:.78;
}

.t3img-note-picker{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(92px,.65fr) 82px;
  grid-template-areas:"letters accidentals add";
  gap:5px;
}

.t3img-note-picker .letters{
  grid-area:letters;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}

.t3img-note-picker .accidentals{
  grid-area:accidentals;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
}

.t3img-note-picker .add{
  grid-area:add;
  color:#fff;
  background:linear-gradient(145deg,#2e77cf,#7058d8);
  font-size:10px;
}

.t3img-note-picker button.active{
  color:#fff;
  background:linear-gradient(145deg,#f09a1f,#e34e72);
}

.t3img-live-answer{
  white-space:normal;
}

.t3img-player-grid.count-1 .t3img-interval-controls button,
.t3img-player-grid.count-1 .t3img-note-controls button{
  min-height:48px;
  font-size:16px;
}

.t3img-player-grid.count-1 .t3img-selected-notes{
  min-height:52px;
}

.t3img-player-grid.count-1 .t3img-selected-notes > button b{
  font-size:17px;
}

.t3img-player-grid.count-7 .t3img-interval-controls,
.t3img-player-grid.count-8 .t3img-interval-controls,
.t3img-player-grid.count-9 .t3img-interval-controls,
.t3img-player-grid.count-7 .t3img-note-controls,
.t3img-player-grid.count-8 .t3img-note-controls,
.t3img-player-grid.count-9 .t3img-note-controls{
  gap:4px;
  padding:5px;
}

.t3img-player-grid.count-7 .t3img-interval-controls button,
.t3img-player-grid.count-8 .t3img-interval-controls button,
.t3img-player-grid.count-9 .t3img-interval-controls button,
.t3img-player-grid.count-7 .t3img-note-controls button,
.t3img-player-grid.count-8 .t3img-note-controls button,
.t3img-player-grid.count-9 .t3img-note-controls button{
  min-height:29px;
  border-radius:8px;
  font-size:9px;
}

.t3img-player-grid.count-7 .t3img-note-picker,
.t3img-player-grid.count-8 .t3img-note-picker,
.t3img-player-grid.count-9 .t3img-note-picker{
  grid-template-columns:minmax(0,1.5fr) minmax(70px,.65fr) 62px;
}

.t3img-player-grid.count-7 .t3img-selected-notes,
.t3img-player-grid.count-8 .t3img-selected-notes,
.t3img-player-grid.count-9 .t3img-selected-notes{
  min-height:32px;
  padding:3px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button,
.t3img-player-grid.count-8 .t3img-selected-notes > button,
.t3img-player-grid.count-9 .t3img-selected-notes > button{
  min-height:25px;
  padding:2px 6px;
}

@media (max-width:900px){
  .t3img-note-picker{
    grid-template-columns:1fr;
    grid-template-areas:
      "letters"
      "accidentals"
      "add";
  }

  .t3img-note-picker .add{
    min-height:40px;
  }
}

/* =========================================================
   v0.9.6 · ONE FINAL SUBMIT
   Χωρίς ενδιάμεσα ✓ / + Νότα
   Ionian & Aeolian: μόνο οπλισμός
   ========================================================= */

.t3img-signature-groups .finish{
  grid-template-columns:1fr !important;
}

.t3img-signature-groups .finish button{
  min-height:38px;
}

.t3img-note-picker{
  grid-template-columns:minmax(0,1.6fr) minmax(95px,.65fr) !important;
  grid-template-areas:"letters accidentals" !important;
}

.t3img-auto-note-help{
  display:block;
  color:#687890;
  font-size:9px;
  font-weight:850;
  line-height:1.25;
  text-align:center;
}

.t3img-reference-answer{
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:15px;
  color:#345b8c;
  background:
    radial-gradient(circle at 90% 15%,rgba(255,255,255,.78),transparent 26%),
    linear-gradient(135deg,#e4f2ff,#f4f8ff);
  border:1px solid rgba(52,105,172,.14);
  text-align:center;
}

.t3img-reference-answer b{
  font-size:14px;
}

.t3img-reference-answer span{
  color:#687890;
  font-size:10px;
  font-weight:850;
  line-height:1.3;
}

.t3img-submit-answer{
  min-height:45px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,#67758c,#8b96a8);
  font:inherit;
  font-size:13px;
  font-weight:1000;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.13),
    0 8px 17px rgba(61,78,104,.17);
  cursor:pointer;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.t3img-submit-answer.ready{
  background:
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.2),transparent 25%),
    linear-gradient(145deg,#23a363,#44cf7c);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.13),
    0 10px 20px rgba(35,163,99,.25);
}

.t3img-submit-answer:hover:not(:disabled){
  transform:translateY(-2px);
}

.t3img-submit-answer:disabled{
  color:#6f7c8e;
  background:#dfe6ee;
  box-shadow:none;
  cursor:default;
}

.t3img-player-grid.count-1 .t3img-submit-answer{
  min-height:56px;
  font-size:17px;
}

.t3img-player-grid.count-7 .t3img-submit-answer,
.t3img-player-grid.count-8 .t3img-submit-answer,
.t3img-player-grid.count-9 .t3img-submit-answer{
  min-height:34px;
  border-radius:10px;
  font-size:10px;
}

/* Δεν πρέπει να εμφανιστούν παλιά ενδιάμεσα κουμπιά από cache. */
.t3img-scene [data-t3img-signature-done],
.t3img-scene [data-t3img-symbols-done],
.t3img-scene [data-t3img-add-note],
.t3img-scene [data-t3img-notes-done]{
  display:none !important;
}

@media (max-width:900px){
  .t3img-note-picker{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "letters"
      "accidentals" !important;
  }

  .t3img-submit-answer{
    min-height:46px;
  }
}

/* =========================================================
   v0.9.7 · COMPACT MULTIPLAYER FIT
   Μικρότερο ύψος για να χωράνε όλα στην οθόνη
   2 παίκτες: λίγο πιο μαζεμένο
   4+ παίκτες: αρκετά πιο compact
   ========================================================= */

/* ---------- 2 παίκτες ---------- */
.t3img-player-grid.count-2{
  gap:10px;
}

.t3img-player-grid.count-2 .t3img-player-card{
  gap:7px;
  padding:11px;
}

.t3img-player-grid.count-2 .t3img-player-card > header{
  min-height:28px;
}

.t3img-player-grid.count-2 .t3img-player-card > header > strong{
  font-size:17px;
}

.t3img-player-grid.count-2 .t3img-player-card > header > span{
  padding:4px 8px;
  font-size:10px;
}

.t3img-player-grid.count-2 .t3img-question-box{
  grid-template-columns:68px 1fr;
  min-height:82px;
  gap:10px;
  padding:9px;
}

.t3img-player-grid.count-2 .t3img-question-mark{
  width:64px;
  height:64px;
}

.t3img-player-grid.count-2 .t3img-question-mark b{
  font-size:26px;
}

.t3img-player-grid.count-2 .t3img-question-box h3{
  font-size:28px;
  margin:2px 0;
}

.t3img-player-grid.count-2 .t3img-question-box > div:last-child span{
  font-size:9px;
}

.t3img-player-grid.count-2 .t3img-live-answer{
  min-height:36px;
  padding:6px 8px;
  font-size:12px;
}

.t3img-player-grid.count-2 .t3img-answer-step{
  gap:6px;
}

.t3img-player-grid.count-2 .t3img-answer-step > span{
  width:23px;
  height:23px;
  font-size:10px;
}

.t3img-player-grid.count-2 .t3img-answer-step b{
  font-size:10px;
}

.t3img-player-grid.count-2 .t3img-signature-groups,
.t3img-player-grid.count-2 .t3img-interval-controls,
.t3img-player-grid.count-2 .t3img-note-controls{
  gap:5px;
}

.t3img-player-grid.count-2 .t3img-interval-controls,
.t3img-player-grid.count-2 .t3img-note-controls{
  padding:6px;
  border-radius:12px;
}

.t3img-player-grid.count-2 .t3img-signature-groups button,
.t3img-player-grid.count-2 .t3img-interval-controls button,
.t3img-player-grid.count-2 .t3img-note-controls button{
  min-height:31px;
  border-radius:9px;
  font-size:11px;
}

.t3img-player-grid.count-2 .t3img-selected-notes{
  min-height:34px;
  padding:4px;
}

.t3img-player-grid.count-2 .t3img-selected-notes > button{
  min-height:28px;
  padding:3px 8px;
}

.t3img-player-grid.count-2 .t3img-selected-notes > button b{
  font-size:11px;
}

.t3img-player-grid.count-2 .t3img-auto-note-help{
  font-size:8px;
}

.t3img-player-grid.count-2 .t3img-reference-answer{
  padding:9px;
}

.t3img-player-grid.count-2 .t3img-reference-answer b{
  font-size:12px;
}

.t3img-player-grid.count-2 .t3img-reference-answer span{
  font-size:9px;
}

.t3img-player-grid.count-2 .t3img-submit-answer{
  min-height:38px;
  font-size:12px;
}

.t3img-player-grid.count-2 .t3img-feedback{
  min-height:34px;
  padding:6px 8px;
  font-size:9px;
}

/* ---------- 4 παίκτες ---------- */
.t3img-player-grid.count-4{
  gap:8px;
}

.t3img-player-grid.count-4 .t3img-player-card{
  gap:5px;
  padding:8px;
  border-radius:16px;
}

.t3img-player-grid.count-4 .t3img-player-card > header{
  min-height:22px;
}

.t3img-player-grid.count-4 .t3img-player-card > header > strong{
  font-size:14px;
}

.t3img-player-grid.count-4 .t3img-player-card > header > span{
  padding:3px 7px;
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-question-box{
  grid-template-columns:54px 1fr;
  min-height:64px;
  gap:7px;
  padding:7px;
  border-radius:13px;
}

.t3img-player-grid.count-4 .t3img-question-mark{
  width:50px;
  height:50px;
  border-radius:12px;
}

.t3img-player-grid.count-4 .t3img-question-mark span{
  font-size:6px;
}

.t3img-player-grid.count-4 .t3img-question-mark b{
  font-size:21px;
}

.t3img-player-grid.count-4 .t3img-question-mark small{
  font-size:6px;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child small{
  font-size:6px;
}

.t3img-player-grid.count-4 .t3img-question-box h3{
  font-size:20px;
  margin:2px 0 1px;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child span{
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-live-answer{
  min-height:30px;
  padding:5px 7px;
  border-radius:10px;
  font-size:10px;
}

.t3img-player-grid.count-4 .t3img-answer-step{
  gap:5px;
  margin-top:0;
}

.t3img-player-grid.count-4 .t3img-answer-step > span{
  width:20px;
  height:20px;
  border-radius:7px;
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-answer-step b{
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-signature-groups,
.t3img-player-grid.count-4 .t3img-interval-controls,
.t3img-player-grid.count-4 .t3img-note-controls{
  gap:4px;
}

.t3img-player-grid.count-4 .t3img-interval-controls,
.t3img-player-grid.count-4 .t3img-note-controls{
  padding:5px;
  border-radius:10px;
}

.t3img-player-grid.count-4 .t3img-signature-groups .sharps,
.t3img-player-grid.count-4 .t3img-signature-groups .flats,
.t3img-player-grid.count-4 .t3img-interval-controls .symbols,
.t3img-player-grid.count-4 .t3img-note-picker .letters,
.t3img-player-grid.count-4 .t3img-note-picker .accidentals{
  gap:3px;
}

.t3img-player-grid.count-4 .t3img-signature-groups button,
.t3img-player-grid.count-4 .t3img-interval-controls button,
.t3img-player-grid.count-4 .t3img-note-controls button{
  min-height:26px;
  border-radius:8px;
  font-size:9px;
}

.t3img-player-grid.count-4 .t3img-selected-notes{
  min-height:28px;
  padding:3px;
  gap:3px;
  border-radius:8px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button{
  min-height:22px;
  padding:2px 6px;
  gap:4px;
  border-radius:7px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button b,
.t3img-player-grid.count-4 .t3img-selected-notes > button span{
  font-size:9px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > em{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-auto-note-help{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-reference-answer{
  gap:3px;
  padding:7px;
  border-radius:10px;
}

.t3img-player-grid.count-4 .t3img-reference-answer b{
  font-size:10px;
}

.t3img-player-grid.count-4 .t3img-reference-answer span{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-submit-answer{
  min-height:31px;
  border-radius:10px;
  font-size:10px;
}

.t3img-player-grid.count-4 .t3img-feedback{
  min-height:28px;
  padding:5px 6px;
  border-radius:10px;
  font-size:7px;
}

/* ---------- 5–6 παίκτες ---------- */
.t3img-player-grid.count-5,
.t3img-player-grid.count-6{
  gap:7px;
}

.t3img-player-grid.count-5 .t3img-player-card,
.t3img-player-grid.count-6 .t3img-player-card{
  gap:4px;
  padding:7px;
  border-radius:15px;
}

.t3img-player-grid.count-5 .t3img-player-card > header,
.t3img-player-grid.count-6 .t3img-player-card > header{
  min-height:21px;
}

.t3img-player-grid.count-5 .t3img-player-card > header > strong,
.t3img-player-grid.count-6 .t3img-player-card > header > strong{
  font-size:13px;
}

.t3img-player-grid.count-5 .t3img-player-card > header > span,
.t3img-player-grid.count-6 .t3img-player-card > header > span{
  padding:3px 6px;
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-question-box,
.t3img-player-grid.count-6 .t3img-question-box{
  grid-template-columns:50px 1fr;
  min-height:60px;
  gap:6px;
  padding:6px;
  border-radius:12px;
}

.t3img-player-grid.count-5 .t3img-question-mark,
.t3img-player-grid.count-6 .t3img-question-mark{
  width:46px;
  height:46px;
  border-radius:11px;
}

.t3img-player-grid.count-5 .t3img-question-mark b,
.t3img-player-grid.count-6 .t3img-question-mark b{
  font-size:19px;
}

.t3img-player-grid.count-5 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child small{
  font-size:5px;
}

.t3img-player-grid.count-5 .t3img-question-box h3,
.t3img-player-grid.count-6 .t3img-question-box h3{
  font-size:18px;
  margin:1px 0;
}

.t3img-player-grid.count-5 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child span{
  font-size:7px;
}

.t3img-player-grid.count-5 .t3img-live-answer,
.t3img-player-grid.count-6 .t3img-live-answer{
  min-height:27px;
  padding:4px 6px;
  font-size:9px;
}

.t3img-player-grid.count-5 .t3img-answer-step > span,
.t3img-player-grid.count-6 .t3img-answer-step > span{
  width:18px;
  height:18px;
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-answer-step b,
.t3img-player-grid.count-6 .t3img-answer-step b{
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-interval-controls,
.t3img-player-grid.count-6 .t3img-interval-controls,
.t3img-player-grid.count-5 .t3img-note-controls,
.t3img-player-grid.count-6 .t3img-note-controls{
  padding:4px;
}

.t3img-player-grid.count-5 .t3img-signature-groups button,
.t3img-player-grid.count-5 .t3img-interval-controls button,
.t3img-player-grid.count-5 .t3img-note-controls button,
.t3img-player-grid.count-6 .t3img-signature-groups button,
.t3img-player-grid.count-6 .t3img-interval-controls button,
.t3img-player-grid.count-6 .t3img-note-controls button{
  min-height:24px;
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-selected-notes,
.t3img-player-grid.count-6 .t3img-selected-notes{
  min-height:26px;
  padding:2px;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button,
.t3img-player-grid.count-6 .t3img-selected-notes > button{
  min-height:20px;
  padding:2px 5px;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button b,
.t3img-player-grid.count-5 .t3img-selected-notes > button span,
.t3img-player-grid.count-6 .t3img-selected-notes > button b,
.t3img-player-grid.count-6 .t3img-selected-notes > button span{
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-auto-note-help,
.t3img-player-grid.count-6 .t3img-auto-note-help{
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-reference-answer b,
.t3img-player-grid.count-6 .t3img-reference-answer b{
  font-size:9px;
}

.t3img-player-grid.count-5 .t3img-reference-answer span,
.t3img-player-grid.count-6 .t3img-reference-answer span{
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-submit-answer,
.t3img-player-grid.count-6 .t3img-submit-answer{
  min-height:28px;
  font-size:9px;
}

.t3img-player-grid.count-5 .t3img-feedback,
.t3img-player-grid.count-6 .t3img-feedback{
  min-height:25px;
  padding:4px 5px;
  font-size:6px;
}

/* ---------- 7–9 παίκτες ---------- */
.t3img-player-grid.count-7,
.t3img-player-grid.count-8,
.t3img-player-grid.count-9{
  gap:6px;
}

.t3img-player-grid.count-7 .t3img-player-card,
.t3img-player-grid.count-8 .t3img-player-card,
.t3img-player-grid.count-9 .t3img-player-card{
  gap:3px;
  padding:6px;
  border-radius:13px;
}

.t3img-player-grid.count-7 .t3img-player-card > header,
.t3img-player-grid.count-8 .t3img-player-card > header,
.t3img-player-grid.count-9 .t3img-player-card > header{
  min-height:18px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > strong,
.t3img-player-grid.count-8 .t3img-player-card > header > strong,
.t3img-player-grid.count-9 .t3img-player-card > header > strong{
  font-size:11px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > span,
.t3img-player-grid.count-8 .t3img-player-card > header > span,
.t3img-player-grid.count-9 .t3img-player-card > header > span{
  padding:2px 5px;
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-question-box,
.t3img-player-grid.count-8 .t3img-question-box,
.t3img-player-grid.count-9 .t3img-question-box{
  grid-template-columns:44px 1fr;
  min-height:52px;
  gap:5px;
  padding:5px;
  border-radius:10px;
}

.t3img-player-grid.count-7 .t3img-question-mark,
.t3img-player-grid.count-8 .t3img-question-mark,
.t3img-player-grid.count-9 .t3img-question-mark{
  width:40px;
  height:40px;
  border-radius:10px;
}

.t3img-player-grid.count-7 .t3img-question-mark span,
.t3img-player-grid.count-8 .t3img-question-mark span,
.t3img-player-grid.count-9 .t3img-question-mark span{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-question-mark b,
.t3img-player-grid.count-8 .t3img-question-mark b,
.t3img-player-grid.count-9 .t3img-question-mark b{
  font-size:16px;
}

.t3img-player-grid.count-7 .t3img-question-mark small,
.t3img-player-grid.count-8 .t3img-question-mark small,
.t3img-player-grid.count-9 .t3img-question-mark small{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child small{
  font-size:4px;
}

.t3img-player-grid.count-7 .t3img-question-box h3,
.t3img-player-grid.count-8 .t3img-question-box h3,
.t3img-player-grid.count-9 .t3img-question-box h3{
  font-size:15px;
  margin:1px 0;
}

.t3img-player-grid.count-7 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child span{
  font-size:6px;
}

.t3img-player-grid.count-7 .t3img-live-answer,
.t3img-player-grid.count-8 .t3img-live-answer,
.t3img-player-grid.count-9 .t3img-live-answer{
  min-height:24px;
  padding:3px 5px;
  border-radius:8px;
  font-size:8px;
}

.t3img-player-grid.count-7 .t3img-answer-step,
.t3img-player-grid.count-8 .t3img-answer-step,
.t3img-player-grid.count-9 .t3img-answer-step{
  gap:4px;
}

.t3img-player-grid.count-7 .t3img-answer-step > span,
.t3img-player-grid.count-8 .t3img-answer-step > span,
.t3img-player-grid.count-9 .t3img-answer-step > span{
  width:16px;
  height:16px;
  border-radius:6px;
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-answer-step b,
.t3img-player-grid.count-8 .t3img-answer-step b,
.t3img-player-grid.count-9 .t3img-answer-step b{
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-signature-groups,
.t3img-player-grid.count-8 .t3img-signature-groups,
.t3img-player-grid.count-9 .t3img-signature-groups,
.t3img-player-grid.count-7 .t3img-interval-controls,
.t3img-player-grid.count-8 .t3img-interval-controls,
.t3img-player-grid.count-9 .t3img-interval-controls,
.t3img-player-grid.count-7 .t3img-note-controls,
.t3img-player-grid.count-8 .t3img-note-controls,
.t3img-player-grid.count-9 .t3img-note-controls{
  gap:3px;
}

.t3img-player-grid.count-7 .t3img-interval-controls,
.t3img-player-grid.count-8 .t3img-interval-controls,
.t3img-player-grid.count-9 .t3img-interval-controls,
.t3img-player-grid.count-7 .t3img-note-controls,
.t3img-player-grid.count-8 .t3img-note-controls,
.t3img-player-grid.count-9 .t3img-note-controls{
  padding:3px;
  border-radius:8px;
}

.t3img-player-grid.count-7 .t3img-signature-groups .sharps,
.t3img-player-grid.count-8 .t3img-signature-groups .sharps,
.t3img-player-grid.count-9 .t3img-signature-groups .sharps,
.t3img-player-grid.count-7 .t3img-signature-groups .flats,
.t3img-player-grid.count-8 .t3img-signature-groups .flats,
.t3img-player-grid.count-9 .t3img-signature-groups .flats,
.t3img-player-grid.count-7 .t3img-interval-controls .symbols,
.t3img-player-grid.count-8 .t3img-interval-controls .symbols,
.t3img-player-grid.count-9 .t3img-interval-controls .symbols,
.t3img-player-grid.count-7 .t3img-note-picker .letters,
.t3img-player-grid.count-8 .t3img-note-picker .letters,
.t3img-player-grid.count-9 .t3img-note-picker .letters,
.t3img-player-grid.count-7 .t3img-note-picker .accidentals,
.t3img-player-grid.count-8 .t3img-note-picker .accidentals,
.t3img-player-grid.count-9 .t3img-note-picker .accidentals{
  gap:2px;
}

.t3img-player-grid.count-7 .t3img-signature-groups button,
.t3img-player-grid.count-7 .t3img-interval-controls button,
.t3img-player-grid.count-7 .t3img-note-controls button,
.t3img-player-grid.count-8 .t3img-signature-groups button,
.t3img-player-grid.count-8 .t3img-interval-controls button,
.t3img-player-grid.count-8 .t3img-note-controls button,
.t3img-player-grid.count-9 .t3img-signature-groups button,
.t3img-player-grid.count-9 .t3img-interval-controls button,
.t3img-player-grid.count-9 .t3img-note-controls button{
  min-height:20px;
  border-radius:6px;
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-selected-notes,
.t3img-player-grid.count-8 .t3img-selected-notes,
.t3img-player-grid.count-9 .t3img-selected-notes{
  min-height:21px;
  padding:2px;
  gap:2px;
  border-radius:7px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button,
.t3img-player-grid.count-8 .t3img-selected-notes > button,
.t3img-player-grid.count-9 .t3img-selected-notes > button{
  min-height:18px;
  padding:1px 4px;
  gap:3px;
  border-radius:6px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button b,
.t3img-player-grid.count-7 .t3img-selected-notes > button span,
.t3img-player-grid.count-8 .t3img-selected-notes > button b,
.t3img-player-grid.count-8 .t3img-selected-notes > button span,
.t3img-player-grid.count-9 .t3img-selected-notes > button b,
.t3img-player-grid.count-9 .t3img-selected-notes > button span{
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > em,
.t3img-player-grid.count-8 .t3img-selected-notes > em,
.t3img-player-grid.count-9 .t3img-selected-notes > em{
  font-size:6px;
}

.t3img-player-grid.count-7 .t3img-auto-note-help,
.t3img-player-grid.count-8 .t3img-auto-note-help,
.t3img-player-grid.count-9 .t3img-auto-note-help{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-reference-answer,
.t3img-player-grid.count-8 .t3img-reference-answer,
.t3img-player-grid.count-9 .t3img-reference-answer{
  gap:2px;
  padding:5px;
  border-radius:8px;
}

.t3img-player-grid.count-7 .t3img-reference-answer b,
.t3img-player-grid.count-8 .t3img-reference-answer b,
.t3img-player-grid.count-9 .t3img-reference-answer b{
  font-size:8px;
}

.t3img-player-grid.count-7 .t3img-reference-answer span,
.t3img-player-grid.count-8 .t3img-reference-answer span,
.t3img-player-grid.count-9 .t3img-reference-answer span{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-submit-answer,
.t3img-player-grid.count-8 .t3img-submit-answer,
.t3img-player-grid.count-9 .t3img-submit-answer{
  min-height:24px;
  border-radius:8px;
  font-size:8px;
}

.t3img-player-grid.count-7 .t3img-feedback,
.t3img-player-grid.count-8 .t3img-feedback,
.t3img-player-grid.count-9 .t3img-feedback{
  min-height:20px;
  padding:3px 4px;
  border-radius:8px;
  font-size:5px;
}

/* =========================================================
   v0.9.8 · REFERENCE LAYOUT FIT
   Πιο κοντά στο layout αναφοράς:
   - πιο compact επάνω header
   - κάρτα ερώτησης με όνομα mode δίπλα στο badge
   - πιο «κουτάκια» κουμπιά
   - από 4 παίκτες και πάνω κρύβονται βοηθητικά texts
   - μικρότερο συνολικό ύψος για να χωράνε όλοι
   ========================================================= */

/* ---------- γενικό game header ---------- */
.t3img-game-head{
  min-height:60px;
  gap:10px;
  margin-bottom:8px;
  padding:9px 12px;
  border-radius:16px;
}

.t3img-game-head > div:first-child strong{
  font-size:20px;
}

.t3img-round-banner b{
  font-size:13px;
}

.t3img-round-banner small{
  font-size:10px;
  margin-top:2px;
}

.t3img-game-head > button{
  width:34px;
  height:34px;
  font-size:20px;
}

/* ---------- γενικό player card πιο μαζεμένο ---------- */
.t3img-player-grid{
  gap:8px;
}

.t3img-player-card{
  gap:6px;
  padding:10px;
  border-radius:18px;
}

.t3img-player-card::before{
  height:5px;
}

.t3img-player-card > header{
  min-height:28px;
  padding-top:0;
}

.t3img-player-card > header > strong{
  font-size:15px;
}

.t3img-player-card > header > span{
  padding:4px 8px;
  font-size:10px;
}

.t3img-question-box{
  grid-template-columns:60px 1fr;
  gap:9px;
  min-height:74px;
  padding:8px 9px;
  border-radius:14px;
}

.t3img-question-mark{
  width:56px;
  height:56px;
  border-radius:14px;
}

.t3img-question-mark b{
  font-size:23px;
}

.t3img-question-box > div:last-child small{
  font-size:6px;
  letter-spacing:.24px;
}

.t3img-question-box h3{
  margin:1px 0 1px;
  font-size:clamp(19px,2vw,28px);
  line-height:1.02;
}

.t3img-question-box > div:last-child span{
  font-size:9px;
}

.t3img-live-answer{
  min-height:34px;
  padding:6px 8px;
  border-radius:10px;
  font-size:12px;
}

.t3img-answer-step{
  gap:5px;
  margin-top:0;
}

.t3img-answer-step > span{
  width:22px;
  height:22px;
  border-radius:7px;
  font-size:9px;
}

.t3img-answer-step b{
  font-size:10px;
}

/* ---------- κουμπιά σαν reference ---------- */
.t3img-signature-groups,
.t3img-interval-controls,
.t3img-note-controls{
  gap:4px;
}

.t3img-interval-controls,
.t3img-note-controls{
  padding:4px;
  border-radius:10px;
}

.t3img-signature-groups .sharps,
.t3img-signature-groups .flats,
.t3img-interval-controls .symbols,
.t3img-note-picker .letters,
.t3img-note-picker .accidentals{
  gap:3px;
}

.t3img-signature-groups button,
.t3img-interval-controls button,
.t3img-note-controls button{
  min-height:28px;
  border-radius:8px;
  font-size:10px;
  box-shadow:
    inset 0 -2px 0 rgba(27,52,86,.07),
    0 3px 6px rgba(34,60,98,.05);
}

.t3img-signature-groups button b,
.t3img-interval-controls button b,
.t3img-note-controls button b{
  font-weight:1000;
}

.t3img-signature-groups button.active,
.t3img-interval-controls button.active,
.t3img-note-picker button.active,
.t3img-selected-notes > button{
  border:1px solid rgba(255,255,255,.3);
}

.t3img-signature-groups .finish button{
  min-height:29px;
}

.t3img-selected-notes{
  min-height:30px;
  gap:3px;
  padding:3px;
  border-radius:9px;
}

.t3img-selected-notes > button{
  min-height:24px;
  padding:2px 6px;
  gap:4px;
  border-radius:7px;
}

.t3img-selected-notes > button b,
.t3img-selected-notes > button span{
  font-size:9px;
}

.t3img-selected-notes > em{
  font-size:7px;
}

.t3img-note-picker{
  grid-template-columns:minmax(0,1.6fr) minmax(88px,.7fr) !important;
}

.t3img-auto-note-help{
  font-size:7px;
}

.t3img-reference-answer{
  padding:8px;
  border-radius:11px;
}

.t3img-reference-answer b{
  font-size:11px;
}

.t3img-reference-answer span{
  font-size:8px;
}

.t3img-submit-answer{
  min-height:34px;
  border-radius:10px;
  font-size:11px;
}

.t3img-feedback{
  min-height:26px;
  padding:4px 6px;
  border-radius:9px;
  font-size:7px;
}

/* ---------- 4 παίκτες: 2x2 με χαμηλό ύψος ---------- */
.t3img-player-grid.count-4{
  gap:7px;
}

.t3img-player-grid.count-4 .t3img-player-card{
  gap:4px;
  padding:7px;
  border-radius:14px;
}

.t3img-player-grid.count-4 .t3img-player-card > header{
  min-height:21px;
}

.t3img-player-grid.count-4 .t3img-player-card > header > strong{
  font-size:13px;
}

.t3img-player-grid.count-4 .t3img-player-card > header > span{
  padding:3px 6px;
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-question-box{
  grid-template-columns:48px 1fr;
  min-height:58px;
  gap:6px;
  padding:6px;
  border-radius:11px;
}

.t3img-player-grid.count-4 .t3img-question-mark{
  width:44px;
  height:44px;
  border-radius:10px;
}

.t3img-player-grid.count-4 .t3img-question-mark span,
.t3img-player-grid.count-4 .t3img-question-mark small{
  font-size:5px;
}

.t3img-player-grid.count-4 .t3img-question-mark b{
  font-size:17px;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child small{
  font-size:4px;
}

.t3img-player-grid.count-4 .t3img-question-box h3{
  font-size:16px;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child span{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-live-answer{
  min-height:24px;
  padding:4px 6px;
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-answer-step > span{
  width:17px;
  height:17px;
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-answer-step b{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-signature-groups button,
.t3img-player-grid.count-4 .t3img-interval-controls button,
.t3img-player-grid.count-4 .t3img-note-controls button{
  min-height:22px;
  border-radius:7px;
  font-size:8px;
}

.t3img-player-grid.count-4 .t3img-selected-notes{
  min-height:22px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button{
  min-height:18px;
  padding:1px 4px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button b,
.t3img-player-grid.count-4 .t3img-selected-notes > button span{
  font-size:7px;
}

.t3img-player-grid.count-4 .t3img-selected-notes > em{
  font-size:6px;
}

.t3img-player-grid.count-4 .t3img-note-picker{
  grid-template-columns:minmax(0,1.55fr) minmax(66px,.6fr) !important;
}

.t3img-player-grid.count-4 .t3img-auto-note-help,
.t3img-player-grid.count-4 .t3img-feedback{
  display:none;
}

.t3img-player-grid.count-4 .t3img-reference-answer{
  padding:6px;
}

.t3img-player-grid.count-4 .t3img-reference-answer b{
  font-size:9px;
}

.t3img-player-grid.count-4 .t3img-reference-answer span{
  display:none;
}

.t3img-player-grid.count-4 .t3img-submit-answer{
  min-height:27px;
  border-radius:8px;
  font-size:8px;
}

/* ---------- 5–6 παίκτες ---------- */
.t3img-player-grid.count-5,
.t3img-player-grid.count-6{
  gap:6px;
}

.t3img-player-grid.count-5 .t3img-player-card,
.t3img-player-grid.count-6 .t3img-player-card{
  gap:3px;
  padding:6px;
  border-radius:13px;
}

.t3img-player-grid.count-5 .t3img-player-card > header > strong,
.t3img-player-grid.count-6 .t3img-player-card > header > strong{
  font-size:11px;
}

.t3img-player-grid.count-5 .t3img-player-card > header > span,
.t3img-player-grid.count-6 .t3img-player-card > header > span{
  padding:2px 5px;
  font-size:7px;
}

.t3img-player-grid.count-5 .t3img-question-box,
.t3img-player-grid.count-6 .t3img-question-box{
  grid-template-columns:41px 1fr;
  min-height:50px;
  gap:5px;
  padding:5px;
  border-radius:10px;
}

.t3img-player-grid.count-5 .t3img-question-mark,
.t3img-player-grid.count-6 .t3img-question-mark{
  width:37px;
  height:37px;
  border-radius:9px;
}

.t3img-player-grid.count-5 .t3img-question-mark span,
.t3img-player-grid.count-5 .t3img-question-mark small,
.t3img-player-grid.count-6 .t3img-question-mark span,
.t3img-player-grid.count-6 .t3img-question-mark small{
  font-size:4px;
}

.t3img-player-grid.count-5 .t3img-question-mark b,
.t3img-player-grid.count-6 .t3img-question-mark b{
  font-size:14px;
}

.t3img-player-grid.count-5 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child small{
  display:none;
}

.t3img-player-grid.count-5 .t3img-question-box h3,
.t3img-player-grid.count-6 .t3img-question-box h3{
  font-size:14px;
}

.t3img-player-grid.count-5 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child span{
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-live-answer,
.t3img-player-grid.count-6 .t3img-live-answer{
  min-height:21px;
  padding:3px 5px;
  font-size:7px;
}

.t3img-player-grid.count-5 .t3img-answer-step > span,
.t3img-player-grid.count-6 .t3img-answer-step > span{
  width:15px;
  height:15px;
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-answer-step b,
.t3img-player-grid.count-6 .t3img-answer-step b{
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-signature-groups button,
.t3img-player-grid.count-5 .t3img-interval-controls button,
.t3img-player-grid.count-5 .t3img-note-controls button,
.t3img-player-grid.count-6 .t3img-signature-groups button,
.t3img-player-grid.count-6 .t3img-interval-controls button,
.t3img-player-grid.count-6 .t3img-note-controls button{
  min-height:19px;
  border-radius:6px;
  font-size:7px;
}

.t3img-player-grid.count-5 .t3img-selected-notes,
.t3img-player-grid.count-6 .t3img-selected-notes{
  min-height:19px;
  padding:2px;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button,
.t3img-player-grid.count-6 .t3img-selected-notes > button{
  min-height:15px;
  padding:1px 3px;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button b,
.t3img-player-grid.count-5 .t3img-selected-notes > button span,
.t3img-player-grid.count-6 .t3img-selected-notes > button b,
.t3img-player-grid.count-6 .t3img-selected-notes > button span{
  font-size:6px;
}

.t3img-player-grid.count-5 .t3img-selected-notes > em,
.t3img-player-grid.count-6 .t3img-selected-notes > em{
  font-size:5px;
}

.t3img-player-grid.count-5 .t3img-note-picker,
.t3img-player-grid.count-6 .t3img-note-picker{
  grid-template-columns:minmax(0,1.55fr) minmax(56px,.55fr) !important;
}

.t3img-player-grid.count-5 .t3img-auto-note-help,
.t3img-player-grid.count-5 .t3img-feedback,
.t3img-player-grid.count-6 .t3img-auto-note-help,
.t3img-player-grid.count-6 .t3img-feedback{
  display:none;
}

.t3img-player-grid.count-5 .t3img-reference-answer,
.t3img-player-grid.count-6 .t3img-reference-answer{
  padding:5px;
}

.t3img-player-grid.count-5 .t3img-reference-answer b,
.t3img-player-grid.count-6 .t3img-reference-answer b{
  font-size:8px;
}

.t3img-player-grid.count-5 .t3img-reference-answer span,
.t3img-player-grid.count-6 .t3img-reference-answer span{
  display:none;
}

.t3img-player-grid.count-5 .t3img-submit-answer,
.t3img-player-grid.count-6 .t3img-submit-answer{
  min-height:23px;
  border-radius:7px;
  font-size:7px;
}

/* ---------- 7–9 παίκτες ---------- */
.t3img-player-grid.count-7,
.t3img-player-grid.count-8,
.t3img-player-grid.count-9{
  gap:5px;
}

.t3img-player-grid.count-7 .t3img-player-card,
.t3img-player-grid.count-8 .t3img-player-card,
.t3img-player-grid.count-9 .t3img-player-card{
  gap:2px;
  padding:5px;
  border-radius:11px;
}

.t3img-player-grid.count-7 .t3img-player-card > header,
.t3img-player-grid.count-8 .t3img-player-card > header,
.t3img-player-grid.count-9 .t3img-player-card > header{
  min-height:16px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > strong,
.t3img-player-grid.count-8 .t3img-player-card > header > strong,
.t3img-player-grid.count-9 .t3img-player-card > header > strong{
  font-size:10px;
}

.t3img-player-grid.count-7 .t3img-player-card > header > span,
.t3img-player-grid.count-8 .t3img-player-card > header > span,
.t3img-player-grid.count-9 .t3img-player-card > header > span{
  padding:2px 4px;
  font-size:6px;
}

.t3img-player-grid.count-7 .t3img-question-box,
.t3img-player-grid.count-8 .t3img-question-box,
.t3img-player-grid.count-9 .t3img-question-box{
  grid-template-columns:35px 1fr;
  min-height:43px;
  gap:4px;
  padding:4px;
  border-radius:9px;
}

.t3img-player-grid.count-7 .t3img-question-mark,
.t3img-player-grid.count-8 .t3img-question-mark,
.t3img-player-grid.count-9 .t3img-question-mark{
  width:31px;
  height:31px;
  border-radius:8px;
}

.t3img-player-grid.count-7 .t3img-question-mark span,
.t3img-player-grid.count-7 .t3img-question-mark small,
.t3img-player-grid.count-8 .t3img-question-mark span,
.t3img-player-grid.count-8 .t3img-question-mark small,
.t3img-player-grid.count-9 .t3img-question-mark span,
.t3img-player-grid.count-9 .t3img-question-mark small{
  font-size:3px;
}

.t3img-player-grid.count-7 .t3img-question-mark b,
.t3img-player-grid.count-8 .t3img-question-mark b,
.t3img-player-grid.count-9 .t3img-question-mark b{
  font-size:12px;
}

.t3img-player-grid.count-7 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-7 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child span{
  display:none;
}

.t3img-player-grid.count-7 .t3img-question-box h3,
.t3img-player-grid.count-8 .t3img-question-box h3,
.t3img-player-grid.count-9 .t3img-question-box h3{
  font-size:12px;
}

.t3img-player-grid.count-7 .t3img-live-answer,
.t3img-player-grid.count-8 .t3img-live-answer,
.t3img-player-grid.count-9 .t3img-live-answer{
  min-height:18px;
  padding:2px 4px;
  border-radius:7px;
  font-size:6px;
}

.t3img-player-grid.count-7 .t3img-answer-step > span,
.t3img-player-grid.count-8 .t3img-answer-step > span,
.t3img-player-grid.count-9 .t3img-answer-step > span{
  width:13px;
  height:13px;
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-answer-step b,
.t3img-player-grid.count-8 .t3img-answer-step b,
.t3img-player-grid.count-9 .t3img-answer-step b{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-signature-groups button,
.t3img-player-grid.count-7 .t3img-interval-controls button,
.t3img-player-grid.count-7 .t3img-note-controls button,
.t3img-player-grid.count-8 .t3img-signature-groups button,
.t3img-player-grid.count-8 .t3img-interval-controls button,
.t3img-player-grid.count-8 .t3img-note-controls button,
.t3img-player-grid.count-9 .t3img-signature-groups button,
.t3img-player-grid.count-9 .t3img-interval-controls button,
.t3img-player-grid.count-9 .t3img-note-controls button{
  min-height:17px;
  border-radius:5px;
  font-size:6px;
}

.t3img-player-grid.count-7 .t3img-selected-notes,
.t3img-player-grid.count-8 .t3img-selected-notes,
.t3img-player-grid.count-9 .t3img-selected-notes{
  min-height:17px;
  padding:1px 2px;
  gap:2px;
  border-radius:6px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button,
.t3img-player-grid.count-8 .t3img-selected-notes > button,
.t3img-player-grid.count-9 .t3img-selected-notes > button{
  min-height:13px;
  padding:1px 3px;
  gap:2px;
  border-radius:5px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button b,
.t3img-player-grid.count-7 .t3img-selected-notes > button span,
.t3img-player-grid.count-8 .t3img-selected-notes > button b,
.t3img-player-grid.count-8 .t3img-selected-notes > button span,
.t3img-player-grid.count-9 .t3img-selected-notes > button b,
.t3img-player-grid.count-9 .t3img-selected-notes > button span{
  font-size:5px;
}

.t3img-player-grid.count-7 .t3img-selected-notes > em,
.t3img-player-grid.count-8 .t3img-selected-notes > em,
.t3img-player-grid.count-9 .t3img-selected-notes > em{
  font-size:4px;
}

.t3img-player-grid.count-7 .t3img-note-picker,
.t3img-player-grid.count-8 .t3img-note-picker,
.t3img-player-grid.count-9 .t3img-note-picker{
  grid-template-columns:minmax(0,1.5fr) minmax(46px,.5fr) !important;
}

.t3img-player-grid.count-7 .t3img-auto-note-help,
.t3img-player-grid.count-7 .t3img-feedback,
.t3img-player-grid.count-8 .t3img-auto-note-help,
.t3img-player-grid.count-8 .t3img-feedback,
.t3img-player-grid.count-9 .t3img-auto-note-help,
.t3img-player-grid.count-9 .t3img-feedback{
  display:none;
}

.t3img-player-grid.count-7 .t3img-reference-answer,
.t3img-player-grid.count-8 .t3img-reference-answer,
.t3img-player-grid.count-9 .t3img-reference-answer{
  padding:4px;
  border-radius:7px;
}

.t3img-player-grid.count-7 .t3img-reference-answer b,
.t3img-player-grid.count-8 .t3img-reference-answer b,
.t3img-player-grid.count-9 .t3img-reference-answer b{
  font-size:7px;
}

.t3img-player-grid.count-7 .t3img-reference-answer span,
.t3img-player-grid.count-8 .t3img-reference-answer span,
.t3img-player-grid.count-9 .t3img-reference-answer span{
  display:none;
}

.t3img-player-grid.count-7 .t3img-submit-answer,
.t3img-player-grid.count-8 .t3img-submit-answer,
.t3img-player-grid.count-9 .t3img-submit-answer{
  min-height:20px;
  border-radius:6px;
  font-size:6px;
}

/* κινητό παραμένει single-column */
@media (max-width:900px){
  .t3img-game-head{
    min-height:0;
    padding:10px 44px 10px 10px;
  }
}

/* =========================================================
   v0.9.9 · BIGGER TEXT / SMALLER BUTTONS / TIGHTER LAYOUT
   - μεγαλύτερα γράμματα στα κουμπιά
   - μικρότερα κουμπιά
   - πιο συμπτυγμένο layout
   ========================================================= */

/* ---------- γενικά κουμπιά ---------- */
.t3img-signature-groups,
.t3img-interval-controls,
.t3img-note-controls{
  gap:3px !important;
}

.t3img-signature-groups .sharps,
.t3img-signature-groups .flats,
.t3img-interval-controls .symbols,
.t3img-note-picker .letters,
.t3img-note-picker .accidentals{
  gap:2px !important;
}

.t3img-signature-groups button,
.t3img-interval-controls button,
.t3img-note-controls button{
  min-height:24px !important;
  padding:1px 4px !important;
  border-radius:7px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.t3img-signature-groups button b,
.t3img-interval-controls button b,
.t3img-note-controls button b{
  font-size:1em !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
}

.t3img-signature-groups .finish button{
  min-height:25px !important;
}

.t3img-selected-notes{
  min-height:26px !important;
  padding:2px !important;
  gap:2px !important;
}

.t3img-selected-notes > button{
  min-height:20px !important;
  padding:1px 5px !important;
  border-radius:6px !important;
}

.t3img-selected-notes > button b,
.t3img-selected-notes > button span{
  font-size:9px !important;
}

.t3img-selected-notes > em{
  font-size:7px !important;
}

.t3img-note-picker{
  grid-template-columns:minmax(0,1.6fr) minmax(82px,.66fr) !important;
}

.t3img-submit-answer{
  min-height:30px !important;
  padding:4px 8px !important;
  font-size:10px !important;
}

.t3img-live-answer{
  min-height:30px !important;
  padding:5px 7px !important;
  font-size:11px !important;
}

.t3img-player-card{
  gap:5px !important;
  padding:8px !important;
}

.t3img-question-box{
  min-height:66px !important;
  padding:7px 8px !important;
}

/* ---------- 4 παίκτες ---------- */
.t3img-player-grid.count-4{
  gap:6px !important;
}

.t3img-player-grid.count-4 .t3img-player-card{
  gap:3px !important;
  padding:6px !important;
}

.t3img-player-grid.count-4 .t3img-question-box{
  grid-template-columns:46px 1fr !important;
  min-height:54px !important;
  gap:5px !important;
  padding:5px !important;
}

.t3img-player-grid.count-4 .t3img-question-mark{
  width:40px !important;
  height:40px !important;
}

.t3img-player-grid.count-4 .t3img-question-box h3{
  font-size:15px !important;
}

.t3img-player-grid.count-4 .t3img-live-answer{
  min-height:22px !important;
  padding:3px 5px !important;
  font-size:8px !important;
}

.t3img-player-grid.count-4 .t3img-answer-step > span{
  width:16px !important;
  height:16px !important;
  font-size:7px !important;
}

.t3img-player-grid.count-4 .t3img-answer-step b{
  font-size:7px !important;
}

.t3img-player-grid.count-4 .t3img-signature-groups button,
.t3img-player-grid.count-4 .t3img-interval-controls button,
.t3img-player-grid.count-4 .t3img-note-controls button{
  min-height:19px !important;
  padding:0 3px !important;
  border-radius:6px !important;
  font-size:9px !important;
}

.t3img-player-grid.count-4 .t3img-signature-groups .finish button{
  min-height:20px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes{
  min-height:19px !important;
  padding:1px 2px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button{
  min-height:15px !important;
  padding:0 3px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button b,
.t3img-player-grid.count-4 .t3img-selected-notes > button span{
  font-size:7px !important;
}

.t3img-player-grid.count-4 .t3img-note-picker{
  grid-template-columns:minmax(0,1.58fr) minmax(58px,.55fr) !important;
}

.t3img-player-grid.count-4 .t3img-submit-answer{
  min-height:23px !important;
  font-size:8px !important;
}

/* ---------- 5–6 παίκτες ---------- */
.t3img-player-grid.count-5 .t3img-signature-groups button,
.t3img-player-grid.count-5 .t3img-interval-controls button,
.t3img-player-grid.count-5 .t3img-note-controls button,
.t3img-player-grid.count-6 .t3img-signature-groups button,
.t3img-player-grid.count-6 .t3img-interval-controls button,
.t3img-player-grid.count-6 .t3img-note-controls button{
  min-height:17px !important;
  padding:0 2px !important;
  font-size:8px !important;
}

.t3img-player-grid.count-5 .t3img-signature-groups .finish button,
.t3img-player-grid.count-6 .t3img-signature-groups .finish button{
  min-height:18px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes,
.t3img-player-grid.count-6 .t3img-selected-notes{
  min-height:17px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button,
.t3img-player-grid.count-6 .t3img-selected-notes > button{
  min-height:13px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button b,
.t3img-player-grid.count-5 .t3img-selected-notes > button span,
.t3img-player-grid.count-6 .t3img-selected-notes > button b,
.t3img-player-grid.count-6 .t3img-selected-notes > button span{
  font-size:6px !important;
}

/* ---------- 7–9 παίκτες ---------- */
.t3img-player-grid.count-7 .t3img-signature-groups button,
.t3img-player-grid.count-7 .t3img-interval-controls button,
.t3img-player-grid.count-7 .t3img-note-controls button,
.t3img-player-grid.count-8 .t3img-signature-groups button,
.t3img-player-grid.count-8 .t3img-interval-controls button,
.t3img-player-grid.count-8 .t3img-note-controls button,
.t3img-player-grid.count-9 .t3img-signature-groups button,
.t3img-player-grid.count-9 .t3img-interval-controls button,
.t3img-player-grid.count-9 .t3img-note-controls button{
  min-height:15px !important;
  padding:0 2px !important;
  font-size:7px !important;
}

.t3img-player-grid.count-7 .t3img-signature-groups .finish button,
.t3img-player-grid.count-8 .t3img-signature-groups .finish button,
.t3img-player-grid.count-9 .t3img-signature-groups .finish button{
  min-height:16px !important;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button b,
.t3img-player-grid.count-7 .t3img-selected-notes > button span,
.t3img-player-grid.count-8 .t3img-selected-notes > button b,
.t3img-player-grid.count-8 .t3img-selected-notes > button span,
.t3img-player-grid.count-9 .t3img-selected-notes > button b,
.t3img-player-grid.count-9 .t3img-selected-notes > button span{
  font-size:5px !important;
}

/* =========================================================
   v1.0.0 · WHITE SCALE NAME TEXT
   ========================================================= */

.t3img-question-box h3,
.t3img-question-box > div:last-child small,
.t3img-question-box > div:last-child span{
  color:#fff !important;
}

.t3img-question-box h3{
  text-shadow:0 2px 5px rgba(15,29,72,.28);
}

.t3img-question-box > div:last-child small,
.t3img-question-box > div:last-child span{
  opacity:.88 !important;
}

/* =========================================================
   v1.0.1 · SIDE TITLE / VERTICAL CONTROLS
   Όνομα κλίμακας αριστερά, κουμπιά δεξιά σε κάθετη compact στήλη
   ========================================================= */

.t3img-top-layout{
  display:grid;
  grid-template-columns:minmax(165px,220px) minmax(0,1fr);
  align-items:start;
  gap:8px;
}

.t3img-controls-stack{
  display:grid;
  gap:5px;
  min-width:0;
}

.t3img-question-box{
  min-height:100%;
  align-self:stretch;
}

.t3img-question-box h3{
  line-height:1.04;
}

.t3img-signature-groups button,
.t3img-interval-controls button,
.t3img-note-controls button{
  min-height:22px !important;
  padding:1px 4px !important;
  font-size:11px !important;
}

.t3img-signature-groups .finish button{
  min-height:23px !important;
}

.t3img-selected-notes{
  min-height:24px !important;
}

.t3img-selected-notes > button{
  min-height:18px !important;
  padding:1px 5px !important;
}

.t3img-selected-notes > button b,
.t3img-selected-notes > button span{
  font-size:9px !important;
}

.t3img-submit-answer{
  min-height:28px !important;
}

/* 3 players */
.t3img-player-grid.count-3 .t3img-top-layout{
  grid-template-columns:minmax(145px,190px) minmax(0,1fr);
  gap:7px;
}

.t3img-player-grid.count-3 .t3img-question-box{
  min-height:66px;
  padding:7px;
}

.t3img-player-grid.count-3 .t3img-question-mark{
  width:44px;
  height:44px;
}

.t3img-player-grid.count-3 .t3img-question-box h3{
  font-size:16px;
}

.t3img-player-grid.count-3 .t3img-question-box > div:last-child small{
  font-size:5px;
}

.t3img-player-grid.count-3 .t3img-question-box > div:last-child span{
  font-size:8px;
}

/* 4 players */
.t3img-player-grid.count-4 .t3img-top-layout{
  grid-template-columns:135px minmax(0,1fr);
  gap:6px;
}

.t3img-player-grid.count-4 .t3img-question-box{
  min-height:56px !important;
  grid-template-columns:38px 1fr !important;
  padding:5px !important;
}

.t3img-player-grid.count-4 .t3img-question-mark{
  width:34px !important;
  height:34px !important;
}

.t3img-player-grid.count-4 .t3img-question-box h3{
  font-size:14px !important;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child small{
  font-size:4px !important;
}

.t3img-player-grid.count-4 .t3img-question-box > div:last-child span{
  font-size:6px !important;
}

.t3img-player-grid.count-4 .t3img-controls-stack{
  gap:4px;
}

.t3img-player-grid.count-4 .t3img-signature-groups button,
.t3img-player-grid.count-4 .t3img-interval-controls button,
.t3img-player-grid.count-4 .t3img-note-controls button{
  min-height:18px !important;
  padding:0 3px !important;
  font-size:9px !important;
}

.t3img-player-grid.count-4 .t3img-signature-groups .finish button{
  min-height:19px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes{
  min-height:18px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button{
  min-height:14px !important;
  padding:0 3px !important;
}

.t3img-player-grid.count-4 .t3img-selected-notes > button b,
.t3img-player-grid.count-4 .t3img-selected-notes > button span{
  font-size:7px !important;
}

.t3img-player-grid.count-4 .t3img-submit-answer{
  min-height:22px !important;
  font-size:8px !important;
}

/* 5-6 players */
.t3img-player-grid.count-5 .t3img-top-layout,
.t3img-player-grid.count-6 .t3img-top-layout{
  grid-template-columns:122px minmax(0,1fr);
  gap:5px;
}

.t3img-player-grid.count-5 .t3img-question-box,
.t3img-player-grid.count-6 .t3img-question-box{
  min-height:49px !important;
  grid-template-columns:31px 1fr !important;
  gap:4px !important;
  padding:4px !important;
}

.t3img-player-grid.count-5 .t3img-question-mark,
.t3img-player-grid.count-6 .t3img-question-mark{
  width:28px !important;
  height:28px !important;
}

.t3img-player-grid.count-5 .t3img-question-box h3,
.t3img-player-grid.count-6 .t3img-question-box h3{
  font-size:12px !important;
}

.t3img-player-grid.count-5 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-5 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-6 .t3img-question-box > div:last-child span{
  display:none !important;
}

.t3img-player-grid.count-5 .t3img-controls-stack,
.t3img-player-grid.count-6 .t3img-controls-stack{
  gap:3px;
}

.t3img-player-grid.count-5 .t3img-signature-groups button,
.t3img-player-grid.count-5 .t3img-interval-controls button,
.t3img-player-grid.count-5 .t3img-note-controls button,
.t3img-player-grid.count-6 .t3img-signature-groups button,
.t3img-player-grid.count-6 .t3img-interval-controls button,
.t3img-player-grid.count-6 .t3img-note-controls button{
  min-height:16px !important;
  padding:0 2px !important;
  font-size:8px !important;
}

.t3img-player-grid.count-5 .t3img-signature-groups .finish button,
.t3img-player-grid.count-6 .t3img-signature-groups .finish button{
  min-height:17px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes,
.t3img-player-grid.count-6 .t3img-selected-notes{
  min-height:16px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button,
.t3img-player-grid.count-6 .t3img-selected-notes > button{
  min-height:12px !important;
}

.t3img-player-grid.count-5 .t3img-selected-notes > button b,
.t3img-player-grid.count-5 .t3img-selected-notes > button span,
.t3img-player-grid.count-6 .t3img-selected-notes > button b,
.t3img-player-grid.count-6 .t3img-selected-notes > button span{
  font-size:6px !important;
}

.t3img-player-grid.count-5 .t3img-submit-answer,
.t3img-player-grid.count-6 .t3img-submit-answer{
  min-height:19px !important;
  font-size:7px !important;
}

/* 7-9 players */
.t3img-player-grid.count-7 .t3img-top-layout,
.t3img-player-grid.count-8 .t3img-top-layout,
.t3img-player-grid.count-9 .t3img-top-layout{
  grid-template-columns:108px minmax(0,1fr);
  gap:4px;
}

.t3img-player-grid.count-7 .t3img-question-box,
.t3img-player-grid.count-8 .t3img-question-box,
.t3img-player-grid.count-9 .t3img-question-box{
  min-height:41px !important;
  grid-template-columns:26px 1fr !important;
  gap:3px !important;
  padding:3px !important;
}

.t3img-player-grid.count-7 .t3img-question-mark,
.t3img-player-grid.count-8 .t3img-question-mark,
.t3img-player-grid.count-9 .t3img-question-mark{
  width:24px !important;
  height:24px !important;
}

.t3img-player-grid.count-7 .t3img-question-box h3,
.t3img-player-grid.count-8 .t3img-question-box h3,
.t3img-player-grid.count-9 .t3img-question-box h3{
  font-size:10px !important;
}

.t3img-player-grid.count-7 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child small,
.t3img-player-grid.count-7 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-8 .t3img-question-box > div:last-child span,
.t3img-player-grid.count-9 .t3img-question-box > div:last-child span{
  display:none !important;
}

.t3img-player-grid.count-7 .t3img-controls-stack,
.t3img-player-grid.count-8 .t3img-controls-stack,
.t3img-player-grid.count-9 .t3img-controls-stack{
  gap:2px;
}

.t3img-player-grid.count-7 .t3img-signature-groups button,
.t3img-player-grid.count-7 .t3img-interval-controls button,
.t3img-player-grid.count-7 .t3img-note-controls button,
.t3img-player-grid.count-8 .t3img-signature-groups button,
.t3img-player-grid.count-8 .t3img-interval-controls button,
.t3img-player-grid.count-8 .t3img-note-controls button,
.t3img-player-grid.count-9 .t3img-signature-groups button,
.t3img-player-grid.count-9 .t3img-interval-controls button,
.t3img-player-grid.count-9 .t3img-note-controls button{
  min-height:14px !important;
  padding:0 2px !important;
  font-size:7px !important;
}

.t3img-player-grid.count-7 .t3img-signature-groups .finish button,
.t3img-player-grid.count-8 .t3img-signature-groups .finish button,
.t3img-player-grid.count-9 .t3img-signature-groups .finish button{
  min-height:15px !important;
}

.t3img-player-grid.count-7 .t3img-selected-notes,
.t3img-player-grid.count-8 .t3img-selected-notes,
.t3img-player-grid.count-9 .t3img-selected-notes{
  min-height:14px !important;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button,
.t3img-player-grid.count-8 .t3img-selected-notes > button,
.t3img-player-grid.count-9 .t3img-selected-notes > button{
  min-height:11px !important;
}

.t3img-player-grid.count-7 .t3img-selected-notes > button b,
.t3img-player-grid.count-7 .t3img-selected-notes > button span,
.t3img-player-grid.count-8 .t3img-selected-notes > button b,
.t3img-player-grid.count-8 .t3img-selected-notes > button span,
.t3img-player-grid.count-9 .t3img-selected-notes > button b,
.t3img-player-grid.count-9 .t3img-selected-notes > button span{
  font-size:5px !important;
}

.t3img-player-grid.count-7 .t3img-submit-answer,
.t3img-player-grid.count-8 .t3img-submit-answer,
.t3img-player-grid.count-9 .t3img-submit-answer{
  min-height:17px !important;
  font-size:6px !important;
}

/* Mobile: ξαναγίνεται κάθετο */
@media (max-width:900px){
  .t3img-top-layout{
    grid-template-columns:1fr;
    gap:6px;
  }
}

/* =========================================================
   v1.0.2 · FIX SCALE TITLE OVERFLOW (1 PLAYER)
   Το όνομα της κλίμακας να μη βγαίνει έξω από το μπλε πλαίσιο
   ========================================================= */

.t3img-question-box > div{
  min-width:0;
  display:grid;
  align-content:center;
}

.t3img-question-box h3{
  max-width:100%;
  margin:2px 0 0;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:.96;
}

/* ειδικά για 1 παίκτη */
.t3img-player-grid.count-1 .t3img-top-layout{
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:10px;
}

.t3img-player-grid.count-1 .t3img-question-box{
  grid-template-columns:126px minmax(0,1fr);
  min-height:182px;
  gap:10px;
  padding:12px;
}

.t3img-player-grid.count-1 .t3img-question-mark{
  width:122px;
  height:122px;
}

.t3img-player-grid.count-1 .t3img-question-mark span{
  font-size:11px;
}

.t3img-player-grid.count-1 .t3img-question-mark b{
  font-size:52px;
}

.t3img-player-grid.count-1 .t3img-question-mark small{
  font-size:11px;
}

.t3img-player-grid.count-1 .t3img-question-box > div:last-child small{
  font-size:11px;
  line-height:1.25;
}

.t3img-player-grid.count-1 .t3img-question-box h3{
  font-size:clamp(24px,2.2vw,34px);
  line-height:.92;
  letter-spacing:-.03em;
}

.t3img-player-grid.count-1 .t3img-question-box > div:last-child span{
  font-size:15px;
  line-height:1.15;
}

/* αν η κάρτα στενέψει αρκετά, να προστατεύεται πάλι */
@media (max-width:1400px){
  .t3img-player-grid.count-1 .t3img-top-layout{
    grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  }

  .t3img-player-grid.count-1 .t3img-question-box{
    grid-template-columns:104px minmax(0,1fr);
    min-height:160px;
    gap:8px;
    padding:10px;
  }

  .t3img-player-grid.count-1 .t3img-question-mark{
    width:98px;
    height:98px;
  }

  .t3img-player-grid.count-1 .t3img-question-mark b{
    font-size:44px;
  }

  .t3img-player-grid.count-1 .t3img-question-box h3{
    font-size:clamp(20px,2vw,28px);
  }

  .t3img-player-grid.count-1 .t3img-question-box > div:last-child span{
    font-size:13px;
  }
}

/* =========================================================
   v1.0.3 · FIRST SCENE STAFF HIGHLIGHT + DEGREE LABELS
   ========================================================= */

.t3im-diff-note-backdrop{
  fill:rgba(255, 89, 122, .10);
  stroke:rgba(228, 73, 107, .42);
  stroke-width:2;
  filter:drop-shadow(0 4px 10px rgba(220,70,101,.12));
}

.t3im-staff-note.is-mode-difference .t3im-diff-note-backdrop{
  fill:rgba(255, 89, 122, .12);
}

.t3im-staff-degree{
  font-size:12px;
  font-weight:1000;
}

.t3im-staff-note.is-mode-difference .t3im-staff-degree{
  fill:#c7294c;
}

.t3im-formula-row{
  margin-top:4px;
}

.t3im-formula-row button > small{
  font-size:11px;
}

.t3im-formula-row strong{
  font-size:18px;
}

.t3im-formula-row span{
  font-size:9px;
}

/* Αφού αφαιρέθηκε το κάτω row με τόνους/ημιτόνια, μην κρατάει κενά σε responsive */
@media (max-width: 860px){
  .t3im-formula-row{
    gap:5px;
  }

  .t3im-formula-row button{
    min-height:56px;
  }
}

/* =========================================================
   v1.0.4 · ROMAN DEGREES / NO NOTE NAMES
   ========================================================= */

.t3im-staff-degree{
  fill:#283954;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.02em;
}

.t3im-formula-row button{
  min-height:48px;
  display:grid;
  place-items:center;
  padding:5px;
}

.t3im-formula-row button > small{
  grid-row:auto;
  width:auto;
  height:auto;
  min-width:38px;
  min-height:28px;
  padding:4px 9px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
}

.t3im-formula-row strong,
.t3im-formula-row span,
.t3im-formula-row em{
  display:none !important;
}

.t3im-formula-row button.tonic > small{
  color:#fff;
  background:rgba(255,255,255,.2);
}

.t3im-formula-row button.is-mode-difference > small{
  color:#fff;
  background:#ff4e70;
}

@media (max-width:860px){
  .t3im-formula-row button{
    min-height:44px;
  }

  .t3im-formula-row button > small{
    min-width:34px;
    min-height:26px;
    font-size:12px;
  }
}

/* =========================================================
   v1.0.5 · Spelling reveal + maj7/7 labels
   ========================================================= */

.t3im-spelling-reveal-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 10px;
  padding:12px 16px;
  border:1px solid rgba(120,139,180,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,246,255,.92));
  box-shadow:0 10px 24px rgba(57,92,148,.08);
}

.t3im-spelling-reveal-info{
  display:grid;
  gap:2px;
}

.t3im-spelling-reveal-info strong{
  color:#26395a;
  font-size:15px;
  font-weight:1000;
  line-height:1.1;
}

.t3im-spelling-reveal-info small{
  color:#647694;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
}

.t3im-spelling-reveal-button{
  min-width:168px;
  min-height:42px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#6f60ff 0%,#4f7dff 100%);
  color:#fff;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(82,101,241,.22);
}

.t3im-spelling-reveal-button:disabled{
  opacity:.62;
  cursor:default;
  box-shadow:none;
}

.t3im-interval-spelling rect{
  width:auto;
}

@media (max-width: 900px){
  .t3im-spelling-reveal-bar{
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
  }

  .t3im-spelling-reveal-button{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   v1.0.6 · LARGE FRAMED SPELLING LABELS
   Μεγάλα labels με καθαρό πλαίσιο, ενώ διατηρείται το reveal ένα-ένα
   ========================================================= */

.t3im-interval-spelling{
  animation:t3imSpellingLabelIn .28s cubic-bezier(.2,.8,.25,1.15) both;
}

.t3im-interval-spelling rect{
  fill:#ffffff;
  stroke:#8399bb;
  stroke-width:2;
  filter:
    drop-shadow(0 5px 8px rgba(39,65,105,.18));
}

.t3im-interval-spelling text{
  fill:#263a5a;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.02em;
}

.t3im-staff-note.is-root .t3im-interval-spelling rect{
  fill:linear-gradient(135deg,#7057d7,#4f7dff);
  stroke:#5140ba;
  stroke-width:2.2;
  filter:
    drop-shadow(0 6px 10px rgba(89,66,199,.28));
}

.t3im-staff-note.is-root .t3im-interval-spelling text{
  fill:#ffffff;
  font-size:16px;
}

.t3im-interval-spelling.is-difference rect{
  fill:#ff5e7d;
  stroke:#c92e51;
  stroke-width:2.4;
  filter:
    drop-shadow(0 0 10px rgba(255,75,111,.48))
    drop-shadow(0 5px 9px rgba(177,35,67,.20));
}

.t3im-interval-spelling.is-difference text{
  fill:#ffffff;
  font-size:16px;
  font-weight:1000;
}

@keyframes t3imSpellingLabelIn{
  from{
    opacity:0;
    transform:translateY(-8px) scale(.75);
    transform-origin:center;
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    transform-origin:center;
  }
}

@media (max-width:900px){
  .t3im-interval-spelling text,
  .t3im-staff-note.is-root .t3im-interval-spelling text,
  .t3im-interval-spelling.is-difference text{
    font-size:15px;
  }
}

/* =========================================================
   v1.0.7 · CLICK NOTE TO REVEAL SPELLING
   ========================================================= */

/* Το παλιό κουμπί/section δεν πρέπει να εμφανιστεί ούτε από cache. */
.t3im-spelling-reveal-bar,
.t3im-spelling-reveal-button{
  display:none !important;
}

.t3im-staff-note{
  cursor:pointer;
}

.t3im-staff-note:hover .t3im-notehead{
  filter:
    drop-shadow(0 0 8px rgba(79,125,255,.38));
}

.t3im-staff-note:hover .t3im-note-stem{
  stroke:#4f7dff;
}

.t3im-actions > span{
  color:#536782;
  font-size:11px;
  font-weight:850;
}

/* =========================================================
   v1.0.8 · TOGGLE SPELLING + HIDE ALL
   ========================================================= */

.t3im-spelling-staff{
  height:198px;
}

.t3im-interval-spelling,
.t3im-interval-spelling *,
.t3im-mode-diff-callout,
.t3im-mode-diff-callout *,
.t3im-diff-note-backdrop{
  pointer-events:none;
}

.t3im-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.4 !important;
  filter:
    drop-shadow(0 5px 9px rgba(33,59,99,.24)) !important;
}

.t3im-interval-spelling text{
  fill:#243959 !important;
  font-size:17px !important;
  font-weight:1000 !important;
}

.t3im-staff-note.is-root .t3im-interval-spelling rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3im-staff-note.is-root .t3im-interval-spelling text{
  fill:#fff !important;
}

.t3im-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#b91f43 !important;
  stroke-width:2.8 !important;
  filter:
    drop-shadow(0 0 11px rgba(255,67,106,.55))
    drop-shadow(0 6px 10px rgba(151,28,58,.24)) !important;
}

.t3im-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:18px !important;
}

.t3im-diff-note-backdrop{
  fill:rgba(255,79,114,.10);
  stroke:rgba(226,55,91,.43);
}

.t3im-mode-diff-callout{
  opacity:.98;
}

.t3im-hide-spellings{
  color:#8d3650 !important;
  background:linear-gradient(180deg,#fff0f4,#ffdce6) !important;
  border:1px solid rgba(208,54,88,.18) !important;
  box-shadow:
    inset 0 -2px 0 rgba(157,31,62,.08),
    0 5px 10px rgba(164,40,68,.10) !important;
}

.t3im-hide-spellings:disabled{
  opacity:.38;
  cursor:default;
  box-shadow:none !important;
}

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

  .t3im-actions > span{
    width:100%;
    margin-left:0;
  }
}

/* =========================================================
   v1.0.9 · CHARACTERISTIC SPELLING ALWAYS ON TOP
   ========================================================= */

.t3im-note-click-target{
  fill:transparent;
  stroke:none;
  pointer-events:all;
  cursor:pointer;
}

.t3im-spelling-top-layer{
  pointer-events:none;
}

.t3im-spelling-top-layer .t3im-interval-spelling{
  pointer-events:none;
}

.t3im-spelling-top-layer .t3im-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.6 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.28)) !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.62))
    drop-shadow(0 7px 12px rgba(151,28,58,.28)) !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

.t3im-staff-note.is-mode-difference:hover .t3im-diff-note-backdrop{
  fill:rgba(255,79,114,.16);
  stroke:rgba(220,42,82,.62);
}

/* =========================================================
   v1.1.0 · HTML OVERLAY SPELLING LABELS
   Τα διαστήματα εμφανίζονται σε overlay layer μπροστά από όλα
   ========================================================= */

.t3im-staff-shell{
  position:relative;
}

.t3im-spelling-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
}

.t3im-spelling-chip{
  position:absolute;
  top:10px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  background:#f9fcff;
  border:2.6px solid #60789f;
  box-shadow:0 7px 12px rgba(33,59,99,.26);
  color:#243959;
  font-size:18px;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.t3im-spelling-chip.is-root-label{
  background:#6d57dc;
  border-color:#4938b4;
  color:#fff;
}

.t3im-spelling-chip.is-difference{
  z-index:35;
  min-width:70px;
  background:#ff4f72;
  border-color:#a9183a;
  color:#fff;
  box-shadow:
    0 0 13px rgba(255,67,106,.60),
    0 8px 14px rgba(151,28,58,.28);
}

.t3im-spelling-chip.is-difference.is-root-label{
  background:#ff4f72;
  border-color:#a9183a;
  color:#fff;
}

@media (max-width:900px){
  .t3im-spelling-chip{
    top:8px;
    min-width:54px;
    height:34px;
    padding:0 12px;
    font-size:16px;
  }

  .t3im-spelling-chip.is-difference{
    min-width:62px;
  }
}

/* =========================================================
   v1.1.1 · Wider staff + compact top area
   ========================================================= */

.t3im-main-card{
  padding:10px 12px;
  border-radius:17px;
}

.t3im-mode-head{
  grid-template-columns:minmax(0,1fr) minmax(210px,300px);
  gap:10px;
  margin-bottom:6px;
}

.t3im-degree{
  margin-bottom:1px;
  font-size:8px;
  letter-spacing:.45px;
}

.t3im-mode-head h3{
  font-size:clamp(22px,2.5vw,32px);
  line-height:.96;
}

.t3im-mode-head p{
  margin:3px 0 0;
  font-size:10px;
}

.t3im-quality{
  min-height:48px;
  padding:6px 8px;
  border-radius:12px;
  border-left-width:4px;
}

.t3im-quality > span{
  min-width:70px;
  padding:6px 7px;
  font-size:9px;
}

.t3im-quality strong{
  font-size:13px;
}

.t3im-quality small{
  font-size:8px;
}

.t3im-mode-reference,
.t3im-mode-difference-summary{
  min-height:38px;
  margin:0 0 5px;
  padding:6px 9px;
  border-radius:12px;
}

.t3im-mode-reference > span,
.t3im-mode-difference-summary > div:first-child span{
  font-size:6.7px;
}

.t3im-mode-reference > strong,
.t3im-mode-difference-summary > div:first-child strong{
  font-size:9px;
}

.t3im-mode-reference > small{
  font-size:7.5px;
}

.t3im-mode-difference-changes{
  gap:4px;
}

.t3im-staff-shell{
  margin:4px 0 6px;
  padding:8px 10px 6px;
  border-radius:22px;
}

.t3im-staff{
  height:245px;
}

.t3im-spelling-overlay{
  top:8px;
  left:0;
  right:0;
  bottom:auto;
  height:46px;
}

.t3im-spelling-chip{
  top:0;
  min-width:64px;
  height:40px;
  padding:0 16px;
  font-size:18px;
  z-index:40;
}

.t3im-spelling-chip.is-difference{
  min-width:72px;
  z-index:45;
}

.t3im-formula-row{
  margin-top:2px;
}

.t3im-actions{
  gap:8px;
  margin-top:4px;
}

.t3im-actions button{
  min-height:34px;
  padding:0 12px;
  font-size:11px;
}

.t3im-actions > span{
  font-size:10px;
}

@media (max-width: 1100px){
  .t3im-mode-head{
    grid-template-columns:1fr;
    gap:8px;
  }

  .t3im-staff{
    height:228px;
  }

  .t3im-spelling-chip{
    min-width:56px;
    height:36px;
    padding:0 12px;
    font-size:16px;
  }

  .t3im-spelling-chip.is-difference{
    min-width:64px;
  }
}

/* =========================================================
   v1.1.2 · PRECISE INTERVAL CHIP ALIGNMENT
   Τα chips ευθυγραμμίζονται στο ίδιο content box με το SVG,
   όχι στο outer shell, ώστε να κάθονται ακριβώς πάνω από τις νότες.
   ========================================================= */

.t3im-staff-shell{
  --t3im-shell-pad-top:8px;
  --t3im-shell-pad-x:10px;
  --t3im-shell-pad-bottom:6px;
  padding:var(--t3im-shell-pad-top) var(--t3im-shell-pad-x) var(--t3im-shell-pad-bottom);
}

.t3im-spelling-overlay{
  left:var(--t3im-shell-pad-x) !important;
  right:var(--t3im-shell-pad-x) !important;
  top:var(--t3im-shell-pad-top) !important;
  width:auto !important;
  height:46px;
}

/* λίγο πιο αυστηρό centering */
.t3im-spelling-chip{
  transform:translateX(-50%);
}

/* responsive sync */
@media (max-width:1100px){
  .t3im-staff-shell{
    --t3im-shell-pad-top:8px;
    --t3im-shell-pad-x:10px;
    --t3im-shell-pad-bottom:6px;
  }
}

/* =========================================================
   v1.1.3 · PERFECT SVG ALIGNMENT + CHANGE LABEL BELOW NOTE
   ========================================================= */

.t3im-spelling-overlay{
  display:none !important;
}

.t3im-spelling-top-layer,
.t3im-mode-diff-callout-layer{
  pointer-events:none;
}

.t3im-spelling-top-layer .t3im-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.6 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.24)) !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
  letter-spacing:-.02em;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.58))
    drop-shadow(0 8px 14px rgba(151,28,58,.24)) !important;
}

.t3im-spelling-top-layer .t3im-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

.t3im-mode-diff-callout-layer .t3im-mode-diff-callout rect{
  fill:#ffe79b;
  stroke:#cc9821;
  stroke-width:2;
  filter:
    drop-shadow(0 4px 8px rgba(148,100,13,.16));
}

.t3im-mode-diff-callout-layer .t3im-mode-diff-callout text{
  fill:#9c6810;
  font-size:14px;
  font-weight:1000;
  letter-spacing:-.01em;
}

.t3im-mode-diff-callout-layer .t3im-mode-diff-callout.bottom rect,
.t3im-mode-diff-callout-layer .t3im-mode-diff-callout.bottom text{
  pointer-events:none;
}

/* =========================================================
   v1.1.4 · DEFINITIVE VISIBLE INTERVAL LAYER FIX
   Το παλιό .t3im-spelling-top-layer είχε display:none!important.
   Χρησιμοποιείται νέο SVG layer που είναι πάντα ορατό.
   ========================================================= */

.t3im-spelling-visible-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.t3im-spelling-visible-layer .t3im-interval-spelling{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.t3im-spelling-visible-layer .t3im-interval-spelling rect{
  fill:#f9fcff !important;
  stroke:#60789f !important;
  stroke-width:2.8 !important;
  filter:
    drop-shadow(0 6px 10px rgba(33,59,99,.28)) !important;
}

.t3im-spelling-visible-layer .t3im-interval-spelling text{
  fill:#243959 !important;
  font-size:18px !important;
  font-weight:1000 !important;
  letter-spacing:-.02em;
}

.t3im-spelling-visible-layer .t3im-interval-spelling.is-root-label rect{
  fill:#6d57dc !important;
  stroke:#4938b4 !important;
}

.t3im-spelling-visible-layer .t3im-interval-spelling.is-root-label text{
  fill:#fff !important;
}

.t3im-spelling-visible-layer .t3im-interval-spelling.is-difference rect{
  fill:#ff4f72 !important;
  stroke:#a9183a !important;
  stroke-width:3.2 !important;
  filter:
    drop-shadow(0 0 13px rgba(255,67,106,.62))
    drop-shadow(0 8px 14px rgba(151,28,58,.28)) !important;
}

.t3im-spelling-visible-layer .t3im-interval-spelling.is-difference text{
  fill:#fff !important;
  font-size:19px !important;
}

/* Το παλιό layer παραμένει κρυφό μόνο για παλιά cached markup. */
.t3im-spelling-top-layer{
  display:none !important;
}

/* =========================================================
   v1.1.5 · FINAL NOTE HIT LAYER
   Αόρατο click layer πάνω από highlight, note, callout και labels.
   ========================================================= */

.t3im-final-note-hit-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:all !important;
}

.t3im-final-note-hit{
  fill:rgba(255,255,255,0.001);
  stroke:none;
  pointer-events:all !important;
  cursor:pointer;
  outline:none;
}

.t3im-final-note-hit:hover{
  fill:rgba(79,125,255,.035);
}

.t3im-final-note-hit:focus{
  fill:rgba(79,125,255,.055);
  stroke:rgba(79,125,255,.38);
  stroke-width:2;
}

/* Τα οπτικά layers δεν πρέπει να καταναλώνουν clicks. */
.t3im-spelling-visible-layer,
.t3im-spelling-visible-layer *,
.t3im-mode-diff-callout-layer,
.t3im-mode-diff-callout-layer *,
.t3im-diff-note-backdrop,
.t3im-notehead,
.t3im-note-stem,
.t3im-staff-accidental,
.t3im-staff-degree{
  pointer-events:none !important;
}

/* =========================================================
   v1.1.6 · DIRECT DOM INTERVAL TOGGLE
   Όλα τα labels υπάρχουν πάντα. Το click αλλάζει μόνο class.
   ========================================================= */

.t3im-spelling-visible-layer{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
}

.t3im-spelling-visible-layer
.t3im-interval-spelling{
  display:inline !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-5px) scale(.82);
  transform-box:fill-box;
  transform-origin:center;
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

.t3im-spelling-visible-layer
.t3im-interval-spelling.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1);
  transition:
    opacity .16s ease,
    transform .18s ease,
    visibility 0s;
}

/* Η χαρακτηριστική νότα έχει το πιο έντονο label. */
.t3im-spelling-visible-layer
.t3im-interval-spelling.is-difference.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.t3im-final-note-hit-layer{
  pointer-events:all !important;
}

.t3im-final-note-hit{
  pointer-events:all !important;
  cursor:pointer;
}

/* =========================================================
   v1.1.7 · HTML TOP BOXES FINAL FIX
   Τα διαστήματα εμφανίζονται ως HTML κουτάκια πάνω από όλα.
   ========================================================= */

.t3im-staff-shell{
  position:relative;
}

.t3im-spelling-visible-layer{
  display:none !important;
}

.t3im-top-interval-overlay{
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:52px;
  z-index:90;
  pointer-events:none;
}

.t3im-top-interval-chip{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:42px;
  padding:0 16px;
  border-radius:16px;
  background:#ffffff;
  border:3px solid #5f79a5;
  box-shadow:
    0 8px 18px rgba(31,53,92,.18),
    0 2px 0 rgba(255,255,255,.78) inset;
  color:#233a5e;
  font-size:21px;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s;
}

.t3im-top-interval-chip.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s;
}

.t3im-top-interval-chip.is-root-label{
  background:linear-gradient(180deg,#7d67ef 0%,#654fd7 100%);
  border-color:#4938b4;
  color:#fff;
}

.t3im-top-interval-chip.is-difference{
  background:linear-gradient(180deg,#ff6b88 0%,#ff4b71 100%);
  border-color:#a9183a;
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.72),
    0 0 18px rgba(255,67,106,.38),
    0 9px 18px rgba(151,28,58,.22);
}

.t3im-top-interval-chip.is-difference.is-visible{
  opacity:1;
  visibility:visible;
}

@media (max-width: 1100px){
  .t3im-top-interval-overlay{
    left:10px;
    right:10px;
    top:8px;
    height:46px;
  }

  .t3im-top-interval-chip{
    min-width:56px;
    height:38px;
    padding:0 12px;
    font-size:18px;
    border-radius:14px;
  }
}

/* =========================================================
   v1.1.9 · PERFECT CENTER ALIGNMENT
   Το SVG και το HTML overlay μοιράζονται ακριβώς το ίδιο πλάτος.
   Τα κουτάκια κεντράρονται με translateX(-50%) χωρίς έξτρα offset.
   ========================================================= */

.t3im-spelling-staff{
  width:100%;
  display:block;
}

.t3im-top-interval-overlay{
  left:10px;
  right:10px;
  width:auto;
}

.t3im-top-interval-chip{
  margin-left:0 !important;
  transform:translateX(-50%) !important;
}

.t3im-top-interval-chip.is-visible{
  transform:translateX(-50%) translateY(0) !important;
}

/* =========================================================
   v1.2.0 · RESTORE MAJOR / MINOR SCENE SWITCH
   ========================================================= */

.mrtb-t3-ionian-modes-scene .t3im-view-switch{
  position:relative;
  z-index:250;
  pointer-events:auto !important;
}

.mrtb-t3-ionian-modes-scene .t3im-view-switch button{
  position:relative;
  z-index:251;
  pointer-events:auto !important;
  touch-action:manipulation;
  cursor:pointer;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-clean,
.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-grid,
.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-card{
  display:grid;
  visibility:visible;
  opacity:1;
}

.mrtb-app.mrtb-t3-ionian-classification
.t3im-toolbar-accidentals{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================================================
   v1.2.1 · REAL MAJOR/MINOR SCENE SWITCH FIX
   Η σκηνή είναι πάνω από το draw canvas.
   Τα κενά σημεία αφήνουν τα drawing events να περάσουν,
   ενώ όλα τα controls παραμένουν clickable.
   ========================================================= */

.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene{
  z-index:100000 !important;
  isolation:isolate;
  pointer-events:none !important;
}

.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene button,
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene select,
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene label,
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene [data-t3-view],
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene [data-t3-mode],
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene [data-t3-note-index],
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene [data-t3-spelling-hit],
.mrtb-app.mrtb-t3-ionian-active
.mrtb-t3-ionian-modes-scene [data-t3-lab-note]{
  pointer-events:auto !important;
}

.mrtb-app.mrtb-t3-ionian-active
.t3im-view-switch{
  position:relative;
  z-index:2147483000 !important;
  pointer-events:auto !important;
}

.mrtb-app.mrtb-t3-ionian-active
.t3im-view-switch button{
  z-index:2147483001 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  user-select:none;
}

/* Η δεύτερη σκηνή πρέπει να εμφανίζεται χωρίς transition/display conflict. */
.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-clean{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-grid{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-card button,
.mrtb-t3-ionian-modes-scene.classification-view
.t3im-lab-card [data-t3-lab-note]{
  pointer-events:auto !important;
}

/* =========================================================
   v1.2.2 · RESTORE FULL MAJOR / MINOR COMPARISON
   Επαναφορά της παλιάς πλήρους σκηνής:
   - επάνω interactive C Ionian / A Aeolian με αλλοιώσεις
   - κάτω όλες οι παράλληλες Major / Minor συγκρίσεις
   ========================================================= */

.mrtb-t3-ionian-modes-scene.classification-view{
  min-height:1480px;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-restored{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-restored
.t3im-lab-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 12px;
  visibility:visible !important;
  opacity:1 !important;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-restored
.t3im-all-modes-head{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 9px;
  padding:10px 13px;
  border:1px solid rgba(68,93,155,.12);
  border-radius:15px;
  background:
    linear-gradient(
      135deg,
      rgba(226,242,255,.96),
      rgba(239,232,255,.96)
    );
  visibility:visible !important;
  opacity:1 !important;
}

.t3im-classification-restored
.t3im-all-modes-head > div{
  display:grid;
  gap:3px;
}

.t3im-classification-restored
.t3im-all-modes-head span{
  color:#356ba9;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.t3im-classification-restored
.t3im-all-modes-head strong{
  color:#263954;
  font-size:12px;
  font-weight:1000;
  line-height:1.2;
}

.t3im-classification-restored
.t3im-all-modes-head small{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#6549ba;
  background:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:950;
  white-space:nowrap;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-classification-restored
.t3im-mode-staff-columns{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
  visibility:visible !important;
  opacity:1 !important;
}

.t3im-classification-restored
.t3im-mode-staff-column{
  display:block !important;
  min-width:0;
  padding:9px;
  border-radius:17px;
}

.t3im-classification-restored
.t3im-mode-staff-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.t3im-classification-restored
.t3im-mode-mini-staff{
  min-width:610px;
}

.t3im-classification-restored
.t3im-mode-difference{
  min-height:24px;
}

/* Το μεταγενέστερο v0.8.9 έκρυβε αυτά τα sections. */
.mrtb-t3-ionian-modes-scene.classification-view
.t3im-all-modes-head{
  display:flex !important;
}

.mrtb-t3-ionian-modes-scene.classification-view
.t3im-mode-staff-columns{
  display:grid !important;
}

@media (max-width:1100px){
  .mrtb-t3-ionian-modes-scene.classification-view{
    min-height:2520px;
  }

  .mrtb-t3-ionian-modes-scene.classification-view
  .t3im-classification-restored
  .t3im-lab-grid,
  .mrtb-t3-ionian-modes-scene.classification-view
  .t3im-classification-restored
  .t3im-mode-staff-columns{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .mrtb-t3-ionian-modes-scene.classification-view{
    min-height:2800px;
  }

  .t3im-classification-restored
  .t3im-all-modes-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .t3im-classification-restored
  .t3im-all-modes-head small{
    white-space:normal;
  }
}



/* =========================================================
   v1.2.3 · CENTERED COMPARISON RESULT HERO
   Στη σκηνή Major / Minor σύγκριση δείχνουμε μόνο:
   - το όνομα της κλίμακας
   - το πώς μεταβάλλεται
   ========================================================= */

.t3im-lab-head.t3im-lab-head-centered{
  display:block;
  margin-bottom:8px;
}

.t3im-lab-result.t3im-lab-result-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  min-height:76px;
  padding:14px 18px;
  border-radius:22px;
  text-align:center;
  color:#204f8b;
  background:
    linear-gradient(135deg, rgba(225,242,255,.98), rgba(240,248,255,.98));
  border:2px solid rgba(63,121,214,.22);
  border-left-width:6px;
  box-shadow:0 10px 24px rgba(98,132,187,.12);
}

.t3im-lab-result.t3im-lab-result-hero.minor{
  color:#6547ba;
  background:
    linear-gradient(135deg, rgba(241,236,255,.98), rgba(248,244,255,.98));
  border-color:rgba(112,87,215,.22);
  border-left-color:#7057d7;
}

.t3im-lab-result.t3im-lab-result-hero.custom{
  color:#8a5a00;
  background:linear-gradient(135deg,#fff5d9,#fff0be);
  border-color:rgba(229,160,0,.25);
  border-left-color:#e5a000;
}

.t3im-lab-result.t3im-lab-result-hero small{
  display:none;
}

.t3im-lab-result.t3im-lab-result-hero strong{
  font-size:clamp(24px,3vw,34px);
  line-height:1;
  font-weight:1000;
  letter-spacing:-0.03em;
}

.t3im-lab-result.t3im-lab-result-hero span{
  color:inherit;
  opacity:.88;
  font-size:clamp(12px,1.2vw,16px);
  font-weight:900;
  line-height:1.2;
}

@media (max-width:900px){
  .t3im-lab-result.t3im-lab-result-hero{
    min-height:68px;
    padding:12px 14px;
    border-radius:18px;
  }

  .t3im-lab-result.t3im-lab-result-hero strong{
    font-size:22px;
  }

  .t3im-lab-result.t3im-lab-result-hero span{
    font-size:11px;
  }
}