:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f9ff;background:#070d1d;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation}body{user-select:none;-webkit-user-select:none}#app{touch-action:manipulation}#game,.touch-controls,.joystick,.dash-button{touch-action:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #baf9ff;outline-offset:3px}[hidden]{display:none!important}
#app{position:relative;width:100vw;height:100dvh;min-height:280px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#15254b 0,#090f24 45%,#050916 100%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.safe-area-probe{position:absolute;width:0;height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);visibility:hidden;pointer-events:none}
.grain{pointer-events:none;position:absolute;inset:0;z-index:2;opacity:.19;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E")}
.hud{position:absolute;top:max(11px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:stretch;justify-content:center;min-width:min(360px,70vw);height:54px;border:1px solid #ffffff27;background:#09152be8;box-shadow:0 16px 42px #0009;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));backdrop-filter:blur(14px)}
.team{display:flex;align-items:center;gap:15px;padding:0 21px;min-width:110px}.team strong{font-size:29px;font-weight:900;font-style:italic;line-height:1}.team-name{font-size:10px;font-weight:900;letter-spacing:.15em;white-space:nowrap}.blue-team{color:#69e8ff}.red-team{color:#ff7e9f}.clock-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100px;border-left:1px solid #ffffff25;border-right:1px solid #ffffff25}.clock-wrap span{font-size:8px;letter-spacing:.18em;color:#b9c7da;font-weight:800}.clock-wrap strong{font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:.04em}.round-button{background:#101d37;border:1px solid #ffffff44;color:#fff;border-radius:50%;width:40px;height:40px}.pause-button{position:absolute;left:calc(100% + 14px);top:6px;font-size:15px;letter-spacing:-2px}
.game-note{position:absolute;z-index:5;left:50%;top:19%;transform:translateX(-50%);font-weight:1000;font-style:italic;font-size:clamp(20px,4.5vw,60px);letter-spacing:-.045em;text-align:center;text-shadow:0 4px 15px #000,0 0 30px #27dfff;white-space:nowrap;pointer-events:none}
.connection-pill{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:5;padding:7px 10px;border:1px solid #8ce9ff80;background:#07172ed9;color:#b6edff;font-size:9px;font-weight:900;letter-spacing:.12em}.connection-pill.relay{border-color:#f6db8e9c;color:#ffeab0}
.touch-controls{position:absolute;inset:0;z-index:6;pointer-events:none}.joystick{position:absolute;left:max(29px,env(safe-area-inset-left));bottom:max(19px,env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;pointer-events:auto;touch-action:none}.joystick-rim{position:absolute;inset:0;border:2px solid #77d9ff69;border-radius:50%;background:#0b203a77;box-shadow:0 0 26px #35caff22,inset 0 0 30px #3cd6ff16}.joystick-rim:after{content:"";position:absolute;inset:22px;border:1px dashed #9cdfff5c;border-radius:50%}.joystick-knob{position:absolute;width:54px;height:54px;top:35px;left:35px;border:2px solid #bff7ff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#78eeff,#256fa8);box-shadow:0 4px 19px #0009,0 0 23px #3adbff80;transform:translate(0,0)}.joystick-label{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-size:9px;letter-spacing:.16em;font-weight:900;color:#a6d9ed}
.boost-wrap{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(19px,env(safe-area-inset-bottom));width:130px;pointer-events:auto}.boost-caption{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;font-weight:900;color:#f0f7ff;margin-bottom:5px}.boost-caption b{color:#f3f88c}.boost-meter{height:5px;background:#ffffff33;margin-bottom:9px;overflow:hidden}.boost-meter span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#c3ff76,#fff889);box-shadow:0 0 12px #f2f777}.boost-button{width:98px;height:98px;margin-left:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;border:2px solid #f7ffae;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f9ffc9,#a8d94e 55%,#527d27);color:#173120;box-shadow:0 0 28px #caff7199,0 6px 22px #0009;touch-action:none}.boost-button span{font-size:41px;line-height:.9;font-weight:900}.boost-button strong{font-size:10px;letter-spacing:.13em}.boost-button:active,.boost-button.active{transform:scale(.94);box-shadow:0 0 38px #e9ff90}
.overlay{position:absolute;inset:0;z-index:10;background:radial-gradient(circle at 45% 50%,#07122878,#030611db 85%);display:flex;align-items:center;justify-content:center}.menu-glow{position:absolute;width:55vw;height:55vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,#206dad43 0,#08234b1e 40%,transparent 68%);filter:blur(15px);pointer-events:none}.brand{position:absolute;left:max(34px,env(safe-area-inset-left));top:max(23px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px;font-size:17px;font-weight:1000;font-style:italic;letter-spacing:-.04em;line-height:.9}.brand>span:last-child>span{display:block;color:#76dcf9}.brand-mark{width:33px;height:33px;display:grid;place-items:center;border:2px solid #a9f0ff;transform:rotate(-15deg);color:#cbfaff;font-size:25px;box-shadow:0 0 20px #41d7ff70}
.menu-card,.dialog{position:relative;border:1px solid #63dfff5e;background:linear-gradient(135deg,#0a1c37ec,#081124f5 65%,#121a37ed);box-shadow:0 35px 80px #000b,0 0 45px #45d7ff20;padding:32px 42px 27px;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}.menu-card{width:min(510px,62vw);text-align:center}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.22em;color:#9deafa}.eyebrow i{display:inline-block;width:7px;height:7px;background:#c7f982;border-radius:50%;box-shadow:0 0 12px #ccff83;margin-right:5px}.menu-card h1{font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-.06em;font-weight:950;font-style:italic;text-transform:uppercase;margin:16px 0 13px;text-shadow:0 5px 23px #0007}.menu-card h1 em{font-style:inherit;color:#83e7ff}.menu-card p,.dialog p{color:#c7d5e7;font-size:13px;line-height:1.5;max-width:360px;margin:0 auto 19px}.primary{height:52px;min-width:230px;padding:0 21px;border:0;background:linear-gradient(100deg,#b9f6ff,#5fe4ff);color:#051b2b;font-weight:1000;letter-spacing:.08em;font-size:14px;box-shadow:0 9px 0 #27718e,0 14px 26px #0008;display:inline-flex;align-items:center;justify-content:space-between;gap:27px;transition:transform .16s,box-shadow .16s}.primary:hover{transform:translateY(-3px);box-shadow:0 12px 0 #27718e,0 18px 28px #0008}.primary:active{transform:translateY(5px);box-shadow:0 4px 0 #27718e}.primary span{font-size:22px;line-height:1}.menu-details{display:flex;justify-content:center;gap:24px;margin-top:22px;color:#b4c9da;font-size:9px;font-weight:800;letter-spacing:.12em}.menu-details span:first-child{color:#d7f786}.corner-copy{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));font-size:10px;line-height:1.7;letter-spacing:.08em;color:#9baec6}.corner-copy b{color:#fff}.left-copy{left:max(34px,env(safe-area-inset-left))}.right-copy{right:max(34px,env(safe-area-inset-right));text-align:right}
.menu-actions{display:flex;flex-direction:column;align-items:center;gap:12px}.menu-actions .primary,.menu-actions .secondary-action{width:250px}.secondary-action{height:47px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border:1px solid #8be7ff;background:#133657d9;color:#dffbff;font-weight:1000;letter-spacing:.08em;font-size:13px;box-shadow:0 6px 0 #1b526e,0 12px 25px #0008}.secondary-action:hover{background:#205076}.secondary-action span{font-size:21px}
.compact{background:#030813c9;backdrop-filter:blur(9px)}.dialog{width:min(400px,80vw);text-align:center;padding:32px 42px}.dialog h2{font-size:clamp(30px,4vw,43px);font-weight:950;font-style:italic;letter-spacing:-.055em;line-height:1.05;margin:14px 0 10px}.dialog p{margin-bottom:20px}.dialog .primary{width:100%;height:48px}.text-button{display:block;margin:20px auto 0;color:#b4cde4;background:none;border:0;font-size:11px;font-weight:900;letter-spacing:.14em}.text-button:hover{color:#fff}.result-score{font-size:42px;font-weight:950;font-style:italic;color:#79e7ff;margin:-5px 0 17px}.result-score small{font-size:20px;color:#f5f9ff;margin:0 13px}.result-score span:last-child{color:#ff809e}.portrait-gate{display:none}
.room-dialog{width:min(500px,80vw);max-height:calc(100dvh - 24px);overflow:auto;clip-path:none;border-radius:12px}.room-dialog h2{font-size:34px}.room-dialog p{margin-bottom:14px}.room-divider{font-size:9px;letter-spacing:.18em;font-weight:900;color:#92b4ca;margin:16px 0 10px}.room-label{display:block;text-align:left;color:#b6d8e8;font-size:10px;font-weight:800;letter-spacing:.08em;margin:0 0 6px}.join-row,.invite-row{display:flex;gap:6px}.join-row input,.invite-row input{height:40px;min-width:0;flex:1;border:1px solid #6facc377;border-radius:4px;background:#061326;color:#ecfaff;padding:0 10px;font:700 12px ui-monospace,monospace;outline:none}.join-row input:focus,.invite-row input:focus{border-color:#80e8ff}.join-row button,.invite-row button,.share-button{border:1px solid #77ddf1;background:#153750;color:#d7faff;font-weight:900;font-size:10px;letter-spacing:.06em;padding:0 13px;white-space:nowrap}.join-row button:hover,.invite-row button:hover,.share-button:hover{background:#246082}.room-code{font:900 21px ui-monospace,monospace;letter-spacing:.15em;color:#b9f5ff;margin:8px 0}.room-status{color:#d3eaf4!important}.share-button{margin:9px auto 14px;padding:8px 14px}.room-pilots{display:flex;justify-content:space-between;gap:10px;padding:10px 0;margin:3px 0 9px;border-top:1px solid #ffffff23;border-bottom:1px solid #ffffff23;font-size:10px;font-weight:900;letter-spacing:.06em}.room-pilots span:first-child{color:#8de9ff}.room-pilots span:last-child{color:#ff9db4}.room-dialog small{display:block;font-size:9px;color:#a8bfd2;margin-top:15px}.room-error{color:#ffafbd!important;font-size:11px!important;margin:10px auto 0!important}.room-dialog .text-button{margin-top:16px}
@media (pointer:fine){.touch-controls{display:none!important}}
@media (max-height:540px) and (orientation:landscape){.brand{top:12px;left:18px;font-size:13px}.brand-mark{width:27px;height:27px;font-size:20px}.menu-card{padding:13px 28px 12px;width:min(470px,64vw)}.menu-card h1{font-size:clamp(29px,4.5vw,48px);margin:8px 0}.menu-card p{font-size:11px;margin-bottom:12px}.menu-card .primary{height:40px;min-width:210px}.menu-actions{gap:8px}.menu-actions .secondary-action{height:38px}.menu-details{margin-top:13px;font-size:8px}.corner-copy{bottom:12px;font-size:8px}.dialog{padding:18px 30px}.dialog h2{margin:8px 0;font-size:28px}.dialog p{margin-bottom:12px;font-size:11px}.dialog .primary{height:38px}.dialog .text-button{margin-top:12px}.room-dialog{padding:14px 26px}.room-dialog h2{font-size:25px}.room-dialog .room-divider{margin:10px 0 7px}.room-dialog .room-code{font-size:17px;margin:4px 0}.room-dialog .share-button{margin:6px auto}.room-dialog .room-pilots{padding:7px 0;margin:1px 0 7px}.room-dialog small{margin-top:9px}.result-score{font-size:31px;margin:0 0 8px}.joystick{width:98px;height:98px;bottom:12px}.joystick-knob{top:27px;left:27px;width:44px;height:44px}.boost-wrap{width:100px;bottom:12px}.boost-button{height:73px;width:73px}.boost-button span{font-size:30px}.boost-button strong{font-size:8px}.hud{height:42px;top:max(7px,env(safe-area-inset-top))}.team{padding:0 12px;min-width:82px;gap:9px}.team strong{font-size:23px}.team-name{font-size:8px}.clock-wrap{min-width:76px}.clock-wrap strong{font-size:18px}.clock-wrap span{font-size:7px}.pause-button{top:1px;width:38px;height:38px}.connection-pill{top:8px;right:10px;font-size:7px}}
@media (max-height:540px) and (orientation:landscape){.game-note{top:31%}}
@media (orientation:portrait) and (max-width:800px) and (pointer:coarse){.portrait-gate{position:absolute;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;background:radial-gradient(circle at center,#123557,#070d1d 65%)}.rotate-icon{font-size:74px;color:#7ce9ff;line-height:1;transform:rotate(90deg);margin-bottom:20px}.portrait-gate strong{font-size:30px;font-weight:950;font-style:italic;text-transform:uppercase}.portrait-gate p{font-size:14px;color:#c3d9e7}}

.craft-picker{display:flex;gap:8px;justify-content:center;margin:-2px 0 16px}.craft-option{flex:1;min-width:0;max-width:205px;padding:8px 10px;border:1px solid #638ca0;background:#0b203a;color:#d5e8f3;text-align:left;box-shadow:inset 0 0 0 1px #ffffff0b}.craft-option strong{display:block;font-size:12px;font-weight:950;letter-spacing:.1em}.craft-option span{display:block;margin-top:2px;font-size:8px;font-weight:850;letter-spacing:.045em;white-space:nowrap}.craft-option[aria-pressed="true"]{border-color:#a6f0ff;background:#194265;box-shadow:0 0 14px #47cbfa4d,inset 0 0 0 1px #85dfff44}.craft-option[aria-pressed="true"] strong{color:#aaf0ff}.room-craft-picker{margin:0 0 12px}
.dash-wrap{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(19px,env(safe-area-inset-bottom));width:136px;pointer-events:auto}.dash-caption{display:flex;justify-content:space-between;gap:5px;font-size:10px;letter-spacing:.07em;font-weight:900;color:#f0f7ff;margin-bottom:5px;white-space:nowrap}.dash-caption b{color:#eaff91}.dash-meter{height:7px;background:#ffffff35;margin-bottom:9px;overflow:hidden;border:1px solid #eaff9160}.dash-meter span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#bcfb78,#f5ff94);box-shadow:0 0 12px #efff74}.dash-button{width:98px;height:98px;margin-left:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;border:2px solid #f7ffae;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f9ffc9,#a8d94e 55%,#527d27);color:#173120;box-shadow:0 0 28px #caff7199,0 6px 22px #0009;touch-action:none}.dash-button span{font-size:38px;line-height:1;font-weight:900}.dash-button strong{font-size:10px;letter-spacing:.13em}.dash-button:active,.dash-button.active{transform:scale(.94);box-shadow:0 0 38px #e9ff90}.dash-button:disabled{filter:grayscale(.55);opacity:.62;box-shadow:0 4px 18px #0008}
@media (max-height:540px) and (orientation:landscape){.menu-card .craft-picker{margin:0 0 9px}.craft-option{padding:5px 8px}.craft-option strong{font-size:10px}.craft-option span{font-size:7px}.dash-wrap{width:113px;bottom:12px}.dash-caption{font-size:8px}.dash-button{height:73px;width:73px}.dash-button span{font-size:29px}.dash-button strong{font-size:8px}.menu-card .menu-details{margin-top:10px}}
@media (max-height:540px) and (orientation:landscape){.brand{left:12px;font-size:11px;gap:5px}.brand-mark{width:23px;height:23px;font-size:16px}.room-dialog{padding:10px 24px}.room-dialog h2{font-size:22px;margin:4px 0}.room-dialog p{margin-bottom:6px}.room-dialog .room-code{font-size:15px;margin:2px 0}.room-craft-picker{margin-bottom:6px}.room-dialog .craft-option{padding:4px 7px}.room-dialog .invite-row input,.room-dialog .join-row input{height:34px}.room-dialog .share-button{margin:5px auto;padding:6px 10px}.room-dialog .room-pilots{padding:5px 0;margin:1px 0 5px}.room-dialog .primary{height:34px}.room-dialog small{margin-top:4px;font-size:8px}.room-dialog .text-button{margin-top:7px;font-size:9px}}
@media (max-height:540px) and (orientation:landscape){.room-dialog .primary{box-shadow:0 4px 0 #27718e,0 7px 18px #0008}.room-dialog small{margin-top:11px}}
.pause-button{left:calc(50% + 194px);top:17px;z-index:6}
@media (max-height:540px) and (orientation:landscape){.hud{display:none!important}.pause-button{left:auto;right:max(9px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:34px;height:34px;background:#061326a6;border-color:#ffffff33}.connection-pill{right:max(50px,calc(env(safe-area-inset-right) + 48px));top:max(8px,env(safe-area-inset-top))}.game-note{top:18%}}
@media (pointer:coarse){.join-row input,.invite-row input{font-size:16px}}
@media (pointer:fine){#game{cursor:crosshair}}
@media (max-height:540px) and (orientation:landscape) and (pointer:coarse){.joystick{--stick-size:clamp(58px,min(23dvh,calc(30.6dvh - env(safe-area-inset-bottom) - 6px)),90px);width:var(--stick-size);height:var(--stick-size);bottom:max(12px,env(safe-area-inset-bottom))}.joystick-knob{width:45%;height:45%;top:27.5%;left:27.5%}.joystick-label{display:none}.dash-wrap{bottom:max(12px,env(safe-area-inset-bottom))}.brand{left:max(12px,env(safe-area-inset-left))}}
.menu-legal{display:flex;justify-content:center;gap:9px;margin-top:14px;color:#90acc3;font-size:9px;font-weight:850;letter-spacing:.14em}.menu-legal a{color:#a8c8dc;text-decoration:none}.menu-legal a:hover,.menu-legal a:focus-visible{color:#dcf8ff;text-decoration:underline}@media (max-height:540px) and (orientation:landscape){.menu-legal{margin-top:7px;font-size:8px}}