/* A game introduction, not a live betting terminal. Original Derby art only. */
.ecosystem-games{display:flex;justify-content:center;gap:12px 28px;align-items:center;flex-wrap:wrap;padding:22px 5.5%;background:#eee4d1;border-block:1px solid #d8cbb5}
.ecosystem-games>span{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:#625b4c}
.ecosystem-games a{font-size:14px;font-weight:700;text-decoration:none}.ecosystem-games a:hover{text-decoration:underline;text-underline-offset:5px}
.derby-section{background:#f1eadb;border-block:1px solid #dfd3be;scroll-margin-top:24px}
.derby-section>.section{padding-block:80px}.derby-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.derby-brand{width:min(390px,65%);height:auto}.derby-network{border:1px solid #b9aa8e;border-radius:30px;padding:8px 12px;font-size:11px;font-weight:700;white-space:nowrap}
.derby-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(28px,4vw,65px);align-items:center}
.derby-copy h2{font-size:clamp(40px,4.8vw,72px);line-height:1.03;letter-spacing:-.025em;margin-bottom:22px}.derby-copy>p:not(.eyebrow):not(.section-hand){font-size:15px;line-height:1.75;color:#555749;max-width:460px}
.derby-copy .section-hand{font-size:28px;margin:20px 0}.derby-copy .button{margin-top:20px}.derby-points{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.derby-points span{border:1px solid #cfc1a9;padding:7px 10px;border-radius:4px;font-size:11px;font-weight:700}
.derby-art{min-width:0}.derby-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.derby-controls[hidden]{display:none}
.derby-modes{display:flex;gap:5px}.derby-controls button{font:700 12px 'DM Sans',sans-serif;min-height:44px;border:1px solid #c3b69e;border-radius:5px;padding:10px 14px;background:transparent;color:#101710;cursor:pointer}.derby-controls button[aria-pressed=true]{background:#101710;color:#fbf7ee;border-color:#101710}.derby-controls button:disabled{opacity:.5;cursor:default}
.derby-track{isolation:isolate;position:relative;border:2px solid #242b20;border-radius:12px;overflow:hidden;background:#c9b99b;box-shadow:5px 6px 0 #d8c8ac}
.derby-sky{height:100px;background:#e5f0ef url('/assets/derby/sky-repeat.webp') center bottom/auto 110px repeat-x;border-bottom:6px solid #455a35}
.derby-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;padding:20px 12px 26px;gap:4px;background:repeating-linear-gradient(0deg,#8a715b10 0 2px,transparent 2px 9px),#d8c5a2}
.derby-preview>img{grid-column:1/-1;width:100%;height:auto}.derby-runner{min-width:0;text-align:center}.derby-horse{display:block;width:100%;height:auto;overflow:visible}.derby-runner>span{position:relative;display:flex;flex-direction:column;gap:4px;padding-top:6px}.derby-runner strong{font-size:14px}.derby-runner small{font-size:10px;color:#3f392e;min-height:28px}
.derby-preview-label{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 16px;background:#101710;color:#fbf7ee;font-size:10px;letter-spacing:.6px}.derby-preview-label span:last-child{color:#c2c5b7}
.derby-note{color:#6b6559;font-size:11px;margin:14px 3px 0;line-height:1.6}.derby-rules{margin-top:26px;border-top:1px solid #d1c3ac;padding-top:18px;font-size:13px;color:#555749}.derby-rules summary{cursor:pointer;font-weight:700;color:#161d16;min-height:32px}.derby-rules p{max-width:900px;line-height:1.8;margin:10px 0}
.derby-section:focus-within .derby-track{border-color:#776143}.derby-running .derby-skeleton{animation:derby-bob .52s ease-in-out infinite}.derby-running .derby-leg{transform-box:view-box;transform-origin:0 0;animation:derby-stride .52s ease-in-out infinite}.derby-running .derby-leg-1{animation-delay:-.26s}.derby-running .derby-leg-2{animation-delay:-.13s}.derby-running .derby-leg-3{animation-delay:-.39s}.derby-running .derby-runner:nth-child(2) .derby-skeleton{animation-delay:-.17s}.derby-running .derby-runner:nth-child(3) .derby-skeleton{animation-delay:-.34s}
@keyframes derby-bob{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}@keyframes derby-stride{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
.hero-header .hero-navigation{gap:clamp(12px,1.4vw,25px)}
@media(min-width:761px) and (max-width:1150px){.hero-header{gap:16px;padding-inline:3%}.hero-header .hero-navigation{gap:12px;font-size:13px}.hero-header .hero-header-cta{padding-inline:14px;font-size:13px}}
@media(max-width:900px){.derby-layout{grid-template-columns:minmax(0,1fr)}.derby-copy>p:not(.eyebrow):not(.section-hand){max-width:650px}.derby-copy h2{font-size:clamp(40px,7.2vw,64px)}.derby-heading{margin-bottom:25px}.derby-art{max-width:750px;width:100%}}
@media(max-width:760px){.derby-section>.section{padding:52px clamp(16px,5vw,32px)}.derby-network{font-size:9px;padding:7px 9px}.derby-brand{width:58%}.derby-preview{padding:22px 4px 16px}.derby-sky{height:75px;background-size:auto 85px}.derby-runner small{font-size:9px}.derby-preview-label{font-size:8px;padding:11px 10px}.ecosystem-games{justify-content:flex-start;gap:12px 22px}.ecosystem-games>span{flex-basis:100%}.derby-controls button{padding:9px 11px;font-size:11px}.derby-copy .button{width:100%}}
@media(prefers-reduced-motion:reduce){.derby-running .derby-skeleton,.derby-running .derby-leg{animation:none!important}}