/* ── Derby (party mode) — SPEC-derby-build §3 ─────────────────────────────────
 * Canvas agents/cto/design/derby/Main + TV-*.dc.html. One full-stage scene per frame group (screens/derby*.js).
 * Navy stage, Audiowide display, gold #ffc93c for the moment that matters, fence red #d11212, sealed green #2fd47a.
 * Everything that moves stops under prefers-reduced-motion (the states still switch). */
.game--derby {
  --dy-gold: #ffc93c;
  --dy-blue: #429bfc;
  --dy-red: #fb6161;
  --dy-fence: #d11212;
  --dy-green: #2fd47a;
  --dy-grey: #8e98a0;
  --dy-ink: #00091f;
  --dy-body: 'Archivo', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-gold: #ffc93c; /* the global .gold / .neg helpers read Hold'em's tokens */
  --hx-red: #fb6161;
  color: #d1d5d8;
  font-family: var(--dy-body);
  letter-spacing: 0;
  text-transform: none;
}
.dy-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 40%, #0b2a6e 0%, #03123a 48%, #00091f 100%); }
.game--derby[data-phase="race"] .dy-bg, .game--derby[data-phase="blocks"] .dy-bg { background: radial-gradient(ellipse 70% 60% at 50% 34%, #0b2a6e 0%, #03123a 50%, #00091f 100%); }
.dy-scene, .dy-fx { position: absolute; inset: 0; }
.dy-fx { pointer-events: none; z-index: 20; }

/* Type */
.dy-eye { font-family: var(--dh-font-display); font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: var(--dy-grey); }
.dy-eye--blue, .dy-tone--blue { color: var(--dy-blue); }
.dy-eye--gold, .dy-tone--gold { color: var(--dy-gold); }
.dy-eye--light { color: #d1d5d8; }
.dy-tone--green { color: var(--dy-green); }
.dy-tone--red { color: var(--dy-red); }
.dy-tone--grey { color: var(--dy-grey); }
.dy-disp { font-family: var(--dh-font-display); }

/* Header */
.dy-head { position: absolute; left: 72px; right: 72px; top: 44px; z-index: 6; display: flex; align-items: center; justify-content: space-between; }
.dy-head__l { display: flex; align-items: baseline; gap: 28px; min-width: 0; }
.dy-title { font-family: var(--dh-font-display); font-size: 44px; color: #fff; letter-spacing: .04em; }
.game--derby[data-phase="lobby"] .dy-title { font-size: 48px; }
.game--derby[data-phase="race"] .dy-head, .game--derby[data-phase="blocks"] .dy-head { top: 36px; }
.game--derby[data-phase="race"] .dy-title, .game--derby[data-phase="blocks"] .dy-title { font-size: 40px; }
.dy-head__eye { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-pill { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; background: rgba(11, 13, 17, .44); border: 1px solid rgba(66, 155, 252, .3); font-family: var(--dh-font-display); font-size: 22px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.dy-pill--url { color: var(--dy-blue); text-transform: none; }
.dy-pill--gold { color: var(--dy-gold); border-color: rgba(255, 201, 60, .55); background: rgba(255, 201, 60, .1); }

/* Avatars (holdem-art avatarHtml, Derby sizes) */
.dy-av80 { width: 80px; height: 80px; font-size: 28px; box-shadow: 0 0 0 4px #00091f, 0 0 0 6px rgba(255, 255, 255, .2); }
.dy-av68 { width: 68px; height: 68px; font-size: 24px; }
.dy-av110 { width: 110px; height: 110px; font-size: 38px; }
.dy-av240 { width: 240px; height: 240px; font-size: 80px; box-shadow: 0 0 0 8px #00091f, 0 0 0 15px var(--dy-gold), 0 0 110px rgba(255, 201, 60, .6); }
.dy-av34 { width: 34px; height: 34px; font-size: 13px; }
.dy-av52 { width: 52px; height: 52px; font-size: 18px; }

/* Seat cards: the saddle cloth (all scenes) */
.dy-band { position: absolute; left: 0; right: 0; top: 826px; height: 254px; background: linear-gradient(180deg, #03123a, #00091f); box-shadow: inset 0 2px 0 rgba(66, 155, 252, .25); }
.dy-seat, .dy-lseat { position: absolute; display: flex; flex-direction: column; align-items: center; }
.dy-seat { top: 26px; }
.dy-lseat { top: 852px; width: 276px; }
.dy-cloth { position: relative; box-sizing: border-box; width: 300px; height: 186px; border-radius: 14px 14px 56px 56px; background: linear-gradient(180deg, #122044, #0c1631); display: flex; flex-direction: column; align-items: center; padding-top: 18px; gap: 6px;
  box-shadow: inset 0 0 0 4px var(--dy-blue), inset 0 0 0 11px #122044, inset 0 0 0 13px rgba(66, 155, 252, .25), 0 10px 30px rgba(0, 0, 0, .5); }
.dy-cloth--lobby { width: 262px; border-radius: 13px 13px 50px 50px; }
.dy-seat__name { font-family: var(--dh-font-display); text-transform: uppercase; font-size: 24px; line-height: 1; color: #fff; letter-spacing: .06em; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.dy-seat__name.dim { color: rgba(255, 255, 255, .45); }
.dy-seat__chips { display: flex; align-items: center; gap: 8px; }
.dy-seat__chips b { font-family: var(--dh-font-display); font-weight: 400; font-size: 20px; line-height: 1; color: #fff; }
.dy-seat__chips.gold b { color: var(--dy-gold); }
.dy-tab { position: absolute; left: 20px; top: -12px; width: 46px; height: 32px; border-radius: 10px; background: #014cfd; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-size: 18px; box-shadow: 0 0 0 3px #00091f; }
.dy-cloth--lobby .dy-tab { left: 18px; }
.dy-seat__tag { margin-top: 8px; font-size: 14px; white-space: nowrap; }
.dy-seat__delta { margin-top: 6px; font-family: var(--dh-font-display); font-size: 18px; color: var(--dy-grey); }
.dy-seat__delta.gold { color: var(--dy-gold); }
.dy-seat.is-gold .dy-cloth { box-shadow: inset 0 0 0 4px var(--dy-gold), inset 0 0 0 11px #122044, inset 0 0 0 13px rgba(66, 155, 252, .25), 0 0 50px rgba(255, 201, 60, .35); }
.dy-seat.is-gold .dy-av80 { box-shadow: 0 0 0 4px #00091f, 0 0 0 8px var(--dy-gold); }
.dy-seat.is-blue .dy-cloth { box-shadow: inset 0 0 0 4px var(--dy-blue), inset 0 0 0 11px #122044, inset 0 0 0 13px rgba(66, 155, 252, .25), 0 0 40px rgba(1, 76, 253, .45); }
.dy-seat.is-blue .dy-av80 { box-shadow: 0 0 0 4px #00091f, 0 0 0 7px var(--dy-blue); }
.dy-seat.is-green .dy-av80 { box-shadow: 0 0 0 4px #00091f, 0 0 0 7px var(--dy-green); }
.dy-seat.is-broke .dy-av80 { filter: grayscale(.7); }
.dy-seat__env { position: absolute; right: -14px; top: -18px; }
.dy-seat.is-sealing .dy-env { animation: dy-env 900ms cubic-bezier(.3, 1.4, .5, 1) both; }
.dy-seat.is-sealing .dy-cloth { animation: dy-sealglow 1.4s ease both; }
@keyframes dy-env { 0% { opacity: 0; transform: translateY(-40px) rotate(-20deg) scale(.6); } 60% { opacity: 1; transform: translateY(0) rotate(4deg) scale(1.2); } 100% { opacity: 1; transform: none; } }
@keyframes dy-sealglow { 0% { box-shadow: inset 0 0 0 4px var(--dy-blue), inset 0 0 0 11px #122044, 0 0 40px rgba(1, 76, 253, .45); } 40% { box-shadow: inset 0 0 0 4px var(--dy-green), inset 0 0 0 11px #122044, 0 0 60px rgba(47, 212, 122, .6); } 100% { box-shadow: inset 0 0 0 4px var(--dy-green), inset 0 0 0 11px #122044, 0 10px 30px rgba(0, 0, 0, .5); } }
.dy-winstack { position: absolute; right: 22px; top: -16px; }
.dy-dots i { font-style: normal; animation: dy-dot 1.2s infinite; }
.dy-dots i:nth-child(2) { animation-delay: .2s; }
.dy-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dy-dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* ── Lobby (frame Main) ─────────────────────────────────────────────────── */
.dy-turf { position: absolute; left: 0; right: 0; top: 300px; height: 780px;
  background: url("img/derby/lobby-racecourse.jpg") no-repeat; background-size: 2100px auto; background-position: -230px -94px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .3) 30%, #000 50%, #000 64%, rgba(0, 0, 0, .35) 80%, transparent 94%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 14%, rgba(0, 0, 0, .45) 30%, #000 52%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .3) 30%, #000 50%, #000 64%, rgba(0, 0, 0, .35) 80%, transparent 94%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 14%, rgba(0, 0, 0, .45) 30%, #000 52%);
  mask-composite: intersect; }
.dy-qr { position: absolute; left: 72px; top: 132px; width: 440px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.dy-qr__box { width: 440px; height: 440px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 10px rgba(1, 76, 253, .35), 0 0 120px rgba(1, 76, 253, .55); display: flex; align-items: center; justify-content: center; }
.dy-qr__box svg { width: 380px; height: 380px; display: block; }
.dy-pitch { position: absolute; left: 600px; right: 72px; top: 132px; display: flex; flex-direction: column; gap: 26px; }
.dy-pitch__intro { display: flex; flex-direction: column; gap: 12px; }
.dy-pitch__h { margin: 0; font-family: var(--dh-font-display); font-size: 100px; line-height: 1; color: #fff; font-weight: 400; }
.dy-pitch__p { margin: 0; font-size: 28px; color: var(--dy-grey); }
.dy-chips { display: flex; gap: 14px; }
.dy-chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-family: var(--dh-font-display); font-size: 20px; color: #fff; letter-spacing: .06em; }
.dy-chip.gold { background: rgba(255, 201, 60, .14); color: var(--dy-gold); }
.dy-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 6px; }
.dy-how__c { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 20px; background: rgba(6, 18, 50, .78); box-shadow: inset 0 0 0 1px rgba(66, 155, 252, .22), 0 16px 40px rgba(0, 0, 0, .35); }
.dy-how__c svg { flex: none; }
.dy-how__tx { display: flex; flex-direction: column; gap: 6px; }
.dy-how__tx b { font-family: var(--dh-font-display); font-weight: 400; font-size: 22px; color: #fff; }
.dy-how__tx span { font-size: 19px; color: #e4e8ec; }
.dy-lseat.is-open .dy-cloth { box-shadow: inset 0 0 0 2px rgba(66, 155, 252, .25); }
.dy-lseat__ring { width: 80px; height: 80px; border-radius: 50%; border: 2px dashed rgba(66, 155, 252, .4); box-sizing: border-box; }
.dy-lseat__hint { font-size: 16px; color: var(--dy-grey); }
.dy-lseat__hint.blue { color: var(--dy-blue); }
.dy-lseat.is-joining .dy-cloth { box-shadow: inset 0 0 0 4px var(--dy-blue), inset 0 0 0 11px #122044, inset 0 0 0 13px rgba(66, 155, 252, .25), 0 0 40px rgba(1, 76, 253, .45); }
.dy-lseat__flick { position: relative; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 0 4px #00091f, 0 0 0 6px var(--dy-blue); overflow: hidden; background: #122044; }
.dy-flick { position: absolute; inset: 0; width: 80px; height: 80px; object-fit: cover; opacity: 0; animation: dy-flick 1.5s infinite steps(1); }
@keyframes dy-flick { 0% { opacity: 1; } 20%, 100% { opacity: 0; } }
.dy-caret { color: var(--dy-blue); animation: dy-blink .8s infinite steps(1); }
@keyframes dy-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.dy-lseat.is-just .dy-cloth { box-shadow: inset 0 0 0 4px var(--dy-gold), inset 0 0 0 11px #122044, inset 0 0 0 13px rgba(255, 201, 60, .3), 0 0 50px rgba(255, 201, 60, .4); }
.dy-lseat.is-just .dy-av80 { box-shadow: 0 0 0 4px #00091f, 0 0 0 7px var(--dy-gold), 0 0 30px rgba(255, 201, 60, .6); }
.dy-pop { animation: dy-pop 700ms cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dy-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ── Parade (frame TV-Parade) ───────────────────────────────────────────── */
.dy-spot { position: absolute; left: 120px; top: 176px; width: 760px; height: 700px; }
.dy-spot i { position: absolute; inset: 0; transition: background 600ms; }
.dy-parade__hero { position: absolute; left: 150px; top: 300px; width: 300px; height: 300px; }
.dy-walk { position: relative; width: 300px; height: 300px; animation: dy-walkin 700ms cubic-bezier(.2, .9, .3, 1) both; }
.dy-walk svg { display: block; }
.dy-walk__n { position: absolute; left: 104px; top: 170px; width: 92px; height: 70px; border-radius: 14px; background: #014cfd; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-size: 44px; box-shadow: 0 0 0 4px #00091f, 0 8px 20px rgba(0, 0, 0, .5); }
@keyframes dy-walkin { 0% { opacity: 0; transform: translateX(-120px); } 100% { opacity: 1; transform: none; } }
.dy-parade__tx { position: absolute; left: 500px; top: 300px; width: 640px; }
.dy-parade__in { display: flex; flex-direction: column; gap: 18px; animation: dy-fadeup 600ms ease both; animation-delay: 120ms; }
@keyframes dy-fadeup { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: none; } }
.dy-parade__name { font-family: var(--dh-font-display); font-size: 84px; line-height: .95; color: #fff; }
.dy-parade__runs { font-family: var(--dh-font-display); font-size: 30px; color: var(--dy-grey); }
.dy-quote { display: flex; gap: 16px; margin-top: 14px; padding: 20px 24px; border-radius: 20px; background: rgba(6, 18, 50, .78); box-shadow: inset 0 0 0 1px rgba(66, 155, 252, .22); }
.dy-quote svg { flex: none; margin-top: 2px; }
.dy-quote > div { display: flex; flex-direction: column; gap: 6px; }
.dy-quote .dy-eye { font-size: 15px; color: var(--dy-blue); }
.dy-quote__tx { font-size: 28px; line-height: 1.3; color: #fff; font-style: italic; }
.dy-parade__board { position: absolute; left: 1200px; top: 220px; width: 600px; height: 600px; }

/* ── Bets before the off (frames TV-Slips, TV-Sealed) ──────────────────── */
.dy-h1 { margin: 0; font-family: var(--dh-font-display); font-size: 64px; line-height: 1; color: #fff; font-weight: 400; }
.dy-slips__top { position: absolute; left: 0; right: 0; top: 112px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.dy-banner { display: flex; align-items: center; gap: 28px; padding: 14px 36px; border-radius: 999px; background: rgba(255, 201, 60, .1); border: 2px solid rgba(255, 201, 60, .6); box-shadow: 0 0 40px rgba(255, 201, 60, .18); }
.dy-banner .dy-eye { color: #fff; }
.dy-banner b { font-family: var(--dh-font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--dy-gold); }
.dy-banner i { width: 2px; height: 40px; background: rgba(255, 201, 60, .4); }
.dy-slips__closed { display: flex; align-items: center; gap: 24px; }
.dy-pill--big { padding: 16px 28px; }
.dy-fencesout { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-radius: 999px; background: rgba(251, 97, 97, .14); border: 1px solid rgba(251, 97, 97, .45); }
.dy-fencesout .dy-eye { font-size: 18px; color: #fff; }
.dy-fencepill { width: 64px; height: 38px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-size: 22px; color: #0b0f14; background: repeating-linear-gradient(135deg, #d11212 0 7px, #fff 7px 14px); }
.dy-slips__grid { position: absolute; left: 90px; right: 90px; top: 300px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 30px; }
.dy-hcard { height: 230px; box-sizing: border-box; padding: 22px 26px; display: flex; gap: 24px; align-items: center; border-radius: 20px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.dy-hcard__silk { position: relative; flex: none; width: 140px; height: 150px; }
.dy-ntile { display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); flex: none; }
.dy-hcard__silk .dy-ntile { position: absolute; right: -6px; bottom: 0; width: 64px; height: 48px; font-size: 26px; box-shadow: 0 0 0 3px #00091f, inset 0 0 0 2px rgba(255, 255, 255, .45); }
.dy-hcard__tx { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.dy-hcard__name { font-family: var(--dh-font-display); font-size: 30px; line-height: 1.05; color: #fff; }
.dy-hcard__q { font-size: 21px; line-height: 1.3; color: #e4e8ec; font-style: italic; }
.dy-prices { display: flex; gap: 10px; flex-wrap: wrap; }
.dy-price { font-family: var(--dh-font-display); font-size: 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid #fff; color: #fff; }
.dy-price--split { border-color: var(--dy-blue); color: var(--dy-blue); }
.dy-price--none { border-color: rgba(142, 152, 160, .7); color: rgba(142, 152, 160, .7); }

/* The sealed overlays (stamp → fences → first thrower; halfway: stamp → next thrower) */
.dy-ov { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.dy-ov:empty { display: none; }
.dy-ov__scrim { position: absolute; inset: 0; background: rgba(0, 9, 31, .74); animation: dy-fade 400ms ease both; }
.dy-ov__beat { position: absolute; inset: 0; }
@keyframes dy-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
.dy-stamp { position: absolute; left: 0; right: 0; top: 380px; display: flex; justify-content: center; animation: dy-stamp 600ms cubic-bezier(.2, .9, .3, 1.2) both; }
.dy-stamp > div { display: flex; align-items: center; gap: 26px; padding: 26px 48px; border-radius: 24px; border: 6px solid var(--dy-green); color: var(--dy-green); background: rgba(0, 30, 20, .55); transform: rotate(-6deg); box-shadow: 0 0 80px rgba(47, 212, 122, .35); }
.dy-stamp span { font-family: var(--dh-font-display); font-size: 104px; line-height: 1; }
@keyframes dy-stamp { 0% { opacity: 0; transform: scale(2.3); } 60% { opacity: 1; transform: scale(1); } 75% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
.dy-fboard { position: absolute; left: 0; right: 0; top: 150px; display: flex; align-items: center; justify-content: center; gap: 80px; animation: dy-fadeup 500ms ease both; }
.dy-fboard__board { width: 640px; height: 640px; flex: none; }
.dy-fboard__tx { display: flex; flex-direction: column; gap: 22px; width: 520px; }
.dy-fboard__tx .dy-eye { font-size: 26px; }
.dy-fboard__list { font-family: var(--dh-font-display); font-size: 64px; line-height: 1; color: #fff; }
.dy-fboard__tx p { margin: 0; font-size: 28px; line-height: 1.35; color: #fff; }
.dy-rule { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border-radius: 20px; background: rgba(6, 18, 50, .85); }
.dy-rule b, .dy-rule em { font-family: var(--dh-font-display); font-weight: 400; font-style: normal; font-size: 26px; }
.dy-rule b { color: #fff; flex: 1; }
.dy-rule--fence { box-shadow: inset 0 0 0 1px rgba(251, 97, 97, .4); }
.dy-rule--fence em { color: #ffb3b3; }
.dy-rule--fence .dy-rule__sw { width: 46px; height: 28px; border-radius: 5px; background: repeating-linear-gradient(135deg, #d11212 0 7px, #fff 7px 14px); flex: none; }
.dy-rule--bull { box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .4); }
.dy-rule--bull em { color: var(--dy-gold); }
.dy-rule--bull .dy-rule__sw { width: 30px; height: 30px; border-radius: 50%; background: var(--dy-gold); box-shadow: 0 0 0 6px #1840A0; flex: none; margin: 0 8px; }
.dy-thrower { position: absolute; left: 0; right: 0; top: 330px; display: flex; align-items: center; justify-content: center; gap: 52px; animation: dy-fadeup 500ms ease both; }
.dy-thrower > div { display: flex; flex-direction: column; gap: 12px; }
.dy-thrower__name { font-family: var(--dh-font-display); font-size: 140px; line-height: .95; color: #fff; }
.dy-thrower__sub { font-family: var(--dh-font-display); font-size: 32px; color: #d1d5d8; }

/* ── The race (frames TV-Race, TV-Steward, TV-Fence) ─────────────────────── */
.dy-rboard { position: absolute; left: 72px; top: 130px; width: 420px; height: 420px; }
.dy-legend { position: absolute; left: 72px; top: 580px; width: 420px; display: flex; flex-direction: column; gap: 12px; }
.dy-leg { display: flex; align-items: center; gap: 12px; font-size: 18px; color: #d1d5d8; }
.dy-leg b { font-family: var(--dh-font-display); font-weight: 400; font-size: 18px; width: 120px; flex: none; }
.dy-leg--note { font-size: 15px; color: var(--dy-grey); }
.dy-leg__sw { width: 30px; height: 18px; border-radius: 4px; flex: none; }
.dy-leg__sw--horse { background: var(--dy-blue); }
.dy-leg__sw--fence { background: repeating-linear-gradient(135deg, #d11212 0 5px, #fff 5px 10px); }
.dy-leg__sw--bull { width: 18px; height: 18px; margin: 0 6px; border-radius: 50%; background: var(--dy-gold); box-shadow: 0 0 10px rgba(255, 201, 60, .8); }
.dy-track { position: absolute; left: 540px; top: 130px; width: 1308px; height: 420px; }
.dy-track__bg { position: absolute; inset: 0; border-radius: 20px; background: #03123a; box-shadow: inset 0 0 0 1px rgba(66, 155, 252, .22), 0 20px 50px rgba(0, 0, 0, .45); }
.dy-track__names { position: absolute; left: 0; top: 0; width: 232px; height: 420px; border-radius: 20px 0 0 20px; background: rgba(8, 22, 58, .85); }
.dy-track__start { position: absolute; left: 232px; top: 0; width: 4px; height: 420px; background: var(--dy-blue); opacity: .6; }
.dy-lane { position: absolute; left: 0; right: 0; height: 68px; background: rgba(66, 155, 252, .08); }
.dy-lane.odd { background: rgba(66, 155, 252, .04); }
.dy-lane.is-fwd { background: rgba(66, 155, 252, .16); box-shadow: inset 0 0 0 2px rgba(66, 155, 252, .75); }
.dy-lane.is-back { background: rgba(251, 97, 97, .14); box-shadow: inset 0 0 0 2px rgba(251, 97, 97, .7); }
.dy-lane.is-blocked { background: rgba(209, 18, 18, .12); box-shadow: inset 0 0 0 2px rgba(251, 97, 97, .6); }
.dy-lane.is-bullblock { background: rgba(255, 201, 60, .12); box-shadow: inset 0 0 0 2px rgba(255, 201, 60, .7); }
.dy-lane.is-sweep::after { content: ''; position: absolute; inset: 0; animation: dy-sweep 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes dy-sweep { 0%, 34%, 100% { background: transparent; box-shadow: none; } 10% { background: rgba(255, 201, 60, .22); box-shadow: inset 0 0 0 3px #ffc93c; } }
.dy-lane__line { position: absolute; left: 232px; right: 0; height: 1px; background: rgba(66, 155, 252, .16); }
.dy-lane__name { position: absolute; left: 4px; width: 224px; height: 68px; box-sizing: border-box; padding-left: 10px; border-radius: 10px; display: flex; align-items: center; gap: 12px; font-family: var(--dh-font-display); font-size: 16px; line-height: 1.1; color: #fff; z-index: 1; }
.dy-lane__name .dy-ntile { width: 44px; height: 34px; font-size: 17px; border-radius: 7px; }
.dy-lane__name.is-spin { animation: dy-spin .6s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes dy-spin { 0% { background: rgba(255, 201, 60, .32); box-shadow: inset 0 0 0 3px #ffc93c; } 17%, 100% { background: transparent; box-shadow: none; } }
.dy-lane__name.is-landed { background: rgba(255, 201, 60, .30); box-shadow: inset 0 0 0 3px #ffc93c, 0 0 30px rgba(255, 201, 60, .5); }
.dy-lane__ptr { position: absolute; left: -36px; filter: drop-shadow(0 0 10px rgba(255, 201, 60, .9)); }
.dy-ghost { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(66, 155, 252, .55); box-sizing: border-box; }
.dy-arrow { position: absolute; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(66, 155, 252, 0), #429bfc); opacity: .85; }
.dy-arrow.back { background: linear-gradient(90deg, #fb6161, rgba(251, 97, 97, 0)); }
.dy-token { position: absolute; display: flex; align-items: center; gap: 6px; z-index: 2; transition: left 600ms cubic-bezier(.3, 1.2, .5, 1); }
.dy-token b { font-family: var(--dh-font-display); font-weight: 400; font-size: 22px; color: #fff; }
.dy-token.is-lead { filter: drop-shadow(0 0 12px rgba(255, 201, 60, .9)); }
.dy-token.is-lead b { color: var(--dy-gold); }
.dy-badge { font-family: var(--dh-font-display); font-size: 16px; padding: 4px 10px; border-radius: 999px; background: #014cfd; color: #fff; }
.dy-badge.back { background: #d11212; }
.dy-blk { position: absolute; width: 80px; height: 52px; z-index: 2; filter: drop-shadow(0 0 10px rgba(209, 18, 18, .55)); }
.dy-blk.is-bull { filter: drop-shadow(0 0 10px rgba(255, 201, 60, .6)); }
.dy-blk__n { position: absolute; right: -10px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: #d11212; color: #fff; font-family: var(--dh-font-display); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.dy-drop { animation: dy-drop 700ms cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes dy-drop { 0% { opacity: 0; transform: translateY(-170px) rotate(-8deg); } 60% { opacity: 1; transform: none; } 75% { transform: translateY(-12px); } 100% { opacity: 1; transform: none; } }
.dy-post { position: absolute; top: -30px; width: 4px; height: 458px; background: var(--dy-blue); opacity: .35; }
.dy-post.is-half { opacity: .85; }
.dy-post__l { position: absolute; top: -56px; width: 120px; text-align: center; font-family: var(--dh-font-display); font-size: 15px; letter-spacing: .08em; color: var(--dy-blue); opacity: .6; }
.dy-post__l.is-half { opacity: 1; }
.dy-post__l.is-finish { color: #fff; opacity: 1; }
.dy-finish { position: absolute; top: -30px; width: 16px; height: 458px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 16px 16px; }
.dy-ask { position: absolute; left: 560px; top: 176px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 14px; border-radius: 999px; background: rgba(0, 9, 31, .92); box-shadow: inset 0 0 0 2px #ffc93c, 0 0 40px rgba(255, 201, 60, .45); animation: dy-hover 1.2s ease-in-out infinite; }
.dy-ask span { font-family: var(--dh-font-display); font-size: 22px; color: var(--dy-gold); letter-spacing: .06em; }
@keyframes dy-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dy-reveal { position: absolute; left: 236px; right: 0; top: 40px; display: flex; justify-content: center; z-index: 4; animation: dy-revealin 500ms ease both; }
.dy-reveal > div { display: flex; flex-direction: column; gap: 14px; padding: 22px 30px; border-radius: 24px; background: rgba(0, 9, 31, .94); box-shadow: inset 0 0 0 2px #ffc93c, 0 0 80px rgba(255, 201, 60, .4); }
.dy-reveal .dy-eye { text-align: center; }
.dy-reveal__row { display: flex; align-items: center; gap: 18px; }
.dy-reveal__row b { font-family: var(--dh-font-display); font-weight: 400; font-size: 34px; color: #fff; min-width: 330px; }
.dy-reveal__row em { font-family: var(--dh-font-display); font-style: normal; font-size: 40px; color: var(--dy-gold); min-width: 150px; text-align: right; }
@keyframes dy-revealin { 0% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; transform: none; } }
.dy-rbar i { position: absolute; left: 540px; right: 72px; top: 572px; height: 14px; border-radius: 3px; }
.dy-rbar--fence { background: repeating-linear-gradient(135deg, #d11212 0 14px, #fff 14px 28px); box-shadow: 0 0 30px rgba(209, 18, 18, .5); }
.dy-rbar--bull { background: repeating-linear-gradient(135deg, #ffc93c 0 14px, #00091f 14px 28px); box-shadow: 0 0 30px rgba(255, 201, 60, .45); }
.dy-who { position: absolute; left: 540px; right: 72px; top: 600px; height: 190px; display: flex; align-items: center; gap: 28px; }
.dy-who__av .dy-av110 { box-shadow: 0 0 0 5px #00091f, 0 0 0 9px var(--dy-gold), 0 0 50px rgba(255, 201, 60, .45); }
.dy-who__av.tone-red .dy-av110 { box-shadow: 0 0 0 5px #00091f, 0 0 0 9px var(--dy-red), 0 0 50px rgba(251, 97, 97, .45); }
.dy-who__tx { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.dy-who__line { font-family: var(--dh-font-display); font-size: 52px; line-height: 1.05; color: #fff; }
.dy-who__line.small { font-size: 34px; line-height: 1.15; }
.dy-who__line.tiny { font-size: 28px; line-height: 1.15; }
.dy-tiles { display: flex; gap: 16px; }
.dy-dt { width: 210px; height: 150px; border-radius: 16px; box-sizing: border-box; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(209, 213, 216, .16); }
.dy-dt .dy-eye { font-size: 13px; }
.dy-dt b { font-family: var(--dh-font-display); font-weight: 400; font-size: 40px; line-height: 1; color: #fff; }
.dy-dt__fx { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #d1d5d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-dt__fx i { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.dy-dt.is-next { background: rgba(209, 213, 216, .07); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42); }
.dy-dt.is-next b { color: rgba(255, 255, 255, .3); }
.dy-dt.is-now { box-shadow: inset 0 0 0 3px #429bfc, 0 0 36px rgba(1, 76, 253, .45); }
.dy-dt.is-now .dy-eye { color: var(--dy-blue); }
.dy-dt.is-now.tone-red { box-shadow: inset 0 0 0 3px #fb6161, 0 0 36px rgba(251, 97, 97, .4); }
.dy-dt.is-now.tone-red .dy-eye { color: var(--dy-red); }
.dy-dt.is-now.tone-gold { box-shadow: inset 0 0 0 3px #ffc93c, 0 0 36px rgba(255, 201, 60, .4); }
.dy-dt.is-now.tone-gold .dy-eye { color: var(--dy-gold); }

/* ── Halfway post (frames TV-Halfway, TV-HalfwaySealed) ─────────────────── */
.dy-h1--72 { font-size: 72px; }
.dy-hw__top { position: absolute; left: 0; right: 0; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dy-hw__sub { font-size: 26px; color: var(--dy-grey); }
.dy-hw { position: absolute; left: 290px; top: 250px; width: 1340px; height: 540px; box-sizing: border-box; padding: 16px 0; border-radius: 20px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.dy-hw__row { display: grid; grid-template-columns: minmax(0, 1fr) 220px 260px 260px; align-items: center; height: 68px; padding: 0 24px; border-top: 1px solid rgba(66, 155, 252, .12); }
.dy-hw__row--head { height: 52px; border-top: 0; }
.dy-hw__row--head .dy-eye { font-size: 16px; }
.dy-hw__row--head .dy-eye:not(:first-child) { text-align: center; }
.dy-hw__runner { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dy-hw__runner .dy-ntile { width: 52px; height: 40px; font-size: 20px; }
.dy-hw__runner > span:last-child { font-family: var(--dh-font-display); font-size: 26px; color: #fff; white-space: nowrap; }
.dy-hw__len { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.dy-hw__len b { font-family: var(--dh-font-display); font-weight: 400; font-size: 30px; color: #fff; }
.dy-hw__len b.gold { color: var(--dy-gold); }
.dy-hw__len span { font-size: 16px; color: var(--dy-grey); }
.dy-hw__price { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dy-hw__price b { font-family: var(--dh-font-display); font-weight: 400; font-size: 30px; line-height: 1; color: #fff; white-space: nowrap; }
.dy-hw__price span { font-size: 15px; color: var(--dy-grey); }
.dy-hw__price.tone-split b { color: var(--dy-blue); }
.dy-hw__price.tone-none b { color: rgba(142, 152, 160, .55); }

/* ── Photo finish (frame TV-PhotoFinish) ────────────────────────────────── */
.dy-panel { border-radius: 20px; box-sizing: border-box; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.dy-photo { position: absolute; left: 72px; top: 120px; width: 1060px; height: 660px; padding: 10px; box-sizing: border-box; border-radius: 20px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.dy-photo__in { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #0a1532; }
.dy-photo__stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0f1d40 0 120px, #13244d 120px 240px); }
.dy-photo__rail { position: absolute; left: 0; right: 0; height: 4px; background: var(--dy-blue); opacity: .6; }
.dy-photo__rail.top { top: 40px; }
.dy-photo__rail.bottom { bottom: 40px; }
.dy-photo__line { position: absolute; left: 650px; top: 0; width: 22px; height: 640px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 22px 22px; }
.dy-photo__win { position: absolute; left: 520px; top: 110px; animation: dy-fade 400ms ease both; }
.dy-photo__second { position: absolute; left: 250px; top: 250px; opacity: .75; }
.dy-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: dy-flash 2.4s ease-out 1 both; }
@keyframes dy-flash { 0% { opacity: .9; } 20%, 100% { opacity: 0; } }
.dy-photo__margin { position: absolute; left: 24px; bottom: 62px; font-size: 18px; }
.dy-photo__judge { position: absolute; right: 24px; top: 62px; font-size: 14px; color: #d1d5d8; }
.dy-result { position: absolute; left: 1180px; right: 72px; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.dy-rcard { display: flex; align-items: center; gap: 22px; padding: 22px 24px; border-radius: 20px; }
.dy-rcard svg { flex: none; }
.dy-rcard > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dy-rcard b { font-family: var(--dh-font-display); font-weight: 400; font-size: 44px; line-height: 1; color: #fff; }
.dy-rcard em { font-family: var(--dh-font-display); font-style: normal; font-size: 20px; }
.dy-rcard--win { background: rgba(255, 201, 60, .14); border: 1px solid rgba(255, 201, 60, .45); box-shadow: 0 0 50px rgba(255, 201, 60, .2); }
.dy-rcard--win em { color: var(--dy-gold); }
.dy-rcard--last { background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .55); }
.dy-rcard--last em { color: var(--dy-blue); }
.dy-order { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; border-radius: 20px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); }
.dy-order__row { display: flex; align-items: center; gap: 14px; height: 34px; }
.dy-order__pl { width: 28px; font-family: var(--dh-font-display); font-size: 18px; color: var(--dy-grey); }
.dy-order__pl.gold { color: var(--dy-gold); }
.dy-order__pl.blue { color: var(--dy-blue); }
.dy-order__row .dy-ntile { width: 40px; height: 28px; font-size: 15px; border-radius: 8px; }
.dy-order__nm { flex: 1; font-size: 19px; font-weight: 600; color: #fff; }
.dy-order__pos { font-family: var(--dh-font-display); font-size: 18px; color: var(--dy-grey); }

/* ── Slips flip + payout (frame TV-Payout) ──────────────────────────────── */
.dy-pay { position: absolute; left: 72px; right: 72px; top: 118px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dy-pay__col { height: 680px; display: flex; flex-direction: column; gap: 10px; border-radius: 20px; padding: 14px 12px; box-sizing: border-box; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); overflow: hidden; }
.dy-pay__col.is-win { box-shadow: inset 0 0 0 3px #ffc93c, 0 0 50px rgba(255, 201, 60, .25); }
.dy-pay__col.is-last { box-shadow: inset 0 0 0 3px #429bfc; }
.dy-pay__head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(66, 155, 252, .18); }
.dy-pay__nm { font-family: var(--dh-font-display); font-size: 19px; color: #fff; text-align: center; line-height: 1.1; }
.dy-pay__badge { font-family: var(--dh-font-display); font-size: 14px; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--dy-grey); }
.is-win .dy-pay__badge { background: var(--dy-gold); color: #00091f; }
.is-last .dy-pay__badge { background: #014cfd; color: #fff; }
.dy-slip { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 10px; border-radius: 12px; box-sizing: border-box; background: rgba(209, 213, 216, .06); opacity: .6; flex: none; animation: dy-flip 500ms ease both; }
.dy-slip.is-won { background: rgba(255, 201, 60, .14); box-shadow: inset 0 0 0 2px #ffc93c; opacity: 1; }
.dy-slip__tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dy-slip__tx b { font-family: var(--dh-font-display); font-weight: 400; font-size: 14px; color: #fff; }
.dy-slip__tx span { font-size: 13px; color: var(--dy-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-slip em { font-family: var(--dh-font-display); font-style: normal; font-size: 20px; color: rgba(142, 152, 160, .6); }
.dy-slip.is-won em { color: var(--dy-gold); }
@keyframes dy-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }

/* ── Standings (frame TV-Standings) ─────────────────────────────────────── */
.dy-stand { position: absolute; left: 330px; top: 120px; width: 1260px; min-height: 580px; box-sizing: border-box; padding: 12px 0; border-radius: 20px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.dy-stand__head { display: flex; justify-content: center; height: 30px; align-items: center; }
.dy-stand__head .dy-eye { font-size: 16px; }
.dy-stand__row { display: flex; align-items: center; gap: 24px; height: 100px; padding: 0 34px; border-top: 1px solid rgba(66, 155, 252, .12); }
.dy-stand__row.is-top { background: rgba(255, 201, 60, .08); }
.dy-stand__pl { width: 40px; font-family: var(--dh-font-display); font-size: 40px; color: var(--dy-grey); }
.dy-stand__row.is-top .dy-stand__pl { color: var(--dy-gold); }
.dy-stand__row .dy-av68 { box-shadow: 0 0 0 3px #00091f, 0 0 0 5px rgba(255, 255, 255, .2); }
.dy-stand__row.is-top .dy-av68 { box-shadow: 0 0 0 3px #00091f, 0 0 0 6px var(--dy-gold); }
.dy-stand__nm { width: 150px; font-family: var(--dh-font-display); font-size: 26px; color: #fff; letter-spacing: .04em; }
.dy-stand__bar { flex: 1; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dy-stand__bar i { display: block; height: 22px; border-radius: 11px; background: var(--dy-blue); animation: dy-grow 900ms cubic-bezier(.2, .9, .3, 1) both; transform-origin: left; }
.dy-stand__row.is-top .dy-stand__bar i { background: var(--dy-gold); }
@keyframes dy-grow { 0% { transform: scaleX(0); } 100% { transform: none; } }
.dy-stand__row b { width: 110px; text-align: right; font-family: var(--dh-font-display); font-weight: 400; font-size: 44px; color: #fff; }
.dy-stand__row.is-top b { color: var(--dy-gold); }
.dy-stand__row em { width: 90px; text-align: right; font-family: var(--dh-font-display); font-style: normal; font-size: 22px; color: var(--dy-grey); }
.dy-stand__row em.up { color: var(--dy-green); }
.dy-stand__row em.down { color: var(--dy-red); }
.dy-next { position: absolute; left: 0; right: 0; top: 790px; height: 290px; background: #03123a; box-shadow: inset 0 0 0 1px rgba(66, 155, 252, .2), 0 -3px 0 rgba(66, 155, 252, .55); }
.dy-next__gate { position: absolute; left: 96px; top: 40px; width: 150px; height: 200px; display: flex; flex-direction: column; gap: 3px; }
.dy-next__gate i { flex: 1; border-radius: 6px; background: #122044; box-shadow: inset 0 0 0 1.5px rgba(66, 155, 252, .35); }
.dy-next__tx { position: absolute; left: 0; right: 0; top: 70px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dy-next__h { font-family: var(--dh-font-display); font-size: 64px; line-height: 1; color: #fff; }

/* ── Race day over (frame TV-Final) ─────────────────────────────────────── */
.dy-final__top { position: absolute; left: 0; right: 0; top: 118px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dy-final__h { margin: 0; font-family: var(--dh-font-display); font-size: 80px; line-height: 1; color: var(--dy-gold); font-weight: 400; text-shadow: 0 0 40px rgba(255, 201, 60, .4); }
.dy-final__sub { font-size: 26px; color: var(--dy-grey); }
.dy-final__track { position: absolute; left: 0; right: 0; top: 700px; height: 380px; background: #03123a; box-shadow: inset 0 0 0 1px rgba(66, 155, 252, .2); }
.dy-final__track .rail { position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--dy-blue); opacity: .55; }
.dy-final__track .line { position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: rgba(66, 155, 252, .16); }
.dy-final__track .post { position: absolute; width: 4px; height: 60px; background: var(--dy-blue); opacity: .45; top: -14px; }
.dy-laurel { position: absolute; left: 810px; top: 262px; }
.dy-pod { position: absolute; width: 300px; box-sizing: border-box; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #122044, #0c1631); border: 1px solid rgba(66, 155, 252, .22); border-bottom: 0; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; padding-top: 22px; gap: 12px; animation: dy-rise 900ms cubic-bezier(.2, .9, .3, 1) both; }
.dy-pod.p1 { box-shadow: inset 0 0 0 3px #ffc93c, 0 0 60px rgba(255, 201, 60, .25); animation-delay: .5s; }
.dy-pod.p2 { animation-delay: .25s; }
@keyframes dy-rise { 0% { transform: translateY(120px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dy-pod__pl { font-family: var(--dh-font-display); font-size: 56px; line-height: 1; color: var(--dy-blue); }
.dy-pod.p1 .dy-pod__pl { color: var(--dy-gold); }
.dy-pod__nm { font-family: var(--dh-font-display); font-size: 28px; color: #fff; letter-spacing: .04em; }
.dy-pod__ch { font-family: var(--dh-font-display); font-size: 36px; color: #fff; }
.dy-pod.p1 .dy-pod__ch { color: var(--dy-gold); }
.dy-pod__ch small { font-size: 16px; color: var(--dy-grey); margin-left: 6px; }
.dy-pod__av { position: absolute; display: flex; flex-direction: column; align-items: center; }
.dy-pod__face.p1 { width: 150px; height: 150px; font-size: 50px; box-shadow: 0 0 0 5px #00091f, 0 0 0 10px #ffc93c, 0 0 60px rgba(255, 201, 60, .5); }
.dy-pod__face.p2 { width: 120px; height: 120px; font-size: 40px; box-shadow: 0 0 0 4px #00091f, 0 0 0 7px #429bfc; }
.dy-pod__face.p3 { width: 110px; height: 110px; font-size: 38px; box-shadow: 0 0 0 4px #00091f, 0 0 0 7px #429bfc; }
.dy-final__rest { position: absolute; left: 0; right: 0; top: 964px; display: flex; justify-content: center; gap: 28px; z-index: 2; }
.dy-rest { display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .22); }
.dy-rest span { font-family: var(--dh-font-display); font-size: 22px; color: var(--dy-grey); width: 24px; text-align: center; }
.dy-rest b, .dy-rest em { font-family: var(--dh-font-display); font-weight: 400; font-style: normal; font-size: 22px; color: #fff; }
.dy-rest em { color: #d1d5d8; }
.dy-rest.is-up { box-shadow: inset 0 0 0 2px var(--dy-gold), 0 0 30px rgba(255, 201, 60, .3); }
.dy-final__host { position: absolute; right: 72px; bottom: 44px; font-size: 15px; z-index: 2; }

/* The Derby board (components/derby-board.js) */
.dy-board { display: block; overflow: visible; }
.dy-board text { font-family: var(--dh-font-display); }
.dy-board__num.is-on rect, .dy-board__num.is-fence rect { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); }
.dy-board__num.is-lit rect { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .7)); }
.dy-board__live { animation: dy-live 1.6s ease-in-out infinite; }
@keyframes dy-live { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .game--derby *, .game--derby *::before, .game--derby *::after { animation: none !important; transition: none !important; }
  .dy-flick:first-child { opacity: 1; }
}
.dy-reduced *, .dy-reduced *::before, .dy-reduced *::after { animation: none !important; transition: none !important; }
.dy-reduced .dy-flick:first-child { opacity: 1; }