/* Hypothalamus lesson. All rules scoped under .hyt-* */
.hyt-wrap { flex: none; width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hyt-board { display: block; flex: none; width: 100%; aspect-ratio: 320 / 178; height: auto; overflow: visible; }
.hyt-skin { fill: rgba(255,214,190,.13); stroke: rgba(255,214,190,.28); stroke-width: 1.5; }
.hyt-brain { fill: rgba(240,150,200,.22); stroke: rgba(240,150,200,.45); stroke-width: 1.5; }
.hyt-vein { fill: none; stroke: #B8304A; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.hyt-salt { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 12; animation: hytFlow 2.4s linear infinite; transition: opacity .6s; }
.hyt-board[data-salt="salty"] .hyt-salt { stroke-dasharray: 0 6; }
.hyt-board[data-salt="watery"] .hyt-salt { stroke-dasharray: 0 24; opacity: .7; }
@keyframes hytFlow { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .hyt-salt { animation: none; } }
.hyt-lb { font: 700 14px var(--sans); fill: var(--dim); }
.hyt-ureter { fill: none; stroke: #E7C55A; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.hyt-glass { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linejoin: round; }
.hyt-pee { transition: fill .4s; }
.hyt-stalk { stroke: rgba(240,150,200,.6); stroke-width: 3; }
.hyt-hit { fill: transparent; }
.hyt-hyp { fill: rgba(252,192,80,.45); stroke: var(--gold); stroke-width: 1.5; transition: fill .4s; }
.hyt-board.hyt-s-named .hyt-hyp { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(252,192,80,.9)); }
.hyt-pit { fill: rgba(150,120,255,.45); stroke: var(--violet-bright); stroke-width: 1.5; }
.hyt-board.hyt-s-pit .hyt-pit { fill: var(--violet); }
.hyt-board.hyt-s-jam .hyt-pit { fill: rgba(150,150,170,.5); stroke: var(--dim); }
.hyt-lh, .hyt-lp, .hyt-blk { opacity: 0; transition: opacity .4s; }
.hyt-board.hyt-s-named .hyt-lh, .hyt-board.hyt-s-pit .hyt-lp, .hyt-board.hyt-s-jam .hyt-blk { opacity: 1; }
.hyt-blk { fill: var(--text); }
.hyt-vp { fill: #B79CFF; stroke: #5B3FD0; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(183,156,255,.9)); }
.hyt-board.hyt-s-jam .hyt-vp { animation: hytJig .25s ease-in-out 6 alternate; }
@keyframes hytJig { from { translate: -1px 0; } to { translate: 1px 0; } }
.hyt-board.hyt-s-kid image { animation: hytKid .7s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes hytKid { 40% { scale: 1.08; filter: drop-shadow(0 0 8px #B79CFF); } }

/* the sensor cell, zoomed */
.hyt-cell { opacity: 0; transition: opacity .5s; }
.hyt-board.hyt-s-cell .hyt-cell { opacity: 1; }
.hyt-cl { stroke: rgba(252,192,80,.6); stroke-width: 1.5; stroke-dasharray: 3 3; }
.hyt-cb { fill: rgba(10,14,26,.75); stroke: rgba(252,192,80,.7); stroke-width: 1.5; }
.hyt-cc { fill: rgba(252,192,80,.7); stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: scale 1.4s cubic-bezier(.4,.1,.2,1), fill 1.4s; }
.hyt-board.hyt-s-shrunk .hyt-cc { scale: .55; fill: rgba(252,192,80,.4); }

/* thirst */
.hyt-thirst { display: none; transform-box: fill-box; transform-origin: 20% 100%; }
.hyt-board.hyt-s-thirst .hyt-thirst { display: inline; animation: hytPop .35s cubic-bezier(.3,1.6,.5,1); }
.hyt-thirst rect { fill: #7FC4FF; }
.hyt-thirst text { font: 800 14px var(--sans); fill: #0A0E1A; }

/* what you eat or drink */
.hyt-food { display: flex; justify-content: center; min-height: 0; }
.hyt-item { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; min-height: 56px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 800 15px var(--sans); cursor: pointer; transition: opacity .4s, scale .4s; }
.hyt-item img { width: 52px; height: 52px; object-fit: contain; }
.hyt-item.hyt-gone { opacity: 0; scale: .5; pointer-events: none; }

/* cups to pick */
.choices.hyt-cups .choice svg.hyt-cupo { display: block; width: 100%; height: clamp(70px, 11vh, 100px); }

/* sort cards with a picture */
.sortcard.hyt-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sortcard.hyt-card img { width: 96px; height: 96px; object-fit: contain; }

/* liters of pee */
.hyt-di { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hyt-dr { display: flex; flex-direction: column; gap: 6px; }
.hyt-dr span { font: 800 13px var(--sans); color: var(--dim); }
.hyt-dr b { font: 800 15px var(--sans); color: var(--text); margin-left: 6px; }
.hyt-bts { display: flex; flex-wrap: wrap; gap: 3px; min-height: 34px; }
.hyt-bt { width: 20px; height: 34px; }
.hyt-bt path { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.hyt-bt.on path { fill: #F2EBA8; }
.hyt-bt.half path { fill: rgba(242,235,168,.45); }
.hyt-bt.off { opacity: 0; }
.hyt-bt.on { animation: hytPop .3s ease-out; }
@keyframes hytPop { from { scale: .4; } }

@media (max-height: 700px) {
  .hyt-item { min-height: 48px; }
  .hyt-item img { width: 44px; height: 44px; }
  .sortcard.hyt-card img { width: 72px; height: 72px; }
}