@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');
:root{font-family:Barlow,Arial,sans-serif;color:#eff7fc;background:#081520;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;overflow:hidden}#game{display:block;width:100vw;height:100vh}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #94d1ff58;background:linear-gradient(115deg,#143b55ee,#0b2334ef);padding:11px 18px;transition:filter .15s,border-color .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.25);border-color:#acf1ff;transform:translateY(-1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e6bd60;outline-offset:3px}button:disabled{cursor:default;opacity:.42}.primary{background:linear-gradient(110deg,#d7b968,#f4dc8c);border-color:#fff0b2;color:#182b35;font-weight:700}.danger{border-color:#ec997a66;color:#ffc7ad}.selected{border-color:#ffe494!important;box-shadow:inset 0 0 0 1px #ffe494;background:#31516b!important}input,select{width:100%;padding:11px 12px;background:#091b2be8;border:1px solid #a4d6ed4d;border-radius:2px;color:#e9f7ff;min-height:42px}input[type=color]{padding:3px;min-height:38px;width:46px}label{display:block;font-size:10px;letter-spacing:1.6px;color:#acbfcc;margin:12px 0}label input,label select{display:block;margin-top:6px;font-size:14px;letter-spacing:0}h1,h2,h3,p{margin-top:0}h1,h2,h3,.page-title,.main-nav,.home-title,.mode-card strong{font-family:'Barlow Condensed',Arial,sans-serif}h1{font-size:48px;margin:12px 0}h2{font-size:25px;letter-spacing:1px;margin-bottom:16px}h3{font-size:21px}.muted,.page-sub{color:#a9bdca;font-size:12px;line-height:1.6}.eyebrow{font-size:10px;letter-spacing:3px;color:#edca7d}.panel{background:linear-gradient(135deg,#102a3fec,#091a29f2);border:1px solid #98d3ed38;border-radius:4px;padding:24px;box-shadow:0 18px 60px #0004}
#front{position:absolute;inset:0;overflow:auto;padding:40px 5vw 80px;background:linear-gradient(90deg,#06121bb8,transparent 75%);z-index:10}body[data-screen=home] #front,body[data-screen=garage] #front{background:linear-gradient(90deg,#07131bd9,transparent 65%)}.home-title{font-size:41px;line-height:.9;letter-spacing:5px;font-style:italic;position:absolute;top:9%;left:6%}.home-title span{display:block;color:#cce4ee;font-weight:600}.home-title strong{font-size:67px;display:block;color:white;text-shadow:0 3px 25px #53beff55}.home-title small{font:500 8px Barlow,Arial;display:block;letter-spacing:3px;margin-top:13px;color:#a6bac8}.main-nav{position:absolute;left:6%;bottom:19%;width:250px;display:grid;gap:5px;transform:skewX(-8deg)}.main-nav button{text-align:left;font-size:22px;font-weight:700;font-style:italic;letter-spacing:1px;padding:9px 18px;background:linear-gradient(100deg,#07131cf2,#0e2a3cbf);border:none;border-left:3px solid #65c8ff}.main-nav button:hover:not(:disabled){background:linear-gradient(100deg,#e9cd80,#ffedb7);color:#122436}.main-nav button:disabled{font-size:15px;border-left-color:#778f9c}.main-nav small{float:right;font:500 8px Barlow;letter-spacing:1px;margin-top:5px}.home-caption{position:absolute;left:6%;right:5%;bottom:5%;border-bottom:2px solid #5dc9ff7a;padding:12px 0;display:flex;gap:24px;align-items:center}.home-caption b{font-size:16px}.home-caption span{font-size:10px;letter-spacing:2px;color:#a6c4d5}.page-title{font-size:clamp(44px,7vw,84px);font-weight:700;font-style:italic;letter-spacing:3px;color:#e2f2fa;margin-bottom:24px;text-shadow:0 2px 20px #0008}.page-sub{margin-top:-14px}.back{position:fixed;left:5vw;bottom:25px;font-weight:700;letter-spacing:2px;z-index:14;background:#07131ee8}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px}.mode-card{min-height:155px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:22px;border:1px solid #5cb6e8a8;background:linear-gradient(145deg,#1f99ba,#0a2345 80%);box-shadow:inset 0 0 50px #03112370,0 15px 30px #0003}.mode-card:before{content:'';position:absolute;inset:-40%;background:repeating-linear-gradient(120deg,transparent 0 30px,#c8f1ff0b 31px 33px);transform:rotate(-10deg)}.mode-card .card-mark{position:absolute;right:10px;top:-10px;font:800 92px 'Barlow Condensed',Arial;letter-spacing:-4px;color:#fff2;white-space:nowrap;max-width:90%;overflow:hidden}.mode-card strong{font-size:clamp(22px,3vw,33px);font-weight:600;position:relative}.mode-card small{font-size:10px;letter-spacing:1px;margin-top:5px;color:#d7e9f4;position:relative}.mode-card.orange{background:linear-gradient(140deg,#dc862c,#62282b 60%,#152744)}.mode-card.green{background:linear-gradient(140deg,#577d51,#12352f 70%)}.mode-card.purple{background:linear-gradient(140deg,#804baf,#292452 70%)}.mode-card.teal{background:linear-gradient(140deg,#219a98,#123947 70%)}.mode-card.red{background:linear-gradient(140deg,#aa3b55,#30213a 70%)}
.garage-panel{max-width:330px;background:#0a1d2cd9;padding:18px 22px;border-left:2px solid #80ceff}.car-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.car-options button{padding:9px 6px;font-size:13px}.swatches{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.swatch{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #ffffff85}.garage-panel p{font-size:10px;line-height:1.5;margin:18px 0 0;color:#a5becf}.transport-tabs{display:flex;gap:8px;margin-bottom:16px}.transport-tabs button{min-width:130px}.server-line{display:flex;align-items:flex-end;gap:12px;max-width:900px}.server-line label{flex:1;margin:0}.server-line button{min-height:42px}.private-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;max-width:1100px;margin-top:18px}.private-columns h2{font-size:21px}.private-columns label{margin:10px 0}.field-pair{display:flex;gap:10px}.field-pair>*{flex:1;min-width:0}.check{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:0}.check input{width:16px;min-height:16px;display:inline;margin:0}.room-row{border-bottom:1px solid #ffffff24;padding:13px 0;display:flex;gap:10px;align-items:center;justify-content:space-between}.room-row strong{font-size:14px}.room-row small{display:block;font-size:10px;color:#a5bfce;margin-top:5px}.room-row button{padding:8px 10px;font-size:11px}.lobby{max-width:900px}.lobby>button{margin-right:8px;margin-top:15px}#lobby-players{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.team-list{padding:16px;background:#071b2a77;border-top:3px solid #53beff}.team-list.orange{border-top-color:#ffa35c}.team-list p{font-size:14px;margin-bottom:10px}.team-list small{font-size:9px;color:#a8bac6}.pause-panel{width:min(430px,90vw);margin:8vh auto;text-align:center}.pause-panel>button{display:block;width:100%;margin-top:12px}.pause-panel p{font-size:13px;color:#afc7d5;line-height:1.5}.pause-panel .result-score{font-size:44px;color:white;margin:20px}.modal-shade{position:absolute;inset:0;background:#010c19b8;display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}.dialog{width:min(430px,95vw)}.dialog>button{width:100%;margin-top:10px}.dialog p{font-size:13px;line-height:1.5;color:#afc7d5}.dialog h2{overflow-wrap:anywhere}.team-blue{background:#1c5d8c}.team-orange{background:#98542b}#toast{position:absolute;left:50%;top:20px;transform:translateX(-50%);max-width:min(90vw,650px);background:#122d43f5;border:1px solid #a7d8ef85;border-radius:4px;padding:13px 20px;color:#eef7fc;z-index:100;font-size:13px;text-align:center}
#hud{position:absolute;inset:0;pointer-events:none}header{position:absolute;top:0;width:100%;padding:25px 30px;display:flex;justify-content:space-between}.brand{font-size:14px;letter-spacing:2px;color:#d8eaf4}.scoreboard{position:absolute;left:50%;transform:translateX(-50%);top:20px;background:#0a1c2dcf;border:1px solid #a3d7ed22;min-width:185px;text-align:center;padding:8px 20px}.scoreboard>div{display:flex;justify-content:space-between;align-items:center;gap:20px}.scoreboard span{font:700 35px 'Barlow Condensed',Arial;color:#67caff}.scoreboard span:last-child{color:#ffae69}.scoreboard b{font:600 22px 'Barlow Condensed',Arial}.scoreboard small{font-size:8px;letter-spacing:2px;color:#b7cddc}footer{position:absolute;left:30px;right:30px;bottom:25px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.control-help{font-size:10px;line-height:2.5;color:#9fb5c4}.control-help b{font-size:9px;border:1px solid #ffffff30;padding:3px 5px;color:#dae7ef;margin-right:4px}.telemetry{display:flex;align-items:center;gap:28px;text-align:center}.telemetry strong{font:700 49px 'Barlow Condensed',Arial;display:block;line-height:1}.telemetry small{display:block;font-size:9px;letter-spacing:2px;color:#a7c2d0;margin-top:5px}.fuel{width:85px;color:#dbd37d}.track{height:4px;background:#ffffff22;margin-top:9px}.track i{display:block;height:100%;width:33%;background:#dfcf7e}#goal{position:absolute;top:36%;width:100%;text-align:center;font:800 clamp(48px,8vw,85px) 'Barlow Condensed',Arial;color:#eddb8f;text-shadow:0 4px 25px #000;pointer-events:none}#replay{position:absolute;inset:0;border-top:4px solid #edc17a;border-bottom:4px solid #edc17a;pointer-events:none}#replay>div:first-child{position:absolute;top:120px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between}#replay b{font-size:12px;letter-spacing:3px;color:#ffcf8b}#replay button{pointer-events:auto}.replay-track{position:absolute;left:30px;right:30px;bottom:25px;height:3px;background:#ffffff35}.replay-track i{display:block;height:100%;width:0;background:#ffd397}.replaying footer{visibility:hidden}kbd{font:11px Barlow,Arial;border:1px solid #ffffff30;padding:3px 5px;margin-left:6px}body.playing,body.playing *{cursor:none!important}body.playing #front{pointer-events:none}
@media(max-width:800px){#front{padding:25px 5vw 80px}.card-grid{gap:10px}.mode-card{min-height:125px;padding:14px}.mode-card strong{font-size:22px}.mode-card .card-mark{font-size:64px}.private-columns{grid-template-columns:1fr}.main-nav{width:215px;bottom:18%}.home-title{top:9%;font-size:30px}.home-title strong{font-size:52px}.home-caption{gap:10px;flex-wrap:wrap}.home-caption span{font-size:8px}.garage-panel{max-width:280px}.brand{font-size:10px}.scoreboard{top:60px}header{padding:18px}footer{left:18px;right:18px}.control-help{max-width:340px;font-size:8px}.telemetry{gap:12px}.telemetry strong{font-size:36px}.fuel{width:65px}.server-line{flex-wrap:wrap}.server-line label{min-width:100%}}@media(max-width:500px){.card-grid{grid-template-columns:1fr 1fr}.home-caption span{display:none}.home-title{left:6%}.main-nav{left:6%;width:180px}.main-nav button{font-size:20px}.garage-panel{background:#0b1f30f0}.control-help{display:none}.telemetry{margin-left:auto}.page-title{font-size:45px}}
#save-award{position:absolute;top:20%;left:0;right:0;pointer-events:none;display:grid;justify-items:center;gap:3px;color:#ffd89b;text-shadow:0 2px 10px #000,0 0 24px #ffae4255;animation:save-award-in .35s ease-out}#save-award span{font-size:42px}#save-award strong{font:700 clamp(28px,4vw,46px) 'Barlow Condensed',Arial;letter-spacing:3px}#save-award small{font-size:9px;letter-spacing:3px}#save-award[data-epic=true]{color:#ffe6a8;text-shadow:0 0 24px #ffb13d,0 2px 10px #000}@keyframes save-award-in{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Match HUD: compact team blocks and a circular boost meter. */
.scoreboard{top:0;padding:0;min-width:256px;background:none;border:0;filter:drop-shadow(0 5px 12px #0005)}.scoreboard>div{display:grid;grid-template-columns:64px 128px 64px;gap:0;align-items:stretch}.scoreboard span{display:grid;place-items:center;height:64px;font:400 47px 'Barlow Condensed',Arial;color:#fff;background:linear-gradient(135deg,#168bff,#2863cf);border-bottom:3px solid #6dcdff;text-shadow:0 2px 8px #12396b;transform:skewY(-3deg)}.scoreboard span:last-child{color:white;background:linear-gradient(135deg,#ee9d42,#e45b23);border-color:#ffc178;transform:skewY(3deg)}.scoreboard b{display:grid;place-items:center;background:#08101bdb;font:400 29px Barlow,Arial;font-variant-numeric:tabular-nums;letter-spacing:1px}.scoreboard small{display:inline-block;margin-top:8px;padding:4px 12px;background:#061322a6;border-radius:2px;font-size:8px;letter-spacing:2px}.fuel{--boost:33%;position:relative;width:112px;height:112px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle,#09162ae8 61%,transparent 63%),conic-gradient(from 220deg,#f4c778 0 var(--boost),#5d799333 var(--boost) 100%);border:1px solid #b8d8ef44;box-shadow:0 0 25px #08152766,inset 0 0 0 5px #09162a66;color:#ffce76}.fuel strong{font-weight:400;font-size:51px;text-shadow:0 0 13px #ffb93644}.fuel small{font-size:8px;color:#c4d9e3;letter-spacing:3px;margin-top:2px}.fuel .track{position:absolute;bottom:11px;width:30px;height:2px;margin:0;opacity:.45}.fuel.boosting{box-shadow:0 0 28px #ffb53155,inset 0 0 0 5px #09162a66}.telemetry{gap:20px;align-items:flex-end}.telemetry>div:first-child{opacity:.8;margin-bottom:12px}.telemetry>div:first-child strong{font-size:33px}.brand{opacity:.75;font-size:10px;letter-spacing:2px}@media(max-width:800px){.scoreboard{top:0;min-width:220px}.scoreboard>div{grid-template-columns:52px 112px 52px}.scoreboard span{height:54px;font-size:39px}.scoreboard b{font-size:24px}.fuel{width:92px;height:92px}.fuel strong{font-size:43px}}
.controls-panel{max-width:690px;margin-top:16px}.control-presets{display:flex;gap:10px;flex-wrap:wrap}.binding-list{display:grid;grid-template-columns:1fr 1fr;gap:5px 22px}.binding-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #ffffff18}.binding-list span{font-size:12px}.binding-list button{min-width:115px;padding:8px;font-size:12px}@media(max-width:650px){.binding-list{grid-template-columns:1fr}}
/* Player account, ranks and live match statistics. */
.player-profile{max-width:900px;margin:18px 0}.player-level{min-width:190px;max-width:320px;padding:10px 0}.player-level>b{display:block;font:600 19px 'Barlow Condensed',Arial;letter-spacing:1px;color:#f4dba3}.player-level>span{display:block;font-size:10px!important;color:#bcd2e2}.xp-track{height:5px;margin-top:7px;background:#ffffff1c;border-radius:3px;overflow:hidden}.xp-track i{display:block;height:100%;background:linear-gradient(90deg,#419ff1,#9ce8ff)}.home-caption .player-level{padding:0;min-width:180px;max-width:230px}.rank-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.rank-cards>div{padding:16px;background:#09233977;border:1px solid #b7d7ee22}.rank-cards>div>small{font-size:10px;color:#b1c5d5}.rank-label{display:flex;gap:12px;align-items:center}.rank-label b{font-size:14px}.rank-label small{display:block;font-size:10px;color:#b6c7d9;margin-top:4px}.rank-badge{flex-shrink:0;filter:drop-shadow(0 0 5px currentColor)}.playlist-choice .mode-card{width:100%}.playlist-rank{padding:10px 13px;background:#0a1c2de8;border:1px solid #7cbbdf33;min-height:65px}.account-dialog{max-width:440px;max-height:92vh;overflow:auto}.account-dialog button{width:100%;margin-top:8px}.account-dialog form label{margin:10px 0}#account-error{font-size:12px;line-height:1.5;color:#ffc4a1;min-height:1em}.results-panel{max-width:1000px;margin:0 auto}.results-panel>h1{margin:8px 0}.results-panel>.result-score{font-size:32px;margin:8px 0}.reward-panel{padding:16px;margin:14px 0;background:#143347aa;border:1px solid #9cddff33}.reward-panel h2{margin:7px 0}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}#match-scoreboard{position:absolute;z-index:12;top:18%;left:8%;right:8%;pointer-events:none;max-height:76vh;overflow:auto;background:#061220e8;padding:16px;border:1px solid #bce0f533;box-shadow:0 15px 50px #0008}.score-team{margin-bottom:15px}.score-team>h2{font-size:24px;margin:0;padding:8px 14px;letter-spacing:2px;display:flex;justify-content:space-between;background:#1168ba88}.score-team.orange>h2{background:#ba631e99}.score-scroll{overflow-x:auto}.score-team table{width:100%;border-collapse:collapse;font-size:14px;background:linear-gradient(90deg,#0e3964bb,#09233e99)}.score-team.orange table{background:linear-gradient(90deg,#64380cbb,#31220e99)}.score-team th{font:500 10px Barlow,Arial;letter-spacing:1px;color:#bfd5e5}.score-team td,.score-team th{padding:11px 10px;text-align:center;border-bottom:1px solid #ffffff13;white-space:nowrap}.score-team td:first-child,.score-team th:first-child{text-align:left;min-width:180px}.score-team td small{font-size:9px;opacity:.65;margin-left:7px}.score-team .own-player{background:#ffffff13;box-shadow:inset 3px 0 #f8e2a0}.player-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.score-tables{width:100%}@media(max-width:650px){.rank-cards{grid-template-columns:1fr}.home-caption .player-level{min-width:140px;width:140px}#match-scoreboard{left:3%;right:3%;padding:8px;top:14%}.score-team td,.score-team th{padding:8px 6px;font-size:11px}.playlist-rank{gap:5px;padding:8px}.playlist-rank b{font-size:11px}.playlist-rank svg{width:32px}.account-dialog{padding:18px}}
