/* Impostor syndrome lesson. All rules scoped under .imp-* */
.imp-sc { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.imp-cap { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }
.imp-hero img { display: block; margin: 0 auto; width: 260px; max-width: 100%; max-height: 30vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123, 92, 253, .3)); }

/* Lena's desk */
.imp-desk { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.imp-top { display: flex; align-items: center; gap: 8px; }
.imp-lena { width: 92px; height: 92px; object-fit: cover; object-position: top; border-radius: 50%; background: #2A2140; border: 2px solid var(--violet); flex: none; }
.imp-thought { position: relative; flex: 1; min-height: 20px; padding: 8px 12px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); font: 600 16px/1.3 var(--serif); opacity: 0; }
.imp-thought:not(:empty) { opacity: 1; }
.imp-thought::before { content: ''; position: absolute; left: -8px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.imp-pop { animation: imp-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes imp-pop { from { transform: scale(.85); opacity: .2; } }
.imp-win { position: relative; align-self: center; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--gold); box-shadow: 0 0 22px rgba(252, 192, 80, .25); opacity: 0; transition: transform .45s cubic-bezier(.5,0,.75,0), opacity .45s; }
.imp-win.imp-in { opacity: 1; animation: imp-drop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes imp-drop { from { transform: translateY(-30px) scale(.9); opacity: 0; } }
.imp-win img { width: 72px; height: 72px; object-fit: contain; }
.imp-win b { font: 700 16px/1.25 var(--serif); max-width: 170px; }
.imp-stamp { position: absolute; right: -6px; bottom: -12px; max-width: 200px; font: 800 12.5px var(--sans); font-style: normal; color: #1A1430; background: #D9D2EE; padding: 3px 9px; border-radius: 6px; rotate: -4deg; opacity: 0; transform: scale(1.6); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.imp-stamped .imp-stamp { opacity: 1; transform: scale(1); }
.imp-win.imp-to-no { transform: translateY(110px) scale(.3); opacity: 0; }
.imp-win.imp-to-bad { transform: translate(110px, 110px) scale(.3); opacity: 0; }
.imp-slipping .imp-win { border-color: var(--line-strong); box-shadow: none; }
.imp-trays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transition: opacity .4s; }
.imp-first .imp-trays { opacity: 0; }
.imp-tray { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-height: 76px; border-radius: 12px; border: 2px dashed var(--line-strong); background: rgba(255, 255, 255, .02); text-align: center; transition: border-color .3s, background .3s; }
.imp-tray span { font: 800 12px/1.2 var(--sans); color: var(--dim); }
.imp-tray b { font: 800 22px var(--sans); color: var(--text); }
.imp-tray ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.imp-tray li { font: 600 12px/1.2 var(--sans); color: var(--faint); }
.imp-good { border-color: var(--mint); }
.imp-good span { color: var(--mint); }
.imp-bad { opacity: .3; }
.imp-slipping .imp-bad { opacity: 1; }
.imp-bad.imp-got { border-color: #B9A8F0; background: rgba(123, 92, 253, .12); }
.imp-bad.imp-got b { color: #B9A8F0; }
.imp-no.imp-got { border-color: var(--faint); }

/* trays are tap targets */
button.imp-tray { font: inherit; color: var(--text); cursor: default; }
.imp-tray.imp-live { cursor: pointer; }
.imp-tray.imp-picked { box-shadow: 0 0 0 2px var(--gold); }

/* which one */
.imp-cases { display: flex; flex-direction: column; gap: 8px; }
.imp-case { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, opacity .3s; }
.imp-case:disabled { cursor: default; }
.imp-case img { width: 58px; height: 58px; flex: none; object-fit: cover; object-position: top; border-radius: 50%; background: #2A2140; }
.imp-case div { display: flex; flex-direction: column; gap: 1px; }
.imp-case b { font: 700 17px var(--serif); }
.imp-case small { font: 600 12.5px var(--sans); color: var(--faint); }
.imp-case span { font: 600 15px/1.3 var(--sans); }
.imp-case em { font-style: normal; font: 800 12px var(--sans); color: var(--dim); }
.imp-case em:empty { display: none; }
.imp-case.imp-yes-case { border-color: var(--gold); }
.imp-case.imp-yes-case em { color: var(--gold); }
.imp-case.imp-no-case { opacity: .75; }
.imp-case.imp-miss { border-color: var(--red); }

/* the old man */
.imp-neil { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.imp-said { max-width: 320px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #F4EEFF; color: #1A1430; font: 600 16px/1.3 var(--serif); }
.imp-neil img { width: 180px; max-width: 60%; max-height: 26vh; object-fit: contain; filter: brightness(0) drop-shadow(0 0 14px rgba(185, 168, 240, .6)); transition: filter 1s; }
.imp-neil.imp-lit img { filter: drop-shadow(0 16px 28px rgba(252, 192, 80, .35)); }

@media (max-height: 700px) {
  .imp-lena { width: 72px; height: 72px; }
  .imp-win img { width: 54px; height: 54px; }
  .imp-tray { min-height: 66px; }
  .imp-case img { width: 46px; height: 46px; }
  .imp-case span { font-size: 14px; }
  .imp-said { font-size: 15px; }
}