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

/* ---------- the field ---------- */
.gaba-field { position: relative; width: 100%; max-width: 340px; height: 260px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #171C33, #0B0F1E 75%); border: 1px solid var(--line); }
@media (max-height: 700px) { .gaba-field { height: 220px; } }
.gaba-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.gaba-note.bad { color: var(--gold); font-weight: 700; font-size: 13px; }
.gaba-note.cool { color: #A8D2FF; font-weight: 700; font-size: 13px; }

/* ---------- glutamate to GABA ---------- */
.gaba-made { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 30px 0; }
.gaba-mol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px; border-radius: 16px; min-width: 104px; }
.gaba-mol b { font: 800 18px var(--sans); }
.gaba-mol span { font: 600 13px var(--sans); color: var(--dim); }
.gaba-mol.go { background: rgba(252, 192, 80, .14); border: 2px solid var(--gold); color: var(--gold); }
.gaba-mol.stop { background: rgba(111, 180, 255, .14); border: 2px solid #6FB4FF; color: #A8D2FF; opacity: .25; transform: scale(.9); transition: opacity .5s .3s, transform .5s .3s; }
.gaba-tail { position: absolute; right: -14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--gold); transition: transform .6s, opacity .6s; }
.gaba-snip { font-size: 26px; color: var(--text); transition: transform .3s; }
.gaba-made.cut .gaba-tail { transform: translate(20px, 40px) rotate(90deg); opacity: 0; }
.gaba-made.cut .gaba-snip { transform: rotate(-25deg) scale(1.2); }
.gaba-made.cut .gaba-mol.stop { opacity: 1; transform: none; }

/* ---------- one brake, two drugs ---------- */
.gaba-mix { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 14px; }
.gaba-mix img { display: block; width: 210px; max-width: 58vw; height: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.gaba-mix.both img { transform: translateY(12px) scaleY(.94); }
.gaba-mcap { color: #A8D2FF; font: 800 15px var(--sans); visibility: hidden; }
.gaba-mix.both .gaba-mcap { visibility: visible; }
@media (max-height: 700px) { .gaba-mix img { width: 170px; } }