* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #101826; font-family: system-ui, sans-serif; color: #fff;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
canvas { display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
body.playing #hud { display: block; }
body.dead #crosshair { display: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: linear-gradient(#36f0ff, #36f0ff) center/2px 100% no-repeat, linear-gradient(#36f0ff, #36f0ff) center/100% 2px no-repeat; opacity: .85; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0;
  background: linear-gradient(currentColor, currentColor) center/3px 100% no-repeat, linear-gradient(currentColor, currentColor) center/100% 3px no-repeat; }
#hitmarker.hit { opacity: 1; color: #fff; }
#hitmarker.head { opacity: 1; color: #ffd23f; }
#hitmarker.kill { opacity: 1; color: #ff4b4b; width: 44px; height: 44px; }
#timer { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #0008; padding: 4px 12px; border-radius: 8px; font-weight: bold; }
#board { position: absolute; top: 10px; right: 10px; background: #0008; padding: 8px 12px; border-radius: 10px; min-width: 150px; font-size: 15px; }
#board .place { font-size: 22px; font-weight: 900; color: #36f0ff; margin-bottom: 4px; }
#board div.me { background: #36f0ff33; border-radius: 4px; }
#board i { float: right; font-style: normal; font-weight: bold; margin-left: 12px; }
#board span { opacity: .6; }
#feed { position: absolute; top: 10px; left: 10px; font-size: 14px; }
#feed div { background: #0008; padding: 3px 8px; border-radius: 6px; margin-bottom: 3px; }
#feed div.me { outline: 2px solid #36f0ff; }
#center { position: absolute; top: 30%; width: 100%; text-align: center; font-size: 30px; font-weight: 900; text-shadow: 0 2px 6px #000; }
#center small { font-size: 18px; font-weight: 600; }
#bottom { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; }
#hpwrap { position: relative; width: 220px; height: 22px; background: #0009; border-radius: 11px; overflow: hidden; border: 2px solid #fff4; }
#hpbar { height: 100%; width: 100%; background: #4bff7a; transition: width .1s; }
#hptext { position: absolute; inset: 0; text-align: center; font-weight: bold; line-height: 18px; text-shadow: 0 1px 2px #000; }
#ammo { font-size: 22px; font-weight: 900; background: #0008; padding: 2px 12px; border-radius: 8px; min-width: 100px; text-align: center; }
#dmg { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 120px 40px #ff0000; }

#touchui { display: none; }
body.touch.playing #touchui { display: block; }
#stick { position: fixed; left: 40px; bottom: 60px; width: 120px; height: 120px; border-radius: 50%; background: #fff2; border: 2px solid #fff4; opacity: .5; }
#stick.on { opacity: 1; bottom: auto; }
#knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: #fff8; }
#touchui button { position: fixed; border-radius: 50%; border: 3px solid #fff6; background: #0007; color: #fff; font-size: 28px; font-weight: 900; }
#bFire { right: 40px; bottom: 90px; width: 100px; height: 100px; font-size: 40px; background: #ff4b4b88; }
#bJump { right: 160px; bottom: 40px; width: 70px; height: 70px; }
#bReload { right: 60px; bottom: 210px; width: 60px; height: 60px; font-size: 22px; }
body.touch #bottom { bottom: 8px; }
body.touch #hpwrap { width: 160px; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(#10182688, #000c); padding: 20px; }
.screen.hidden { display: none; }
.screen h1 { font-size: clamp(40px, 9vw, 84px); margin: 0 0 10px; letter-spacing: 4px; color: #36f0ff; text-shadow: 0 0 20px #36f0ff, 0 4px 0 #0a5c66; }
.screen p { font-size: 18px; max-width: 520px; }
.screen button { font-size: 28px; font-weight: 900; padding: 14px 54px; border-radius: 14px; border: 0; background: #ff4b4b; color: #fff;
  box-shadow: 0 6px 0 #a02020; cursor: pointer; margin: 14px; }
.screen button:active { transform: translateY(4px); box-shadow: 0 2px 0 #a02020; }
.help { opacity: .75; font-size: 15px !important; margin: 4px; }
body.touch .desk, body:not(.touch) .mobile { display: none; }
table { border-collapse: collapse; font-size: 18px; margin: 10px; }
td, th { padding: 4px 14px; }
th { opacity: .6; }
tr.me { background: #36f0ff33; }
#levels { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.screen #levels button { font-size: 18px; padding: 8px 16px; background: #2b3240; box-shadow: none; opacity: 0.7; }
.screen #levels button.on { background: #36f0ff; color: #0b1020; opacity: 1; }