/* Synaptic pruning lesson. All rules scoped under .spr-* */
.spr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spr-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

.spr-ring { fill: rgba(10,14,26,.55); stroke: var(--gold); stroke-width: .8; }
.spr-tg line { stroke: var(--gold); stroke-width: .7; stroke-linecap: round; opacity: 0; transition: opacity .25s; }

/* the patch */
.spr-patch { position: relative; width: 100%; max-width: 340px; }
.spr-ps { width: 100%; height: auto; display: block; overflow: visible; }
.spr-n { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; }
.spr-e { cursor: pointer; }
.spr-l { stroke: #6f6aa0; stroke-width: 4; stroke-linecap: round; transition: stroke .6s, stroke-width .6s, opacity .5s; }
.spr-hit { fill: transparent; }
.lit .busy .spr-l { stroke: var(--gold); stroke-width: 6; filter: drop-shadow(0 0 4px rgba(252,192,80,.6)); }
.lit .quiet .spr-l { stroke: #5a5a66; stroke-width: 2.5; stroke-dasharray: 5 5; }
.spr-sig { fill: #fff; filter: drop-shadow(0 0 5px rgba(252,192,80,.95)); }
.spr-e.gone { pointer-events: none; }
.spr-e.gone .spr-l { opacity: 0; stroke-width: 0; }
.spr-e.nope .spr-l { stroke: var(--red); }
.spr-glia { position: absolute; left: 0; top: 0; width: 56px; height: 56px; pointer-events: none; opacity: 0; transition: transform .38s cubic-bezier(.3,.8,.3,1), opacity .3s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.night .spr-glia { opacity: 1; }
.night .spr-ps { background: radial-gradient(ellipse at 50% 40%, rgba(123,92,253,.08), transparent 70%); }
.done .spr-glia { opacity: 0; }

/* the years */
.spr-years { position: relative; width: min(256px, 72vw); aspect-ratio: 1; }
.spr-bimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.spr-yo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spr-yo .spr-tg line { opacity: 1; stroke-width: .8; transition: opacity .15s; }
.spr-zone { all: unset; box-sizing: border-box; position: absolute; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.spr-zone span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font: 700 13px/1.2 var(--sans); display: flex; flex-direction: column; align-items: center; color: var(--text); background: rgba(10,14,26,.78); padding: 3px 8px; border-radius: 8px; }
.spr-front { left: 9%; top: 18%; width: 32%; height: 32%; }
.spr-front span { top: 104%; }
.spr-back { left: 66%; top: 31%; width: 28%; height: 28%; }
.spr-back span { top: 104%; }
.spr-zone i { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--dim); }
.spr-ct { font-size: 17px; color: var(--gold); font-variant-numeric: tabular-nums; }
.spr-zone.done .spr-ct { color: var(--mint); }
.spr-zone.ask { border-color: var(--gold); animation: sprAsk 1.1s ease-out 3 both; }
@keyframes sprAsk { 0% { box-shadow: 0 0 0 0 rgba(252,192,80,.5); } 100% { box-shadow: 0 0 0 10px rgba(252,192,80,0); } }
.spr-age { font: 800 22px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.spr-zone.right { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(63,214,154,.25); }
.spr-zone.wrong { border-color: var(--red); }

/* her own */
.spr-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.spr-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; font: 600 15px var(--sans); color: var(--text); }
.spr-row svg { width: 72px; flex: none; }
.spr-row circle { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; }
.spr-row line { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(252,192,80,.6)); }
.spr-row.quiet line { stroke: #5a5a66; stroke-width: 2.5; stroke-dasharray: 5 5; filter: none; transition: stroke .4s; }
.spr-row.quiet span { color: var(--dim); }
.spr-row.right { border-color: var(--mint); }
.spr-row.wrong { border-color: var(--red); }
.spr-row.gone line { opacity: 0; transition: opacity .8s .3s; }

@media (max-height: 700px) {
  .spr-patch { max-width: 300px; }
  .spr-years { width: min(200px, 56vw); }
}