* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  font-family: 'Courier New', monospace;
  background: #000;
  color: #d8d4c4;
  overflow: hidden;
  cursor: default;
}

#gameCanvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
}

/* vinheta de filme — bordas escurecidas focam o centro da tela */
#fxVignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.42) 100%);
}

/* granulação só no preset Qualidade — feTurbulence + animação no overlay
   força o compositor do Chrome a recostar o canvas WebGL todo frame */
#fxGrain {
  display: none;
  position: fixed;
  inset: -60px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 0.7s steps(3) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-25px, 15px); }
  66% { transform: translate(20px, -20px); }
  100% { transform: translate(0, 0); }
}

.hidden {
  display: none !important;
}

/* ===== TELA DE CARREGAMENTO ===== */
#loadingScreen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a0c0a 0%, #050505 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 101;
  text-align: center;
}

#loadingScreen .spinner {
  width: 64px;
  height: 64px;
  border: 3px solid rgba(200, 170, 90, 0.2);
  border-top-color: #c9a35a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-title {
  font-size: 2.5rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 18px rgba(180, 50, 30, 0.6), 0 2px 0 #000;
  margin-bottom: 0.3rem;
}

.loading-text {
  font-size: 1rem;
  color: #c95a4a;
  letter-spacing: 0.25em;
  margin-bottom: 0.5rem;
}

.loading-detail {
  font-size: 0.8rem;
  color: #777;
  min-height: 1.2em;
}

/* ===== MENU INICIAL ===== */
#menu {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a0c0a 0%, #050505 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  z-index: 100;
  text-align: center;
  overflow-y: auto;
  padding: 2rem 0;
}

#menu h1 {
  font-size: 5rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 20px rgba(180, 40, 30, 0.55), 0 2px 0 #000;
  margin-bottom: 0.5rem;
}

#menu h1 span {
  color: #c94a3a;
  text-shadow: 0 0 22px rgba(200, 60, 40, 0.55), 0 2px 0 #000;
}

.subtitle {
  color: #9f8f7f;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.instructions {
  background: rgba(180, 50, 40, 0.06);
  border: 1px solid rgba(200, 60, 45, 0.25);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
  line-height: 1.8;
  font-size: 0.9rem;
}

/* ===== SELEÇÃO NO MENU ===== */
.select-group {
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.select-group h3 {
  font-size: 0.8rem;
  color: #b08f7f;
  letter-spacing: 0.25em;
  margin-bottom: 0.6rem;
}

.options {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.opt-btn {
  background: transparent;
  border: 1px solid rgba(200, 80, 60, 0.3);
  color: #b08f7f;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transition: all 0.2s;
}

.opt-btn:hover {
  border-color: #c94a3a;
  color: #e8e2d0;
}

.opt-btn.active {
  background: rgba(180, 50, 35, 0.12);
  border-color: #c94a3a;
  color: #e8e2d0;
  box-shadow: 0 0 12px rgba(180, 50, 35, 0.25);
}

.weapon-grid {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.weapon-card {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(200, 80, 60, 0.2);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: #b08f7f;
  text-align: center;
  min-width: 140px;
}

.weapon-card:hover {
  border-color: rgba(200, 60, 40, 0.6);
  transform: translateY(-2px);
}

.weapon-card.active {
  border-color: #c94a3a;
  background: rgba(180, 50, 35, 0.1);
  box-shadow: 0 0 16px rgba(180, 50, 35, 0.3);
}

.weapon-icon {
  font-size: 2rem;
  margin-bottom: 0.3rem;
}

.weapon-name {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 0.5rem;
}

.weapon-stats {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.65rem;
  color: #8f8672;
  letter-spacing: 0.05em;
}

#startBtn, #restartBtn, #gameOverMenuBtn {
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 0.8rem 3rem;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: all 0.2s;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.4);
  box-shadow: 0 0 18px rgba(180, 50, 35, 0.22);
}

#startBtn:hover, #restartBtn:hover, #gameOverMenuBtn:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 34px rgba(200, 60, 40, 0.55);
}

.menu-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hint {
  margin-top: 1rem;
  color: #555;
  font-size: 0.8rem;
}

.secondary-btn {
  background: transparent;
  border: 1px solid rgba(200, 80, 60, 0.5);
  color: #b8a898;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 2rem;
  cursor: pointer;
  letter-spacing: 0.15em;
  transition: all 0.2s;
  border-radius: 4px;
}

.secondary-btn:hover {
  border-color: #c94a3a;
  color: #e8e2d0;
  box-shadow: 0 0 12px rgba(200, 60, 40, 0.3);
}

/* ===== MULTIPLAYER ===== */
#mpMenu, #mpLobby {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a0c0a 0%, #050505 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  text-align: center;
  padding: 2rem;
}

#mpMenu h1, #mpLobby h1 {
  font-size: 3.5rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 20px rgba(180, 40, 30, 0.55), 0 2px 0 #000;
  margin-bottom: 0.5rem;
}

#mpMenu h1 span, #mpLobby h1 span {
  color: #c94a3a;
  text-shadow: 0 0 22px rgba(200, 60, 40, 0.55), 0 2px 0 #000;
}

.mp-subtitle {
  font-size: 1.1rem;
  color: #c94a3a;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 10px rgba(180, 40, 30, 0.3);
}

.mp-subtitle span {
  color: #e8e2d0;
  font-weight: bold;
  font-size: 1.4rem;
}

.mp-hint {
  color: #7a6a5a;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.mp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mp-big-btn {
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1.2rem;
  padding: 0.7rem 2.5rem;
  cursor: pointer;
  letter-spacing: 0.15em;
  transition: all 0.2s;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.4);
  box-shadow: 0 0 14px rgba(180, 50, 35, 0.2);
  border-radius: 4px;
}

.mp-big-btn:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 24px rgba(200, 60, 40, 0.5);
}

.mp-big-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mp-divider {
  color: #555;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

.mp-join-box {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.mp-code-input {
  background: rgba(20, 8, 6, 0.8);
  border: 2px solid rgba(200, 80, 60, 0.4);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  color: #e8e2d0;
  font-family: 'Courier New', monospace;
  font-size: 1.3rem;
  font-weight: bold;
  width: 120px;
  text-align: center;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s;
}

.mp-code-input:focus {
  border-color: #c94a3a;
  box-shadow: 0 0 12px rgba(200, 60, 40, 0.3);
}

.mp-status {
  color: #9f8f7f;
  font-size: 0.85rem;
  min-height: 1.5em;
  margin: 0.5rem 0;
}

.mp-player-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
  width: 90vw;
  margin-bottom: 1.5rem;
}

.mp-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 8, 6, 0.65);
  border: 1px solid rgba(180, 50, 35, 0.18);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

.mp-player-name {
  color: #e8e2d0;
  font-weight: bold;
}

.mp-player-host {
  color: #c94a3a;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.mp-player-ready {
  color: #4a8a4a;
  font-size: 0.85rem;
}

.mp-player-not-ready {
  color: #555;
  font-size: 0.85rem;
}

.mp-lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

/* ===== HUD MULTIPLAYER: nomes dos outros jogadores ===== */
.mp-player-tag {
  position: absolute;
  color: #e8e2d0;
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.mp-player-tag.dead {
  opacity: 0.3;
}

/* ===== MENU DE PAUSA (ESC) ===== */
#pauseMenu {
  position: fixed;
  inset: 0;
  background: rgba(15, 5, 5, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  z-index: 95;
  text-align: center;
  gap: 1rem;
  overflow-y: auto;
  padding: 2rem 0;
}

#pauseMenu h2 {
  font-size: 3rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 18px rgba(180, 40, 30, 0.55);
  margin: 0;
}

#pauseMenu .select-group {
  max-width: 720px;
  width: 90vw;
}

#pauseMenu .weapon-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.pause-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.gfx-box {
  margin: 0.85rem auto 0.4rem;
  max-width: 420px;
  text-align: center;
}
.gfx-box h3 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: #8ec8ff;
  margin-bottom: 0.4rem;
}
.gfx-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.gfx-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 74, 58, 0.45);
  color: #e8e2d0;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.gfx-btn.active {
  border-color: #c94a3a;
  background: rgba(201, 74, 58, 0.25);
  color: #fff;
}
.gfx-hint {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.35rem;
  line-height: 1.4;
}
body.gfx-quality #fxGrain {
  display: block;
}

.pause-actions button {
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.15em;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
}

.pause-actions button:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 24px rgba(180, 50, 35, 0.4);
}

.pause-actions button.danger {
  border-color: #c94a3a;
  color: #c94a3a;
}

.pause-actions button.danger:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 30px rgba(180, 50, 35, 0.5);
}

/* ===== Loja de armas (tecla B) ===== */
#shopScreen {
  position: fixed;
  inset: 0;
  background: rgba(15, 5, 5, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  z-index: 97;
  text-align: center;
  gap: 0.9rem;
  overflow-y: auto;
  padding: 2rem 1rem;
}

#shopScreen h2 {
  font-size: 2.8rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 18px rgba(180, 40, 30, 0.55);
  margin: 0;
}

.shop-money {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: #b08f7f;
}

.shop-money b {
  color: #e8c46a;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  text-shadow: 0 0 14px rgba(232, 196, 106, 0.4);
  margin-left: 0.4rem;
}

.shop-money.flash-deny b {
  animation: shopDeny 0.45s;
}

@keyframes shopDeny {
  0%, 100% { color: #e8c46a; }
  30% { color: #ff3a2a; text-shadow: 0 0 20px rgba(255, 50, 30, 0.8); }
  60% { color: #ff3a2a; }
}

.shop-sub {
  max-width: 520px;
  color: #9a8f7a;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0;
}

.shop-grid {
  max-width: 860px;
  width: 92vw;
}

.shop-card {
  min-width: 170px;
  padding: 1.1rem 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.shop-card .weapon-stats {
  margin-bottom: 0.35rem;
}

.shop-card .shop-mags {
  font-size: 0.7rem;
  color: #9a8f7a;
  letter-spacing: 0.12em;
}

.shop-card .shop-price {
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: bold;
  color: #e8c46a;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(232, 196, 106, 0.35);
  border-radius: 3px;
}

.shop-card:hover .shop-price {
  border-color: #e8c46a;
  box-shadow: 0 0 14px rgba(232, 196, 106, 0.25);
}

/* arma já comprada: preço vira "resuprir munição" mais barato */
.shop-card.owned {
  border-color: rgba(120, 160, 90, 0.45);
}

.shop-card.owned .shop-price {
  color: #a8d88a;
  border-color: rgba(140, 190, 110, 0.4);
}

.shop-card.owned:hover .shop-price {
  border-color: #a8d88a;
  box-shadow: 0 0 14px rgba(140, 190, 110, 0.25);
}

/* arma equipada agora */
.shop-card.equipped {
  border-color: #c94a3a;
  background: rgba(180, 50, 35, 0.12);
  box-shadow: 0 0 16px rgba(180, 50, 35, 0.3);
}

/* sem grana suficiente */
.shop-card.cant-afford {
  opacity: 0.55;
}

.shop-card.cant-afford .shop-price {
  color: #c96a5a;
  border-color: rgba(200, 90, 70, 0.3);
}

.shop-card.cant-afford:hover {
  transform: none;
  border-color: rgba(200, 80, 60, 0.2);
}

.shop-card .shop-tag {
  position: absolute;
  top: -0.6rem;
  right: 0.6rem;
  background: #c94a3a;
  color: #0a0504;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  padding: 0.15rem 0.55rem;
  border-radius: 2px;
}

.shop-msg {
  min-height: 1.3em;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: #e8c46a;
  text-shadow: 0 0 10px rgba(232, 196, 106, 0.35);
}

.shop-msg.deny { color: #ff5a44; text-shadow: 0 0 10px rgba(255, 60, 40, 0.4); }
.shop-msg.ok { color: #a8d88a; text-shadow: 0 0 10px rgba(140, 190, 110, 0.4); }

/* hint no HUD apontando a loja */
#shopHint {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #8f8672;
  margin-top: 0.4rem;
  border: 1px solid rgba(200, 190, 160, 0.22);
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  background: rgba(10, 5, 4, 0.4);
}

.muteBtn {
  margin-top: 1.5rem;
  background: transparent;
  border: 1px solid rgba(200, 190, 160, 0.3);
  color: #8f8672;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transition: all 0.2s;
}

.muteBtn:hover {
  border-color: #d8b060;
  color: #e8e2d0;
}

.hud-mute {
  position: absolute;
  top: 1rem;
  right: 1rem;
  pointer-events: auto;
  font-size: 1rem;
  padding: 0.3rem 0.6rem;
}

/* ===== Botão "TELA CHEIA" dentro das telas de menu ===== */
.fs-toggle,
.hub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  letter-spacing: 0.15em;
  border-radius: 4px;
  transition: all 0.2s;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.4);
  box-shadow: 0 0 14px rgba(180, 50, 35, 0.2);
}

.fs-toggle:hover,
.hub-link:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 24px rgba(200, 60, 40, 0.5);
}

.fs-toggle svg { flex: none; }
.fs-toggle .fs-i-exit { display: none; }
.fs-toggle.fs-on { background: rgba(201, 74, 58, 0.2); }
.fs-toggle.fs-on .fs-i-enter { display: none; }
.fs-toggle.fs-on .fs-i-exit { display: block; }

#loadingScreen .fs-toggle { margin-top: 2rem; }
#loadingScreen .hub-link { margin-top: 1rem; }
#downScreen .fs-toggle { margin-top: 1.5rem; }
#downScreen .hub-link { margin-top: 0.75rem; }

/* ===== Botões das linhas .menu-buttons: todos uniformes =====
   mesmo tamanho e visual do TELA CHEIA (pedido do usuário —
   o MULTIPLAYER secondary-btn era menor e JOGAR maior) */
.menu-buttons button,
.menu-buttons .hub-link,
.menu-buttons #startBtn,
.menu-buttons #tutorialBtn,
.menu-buttons #mpRefreshRooms,
.menu-buttons #mpBackBtn {
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1.1rem;
  padding: 0.7rem 1.8rem;
  margin: 0;
  cursor: pointer;
  letter-spacing: 0.15em;
  border-radius: 4px;
  transition: all 0.2s;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.4);
  box-shadow: 0 0 14px rgba(180, 50, 35, 0.2);
}

.menu-buttons button:hover,
.menu-buttons .hub-link:hover,
.menu-buttons #startBtn:hover,
.menu-buttons #tutorialBtn:hover,
.menu-buttons #mpRefreshRooms:hover,
.menu-buttons #mpBackBtn:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 24px rgba(200, 60, 40, 0.5);
}

@media (max-width: 700px) {
  .fs-toggle { padding: 0.7rem 1rem; }
  .fs-toggle .fs-label { display: none; }
  .menu-buttons button,
  .menu-buttons .hub-link,
  .menu-buttons #startBtn,
  .menu-buttons #tutorialBtn,
  .menu-buttons #mpRefreshRooms,
  .menu-buttons #mpBackBtn { padding: 0.7rem 1rem; font-size: 0.95rem; }
}

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

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e8e8e0;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  opacity: 0.85;
}

#enterVehicleHint {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 8, 6, 0.85);
  border: 1px solid rgba(180, 50, 30, 0.6);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  color: #e8d8c0;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  animation: hintPulse 1.5s ease-in-out infinite;
}
#enterVehicleHint kbd {
  display: inline-block;
  background: rgba(180, 50, 30, 0.3);
  border: 1px solid rgba(200, 80, 50, 0.7);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  margin: 0 0.2rem;
  font-weight: bold;
  color: #ffcc88;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

#regroupHint {
  position: absolute;
  bottom: 18%;
  right: 1.2rem;
  background: rgba(10, 8, 6, 0.82);
  border: 1px solid rgba(80, 140, 200, 0.45);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  color: #a8c8e8;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#regroupHint.ready {
  border-color: rgba(100, 200, 255, 0.75);
  color: #d0ecff;
  animation: hintPulse 2s ease-in-out infinite;
}

#decoyHint {
  position: absolute;
  bottom: 18%;
  left: 1.2rem;
  background: rgba(10, 8, 6, 0.82);
  border: 1px solid rgba(180, 80, 40, 0.45);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  color: #d8a888;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#decoyHint.ready {
  border-color: rgba(255, 120, 60, 0.75);
  color: #ffccaa;
  animation: hintPulse 2s ease-in-out infinite;
}

#gamepadIndicator {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 1.1rem;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}

/* ===== RADAR + BÚSSOLA (estilo Call of Duty) ===== */
#minimap {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid rgba(200, 190, 160, 0.35);
  background: rgba(5, 5, 4, 0.55);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

#compass {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 26px;
  opacity: 0.9;
}

/* popups de kill flutuando sob a mira ("+10", "HEADSHOT") */
#killFeed {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translateX(-50%);
  pointer-events: none;
}

.kill-popup {
  color: #e8c46a;
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  animation: killFloat 1.4s ease-out forwards;
}

.kill-popup.headshot {
  color: #e05a3a;
}

@keyframes killFloat {
  0% { opacity: 0; transform: translateY(12px); }
  15% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-42px); }
}

#topBar {
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.6rem 2rem;
  border: 1px solid rgba(200, 190, 160, 0.3);
  border-radius: 4px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.stat .label {
  font-size: 0.7rem;
  color: #8f8672;
  letter-spacing: 0.15em;
}

.stat span:last-child {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

#bottomBar {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  text-align: right;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.8rem 1.5rem;
  border: 1px solid rgba(200, 190, 160, 0.3);
  border-radius: 4px;
}

#ammoDisplay {
  font-size: 1.8rem;
  color: #e8c46a;
  font-weight: bold;
}

#ammoDisplay #ammo {
  font-size: 2.2rem;
}

#weaponName {
  font-size: 0.75rem;
  color: #8f8672;
  letter-spacing: 0.2em;
  margin-top: 0.3rem;
}

#hitMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f00;
  font-size: 1.8rem;
  font-weight: bold;
  text-shadow: 0 0 8px #f00;
  opacity: 0.9;
}

#damageOverlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 0, 0, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* ===== DIREÇÃO DO DANO (arco apontando o atacante) ===== */
#dmgDir {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  opacity: 0;
  transition: opacity 0.55s;
  pointer-events: none;
  z-index: 20;
}
#dmgDir .arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -28deg,
    transparent 0deg,
    rgba(255, 38, 18, 0.85) 28deg,
    transparent 56deg
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 62%, #000 78%, transparent 82%);
  mask: radial-gradient(circle, transparent 58%, #000 62%, #000 78%, transparent 82%);
}

/* ===== STAMINA DO SPRINT ===== */
.bar-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.bar-row .bar-icon {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  pointer-events: none;
  flex-shrink: 0;
}
#staminaWrap {
  width: 210px;
  height: 5px;
  background: rgba(20, 18, 14, 0.75);
  border: 1px solid rgba(232, 196, 106, 0.25);
  border-radius: 3px;
  overflow: hidden;
}
#staminaFill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6a8f5a, #a8c46a);
  transition: none;
}
#staminaWrap.low #staminaFill {
  background: linear-gradient(90deg, #8f3a2a, #c46a4a);
}

/* ===== COMBUSTÍVEL DO VEÍCULO ===== */
#fuelWrap {
  width: 210px;
  height: 5px;
  background: rgba(20, 18, 14, 0.75);
  border: 1px solid rgba(232, 196, 106, 0.25);
  border-radius: 3px;
  overflow: hidden;
}
#staminaRow { bottom: 10.5%; }
#fuelRow { bottom: 8%; display: none; }
#fuelRow.active { display: flex; }
#fuelFill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #8f6a2a, #c4a04a);
  transition: none;
}
#fuelWrap.low #fuelFill {
  background: linear-gradient(90deg, #8f2a2a, #c44a4a);
}



/* ===== MIRA TELESCÓPICA (SNIPER) ===== */
#scopeOverlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  /* centro transparente (mostra o canvas), bordas pretas (luneta) */
  background: radial-gradient(
    circle at center,
    transparent 0,
    transparent calc(50vh - 60px),
    rgba(0, 0, 0, 0.5) calc(50vh - 30px),
    #000 50vh
  );
}

/* vinheta interna suave para dar profundidade ao borda da luneta */
.scope-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 0,
    transparent calc(50vh - 80px),
    rgba(0, 0, 0, 0.3) calc(50vh - 20px),
    transparent 50vh
  );
  pointer-events: none;
}

/* círculo da luneta — apenas a borda, sem box-shadow gigante */
.scope-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 60px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* retículo */
.scope-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* linhas cruzadas finas — relativas ao centro da viewport */
.scope-line {
  position: fixed;
  background: rgba(0, 0, 0, 0.85);
  z-index: 56;
}
.scope-line-h {
  top: 50%;
  left: 0;
  width: 100vw;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.85) calc(50% - 12px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    rgba(0, 0, 0, 0.85) calc(50% + 12px),
    rgba(0, 0, 0, 0.85) 100%
  );
}
.scope-line-v {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100vh;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.85) calc(50% - 12px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    rgba(0, 0, 0, 0.85) calc(50% + 12px),
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* mil-dots (pontos de medição) na linha vertical abaixo do centro */
.scope-mil-dot {
  position: fixed;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  transform: translateX(-50%);
  z-index: 56;
}
.scope-mil-dot-1 { top: calc(50% + 30px); }
.scope-mil-dot-2 { top: calc(50% + 60px); }
.scope-mil-dot-3 { top: calc(50% + 90px); }
.scope-mil-dot-4 { top: calc(50% - 30px); }

/* ponto central fino */
.scope-center-dot {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 30, 30, 0.9);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(200, 30, 30, 0.5);
  z-index: 56;
}

/* marcas de referência superior e inferior (estilo tactical) */
.scope-mark {
  position: fixed;
  left: 50%;
  width: 12px;
  height: 1px;
  background: rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
  z-index: 56;
}
.scope-mark-top { top: calc(50% - 80px); }
.scope-mark-bottom { top: calc(50% + 80px); }

/* ===== GAME OVER ===== */
#gameOver {
  position: fixed;
  inset: 0;
  background: rgba(10, 2, 2, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 90;
  text-align: center;
  overflow-y: auto; /* o seletor de arma pode passar da tela em resoluções baixas */
  justify-content: safe center;
  padding: 2rem 0;
}

#gameOver h2 {
  font-size: 4rem;
  color: #c94a3a;
  text-shadow: 0 0 30px rgba(180, 40, 30, 0.7);
  letter-spacing: 0.3em;
  margin-bottom: 1.5rem;
}

#gameOver p {
  font-size: 1.3rem;
  color: #e8e2d0;
  margin-bottom: 0.5rem;
}

#gameOver span {
  color: #e8c46a;
  font-weight: bold;
}

.game-over-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.game-over-actions button,
.game-over-actions .hub-link {
  min-width: 220px;
}

#gameOver > button {
  margin-top: 2rem;
}

/* seletor de arma na tela de morte — compacto pra caber junto do título */
#gameOver .select-group {
  max-width: 720px;
  width: 90vw;
  margin-top: 1rem;
}

#gameOver .weapon-card {
  padding: 0.6rem 0.9rem;
}

/* ===== ESTATÍSTICAS DA PARTIDA (pause + game over) ===== */
.statsBox {
  margin: 0.4rem auto 1rem;
  max-width: 340px;
  border: 1px solid rgba(200, 60, 45, 0.25);
  background: rgba(15, 5, 5, 0.55);
  padding: 0.55rem 0.9rem;
}

.statRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 0.28rem 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #c8b8a0;
  border-bottom: 1px dashed rgba(200, 60, 45, 0.12);
}

.statRow:last-child { border-bottom: none; }
.statRow b { color: #e8c46a; font-family: 'Courier New', monospace; }
.statRow i { color: #9a927a; font-style: normal; font-size: 0.75rem; }

/* ===== TELA DE TUTORIAL ===== */
#tutorialScreen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #1a0c0a 0%, #050505 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
  text-align: center;
  padding: 2rem;
  overflow-y: auto;
  justify-content: safe center;
}

#tutorialScreen h1 {
  font-size: 4.5rem;
  letter-spacing: 0.3em;
  color: #e8e2d0;
  text-shadow: 0 0 20px rgba(180, 40, 30, 0.55), 0 2px 0 #000;
  margin-bottom: 0.3rem;
}

#tutorialScreen h1 span {
  color: #c94a3a;
  text-shadow: 0 0 22px rgba(200, 60, 40, 0.55), 0 2px 0 #000;
}

#tutorialScreen .tutorial-subtitle {
  font-size: 1.4rem;
  color: #c94a3a;
  letter-spacing: 0.25em;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 12px rgba(180, 40, 30, 0.4);
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
  max-width: 900px;
  width: 95vw;
  margin-bottom: 1.5rem;
}

.tutorial-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(20, 8, 6, 0.65);
  border: 1px solid rgba(180, 50, 35, 0.18);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: #d8c8b8;
  text-align: left;
}

.tutorial-row span:last-child {
  flex: 1;
}

.kbd-group {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

kbd {
  display: inline-block;
  min-width: 2.1rem;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(180deg, #2a2220, #1a1210);
  border: 1px solid rgba(200, 80, 60, 0.35);
  border-bottom-color: rgba(200, 80, 60, 0.6);
  border-radius: 5px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), 0 0 8px rgba(180, 40, 30, 0.15);
  color: #e8e2d0;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
}

.tutorial-tip {
  max-width: 760px;
  color: #9f8f7f;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

#tutorialBtn {
  background: transparent;
  border: 2px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 0.8rem 3rem;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: all 0.2s;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.4);
  box-shadow: 0 0 18px rgba(180, 50, 35, 0.22);
}

#tutorialBtn:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 34px rgba(200, 60, 40, 0.55);
}

/* ===== LEADERBOARD / NICKNAME ===== */
.nickname-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.nickname-box label {
  color: #9f8f7f;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

#nicknameInput,
#deathNicknameInput {
  background: rgba(20, 8, 6, 0.8);
  border: 1px solid rgba(200, 80, 60, 0.35);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  color: #e8e2d0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
}

#nicknameInput:focus,
#deathNicknameInput:focus {
  border-color: #c94a3a;
  box-shadow: 0 0 10px rgba(200, 60, 40, 0.25);
}

#saveScoreBtn {
  background: transparent;
  border: 1px solid #c94a3a;
  color: #e8e2d0;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.4rem 1.2rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.2s;
  border-radius: 4px;
}

#saveScoreBtn:hover {
  background: #c94a3a;
  color: #0a0504;
  box-shadow: 0 0 14px rgba(200, 60, 40, 0.4);
}

#saveScoreBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

.nickname-warn {
  color: #c94a3a;
  font-size: 0.85rem;
  margin: 0.3rem 0;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.3);
}

.leaderboard-box {
  width: 100%;
  max-width: 520px;
  margin: 0.6rem auto 1rem;
  background: rgba(15, 6, 4, 0.7);
  border: 1px solid rgba(180, 50, 35, 0.2);
  border-radius: 6px;
  padding: 0.8rem 1rem;
}

.leaderboard-title {
  color: #c94a3a;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 8px rgba(200, 60, 40, 0.3);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 420px;
  overflow-y: auto;
}

.lb-row {
  display: grid;
  grid-template-columns: 2rem 1fr 5rem 3.5rem 4rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  color: #b8a898;
  border-bottom: 1px solid rgba(180, 50, 35, 0.08);
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-highlight {
  background: rgba(200, 60, 40, 0.15);
  border-radius: 4px;
}

.lb-pos {
  color: #7a6a5a;
  font-weight: bold;
  text-align: center;
}

.lb-name {
  color: #e8e2d0;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-kills {
  color: #8a7a6a;
  font-size: 0.75rem;
}

.lb-time {
  color: #7a6a5a;
  font-size: 0.75rem;
  text-align: center;
}

.lb-score {
  color: #c94a3a;
  font-weight: bold;
  text-align: right;
  font-size: 0.9rem;
}

.lb-empty {
  text-align: center;
  color: #7a6a5a;
  font-size: 0.85rem;
  padding: 1.2rem;
  font-style: italic;
}

.save-status {
  text-align: center;
  color: #9f8f7f;
  font-size: 0.8rem;
  margin: 0.4rem 0;
  min-height: 1.2em;
}

/* ===== CONTROLE DE VOLUME ===== */
.volume-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem auto;
  max-width: 320px;
}

.volume-icon {
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.volume-icon:hover {
  opacity: 1;
}

.volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, #3a1a14, #1a0c08);
  border-radius: 3px;
  border: 1px solid rgba(200, 80, 60, 0.25);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c94a3a;
  border: 2px solid #1a0c08;
  box-shadow: 0 0 8px rgba(200, 60, 40, 0.5);
  cursor: pointer;
  transition: transform 0.1s;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c94a3a;
  border: 2px solid #1a0c08;
  box-shadow: 0 0 8px rgba(200, 60, 40, 0.5);
  cursor: pointer;
}


/* ===== Tela de derrubado ===== */
#downScreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 0, 0, 0.85);
  z-index: 200;
  text-align: center;
}
#downScreen h2 {
  color: #ff4444;
  font-size: 42px;
  text-shadow: 0 0 20px rgba(255,0,0,0.5);
  margin-bottom: 20px;
}
#downScreen p {
  color: #ccc;
  font-size: 18px;
  margin-bottom: 10px;
}
.down-timer {
  color: #ffaa00;
  font-size: 36px;
  font-weight: bold;
  font-family: monospace;
  margin: 20px 0;
}
.down-hint {
  color: #888;
  font-size: 14px;
  margin-top: 20px;
}

/* ===== Tela de espectador (last man standing) ===== */
#spectatorScreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 48px;
  background: linear-gradient(to top, rgba(0, 20, 40, 0.75) 0%, transparent 45%);
  z-index: 200;
  text-align: center;
  pointer-events: none;
}
#spectatorScreen h2 {
  color: #66ccff;
  font-size: 28px;
  text-shadow: 0 0 16px rgba(100, 200, 255, 0.5);
  margin-bottom: 8px;
}
#spectatorScreen p {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 16px;
}
#spectatorScreen button {
  pointer-events: auto;
}

/* ===== Modo de jogo no lobby MP ===== */
.mp-game-mode-row {
  margin: 16px auto;
  max-width: 360px;
  text-align: left;
}
.mp-game-mode-row label {
  display: block;
  color: #aaa;
  font-size: 13px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mp-game-mode-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
  color: #eee;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.mp-game-mode-select:disabled {
  opacity: 0.6;
  cursor: default;
}


/* ===== Lista de salas abertas ===== */
#mpRoomsList {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 3, 0.95);
  z-index: 100;
}
#mpRoomsList h2 {
  color: #c94a3a;
  font-size: 28px;
  margin-bottom: 20px;
}
.mp-rooms-container {
  width: 90%;
  max-width: 500px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.mp-room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 10px;
  background: rgba(30, 15, 10, 0.8);
  border: 2px solid rgba(200, 80, 60, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.mp-room-item.joining {
  opacity: 0.6;
  pointer-events: none;
  border-color: rgba(255, 200, 80, 0.8);
}

#mpRoomsStatus {
  min-height: 1.5rem;
  margin: 0.75rem 0 1rem;
  text-align: center;
}
.mp-room-item:hover {
  border-color: #c94a3a;
  background: rgba(50, 20, 15, 0.9);
}
.mp-room-code {
  font-size: 24px;
  font-weight: bold;
  color: #ffaa00;
  font-family: monospace;
}
.mp-room-info {
  color: #aaa;
  font-size: 14px;
}
.mp-room-players {
  color: #6a6;
  font-size: 16px;
  font-weight: bold;
}
.mp-room-live {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #1a1a1a;
  background: #ff6644;
  border-radius: 4px;
  vertical-align: middle;
}
.mp-rooms-empty {
  text-align: center;
  color: #666;
  padding: 40px;
  font-size: 16px;
}
#mpRefreshRooms, #mpBackBtn {
  margin: 5px;
  padding: 10px 20px;
}


/* ===== Campo de nick no menu multiplayer ===== */
.mp-nick-box {
  margin-bottom: 20px;
}
.mp-nick-input {
  width: 100%;
  max-width: 300px;
  padding: 12px 16px;
  font-size: 18px;
  text-align: center;
  background: rgba(30, 15, 10, 0.8);
  border: 2px solid rgba(200, 80, 60, 0.4);
  border-radius: 6px;
  color: #fff;
  font-family: monospace;
  text-transform: uppercase;
}
.mp-nick-input:focus {
  outline: none;
  border-color: #c94a3a;
}
.mp-nick-input::placeholder {
  color: #666;
}

/* ===== Controles mobile (touch) ===== */
body.mobile {
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.mobile #gameCanvas {
  touch-action: none;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}
.mobile-overlay.hidden {
  display: none;
}

.mobile-joy-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 55%;
  pointer-events: auto;
  touch-action: none;
}
.mobile-joy-pad {
  position: fixed;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 155;
}
.mobile-joy-pad.hidden { display: none; }
.mobile-joy-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
}
.mobile-joy-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
}

.mobile-look-zone {
  position: absolute;
  right: 0;
  top: 48px;
  bottom: 0;
  width: 58%;
  pointer-events: auto;
  touch-action: none;
}

.mobile-look-pad {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
  z-index: 156;
  pointer-events: auto;
  touch-action: none;
  opacity: 0.78;
  display: none;
}
body.mobile-tilt .mobile-look-pad { display: block; }
body.mobile-tilt .mobile-look-zone { pointer-events: none; }
.mobile-look-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(142, 200, 255, 0.45);
  background: rgba(0, 10, 20, 0.28);
}
.mobile-look-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(142, 200, 255, 0.55);
  transform: translate(-50%, -50%);
}

.mobile-actions {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 52px 52px;
  grid-template-rows: repeat(5, 52px);
  gap: 8px;
  pointer-events: none;
  z-index: 165;
}
.mobile-actions .touch-btn {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  opacity: 0.75;
}
.mobile-actions .touch-btn:active {
  opacity: 1;
  background: rgba(200, 60, 40, 0.55);
}
.mobile-shoot-btn {
  grid-column: 2;
  grid-row: 4 / span 2;
  width: 64px !important;
  height: 64px !important;
  font-size: 24px !important;
  align-self: end;
  justify-self: end;
}
.mobile-btn-jump { grid-column: 1; grid-row: 1; }
.mobile-btn-ads { grid-column: 2; grid-row: 1; }
.mobile-btn-reload { grid-column: 1; grid-row: 2; }
.mobile-btn-decoy { grid-column: 1; grid-row: 3; }
.mobile-btn-regroup { grid-column: 1; grid-row: 4; }
.mobile-btn-vehicle { grid-column: 2; grid-row: 2; }
.mobile-btn-sprint { grid-column: 2; grid-row: 3; }
.mobile-btn-sprint.active {
  background: rgba(100, 180, 255, 0.55);
  border-color: #88ccff;
}

body.mobile-landscape .mobile-joy-area { width: 38%; height: 70%; }
body.mobile-landscape .mobile-look-zone { top: 8px; width: 62%; }
body.mobile-landscape .mobile-actions {
  grid-template-columns: 48px 48px;
  grid-template-rows: repeat(5, 48px);
  gap: 6px;
}
body.mobile-landscape .mobile-shoot-btn {
  width: 58px !important;
  height: 58px !important;
}

.mobile-settings {
  margin: 1rem auto;
  max-width: 360px;
  text-align: left;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
}
.mobile-settings h3 {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: #8ec8ff;
}
.mob-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0.35rem 0;
  font-size: 0.8rem;
}
.mob-setting-row input[type="range"] { flex: 1; }
.mob-tilt-legacy { display: none !important; }
.mob-look-sens-row.hidden { display: none; }
.mob-look-sens-row em {
  font-style: normal;
  color: #8ec8ff;
  margin-left: 4px;
}

.mobile-control-mode {
  width: min(420px, 92%);
  margin: 0.6rem auto 0.4rem;
  text-align: center;
}
.mobile-control-mode h3 {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: #8ec8ff;
  margin-bottom: 0.45rem;
}
.mobile-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.mobile-mode-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(200, 80, 60, 0.25);
  border-radius: 8px;
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  color: #b08f7f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.mobile-mode-btn:hover {
  border-color: rgba(200, 60, 40, 0.6);
}
.mobile-mode-btn.active {
  border-color: #c94a3a;
  background: rgba(180, 50, 35, 0.16);
  box-shadow: 0 0 14px rgba(180, 50, 35, 0.28);
  color: #e8e2d0;
}
.mobile-mode-icon { font-size: 1.5rem; }
.mobile-mode-name {
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #fff;
}
.mobile-mode-desc {
  font-size: 0.62rem;
  color: #8f8672;
}
.pause-mode-grid { margin: 0.4rem 0; }
.mob-mode-hint {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.78rem;
  color: #8ec8ff;
  letter-spacing: 0.06em;
}
.tilt-cal-btn {
  margin-top: 0.45rem;
  background: transparent;
  border: 1px solid #8ec8ff;
  color: #8ec8ff;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.08em;
}
.tilt-cal-toast {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 80;
  background: rgba(8, 12, 10, 0.88);
  border: 1px solid #8ec8ff;
  color: #d8f0ff;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.mp-nick-hud {
  min-width: 80px;
}
.mp-nick-hud #mpNickText {
  color: #8ec8ff;
  font-weight: bold;
}

body.mobile #hitMarker {
  font-size: 2.4rem;
  color: #ff3333;
  text-shadow: 0 0 12px #ff0000, 0 0 4px #fff;
}

body.mobile #pauseMenu,
body.mobile #gameOver,
body.mobile #menu {
  font-size: 1.05rem;
}

.mobile-hint {
  display: none;
  color: #8ec8ff;
  font-size: 0.85rem;
  margin: 0.5rem 1rem 0;
  text-align: center;
  max-width: 320px;
}
.mobile-menu-opt {
  display: none;
}
.desktop-hint {
  display: block;
}

@media (max-width: 900px), (max-height: 520px), (pointer: coarse) {
  .mobile-menu-opt {
    display: block;
  }
  .mobile-hint {
    display: block;
  }
  .desktop-hint {
    display: none;
  }
  #menu h1 {
    font-size: 2rem;
  }
  .weapon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

body.mobile #hud {
  font-size: 0.82rem;
}
body.mobile #minimap {
  width: 96px !important;
  height: 96px !important;
}
/* Esconde hints de teclado no mobile (os botões touch já fazem a mesma ação) */
body.mobile #regroupHint,
body.mobile #decoyHint,
body.mobile #enterVehicleHint {
  display: none !important;
}

/* Modo inclinação: esconde o joystick e mantém só o look-zone direito */
body.mobile-tilt .mobile-joy-area,
body.mobile-tilt .mobile-joy-pad {
  display: none !important;
}

/* Munição/arma pro canto superior direito, longe dos controles touch */
body.mobile #bottomBar {
  right: 0.5rem;
  left: auto;
  transform: none;
  bottom: auto;
  top: 5.5rem;
  text-align: right;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
}
body.mobile #bottomBar #ammoDisplay {
  font-size: 1.1rem;
}
body.mobile #bottomBar #ammo {
  font-size: 1.35rem;
}
body.mobile #bottomBar #weaponName {
  font-size: 0.65rem;
}

/* Stamina/combustível pra top-left, abaixo do radar, pra não cobrir controles */
body.mobile #staminaRow,
body.mobile #fuelRow {
  left: 1rem;
  right: auto;
  transform: none;
  bottom: auto;
  top: 7.5rem;
}
body.mobile #staminaWrap,
body.mobile #fuelWrap {
  width: 110px;
}

body.mobile .mobile-overlay {
  z-index: 160;
}

/* Game over touch-friendly (mobile / PWA fullscreen) */
body.mobile #gameOver,
body.game-over-active #gameOver {
  z-index: 260;
  min-height: 100dvh;
  justify-content: flex-start;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

body.mobile #gameOver h2,
body.game-over-active #gameOver h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

body.mobile #gameOver .game-over-scroll,
body.game-over-active #gameOver .game-over-scroll {
  flex: 1;
  width: 100%;
  max-width: 720px;
  overflow-y: auto;
  padding-bottom: 0.5rem;
  /* centraliza o conteúdo verticalmente quando cabe na tela;
     "safe" mantém o topo acessível quando o conteúdo estoura a altura */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
}

body.mobile #gameOver .game-over-actions,
body.game-over-active #gameOver .game-over-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  width: 100%;
  max-width: 420px;
  margin: 0.75rem auto 0;
  padding: 0.75rem 0 0.5rem;
  background: linear-gradient(to top, rgba(10, 2, 2, 0.98) 70%, transparent);
}

body.mobile #gameOver .game-over-actions button,
body.game-over-active #gameOver .game-over-actions button {
  width: min(100%, 320px);
  min-height: 56px;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  touch-action: manipulation;
  cursor: pointer;
  pointer-events: auto;
}

body.mobile #gameOver .game-over-actions button:active,
body.game-over-active #gameOver .game-over-actions button:active {
  background: #c94a3a;
  color: #0a0504;
  transform: scale(0.98);
}

body.mobile #gameOver .select-group,
body.game-over-active #gameOver .select-group {
  margin-top: 0.5rem;
}

body.mobile #gameOver .weapon-grid,
body.game-over-active #gameOver .weapon-grid {
  grid-template-columns: 1fr 1fr;
}

/* Desktop/tela cheia: o bloco inteiro (título → placar → botões) fica
   centralizado, com os botões logo abaixo do placar — o sticky bottom
   que joga eles pro rodapé só faz sentido no mobile */
body.game-over-active:not(.mobile) #gameOver {
  justify-content: safe center;
}

body.game-over-active:not(.mobile) #gameOver .game-over-scroll {
  flex: 0 1 auto;
  max-height: calc(100dvh - 240px);
}

body.game-over-active:not(.mobile) #gameOver .game-over-actions {
  position: static;
}

body.game-over-active #gameCanvas {
  pointer-events: none;
}

body.game-over-active .mobile-overlay {
  display: none !important;
}

/* ===== Scrollbars no tema do jogo =====
   trilho escuro + polegar vermelho-sangue com glow no hover —
   substitui o cinza/branco padrão do navegador */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 74, 58, 0.75) rgba(12, 6, 5, 0.7);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(12, 6, 5, 0.7);
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201, 74, 58, 0.9), rgba(120, 32, 24, 0.9));
  border-radius: 6px;
  border: 2px solid rgba(8, 4, 3, 0.9);
}

*::-webkit-scrollbar-thumb:hover {
  background: #c94a3a;
  box-shadow: 0 0 10px rgba(200, 60, 40, 0.6);
}

*::-webkit-scrollbar-thumb:active {
  background: #e05a44;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}