body.race-open { overflow: hidden; }
.race-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: auto; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: rgba(11, 14, 20, .76); backdrop-filter: blur(10px); }
.race-panel { position: relative; width: min(100%, 720px); max-height: 100%; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 25px; padding: 30px; box-shadow: 0 28px 90px #0005; }
.race-confetti { position:absolute; inset:0; z-index:3; overflow:hidden; border-radius:inherit; pointer-events:none; }
.confetti-piece { position:absolute; top:-20px; left:var(--x); width:7px; height:11px; background:var(--color); border-radius:2px; box-shadow:0 0 1px #3338; opacity:0; animation:confetti-fall var(--duration) ease-in var(--delay) forwards; }
.confetti-piece:nth-child(3n) { width:8px; height:8px; border-radius:50%; }
.confetti-piece:nth-child(4n) { width:5px; height:13px; }
@keyframes confetti-fall { 0% { opacity:1; transform:translate3d(0,-10px,0) rotate(0deg); } 85% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--drift),110vh,0) rotate(var(--turn)); } }
.race-progression { margin-top:10px; padding:13px 16px; border-radius:13px; background:var(--soft); text-align:left; font-size:12px; }.race-progression strong { display:block; }.race-progression span { color:var(--muted); font-size:11px; }.race-progression p { margin:9px 0 0; color:var(--text); font-size:11px; }.race-progression ul { margin:8px 0 0; padding-left:17px; color:var(--muted); font-size:11px; line-height:1.6; }
.race-panel h2 { font-size: clamp(25px, 4vw, 34px); letter-spacing: -.05em; }
.race-overline { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.race-preparing { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.race-preparing h2 { margin: 12px 0 0; }.race-preparing p { color: var(--muted); }
.race-spinner { width: 42px; height: 42px; margin-bottom: 22px; border: 4px solid var(--soft); border-top-color: var(--accent); border-radius: 50%; animation: race-spin .8s linear infinite; }
@keyframes race-spin { to { transform: rotate(360deg); } }
.race-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.race-head h2 { margin: 8px 0 0; }
.race-live { white-space: nowrap; background: var(--soft); color: var(--muted); border-radius: 30px; padding: 9px 12px; font-size: 10px; font-weight: 800; letter-spacing: .09em; }.race-live i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #8bc58a; border-radius: 50%; }
.race-people { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 18px; }.race-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; }.race-person-copy { display: grid; gap: 3px; min-width: 0; }.race-person-copy span,.race-person-copy small { font-size: 10px; color: var(--muted); }.race-person-copy span { font-weight: 800; letter-spacing: .1em; }.race-person-copy strong,.race-person-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.race-person-copy strong { font-size: 13px; }.race-color { width: 9px; height: 9px; flex: none; margin-left: auto; border-radius: 50%; }.race-color.red { background: #bf2335; }.race-color.blue { background: #4f9ce5; }
.racer-avatar { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--soft); color: var(--text); font-weight: 800; font-size: 17px; }.racer-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }.racer-avatar img[hidden] { display: none; }.avatar-crown { position: absolute; z-index: 2; right: -11px; top: -19px; font-size: 28px; transform: rotate(18deg); filter: drop-shadow(0 2px 2px #0004); }
.race-track { position: relative; height: 242px; overflow: hidden; border: 8px solid #d7ddcf; border-radius: 17px; background: #38434c; box-shadow: inset 0 0 30px #1218204d; }.track-edge { position: absolute; z-index: 1; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg,#f4f4f4 0 20px,#d8615a 20px 40px); }.track-edge.top { top: 0; }.track-edge.bottom { bottom: 0; }.track-divider { position: absolute; top: calc(50% - 2px); left: 0; right: 0; height: 4px; opacity: .8; background: repeating-linear-gradient(90deg,#f4f4f4 0 23px,transparent 23px 42px); }.track-line { position: absolute; top: 8px; bottom: 8px; width: 7px; background: repeating-linear-gradient(0deg,#f4f4f4 0 8px,#30363b 8px 16px); opacity: .75; }.track-line.start { left: 8%; }.track-line.finish { left: 86%; }.track-line span { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%,100%); display: none; }
.race-car { position: absolute; z-index: 2; left: 3%; width: clamp(72px, 14%, 104px); transform: translateY(-50%); filter: drop-shadow(0 5px 3px #1116); }.race-car.car-player { top: 27%; }.race-car.car-opponent { top: 73%; }.race-car-svg { display: block; width: 100%; }.race-car-svg.red .car-body { fill: #d5394b; }.race-car-svg.red .car-roof { fill: #8f1425; }.race-car-svg.blue .car-body { fill: #66b1eb; }.race-car-svg.blue .car-roof { fill: #367ebc; }
.race-track.is-running .race-car { animation: race-drive var(--race-time) cubic-bezier(.22,.68,.24,1) forwards; }.race-car.wins { --race-time: 4s; }.race-car.loses { --race-time: 5s; }
@keyframes race-drive { from { left: 3%; } to { left: calc(86% - 55px); } }
.race-count { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 88px; height: 88px; padding: 0 16px; display: grid; place-items: center; border: 1px solid #ffffff33; border-radius: 24px; background: #141a22db; color: #fff; font-size: 50px; font-weight: 800; box-shadow: 0 12px 30px #0003; }.race-count.go { width: 96px; min-width: 96px; height: 96px; padding: 0 4px; color: #ff7887; font-size: 30px; line-height: 1; white-space: nowrap; }.race-count[hidden] { display: none; }.race-track-caption { display: flex; justify-content: space-between; padding: 11px 8% 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.race-track-caption b { font-size: 14px; }
.race-result { max-width: 480px; margin: auto; text-align: center; }.race-result h2 { margin: 10px 0 6px; font-size: 38px; }.race-result > p { color: var(--muted); margin: 0; line-height: 1.6; }.result-racers { display: grid; grid-template-columns: minmax(0,1fr) 35px minmax(0,1fr); align-items: center; gap: 8px; margin: 35px 0 20px; }.result-person { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }.result-person .racer-avatar { width: 72px; height: 72px; border-radius: 23px; font-size: 27px; margin-bottom: 8px; }.result-winner .racer-avatar { box-shadow: 0 0 0 4px #bf2335; }.result-person strong,.result-person small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.result-person small,.result-place { color: var(--muted); font-size: 11px; }.result-place { font-size: 9px; font-weight: 800; letter-spacing: .14em; }.result-vs { color: var(--muted); font-weight: 800; font-size: 11px; }.result-reward { text-align: left; border: 1px solid var(--line); border-radius: 15px; padding: 15px 17px; }.result-reward > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.result-reward > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 10px; }.result-health { color: var(--muted); margin: 16px 0; font-size: 12px; }.result-health strong { color: var(--text); }.result-actions { display: grid; gap: 8px; }.result-actions .button { width: 100%; }
@media(max-width: 520px) { .race-overlay { padding: max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); }.race-panel { padding: 20px 16px; border-radius: 20px; }.race-people { gap: 7px; margin: 20px 0 14px; }.race-person { padding: 8px; gap: 7px; }.race-person .racer-avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }.race-person-copy strong { font-size: 12px; }.race-color { display: none; }.race-track { height: 210px; border-width: 6px; }.race-count { width: 68px; min-width: 68px; height: 68px; font-size: 40px; }.race-count.go { width: 88px; min-width: 88px; height: 88px; font-size: 27px; }.result-racers { margin-top: 29px; } }
@media(prefers-reduced-motion: reduce) { .race-spinner { animation-duration: 2s; }.race-car.wins,.race-car.loses { --race-time: .01ms; }.race-confetti { display:none; } }