/* Fever lesson. All rules scoped under .fev-* */
.fev-sc { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; }
.fev-left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }

/* the thermometer */
.fev-th { display: block; height: 250px; width: auto; touch-action: none; cursor: ns-resize; overflow: visible; }
.fev-glass { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.28); stroke-width: 2; }
.fev-col { fill: var(--red); }
.fev-bulb { fill: var(--red); }
.fev-tk { stroke: var(--dim); stroke-width: 2; }
.fev-tl { font: 700 19px var(--sans); fill: var(--dim); font-variant-numeric: tabular-nums; }
.fev-sl { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.fev-sa { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.6)); }
.fev-read { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 700 12.5px var(--sans); color: var(--dim); white-space: nowrap; }
.fev-read b { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; }
.fev-rb b { color: var(--red); }
.fev-rs b { color: var(--gold); }

/* the person */
.fev-pt { position: relative; flex: 1 1 auto; min-width: 0; max-width: 210px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fev-pt img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }
.fev-pt.shiver img { animation: fevShiver .09s linear infinite alternate; }
@keyframes fevShiver { from { translate: -1.5px 0; } to { translate: 1.5px 0; } }
.fev-feel { font: 800 14px var(--sans); color: var(--text); text-align: center; white-space: nowrap; transition: color .3s; }
.fev-feel.cold { color: #7FC4FF; }
.fev-feel.hot { color: #FF8A5C; }

/* germs and the signal */
.fev-bugs { position: absolute; inset: 0; pointer-events: none; }
.fev-bug { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(63,214,154,.7); animation: fevDrift 1.6s cubic-bezier(.2,.7,.3,1) var(--d) both; }
@keyframes fevDrift { from { opacity: 0; translate: -160px -30px; } to { opacity: 1; translate: 0 0; } }
.fev-sig { position: absolute; left: 50%; top: 58%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(252,192,80,.9); opacity: 0; pointer-events: none; }
.fev-pt.signal .fev-sig { animation: fevSig 1s ease-in-out 3 both; }
@keyframes fevSig { 0% { opacity: 0; top: 70%; scale: .6; } 30% { opacity: 1; } 100% { opacity: 0; top: 14%; scale: 1.4; } }

/* two people (scored) */
.fev-pk { width: 100%; }
.fev-pk .choices.fev-two { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 12px; width: 100%; }
.fev-pk .choice { flex: 0 1 160px; padding: 8px 6px 10px; min-height: 0; justify-content: center; }
.fev-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fev-card img { display: block; width: 100%; max-width: 140px; height: auto; max-height: 160px; object-fit: contain; }
.fev-card.shiver img { animation: fevShiver .09s linear infinite alternate; }
.fev-card b { font: 800 15px var(--sans); color: var(--text); }
.fev-mini { font: 800 13px var(--sans); color: var(--red); font-variant-numeric: tabular-nums; }

/* the runner */
.fev-run .fev-th { cursor: default; }

/* lizards */
.fev-sand { position: relative; width: 100%; max-width: 360px; height: 230px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: linear-gradient(90deg, #3a3550 0%, #4a4058 42%, #b8894a 58%, #e2b25c 100%); }
.fev-shade, .fev-sun { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; }
.fev-shade { left: 0; }
.fev-sun { right: 0; }
.fev-shade span, .fev-sun span { font: 800 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: rgba(10,14,26,.55); color: var(--text); }
.fev-sun::before { content: ''; position: absolute; right: 18px; top: 40px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #FFE7A0, var(--gold) 60%, transparent 72%); box-shadow: 0 0 30px rgba(252,192,80,.7); }
.fev-sun::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 22px; height: 36px; border-radius: 50% 50% 12px 12px; background: linear-gradient(#8a6a4a, #5e4632); }
.fev-liz { position: absolute; left: 50%; bottom: 30px; width: 46%; height: auto; translate: -50% 0; transition: left 1s cubic-bezier(.4,.1,.2,1), bottom 1s cubic-bezier(.4,.1,.2,1); filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.fev-liz.warm { left: 75%; bottom: 48px; }

@media (max-height: 700px) {
  .fev-th { height: 200px; }
  .fev-pt img { max-height: 170px; }
  .fev-card img { max-height: 120px; }
  .fev-sand { height: 190px; }
}