:root{color-scheme:dark;--fg:#edf5f1;--dim:#a4b6b3;--line:rgba(177,211,201,.18);--glass:rgba(17,31,35,.91);--glass-hi:rgba(48,69,72,.68);--accent:#ace5cd;--hot:#e8a184;--action:#ace5cd;--font:Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font-family:var(--font)}
*{box-sizing:border-box}
body{margin:0;background:#111f23;color:var(--fg);overflow:hidden;font-size:15px}
button,input{font:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
body:after{content:'';pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse at 50% 35%,transparent 35%,#111f2366);z-index:1}
.glass,dialog{background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(20px) saturate(.9);box-shadow:0 18px 65px #08151966}
main{position:fixed;z-index:2;left:max(24px,6vw);top:50%;transform:translateY(-50%);width:460px;padding:26px 24px 22px;display:grid;gap:16px;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin;scrollbar-color:#ace5cd55 transparent}
.menu-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
h1{font:700 clamp(26px,3vw,32px)/1.15 var(--font);letter-spacing:-1.1px;margin:0}
h1 .fpv-mark{color:var(--accent);font-weight:450}
h1 small{display:block;font:11px/1.5 var(--mono);letter-spacing:.5px;color:var(--dim);margin-top:10px;max-width:245px}
.menu-icons{display:flex;gap:6px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--glass-hi);font-size:18px;flex-shrink:0}
.icon-btn:hover{background:#3d5a60}
.field{display:grid;gap:7px}
.field>label,.flight-setting>span{font-size:12px;color:var(--dim);letter-spacing:.2px}
input[type=text]{width:100%;padding:12px 16px;border-radius:9px;border:1px solid var(--line);background:#0d1a20a3;color:var(--fg);font:600 16px var(--font);min-width:0}
input:focus{outline:none;border-color:#ace5cdcc;box-shadow:0 0 0 3px #ace5cd20}
input::placeholder{color:#abc1bd77}
.skin-selector{background:#0d1a2055;border-radius:10px;padding:4px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.skin-selector .icon-btn{width:42px;height:42px;font-size:26px}
#skin-name{text-align:center;font-weight:600}
.swatches{display:flex;justify-content:center;gap:12px;margin-top:3px}
.swatch{width:16px;height:16px;border-radius:50%;border:2px solid #17292d;outline:1px solid transparent;padding:0}
.swatch.selected{outline-color:var(--accent)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mode{border:1px solid var(--line);background:#22383d80;border-radius:9px;padding:12px 10px;text-align:center}
.mode strong{font-size:12px;font-weight:600;display:block}
.mode small{display:block;font:9px/1.4 var(--mono);color:var(--dim);margin-top:4px}
.mode.selected{background:#ace5cd14;border-color:#ace5cd99;color:#d1f1e2;box-shadow:inset 3px 0 var(--accent)}
.mode:hover{background:#324d5280;border-color:#ace5cd77}
.mode-description{color:var(--dim);font-size:11px;line-height:1.55;min-height:34px;margin:2px 0 0}
.flight-setting{border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.flight-setting button{padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--glass-hi);font-size:11px}
.actions{display:grid;gap:10px}
.launch-row{display:flex;gap:10px}
.launch-row>*{flex:1}
.primary,.secondary{border:1px solid var(--line);background:var(--glass-hi);border-radius:9px;padding:13px 20px;font-weight:600;font-size:14px;text-align:center}
.primary{background:var(--action);border-color:transparent;color:#142e2c;box-shadow:none}
.primary:hover{filter:brightness(1.08)}
.secondary:hover{background:#3d5a6088}
.meta{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center;font:10px/1.5 var(--mono);color:var(--dim);gap:8px}
.meta>span{display:flex;align-items:center;gap:6px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.keys{font:10px/1.9 var(--mono);color:var(--dim)}
kbd{font:inherit;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--fg)}
.tag{font:9px/1 var(--mono);letter-spacing:.2em;color:#8ba9a277;text-align:center}
#showcase,#menu-bottom{display:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:2}
#hud button{pointer-events:auto}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;font:13px var(--mono);gap:12px}
.hud-top>span,.hud-top>button{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:10px 16px;backdrop-filter:blur(12px)}
#hud-mode{color:var(--accent);font-size:11px;margin-top:3px}
#timer{font-size:21px;font-variant-numeric:tabular-nums}
.hud-top button{font-size:11px}
.reticle{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;opacity:.7}
.reticle i{height:1px;width:24px;background:white}
.reticle span{border:1px solid white;width:5px;height:5px;border-radius:50%}
.telemetry{position:absolute;bottom:80px;left:20px;display:flex;gap:28px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 20px;backdrop-filter:blur(12px)}
.telemetry div{display:flex;flex-direction:column;gap:5px}
.telemetry b{font:30px var(--mono);font-variant-numeric:tabular-nums}
.telemetry span{font:9px var(--mono);color:var(--dim)}
.flight-status{position:absolute;right:20px;bottom:80px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 16px;backdrop-filter:blur(12px);font:10px var(--mono)}
.flight-status span:first-child{color:var(--accent)}
.flight-hint{position:absolute;bottom:24px;left:20px;right:20px;font:10px/1.6 var(--mono);color:#deede7cc;text-shadow:0 1px 4px #000}
#scoreboard{position:absolute;right:20px;top:85px;background:var(--glass);border:1px solid var(--line);padding:12px 16px;font:11px/1.9 var(--mono);border-radius:16px;min-width:160px}
#scoreboard:empty{display:none}
.score-row{display:flex;justify-content:space-between;gap:20px}
.score-row.me{color:var(--accent)}
#objective{position:absolute;top:90px;left:20px;font:11px/1.7 var(--mono);max-width:340px;color:#deede7;text-shadow:0 1px 5px #111f23}
#trick{position:absolute;top:25%;left:50%;transform:translateX(-50%);font:22px var(--mono);color:var(--accent);text-shadow:0 2px 8px #111f23}
dialog{color:var(--fg);padding:26px;max-width:520px;width:calc(100% - 30px);max-height:90dvh;overflow:auto}
dialog::backdrop{background:#111f2366;backdrop-filter:blur(5px)}
dialog h2{font:650 25px/1.25 var(--font);letter-spacing:-.7px;margin:10px 0 18px}
dialog p{font-size:13px;color:var(--dim);line-height:1.7}
dialog dl{font-size:12px;display:grid;grid-template-columns:90px 1fr;gap:14px 8px;margin:25px 0}
dialog dt{color:var(--accent);font-family:var(--mono)}
dialog dd{margin:0;color:var(--dim)}
dialog>.primary,dialog>.secondary,#network-options>.primary{display:block;width:100%;margin-top:12px}
.eyebrow{font:10px var(--mono);color:var(--dim)}
.close{position:absolute;right:15px;top:12px;font-size:26px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dialog-head h2{margin:0}
.room-row{display:flex;gap:8px;margin:18px 0 10px}
.room-row input{text-transform:uppercase}
.room-entry{display:block;width:100%;margin:8px 0;font-size:12px}
#open-rooms{font-size:13px;line-height:1.7;color:var(--dim);margin:20px 0}
#copy-code{font:22px var(--mono);color:var(--accent)}
#lobby-players{border-block:1px solid var(--line);padding:14px 0;font-size:13px;line-height:2}
#toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translateX(-50%);padding:14px 22px;border:1px solid var(--line);border-radius:16px;background:#142a30f2;color:#d1f1e2;font-size:12px;max-width:90%;text-align:center}
#graphics-error{position:fixed;inset:20%;z-index:30;background:#111f23;padding:30px}
#touch-controls{display:none}

@media(max-width:860px){main{left:16px;top:50%;width:min(440px,calc(100% - 32px));padding:22px 20px;gap:14px}
h1{font-size:27px}
h1 small{font-size:10px}
.meta{font-size:9px}
.telemetry{bottom:165px;gap:22px;left:12px;padding:10px 14px}
.telemetry b{font-size:22px}
.telemetry span{font-size:7px}
.flight-status{bottom:165px;right:12px;font-size:8px;gap:7px;padding:10px}
.flight-status #throttle{display:none}
.flight-hint{display:none}
#objective{top:80px;left:16px;font-size:10px;max-width:200px}
#scoreboard{top:130px;right:12px;font-size:9px;padding:8px;min-width:130px}
.hud-top{padding:12px;gap:6px}
.hud-top>span,.hud-top>button{padding:10px;border-radius:12px}
#hud-mode{font-size:9px;max-width:145px}
.hud-top #timer{font-size:17px}
.hud-top button{font-size:9px}
.flight-status #connection{max-width:95px;text-align:right}
.keys{font-size:9px}
}
@media(max-height:740px){main{gap:11px;padding:20px}
.mode{padding:9px}
.mode-description{font-size:10px;min-height:30px}
.field{gap:6px}
.keys{display:none}
.skin-selector .icon-btn{width:34px;height:34px}
.swatches{margin-top:0}
.primary,.secondary{padding:11px 18px}
.menu-top h1{font-size:26px}
.menu-top h1 small{font-size:9px;margin-top:7px}
}
@media(pointer:coarse){#touch-controls{display:flex;position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:5%;right:5%;align-items:center;justify-content:space-between;gap:10px;pointer-events:auto}
.stick{width:115px;height:115px;flex-shrink:0;border:1px solid #ace5cd66;background:#172c3277;border-radius:50%;position:relative;touch-action:none}
.stick:before,.stick:after{content:'';position:absolute;background:#ace5cd33;pointer-events:none}
.stick:before{width:1px;height:90px;left:50%;top:12px}
.stick:after{height:1px;width:90px;top:50%;left:12px}
.stick i{position:absolute;width:36px;height:36px;background:#ace5cd77;border:1px solid var(--accent);border-radius:50%;left:calc(50% - 18px);top:calc(50% - 18px);pointer-events:none}
.stick span{position:absolute;top:-18px;font:8px var(--mono);width:100%;text-align:center;color:#deede7}
#touch-controls button{border:1px solid var(--line);border-radius:12px;background:#172c32aa;padding:12px 8px;font-size:10px;touch-action:none}
#reset-touch{font-size:19px!important}
.flight-hint{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}


.controller-recommendation{display:grid;gap:9px;font-size:11px;color:var(--accent)}
.controller-recommendation>span:before{content:'◉';margin-right:7px}
.controller-recommendation button{padding:10px 14px;font-size:12px;text-align:left;color:var(--fg)}
#controller-dialog{max-width:610px}.pad-field{display:grid;gap:6px;font-size:12px;color:var(--dim);flex:1;min-width:0}
select{font:12px var(--font);color:var(--fg);background:#20363c;border:1px solid var(--line);border-radius:8px;padding:10px;min-width:0;max-width:100%}
.pad-row{display:flex;gap:10px;margin:14px 0}.pad-row button{flex:1;padding:10px;font-size:11px}.pad-note{font-size:11px!important;line-height:1.6!important}
.axis-heading,.axis-row{display:grid;grid-template-columns:1fr 65px 65px 1.5fr;align-items:center;gap:8px;margin:9px 0;font-size:12px}.axis-heading{font-size:10px;color:var(--dim)}
.invert-label{text-align:center}.axis-row meter{width:100%;height:12px;accent-color:var(--accent)}.axis-row output{display:block;font:10px var(--mono);color:var(--dim)}
.pad-slider{display:grid;grid-template-columns:1fr auto;gap:8px;margin:18px 0;font-size:12px}.pad-slider input{grid-column:1 / -1;width:100%;accent-color:var(--accent)}.pad-slider output{color:var(--accent);font-family:var(--mono)}
#arm-hint{position:absolute;left:50%;top:35%;transform:translateX(-50%);max-width:90%;width:max-content;border:1px solid var(--line);background:var(--glass);padding:14px 18px;border-radius:12px;color:var(--accent);font:12px/1.6 var(--mono);text-align:center}
@media(max-width:480px){.axis-heading,.axis-row{grid-template-columns:1fr 52px 52px 1fr;gap:5px}.axis-heading{font-size:9px}#controller-dialog{padding:20px}.pad-row{flex-wrap:wrap}.pad-row .pad-field{min-width:140px}.controller-recommendation{gap:7px}}

#arm-button{position:absolute;right:20px;top:75px;pointer-events:auto!important;background:var(--glass);font-size:10px;padding:9px 12px;z-index:2}#arm-button:not([hidden])~*{--has-controller:1}