*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090d12;color:#fff;font-family:Arial,Helvetica,sans-serif}canvas{display:block}
#loading{position:fixed;inset:0;z-index:100;background:#080b10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;letter-spacing:2px}.loader-title{font-size:48px;font-weight:900}.loader-bar{width:280px;height:5px;background:#26303a}.loader-bar i{display:block;width:0;height:100%;background:#fff;animation:load 2.2s forwards}@keyframes load{to{width:100%}}
#hud{position:fixed;inset:0;pointer-events:none}.wanted{font-size:24px;letter-spacing:4px}.mission{margin-top:10px;background:#0009;padding:10px 14px;border-left:3px solid #fff;max-width:360px}.mission b{display:block;font-size:12px;opacity:.7}.mission span{font-size:14px}.top-left{position:absolute}.top-left{}
#top-left{position:absolute;left:20px;top:18px}#top-right{position:absolute;right:20px;top:18px;text-align:right}#money{font-size:22px;font-weight:bold}#clock{font-size:13px;opacity:.7;margin-top:4px}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 0 4px #000}
#bottom-left{position:absolute;left:20px;bottom:20px;width:260px}.stat{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:5px}.stat>div{height:9px;background:#222;flex:1}.stat i{display:block;height:100%;width:100%;background:#fff}.stat b{width:32px;text-align:right}
#bottom-right{position:absolute;right:20px;bottom:20px;text-align:right}.weaponName{font-size:13px}.ammo{font-size:30px;font-weight:bold}#ammoReserve{font-size:17px;opacity:.65}
#notification{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);background:#000b;padding:10px 18px;opacity:0;transition:.2s;font-weight:bold}
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(850px,92vw);height:min(650px,88vh);background:#0b1118f5;border:1px solid #43515e;box-shadow:0 20px 80px #000;pointer-events:auto;padding:24px;overflow:auto}.hidden{display:none!important}.panel h1{margin:0 0 20px;font-size:34px}.panel h2{font-size:20px}.panel>button{float:right}.tabs{display:flex;gap:6px;border-bottom:1px solid #33404b;margin-bottom:18px;flex-wrap:wrap}.tabs button,button{background:#17212b;color:#fff;border:1px solid #42515f;padding:10px 14px;cursor:pointer}.tabs button:hover,button:hover{background:#263441}.item,.mission-card{padding:12px;border:1px solid #33404b;margin:8px 0;background:#101820}.mission-card.active{border-color:#fff}.mission-card small{display:block;opacity:.6;margin-top:4px}
#help{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:11px;opacity:.45;pointer-events:none;white-space:nowrap}
#mobile{display:none}.mobileBtn{position:absolute}
@media(max-width:700px){#help{display:none}#mobile{display:block;position:fixed;inset:0;pointer-events:none}.panel{width:96vw;height:90vh;padding:15px}.loader-title{font-size:34px}#top-left{left:10px;top:10px}#top-right{right:10px;top:10px}.mission{max-width:250px}.wanted{font-size:18px}#bottom-left{left:10px;bottom:10px;width:190px}#bottom-right{right:10px;bottom:10px}.mobile-btn,#mobile button{position:absolute;pointer-events:auto;border-radius:50%;width:58px;height:58px;padding:0;background:#111b;color:#fff;border:1px solid #ffffff55;font-size:18px}.mobile-btn{}#fireBtn{right:20px;bottom:105px;width:78px!important;height:78px!important;font-size:30px!important}#reloadBtn{right:110px;bottom:110px}#interactBtn{right:110px;bottom:35px}#menuBtn{right:20px;top:85px}#lookLeft{right:180px;bottom:190px}#lookRight{right:110px;bottom:190px}#stick{position:absolute;left:25px;bottom:35px;width:125px;height:125px;border:1px solid #fff4;border-radius:50%;pointer-events:auto}}


/* Mobile landscape controls */
#orientationNotice{display:none}
#mobile{touch-action:none;user-select:none;-webkit-user-select:none}
#stick{display:flex;align-items:center;justify-content:center;touch-action:none;background:rgba(15,22,30,.42);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 8px 30px #0008}
#stickKnob{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.55);box-shadow:0 5px 18px #0008;transform:translate(0,0);pointer-events:none}
#lookZone{position:absolute;right:0;top:0;width:55%;height:100%;pointer-events:auto;touch-action:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.015));display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;opacity:.18}
#lookZone span{font-size:10px;letter-spacing:1.5px}
@media (orientation:portrait) and (max-width:900px){#orientationNotice{display:flex;position:fixed;inset:0;z-index:200;background:#070b10;color:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;font-size:16px;letter-spacing:.5px}#orientationNotice div{font-size:48px;animation:rotateHint 1.6s infinite ease-in-out}#orientationNotice span{font-size:12px;opacity:.65}@keyframes rotateHint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}}
@media (max-width:900px) and (orientation:landscape){#top-left{left:14px;top:9px}#top-right{right:14px;top:9px}.mission{max-width:300px;padding:7px 10px}.mission span{font-size:12px}#bottom-left{left:14px;bottom:10px;width:210px}#bottom-right{right:14px;bottom:10px}.wanted{font-size:16px}#fireBtn,#interactBtn,#reloadBtn,#menuBtn{position:absolute;pointer-events:auto;border-radius:16px;background:rgba(12,18,25,.62);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 25px #0007;font-weight:800;backdrop-filter:blur(6px)}#fireBtn{right:22px;bottom:30px;width:118px!important;height:62px!important;border-radius:18px!important;font-size:13px!important}#interactBtn{right:154px;bottom:30px;width:78px!important;height:62px!important;border-radius:18px!important;font-size:12px!important}#reloadBtn{right:154px;bottom:102px;width:52px!important;height:52px!important;border-radius:50%!important;font-size:24px!important}#menuBtn{right:22px;top:12px;width:50px!important;height:50px!important;border-radius:50%!important;font-size:20px!important}#stick{left:22px;bottom:24px;width:118px;height:118px;border-radius:50%}.panel{height:88vh;width:92vw}}
