.racing-page{max-width:1240px;margin:auto;padding-top:12px}
.race-hero{
    display:flex;justify-content:space-between;align-items:end;gap:18px;
    margin:16px 0 16px;padding:20px 22px;
    border:1px solid var(--color-border);border-radius:17px;
    background:
      radial-gradient(circle at 90% 0,rgb(74 185 233 / 10%),transparent 28%),
      var(--color-surface);
}
.race-hero .pill{
    display:inline-flex;padding:5px 8px;border:1px solid rgb(75 185 233 / 20%);
    border-radius:999px;color:var(--color-primary);font-size:.67rem;font-weight:800;text-transform:uppercase
}
.race-hero h1{font-size:clamp(2rem,5vw,3.45rem);line-height:.96;letter-spacing:-.055em;margin:.35rem 0 .5rem}
.race-hero p{margin:0;color:var(--color-text-muted);font-size:.88rem}

.race-card{overflow:hidden;border:1px solid var(--color-border);border-radius:17px;background:var(--color-surface)}
.race-top{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    min-height:48px;padding:0 16px;border-bottom:1px solid var(--color-border);font-size:.82rem
}
.race-top>div{display:flex;align-items:center;gap:8px}
.race-live-dot{width:7px;height:7px;border-radius:50%;background:#38df99;box-shadow:0 0 12px #38df99}
.race-top #race-message{color:var(--color-text-muted);font-weight:700}

.race-stadium{
    position:relative;padding:13px 18px 18px;
    background:
      radial-gradient(circle at 50% -40%,rgb(77 221 160 / 11%),transparent 52%),
      #0b1412;
}
.race-track-head{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:0 48px 8px 42px;color:#70847d;font-size:.6rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase
}
.race-track-head span:last-child{text-align:right}
.race-track{
    position:relative;display:grid;gap:4px;padding-right:42px;
    background:
      repeating-linear-gradient(90deg,transparent 0 11.5%,rgb(255 255 255 / 3%) 11.5% 11.7%,transparent 11.7% 23%),
      linear-gradient(90deg,rgb(62 139 91 / 12%),transparent 28%,transparent 78%,rgb(255 255 255 / 3%));
}
.race-lane{
    --runner-x:0%;
    position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;
    align-items:center;gap:8px;min-height:54px;padding:0 10px;
    overflow:hidden;border:1px solid rgb(255 255 255 / 7%);border-radius:9px;
    background:linear-gradient(90deg,rgb(255 255 255 / 2%),rgb(255 255 255 / .006));
    color:inherit;text-align:left;cursor:pointer;transition:border-color .14s,background .14s,transform .14s
}
.race-lane::before{
    content:"";position:absolute;left:38px;right:78px;top:50%;height:1px;
    background:linear-gradient(90deg,rgb(255 255 255 / 6%),rgb(255 255 255 / 2%))
}
.race-lane:hover{border-color:rgb(75 185 233 / 30%);background:rgb(75 185 233 / 3%)}
.race-lane.selected{
    border-color:#4bb8e8;background:linear-gradient(90deg,rgb(75 185 233 / 10%),rgb(75 185 233 / 2%));
    box-shadow:inset 3px 0 0 #4bb8e8
}
.race-number{position:relative;z-index:2;font-weight:950;font-size:.74rem;color:#8ea098;text-align:center}
.race-run-zone{
    position:relative;z-index:2;height:46px;min-width:0;
}
.race-runner{
    position:absolute;left:0;top:50%;display:flex;align-items:center;gap:7px;
    max-width:calc(100% - 12px);left:var(--runner-x);transform:translate(-8%,-50%);
    transition:left .56s cubic-bezier(.18,.77,.26,1);will-change:left
}
.race-runner-emoji{font-size:1.65rem;filter:drop-shadow(0 5px 6px rgb(0 0 0 / 34%))}
.race-name-chip{
    display:inline-flex;max-width:120px;padding:3px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    border:1px solid rgb(255 255 255 / 8%);border-radius:6px;background:rgb(6 12 10 / 82%);
    color:#dce8e2;font-size:.63rem;font-weight:800
}
.race-odds{
    position:relative;z-index:3;min-width:58px;padding:5px 7px;border:1px solid rgb(255 255 255 / 7%);
    border-radius:7px;background:#0c1513;text-align:center;font-size:.74rem;font-weight:900
}
.race-finish-post{
    position:absolute;right:20px;top:38px;bottom:18px;width:12px;
    border-left:1px solid rgb(255 255 255 / 22%);
    background:repeating-linear-gradient(45deg,#e8ecea 0 5px,#101613 5px 10px);
    opacity:.82
}
.race-finish-post span{position:absolute;right:-7px;top:-18px;font-size:1rem}

.race-bet{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;
    margin:12px 0 22px;padding:14px 16px;border:1px solid var(--color-border);
    border-radius:13px;background:var(--color-surface)
}
.race-bet>div{display:grid;grid-template-columns:minmax(180px,320px) auto;align-items:end;gap:12px}
.race-bet label{font-size:.72rem;font-weight:800;color:var(--color-text-muted)}
.race-bet input{display:block;width:100%;min-height:40px;margin-top:5px;padding:0 11px;border:1px solid var(--color-border);border-radius:9px;background:#0b1219;color:var(--color-text);font:inherit}
.race-bet small{padding-bottom:9px;color:var(--color-text-muted)}
.race-bet .button{min-width:140px;min-height:42px}

.racing-page>section:last-child h2{margin:18px 0 9px;font-size:1rem}
.race-history{display:grid;gap:5px}
.race-history-row{
    display:grid;grid-template-columns:1fr 1fr auto;align-items:center;
    padding:9px 11px;border:1px solid var(--color-border);border-radius:9px;background:rgb(255 255 255 / 1.5%);
    font-size:.75rem
}

@media(max-width:700px){
 .race-hero{align-items:flex-start;flex-direction:column}
 .race-track{padding-right:26px}.race-finish-post{right:10px}
 .race-lane{grid-template-columns:26px minmax(0,1fr) auto}
 .race-name-chip{display:none}
 .race-bet{grid-template-columns:1fr}.race-bet>div{grid-template-columns:1fr}
 .race-bet .button{width:100%}
}