/* Thyroid gland lesson. All rules scoped under .thy-* */
.thy-stage { flex: none; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* tanks of tadpoles */
.thy-tank { position: relative; flex: none; width: 100%; height: 190px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(90,170,200,.32), rgba(40,90,120,.5)); border: 2px solid rgba(160,220,240,.35); }
.thy-tl { position: absolute; left: 10px; top: 8px; z-index: 2; font: 800 13px var(--sans); color: var(--text); padding: 2px 9px; border-radius: 999px; background: rgba(10,14,26,.5); }
.thy-kid { position: absolute; width: 27%; animation: thySwim 2.2s ease-in-out var(--d) infinite alternate; }
.thy-kid img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.thy-kid.thy-s-frog { animation: thyHop .45s cubic-bezier(.3,1.6,.5,1); }
.thy-kid.thy-s-frog img { width: 78%; margin: 0 auto; }
@keyframes thySwim { from { translate: -6px 0; rotate: -4deg; } to { translate: 8px 4px; rotate: 4deg; } }
@keyframes thyHop { from { scale: .3; opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .thy-kid { animation: none; } }
.thy-crumbs { position: absolute; inset: 0; pointer-events: none; }
.thy-crumbs i { position: absolute; top: -10px; width: 9px; height: 9px; border-radius: 3px; background: #E8705A; animation: thyFall 1s ease-in forwards; }
.thy-crumbs i.thy-g { background: #9AA0B4; }
@keyframes thyFall { to { top: 88%; opacity: .2; } }
.thy-tank.thy-s-still::after { content: 'Still tadpoles'; position: absolute; right: 10px; bottom: 8px; font: 800 13px var(--sans); color: var(--text); padding: 2px 9px; border-radius: 999px; background: rgba(10,14,26,.6); }
.thy-two { flex: none; width: 100%; max-width: 380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.thy-two .thy-tank { height: 170px; }
.thy-two .thy-kid { width: 34%; }
.thy-two .thy-tl { font-size: 12px; left: 6px; right: 6px; text-align: center; }

.thy-row { display: flex; justify-content: center; }
.thy-jar { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 16px 6px 10px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 800 15px var(--sans); cursor: pointer; }
.thy-jar svg { width: 30px; height: 36px; }
.thy-jar svg rect { fill: #C9A86A; }
.thy-jar svg path { fill: rgba(232,112,90,.75); stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.thy-jar.thy-s-used { opacity: .45; }

/* the body panel */
.thy-panel { flex: none; width: 100%; max-width: 360px; margin: 0 auto; display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: center; }
.thy-neck img { display: block; width: 100%; height: auto; transition: filter .4s; }
.thy-reads { display: flex; flex-direction: column; gap: 8px; }
.thy-rd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.thy-rd span { font: 700 13px var(--sans); color: var(--dim); min-width: 50px; }
.thy-rd b { font: 800 15px var(--sans); color: var(--text); }
.thy-beat { display: block; width: 14px; height: 14px; flex: none; background: #FF5C7A; clip-path: path('M7 13 L1.5 7.5 A3.3 3.3 0 0 1 7 2.8 A3.3 3.3 0 0 1 12.5 7.5 Z'); animation: thyBeat .9s ease-in-out infinite; }
@keyframes thyBeat { 0%, 60%, 100% { scale: 1; } 20% { scale: 1.35; } }
@media (prefers-reduced-motion: reduce) { .thy-beat { animation: none; } }
.thy-panel[data-v="1"] .thy-temp b, .thy-panel[data-v="2"] .thy-temp b { color: #7FC4FF; }
.thy-panel[data-v="4"] .thy-temp b, .thy-panel[data-v="5"] .thy-temp b { color: #FF8A5C; }

/* tadpole to frog */
.thy-grow { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto; }
.thy-grow img { width: 120px; height: auto; }
.thy-grow img + i + img { width: 90px; }
.thy-arrow { display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 14px solid var(--dim); }

@media (max-height: 700px) {
  .thy-tank { height: 160px; }
  .thy-two .thy-tank { height: 150px; }
  .thy-rd { padding: 6px 8px; }
  .thy-grow img { width: 100px; }
}
.thy-jar.thy-jg svg path { fill: rgba(154,160,180,.75); }