body.ninja-online-mode{overflow:hidden;overscroll-behavior:none}body.ninja-online-mode #app{padding:0;max-width:none;margin:0}
.online-ninja{position:fixed;z-index:10;left:0;top:0;width:100vw;width:100dvw;height:100vh;height:100dvh;transform:none;transform-origin:0 0;display:grid;grid-template-rows:52px minmax(0,1fr) 28px;overflow:hidden;touch-action:none;background:#18241b;border:0;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px))}
.online-ninja.level-2{background:#2c1d3e}.online-ninja.level-3{background:#392117}
.online-ninja .hud{position:static;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;min-height:0;padding:4px 8px;background:#0007}.online-ninja .hud span{white-space:nowrap}.online-ninja .hud b{font-size:25px}.online-ninja .hud strong{font-size:16px;white-space:nowrap}.online-ninja .hud button{padding:5px 10px;min-height:40px;white-space:nowrap}
.online-ninja .arena{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;border:0;background:radial-gradient(ellipse at center,transparent,#0005);overflow:hidden}.online-ninja canvas{display:block;max-width:100%;max-height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.online-ninja .overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#080c08df;padding:16px;z-index:3}.online-ninja .overlay b{font-size:30px;color:#b7ff1a}.online-ninja .overlay p{margin:8px 0 0}
.online-ninja .stage-footer{padding:3px 8px;background:#0007;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;white-space:nowrap;min-width:0;min-height:0}.online-ninja .status{position:absolute;left:8px;right:8px;top:6px;bottom:auto;min-height:24px;text-align:center;color:#b7ff1a;margin:0;pointer-events:none;z-index:1;font-size:13px;text-shadow:1px 1px 3px #000}.online-ninja [hidden]{display:none!important}
@media(orientation:portrait){.online-ninja{width:100vh;width:100dvh;height:100vw;height:100dvw;transform:translateX(100vw) rotate(90deg);transform:translateX(100dvw) rotate(90deg);padding:env(safe-area-inset-right,0px) max(8px,env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px) max(8px,env(safe-area-inset-top,0px))}}
@media(max-height:420px) and (orientation:landscape),(max-width:420px) and (orientation:portrait){.online-ninja{grid-template-rows:44px minmax(0,1fr) 24px}.online-ninja .hud{gap:7px;font-size:12px}.online-ninja .hud b{font-size:21px}.online-ninja .hud strong{font-size:15px}.online-ninja .hud button{font-size:12px;padding:4px 8px;min-height:34px}.online-ninja .stage-footer{font-size:10px}.online-ninja .overlay b{font-size:24px}.online-ninja .overlay p{font-size:13px}}
.online-ninja .curtain{animation:ninja-reveal 2s forwards}@keyframes ninja-reveal{0%,75%{clip-path:inset(0)}100%{clip-path:inset(0 50%)}}@media(prefers-reduced-motion:reduce){.online-ninja .curtain{animation:none}}