/* Memory B cell lesson. All rules scoped under .mbc-* */
.mbc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mbc-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the grip */
.mbc-grip { display: block; width: 100%; height: auto; overflow: visible; }
.mbc-cb, .mbc-tooth { fill: var(--violet); }
.mbc-cb { fill: var(--violet-deep); }
.mbc-vb, .mbc-bump { fill: #FF9F43; }
.mbc-vb { fill: #D97A22; }
.mbc-gap { fill: var(--gold); stroke: #FFE7A8; stroke-width: 1.4; opacity: 0; transition: opacity .25s; }
.mbc-gaps.on .mbc-gap, .mbc-kid .mbc-gap, .mbc-parent .mbc-gap { opacity: 1; }
.mbc-hero { display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 330px; }
.mbc-hero .mbc-grip { flex: 1; min-width: 0; }
.mbc-lab { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 10px; font: 700 12.5px var(--sans); color: var(--dim); text-align: right; width: 64px; }
.mbc-lc { color: var(--violet-bright); }
.mbc-lv { color: #FF9F43; }

/* breeding */
.mbc-round { font: 700 12.5px var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.mbc-plab { font: 600 12.5px var(--sans); color: var(--dim); margin-bottom: -4px; }
.mbc-parent { width: 132px; }
.mbc-fresh { animation: mbcIn .4s cubic-bezier(.2,.8,.2,1.3) both; }
@keyframes mbcIn { from { scale: .8; opacity: .3; } }
.mbc-perfect { filter: drop-shadow(0 0 10px rgba(63,214,154,.7)); }
.mbc-arrow svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mbc-kids { display: flex; justify-content: center; gap: 10px; width: 100%; }
.mbc-kid { flex: 1; max-width: 108px; min-height: 64px; padding: 8px 7px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); cursor: pointer; transition: border-color .2s, opacity .3s; }
.mbc-kid.right { border-color: var(--mint); background: rgba(63,214,154,.1); }
.mbc-kid.wrong { border-color: var(--red); }
.mbc-kid.off { opacity: .35; }

/* the node */
.mbc-node { width: 100%; max-width: 360px; border-radius: 16px; background: #1A1630; border: 1px solid var(--line); }
.mbc-node svg { display: block; width: 100%; height: auto; }
.mbc-bc circle, .mbc-fc circle, .mbc-mc circle { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.mbc-nuc { fill: var(--violet-deep) !important; stroke: none !important; }
.mbc-fc > circle:first-child { stroke: var(--gold); stroke-width: 2.5; }
.mbc-mc { opacity: .55; transition: opacity .4s; }
.mbc-mc.awake { opacity: 1; }
.mbc-mc.awake > circle:first-child { stroke: var(--gold); }
.mbc-y { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.mbc-t { fill: var(--dim); font: 600 13px var(--sans); opacity: 0; transition: opacity .4s; }
.mbc-node.split .mbc-t { opacity: 1; }
.mbc-node.year .mbc-tf { opacity: .35; }
.mbc-virus circle { fill: #FF9F43; stroke: #FFD2A6; stroke-width: 3; stroke-dasharray: 2 3; transition: opacity .5s; }
.mbc-virus.gone { opacity: 0; transition: opacity .6s; }
.mbc-read { font: 600 13.5px var(--sans); color: var(--dim); }
.mbc-read b { color: var(--text); font-weight: 800; }

/* 1918 */
.mbc-ph { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.mbc-ph img { display: block; max-width: 100%; max-height: 300px; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.mbc-ph figcaption { font: 600 12.5px var(--sans); color: var(--dim); text-align: center; }
.mbc-dish { width: 100%; max-width: 360px; }
.mbc-dish svg { display: block; width: 100%; height: auto; }
.mbc-plate { fill: rgba(169,155,255,.08); stroke: var(--line-strong); stroke-width: 2; }
.mbc-plate2 { fill: none; stroke: var(--line); stroke-width: 1; }
.mbc-mcb { fill: var(--violet); stroke: var(--gold); stroke-width: 2; }
.mbc-old { fill: #FF9F43; stroke: #FFD2A6; stroke-width: 4; stroke-dasharray: 2 3; }
.mbc-new { fill: #5EC8F2; stroke: #BDE9FA; stroke-width: 4; stroke-dasharray: 2 3; }
.mbc-t2 { fill: var(--dim); font: 600 13px var(--sans); }
.mbc-cap { fill: var(--faint); }

@media (max-height: 700px) {
  .mbc-hero { max-width: 280px; }
  .mbc-parent { width: 112px; }
  .mbc-kid { max-width: 96px; padding: 6px; }
  .mbc-ph img { max-height: 220px; }
  .mbc-node { max-width: 320px; }
}