/* Extinction (psychology) lesson. All rules scoped under .exn-* */
.exn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.exn-hero img { width: 320px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }
.exn-note { font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- the box ---------- */
.exn-box { position: relative; width: 100%; height: 190px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.exn-wall { position: absolute; inset: 0; transition: filter .3s; }
.exn-ra .exn-wall, .exn-mini.exn-ra i { background: repeating-linear-gradient(90deg, #1f3560 0 14px, #2f5390 14px 28px); }
.exn-rb .exn-wall, .exn-mini.exn-rb i { background: radial-gradient(circle, #e8955c 0 5px, transparent 6px) 0 0 / 26px 26px, radial-gradient(circle, #e8955c 0 5px, transparent 6px) 13px 13px / 26px 26px, #4a2a36; }
.exn-rc .exn-wall { background: #2f3444; }
.exn-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, #151a28, #0f1320); }
.exn-room { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 10px; border-radius: 99px; background: rgba(10,14,26,.82); font-size: 13px; font-weight: 700; }
.exn-speaker { position: absolute; top: 8px; left: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 12px; background: rgba(10,14,26,.82); display: grid; place-items: center; }
.exn-speaker svg { width: 32px; height: 32px; }
.exn-spk { fill: var(--text); }
.exn-wave { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.exn-ring .exn-wave { animation: exn-wave .9s ease-out; }
.exn-ring .exn-w2 { animation-delay: .12s; }
@keyframes exn-wave { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.exn-cup { position: absolute; right: 14px; bottom: 10px; z-index: 3; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 6px 6px 18px 18px; background: linear-gradient(90deg, #6d7383, #c9ced8 45%, #858b9a); box-shadow: inset 0 6px 0 rgba(0,0,0,.35); cursor: pointer; }
.exn-pellet { position: absolute; left: 24px; top: -120px; width: 16px; height: 14px; border-radius: 6px; background: #fffaf0; box-shadow: 0 0 10px rgba(255,240,200,.8); opacity: 0; }
.exn-pellet.exn-in { animation: exn-drop .4s cubic-bezier(.5,0,1,1) forwards; }
@keyframes exn-drop { 0% { top: -120px; opacity: 1; } 100% { top: 2px; opacity: 1; } }
.exn-rat { position: absolute; bottom: 12px; z-index: 2; width: 110px; left: calc(10px + var(--p, 0) * (100% - 200px)); transform-origin: 70% 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); transition: opacity .3s; }
.exn-rat.exn-perk { animation: exn-perk .65s ease-in-out; }
@keyframes exn-perk { 0%, 100% { transform: none; } 40%, 70% { transform: translateY(-6px) rotate(-8deg); } }
.exn-rat.exn-sniff { animation: exn-sniff .25s ease-in-out infinite alternate; }
@keyframes exn-sniff { from { transform: rotate(0); } to { transform: rotate(6deg); } }
.exn-day { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; font: 600 34px var(--mono); color: var(--text); pointer-events: none; opacity: 0; transition: opacity .25s; }
.exn-away .exn-day { opacity: 1; }
.exn-away .exn-wall { filter: brightness(.35); }
.exn-away .exn-rat { opacity: 0; }

/* ---------- the record ---------- */
.exn-rec { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.exn-rec > span { flex: none; color: var(--dim); }
.exn-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.exn-dots i, .exn-legend i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); display: block; }
.exn-dots i { transition: background .2s, box-shadow .2s; }
i.exn-d-run { background: var(--gold); box-shadow: none; }
i.exn-d-look { background: transparent; box-shadow: inset 0 0 0 3px var(--gold); }
i.exn-d-none { background: #4a4f5e; box-shadow: none; }
.exn-legend { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--dim); }
.exn-legend span { display: flex; align-items: center; gap: 6px; }
.exn-legend i { width: 13px; height: 13px; }

/* ---------- a rat's history ---------- */
.exn-hist { width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: stretch; font-size: 13px; font-weight: 700; line-height: 1.25; }
.exn-hist b { align-self: center; font-size: 14px; padding-right: 2px; }
.exn-hist span { padding: 6px 8px; border-radius: 10px; background: var(--raised); }
.exn-ha { box-shadow: inset 4px 0 0 #3f6fc0; }
.exn-hb { box-shadow: inset 4px 0 0 #e8955c; }

/* ---------- moving between boxes ---------- */
.exn-picker { width: 100%; display: flex; gap: 10px; }
.exn-mini { flex: 1; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--raised); color: var(--text); font: 700 15px var(--sans); border: 0; text-align: left; }
.exn-mini i { flex: none; width: 34px; height: 34px; border-radius: 8px; }
button.exn-mini { box-shadow: 0 4px 0 #0c1020, inset 0 0 0 2px var(--line-strong); cursor: pointer; }
.exn-mini.exn-here { box-shadow: inset 0 0 0 2px var(--gold); }

/* ---------- erased or covered ---------- */
.exn-q { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.exn-q > div:not(.exn-qor) { padding: 14px; border-radius: 14px; background: var(--raised); display: flex; flex-direction: column; gap: 4px; }
.exn-q b { font-size: 18px; }
.exn-q span { font-size: 14px; color: var(--dim); line-height: 1.3; }
.exn-qa { box-shadow: inset 4px 0 0 #4a4f5e; }
.exn-qb { box-shadow: inset 4px 0 0 var(--gold); }
.exn-qor { text-align: center; font: 600 13px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- the two rules ---------- */
.exn-rules { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.exn-rule { padding: 10px 12px; border-radius: 12px; background: var(--raised); display: flex; flex-direction: column; gap: 2px; }
.exn-rule b { font-size: 16px; }
.exn-rule span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.exn-old { box-shadow: inset 4px 0 0 var(--gold); }
.exn-new { box-shadow: inset 4px 0 0 #e8955c; margin-left: 18px; }
.exn-wins { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.exn-win { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.exn-win em { font-style: normal; opacity: 0; transition: opacity .3s; }
.exn-win.exn-on em { opacity: 1; }
.exn-wa em { color: var(--gold); }
.exn-wb em { color: #e8955c; }

/* ---------- people ---------- */
.exn-rooms { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.exn-pr { flex: 1; min-height: 120px; padding: 14px 10px; border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.exn-pr b { font-size: 17px; }
.exn-pr span { font-size: 14px; line-height: 1.3; }
.exn-pa { background: linear-gradient(180deg, #2a4a3f, #1c2a2a); box-shadow: inset 0 0 0 2px var(--mint); }
.exn-pb { background: linear-gradient(180deg, #4a2a36, #2a1a24); box-shadow: inset 0 0 0 2px #e8955c; }
.exn-parr { flex: none; width: 0; height: 0; border: 10px solid transparent; border-left: 14px solid var(--gold); border-right: 0; }

/* ---------- puzzles ---------- */
.exn-plans { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.exn-plan { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--raised); transition: box-shadow .3s; }
.exn-plan b { font: 600 18px var(--mono); color: var(--violet-bright); }
.exn-plan span { font-size: 15px; font-weight: 700; line-height: 1.3; }
.exn-plan.exn-on { box-shadow: inset 0 0 0 2px var(--mint); }

@media (max-height: 700px) {
  .exn-box { height: 150px; }
  .exn-rat { width: 92px; }
  .exn-hero img { max-height: 28vh; }
}
@media (max-height: 700px) {
  .exn-win { padding: 2px; }
  .exn-rule { padding: 8px 12px; }
}