/* Inattentional blindness lesson. All rules scoped under .inb-* */
.inb-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.inb-sc.inb-full { flex: 1; min-height: 0; justify-content: center; }
.inb-court { display: block; width: 100%; max-width: 380px; flex: 1; min-height: 280px; max-height: 440px; border-radius: 18px; }

/* the study */
.inb-split { display: flex; justify-content: center; align-items: flex-end; gap: 6px; width: 100%; max-width: 360px; }
.inb-split figure { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inb-split img { height: 140px; width: auto; }
.inb-split figcaption { font: 700 12.5px var(--sans); color: var(--dim); text-align: center; }

/* the counts */
.inb-counts { display: flex; gap: 10px; width: 100%; max-width: 340px; }
.inb-counts div { flex: 1; padding: 14px 12px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line-strong); display: flex; flex-direction: column; gap: 6px; }
.inb-counts b { font: 800 18px var(--sans); color: var(--text); }
.inb-counts span { font: 600 14px var(--sans); color: var(--dim); line-height: 1.3; }

/* the scan */
.inb-scan { position: relative; width: 100%; max-width: 340px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.inb-ct { display: block; width: 100%; height: auto; }
.inb-g, .inb-n { position: absolute; padding: 0; border: 0; background: none; min-width: 44px; min-height: 44px; border-radius: 12px; }
.inb-g { left: 19%; top: 24%; width: 15%; height: 30%; }
.inb-g img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) invert(1) brightness(.95); opacity: .5; }
.inb-n { left: 72%; top: 28%; width: 14%; height: 18%; }
.inb-g:disabled, .inb-n:disabled { opacity: 1; }
.inb-g.found { outline: 3px solid var(--gold); outline-offset: 2px; }
.inb-n.seen { outline: 2px dashed rgba(234, 227, 215, .6); outline-offset: 2px; }

@media (max-height: 700px) {
  .inb-court { min-height: 250px; }
  .inb-split img { height: 110px; }
  .inb-scan { max-width: 290px; }
}