* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --accent: #ff5a3c;
  --good: #4ade80;
  --bg: #0b0d12;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg);
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif; color: #fff; user-select: none; }
#stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; }
canvas#game { display: block; width: 100%; height: 100%; cursor: none; }
body.playing, body.playing * { cursor: none !important; }

/* Forced landscape: rotate the whole stage 90° when a touch device is held (or
   pinned by a webview like WeChat) in portrait. The canvas is resized to the
   rotated dimensions in JS and touch coords are remapped to match. */
@media (orientation: portrait) {
  body.touch #stage {
    width: 100vh;
    height: 100vw;
    left: 100vw;
    transform-origin: left top;
    transform: rotate(90deg);
  }
}

.hidden { display: none !important; }

/* ---------------- Overlays ---------------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,24,33,.85), rgba(5,6,10,.96));
  z-index: 50; backdrop-filter: blur(3px); }

.start-box { position: relative; text-align: center; padding: 40px 50px; background: rgba(15,18,26,.9);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#backToHub { position: absolute; top: 14px; left: 16px; font-size: 13px; color: #9aa3b2;
  text-decoration: none; letter-spacing: .5px; transition: color .12s; }
#backToHub:hover { color: #fff; }
.start-box h1 { font-size: 56px; letter-spacing: 6px; font-weight: 800;
  background: linear-gradient(90deg,#ff7a4d,#ff3d6e); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.tagline { color: #9aa3b2; margin: 8px 0 24px; letter-spacing: 1px; }
#nameInput { width: 280px; padding: 12px 16px; font-size: 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15); background: #11151d; color: #fff; outline: none; text-align: center; }
#nameInput:focus { border-color: var(--accent); }
#playBtn { display: block; margin: 16px auto 0; width: 280px; padding: 14px; font-size: 18px;
  font-weight: 700; letter-spacing: 2px; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg,#ff7a4d,#ff3d6e); color: #fff; transition: transform .08s; }
#playBtn:hover { transform: translateY(-1px); }
#playBtn:disabled { opacity: .5; cursor: default; transform: none; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 26px;
  color: #9aa3b2; font-size: 13px; }
.controls b { color: #fff; }
#connState { margin-top: 18px; font-size: 13px; color: #ffb86b; }

.death-box, .match-box { text-align: center; padding: 40px 60px; }
.death-title { font-size: 40px; font-weight: 800; letter-spacing: 3px; color: var(--accent); }
#deathBy { margin-top: 10px; color: #cbd2dd; font-size: 16px; }
.respawn { margin-top: 24px; font-size: 18px; color: #9aa3b2; }

.match-title { font-size: 48px; font-weight: 800; letter-spacing: 4px;
  background: linear-gradient(90deg,#ffd24d,#ff7a4d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#winnerLine { font-size: 22px; margin: 14px 0 24px; }
#winnerLine b { color: var(--good); }
#finalScores { margin: 0 auto; border-collapse: collapse; min-width: 360px; }
#finalScores td, #finalScores th { padding: 6px 16px; text-align: left; font-size: 15px; }
#finalScores tr.me { color: var(--accent); font-weight: 700; }
#finalScores th { color: #9aa3b2; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; letter-spacing: 1px; }
.next { margin-top: 22px; color: #9aa3b2; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  transform: translate(-50%,-50%); }
.ch { position: absolute; background: rgba(255,255,255,.85); box-shadow: 0 0 2px #000; }
.ch-t, .ch-b { width: 2px; height: 8px; left: 12px; }
.ch-l, .ch-r { height: 2px; width: 8px; top: 12px; }
.ch-t { top: 0; } .ch-b { bottom: 0; } .ch-l { left: 0; } .ch-r { right: 0; }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%,-50%) rotate(45deg); opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: #fff; }
#hitmarker::before { left: 10px; top: 0; width: 2px; height: 22px; }
#hitmarker::after { top: 10px; left: 0; height: 2px; width: 22px; }
#hitmarker.show { animation: hm .25s ease-out; }
#hitmarker.kill { filter: drop-shadow(0 0 3px #ff3d3d); }
#hitmarker.kill::before, #hitmarker.kill::after { background: #ff5a5a; }
@keyframes hm { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(1); } }

#damageFlash { position: absolute; inset: 0; box-shadow: inset 0 0 140px 40px rgba(255,0,0,.55);
  opacity: 0; transition: opacity .35s; }
#damageFlash.show { opacity: 1; transition: opacity .05s; }

#topbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; }
#timer { font-size: 30px; font-weight: 800; letter-spacing: 2px; padding: 4px 20px;
  background: rgba(10,12,18,.6); border-radius: 8px; text-shadow: 0 1px 2px #000; }
#timer.low { color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

#shieldHint { position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #8fd8ff;
  background: rgba(20,60,90,.45); border: 1px solid rgba(120,200,255,.4);
  padding: 5px 16px; border-radius: 20px; text-shadow: 0 1px 2px #000;
  animation: pulse 1.2s infinite; }

#leaderboard { position: absolute; top: 16px; right: 16px; width: 220px;
  background: rgba(10,12,18,.55); border-radius: 8px; padding: 10px 12px; }
.lb-title { font-size: 11px; letter-spacing: 2px; color: #9aa3b2; margin-bottom: 6px; }
#lb-list { list-style: none; }
#lb-list li { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
#lb-list li.me { color: var(--accent); font-weight: 700; }
#lb-list li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
#lb-list li .bot-tag { color: #6b7280; font-size: 10px; margin-left: 4px; }
#lb-list li .sc { font-weight: 700; }

#killfeed { position: absolute; top: 70px; right: 16px; width: 280px; text-align: right;
  display: flex; flex-direction: column; gap: 4px; }
.kf { font-size: 13px; background: rgba(10,12,18,.5); padding: 3px 8px; border-radius: 5px;
  align-self: flex-end; animation: kfin .2s; }
.kf .k { color: var(--good); font-weight: 700; }
.kf .v { color: #cbd2dd; }
@keyframes kfin { from { opacity: 0; transform: translateX(20px); } }

#bottombar { position: absolute; bottom: 22px; left: 28px; right: 28px;
  display: flex; justify-content: space-between; align-items: flex-end; }
#healthWrap { display: flex; align-items: center; gap: 12px; }
#healthBar { width: 240px; height: 16px; background: rgba(0,0,0,.5); border-radius: 8px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
#healthFill { height: 100%; width: 100%; background: linear-gradient(90deg,#4ade80,#22c55e); transition: width .12s; }
#healthText { font-size: 26px; font-weight: 800; min-width: 50px; text-shadow: 0 1px 2px #000; }
#weaponBox { text-align: right; }
#weaponName { font-size: 13px; letter-spacing: 2px; color: #9aa3b2; }
#ammo { font-size: 32px; font-weight: 800; text-shadow: 0 1px 2px #000; }
#ammoMax, #ammoSep { color: #9aa3b2; font-size: 22px; }
#ammo.reloading { color: #ffb86b; }

#pausedHint { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; letter-spacing: 2px; color: #fff; background: rgba(0,0,0,.45); z-index: 40; }

/* ---------------- PC specs (start screen) ---------------- */
#specs { margin-top: 22px; text-align: left; font-size: 13px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.02); }
#specs summary { cursor: pointer; padding: 10px 14px; color: #cbd2dd; letter-spacing: 1px;
  font-weight: 600; list-style: none; }
#specs summary::-webkit-details-marker { display: none; }
#specs summary::after { content: ' ▾'; color: #9aa3b2; }
#specs[open] summary::after { content: ' ▴'; }
.spec-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 4px 16px 14px; }
.spec-grid span { color: #9aa3b2; white-space: nowrap; }
.spec-grid b { color: #e8edf5; font-weight: 600; }

/* ---------------- Touch controls (mobile) ---------------- */
#touchHelp { display: none; }            /* shown only on touch devices */
body.touch #pcControls { display: none; }
body.touch #touchHelp { display: grid; }

#touchControls { position: fixed; inset: 0; z-index: 30; touch-action: none; }
#joyBase { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px;
  border-radius: 50%; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.18);
  pointer-events: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.4); }
.touch-btn { position: absolute; border: none; border-radius: 50%; color: #fff; font-weight: 800;
  letter-spacing: 1px; background: rgba(255,90,60,.32); border: 2px solid rgba(255,140,110,.55);
  -webkit-tap-highlight-color: transparent; touch-action: none; }
.touch-btn.active { background: rgba(255,90,60,.6); }
#btnFire { right: 28px; bottom: 110px; width: 110px; height: 110px; font-size: 18px; }
#btnJump { right: 150px; bottom: 70px; width: 76px; height: 76px; font-size: 16px;
  background: rgba(90,160,255,.28); border-color: rgba(140,200,255,.55); }
#btnReload { right: 40px; bottom: 232px; width: 76px; height: 76px; font-size: 15px;
  background: rgba(90,160,255,.28); border-color: rgba(140,200,255,.55); }