*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#0b1f14;height:100%;font-family:Trebuchet MS,Verdana,sans-serif;overflow:hidden}#wrap{touch-action:none;background:#000;border:4px solid #1d3a24;border-radius:8px;width:min(100vw,177.78vh);height:min(56.25vw,100vh);margin:auto;position:relative;top:50%;overflow:hidden;transform:translateY(-50%);box-shadow:0 0 60px #000}#wrap>canvas{cursor:crosshair;touch-action:none;background:#87ceeb;width:100%;height:100%;display:block}.hud{pointer-events:none;z-index:5;position:absolute}#timer{top:calc(8px + env(safe-area-inset-top,0px));-webkit-backdrop-filter:blur(8px);color:#ffe45e;letter-spacing:2px;text-shadow:2px 2px #000;background:linear-gradient(#0a120cc7,#0a120c99);border:2px solid #ffe45ed9;border-radius:14px;padding:4px 22px;font-size:clamp(16px,2.6vw,30px);font-weight:900;left:50%;transform:translate(-50%);box-shadow:0 4px 18px #00000073,0 0 18px #ffe45e40}#timer.tick{animation:.3s ease-out tickpop}@keyframes tickpop{0%{transform:translate(-50%)scale(1.12)}to{transform:translate(-50%)scale(1)}}#timer.low{color:#ff5a5a;border-color:#ff5a5a;animation:.5s infinite alternate lowpulse;box-shadow:0 0 22px #ff3c3c8c}@keyframes lowpulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.09)}}@keyframes pulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.07)}}#leaderboard{top:calc(8px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));-webkit-backdrop-filter:blur(8px);color:#fff;background:linear-gradient(#08100abf,#08100a8c);border:1px solid #ffffff59;border-radius:12px;min-width:170px;padding:6px 10px;font-size:clamp(10px,1.3vw,14px);font-weight:700;box-shadow:0 4px 18px #0006}#leaderboard h3{color:#7cfc00;letter-spacing:1px;text-shadow:0 0 8px #7cfc0080;margin-bottom:4px;font-size:.85em}#leaderboard .row{border-radius:5px;justify-content:space-between;gap:12px;padding:1px 4px;transition:background .25s,transform .25s;display:flex}#leaderboard .row.first span:last-child{color:#ffe45e}#leaderboard .row.me{color:#111;background:linear-gradient(90deg,#ffe45e,#ffc93c);font-weight:900;box-shadow:0 0 12px #ffe45e8c}#leaderboard .dot{vertical-align:middle;border:1px solid #000;border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block;box-shadow:0 0 6px}#minimapWrap{top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));-webkit-backdrop-filter:blur(8px);text-align:center;background:linear-gradient(#08100abf,#08100a8c);border:1px solid #ffffff59;border-radius:12px;padding:5px;box-shadow:0 4px 18px #0006}#minimapWrap div{color:#7cfc00;letter-spacing:1px;font-size:11px;font-weight:900}#minimap{background:#12351f;border:1px solid #7cfc0066;border-radius:8px;display:block}#killfeed{top:calc(190px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));flex-direction:column;gap:4px;max-width:44%;display:flex}.kf{-webkit-backdrop-filter:blur(6px);color:#fff;opacity:0;background:linear-gradient(90deg,#000000b8,#00000080);border-left:4px solid #ff5a5a;border-radius:8px;padding:4px 10px;font-size:clamp(10px,1.3vw,14px);font-weight:700;transition:opacity .25s ease-out,transform .25s ease-out;transform:translate(-30px);box-shadow:0 3px 12px #0006}.kf.show{opacity:1;transform:none}.kf.out{opacity:0;transform:translate(-16px)}.kf.mine{border-left-color:#7cfc00;box-shadow:0 0 14px #7cfc0059}.kf b{color:#ffe45e}@keyframes slidein{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:none}}#bottombar{bottom:calc(8px + env(safe-area-inset-bottom,0px));-webkit-backdrop-filter:blur(8px);color:#fff;background:linear-gradient(#08100ac7,#08100a99);border:1px solid #ffffff59;border-radius:14px;align-items:center;gap:14px;padding:6px 18px;font-weight:900;display:flex;left:50%;transform:translate(-50%);box-shadow:0 4px 18px #00000073}#weaponName{color:#7cfc00;letter-spacing:1px;text-shadow:0 0 10px;font-size:clamp(12px,1.8vw,20px)}#ammo{font-variant-numeric:tabular-nums;font-size:clamp(14px,2.2vw,24px)}#ammo .lowammo{color:#ff5a5a;animation:.5s infinite alternate blinkammo}@keyframes blinkammo{0%{opacity:1}to{opacity:.45}}#reloadTip{color:#ffe45e;text-align:center;min-width:110px;font-size:12px}#reloadBarOuter{background:#222;border:1px solid #ffffff40;border-radius:5px;width:110px;height:8px;display:none;overflow:hidden}#reloadBar{background:linear-gradient(90deg,#ffe45e,#ff9d3c);width:0%;height:100%;transition:width 80ms linear;box-shadow:0 0 8px #ffe45e}#menuBtn{pointer-events:auto;cursor:pointer;color:#fff;letter-spacing:1px;background:#00000073;border:2px solid #fff9;border-radius:10px;padding:2px 12px;font-size:clamp(12px,1.8vw,18px);font-weight:900}#menuBtn:hover{background:#fff3}#hint{bottom:calc(30px + env(safe-area-inset-bottom,0px));left:calc(8px + env(safe-area-inset-left,0px));color:#fff;background:#00000080;border-radius:8px;padding:5px 10px;font-size:clamp(9px,1.1vw,12px);font-weight:700}#version{bottom:calc(8px + env(safe-area-inset-bottom,0px));left:calc(8px + env(safe-area-inset-left,0px));color:#ffffffa6;letter-spacing:.5px;text-shadow:1px 1px #000;font-size:11px;font-weight:700}.overlay{z-index:20;text-align:center;color:#fff;-webkit-backdrop-filter:blur(3px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:radial-gradient(at 50% 35%,#143c1ee0,#05140af0);flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden auto}.overlay>*{flex-shrink:0;max-width:100%}.overlay h1{background:linear-gradient(#d6ff7a,#7cfc00 55%,#3f9e2f);color:#0000;filter:drop-shadow(3px 3px #000)drop-shadow(0 0 22px #7cfc0059);letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin-bottom:6px;font-size:clamp(26px,5vw,58px);animation:3s ease-in-out infinite titlefloat}@keyframes titlefloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.overlay h2{color:#ffe45e;text-shadow:2px 2px #000,0 0 16px #ffe45e59;margin-bottom:12px;font-size:clamp(14px,2.4vw,24px)}.overlay p{color:#e8ffe8;max-width:640px;margin:6px 0;font-size:clamp(12px,1.7vw,17px);line-height:1.5}.overlay .keys{-webkit-backdrop-filter:blur(4px);background:#ffffff14;border:2px dashed #7cfc00b3;border-radius:10px;margin:10px 0;padding:10px 18px;font-size:clamp(11px,1.6vw,16px)}#playBtn,#restartBtn,#resumeBtn,#pauseRestartBtn{pointer-events:auto;color:#0b2a12;cursor:pointer;background:linear-gradient(#c6ff6e,#4caf2a);border:4px solid #0b2a12;border-radius:14px;margin-top:14px;padding:12px 44px;font-size:clamp(18px,3vw,30px);font-weight:900;transition:transform .12s,filter .12s;position:relative;overflow:hidden;box-shadow:0 6px #0b2a12,0 0 28px #7cfc0073}#playBtn:after,#restartBtn:after,#resumeBtn:after,#pauseRestartBtn:after{content:"";background:linear-gradient(100deg,#0000,#ffffff8c,#0000);width:40%;height:100%;animation:2.8s ease-in-out infinite shine;position:absolute;top:0;left:-60%;transform:skew(-20deg)}@keyframes shine{0%,60%{left:-60%}to{left:130%}}#playBtn:hover,#restartBtn:hover,#resumeBtn:hover,#pauseRestartBtn:hover{filter:brightness(1.1);transform:scale(1.04)}#playBtn:active,#restartBtn:active,#resumeBtn:active,#pauseRestartBtn:active{box-shadow:none;transform:translateY(4px)}#rankings{-webkit-backdrop-filter:blur(6px);background:#0000008c;border:2px solid #ffe45ecc;border-radius:12px;min-width:min(420px,80%);margin-top:8px;padding:10px 26px;box-shadow:0 6px 26px #00000080}#rankings .rrow{opacity:0;border-radius:8px;justify-content:space-between;gap:20px;padding:5px 8px;font-size:clamp(13px,2vw,19px);font-weight:900;animation:.35s ease-out forwards rowin;display:flex;transform:translateY(10px)}#rankings .rrow:nth-child(2){animation-delay:80ms}#rankings .rrow:nth-child(3){animation-delay:.16s}#rankings .rrow:nth-child(4){animation-delay:.24s}#rankings .rrow:nth-child(5){animation-delay:.32s}#rankings .rrow:nth-child(6){animation-delay:.4s}@keyframes rowin{to{opacity:1;transform:none}}#rankings .rrow.first{color:#111;background:linear-gradient(90deg,#ffe45e,#ffb52e);box-shadow:0 0 16px #ffe45e80}#rankings .rrow.me{outline:3px solid #7cfc00}#winnerBanner{color:#ffe45e;text-shadow:3px 3px #000,0 0 24px #ffe45e80;font-size:clamp(18px,3.4vw,34px);font-weight:900;animation:.45s cubic-bezier(.2,1.6,.4,1) winpop}@keyframes winpop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.hidden{display:none!important}#duelBtn{pointer-events:auto;color:#ffe45e;cursor:pointer;background:#ffe45e1f;border:3px solid #ffe45e;border-radius:12px;margin-top:10px;padding:10px 30px;font-size:clamp(14px,2.2vw,20px);font-weight:900}#duelBtn:hover{background:#ffe45e40}.duel-pane{background:#0000008c;border:2px solid #ffe45e;border-radius:12px;width:min(560px,92%);margin-top:8px;padding:10px 14px}.duel-pane p{margin:8px 0 4px;font-size:clamp(11px,1.5vw,14px)}.duel-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:8px;display:flex}.duel-row button,#codeHostBtn,#codeJoinBtn{pointer-events:auto;cursor:pointer;color:#0b2a12;background:linear-gradient(#aaff5e,#4caf2a);border:2px solid #0b2a12;border-radius:10px;padding:8px 18px;font-size:14px;font-weight:900}#duelBack{pointer-events:auto;cursor:pointer;color:#fff;background:#ffffff1f;border:2px solid #fff;border-radius:10px;padding:8px 18px;font-size:14px;font-weight:900}#quitBtn{pointer-events:auto;cursor:pointer;color:#fff;background:#ffffff1f;border:2px solid #fff;border-radius:12px;margin-top:10px;padding:10px 30px;font-size:clamp(14px,2.2vw,20px);font-weight:900}#quitBtn:hover{background:#ff5a5a4d;border-color:#ff5a5a}#duelStart:disabled{opacity:.4;cursor:default}#duelStatus{color:#7cfc00;min-height:20px;margin-top:8px;font-size:clamp(11px,1.6vw,15px);font-weight:900}#rotatePrompt{z-index:50;background:#05140af5}.rotate-icon{font-size:clamp(52px,11vw,88px);animation:1.2s ease-in-out infinite tilt}@keyframes tilt{0%,to{transform:rotate(-25deg)}50%{transform:rotate(25deg)}}#roomCodeBig{letter-spacing:12px;text-indent:12px;color:#ffe45e;text-shadow:3px 3px #000;min-height:20px;margin:4px 0;font-size:clamp(30px,6vw,44px);font-weight:900}#codeJoinIn{pointer-events:auto;letter-spacing:4px;text-align:center;text-transform:uppercase;color:#ffe45e;background:#111;border:3px solid #ffe45e;border-radius:10px;width:110px;padding:6px 8px;font-size:20px;font-weight:900}.tiny{opacity:.8;font-size:11px}#menuTopLeft{top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));z-index:30;gap:8px;display:flex;position:absolute}.menu-icon-btn{pointer-events:auto;cursor:pointer;letter-spacing:.5px;color:#7cfc00;-webkit-backdrop-filter:blur(4px);background:#0000008c;border:2px solid #7cfc00;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:900}.menu-icon-btn:hover{filter:brightness(1.2)}.menu-icon-btn:active{transform:scale(.95)}#shareBtn{color:#ffe45e;border-color:#ffe45e}#installPop{top:calc(54px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));z-index:31;text-align:left;background:#000000e0;border:2px solid #7cfc00;border-radius:12px;width:min(300px,100% - 20px);padding:10px 12px;position:absolute;box-shadow:0 6px 26px #00000080}#installPop strong{color:#7cfc00;margin-bottom:4px;font-size:14px;display:block}#installPop p{color:#e8ffe8;margin:4px 0 6px;font-size:12px;line-height:1.45}#installPop .duel-row{margin-top:4px}#installPopClose{pointer-events:auto;cursor:pointer;color:#fff;background:#ffffff1f;border:2px solid #fff;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:900}#installPopGo{pointer-events:auto;cursor:pointer;color:#0b2a12;background:linear-gradient(#aaff5e,#4caf2a);border:2px solid #0b2a12;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:900}@media (max-width:900px),(pointer:coarse){#menuTopLeft{top:calc(6px + env(safe-area-inset-top,0px));left:calc(6px + env(safe-area-inset-left,0px));gap:6px}.menu-icon-btn{border-width:1.5px;border-radius:8px;padding:6px 10px;font-size:11px}#installPop{top:calc(42px + env(safe-area-inset-top,0px));left:calc(6px + env(safe-area-inset-left,0px))}}#touchUI{z-index:10;pointer-events:none;touch-action:none;--edge:28px;--stickL:162px;--stickR:162px;--gap:12px;display:none;position:absolute;top:0;bottom:0;left:0;right:0}body.touch #touchUI{display:block}body.touch #hint{display:none}.stick-base{bottom:calc(72px + env(safe-area-inset-bottom,0px));width:var(--stickL);height:var(--stickL);pointer-events:auto;touch-action:none;background:#ffffff12;border:3px solid #ffffff8c;border-radius:50%;position:absolute;box-shadow:inset 0 0 0 6px #00000026}#leftBase{left:calc(var(--edge) + env(safe-area-inset-left,0px))}#rightBase{right:calc(var(--edge) + env(safe-area-inset-right,0px));width:var(--stickR);height:var(--stickR);background:#ffe45e0f;border-color:#ffe45e}#rightBase.firing{border-color:#ff5a5a;box-shadow:0 0 18px #ff5a5a,inset 0 0 0 6px #00000026}.stick-knob{background:#ffffff73;border:3px solid #fff;border-radius:50%;width:66px;height:66px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000080}#rightBase .stick-knob{background:#ffe45e8c;border-color:#ffe45e;width:66px;height:66px}#rightBase.firing .stick-knob{background:#ff5a5ab3;border-color:#ff5a5a}.stick-label{color:#fff;letter-spacing:1px;text-shadow:1px 1px #000;opacity:.8;white-space:nowrap;font-size:11px;font-weight:900;position:absolute;top:-22px;left:50%;transform:translate(-50%)}.mini-btn{pointer-events:auto;touch-action:none;color:#fff;background:#00000080;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;font-weight:900;display:flex;position:absolute}#jumpBtn{right:calc(var(--edge) + var(--stickR) + var(--gap) + env(safe-area-inset-right,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px));color:#7cfc00;border-color:#7cfc00;width:70px;height:70px;font-size:14px}#reloadBtn{right:calc(var(--edge) + var(--stickR) + var(--gap) + 8px + env(safe-area-inset-right,0px));bottom:calc(142px + env(safe-area-inset-bottom,0px));color:#ffe45e;border-color:#ffe45e;width:53px;height:53px;font-size:20px}.mini-btn:active{filter:brightness(1.4);transform:scale(.95)}#wrap:-webkit-full-screen{border:none;border-radius:0;width:100vw;height:100vh}#wrap:fullscreen{border:none;border-radius:0;width:100vw;height:100vh}#wrap:-webkit-full-screen #touchUI{--edge:42px}#wrap:fullscreen #touchUI{--edge:42px}#wrap:-webkit-full-screen #touchUI{--edge:42px}#fsBtn{z-index:15;bottom:calc(8px + env(safe-area-inset-bottom,0px));right:calc(8px + env(safe-area-inset-right,0px));pointer-events:auto;cursor:pointer;color:#fff;background:#0000008c;border:2px solid #fff;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;font-weight:900;display:flex;position:absolute}#fsBtn:active{filter:brightness(1.3);transform:scale(.92)}body.touch #fsBtn{bottom:auto;top:calc(34px + env(safe-area-inset-top,0px));opacity:.85;width:32px;height:26px;font-size:14px;right:50%;transform:translate(50%)}@media (max-width:900px),(pointer:coarse){body.touch #timer{top:calc(4px + env(safe-area-inset-top,0px));letter-spacing:1px;border-width:2px;border-radius:8px;padding:2px 12px;font-size:13px}body.touch #leaderboard{top:calc(4px + env(safe-area-inset-top,0px));left:calc(4px + env(safe-area-inset-left,0px));border-width:1.5px;border-radius:8px;min-width:0;max-width:118px;padding:4px 6px;font-size:9px;line-height:1.35}body.touch #leaderboard h3{margin-bottom:2px;font-size:9px}body.touch #leaderboard .row{gap:6px;padding:0 3px}body.touch #leaderboard .dot{width:7px;height:7px;margin-right:3px}body.touch #minimapWrap{top:calc(4px + env(safe-area-inset-top,0px));right:calc(4px + env(safe-area-inset-right,0px));border-width:1.5px;border-radius:8px;padding:3px}body.touch #minimapWrap div{font-size:8px}body.touch #minimap{width:110px!important;height:61px!important}body.touch #killfeed{top:calc(104px + env(safe-area-inset-top,0px));left:calc(4px + env(safe-area-inset-left,0px));gap:2px;max-width:38%}body.touch #version{bottom:calc(4px + env(safe-area-inset-bottom,0px));left:calc(4px + env(safe-area-inset-left,0px));font-size:9px}body.touch .kf{border-left-width:3px;border-radius:6px;padding:2px 6px;font-size:9px}body.touch #bottombar{bottom:calc(4px + env(safe-area-inset-bottom,0px));border-width:1.5px;border-radius:8px;gap:8px;padding:3px 10px;font-size:11px}body.touch #weaponName{font-size:11px}body.touch #ammo{font-size:13px}body.touch #reloadTip{min-width:0;max-width:90px;font-size:9px}body.touch #reloadBarOuter{width:60px;height:6px}body.touch #touchUI{--edge:22px;--stickL:114px;--stickR:114px;--gap:8px}body.touch .stick-base{bottom:calc(40px + env(safe-area-inset-bottom,0px));width:var(--stickL);height:var(--stickL);border-width:2px}body.touch #leftBase{left:calc(var(--edge) + env(safe-area-inset-left,0px))}body.touch #rightBase{right:calc(var(--edge) + env(safe-area-inset-right,0px));width:var(--stickR);height:var(--stickR)}body.touch .stick-knob{border-width:2px;width:46px;height:46px}body.touch #rightBase .stick-knob{width:46px;height:46px}body.touch .stick-label{font-size:8px;top:-16px}body.touch #jumpBtn{right:calc(var(--edge) + var(--stickR) + var(--gap) + env(safe-area-inset-right,0px));bottom:calc(36px + env(safe-area-inset-bottom,0px));border-width:2px;width:53px;height:53px;font-size:11px}body.touch #reloadBtn{right:calc(var(--edge) + var(--stickR) + var(--gap) + 8px + env(safe-area-inset-right,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));border-width:2px;width:38px;height:38px;font-size:15px}}@media (max-width:900px) and (orientation:portrait){body.touch #bottombar{bottom:auto;top:calc(34px + env(safe-area-inset-top,0px))}body.touch #fsBtn{top:calc(66px + env(safe-area-inset-top,0px))}body.touch #killfeed{top:calc(122px + env(safe-area-inset-top,0px))}}.touch-help{background:#ffffff14;border:2px dashed #7cfc00b3;border-radius:10px;margin:8px 0;padding:8px 14px;font-size:13px;line-height:1.45;display:none}body.touch .touch-help{display:block}body.touch .overlay .keys{display:none}@media (max-width:900px),(max-height:560px),(pointer:coarse){.overlay{padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));justify-content:flex-start;gap:2px}.overlay:before{content:"";margin:auto 0 0}.overlay:after{content:"";margin:0 0 auto}.overlay h1{letter-spacing:1px;margin-bottom:2px;font-size:clamp(19px,5.4vw,30px)}.overlay h2{margin-bottom:4px;font-size:clamp(11px,3.2vw,15px)}.overlay p{max-width:94%;margin:4px auto;font-size:clamp(11px,3.2vw,13px);line-height:1.4}.overlay .keys,.touch-help{max-width:94%;margin:6px auto;padding:6px 10px;font-size:11px;line-height:1.45}#playBtn,#restartBtn,#resumeBtn,#pauseRestartBtn{width:min(320px,86%);margin-top:8px;padding:10px 26px;font-size:clamp(16px,4.6vw,21px)}#duelBtn{width:min(320px,86%);margin-top:8px;padding:8px 20px;font-size:clamp(12px,3.4vw,15px)}.duel-pane{width:min(440px,94%);margin-top:6px;padding:8px 10px}#roomCodeBig{letter-spacing:8px;text-indent:8px;font-size:clamp(24px,7vw,32px)}#codeJoinIn{width:96px;padding:5px 6px;font-size:18px}#rankings{width:min(440px,94%);min-width:0;padding:8px 12px}#winnerBanner{font-size:clamp(16px,4.6vw,24px)}}@media (max-height:430px){#startScreen>p{display:none}.overlay .keys,.touch-help{margin:4px auto}#playBtn,#restartBtn{margin-top:6px}}
