/* Serotonin lesson. All rules scoped under .ser-* */
.ser-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ser-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.ser-t { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }
.ser-t.lt { text-anchor: start; }

/* ---------- body map ---------- */
.ser-body { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; touch-action: none; }
.ser-ves { fill: none; stroke: #B3263A; stroke-width: 10; stroke-linecap: round; }
.ser-ves-in { fill: none; stroke: #E0485E; stroke-width: 3.5; stroke-linecap: round; }
.ser-gut { fill: none; stroke: #D9798C; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.ser-ec { fill: #8A6A2A; stroke: #F2C96B; stroke-width: 1.2; transition: fill .3s, filter .3s; }
.ser-body.ec-on .ser-ec, .ser-body.ninety .ser-ec { fill: var(--gold); filter: drop-shadow(0 0 4px #FCC050); }
.ser-vag { fill: none; stroke: #F4D35E; stroke-width: 3; stroke-dasharray: 5 4; transition: stroke .3s; }
.ser-body.vag-on .ser-vag { stroke-dasharray: none; filter: drop-shadow(0 0 5px #F4D35E); }
.ser-body.blockvag .ser-vag { stroke: #6E6A78; }
.ser-body.sick .ser-brain { filter: hue-rotate(60deg) saturate(1.3) drop-shadow(0 0 8px #9BE36A); }
.ser-t.sick { fill: #9BE36A; opacity: 0; transition: opacity .3s; }
.ser-body.sick .ser-t.sick { opacity: 1; }
.ser-tox { fill: #9BE36A; stroke: #3F7A1E; stroke-width: 1; }
.ser-spark { fill: #FFFFFF; filter: drop-shadow(0 0 6px #F4D35E); }
.ser-bbb { fill: none; stroke: transparent; stroke-width: 5; transition: stroke .3s; }
.ser-body.bump .ser-bbb, .ser-body.door .ser-bbb, .ser-body.wall .ser-bbb { stroke: var(--mint); stroke-dasharray: 3 3; }
.ser-body.bump .ser-bbb { animation: serBump .6s ease-out; }
@keyframes serBump { 0% { stroke: #FF6B6B; stroke-width: 8; } 100% { stroke: var(--mint); stroke-width: 5; } }
.ser-brain { transition: filter .4s; }
.ser-t.vg { fill: #F4D35E; }
.ser-t.rd { fill: #FF8FA0; }
.ser-t.bb { fill: var(--mint); opacity: 0; transition: opacity .3s; }
.ser-body.bump .ser-t.bb, .ser-body.door .ser-t.bb, .ser-body.wall .ser-t.bb { opacity: 1; }
.ser-t.big { font-size: 15px; fill: var(--gold); opacity: 0; transition: opacity .4s; }
.ser-body.ninety .ser-t.g90 { opacity: 1; }
.ser-5ht { fill: var(--gold); stroke: #7A5200; stroke-width: 1; }
.ser-5ht.drag { stroke: #FFE3A0; stroke-width: 2; filter: drop-shadow(0 0 6px #FCC050); }
.ser-hit { fill: transparent; cursor: grab; }
.ser-guide { fill: none; stroke: none; }
.ser-trp { fill: var(--violet-bright); stroke: #D9CBFF; stroke-width: 1.5; transition: fill .4s; }
.ser-trp.made { fill: var(--gold); stroke: #FFE3A0; }
.ser-drug { fill: #7FB8F0; stroke: #2C5F94; stroke-width: 1; }
.ser-body.tumor .ser-ec { fill: var(--gold); filter: drop-shadow(0 0 7px #FF9A3C); animation: serPulse .8s ease-in-out 3; }
@keyframes serPulse { 50% { r: 7; } }
.ser-body.calm .ser-ec { fill: #8A6A2A; filter: none; }
.ser-body.calm .ser-brain { filter: drop-shadow(0 0 8px #FCC050); }
@media (max-height: 700px) { .ser-body { max-width: 272px; } }
.ser-body .ser-t { font-size: 15.5px; }
.ser-body .ser-t.big { font-size: 17px; }