* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

#sceneContainer {
  position: fixed;
  inset: 0;
}
#sceneContainer canvas {
  display: block;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  color: #fff;
  user-select: none;
  pointer-events: none;
}

#hpBarWrap {
  width: 240px;
  height: 26px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #555;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

#hpBarFill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #27ae60, #2ecc71);
  transition: width 0.15s ease, background 0.3s ease;
}

#hpText {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 2px #000;
}

#controlsHint {
  margin-top: 8px;
  font-size: 12px;
  color: #ccc;
  background: rgba(0,0,0,0.4);
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
  max-width: 520px;
}

#myRank {
  font-size: 13px;
  font-weight: bold;
  color: #f1c40f;
  text-shadow: 1px 1px 2px #000;
  margin-bottom: 6px;
}

#xpBarWrap {
  width: 240px;
  height: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #555;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}

#xpBarFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8e44ad, #9b59b6);
  transition: width 0.3s ease;
}

#xpText {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}

/* ---------- Панель типа снаряда ---------- */
#ammoPanel {
  position: absolute;
  left: 0;
  bottom: 96px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.ammoBtn {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid #666;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  color: #ccc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ammoBtn.active {
  border-color: #f1c40f;
  color: #f1c40f;
  background: rgba(241,196,15,0.15);
  box-shadow: 0 0 10px rgba(241,196,15,0.3);
}

.ammoBtn:hover {
  filter: brightness(1.2);
}

#reloadBarWrap {
  width: 240px;
  height: 14px;
  margin-top: 6px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #555;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

#reloadBarFill {
  height: 100%;
  width: 100%;
  background: #2ecc71;
  transition: width 0.1s linear;
}

#reloadText {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #000;
}

/* ---------- Leaderboard ---------- */
#leaderboard {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  min-width: 200px;
  user-select: none;
}

#leaderboard h3 {
  font-size: 14px;
  margin-bottom: 8px;
  color: #f1c40f;
}

#leaderboardList {
  list-style: none;
  font-size: 13px;
}

#leaderboardList li {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#leaderboardList li .lbRow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

#leaderboardList li .lbRank {
  font-size: 11px;
  color: #f1c40f;
  opacity: 0.85;
}

#leaderboardList li span.name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leaderboardList li.me {
  color: #2ecc71;
  font-weight: bold;
}

/* ---------- Всплывающий текст в мире ---------- */
.damageText {
  position: fixed;
  transform: translate(-50%, -100%);
  font-size: 17px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
  pointer-events: none;
  z-index: 20;
  user-select: none;
}

/* ---------- Пинг ---------- */
#pingText {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #2ecc71;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  user-select: none;
  background: rgba(0,0,0,0.4);
  padding: 4px 12px;
  border-radius: 6px;
}

/* ---------- Время суток ---------- */
#timeOfDay {
  position: fixed;
  top: 58px;
  right: 12px;
  z-index: 10;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  user-select: none;
  background: rgba(0,0,0,0.4);
  padding: 4px 12px;
  border-radius: 6px;
}

/* ---------- Командный счёт (Team Deathmatch) ---------- */
#teamScore {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 12, 16, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 16px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 20;
}
#teamScore .tsRed { color: #ff6b5e; }
#teamScore .tsBlue { color: #5b9dff; }
#teamScore .ts { text-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
#teamScore .ts.my { text-decoration: underline; }
#teamScore .tsSep { color: #fff; font-size: 17px; }
#teamScore #tsToWin {
  color: #999;
  font-size: 11px;
  font-weight: 400;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 10px;
}

/* ---------- Баннер победы команды ---------- */
#matchBanner {
  position: fixed;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 14px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 30;
  pointer-events: none;
  animation: bannerPulse 1.2s ease-in-out infinite alternate;
  text-align: center;
}
#matchBanner.win { background: rgba(46, 204, 113, 0.25); color: #6bffb0; border: 2px solid rgba(46, 204, 113, 0.7); }
#matchBanner.lose { background: rgba(231, 76, 60, 0.25); color: #ff8f85; border: 2px solid rgba(231, 76, 60, 0.7); }
@keyframes bannerPulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }

/* ---------- Метки команд над танками ---------- */
#tankLabels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 15;
}
.tankLabel {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  will-change: left, top;
}
.tankLabel .tlName {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.tankLabel .tlHp {
  width: 56px;
  height: 5px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  overflow: hidden;
}
.tankLabel .tlHpFill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s linear;
}
.tankLabel.enemy .tlName::after { content: ' ⚔'; }
.tankLabel.ally .tlName::after { content: ' ●'; font-size: 9px; }

/* ---------- Значок команды в лидерборде ---------- */
.lbTeam {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.lbTeamRed { background: #e74c3c; box-shadow: 0 0 6px rgba(231, 76, 60, 0.8); }
.lbTeamBlue { background: #3498db; box-shadow: 0 0 6px rgba(52, 152, 219, 0.8); }

/* ---------- Выбор цвета танка ---------- */
#colorPicker {
  margin-bottom: 16px;
}

#colorPicker p {
  color: #aaa;
  font-size: 13px;
  margin-bottom: 8px;
}

#colorSwatches {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.swatch.locked {
  opacity: 0.25;
  cursor: not-allowed;
  position: relative;
  filter: grayscale(0.8);
}

.swatch.locked::after {
  content: attr(title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

#menuSettingsBtn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #2980b9, #1f618d);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

#menuSettingsBtn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

/* ---------- Настройки графики ---------- */
#settingsBtn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 40;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
#settingsBtn:hover {
  background: rgba(0,0,0,0.75);
  transform: scale(1.05);
}

#settingsPanel {
  position: fixed;
  top: 74px;
  left: 20px;
  z-index: 40;
  background: rgba(20,20,20,0.92);
  border: 1px solid #444;
  border-radius: 10px;
  padding: 16px 18px;
  color: #fff;
  min-width: 190px;
  user-select: none;
}

#settingsPanel h3 {
  font-size: 14px;
  color: #f1c40f;
  margin-bottom: 12px;
}

.qualityGroup {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.qualityGroup button {
  flex: 1;
  padding: 6px 4px;
  font-size: 12px;
  border: 1px solid #555;
  border-radius: 5px;
  background: #222;
  color: #ccc;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.qualityGroup button:hover {
  background: #333;
}

.qualityGroup button.active {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}

.settingsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
}

.settingsRow input {
  accent-color: #2980b9;
}

.settingsRow input[type="range"] {
  width: 100px;
}

#settingsPanel, #settingsBtn {
  z-index: 130;
}

/* ---------- Прицел от первого лица (снайперский режим ПКМ) ---------- */
#scopeOverlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

#scopeVignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, transparent 28%, rgba(0,0,0,0.85) 42%);
}

#scopeCrosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

#scopeCrosshair .line {
  position: absolute;
  background: rgba(46, 204, 113, 0.85);
}
#scopeCrosshair .line.horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-1px);
}
#scopeCrosshair .line.vertical {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-1px);
}
#scopeCrosshair .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #e74c3c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Сетка прицела: деления и кольца */
#scopeCrosshair .tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 12px;
  background: rgba(46, 204, 113, 0.7);
  transform-origin: 50% 0;
}
#scopeCrosshair .tick.t1 { transform: translate(-50%, -50%) rotate(0deg) translateY(-24px); }
#scopeCrosshair .tick.t2 { transform: translate(-50%, -50%) rotate(45deg) translateY(-24px); }
#scopeCrosshair .tick.t3 { transform: translate(-50%, -50%) rotate(90deg) translateY(-24px); }
#scopeCrosshair .tick.t4 { transform: translate(-50%, -50%) rotate(135deg) translateY(-24px); }
#scopeCrosshair .tick.t5 { transform: translate(-50%, -50%) rotate(180deg) translateY(-24px); }
#scopeCrosshair .tick.t6 { transform: translate(-50%, -50%) rotate(225deg) translateY(-24px); }
#scopeCrosshair .tick.t7 { transform: translate(-50%, -50%) rotate(270deg) translateY(-24px); }
#scopeCrosshair .tick.t8 { transform: translate(-50%, -50%) rotate(315deg) translateY(-24px); }

#scopeCrosshair .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(46, 204, 113, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#scopeCrosshair .ring.r1 { width: 90px; height: 90px; }
#scopeCrosshair .ring.r2 { width: 130px; height: 130px; }

#scopeDistance {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  color: #ddd;
  text-shadow: 1px 1px 3px #000;
  background: rgba(0,0,0,0.5);
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ---------- Overlays общие ---------- */
.hidden { display: none !important; }

#nicknameOverlay, #rouletteOverlay, #deathOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#nicknameBox, #rouletteBox, #deathBox {
  background: #232323;
  border: 2px solid #444;
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

#nicknameBox h1 {
  font-size: 26px;
  margin-bottom: 10px;
  color: #f1c40f;
}

#nicknameBox p {
  color: #aaa;
  margin-bottom: 18px;
  font-size: 14px;
}

#nicknameInput {
  width: 260px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #111;
  color: #fff;
  outline: none;
  margin-bottom: 16px;
}

#nicknameInput:focus {
  border-color: #f1c40f;
}

#startBtn {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

#startBtn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

#botsToggle {
  display: block;
  margin: 10px auto 16px;
  color: #cfe3ff;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

#botsCheckbox {
  margin-right: 6px;
  accent-color: #2ecc71;
}

#diffToggle {
  display: block;
  margin: 0 auto 16px;
  color: #cfe3ff;
  font-size: 13px;
}

#botDifficultySelect {
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #111;
  color: #fff;
  outline: none;
  cursor: pointer;
}

#botDifficultySelect:focus {
  border-color: #f1c40f;
}

/* Общий чат */
#chatPanel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 340px;
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#chatLog {
  max-height: 150px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.chatMsg {
  background: rgba(0, 0, 0, 0.45);
  border-left: 2px solid transparent;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: #eee;
  text-shadow: 0 1px 2px #000;
  word-break: break-word;
}

.chatName {
  font-weight: 700;
  margin-right: 6px;
}

.chatSystem {
  color: #ffd76a;
  font-style: italic;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.chatBot {
  opacity: 0.9;
}

#chatInput {
  pointer-events: auto;
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  outline: none;
}

#chatInput:focus {
  border-color: rgba(241, 196, 15, 0.8);
  background: rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px) {
  #chatPanel { width: 200px; }
  #chatLog { max-height: 90px; }
}

#deathBox h2 {
  color: #e74c3c;
  margin-bottom: 10px;
}

#respawnTimer {
  color: #ccc;
  font-size: 15px;
}

/* ---------- Рулетка способностей ---------- */
#rouletteBox h2 {
  color: #f1c40f;
  margin-bottom: 20px;
  font-size: 24px;
}

#rouletteViewport {
  position: relative;
  width: 132px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(241, 196, 15, 0.35);
  background: #111;
}

#roulettePointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid #f1c40f;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

#rouletteStrip {
  display: flex;
  will-change: transform;
}

.rouletteCell {
  width: 120px;
  min-width: 120px;
  height: 130px;
  margin: 8px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  border: 2px solid rgba(255,255,255,0.35);
  user-select: none;
}

.rouletteIcon {
  font-size: 34px;
  line-height: 1;
}

.rouletteLabel {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

#rouletteResult {
  margin-top: 18px;
  padding: 14px 24px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
}

#rouletteResultName {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}

#rouletteResultDesc {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 12px;
}

#rouletteOkBtn {
  padding: 10px 34px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #f1c40f, #e67e22);
  color: #222;
  cursor: pointer;
}

#rouletteOkBtn:hover {
  filter: brightness(1.15);
}

/* ---------- Бейджи активных способностей ---------- */
#activeEffects {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.effectBadge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
  border: 2px solid rgba(255,255,255,0.5);
  font-size: 18px;
  animation: badgeIn 0.3s ease;
}

.effectBadge b {
  font-size: 10px;
  line-height: 1;
}

@keyframes badgeIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ---------- Мобильное управление ---------- */
#touchControls { display: none; }
body.touch #touchControls { display: block; }

/* ---------- Мини-карта ---------- */
#minimap {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 220px;
  height: 220px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.touch #minimap { bottom: 300px; } /* выше кнопок тача */

#joyBase {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(255,255,255,0.35);
  z-index: 50;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#joyKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  pointer-events: none;
  will-change: transform;
}
#touchBtns {
  position: fixed;
  right: 20px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  z-index: 50;
}
#fireBtn, #zoomBtn {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(255,60,40,0.35);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#fireBtn:active { background: rgba(255,60,40,0.7); }
#zoomBtn { width: 64px; height: 64px; font-size: 24px; background: rgba(60,140,255,0.35); }
#zoomBtn.active { background: rgba(60,255,140,0.5); }

@media (pointer: coarse) {
  #touchControls { display: block; }
  #controlsHint { display: none; }
}

/* ---------- Выбор модели танка ---------- */
#modelPicker { margin-top: 10px; }
#modelPicker p { font-size: 13px; color: #aaa; margin-bottom: 6px; }
#modelButtons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.modelBtn {

/* ---------- Выбор команды ---------- */
#teamPicker { margin-top: 12px; }
#teamPicker p { font-size: 12px; color: #aaa; margin-bottom: 6px; }
#teamButtons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.teamBtn {
  padding: 9px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #ddd;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.teamBtn:hover { transform: scale(1.05); }
.teamRed:hover { border-color: #e74c3c; color: #ff6b5e; }
.teamBlue:hover { border-color: #3498db; color: #5b9dff; }
.teamAuto:hover { border-color: #2ecc71; color: #6bffb0; }
.teamBtn.selected.teamRed { background: rgba(231, 76, 60, 0.35); border-color: #ff6b5e; color: #fff; }
.teamBtn.selected.teamBlue { background: rgba(52, 152, 219, 0.35); border-color: #5b9dff; color: #fff; }
.teamBtn.selected.teamAuto { background: rgba(46, 204, 113, 0.3); border-color: #2ecc71; color: #fff; }
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #eee;
  cursor: pointer;
  font-size: 13px;
}
.modelBtn.selected { border-color: #f1c40f; background: #3a3410; color: #ffd75e; }
.modelBtn.locked { opacity: 0.45; cursor: not-allowed; }

/* ---------- Превью танка в меню ---------- */
#tankPreview {
  width: 170px;
  height: 170px;
  margin: 10px auto 4px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #2c3440, #14181e);
  border: 1px solid #333;
  overflow: hidden;
}
#tankPreview canvas { display: block; }

/* ---------- Бейдж модели в HUD ---------- */
#myModel {
  position: absolute;
  top: 0;
  left: 200px;
  font-size: 13px;
  color: #ffd75e;
  background: rgba(0,0,0,0.45);
  padding: 3px 10px;
  border-radius: 6px;
  z-index: 10;
}

/* ---------- Артиллерия ---------- */
#artilleryWrap {
  width: 220px;
  height: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #444;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}
#artilleryFill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #8e44ad, #e74c3c);
}
#artilleryText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
#artyBtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(140,68,173,0.4);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}