.mobile-hud{position:absolute;top:20px;right:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-end}.hud-toggle-button{width:40px;height:40px;background-color:#00000080;border:1px solid #fff;border-radius:5px;color:#fff;font-size:24px;cursor:pointer;display:flex;justify-content:center;align-items:center}.hud-content{background-color:#000000b3;color:#fff;padding:15px;border-radius:10px;font-family:monospace;font-size:18px;margin-top:10px;width:220px}.d-pad{position:relative;width:150px;height:150px}.d-pad-btn{position:absolute;background-color:#ffffff4d;border:1px solid #fff;color:#fff;display:flex;justify-content:center;align-items:center;font-size:20px;-webkit-user-select:none;user-select:none}.d-pad-center{width:50px;height:50px;top:50px;left:50px;border-radius:50%;font-size:24px}.d-pad-up{width:50px;height:50px;top:0;left:50px;border-top-left-radius:10px;border-top-right-radius:10px}.d-pad-down{width:50px;height:50px;bottom:0;left:50px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.d-pad-left{width:50px;height:50px;top:50px;left:0;border-top-left-radius:10px;border-bottom-left-radius:10px}.d-pad-right{width:50px;height:50px;top:50px;right:0;border-top-right-radius:10px;border-bottom-right-radius:10px}.face-switch-container{position:absolute;top:0;width:280px;display:flex;justify-content:space-between}.face-switch-btn{background-color:#fff3;border:1px solid #fff;color:#fff;padding:10px 15px;border-radius:5px;font-family:monospace;font-size:16px;-webkit-user-select:none;user-select:none}.desktop-only-hints{display:block}@media (max-width: 768px){.virtual-controller{display:flex}.desktop-only-hints{display:none!important}.mobile-hud{top:10px;right:10px}}.face-shift-button{position:absolute;top:0;bottom:0;width:calc(15% + env(safe-area-inset-left));max-width:80px;z-index:50;display:flex;justify-content:center;align-items:center;font-size:2rem;font-family:Orbitron,sans-serif;color:#00ffffb3;background:#0014144d;border-style:solid;border-width:2px;border-color:#00ffff80;text-shadow:0 0 10px #0ff,0 0 20px #0ff;box-shadow:inset 0 0 10px #00ffff4d;-webkit-tap-highlight-color:transparent;transition:all .2s ease;-webkit-user-select:none;user-select:none}.face-shift-button:active,.face-shift-button:focus{background:#00323280;color:#fff;text-shadow:0 0 15px #0ff,0 0 30px #0ff;border-color:#0ff;box-shadow:inset 0 0 15px #00ffff80,0 0 15px #00ffff4d}.face-shift-button.left{left:0;padding-left:env(safe-area-inset-left);border-top-right-radius:15px;border-bottom-right-radius:15px;border-left:none}.face-shift-button.right{right:0;padding-right:env(safe-area-inset-right);width:calc(15% + env(safe-area-inset-right));border-top-left-radius:15px;border-bottom-left-radius:15px;border-right:none}.settings-hud{position:absolute;top:calc(1rem + env(safe-area-inset-top));left:calc(1rem + env(safe-area-inset-left));z-index:200;font-family:Cutive Mono,Courier New,monospace}.settings-button{width:44px;height:44px;background-color:#0ff3;border:1px solid rgba(0,255,255,.5);border-radius:50%;color:#0ff;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background-color .2s,transform .2s}.settings-button:active{background-color:#0ff6;transform:scale(.95)}.settings-button svg{width:24px;height:24px;fill:currentColor}.settings-menu{position:absolute;top:54px;left:0;width:200px;background-color:#001414e6;border:1px solid #00ffff;border-radius:8px;padding:1rem;box-shadow:0 0 20px #00ffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:1rem}.setting-row{display:flex;justify-content:space-between;align-items:center;color:#0ff}.setting-row label{font-size:1rem;text-shadow:0 0 5px #00ffff}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#0000004d;border:1px solid #00ffff;border-radius:20px;transition:.4s}.slider:before{position:absolute;content:"";height:12px;width:12px;left:4px;bottom:3px;background-color:#0ff;border-radius:50%;transition:.4s;box-shadow:0 0 10px #0ff}input:checked+.slider{background-color:#00ffff4d}input:checked+.slider:before{transform:translate(18px)}.instruction-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in-out}.instruction-content{background:#1a1a1a;color:#e0e0e0;padding:2rem;border-radius:10px;border:1px solid #444;max-width:90%;max-height:90vh;overflow-y:auto;position:relative;font-family:Arial,sans-serif;box-shadow:0 0 20px #0ff3}.close-button{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer}h1,h2{color:#0ff;border-bottom:1px solid #00ffff;padding-bottom:.5rem;margin-bottom:1rem}.control-group p{margin:.5rem 0;line-height:1.6}.control-group p strong{color:#0ff;margin-right:.5em}@media (min-width: 1024px){.instruction-content{max-width:600px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.desktop-dashboard{position:absolute;top:0;bottom:0;width:250px;z-index:50;display:flex;flex-direction:column;padding:20px;color:#fff;font-family:Cutive Mono,Courier New,monospace}.desktop-dashboard.left{left:0;align-items:flex-start}.desktop-dashboard.right{right:0;align-items:flex-end}.dashboard-panel{background-color:#0a141e80;border:1px solid #00ffff;border-radius:10px;padding:15px;margin-bottom:20px;width:100%;box-shadow:0 0 15px #0ff3}.dashboard-panel h2{margin-top:0;margin-bottom:10px;font-size:1.5rem;color:#0ff;text-shadow:0 0 5px #00ffff}.dashboard-panel p{margin:5px 0;font-size:1.2rem}.dashboard-panel div[style*="width: 100%"]{height:150px!important}