*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;font-family:Segoe UI,system-ui,sans-serif}#hub-canvas{display:block;width:100%;height:100%;touch-action:none}#virtual-controls{position:fixed;bottom:0;left:0;right:0;height:200px;pointer-events:none;z-index:100}#virtual-controls.active{pointer-events:auto}.dpad-container{position:absolute;left:20px;bottom:20px;width:140px;height:140px;pointer-events:auto}.dpad-btn{position:absolute;width:50px;height:50px;background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;transition:background .1s,transform .1s}.dpad-btn:active,.dpad-btn.pressed{background:#ffffff59;transform:scale(.95)}.dpad-up{top:0;left:50%;transform:translate(-50%)}.dpad-down{bottom:0;left:50%;transform:translate(-50%)}.dpad-left{left:0;top:50%;transform:translateY(-50%)}.dpad-right{right:0;top:50%;transform:translateY(-50%)}.dpad-up:active,.dpad-up.pressed,.dpad-down:active,.dpad-down.pressed{transform:translate(-50%) scale(.95)}.dpad-left:active,.dpad-left.pressed,.dpad-right:active,.dpad-right.pressed{transform:translateY(-50%) scale(.95)}.action-buttons{position:absolute;right:20px;bottom:20px;width:120px;height:120px;pointer-events:auto}.action-btn{position:absolute;width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;border:3px solid rgba(255,255,255,.4);transition:transform .1s,filter .1s}.action-btn:active,.action-btn.pressed{transform:scale(.9);filter:brightness(1.3)}.btn-a{background:#4caf50b3;right:0;top:50%;transform:translateY(-50%)}.btn-b{background:#f44336b3;bottom:0;left:50%;transform:translate(-50%)}.btn-a:active,.btn-a.pressed{transform:translateY(-50%) scale(.9)}.btn-b:active,.btn-b.pressed{transform:translate(-50%) scale(.9)}.start-btn{position:absolute;left:50%;bottom:60px;transform:translate(-50%);padding:8px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);border-radius:12px;font-size:10px;font-weight:700;color:#ffffff80;letter-spacing:2px;transition:background .1s,transform .1s;pointer-events:auto}.start-btn:active,.start-btn.pressed{background:#ffffff40;color:#fffc;transform:translate(-50%) scale(.95)}@media (hover: hover) and (pointer: fine){#virtual-controls{display:none}}#loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a2e;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s}#loading.hidden{opacity:0;pointer-events:none}.loader{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#4fc3f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}