:root{color-scheme:dark;font-family:"Microsoft YaHei",system-ui,sans-serif;background:#001717;color:#ddd}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:#e7e7c9;background:#383838;border:2px outset #777;padding:5px 11px;cursor:pointer;border-radius:0}button:hover{color:#fff;background:#505050}button:active{border-style:inset}button:disabled{opacity:.5;cursor:wait}button:focus-visible{outline:2px solid #ffff57;outline-offset:3px}header{height:42px;background:#003333;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:2px solid #008080;font:12px monospace;gap:12px}header b{letter-spacing:1px;color:#ddd}header b span{font:11px system-ui;margin-left:12px;color:#a2baba}nav{display:flex;gap:5px}nav button{font-size:11px;padding:4px 8px}main{height:calc(100dvh - 68px);display:flex;gap:8px;padding:10px 8px;max-width:2560px;margin:auto}main.vertical{flex-direction:column}body.solo .viewport:nth-child(2),body.solo #layoutBtn{display:none}.viewport{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.player-label{font:10px monospace;letter-spacing:1px;color:#9cafaf;height:20px;flex-shrink:0}.screen{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(100% - 20px);background:#004040;box-shadow:0 0 0 1px #000;overflow:hidden}.screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.message{position:absolute;bottom:22%;left:4%;right:4%;text-align:center;font-size:12px;color:#fff8b8;text-shadow:2px 2px #000;pointer-events:none}.message.low{bottom:2%}.down{display:none;position:absolute;inset:0;align-content:center;text-align:center;color:#fff;background:#24000070;font-size:24px;text-shadow:2px 2px #000}.down small{font-size:13px}footer{height:26px;border-top:1px solid #075353;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#93a6a6;font:10px monospace;gap:10px}.overlay{position:fixed;inset:42px 0 26px;z-index:5;display:flex;align-items:center;justify-content:center;background:#001a1aef;padding:20px;overflow:auto}.hidden{display:none}.menu{display:grid;grid-template-columns:minmax(320px,1.25fr) minmax(280px,1fr);width:min(1030px,100%);border:3px ridge #888;background:#830000;box-shadow:8px 8px #000}.title-screen{align-self:center;background:#000;position:relative}.title-screen canvas{display:block;width:100%;aspect-ratio:4/3;image-rendering:pixelated}.edition{font:bold 12px monospace;letter-spacing:2px;text-align:center;color:#ffff55;background:#000;padding:9px}.menu-info{padding:24px;color:#dedeb9;font-size:13px;line-height:1.7}.menu-info h1{font-size:30px;line-height:1.3;margin:6px 0;color:#fff;text-shadow:3px 3px #330000}.menu-kicker,.subtitle{font:12px monospace;color:#ffff55;letter-spacing:2px;margin:0}.subtitle{font-size:11px;color:#c6b0a0}.menu-rule{height:2px;background:#bd5858;border-bottom:1px solid #390000;margin:15px 0}.primary{background:#a8a8a8;color:#000;border-color:#ddd;font-weight:bold;min-width:180px;margin:4px 0;padding:9px 18px}.primary:hover{background:#ddd;color:#000}.menu-info>button{margin:4px 4px 4px 0;max-width:100%}#onlineBtn:enabled{cursor:pointer}.controls{font-size:11px;line-height:1.8}.controls b{color:#ffff55}.controls p{margin:12px 0}.small{font-size:10px;color:#cbb4a8;line-height:1.6}a{font-size:10px;color:#ffff80}.dialog{border:3px ridge #aaa;background:#830000;box-shadow:8px 8px #000;text-align:center;padding:32px;max-width:560px;line-height:1.8}.dialog h2{font-size:28px;color:white}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.actions button{margin:0;min-width:0}.dialog p{font-size:13px}#toast{position:fixed;top:48px;left:50%;transform:translateX(-50%);z-index:7;background:#000e;color:#ffff80;padding:8px 15px;pointer-events:none;opacity:0;font-size:12px;border:1px solid #aaa;max-width:90%;text-align:center}#loadError{color:#ffde70}body.immersive header,body.immersive footer{display:none}body.immersive main{height:100dvh}body.immersive .overlay{inset:0}@media(max-width:760px){.menu-info>button{display:block;width:100%;margin:6px 0}header b span{display:none}header{padding:0 7px}header b{font-size:10px;letter-spacing:0}nav button{font-size:10px;padding:4px}.menu{grid-template-columns:1fr;max-width:480px}.title-screen{display:none}.menu-info{padding:22px}footer span:first-child{display:none}.message{font-size:10px}.player-label{font-size:9px}.overlay{padding:12px;align-items:flex-start}.dialog{padding:22px;margin:auto}.menu-info h1{font-size:26px}}
#touchControls{display:none;position:fixed;inset:var(--touch-top,42px) 0 var(--touch-bottom,26px);z-index:3;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#touchControls *{touch-action:none;user-select:none;-webkit-user-select:none}body.touch #touchControls.active{display:block}#touchMove,#touchLook{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto}#touchMove{left:0}#touchLook{right:0}#touchStick{position:fixed;left:calc(env(safe-area-inset-left) + 84px);top:calc(100dvh - var(--touch-bottom,26px) - 84px);width:112px;height:112px;border:2px solid #ffffff50;border-radius:50%;background:#00171740;transform:translate(-50%,-50%);pointer-events:none}#touchKnob{position:absolute;left:34px;top:34px;width:40px;height:40px;border:2px solid #ffffff80;border-radius:50%;background:#ffffff38;pointer-events:none}#touchControls button{position:absolute;pointer-events:auto;min-width:64px;min-height:64px;border:2px solid #ffffff66;border-radius:50%;background:#123b3bb3;color:#fff;text-shadow:1px 1px #000;font-size:15px;padding:8px;right:calc(env(safe-area-inset-right) + 20px);bottom:20px}#touchControls #touchFire{width:80px;height:80px;background:#832020ad}#touchControls #touchUse{right:calc(env(safe-area-inset-right) + 112px);bottom:24px}#touchControls #touchWeapon{bottom:112px}#portraitHint{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#001717b3;color:#ffffb0;padding:8px 14px;font-size:13px;pointer-events:none}
body.touch{--touch-top:calc(44px + env(safe-area-inset-top));--touch-bottom:calc(18px + env(safe-area-inset-bottom));overscroll-behavior:none}body.touch header{height:var(--touch-top);padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left));gap:4px}body.touch header b{font-size:10px;letter-spacing:0}body.touch header b span{display:none}body.touch nav{gap:2px}body.touch nav button{min-height:40px;padding:4px 6px}body.touch footer{height:var(--touch-bottom);padding:0 max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));font-size:9px}body.touch footer span:not(#status){display:none}body.touch main{height:calc(100dvh - var(--touch-top) - var(--touch-bottom));padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);gap:2px}body.touch .player-label{display:none}body.touch .screen{max-height:100%}body.touch .overlay{inset:var(--touch-top) 0 var(--touch-bottom);padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));align-items:flex-start;overscroll-behavior:contain}body.touch .menu,body.touch .dialog{margin:auto}body.touch .menu-info{padding:16px}body.touch .overlay button{min-height:44px}body.touch.immersive{--touch-bottom:env(safe-area-inset-bottom)}body.touch.immersive header{display:flex}#nameOverlay{z-index:6}#nameOverlay h2{font-size:18px}#nameInput{display:block;width:100%;min-height:48px;margin:16px 0;padding:8px;border:2px inset #aaa;background:#fff;color:#111;font:16px system-ui;touch-action:manipulation}
@media(orientation:portrait){body.touch #touchControls.active #portraitHint{display:block}}@media(max-width:380px){body.touch header b{display:none}body.touch nav{width:100%;justify-content:space-between}}

.lobby-dialog{width:min(620px,100%);max-width:620px;text-align:left;margin:auto}.lobby-dialog h2{margin:8px 0 16px}.lobby-dialog h3{margin:16px 0 8px;color:#ffff80;font-size:17px}.lobby-dialog label{display:block;font-size:13px}.lobby-dialog input{display:block;width:100%;min-height:44px;margin:4px 0 12px;padding:8px;border:2px inset #aaa;background:#eee;color:#111;font:16px system-ui;touch-action:manipulation}.lobby-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}#roomList{display:grid;gap:8px;max-height:240px;overflow:auto;margin:12px 0}#roomList button{text-align:left;overflow-wrap:anywhere;min-height:44px;padding:10px}#roomList button:disabled,#roomStartBtn{cursor:default}#roomTitle{overflow-wrap:anywhere}#lobbyStatus{min-height:24px;color:#ffff80}.lobby-dialog .actions{justify-content:flex-start}.lobby-dialog button{touch-action:manipulation}body.touch .lobby-dialog button{min-height:48px}@media(max-width:480px){.lobby-fields{grid-template-columns:1fr;gap:0}.lobby-dialog{padding:18px}.lobby-dialog .actions button{width:100%}}

body.online-host .viewport:nth-child(2),body.online-guest .viewport:nth-child(1),body.online #layoutBtn{display:none}body.online #arena{flex-direction:row}#roomStartBtn:enabled{cursor:pointer}