:root{color-scheme:dark;font-family:Arial,sans-serif;background:#060b11}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html,body,#app,#canvas-root{width:100%;height:100%;margin:0;overflow:hidden}body{touch-action:none}#app{position:relative}#canvas-root canvas{display:block}#hud{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));z-index:10;display:flex;align-items:center;gap:12px}.hud-block{min-width:92px;padding:10px 12px;border:1px solid rgba(170,224,255,.18);border-radius:16px;background:#040c1285}.hud-label{display:block;margin-bottom:4px;font-size:10px;letter-spacing:.18em;color:#aae0ff8c}#status-value,#players-value{display:block;font-size:14px;color:#eef9ff}#leave-button{margin-left:auto;padding:12px 18px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:#08141cc7;color:#f4fbff;font-size:14px}#joystick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(28px,calc(env(safe-area-inset-bottom) + 24px));z-index:10}#joystick-base{position:relative;width:140px;height:140px;border:1px solid rgba(177,230,255,.14);border-radius:999px;background:radial-gradient(circle at center,#59bcff1f,#071015d9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#joystick-thumb{position:absolute;top:50%;left:50%;width:56px;height:56px;border-radius:999px;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#8dddff,#3196d0 72%,#0f3347);box-shadow:0 6px 24px #10598073}