| :root { |
| color: #f7f4e9; |
| background: #111b18; |
| font-family: |
| Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", |
| sans-serif; |
| font-synthesis: none; |
| text-rendering: geometricPrecision; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| [hidden] { |
| display: none !important; |
| } |
|
|
| html, |
| body, |
| #game-shell, |
| #game { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
|
|
| body { |
| overflow: hidden; |
| } |
|
|
| #game-shell { |
| background: #111b18; |
| } |
|
|
| #game { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| #game > canvas:not(.minimap) { |
| display: block; |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .race-hud { |
| position: absolute; |
| inset: 0 0 auto 0; |
| z-index: 2; |
| display: grid; |
| grid-template-columns: minmax(160px, max-content) repeat(4, max-content) minmax(132px, 190px); |
| gap: 12px; |
| align-items: start; |
| min-height: 74px; |
| padding: 14px 24px; |
| background: |
| linear-gradient(180deg, rgba(3, 8, 13, 0.78), rgba(3, 8, 13, 0.18) 74%, rgba(3, 8, 13, 0)), |
| linear-gradient(90deg, rgba(92, 225, 255, 0.12), rgba(255, 230, 109, 0.08), rgba(255, 79, 104, 0.08)); |
| pointer-events: none; |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .home-button { |
| min-width: 74px; |
| min-height: 48px; |
| padding: 8px 12px; |
| border: 1px solid rgba(255, 244, 202, 0.42); |
| border-radius: 8px; |
| background: |
| linear-gradient(135deg, rgba(255, 240, 106, 0.22), rgba(92, 225, 255, 0.08)), |
| rgba(5, 9, 14, 0.58); |
| color: #fff4ca; |
| cursor: pointer; |
| font: inherit; |
| font-size: 13px; |
| font-weight: 950; |
| pointer-events: auto; |
| text-shadow: inherit; |
| } |
|
|
| .home-button:hover { |
| border-color: rgba(255, 244, 202, 0.76); |
| background: |
| linear-gradient(135deg, rgba(255, 240, 106, 0.34), rgba(92, 225, 255, 0.14)), |
| rgba(5, 9, 14, 0.74); |
| } |
|
|
| .track-ribbon, |
| .hud-stat { |
| display: grid; |
| gap: 2px; |
| min-width: 78px; |
| min-height: 48px; |
| padding: 8px 11px; |
| border: 1px solid rgba(255, 255, 255, 0.14); |
| border-radius: 8px; |
| background: |
| linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), |
| rgba(5, 9, 14, 0.44); |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); |
| } |
|
|
| .track-ribbon { |
| align-content: center; |
| min-width: 172px; |
| color: #fff4ca; |
| font-size: 13px; |
| font-weight: 950; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .hud-stat span { |
| color: rgba(242, 245, 238, 0.68); |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .hud-stat strong { |
| color: #fff4ca; |
| font-size: 24px; |
| font-weight: 950; |
| line-height: 1; |
| } |
|
|
| .boost-panel { |
| width: 100%; |
| margin-top: 18px; |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .boost-meter { |
| width: 100%; |
| height: 14px; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.22); |
| border-radius: 999px; |
| background: rgba(13, 18, 26, 0.7); |
| } |
|
|
| .boost-meter i { |
| display: block; |
| width: 48%; |
| height: 100%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, #5ce1ff, #fff06a); |
| } |
|
|
| .boost-panel.active .boost-meter { |
| border-color: rgba(255, 240, 106, 0.76); |
| box-shadow: 0 0 18px rgba(255, 240, 106, 0.34); |
| } |
|
|
| .boost-slots { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 6px; |
| } |
|
|
| .boost-slots b { |
| display: block; |
| height: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 999px; |
| background: rgba(13, 18, 26, 0.64); |
| } |
|
|
| .boost-slots b.filled { |
| border-color: rgba(255, 240, 106, 0.82); |
| background: linear-gradient(90deg, #5ce1ff, #fff06a); |
| box-shadow: 0 0 16px rgba(92, 225, 255, 0.28); |
| } |
|
|
| .boost-panel.full .boost-meter i { |
| opacity: 0.36; |
| } |
|
|
| .leaderboard { |
| position: fixed; |
| left: 24px; |
| bottom: 22px; |
| min-width: 168px; |
| padding: 10px 12px; |
| border: 1px solid rgba(255, 255, 255, 0.16); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.5); |
| color: rgba(244, 248, 243, 0.88); |
| font-family: "SFMono-Regular", Consolas, monospace; |
| font-size: 14px; |
| font-weight: 800; |
| line-height: 1.35; |
| white-space: pre; |
| text-align: left; |
| } |
|
|
| .minimap { |
| position: absolute; |
| top: 86px; |
| right: 24px; |
| z-index: 2; |
| width: 300px; |
| height: 220px; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: 8px; |
| opacity: 0.82; |
| pointer-events: none; |
| filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32)); |
| } |
|
|
| .lap-notice { |
| position: absolute; |
| top: 86px; |
| left: 50%; |
| z-index: 2; |
| min-width: 190px; |
| padding: 10px 18px; |
| border: 1px solid rgba(255, 244, 202, 0.28); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.58); |
| color: #fff4ca; |
| font-size: 22px; |
| font-weight: 950; |
| letter-spacing: 0; |
| text-align: center; |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); |
| opacity: 0; |
| pointer-events: none; |
| transform: translate(-50%, -12px); |
| transition: |
| opacity 180ms ease, |
| transform 180ms ease; |
| } |
|
|
| .lap-notice.active { |
| opacity: 1; |
| transform: translate(-50%, 0); |
| } |
|
|
| .track-select { |
| position: absolute; |
| inset: 0; |
| z-index: 4; |
| display: grid; |
| place-items: center; |
| overflow-y: auto; |
| padding: 16px 0; |
| background: |
| linear-gradient(180deg, rgba(8, 13, 18, 0.28), rgba(8, 13, 18, 0.76)), |
| rgba(7, 13, 15, 0.54); |
| } |
|
|
| .track-select-panel { |
| width: min(1120px, calc(100% - 32px)); |
| } |
|
|
| .track-select-title { |
| margin-bottom: 16px; |
| color: #fff4ca; |
| font-size: 34px; |
| font-weight: 950; |
| text-align: center; |
| text-shadow: 0 4px 16px rgba(0, 0, 0, 0.48); |
| } |
|
|
| .select-section-title { |
| margin: 16px 0 8px; |
| color: rgba(248, 253, 255, 0.72); |
| font-size: 13px; |
| font-weight: 950; |
| } |
|
|
| .car-options, |
| .bot-options, |
| .track-options { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .car-options { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .bot-options { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
|
|
| .bot-option { |
| min-height: 76px; |
| align-content: center; |
| text-align: center; |
| } |
|
|
| .online-panel { |
| display: grid; |
| grid-template-columns: minmax(130px, 0.85fr) minmax(160px, 1fr) max-content max-content minmax(120px, max-content); |
| gap: 10px; |
| align-items: center; |
| padding: 10px; |
| border: 1px solid rgba(255, 255, 255, 0.16); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.48); |
| } |
|
|
| .name-field { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) max-content; |
| gap: 6px; |
| } |
|
|
| .name-input, |
| .room-input { |
| min-height: 40px; |
| padding: 8px 10px; |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| border-radius: 8px; |
| background: rgba(6, 12, 18, 0.64); |
| color: #f8fdff; |
| font: inherit; |
| font-size: 15px; |
| font-weight: 900; |
| } |
|
|
| .room-input { |
| text-transform: uppercase; |
| } |
|
|
| .clear-name-button { |
| min-height: 40px; |
| padding: 8px 9px; |
| border: 1px solid rgba(255, 255, 255, 0.16); |
| border-radius: 8px; |
| background: rgba(6, 12, 18, 0.6); |
| color: rgba(248, 253, 255, 0.68); |
| cursor: pointer; |
| font: inherit; |
| font-size: 11px; |
| font-weight: 950; |
| } |
|
|
| .clear-name-button:hover { |
| border-color: rgba(255, 244, 202, 0.48); |
| color: #fff4ca; |
| background: rgba(7, 13, 19, 0.78); |
| } |
|
|
| .online-button { |
| min-height: 40px; |
| padding: 8px 12px; |
| border: 1px solid rgba(255, 244, 202, 0.28); |
| border-radius: 8px; |
| background: rgba(7, 13, 19, 0.72); |
| color: #fff4ca; |
| cursor: pointer; |
| font: inherit; |
| font-size: 13px; |
| font-weight: 950; |
| } |
|
|
| .online-button.active { |
| border-color: rgba(92, 225, 255, 0.72); |
| color: #f8fdff; |
| background: rgba(22, 78, 92, 0.7); |
| } |
|
|
| .online-status { |
| color: rgba(248, 253, 255, 0.68); |
| font-size: 12px; |
| font-weight: 900; |
| text-align: right; |
| } |
|
|
| .peer-list { |
| display: grid; |
| gap: 7px; |
| padding: 9px 10px; |
| border: 1px solid rgba(92, 225, 255, 0.18); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.34); |
| } |
|
|
| .peer-row { |
| display: grid; |
| grid-template-columns: minmax(92px, 1fr) max-content; |
| gap: 10px; |
| align-items: center; |
| color: rgba(248, 253, 255, 0.86); |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .peer-row em { |
| color: #5ce1ff; |
| font-style: normal; |
| } |
|
|
| .peer-row strong { |
| color: rgba(255, 244, 202, 0.78); |
| font-size: 11px; |
| font-weight: 950; |
| text-align: right; |
| } |
|
|
| .peer-row.off-map strong { |
| color: #ffb0b8; |
| } |
|
|
| .peer-row.empty { |
| display: block; |
| color: rgba(248, 253, 255, 0.52); |
| } |
|
|
| .room-hud { |
| position: fixed; |
| right: 24px; |
| top: 320px; |
| z-index: 2; |
| max-width: 300px; |
| padding: 10px 12px; |
| border: 1px solid rgba(92, 225, 255, 0.18); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.48); |
| color: rgba(248, 253, 255, 0.82); |
| font-family: "SFMono-Regular", Consolas, monospace; |
| font-size: 12px; |
| font-weight: 850; |
| line-height: 1.35; |
| white-space: pre-line; |
| pointer-events: none; |
| } |
|
|
| .track-options { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .track-option { |
| display: grid; |
| align-content: start; |
| gap: 8px; |
| min-height: 112px; |
| padding: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 8px; |
| background: |
| linear-gradient(135deg, rgba(92, 225, 255, 0.2), rgba(255, 240, 106, 0.08)), |
| rgba(5, 8, 11, 0.72); |
| color: #f8fdff; |
| cursor: pointer; |
| font: inherit; |
| text-align: left; |
| box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); |
| } |
|
|
| .select-preview { |
| display: block; |
| width: 100%; |
| border: 1px solid rgba(255, 255, 255, 0.13); |
| border-radius: 8px; |
| background: rgba(5, 8, 11, 0.32); |
| } |
|
|
| .car-preview { |
| height: 86px; |
| } |
|
|
| .map-preview { |
| height: 112px; |
| } |
|
|
| .track-option:hover { |
| border-color: rgba(255, 244, 202, 0.62); |
| background: |
| linear-gradient(135deg, rgba(92, 225, 255, 0.28), rgba(255, 240, 106, 0.16)), |
| rgba(5, 8, 11, 0.78); |
| } |
|
|
| .track-option.active { |
| border-color: rgba(92, 225, 255, 0.8); |
| background: |
| linear-gradient(135deg, rgba(92, 225, 255, 0.34), rgba(255, 240, 106, 0.14)), |
| rgba(5, 8, 11, 0.82); |
| } |
|
|
| .track-option span, |
| .track-option strong { |
| display: block; |
| } |
|
|
| .track-option span { |
| margin-bottom: 0; |
| color: #fff4ca; |
| font-size: 21px; |
| font-weight: 950; |
| } |
|
|
| .track-option strong { |
| color: rgba(248, 253, 255, 0.68); |
| font-size: 14px; |
| font-weight: 850; |
| } |
|
|
| .select-badges { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 5px; |
| } |
|
|
| .select-badges i { |
| display: inline-grid; |
| place-items: center; |
| min-height: 21px; |
| padding: 3px 7px; |
| border: 1px solid rgba(92, 225, 255, 0.24); |
| border-radius: 999px; |
| background: rgba(92, 225, 255, 0.1); |
| color: rgba(248, 253, 255, 0.78); |
| font-size: 10px; |
| font-style: normal; |
| font-weight: 950; |
| } |
|
|
| .finish-overlay { |
| position: absolute; |
| inset: auto 0 46px 0; |
| z-index: 5; |
| display: grid; |
| place-items: center; |
| pointer-events: none; |
| } |
|
|
| .finish-card { |
| display: grid; |
| justify-items: center; |
| gap: 10px; |
| min-width: 230px; |
| padding: 16px 18px; |
| border: 1px solid rgba(255, 244, 202, 0.26); |
| border-radius: 8px; |
| background: |
| linear-gradient(135deg, rgba(92, 225, 255, 0.16), rgba(255, 240, 106, 0.12)), |
| rgba(4, 8, 12, 0.72); |
| box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36); |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48); |
| pointer-events: auto; |
| } |
|
|
| .finish-card span { |
| color: rgba(248, 253, 255, 0.68); |
| font-size: 12px; |
| font-weight: 950; |
| } |
|
|
| .finish-card strong { |
| color: #fff4ca; |
| font-size: 22px; |
| font-weight: 950; |
| } |
|
|
| .finish-card button { |
| min-width: 132px; |
| min-height: 42px; |
| border: 1px solid rgba(255, 244, 202, 0.6); |
| border-radius: 8px; |
| background: #fff06a; |
| color: #111821; |
| cursor: pointer; |
| font: inherit; |
| font-size: 15px; |
| font-weight: 950; |
| } |
|
|
| .finish-card button:hover { |
| background: #ffffff; |
| } |
|
|
| .countdown { |
| position: absolute; |
| inset: 0; |
| z-index: 3; |
| display: grid; |
| place-items: center; |
| color: #fff2b4; |
| font-size: clamp(74px, 12vw, 132px); |
| font-weight: 950; |
| pointer-events: none; |
| text-shadow: |
| 0 7px 0 rgba(35, 22, 8, 0.65), |
| 0 18px 40px rgba(0, 0, 0, 0.55); |
| } |
|
|
| .countdown.go { |
| display: none; |
| } |
|
|
| .countdown.finish { |
| align-items: center; |
| background: rgba(5, 8, 11, 0.42); |
| color: #fff2b4; |
| font-size: clamp(44px, 7vw, 76px); |
| } |
|
|
| @media (max-width: 760px) { |
| .race-hud { |
| grid-template-columns: repeat(2, max-content) minmax(86px, 1fr); |
| gap: 12px 16px; |
| padding: 12px 14px; |
| } |
|
|
| .track-ribbon { |
| grid-column: 1 / 4; |
| min-height: 34px; |
| } |
|
|
| .hud-stat { |
| min-width: 62px; |
| } |
|
|
| .hud-stat strong { |
| font-size: 19px; |
| } |
|
|
| .boost-panel { |
| grid-column: 1 / 4; |
| margin-top: 0; |
| max-width: 220px; |
| } |
|
|
| .leaderboard { |
| left: 12px; |
| bottom: 12px; |
| min-width: 138px; |
| padding: 8px 10px; |
| font-size: 12px; |
| } |
|
|
| .minimap { |
| top: 102px; |
| right: 12px; |
| width: 190px; |
| height: 140px; |
| opacity: 0.74; |
| } |
|
|
| .lap-notice { |
| top: 72px; |
| min-width: 150px; |
| padding: 8px 12px; |
| font-size: 18px; |
| } |
|
|
| .finish-overlay { |
| bottom: 22px; |
| } |
|
|
| .car-options, |
| .bot-options, |
| .online-panel, |
| .track-options { |
| grid-template-columns: 1fr; |
| } |
|
|
| .online-status { |
| text-align: left; |
| } |
|
|
| .track-select-title { |
| font-size: 28px; |
| } |
|
|
| .track-option { |
| min-height: 96px; |
| } |
|
|
| .car-preview { |
| height: 76px; |
| } |
|
|
| .map-preview { |
| height: 90px; |
| } |
| } |
|
|
