@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2')}

:root{font-family:'DM Sans','Segoe UI',sans-serif;color:#173d34;background:#f6f5ef;font-synthesis:none;font-weight:400;--ink:#173d34;--muted:#7e8981;--paper:#f6f5ef;--lime:#dfee8a;--line:#dfe2d7;--blue:#6aafd7;--orange:#ec9166}
*{box-sizing:border-box}body{margin:0;min-width:360px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible{outline:3px solid #8cab43;outline-offset:5px}input:focus,select:focus{outline:2px solid #668d68;outline-offset:2px}button{touch-action:manipulation}button:not(:disabled){transition:background .18s,color .18s,box-shadow .18s,transform .18s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}.shell{width:calc(100% - 112px);max-width:1432px;margin-inline:auto}.header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px}.brand{display:flex;align-items:center;gap:11px;line-height:.92;font-weight:900;font-size:23px;letter-spacing:-1px}.brand>svg{width:43px;height:43px}.brand-second{display:block;font-size:21px;letter-spacing:2px}.brand-dot{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:3px}.navigation{display:flex;align-items:center;gap:37px;margin-left:40px}.nav-link{background:none;font-size:13px;font-weight:650;position:relative;padding:14px 0;color:#7e8580;white-space:nowrap}.nav-link.active{color:var(--ink)}.nav-link.active>span{width:4px;height:4px;border-radius:50%;background:var(--ink);position:absolute;bottom:2px;left:50%}.nav-link:hover{color:var(--ink)}.nav-link .icon{width:13px;height:13px;margin-left:3px}.header-right{display:flex;align-items:center;gap:21px}.online-status{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#63a672;box-shadow:0 0 0 3px #63a67212;flex-shrink:0}.online-status.offline .status-dot,.status-dot.offline{background:#bfa25a}.header-divider{height:30px;width:1px;background:var(--line)}.profile-button{display:flex;align-items:center;gap:10px;background:none;text-align:left;padding:0}.avatar{height:37px;width:37px;background:#e3e8db;display:grid;place-items:center;border-radius:50%;border:1px solid #d4dcce}.avatar .icon{height:19px;width:19px}.profile-button small{display:block;font-size:8px;letter-spacing:1.3px;margin-bottom:3px;color:#8a9188}.profile-button strong{font-size:12px;display:block;max-width:128px;overflow:hidden;text-overflow:ellipsis}.profile-button>.icon{width:13px;height:13px;margin-left:3px}
.hero{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;min-height:500px;padding:40px 0 37px;gap:24px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:9px;margin-bottom:23px}.little-star{font-size:21px;line-height:1}.hero h1{font-family:'Barlow Condensed','Impact','Arial Narrow',sans-serif;font-size:clamp(63px,6.45vw,100px);font-weight:800;letter-spacing:-1.6px;line-height:.97;margin:0 0 23px}.hero h1>span{font-style:italic;color:#7b9071;display:inline-block}.hero-description{font-size:13px;line-height:1.8;margin:0 0 24px;color:#727c73;font-weight:400}.hero-actions{display:flex;align-items:center;gap:22px}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid transparent;border-radius:7px;padding:13px 19px;font-weight:700;font-size:12px;min-height:44px;white-space:nowrap}.button.primary{background:var(--lime);color:var(--ink)}.button.primary:hover{background:#d0e277;box-shadow:0 4px 16px #a2b76430}.button.dark{background:var(--ink);color:var(--paper)}.button.dark:hover{background:#275446}.button.muted{background:#e9ece2}.button.large{min-height:51px;padding:14px 20px;gap:28px}.button .icon{width:17px;height:17px}.button.full{display:flex;width:100%;margin-top:20px}.text-button{display:inline-flex;align-items:center;gap:8px;background:none;font-size:11px;font-weight:650;padding:8px 0}.text-button:hover{color:#719252}.text-button .icon{width:15px;height:15px}.hero-note{display:flex;align-items:center;gap:9px;font-size:9px;color:#8b9288;margin-top:16px;white-space:nowrap}.hero-note>span:not(.tiny-check){color:#b5bab0}.tiny-check{width:14px;height:14px;display:grid;place-items:center;background:#e4e9d7;border-radius:50%;color:#73856c}.tiny-check .icon{width:9px;height:9px}
.hero-art{height:425px;position:relative;isolation:isolate;min-width:0}.hero-art:before{content:'';position:absolute;inset:8% 0% 2% 5%;border-radius:50%;background:radial-gradient(ellipse at 48% 47%,#dce4c9 0,#e6ead9 44%,#f0f1e7 66%,transparent 73%);z-index:-2}.hero-orbit{position:absolute;border:1px solid #c5ceba75;border-radius:50%;width:80%;height:67%;left:12%;top:20%;transform:rotate(-23deg);z-index:-1}.orbit-two{width:91%;height:84%;left:6%;top:9%;border-style:dashed;border-color:#cbd3bf85;transform:rotate(-30deg)}.scene-watermark{font-family:'Barlow Condensed','Impact',sans-serif;letter-spacing:10px;position:absolute;left:9%;top:10%;font-size:clamp(75px,10vw,156px);font-weight:800;color:#ced7c376;z-index:-1;transform:rotate(-7deg);user-select:none}.scene-label{position:absolute;top:4px;left:30px;display:flex;gap:9px;align-items:center;font-size:9px;font-weight:700;letter-spacing:1.2px;z-index:2}.scene-label small{display:block;font-size:6px;letter-spacing:1.4px;color:#919b89;margin-top:5px}.crosshair{font-size:28px;font-weight:300;line-height:1}.art-coordinate{position:absolute;right:0;top:23px;font-family:monospace;font-size:8px;letter-spacing:1px;color:#9aa18e;writing-mode:vertical-rl}.art-tag{position:absolute;bottom:67px;left:17px;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:.4px;background:#fcfbf6ed;border:1px solid #e6e7d8;border-radius:5px;padding:11px 14px;transform:rotate(-7deg);box-shadow:0 9px 25px #334d3610;z-index:2}.art-tag .icon{color:#92a848;width:16px;height:16px}.art-bottom{position:absolute;right:17px;bottom:7px;display:flex;gap:13px;align-items:center;z-index:2}.art-bottom>span{font-size:8px;letter-spacing:1.7px;color:#73826e}.round-button{background:transparent;border:1px solid #c7d0bb;border-radius:50%;width:37px;height:37px;display:grid;place-items:center}.round-button:hover{background:var(--lime)}.round-button .icon{height:17px;width:17px}#scene-container{position:absolute;inset:0;z-index:0}#scene-container canvas{display:block;width:100%;height:100%;outline:none}.webgl-fallback{display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px}.webgl-fallback>.icon{width:120px;height:120px;color:#72904c}.webgl-fallback strong{font-size:18px}.webgl-fallback span{font-size:12px;text-align:center;line-height:1.7}
.play-section{border-top:1px solid var(--line);padding-top:26px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}.section-kicker{display:block;font-size:8px;font-weight:700;letter-spacing:1.65px;color:#929b8a;margin-bottom:7px}h2{font-size:26px;letter-spacing:-1px;line-height:1.15;margin:0;font-weight:750}.segmented{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:7px;align-self:center}.segmented button{background:none;font-size:10px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:4px;color:#818a7d;font-weight:600}.segmented button.selected{background:#e6eadd;color:var(--ink)}.segmented button:hover{background:#e6eadd}.segmented .icon{width:14px;height:14px}.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.mode-card{text-align:left;border:1px solid #dfe3d6;background:#f0f1e8;border-radius:9px;padding:18px 18px 17px;overflow:hidden;min-height:192px;position:relative}.mode-card:hover{background:#e7ebda;border-color:#bdc9af;transform:translateY(-3px)}.mode-card.selected{color:#f0f2e7;background:var(--ink);border-color:var(--ink)}.mode-card.selected:hover{background:#204a3e}.mode-card-top{display:flex;align-items:center;justify-content:space-between;gap:3px}.mode-card-top>span:first-child{font-size:7px;font-weight:600;letter-spacing:1.1px;color:#8a9380}.mode-card.selected .mode-card-top>span:first-child{color:#a4b9a0}.selection-dot{width:15px;height:15px;border:1px solid #d2d7c6;border-radius:50%;display:grid;place-items:center}.selection-dot>.icon{width:9px;height:9px}.selected .selection-dot{border-color:var(--lime);background:var(--lime);color:var(--ink)}.mode-art{height:87px;display:flex;align-items:center;justify-content:center;gap:17px;position:relative}.mode-art:before{content:'';position:absolute;width:100%;height:1px;background:linear-gradient(to right,transparent,#d4dac4aa,transparent);top:50%;left:0}.selected .mode-art:before{background:linear-gradient(to right,transparent,#637a55,transparent)}.mini-team{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,20px);gap:5px;transform:rotate(-24deg);position:relative}.mini-team:has(>.mini-car:only-child){grid-template-rows:1fr}.mini-team.opponents{transform:rotate(156deg)}.mini-car{display:grid;place-items:center;position:relative;width:23px;height:25px;background:#dfe7c6;border-radius:5px;color:#627750;box-shadow:0 2px 0 #b4c39a}.mini-car .icon{width:15px;height:18px}.opponents .mini-car{background:#d8decf;color:#7d8970;box-shadow:0 2px 0 #bcc7ac}.selected .mini-car{background:#d8ea91;color:#405836;box-shadow:0 2px 0 #a4bb6c}.selected .opponents .mini-car{background:#789981;color:#244437;box-shadow:0 2px 0 #4d6f57}.versus{font-family:'Barlow Condensed','Impact',sans-serif;font-style:italic;font-size:13px;color:#a9b19a;position:relative}.selected .versus{color:#c2d390}.mode-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:3px}.mode-card h3{font-size:19px;letter-spacing:-.6px;font-weight:700;display:flex;align-items:center;gap:9px;margin:0 0 7px}.mode-card h3>span{font-size:9px;letter-spacing:0;background:#e1e6d4;padding:3px 5px;border-radius:3px;font-weight:600}.mode-card.selected h3>span{background:#395b44;color:#d5e6b3}.mode-card p{font-size:9px;color:#8d9682;margin:0;line-height:1.5}.mode-card.selected p{color:#aabda2}.mode-card-bottom>.icon{width:16px;height:16px;color:#a6b194}.selected .mode-card-bottom>.icon{color:var(--lime)}
.bottom-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:14px;margin-top:19px}.squad-card{display:flex;align-items:center;gap:15px;padding:21px 19px;border:1px solid var(--line);border-radius:8px;min-width:0}.squad-icon{width:37px;height:37px;display:grid;place-items:center;background:#e9ecdf;border-radius:8px;flex-shrink:0}.squad-icon .icon{width:18px;height:18px}.squad-copy{flex:1;min-width:0}.squad-copy h3{font-size:11px;margin:0 0 6px;letter-spacing:-.1px;font-weight:700}.squad-copy p{font-size:8px;color:#8b9283;margin:0;line-height:1.5;max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.squad-avatars{display:flex;align-items:center}.squad-avatar,.squad-add{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--paper);border-radius:50%;font-size:9px;background:var(--car-color);margin-left:-7px}.squad-add{background:transparent;border:1px dashed #c1c9b3;margin-left:4px}.squad-add .icon{width:12px;height:12px}.squad-card .button{font-size:9px;gap:9px;min-height:36px;padding:9px 12px;flex-shrink:0}.squad-card .button .icon{height:13px;width:13px}.count-badge{padding:2px 5px;background:#45614b;border-radius:3px;font-size:8px}.training-card{display:flex;align-items:center;gap:12px;text-align:left;background:#eaeedf;border:1px solid #e0e6d2;border-radius:8px;padding:18px 21px}.training-card:hover{background:#e0e9ce}.training-icon{width:37px;height:37px;border:1px solid #c5d0b4;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.training-icon>.icon{width:17px;height:17px}.training-card>span:nth-child(2){flex:1}.training-card strong{display:block;font-size:11px;margin-bottom:6px}.training-card small{display:block;font-size:8px;color:#839078;line-height:1.5}.training-card>.icon{width:16px;height:16px}.footer{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:7px;color:#99a08f;padding-top:24px;padding-bottom:23px;letter-spacing:.4px}.footer-dot{margin-inline:9px}.footer>div{display:flex;align-items:center;gap:24px}.server-text{display:flex;align-items:center;gap:7px;font-size:7px;letter-spacing:.65px}.server-text>.status-dot{height:4px;width:4px}.footer button{background:none;color:#818a79;font-size:8px;display:flex;gap:7px;align-items:center;padding:3px}.footer button>.icon{width:13px;height:13px}.footer button.icon-button>.icon{width:16px;height:16px}.icon-button{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:none}.icon-button:hover{background:#dde5d1}
.modal-open{overflow:hidden}.modal-backdrop{position:fixed;inset:0;z-index:60;background:#15382fd0;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:25px;overflow-y:auto;animation:fade-in .15s ease}.modal{position:relative;width:100%;max-width:460px;background:var(--paper);border:1px solid #fff8;border-radius:18px;padding:34px;box-shadow:0 30px 100px #0d221d40;max-height:calc(100dvh - 50px);overflow-y:auto}.modal.wide{max-width:580px}.modal>.section-kicker{margin-bottom:10px;font-size:8px;max-width:calc(100% - 30px)}.modal h2{font-size:30px;margin:0 0 14px;max-width:calc(100% - 8px);overflow-wrap:anywhere}.modal>p{color:#7e887a;font-size:12px;line-height:1.8;margin:0 0 24px}.modal-close{position:absolute;top:19px;right:19px;background:#e8ecdf;width:29px;height:29px}.modal-close>.icon{width:16px;height:16px}label{display:block;font-weight:650;font-size:11px;margin:18px 0 8px}input:not([type=checkbox]),select{width:100%;height:45px;border:1px solid #d6ddce;background:#fbfcf6;padding:0 13px;border-radius:6px;color:var(--ink);font-size:12px;min-width:0}input::placeholder{color:#a2aa99;font-size:10px}select{cursor:pointer}.input-button{display:flex;gap:8px}.input-button>input{flex:1;min-width:0}.input-button>.button{padding-inline:13px}.code-input{text-transform:uppercase;letter-spacing:3px}.form-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-divider{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:1.2px;color:#95a18b;margin:26px 0 20px}.form-divider:before,.form-divider:after{content:'';height:1px;background:var(--line);flex:1}.form-divider+form>label{margin-top:0}.invite-code{display:flex;justify-content:space-between;align-items:center;width:100%;padding:17px 20px;background:#e7edda;border:1px dashed #b7c4a2;border-radius:7px;text-align:left}.invite-code>span{font-size:8px;color:#8a997b;letter-spacing:1px}.invite-code strong{display:block;font-size:29px;color:var(--ink);letter-spacing:6px;margin-top:5px}.invite-code:hover{background:#dfe9ca}.member-list{margin-top:22px}.member-row{display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line);padding:11px 0}.member-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--car-color);font-weight:700;font-size:13px;flex-shrink:0}.member-row>span:nth-child(2){flex:1;min-width:0}.member-row strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis}.member-row strong>small{font-size:7px;display:inline-block;margin-left:4px;color:#8b9881}.member-row>span>small{font-size:9px;display:block;margin-top:4px;color:#8a9680}.member-row>.icon{width:16px;color:#9aab68}.empty-member{height:48px;display:flex;align-items:center;gap:13px;color:#a4ad9a;border-bottom:1px dashed var(--line);font-size:10px}.empty-member>.icon{width:19px;margin-left:7px}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:22px;border-top:1px solid var(--line);padding-top:12px}.modal-footer>span{font-size:9px;color:#929c87}.danger{color:#a7755e}.danger:hover{color:#bc5139}.profile-stats{display:flex;justify-content:space-around;margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.profile-stats strong{font-size:27px;font-weight:700;display:block;text-align:center}.profile-stats span{font-size:8px;letter-spacing:1px;color:#8b9881;display:block;text-align:center;margin-top:5px}.modal>.fine-print{font-size:9px;text-align:center;margin:18px 0 0}.garage-illustration{height:145px;display:flex;align-items:center;justify-content:center;gap:29px;margin:18px 0 23px;background:radial-gradient(ellipse,#e6ecd8,#f0f2e7);border-radius:10px;overflow:hidden}.garage-illustration>.icon{width:108px;height:108px;stroke-width:.9;color:#375b3d;fill:var(--car-color);transform:rotate(-12deg)}.garage-illustration>span{font-family:'Barlow Condensed','Impact',sans-serif;font-size:47px;color:#aec197;letter-spacing:-2px;font-style:italic}.garage-illustration small{font-family:'DM Sans','Segoe UI',sans-serif;display:block;font-size:7px;letter-spacing:1.2px;font-style:normal}.color-swatches{display:flex;gap:11px;margin-top:14px}.color-swatch{width:43px;height:43px;border-radius:50%;background:var(--swatch);display:grid;place-items:center;border:3px solid var(--paper);outline:1px solid #d4ddc7}.color-swatch.selected{outline:2px solid var(--ink);outline-offset:2px}.color-swatch>.icon{width:18px;height:18px}.color-name{font-size:10px;color:#859376;text-align:center;margin:15px 0 24px}.garage-specs{display:flex;align-items:center;justify-content:space-between;gap:8px;border-block:1px solid var(--line);padding-block:17px}.garage-specs>span{font-size:7px;letter-spacing:.5px;color:#8a9979}.garage-specs .icon{width:13px;height:13px;margin-right:2px}.controls-list{border-block:1px solid var(--line);margin:20px 0}.controls-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;padding:10px 0;border-bottom:1px solid #e5e9dc}.controls-list>div:last-child{border-bottom:0}kbd{font:9px 'DM Sans','Segoe UI',sans-serif;border:1px solid #d7dfcb;box-shadow:0 2px 0 #d7dfcb;background:#edf0e6;color:#6b7c5b;display:inline-block;vertical-align:middle;padding:4px 7px;border-radius:4px;letter-spacing:.3px}.tip-box{background:#e9efd9;display:flex;gap:12px;align-items:center;border-radius:6px;padding:13px 15px}.tip-box>.icon{width:20px;color:#869e4f}.tip-box p{font-size:10px;line-height:1.7;margin:0;color:#7e8f6b}.connection-help{margin-top:21px}.connection-help h3{font-size:14px}.connection-help p{font-size:10px;line-height:1.8;color:#859179}.connection-help .text-button{font-size:10px}#network-info{display:flex;flex-direction:column;gap:9px;margin-top:10px}#network-info code{font-size:11px;word-break:break-all;background:#e6ebdc;padding:8px 11px;border-radius:5px}#network-info small{font-size:9px;color:#9a866b}.setting-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:17px 0;margin:0;cursor:pointer}.setting-row>span{font-size:12px}.setting-row>span>.icon{width:17px;height:17px;margin-right:8px}.setting-row small{display:block;color:#8b9781;font-size:9px;font-weight:400;margin:6px 0 0 27px}.setting-row input{position:absolute;right:0;width:38px;height:24px;opacity:0;cursor:pointer}.toggle{display:block;width:37px;height:22px;background:#c7d1ba;border-radius:15px;position:relative;pointer-events:none}.toggle:after{content:'';width:16px;height:16px;background:#f9faf5;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s}.setting-row input:checked+.toggle{background:var(--ink)}.setting-row input:checked+.toggle:after{transform:translateX(15px);background:var(--lime)}.setting-row input:focus-visible+.toggle{outline:2px solid #88a05e;outline-offset:3px}.leave-game{margin:25px auto 0;display:flex}.room-code-row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:22px 0}.room-code{background:#e7ecdd;border-radius:4px;padding:8px 11px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:2px}.room-code>.icon{width:13px;height:13px}.room-code-row>span{color:#939f89;font-size:8px;letter-spacing:.8px}.room-teams{display:grid;grid-template-columns:1fr 1fr;gap:13px}.room-team{padding:13px;background:#e5eff0;border:1px solid #d3e2e4;border-radius:8px;min-width:0}.room-team.orange{background:#f3e8da;border-color:#e8d8c3}.room-team-heading{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#568f9a;margin-bottom:13px;letter-spacing:.6px}.room-team.orange .room-team-heading{color:#b17e4e}.room-team-heading>span{font-size:9px;letter-spacing:0}.room-member{display:flex;gap:6px;align-items:center;background:#ffffff73;padding:8px;border-radius:5px;margin-bottom:7px;min-height:43px}.room-member .member-avatar{width:24px;height:24px;font-size:10px}.room-member>span:nth-child(2){font-size:10px;overflow:hidden;text-overflow:ellipsis;flex:1}.room-member small{display:block;font-size:6px;color:#8b9b7c;margin-top:2px}.ready-check>.icon{width:15px;height:15px;color:#70a365}.not-ready{height:7px;width:7px;border:1px solid #b2b99a;border-radius:50%;flex-shrink:0}.room-empty{height:42px;font-size:8px;display:grid;place-items:center;border:1px dashed #c3d6d7;border-radius:5px;margin-bottom:7px;color:#9aaead}.room-team.orange .room-empty{border-color:#ddc9b0;color:#b4a48d}.team-join{font-size:9px;background:#d6e7e8;display:block;width:100%;padding:9px 3px;border-radius:4px;margin-top:11px}.room-team.orange .team-join{background:#e9d9c4}.team-join:disabled{opacity:.6}.room-settings{display:flex;gap:15px;align-items:center;justify-content:flex-end;margin-top:12px}.room-settings>label{display:flex;align-items:center;gap:9px;font-size:9px;margin:0;color:#8d9b7b}.room-settings select{height:30px;padding:0 8px;width:86px;font-size:9px}.modal>.room-hint{font-size:9px;text-align:center;margin:18px 0 13px}.room-actions{display:flex;gap:10px}.room-actions>.button{flex:1;gap:8px}.room-actions>span{font-size:9px;align-self:center;flex:1;text-align:center;color:#8d9b7b}
#queue-dock{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:19px;background:var(--ink);color:#f2f4e8;border:1px solid #60826755;border-radius:11px;padding:19px 23px;box-shadow:0 15px 60px #183b3445;width:max-content;max-width:calc(100% - 32px)}.queue-spinner{width:24px;height:24px;border:2px solid #788e6940;border-top-color:var(--lime);border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}#queue-dock strong{font-size:12px;display:block}#queue-dock strong>span{font-size:9px;background:#45624a;padding:3px 5px;border-radius:3px;margin-left:6px}#queue-dock small{font-size:9px;color:#abc09b;display:block;margin-top:7px}.queue-cancel{display:flex;align-items:center;gap:7px;background:#ffffff09;color:#bacbb0;padding:8px 10px;font-size:9px;border-radius:5px;margin-left:12px}.queue-cancel:hover{background:#ffffff15}.queue-cancel>.icon{width:14px;height:14px}#toasts{position:fixed;top:21px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;max-width:min(90%,520px);pointer-events:none}.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#eef1e2;box-shadow:0 8px 30px #0c251a25;border:1px solid #61805450;border-radius:8px;padding:14px 19px;font-size:11px;line-height:1.6;animation:toast-in .2s ease}.toast .icon{width:16px;height:16px;color:var(--lime)}.toast.error{background:#654339;border-color:#ab8275}.toast.error>.icon{color:#eed8b4}#connection-banner{position:fixed;top:93px;left:50%;transform:translateX(-50%);background:#ede0a5;color:#4c482d;font-size:12px;border-radius:5px;padding:12px 22px;z-index:50;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.in-game{overflow:hidden;background:#b9ccc3}#game{position:fixed;inset:0;z-index:5;isolation:isolate;overflow:hidden}#game-scene{position:absolute;inset:0;z-index:-1}#game-scene #scene-container{position:absolute;inset:0;z-index:0}.game-top{display:flex;align-items:center;justify-content:space-between;padding:21px 27px;position:absolute;inset:0 0 auto;background:linear-gradient(#122f30a1,transparent);color:#ecf2e3}.game-wordmark{display:flex;align-items:center;gap:8px;font-weight:800;font-size:11px;letter-spacing:.6px}.game-wordmark>svg{width:29px;height:29px}.game-top>span:nth-child(2){font-size:9px;letter-spacing:1.4px;font-weight:600;position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap}.game-menu-button{font-size:8px;display:flex;align-items:center;gap:8px;color:#e7eedf;background:#153e3450;padding:9px 12px;border:1px solid #dfee8a25;border-radius:6px}.game-menu-button>.icon{width:13px;height:13px}.game-menu-button kbd{font-size:7px;padding:3px 4px;background:#e8efdf17;color:#e5efd9;border-color:#a8bea33f;box-shadow:none}.scoreboard{position:absolute;top:46px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background:#153930e8;backdrop-filter:blur(12px);box-shadow:0 9px 25px #183a3330;border-radius:7px;overflow:hidden;color:#f1f4e5}.team-score{display:flex;gap:17px;align-items:center;padding:11px 20px;border-bottom:3px solid var(--blue);min-width:125px}.team-score.orange{border-color:var(--orange)}.team-score>span{font-size:8px;letter-spacing:1.2px;color:#93c6e1;font-weight:700}.team-score.orange>span{color:#f2b490}.team-score>b{font-size:30px;font-weight:750}.match-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 20px;border-inline:1px solid #62876c30;min-width:110px}.match-clock>strong{font-size:23px;letter-spacing:1px;font-variant-numeric:tabular-nums}.match-clock>span{font-size:6px;letter-spacing:1.8px;color:#bacaa5;margin-top:3px}.match-announcement{position:absolute;top:34%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center}.match-announcement>strong{font-family:'Barlow Condensed','Impact',sans-serif;font-size:115px;line-height:1;color:#eff5cf;text-shadow:0 5px 0 #194b3760,0 10px 50px #143f3760;animation:pop .2s ease}.match-announcement>strong.goal-text{font-size:100px;letter-spacing:2px;font-style:italic;color:var(--lime);white-space:nowrap}.match-announcement>span{font-size:11px;letter-spacing:2px;color:#f1f6dc;text-shadow:0 1px 5px #173d34;margin-top:8px}.team-indicator{position:absolute;bottom:124px;left:26px;display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.7px;color:#f2f5e6;text-shadow:0 1px 4px #183e3e90}.team-indicator>span{margin-left:5px;font-size:7px;color:#d8e6cb}.team-dot{height:7px;width:7px;border-radius:50%;background:var(--blue);display:inline-block}.team-dot.orange{background:var(--orange)}.game-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:28px;background:linear-gradient(transparent,#112f32a9);color:#e9f0de}.camera-button{background:#143d35c9;border:1px solid #d6e8c840;padding:11px 13px;color:#e1ecd0;border-radius:6px;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1px}.camera-button>kbd{font-size:8px;background:#e1efcc13;box-shadow:none;border-color:#b5d09944;color:#c7de9c}.game-key-hints{display:flex;align-items:center;gap:13px;font-size:8px;color:#d5e2c9;margin-bottom:7px}.game-key-hints>span{white-space:nowrap}.game-key-hints kbd{font-size:7px;padding:3px 5px;color:#e0eccf;background:#133c3399;border-color:#b3c8a138;box-shadow:none;margin-right:2px}.boost-meter{min-width:120px;text-align:right}.boost-meter>span{font-size:8px;letter-spacing:2px;color:#d6e7aa;display:block}.boost-meter>span>.icon{width:13px;height:13px;margin-right:2px}.boost-meter>strong{font-family:'Barlow Condensed','Impact',sans-serif;font-style:italic;font-size:52px;line-height:1.1;font-weight:600;color:var(--lime)}.boost-meter>div{width:120px;height:5px;background:#122f356b;border-radius:2px;overflow:hidden;margin-top:5px}.boost-meter>div>i{display:block;width:100%;height:100%;background:var(--lime);transition:width .1s}.touch-controls{display:none}.score-overlay,#result-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#163c32b3;backdrop-filter:blur(8px);z-index:11;padding:30px}.score-table{width:100%;max-width:540px;background:var(--paper);padding:30px;border-radius:13px;max-height:80vh;overflow:auto}.score-table h2{margin-bottom:20px}.score-table h4{font-size:10px;letter-spacing:1.2px;margin:20px 0 6px}.score-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px}.score-row small{font-size:7px;margin-left:4px;color:#879472}.score-row strong{font-size:10px}.score-table>p{font-size:9px;color:#8a987b;text-align:center;margin-top:22px}.blue-text{color:#508fae}.orange-text{color:#c58452}.result-card{background:var(--paper);border:1px solid #ffffff90;border-radius:18px;padding:36px;text-align:center;max-width:420px;width:100%;box-shadow:0 20px 80px #05291f40}.result-trophy{width:61px;height:61px;display:grid;place-items:center;background:#e5eccd;border-radius:50%;margin:0 auto 23px}.result-trophy>.icon{width:29px;height:29px}.result-card h2{font-size:33px;margin-top:11px}.result-card>p{font-size:11px;color:#899578;line-height:1.8}.result-score{display:flex;align-items:center;justify-content:center;gap:27px;margin:15px 0 6px;font-size:66px;font-family:'Barlow Condensed','Impact',sans-serif;font-weight:700}.result-score>span:nth-child(2){font-size:39px;color:#c8d0bb}.result-card .button{margin-top:25px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{transform:scale(1.15);opacity:.3}to{transform:scale(1);opacity:1}}
@media(min-width:1500px){.hero{min-height:580px}.hero-art{height:470px}.hero h1{font-size:109px}.hero-description{font-size:15px}.eyebrow{font-size:11px}.hero-note{font-size:10px}.mode-card{min-height:214px;padding:21px}.mode-art{height:102px}.mode-card h3{font-size:22px}.mode-card p{font-size:10px}.section-heading{margin-bottom:24px}.bottom-grid{margin-top:23px}.squad-copy h3,.training-card strong{font-size:13px}.squad-copy p,.training-card small{font-size:10px}.squad-card .button{font-size:11px}.squad-card{padding:24px}.footer{padding-top:29px;font-size:8px}}
@media(max-width:1150px){.shell{width:calc(100% - 64px)}.header{gap:18px;height:91px}.navigation{gap:22px;margin-left:0}.header-right{gap:13px}.online-status{font-size:9px}.hero{min-height:470px;gap:12px}.hero h1{font-size:76px}.hero-art{height:390px}.hero-actions{gap:14px}.button.large{font-size:11px;gap:15px}.hero-actions>.text-button{font-size:10px}.hero-note{font-size:8px;gap:7px}.mode-card{padding:14px;min-height:186px}.mode-card h3{font-size:18px}.mode-card p{font-size:8px}.mode-card-top>span:first-child{font-size:6px}.bottom-grid{grid-template-columns:1.8fr 1fr}.squad-card{gap:9px;padding:17px 14px}.squad-avatars{display:none}.squad-copy h3{font-size:10px}.squad-copy p{font-size:7px}.training-card{padding:17px 13px;gap:9px}.training-card strong{font-size:10px}.training-card small{font-size:7px}.game-key-hints{gap:8px;font-size:7px}.game-key-hints>span:last-child{display:none}}
@media(max-width:900px){.online-status{display:none}.navigation{gap:24px}.header-divider{display:none}.hero{grid-template-columns:1fr 1fr;min-height:434px;padding-block:33px}.hero h1{font-size:64px}.hero-description{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:17px}.hero-art{height:355px}.hero-actions{gap:9px}.button.large{font-size:10px;gap:8px;padding-inline:12px;min-height:45px}.hero-actions>.text-button{font-size:9px;gap:4px}.hero-note{gap:5px;font-size:7px}.hero-note .tiny-check{width:11px;height:11px}.scene-label{left:10px;top:10px;font-size:7px}.scene-label small{font-size:5px}.art-coordinate{display:none}.art-tag{font-size:7px;padding:8px;left:0;bottom:66px}.art-tag .icon{width:12px;height:12px}.art-bottom{right:0}.mode-grid{gap:10px}.mode-card{padding:12px;min-height:172px}.mode-art{gap:12px;height:76px}.mini-car{width:20px;height:22px}.mini-car .icon{width:14px;height:15px}.mini-team{grid-template-rows:repeat(2,17px);gap:4px}.mode-card h3{font-size:16px;gap:6px}.mode-card h3>span{font-size:8px}.mode-card-bottom>.icon{display:none}.mode-card-top>span:first-child{font-size:5.5px}.mode-card p{font-size:7px}.bottom-grid{grid-template-columns:1fr}.training-card{display:none}.squad-card{padding:17px 19px;gap:15px}.squad-avatars{display:flex}.squad-copy h3{font-size:11px}.squad-copy p{font-size:9px}.footer>div{gap:13px}.footer .server-text{display:none}h2{font-size:23px}.game-key-hints{display:none}.team-indicator{bottom:124px}.game-top>span:nth-child(2){font-size:7px}.scoreboard{top:49px}.team-score{min-width:95px;padding:8px 12px;gap:12px}.match-clock{min-width:80px;padding-inline:13px}.team-score>span{font-size:6px}.team-score>b{font-size:26px}.game-wordmark{font-size:8px;gap:4px}.game-wordmark>svg{width:23px}.game-menu-button{font-size:7px;padding:8px}.game-menu-button kbd{display:none}}
@media(max-width:650px){body{min-width:360px}.shell{width:calc(100% - 36px)}.header{height:77px;gap:10px}.brand{font-size:18px;gap:7px}.brand>svg{width:32px;height:34px}.brand-second{font-size:16px;letter-spacing:1.7px}.brand-dot{font-size:8px}.navigation{margin-left:auto;gap:16px}.navigation .nav-link{font-size:10px}.navigation .nav-link:first-child{display:none}.navigation .nav-link:last-child{font-size:0}.navigation .nav-link:last-child .icon{width:18px;height:18px;font-size:12px}.profile-button{gap:0}.profile-button>.icon,.profile-button>span:not(.avatar){display:none}.avatar{width:31px;height:31px}.hero{grid-template-columns:1fr;gap:0;padding-top:27px;padding-bottom:0;position:relative;min-height:0}.hero-copy{z-index:2;pointer-events:none}.hero-copy button{pointer-events:auto}.eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:19px}.hero h1{font-size:72px;letter-spacing:-.6px;margin-bottom:20px;line-height:.96}.hero-description{font-size:12px;line-height:1.75;margin-bottom:20px}.hero-actions{gap:21px}.button.large{font-size:11px;padding:13px 15px;gap:15px;min-height:48px}.hero-actions>.text-button{font-size:10px;gap:7px}.hero-note{font-size:8px;gap:7px;margin-top:15px}.hero-art{height:300px;margin-top:0;width:100%}.scene-watermark{font-size:105px;left:15%;top:4%}.hero-art:before{inset:0 4% 1% 7%}.orbit-one{top:13%}.orbit-two{top:4%}.scene-label{top:12px;left:2px;font-size:7px}.scene-label small{font-size:5px}.art-tag{bottom:37px;left:4px;font-size:8px;padding:8px 12px}.art-bottom{bottom:8px;right:9px}.art-bottom>span{font-size:7px}.round-button{width:30px;height:30px}.play-section{padding-top:23px}.section-heading{align-items:flex-start;margin-bottom:17px;gap:8px}.section-kicker{font-size:7px;letter-spacing:1.2px;margin-bottom:7px}h2{font-size:23px;letter-spacing:-.8px}.segmented{padding:3px;gap:0;margin-top:3px}.segmented button{font-size:8px;padding:8px 8px;gap:4px}.segmented .icon{width:12px;height:12px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.mode-card{padding:15px;min-height:183px}.mode-card-top>span:first-child{font-size:6px}.mode-art{height:81px;gap:15px}.mini-car{width:22px;height:24px}.mini-car .icon{width:15px;height:17px}.mode-card h3{font-size:20px;gap:8px;margin-bottom:6px}.mode-card h3>span{font-size:9px}.mode-card p{font-size:8px}.mode-card-bottom>.icon{display:block;width:14px;height:14px}.squad-card{flex-wrap:wrap;padding:18px;gap:12px}.squad-copy{min-width:calc(100% - 70px)}.squad-copy h3{font-size:11px}.squad-copy p{font-size:8px;white-space:normal}.squad-avatars{margin-left:6px;flex:1}.squad-avatar,.squad-add{height:28px;width:28px}.squad-card .button{font-size:10px}.footer{padding-block:21px;gap:10px}.footer>span{font-size:6px;max-width:180px;line-height:1.8}.footer>div{gap:11px}.footer button{font-size:7px}.footer button>.icon{width:12px}.footer-dot{margin-inline:4px}.modal-backdrop{padding:15px}.modal{padding:29px 22px;max-height:calc(100dvh - 30px);border-radius:14px}.modal h2{font-size:27px}.modal>p{font-size:11px}.modal-close{top:13px;right:13px}.modal>.section-kicker{font-size:7px}.modal-footer>span{font-size:8px}.modal-footer .text-button{font-size:10px}.color-swatches{gap:10px;justify-content:space-between}.color-swatch{width:37px;height:37px}.garage-specs>span{font-size:6px}.garage-specs .icon{width:11px}.room-teams{gap:9px}.room-team{padding:10px}.room-team-heading{font-size:8px}.room-member{gap:4px;padding:6px}.room-member>span:nth-child(2){font-size:9px}.room-member .member-avatar{width:22px;height:22px}.room-code-row{gap:6px}.room-code-row>span{font-size:7px}.room-code{font-size:12px;padding:7px 9px}.room-actions .button{font-size:10px;padding:12px 9px}.room-actions .button>.icon{width:13px}.controls-list>div{font-size:10px}.controls-list kbd{font-size:8px;padding:4px 5px}#queue-dock{bottom:15px;padding:15px;gap:12px}#queue-dock strong{font-size:10px}#queue-dock small{font-size:8px;max-width:220px;line-height:1.7}.queue-cancel{font-size:0;margin-left:0;padding:8px}.queue-cancel>.icon{width:16px;height:16px}.queue-spinner{width:20px;height:20px}.game-top{padding:13px 14px}.game-top>span:nth-child(2){top:65px;font-size:6px}.game-menu-button{font-size:0}.game-menu-button>.icon{width:17px;height:17px}.game-wordmark{font-size:7px}.game-wordmark>svg{width:20px}.scoreboard{top:13px}.team-score{min-width:55px;padding:7px 12px}.team-score>span{display:none}.team-score>b{font-size:22px}.match-clock{min-width:65px;padding:5px 9px}.match-clock>strong{font-size:18px}.match-clock>span{font-size:5px;letter-spacing:1px}.game-bottom{padding:16px;align-items:flex-end}.camera-button{padding:8px;font-size:6px;gap:6px;letter-spacing:.3px}.camera-button>kbd{font-size:7px;padding:2px 4px}.boost-meter{min-width:80px}.boost-meter>strong{font-size:40px}.boost-meter>span{font-size:7px}.boost-meter>div{width:80px}.team-indicator{left:16px;bottom:96px;font-size:6px;gap:5px}.team-indicator>span{font-size:5px}.team-dot{width:5px;height:5px}.match-announcement>strong{font-size:94px}.match-announcement>strong.goal-text{font-size:63px}.match-announcement>span{font-size:8px;letter-spacing:1px}.result-card{padding:28px 22px}.result-card h2{font-size:29px}.result-score{font-size:55px}.score-table{padding:24px 20px}.score-table h2{font-size:24px}.score-row{font-size:10px}#connection-banner{top:86px;font-size:9px;white-space:normal;width:max-content;max-width:calc(100% - 32px);text-align:center;padding:10px 15px}}
@media(hover:none) and (pointer:coarse){.touch-controls{display:flex;justify-content:space-between;align-items:flex-end;position:absolute;bottom:115px;left:17px;right:17px;pointer-events:none}.touch-pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,40px);gap:5px;pointer-events:auto}.touch-pad>button{color:#e8f1d2;background:#173d34a9;border:1px solid #bfd09d55;border-radius:9px;font-size:23px;touch-action:none;user-select:none}.touch-pad>button:first-child{grid-column:2}.touch-pad>button:nth-child(2){grid-column:1;grid-row:2}.touch-pad>button:nth-child(3){grid-column:2;grid-row:2}.touch-pad>button:nth-child(4){grid-column:3;grid-row:2}.touch-actions{display:flex;gap:10px;pointer-events:auto;align-items:flex-end}.touch-actions>button{width:51px;height:51px;border-radius:50%;background:#dfee8abf;border:1px solid #f0f7c7aa;color:var(--ink);font-size:10px;font-weight:700;touch-action:none;user-select:none}.touch-actions>button:last-child{width:63px;height:63px}.touch-actions .icon{width:25px;height:25px}.touch-controls button.pressed{background:#eaf8a9;color:#153e32;transform:scale(.95)}.team-indicator{bottom:216px}.game-key-hints{display:none}}
@media(max-height:550px) and (orientation:landscape){.modal{max-height:calc(100dvh - 20px)}.hero-art{min-height:300px}.game-top{padding:12px 20px}.scoreboard{top:15px}.game-top>span:nth-child(2){top:82px;font-size:7px}.touch-controls{bottom:40px;left:25px;right:100px}.game-bottom{padding:12px 22px}.camera-button{position:absolute;bottom:15px;left:185px}.team-indicator{bottom:143px}.match-announcement{top:33%}.match-announcement>strong{font-size:70px}.match-announcement>strong.goal-text{font-size:70px}.result-card{padding:20px 30px;max-width:440px}.result-trophy{display:none}.result-card h2{font-size:27px;margin-top:5px}.result-score{font-size:45px;margin:5px}.result-card p{margin:7px}.result-card .button{margin-top:15px}.score-table{padding:20px}.score-row{padding:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}
.hero h1{font-synthesis:style}.hero h1>span{white-space:nowrap}
@media(max-width:650px){.hero h1{font-family:'DM Sans','Segoe UI',sans-serif;font-size:60px;font-weight:1000;letter-spacing:-3px;line-height:1.05;transform:scaleX(.78);transform-origin:left center;width:128.2%}}

.bot-option-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}
.bot-option-label>span{font-size:11px;font-weight:700}
.bot-option-label>small{font-size:7px;letter-spacing:1px;color:#8a987f}
.bot-formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.bot-formats>button{border:1px solid #dbe2ce;border-radius:7px;background:#edf0e5;padding:12px 8px;text-align:center}
.bot-formats>button:hover{background:#e2eacd}
.bot-formats>button.selected{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.bot-formats strong{font-size:24px;letter-spacing:-1.2px;display:block;font-weight:800}
.bot-formats small{font-size:8px;margin-top:3px;display:block;color:#839171}
.bot-formats .selected small{color:#b7caa3}
.bot-team-preview{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:9px;align-items:center;margin:18px 0 23px}
.bot-preview-team{padding:12px;border:1px solid #d1e2e4;background:#e6eff0;border-radius:8px;align-self:stretch;min-width:0}
.bot-preview-team.orange{border-color:#e7d8c6;background:#f1e8dc}
.bot-preview-team h3{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:8px;letter-spacing:.65px;color:#62909a;white-space:nowrap}
.bot-preview-team.orange h3{color:#b1825f}
.bot-preview-team h3>.icon{width:12px;height:12px}
.bot-preview-player{display:flex;align-items:center;gap:8px;min-height:33px;color:#6b8183;font-size:10px;padding:5px 0}
.bot-preview-team.orange .bot-preview-player{color:#a08160}
.bot-preview-player>.icon{width:22px;height:22px;padding:3px;border-radius:5px;background:#ffffff65}
.bot-preview-player>.member-avatar{width:22px;height:22px;font-size:10px}
.bot-preview-player>span:not(.member-avatar){flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bot-preview-player>small{font-size:6px;letter-spacing:.6px;color:#8c9d90}
.bot-preview-player.human{color:var(--ink);font-weight:700}
.bot-versus{font-size:10px;font-weight:800;font-style:italic;color:#9ca98c;text-align:center}
.bot-difficulties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bot-difficulties>button{position:relative;padding:13px 12px;text-align:left;border:1px solid #dbe2ce;border-radius:7px;background:#f0f2e9;min-width:0}
.bot-difficulties>button:hover{background:#e6edd8}
.bot-difficulties>button.selected{border-color:#9bb674;background:#e5edcf;box-shadow:inset 0 0 0 1px #9bb674}
.difficulty-bars{display:flex;align-items:flex-end;gap:3px;height:16px;margin-bottom:9px}
.difficulty-bars i{display:block;width:4px;height:6px;border-radius:1px;background:#d9dfce}
.difficulty-bars i:nth-child(2){height:10px}.difficulty-bars i:nth-child(3){height:14px}
.difficulty-bars i.filled{background:#82976a}.selected .difficulty-bars i.filled{background:var(--ink)}
.bot-difficulties strong{display:block;font-size:12px;margin-bottom:5px}
.bot-difficulties small{font-size:7px;color:#8a967c;display:block;line-height:1.5}
.difficulty-check{position:absolute;right:10px;top:12px;width:13px;height:13px;color:#577a3c}
.bots-modal>.bot-difficulty-description{font-size:10px;line-height:1.7;color:#829072;margin:12px 0 16px;min-height:34px}
.bot-duration{display:flex;align-items:center;justify-content:space-between;gap:17px;border-top:1px solid var(--line);padding-top:16px}
.bot-duration>label{margin:0;font-size:11px;line-height:1.5}
.bot-duration small{font-size:8px;color:#8c9980;font-weight:400;display:block;margin-top:3px}
.bot-duration>select{width:123px;flex-shrink:0;height:37px;font-size:10px}
.bot-start{justify-content:flex-start;padding:13px 17px;gap:13px}
.bot-start>span{text-align:left;flex:1;font-size:13px}
.bot-start small{display:block;font-size:9px;font-weight:500;color:#788849;margin-top:3px}
.bots-modal>.bot-footnote{margin:11px 0 0;font-size:8px;color:#9aa48e;text-align:center;line-height:1.6}
.bot-unavailable{display:flex;flex-direction:column;align-items:flex-start;background:#efe6d2;border:1px solid #e1d4b7;padding:12px 14px;margin-top:15px;border-radius:6px;gap:3px}
.bot-unavailable>span{font-size:10px;line-height:1.6;color:#918269}
.bot-unavailable .text-button{font-size:10px;padding-bottom:0}
@media(max-width:650px){
  #play-section .section-heading{flex-direction:column;gap:13px}
  #play-section .segmented{align-self:stretch;width:100%;margin-top:0}
  #play-section .segmented>button{flex:1;font-size:9px;padding:10px 5px;gap:5px}
  .bot-team-preview{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:6px}
  .bot-preview-team{padding:9px}.bot-preview-team h3{font-size:6px;letter-spacing:.2px;gap:4px}
  .bot-preview-player{gap:5px;font-size:9px}.bot-preview-player>small{font-size:5px}
  .bot-preview-team h3>.icon{width:10px;height:10px}.bot-versus{font-size:8px}
  .bot-option-label>small{font-size:6px}.bot-formats{gap:7px}
  .bot-formats>button{padding:10px 5px}.bot-formats strong{font-size:21px}
  .bot-difficulties{gap:7px}.bot-difficulties>button{padding:11px 9px}
  .bot-difficulties strong{font-size:11px}.bot-difficulties small{font-size:6px}
  .bot-duration small{font-size:7px;max-width:170px}.bot-duration>select{width:105px}
  .bots-modal>.bot-footnote{font-size:7px}.bot-start small{font-size:8px}
}
/* Match instruments stay legible against both the pitch and the sky. */
.driving-status { margin-left: auto; padding: 10px 16px; color: #f4f3d9; border-radius: 9px; background: #10352dde; max-width: 300px; pointer-events: none; }
.driving-status > div { display: flex; align-items: baseline; gap: 6px; }
.driving-status strong { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.driving-status span { font-size: 7px; color: #b9c9b0; }
.driving-status b { margin-left: 9px; font-size: 7px; letter-spacing: .4px; color: #c5d7b8; }
.driving-status b.ready { color: #ffcf88; }
.driving-status small { display: block; margin-top: 5px; font-size: 7px; color: #e8dfac; line-height: 1.6; }
.respawn-notice { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); min-width: 290px; padding: 25px 34px; border: 1px solid #f8b77a99; border-radius: 12px; background: #192c2ce8; color: #fff0d4; text-align: center; pointer-events: none; box-shadow: 0 12px 65px #1e100b60; }
.respawn-notice > span { display: block; font-size: 11px; letter-spacing: 3px; color: #ffb17e; }
.respawn-notice > strong { display: block; font-size: 23px; margin: 12px 0; white-space: nowrap; }
.respawn-notice b { color: #ffd981; font-size: 32px; font-variant-numeric: tabular-nums; }
.respawn-notice > small { color: #c4cab8; font-size: 10px; }
.demolition-notice { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); padding: 10px 19px; background: #332b1beb; color: #ffd28e; border: 1px solid #f4c17d88; border-radius: 7px; font-size: 13px; font-weight: 800; letter-spacing: 2px; pointer-events: none; }
@media (max-width: 900px) { .driving-status { padding: 8px 10px; max-width: 200px; } .driving-status b { display: none; } }
@media (max-width: 480px) { .driving-status { max-width: 125px; } .driving-status strong { font-size: 23px; } .driving-status small { font-size: 6px; } }
@media (max-height: 550px) and (orientation: landscape) { .driving-status { position: absolute; right: 20px; bottom: 143px; max-width: 143px; } .driving-status strong { font-size: 23px; } }
.match-boost {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  color: #fff3c8;
  padding: 14px 16px 12px;
  border: 1px solid #f6dd8450;
  border-radius: 12px;
  background: linear-gradient(135deg, #112f32ed, #183e36d9);
  box-shadow: 0 7px 28px #07271c26;
  pointer-events: none;
  text-align: left;
}
.boost-title { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.boost-title .icon { width: 14px; height: 14px; color: #f7d971; }
.boost-title kbd { margin-left: auto; font-size: 7px; color: #e9eed8; background: #ffffff0c; border-color: #ffffff26; box-shadow: none; padding: 3px 4px; }
.boost-number { display: flex; align-items: baseline; gap: 7px; margin: 3px 0 9px; }
.boost-number strong { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.boost-number span { font-size: 10px; letter-spacing: 1px; color: #b9c9b0; }
.boost-track { position: relative; height: 7px; background: #020f1699; border-radius: 4px; overflow: hidden; }
.boost-track i { display: block; height: 100%; background: linear-gradient(90deg, #cadb7a, #ffe17d); border-radius: inherit; transition: width .08s linear; }
.boost-track b { position: absolute; top: 0; height: 100%; width: 2px; left: 25%; background: #183c3480; }
.boost-track b:nth-of-type(2) { left: 50%; }
.boost-track b:nth-of-type(3) { left: 75%; }
.boost-guidance { min-height: 24px; display: flex; gap: 6px; align-items: center; padding-top: 9px; font-size: 8px; color: #dce9bf; }
.boost-direction { display: inline-block; font-size: 16px; line-height: 1; font-weight: 700; color: #ffe17d; }
.match-boost.low { border-color: #efab637a; }
.match-boost.low .boost-number strong, .match-boost.low .boost-guidance { color: #ffc488; }
.match-boost.low .boost-track i { background: #ffc488; }
.match-boost.empty .boost-number strong { color: #f59870; }
.match-boost.boosting .boost-track i { box-shadow: 0 0 13px #ffe17d; background: #fff3b4; }
#boost-pickup { position: absolute; bottom: calc(100% + 10px); right: 0; white-space: nowrap; padding: 9px 13px; background: #f6dd8e; color: #173c32; box-shadow: 0 4px 20px #122b3540; border: 1px solid #fff0bb; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.arena-radar { position: absolute; left: 28px; bottom: 157px; width: 112px; padding: 9px 9px 8px; border: 1px solid #dbe7c635; border-radius: 9px; background: #10352dde; color: #dfebcf; box-shadow: 0 5px 23px #14312c20; pointer-events: none; }
.radar-heading { display: flex; justify-content: space-between; align-items: center; font-size: 7px; letter-spacing: 1.3px; font-weight: 700; margin-bottom: 4px; }
.radar-heading .icon { color: #f6da7d; width: 10px; height: 10px; }
.arena-radar > svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-field { fill: #36604966; stroke: #bdcdaa65; stroke-width: .7; }
.radar-lines { fill: none; stroke: #d4e1bb60; stroke-width: .7; }
.radar-lines.radar-orange { stroke: #efad79; stroke-width: 1.1; }
.radar-lines.radar-blue { stroke: #8cc3eb; stroke-width: 1.1; }
.radar-pad { fill: #91a782; opacity: .25; }
.radar-pad.available { fill: #fbe091; opacity: .95; }
.radar-pad.large.available { stroke: #ffedb6; stroke-width: 1.5; paint-order: stroke; }
.radar-car.blue { fill: #87c7f4; }
.radar-car.orange { fill: #f8ac7d; }
#radar-ball { fill: #fffefa; stroke: #123c36; stroke-width: .8; }
#radar-player { fill: #ffffff; stroke: #81cafa; stroke-width: 1.4; stroke-linejoin: round; }
#radar-player.orange { stroke: #ffb385; }
.radar-legend { display: flex; gap: 11px; align-items: center; justify-content: center; font-size: 6px; font-weight: 600; color: #ecd9a7; padding: 7px 0 5px; }
.radar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.radar-legend i { width: 3px; height: 3px; border-radius: 50%; background: #fbe091; }
.radar-legend i.large { width: 5px; height: 5px; box-shadow: 0 0 0 1px #fbe09155; }
#radar-status { display: block; font-size: 6px; letter-spacing: .6px; text-align: center; color: #a3b999; }

@media (max-width: 1150px) {
  .game-key-hints { display: none; }
}
@media (max-width: 650px) {
  .match-boost { flex-basis: 153px; width: 153px; padding: 11px 12px 9px; border-radius: 9px; }
  .boost-title { font-size: 6px; letter-spacing: .55px; gap: 4px; }
  .boost-title .icon { width: 11px; height: 11px; }
  .boost-title kbd { font-size: 6px; padding: 2px 3px; }
  .boost-number { margin-bottom: 6px; }
  .boost-number strong { font-size: 36px; }
  .boost-number span { font-size: 8px; }
  .boost-guidance { font-size: 7px; gap: 4px; padding-top: 7px; min-height: 22px; }
  .boost-direction { font-size: 14px; }
  .arena-radar { left: 16px; bottom: auto; top: 96px; width: 78px; padding: 6px; }
  .radar-heading { font-size: 5px; letter-spacing: .9px; }
  .radar-heading .icon { width: 8px; height: 8px; }
  .radar-legend { font-size: 5px; gap: 7px; padding: 5px 0 4px; }
  #radar-status { font-size: 4.5px; letter-spacing: .3px; }
  .team-indicator { left: 105px; top: 101px; bottom: auto; }
  .team-indicator > span { display: none; }
  #boost-pickup { padding: 8px 10px; font-size: 8px; }
}
@media (hover: none) and (pointer: coarse) {
  .arena-radar { top: 112px; bottom: auto; }
  .touch-controls { bottom: 168px; }
  .team-indicator { bottom: 270px; }
  .boost-title kbd { display: none; }
}
@media (max-width: 650px) and (hover: none) and (pointer: coarse) {
  .arena-radar { top: 96px; }
  .team-indicator { bottom: auto; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .arena-radar { top: 93px; bottom: auto; left: 20px; width: 70px; padding: 5px; }
  .radar-heading { font-size: 5px; letter-spacing: .5px; }
  .radar-legend { font-size: 4.5px; gap: 5px; padding: 4px 0 2px; }
  #radar-status { font-size: 4px; }
  .match-boost { flex-basis: 143px; width: 143px; padding: 9px 11px; margin-left: auto; }
  .boost-title { font-size: 6px; letter-spacing: .3px; }
  .boost-title .icon { width: 11px; height: 11px; }
  .boost-number { margin-bottom: 5px; }
  .boost-number strong { font-size: 34px; }
  .boost-guidance { font-size: 6.5px; padding-top: 6px; min-height: 19px; }
  .team-indicator { top: 78px; left: 20px; bottom: auto; }
  .team-indicator > span { display: none; }
  .touch-controls { bottom: 48px; left: 106px; right: 193px; }
  .camera-button { left: 113px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .boost-track i { transition: none; }
}
.controller-status { font-size: 10px; letter-spacing: .06em; color: var(--ink, #153c35); }
.controller-help { border-top: 1px solid #d7e0d8; margin-top: 24px; padding-top: 20px; }
.controller-help h3 { margin-bottom: 12px; }
.gamepad-connected :is(button, input, select, a, [tabindex="0"]):focus { outline: 3px solid #6b8d25; outline-offset: 4px; }
.gamepad-connected .touch-controls { display: none; }
@media (max-width: 560px) and (max-height: 550px) and (orientation: landscape) {
  .match-boost { flex-basis: 130px; width: 130px; }
  .touch-controls { left: 100px; right: 175px; }
  .touch-pad { grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(2, 31px); gap: 4px; }
  .touch-pad > button { font-size: 19px; }
  .touch-actions { gap: 6px; }
  .touch-actions > button { width: 40px; height: 40px; font-size: 8px; }
  .touch-actions > button:last-child { width: 50px; height: 50px; }
}