@import"https://fonts.googleapis.com/css2?family=Bangers&family=Rubik:wght@400;600;800&display=swap";:root{--accent: #ffcc00;--accent2: #ff4d4d;--blue: #35c2ff;--font-display: "Bangers", "Impact", sans-serif;--font-body: "Rubik", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-body);color:#fff;user-select:none;-webkit-user-select:none}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.hidden{display:none!important}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto}#loading{background:radial-gradient(circle at 50% 40%,#1c2b5a,#06091a 70%);z-index:50}.loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading p{margin-top:18px;letter-spacing:3px;font-weight:600}#menu{background:linear-gradient(180deg,#0a0e288c,#0a0e28d9);z-index:20;justify-content:flex-start;overflow-y:auto;padding:3vh 0 4vh}.title-wrap{text-align:center;margin-bottom:14px;flex-shrink:0;animation:pop .8s cubic-bezier(.2,1.4,.4,1)}.title{font-family:var(--font-display);font-size:clamp(40px,min(9vw,11vh),110px);line-height:.9;letter-spacing:4px;color:#fff;text-shadow:0 6px 0 #b8860b,0 12px 0 #5a4300,0 18px 30px rgba(0,0,0,.6);transform:rotate(-3deg)}.title span{color:var(--accent);display:block;font-size:1.25em;text-shadow:0 6px 0 #c23,0 12px 0 #611,0 18px 30px rgba(0,0,0,.6)}.subtitle{font-weight:800;letter-spacing:6px;color:var(--blue);margin-top:8px;text-transform:uppercase}@keyframes pop{0%{transform:scale(.4) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.menu-panel{background:#0000008c;border:2px solid rgba(255,255,255,.15);border-radius:18px;padding:16px 30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px;flex-shrink:0;align-items:center;max-width:900px;width:92vw;box-shadow:0 20px 60px #0009}.menu-section{width:100%;text-align:center}.menu-section h3{font-family:var(--font-display);letter-spacing:3px;font-size:22px;color:var(--accent);margin-bottom:10px}.racer-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.racer-card{width:92px;padding:8px 4px;border-radius:12px;border:3px solid transparent;background:#ffffff14;cursor:pointer;transition:transform .15s,border-color .15s;text-align:center}.racer-card:hover{transform:translateY(-4px) scale(1.05)}.racer-card.selected{border-color:var(--accent);background:#ffcc0026;box-shadow:0 0 20px #fc06}.racer-swatch{width:44px;height:44px;border-radius:50%;margin:0 auto 6px;border:3px solid rgba(255,255,255,.7);box-shadow:inset 0 -8px 12px #0006}.racer-name{font-weight:800;font-size:12px;letter-spacing:1px}.racer-stat{font-size:10px;opacity:.7;margin-top:3px}.track-grid,.pill-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.track-card,.pill{padding:10px 18px;border-radius:30px;border:2px solid rgba(255,255,255,.2);background:#ffffff14;cursor:pointer;font-weight:800;letter-spacing:1px;transition:all .15s}.track-card:hover,.pill:hover{background:#ffffff2e}.track-card.selected,.pill.selected{border-color:var(--accent);background:#fc03;color:var(--accent)}.track-card small{display:block;font-size:10px;opacity:.6;font-weight:400;margin-top:2px}.btn-primary,.btn-secondary{font-family:var(--font-display);font-size:30px;letter-spacing:3px;padding:12px 48px;border-radius:50px;border:none;cursor:pointer;color:#1a1400;background:linear-gradient(180deg,#ffe066,#ffb400);box-shadow:0 6px #a06d00,0 12px 24px #00000080;transition:transform .1s,box-shadow .1s;margin-top:6px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px #a06d00,0 16px 28px #00000080}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #a06d00}.btn-secondary{background:linear-gradient(180deg,#6fd0ff,#2c9be0);color:#06213a;box-shadow:0 6px #145a8a,0 12px 24px #00000080;font-size:22px;padding:10px 36px}.btn-secondary:active{transform:translateY(4px);box-shadow:0 2px #145a8a}.btn-primary:disabled,.btn-secondary:disabled{opacity:.45;cursor:default;transform:none;filter:grayscale(.6)}.controls-hint{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:12px;opacity:.75;margin-top:4px}.controls-hint b{color:var(--accent)}.menu-footer{max-width:900px;width:92vw;margin-top:12px;flex-shrink:0;text-shadow:0 1px 4px rgba(0,0,0,.8)}.mode-tabs{display:flex;gap:8px;margin-bottom:12px;flex-shrink:0;background:#00000073;padding:5px;border-radius:40px;border:2px solid rgba(255,255,255,.12)}.mode-tab{font-family:var(--font-display);font-size:22px;letter-spacing:2px;padding:8px 26px;border-radius:30px;border:none;cursor:pointer;background:transparent;color:#ffffffbf;transition:background .15s,color .15s}.mode-tab:hover:not(:disabled):not(.selected){color:#fff;background:#ffffff1a}.mode-tab.selected{background:var(--accent);color:#1a1400}.mode-tab:disabled{opacity:.35;cursor:not-allowed}.vs-input{font-family:var(--font-body);font-size:18px;font-weight:800;letter-spacing:1px;color:#fff;background:#ffffff1a;border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 14px;outline:none;text-align:center;transition:border-color .15s,background .15s;user-select:text;-webkit-user-select:text}.vs-input:focus{border-color:var(--accent);background:#ffffff29}.vs-input::placeholder{color:#ffffff59}.vs-entry{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.vs-entry #vs-name{width:min(320px,80vw)}.vs-hint{font-size:13px;opacity:.7;text-align:center}.vs-divider{display:flex;align-items:center;gap:12px;width:min(460px,80vw);margin:8px 0 4px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.55}.vs-divider:before,.vs-divider:after{content:"";flex:1;height:2px;background:#ffffff4d}.vs-join-row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.vs-join{display:flex;gap:8px;align-items:center}.vs-join .btn-secondary,.vs-join-row>.btn-secondary{margin-top:0}.vs-code{width:120px;font-family:var(--font-display);font-size:26px;letter-spacing:6px;padding:6px 10px;text-transform:uppercase}.vs-status{min-height:18px;font-size:13px;font-weight:600;color:var(--blue);text-align:center}.vs-status.error{color:#ff8a80}.vs-room{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.vs-room-head{display:flex;align-items:center;gap:14px;width:100%;justify-content:center;flex-wrap:wrap}.vs-room-id{display:flex;flex-direction:column;align-items:center;line-height:1}.vs-room-id small{font-size:10px;font-weight:800;letter-spacing:2px;opacity:.6}.vs-room-id b{font-family:var(--font-display);font-size:44px;letter-spacing:8px;color:var(--accent);text-shadow:0 4px 0 #a06d00}.vs-invite{display:flex;gap:6px;align-items:center}.vs-invite .vs-input{width:min(300px,56vw);font-size:12px;font-weight:600;padding:8px 10px;text-align:left}.vs-small-btn{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:1px;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;color:#06213a;background:linear-gradient(180deg,#6fd0ff,#2c9be0);min-width:104px}.vs-small-btn:active{transform:translateY(2px)}.vs-ping{font-size:11px;font-weight:800;letter-spacing:1px;opacity:.55;min-width:44px}.vs-count{font-family:var(--font-body);font-size:14px;color:#fff;opacity:.6;letter-spacing:1px}.vs-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.vs-player{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:30px;background:#ffffff14;border:2px solid transparent;font-weight:800;font-size:14px}.vs-player.me{border-color:var(--accent);background:#ffcc0026}.vs-player .dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;flex-shrink:0}.vs-player .tags{font-size:10px;letter-spacing:1px;opacity:.65}.racer-card .taken-by{font-size:10px;font-weight:800;margin-top:3px;color:var(--blue);min-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.racer-card.taken{opacity:.45;cursor:not-allowed}.racer-card.taken:hover{transform:none}.vs-settings{width:100%;display:flex;flex-direction:column;gap:10px}.vs-settings.locked .track-card,.vs-settings.locked .pill{cursor:default;pointer-events:none}.vs-settings.locked .track-card:not(.selected),.vs-settings.locked .pill:not(.selected){opacity:.45}.vs-settings-row{display:flex;gap:12px 28px;justify-content:center;flex-wrap:wrap}.vs-settings-row .menu-section{width:auto}.menu-section.dim{opacity:.4}.vs-room-actions{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}#hud{position:absolute;top:0;right:0;bottom:0;left:0}#hud-top-left{position:absolute;top:20px;left:24px;display:flex;flex-direction:column;gap:6px}#position-wrap{display:flex;align-items:baseline;font-family:var(--font-display);text-shadow:0 4px 0 rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.6)}#position{font-size:96px;line-height:.9;color:var(--accent);transition:transform .15s}#position-suffix{font-size:36px;margin-left:4px;color:#fff}#position.bump{transform:scale(1.25)}#lap-wrap{font-family:var(--font-display);font-size:34px;letter-spacing:2px;text-shadow:0 3px 0 rgba(0,0,0,.5)}#lap-total{opacity:.6;font-size:24px}#hud-top-right{position:absolute;top:20px;right:24px;text-align:right;font-family:var(--font-body);font-weight:800}#timer{font-size:32px;letter-spacing:2px;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.7)}#best-lap{font-size:14px;opacity:.8;letter-spacing:1px;margin-top:2px}#end-timer{margin-top:6px;font-family:var(--font-display);font-size:26px;letter-spacing:2px;color:var(--accent2);text-shadow:0 3px 0 #400,0 4px 14px rgba(0,0,0,.6)}#item-slot{position:absolute;top:110px;right:24px;width:110px;height:110px;border-radius:22px;background:radial-gradient(circle,#ffffff2e,#0000008c);border:4px solid rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 20px #00000080;transition:transform .2s,border-color .2s}#item-slot.has-item{border-color:var(--accent);box-shadow:0 0 24px #ffcc0080,0 8px 20px #00000080}#item-slot.rolling{animation:roll .12s linear infinite}@keyframes roll{0%{transform:scale(1)}50%{transform:scale(1.06) rotate(2deg)}to{transform:scale(1) rotate(-2deg)}}#item-icon{font-size:56px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}#item-name{font-size:11px;font-weight:800;letter-spacing:1px;margin-top:3px;text-transform:uppercase}#speedo{position:absolute;right:24px;bottom:24px;width:180px;height:110px}#speed-arc{position:absolute;top:0;right:0;bottom:0;left:0}#speed-arc svg{width:100%;height:100%}#speed-bg{fill:none;stroke:#ffffff26;stroke-width:10;stroke-linecap:round}#speed-fg{fill:none;stroke:url(#grad);stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset .08s linear,stroke .2s;filter:drop-shadow(0 0 6px rgba(255,204,0,.6))}#speed-val{position:absolute;left:0;right:0;top:46px;text-align:center;font-family:var(--font-display);font-size:44px;letter-spacing:2px;text-shadow:0 3px 0 rgba(0,0,0,.6)}#speed-unit{position:absolute;left:0;right:0;top:90px;text-align:center;font-size:12px;font-weight:800;letter-spacing:2px;opacity:.7}#minimap{position:absolute;left:24px;bottom:24px;width:220px;height:220px}#minimap canvas{width:100%;height:100%;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}#standings{position:absolute;left:24px;top:190px;display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:600}.standing-row{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 6px;background:#00000073;border-radius:20px;border-left:4px solid transparent;transition:transform .3s;min-width:150px}.standing-row.me{background:#ffcc0059;border-left-color:var(--accent)}.standing-row .pos{font-family:var(--font-display);font-size:16px;width:18px;text-align:center}.standing-row .dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff}#countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:220px;color:var(--accent);text-shadow:0 10px 0 #a06d00,0 20px 50px rgba(0,0,0,.7);pointer-events:none}#countdown.go{color:#5cff7a;text-shadow:0 10px 0 #148a2a,0 20px 50px rgba(0,0,0,.7)}#countdown span{animation:cdpop .9s cubic-bezier(.2,1.5,.4,1) both;display:block}@keyframes cdpop{0%{transform:scale(2.5);opacity:0}30%{transform:scale(1);opacity:1}80%{opacity:1}to{transform:scale(.6);opacity:0}}#notice{position:absolute;top:24%;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:64px;letter-spacing:4px;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.6);pointer-events:none}#notice span{display:block;animation:noticeAnim 1.6s cubic-bezier(.2,1.4,.4,1) both}@keyframes noticeAnim{0%{transform:translateY(40px) scale(.5);opacity:0}20%{transform:translateY(0) scale(1.1);opacity:1}80%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px)}}#wrong-way{position:absolute;top:30%;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:56px;color:var(--accent2);text-shadow:0 4px 0 #400,0 8px 20px rgba(0,0,0,.6);animation:blink .5s steps(2) infinite}@keyframes blink{to{opacity:.3}}#flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}#pause,#results{background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:30}.panel{background:#0f1432e6;border:2px solid rgba(255,255,255,.15);border-radius:22px;padding:34px 50px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 60px #000000b3;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}.panel h2{font-family:var(--font-display);font-size:64px;letter-spacing:4px;color:var(--accent);text-shadow:0 6px 0 #a06d00;margin-bottom:8px}.results-panel{min-width:460px}#results-table{width:100%;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.result-row{display:flex;align-items:center;gap:14px;padding:8px 16px;background:#ffffff12;border-radius:12px;font-weight:600;animation:slideIn .4s both}.result-row.me{background:#ffcc0040;border:2px solid var(--accent)}.result-row .pos{font-family:var(--font-display);font-size:28px;width:40px;color:var(--accent)}.result-row .dot{width:18px;height:18px;border-radius:50%;border:2px solid #fff}.result-row .name{flex:1}.result-row .time{font-variant-numeric:tabular-nums;opacity:.85}.result-row .name small{font-size:10px;font-weight:800;letter-spacing:1px;opacity:.55;margin-left:4px}#results-table.refresh .result-row{animation:none}.results-wait{min-height:18px;font-size:14px;font-weight:600;color:var(--blue)}@keyframes slideIn{0%{transform:translate(-40px);opacity:0}to{transform:none;opacity:1}}.results-stats{display:flex;gap:24px;font-weight:800;opacity:.85;font-size:14px;letter-spacing:1px}@media (max-width: 720px){#position{font-size:64px}#minimap{width:140px;height:140px}#standings{display:none}#speedo{transform:scale(.75);transform-origin:bottom right}.results-panel{min-width:90vw}}