/* Mast cell lesson. All rules scoped under .mcl-* */
.mcl-sc { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* the arm */
.mcl-arm { position: relative; width: 100%; max-width: 340px; aspect-ratio: 640 / 230; }
.mcl-limb { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }
.mcl-arm.test { margin-bottom: 34px; }
.mcl-mos { position: absolute; left: 41.5%; top: 12.6%; width: 26%; height: auto; cursor: pointer; animation: mclFly 1s cubic-bezier(.2,.7,.3,1) both; transition: transform .6s cubic-bezier(.5,0,.8,.4), opacity .6s; }
@keyframes mclFly { from { translate: 140px -90px; rotate: -12deg; opacity: 0; } 40% { opacity: 1; } }
.mcl-mos.gone { transform: translate(170px, -150px) rotate(-20deg); opacity: 0; pointer-events: none; }
.mcl-bump { position: absolute; top: 58%; width: 14%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFF1EA 0 26%, #F7C2B6 36%, rgba(232,86,86,.6) 52%, rgba(232,86,86,0) 70%); scale: 0; transition: scale 1.4s cubic-bezier(.2,.8,.2,1); }
.mcl-bump.up { scale: 1; }
.mcl-bump.now { transition: none; }
.test .mcl-bump { top: 60%; }

/* drops on the arm */
.mcl-arm .choices.mcl-drops { position: absolute; inset: 0; display: block; }
.mcl-drops .choice { position: absolute; top: calc(60% - 20px); translate: -50% 0; width: 66px; min-height: 0; padding: 8px 2px 6px; flex-direction: column; align-items: center; gap: 26px; background: transparent; border-color: transparent; box-shadow: none; }
.mcl-drops .choice:nth-child(1) { left: 14%; }
.mcl-drops .choice:nth-child(2) { left: 38%; }
.mcl-drops .choice:nth-child(3) { left: 62%; }
.mcl-drops .choice.right { border-color: var(--mint); background: rgba(63,214,154,.1); }
.mcl-drops .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.1); }
.mcl-drops .choice > span, .mcl-mk b { font: 800 13px var(--sans); color: var(--text); white-space: nowrap; }
.mcl-dot, .mcl-mk i { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2.5px solid var(--violet); }
.mcl-mk { position: absolute; top: calc(60% - 12px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 34px; }

/* the photo */
.mcl-ph { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.mcl-pw { position: relative; width: 100%; max-width: 320px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.mcl-pw img { display: block; width: 100%; height: auto; }
.mcl-ring { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border: 3px solid var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(252,192,80,.6); animation: mclRing .6s cubic-bezier(.2,.8,.2,1.3) .5s both; }
@keyframes mclRing { from { scale: 1.6; opacity: 0; } }
.mcl-ph figcaption { font: 600 12.5px var(--sans); color: var(--dim); }

/* the cell */
.mcl-big { display: block; width: 100%; max-width: 290px; height: auto; overflow: visible; }
.mcl-many { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.mcl-body { fill: #7448DA; stroke: #B49BFF; stroke-width: 3; transition: fill-opacity .6s, stroke-dasharray .6s; }
.mcl-gr { fill: #3A1A94; stroke: #9B7BFF; stroke-width: .8; transition: transform 1.1s cubic-bezier(.1,.7,.3,1) var(--d), fill .8s var(--d); }
.mcl-y path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .6s; }
.mcl-many .mcl-y path { stroke-width: 2.2; }
.grab .mcl-y.fit path { stroke: #FFF6D0; filter: drop-shadow(0 0 5px rgba(252,192,80,1)); }
.burst .mcl-body { fill-opacity: .2; stroke-dasharray: 18 12; }
.burst .mcl-gr { transform: translate(var(--tx), var(--ty)); fill: #8E6BFF; }
.burst .mcl-y path { opacity: .45; }
.mcl-sp { fill: #A6E9D0; stroke: #4FBF97; stroke-width: 1.5; }
.mcl-spit { cursor: pointer; transition: transform .7s cubic-bezier(.5,0,.6,1); }
.drop .mcl-spit { transform: translateY(46px); }
.mcl-hit { fill: transparent; }
.mcl-lb { font: 700 18px var(--sans); fill: rgba(255,255,255,.7); }
.drop .mcl-spl { opacity: 0; transition: opacity .3s; }
.mcl-hl { fill: #B49BFF; opacity: 0; transition: opacity .6s .6s; }
.burst .mcl-hl { opacity: 1; }

.mcl-mouse { padding: 14px 0; }
.mcl-mouse img { width: 180px; }

@media (max-height: 700px) {
  .mcl-big { max-width: 240px; }
  .mcl-many { max-width: 250px; }
  .mcl-pw { max-width: 270px; }
  .mcl-mouse img { width: 140px; }
}