/* Amygdala lesson. Everything scoped under .am-*. */

.am-lab { display: flex; flex-direction: column; gap: 10px; }
.am-strip { display: flex; flex-direction: column; gap: 6px; }
.am-sh { display: flex; justify-content: space-between; align-items: center; min-height: 20px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.am-tag { padding: 3px 8px; border-radius: 999px; background: var(--raised); color: var(--text); opacity: 0; transition: opacity .3s; }
.am-tag.on { opacity: 1; }
.am-key { text-transform: none; letter-spacing: 0; font-weight: 600; }
.am-ps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.am-p { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.am-img { position: relative; border-radius: 6px; }
.am-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; display: block; }
.am-cap { font-size: 12px; line-height: 1.25; color: var(--dim); min-height: 30px; opacity: 0; transition: opacity .35s, color .35s; }
.am-cap.on { opacity: 1; }
.am-cap.hot { color: #ff8a8a; font-weight: 700; }
.am-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 58px; align-items: end; border-bottom: 1px solid var(--line-strong); }
.am-b { position: relative; height: 100%; }
.am-b i, .am-b s, .am-b u { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 3px 3px 0 0; }
.am-b i { background: var(--violet-bright); transition: height .45s cubic-bezier(.2,.8,.2,1), background .3s; }
.am-b.hot i { background: var(--gold); }
.am-b s { border: 1.5px dashed var(--line-strong); border-bottom: 0; z-index: 1; transition: height .3s; }
.am-b u { border: 2px solid var(--gold); border-bottom: 0; background: rgba(252,192,80,.12); z-index: 2; opacity: 0; transition: height .2s, opacity .2s; }
.am-b.g u { opacity: 1; }
.am-num { font-size: 12px; font-weight: 700; color: var(--faint); text-align: center; }

/* the chain: words, adrenaline, amygdala, memory */
.am-chain { display: flex; align-items: stretch; gap: 0; }
.am-nd { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); transition: background .3s, border-color .3s, box-shadow .3s; }
.am-nd b { font: 700 12.5px var(--sans); color: var(--text); }
.am-nd span { font: 600 12px var(--mono); color: var(--faint); white-space: nowrap; }
.am-nd.on { border-color: rgba(169,155,255,.6); }
.am-nd.on span { color: var(--violet-bright); }
.am-nd.hot { background: #2c2413; border-color: var(--gold); box-shadow: 0 0 12px rgba(252,192,80,.35); }
.am-nd.hot span { color: var(--gold); }
.am-nd.off { border-style: dashed; border-color: var(--line-strong); }
.am-nd.off span { color: #ff8a8a; }
.am-nd.gone b { color: var(--faint); text-decoration: line-through; }
.am-ar { position: relative; flex: 0 0 16px; display: flex; align-items: center; justify-content: center; }
.am-ar::before { content: ''; width: 8px; height: 2px; background: var(--line-strong); }
.am-ar::after { content: ''; position: absolute; right: 1px; border: 4px solid transparent; border-left-color: var(--line-strong); border-right: 0; }
.am-ar em { display: none; }
.am-ar.cut em { display: block; position: absolute; font-style: normal; font: 900 16px var(--sans); color: #ff8a8a; z-index: 1; }
.am-ar.cut em::before { content: '✕'; }

/* the brain */
.am-bw { position: relative; width: 300px; max-width: 100%; align-self: center; }
.am-bw img { width: 100%; height: auto; display: block; }
.am-bl { position: absolute; right: 57%; top: 50%; font: 700 13px var(--sans); color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.am-hc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .4s; }
.am-hc path { fill: none; stroke: var(--violet-bright); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(169,155,255,.8)); }
.am-hl { position: absolute; left: 50%; top: 74%; font: 700 13px var(--sans); color: var(--violet-bright); text-shadow: 0 1px 3px rgba(0,0,0,.8); opacity: 0; transition: opacity .4s; }
.am-bw.hc .am-hc, .am-bw.hc .am-hl { opacity: 1; }
.am-bc { font-size: 13px; line-height: 1.4; color: var(--dim); text-align: center; }
.am-bc b { color: var(--gold); }
.am-bc b.am-hcb { color: var(--violet-bright); }

/* twelve nights */
.am-n.picked .am-nb { box-shadow: 0 0 0 2px var(--violet-bright); }
.am-nights { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.am-n { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.am-n em { font-style: normal; font-size: 14px; color: var(--violet-bright); }
.am-n small { font: 600 12px var(--mono); color: var(--faint); }
.am-nb { position: relative; width: 100%; height: 110px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.am-nb i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--violet-bright); transition: height .45s cubic-bezier(.2,.8,.2,1); }
.am-nights.done .am-n { cursor: default; }
.am-n.big .am-nb { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(252,192,80,.5); }
.am-n.big .am-nb i { background: var(--gold); }
.am-n.big em, .am-n.big small { color: var(--gold); }
.am-nl { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--dim); margin-top: 6px; }
.am-gold { color: var(--gold); }

/* S.M.: no alarm */
.am-sm { display: flex; flex-direction: column; gap: 12px; }
.am-scares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.am-sc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: border-color .3s, box-shadow .3s; }
.am-sc b { font-size: 26px; line-height: 1; }
.am-sc span { font-size: 12px; font-weight: 600; color: var(--dim); line-height: 1.2; }
.am-sc.on { border-color: var(--mint); box-shadow: 0 0 10px rgba(80,220,170,.25); }
.am-still { font-size: 13px; color: var(--dim); text-align: center; }

/* the face: three bands to tap, then S.M.'s gaze */
.am-face { position: relative; width: min(100%, 270px); aspect-ratio: 630 / 640; margin: 0 auto; }
.am-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.am-band { position: absolute; left: 14%; right: 14%; min-height: 44px; border-radius: 12px; border: 2px dashed rgba(252,192,80,.7); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; }
.am-band span { font: 700 12px var(--sans); color: var(--gold); background: rgba(10,14,26,.8); padding: 2px 6px; border-radius: 6px; }
.am-band.picked { border-style: solid; background: rgba(252,192,80,.14); }
.am-band:disabled { cursor: default; border-color: transparent; background: none; }
.am-band:disabled span { opacity: 0; }
.am-band.lit { border: 2px solid var(--mint); background: rgba(63,214,154,.12); }
.am-band.lit span { opacity: 1; color: var(--mint); }
.am-gaze i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(252,192,80,.75); box-shadow: 0 0 0 3px rgba(252,192,80,.25); animation: amGaze .3s var(--d) both; }
@keyframes amGaze { from { transform: scale(0); opacity: 0; } }
.am-face.am-told .am-gaze i { left: 50% !important; top: 42% !important; transition: left .5s, top .5s; background: rgba(63,214,154,.8); }
.am-gcap { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 12px; color: var(--dim); }

@media (max-height: 700px) {
  .am-face { width: min(100%, 250px); }
  .am-lab { gap: 7px; }
  .am-bw { width: 270px; }
  .am-img img { aspect-ratio: 16 / 9; }
  .am-bars { height: 40px; }
  .am-cap { min-height: 30px; }
  .am-nd { padding: 5px 2px; }
  .am-nb { height: 80px; }
}