:root {
  color-scheme: light;
  --ink: #19122f;
  --muted: #746d7f;
  --panel: var(--surface);
}

html[data-theme="dark"] { color-scheme: dark; --ink: #fffaf0; --muted: #beb4c7; }

body.race-page {
  min-height: 100vh;
  padding: 12px;
  background: var(--outside);
  color: var(--ink);
  font: 16px/1.5 var(--body);
}

body.race-page::before {
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--purple-soft) 64%, transparent), transparent 29%),
    radial-gradient(circle at 88% 28%, color-mix(in srgb, var(--orange-soft) 62%, transparent), transparent 25%),
    var(--outside);
  animation: race-background-drift 20s ease-in-out infinite alternate;
}

body.race-page::after {
  inset: 0;
  z-index: -1;
  opacity: .48;
  background:
    radial-gradient(circle at 8% 24%, var(--orange) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 17%, var(--yellow) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 78%, var(--purple) 0 3px, transparent 4px);
  background-size: 270px 270px, 330px 330px, 300px 300px;
  animation: race-lights-drift 14s ease-in-out infinite alternate;
}

.race-site-shell { position: relative; z-index: 1; min-height: calc(100vh - 24px); }
.race-shell { max-width: none; margin: 0; padding: 28px 30px 38px; }

.race-header {
  min-height: 88px;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.race-header-left { display: flex; align-items: center; gap: 14px; }
.race-page .brand { color: var(--orange); font: 800 1.42rem var(--display); letter-spacing: -.045em; text-decoration: none; }
.race-page .brand span { color: var(--purple); }
.race-header .theme-toggle { height: 38px; padding: 0 .48rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: none; }
.race-back {
  padding: .48rem .68rem;
  border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line));
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple-deep);
  font-size: .72rem;
  font-weight: 800;
}
.race-back:hover,.race-back:focus-visible { border-color: var(--purple); background: color-mix(in srgb, var(--purple-soft) 70%, var(--surface)); }
.tag-pill { max-width: 155px; padding: .52rem .72rem; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.race-hero {
  position: relative;
  min-height: 220px;
  padding: clamp(26px,4vw,46px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--purple) 28%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--orange-soft) 86%, transparent), transparent 34%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--purple-soft) 66%, var(--surface)));
  box-shadow: var(--shadow);
  color: var(--ink);
}
.race-hero::after { content:""; position:absolute; width:220px; height:220px; right:-88px; bottom:-128px; border:34px solid color-mix(in srgb, var(--purple) 10%, transparent); border-radius:50%; }
.brawler-mark { position: relative; z-index: 1; }
.brawler-mark img { width: 112px; height: 112px; border: 5px solid var(--surface); border-radius: 30px; background: var(--purple-soft); box-shadow: 0 0 0 2px var(--purple), 0 12px 24px color-mix(in srgb, var(--purple) 22%, transparent); }
.eyebrow { margin: 0; color: var(--orange-deep); font: 800 .72rem var(--display); letter-spacing: .09em; }
.race-hero h1 { margin: .08em 0; color: var(--ink); font: 800 clamp(2.8rem,6vw,5.6rem)/.95 var(--display); letter-spacing: -.05em; }
.race-hero p { color: var(--muted); }
.hero-stat { position: relative; z-index: 1; min-width: 175px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; background: linear-gradient(145deg,#8b55d7,#5825a0); color: #fff; box-shadow: 0 12px 25px color-mix(in srgb, var(--purple) 22%, transparent); }
.hero-stat small,.hero-stat span { color: rgba(255,255,255,.75); font-size: .68rem; }
.hero-stat strong { color: #fff; font: 800 2.5rem var(--display); }

.race-metrics { gap: 12px; margin: 18px 0; }
.race-metrics article { position: relative; min-height: 108px; padding: 17px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); box-shadow: none; }
.race-metrics article::before { content:""; position:absolute; width:42px; height:4px; left:18px; top:0; border-radius:0 0 5px 5px; background:var(--purple); }
.race-metrics article:nth-child(2)::before { background:var(--orange); }.race-metrics article:nth-child(3)::before { background:var(--blue); }.race-metrics article:nth-child(4)::before { background:var(--green); }
.race-metrics small,.race-metrics span { color: var(--muted); }
.race-metrics strong { color: var(--ink); font: 800 1.15rem var(--display); }

.race-actions,.chart-panel,.leaderboard-panel,.nearby-panel { border: 1px solid var(--line); background: var(--section); box-shadow: var(--shadow); }
.race-actions { margin: 20px 0; padding: 22px 24px; border-radius: 18px; }
.race-actions label { color: var(--ink); font: 800 .8rem var(--display); }
.race-actions #race-status { color: var(--muted); }
.entry-row input { min-width: 300px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); outline: 0; }
.entry-row input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 13%, transparent); }
.entry-row button,.nearby-player button { background: linear-gradient(135deg,#8756dd,#672cb9); box-shadow: inset 0 -3px rgba(39,6,85,.18); }

.race-grid { gap: 20px; }
.chart-panel,.leaderboard-panel,.nearby-panel { padding: 24px; border-radius: 20px; }
.panel-heading { align-items: start; }
.panel-heading h2 { color: var(--ink); font: 800 1.5rem var(--display); letter-spacing: -.025em; }
.demo-badge,#player-count { padding: .35rem .56rem; border: 1px solid var(--line); border-radius: 999px; background: var(--purple-soft); color: var(--purple-deep); font-size: .7rem; }
.gridline { stroke: var(--line); }
.axis,.chart-empty { fill: var(--muted); }
.race-area { pointer-events:none; animation:chart-area-in .7s ease-out both; }
.race-line { stroke-dasharray:1; stroke-dashoffset:1; animation:chart-line-in .9s cubic-bezier(.22,.8,.28,1) forwards; filter:drop-shadow(0 3px 5px rgba(255,75,154,.16)); }
.trend-point,.chart-hover-dot { stroke:var(--surface); stroke-width:3; }
.trend-point { filter:drop-shadow(0 2px 4px rgba(37,19,61,.16)); }
.chart-hover-guide { stroke:var(--purple); stroke-width:1; stroke-dasharray:4 5; opacity:0; transition:opacity .14s ease; pointer-events:none; }
.chart-hover-dot { opacity:0; transition:opacity .14s ease; pointer-events:none; }
.chart-hover-guide.is-visible,.chart-hover-dot.is-visible { opacity:1; }
.current-guide { stroke-width: 2; stroke-dasharray: 7 7; opacity: .45; }
.live-point { stroke: var(--surface); stroke-width: 4; }
.current-value { fill: var(--ink); font: 800 14px var(--display); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.legend { color: var(--muted); }
.leaderboard li { border-color: var(--line); }
.place { color: var(--purple-deep); }
.player small,.leaderboard em,.muted { color: var(--muted); }
.leaderboard strong,.player b { color: var(--ink); }
.avatar { background: var(--purple-soft); color: var(--purple-deep); }
.avatar.you { background: var(--orange); color:#fff; }.avatar.rival { background:var(--blue); color:#fff; }
.nearby-player { border: 1px solid var(--line); background: var(--surface-soft); }
.nearby-player b { color: var(--ink); }.nearby-player small { color: var(--muted); }
.nearby-copy { margin:.35rem 0 0; color:var(--muted); font-size:.9rem; }
.nearby-empty { grid-column:1/-1; margin:.25rem 0; }
.text-button { border-color: color-mix(in srgb,var(--purple) 34%,var(--line)); background: var(--purple-soft); color: var(--purple-deep); }

.chart-tip { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); }
.handle-result { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.search-heading { border-color: var(--line); color: var(--muted); }
.search-option { color: var(--ink); }.search-option + .search-option { border-color: var(--line); }.search-option:hover,.search-option:focus-visible { background: var(--purple-soft); }.search-option small { color: var(--muted); }
.remove-player { border-color: var(--line-strong); color: var(--muted); }.remove-player:hover { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-deep); }

.race-page footer { margin-top: 4px; }

@keyframes chart-line-in { to { stroke-dashoffset:0; } }
@keyframes chart-area-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce){.race-line,.race-area{animation:none}.race-line{stroke-dashoffset:0}}

@media(max-width:900px){.race-header{gap:1rem}.race-header nav{gap:1rem}.race-grid{grid-template-columns:1fr}.nearby-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){body.race-page{padding:0}.race-site-shell{min-height:100vh}.race-header{min-height:70px;padding:0 16px;grid-template-columns:minmax(0,1fr) auto}.race-header-left{min-width:0}.race-header .brand{font-size:1.08rem}.race-header .header-actions{gap:.45rem}.tag-pill{max-width:110px}.race-shell{padding:18px 12px 24px}.race-hero{display:block;min-height:0;padding:24px 20px}.hero-stat{margin-top:20px;text-align:left}.race-metrics{grid-template-columns:repeat(2,1fr)}.race-actions{display:block}.entry-row{display:block}.entry-row input{width:100%;min-width:0}.entry-row button{width:100%;margin-top:8px}.nearby-list{grid-template-columns:1fr}.chart-panel,.leaderboard-panel,.nearby-panel{padding:18px 16px}}
@media(max-width:420px){.race-header-left{gap:7px}.race-back{padding:.42rem .5rem}.race-header .brand{font-size:.96rem}.tag-pill{display:none}.race-hero h1{font-size:2.4rem}.brawler-mark{grid-template-columns:78px minmax(0,1fr)}.brawler-mark img{width:78px;height:78px;border-radius:20px}.race-metrics article{padding:15px 13px}.panel-heading{align-items:flex-start}}