/* Eyewitness identification lesson. All rules scoped under .ewi-* */
.ewi-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ewi-note { font-size: 12px; color: var(--faint); text-align: center; max-width: 300px; }

.ewi-frame { width: 150px; height: 230px; border-radius: 18px; overflow: hidden; background: rgba(234, 227, 215, .05); border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; }
.ewi-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ewi-blank { font: 700 56px/1 var(--sans); color: var(--faint); }

.ewi-grid { width: 100%; max-width: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ewi-pick { position: relative; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--line-strong); background: rgba(234, 227, 215, .04); cursor: pointer; transition: border-color .2s, opacity .3s; }
.ewi-pick img { display: block; width: 100%; height: 118px; object-fit: cover; object-position: top; }
.ewi-pick span { position: absolute; left: 6px; top: 4px; font: 700 13px/1 var(--sans); color: var(--text); text-shadow: 0 1px 3px #000; }
.ewi-pick:disabled { cursor: default; }
.ewi-grid:has(.ewi-chosen) .ewi-pick:not(.ewi-chosen) { opacity: .45; }
.ewi-pick.ewi-chosen { border-color: var(--gold); }
.btn.ewi-chosen { border-color: var(--gold); color: var(--gold); }

.ewi-pair { display: flex; gap: 16px; justify-content: center; }
.ewi-face { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 130px; }
.ewi-face img { width: 130px; height: 200px; object-fit: cover; border-radius: 14px; border: 2px solid var(--line-strong); }
.ewi-face.real img { border-color: var(--gold); }
.ewi-face span { font: 600 13px/1.2 var(--sans); color: var(--dim); text-align: center; }

.ewi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: 100%; max-width: 340px; }
.ewi-row img { width: 100%; height: 84px; object-fit: cover; object-position: top; border-radius: 8px; }

.ewi-quote { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.ewi-quote span { font: 600 15px/1.3 var(--sans); padding: 10px 14px; border-radius: 14px; }
.ewi-q1 { align-self: flex-start; background: rgba(234, 227, 215, .08); color: var(--text); }
.ewi-q2 { align-self: flex-end; background: rgba(252, 192, 80, .16); color: var(--gold); }

@media (max-height: 700px) {
  .ewi-frame { width: 120px; height: 184px; }
  .ewi-pick img { height: 84px; }
  .ewi-face img { width: 96px; height: 140px; }
  .ewi-face { width: 104px; }
  .ewi-row img { height: 70px; }
}