.online-status{position:absolute;z-index:18;top:70px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;max-width:calc(100% - 32px);padding:7px 10px 7px 13px;background:#071219ed;border:1px solid #4b797a99;border-radius:24px;box-shadow:0 4px 18px #0008;font-size:11px;white-space:nowrap}.online-status[hidden],.demo-controls[hidden]{display:none!important}.online-status strong{font-weight:600;color:#b6ded4}.online-status [data-online-detail]{color:#b5bec8;overflow:hidden;text-overflow:ellipsis}.online-status button{border:0;background:#213b42;border-radius:18px;padding:7px 11px;min-height:32px;color:#e1f5ee;font-size:11px}.online-signal{width:6px;height:6px;flex:none;border-radius:50%;background:#6be3b5;box-shadow:0 0 9px #6be3b550}.online-status[data-connection=reconnecting]{border-color:#ab8b4d}.online-status[data-connection=reconnecting] .online-signal{background:#ecc678}
#app[data-online=true] #pause,#app[data-online=true] #board-pause,#app[data-online=true] #immersive-pause,#app[data-online=true] #speed{opacity:.55;cursor:default}#app[data-online=true] .battle-top{padding-top:54px}#app[data-online=true] #planning-banner{display:none!important}
.demo-controls{position:absolute;z-index:25;left:50%;bottom:max(23px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(650px,calc(100% - 40px));text-align:center;pointer-events:none;color:#f1ebdc;text-shadow:0 2px 9px #000}.demo-controls header{display:flex;flex-direction:column;align-items:center;gap:6px}.demo-kicker{font:9px/1.3 Georgia,serif;letter-spacing:3px;color:#d9c69d}.demo-controls [data-demo-title]{font-family:var(--font-serif,Georgia,serif);font-weight:500;font-size:26px;letter-spacing:2px}.demo-controls [data-demo-chapter]{font-size:11px;color:#c4c5c9}.demo-caption{background:linear-gradient(90deg,transparent,#07101ae6 14%,#07101ae6 86%,transparent);padding:12px 24px;line-height:1.7;font-size:13px;min-height:44px;margin:8px 0 0;opacity:0;transition:opacity .7s}.demo-controls.has-caption .demo-caption{opacity:1}.demo-toolbar{display:flex;justify-content:center;gap:5px;padding:6px;margin-top:5px;pointer-events:auto;flex-wrap:wrap}.demo-toolbar button{min-height:40px;min-width:40px;padding:7px 13px;background:#08121dcc;border:1px solid #8192a944;border-radius:22px;color:#c9d0da;font-size:11px;backdrop-filter:blur(10px)}.demo-toolbar button:hover,.demo-toolbar button:focus-visible{border-color:#d8bf88;color:#fff}.demo-toolbar [data-demo=exit]{color:#e0c48d}
#app[data-demo=true] .command-wrap,#app[data-demo=true] .battle-top,#app[data-demo=true] #immersive-controls,#app[data-demo=true] #target-labels,#app[data-demo=true] #intel-drawer,#app[data-demo=true] #render-stats,#app[data-demo=true] #enemy-bearing{display:none!important}#app[data-demo=true] .battle-workspace{inset:0!important;pointer-events:none}#app[data-demo=true] #battle-hud{pointer-events:none}#app[data-demo=true] .demo-toolbar{pointer-events:auto}
@media(max-width:760px){.online-status{top:59px;width:calc(100% - 24px);gap:6px;padding:5px 6px 5px 10px;font-size:10px}.online-status strong{font-size:10px}.online-status button{font-size:10px;min-height:44px;flex:none}.online-status [data-online-detail]{flex:1}.demo-controls{width:calc(100% - 20px);bottom:max(12px,env(safe-area-inset-bottom))}.demo-controls [data-demo-title]{font-size:22px}.demo-caption{font-size:12px;padding:9px 13px;line-height:1.6}.demo-toolbar{gap:4px;padding:0}.demo-toolbar button{min-height:44px;padding:7px 10px}.demo-kicker{font-size:8px;letter-spacing:2px}}
@media(max-height:500px) and (orientation:landscape){.online-status{top:48px;max-width:65%;left:auto;right:12px;transform:none;padding-block:1px}.online-status button{min-height:44px}.demo-controls{bottom:9px;width:min(680px,calc(100% - 30px))}.demo-controls header{flex-direction:row;justify-content:center;gap:12px}.demo-kicker{display:none}.demo-controls [data-demo-title]{font-size:20px}.demo-caption{min-height:0;padding:5px 10px;margin:4px 0;font-size:11px}.demo-toolbar button{min-height:44px;padding:5px 12px}}
@media(prefers-reduced-motion:reduce){.demo-caption{transition:none}}

#app[data-drawer]:not([data-drawer=none]) #online-status{display:none!important}
#app[data-immersive=true] .online-status{top:8px}

#app[data-demo=true] #flagship-hit-feedback{display:none!important}