/* MR Theory Board · Θεωρία 1 · Κεφάλαιο 2: Αξίες
   Περιέχει τη σκηνή εξισώσεων και το παιχνίδι Αξιών. */

/* ===== v0.4.0 - Template 2 Αξίες: κάθετη σκηνή χωρίς πιανάκι ===== */
.mrtb-app[data-scene="values"] .mrtb-mini-piano,
.mrtb-app[data-scene="values"] .mrtb-staff{
  display:none !important;
}

.mrtb-app[data-scene="values"] .mrtb-board-wrap{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.9) 0 36px, transparent 38px),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.74) 0 48px, transparent 50px),
    linear-gradient(180deg, rgba(130,220,255,.92), rgba(196,247,134,.9));
}

.mrtb-values-scene{
  position:absolute;
  left:22px;
  right:22px;
  top:18px;
  z-index:12;
  min-height:880px;
  padding:18px 18px 32px;
  border-radius:28px;
  background:rgba(255,255,255,.68);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 14px 30px rgba(35,72,92,.13), inset 0 0 0 3px rgba(255,255,255,.28);
}

.mrtb-values-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,211,.9));
  box-shadow:0 10px 18px rgba(35,72,92,.1), inset 0 -4px 0 rgba(0,0,0,.07);
}

.mrtb-values-hero strong{
  display:block;
  font-size:22px;
  font-weight:1000;
}

.mrtb-values-hero span{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:900;
  color:#526079;
}

.mrtb-values-picker{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.mrtb-values-picker button{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  font:inherit;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  color:#263044;
  background:rgba(255,255,255,.95);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1), 0 6px 12px rgba(35,72,92,.1);
}

.mrtb-values-picker button.active{
  background:linear-gradient(180deg,#ffe078,#ffb433);
}

.mrtb-values-ladder{
  display:grid;
  gap:22px;
  margin-top:18px;
}

.mrtb-value-relation{
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(150px,.55fr) minmax(260px,1fr) minmax(160px,.65fr);
  align-items:center;
  gap:16px;
  min-height:188px;
  padding:14px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,248,255,.84));
  box-shadow:0 10px 20px rgba(35,72,92,.11), inset 0 -4px 0 rgba(0,0,0,.05);
  animation:mrtb-values-in .28s ease both;
  animation-delay:calc(var(--i, 0) * .04s);
}

@keyframes mrtb-values-in{
  from{ transform:translateY(12px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.mrtb-value-scene-card{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  min-height:138px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#eef6ff);
  border:2px solid rgba(38,48,68,.08);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.09), 0 10px 16px rgba(35,72,92,.1);
}

.mrtb-value-scene-card.main{
  min-height:156px;
  background:linear-gradient(180deg,#fff9d9,#ffe58b);
}

.mrtb-value-scene-card.mini{
  min-height:132px;
}

.mrtb-value-scene-card b{
  margin-top:72px;
  font-size:17px;
  line-height:1;
  font-weight:1000;
}

.mrtb-value-scene-card small{
  font-size:12px;
  font-weight:950;
  color:#59677f;
}

.mrtb-values-scene .mrtb-value-icon{
  position:absolute !important;
  top:24px !important;
  left:50% !important;
  transform:translateX(-50%) scale(2.35) !important;
  transform-origin:center center !important;
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  pointer-events:none !important;
}

.mrtb-value-scene-card.main .mrtb-value-icon{
  transform:translateX(-50%) scale(2.85) !important;
  top:28px !important;
}

.mrtb-value-down-arrows{
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  gap:3px;
  color:#263044;
  font-weight:1000;
}

.mrtb-value-down-arrows span{
  display:block;
  font-size:42px;
  line-height:.75;
  color:#ff8c2b;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.9));
}

.mrtb-value-down-arrows strong{
  display:block;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:13px;
  white-space:nowrap;
}

.mrtb-value-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.mrtb-value-relation-caption{
  justify-self:stretch;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  border:2px dashed rgba(38,48,68,.15);
  font-size:15px;
  font-weight:1000;
  text-align:center;
}

@media (max-width:1100px){
  .mrtb-value-relation{
    grid-template-columns:1fr;
    gap:10px;
  }

  .mrtb-value-down-arrows{
    grid-template-columns:auto auto auto;
  }

  .mrtb-value-down-arrows span{
    font-size:34px;
  }

  .mrtb-value-relation-caption{
    font-size:13px;
  }
}

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

  .mrtb-values-hero{
    display:grid;
    gap:10px;
    border-radius:18px;
  }

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

  .mrtb-values-picker{
    justify-content:flex-start;
  }

  .mrtb-values-picker button{
    padding:7px 9px;
    font-size:11px;
  }

  .mrtb-value-pair{
    gap:8px;
  }

  .mrtb-value-scene-card{
    min-height:120px;
    border-radius:18px;
  }

  .mrtb-value-scene-card.main{
    min-height:132px;
  }

  .mrtb-value-scene-card b{
    margin-top:65px;
    font-size:14px;
  }

  .mrtb-values-scene .mrtb-value-icon{
    transform:translateX(-50%) scale(2.05) !important;
  }

  .mrtb-value-scene-card.main .mrtb-value-icon{
    transform:translateX(-50%) scale(2.35) !important;
  }
}


/* ===== Template 2 · Αξίες ως εξίσωση δύο αξιών v0.4.1 ===== */
.mrtb-values-equation-scene{
  min-height:850px;
}

.mrtb-values-equation-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

.mrtb-value-equation-builder{
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(260px,1.05fr) minmax(220px,.9fr);
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}

.mrtb-value-picker-block,
.mrtb-value-question-box{
  border-radius:22px;
  padding:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 9px 18px rgba(35,72,92,.1), inset 0 -3px 0 rgba(0,0,0,.06);
}

.mrtb-value-picker-block b,
.mrtb-value-question-box span{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:1000;
  color:#526079;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mrtb-value-question-box{
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(180deg,#fff8d7,#ffe389);
}

.mrtb-value-question-box strong{
  display:block;
  font-size:22px;
  line-height:1.1;
  font-weight:1000;
  color:#243044;
}

.mrtb-value-question-box em{
  display:inline-block;
  margin-top:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  font-style:normal;
  font-size:13px;
  font-weight:950;
  color:#44526b;
}

.mrtb-value-equation-stage{
  position:relative;
  display:grid;
  gap:10px;
  margin-top:16px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(239,248,255,.72));
  border:2px dashed rgba(38,48,68,.14);
  overflow:hidden;
}

.mrtb-value-eq-tier{
  position:relative;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 18px rgba(35,72,92,.09), inset 0 -4px 0 rgba(0,0,0,.05);
  animation:mrtb-values-in .24s ease both;
  animation-delay:calc(var(--tier, 0) * .06s);
}

.mrtb-value-eq-tier.top{
  background:linear-gradient(180deg,#fff9d9,#ffe58b);
}

.mrtb-value-eq-tier.final{
  background:linear-gradient(180deg,#e9fff1,#c9ffda);
}

.mrtb-value-eq-tier.ghost{
  opacity:.38;
  filter:saturate(.55);
}

.mrtb-values-equation-scene.solved .mrtb-value-eq-tier.ghost{
  opacity:1;
  filter:none;
}

.mrtb-value-tier-title strong{
  display:block;
  font-size:13px;
  font-weight:1000;
  color:#526079;
}

.mrtb-value-tier-title span{
  display:block;
  margin-top:5px;
  font-size:19px;
  line-height:1.05;
  font-weight:1000;
  color:#243044;
}

.mrtb-value-tier-cards{
  display:grid;
  grid-template-columns:repeat(var(--cards,4), minmax(74px,1fr));
  gap:9px;
  align-items:center;
}

.mrtb-value-eq-card{
  position:relative;
  min-height:104px;
  border-radius:20px;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(180deg,#fff,#eef6ff);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.08), 0 7px 13px rgba(35,72,92,.09);
  border:2px solid rgba(38,48,68,.08);
}

.mrtb-value-eq-card.top{
  background:linear-gradient(180deg,#fff8d7,#ffe389);
}

.mrtb-value-eq-card.final{
  background:linear-gradient(180deg,#f3fff6,#c9ffda);
}

.mrtb-value-eq-card.ghost{
  background:rgba(255,255,255,.72);
}

.mrtb-value-eq-card b{
  margin-top:58px;
  font-size:14px;
  line-height:1;
  font-weight:1000;
}

.mrtb-value-eq-card small{
  font-size:11px;
  font-weight:950;
  color:#59677f;
}

.mrtb-value-eq-card .mrtb-value-icon{
  position:absolute !important;
  top:20px !important;
  left:50% !important;
  transform:translateX(-50%) scale(1.75) !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}

.mrtb-value-eq-more{
  min-height:104px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.76);
  font-size:22px;
  font-weight:1000;
  color:#44526b;
}

.mrtb-value-eq-arrows{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  min-height:54px;
  color:#ff8c2b;
  font-weight:1000;
  opacity:.35;
  transition:.18s ease;
}

.mrtb-value-eq-arrows.solved{
  opacity:1;
}

.mrtb-value-eq-arrows span{
  display:block;
  text-align:center;
  font-size:46px;
  line-height:.7;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.9));
}

.mrtb-value-eq-arrows strong{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:#243044;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
  font-size:13px;
  white-space:nowrap;
}

.mrtb-values-equation-scene.unsolved .mrtb-value-eq-arrows strong{
  color:#8791a4;
}

@media (max-width:1100px){
  .mrtb-value-equation-builder{
    grid-template-columns:1fr;
  }

  .mrtb-value-eq-tier{
    grid-template-columns:1fr;
  }

  .mrtb-value-tier-cards{
    grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
  }

  .mrtb-value-eq-arrows{
    grid-template-columns:auto auto auto;
    justify-content:center;
  }
}

@media (max-width:900px){
  .mrtb-value-question-box strong{
    font-size:18px;
  }

  .mrtb-value-equation-stage{
    padding:10px;
    border-radius:20px;
  }

  .mrtb-value-eq-card{
    min-height:94px;
  }

  .mrtb-value-eq-card .mrtb-value-icon{
    transform:translateX(-50%) scale(1.45) !important;
  }

  .mrtb-value-eq-arrows span{
    font-size:34px;
  }

  .mrtb-value-eq-arrows strong{
    font-size:11px;
    white-space:normal;
    text-align:center;
  }
}

/* ===== Template 2 · Αξίες compact step-by-step v0.4.2 ===== */
.mrtb-values-equation-scene.compact{
  min-height:640px !important;
  padding:14px !important;
  overflow:visible !important;
}

.mrtb-values-hero.compact{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:22px !important;
}

.mrtb-values-hero.compact strong{
  font-size:24px !important;
  line-height:1 !important;
}

.mrtb-values-hero.compact span{
  font-size:13px !important;
  line-height:1.15 !important;
}

.mrtb-value-equation-builder.compact{
  grid-template-columns:minmax(190px,.75fr) minmax(260px,1fr) minmax(190px,.75fr) !important;
  gap:9px !important;
  margin-top:10px !important;
}

.mrtb-value-picker-block,
.mrtb-value-question-box.compact{
  padding:9px !important;
  border-radius:18px !important;
}

.mrtb-values-picker.compact{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
}

.mrtb-values-picker.compact button{
  min-height:28px !important;
  padding:4px 8px !important;
  border-radius:10px !important;
  font-size:11px !important;
}

.mrtb-value-question-box.compact strong{
  font-size:19px !important;
  line-height:1.05 !important;
}

.mrtb-value-question-box.compact em{
  margin-top:6px !important;
  padding:5px 9px !important;
  font-size:12px !important;
}

.mrtb-value-equation-stage.compact{
  margin-top:10px !important;
  padding:12px !important;
  gap:8px !important;
  border-radius:22px !important;
  display:grid !important;
}

.mrtb-value-path-row{
  display:grid !important;
  grid-template-columns:repeat(var(--items,4), minmax(92px,1fr)) !important;
  gap:8px !important;
  align-items:start !important;
}

.mrtb-value-path-item{
  position:relative !important;
  display:grid !important;
  gap:5px !important;
  align-items:start !important;
}

.mrtb-value-path-card{
  position:relative !important;
  min-height:116px !important;
  border-radius:20px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  background:linear-gradient(180deg,#fff,#eef6ff) !important;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08), 0 7px 13px rgba(35,72,92,.09) !important;
  border:2px solid rgba(38,48,68,.08) !important;
  overflow:hidden !important;
}

.mrtb-value-path-item.start .mrtb-value-path-card{
  background:linear-gradient(180deg,#fff8d7,#ffe389) !important;
}

.mrtb-value-path-item.target .mrtb-value-path-card{
  background:linear-gradient(180deg,#e9fff1,#c9ffda) !important;
  outline:3px solid rgba(50,201,114,.25) !important;
}

.mrtb-value-path-card.ghost{
  opacity:.34 !important;
  filter:saturate(.45) !important;
}

.mrtb-value-path-card b{
  margin-top:56px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.mrtb-value-path-card small{
  font-size:11px !important;
  font-weight:950 !important;
  color:#59677f !important;
}

.mrtb-value-path-card .mrtb-value-icon{
  position:absolute !important;
  top:18px !important;
  left:50% !important;
  transform:translateX(-50%) scale(1.55) !important;
  transform-origin:center center !important;
}

.mrtb-value-path-target{
  justify-self:center !important;
  padding:3px 8px !important;
  border-radius:999px !important;
  background:rgba(50,201,114,.14) !important;
  color:#276b3d !important;
  font-size:10px !important;
  font-weight:1000 !important;
}

.mrtb-value-step-buttons{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  justify-content:center !important;
  margin-top:2px !important;
}

.mrtb-value-step-buttons button{
  min-height:38px !important;
  border:0 !important;
  border-radius:13px !important;
  padding:5px 10px !important;
  background:rgba(255,255,255,.9) !important;
  color:#263044 !important;
  font-weight:1000 !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09), 0 5px 10px rgba(47,72,94,.1) !important;
  cursor:pointer !important;
}

.mrtb-value-step-buttons button.active{
  background:linear-gradient(180deg,#ffe078,#ffb433) !important;
}

.mrtb-value-step-buttons button small{
  display:block !important;
  font-size:9px !important;
  line-height:1 !important;
  opacity:.78 !important;
}

.mrtb-value-steps-panel{
  display:grid !important;
  gap:8px !important;
  min-height:58px !important;
}

.mrtb-value-empty-solution{
  padding:14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.72) !important;
  text-align:center !important;
  font-size:13px !important;
  font-weight:850 !important;
  color:#526079 !important;
}

.mrtb-value-open-step{
  display:grid !important;
  grid-template-columns:minmax(120px,.75fr) minmax(160px,.7fr) minmax(120px,.75fr) !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 7px 14px rgba(35,72,92,.08) !important;
  animation:mrtb-values-in .22s ease both !important;
  animation-delay:calc(var(--step, 0) * .04s) !important;
}

.mrtb-value-open-card{
  position:relative !important;
  min-height:78px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#fff,#eef6ff) !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07) !important;
}

.mrtb-value-open-card.top{
  background:linear-gradient(180deg,#fff8d7,#ffe389) !important;
}

.mrtb-value-open-card.bottom{
  background:linear-gradient(180deg,#f3fff6,#c9ffda) !important;
}

.mrtb-value-open-card .mrtb-value-icon{
  position:absolute !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) scale(1.08) !important;
}

.mrtb-value-open-card b{
  margin-top:38px !important;
  font-size:13px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
}

.mrtb-value-open-arrows{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:6px !important;
  color:#ff8c2b !important;
  text-align:center !important;
  font-weight:1000 !important;
}

.mrtb-value-open-arrows span{
  font-size:36px !important;
  line-height:.7 !important;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) !important;
}

.mrtb-value-open-arrows strong{
  padding:7px 9px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.95) !important;
  color:#243044 !important;
  font-size:12px !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08) !important;
  white-space:nowrap !important;
}

@media (max-width:1100px){
  .mrtb-value-equation-builder.compact{
    grid-template-columns:1fr !important;
  }

  .mrtb-value-path-row{
    grid-template-columns:repeat(auto-fit,minmax(92px,1fr)) !important;
  }
}

@media (max-width:900px){
  .mrtb-values-equation-scene.compact{
    min-height:640px !important;
    padding:8px !important;
  }

  .mrtb-values-hero.compact{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .mrtb-values-hero.compact strong{
    font-size:20px !important;
  }

  .mrtb-values-hero.compact span{
    font-size:11px !important;
  }

  .mrtb-value-question-box.compact strong{
    font-size:16px !important;
  }

  .mrtb-value-equation-stage.compact{
    padding:8px !important;
  }

  .mrtb-value-path-row{
    gap:6px !important;
  }

  .mrtb-value-path-card{
    min-height:98px !important;
  }

  .mrtb-value-path-card .mrtb-value-icon{
    transform:translateX(-50%) scale(1.25) !important;
    top:16px !important;
  }

  .mrtb-value-path-card b{
    margin-top:48px !important;
    font-size:11px !important;
  }

  .mrtb-value-open-step{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .mrtb-value-open-arrows span{
    font-size:30px !important;
  }

  .mrtb-value-open-arrows strong{
    white-space:normal !important;
    font-size:11px !important;
  }
}


/* ===== v0.4.3 Template 2 · Αξίες vertical path + tree/pyramid λύση ===== */
.mrtb-values-equation-scene.compact{
  min-height:640px !important;
  padding:12px !important;
}

.mrtb-value-equation-builder.compact{
  grid-template-columns:minmax(180px,.7fr) minmax(280px,1fr) minmax(180px,.7fr) !important;
}

.mrtb-value-equation-stage.compact{
  display:grid !important;
  grid-template-columns:minmax(230px,.38fr) minmax(0,1fr) !important;
  grid-template-areas:
    "path buttons"
    "path solution" !important;
  align-items:start !important;
  gap:12px !important;
  padding:12px !important;
  overflow:visible !important;
}

/* Πριν τη λύση: μία κάθετη στήλη αξιών, όχι οριζόντια σειρά */
.mrtb-value-path-row{
  grid-area:path !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-width:220px !important;
  max-width:290px !important;
  margin:0 auto !important;
}

.mrtb-value-path-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
}

.mrtb-value-path-card{
  width:100% !important;
  min-height:86px !important;
  border-radius:18px !important;
}

.mrtb-value-path-card .mrtb-value-icon{
  top:12px !important;
  transform:translateX(-50%) scale(1.12) !important;
}

.mrtb-value-path-card b{
  margin-top:42px !important;
  font-size:13px !important;
}

.mrtb-value-path-card small{
  font-size:10px !important;
}

.mrtb-value-path-card.ghost{
  opacity:.28 !important;
  filter:saturate(.35) grayscale(.2) !important;
}

.mrtb-value-path-down{
  margin:1px 0 2px !important;
  font-size:22px !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  color:#ff8c2b !important;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.92)) !important;
}

.mrtb-value-path-target{
  margin-top:3px !important;
}

.mrtb-value-step-buttons.tree-buttons{
  grid-area:buttons !important;
  justify-content:center !important;
  align-self:start !important;
  margin:0 !important;
}

.mrtb-value-steps-panel{
  grid-area:solution !important;
  min-height:300px !important;
  align-self:stretch !important;
}

/* Δέντρο / πυραμίδα ανάλυσης */
.mrtb-value-tree-wrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  padding:8px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.7) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42) !important;
  animation:mrtb-values-in .22s ease both !important;
}

.mrtb-value-tree-level{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}

.mrtb-value-tree-level.root{
  max-width:270px !important;
}

.mrtb-value-tree-level.middle{
  max-width:720px !important;
}

.mrtb-value-tree-level.target{
  max-width:920px !important;
}

.mrtb-value-tree-node,
.mrtb-value-tree-more{
  position:relative !important;
  min-width:0 !important;
  flex:1 1 0 !important;
  max-width:150px !important;
  min-height:82px !important;
  border-radius:17px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:8px 6px 6px !important;
  background:linear-gradient(180deg,#fff,#eef6ff) !important;
  border:2px solid rgba(38,48,68,.08) !important;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08), 0 7px 13px rgba(35,72,92,.08) !important;
}

.mrtb-value-tree-node.root{
  background:linear-gradient(180deg,#fff8d7,#ffe389) !important;
}

.mrtb-value-tree-node.target{
  background:linear-gradient(180deg,#e9fff1,#c9ffda) !important;
  outline:2px solid rgba(50,201,114,.22) !important;
}

.mrtb-value-tree-node .mrtb-value-icon{
  position:absolute !important;
  top:11px !important;
  left:50% !important;
  transform:translateX(-50%) scale(1.05) !important;
}

.mrtb-value-tree-node b{
  margin-top:39px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}

.mrtb-value-tree-node small{
  font-size:9px !important;
  font-weight:950 !important;
  color:#59677f !important;
}

.mrtb-value-tree-more{
  flex:0 0 76px !important;
  max-width:76px !important;
  font-size:18px !important;
  font-weight:1000 !important;
  color:#44526b !important;
  background:rgba(255,255,255,.82) !important;
}

.mrtb-value-tree-more small{
  display:block !important;
  font-size:9px !important;
}

.mrtb-value-tree-split{
  position:relative !important;
  min-height:28px !important;
  display:grid !important;
  place-items:center !important;
  color:#ff8c2b !important;
  font-weight:1000 !important;
}

.mrtb-value-tree-split::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:2px !important;
  height:14px !important;
  transform:translateX(-50%) !important;
  background:#ff8c2b !important;
  border-radius:4px !important;
}

.mrtb-value-tree-split span{
  position:absolute !important;
  left:50% !important;
  top:12px !important;
  width:min(66%,560px) !important;
  height:16px !important;
  transform:translateX(-50%) !important;
  border-left:3px solid #ff8c2b !important;
  border-right:3px solid #ff8c2b !important;
  border-top:3px solid #ff8c2b !important;
  border-radius:18px 18px 0 0 !important;
  opacity:.85 !important;
}

.mrtb-value-tree-split b{
  position:relative !important;
  z-index:2 !important;
  margin-top:0 !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  color:#243044 !important;
  font-size:11px !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08) !important;
}

.mrtb-value-tree-summary{
  width:min(720px,100%) !important;
  margin-top:3px !important;
  padding:9px 12px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff,#eef6ff) !important;
  border:2px dashed rgba(38,48,68,.13) !important;
  text-align:center !important;
  font-size:14px !important;
  font-weight:900 !important;
  color:#243044 !important;
}

.mrtb-value-tree-summary strong{
  display:inline-block !important;
  margin-left:8px !important;
  padding:4px 9px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#dbffbd,#62df7b) !important;
}

.mrtb-value-tree-summary.solved{
  border-style:solid !important;
  border-color:rgba(50,201,114,.35) !important;
}

@media (max-width:1100px){
  .mrtb-value-equation-stage.compact{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "path"
      "buttons"
      "solution" !important;
  }

  .mrtb-value-path-row{
    max-width:360px !important;
  }

  .mrtb-value-tree-level{
    gap:5px !important;
  }

  .mrtb-value-tree-node{
    max-width:120px !important;
    min-height:76px !important;
  }
}

@media (max-width:900px){
  .mrtb-value-equation-builder.compact{
    grid-template-columns:1fr !important;
  }

  .mrtb-values-equation-scene.compact{
    padding:7px !important;
  }

  .mrtb-value-path-row{
    max-width:280px !important;
  }

  .mrtb-value-path-card{
    min-height:74px !important;
  }

  .mrtb-value-path-card .mrtb-value-icon{
    top:9px !important;
    transform:translateX(-50%) scale(.92) !important;
  }

  .mrtb-value-path-card b{
    margin-top:34px !important;
    font-size:11px !important;
  }

  .mrtb-value-tree-wrap{
    padding:5px !important;
    gap:5px !important;
  }

  .mrtb-value-tree-level{
    gap:3px !important;
  }

  .mrtb-value-tree-node{
    min-height:66px !important;
    border-radius:13px !important;
    padding:5px 3px !important;
  }

  .mrtb-value-tree-node .mrtb-value-icon{
    top:8px !important;
    transform:translateX(-50%) scale(.8) !important;
  }

  .mrtb-value-tree-node b{
    margin-top:29px !important;
    font-size:9.5px !important;
  }

  .mrtb-value-tree-node small{
    font-size:8px !important;
  }

  .mrtb-value-tree-more{
    flex-basis:46px !important;
    max-width:46px !important;
    min-height:62px !important;
    font-size:14px !important;
  }

  .mrtb-value-tree-split b{
    font-size:9px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .mrtb-value-tree-summary{
    font-size:11px !important;
    padding:7px !important;
  }
}


/* =========================================================
   v0.4.4 - Game Template 2 · Αξίες δύο ομάδες
   ========================================================= */

.mrtb-app.mrtb-values-game-mode .mrtb-board-wrap{
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.95) 0 24px, transparent 26px),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.9) 0 32px, transparent 34px),
    linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px) 0 0/42px 42px,
    linear-gradient(0deg,rgba(255,255,255,.3) 1px,transparent 1px) 0 0/42px 42px,
    linear-gradient(180deg,#88e1ff 0%,#c5f7ff 46%,#9cff88 47%,#4ed766 100%) !important;
}

.mrtb-value-game-stage{
  position:absolute;
  left:22px;
  right:22px;
  top:18px;
  min-height:350px;
  z-index:35;
  padding:14px;
  border-radius:28px;
  background:rgba(255,255,255,.72);
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 14px 28px rgba(35,72,92,.16), inset 0 0 0 4px rgba(255,255,255,.36);
  overflow:hidden;
}

.mrtb-value-game-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.06);
  font-weight:1000;
}

.mrtb-value-game-title strong{
  font-size:22px;
}

.mrtb-value-game-title span{
  font-size:13px;
  color:#526079;
}

.mrtb-value-game-menu-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}

.mrtb-value-game-menu-cards button{
  min-height:180px;
  border:0;
  border-radius:26px;
  padding:18px;
  background:linear-gradient(180deg,#fff,#eaf7ff);
  color:#263044;
  font:inherit;
  font-weight:1000;
  cursor:pointer;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.1), 0 12px 24px rgba(35,72,92,.14);
}

.mrtb-value-game-menu-cards button:hover{
  transform:translateY(-2px);
}

.mrtb-value-game-menu-cards button b{
  display:block;
  font-size:34px;
  margin-bottom:6px;
}

.mrtb-value-game-menu-cards button span{
  display:block;
  font-size:18px;
}

.mrtb-value-game-menu-cards button small{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#59677f;
}

.mrtb-value-game-split{
  position:absolute;
  left:50%;
  top:78px;
  bottom:18px;
  width:0;
  border-left:6px dashed rgba(38,48,68,.25);
  z-index:1;
  pointer-events:none;
}

.mrtb-value-game-panels{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:12px;
}

.mrtb-value-game-panel{
  min-height:255px;
  border-radius:26px;
  padding:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,247,255,.9));
  border:3px solid rgba(255,255,255,.86);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.07), 0 10px 20px rgba(35,72,92,.1);
  transition:.18s ease;
}

.mrtb-value-game-panel.team-a{
  border-color:rgba(70,151,255,.32);
}

.mrtb-value-game-panel.team-b{
  border-color:rgba(255,107,154,.32);
}

.mrtb-value-game-panel.correct{
  background:linear-gradient(180deg,#f1fff5,#caffdc);
  outline:5px solid rgba(50,201,114,.35);
}

.mrtb-value-game-panel.wrong{
  background:linear-gradient(180deg,#fff2f2,#ffd0d0);
  outline:5px solid rgba(255,88,88,.28);
}

.mrtb-value-game-team-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe078,#ffb433);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1);
  font-size:14px;
  font-weight:1000;
}

.mrtb-value-game-equation{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.mrtb-value-game-token{
  position:relative;
  min-height:168px;
  padding:14px 8px 10px;
  border-radius:24px;
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.08);
  overflow:hidden;
}

.mrtb-value-game-token.from{
  background:linear-gradient(180deg,#fff8d7,#ffe389);
}

.mrtb-value-game-token.to{
  background:linear-gradient(180deg,#e9fff1,#c9ffda);
}

.mrtb-value-game-token b{
  display:block;
  margin-top:72px;
  font-size:18px;
  line-height:1;
  font-weight:1000;
}

.mrtb-value-game-token small{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:950;
  color:#59677f;
}

.mrtb-value-game-icon{
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:58px;
  height:58px;
}

.mrtb-value-game-icon .mrtb-value-icon{
  position:absolute !important;
  left:50% !important;
  top:10px !important;
  transform:translateX(-50%) scale(1.65) !important;
}

.mrtb-value-game-dots{
  position:absolute;
  left:50px;
  top:34px;
  display:flex;
  gap:5px;
}

.mrtb-value-game-dots i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1f2535;
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}

.mrtb-value-game-question-mark{
  min-width:70px;
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#eaf1fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.09);
  text-align:center;
  font-size:15px;
  font-weight:1000;
}

.mrtb-value-game-mini-explain{
  margin-top:12px;
  padding:9px 11px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  font-size:14px;
  font-weight:950;
  text-align:center;
  color:#44526b;
}

.mrtb-values-game-hud{
  top:392px !important;
}

.mrtb-values-game-hud .mrtb-game-choices{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.mrtb-values-game-hud .mrtb-game-choice{
  min-height:42px;
  font-size:18px;
}

@media (max-width:1100px){
  .mrtb-value-game-stage{
    left:10px;
    right:10px;
    padding:10px;
  }

  .mrtb-value-game-equation{
    gap:6px;
  }

  .mrtb-value-game-token{
    min-height:145px;
  }

  .mrtb-value-game-token b{
    font-size:14px;
  }

  .mrtb-value-game-question-mark{
    min-width:54px;
    padding:8px;
    font-size:12px;
  }
}

@media (max-width:900px){
  .mrtb-value-game-stage{
    top:10px;
    min-height:420px;
  }

  .mrtb-value-game-title{
    display:grid;
    gap:3px;
  }

  .mrtb-value-game-menu-cards{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:10px;
  }

  .mrtb-value-game-menu-cards button{
    min-height:82px;
    padding:10px;
  }

  .mrtb-value-game-menu-cards button b{
    font-size:22px;
  }

  .mrtb-value-game-panels{
    grid-template-columns:1fr;
    gap:8px;
  }

  .mrtb-value-game-split{
    display:none;
  }

  .mrtb-value-game-panel{
    min-height:168px;
    padding:8px;
  }

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

  .mrtb-value-game-token{
    min-height:105px;
    border-radius:18px;
  }

  .mrtb-value-game-token b{
    margin-top:48px;
    font-size:12px;
  }

  .mrtb-value-game-token small{
    font-size:10px;
  }

  .mrtb-value-game-icon .mrtb-value-icon{
    top:0 !important;
    transform:translateX(-50%) scale(.95) !important;
  }

  .mrtb-value-game-dots{
    left:39px;
    top:20px;
  }

  .mrtb-value-game-mini-explain{
    font-size:11px;
    padding:6px;
  }

  .mrtb-values-game-hud{
    top:442px !important;
  }
}

/* ===== dotted / double-dotted explanation for Template 2 v0.4.5 ===== */
.mrtb-value-dot-mode{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px auto 10px;
  padding:7px 10px;
  width:min(760px, calc(100% - 28px));
  border-radius:20px;
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 8px 16px rgba(35,72,92,.08);
}

.mrtb-value-dot-mode button{
  border:0;
  min-height:34px;
  border-radius:999px;
  padding:7px 13px;
  background:linear-gradient(180deg,#fff,#eaf1fb);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1), 0 5px 10px rgba(35,72,92,.1);
  color:#263044;
  font:inherit;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
}

.mrtb-value-dot-mode button.active{
  background:linear-gradient(180deg,#fff1a7,#ffb433);
}

.mrtb-value-path-card .mrtb-value-game-icon,
.mrtb-value-tree-node .mrtb-value-game-icon,
.mrtb-value-dot-root .mrtb-value-game-icon{
  position:relative !important;
  display:block !important;
  width:70px !important;
  height:64px !important;
  margin:0 auto 3px !important;
}

.mrtb-value-path-card .mrtb-value-game-icon .mrtb-value-icon,
.mrtb-value-tree-node .mrtb-value-game-icon .mrtb-value-icon,
.mrtb-value-dot-root .mrtb-value-game-icon .mrtb-value-icon{
  position:absolute !important;
  left:50% !important;
  top:8px !important;
  transform:translateX(-50%) scale(1.48) !important;
}

.mrtb-value-path-card .mrtb-value-game-dots,
.mrtb-value-tree-node .mrtb-value-game-dots,
.mrtb-value-dot-root .mrtb-value-game-dots{
  left:52px !important;
  top:37px !important;
}

.mrtb-value-dot-breakdown{
  width:min(980px, 100%);
  margin:10px auto 0;
  padding:14px 14px 16px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(232,255,244,.72));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65), 0 9px 20px rgba(35,72,92,.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.mrtb-value-dot-root{
  min-width:280px;
  max-width:420px;
  min-height:94px;
  margin:0 auto;
  padding:10px 18px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff7c6,#f6d66e);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.1), 0 8px 14px rgba(35,72,92,.1);
  text-align:center;
  font-weight:1000;
}

.mrtb-value-dot-root b{
  display:block;
  font-size:15px;
  line-height:1.05;
}

.mrtb-value-dot-arrows{
  width:min(900px, 100%);
  display:grid;
  align-items:center;
  justify-items:center;
  gap:12px;
  font-size:34px;
  line-height:1;
  color:#ff8526;
  font-weight:1000;
}

.mrtb-value-dot-arrows.layout-two{
  grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);
}

.mrtb-value-dot-arrows.layout-three{
  grid-template-columns:minmax(260px,1fr) minmax(180px,.9fr) minmax(260px,1fr);
}

.mrtb-value-dot-arrows span{
  display:block;
  width:100%;
  text-align:center;
}

.mrtb-value-dot-main{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(460px,1.45fr);
  gap:18px;
  align-items:stretch;
}

.mrtb-value-dot-side{
  display:grid;
  gap:12px;
  align-items:stretch;
}

.mrtb-value-dot-side.dots-1{
  grid-template-columns:minmax(240px,1fr);
}

.mrtb-value-dot-side.dots-2{
  grid-template-columns:repeat(2,minmax(200px,1fr));
}

.mrtb-value-dot-box{
  min-width:0;
  width:100%;
  padding:13px 14px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#eaf1fb);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08), 0 7px 13px rgba(35,72,92,.09);
  text-align:center;
  font-weight:1000;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mrtb-value-dot-box.dot1{
  background:linear-gradient(180deg,#fff2cc,#ffd27e);
}

.mrtb-value-dot-box.dot2{
  background:linear-gradient(180deg,#fff7dc,#ffe39d);
}

.mrtb-value-dot-box b,
.mrtb-value-dot-box span,
.mrtb-value-dot-box small{
  display:block;
}

.mrtb-value-dot-box span{
  margin-top:4px;
  font-size:22px;
  line-height:1.05;
}

.mrtb-value-dot-box small{
  margin-top:5px;
  font-size:11px;
  color:#58667d;
}

.mrtb-value-dot-total{
  min-width:min(520px,100%);
  padding:12px 20px;
  border-radius:22px;
  background:linear-gradient(180deg,#d9ffc8,#72df84);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1), 0 7px 14px rgba(35,72,92,.1);
  font-size:18px;
  font-weight:1000;
  color:#143820;
  text-align:center;
}

.mrtb-value-dot-total-label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  opacity:.85;
  margin-bottom:2px;
}

.mrtb-value-dot-total b,
.mrtb-value-dot-total small{
  display:block;
}

.mrtb-value-dot-total b{
  font-size:28px;
  line-height:1.05;
}

.mrtb-value-dot-total small{
  margin-top:3px;
  font-size:14px;
  opacity:.92;
}

@media (max-width:900px){
  .mrtb-value-dot-mode{
    gap:5px;
    padding:5px;
    margin:6px auto 7px;
  }

  .mrtb-value-dot-mode button{
    min-height:30px;
    padding:5px 8px;
    font-size:11px;
  }

  .mrtb-value-dot-breakdown{
    padding:8px;
    border-radius:18px;
    gap:8px;
  }

  .mrtb-value-dot-root{
    min-width:170px;
    max-width:100%;
    min-height:82px;
    padding:8px;
  }

  .mrtb-value-dot-arrows{
    font-size:24px;
    gap:6px;
  }

  .mrtb-value-dot-main,
  .mrtb-value-dot-side.dots-1,
  .mrtb-value-dot-side.dots-2,
  .mrtb-value-dot-arrows.layout-two,
  .mrtb-value-dot-arrows.layout-three{
    grid-template-columns:1fr;
  }

  .mrtb-value-dot-box{
    padding:9px;
  }

  .mrtb-value-dot-box span{
    font-size:16px;
  }

  .mrtb-value-dot-total{
    min-width:0;
    width:100%;
    font-size:15px;
  }

  .mrtb-value-dot-total b{
    font-size:22px;
  }

  .mrtb-value-dot-total small{
    font-size:12px;
  }
}