:root{--primary:#00f6ff;--secondary:#ff3fb4;--bg:#03040b}body,html{background-color:var(--bg);touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;margin:0;padding:0;font-family:Inter,sans-serif;overflow:hidden}#app{width:100vw;height:100dvh}canvas{display:block}#orientation-hint{top:max(12px, env(safe-area-inset-top));z-index:30;color:#dffcff;letter-spacing:.7px;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#030510c7;border:1px solid #00f6ff59;border-radius:999px;width:max-content;max-width:calc(100vw - 32px);padding:9px 14px;font-size:11px;font-weight:800;display:none;position:fixed;left:50%;transform:translate(-50%)}#boot-screen{z-index:100;color:#dffcff;text-align:center;pointer-events:none;background:radial-gradient(circle at 50% 45%,#15102d 0%,#03040b 58%);place-content:center;gap:18px;animation:.7s 1.9s forwards boot-away;display:grid;position:fixed;inset:0}.boot-mark{letter-spacing:-10px;color:var(--primary);text-shadow:0 0 38px #00f6ffb3, 32px 0 0 var(--secondary);font-size:clamp(70px,10vw,120px);font-weight:900}.boot-copy{letter-spacing:4px;color:#7c8aa8;font-size:11px;font-weight:700}.boot-line{background:#1c2032;width:min(320px,68vw);height:3px;overflow:hidden}.boot-line span{background:linear-gradient(90deg, var(--primary), var(--secondary));transform-origin:0;width:100%;height:100%;animation:1.45s cubic-bezier(.6,0,.2,1) forwards boot-load;display:block}@keyframes boot-load{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes boot-away{to{opacity:0;visibility:hidden}}#mobile-controls{bottom:max(24px, env(safe-area-inset-bottom));box-sizing:border-box;pointer-events:none;z-index:10;justify-content:space-between;align-items:flex-end;width:100%;padding:0 clamp(20px,6vw,52px);display:flex;position:absolute;left:0}.joystick-container{pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0407149e;border:1px solid #00f6ff6b;border-radius:50%;width:124px;height:124px;position:relative;box-shadow:inset 0 0 35px #00f6ff14,0 0 24px #00f6ff14}.joystick-knob{background:#00f6ffd1;border-radius:50%;width:60px;height:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px #00f6ffa6}.action-cluster{pointer-events:none;align-items:flex-end;gap:14px;display:flex}.action-btn{color:#fff;letter-spacing:2px;pointer-events:auto;text-shadow:0 0 7px #ff3fb4e6;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#ff3fb433;border:1px solid #ff3fb4b8;border-radius:50%;width:94px;height:94px;font-size:16px;font-weight:700;transition:background .1s;box-shadow:inset 0 0 30px #ff3fb41a,0 0 20px #ff3fb429}.action-btn:active{background:#ff3fb48f;transform:scale(.94);box-shadow:0 0 28px #ff3fb4a6}.dash-btn{pointer-events:auto;color:#fff;letter-spacing:1px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:none;background:#00f6ff1f;border:1px solid #00f6ffa6;border-radius:50%;width:68px;height:68px;font:800 11px Inter,sans-serif;box-shadow:inset 0 0 20px #00f6ff14,0 0 18px #00f6ff1a}.dash-btn:active{background:#00f6ff66;transform:scale(.92)}@media (width<=520px){.joystick-container{width:108px;height:108px}.joystick-knob{width:52px;height:52px}.action-btn{width:82px;height:82px}.dash-btn{width:58px;height:58px}.action-cluster{gap:9px}}@media (pointer:coarse) and (orientation:portrait){#orientation-hint{display:block}}@media (pointer:coarse) and (orientation:landscape) and (height<=600px){#mobile-controls{bottom:max(10px, env(safe-area-inset-bottom));padding-inline:max(16px, env(safe-area-inset-left))}.joystick-container{width:94px;height:94px}.joystick-knob{width:44px;height:44px}.action-btn{width:76px;height:76px;font-size:13px}.dash-btn{width:54px;height:54px;font-size:9px}}@media (pointer:fine){#mobile-controls{display:none}}