*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#a8dae8;color:#eefaff;font-family:Arial,"Microsoft YaHei",sans-serif;user-select:none}canvas{display:block;width:100%;height:100%}button{font:inherit;cursor:pointer}#overlay{position:fixed;inset:0;padding:40px 5vw;background:linear-gradient(90deg,rgba(8,28,42,.94),rgba(8,28,42,.7) 40%,rgba(8,28,42,.08) 85%);display:flex;flex-direction:column;justify-content:space-between}.eyebrow{letter-spacing:3px;font-size:14px;color:#b9f4ef}.eyebrow span{margin-left:24px;font-size:10px;color:#b0c9d1}section{max-width:550px}.kicker{color:#76e4d1;font-size:13px;letter-spacing:4px}h1{font-size:clamp(54px,7.5vw,106px);line-height:1.08;letter-spacing:-5px;margin:20px 0 26px}h1 span{color:#87f0d9}h1 em{display:block;font-style:normal;font-size:14px;letter-spacing:9px;margin-top:20px;color:#a4c0ca}#message{line-height:1.9;color:#bdd2da;font-size:15px}#start{border:0;background:#a3f5c8;color:#163637;padding:18px 25px;width:260px;margin-top:20px;text-align:left;font-weight:bold}#start span{float:right}#start:hover{background:#d6ffe7}#hint{font-size:12px;margin-top:25px}.controls{font-size:11px;color:#99b1bc;line-height:2.2}footer{display:flex;justify-content:space-between;font-size:11px;color:#c6dbe1;letter-spacing:2px}#hud{position:fixed;inset:0;pointer-events:none}.health,.ammo{position:absolute;bottom:36px;background:#102a3aca;padding:16px 22px;border-top:2px solid #83efd7}.health{left:35px;min-width:180px}.health span,.ammo>span{font-size:11px;letter-spacing:3px;color:#b5ddd9}.health strong{float:right;font-size:24px}.bar{height:4px;margin-top:18px;background:#466170}.bar i{display:block;height:100%;background:#94f4c4}.ammo{right:35px;min-width:160px}.ammo strong{font-size:38px}.ammo small{color:#9ab7c7;font-size:16px}.ammo div{margin-top:5px}#crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px #19353d)}#crosshair:before,#crosshair:after,#crosshair i,#crosshair b{content:'';position:absolute;background:white}#crosshair:before{left:0;top:9px;width:6px;height:2px}#crosshair:after{right:0;top:9px;width:6px;height:2px}#crosshair i{top:0;left:9px;height:6px;width:2px}#crosshair b{bottom:0;left:9px;height:6px;width:2px}#crosshair.hit{transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 3px #7affd4)}#damage{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #ff9850;opacity:0}#touch{position:fixed;inset:0;pointer-events:none;touch-action:none}#stick{position:absolute;left:28px;bottom:130px;width:115px;height:115px;border:1px solid #ffffff60;border-radius:50%;background:#173b4d33;pointer-events:auto;touch-action:none}#stick i{position:absolute;width:42px;height:42px;left:36px;top:36px;border-radius:50%;background:#d6fff58a}#touch-actions{position:absolute;right:24px;bottom:135px;display:flex;gap:8px;pointer-events:auto}#touch button{width:54px;height:54px;border-radius:50%;border:1px solid #d9fff688;background:#18374688;color:white;touch-action:none}#touch button:last-child{background:#7bcbb88a;width:66px;height:66px}[hidden]{display:none!important}@media(max-height:600px){#overlay{padding:20px 4vw}h1{font-size:48px;margin:10px 0}h1 em{margin-top:8px;font-size:10px}.kicker{margin:6px 0}#message{font-size:12px}#start{margin-top:5px;padding:12px 18px}#hint{margin-top:12px}.health,.ammo{bottom:16px;padding:10px 16px}footer{font-size:9px}}
/* V1.1: compact world information and original circular combat controls. */
h1{font-size:clamp(46px,6.6vw,86px);letter-spacing:-3px}
.world-status,.wanted{position:absolute;top:28px;padding:12px 16px;background:#102a3aba;border-left:2px solid #83efd7;font-size:14px}.world-status{left:30px}.wanted{right:88px;text-align:right;border-left:0;border-right:2px solid #e2be80}.world-status small,.wanted small{display:block;font-size:11px;color:#b8cdd7;margin-top:7px}.wanted>span{letter-spacing:6px;color:#ffce80}
#touch-actions{display:grid;grid-template-columns:repeat(2,64px);align-items:center;gap:12px;bottom:160px;right:30px}#touch button{backdrop-filter:blur(3px);box-shadow:0 3px 18px #071d2733}#touch button small{display:block;margin-top:3px;font-size:8px;color:#c2dedc}#touch button[data-action=fire]{width:72px;height:72px;border:2px solid #b0f6d5;background:#387c7290;font-size:16px}#touch button.active{background:#77caaa99;border-color:#c0fff0}#touch #pause-button{position:absolute;right:28px;top:28px;width:42px;height:42px;pointer-events:auto;border-radius:12px}#touch.desktop #stick{display:none}
#switch-weapon{background:none;border:0;color:#bedbd4;pointer-events:auto;font-size:11px;padding:8px 0 0}#toast{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#17384cec;color:#c6f8e5;font-size:12px;max-width:45vw;text-align:center}
#entity-bars{position:absolute;inset:0}.entity-bar{position:absolute;width:76px;transform:translate(-50%,-100%);text-align:center;font-size:10px;color:#edfff9;text-shadow:0 1px 3px #000}.entity-bar .track{height:4px;background:#1b354dde;border:1px solid #a7c9bd66;margin-top:3px}.entity-bar i{display:block;height:100%;background:#92e5c5}.entity-bar.police i{background:#91b9ff}.entity-bar.enemy i{background:#efc28a}
#modal{position:fixed;inset:0;display:grid;place-items:center;background:#0b1c2b99;backdrop-filter:blur(6px);z-index:10}.panel{width:min(440px,90vw);background:#122f40f5;border:1px solid #62938b77;padding:30px;border-radius:4px;box-shadow:0 24px 80px #06162366}.panel h2{font-size:26px;line-height:1.5;margin:12px 0}.panel p{color:#b4cdd2;font-size:13px;line-height:1.8}.panel button{display:block;width:100%;padding:13px 18px;border:1px solid #8bcbb477;background:#9eebc6;color:#143938;margin:12px 0 0;text-align:center}.panel button.quiet{background:transparent;color:#cadde0}.panel label{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:13px}.panel input{width:160px;accent-color:#9eebc6}.panel select{background:#214657;color:#dcf5ec;border:1px solid #567e80;padding:7px}.panel .fine{font-size:11px}
#scope{position:fixed;inset:0;pointer-events:none;display:grid;place-items:center;z-index:1}.scope-circle{position:relative;border-radius:50%;width:72vmin;height:72vmin;border:3px solid #17332dcc;box-shadow:0 0 0 100vmax #071117ed}.scope-h{position:absolute;top:50%;width:100%;height:1px;background:#112b28}.scope-v{position:absolute;left:50%;height:100%;width:1px;background:#112b28}.scope-circle:after{content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#aeffda;font-size:19px}.scope-circle span{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font-size:10px;letter-spacing:4px;color:#c3ffe5}#hud,#touch{z-index:2}
@media(max-height:600px){.world-status,.wanted{top:12px;padding:8px 12px}.world-status{left:16px}.wanted{right:68px}#touch #pause-button{top:12px;right:16px}#touch-actions{bottom:119px;right:18px;gap:8px;grid-template-columns:repeat(2,52px)}#touch button{width:46px;height:46px;font-size:11px}#touch button[data-action=fire]{width:57px;height:57px;font-size:13px}#stick{bottom:112px;width:105px;height:105px}#toast{bottom:22px;max-width:42vw;font-size:10px}.panel{padding:16px 24px;max-height:95vh;overflow:auto}.panel h2{font-size:21px}.panel label{margin:14px 0}h1{font-size:46px}}
@media(max-width:600px){.health{left:14px;min-width:130px;width:130px;padding:14px}.ammo{right:14px;min-width:130px;width:130px;padding:14px}.ammo strong{font-size:32px}.world-status{left:14px;max-width:145px;font-size:11px}.wanted{right:65px;max-width:140px;font-size:11px}.wanted small{font-size:9px}#touch #pause-button{right:14px}#toast{bottom:260px;max-width:80vw;width:80vw}footer{letter-spacing:0;font-size:9px}.eyebrow{letter-spacing:1px}.eyebrow span{margin-left:8px;font-size:8px}}
/* V1.2 survival and equipment. */
#low-health-edge{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;box-shadow:inset 0 0 85px #efa57488}.low-health #low-health-edge{animation:low-pulse 1.1s infinite}.low-health .health{animation:health-pulse 1.1s infinite}@keyframes low-pulse{50%{opacity:.7}}@keyframes health-pulse{50%{border-color:#ffc18e;background:#543f38dc}}
#touch #interact{position:absolute;left:50%;bottom:125px;transform:translateX(-50%);width:auto;max-width:48vw;height:auto;border-radius:8px;padding:12px 16px;pointer-events:auto;background:#275c59e6;color:#ceffe7}
#touch-actions{grid-template-columns:repeat(2,56px);bottom:156px;gap:9px}#touch button[data-action=medkit]{width:56px;height:50px;border-radius:14px;background:#35634cd9}#touch button[data-action=medkit] small{font-size:8px}.wide-panel{width:min(680px,94vw);max-height:88vh;overflow:auto}.weapon-card{border:1px solid #527b7f66;margin:12px 0;padding:12px}.weapon-card h3{margin:0;color:#c1f6da;font-size:16px}.weapon-card p{font-size:11px;margin:7px 0}.weapon-card button{font-size:12px;padding:9px}.slot-row{display:flex;gap:8px}.slot-row button{flex:1;font-size:11px;padding:9px 5px}.panel button:disabled{opacity:.4;cursor:default}#shop-message{color:#acefcc;min-height:20px}.world-status #credits{color:#edda9c}
@media(max-height:600px){#touch-actions{bottom:122px;grid-template-columns:repeat(3,48px);gap:7px}#touch button[data-action=medkit]{width:48px;height:46px}#touch #interact{bottom:90px;padding:8px 12px;font-size:11px}.wide-panel{max-height:95vh}.weapon-card{margin:6px 0;padding:8px}}
@media(max-width:600px){#touch-actions{right:16px;bottom:170px}#touch #interact{bottom:124px;max-width:80vw;font-size:10px}.wide-panel{padding:16px}.slot-row{gap:4px}.slot-row button{font-size:10px}}
/* Compact combat controls keep the centre of the view clear. */
#touch-actions{grid-template-columns:repeat(3,44px);gap:7px;right:16px;bottom:144px}
#touch button,#touch button[data-action=medkit]{width:44px;height:44px;font-size:11px;background:#18374666;box-shadow:none;backdrop-filter:none}
#touch button[data-action=fire]{width:48px;height:48px;font-size:12px;background:#387c7266}
#touch #pause-button{width:36px;height:36px;font-size:11px}
#stick{width:88px;height:88px;left:18px;bottom:128px;background:#173b4d22}
#stick i{width:32px;height:32px;left:27px;top:27px}
#touch #interact{padding:8px 10px;font-size:11px}
@media(max-height:600px){#touch-actions{bottom:112px;right:14px}#stick{bottom:110px}#touch #interact{bottom:84px}}
@media(max-width:600px) and (min-height:601px){#touch-actions{bottom:160px}}
.armor-label{display:block;margin-top:6px;font-size:11px;color:#a2d4f4}
#touch-actions{bottom:180px}
#touch button[data-action=medkit] small{font-size:7px;white-space:nowrap}
@media(max-height:600px){#touch-actions{bottom:142px}}
#smoke-screen{position:fixed;inset:0;background:#a6b4bd;opacity:0;pointer-events:none;z-index:1}
#network-debug{position:fixed;top:100px;left:12px;z-index:5;background:#102938c9;font-size:10px;padding:8px;pointer-events:none}
#free-start,#multiplayer{padding:12px 18px;margin:8px 6px 0 0;border:1px solid #8bd9bd;background:#254f59;color:#d6fff0;font-size:12px}
#room-code{width:140px;padding:10px;font-size:18px;letter-spacing:3px}#room-players{font-size:12px}
#touch-actions{grid-template-columns:repeat(4,44px);right:14px;bottom:180px}
#touch button[data-action=frag],#touch button[data-action=smoke]{width:44px;height:44px;border-radius:12px;position:relative;font-size:10px;background:#17374666}
#touch button[data-action=frag]{color:#ffd197}#touch button[data-action=smoke]{color:#9be6f0}
#touch button svg{width:23px;height:23px;display:block;margin:auto}#touch button[data-action=frag] span,#touch button[data-action=smoke] span{position:absolute;right:3px;top:2px;font-size:9px}
#touch button[data-action=frag] small,#touch button[data-action=smoke] small{font-size:7px;margin:0}
#rotate-hint{display:none}#rotate-hint small{display:block;font-size:14px;margin:20px}
@media(pointer:coarse) and (orientation:portrait){#rotate-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;background:#15313cf5;z-index:99;font-size:24px}}
@media(max-height:600px){#touch-actions{bottom:136px;gap:5px;grid-template-columns:repeat(4,42px)}#touch button{width:42px;height:42px}#touch button[data-action=fire]{width:46px;height:46px}#start{width:auto}#free-start,#multiplayer{padding:9px 12px;margin-top:5px}#overlay section{max-width:620px}#overlay .fine{margin:5px 0;font-size:10px}}