/* Hedge Funds lesson. All rules scoped under .hdg-* */
.hdg-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hdg-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; min-height: 16px; }
.hdg-hero img { display: block; width: 100%; max-width: 300px; margin: 0 auto; }

/* the bet */
.hdg-wb img { display: block; width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: hdg-pop .5s both; }
.hdg-wb.sm img { width: 64px; height: 64px; }
.hdg-sides { display: grid; grid-template-columns: 1fr 86px 1fr; align-items: center; gap: 6px; width: 100%; max-width: 360px; }
.hdg-side { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .35s, opacity .35s, transform .35s; }
.hdg-side img, .hdg-two .choice img { width: 100%; max-width: 110px; height: 72px; object-fit: contain; }
.hdg-side b, .hdg-two .choice b { font: 800 14px var(--sans); color: var(--text); text-align: center; }
.hdg-side em, .hdg-two .choice em { font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.hdg-side.ix { animation: hdg-inl .6s .1s both; }
.hdg-side.hf { animation: hdg-inr .6s .1s both; }
.hdg-bet.l .hdg-side.ix, .hdg-bet.r .hdg-side.hf { border-color: var(--gold); transform: scale(1.04); }
.hdg-bet.l .hdg-side.hf, .hdg-bet.r .hdg-side.ix { opacity: .45; }
.hdg-pot { position: relative; height: 96px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hdg-pot i { display: block; width: 52px; height: 12px; margin-top: -3px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); animation: hdg-drop .45s both; }
.hdg-pot i:nth-child(1) { animation-delay: .7s; } .hdg-pot i:nth-child(2) { animation-delay: .85s; } .hdg-pot i:nth-child(3) { animation-delay: 1s; }
.hdg-pot b { margin-top: 6px; font: 800 13px var(--sans); color: var(--gold); white-space: nowrap; animation: hdg-pop .4s 1.1s both; }
@keyframes hdg-inl { from { opacity: 0; transform: translateX(-40px); } }
@keyframes hdg-inr { from { opacity: 0; transform: translateX(40px); } }
@keyframes hdg-drop { from { opacity: 0; transform: translateY(-70px); } }
@keyframes hdg-pop { from { opacity: 0; transform: scale(.7); } }

/* 2 and 20 */
.hdg-fee { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 22px; }
.hdg-you, .hdg-mgr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hdg-amt { font: 800 24px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 140px; text-align: center; }
.hdg-gain { display: grid; grid-template-columns: repeat(5, 22px); gap: 4px; min-height: 48px; align-content: end; }
.hdg-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); opacity: 0; transform: translateY(-30px); transition: opacity .25s, transform .25s; }
.hdg-coin.in { opacity: 1; transform: none; }
.hdg-coin.fly { transform: translate(var(--dx), var(--dy)) scale(.8); opacity: 0; transition: transform .6s ease-in, opacity .6s .35s; }
.hdg-base { width: 126px; height: 92px; border-radius: 12px; display: grid; place-items: center; font: 700 14px var(--sans); color: #fff; background: linear-gradient(180deg, var(--violet-bright), var(--violet-deep)); }
.hdg-who { font: 700 13px var(--sans); color: var(--dim); }
.hdg-mgr img { height: 150px; width: auto; }
.hdg-tray { display: flex; flex-direction: column; gap: 4px; min-height: 56px; width: 140px; align-items: center; justify-content: flex-end; }
.hdg-tag { font: 700 12.5px var(--sans); color: var(--gold); padding: 3px 9px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); opacity: 0; transition: opacity .3s; }
.hdg-tag.on { opacity: 1; }
.hdg-fee .hdg-note { width: 100%; }

/* the pickers */
.hdg-board { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hdg-mkl { font: 700 13px var(--sans); color: var(--text); display: flex; align-items: center; gap: 8px; }
.hdg-mkl::before { content: ''; width: 22px; border-top: 2px dashed var(--mint); }
.hdg-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hdg-col { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; min-height: 44px; border-radius: 12px; background: none; border: 1px solid transparent; color: inherit; font: inherit; }
button.hdg-col { cursor: pointer; }
.hdg-col.ix { background: var(--surface); border-color: var(--line); }
.hdg-v { font: 800 13px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.hdg-trk { position: relative; width: 26px; height: 96px; border-radius: 6px; background: rgba(255,255,255,.06); }
.hdg-trk::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: 62.5%; border-top: 2px dashed var(--mint); opacity: .8; }
.hdg-trk i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: linear-gradient(180deg, #FFE7A8, var(--gold)); }
.hdg-col.ix .hdg-trk i { background: linear-gradient(180deg, #7FE0C4, var(--mint)); }
.hdg-col img { height: 58px; width: auto; max-width: 100%; object-fit: contain; }
.hdg-col.ix img { height: 58px; }
.hdg-col.p1 img { filter: hue-rotate(110deg); } .hdg-col.p2 img { filter: hue-rotate(220deg) saturate(1.3); } .hdg-col.p3 img { filter: hue-rotate(300deg); }
.hdg-col span { font: 700 12px var(--sans); color: var(--dim); white-space: nowrap; }
.hdg-col.win { border-color: var(--gold); }
.hdg-col.lose .hdg-trk i { background: linear-gradient(180deg, #C9BEFF, var(--violet-bright)); }
.hdg-avg { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.hdg-avg span { font: 600 13px var(--sans); color: var(--dim); }
.hdg-avg b { font: 800 20px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.hdg-avg.hold { border-color: var(--mint); }
.hdg-board.behind .hdg-avg { border-color: var(--line-strong); }
.hdg-board.behind .hdg-avg b { color: var(--violet-bright); }
.hdg-fly { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); transition: transform 1s ease-in-out; z-index: 2; pointer-events: none; }
.hdg-fly.go { transform: translateX(var(--dx)); }

/* who won */
.hdg-pick { width: 100%; max-width: 360px; }
.hdg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hdg-two .choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; min-height: 44px; }
.hdg-grow { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100px; width: 100%; margin-top: 6px; }
.hdg-grow i { display: block; width: 46px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #FFE7A8, var(--gold)); order: 2; }
.hdg-grow b { font: 800 18px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; order: 1; }

@media (max-height: 700px) {
  .hdg-wb img { width: 72px; height: 72px; }
  .hdg-wb.sm img { width: 48px; height: 48px; }
  .hdg-side img, .hdg-two .choice img { height: 54px; }
  .hdg-pot { height: 80px; }
  .hdg-mgr img { height: 120px; }
  .hdg-base { height: 72px; }
  .hdg-trk { height: 78px; }
  .hdg-col img, .hdg-col.ix img { height: 46px; }
}