/* =========================================================
   MR Theory Board · Κλίμακες και Οπλισμός
   Αρχείο server: assets/css/klimakes.css
   ========================================================= */

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

.mrtb-app[data-scene="scales-armatures"] .mrtb-board-wrap{
  background:
    radial-gradient(circle at 10% 12%,rgba(255,255,255,.92) 0 34px,transparent 36px),
    radial-gradient(circle at 86% 8%,rgba(255,255,255,.82) 0 46px,transparent 48px),
    linear-gradient(180deg,rgba(120,220,255,.94),rgba(192,246,132,.92)) !important;
}

.mrtb-app.mrtb-key-signatures-mode:not(.mrtb-tools-hidden) .mrtb-shell{
  grid-template-rows:auto auto minmax(0,1fr) !important;
}

.mrtb-app.mrtb-key-signatures-mode.mrtb-tools-hidden .mrtb-shell{
  grid-template-rows:auto minmax(0,1fr) !important;
}

.mrtb-key-signatures-scene{
  position:absolute;
  left:20px;
  right:20px;
  top:16px;
  z-index:12;
  min-height:980px;
  padding:16px 16px 34px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:rgba(255,255,255,.72);
  box-shadow:0 15px 32px rgba(35,72,92,.15),inset 0 0 0 3px rgba(255,255,255,.3);
  color:#263044;
}

.mrtb-key-signatures-scene button{
  font:inherit;
  color:inherit;
}

.mrtb-ks-hero{
  display:grid;
  grid-template-columns:auto minmax(260px,1fr) auto;
  gap:14px;
  align-items:center;
  padding:13px 15px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,250,255,.94));
  box-shadow:0 10px 19px rgba(35,72,92,.1),inset 0 -4px 0 rgba(0,0,0,.05);
}

.mrtb-ks-hero-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,#ffe782,#ffb734);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.11),0 8px 16px rgba(255,183,52,.24);
  font-family:"Times New Roman",serif;
  font-size:32px;
  font-weight:900;
}

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

.mrtb-ks-hero-copy span{
  display:block;
  margin-top:5px;
  font-size:13px;
  line-height:1.25;
  font-weight:850;
  color:#57657c;
}

.mrtb-ks-natural-pair{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  gap:7px;
  min-width:315px;
  padding:9px 11px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff8d5,#ffe889);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.07);
  text-align:center;
}

.mrtb-ks-natural-pair span{
  display:grid;
  gap:2px;
}

.mrtb-ks-natural-pair b{
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-natural-pair small{
  font-size:9px;
  font-weight:850;
  color:#6b654d;
}

.mrtb-ks-natural-pair i{
  font-style:normal;
  font-size:19px;
  font-weight:1000;
}

.mrtb-ks-natural-pair em{
  grid-column:1/-1;
  justify-self:center;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  font-style:normal;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}

.mrtb-ks-tabs button{
  min-height:54px;
  border:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#eaf2fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09),0 7px 13px rgba(35,72,92,.09);
  font-weight:950;
}

.mrtb-ks-tabs button b{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#dce8f5;
  font-size:16px;
}

.mrtb-ks-tabs button span{
  font-size:14px;
}

.mrtb-ks-tabs button.active{
  background:linear-gradient(180deg,#fff1a9,#ffc34b);
  transform:translateY(-1px);
}

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

.mrtb-ks-method-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:12px;
  margin-top:12px;
}

.mrtb-ks-method-card,
.mrtb-ks-table-pair,
.mrtb-ks-tables-intro{
  border-radius:24px;
  background:rgba(255,255,255,.91);
  border:2px solid rgba(38,48,68,.07);
  box-shadow:0 10px 20px rgba(35,72,92,.1),inset 0 -4px 0 rgba(0,0,0,.035);
}

.mrtb-ks-method-card{
  padding:13px;
}

.mrtb-ks-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}

.mrtb-ks-section-title > span,
.mrtb-ks-combine-title span{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe078,#ffb433);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09);
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-section-title strong{
  display:block;
  font-size:18px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-ks-section-title small{
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:850;
  color:#647188;
}

.mrtb-ks-rule-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

.mrtb-ks-rule-row button{
  min-height:44px;
  border:0;
  border-radius:13px;
  padding:6px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#eef4fb);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:11px;
  font-weight:950;
}

.mrtb-ks-rule-row button b{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  margin-left:3px;
  padding:3px 5px;
  border-radius:8px;
  background:rgba(255,255,255,.8);
}

.mrtb-ks-rule-row button.sharp.active{
  background:linear-gradient(180deg,#d9edff,#77baff);
  outline:3px solid rgba(70,151,255,.24);
}

.mrtb-ks-rule-row button.flat.active{
  background:linear-gradient(180deg,#ffe1ec,#ff91b6);
  outline:3px solid rgba(255,107,154,.22);
}

.mrtb-ks-current-rule{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:9px;
  padding:9px 11px;
  border-radius:16px;
}

.mrtb-ks-current-rule.sharp{
  background:rgba(70,151,255,.13);
  border:2px solid rgba(70,151,255,.18);
}

.mrtb-ks-current-rule.flat{
  background:rgba(255,107,154,.13);
  border:2px solid rgba(255,107,154,.18);
}

.mrtb-ks-current-rule b{
  display:block;
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-current-rule span{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  font-weight:850;
  color:#59677f;
}

.mrtb-ks-current-rule em{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  font-style:normal;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-scale-track{
  display:flex;
  align-items:center;
  gap:2px;
  margin-top:10px;
  overflow-x:auto;
  padding:3px 2px 7px;
  scrollbar-width:thin;
}

.mrtb-ks-track-step{
  display:flex;
  align-items:center;
  flex:1 0 auto;
}

.mrtb-ks-track-step > button{
  position:relative;
  width:65px;
  min-height:92px;
  border:0;
  border-radius:17px;
  padding:7px 4px 6px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#edf4fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 5px 10px rgba(35,72,92,.08);
}

.mrtb-ks-track-step > button:hover{
  transform:translateY(-2px);
}

.mrtb-ks-track-step > button.active{
  transform:translateY(-3px) scale(1.04);
  outline:4px solid rgba(255,184,46,.42);
  background:linear-gradient(180deg,#fff6bd,#ffca56);
}

.mrtb-ks-scale-track.sharp .mrtb-ks-track-step > button:not(.active){
  border:2px solid rgba(70,151,255,.13);
}

.mrtb-ks-scale-track.flat .mrtb-ks-track-step > button:not(.active){
  border:2px solid rgba(255,107,154,.13);
}

.mrtb-ks-track-step > button.natural{
  background:linear-gradient(180deg,#e9fff1,#bff6cf);
}

.mrtb-ks-track-step button small,
.mrtb-ks-track-step button span,
.mrtb-ks-track-step button em{
  display:block;
}

.mrtb-ks-track-step button small{
  font-size:8px;
  font-weight:900;
  color:#647188;
}

.mrtb-ks-track-step button b{
  display:block;
  margin-top:5px;
  font-size:15px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-track-step button span{
  margin-top:3px;
  font-size:10px;
  font-weight:900;
  color:#617087;
}

.mrtb-ks-track-step button em{
  margin:5px auto 0;
  width:max-content;
  min-width:28px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  font-style:normal;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-step-arrow{
  display:grid;
  place-items:center;
  min-width:31px;
  color:#526079;
  font-style:normal;
  font-size:20px;
  font-weight:1000;
}

.mrtb-ks-step-arrow span{
  display:block;
  margin-bottom:-3px;
  padding:2px 5px;
  border-radius:999px;
  background:#fff;
  font-size:8px;
  line-height:1;
}

.mrtb-ks-selected-example{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(0,1fr);
  gap:8px;
  margin-top:8px;
}

.mrtb-ks-example-root,
.mrtb-ks-example-count{
  padding:10px;
  border-radius:17px;
  background:#f4f8fc;
}

.mrtb-ks-example-root.sharp{
  background:linear-gradient(180deg,#e8f5ff,#cfe9ff);
}

.mrtb-ks-example-root.flat{
  background:linear-gradient(180deg,#fff0f5,#ffd7e5);
}

.mrtb-ks-example-root small,
.mrtb-ks-example-root span,
.mrtb-ks-example-count small,
.mrtb-ks-example-count em{
  display:block;
}

.mrtb-ks-example-root small,
.mrtb-ks-example-count small{
  font-size:9px;
  font-weight:900;
  color:#647188;
}

.mrtb-ks-example-root strong{
  display:block;
  margin-top:3px;
  font-size:17px;
  font-weight:1000;
}

.mrtb-ks-example-root span{
  margin-top:4px;
  font-size:11px;
  font-weight:950;
}

.mrtb-ks-example-count b{
  display:block;
  margin-top:4px;
  font-size:13px;
  line-height:1.25;
  font-weight:1000;
}

.mrtb-ks-example-count em{
  margin-top:5px;
  color:#e57719;
  font-style:normal;
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-order-box{
  padding:10px;
  border-radius:19px;
  border:2px solid transparent;
}

.mrtb-ks-order-box + .mrtb-ks-order-box{
  margin-top:9px;
}

.mrtb-ks-order-box.sharp{
  background:rgba(70,151,255,.1);
  border-color:rgba(70,151,255,.17);
}

.mrtb-ks-order-box.flat{
  background:rgba(255,107,154,.1);
  border-color:rgba(255,107,154,.17);
}

.mrtb-ks-order-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.mrtb-ks-order-head b{
  font-size:14px;
  font-weight:1000;
}

.mrtb-ks-order-head span{
  font-size:9.5px;
  font-weight:900;
  color:#5d6a81;
  text-align:right;
}

.mrtb-ks-accidental-ribbon{
  display:flex;
  align-items:center;
  overflow-x:auto;
  padding:3px 1px 6px;
}

.mrtb-ks-accidental-step{
  display:flex;
  align-items:center;
  flex:1 0 auto;
}

.mrtb-ks-accidental-step > span{
  width:54px;
  min-height:59px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:15px;
  background:rgba(255,255,255,.84);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07);
}

.mrtb-ks-accidental-step > span.selected{
  background:linear-gradient(180deg,#fff2a8,#ffc44c);
  outline:3px solid rgba(255,184,46,.27);
}

.mrtb-ks-accidental-step small{
  display:block;
  font-size:8px;
  font-weight:900;
  color:#657289;
}

.mrtb-ks-accidental-step b{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-accidental-step i{
  display:grid;
  place-items:center;
  min-width:27px;
  font-style:normal;
  font-size:18px;
  font-weight:1000;
}

.mrtb-ks-accidental-step i em{
  display:block;
  margin-bottom:-4px;
  padding:2px 4px;
  border-radius:999px;
  background:#fff;
  font-style:normal;
  font-size:7px;
}

.mrtb-ks-count-demo{
  display:block;
  margin-top:5px;
  padding:5px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.7);
  font-size:9.5px;
  font-weight:900;
  color:#56647b;
}

.mrtb-ks-combine-card{
  margin-top:12px;
  padding:13px;
  border-radius:24px;
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 20px rgba(35,72,92,.1),inset 0 -4px 0 rgba(0,0,0,.035);
}

.mrtb-ks-combine-card.sharp{
  border:3px solid rgba(70,151,255,.2);
}

.mrtb-ks-combine-card.flat{
  border:3px solid rgba(255,107,154,.2);
}

.mrtb-ks-combine-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}

.mrtb-ks-combine-title strong{
  font-size:17px;
  font-weight:1000;
}

.mrtb-ks-combine-flow{
  display:grid;
  grid-template-columns:minmax(120px,.8fr) auto minmax(100px,.65fr) auto minmax(120px,.8fr) auto minmax(210px,1.3fr);
  gap:7px;
  align-items:stretch;
}

.mrtb-ks-combine-flow > div{
  display:grid;
  place-items:center;
  align-content:center;
  min-height:76px;
  padding:8px;
  border-radius:17px;
  background:#f1f6fb;
  text-align:center;
}

.mrtb-ks-combine-flow > div.answer{
  background:linear-gradient(180deg,#e9fff1,#bff5cf);
}

.mrtb-ks-combine-flow > i{
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:24px;
  font-weight:1000;
  color:#ef8b26;
}

.mrtb-ks-combine-flow small{
  display:block;
  font-size:9px;
  font-weight:900;
  color:#657289;
}

.mrtb-ks-combine-flow b{
  display:block;
  margin-top:4px;
  font-size:13px;
  line-height:1.15;
  font-weight:1000;
}

.mrtb-ks-combine-card p{
  margin:9px 0 0;
  padding:8px 10px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff9d9,#ffe999);
  font-size:11px;
  font-weight:850;
}

.mrtb-ks-tables-intro{
  margin-top:12px;
  padding:12px 14px;
  text-align:center;
}

.mrtb-ks-tables-intro strong{
  display:block;
  font-size:18px;
  font-weight:1000;
}

.mrtb-ks-tables-intro span{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:850;
  color:#5f6d84;
}

.mrtb-ks-table-pair{
  margin-top:12px;
  padding:12px;
}

.mrtb-ks-table-pair > header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  padding:2px 3px;
}

.mrtb-ks-table-pair > header b{
  display:inline-block;
  margin-right:7px;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe078,#ffb433);
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-table-pair > header strong{
  font-size:17px;
  font-weight:1000;
}

.mrtb-ks-table-pair > header span{
  font-size:10px;
  font-weight:900;
  color:#657289;
}

.mrtb-ks-two-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mrtb-ks-table-card{
  overflow:hidden;
  border-radius:20px;
  border:2px solid rgba(38,48,68,.08);
  background:#fff;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.035);
}

.mrtb-ks-table-card.sharp{
  border-color:rgba(70,151,255,.23);
}

.mrtb-ks-table-card.flat{
  border-color:rgba(255,107,154,.23);
}

.mrtb-ks-table-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:9px 11px;
}

.mrtb-ks-table-card.sharp .mrtb-ks-table-card-head{
  background:linear-gradient(180deg,#e8f5ff,#cde8ff);
}

.mrtb-ks-table-card.flat .mrtb-ks-table-card-head{
  background:linear-gradient(180deg,#fff0f5,#ffd5e4);
}

.mrtb-ks-table-card-head small{
  display:block;
  font-size:8px;
  font-weight:900;
  color:#66748a;
}

.mrtb-ks-table-card-head strong{
  display:block;
  margin-top:2px;
  font-size:14px;
  font-weight:1000;
}

.mrtb-ks-table-card-head > b{
  min-width:46px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:15px;
  font-weight:1000;
}

.mrtb-ks-table-head-row,
.mrtb-ks-table-row{
  display:grid;
  grid-template-columns:62px minmax(110px,.8fr) minmax(170px,1.35fr);
  gap:7px;
  align-items:center;
}

.mrtb-ks-table-head-row{
  padding:6px 9px;
  background:#edf3f8;
  font-size:8.5px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:#68758b;
}

.mrtb-ks-table-row{
  min-height:48px;
  padding:5px 9px;
  border-top:1px solid rgba(38,48,68,.07);
}

.mrtb-ks-table-row:nth-child(even){
  background:#f7fafc;
}

.mrtb-ks-table-row.natural{
  background:linear-gradient(90deg,#e9fff1,#f7fff9);
}

.mrtb-ks-table-row > span:first-child b{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-right:2px;
  border-radius:9px;
  background:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
  font-size:13px;
}

.mrtb-ks-table-row strong{
  display:block;
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-table-row small{
  display:block;
  margin-top:1px;
  font-size:8px;
  font-weight:850;
  color:#69768c;
}

.mrtb-ks-table-row > span:last-child{
  font-size:10px;
  line-height:1.25;
  font-weight:950;
}

.mrtb-ks-table-row em{
  font-style:normal;
  color:#778399;
}

.mrtb-ks-order-list{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  padding:8px;
}

.mrtb-ks-order-list > div{
  position:relative;
  min-height:85px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:15px;
  background:linear-gradient(180deg,#fff,#eef4f9);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);
  text-align:center;
}

.mrtb-ks-order-list span{
  position:absolute;
  left:5px;
  top:5px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#dfe9f3;
  font-size:8px;
  font-weight:1000;
}

.mrtb-ks-order-list b{
  font-size:14px;
  font-weight:1000;
}

.mrtb-ks-order-list small{
  display:block;
  margin-top:4px;
  font-size:7.5px;
  font-weight:850;
  color:#68758b;
}

.mrtb-ks-order-list em{
  position:absolute;
  right:6px;
  bottom:5px;
  color:#78849a;
  font-style:normal;
  font-size:12px;
  font-weight:1000;
}

/* Draw / Erase πάνω από τη νέα σκηνή */
.mrtb-app[data-scene="scales-armatures"] .mrtb-draw-canvas{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:500 !important;
  pointer-events:none !important;
}

.mrtb-app.mrtb-draw-on[data-scene="scales-armatures"] .mrtb-draw-canvas{
  z-index:9990 !important;
  pointer-events:auto !important;
  cursor:crosshair !important;
}

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

  .mrtb-ks-natural-pair{
    grid-column:1/-1;
    justify-self:stretch;
  }

  .mrtb-ks-method-layout{
    grid-template-columns:1fr;
  }

  .mrtb-ks-combine-flow{
    grid-template-columns:1fr auto 1fr auto 1fr;
  }

  .mrtb-ks-combine-flow > div.answer{
    grid-column:1/-1;
  }

  .mrtb-ks-combine-flow > i:nth-of-type(3){
    display:none;
  }
}

@media (max-width:900px){
  .mrtb-key-signatures-scene{
    left:8px;
    right:8px;
    top:8px;
    padding:9px 9px 24px;
    border-radius:20px;
  }

  .mrtb-ks-hero{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
    text-align:center;
  }

  .mrtb-ks-hero-icon{
    justify-self:center;
    width:48px;
    height:48px;
    font-size:27px;
  }

  .mrtb-ks-hero-copy strong{
    font-size:20px;
  }

  .mrtb-ks-natural-pair{
    min-width:0;
    width:100%;
  }

  .mrtb-ks-tabs button{
    min-height:47px;
  }

  .mrtb-ks-rule-row{
    grid-template-columns:1fr 1fr;
  }

  .mrtb-ks-current-rule,
  .mrtb-ks-order-head,
  .mrtb-ks-table-pair > header{
    display:grid;
  }

  .mrtb-ks-current-rule em,
  .mrtb-ks-order-head span,
  .mrtb-ks-table-pair > header span{
    justify-self:start;
    text-align:left;
  }

  .mrtb-ks-selected-example,
  .mrtb-ks-two-columns{
    grid-template-columns:1fr;
  }

  .mrtb-ks-combine-flow{
    grid-template-columns:1fr;
  }

  .mrtb-ks-combine-flow > i{
    transform:rotate(90deg);
    min-height:20px;
  }

  .mrtb-ks-combine-flow > div.answer{
    grid-column:auto;
  }

  .mrtb-ks-combine-flow > i:nth-of-type(3){
    display:grid;
  }

  .mrtb-ks-table-head-row,
  .mrtb-ks-table-row{
    grid-template-columns:48px minmax(95px,.75fr) minmax(125px,1.25fr);
  }

  .mrtb-ks-order-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================================================
   v0.6.7 · Πώς το βρίσκω — 6 κάθετες στήλες με αποκάλυψη
   ========================================================= */

.mrtb-key-signatures-scene.method-page{
  min-height:730px !important;
  padding:11px 12px 18px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-hero{
  grid-template-columns:auto minmax(240px,1fr) auto !important;
  gap:10px !important;
  padding:8px 11px !important;
  border-radius:19px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-hero-icon{
  width:45px !important;
  height:45px !important;
  border-radius:14px !important;
  font-size:25px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-hero-copy strong{
  font-size:20px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-hero-copy span{
  margin-top:3px !important;
  font-size:11px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-natural-pair{
  min-width:270px !important;
  padding:6px 8px !important;
  border-radius:15px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-tabs{
  gap:7px !important;
  margin-top:7px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-tabs button{
  min-height:40px !important;
  border-radius:14px !important;
  gap:6px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-tabs button b{
  width:25px !important;
  height:25px !important;
  border-radius:8px !important;
  font-size:13px !important;
}

.mrtb-key-signatures-scene.method-page .mrtb-ks-tabs button span{
  font-size:12px !important;
}

.mrtb-ks-reveal-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  padding:7px 9px;
  border-radius:15px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 12px rgba(35,72,92,.08),inset 0 -3px 0 rgba(0,0,0,.035);
}

.mrtb-ks-reveal-intro strong{
  display:block;
  font-size:14px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-reveal-intro span{
  display:block;
  margin-top:3px;
  font-size:9.5px;
  line-height:1.15;
  font-weight:850;
  color:#657289;
}

.mrtb-ks-reveal-intro button{
  flex:0 0 auto;
  min-height:30px;
  border:0;
  border-radius:10px;
  padding:4px 9px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#e8f0f8);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-six-columns{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-top:7px;
  align-items:start;
}

.mrtb-ks-reveal-column{
  min-width:0;
  padding:6px;
  border:2px solid rgba(38,48,68,.07);
  border-radius:17px;
  background:rgba(255,255,255,.93);
  box-shadow:0 7px 14px rgba(35,72,92,.08),inset 0 -3px 0 rgba(0,0,0,.03);
}

.mrtb-ks-reveal-column.sharp{
  border-color:rgba(70,151,255,.22);
  background:linear-gradient(180deg,rgba(238,248,255,.98),rgba(255,255,255,.95));
}

.mrtb-ks-reveal-column.flat{
  border-color:rgba(255,107,154,.22);
  background:linear-gradient(180deg,rgba(255,240,246,.98),rgba(255,255,255,.95));
}

.mrtb-ks-reveal-column > header{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding:5px 6px;
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.055);
}

.mrtb-ks-reveal-column > header div{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

.mrtb-ks-reveal-column > header small{
  font-size:9px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
}

.mrtb-ks-reveal-column > header strong{
  font-family:"Times New Roman",serif;
  font-size:20px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-reveal-column > header > b{
  flex:0 0 auto;
  min-width:28px;
  padding:4px 5px;
  border-radius:8px;
  background:linear-gradient(180deg,#ffe078,#ffb433);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
  text-align:center;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-reveal-list{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:51px;
  margin-top:5px;
}

.mrtb-ks-reveal-list.empty{
  justify-content:center;
}

.mrtb-ks-reveal-item{
  min-height:43px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:0 4px;
  padding:5px 6px;
  border-radius:11px;
  background:#f3f7fb;
  border:1px solid rgba(38,48,68,.06);
  animation:mrtb-ks-column-pop .22s cubic-bezier(.2,1.25,.35,1) both;
}

@keyframes mrtb-ks-column-pop{
  from{transform:translateY(-5px) scale(.94);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}

.mrtb-ks-reveal-item.natural{
  background:linear-gradient(180deg,#eaffef,#bff2ce);
  border-color:rgba(50,201,114,.19);
}

.mrtb-ks-reveal-item.accidental{
  background:linear-gradient(180deg,#fff8d8,#ffe792);
}

.mrtb-ks-reveal-item small{
  grid-column:1;
  grid-row:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:7.5px;
  line-height:1;
  font-weight:900;
  color:#68758c;
}

.mrtb-ks-reveal-item strong{
  grid-column:1;
  grid-row:2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-ks-reveal-item > span{
  grid-column:2;
  grid-row:1/3;
  min-width:29px;
  padding:4px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  text-align:center;
  font-size:9px;
  font-weight:1000;
}

.mrtb-ks-vertical-arrow{
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#df7b1f;
  font-style:normal;
  line-height:1;
}

.mrtb-ks-vertical-arrow em{
  padding:1px 4px;
  border-radius:999px;
  background:#fff;
  font-style:normal;
  font-size:7px;
  font-weight:1000;
}

.mrtb-ks-vertical-arrow span{
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-empty-column{
  min-height:91px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:8px 5px;
  border:2px dashed rgba(38,48,68,.14);
  border-radius:12px;
  background:rgba(255,255,255,.55);
  text-align:center;
}

.mrtb-ks-empty-column > span{
  font-family:"Times New Roman",serif;
  font-size:26px;
  line-height:1;
  font-weight:1000;
  opacity:.42;
}

.mrtb-ks-empty-column b{
  font-size:8.5px;
  line-height:1.1;
  font-weight:1000;
}

.mrtb-ks-empty-column small{
  font-size:7.5px;
  line-height:1.15;
  font-weight:850;
  color:#718096;
}

.mrtb-ks-next-button{
  width:100%;
  min-height:37px;
  margin-top:5px;
  border:0;
  border-radius:11px;
  padding:4px 5px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff0a7,#ffbf42);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 4px 8px rgba(35,72,92,.07);
}

.mrtb-ks-reveal-column.sharp .mrtb-ks-next-button:not(.done){
  background:linear-gradient(180deg,#d9edff,#74b8ff);
}

.mrtb-ks-reveal-column.flat .mrtb-ks-next-button:not(.done){
  background:linear-gradient(180deg,#ffe0eb,#ff8fb5);
}

.mrtb-ks-next-button span,
.mrtb-ks-next-button small{
  display:block;
  text-align:center;
}

.mrtb-ks-next-button span{
  font-size:9px;
  line-height:1.05;
  font-weight:1000;
}

.mrtb-ks-next-button small{
  margin-top:2px;
  font-size:7.5px;
  line-height:1;
  font-weight:900;
  opacity:.78;
}

.mrtb-ks-next-button.done{
  background:linear-gradient(180deg,#dfffe7,#8ae2a0) !important;
  cursor:default;
  opacity:.82;
}

.mrtb-ks-method-reminder{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:7px;
}

.mrtb-ks-method-reminder > div{
  min-height:39px;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.035);
  text-align:center;
}

.mrtb-ks-method-reminder b,
.mrtb-ks-method-reminder span{
  display:block;
}

.mrtb-ks-method-reminder b{
  font-size:9.5px;
  font-weight:1000;
}

.mrtb-ks-method-reminder span{
  margin-top:2px;
  font-size:8px;
  font-weight:850;
  color:#637087;
}

@media (max-width:1180px){
  .mrtb-ks-six-columns{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .mrtb-key-signatures-scene.method-page{
    min-height:1050px !important;
  }
}

@media (max-width:760px){
  .mrtb-key-signatures-scene.method-page .mrtb-ks-hero{
    grid-template-columns:auto 1fr !important;
  }

  .mrtb-key-signatures-scene.method-page .mrtb-ks-natural-pair{
    grid-column:1/-1;
    min-width:0 !important;
  }

  .mrtb-ks-reveal-intro{
    align-items:flex-start;
  }

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

  .mrtb-ks-method-reminder{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   v0.6.8 · Συνδεδεμένες οριζόντιες γραμμές
   - Οι φυσικές μένουν σε ξεχωριστή επάνω ζώνη
   - Ionian / Aeolian / αλλοίωση ανοίγουν μαζί
   - Ίδια θέση = ίδια οριζόντια ευθεία
   - Οι στήλες αλλοιώσεων έχουν διαφορετικό container
   ========================================================= */

.mrtb-key-signatures-scene.method-page .mrtb-ks-reveal-intro{
  position:relative;
  z-index:3;
}

.mrtb-ks-clear-button{
  min-width:116px !important;
  min-height:34px !important;
  padding:6px 12px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#ffe0e0,#ff8f8f) !important;
  color:#5d2020 !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 6px 12px rgba(145,59,59,.14) !important;
  font-size:11px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
}

.mrtb-ks-clear-button:hover{
  transform:translateY(-1px);
}

.mrtb-ks-six-columns{
  align-items:stretch !important;
}

.mrtb-ks-reveal-column{
  display:flex !important;
  flex-direction:column !important;
  align-self:stretch !important;
  min-width:0 !important;
  overflow:visible !important;
}

.mrtb-ks-reveal-column > header{
  flex:0 0 43px !important;
}

.mrtb-ks-reveal-list{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  margin-top:6px !important;
}

/* ---------- Ξεχωριστή ζώνη φυσικής αφετηρίας ---------- */
.mrtb-ks-natural-zone{
  position:relative !important;
  height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  margin:0 0 2px !important;
}

.mrtb-ks-natural-zone .mrtb-ks-reveal-item.natural{
  min-height:58px !important;
  margin:0 !important;
  padding:8px 8px !important;
  border:2px solid #8ddcac !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#e7ffed,#b8efc8) !important;
  box-shadow:0 7px 13px rgba(50,201,114,.14),inset 0 -3px 0 rgba(0,0,0,.045) !important;
}

.mrtb-ks-natural-zone .mrtb-ks-reveal-item.natural small{
  font-size:8.5px !important;
  letter-spacing:.25px !important;
  color:#3e7553 !important;
}

.mrtb-ks-natural-zone .mrtb-ks-reveal-item.natural strong{
  font-size:18px !important;
  color:#203047 !important;
}

.mrtb-ks-natural-zone .mrtb-ks-reveal-item.natural > span{
  min-width:38px !important;
  padding:6px 7px !important;
  font-size:11px !important;
}

.mrtb-ks-natural-separator{
  position:relative !important;
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:4px !important;
  color:#587066 !important;
}

.mrtb-ks-natural-separator::before,
.mrtb-ks-natural-separator::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(50,201,114,.45));
}

.mrtb-ks-natural-separator::after{
  background:linear-gradient(90deg,rgba(50,201,114,.45),transparent);
}

.mrtb-ks-natural-separator span{
  flex:0 0 auto;
  padding:2px 5px;
  font-size:6.8px;
  line-height:1;
  font-weight:1000;
  text-align:center;
  color:#4c6f5b;
  white-space:nowrap;
}

/* Στις στήλες αλλοιώσεων κρατάμε ίσο ύψος, χωρίς φυσική κλίμακα */
.mrtb-ks-natural-zone.order-zone{
  justify-content:flex-start !important;
}

.mrtb-ks-order-natural-spacer{
  min-height:58px !important;
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  gap:3px !important;
  padding:7px !important;
  border:2px dashed rgba(126,99,28,.22) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.48) !important;
  text-align:center !important;
}

.mrtb-ks-order-natural-spacer b{
  font-size:9px !important;
  font-weight:1000 !important;
}

.mrtb-ks-order-natural-spacer small{
  font-size:7px !important;
  line-height:1.12 !important;
  font-weight:850 !important;
  color:#6e7380 !important;
}

/* ---------- Ίδιες οριζόντιες θέσεις σε όλες τις στήλες ---------- */
.mrtb-ks-levels{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}

.mrtb-ks-level-block{
  position:relative !important;
  height:65px !important;
  min-height:65px !important;
  display:grid !important;
  grid-template-rows:17px 46px !important;
  align-content:start !important;
  padding:0 2px 2px !important;
  border-radius:13px !important;
  cursor:pointer !important;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease !important;
}

.mrtb-ks-level-block .mrtb-ks-vertical-arrow{
  height:17px !important;
  margin:0 !important;
}

.mrtb-ks-level-block .mrtb-ks-reveal-item{
  min-height:46px !important;
  height:46px !important;
  margin:0 !important;
  padding:5px 6px !important;
}

.mrtb-ks-level-placeholder{
  height:46px !important;
  display:grid !important;
  place-items:center !important;
  border:1px dashed rgba(38,48,68,.08) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.16) !important;
  opacity:.35 !important;
}

.mrtb-ks-level-placeholder span{
  font-size:8px !important;
  font-weight:1000 !important;
  color:#748097 !important;
}

/* Highlight της συνδεδεμένης τριάδας στην ίδια γραμμή */
.mrtb-ks-level-block.active-row.sharp{
  background:linear-gradient(90deg,rgba(80,169,255,.12),rgba(80,169,255,.26),rgba(80,169,255,.12)) !important;
  box-shadow:0 0 0 2px rgba(70,151,255,.34),0 8px 14px rgba(70,151,255,.12) !important;
  transform:translateY(-1px) !important;
}

.mrtb-ks-level-block.active-row.flat{
  background:linear-gradient(90deg,rgba(255,119,166,.11),rgba(255,119,166,.24),rgba(255,119,166,.11)) !important;
  box-shadow:0 0 0 2px rgba(255,107,154,.34),0 8px 14px rgba(255,107,154,.11) !important;
  transform:translateY(-1px) !important;
}

.mrtb-ks-level-block.active-row .mrtb-ks-reveal-item.linked-active{
  border-width:2px !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.055),0 0 0 3px rgba(255,255,255,.9) !important;
}

.mrtb-ks-level-block.active-row.sharp .mrtb-ks-reveal-item.linked-active{
  border-color:#4b9ff0 !important;
  background:linear-gradient(180deg,#e6f4ff,#acd8ff) !important;
}

.mrtb-ks-level-block.active-row.flat .mrtb-ks-reveal-item.linked-active{
  border-color:#ef76a0 !important;
  background:linear-gradient(180deg,#ffe9f1,#ffc2d6) !important;
}

/* ---------- Στήλες αλλοιώσεων: άλλο container ---------- */
.mrtb-ks-reveal-column.order.sharp{
  border-color:#e0bf45 !important;
  background:linear-gradient(180deg,#fff8cf,#ffefab) !important;
  box-shadow:0 8px 17px rgba(164,126,22,.13),inset 0 -3px 0 rgba(0,0,0,.03) !important;
}

.mrtb-ks-reveal-column.order.sharp > header{
  background:linear-gradient(180deg,#fff2b9,#ffdc72) !important;
}

.mrtb-ks-reveal-column.order.flat{
  border-color:#ba91e5 !important;
  background:linear-gradient(180deg,#f5eaff,#e5d0ff) !important;
  box-shadow:0 8px 17px rgba(115,75,165,.13),inset 0 -3px 0 rgba(0,0,0,.03) !important;
}

.mrtb-ks-reveal-column.order.flat > header{
  background:linear-gradient(180deg,#eddcff,#d5b8fa) !important;
}

.mrtb-ks-reveal-column.order.sharp .mrtb-ks-reveal-item.accidental{
  background:linear-gradient(180deg,#fff5ca,#ffe38a) !important;
  border-color:rgba(182,137,22,.22) !important;
}

.mrtb-ks-reveal-column.order.flat .mrtb-ks-reveal-item.accidental{
  background:linear-gradient(180deg,#f2e6ff,#dfc7ff) !important;
  border-color:rgba(113,72,164,.20) !important;
}

/* Τα κουμπιά κάθε οικογένειας δείχνουν ότι ανοίγουν ολόκληρη γραμμή */
.mrtb-ks-next-button{
  flex:0 0 41px !important;
  min-height:41px !important;
  margin-top:6px !important;
}

.mrtb-ks-next-button span{
  font-size:9px !important;
}

.mrtb-ks-next-button small{
  font-size:7px !important;
}

@media (max-width:1180px){
  .mrtb-ks-natural-zone{
    height:88px !important;
  }

  .mrtb-ks-level-block{
    height:62px !important;
    min-height:62px !important;
    grid-template-rows:16px 44px !important;
  }

  .mrtb-ks-level-block .mrtb-ks-reveal-item,
  .mrtb-ks-level-placeholder{
    height:44px !important;
    min-height:44px !important;
  }
}

@media (max-width:760px){
  .mrtb-ks-clear-button{
    min-width:104px !important;
  }

  .mrtb-ks-natural-separator span{
    white-space:normal !important;
  }
}

.mrtb-ks-level-block.empty-row{
  cursor:default !important;
}

/* =========================================================
   v0.6.9 · Ανεξάρτητες στήλες + φίλτρο Ionian / Aeolian
   - Κάθε κουμπί «Επόμενη» ανοίγει μόνο τη δική του στήλη
   - Επιλογή προβολής Ionian, Aeolian ή και των δύο
   - Οι στήλες αλλοιώσεων παραμένουν πάντα ορατές
   ========================================================= */

.mrtb-key-signatures-scene.method-page .mrtb-ks-reveal-intro{
  gap:12px !important;
  flex-wrap:wrap !important;
}

.mrtb-ks-intro-copy{
  flex:1 1 360px !important;
  min-width:260px !important;
}

.mrtb-ks-intro-actions{
  flex:0 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.mrtb-ks-family-filter{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px !important;
  border-radius:13px !important;
  background:rgba(233,242,251,.92) !important;
  border:1px solid rgba(38,48,68,.07) !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.035) !important;
}

.mrtb-ks-family-filter > span{
  margin:0 3px 0 4px !important;
  font-size:8.5px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  color:#657289 !important;
  text-transform:uppercase !important;
  letter-spacing:.35px !important;
}

.mrtb-ks-family-filter button{
  min-height:28px !important;
  padding:4px 9px !important;
  border:0 !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.9) !important;
  color:#263044 !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.07) !important;
  font:inherit !important;
  font-size:9.5px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
}

.mrtb-ks-family-filter button:hover{
  transform:translateY(-1px) !important;
}

.mrtb-ks-family-filter button.active{
  background:linear-gradient(180deg,#ffe887,#ffbd3f) !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 4px 9px rgba(255,184,46,.18) !important;
}

/* Με μία οικογένεια έχουμε 2 στήλες κλιμάκων + 2 στήλες αλλοιώσεων. */
.mrtb-ks-six-columns.view-ionian,
.mrtb-ks-six-columns.view-aeolian{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

/* Οι κενές θέσεις κρατούν μόνο την ευθυγράμμιση και δεν μοιάζουν με ανοιχτές κάρτες. */
.mrtb-ks-level-block.empty-row .mrtb-ks-level-placeholder{
  opacity:.16 !important;
  background:rgba(255,255,255,.08) !important;
}

/* Το highlight εφαρμόζεται μόνο σε πραγματικά εμφανισμένη κάρτα. */
.mrtb-ks-level-block.empty-row{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Τα κουμπιά δηλώνουν πλέον ότι ανοίγουν μόνο τη συγκεκριμένη στήλη. */
.mrtb-ks-next-button span{
  font-size:9.5px !important;
}

@media (max-width:1180px){
  .mrtb-ks-six-columns.view-ionian,
  .mrtb-ks-six-columns.view-aeolian{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .mrtb-ks-intro-actions{
    width:100% !important;
    justify-content:space-between !important;
  }
}

@media (max-width:760px){
  .mrtb-ks-intro-actions{
    align-items:stretch !important;
  }

  .mrtb-ks-family-filter{
    flex:1 1 100% !important;
    justify-content:center !important;
  }

  .mrtb-ks-family-filter button{
    flex:1 1 auto !important;
    padding-inline:6px !important;
  }

  .mrtb-ks-clear-button{
    flex:1 1 100% !important;
  }
}

@media (max-width:520px){
  .mrtb-ks-six-columns.view-ionian,
  .mrtb-ks-six-columns.view-aeolian{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   v0.7.0 · Click για απόκρυψη + μεγαλύτεροι τίτλοι + Hide fix
   ========================================================= */

/* Τα εμφανισμένα στοιχεία πατιούνται για να κρυφτούν ξανά. */
.mrtb-ks-reveal-item[data-ks-hide-item]{
  cursor:pointer !important;
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease !important;
}

.mrtb-ks-reveal-item[data-ks-hide-item]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 15px rgba(35,72,92,.14), inset 0 -3px 0 rgba(0,0,0,.035) !important;
}

.mrtb-ks-reveal-item[data-ks-hide-item]:active{
  transform:translateY(1px) scale(.985) !important;
  opacity:.86 !important;
}

/* Μεγαλύτεροι και καθαρότεροι τίτλοι στηλών. */
.mrtb-ks-reveal-column > header{
  min-height:54px !important;
  padding:8px 10px !important;
}

.mrtb-ks-reveal-column > header div{
  gap:7px !important;
}

.mrtb-ks-reveal-column > header small{
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.1px !important;
  color:#253149 !important;
}

.mrtb-ks-reveal-column > header strong{
  font-size:27px !important;
  line-height:.9 !important;
}

.mrtb-ks-reveal-column > header > b{
  min-width:36px !important;
  padding:6px 7px !important;
  font-size:12px !important;
}

/* Το Hide κρύβει μόνο τη γραμμή εργαλείων και ποτέ το template. */
.mrtb-app.mrtb-key-signatures-mode.mrtb-tools-hidden .mrtb-sidebar{
  display:none !important;
}

.mrtb-app.mrtb-key-signatures-mode.mrtb-tools-hidden .mrtb-board-wrap{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:0 !important;
}

.mrtb-app.mrtb-key-signatures-mode.mrtb-tools-hidden .mrtb-board,
.mrtb-app.mrtb-key-signatures-mode.mrtb-tools-hidden .mrtb-key-signatures-scene{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:900px){
  .mrtb-ks-reveal-column > header small{
    font-size:13px !important;
  }

  .mrtb-ks-reveal-column > header strong{
    font-size:24px !important;
  }
}

/* =========================================================
   v0.7.1 · ΠΑΙΧΝΙΔΙ ΟΠΛΙΣΜΟΥ ΚΛΙΜΑΚΩΝ
   1–10 παίκτες · 5 levels · results ανά γύρο
   ========================================================= */

.mrtb-key-signatures-scene.game-page{
  min-height:880px !important;
  padding:14px 14px 28px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 8% 14%,rgba(255,255,255,.88) 0 31px,transparent 33px),
    radial-gradient(circle at 91% 9%,rgba(255,255,255,.72) 0 42px,transparent 44px),
    linear-gradient(180deg,rgba(238,250,255,.97),rgba(226,252,214,.96)) !important;
}

.mrtb-ks-game-hero,
.mrtb-ks-game-hud{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,255,.96));
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 10px 20px rgba(35,72,92,.12),inset 0 -4px 0 rgba(0,0,0,.045);
}

.mrtb-ks-game-hero-icon,
.mrtb-ks-game-logo > span{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,#ffe579,#ffb638);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.11),0 8px 15px rgba(255,182,56,.22);
  font-size:29px;
}

.mrtb-ks-game-hero > div:nth-child(2) > strong{
  display:block;
  margin-bottom:5px;
  font-size:27px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-game-hero > div:nth-child(2) > span{
  display:block;
  max-width:1050px;
  font-size:13px;
  line-height:1.3;
  font-weight:850;
  color:#56657d;
}

.mrtb-ks-game-hero > div:nth-child(2) > span b{
  color:#263044;
  font-weight:1000;
}

.mrtb-ks-game-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:linear-gradient(180deg,#ffd2d2,#ff7b7b);
  color:#5b1818;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.11),0 6px 12px rgba(140,46,46,.12);
  font-size:23px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-game-setup-grid{
  display:grid;
  grid-template-columns:minmax(420px,.95fr) minmax(560px,1.25fr);
  gap:12px;
  margin-top:12px;
}

.mrtb-ks-game-setup-card{
  min-width:0;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.91);
  border:2px solid rgba(38,48,68,.07);
  box-shadow:0 9px 18px rgba(35,72,92,.09),inset 0 -4px 0 rgba(0,0,0,.035);
}

.mrtb-ks-game-setup-card.players{
  border-color:rgba(70,151,255,.18);
  background:linear-gradient(180deg,rgba(241,249,255,.97),rgba(255,255,255,.94));
}

.mrtb-ks-game-setup-card.levels{
  border-color:rgba(255,184,46,.21);
  background:linear-gradient(180deg,rgba(255,251,230,.97),rgba(255,255,255,.94));
}

.mrtb-ks-game-card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.mrtb-ks-game-card-title b,
.mrtb-ks-game-card-title span{
  display:block;
}

.mrtb-ks-game-card-title b{
  font-size:18px;
  font-weight:1000;
}

.mrtb-ks-game-card-title span{
  margin-top:2px;
  font-size:10px;
  font-weight:850;
  color:#68768d;
}

.mrtb-ks-player-counter{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border-radius:14px;
  background:#edf5ff;
  box-shadow:inset 0 0 0 2px rgba(70,151,255,.1);
}

.mrtb-ks-player-counter button{
  width:32px;
  height:32px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#d9eaff);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:17px;
  font-weight:1000;
}

.mrtb-ks-player-counter button:disabled{
  opacity:.42;
  cursor:default;
}

.mrtb-ks-player-counter strong{
  min-width:34px;
  text-align:center;
  font-size:18px;
  font-weight:1000;
}

.mrtb-ks-player-name-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  max-height:500px;
  overflow:auto;
  padding-right:2px;
}

.mrtb-ks-player-name-grid label{
  min-width:0;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:5px;
  border-radius:13px;
  background:#f4f8fc;
  border:1px solid rgba(38,48,68,.06);
}

.mrtb-ks-player-name-grid label > span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(180deg,#a9d8ff,#5eaaff);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-player-name-grid input{
  width:100%;
  min-width:0;
  height:31px;
  border:0;
  border-radius:9px;
  padding:5px 8px;
  outline:0;
  background:#fff;
  box-shadow:inset 0 0 0 2px rgba(38,48,68,.07);
  color:#263044;
  font:inherit;
  font-size:11px;
  font-weight:900;
  user-select:text;
}

.mrtb-ks-player-name-grid input:focus{
  box-shadow:inset 0 0 0 3px rgba(70,151,255,.35);
}

.mrtb-ks-game-level-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}

.mrtb-ks-game-level-grid button{
  position:relative;
  min-height:154px;
  border:2px solid rgba(38,48,68,.07);
  border-radius:17px;
  padding:9px 7px 8px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#eef5fc);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.06),0 6px 12px rgba(35,72,92,.07);
  text-align:left;
  transition:.16s ease;
}

.mrtb-ks-game-level-grid button:hover{
  transform:translateY(-2px);
}

.mrtb-ks-game-level-grid button.active{
  border-color:#ffb82e;
  background:linear-gradient(180deg,#fff5bc,#ffd55f);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.08),0 8px 16px rgba(255,184,46,.2);
}

.mrtb-ks-game-level-grid em,
.mrtb-ks-game-level-grid b,
.mrtb-ks-game-level-grid small{
  display:block;
}

.mrtb-ks-game-level-grid em{
  width:max-content;
  margin-bottom:8px;
  padding:4px 7px;
  border-radius:9px;
  background:#263044;
  color:#fff;
  font-style:normal;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-game-level-grid b{
  min-height:38px;
  font-size:13px;
  line-height:1.12;
  font-weight:1000;
}

.mrtb-ks-game-level-grid small{
  margin-top:6px;
  font-size:9px;
  line-height:1.2;
  font-weight:850;
  color:#657188;
}

.mrtb-ks-game-story{
  display:grid;
  grid-template-columns:minmax(210px,.8fr) auto auto minmax(180px,.7fr) auto;
  align-items:center;
  gap:13px;
  margin-top:12px;
  padding:13px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,248,255,.93));
  box-shadow:0 9px 18px rgba(35,72,92,.09),inset 0 -4px 0 rgba(0,0,0,.04);
}

.mrtb-ks-story-weapon{
  position:relative;
  min-height:72px;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:linear-gradient(180deg,#8596ac,#35465d);
  color:#fff;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.2),0 8px 15px rgba(35,72,92,.16);
}

.mrtb-ks-story-weapon::before{
  content:"";
  position:absolute;
  right:-40px;
  top:22px;
  width:48px;
  height:22px;
  border-radius:0 10px 10px 0;
  background:#35465d;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);
}

.mrtb-ks-story-weapon i{
  position:absolute;
  left:20px;
  bottom:-25px;
  width:34px;
  height:40px;
  border-radius:6px 6px 13px 13px;
  background:#35465d;
  transform:skewX(-10deg);
}

.mrtb-ks-story-weapon b{
  font-size:16px;
  letter-spacing:1px;
}

.mrtb-ks-game-story > span{
  padding:6px 9px;
  border-radius:999px;
  background:#fff3b0;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}

.mrtb-ks-game-story > strong{
  font-size:28px;
  color:#ff8b2c;
}

.mrtb-ks-story-wall{
  min-height:74px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:
    linear-gradient(90deg,transparent 48%,rgba(255,255,255,.3) 49% 51%,transparent 52%) 0 0/60px 30px,
    linear-gradient(0deg,rgba(0,0,0,.12) 0 3px,transparent 3px) 0 0/100% 30px,
    linear-gradient(180deg,#e98d55,#b94d35);
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.15),0 8px 15px rgba(129,65,42,.16);
  font-size:17px;
  font-weight:1000;
}

.mrtb-ks-game-story > button{
  min-height:52px;
  border:0;
  border-radius:17px;
  padding:8px 18px;
  cursor:pointer;
  background:linear-gradient(180deg,#b5ff99,#42d36e);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.11),0 8px 15px rgba(50,201,114,.2);
  color:#173b25;
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
}

/* HUD παιχνιδιού */
.mrtb-ks-game-hud{
  grid-template-columns:minmax(260px,1fr) auto auto;
  padding:8px 10px;
}

.mrtb-ks-game-logo{
  display:flex;
  align-items:center;
  gap:8px;
}

.mrtb-ks-game-logo > span{
  width:44px;
  height:44px;
  border-radius:14px;
  font-size:22px;
}

.mrtb-ks-game-logo strong,
.mrtb-ks-game-logo small{
  display:block;
}

.mrtb-ks-game-logo strong{
  font-size:19px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-game-logo small{
  margin-top:3px;
  font-size:9px;
  font-weight:850;
  color:#68758b;
}

.mrtb-ks-round-pill{
  min-width:230px;
  padding:7px 12px;
  border-radius:15px;
  background:linear-gradient(180deg,#fff4b6,#ffd361);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.07);
  text-align:center;
}

.mrtb-ks-round-pill b,
.mrtb-ks-round-pill span{
  display:block;
}

.mrtb-ks-round-pill b{
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-round-pill span{
  margin-top:2px;
  font-size:9px;
  font-weight:900;
  color:#5c5d51;
}

.mrtb-ks-game-player-strip{
  display:flex;
  gap:5px;
  margin-top:7px;
  padding:5px;
  overflow-x:auto;
  border-radius:15px;
  background:rgba(255,255,255,.84);
  box-shadow:inset 0 0 0 2px rgba(38,48,68,.04);
}

.mrtb-ks-game-player-strip > div{
  flex:1 0 120px;
  min-width:0;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  padding:5px 6px;
  border-radius:11px;
  background:#f1f5f9;
  border:2px solid transparent;
}

.mrtb-ks-game-player-strip > div.active{
  border-color:#ffb82e;
  background:linear-gradient(180deg,#fff3af,#ffd45f);
  box-shadow:0 5px 10px rgba(255,184,46,.15);
}

.mrtb-ks-game-player-strip span{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#dbe8f5;
  font-size:9px;
  font-weight:1000;
}

.mrtb-ks-game-player-strip b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9.5px;
  font-weight:1000;
}

.mrtb-ks-game-player-strip em{
  padding:3px 5px;
  border-radius:8px;
  background:#263044;
  color:#fff;
  font-style:normal;
  font-size:8px;
  font-weight:1000;
}

.mrtb-ks-game-arena{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  margin-top:7px;
  padding:9px;
  border-radius:22px;
  background:rgba(255,255,255,.8);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 20px rgba(35,72,92,.09),inset 0 0 0 2px rgba(255,255,255,.3);
}

.mrtb-ks-game-mission{
  display:grid;
  grid-template-columns:auto minmax(230px,.65fr) minmax(300px,1fr);
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:15px;
  background:linear-gradient(180deg,#fff6c4,#ffe17c);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.06);
}

.mrtb-ks-game-mission > small{
  padding:5px 7px;
  border-radius:8px;
  background:#263044;
  color:#fff;
  font-size:8px;
  font-weight:1000;
  white-space:nowrap;
}

.mrtb-ks-game-mission > strong{
  font-size:22px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-game-mission > strong em{
  margin-left:4px;
  color:#526079;
  font-style:normal;
  font-size:14px;
}

.mrtb-ks-game-mission > span{
  font-size:9.5px;
  line-height:1.2;
  font-weight:850;
  color:#5f674f;
}

.mrtb-ks-weapon-zone{
  display:grid;
  grid-template-columns:minmax(520px,1.1fr) minmax(270px,.55fr);
  gap:12px;
  align-items:center;
  min-height:220px;
  padding:8px 13px;
  border-radius:19px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(0deg,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(180deg,#79d7ff,#a8ecff 55%,#8ee875 56%,#59cf68);
  overflow:hidden;
}

.mrtb-ks-cartoon-weapon{
  position:relative;
  width:min(620px,100%);
  height:180px;
  margin:0 auto;
}

.mrtb-ks-weapon-barrel{
  position:absolute;
  left:42%;
  top:67px;
  width:48%;
  height:43px;
  border-radius:0 16px 16px 0;
  background:linear-gradient(180deg,#75859a,#28394f);
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.18),0 9px 16px rgba(35,72,92,.2);
}

.mrtb-ks-weapon-barrel::after{
  content:"";
  position:absolute;
  right:-9px;
  top:7px;
  width:18px;
  height:29px;
  border-radius:0 10px 10px 0;
  background:#1d2b3e;
}

.mrtb-ks-weapon-body{
  position:absolute;
  left:14%;
  top:47px;
  width:34%;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:30px 22px 22px 30px;
  background:linear-gradient(145deg,#ffc34c,#ff7b31);
  border:5px solid rgba(255,255,255,.55);
  box-shadow:inset 0 -12px 0 rgba(0,0,0,.13),0 12px 22px rgba(129,65,42,.22);
}

.mrtb-ks-weapon-body b{
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
  font-size:17px;
  letter-spacing:1px;
}

.mrtb-ks-weapon-handle{
  position:absolute;
  left:29%;
  top:123px;
  width:66px;
  height:58px;
  border-radius:9px 9px 18px 18px;
  background:linear-gradient(180deg,#465a70,#26364a);
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.19),0 8px 14px rgba(35,72,92,.2);
  transform:skewX(-9deg);
}

.mrtb-ks-weapon-slots{
  position:absolute;
  left:8px;
  top:0;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}

.mrtb-ks-slot-label{
  min-width:122px;
  padding:5px 7px;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:0 5px 10px rgba(35,72,92,.1);
  text-align:center;
}

.mrtb-ks-slot-label b,
.mrtb-ks-slot-label span{
  display:block;
}

.mrtb-ks-slot-label b{
  font-size:17px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-slot-label span{
  margin-top:2px;
  font-size:7.5px;
  font-weight:900;
  color:#657188;
}

.mrtb-ks-slot-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.mrtb-ks-weapon-slot{
  min-width:54px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:999px 12px 12px 999px;
  background:rgba(255,255,255,.58);
  border:3px dashed rgba(38,48,68,.22);
  color:#718096;
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-weapon-slot.loaded{
  border-style:solid;
  border-color:#cf9322;
  background:linear-gradient(90deg,#ffd15c,#ff9f3c);
  color:#263044;
  box-shadow:inset -5px 0 0 rgba(0,0,0,.08),0 5px 9px rgba(159,102,31,.12);
  animation:mrtb-ks-load-bullet .22s cubic-bezier(.2,1.45,.35,1) both;
}

@keyframes mrtb-ks-load-bullet{
  from{transform:translateX(-18px) scale(.7);opacity:0;}
  to{transform:translateX(0) scale(1);opacity:1;}
}

.mrtb-ks-cartoon-weapon.shot-correct{
  animation:mrtb-ks-weapon-kick .42s ease both;
}

.mrtb-ks-cartoon-weapon.shot-wrong{
  animation:mrtb-ks-weapon-shake .42s ease both;
}

@keyframes mrtb-ks-weapon-kick{
  0%{transform:translateX(0) rotate(0deg);}
  30%{transform:translateX(-18px) rotate(-3deg);}
  65%{transform:translateX(5px) rotate(1deg);}
  100%{transform:translateX(0) rotate(0deg);}
}

@keyframes mrtb-ks-weapon-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-7px) rotate(-1deg);}
  50%{transform:translateX(7px) rotate(1deg);}
  75%{transform:translateX(-4px);}
}

.mrtb-ks-game-target{
  position:relative;
  min-height:200px;
  display:grid;
  place-items:center;
}

.mrtb-ks-wall{
  position:relative;
  width:min(290px,100%);
  height:168px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:3px;
  padding:7px;
  border-radius:14px;
  background:#81452f;
  box-shadow:0 12px 20px rgba(108,58,42,.24),inset 0 -9px 0 rgba(0,0,0,.14);
}

.mrtb-ks-wall > i{
  display:block;
  border-radius:4px;
  background:linear-gradient(180deg,#f2a06b,#c45337);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.11);
}

.mrtb-ks-wall > b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
  font-size:20px;
  font-weight:1000;
  letter-spacing:1px;
  pointer-events:none;
}

.mrtb-ks-wall.destroyed.animate > i{
  animation:mrtb-ks-brick-fall .8s cubic-bezier(.2,.7,.35,1) both;
  animation-delay:calc(var(--brick) * .014s);
}

@keyframes mrtb-ks-brick-fall{
  0%{transform:translate(0,0) rotate(0);opacity:1;}
  35%{transform:translate(calc((var(--brick) - 12) * 1.5px),-18px) rotate(8deg);}
  100%{transform:translate(calc((var(--brick) - 12) * 4px),120px) rotate(120deg);opacity:0;}
}

.mrtb-ks-wall.destroyed.animate > b{
  animation:mrtb-ks-boom .7s ease both;
}

@keyframes mrtb-ks-boom{
  0%{transform:scale(.2);opacity:0;}
  45%{transform:scale(1.35) rotate(-5deg);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}

.mrtb-ks-shot-line{
  position:absolute;
  left:-180px;
  right:50%;
  top:50%;
  height:7px;
  transform:translateY(-50%);
  pointer-events:none;
}

.mrtb-ks-shot-line i{
  position:absolute;
  left:0;
  top:0;
  width:36px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff8b8,#ff8a2f);
  box-shadow:0 0 14px #ff9d35;
  opacity:0;
}

.mrtb-ks-shot-line.fire i{
  animation:mrtb-ks-projectile .38s linear both;
}

@keyframes mrtb-ks-projectile{
  0%{left:0;opacity:1;transform:scaleX(.4);}
  100%{left:calc(100% - 36px);opacity:1;transform:scaleX(1.2);}
}

.mrtb-ks-misfire{
  position:absolute;
  left:-85px;
  top:50%;
  transform:translateY(-50%);
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 12px rgba(35,72,92,.12);
  font-size:10px;
  font-weight:1000;
  animation:mrtb-ks-smoke .6s ease both;
}

@keyframes mrtb-ks-smoke{
  from{transform:translateY(-20%) scale(.5);opacity:0;}
  to{transform:translateY(-80%) scale(1);opacity:1;}
}

.mrtb-ks-ammo-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 122px;
  gap:8px;
  align-items:stretch;
}

.mrtb-ks-ammo-group{
  min-width:0;
  padding:7px;
  border-radius:15px;
  background:#f5f8fb;
  border:2px solid rgba(38,48,68,.06);
}

.mrtb-ks-ammo-group.sharp{
  background:linear-gradient(180deg,#eef7ff,#dfefff);
  border-color:rgba(70,151,255,.16);
}

.mrtb-ks-ammo-group.flat{
  background:linear-gradient(180deg,#fff0f6,#ffe0ec);
  border-color:rgba(255,107,154,.16);
}

.mrtb-ks-ammo-group > header{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
}

.mrtb-ks-ammo-group > header strong{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07);
  font-family:"Times New Roman",serif;
  font-size:21px;
}

.mrtb-ks-ammo-group > header b{
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-ammo-group > div{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}

.mrtb-ks-ammo-group button{
  min-width:0;
  min-height:46px;
  display:grid;
  place-items:center;
  gap:1px;
  border:2px solid transparent;
  border-radius:10px;
  padding:3px 2px;
  cursor:pointer;
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.07),0 4px 8px rgba(35,72,92,.06);
}

.mrtb-ks-ammo-group button i{
  width:22px;
  height:9px;
  display:block;
  border-radius:999px 4px 4px 999px;
  background:linear-gradient(90deg,#ffd15c,#ff9f3c);
  box-shadow:inset -4px 0 0 rgba(0,0,0,.08);
}

.mrtb-ks-ammo-group button span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  font-size:8.5px;
  font-weight:1000;
}

.mrtb-ks-ammo-group button:hover{
  transform:translateY(-1px);
}

.mrtb-ks-ammo-group button.selected{
  border-color:#ffb82e;
  background:linear-gradient(180deg,#fff5b6,#ffd55f);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 6px 10px rgba(255,184,46,.17);
}

.mrtb-ks-ammo-group button:disabled{
  cursor:default;
}

.mrtb-ks-fire-button{
  border:0;
  border-radius:16px;
  cursor:pointer;
  background:linear-gradient(180deg,#ffb2a0,#ff5149);
  color:#541d1a;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.13),0 8px 14px rgba(194,66,54,.18);
}

.mrtb-ks-fire-button span,
.mrtb-ks-fire-button b,
.mrtb-ks-fire-button small{
  display:block;
  text-align:center;
}

.mrtb-ks-fire-button span{
  font-size:25px;
}

.mrtb-ks-fire-button b{
  font-size:20px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-fire-button small{
  margin-top:4px;
  font-size:8px;
  font-weight:900;
}

.mrtb-ks-fire-button:disabled{
  opacity:.5;
  cursor:default;
}

.mrtb-ks-shot-feedback{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:16px;
  animation:mrtb-ks-feedback-in .3s cubic-bezier(.2,1.35,.35,1) both;
}

@keyframes mrtb-ks-feedback-in{
  from{transform:translateY(12px) scale(.96);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}

.mrtb-ks-shot-feedback.correct{
  background:linear-gradient(180deg,#e4ffd8,#9eecab);
  border:2px solid rgba(50,201,114,.2);
}

.mrtb-ks-shot-feedback.wrong{
  background:linear-gradient(180deg,#ffe6e3,#ffaaa4);
  border:2px solid rgba(226,82,73,.18);
}

.mrtb-ks-shot-feedback-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.84);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07);
  font-size:23px;
}

.mrtb-ks-shot-feedback strong,
.mrtb-ks-shot-feedback span,
.mrtb-ks-shot-feedback small{
  display:block;
}

.mrtb-ks-shot-feedback strong{
  font-size:12px;
  font-weight:1000;
}

.mrtb-ks-shot-feedback span{
  margin-top:3px;
  font-size:10px;
  font-weight:900;
}

.mrtb-ks-shot-feedback small{
  margin-top:2px;
  font-size:8.5px;
  font-weight:850;
  color:#56647b;
}

.mrtb-ks-shot-feedback > button{
  min-height:39px;
  border:0;
  border-radius:13px;
  padding:6px 12px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#e4edf6);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}

/* Results ανά γύρο / τελικά */
.mrtb-ks-game-results-overlay{
  position:absolute;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(31,55,79,.38);
  backdrop-filter:blur(7px);
}

.mrtb-ks-game-results-card{
  width:min(940px,calc(100% - 20px));
  max-height:calc(100% - 24px);
  overflow:auto;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#eff6ff);
  border:3px solid rgba(255,255,255,.94);
  box-shadow:0 24px 55px rgba(23,42,63,.28),inset 0 -6px 0 rgba(0,0,0,.045);
  animation:mrtb-ks-results-pop .35s cubic-bezier(.2,1.35,.35,1) both;
}

@keyframes mrtb-ks-results-pop{
  from{transform:translateY(22px) scale(.84);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}

.mrtb-ks-results-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

.mrtb-ks-results-title > span{
  font-size:39px;
}

.mrtb-ks-results-title strong,
.mrtb-ks-results-title small{
  display:block;
}

.mrtb-ks-results-title strong{
  font-size:23px;
  font-weight:1000;
}

.mrtb-ks-results-title small{
  margin-top:3px;
  font-size:10px;
  font-weight:850;
  color:#69768b;
}

.mrtb-ks-round-result-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:13px;
}

.mrtb-ks-round-result-list > div{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) minmax(140px,.8fr) auto;
  align-items:center;
  gap:6px;
  padding:7px;
  border-radius:13px;
  background:#f3f7fb;
}

.mrtb-ks-round-result-list > div.correct{
  background:#e5fbe9;
}

.mrtb-ks-round-result-list > div.wrong{
  background:#ffe9e7;
}

.mrtb-ks-round-result-list span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  font-size:15px;
  font-weight:1000;
}

.mrtb-ks-round-result-list b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-round-result-list small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
  font-weight:850;
  color:#617087;
}

.mrtb-ks-round-result-list em{
  padding:4px 6px;
  border-radius:8px;
  background:#263044;
  color:#fff;
  font-style:normal;
  font-size:9px;
  font-weight:1000;
}

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

.mrtb-ks-scoreboard > div{
  min-width:0;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  align-items:center;
  gap:4px;
  padding:6px;
  border-radius:11px;
  background:linear-gradient(180deg,#fff5bf,#ffdb70);
}

.mrtb-ks-scoreboard span{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#fff;
  font-size:8px;
  font-weight:1000;
}

.mrtb-ks-scoreboard b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
  font-weight:1000;
}

.mrtb-ks-scoreboard em{
  font-style:normal;
  font-size:9px;
  font-weight:1000;
}

.mrtb-ks-results-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:13px;
}

.mrtb-ks-results-actions button{
  min-height:40px;
  border:0;
  border-radius:13px;
  padding:7px 14px;
  cursor:pointer;
  background:linear-gradient(180deg,#b8ff9d,#42d36e);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 6px 12px rgba(50,201,114,.14);
  font-size:10px;
  font-weight:1000;
}

.mrtb-ks-results-actions button.secondary{
  background:linear-gradient(180deg,#fff,#dfe9f3);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.07);
}

.mrtb-ks-game-results-card.final{
  width:min(760px,calc(100% - 20px));
  text-align:center;
  background:linear-gradient(180deg,#fff9cf,#fff,#eaf5ff);
}

.mrtb-ks-final-trophy{
  font-size:58px;
  line-height:1;
  animation:mrtb-ks-trophy-bounce .8s ease infinite alternate;
}

@keyframes mrtb-ks-trophy-bounce{
  from{transform:translateY(0) rotate(-4deg);}
  to{transform:translateY(-8px) rotate(4deg);}
}

.mrtb-ks-game-results-card.final h2{
  margin:5px 0 0;
  font-size:27px;
}

.mrtb-ks-game-results-card.final h3{
  margin:4px 0;
  font-size:21px;
  color:#e68b20;
}

.mrtb-ks-game-results-card.final p{
  margin:4px 0 10px;
  font-size:10px;
  font-weight:850;
  color:#647187;
}

.mrtb-ks-final-ranking{
  display:grid;
  gap:5px;
  text-align:left;
}

.mrtb-ks-final-ranking > div{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) minmax(140px,.8fr) auto;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:13px;
  background:#eef4fa;
}

.mrtb-ks-final-ranking > div.winner{
  background:linear-gradient(180deg,#fff4b3,#ffd15d);
  box-shadow:0 6px 12px rgba(255,184,46,.14);
}

.mrtb-ks-final-ranking span{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-final-ranking b{
  font-size:11px;
  font-weight:1000;
}

.mrtb-ks-final-ranking small{
  font-size:9px;
  font-weight:850;
  color:#627087;
}

.mrtb-ks-final-ranking em{
  min-width:48px;
  padding:5px 7px;
  border-radius:9px;
  background:#263044;
  color:#fff;
  text-align:center;
  font-style:normal;
  font-size:10px;
  font-weight:1000;
}

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

  .mrtb-key-signatures-scene.game-page{
    min-height:1120px !important;
  }

  .mrtb-ks-game-level-grid{
    grid-template-columns:repeat(5,minmax(130px,1fr));
    overflow-x:auto;
  }

  .mrtb-ks-weapon-zone{
    grid-template-columns:minmax(430px,1fr) minmax(230px,.55fr);
  }
}

@media (max-width:900px){
  .mrtb-key-signatures-scene.game-page{
    left:8px !important;
    right:8px !important;
    top:8px !important;
    min-height:1380px !important;
    padding:8px 8px 22px !important;
    border-radius:20px !important;
  }

  .mrtb-ks-game-hero,
  .mrtb-ks-game-hud{
    grid-template-columns:auto minmax(0,1fr) auto;
    padding:8px;
    border-radius:16px;
  }

  .mrtb-ks-game-hero-icon{
    width:43px;
    height:43px;
    border-radius:13px;
    font-size:21px;
  }

  .mrtb-ks-game-hero > div:nth-child(2) > strong{
    font-size:19px;
  }

  .mrtb-ks-game-hero > div:nth-child(2) > span{
    font-size:10px;
  }

  .mrtb-ks-player-name-grid{
    grid-template-columns:1fr;
  }

  .mrtb-ks-game-level-grid{
    grid-template-columns:repeat(5,145px);
  }

  .mrtb-ks-game-story{
    grid-template-columns:1fr;
    text-align:center;
  }

  .mrtb-ks-story-weapon::before,
  .mrtb-ks-story-weapon i{
    display:none;
  }

  .mrtb-ks-game-mission{
    grid-template-columns:1fr;
    text-align:center;
  }

  .mrtb-ks-weapon-zone{
    grid-template-columns:1fr;
    min-height:470px;
  }

  .mrtb-ks-cartoon-weapon{
    transform:scale(.84);
    transform-origin:center center;
  }

  .mrtb-ks-shot-line{
    display:none;
  }

  .mrtb-ks-ammo-panel{
    grid-template-columns:1fr;
  }

  .mrtb-ks-ammo-group > div{
    grid-template-columns:repeat(7,minmax(36px,1fr));
  }

  .mrtb-ks-fire-button{
    min-height:68px;
  }

  .mrtb-ks-shot-feedback{
    grid-template-columns:auto 1fr;
  }

  .mrtb-ks-shot-feedback > button{
    grid-column:1/-1;
  }

  .mrtb-ks-round-result-list{
    grid-template-columns:1fr;
  }

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

  .mrtb-ks-final-ranking > div{
    grid-template-columns:32px minmax(0,1fr) auto;
  }

  .mrtb-ks-final-ranking small{
    grid-column:2;
  }
}

/* =========================================================
   v0.7.2 · COMPACT MULTIPLAYER ΟΠΛΙΣΜΟΣ
   2 παίκτες δίπλα-δίπλα · περισσότεροι σε ζευγάρια
   κάθετο όπλο · αυτόματη μετάβαση · μόνο τελικά results
   ========================================================= */

.mrtb-key-signatures-scene.game-page{
  min-height:0 !important;
  padding:8px 10px 20px !important;
  overflow:visible !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-hud{
  min-height:54px !important;
  padding:6px 9px !important;
  border-radius:17px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-logo > span{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  font-size:19px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-logo strong{
  font-size:17px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-logo small{
  font-size:8px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-round-pill{
  min-width:190px !important;
  padding:5px 10px !important;
  border-radius:13px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-round-pill b{
  font-size:12px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-round-pill span{
  font-size:8px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-close{
  width:34px !important;
  height:34px !important;
  font-size:19px !important;
}

/* Μικρή μπάρα κατάταξης. */
.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip{
  min-height:34px !important;
  margin-top:5px !important;
  padding:3px !important;
  gap:4px !important;
  border-radius:12px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip > div{
  flex:1 0 104px !important;
  grid-template-columns:20px minmax(0,1fr) auto auto !important;
  gap:4px !important;
  padding:3px 5px !important;
  border-radius:9px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip > div.locked{
  background:#edf7ef !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip span{
  width:19px !important;
  height:19px !important;
  border-radius:6px !important;
  font-size:8px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip b{
  font-size:8px !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip small{
  font-size:6.8px !important;
  font-weight:1000 !important;
  color:#68758b !important;
  white-space:nowrap !important;
}

.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip em{
  font-size:7px !important;
  padding:2px 4px !important;
}

/* Ο παλιός ένας μεγάλος χώρος γίνεται grid πολλών παικτών. */
.mrtb-ks-game-arena.compact-multiplayer{
  display:block !important;
  margin-top:5px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.mrtb-ks-player-arenas{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:start !important;
}

.mrtb-ks-player-arena{
  min-width:0 !important;
  display:grid !important;
  grid-template-rows:auto 168px auto 91px 30px !important;
  gap:5px !important;
  padding:7px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.91) !important;
  border:2px solid rgba(38,48,68,.07) !important;
  box-shadow:0 8px 16px rgba(35,72,92,.09),inset 0 -3px 0 rgba(0,0,0,.025) !important;
  transition:.16s ease !important;
}

.mrtb-ks-player-arena.waiting:not(.active){
  opacity:.72 !important;
  filter:saturate(.82) !important;
}

.mrtb-ks-player-arena.active{
  opacity:1 !important;
  filter:none !important;
  border-color:#ffb82e !important;
  box-shadow:0 9px 19px rgba(255,184,46,.18),inset 0 0 0 2px rgba(255,184,46,.14) !important;
}

.mrtb-ks-player-arena.locked.correct{
  border-color:rgba(50,201,114,.45) !important;
  background:linear-gradient(180deg,#f6fff8,#ecfff1) !important;
}

.mrtb-ks-player-arena.locked.wrong{
  border-color:rgba(226,82,73,.34) !important;
  background:linear-gradient(180deg,#fff9f8,#fff0ee) !important;
}

.mrtb-ks-player-arena-head{
  min-height:31px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:5px !important;
  padding:4px 6px !important;
  border-radius:11px !important;
  background:#f1f6fb !important;
}

.mrtb-ks-player-arena.active .mrtb-ks-player-arena-head{
  background:linear-gradient(180deg,#fff3b5,#ffda73) !important;
}

.mrtb-ks-player-arena-head > div{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}

.mrtb-ks-player-arena-head > div span{
  width:23px !important;
  height:23px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  border-radius:8px !important;
  background:#d8e7f5 !important;
  font-size:8px !important;
  font-weight:1000 !important;
}

.mrtb-ks-player-arena-head strong{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11px !important;
  font-weight:1000 !important;
}

.mrtb-ks-player-arena-head small{
  padding:3px 6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.8) !important;
  font-size:6.8px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.mrtb-ks-player-arena-head > b{
  padding:3px 6px !important;
  border-radius:8px !important;
  background:#263044 !important;
  color:#fff !important;
  font-size:8px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

/* Μικρό πεδίο μάχης: το τείχος επάνω και το όπλο κάθετο από κάτω. */
.mrtb-ks-player-battle{
  position:relative !important;
  min-height:168px !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/23px 23px,
    linear-gradient(0deg,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/23px 23px,
    linear-gradient(180deg,#7dd8ff 0%,#a9edff 59%,#83e36d 60%,#55ca63 100%) !important;
}

.mrtb-ks-player-target{
  position:absolute !important;
  left:50% !important;
  top:5px !important;
  width:150px !important;
  height:78px !important;
  transform:translateX(-50%) !important;
  z-index:4 !important;
}

.mrtb-ks-player-target .mrtb-ks-wall{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:142px !important;
  height:76px !important;
  transform:translateX(-50%) !important;
  gap:2px !important;
  padding:4px !important;
  border-radius:10px !important;
  box-shadow:0 7px 12px rgba(108,58,42,.22),inset 0 -5px 0 rgba(0,0,0,.13) !important;
}

.mrtb-ks-player-target .mrtb-ks-wall > i{
  border-radius:3px !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1) !important;
}

.mrtb-ks-player-target .mrtb-ks-wall > b{
  font-size:12px !important;
}

.mrtb-ks-player-target .mrtb-ks-shot-line{
  left:50% !important;
  right:auto !important;
  top:71px !important;
  width:6px !important;
  height:74px !important;
  transform:translateX(-50%) !important;
  z-index:1 !important;
}

.mrtb-ks-player-target .mrtb-ks-shot-line i{
  left:0 !important;
  top:auto !important;
  bottom:0 !important;
  width:6px !important;
  height:26px !important;
  background:linear-gradient(180deg,#fff8b8,#ff7a28) !important;
}

.mrtb-ks-player-target .mrtb-ks-shot-line.fire i{
  animation:mrtb-ks-projectile-up .30s linear both !important;
}

@keyframes mrtb-ks-projectile-up{
  0%{bottom:0;opacity:1;transform:scaleY(.45);}
  100%{bottom:calc(100% - 26px);opacity:1;transform:scaleY(1.25);}
}

.mrtb-ks-player-target .mrtb-ks-misfire{
  left:50% !important;
  top:70px !important;
  transform:translateX(-50%) !important;
  padding:3px 6px !important;
  font-size:7px !important;
  z-index:8 !important;
}

/* Κάθετο, μικρότερο όπλο. */
.mrtb-ks-vertical-weapon{
  position:absolute !important;
  left:50% !important;
  bottom:3px !important;
  width:330px !important;
  height:92px !important;
  transform:translateX(-50%) !important;
  z-index:3 !important;
}

.mrtb-ks-vertical-barrel{
  position:absolute !important;
  left:74px !important;
  top:0 !important;
  width:28px !important;
  height:48px !important;
  border-radius:10px 10px 4px 4px !important;
  background:linear-gradient(90deg,#2a3b50,#71839a,#26364a) !important;
  box-shadow:inset -5px 0 0 rgba(0,0,0,.14),0 5px 9px rgba(35,72,92,.18) !important;
}

.mrtb-ks-vertical-barrel::before{
  content:"" !important;
  position:absolute !important;
  left:-5px !important;
  top:-4px !important;
  width:38px !important;
  height:10px !important;
  border-radius:8px !important;
  background:#223247 !important;
}

.mrtb-ks-vertical-body{
  position:absolute !important;
  left:34px !important;
  bottom:6px !important;
  width:108px !important;
  height:53px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:22px 22px 17px 17px !important;
  background:linear-gradient(145deg,#ffc650,#ff7b31) !important;
  border:4px solid rgba(255,255,255,.5) !important;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 7px 12px rgba(129,65,42,.18) !important;
}

.mrtb-ks-weapon-scale{
  width:100% !important;
  min-width:0 !important;
  text-align:center !important;
  color:#fff !important;
  text-shadow:0 2px 0 rgba(0,0,0,.16) !important;
}

.mrtb-ks-weapon-scale strong,
.mrtb-ks-weapon-scale span{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.mrtb-ks-weapon-scale strong{
  font-size:17px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.mrtb-ks-weapon-scale span{
  margin-top:2px !important;
  font-size:9px !important;
  font-weight:1000 !important;
}

.mrtb-ks-vertical-handle{
  position:absolute !important;
  left:102px !important;
  bottom:0 !important;
  width:30px !important;
  height:31px !important;
  border-radius:6px 6px 12px 12px !important;
  background:linear-gradient(180deg,#465a70,#26364a) !important;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 5px 8px rgba(35,72,92,.15) !important;
  transform:skewX(-9deg) !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-weapon-slots{
  left:154px !important;
  top:18px !important;
  width:170px !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  gap:4px !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-slot-label{
  min-width:0 !important;
  padding:4px !important;
  border-radius:9px !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-slot-label b{
  font-size:13px !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-slot-label span{
  font-size:6px !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-slot-row{
  gap:3px !important;
  align-content:center !important;
}

.mrtb-ks-vertical-weapon .mrtb-ks-weapon-slot{
  min-width:31px !important;
  height:24px !important;
  border-width:2px !important;
  border-radius:999px 8px 8px 999px !important;
  font-size:7.5px !important;
}

.mrtb-ks-vertical-weapon.shot-correct{
  animation:mrtb-ks-vertical-kick .38s ease both !important;
}

.mrtb-ks-vertical-weapon.shot-wrong{
  animation:mrtb-ks-vertical-shake .38s ease both !important;
}

@keyframes mrtb-ks-vertical-kick{
  0%{transform:translateX(-50%) translateY(0);}
  30%{transform:translateX(-50%) translateY(12px) rotate(-2deg);}
  70%{transform:translateX(-50%) translateY(-3px) rotate(1deg);}
  100%{transform:translateX(-50%) translateY(0);}
}

@keyframes mrtb-ks-vertical-shake{
  0%,100%{transform:translateX(-50%);}
  25%{transform:translateX(calc(-50% - 5px)) rotate(-1deg);}
  50%{transform:translateX(calc(-50% + 5px)) rotate(1deg);}
  75%{transform:translateX(calc(-50% - 3px));}
}

.mrtb-ks-player-instruction{
  min-height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:4px 6px !important;
  border-radius:10px !important;
  background:#fff4b7 !important;
  text-align:center !important;
}

.mrtb-ks-player-instruction b{
  font-size:8px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}

.mrtb-ks-player-instruction span{
  font-size:7px !important;
  font-weight:850 !important;
  color:#606b7f !important;
}

/* Μικρές επιλογές και ΠΥΡ μέσα σε κάθε κάρτα. */
.mrtb-ks-player-controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px !important;
  gap:5px !important;
  min-height:91px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group{
  padding:4px !important;
  border-radius:11px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group > header{
  gap:4px !important;
  margin-bottom:3px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group > header strong{
  width:22px !important;
  height:22px !important;
  border-radius:7px !important;
  font-size:15px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group > header b{
  font-size:8px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group > div{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:2px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group button{
  min-width:0 !important;
  min-height:46px !important;
  padding:2px 1px !important;
  border-radius:8px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group button i{
  width:19px !important;
  height:6px !important;
  margin-bottom:2px !important;
}

.mrtb-ks-player-controls .mrtb-ks-ammo-group button span{
  font-size:6.8px !important;
  line-height:1 !important;
}

.mrtb-ks-player-controls .mrtb-ks-fire-button{
  min-height:91px !important;
  border-radius:12px !important;
}

.mrtb-ks-player-controls .mrtb-ks-fire-button span{
  font-size:20px !important;
}

.mrtb-ks-player-controls .mrtb-ks-fire-button b{
  font-size:15px !important;
}

.mrtb-ks-player-controls .mrtb-ks-fire-button small{
  font-size:6.5px !important;
}

.mrtb-ks-player-arena:not(.active) .mrtb-ks-player-controls{
  pointer-events:none !important;
}

.mrtb-ks-player-status{
  min-height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  overflow:hidden !important;
  padding:4px 7px !important;
  border-radius:10px !important;
  text-align:center !important;
  font-size:7.5px !important;
  font-weight:900 !important;
}

.mrtb-ks-player-status.waiting{
  background:#eef4fa !important;
  color:#66748a !important;
}

.mrtb-ks-player-status.correct{
  background:#c9f5d3 !important;
  color:#17663a !important;
}

.mrtb-ks-player-status.wrong{
  background:#ffd4cf !important;
  color:#8a2924 !important;
}

.mrtb-ks-player-status b,
.mrtb-ks-player-status span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Δεν εμφανίζονται ενδιάμεσα results γύρου. */
.mrtb-key-signatures-scene.game-page .mrtb-ks-game-results-card.round,
.mrtb-key-signatures-scene.game-page .mrtb-ks-round-result-list,
.mrtb-key-signatures-scene.game-page .mrtb-ks-scoreboard{
  display:none !important;
}

/* Το τελικό αποτέλεσμα μένει μπροστά από όλες τις κάρτες. */
.mrtb-key-signatures-scene.game-page .mrtb-ks-game-results-overlay.final{
  position:fixed !important;
  z-index:999999 !important;
}

@media (max-width:1250px){
  .mrtb-ks-player-arena{
    grid-template-rows:auto 162px auto 88px 30px !important;
  }

  .mrtb-ks-player-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 65px !important;
  }

  .mrtb-ks-vertical-weapon{
    transform:translateX(-50%) scale(.92) !important;
    transform-origin:center bottom !important;
  }
}

@media (max-width:900px){
  .mrtb-ks-player-arenas{
    grid-template-columns:1fr !important;
  }

  .mrtb-key-signatures-scene.game-page{
    min-height:0 !important;
  }

  .mrtb-ks-player-arena{
    grid-template-rows:auto 168px auto 91px 30px !important;
  }

  .mrtb-ks-vertical-weapon{
    transform:translateX(-50%) scale(.9) !important;
  }
}

/* =========================================================
   v0.7.3 · ΟΡΙΖΟΝΤΙΟ ΟΠΛΟ + ΤΑΥΤΟΧΡΟΝΟΙ ΠΑΙΚΤΕΣ
   ========================================================= */

/* Όλοι οι παίκτες του γύρου είναι ενεργοί ταυτόχρονα. */
.mrtb-key-signatures-scene.game-page .mrtb-ks-game-player-strip > div.active{
  background:linear-gradient(180deg,#fff4bc,#ffd96c) !important;
  border-color:#ffb82e !important;
}

.mrtb-ks-player-arena.active{
  opacity:1 !important;
  filter:none !important;
}

.mrtb-ks-player-arena:not(.active) .mrtb-ks-player-controls{
  pointer-events:auto !important;
}

/* Πιο χαμηλή κάρτα για να χωρούν 2 παίκτες στην ίδια οθόνη. */
.mrtb-ks-player-arena{
  grid-template-rows:auto 174px 28px 86px 28px !important;
  gap:4px !important;
  padding:6px !important;
}

/* Πεδίο μάχης: όπλο αριστερά, τείχος δεξιά. */
.mrtb-ks-player-battle{
  min-height:174px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 158px !important;
  align-items:center !important;
  gap:4px !important;
  padding:3px 5px !important;
  overflow:hidden !important;
}

/* ===== Οριζόντιο όπλο ===== */
.mrtb-ks-horizontal-weapon{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  height:162px !important;
  z-index:3 !important;
}

.mrtb-ks-horizontal-barrel{
  position:absolute !important;
  left:42% !important;
  top:78px !important;
  width:55% !important;
  height:31px !important;
  border-radius:0 12px 12px 0 !important;
  background:linear-gradient(180deg,#71849a,#293a50) !important;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.18),0 6px 10px rgba(35,72,92,.18) !important;
}

.mrtb-ks-horizontal-barrel::after{
  content:"" !important;
  position:absolute !important;
  right:-7px !important;
  top:5px !important;
  width:14px !important;
  height:21px !important;
  border-radius:0 8px 8px 0 !important;
  background:#1e2d40 !important;
}

.mrtb-ks-horizontal-body{
  position:absolute !important;
  left:4% !important;
  top:59px !important;
  width:42% !important;
  height:68px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:24px 18px 18px 24px !important;
  background:linear-gradient(145deg,#ffc64f,#ff7b31) !important;
  border:4px solid rgba(255,255,255,.52) !important;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.13),0 8px 13px rgba(129,65,42,.19) !important;
  z-index:3 !important;
}

.mrtb-ks-horizontal-handle{
  position:absolute !important;
  left:29% !important;
  top:116px !important;
  width:40px !important;
  height:39px !important;
  border-radius:7px 7px 13px 13px !important;
  background:linear-gradient(180deg,#465a70,#26364a) !important;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 5px 8px rgba(35,72,92,.16) !important;
  transform:skewX(-9deg) !important;
  z-index:2 !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-weapon-scale strong{
  font-size:18px !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-weapon-scale span{
  font-size:9px !important;
}

/* Τα slots μένουν πάνω από το όπλο. */
.mrtb-ks-horizontal-weapon .mrtb-ks-weapon-slots{
  left:3px !important;
  right:3px !important;
  top:3px !important;
  width:auto !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  gap:4px !important;
  z-index:6 !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-slot-label{
  min-width:0 !important;
  padding:4px 3px !important;
  border-radius:9px !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-slot-label b{
  font-size:13px !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-slot-label span{
  font-size:6px !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-slot-row{
  gap:3px !important;
  align-content:center !important;
}

.mrtb-ks-horizontal-weapon .mrtb-ks-weapon-slot{
  min-width:30px !important;
  height:24px !important;
  border-width:2px !important;
  border-radius:999px 8px 8px 999px !important;
  font-size:7.5px !important;
}

.mrtb-ks-horizontal-weapon.shot-correct{
  animation:mrtb-ks-horizontal-kick .38s ease both !important;
}

.mrtb-ks-horizontal-weapon.shot-wrong{
  animation:mrtb-ks-horizontal-shake .38s ease both !important;
}

@keyframes mrtb-ks-horizontal-kick{
  0%{transform:translateX(0);}
  30%{transform:translateX(-12px) rotate(-2deg);}
  70%{transform:translateX(4px) rotate(1deg);}
  100%{transform:translateX(0);}
}

@keyframes mrtb-ks-horizontal-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px) rotate(-1deg);}
  50%{transform:translateX(5px) rotate(1deg);}
  75%{transform:translateX(-3px);}
}

/* ===== Τείχος δεξιά ===== */
.mrtb-ks-player-target{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:158px !important;
  height:150px !important;
  transform:none !important;
  display:grid !important;
  place-items:center !important;
  z-index:4 !important;
}

.mrtb-ks-player-target .mrtb-ks-wall{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:148px !important;
  height:106px !important;
  transform:none !important;
  gap:2px !important;
  padding:5px !important;
  border-radius:11px !important;
}

.mrtb-ks-player-target .mrtb-ks-wall > b{
  font-size:13px !important;
}

/* Η βολή ταξιδεύει οριζόντια από το όπλο προς το τείχος. */
.mrtb-ks-player-target .mrtb-ks-shot-line{
  position:absolute !important;
  left:-145px !important;
  right:77px !important;
  top:50% !important;
  width:auto !important;
  height:6px !important;
  transform:translateY(-50%) !important;
  z-index:1 !important;
}

.mrtb-ks-player-target .mrtb-ks-shot-line i{
  left:0 !important;
  top:0 !important;
  bottom:auto !important;
  width:30px !important;
  height:6px !important;
  background:linear-gradient(90deg,#fff8b8,#ff7a28) !important;
}

.mrtb-ks-player-target .mrtb-ks-shot-line.fire i{
  animation:mrtb-ks-projectile-right .30s linear both !important;
}

@keyframes mrtb-ks-projectile-right{
  0%{left:0;opacity:1;transform:scaleX(.45);}
  100%{left:calc(100% - 30px);opacity:1;transform:scaleX(1.25);}
}

.mrtb-ks-player-target .mrtb-ks-misfire{
  left:-54px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  padding:3px 6px !important;
  font-size:7px !important;
}

/* Πιο συμπαγείς επιλογές ώστε η κάρτα να μη μεγαλώνει. */
.mrtb-ks-player-instruction{
  min-height:28px !important;
}

.mrtb-ks-player-controls{
  min-height:86px !important;
}

.mrtb-ks-player-controls .mrtb-ks-fire-button{
  min-height:86px !important;
}

.mrtb-ks-player-status{
  min-height:28px !important;
}

@media (max-width:1180px){
  .mrtb-ks-player-battle{
    grid-template-columns:minmax(0,1fr) 140px !important;
  }

  .mrtb-ks-player-target{
    width:140px !important;
  }

  .mrtb-ks-player-target .mrtb-ks-wall{
    width:132px !important;
    height:98px !important;
  }

  .mrtb-ks-horizontal-body{
    width:45% !important;
  }

  .mrtb-ks-horizontal-barrel{
    left:44% !important;
    width:52% !important;
  }
}

@media (max-width:900px){
  .mrtb-ks-player-battle{
    grid-template-columns:minmax(0,1fr) 150px !important;
  }
}


/* =========================================================
   Game v0.7.4
   Η βολή/κατάρρευση παίζει μόνο μία φορά.
   Σε επόμενο render το γκρεμισμένο τείχος μένει στην τελική κατάσταση.
   ========================================================= */
.mrtb-ks-wall.destroyed.settled > i{
  opacity:0 !important;
  transform:translateY(120px) rotate(120deg) !important;
  animation:none !important;
}

.mrtb-ks-wall.destroyed.settled > b{
  opacity:1 !important;
  transform:scale(1) !important;
  animation:none !important;
}

.mrtb-ks-horizontal-weapon:not(.shot-correct):not(.shot-wrong){
  animation:none !important;
}

.mrtb-ks-shot-line:not(.fire) i{
  animation:none !important;
}


/* =========================================
   UPDATE v0.7.5 · Κύκλος των πεμπτών
   ========================================= */

.mrtb-ks-tabs{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.mrtb-key-signatures-scene.circle-page{
  min-height:980px;
}

.mrtb-ks-circle-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 20px rgba(35,72,92,.08), inset 0 -4px 0 rgba(0,0,0,.035);
}

.mrtb-ks-circle-copy strong,
.mrtb-ks-circle-copy span,
.mrtb-ks-circle-actions button,
.mrtb-ks-circle-legend b,
.mrtb-ks-circle-legend span,
.mrtb-ks-circle-notes b,
.mrtb-ks-circle-notes span{
  display:block;
}

.mrtb-ks-circle-copy strong{
  font-size:26px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-circle-copy span{
  margin-top:6px;
  font-size:13px;
  line-height:1.25;
  font-weight:850;
  color:#647286;
}

.mrtb-ks-circle-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:flex-end;
}

.mrtb-ks-circle-actions button{
  min-height:42px;
  border:0;
  border-radius:14px;
  padding:0 14px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#e7f0fa);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 5px 10px rgba(35,72,92,.08);
  font-size:13px;
  font-weight:1000;
}

.mrtb-ks-circle-actions button[data-ks-circle-next]{
  background:linear-gradient(180deg,#fff1aa,#ffc249);
}

.mrtb-ks-circle-actions button[data-ks-circle-fill]{
  background:linear-gradient(180deg,#dff8e6,#95e4ad);
}

.mrtb-ks-circle-actions button[data-ks-circle-reset]{
  background:linear-gradient(180deg,#ffe4ea,#ff9cbb);
}

.mrtb-ks-circle-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.mrtb-ks-circle-legend > div,
.mrtb-ks-circle-notes > div{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.03);
}

.mrtb-ks-circle-legend .ionian-sharp{ border:2px solid rgba(70,151,255,.18); }
.mrtb-ks-circle-legend .ionian-flat{ border:2px solid rgba(255,107,154,.18); }
.mrtb-ks-circle-legend .aeolian-sharp{ border:2px solid rgba(85,155,255,.16); }
.mrtb-ks-circle-legend .aeolian-flat{ border:2px solid rgba(190,120,255,.18); }

.mrtb-ks-circle-legend b,
.mrtb-ks-circle-notes b{
  font-size:14px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-circle-legend span,
.mrtb-ks-circle-notes span{
  margin-top:5px;
  font-size:11px;
  line-height:1.25;
  font-weight:850;
  color:#66758b;
}

.mrtb-ks-circle-board{
  margin-top:12px;
  padding:20px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,255,.94));
  box-shadow:0 12px 25px rgba(35,72,92,.08), inset 0 -4px 0 rgba(0,0,0,.03);
}

.mrtb-ks-circle-wheel{
  position:relative;
  width:760px;
  height:760px;
  margin:0 auto;
}

.mrtb-ks-circle-ring{
  position:absolute;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.mrtb-ks-circle-ring.outer-ring{
  width:660px;
  height:660px;
  border:12px solid #223246;
  box-shadow:inset 0 0 0 96px rgba(151,166,184,.12);
}

.mrtb-ks-circle-ring.inner-ring{
  width:430px;
  height:430px;
  border:10px solid #223246;
  box-shadow:inset 0 0 0 72px rgba(255,255,255,.58);
}

.mrtb-ks-circle-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:180px;
  height:180px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#eef4fa);
  border:10px solid #223246;
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.06);
}

.mrtb-ks-circle-core b,
.mrtb-ks-circle-core span{
  display:block;
}

.mrtb-ks-circle-core b{
  font-size:34px;
  line-height:1;
  font-weight:1000;
}

.mrtb-ks-circle-core span{
  margin-top:-18px;
  font-size:12px;
  font-weight:900;
  color:#66758b;
}

.mrtb-ks-circle-slot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(calc(-50% + var(--slot-x)), calc(-50% + var(--slot-y)));
  border:0;
  padding:0;
  cursor:pointer;
  background:transparent;
  display:grid;
  place-items:center;
  text-align:center;
}

.mrtb-ks-circle-slot.outer{
  width:138px;
  min-height:74px;
}

.mrtb-ks-circle-slot.inner{
  width:118px;
  min-height:62px;
}

.mrtb-ks-circle-slot::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#ecf3fb);
  border:3px solid rgba(34,50,70,.16);
  box-shadow:0 6px 12px rgba(35,72,92,.08), inset 0 -3px 0 rgba(0,0,0,.05);
  z-index:0;
}

.mrtb-ks-circle-slot.inner::before{
  border-radius:18px;
}

.mrtb-ks-circle-slot.natural::before{
  background:linear-gradient(180deg,#e5ffe9,#b8efc8);
  border-color:#6bce88;
  box-shadow:0 10px 18px rgba(68,178,94,.18), inset 0 -3px 0 rgba(0,0,0,.05);
}

.mrtb-ks-circle-slot.enharmonic::before{
  background:linear-gradient(180deg,#fff3c7,#ffe08c);
  border-color:#ecb84d;
}

.mrtb-ks-circle-slot.hidden::before{
  background:linear-gradient(180deg,#f8fbff,#edf3fa);
  border-style:dashed;
}

.mrtb-ks-circle-greek,
.mrtb-ks-circle-latin,
.mrtb-ks-circle-placeholder{
  position:relative;
  z-index:1;
}

.mrtb-ks-circle-greek{
  font-size:18px;
  line-height:1.05;
  font-weight:1000;
  color:#1f2d43;
}

.mrtb-ks-circle-slot.inner .mrtb-ks-circle-greek{
  font-size:16px;
}

.mrtb-ks-circle-latin{
  margin-top:4px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  color:#6a788e;
}

.mrtb-ks-circle-slot.inner .mrtb-ks-circle-latin{
  font-size:11px;
}

.mrtb-ks-circle-placeholder{
  font-size:24px;
  line-height:1;
  font-weight:1000;
  color:#b8c7d6;
}

.mrtb-ks-circle-arrow{
  position:absolute;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 10px rgba(35,72,92,.08);
  font-size:12px;
  line-height:1;
  font-weight:1000;
  color:#243246;
}

.mrtb-ks-circle-arrow.outer-right{ right:24px; top:60px; }
.mrtb-ks-circle-arrow.outer-left{ left:24px; top:60px; }
.mrtb-ks-circle-arrow.inner-right{ right:92px; top:182px; }
.mrtb-ks-circle-arrow.inner-left{ left:92px; top:182px; }

.mrtb-ks-circle-notes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

@media (max-width:1180px){
  .mrtb-ks-tabs{ grid-template-columns:1fr; }
  .mrtb-ks-circle-topbar,
  .mrtb-ks-circle-legend,
  .mrtb-ks-circle-notes{
    grid-template-columns:1fr;
    display:grid;
  }
  .mrtb-ks-circle-topbar{ display:block; }
  .mrtb-ks-circle-actions{ margin-top:10px; justify-content:flex-start; }
  .mrtb-ks-circle-wheel{ width:640px; height:640px; }
  .mrtb-ks-circle-ring.outer-ring{ width:560px; height:560px; box-shadow:inset 0 0 0 80px rgba(151,166,184,.12); }
  .mrtb-ks-circle-ring.inner-ring{ width:368px; height:368px; box-shadow:inset 0 0 0 58px rgba(255,255,255,.58); }
  .mrtb-ks-circle-core{ width:150px; height:150px; }
  .mrtb-ks-circle-slot.outer{ width:120px; min-height:64px; }
  .mrtb-ks-circle-slot.inner{ width:102px; min-height:54px; }
  .mrtb-ks-circle-greek{ font-size:16px; }
  .mrtb-ks-circle-slot.inner .mrtb-ks-circle-greek{ font-size:14px; }
}

@media (max-width:760px){
  .mrtb-ks-circle-board{ padding:10px; overflow:auto; }
  .mrtb-ks-circle-wheel{ width:540px; height:540px; }
  .mrtb-ks-circle-ring.outer-ring{ width:470px; height:470px; border-width:8px; box-shadow:inset 0 0 0 67px rgba(151,166,184,.12); }
  .mrtb-ks-circle-ring.inner-ring{ width:308px; height:308px; border-width:7px; box-shadow:inset 0 0 0 45px rgba(255,255,255,.58); }
  .mrtb-ks-circle-core{ width:122px; height:122px; border-width:8px; }
  .mrtb-ks-circle-core b{ font-size:26px; }
  .mrtb-ks-circle-core span{ font-size:10px; margin-top:-10px; }
  .mrtb-ks-circle-slot.outer{ width:104px; min-height:58px; }
  .mrtb-ks-circle-slot.inner{ width:88px; min-height:48px; }
  .mrtb-ks-circle-greek{ font-size:13px; }
  .mrtb-ks-circle-slot.inner .mrtb-ks-circle-greek{ font-size:12px; }
  .mrtb-ks-circle-latin{ font-size:9px; }
  .mrtb-ks-circle-arrow{ display:none; }
}


/* =========================================
   UPDATE v0.7.6 · Κύκλος πεμπτών βελτιωμένος
   ========================================= */

.mrtb-key-signatures-scene.circle-page{
  min-height:1080px !important;
}

.mrtb-ks-circle-copy strong{
  font-size:24px;
}

.mrtb-ks-circle-board{
  padding:18px 14px 20px;
  overflow:hidden;
}

.mrtb-ks-circle-wheel{
  width:820px;
  height:820px;
}

.mrtb-ks-circle-geometry,
.mrtb-ks-circle-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}

.mrtb-ks-circle-geometry.outer{
  width:690px;
  height:690px;
  background:
    repeating-conic-gradient(from -90deg, rgba(34,50,70,.075) 0 28.4deg, rgba(34,50,70,.18) 28.4deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 0 224px, #000 224px 338px, transparent 338px);
  mask:radial-gradient(circle, transparent 0 224px, #000 224px 338px, transparent 338px);
}

.mrtb-ks-circle-geometry.inner{
  width:470px;
  height:470px;
  background:
    repeating-conic-gradient(from -90deg, rgba(34,50,70,.065) 0 28.3deg, rgba(34,50,70,.17) 28.3deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 0 128px, #000 128px 228px, transparent 228px);
  mask:radial-gradient(circle, transparent 0 128px, #000 128px 228px, transparent 228px);
}

.mrtb-ks-circle-ring.outer-ring{
  width:690px;
  height:690px;
  border:12px solid #223246;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset;
  background:radial-gradient(circle, rgba(255,255,255,.3) 0 52%, transparent 52%);
}

.mrtb-ks-circle-ring.inner-ring{
  width:470px;
  height:470px;
  border:10px solid #223246;
  box-shadow:0 0 0 1px rgba(255,255,255,.52) inset;
  background:radial-gradient(circle, rgba(255,255,255,.3) 0 47%, transparent 47%);
}

.mrtb-ks-circle-core{
  width:170px;
  height:170px;
  border-width:10px;
}

.mrtb-ks-circle-core b{
  font-size:31px;
}

.mrtb-ks-circle-core span{
  margin-top:-14px;
}

.mrtb-ks-circle-slot{
  transition:transform .18s ease, opacity .18s ease, filter .18s ease;
}

.mrtb-ks-circle-slot:hover{
  filter:brightness(1.03);
}

.mrtb-ks-circle-slot.outer{
  width:100px;
  min-height:56px;
}

.mrtb-ks-circle-slot.inner{
  width:88px;
  min-height:48px;
}

.mrtb-ks-circle-slot.enharmonic.outer{
  width:112px;
}

.mrtb-ks-circle-slot.enharmonic.inner{
  width:100px;
}

.mrtb-ks-circle-slot::before{
  border-radius:16px;
  border-width:2px;
  box-shadow:0 4px 8px rgba(35,72,92,.06), inset 0 -2px 0 rgba(0,0,0,.045);
}

.mrtb-ks-circle-slot.inner::before{
  border-radius:14px;
}

.mrtb-ks-circle-slot.hidden{
  opacity:.52;
  transform:translate(calc(-50% + var(--slot-x)), calc(-50% + var(--slot-y))) scale(.92);
}

.mrtb-ks-circle-slot.hidden::before{
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(236,242,248,.4));
  border-style:dashed;
  border-color:rgba(88,107,131,.2);
  box-shadow:none;
}

.mrtb-ks-circle-slot.hidden.natural::before{
  background:linear-gradient(180deg,rgba(229,255,233,.58),rgba(184,239,200,.4));
  border-color:rgba(107,206,136,.4);
}

.mrtb-ks-circle-slot.revealed{
  opacity:1;
  transform:translate(calc(-50% + var(--slot-x)), calc(-50% + var(--slot-y))) scale(1);
}

.mrtb-ks-circle-greek{
  max-width:88%;
  font-size:15px;
  line-height:1.05;
  font-weight:1000;
  white-space:normal;
}

.mrtb-ks-circle-slot.inner .mrtb-ks-circle-greek{
  font-size:13px;
}

.mrtb-ks-circle-slot.enharmonic .mrtb-ks-circle-greek{
  font-size:11px;
  line-height:1.05;
}

.mrtb-ks-circle-latin{
  margin-top:3px;
  font-size:10px;
  line-height:1;
}

.mrtb-ks-circle-slot.inner .mrtb-ks-circle-latin{
  font-size:9px;
}

.mrtb-ks-circle-slot.enharmonic .mrtb-ks-circle-latin{
  font-size:8px;
}

.mrtb-ks-circle-placeholder{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.6px;
  color:#b9c6d4;
}

.mrtb-ks-circle-slot.hidden.sharp-side .mrtb-ks-circle-placeholder{
  color:#8eb1dd;
}

.mrtb-ks-circle-slot.hidden.flat-side .mrtb-ks-circle-placeholder{
  color:#d5aac0;
}

.mrtb-ks-circle-arrow{
  font-size:11px;
  padding:5px 8px;
}

.mrtb-ks-circle-arrow.outer-right{ right:26px; top:82px; }
.mrtb-ks-circle-arrow.outer-left{ left:26px; top:82px; }
.mrtb-ks-circle-arrow.inner-right{ right:128px; top:212px; }
.mrtb-ks-circle-arrow.inner-left{ left:128px; top:212px; }

@media (max-width:1180px){
  .mrtb-ks-circle-wheel{ width:700px; height:700px; }
  .mrtb-ks-circle-geometry.outer,
  .mrtb-ks-circle-ring.outer-ring{ width:590px; height:590px; }
  .mrtb-ks-circle-geometry.outer{ -webkit-mask:radial-gradient(circle, transparent 0 190px, #000 190px 289px, transparent 289px); mask:radial-gradient(circle, transparent 0 190px, #000 190px 289px, transparent 289px); }
  .mrtb-ks-circle-geometry.inner,
  .mrtb-ks-circle-ring.inner-ring{ width:404px; height:404px; }
  .mrtb-ks-circle-geometry.inner{ -webkit-mask:radial-gradient(circle, transparent 0 112px, #000 112px 194px, transparent 194px); mask:radial-gradient(circle, transparent 0 112px, #000 112px 194px, transparent 194px); }
  .mrtb-ks-circle-slot.outer{ width:92px; min-height:50px; }
  .mrtb-ks-circle-slot.inner{ width:80px; min-height:44px; }
  .mrtb-ks-circle-slot.enharmonic.outer{ width:100px; }
  .mrtb-ks-circle-slot.enharmonic.inner{ width:92px; }
}

@media (max-width:760px){
  .mrtb-ks-circle-board{ overflow:auto; }
  .mrtb-ks-circle-wheel{ width:620px; height:620px; }
  .mrtb-ks-circle-geometry.outer,
  .mrtb-ks-circle-ring.outer-ring{ width:520px; height:520px; }
  .mrtb-ks-circle-geometry.outer{ -webkit-mask:radial-gradient(circle, transparent 0 166px, #000 166px 255px, transparent 255px); mask:radial-gradient(circle, transparent 0 166px, #000 166px 255px, transparent 255px); }
  .mrtb-ks-circle-geometry.inner,
  .mrtb-ks-circle-ring.inner-ring{ width:350px; height:350px; }
  .mrtb-ks-circle-geometry.inner{ -webkit-mask:radial-gradient(circle, transparent 0 95px, #000 95px 168px, transparent 168px); mask:radial-gradient(circle, transparent 0 95px, #000 95px 168px, transparent 168px); }
  .mrtb-ks-circle-core{ width:138px; height:138px; }
  .mrtb-ks-circle-slot.outer{ width:84px; min-height:46px; }
  .mrtb-ks-circle-slot.inner{ width:72px; min-height:40px; }
  .mrtb-ks-circle-slot.enharmonic.outer{ width:92px; }
  .mrtb-ks-circle-slot.enharmonic.inner{ width:84px; }
  .mrtb-ks-circle-greek{ font-size:13px; }
  .mrtb-ks-circle-slot.inner .mrtb-ks-circle-greek{ font-size:11px; }
  .mrtb-ks-circle-slot.enharmonic .mrtb-ks-circle-greek{ font-size:9px; }
}


/* =========================================
   UPDATE v0.7.7 · Draw πάνω από τον κύκλο
   ========================================= */

/* Όταν είναι ενεργό Draw ή Erase, ο κύκλος δεν δέχεται click.
   Το canvas του πίνακα υπερισχύει και μπορείς να ζωγραφίζεις κανονικά. */
.mrtb-app.mrtb-draw-on .mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-board,
.mrtb-app.mrtb-draw-on .mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-slot{
  pointer-events:none !important;
}

/* Αφού αφαιρέθηκε το section επεξηγήσεων, ο κύκλος έρχεται πιο κοντά στην επάνω μπάρα. */
.mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-board{
  margin-top:12px !important;
}

/* =========================================================
   ΣΩΣΤΟ ΜΙΚΡΥΝΜΑ ΟΛΟΥ ΤΟΥ ΚΥΚΛΟΥ
   Βάλ' το ΣΤΟ ΠΟΛΥ ΤΕΛΟΣ του assets/css/klimakes.css
   ========================================================= */

/* Ρύθμισε μόνο αυτό:
   .70 = λίγο μικρότερος
   .65 = αρκετά μικρότερος
   .60 = πολύ μικρότερος
*/
.mrtb-key-signatures-scene.circle-page{
  --mrtb-circle-scale:.90;
  min-height:760px !important;
}

.mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-board{
  padding:8px 10px 12px !important;
  overflow:hidden !important;
}

/* Το zoom μικραίνει μαζί:
   κύκλο, γεωμετρίες, slots, γράμματα και κέντρο */
.mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-wheel{
  zoom:var(--mrtb-circle-scale) !important;
  margin:0 auto !important;
}

/* Fallback μόνο για browser που δεν υποστηρίζει zoom */
@supports not (zoom:1){
  .mrtb-key-signatures-scene.circle-page .mrtb-ks-circle-wheel{
    transform:scale(var(--mrtb-circle-scale)) !important;
    transform-origin:top center !important;
    margin-bottom:-328px !important;
  }
}

/* =========================================================
   TEMPLATE 6 · MOBILE SCROLL + PINCH ZOOM
   ========================================================= */
@media (max-width:900px){

  .mrtb-app[data-scene="scales-armatures"],
  .mrtb-app[data-scene="scales-armatures"] .mrtb-board,
  .mrtb-app[data-scene="scales-armatures"] .mrtb-key-signatures-scene,
  .mrtb-app[data-scene="scales-armatures"] .mrtb-key-signatures-scene *{
    touch-action:pan-x pan-y pinch-zoom !important;
  }

  .mrtb-app[data-scene="scales-armatures"] .mrtb-board{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:auto !important;
  }

  /* Το παλιό overflow:hidden του κύκλου ακύρωνε το οριζόντιο scroll. */
  .mrtb-app[data-scene="scales-armatures"]
  .mrtb-key-signatures-scene.circle-page
  .mrtb-ks-circle-board{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:auto !important;
    touch-action:pan-x pan-y pinch-zoom !important;
  }

  /* Όταν το Draw είναι κλειστό, το canvas δεν πιάνει τις χειρονομίες. */
  .mrtb-app[data-scene="scales-armatures"]:not(.mrtb-draw-on)
  .mrtb-draw-canvas{
    pointer-events:none !important;
    touch-action:pan-x pan-y pinch-zoom !important;
  }

  /* Μόνο όταν πατηθεί Draw/Erase, το δάχτυλο ζωγραφίζει. */
  .mrtb-app.mrtb-draw-on[data-scene="scales-armatures"]
  .mrtb-draw-canvas{
    pointer-events:auto !important;
    touch-action:none !important;
  }
}