/* mTOR lesson. All rules scoped under .mtr-* */
.mto-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mto-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.mto-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* ---------- the two drops ---------- */
.mto-drops { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.mto-drop { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.mto-drop svg { width: 48px; height: 48px; }
.mto-drop b { display: block; font: 700 16px var(--sans); color: var(--text); }
.mto-drop span { font: 500 14px var(--sans); color: var(--dim); }
.mto-drop.ins svg path, .mto-src.ins svg path, .mto-ghost.ins path { fill: var(--gold); stroke: #FFE1A0; stroke-width: 1.2; }
.mto-drop.aa svg circle, .mto-src.aa svg circle, .mto-ghost.aa circle { fill: var(--mint); stroke: #B8F5DA; stroke-width: 1.2; }

/* ---------- cells ---------- */
.mto-cell { display: block; width: 100%; height: auto; overflow: visible; }
.mto-cell.big { width: 220px; max-width: 70%; }
.mto-mem { fill: rgba(123,92,253,.08); stroke: rgba(169,155,255,.55); stroke-width: 2; transition: r .6s ease-out, fill .5s; }
.mto-cell.on .mto-mem { fill: rgba(252,192,80,.08); stroke: rgba(252,192,80,.7); }
.mto-cell.half .mto-mem { fill: rgba(252,192,80,.04); stroke: rgba(252,192,80,.45); }
.mto-lamp rect { fill: #2A2440; stroke: var(--line-strong); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.mto-cell.half .mto-lamp rect { fill: rgba(252,192,80,.45); stroke: var(--gold); }
.mto-cell.on .mto-lamp rect { fill: var(--gold); stroke: #FFE1A0; }
.mto-cell.stuck .mto-ins { fill: #FF8A6A; stroke: #FFC2B0; }
.mto-lamp text { font: 700 8.5px var(--sans); text-anchor: middle; fill: var(--dim); }
.mto-cell.on .mto-lamp text, .mto-cell.half .mto-lamp text { fill: #2A1C00; }
.mto-ins { fill: var(--gold); stroke: #FFE1A0; stroke-width: .8; }
.mto-aa { fill: var(--mint); }
.mto-bead.b0 { fill: #F7A8D8; } .mto-bead.b1 { fill: #A99BFF; } .mto-bead.b2 { fill: #FFD58A; }
.mto-bub circle { fill: none; stroke: var(--mint); stroke-width: 1.2; }
.mto-bub circle:first-child { fill: rgba(63,214,154,.12); }
.mto-bub path { fill: none; stroke: #C2A77E; stroke-width: 1.6; }
.mto-bub { animation: mtrBub .6s ease-out both; }
@keyframes mtrBub { from { opacity: 0; } }

/* ---------- the dish ---------- */
.mto-wells { width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mto-well { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 4px 4px 6px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border-color .2s, background .2s; }
.mto-well.hover { border-color: var(--gold); background: rgba(252,192,80,.08); }
.mto-well.shake { animation: mtrShake .3s; }
@keyframes mtrShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mto-wn { font: 700 12px var(--sans); color: var(--dim); }
.mto-rd { font: 700 12.5px var(--sans); color: var(--faint); text-align: center; }
.mto-rd.l1 { color: #E8B85E; } .mto-rd.l2 { color: var(--gold); }
.mto-tray { display: flex; gap: 12px; justify-content: center; width: 100%; margin-top: 8px; }
.mto-src { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; border-radius: 26px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 15px var(--sans); cursor: grab; touch-action: none; }
.mto-src svg { width: 26px; height: 26px; }
.mto-src.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252,192,80,.25); }
.mto-src:disabled { opacity: .45; }
.mto-ghost { position: fixed; z-index: 50; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.mto-ghost svg { width: 100%; height: 100%; }

/* ---------- yeast ---------- */
.mto-yeast { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mto-yc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); text-align: center; }
.mto-yc img { width: 100px; height: auto; }
.mto-yc b { font: 700 14px var(--sans); color: var(--text); }
.mto-yc span { font: 500 12.5px var(--sans); color: var(--dim); }
.mto-yc:last-child img { filter: hue-rotate(40deg) saturate(1.2); }

@media (max-height: 700px) {
  .mto-hero img { max-height: 26vh; }
  .mto-drop { padding: 8px; }
  .mto-cell.big { width: 180px; }
  .mto-yc img { width: 76px; }
}