:root{font-family:Manrope,system-ui,sans-serif;color:#edf2f7;background:#090e16;font-synthesis:none;--muted:#8793a4;--line:#293747;--panel:#111925;--amber:#ffc866;--blue:#6dd0ff;--coral:#ff8e82}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;min-height:100%;overscroll-behavior:none}body{min-width:320px;min-height:100dvh;background:radial-gradient(ellipse at 48% -15%,#193047 0,transparent 52%),#090e16;touch-action:manipulation}.controller-shell{min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left));width:min(100%,900px);margin:auto}.controller-topbar{height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;flex-shrink:0}.brand{display:flex;align-items:center;gap:9px;color:#e8edf5;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.13em}.brand b{color:var(--amber)}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffc86699;border-radius:9px;color:var(--amber);font-size:15px}.connection-state,.eyebrow,.control-label,.control-hint,.controller-footer,footer{font:500 9px DM Mono,monospace;letter-spacing:.12em}.connection-state{color:#ff9f98}.connection-state.connected{color:#78e3ad}.setup-screen,.waiting-screen{margin:auto;width:min(100%,380px);padding:35px 0;display:flex;flex-direction:column}.setup-screen h1,.waiting-screen h1{font-size:clamp(48px,13vw,72px);line-height:.96;letter-spacing:-.07em;margin:17px 0 14px}.setup-screen h1 span{color:var(--amber)}.setup-screen p,.waiting-screen p{font-size:13px;line-height:1.6;color:#a2afbd;margin:0 0 23px}.eyebrow{color:#96a6b6}.name-label{font:500 9px DM Mono,monospace;color:#91a0b0;letter-spacing:.12em;margin:0 0 8px}.setup-screen input{height:46px;border:1px solid #344255;border-radius:8px;background:#101925;color:#edf2f7;padding:0 12px;font:14px Manrope,system-ui,sans-serif;outline:none}.setup-screen input:focus{border-color:var(--amber)}.primary-button,.quiet-button{height:47px;border:0;border-radius:8px;padding:0 16px;font-weight:800;font-size:10px;letter-spacing:.08em;cursor:pointer;margin-top:13px}.primary-button{background:var(--amber);color:#17130b}.primary-button span{float:right;font-size:15px}.primary-button:disabled{opacity:.55}.quiet-button{background:transparent;color:#cbd3dd;border:1px solid #344153}.privacy-note{font-size:10px;color:#768598;line-height:1.5;margin-top:14px}.waiting-screen{text-align:center;align-items:center}.waiting-screen h1{font-size:30px;line-height:1.1;letter-spacing:-.04em;margin:17px 0 8px}.waiting-screen p{margin-bottom:12px}.pulse-ring{width:72px;height:72px;border:1px solid #ffc86677;border-radius:50%;display:grid;place-items:center;color:var(--amber);font-size:32px;margin:0 auto 22px;box-shadow:0 0 0 9px #ffc8660b,0 0 34px #ffc86620}.assigned-seat{border:1px solid #6cdea944;color:#81e6b5;border-radius:8px;padding:12px 16px;font:500 12px DM Mono,monospace;margin-top:9px}.profile-header{display:flex;align-items:end;justify-content:space-between;padding:19px 0 14px}.profile-header h1{font-size:21px;letter-spacing:-.04em;margin:5px 0 0}.profile-header small{font:500 10px DM Mono,monospace;color:var(--amber);border:1px solid #ffc86655;border-radius:99px;padding:5px 7px;vertical-align:middle;margin-left:6px}.badge{border:1px solid #516176;border-radius:999px;padding:6px 8px;color:#bcc7d4;font:500 8px DM Mono,monospace;letter-spacing:.1em}.control-screen{flex:1;display:flex;flex-direction:column;min-height:0}.controller-deck{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:240px}.left-deck,.right-deck{border:1px solid #293747;background:linear-gradient(145deg,#131d2a,#0e1621);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px}.control-label{align-self:flex-start;color:#94a3b3;margin:14px 15px auto}.joystick{width:min(42vw,210px);height:min(42vw,210px);max-width:210px;max-height:210px;min-width:145px;min-height:145px;border:1px solid #40536a;border-radius:50%;position:relative;display:grid;place-items:center;touch-action:none;background:radial-gradient(circle,#192a3b 0,#121e2d 68%,#0c1420 69%);box-shadow:inset 0 0 30px #0005,0 12px 28px #0004}.joystick-cross{position:absolute;background:#34475d}.joystick-cross.horizontal{width:64%;height:1px}.joystick-cross.vertical{height:64%;width:1px}.joystick-knob{position:absolute;width:36%;height:36%;border:1px solid #a2e6ff;border-radius:50%;background:radial-gradient(circle at 35% 25%,#8ddfff,#2d8cb7 75%);box-shadow:0 8px 18px #0007;transform:translate(0);pointer-events:none}.control-hint{font-size:8px;color:#738298;letter-spacing:.03em;margin:auto 10px 13px;text-align:center}.action-grid{display:grid;grid-template-columns:repeat(2,minmax(76px,108px));gap:12px;align-items:center;justify-items:center;margin:12px}.action-button{width:min(20vw,105px);height:min(20vw,105px);min-width:76px;min-height:76px;border-radius:50%;border:1px solid #7790a9;background:#192738;color:#eaf2fa;font:800 10px DM Mono,monospace;letter-spacing:.05em;box-shadow:0 8px 20px #0005;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .06s,filter .06s}.action-button.boost{border-color:#ffc86699;color:#ffd47e;background:radial-gradient(circle at 35% 25%,#5a4930,#332819)}.action-button.tag{border-color:#ff8e8288;color:#ffaca2;background:radial-gradient(circle at 35% 25%,#57312f,#301e23)}.action-button.pressed{transform:scale(.94);filter:brightness(1.4)}.controller-footer{display:flex;justify-content:space-between;color:#758396;padding:13px 2px 9px;font-size:8px}.controller-shell footer{display:flex;justify-content:space-between;padding:14px 2px max(12px,env(safe-area-inset-bottom));color:#677486;font-size:8px;flex-shrink:0}.hidden{display:none!important}@media(orientation:landscape)and (max-height:520px){.controller-topbar{height:43px}.profile-header{padding:8px 0}.profile-header h1{font-size:16px}.controller-deck{min-height:0;gap:9px}.left-deck,.right-deck{min-height:0}.joystick{width:min(38vh,180px);height:min(38vh,180px);min-width:125px;min-height:125px}.action-button{width:min(18vh,82px);height:min(18vh,82px);min-width:64px;min-height:64px}.controller-footer{padding:6px 2px}.controller-shell footer{padding:7px 2px 5px}.control-label{margin:8px 12px auto}.control-hint{margin-bottom:7px}}@media(max-width:410px){.controller-shell{padding-left:12px;padding-right:12px}.controller-deck{gap:8px}.action-grid{gap:6px}.action-button{min-width:68px;min-height:68px}}
