/* Echo chamber (media) lesson. All rules scoped under .ech-* */

/* the room */
.ech-room { position: relative; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
.ech-room img { display: block; width: 100%; }
.ech-room small { position: absolute; right: 8px; bottom: 6px; font: 600 12px var(--sans); color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ech-ring { position: absolute; left: 50%; top: 52%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgba(252,192,80,.85); opacity: 0; animation: echRing 2.4s ease-out 3 both; pointer-events: none; }
.ech-ring:nth-of-type(2) { animation-delay: .45s; }
.ech-ring:nth-of-type(3) { animation-delay: .9s; }
@keyframes echRing { 0% { opacity: .9; scale: .3; } 70% { opacity: .35; } 100% { opacity: 0; scale: 8; } }

/* the street and the vote */
.ech-street { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.ech-street img { display: block; width: 100%; }
.ech-poll { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; padding: 8px 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,.4); text-align: center; white-space: nowrap; animation: echDrop .55s cubic-bezier(.2,.8,.2,1.2) .3s both; }
@keyframes echDrop { from { opacity: 0; translate: -50% -24px; } }
.ech-poll small { display: block; font: 700 11.5px var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.ech-poll b { font: 800 17px var(--sans); }

/* the group */
.ech-group { width: 100%; max-width: 350px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ech-me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--violet-bright); }
.ech-me div { display: flex; flex-direction: column; }
.ech-me b { font: 800 16px var(--sans); }
.ech-me small { font: 600 12.5px var(--sans); color: var(--dim); }
.ech-me u { text-decoration: none; color: var(--gold); font-weight: 800; }
.ech-you { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: var(--violet); color: #fff; font: 800 12px var(--sans); font-style: normal; }
.ech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ech-rep { display: flex; align-items: flex-start; gap: 7px; min-height: 48px; padding: 7px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; font: 600 13.5px/1.25 var(--sans); animation: echIn .4s cubic-bezier(.2,.8,.2,1) both; transition: opacity .3s, background .3s, border-color .3s; }
button.ech-rep { cursor: pointer; }
@keyframes echIn { from { opacity: 0; translate: 0 14px; } }
.ech-rep > i, .ech-who > i, .ech-out > i { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 12px var(--sans); font-style: normal; color: #0A0E1A; }
.ech-rep.muted { opacity: .38; background: transparent; border-style: dashed; cursor: default; }
.ech-rep.muted span { font-style: italic; color: var(--dim); }
.ech-echo .ech-rep { border-color: rgba(169,155,255,.45); background: rgba(123,92,253,.12); }

/* the walls */
.ech-pin { border-color: var(--line-strong); background: var(--raised); }
.ech-out { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 22px 12px 10px; border-radius: 14px; background: #F4EFE6; color: #1C1A17; font: 700 14.5px/1.3 var(--sans); opacity: 0; translate: 0 -20px; transition: opacity .45s, translate .9s cubic-bezier(.3,.7,.2,1), rotate .9s, filter .9s; }
.ech-out em { position: absolute; left: 12px; top: 5px; font: 700 11.5px var(--sans); font-style: normal; color: #6B6358; text-transform: uppercase; letter-spacing: .08em; }
.ech-out.in { opacity: 1; translate: 0 0; }
.ech-out.bounced { opacity: .45; translate: 12px 0; rotate: 2deg; filter: grayscale(1); }
.ech-backs { display: flex; flex-direction: column; gap: 6px; }
.ech-backs .ech-rep { min-height: 0; }

.ech-hero { display: flex; justify-content: center; }
.ech-hero img { width: 58%; max-width: 220px; filter: drop-shadow(0 10px 22px rgba(123,92,253,.3)); }

/* Maya and Sam */
.choices.ech-two .choice { justify-content: flex-start; text-align: left; }
.ech-who { display: flex; align-items: center; gap: 10px; }
.ech-who > i { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
.ech-who div { display: flex; flex-direction: column; }
.ech-who b { font: 800 15px var(--sans); }
.ech-who span { font: 500 14px/1.3 var(--sans); }

@media (max-height: 700px) {
  .ech-street img { width: 84%; margin: 0 auto; }
  .ech-rep { min-height: 44px; padding: 6px 7px; font-size: 13px; }
  .ech-me { padding: 8px 10px; }
  .ech-hero img { width: 44%; }
  .ech-out { padding-top: 20px; font-size: 13.5px; }
}