:root{--garage-ink:#0d1a22;--garage-paper:#f2f0e7;--garage-line:#dbf8e529}body{background:var(--garage-ink)}body.welcome header{display:flex;background:linear-gradient(#0a161de6,#0a161d66);border:0}header{height:76px}header>a{font-size:15px;letter-spacing:-.5px}header nav{gap:22px}header nav button{color:#bfd0ca;font-size:8px}#menu.garage-menu{inset:76px 0 0;display:block;padding:0;overflow:auto;background:linear-gradient(90deg,#0b1722f2 0%,#0b1722d9 24%,#0b17223d 48%,#0b17220a 78%),linear-gradient(0deg,#0b1722e6,transparent 33%);min-height:0}.garage-title{position:absolute;left:5vw;top:28px}.garage-title p{font:8px monospace;letter-spacing:2.5px;color:#98b4aa;margin:0 0 13px}#menu .garage-title h1{font-size:clamp(38px,5.2vw,74px);font-weight:900;line-height:.92;letter-spacing:-.07em;margin:0;white-space:nowrap}#menu .garage-title h1 em{font-style:italic;color:#b1f3cf}.vehicle-selection{position:absolute;left:5vw;top:178px;width:290px;z-index:2}.section-label{display:flex;align-items:center;justify-content:space-between;color:#98b6aa;font:8px monospace;letter-spacing:1.5px}.section-label:before{content:"";width:18px;height:1px;background:#a4f1ce;margin-right:10px}.section-label span:first-child{margin-right:auto}.vehicle-selection h2{font-size:46px;font-weight:500;letter-spacing:-2px;margin:20px 0 3px;line-height:1}.vehicle-selection>p{font:8px monospace;letter-spacing:2px;color:#c2d2c7;margin:10px 0 26px}.vehicle-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vehicle-choices button{display:block;position:relative;min-width:0;text-align:left;background:linear-gradient(145deg,#c9e6dc12,#c9e6dc04);color:#91a7a1;border:1px solid #d6f7e125;border-radius:2px;padding:12px;transition:background .18s,border-color .18s,transform .18s}.vehicle-choices button:hover{transform:translateY(-3px);border-color:#a4f1ce99}.vehicle-choices button[aria-pressed=true]{color:#b1f3cf;background:linear-gradient(145deg,#a4f1ce24,#a4f1ce05);border-color:#a4f1ce}.vehicle-choices button[aria-pressed=true]:after{content:"✓";position:absolute;right:9px;top:7px;font-size:10px}.vehicle-choices svg{width:100%;height:65px;display:block;margin:3px 0 12px}.vehicle-choices b{font-size:11px;letter-spacing:1px;font-weight:500}.vehicle-choices small{display:block;color:#9cb4a8;font:7px monospace;letter-spacing:.3px;margin-top:7px}.garage-specs{display:flex;justify-content:space-between;border-top:1px solid var(--garage-line);margin-top:22px;padding-top:19px;color:#e2e9de;font:14px monospace}.garage-specs small{display:block;color:#8aa69a;font:7px monospace;letter-spacing:1.6px;margin-top:8px}#garage-preview{position:absolute;left:39%;right:1%;top:15%;bottom:31%;cursor:grab;touch-action:none}#garage-preview:active{cursor:grabbing}#garage-rotate{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);border:0;background:#10212c77;color:#b8d6c8;padding:10px 15px;font-size:20px;white-space:nowrap;border-radius:30px}#garage-rotate span{font:7px monospace;letter-spacing:1px;vertical-align:middle;margin-left:6px}.map-selection{position:absolute;right:5vw;bottom:132px;width:min(480px,47vw)}.map-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.map-choices button{padding:0;background:#0e1e29bc;color:#b9cdc0;text-align:left;border:1px solid #cfe7d637;position:relative;overflow:hidden;border-radius:3px;transition:border-color .18s,transform .18s}.map-choices button:hover{transform:translateY(-3px);border-color:#a4f1ce88}.map-choices button[aria-pressed=true]{border-color:#a4f1ce}.map-choices button[aria-pressed=true]:after{content:"SEÇİLDİ";position:absolute;top:10px;right:10px;background:#b1f3cf;color:#102a29;font:7px monospace;padding:5px 7px;letter-spacing:1px}.map-art{display:block;height:90px;position:relative;overflow:hidden;background:#305447}.pitch-art{background:linear-gradient(165deg,transparent 50%,#102d2fcc 51%),repeating-linear-gradient(0deg,#355d4d 0 15px,#3d6654 15px 30px)}.pitch-art:before{content:"";position:absolute;inset:15px 20px;border:1px solid #e0f6d780;transform:rotate(-15deg) skew(-12deg)}.pitch-art i{position:absolute;left:43%;top:29%;width:32px;height:32px;border:1px solid #e0f6d780;border-radius:50%;transform:rotate(-15deg) skew(-12deg)}.desert-art{background:linear-gradient(15deg,#986644 15%,#be9163 15% 40%,#d0a576 40% 65%,#b8875c 65%)}.desert-art:before,.desert-art:after,.desert-art i{content:"";position:absolute;background:#79523c;clip-path:polygon(15% 100%,0 55%,30% 12%,70% 0,100% 35%,90% 100%);width:50px;height:42px;left:24%;top:24%;box-shadow:10px 10px #4e3c30}.desert-art:after{left:61%;top:47%;width:35px;height:32px;background:#8f6243}.desert-art i{left:77%;top:12%;width:18px;height:22px}.map-copy{display:block;padding:13px 14px}.map-copy b{font-size:13px;font-weight:500;color:#eef0df;letter-spacing:-.2px}.map-copy small{display:block;font:7px monospace;letter-spacing:.4px;color:#a4bbae;margin-top:7px}.map-choices em{position:absolute;right:12px;bottom:15px;font:9px monospace;color:#779b88}.garage-bar{position:absolute;left:5vw;right:5vw;bottom:0;height:106px;border-top:1px solid var(--garage-line);display:flex;justify-content:space-between;align-items:center;background:transparent;padding:0;gap:20px}.garage-play{display:flex;gap:12px;align-items:center}#menu #start{width:216px;min-height:54px;border-radius:2px;padding:16px 20px;font:11px Arial;font-weight:700;letter-spacing:1px}.online-action{width:145px;position:relative;min-height:54px;background:#c9eddd08;border:1px solid #b5ddc63d;padding:12px 16px;text-align:left;font-size:10px;letter-spacing:1px;border-radius:2px}.online-action small{display:block;font:7px monospace;color:#91b3a1;margin-top:6px;letter-spacing:1px}.online-action>span{position:absolute;right:12px;top:18px;color:#a4f1ce}.online-action:hover{border-color:#a4f1ce}.garage-settings{display:flex;align-items:center;gap:26px}.garage-settings>button{background:none;border:0;font:9px monospace;letter-spacing:1px;color:#cfdfd0;padding:10px 0;text-align:left}.garage-settings #wallet{display:block;color:#a4f1ce;margin-top:6px;font-size:9px}.garage-settings .view-select{font-size:8px;max-width:160px;line-height:1.8;color:#94b3a1}.garage-menu button:focus-visible{outline-offset:4px}#replay-overlay{position:fixed;inset:0;z-index:6;border-top:24px solid #070d12;border-bottom:24px solid #070d12;pointer-events:none;background:linear-gradient(#0003,transparent 25% 72%,#0006)}#replay-overlay[hidden]{display:none!important}.replay-top{position:absolute;top:26px;left:4vw;right:4vw;display:flex;align-items:center;justify-content:space-between;color:#ecf1e5}.replay-top>span{display:flex;align-items:center;gap:10px;font:12px monospace;letter-spacing:3px}.replay-top i{width:7px;height:7px;background:#a4f1ce;border-radius:50%}.replay-top small{font:8px monospace;letter-spacing:2px;color:#bed3c4}.replay-bottom{position:absolute;bottom:25px;left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:end;gap:30px}.replay-bottom>div{width:280px}.replay-bottom p{font:11px monospace;letter-spacing:1px;color:#edf3e8;margin:0 0 14px}.replay-track{height:2px;background:#e7ffea25}.replay-track i{display:block;height:100%;width:0;background:#a4f1ce}#replay-skip{pointer-events:auto;background:#0d1e2abb;border:1px solid #d1efdd4a;padding:15px 20px;border-radius:3px;color:#eff4e6;font:10px monospace;letter-spacing:1px}#replay-skip kbd{color:#a4f1ce;margin-left:25px}body.replaying header{opacity:.25;pointer-events:none}@media(max-height:780px){.garage-title{top:22px}.vehicle-selection{top:145px;width:260px}.vehicle-selection h2{font-size:36px;margin-top:15px}.vehicle-selection>p{margin-bottom:17px}.vehicle-choices svg{height:46px;margin-bottom:8px}.vehicle-choices button{padding:10px}.garage-specs{margin-top:16px;padding-top:14px}.map-selection{bottom:116px}.map-art{height:65px}.garage-bar{height:94px}.map-copy{padding:10px 12px}}@media(max-width:1050px){.vehicle-selection{width:255px;top:155px}.garage-title{left:4vw}.vehicle-selection{left:4vw}.map-selection{right:4vw;width:43vw}.garage-bar{left:4vw;right:4vw}.garage-settings{gap:17px}.garage-settings .view-select{max-width:120px;font-size:7px}.garage-play{gap:9px}#menu #start{width:190px}.online-action{width:132px}.map-copy small{font-size:6px}}@media(max-width:760px){#menu.garage-menu{min-height:650px;overflow:auto}.garage-title h1{font-size:38px!important}.vehicle-selection{top:135px;width:220px}.map-selection{bottom:160px;width:43vw}.map-choices{gap:7px;grid-template-columns:1fr}.map-art{height:36px}.map-copy{padding:8px 10px}.map-copy small{margin-top:4px}.map-copy b{font-size:11px}.garage-bar{height:140px;align-items:start;padding-top:17px}.garage-settings{flex-direction:column;align-items:end;gap:2px}.garage-settings .view-select{font-size:6px}#menu #start{width:160px}.online-action{width:115px}.garage-play{flex-direction:column;align-items:stretch}.online-action{min-height:43px;width:160px}.online-action small{display:inline;margin-left:8px}.online-action>span{top:13px}.garage-specs{font-size:11px}}

#garage-rotate{top:0;bottom:auto;left:65%}

.vehicle-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.vehicle-choices button{padding:9px 7px}.vehicle-choices b{font-size:10px}.vehicle-choices small{font-size:6px}.vehicle-choices svg{height:48px}.map-selection{width:min(620px,51vw)}.map-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.map-copy{padding:12px 9px}.map-copy b{font-size:12px}.map-copy small{font-size:6px}.map-choices em{display:none}.harbor-art{background:linear-gradient(150deg,#4c8591 0 35%,#84908b 36% 42%,#34434b 43%)}.harbor-art:before{content:"";position:absolute;width:48%;height:26%;left:10%;top:13%;background:repeating-linear-gradient(90deg,#b77853 0 8px,#925d43 8px 10px);transform:skewY(-12deg);box-shadow:42px 32px #547d82}.harbor-art:after{content:"";position:absolute;right:13%;top:8%;height:65%;width:27%;border:4px solid #dab061;border-bottom:0;transform:skewY(-8deg)}@media(max-width:760px){.map-selection{width:43vw}.map-choices{grid-template-columns:1fr}.map-art{height:28px}.map-copy{padding:6px 9px}.vehicle-choices button{padding:7px 4px}.vehicle-choices small{font-size:5px}}

.vehicle-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.vehicle-choices button{display:flex;align-items:center;gap:5px;padding:9px 6px}.vehicle-choices svg{width:46%;height:35px;margin:0}.vehicle-choices small{font-size:5.5px;letter-spacing:0}.map-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.map-selection{width:min(700px,54vw)}.map-copy b{font-size:11px}.map-copy small{font-size:5.5px}.map-choices button[aria-pressed=true]:after{font-size:6px;right:5px;padding:4px}.alpine-art{background:linear-gradient(#9dadb1 0 43%,#536d56 43% 70%,#3d494c 70%)}.alpine-art:before{content:"";position:absolute;inset:8px 0 25%;background:#71857c;clip-path:polygon(0 100%,23% 0,44% 63%,67% 7%,100% 100%)}.alpine-art:after{content:"";position:absolute;inset:32% 10% 15%;background:#294d3d;clip-path:polygon(0 100%,15% 0,30% 100%,40% 100%,58% 10%,75% 100%,80% 100%,90% 30%,100% 100%)}@media(max-width:1050px){.map-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.map-selection{width:42vw}.map-art{height:45px}.map-copy{padding:8px}.map-copy small{font-size:6px}}@media(max-width:760px){.map-selection{width:43vw}.map-art{height:32px}.map-copy b{font-size:10px}.vehicle-choices button{display:block}.vehicle-choices svg{width:100%;height:30px}.vehicle-choices small{font-size:6px}}

/* Arrow garage: one vehicle and one destination at a time. */
#menu.garage-menu{overflow:hidden}.garage-title{top:28px}.garage-title p{margin-bottom:10px}#menu .garage-title h1{font-size:clamp(34px,4vw,58px)}.vehicle-selection{top:200px;width:285px}.vehicle-copy{min-height:152px}.vehicle-copy h2{font-size:48px;margin:26px 0 12px}.vehicle-copy #vehicle-tag{font:8px monospace;letter-spacing:2px;color:#c2d2c7}.vehicle-copy #vehicle-detail{font-size:12px;color:#8eaaa1;line-height:1.5;margin-top:18px}.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}.carousel-controls>span{font:8px monospace;letter-spacing:1.5px;color:#b0c9bb}.carousel-arrow{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border:1px solid #c2eadb50;border-radius:50%;color:#c5f3dc;background:#10232b85;font-size:23px;line-height:1;transition:background .2s,transform .2s}.carousel-arrow:hover{background:#a4f1ce;color:#10232b;transform:scale(1.06)}.carousel-arrow:disabled{opacity:.3;cursor:default}.carousel-arrow:focus-visible{outline:2px solid #a4f1ce;outline-offset:4px}.garage-specs{margin-top:30px}.map-selection{top:28px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:350px;z-index:3}.map-carousel{display:flex;align-items:center;gap:13px;margin-top:13px;padding:10px 11px;border:1px solid #d6f7e123;background:#0b1c268c;border-radius:12px;backdrop-filter:blur(12px)}.map-carousel .carousel-arrow{width:34px;height:34px;flex-basis:34px;font-size:19px}.map-current{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.map-current .map-art{width:65px;flex:0 0 65px;height:56px;border-radius:6px}.map-current b{font-size:13px;font-weight:500;letter-spacing:-.2px;white-space:nowrap;color:#e4eee3}.map-current small{display:block;font:7px monospace;line-height:1.5;color:#94b4a3;margin-top:7px}.map-selection .section-label{padding:0 10px}.carousel-enter{animation:garage-slide .24s ease-out}@keyframes garage-slide{from{opacity:.3;transform:translateX(var(--slide,14px))}to{opacity:1;transform:translateX(0)}}#garage-preview{left:34%;right:2%;top:23%;bottom:18%}#garage-rotate{left:65%;top:0}.toys-art{background:linear-gradient(155deg,#ddc4ef 0 50%,#f2c8b5 50%)}.toys-art:before{content:"";position:absolute;left:14%;top:28%;width:28%;height:49%;background:#8dd6d0;border-radius:5px;box-shadow:28px -8px #edb968}.coral-art{background:linear-gradient(150deg,#68c4c2 0 35%,#edd6a0 36% 55%,#db9387 56%)}.coral-art:before{content:"";position:absolute;width:3px;height:37px;left:55%;top:15%;background:#9f825c;transform:rotate(12deg)}.coral-art:after{content:"";position:absolute;width:40px;height:22px;left:28%;top:5%;background:#6a9f77;clip-path:polygon(50% 0,100% 30%,65% 45%,100% 100%,50% 60%,0 100%,30% 45%,0 30%)}
@media(max-width:1100px){#menu .garage-title h1{font-size:36px}.garage-title{left:4vw}.vehicle-selection{left:4vw;width:250px;top:195px}.map-selection{width:320px;left:50%}.vehicle-copy h2{font-size:42px}.map-current .map-art{width:48px;flex-basis:48px}.map-carousel{gap:9px}}@media(max-height:780px){.vehicle-selection{top:160px}.vehicle-copy{min-height:132px}.vehicle-copy h2{margin-top:20px}.garage-specs{margin-top:22px}.map-selection{top:24px}}@media(max-width:760px){#menu.garage-menu{min-height:650px;overflow:auto}.map-selection{top:118px;left:50%;width:min(350px,90vw)}.vehicle-selection{top:265px;width:205px}.vehicle-copy h2{font-size:36px}.vehicle-copy{min-height:128px}.garage-title{top:22px}#garage-preview{left:35%;top:38%;bottom:25%}.garage-specs{margin-top:20px}.carousel-controls{gap:10px}.carousel-arrow{width:40px;height:40px;flex-basis:40px}#garage-rotate{left:55%;top:0}.vehicle-copy #vehicle-detail{font-size:10px}}
@media(prefers-reduced-motion:reduce){.carousel-enter{animation:none}.carousel-arrow{transition:none}}
#replay-overlay{border-top-width:36px;border-bottom-width:36px}.replay-top>span{font-weight:bold}.replay-top small{padding:8px 12px;background:#06151a80;border:1px solid #bcebd72b;border-radius:4px}.replay-track i{transition:width .05s linear}

@media(min-width:761px){.vehicle-selection .carousel-controls{position:fixed;left:34%;right:4%;top:53%;margin:0;pointer-events:none}.vehicle-selection .carousel-controls>span{display:none}.vehicle-selection .carousel-arrow{pointer-events:auto;width:48px;height:48px;flex-basis:48px}.vehicle-selection .garage-specs{margin-top:24px}}

#flip-status{position:absolute;left:4vw;bottom:164px;width:150px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font:9px monospace;color:#a9bcb3}#flip-status small{font-size:7px;letter-spacing:1px}#flip-status b{font-size:10px;font-weight:400}#flip-status>div{width:100%;height:2px;background:#d2efda25}#flip-fill{display:block;width:100%;height:100%;background:#91aa9d}#flip-status.ready b{color:#b1f3cf}#flip-status.ready #flip-fill{background:#b1f3cf}#arena-toast{position:absolute;left:50%;top:112px;transform:translate(-50%,-6px);padding:9px 15px;border:1px solid #e2f3d638;border-radius:20px;background:#152933c9;color:#f3ecd6;font:9px monospace;letter-spacing:1.4px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}#arena-toast.show{opacity:1;transform:translate(-50%,0)}#golden-status{position:absolute;bottom:132px;left:50%;transform:translateX(-50%);color:#ffda7a;font:10px monospace;letter-spacing:2px;text-shadow:0 2px 10px #3e2a0d}#golden-status[hidden]{display:none}@media(max-width:900px){#flip-status{bottom:150px;width:135px}#arena-toast{top:103px;font-size:8px}}

#lobby-setup{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 24px}.lobby-choice{padding:13px 12px;border:1px solid #b8dbc52b;border-radius:7px;background:#d8efdf05}.lobby-choice>small{display:block;color:#9eb9aa;font:8px monospace;letter-spacing:1px;margin-bottom:10px}.lobby-choice>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.lobby-choice span{font-size:12px;min-width:0;text-align:center;white-space:nowrap}.lobby-choice button{width:30px;height:30px;flex:0 0 30px;border:1px solid #b8dbc540;border-radius:50%;background:transparent;color:#b1f3cf;font-size:18px}.lobby-choice button:hover:not(:disabled){background:#b1f3cf;color:#152b28}.lobby-choice button:disabled{opacity:.25;cursor:default}.lobby-panel{max-height:90vh;overflow:auto}#net-status{position:absolute;left:50%;top:88px;transform:translateX(-50%);font:7px monospace;letter-spacing:1px;color:#bfdccc;background:#14282e99;border-radius:10px;padding:5px 10px;white-space:nowrap}#net-status[hidden]{display:none}#net-status.slow{color:#ffd099}#room-players span small{display:block;font:7px monospace;color:#8fa99c;margin-top:6px}#room-message{min-height:18px}@media(max-width:760px){#lobby-setup{grid-template-columns:1fr}.lobby-choice>small{margin-bottom:7px}.lobby-choice{padding:10px 12px}}
#dash-status{left:4vw;bottom:219px;width:150px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;font:8px monospace;color:#a9bcb3}#dash-status>b{font-size:10px;font-weight:400}#dash-status.ready>b{color:#a4dcf6}@media(max-width:900px){#dash-status{bottom:202px;width:135px}}
