:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{background:#000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}.overlay{pointer-events:none;--hud:#3f6;--hud-border:#33ff6659;--hud-bg:#00140859;--hud-hover:#33ff6626;color:var(--hud);text-transform:uppercase;letter-spacing:.08em;-webkit-user-select:none;user-select:none;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;position:absolute;inset:0}.overlay--spectator{--hud:#9aa3a8;--hud-border:#9aa3a859;--hud-bg:#0e111366;--hud-hover:#9aa3a82e}.overlay .interactive{pointer-events:auto}.panel{border:1px solid var(--hud-border);background:var(--hud-bg);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);padding:8px 12px;position:absolute}.panel--tl{top:16px;left:16px}.panel--tr{text-align:right;top:16px;right:16px}.panel--bl{bottom:16px;left:16px}.label{opacity:.6;font-size:10px}.value{margin-top:2px;font-size:15px}.value--warn{color:#fa3}.sub{opacity:.55;margin-top:2px;font-size:10px}.touch-controls{bottom:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute}.touch-row{align-items:stretch;gap:8px;display:flex}.touch-row--turn{justify-content:flex-end;align-self:stretch}.touch-stack{flex-direction:column;align-items:stretch;gap:6px;display:flex}.touch-btn{min-width:56px;min-height:56px;color:var(--hud);background:var(--hud-bg);border:1px solid var(--hud-border);font:inherit;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 10px;font-size:18px;line-height:1;display:flex}.touch-btn:hover{background:var(--hud-hover)}.touch-btn:active,.touch-btn--active{background:var(--hud-hover);box-shadow:inset 0 0 12px var(--hud-border)}.touch-btn--turn{min-width:76px;font-size:20px}.touch-btn--weapon{align-self:stretch;min-width:92px}.touch-btn--weapon .touch-weapon-name{color:#6ff;font-size:14px}.touch-btn--torpedo .touch-weapon-name{color:#fa3}.touch-readout{border:1px solid var(--hud-border);background:var(--hud-bg);flex-direction:column;align-items:center;gap:2px;padding:4px 8px;display:flex}.touch-readout-value{font-size:14px}.result-banner{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.result-title{letter-spacing:.12em;text-shadow:0 0 18px;font-size:42px}.result--win{color:#3f6}.result--loss{color:#f44}.result--draw{color:#fa3}.result-sub{opacity:.6;margin-top:10px;font-size:12px}.game-root{background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}.playfield{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}