/* Noradrenaline lesson. All rules scoped under .nad-* */
.nad-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nad-note { color: var(--faint); font-size: 12px; text-align: center; max-width: 300px; }

/* ---------- the eye ---------- */
.nad-eyebox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nad-eye { display: block; width: 100%; max-width: 330px; height: auto; filter: drop-shadow(0 14px 30px rgba(123, 92, 253, .25)); }
.nad-white { fill: #EDE6F0; }
.nad-rim { fill: none; stroke: #C9B8DA; stroke-width: 3; }
.nad-pupil { fill: #05060C; }
.nad-lid { fill: #6B4F72; }
.nad-ghost { fill: none; stroke: transparent; stroke-width: 2.5; stroke-dasharray: 5 4; }
.nad-eye.ghosted .nad-ghost { stroke: var(--gold); }
.nad-cap2 { color: var(--gold); font: 700 15px var(--sans); text-align: center; }
.nad-tiles { display: flex; gap: 8px; justify-content: center; }
.nad-tile { width: 44px; height: 54px; border-radius: 12px; background: var(--raised); border: 2px solid var(--line-strong); color: var(--text); font: 800 26px var(--sans); display: grid; place-items: center; transition: background .25s, border-color .25s, transform .2s; }
.nad-tile.nad-shown { background: var(--violet-deep); border-color: var(--violet-bright); transform: scale(1.08); }
.nad-tile.nad-held { color: var(--dim); }
.nad-tile.nad-said { color: var(--gold); border-color: var(--gold); }
@media (max-height: 700px) { .nad-eye { max-width: 270px; } .nad-tile { height: 48px; width: 42px; } }

/* ---------- the brain and its blue spot ---------- */
.nad-bw { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.nad-brain { position: relative; width: min(280px, 72vw); aspect-ratio: 637 / 640; }
.nad-brain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(.82) saturate(.8); }
.nad-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nad-fib { fill: none; stroke: #6FB4FF; stroke-width: 7; stroke-linecap: round; opacity: .75; filter: drop-shadow(0 0 6px #6FB4FF); transition: opacity .5s, stroke-width .5s; }
.nad-spot { fill: #3D8BFF; stroke: #CFE4FF; stroke-width: 4; }
.nad-halo { fill: rgba(61, 139, 255, .25); transform-box: fill-box; transform-origin: center; }
.nad-ov.st-awake .nad-halo { animation: nadPulse 1.6s ease-in-out infinite; }
.nad-ov.st-dream .nad-fib { opacity: .08; }
.nad-ov.st-dream .nad-spot { fill: #24355A; stroke: #5A6A8A; }
.nad-ov.st-dream .nad-halo { opacity: 0; }
.nad-ov.st-burst .nad-fib { opacity: 1; stroke-width: 10; stroke: #A8D2FF; }
.nad-ov.st-burst .nad-halo { animation: nadPulse .35s ease-in-out 6; fill: rgba(120, 180, 255, .45); }
@keyframes nadPulse { 50% { transform: scale(1.6); opacity: .4; } }
.nad-cap { min-height: 20px; color: #A8D2FF; font: 700 15px var(--sans); text-align: center; }
@media (max-height: 700px) { .nad-brain { width: min(250px, 66vw); } }

.nad-ov.st-over .nad-fib { opacity: 1; stroke-width: 12; stroke: #E6F2FF; animation: nadFlare .22s steps(2) infinite; }
.nad-ov.st-over .nad-halo { animation: nadPulse .25s ease-in-out infinite; fill: rgba(170, 210, 255, .55); }
@keyframes nadFlare { 50% { opacity: .55; } }