@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800&family=Inter:wght@500;600;700&display=swap";:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;--ink: #eafcff;--navy: #071722;--teal: #2af2e4;--coral: #ff527c;--amber: #ffbd61}*{box-sizing:border-box}html,body,#game-shell{width:100%;height:100%;margin:0;overflow:hidden;background:var(--navy)}body{-webkit-user-select:none;user-select:none}button{font:inherit}#game{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}#game-shell:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0000006b}.hidden{display:none!important}.eyebrow{color:var(--teal);font:800 12px/1 Inter,sans-serif;letter-spacing:.22em}#split-line{position:absolute;inset:0 auto 0 50%;width:2px;z-index:5;background:#fff3;opacity:0;transition:opacity .3s}#split-line.visible{opacity:1}#split-line span{position:absolute;width:8px;height:64px;left:-4px;top:calc(50% - 32px);border-radius:5px;background:linear-gradient(var(--teal) 50%,var(--coral) 50%);box-shadow:0 0 18px #2af2e459,0 0 18px #ff527c59}.screen{position:absolute;inset:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .45s ease}.screen.active{opacity:1;pointer-events:auto}#menu{overflow:hidden}.key-art{position:absolute;inset:-3%;background:url(/assets/shark-circuit-key-art.png) center / cover no-repeat;transform:scale(1.03);animation:breathe 12s ease-in-out infinite alternate}.vignette{position:absolute;inset:0;background:linear-gradient(90deg,#020c13e0,#020c1380 40%,#020c1314 72%),linear-gradient(0deg,rgba(2,9,15,.85),transparent 44%)}@keyframes breathe{to{transform:scale(1.075) translate3d(-.5%,-.3%,0)}}.brand{position:absolute;left:clamp(34px,6vw,100px);top:clamp(46px,12vh,132px);width:min(540px,43vw);filter:drop-shadow(0 5px 16px #000)}.brand h1{margin:11px 0 8px;font:italic 900 clamp(58px,8vw,116px)/.71 "Barlow Condensed",Impact,sans-serif;letter-spacing:-.045em;transform:skew(-4deg)}.brand h1 span,.brand h1 strong{display:block}.brand h1 span{color:#fff}.brand h1 strong{color:var(--teal);margin-left:.3em;text-shadow:4px 4px 0 #073345,7px 7px 0 rgba(0,0,0,.5)}.brand p{max-width:430px;color:#ffffffbd;font-size:14px;line-height:1.5}.garage{position:absolute;right:clamp(34px,6vw,100px);top:clamp(48px,10vh,104px);width:min(400px,36vw);padding:16px;background:linear-gradient(145deg,#071b27e6,#020c13c7);border:1px solid rgba(255,255,255,.15);border-top:3px solid var(--teal);box-shadow:0 20px 60px #0000007a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.garage-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#fff;font:900 11px/1 Inter;letter-spacing:.15em}.garage-heading small{color:#fff6;font-size:8px}.garage-row{--player-accent: var(--teal);display:grid;grid-template-columns:34px 28px 1fr 28px;align-items:stretch;gap:5px;margin-top:7px}.garage-row.player-two-select{--player-accent: var(--coral)}.garage-player{display:grid;place-items:center;align-content:center;gap:5px;background:#ffffff0b}.garage-player i{width:8px;height:8px;border-radius:50%;background:var(--player-accent);box-shadow:0 0 10px var(--player-accent)}.garage-player span{color:#fff;font:900 8px/1 Inter}.garage-row>button{padding:0;color:#fff;background:#ffffff14;font:900 25px/1 Barlow Condensed,sans-serif;transition:color .15s,background .15s}.garage-row>button:hover,.garage-row>button:focus-visible{color:var(--navy);background:var(--player-accent);outline:none}.vehicle-card{min-width:0;display:grid;grid-template-columns:45px 1fr;align-items:center;gap:9px;padding:8px 10px;border-left:3px solid var(--player-accent);background:#fff1}.vehicle-card.changing{animation:vehicle-swap .18s ease-out}.vehicle-icon{font-size:30px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}.vehicle-card>div{min-width:0;display:flex;flex-direction:column;gap:3px}.vehicle-card b{overflow:hidden;color:#fff;font:italic 900 16px/1 Barlow Condensed,sans-serif;letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis}.vehicle-card small{overflow:hidden;color:#ffffff7a;font:700 8px/1 Inter;letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis}.garage-keys{display:flex;justify-content:space-between;padding:9px 2px 0;color:#ffffff6b;font:800 8px/1 Inter;letter-spacing:.1em}@keyframes vehicle-swap{0%{opacity:.35;transform:scale(.96)}}.menu-panel{position:absolute;left:clamp(34px,6vw,100px);bottom:clamp(48px,10vh,100px);width:min(385px,38vw)}button{border:0;color:var(--navy);background:var(--teal);cursor:pointer;font-weight:900;letter-spacing:.08em}#start{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 20px;clip-path:polygon(0 0,95% 0,100% 50%,95% 100%,0 100%,3% 50%);transition:transform .15s,filter .15s}#start:hover,#start:focus-visible{transform:translate(6px);filter:brightness(1.15) drop-shadow(0 0 14px rgba(42,242,228,.4));outline:none}#start small{font-size:10px;opacity:.68}.controller-status{display:flex;gap:10px;margin:12px 0 8px}.controller-status>div{flex:1;display:grid;grid-template-columns:12px 1fr;gap:2px 8px;padding:10px 12px;background:#020c13b8;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.controller-status i{grid-row:1/3;width:8px;height:8px;align-self:center;border-radius:50%;background:#7d8790;box-shadow:0 0 8px currentColor}.controller-status .connected i{background:#42f59b}.controller-status span{color:#fff;font:800 10px/1 Inter;letter-spacing:.1em}.controller-status b{color:#ffffff7a;font:700 8px/1 Inter;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-button{color:#ffffffa8;background:none;padding:8px 0;font-size:10px}.text-button:hover{color:#fff}#menu footer{position:absolute;right:28px;bottom:22px;color:#ffffff6b;font-size:10px;letter-spacing:.08em}.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#01090ead;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;pointer-events:none;transition:opacity .2s}.modal.open{opacity:1;pointer-events:auto}.modal-card{position:relative;width:min(650px,calc(100vw - 40px));padding:38px;background:linear-gradient(145deg,#0e2733fa,#05121cfa);border:1px solid rgba(42,242,228,.25);box-shadow:0 25px 80px #000}.modal-card h2,.results-card h2{margin:8px 0 28px;color:#fff;font:italic 900 40px/.95 Barlow Condensed,sans-serif;text-transform:uppercase}.modal-card>p{margin:24px 0 0;color:#ffffff8c;font-size:12px}.close{position:absolute;right:16px;top:12px;color:#fff9;background:none;font-size:28px}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.controls-grid>div{display:flex;gap:12px;align-items:center;padding:12px;background:#ffffff0b}kbd{display:grid;place-items:center;min-width:38px;height:32px;border:1px solid rgba(255,255,255,.28);border-radius:6px;color:var(--teal);background:#07131c;box-shadow:inset 0 -3px #ffffff14;font:800 11px Inter}.controls-grid span{display:flex;flex-direction:column;gap:4px}.controls-grid b{color:#fff;font-size:11px}.controls-grid small{color:#ffffff6b;font-size:9px}.compact{width:min(390px,calc(100vw - 40px));text-align:center}.compact button,.results-card button{width:100%;padding:15px;margin-top:8px}.compact .secondary{color:#fff;background:#ffffff1f}#hud{position:absolute;inset:0;z-index:6;pointer-events:none}.player-hud{position:absolute;top:0;bottom:0;width:50%;padding:24px 28px;text-shadow:0 2px 5px #000}.player-one{left:0;--accent: var(--teal)}.player-two{right:0;--accent: var(--coral)}.hud-top{display:flex;justify-content:space-between;align-items:flex-start}.player-tag{display:flex;gap:9px;align-items:center;padding:8px 11px 8px 8px;background:linear-gradient(90deg,#020b12cc,#020b1233);border-left:3px solid var(--accent)}.player-tag i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.player-tag span{color:#fff;font:800 12px Inter;letter-spacing:.16em}.place{display:flex;align-items:flex-start;color:#fff;font-family:Barlow Condensed,sans-serif}.place b{font:italic 900 52px/.75 Barlow Condensed,sans-serif}.place small{color:var(--accent);font:900 13px/1 Barlow Condensed,sans-serif;margin:1px 0 0 2px}.lap-line{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px;color:#ffffffb8;font:700 10px Inter;letter-spacing:.1em}.boost-wrap{position:absolute;left:28px;bottom:28px;width:min(270px,calc(100% - 70px))}.boost-wrap>span{color:#ffffffa8;font:800 8px Inter;letter-spacing:.18em}.boost{height:8px;margin-top:7px;padding:2px;background:#0000008c;border:1px solid rgba(255,255,255,.28);transform:skew(-15deg)}.boost i{display:block;width:70%;height:100%;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .1s}.ability-status{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-top:11px}.ability-status>span,.ability-status>b{color:#ffffffb3;font:800 8px/1 Inter;letter-spacing:.13em}.ability-status>b{color:var(--amber)}.ability-status>b.ready{color:#fff;text-shadow:0 0 9px var(--accent)}.ability-meter{grid-column:1/3;height:5px;background:#0000008c;border:1px solid rgba(255,255,255,.2);transform:skew(-15deg)}.ability-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--amber),var(--accent));box-shadow:0 0 8px var(--accent);transition:width .12s}.wrong-way{position:absolute;left:50%;top:25%;transform:translate(-50%) skew(-5deg);color:#fff;background:#e93658;padding:7px 12px;font:900 13px Inter;letter-spacing:.13em;opacity:0}.wrong-way.show{animation:flash .7s infinite alternate}.yard-warning{position:absolute;left:50%;top:18%;transform:translate(-50%) skew(-5deg);min-width:150px;padding:8px 12px;color:#171006;background:var(--amber);box-shadow:0 0 18px #ffbd6159;text-align:center;font:900 10px/1 Inter;letter-spacing:.11em;opacity:0;transition:opacity .15s}.yard-warning.show{opacity:1;animation:yardpulse .65s infinite alternate}@keyframes yardpulse{to{transform:translate(-50%) scale(1.05) skew(-5deg);filter:brightness(1.15)}}@keyframes flash{to{opacity:1;transform:translate(-50%) scale(1.06) skew(-5deg)}}#countdown{position:absolute;z-index:10;left:50%;top:42%;transform:translate(-50%,-50%) skew(-6deg);color:#fff;font:italic 900 clamp(100px,18vw,220px)/1 "Barlow Condensed",sans-serif;text-shadow:8px 8px 0 #063847,0 0 50px var(--teal);animation:countpop .75s ease-out;pointer-events:none}@keyframes countpop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6) skew(-6deg)}30%{opacity:1}to{opacity:.85;transform:translate(-50%,-50%) scale(.9) skew(-6deg)}}#toast{position:absolute;z-index:9;left:50%;top:16%;transform:translate(-50%) skew(-5deg);padding:10px 16px;color:var(--navy);background:var(--amber);font:900 11px Inter;letter-spacing:.13em}#results{display:grid;place-items:center;background:#01090ead;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.results-backdrop{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(42,242,228,.15),transparent 50%)}.results-card{position:relative;width:min(470px,calc(100vw - 40px));padding:44px;text-align:center;background:#05131df5;border:1px solid rgba(42,242,228,.24);box-shadow:0 30px 90px #000}.results-card h2 span{color:var(--teal)}.podium{margin:20px 0}.podium>div{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:13px 5px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.podium i{width:9px;height:9px;border-radius:50%}.podium i.teal{background:var(--teal);box-shadow:0 0 9px var(--teal)}.podium i.coral{background:var(--coral);box-shadow:0 0 9px var(--coral)}.podium span{color:#ffffff9e;font:800 11px Inter;letter-spacing:.14em}.podium b{color:#fff;font:800 12px Inter}#rotate-hint{display:none;position:absolute;z-index:60;inset:auto 18px 18px;padding:10px;color:#fff;background:#04121be6;text-align:center;font-size:11px}@media(max-width:780px){.brand{width:70vw}.brand h1{font-size:clamp(55px,17vw,90px)}.brand p{display:none}.menu-panel{width:min(380px,calc(100vw - 68px))}.controller-status{display:none}.garage{right:18px;top:22px;width:min(330px,48vw);padding:10px}.garage-heading small,.garage-keys,.garage-player{display:none}.garage-row{grid-template-columns:25px 1fr 25px}.vehicle-card{grid-template-columns:30px 1fr;padding:6px}.vehicle-icon{font-size:23px}.player-hud{padding:12px}.boost-wrap{left:12px;bottom:12px;width:calc(100% - 24px)}.lap-line time{display:none}#rotate-hint{display:block}.controls-grid{grid-template-columns:1fr;max-height:55vh;overflow:auto}}