*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111b1c;color:#f1f2e9;font-family:Arial,Helvetica,sans-serif}canvas#view{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none}header{display:flex;align-items:center;gap:26px;padding:26px 32px;background:linear-gradient(#101a1bb5,transparent);font-size:20px;letter-spacing:2px}header span{font-size:11px;color:#c0c9c2}header small{font:10px monospace;color:#c6dc48;margin-left:auto}button{cursor:pointer;border:0;font-weight:bold}header button{pointer-events:auto;background:#172623a8;color:#dce4da;padding:10px 14px;border:1px solid #667768;font:10px monospace}aside{position:absolute;right:28px;top:90px;background:#101d1ee8;padding:12px;border:1px solid #677565;width:266px}.maphead{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px}.maphead b{color:#d4ed62}#map{width:240px;height:204px;display:block;margin:8px 0}aside small{font:8px monospace;color:#9eaaa0}#cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:28px monospace;color:#e4f0d8aa}#cross.tag{color:#e2ff65}#hit{position:absolute;inset:0;box-shadow:inset 0 0 160px #e95137;opacity:0}footer{position:absolute;bottom:36px;left:32px;right:32px;display:flex;gap:55px}footer small{display:block;font:9px monospace;letter-spacing:2px;color:#d5e1d0}footer strong{font-size:36px;line-height:1.3}em{font-style:normal;font-size:14px;color:#c1c9b4}.ammo{margin-left:auto;text-align:right}#health{display:flex;gap:5px;justify-content:end}#health i{width:22px;height:4px;background:#d5ee68}.label{position:absolute;bottom:10px;left:32px;font:8px monospace;letter-spacing:1px;color:#ccd1bb}#toast{position:absolute;top:110px;left:32px;font:12px monospace;color:#e8f7ba;max-width:40%}#prompt{position:absolute;left:50%;top:61%;transform:translateX(-50%);font:12px monospace;padding:10px;background:#132221c0}#prompt:empty{display:none}#menu{position:absolute;inset:0;background:linear-gradient(90deg,#0d1c1df5 5%,#152726d9 48%,#15272638);display:flex;align-items:center;padding:5vw;gap:12vw}.card{max-width:540px}.eyebrow{font:10px monospace;letter-spacing:3px;color:#cfe662}h1{font-size:clamp(54px,7vw,100px);line-height:.88;letter-spacing:-6px;margin:28px 0}h1 span{display:block;font-size:.43em;letter-spacing:6px;margin-top:15px}.lead{font-size:24px;line-height:1.3;color:#cad4c4}.tags{display:flex;gap:16px;font:9px monospace;color:#a9b7a9;margin:25px 0}#play{background:#d8ef64;color:#17231b;padding:20px 24px;width:100%;font-size:14px;letter-spacing:2px;text-align:left}#play span{float:right}.controls{font:11px/2 monospace;color:#a8b6aa}details{font:10px/1.6 monospace;color:#a6b6a7;max-width:480px}summary{cursor:pointer;color:#d8e2ca}#error{color:#ffac8c;font-size:13px}.sidecopy{font-weight:900;font-size:clamp(30px,5vw,74px);line-height:1.1;letter-spacing:-2px;color:#e5ead7c0}.sidecopy small{display:block;font:12px/1.8 monospace;letter-spacing:0;margin-top:30px;color:#c4d0b6}#menu.hidden{display:none}@media(max-width:800px){aside{transform:scale(.65);transform-origin:top right;right:10px}header{padding:16px}header small,.sidecopy{display:none}#menu{padding:25px}.card{max-height:95vh;overflow:auto}footer{left:16px;right:16px;gap:24px}h1{letter-spacing:-3px}#toast{top:70px;font-size:10px;max-width:50%}}
.graphics-pick{display:flex;align-items:center;gap:14px;margin:18px 0;font:9px monospace;letter-spacing:1px;color:#bbc6ad}.graphics-pick select{background:#23312b;color:#d7e0c5;border:1px solid #65715a;padding:9px;font:10px monospace}#menu{background:linear-gradient(90deg,#0c181bf2 0%,#142426bb 38%,#14242612 100%)}.sidecopy{text-shadow:0 4px 25px #0005;max-width:350px}.card{background:linear-gradient(90deg,#11202133,transparent);padding:16px 0}
.brand{font-size:initial;line-height:1;margin:18px 0 12px;letter-spacing:normal}.brand img{display:block;width:100%;height:auto;max-width:500px;filter:drop-shadow(0 3px 9px #0009)}#menu{padding:24px 5vw}.card{width:min(520px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:10px 14px 10px 0;scrollbar-width:thin}.lead{margin:14px 0}.graphics-pick{flex-wrap:wrap}.share-row{display:flex;align-items:center;gap:12px;margin-top:12px}.share-row button{background:transparent;color:#e0edb8;border:1px solid #78856c;padding:10px 14px;white-space:nowrap;font:10px monospace;letter-spacing:1px}.share-row span{font:10px/1.4 monospace;color:#c7d5b7}#share-url{width:100%;background:#1b2a25;color:#edf4d8;border:1px solid #8b9b76;padding:8px;margin-top:8px}.card details a{color:#d7ec8c}.controls{font-size:10px}.tags{flex-wrap:wrap}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #dcf36b;outline-offset:3px}@media(max-width:900px){.sidecopy{display:none}.card{max-width:520px}#menu{justify-content:center}}
/* Phone layout: keep HUD above controls and respect notches. */
html,body,#view{touch-action:none}button,input,select,summary{min-height:44px}#menu{touch-action:pan-y;height:100dvh;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.card{max-height:calc(100dvh - 32px);overscroll-behavior:contain}#rooms{margin:12px 0;border:1px solid #667768;padding:10px;font:11px/1.5 monospace}#rooms legend{color:#d8ef64}#rooms label{display:block;margin-bottom:8px}#rooms input{display:block;width:100%;background:#162a27;color:#f1f2e9;border:1px solid #667768;padding:10px;font-size:16px}.room-buttons{display:flex;gap:6px;flex-wrap:wrap}.room-buttons button{padding:10px;background:#cfe662;color:#142420}button:disabled{opacity:.45}#room-status{margin-bottom:0;color:#dce9c4}#touch-controls{display:none;position:absolute;inset:0;pointer-events:none;touch-action:none}#aim-zone{position:absolute;left:42%;right:0;top:56px;bottom:0;pointer-events:auto}#joystick{position:absolute;bottom:max(38px,env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));width:126px;height:126px;border-radius:50%;border:2px solid #e4edbf66;background:#13272488;pointer-events:auto}#joystick i{position:absolute;left:39px;top:39px;width:44px;height:44px;background:#d8ef6477;border-radius:50%;border:1px solid #eff8cd}#joystick span{position:absolute;bottom:9px;width:100%;text-align:center;font:9px monospace;color:#c9d7b8}#touch-controls button{position:absolute;pointer-events:auto;border:1px solid #dceab480;background:#172a26c9;color:#edf5d5;min-width:64px;min-height:52px;border-radius:16px;touch-action:none}#touch-fire{right:max(24px,env(safe-area-inset-right));bottom:max(45px,env(safe-area-inset-bottom));width:88px;height:88px;background:#d8ef64cc!important;color:#142420!important;border-radius:50%!important}#touch-reload{right:max(122px,calc(env(safe-area-inset-right) + 98px));bottom:44px}#touch-interact{right:max(30px,env(safe-area-inset-right));bottom:145px}#rotate-hint{display:none;position:absolute;top:52px;width:100%;text-align:center;font:10px monospace;color:#d8ef64;pointer-events:none}
@media(pointer:coarse),(max-width:900px){body.playing #touch-controls{display:block}header{padding:max(9px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));font-size:14px}header button{min-height:44px}aside{display:none}footer{bottom:auto;top:max(60px,calc(env(safe-area-inset-top) + 52px));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));gap:14px}footer strong{font-size:21px}footer small{font-size:8px;letter-spacing:0}#clock{font-size:14px}#health i{width:15px}#toast{top:112px;left:14px;max-width:65%;font-size:10px}.label{left:50%;transform:translateX(-50%);bottom:max(7px,env(safe-area-inset-bottom));font-size:6px;white-space:nowrap}#prompt{top:52%;max-width:60%;font-size:10px;text-align:center}.lead{font-size:20px}.eyebrow{letter-spacing:1px}.card{padding-right:2px}.brand img{max-width:320px}.tags{margin:12px 0}.controls{line-height:1.7}}
@media(orientation:portrait) and (max-width:900px){#rotate-hint{display:block}footer{top:85px}#toast{top:144px}#joystick{width:114px;height:114px;left:16px}#joystick i{left:33px;top:33px}#touch-reload{right:112px;bottom:24px}#touch-fire{right:16px}#touch-interact{right:26px}}
@media(max-height:480px){.brand img{max-width:230px}.lead,.tags{display:none}#menu{padding:8px 24px}.card{max-height:calc(100dvh - 16px)}#rooms{margin:6px 0}.graphics-pick{margin:6px 0}#play{padding:14px}#toast{top:103px}#touch-interact{bottom:140px}}
@media(max-width:900px){#menu{background:#0c1c1df2}.card{background:transparent}header small{display:none}}