.race-board { margin: 1.5rem 0 2rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised); }
.race-board-heading, .race-bubble-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.race-board-heading h2, .race-bubble-heading h3 { margin: 0; }
.race-live-status { margin: 0; padding: .35rem .55rem; border-left: 4px solid var(--color-positive); background: var(--color-surface-muted); font: 700 .75rem var(--font-mono); letter-spacing: .02em; }
.race-intro { max-width: 760px; color: var(--color-ink-secondary); }
.race-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.race-bubble { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.race-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank team move" "rank sor sor"; align-items: center; gap: .15rem .65rem; min-height: 74px; padding: .7rem .8rem; color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); text-decoration: none; }
.race-card:hover { border-color: var(--color-brand-cyan); background: var(--color-surface-muted); }
.race-card.field:nth-child(-n+4) { border-top: 4px solid var(--color-brand-blue); }
.race-card.bubble { border-top: 4px solid var(--color-brand-gold); }
.race-rank { grid-area: rank; min-width: 2.4rem; color: var(--color-brand-blue); font: 700 1.15rem var(--font-mono); }
.race-team { grid-area: team; display: grid; min-width: 0; }
.race-team strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-team small, .race-sor { color: var(--color-ink-secondary); }
.race-sor { grid-area: sor; font: .72rem var(--font-mono); }
.race-card .movement { grid-area: move; min-width: 2.6rem; padding: 0; }
.race-bubble-heading { margin: 1.25rem 0 .6rem; }
.race-bubble-heading a { font-weight: 600; }
.race-empty { grid-column: 1 / -1; margin: 0; padding: 1rem; color: var(--color-ink-secondary); background: var(--color-surface-muted); }
@media (max-width: 900px) { .race-field { grid-template-columns: repeat(2, minmax(0, 1fr)); } .race-bubble { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .race-board { padding: 1rem; } .race-board-heading, .race-bubble-heading { align-items: stretch; flex-direction: column; } .race-field, .race-bubble { grid-template-columns: 1fr; } .race-live-status { align-self: flex-start; } }