:root{--panel-width: 140px;--scale: .8;--joy-glow: rgba(180, 255, 0, .4);--joy-glow-active: rgba(180, 255, 0, .8);--plastic-base: #ffffff;--plastic-highlight: #ffffff;--plastic-shadow: #e0f0c0;--metal-base: #bdf242;--metal-highlight: #d9f99d;--metal-shadow: #84cc16;--rubber-base: #a3e635;--led-blue: #3b82f6;--led-green: #a3e635;--led-amber: #eab308}.controller-panel *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.controller-panel{position:fixed;top:0;bottom:0;width:var(--panel-width);background:#fff;box-shadow:0 0 30px #a3e6351a;z-index:1000;display:flex;flex-direction:column;align-items:center;padding:20px 0;justify-content:center;box-sizing:border-box;transition:box-shadow .3s;pointer-events:auto}@media(max-width:1024px){.controller-panel{box-shadow:0 0 10px #a3e63533;background-image:none!important;background-color:#fff!important}.carbon-fiber-inlay{background-image:none!important;box-shadow:none!important}}.left-panel{left:0!important;border-radius:0 15px 15px 0;background-color:#fff;background-image:radial-gradient(circle,#e0e0e0 1px,transparent 1px);background-size:8px 8px}.right-panel{right:0!important;border-radius:15px 0 0 15px;background-color:#fff;background-image:radial-gradient(circle,#e0e0e0 1px,transparent 1px);background-size:8px 8px;justify-content:center}.settings-btn{position:absolute;top:15px;right:15px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:500;border:1px solid #e0e0e0;box-shadow:0 2px 5px #a3e6354d;transition:all .1s;pointer-events:auto;font-size:16px;color:#a3e635}.settings-btn:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:transparent;border:1px solid rgba(163,230,53,.3);z-index:-1}.settings-btn:hover{transform:scale(1.05);box-shadow:0 4px 10px #a3e63566}.settings-btn:active{transform:translateY(2px) scale(.95);box-shadow:0 1px 2px #000c,inset 0 1px 1px #ffffff1a}.hud-editing .settings-btn{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4) 0%,transparent 50%),#0f8;color:#000;box-shadow:0 0 20px #0f89,inset 0 1px 2px #fff6;border-color:#0f8}.hud-editing .carbon-fiber-inlay,.hud-editing .pill-container,.hud-editing .emote-tray,.hud-editing .voice-panel{cursor:move;outline:2px dashed rgba(0,255,136,.6);outline-offset:4px;border-radius:8px}.hud-editing .xyab-btn{cursor:move;outline:2px dashed rgba(0,255,136,.6);outline-offset:4px;border-radius:50%}.carbon-fiber-inlay.dragging,.xyab-btn.dragging,.pill-container.dragging,.emote-tray.dragging{opacity:.8;z-index:1100;filter:brightness(1.2)}.carbon-fiber-inlay{width:90%;aspect-ratio:1 / 1;flex:none;border-radius:50%;background-color:transparent;position:relative;display:flex;align-items:center;justify-content:center;margin-top:10px}.joystick-led-ring{position:absolute;width:140px;height:140px;border-radius:50%;border:2px dotted rgba(163,230,53,.6);pointer-events:none;z-index:6}.joy-arrow{position:absolute;width:0;height:0;border-style:solid}.joy-up{top:4px;left:calc(50% - 6px);border-width:0 6px 10px 6px;border-color:transparent transparent #a3e635 transparent}.joy-down{bottom:4px;left:calc(50% - 6px);border-width:10px 6px 0 6px;border-color:#a3e635 transparent transparent transparent}.joy-left{left:4px;top:calc(50% - 6px);border-width:6px 10px 6px 0;border-color:transparent #a3e635 transparent transparent}.joy-right{right:4px;top:calc(50% - 6px);border-width:6px 0 6px 10px;border-color:transparent transparent transparent #a3e635}.joystick-bezel{width:104px;height:104px;background:#a3e635;border-radius:50%;position:absolute;box-shadow:0 6px 12px #84cc164d,inset -2px -4px 6px #65a30d66,inset 2px 4px 6px #fff9;display:flex;align-items:center;justify-content:center;z-index:8}.joystick-socket{width:82px;height:82px;border-radius:50%;background:#fff;box-shadow:inset 0 4px 8px #00000014;display:flex;align-items:center;justify-content:center;position:relative}.dust-boot{display:none}.joystick-knob{width:66px;height:66px;border-radius:50%;background:#a3e635;box-shadow:0 8px 15px #84cc1680,inset -2px -4px 6px #65a30d66,inset 2px 4px 6px #fff9;position:absolute;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .08s cubic-bezier(.25,.8,.25,1)}.joystick-cap{width:52px;height:52px;border-radius:50%;background:#a3e635;box-shadow:inset 1px 3px 6px #65a30d99,inset -1px -2px 4px #fffc;display:flex;align-items:center;justify-content:center}.joystick-center{display:none}.dpad-container{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#1a1c20,#0a0b0d);box-shadow:inset 0 4px 10px #000,0 1px 1px #ffffff1a,inset 0 -2px 4px #ffffff08;display:flex;align-items:center;justify-content:center;position:relative;margin-top:8px;z-index:90;border:1px solid #1a1c1f}.dpad-container:before{content:"";position:absolute;top:3px;left:50%;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background:linear-gradient(135deg,#555,#222);box-shadow:inset 0 1px 1px #ffffff4d}.dpad-cross{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.dpad-arm{position:absolute;background:linear-gradient(180deg,#4a4d54,#2a2c31);box-shadow:0 3px 6px #000000b3,inset 0 1px 2px #fff3,inset 0 -1px 2px #0000004d;cursor:pointer;transition:all .05s;border-radius:3px}.dpad-arm:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.2) 100%);border-radius:3px;pointer-events:none}.xyab-btn{position:absolute;width:56px;height:56px;border-radius:50%;font-size:22px;font-weight:900;font-family:Outfit,Roboto,Arial Black,sans-serif;color:#a3e635;background:#fff;border:1px solid #f0fdf4;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:all .05s cubic-bezier(.25,.8,.25,1);box-shadow:inset 0 2px 4px #fff,0 4px 8px #a3e63526,0 0 15px #a3e63526;z-index:100}.xyab-btn:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:transparent;border:1px solid rgba(163,230,53,.4);box-shadow:inset 0 0 10px #a3e6351a;z-index:-1}.xyab-btn:active,.xyab-btn.pressed{transform:translateY(2px);box-shadow:inset 0 3px 6px #a3e63533,0 1px 2px #a3e6351a}.xyab-y{color:#facc15}.xyab-x{color:#3b82f6}.xyab-b{color:#ef4444}.xyab-a{color:#a3e635}.btn-grey{background:#fff;box-shadow:inset 0 2px 4px #fff,0 4px 8px #a3e63526,0 0 15px #a3e63526;border:1px solid #f0fdf4;position:relative;top:-2px}.btn-grey:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:transparent;border:1px solid rgba(163,230,53,.4);box-shadow:inset 0 0 10px #a3e6351a;z-index:-1}.btn-grey:active,.btn-grey.pressed{top:2px;box-shadow:inset 0 3px 6px #a3e63533,0 1px 2px #a3e6351a}.grip-zone{width:70%;height:35px;border-radius:16px;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 3px),linear-gradient(180deg,#1a1c20,#0e0f11);box-shadow:inset 0 4px 8px #000c,0 1px 1px #ffffff0f,inset 0 -2px 4px #ffffff05;margin:4px 0;position:relative;z-index:85}.grip-zone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:16px;background:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.3) 3px,rgba(0,0,0,.3) 4px);pointer-events:none}.grip-zone:before{content:"";position:absolute;top:30%;left:20%;width:60%;height:40%;border-radius:8px;background:radial-gradient(ellipse,rgba(255,255,255,.03) 0%,transparent 70%);pointer-events:none}.center-buttons{position:fixed;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:14px;z-index:1100;pointer-events:auto}.center-btn{width:28px;height:12px;border-radius:6px;background:linear-gradient(180deg,#3a3d43,#1a1b1e);border:1px solid #111;box-shadow:0 3px 5px #000000b3,inset 0 1px 2px #fff3,inset 0 -1px 2px #0000004d;cursor:pointer;transition:all .06s;position:relative}.center-btn:after{content:"";position:absolute;top:2px;left:50%;transform:translate(-50%);width:2px;height:2px;border-radius:50%;background:#333;box-shadow:inset 0 1px 1px #00000080}.center-btn:active,.center-btn.pressed{transform:translateY(2px);box-shadow:0 1px 2px #000000b3,inset 0 1px 1px #ffffff1a,inset 0 2px 4px #0006}.center-btn-label{position:absolute;bottom:-11px;left:50%;transform:translate(-50%);font-size:7px;font-weight:700;color:#555;letter-spacing:.5px;pointer-events:none;white-space:nowrap}.battery-led{position:absolute;bottom:22px;width:5px;height:5px;border-radius:50%;background:#3df06a;box-shadow:0 0 6px #3df06a,0 0 12px #3cf06480,inset 0 1px 2px #fff6;z-index:200;animation:battery-pulse 4s ease-in-out infinite}.left-panel .battery-led{right:20px}.right-panel .battery-led{left:20px;background:#f0a03d;box-shadow:0 0 6px #f0a03d,0 0 12px #f0a03c80,inset 0 1px 2px #fff6;animation:battery-pulse 4s ease-in-out 1.5s infinite}@keyframes battery-pulse{0%,to{opacity:.6}50%{opacity:1}}.btn-depth-indicator{position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:80%;height:4px;border-radius:2px;background:#0009;box-shadow:inset 0 1px 2px #000c;pointer-events:none;opacity:.5}.contact-shadow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:inherit;box-shadow:0 4px 8px #0009;pointer-events:none;z-index:-2}.finger-oil{position:absolute;top:25%;left:30%;width:40%;height:30%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none;filter:blur(1px)}.ao-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 3px 6px #0006;pointer-events:none}@media(max-width:900px){:root{--panel-width: 90px;--scale: .65}.joystick-bezel{width:80px;height:80px}.joystick-socket{width:64px;height:64px}.joystick-knob{width:48px;height:48px}.joystick-led-ring{width:82px;height:82px}.xyab-y{top:calc(50% - 150px)!important}.xyab-x{top:calc(50% - 60px)!important}.xyab-b{top:calc(50% + 30px)!important}.xyab-a{top:calc(50% + 120px)!important}.xyab-btn{left:7px!important;width:76px;height:76px;font-size:26px;border-width:2px}.customize-btn{right:40px;height:22px;font-size:7px;padding:0 8px}.settings-btn{width:28px;height:28px;font-size:11px}}@media(max-width:600px){:root{--panel-width: 70px;--scale: .5}.joystick-bezel{width:65px;height:65px}.joystick-socket{width:52px;height:52px}.joystick-knob{width:40px;height:40px}.joystick-led-ring{width:68px;height:68px}.xyab-y{top:calc(50% - 120px)!important}.xyab-x{top:calc(50% - 50px)!important}.xyab-b{top:calc(50% + 20px)!important}.xyab-a{top:calc(50% + 90px)!important}.xyab-btn{left:5px!important;width:60px;height:60px;font-size:20px;border-width:2px}.customize-btn{right:32px;height:18px;font-size:6px;padding:0 6px;top:6px}.settings-btn{width:24px;height:24px;font-size:10px;top:4px}}.emote-tray{width:52px;padding:8px 4px;background:#fff;border-radius:20px;border:1px solid #f0fdf4;box-shadow:0 4px 10px #a3e63526,inset 0 2px 4px #fff;margin-bottom:20px;z-index:100;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;max-height:100px;overflow:hidden}.emote-tray-header{font-size:9px;color:#a3e635;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;text-shadow:none;display:flex;align-items:center;gap:4px;flex-shrink:0}.header-line{width:8px;height:2px;background:#a3e635;border-radius:1px;box-shadow:none}.emote-scroll-container{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;overflow-y:auto;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:#a3e635 transparent}.emote-scroll-container::-webkit-scrollbar{width:4px}.emote-scroll-container::-webkit-scrollbar-track{background:transparent}.emote-scroll-container::-webkit-scrollbar-thumb{background:#a3e635;border-radius:10px}.emote-scroll-container::-webkit-scrollbar-thumb:hover{background:#84cc16}.emote-btn{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#fff;border:1px solid #f0fdf4;box-shadow:inset 0 2px 4px #fff,0 4px 8px #a3e63526,0 0 10px #a3e6351a;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .08s cubic-bezier(.25,.8,.25,1)}.emote-btn:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:transparent;border:1px solid rgba(163,230,53,.4);box-shadow:inset 0 0 10px #a3e6351a;z-index:-1}.emote-btn:active,.emote-btn.pressed{transform:scale(.92) translateY(2px);box-shadow:inset 0 3px 6px #a3e63533,0 1px 2px #a3e6351a;background:#fff}.emote-btn img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(163,230,53,.3));pointer-events:none;transition:transform .1s,filter .1s}.emote-btn:active img,.emote-btn.pressed img{transform:scale(.9);filter:drop-shadow(0 1px 2px rgba(163,230,53,.2))}.emote-tray.dragging,.voice-panel.dragging{opacity:.8;box-shadow:0 0 20px var(--joy-glow-active)}.voice-panel{position:relative;display:flex;flex-direction:row;gap:12px;justify-content:center;z-index:500;margin-top:5px}.voice-btn{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #f0fdf4;color:#a3e635;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;box-shadow:inset 0 2px 4px #fff,0 4px 8px #a3e63526,0 0 10px #a3e6351a;transition:all .15s;position:relative}.voice-btn:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:transparent;border:1px solid rgba(163,230,53,.4);box-shadow:inset 0 0 10px #a3e6351a;z-index:-1}.voice-btn:active{transform:translateY(2px) scale(.95);box-shadow:inset 0 3px 6px #a3e63533,0 1px 2px #a3e6351a}.voice-btn.active{color:#fff;background:#a3e635;box-shadow:0 0 15px #a3e63580,inset 0 2px 4px #fff6;border-color:#bef264}.voice-btn.muted{color:#fff;background:#ef4444;box-shadow:0 0 15px #ef44444d,inset 0 2px 4px #fff6;border-color:#f87171}.voice-btn.muted:before{border-color:#ef444466;box-shadow:inset 0 0 10px #ef44441a}