/* Efficient Market Hypothesis lesson. All rules scoped under .emh-* */
.emh-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.emh-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* the ticker */
.emh-tk { position: relative; width: 100%; max-width: 330px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 10px; align-items: center; }
.emh-co { display: flex; align-items: center; gap: 10px; }
.emh-logo { width: 38px; height: 38px; border-radius: 11px; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 50%, var(--gold-deep)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.emh-co b { display: block; font: 800 16px var(--sans); color: var(--text); }
.emh-co span { font: 600 12.5px var(--sans); color: var(--dim); }
.emh-spark { grid-column: 1 / 3; width: 100%; height: 34px; }
.emh-spark path { fill: none; stroke: var(--violet-bright); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; animation: emhLine 2.2s ease-in-out infinite alternate; }
@keyframes emhLine { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
.emh-tk.up .emh-spark path { stroke: var(--mint); animation: none; stroke-dasharray: none; }
.emh-px { grid-column: 2; grid-row: 1; text-align: right; }
.emh-px span { display: block; font: 600 12px var(--sans); color: var(--dim); }
.emh-px b { font: 800 26px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.emh-tk.up .emh-px b { color: var(--mint); }
.emh-tk.jump .emh-px b { animation: emhJump .5s ease-out; }
@keyframes emhJump { 0% { transform: scale(1.35); } 100% { transform: none; } }
.emh-got { grid-column: 1 / 3; text-align: center; padding: 8px; border-radius: 12px; background: rgba(63,214,154,.12); font: 700 14px var(--sans); color: var(--text); }
.emh-got b { color: var(--mint); }
.emh-mini { padding: 10px 14px; }
.emh-mini .emh-spark { height: 24px; }

/* the news */
.emh-ping { width: 100%; max-width: 330px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #23293D; border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: 0; translate: 0 -14px; transition: opacity .25s, translate .25s cubic-bezier(.2,.8,.2,1); min-height: 64px; }
.emh-ping.on { opacity: 1; translate: 0 0; }
.emh-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #FF8A7A, #C9463A); }
.emh-ping span { display: block; font: 600 12px var(--sans); color: var(--dim); }
.emh-ping b { display: block; font: 700 14.5px/1.25 var(--sans); color: var(--text); }
.btn.emh-buy[disabled] { opacity: .55; }

/* the slow replay */
.emh-line { position: relative; width: 100%; max-width: 330px; height: 128px; }
.emh-track { position: absolute; left: 8px; right: 8px; top: 18px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.emh-head { position: absolute; top: -6px; left: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 12px rgba(169,155,255,.8); }
.emh-mk { position: absolute; font: 600 12.5px/1.3 var(--sans); color: var(--dim); opacity: .45; transition: opacity .3s, color .3s; }
.emh-mk b { display: block; font: 800 13.5px var(--sans); color: var(--text); }
.emh-mk::before { content: ''; position: absolute; top: -26px; width: 2px; height: 22px; background: var(--line-strong); }
.emh-mk0 { left: 0; top: 40px; opacity: 1; }
.emh-mk0::before { left: 8px; }
.emh-mk1 { left: 20px; top: 84px; }
.emh-mk1::before { left: 2px; top: -70px; height: 66px; }
.emh-mk2 { right: 0; top: 40px; text-align: right; }
.emh-mk2::before { right: 8px; }
.emh-mk.on { opacity: 1; }
.emh-mk1.on b { color: var(--mint); }
.emh-mk2.on b { color: var(--gold); }

.emh-photo { margin: 0; width: 100%; max-width: 360px; }
.emh-photo img { display: block; width: 100%; border-radius: 12px; }
.emh-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* the afternoon */
.emh-clock { display: flex; align-items: baseline; gap: 10px; font: 600 12.5px var(--sans); color: var(--dim); }
.emh-clock b { font: 800 20px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 86px; }
.emh-grid, .emh-pk .choices.emh-four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; }
.emh-pk { width: 100%; display: flex; justify-content: center; }
.emh-pk .choice { padding: 0; min-height: 0; background: transparent; border: none; box-shadow: none; display: block; }
.emh-c { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 4px 8px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); text-align: left; min-height: 92px; }
.emh-c img { grid-row: 1 / 3; width: 38px; height: 52px; object-fit: contain; }
.emh-ct b { display: block; font: 800 13px/1.15 var(--sans); color: var(--text); }
.emh-ct span { display: block; font: 600 12px/1.2 var(--sans); color: var(--dim); }
.emh-bar { grid-column: 2; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.emh-bar i { display: block; height: 100%; width: 0; background: var(--red); }
.emh-c em { position: absolute; right: 10px; bottom: 6px; font: 800 12.5px var(--sans); font-style: normal; color: var(--red); }
.emh-c .emh-bar { margin-bottom: 14px; }
.emh-halt { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; border-radius: 13px; background: rgba(10,14,26,.86); font: 800 12.5px/1.25 var(--sans); color: var(--gold); text-align: center; opacity: 0; transition: opacity .2s; }
.emh-c.halted .emh-halt { opacity: 1; }
.emh-c.worst { border-color: rgba(216,85,85,.6); }
.emh-pk .choice.right .emh-c { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(63,214,154,.35); }
.emh-pk .choice.wrong .emh-c { border-color: var(--red); }

/* the prize */
.emh-medal { width: 210px; height: auto; }
.emh-two { display: flex; gap: 12px; width: 100%; max-width: 330px; }
.emh-two div { flex: 1; text-align: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.emh-two b { display: block; font: 800 14px var(--sans); color: var(--text); }
.emh-two span { font: 600 12.5px var(--sans); color: var(--dim); }

/* the feed */
.emh-post { width: 100%; max-width: 300px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #2A2140, #161C2E); border: 1px solid var(--line-strong); }
.emh-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 12.5px var(--sans); color: var(--dim); }
.emh-ph i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-bright), var(--violet-deep)); }
.emh-post b { font: 800 19px/1.3 var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .emh-sc { gap: 9px; }
  .emh-c { min-height: 80px; padding: 6px 8px 6px 6px; }
  .emh-c img { height: 44px; }
  .emh-medal { width: 170px; }
  .emh-photo { max-width: 320px; }
  .emh-px b { font-size: 23px; }
}