html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.34),transparent 22%),linear-gradient(180deg,#91d8f2,#72c7dd);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;touch-action:none}canvas{display:block}.hud{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;color:#17202a;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.65);z-index:10}.panel{min-width:118px;padding:10px 12px;border:2px solid rgba(23,32,42,.18);border-radius:8px;background:#ffffffb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px #17202a14}.hud-actions{display:flex;align-items:flex-start;gap:10px;pointer-events:auto}.fullscreen-button{position:relative;display:grid;width:46px;height:46px;place-items:center;border:2px solid rgba(23,32,42,.18);border-radius:8px;background:#ffffffb8;box-shadow:0 6px 18px #17202a14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;touch-action:manipulation}.fullscreen-button span,.fullscreen-button:before,.fullscreen-button:after{position:absolute;width:18px;height:18px;border-color:#17202a;border-style:solid;content:""}.fullscreen-button span{border-width:3px 0 0 3px;transform:translate(-4px,-4px)}.fullscreen-button:before{border-width:3px 3px 0 0;transform:translate(4px,-4px)}.fullscreen-button:after{border-width:0 3px 3px 0;transform:translate(4px,4px)}.fullscreen-button.active span{transform:translate(4px,4px) rotate(180deg)}.fullscreen-button.active:before{transform:translate(-4px,4px) rotate(180deg)}.fullscreen-button.active:after{transform:translate(-4px,-4px) rotate(180deg)}.fullscreen-button:active{transform:translateY(2px)}.title{margin-bottom:6px;font-weight:800;font-size:14px;letter-spacing:0}.line{font-size:13px;font-weight:700;line-height:1.45}.tilt-meter{min-width:0;width:86px;height:86px;padding:8px}.status{position:fixed;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 142px);transform:translate(-50%);width:min(420px,calc(100vw - 28px));padding:10px 14px;border:2px solid rgba(23,32,42,.2);border-radius:8px;background:#ffffffd1;color:#17202a;font-weight:800;text-align:center;pointer-events:none;z-index:10}.event-banner{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 104px);left:50%;min-width:142px;padding:9px 14px;border:3px solid rgba(23,32,42,.28);border-radius:8px;background:#ffcf42;color:#17202a;font-size:15px;font-weight:950;text-align:center;letter-spacing:0;transform:translate(-50%);z-index:11;pointer-events:none;box-shadow:0 5px #17202a29}.event-banner.hidden{display:none}.tilt-ring{position:relative;width:66px;height:66px;border:3px solid rgba(23,32,42,.42);border-radius:50%;background:#ffffff6b;box-shadow:inset 0 0 0 12px #ffffff2e}.tilt-cross{position:absolute;background:#17202a38}.tilt-cross.horizontal{top:50%;left:9px;right:9px;height:2px;transform:translateY(-50%)}.tilt-cross.vertical{top:9px;bottom:9px;left:50%;width:2px;transform:translate(-50%)}.tilt-dot{position:absolute;top:50%;left:50%;width:18px;height:18px;border:2px solid rgba(23,32,42,.55);border-radius:50%;background:#52c96b;transition:transform 90ms linear,background .12s ease}.tilt-dot.warning{background:#ffcf42}.tilt-dot.danger{background:#f24f5f}.touch-controls{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));display:grid;width:min(460px,calc(100vw - 24px));grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;transform:translate(-50%);z-index:12;user-select:none;-webkit-user-select:none}.touch-controls.disabled{pointer-events:none;opacity:.42}.squad-button{display:flex;min-height:62px;align-items:center;justify-content:space-between;border:3px solid rgba(23,32,42,.24);border-radius:8px;padding:10px 14px;color:#17202a;font:inherit;font-weight:900;letter-spacing:0;box-shadow:0 7px #17202a33;touch-action:none}.squad-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.squad-button small{display:grid;width:28px;height:28px;place-items:center;border-radius:6px;background:#ffffff94;font-size:13px}.squad-button.active,.squad-button:active{transform:translateY(5px);box-shadow:0 2px #17202a42}.squad-button.red{background:#f24f5f}.squad-button.blue{background:#3c8df5}.squad-button.yellow{background:#ffcf42}.squad-button.green{background:#52c96b}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.34),transparent 28%),#8ed9f76b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20}.screen.hidden{display:none}.screen-content{width:min(420px,calc(100vw - 32px));padding:22px;border:3px solid rgba(23,32,42,.2);border-radius:8px;background:#ffffffd6;color:#17202a;text-align:center;box-shadow:0 18px 38px #17202a2e}.screen h1{margin:0 0 10px;font-size:clamp(30px,8vw,48px);line-height:.95;letter-spacing:0}.screen p{margin:0 auto 18px;max-width:330px;font-size:16px;font-weight:750;line-height:1.35}.primary-action{min-width:160px;min-height:54px;border:3px solid rgba(23,32,42,.24);border-radius:8px;background:#17202a;color:#fff;font:inherit;font-size:18px;font-weight:900;letter-spacing:0}.primary-action:active{transform:translateY(2px)}@media (max-width: 520px){.hud{top:max(10px,env(safe-area-inset-top));left:10px;right:10px}.panel{padding:8px 10px}.hud-actions{gap:8px}.fullscreen-button{width:40px;height:40px}.fullscreen-button span,.fullscreen-button:before,.fullscreen-button:after{width:15px;height:15px}.title,.line{font-size:12px}.tilt-meter{width:72px;height:72px}.tilt-ring{width:52px;height:52px}.tilt-dot{width:16px;height:16px}.status{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 146px);font-size:13px}.event-banner{top:calc(max(10px,env(safe-area-inset-top)) + 88px);font-size:13px}.squad-button{min-height:64px;padding:10px 12px}}