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

/* the body */
.aim-body { height: 320px; aspect-ratio: 180 / 262; }
/* The lens and tap screens have no answer buttons, so the body grows to what the scene holds above the controls. */
.aim-body.aim-big { height: 344px; }
.aim-body svg { user-select: none; -webkit-user-select: none; display: block; width: 100%; height: 100%; overflow: visible; }
.aim-sil > * { fill: #2A2440; stroke: rgba(169,155,255,.35); stroke-width: 1.2; }
.aim-brain { fill: #4A3F66; }
.aim-heart { fill: #B0607A; transition: fill .4s; }
.aim-heart.aim-hurt { fill: #F0A0B8; filter: drop-shadow(0 0 5px rgba(252,192,80,.9)); }
.aim-gutp { fill: none; stroke: #6B5F86; stroke-width: 3; stroke-linecap: round; }
.aim-panc { fill: #6B5F86; }
.aim-h { opacity: 0; transition: opacity .2s; }
.aim-h.on { opacity: 1; }
.aim-shp { fill: none; stroke: #A99BFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aim-h-heart .aim-shp { stroke: var(--gold); stroke-width: 2.6; }
.aim-strep circle { fill: #9BD34A; }
.aim-strep { animation: aimGrow .6s ease-out both; transition: opacity .5s; }
.aim-strep.gone { opacity: 0; }
@keyframes aimGrow { from { opacity: 0; } }
.aim-ic { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.aim-lens { cursor: grab; }
.aim-glass { fill: rgba(252,192,80,.12); stroke: var(--gold); stroke-width: 3; }
.aim-handle { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.aim-read { min-height: 20px; font: 600 13.5px var(--sans); color: var(--dim); }
.aim-read.aim-hit { color: var(--gold); }
.aim-read b { font-weight: 800; }

.aim-badge { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); font: 600 12.5px var(--sans); color: var(--dim); transition: opacity .4s; }
.aim-badge.aim-off { opacity: 0; }
.aim-zig { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* the map */
.aim-tap { fill: transparent; }
.aim-spot { cursor: pointer; }
.aim-glow { fill: rgba(252,192,80,.35); stroke: var(--gold); stroke-width: 2; animation: aimPulse 1.4s ease-in-out 5; transform-box: fill-box; transform-origin: center; }
@keyframes aimPulse { 50% { opacity: .55; } }
.aim-spot.done .aim-glow { fill: rgba(169,155,255,.35); stroke: var(--violet-bright); animation: none; }
.aim-spot.sel .aim-glow { fill: rgba(252,192,80,.6); stroke: #fff; }
.aim-card { min-height: 56px; width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.aim-cn { font: 700 14.5px var(--sans); color: var(--text); }
.aim-cw { font: 500 13.5px var(--sans); color: var(--dim); }

/* the bars */
.aim-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.aim-bt { font: 700 12.5px var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.aim-br { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.aim-bl { grid-column: 1 / -1; font: 600 13.5px var(--sans); color: var(--dim); }
.aim-track { height: 18px; border-radius: 9px; background: rgba(234,227,215,.06); overflow: hidden; }
.aim-track i { display: block; height: 100%; border-radius: 9px; background: var(--violet-bright); width: 3%; }
.aim-b2 { background: var(--gold) !important; }
.aim-bv { font: 800 16px var(--sans); color: var(--text); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* the look-alike */
.aim-pair { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 340px; }
.aim-pair > div { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 12.5px var(--sans); color: var(--dim); text-align: center; flex: 1; }
.aim-pair svg { width: 96px; height: 96px; }
.aim-pair .aim-y svg { width: 56px; height: 56px; fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; }
.aim-ebv { fill: rgba(94,200,242,.22); stroke: #5EC8F2; stroke-width: 2.5; }
.aim-nrv { stroke: #6B5F86; stroke-width: 4; }
.aim-my { fill: rgba(169,155,255,.3); stroke: var(--violet-bright); stroke-width: 2; }

/* nine in ten */
.aim-ten { display: grid; grid-template-columns: repeat(5, 48px); gap: 8px 10px; justify-content: center; }
.aim-ten svg { width: 48px; height: 58px; }
.aim-ten svg * { fill: #6E6960; }
.aim-ten .aim-car * { fill: var(--gold); }

@media (max-height: 700px) {
  .aim-body { height: 226px; }
  .aim-body.aim-big { height: 268px; }
  .aim-badge { padding: 2px 8px; }
  .aim-pair svg { width: 80px; height: 80px; }
  .aim-ten { grid-template-columns: repeat(5, 40px); }
  .aim-ten svg { width: 40px; height: 48px; }
}