* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #6a9bd1;
  position: fixed; inset: 0; overscroll-behavior: none; /* lock mobile scroll/bounce */
}
body {
  font-family: 'VT323', 'Trebuchet MS', monospace;
  font-size: 21px;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#game {
  position: fixed; inset: 0; display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.hidden { display: none !important; }

/* Music toggle (small, fixed; shown only in the menus) */
#musicBtn {
  position: fixed; top: 12px; left: 12px; z-index: 55; width: auto;
  padding: 7px 9px; font-size: 16px; line-height: 1; cursor: pointer;
  background: rgba(20,20,20,.72); color: #fff; border: 2px solid #161616;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.5);
}
#musicBtn.off { filter: grayscale(1) brightness(.7); }

/* Minecraft beveled border used on panels & buttons */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 16px 12px;
  -webkit-overflow-scrolling: touch;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, rgba(0,0,0,.32) 2px 4px),
    radial-gradient(circle at 50% 30%, #4a6b3a, #1c2417 90%);
}
/* Menu shows the live map orbiting behind it — just a soft vignette for contrast */
#menu, #authScreen { background: radial-gradient(circle at 50% 45%, rgba(8,10,14,.12), rgba(8,10,14,.6)); }
.panel {
  background: rgba(40, 40, 40, .94);
  border: 4px solid #161616;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.16), inset -3px -3px 0 rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.55);
  padding: 30px 34px;
  width: min(460px, 94vw);
  margin: auto;
  text-align: center;
}
.panel h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px; line-height: 1.5; color: #fcfcfc;
  text-shadow: 3px 3px 0 #3a3a3a; margin-bottom: 14px;
}
.panel h2 { font-family: 'Press Start 2P', monospace; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.sub { color: #b9c4a8; font-size: 22px; margin-bottom: 18px; }

/* ---- Auth screen: Google + guest buttons ---- */
#googleSignIn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; margin-bottom: 12px; font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  background: #f5f5f5; color: #2a2a2a; border: 3px solid #161616; cursor: pointer;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.7), inset -2px -2px 0 rgba(0,0,0,.25); text-shadow: none;
}
#googleSignIn:hover { background: #fff; }
#googleSignIn:disabled { opacity: .6; cursor: default; }
#googleSignIn img { width: 20px; height: 20px; }
/* Connect Wallet — Phantom pink, sits between Google and Guest. Higher-
   specificity selector (#authScreen #walletSignIn) so it always beats the
   generic green `button` base, even past a stale-cache fallback. */
#authScreen #walletSignIn {
  width: 100%; display: block; text-align: center;
  padding: 12px; margin-bottom: 12px; font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px; line-height: 1.5;
  background: #df4d9b; color: #fff; border: 3px solid #161616; cursor: pointer;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.28), inset -2px -2px 0 rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
#authScreen #walletSignIn:hover { background: #ec5fab; }
#authScreen #walletSignIn:disabled { opacity: .6; cursor: default; }
#authScreen #walletSignIn small { display: block; margin-top: 5px; font-family: 'VT323', monospace; font-size: 14px; font-weight: normal; letter-spacing: 0; line-height: 1.2; text-transform: none; opacity: .9; }
.wallet-status { min-height: 16px; margin: -4px 0 10px; font-family: 'VT323', monospace; font-size: 16px; color: #ffc4e6; text-align: center; }

#guestBtn { width: 100%; } /* inherits the green PLAY-button look */

/* Matchmaking splash (brief, on PLAY) */
#matchmaking { align-items: center; }
.mm-box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mm-spinner { width: 48px; height: 48px; border: 5px solid rgba(255,255,255,.18); border-top-color: #8fd06a; border-radius: 50%; animation: mm-spin .9s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-title { font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: 1px; color: #9be08a; text-shadow: 0 2px 0 #1a2412; }
.mm-sub { font-family: 'VT323', monospace; font-size: 19px; color: #cdd8c4; }
#guestBtn small { display: block; margin-top: 5px; font-family: 'VT323', monospace; font-size: 14px; font-weight: normal; letter-spacing: 0; text-transform: none; opacity: .8; }

/* ---- Lobby profile card (avatar + name) ---- */
#profileCard {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 10px; background: rgba(20,20,20,.55); border: 3px solid #161616;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.1), inset -2px -2px 0 rgba(0,0,0,.4);
}
.player-avatar {
  width: 52px; height: 52px; flex: 0 0 52px; background: #1c2417;
  border: 3px solid #0c0c0c; display: flex; align-items: center; justify-content: center;
}
.player-avatar svg, .player-avatar canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#profileCard .pInfo { flex: 1; min-width: 0; text-align: left; }
#profileCard #nameInput { margin-bottom: 6px; }
#profileMeta { font-family: 'VT323', monospace; font-size: 19px; color: #b9c4a8; white-space: nowrap; }
#profileMeta .coins { color: #ffd479; }
#profileCard #walletInput {
  width: 100%; margin-top: 6px; padding: 6px 10px;
  font-family: 'VT323', monospace; font-size: 16px; color: #cfe0ff;
  background: #0d0d0d; border: 2px solid #2a3550; outline: none;
}
#profileCard #walletInput::placeholder { color: #6a7488; }
#profileCard #walletInput:focus { border-color: #4a82c0; }
#profileCard #walletInput.ok { border-color: #6aa84a; }
#profileCard #walletInput.bad { border-color: #c0392b; }
#shopBtn {
  width: auto; flex: 0 0 auto; padding: 8px 10px; font-family: 'Press Start 2P', monospace; font-size: 10px;
  background: #b9952f; border: 2px solid #161616; color: #2a210a; cursor: pointer; text-shadow: none; white-space: nowrap;
}
#shopBtn:hover { background: #d4ac38; }
#switchBtn {
  width: auto; flex: 0 0 auto; padding: 8px 12px; font-family: 'Press Start 2P', monospace; font-size: 12px;
  background: #3a3a3a; border: 2px solid #161616; color: #d8d8d8; cursor: pointer; text-shadow: none;
}
#switchBtn:hover { background: #4a4a4a; }

/* ---- Store modal ---- */
#storeModal .panel.store { width: min(560px, 95vw); }
#storeModal h2 { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #ffd479; margin-bottom: 8px; }
#storeBalance { font-family: 'VT323', monospace; font-size: 22px; color: #ffd479; margin-bottom: 14px; }
#storePreview { display: flex; justify-content: center; margin-bottom: 10px; }
#previewCanvas {
  width: 170px; height: 232px; image-rendering: auto;
  background: radial-gradient(circle at 50% 38%, rgba(120,150,90,.22), rgba(8,10,14,.5));
  border: 3px solid #161616; box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4);
}
#storeTabs { display: flex; gap: 8px; margin-bottom: 12px; }
.stab {
  flex: 1; padding: 9px; font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  background: #2f2f2f; border: 2px solid #161616; color: #b8b8b8; cursor: pointer; text-shadow: none;
}
.stab.sel { background: #6aa84a; color: #fff; }
#storeItems {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
  max-height: 38vh; overflow-y: auto; padding-right: 4px;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
}
.storeItem {
  display: flex; align-items: center; gap: 12px; padding: 10px; text-align: left;
  background: rgba(20,20,20,.55); border: 3px solid #161616;
}
.storeItem .si-icon { width: 48px; height: 48px; flex: 0 0 48px; background: #1c2417; border: 2px solid #0c0c0c; }
.storeItem .si-icon canvas, .storeItem .si-icon svg { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.storeItem .si-body { flex: 1; min-width: 0; }
.storeItem .si-name { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff; }
.storeItem .si-desc { font-family: 'VT323', monospace; font-size: 18px; color: #9fb08c; }
.storeItem .si-action { width: auto; flex: 0 0 auto; padding: 9px 12px; font-size: 11px; }
.storeItem .si-action.buy { background: #6aa84a; }
.storeItem .si-action.equip { background: #c79a2f; color: #221a06; }
.storeItem .si-action.equipped { background: #2f3a26; color: #9fe08a; cursor: default; }
.storeItem .si-action.owned { background: #3a3a3a; color: #cfcfcf; cursor: default; }
.storeItem .si-action.cant { background: #5a3030; color: #e7b3ad; cursor: default; }
.storeItem .si-action.sol { background: #6d4bd6; color: #fff; white-space: nowrap; }
.storeItem .si-action.sol:hover { background: #7d5be6; }
.storeItem .si-icon.coinpack { display: flex; align-items: center; justify-content: center; font-size: 28px; }

/* Solana Pay QR / deeplink panel (shown when no injected Phantom is available) */
.solpay { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px; text-align: center; }
.sp-title { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffd479; line-height: 1.5; }
.sp-qr { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 6px; border: 3px solid #161616; }
.sp-hint { font-family: 'VT323', monospace; font-size: 18px; color: #b9c4a8; max-width: 280px; }
.sp-open { display: inline-block; width: auto; padding: 10px 18px; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff; background: #6d4bd6; border: 3px solid #3a2585; text-decoration: none; box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.4); }
.sp-open:hover { background: #7d5be6; }
.sp-wait { font-family: 'VT323', monospace; font-size: 18px; color: #9fe0ff; }
.sp-cancel { width: auto; padding: 8px 16px; background: #3a3a3a; border-color: #161616; }
#storeNote { font-family: 'VT323', monospace; font-size: 18px; color: #e0b35a; min-height: 20px; margin-bottom: 8px; }
#storeClose { background: #3a3a3a; border-color: #161616; }

#nameInput {
  width: 100%; padding: 12px 14px; font-family: 'VT323', monospace; font-size: 24px;
  outline: none; color: #fff; background: #0d0d0d;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6);
  margin-bottom: 16px; text-align: center;
}
#nameInput:focus { border-color: #fff; }

button {
  width: 100%; padding: 13px; font-family: 'Press Start 2P', monospace;
  font-size: 14px; letter-spacing: 1px; cursor: pointer; color: #fff;
  background: #6aa84a; border: 3px solid #25351b;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.4);
  text-shadow: 2px 2px 0 #2c401d;
}
button:hover { background: #79bd55; }
button:active { box-shadow: inset -2px -2px 0 rgba(255,255,255,.25), inset 2px 2px 0 rgba(0,0,0,.4); }

/* Tournament / season panel (inline in the lobby) */
#tournament { margin-bottom: 14px; padding: 10px; text-align: left; background: rgba(20,20,20,.55); border: 3px solid #161616; box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4); }
#tournament:empty { display: none; }
.trn-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.trn-tab { width: auto; flex: 0 0 auto; padding: 5px 12px; font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; background: #2f2f2f; border: 2px solid #161616; color: #b8b8b8; text-shadow: none; cursor: pointer; }
.trn-tab.sel { background: #6aa84a; color: #fff; }
.trn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.trn-title { font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px; color: #ffd479; }
.trn-timer { font-family: 'VT323', monospace; font-size: 21px; color: #9fe0ff; }
.trn-tokens { font-family: 'VT323', monospace; font-size: 21px; color: #c0a8ff; margin-left: auto; }
.trn-won { font-family: 'VT323', monospace; font-size: 18px; color: #ffe08a; background: rgba(130,95,20,.28); border-left: 3px solid #d9b021; padding: 4px 8px; margin-bottom: 6px; }
.trn-sub { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; color: #8fa07c; margin-bottom: 6px; }
.trn-board { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px 18px; max-height: 30vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.trn-board li { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; font-family: 'VT323', monospace; font-size: 18px; color: #d8e0cf; padding: 1px 4px; }
.trn-board li.me { color: #ffd479; background: rgba(106,168,74,.18); }
.trn-board .tr-rank { color: #8a9a78; text-align: right; }
.trn-board .tr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-board .tr-kills { color: #7ee787; min-width: 26px; text-align: right; }
.trn-board .tr-prize { color: #c0a8ff; min-width: 38px; text-align: right; }
.trn-board .trn-empty { display: block; grid-column: 1 / -1; color: #9fb08c; }
.trn-you { font-family: 'VT323', monospace; font-size: 16px; color: #c0c8b4; margin-top: 4px; }

/* Weapon select */
/* Lobby tabs: LOADOUT ↔ TOURNAMENT */
#lobbyTabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ltab { flex: 1; padding: 9px; font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px; background: #2f2f2f; border: 2px solid #161616; color: #b8b8b8; cursor: pointer; text-shadow: none; }
.ltab.sel { background: #6aa84a; color: #fff; }

.wpnLabel { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px; color: #c6d3a6; margin: 4px 0 10px; }
.wpnLabel .free { color: #7ee787; }
#weaponSelect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.wpn {
  position: relative;
  width: 100%; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #3a3a3a; border: 3px solid #161616; cursor: pointer; color: #e7ecda;
  font-family: 'VT323', monospace; text-shadow: none;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14), inset -2px -2px 0 rgba(0,0,0,.5);
}
.wpn .wslot { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; line-height: 17px; text-align: center;
  font-family: 'Press Start 2P', monospace; font-size: 9px; background: #6aa84a; color: #fff; border: 1px solid #16170d; }
.wpn:hover { background: #474747; }
.wpn.locked { opacity: .5; }
.wpn.locked:hover { opacity: .7; background: #4a3f2a; }
.wpn.sel { border-color: #6aa84a; color: #fff; box-shadow: inset 2px 2px 0 rgba(120,200,90,.35), inset -2px -2px 0 rgba(0,0,0,.5), 0 0 0 2px #6aa84a; }
.wpn .wicon { font-size: 26px; line-height: 0; }
.wpn .wicon svg { width: 56px; height: 28px; display: block; image-rendering: pixelated; }
.wpn .wname { font-size: 16px; }
#btnWeapon svg { width: 42px; height: 21px; image-rendering: pixelated; }

/* Sniper scope */
#scope {
  position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, transparent 0 27%, rgba(0,0,0,.55) 29%, #000 40%);
  transition: opacity .06s;
}
#scope::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(#0a0a0a, #0a0a0a) center/2px 100% no-repeat,
    linear-gradient(#0a0a0a, #0a0a0a) center/100% 2px no-repeat;
}
#weaponHint { font-size: 16px; color: #9aa6c0; margin-top: 4px; }

.hint { margin-top: 18px; font-size: 19px; line-height: 1.5; color: #9fb08c; }
.hint strong { color: #e8e8c0; }
.conn { margin-top: 14px; font-size: 18px; color: #aaa; }
.conn.ok { color: #7ee787; }
.conn.bad { color: #ff8a8a; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#fff,#fff) center/2px 12px no-repeat,
    linear-gradient(#fff,#fff) center/12px 2px no-repeat;
  opacity: .9; mix-blend-mode: difference;
}
#hitMarker {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  transform: translate(-50%,-50%) rotate(45deg);
  background:
    linear-gradient(#ff4d4d,#ff4d4d) center/3px 26px no-repeat,
    linear-gradient(#ff4d4d,#ff4d4d) center/26px 3px no-repeat;
  opacity: 0; transition: opacity .05s;
}
#hitMarker.show { opacity: 1; }

/* Minecraft "inventory panel" look for HUD boxes */
#leaderboard {
  position: absolute; top: 58px; right: 14px; width: 220px;
  background: rgba(20,20,20,.72); padding: 8px 10px;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.5);
}
.lb-title { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px; color: #c6d3a6; margin-bottom: 7px; }
#lbList { list-style: none; }
#lbList li {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 20px; padding: 1px 0; color: #e7ecda;
}
#lbList li.me { color: #ffd479; }
#lbList li .k { color: #7ee787; }

/* Chat feed (top-left) + the kill feed stacked just below it */
#chatLog { position: absolute; top: 12px; left: 14px; width: 360px; display: flex; flex-direction: column; gap: 3px; }
.chatMsg {
  font-size: 18px; background: rgba(12,14,20,.62); padding: 2px 8px; align-self: flex-start;
  max-width: 100%; word-wrap: break-word; animation: chatFade 11s forwards; color: #e8ecf4;
}
.chatMsg .cn { font-weight: bold; }
@keyframes chatFade { 0%,88%{opacity:1} 100%{opacity:0} }
#chatInput {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  width: min(560px, 80vw); display: none; pointer-events: auto;
  font-family: 'VT323', monospace; font-size: 22px; color: #fff; text-align: left;
  padding: 8px 12px; background: rgba(8,8,10,.9); border: 2px solid #6aa84a; outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}
#chatInput.active { display: block; }

#killfeed { position: absolute; top: 170px; left: 14px; width: 340px; display: flex; flex-direction: column; gap: 4px; }
.kf {
  font-size: 19px; background: rgba(20,20,20,.6); padding: 2px 8px; align-self: flex-start;
  border-left: 3px solid #6aa84a; animation: fade 4s forwards;
}
.kf b { color: #ffd479; }
.kf .hs { color: #ff7676; }
.kf .kf-big { color: #ffd479; font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 1px; }
@keyframes fade { 0%,80%{opacity:1} 100%{opacity:0} }

/* ---- Arcade announcements (streaks / multikills / revenge) ---- */
#announce {
  position: absolute; top: 20%; left: 0; right: 0; text-align: center;
  pointer-events: none; opacity: 0; transform: scale(.7);
}
#announce.show { animation: annPop 1.6s ease-out forwards; }
#announce .ann-main {
  font-family: 'Press Start 2P', monospace; font-size: 34px; letter-spacing: 2px;
  color: #ffcf33; text-shadow: 0 0 14px rgba(255,140,0,.8), 4px 4px 0 #5a2a00;
}
#announce .ann-sub {
  font-family: 'Press Start 2P', monospace; font-size: 16px; letter-spacing: 1px;
  color: #ffe9a8; text-shadow: 3px 3px 0 #3a2a00; margin-top: 8px;
}
@keyframes annPop {
  0% { opacity: 0; transform: scale(.6); }
  14% { opacity: 1; transform: scale(1.12); }
  24% { transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* Kill confirmation — punchy on-screen pop when YOU get a kill */
#killConfirm {
  position: absolute; top: 33%; left: 0; right: 0; text-align: center;
  pointer-events: none; opacity: 0; z-index: 12;
}
#killConfirm.show { animation: killPop 1.25s cubic-bezier(.2,1.3,.4,1) forwards; }
#killConfirm .kc-main {
  font-family: 'Press Start 2P', monospace; font-size: 30px; letter-spacing: 3px;
  color: #ff5847; text-shadow: 4px 4px 0 #4a0c06, 0 0 18px rgba(255,80,60,.85);
}
#killConfirm .kc-sub {
  font-family: 'VT323', monospace; font-size: 28px; letter-spacing: 1px;
  color: #ffe28a; text-shadow: 0 2px 0 #3a2a00; margin-top: 6px;
}
#killConfirm.kc-hs .kc-main { color: #ffd24a; text-shadow: 4px 4px 0 #5a3c00, 0 0 20px rgba(255,210,74,.95); }
@keyframes killPop {
  0%   { opacity: 0; transform: scale(1.7) rotate(-3deg); }
  14%  { opacity: 1; transform: scale(.94) rotate(0deg); }
  24%  { transform: scale(1.06); }
  34%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(-16px); }
}
/* Screen-edge flash on a kill */
#killFlash {
  position: fixed; inset: 0; pointer-events: none; z-index: 11; opacity: 0;
}
#killFlash.show { animation: killFlash .5s ease-out; }
@keyframes killFlash {
  0%   { opacity: 1; box-shadow: inset 0 0 180px 60px rgba(255,70,45,.55); }
  100% { opacity: 0; box-shadow: inset 0 0 180px 60px rgba(255,70,45,0); }
}
/* Floating "+100" / "+150 HEADSHOT" score popup near the crosshair */
.scorePop {
  position: fixed; left: 50%; top: 50%; z-index: 13; pointer-events: none; white-space: nowrap;
  font-family: 'Press Start 2P', monospace; font-size: 15px; letter-spacing: 1px;
  color: #9be08a; text-shadow: 2px 2px 0 #0a2a06, 0 0 8px rgba(120,255,120,.6);
  animation: scoreFloat 1s ease-out forwards;
}
.scorePop.hs { color: #ffd24a; text-shadow: 2px 2px 0 #4a3400, 0 0 10px rgba(255,210,74,.85); }
@keyframes scoreFloat {
  0%   { opacity: 0; transform: translate(-50%,-50%) translateX(var(--dx,0)) translateY(10px) scale(.7); }
  16%  { opacity: 1; transform: translate(-50%,-50%) translateX(var(--dx,0)) translateY(-2px) scale(1.12); }
  30%  { transform: translate(-50%,-50%) translateX(var(--dx,0)) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) translateX(var(--dx,0)) translateY(-64px) scale(1); }
}

/* ---- King of the Hill indicator ---- */
#koth {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  padding: 7px 12px; background: rgba(20,20,20,.62); border: 2px solid #b9952f;
  color: #ffe08a; white-space: nowrap; opacity: 0; transition: opacity .2s;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.12);
}
#koth.show { opacity: 1; }
#koth.mine { border-color: #6aa84a; color: #c9f5a0; box-shadow: 0 0 12px rgba(106,168,74,.6); }
#koth.contested { border-color: #d05a5a; color: #ffb4b4; }

#bottomLeft { position: absolute; left: 16px; bottom: 14px; }
#hearts { display: flex; gap: 2px; margin-bottom: 6px; }
.heart {
  font-size: 26px; line-height: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}
.heart.on { color: #e23b3b; }
.heart.off { color: #2e2222; }
#weapon { font-family: 'Press Start 2P', monospace; font-size: 13px; color: #ffd479; text-shadow: 2px 2px 0 #000; }
#weapon #ammo { color: #e7ecda; margin-left: 8px; }

#damageVignette {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 170px 45px rgba(255,0,0,.7); transition: opacity .12s;
}

/* Dramatic death */
#deathFx {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(150,0,0,.55), rgba(90,0,0,.92));
}
#deathFx.flash { animation: deathflash 0.9s ease-out forwards; }
@keyframes deathflash { 0% { opacity: 0; } 9% { opacity: 1; } 100% { opacity: 0; } }

#deathScreen { background: radial-gradient(circle at center, rgba(96,12,12,.72), rgba(18,2,2,.95)); }
#deathScreen .panel {
  border-color: #571212;
  box-shadow: inset 3px 3px 0 rgba(255,90,90,.16), inset -3px -3px 0 rgba(0,0,0,.6), 0 16px 48px rgba(0,0,0,.65);
}
#deathBig {
  font-family: 'Press Start 2P', monospace; font-size: 30px; letter-spacing: 2px;
  color: #d63b2f; text-shadow: 3px 3px 0 #2a0606; margin-bottom: 14px;
  animation: deathpulse 1.6s ease-in-out infinite;
}
@keyframes deathpulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
#deathScreen #deathText { color: #e7b3ad; font-size: 20px; margin-bottom: 20px; }
#deathScreen #respawnBtn { background: #b5392f; border-color: #3a0f0b; box-shadow: inset 2px 2px 0 rgba(255,150,140,.3), inset -2px -2px 0 rgba(0,0,0,.45); }
#deathScreen #respawnBtn:hover { background: #cc4338; }

/* Touch controls */
/* The overlay itself must not capture touches (it would sit above the HUD's
   MENU button) — only the stick + buttons below opt back in with pointer-events. */
#touchControls { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#moveStick {
  position: absolute; left: calc(24px + env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom));
  width: 132px; height: 132px;
  border-radius: 50%; background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.22); pointer-events: auto;
}
#moveKnob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px;
  margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.38);
}
.touchBtn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff;
  pointer-events: auto; border: 3px solid rgba(0,0,0,.6); border-radius: 50%;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.22), inset -2px -2px 0 rgba(0,0,0,.45);
  text-shadow: 2px 2px 0 #000; -webkit-user-select: none; user-select: none;
}
.touchBtn:active { filter: brightness(1.3); }
/* right-hand thumb cluster (safe-area aware) */
#btnFire { right: calc(24px + env(safe-area-inset-right)); bottom: calc(86px + env(safe-area-inset-bottom)); width: 104px; height: 104px; background: rgba(192,57,43,.55); }
#btnJump { right: calc(140px + env(safe-area-inset-right)); bottom: calc(34px + env(safe-area-inset-bottom)); width: 78px; height: 78px; background: rgba(106,168,74,.55); }
#btnAim { right: calc(36px + env(safe-area-inset-right)); bottom: calc(206px + env(safe-area-inset-bottom)); width: 78px; height: 78px; background: rgba(52,73,94,.6); }
#btnWeapon { right: calc(150px + env(safe-area-inset-right)); bottom: calc(126px + env(safe-area-inset-bottom)); width: 64px; height: 64px; font-size: 26px; background: rgba(40,40,46,.6); }
#btnChat { right: calc(150px + env(safe-area-inset-right)); bottom: calc(206px + env(safe-area-inset-bottom)); width: 64px; height: 64px; background: rgba(40,40,46,.6); padding: 0; }
/* grenade throws — left side, above the move stick */
#btnFrag { left: calc(40px + env(safe-area-inset-left)); bottom: calc(178px + env(safe-area-inset-bottom)); width: 58px; height: 58px; font-size: 24px; background: rgba(20,20,24,.28); }
#btnSmoke { left: calc(116px + env(safe-area-inset-left)); bottom: calc(178px + env(safe-area-inset-bottom)); width: 58px; height: 58px; font-size: 24px; background: rgba(20,20,24,.28); }
#btnChat svg { width: 34px; height: 34px; image-rendering: pixelated; }
#btnFrag svg, #btnSmoke svg { width: 32px; height: 32px; image-rendering: pixelated; }

/* In-game "exit to main menu" button (top-right, above the leaderboard) */
#menuBtn {
  position: absolute; top: 12px; right: 14px; left: auto; width: auto; z-index: 25; pointer-events: auto;
  font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px;
  color: #e7ecda; background: rgba(20,20,20,.74); border: 3px solid #000; cursor: pointer;
  padding: 9px 12px; -webkit-user-select: none; user-select: none;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.5);
}
#menuBtn:hover { background: rgba(44,44,50,.88); color: #fff; }
#menuBtn:active { filter: brightness(1.25); }
#deathScreen #menuFromDeathBtn { background: #3a3f33; border-color: #14140e; margin-top: 10px; }
#deathScreen #menuFromDeathBtn:hover { background: #4a5142; }

/* ---- Touch devices: relocate HUD clear of the on-screen controls ---- */
@media (pointer: coarse) {
  #weaponHint { display: none; }                 /* number-key hint is irrelevant */
  #bottomLeft { top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); }
  #killfeed { top: 70px; left: 10px; width: 50vw; max-width: 240px; }
  #chatLog { top: 150px; left: 10px; width: 64vw; max-width: 300px; }
  .chatMsg { font-size: 15px; }
  #chatInput { bottom: 42vh; width: 88vw; font-size: 20px; } /* above the on-screen keyboard */
  #leaderboard { top: calc(52px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); }
  #menuBtn { top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); font-size: 11px; padding: 8px 10px; }
}

/* ---- Small / short viewports (phones, landscape): compact everything ---- */
@media (max-width: 820px), (max-height: 560px) {
  body { font-size: 18px; }
  .panel { padding: 16px 16px; width: min(440px, 95vw); max-height: 92vh; overflow-y: auto; }
  .panel h1 { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
  .panel h2 { font-size: 13px; line-height: 1.5; }
  .sub { font-size: 17px; margin-bottom: 10px; }
  #nameInput { font-size: 20px; padding: 9px 12px; margin-bottom: 10px; }
  .wpnLabel { font-size: 8px; margin: 2px 0 8px; }
  #weaponSelect { gap: 6px; margin-bottom: 12px; }
  .wpn { padding: 7px 4px; gap: 3px; }
  .wpn .wicon { font-size: 22px; }
  .wpn .wname { font-size: 14px; }
  button { font-size: 12px; padding: 12px; }
  .hint { font-size: 14px; margin-top: 12px; line-height: 1.45; }
  .conn { font-size: 16px; }

  #leaderboard { width: 148px; padding: 5px 7px; }
  .lb-title { font-size: 8px; }
  #lbList li { font-size: 15px; }
  .kf { font-size: 14px; }
  #bottomLeft { left: 10px; }
  .heart { font-size: 19px; }
  #weapon { font-size: 11px; }
}

/* ---- Short screens (landscape phones): drop optional text so PLAY fits ---- */
@media (max-height: 560px) {
  .panel { padding: 12px 16px; }
  .panel h1 { font-size: 13px; margin-bottom: 6px; }
  .sub, .hint { display: none; }
  .wpnLabel { margin: 0 0 6px; }
  #weaponSelect { margin-bottom: 10px; }
  #nameInput { margin-bottom: 8px; }
}

/* ---- Landscape phones: trade scarce height for abundant width ---- */
@media (max-height: 560px) and (orientation: landscape) {
  .overlay { padding: 8px; }
  .panel { width: min(700px, 96vw); }
  /* 4 columns instead of 2 → half the rows, so the panel is short enough to fit */
  #weaponSelect { grid-template-columns: repeat(4, 1fr); }
  .wpn { padding: 6px 4px; }
  .wpn .wicon svg { width: 48px; height: 24px; }
  .wpn .wname { font-size: 13px; }
}

/* The lobby character preview only appears in the landscape two-column layout */
#lobbyPreview { display: none; }

/* ---- Landscape: the wide two-column layout, used for ALL landscape screens
   (phones, tablets, desktop) so the menu never drops to the narrow portrait
   panel. Panel heights are capped so they don't get huge on tall screens. ---- */
@media (orientation: landscape) {
  .overlay { padding: 10px; align-items: center; }

  /* LOBBY: mirrors the store — profile bar on top, framed character on the left,
     weapon grid on the right, PLAY across the bottom */
  #menu .panel {
    width: min(960px, 97vw); height: min(94vh, 600px); max-height: 94vh; overflow: hidden; padding: 12px 20px;
    display: grid; column-gap: 22px; row-gap: 7px;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "profile profile"
      "prev    tabs"
      "prev    content"
      "play    play";
  }
  #menu #lobbyTabs { grid-area: tabs; margin: 0; }
  /* LOADOUT and TOURNAMENT share the same cell — only the active one is shown */
  #menu #loadoutPane { grid-area: content; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  #menu #tournament { grid-area: content; margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 7px 10px; }
  #menu #tournament .trn-board { grid-template-columns: 1fr; align-content: start; flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; font-size: 15px; gap: 2px; }
  #menu #tournament .trn-board li { padding: 1px 4px; line-height: 1.3; }
  #menu .trn-head { margin-bottom: 3px; }
  #menu .trn-title { font-size: 10px; }
  #menu .trn-timer, #menu .trn-tokens { font-size: 18px; }
  #menu .trn-tabs { margin-bottom: 4px; }
  #menu .trn-sub { margin-bottom: 3px; }
  #menu .trn-won { display: none; } /* save a line in tight landscape; WINNERS tab shows placement */
  /* keep the profile bar + weapon cards compact so a full weapon row stays visible */
  #menu #profileCard #nameInput { padding: 7px 12px; font-size: 19px; }
  #menu .wpn { padding: 6px; }
  #menu #profileCard {
    grid-area: profile; margin: 0;
    display: grid; column-gap: 12px; row-gap: 7px; align-items: center;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "avatar name shop back"
      "avatar meta meta meta"
      "avatar wallet wallet wallet";
  }
  #menu #profileCard #avatar { grid-area: avatar; align-self: start; }
  #menu #profileCard .pInfo { display: contents; } /* name + meta become card-grid items */
  #menu #profileCard #nameInput { grid-area: name; margin: 0; padding: 9px 14px; font-size: 20px; text-align: left; }
  #menu #profileCard #profileMeta { grid-area: meta; align-self: start; text-align: left; padding-left: 2px; }
  #menu #profileCard #walletInput { grid-area: wallet; margin-top: 2px; }
  #menu #profileCard #shopBtn { grid-area: shop; }
  #menu #profileCard #switchBtn { grid-area: back; }
  #menu #lobbyPreview {
    grid-area: prev; display: flex; align-items: center; justify-content: center;
    min-height: 0; overflow: hidden;
    background: radial-gradient(circle at 50% 38%, rgba(120,150,90,.22), rgba(8,10,14,.5));
    border: 3px solid #161616; box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4);
  }
  #menu #lobbyPreview canvas { width: auto; height: 100%; max-width: 100%; display: block; }
  #menu #loadoutPane .wpnLabel { margin: 0 0 6px; text-align: left; }
  #menu #weaponSelect{
    grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0;
    overflow-y: auto; min-height: 0; flex: 1 1 auto; align-content: start; padding-right: 4px;
  }
  #menu #playBtn     { grid-area: play; margin: 0; }
  #menu .wpn { padding: 8px 6px; }
  #menu .wpn .wicon svg { width: 50px; height: 25px; }
  #menu .hint, #menu #connStatus { display: none; }

  /* AUTH: centered, slightly wider */
  #authScreen .panel { width: min(560px, 94vw); max-height: 96vh; overflow-y: auto; padding: 16px 22px; }
  #authScreen .conn { display: none; }

  /* STORE: bigger preview on the left, tabs + scrolling list filling the right */
  #storeModal .panel.store {
    width: min(960px, 97vw); height: min(94vh, 640px); max-height: 94vh; overflow: hidden; padding: 14px 22px;
    display: grid; column-gap: 22px; align-items: start;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "title  title"
      "prev   tabs"
      "prev   items"
      "note   note"
      "balance close";
  }
  #storeModal h2 { grid-area: title; margin: 0 0 8px; }
  #storePreview { grid-area: prev; margin: 0; }
  #previewCanvas { width: 220px; height: 290px; }
  #storeTabs { grid-area: tabs; margin: 0 0 8px; }
  #storeItems { grid-area: items; max-height: none; min-height: 0; margin: 0; align-self: stretch; }
  #storeModal #storeNote { grid-area: note; display: block; margin: 4px 0 0; min-height: 16px; }
  #storeBalance { grid-area: balance; align-self: center; margin: 8px 0 0; font-size: 16px; }
  #storeClose { grid-area: close; margin-top: 8px; }
}