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

/* the blend */
.avg-blend { position: relative; width: 148px; aspect-ratio: 3 / 4; border-radius: 50% / 42%; overflow: hidden; background: var(--surface); border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(252,192,80,.35); }
.avg-blend canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.avg-blend canvas.top { opacity: 0; }
.avg-blend .avg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 13px var(--sans); color: var(--dim); text-align: center; padding: 10px; }
.avg-cap { min-height: 18px; font: 800 14px var(--sans); color: var(--gold); text-align: center; }
.avg-thumbs { display: grid; grid-template-columns: repeat(4, 62px); gap: 8px; justify-content: center; }
.avg-t { position: relative; width: 62px; height: 82px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: opacity .3s, border-color .3s, scale .2s; animation: avgDeal .45s cubic-bezier(.2,.8,.2,1) both; }
.avg-t img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.avg-t.in { opacity: .35; border-color: var(--gold); }
.avg-t.fav { border-color: var(--violet-bright); box-shadow: 0 0 10px rgba(169,155,255,.6); }
.avg-t:disabled { cursor: default; }
@keyframes avgDeal { from { opacity: 0; translate: 0 -40px; rotate: -10deg; } }

/* two blends side by side */
.avg-pair { display: flex; gap: 18px; justify-content: center; }
.avg-pair > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avg-pair .avg-blend { width: 128px; }
.avg-pair span { font: 800 13.5px var(--sans); color: var(--dim); }

/* Galton */
.avg-old { width: 230px; border-radius: 12px; display: block; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

@media (max-height: 700px) {
  .avg-blend { width: 120px; }
  .avg-thumbs { grid-template-columns: repeat(4, 54px); gap: 5px; }
  .avg-t { width: 54px; height: 68px; }
  .avg-pair .avg-blend { width: 112px; }
  .avg-old { width: 190px; }
}

/* three blends to pick from */
.avg-sc > .choices.avg-three { display: flex; flex-direction: row; justify-content: center; gap: 16px; width: 100%; }
.avg-three .choice { flex: 0 1 auto; padding: 6px; min-height: 0; justify-content: center; }
.avg-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avg-col .avg-blend { width: 84px; }
.avg-col span { font: 800 13.5px var(--sans); color: var(--dim); }
@media (max-height: 700px) { .avg-col .avg-blend { width: 76px; } }