:root{color-scheme:dark;font-family:'Courier New',monospace;background:#101816;color:#e6efdf}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 35%,#22332b 0,transparent 65%),#101816;-webkit-user-select:none;user-select:none;overscroll-behavior:none}main{width:min(100%,520px);margin:auto;padding:max(22px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;padding-bottom:30px}.brand{font-weight:900;font-size:18px;letter-spacing:-1px;display:flex;align-items:center;gap:5px}.brand>span:last-child{color:#a5b19f}.mark{font-size:27px;color:#c5f779;margin-right:5px}.badge{font-size:12px;letter-spacing:1px;border:1px solid #435044;padding:7px 8px;color:#bac8b4}.readout{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.eyebrow{font-size:12px;letter-spacing:2px;color:#92a28e}h1{font-size:25px;letter-spacing:-1px;margin:7px 0 0}.motion{font-size:12px;color:#c5f779;display:flex;gap:7px;align-items:center;margin-bottom:4px}.motion>span{width:6px;height:6px;background:#c5f779}.arena{position:relative;border:3px solid #526449;padding:7px;background:#1c2a22;box-shadow:0 5px 0 #080e0b,0 0 0 1px #080e0b}canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;touch-action:none;background:#17251e}.arena-label{position:absolute;bottom:19px;left:21px;font-size:12px;letter-spacing:2px;color:#687e56;pointer-events:none}.corners{position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(#c5f779,#c5f779) top left/13px 3px no-repeat,linear-gradient(#c5f779,#c5f779) top left/3px 13px no-repeat,linear-gradient(#c5f779,#c5f779) bottom right/13px 3px no-repeat,linear-gradient(#c5f779,#c5f779) bottom right/3px 13px no-repeat}.instructions{display:flex;justify-content:space-between;margin:24px 0 12px;font-size:12px;letter-spacing:1px;color:#9aa992}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}button{touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border:1px solid #506342;border-bottom:5px solid #34482a;background:#283925;color:#d8ebc4;min-height:98px;display:flex;align-items:center;justify-content:center;gap:12px;font:700 14px 'Courier New',monospace;position:relative;border-radius:3px}button.active,button:active{background:#c5f779;color:#1b2815;border-color:#91ba52;transform:translateY(2px)}button:focus-visible{outline:3px solid #fff;outline-offset:4px}.arrow{font:40px monospace}kbd{position:absolute;bottom:7px;right:10px;font-size:12px;opacity:.45}footer{font-size:12px;color:#91a08a;margin-top:22px;display:flex;justify-content:space-between;gap:10px}.squares{color:#b9dd85;white-space:nowrap}@media(max-width:370px){main{padding-left:14px;padding-right:14px}.motion{font-size:10px}h1{font-size:22px}.brand{font-size:16px}button{min-height:84px}}@media(max-height:720px){header{padding-bottom:15px}.instructions{margin-top:17px}main{max-width:450px;padding-top:14px}button{min-height:76px}footer{margin-top:15px}}@media(orientation:landscape) and (max-height:550px){main{max-width:900px;display:grid;grid-template-columns:minmax(200px,calc(100svh - 40px)) 1fr;gap:12px 24px;padding:16px}header{grid-column:2;padding:0}.readout{grid-column:2;margin:0}.arena{grid-column:1;grid-row:1/7}.instructions,.controls,footer{grid-column:2;margin:0}.controls{align-self:start}}

.health{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.health label{display:flex;justify-content:space-between;font-size:14px;font-weight:bold;color:#c5f779;margin-bottom:7px}.health label span{font-size:12px;font-weight:normal}.health .enemy label{color:#ffac70}progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:12px;border:1px solid #506342;background:#0c140f;color:#c5f779}progress::-webkit-progress-bar{background:#0c140f}progress::-webkit-progress-value{background:#c5f779}progress::-moz-progress-bar{background:#c5f779}.enemy progress{color:#ffac70}.enemy progress::-webkit-progress-value{background:#ffac70}.enemy progress::-moz-progress-bar{background:#ffac70}.arena-label{font-size:10px;letter-spacing:.6px;color:#a4b690}.result{position:absolute;inset:7px;background:#0b130edb;display:flex;align-items:center;justify-content:center;text-align:center}.result[hidden]{display:none}.result h2{font-size:28px;color:#e5ffa4}.result button{padding:15px 35px;min-height:60px;width:100%}header{padding-bottom:20px}footer{line-height:1.5}.motion{font-size:12px}@media(orientation:landscape) and (max-height:550px){.health{grid-column:2;margin:0}.arena{grid-row:1/8}}@media(max-height:740px) and (orientation:portrait){main{max-width:410px}header{padding-bottom:10px}.readout,.health{margin-bottom:12px}h1{font-size:22px}.instructions{margin-top:14px}button{min-height:68px}footer{margin-top:12px}}
.hazard-hud{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#e4bc74;font-size:12px;letter-spacing:.4px}#clock{color:#b9c9ae;font-variant-numeric:tabular-nums}.instructions{margin-top:15px}footer{font-size:12px}.squares{display:none}@media(orientation:landscape) and (max-height:550px){.hazard-hud{grid-column:2;margin:0}.arena{grid-row:1/9}}

/* Menu, lobby and PWA controls. */
[hidden]{display:none!important}.panel{border:1px solid #435044;background:#18271f;padding:20px;margin-bottom:18px}.panel h1{font-size:29px}.panel p{line-height:1.65;font-size:13px;color:#b5c5aa}.panel>button{width:100%;min-height:65px;margin-top:12px;justify-content:space-between;padding:15px}.panel label{display:block;font-size:12px;letter-spacing:1px;color:#b5c5aa;margin:20px 0 9px}.panel output{display:block;font-size:42px;font-weight:bold;letter-spacing:9px;color:#e5ffa4;user-select:text}.panel input{box-sizing:border-box;width:100%;padding:17px 12px;font:24px 'Courier New',monospace;letter-spacing:5px;background:#0c1710;border:1px solid #526449;color:#e5ffa4;border-radius:0;user-select:text}.panel form button{width:100%;min-height:62px;margin-top:12px}.small{font-size:11px;min-height:42px!important;padding:9px 12px;letter-spacing:.4px}.secondary{background:transparent;border-color:#435044;color:#b5c5aa}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.actions button{flex:1}.muted,#offline-status{font-size:11px!important;color:#92a28e!important}button:disabled{opacity:.45;cursor:default;transform:none}.error{color:#ffac70!important;font-size:12px;line-height:1.6}.result{padding:22px;z-index:2}.result>div{width:100%}.result h2{margin:12px 0}.result p{font-size:12px;line-height:1.6;color:#bccdb0}.result button{margin-top:16px}.install strong{color:#e5ffa4}.install p{margin:8px 0}#preview{max-width:210px;margin:22px auto 12px;border:2px solid #526449}#play footer{align-items:center}#game-error{min-height:16px}dialog{max-width:360px;width:90%;background:#1c2a22;border:2px solid #91ba52;color:#e5ffa4;padding:24px;font:14px/1.7 'Courier New',monospace}dialog::backdrop{background:#07100cdc}dialog button{width:100%}input:focus-visible{outline:2px solid #c5f779;outline-offset:3px}
@media(orientation:landscape) and (max-height:550px){main{display:block;max-width:900px}header{margin-bottom:15px}#play{display:grid;grid-template-columns:minmax(200px,calc(100svh - 100px)) 1fr;gap:10px 22px}#play .arena{grid-column:1;grid-row:1/8}#play>.readout,#play>.health,#play>.hazard-hud,#play>.instructions,#play>.controls,#play>footer,#play>.error{grid-column:2;margin:0}#menu,#lobby{max-width:470px;margin:auto}#preview{max-width:140px}}

/* Every screen uses the available viewport, including browser chrome and safe areas. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
main{height:100svh;height:100dvh;display:flex;flex-direction:column;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
header{flex:none;padding:0;margin:0}
.screen{flex:1;min-height:0;margin:0}
#menu,#lobby{width:100%;max-width:none;padding:12px;display:flex;flex-direction:column;gap:8px}
.panel h1{font-size:clamp(20px,4vh,29px);margin:0}
.panel p{margin:0;line-height:1.35}
.panel>button,.panel form button{flex:none;min-height:44px;margin:0;padding:10px 12px}
#preview{flex:1;min-height:0;width:100%;max-width:none;object-fit:contain;background:transparent;border:0;margin:0}
.panel .actions{margin:0;flex-wrap:nowrap;gap:8px}
.panel .actions button{padding:6px;font-size:10px}
.panel label{margin:0 0 5px}
.panel output{font-size:34px}
.panel input{padding:10px 12px}
#join-form{display:grid;gap:8px}
#lobby-back{margin-top:auto}
.error:empty{display:none}
#play{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;gap:8px;touch-action:none;-webkit-touch-callout:none}
#play>.readout,#play>.health,#play>.hazard-hud,#play>.instructions,#play>footer,#play>.error{margin:0;grid-column:auto}
#play .arena{grid-column:1;grid-row:3;min-height:0;min-width:0;aspect-ratio:1;width:auto;height:100%;max-width:100%;max-height:100%;justify-self:center;align-self:center;padding:4px;box-sizing:border-box}
#game{width:100%;height:100%}
.controls{gap:10px;touch-action:none}
.controls button{min-height:60px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.controls button>*{pointer-events:none;-webkit-user-select:none;user-select:none}
#play h1{font-size:22px}
.health label{margin-bottom:4px;font-size:12px}
#game-error{min-height:0}
#update-banner{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(92%,440px);z-index:5;margin:0;padding:12px;box-shadow:0 0 30px #000}
dialog{max-height:90dvh;overflow:auto;margin:auto}
@media(max-height:650px){
  main{gap:6px}#menu,#lobby{gap:6px;padding:10px}.panel p{font-size:12px}.eyebrow{font-size:10px;letter-spacing:1px}
  #play{gap:5px}.controls button{min-height:48px}.arrow{font-size:30px}#play h1{font-size:18px}.instructions,footer{font-size:10px}
}
@media(orientation:landscape) and (max-height:550px){
  main{max-width:900px}header{margin:0}
  #menu{display:grid;grid-template-columns:minmax(120px,1fr) 1fr;gap:6px 16px}
  #menu>*{grid-column:2}#menu>#preview{grid-column:1;grid-row:1/9;height:100%;max-width:100%}
  #menu>.eyebrow,#menu>.muted{display:none}
  #lobby{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;align-content:center}
  #lobby>h1,#lobby>.eyebrow,#lobby>p,#lobby>label,#lobby>output{grid-column:1}
  #lobby>#join-form{grid-column:2;grid-row:1/6}#lobby>#lobby-back{grid-column:2;grid-row:6/8}
  #play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(48px,1fr) auto auto;gap:5px 16px}
  #play .arena{grid-column:1;grid-row:1/8}
  #play>.readout,#play>.health,#play>.hazard-hud,#play>.instructions,#play>.controls,#play>footer,#play>.error{grid-column:2;margin:0}
}

/* Size the square arena from both dimensions of its remaining grid cell. */
#play .arena-slot{grid-column:1;grid-row:3;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
#play .arena{grid-column:auto;grid-row:auto;width:min(100cqw,100cqh);height:auto;aspect-ratio:1}
@media(orientation:landscape) and (max-height:550px){#play .arena-slot{grid-row:1/8}}
.network-quality{font-size:10px;white-space:nowrap;color:#b5c5aa;border:1px solid currentColor;padding:6px}
.network-quality[data-quality=good]{color:#c5f779}
.network-quality[data-quality=fair]{color:#e4bc74}
.network-quality[data-quality=poor]{color:#ffac70}
@media(max-width:370px){.network-quality{font-size:9px;padding:4px}.brand{font-size:14px;gap:3px}.mark{margin-right:2px}}
#update-banner{position:static;transform:none;width:100%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px}
#update-banner p{margin:0}#update-banner button{width:auto;margin:0}
@media(orientation:landscape) and (max-height:550px){#lobby>#dev-bot{grid-column:2;grid-row:6}#lobby>#lobby-back{grid-row:7}}