body {
  margin: 0;
  background: #050705;
  color: #dfffe0;
  font-family: "Courier New", monospace;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-sizing: border-box;
}

.left-panel {
  flex: 1 1 auto;
  min-width: 0;
}

.title {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: bold;
  letter-spacing: 3px;
  color: #70ff70;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(112,255,112,.6);
}

.game-wrapper {
  width: 100%;
  max-width: min(100vw - 40px, 1050px);
  overflow: hidden;
  position: relative;
}

.game-grid {
  --cell-size: 24px;
  display: inline-block;
  background: #111;
  border: 3px solid #20ff38;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 28px rgba(32,255,56,.2);
  user-select: none;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.row {
  height: var(--cell-size);
  line-height: var(--cell-size);
  white-space: nowrap;
}

.cell {
  display: inline-flex;
  width: var(--cell-size);
  height: var(--cell-size);
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.70);
  box-sizing: border-box;
}

.floor {
  background: #151515;
}

.wall {
  background: #343434;
  color: #9c9c9c;
}

.path {
  background: #3b3500;
  color: transparent;
}

.center {
  background: #234923;
  color: #aaffaa;
  font-weight: bold;
}

.zone-n {
  background: rgba(190,88,135,.88);
}

.zone-e {
  background: rgba(62,92,190,.9);
}

.zone-s {
  background: rgba(205,112,28,.92);
}

.zone-w {
  background: rgba(112,58,190,.9);
}

.buildable {
  cursor: pointer;
}

.buildable:hover {
  outline: 2px solid #fff;
  z-index: 2;
}

.tower {
  color: #fff;
  font-weight: bold;
}

.shot {
  color: #fff0a0;
}

.mob {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: calc(var(--cell-size) * 0.55);
  letter-spacing: 0;
  white-space: nowrap;
}

.mob-stack {
  font-size: calc(var(--cell-size) * 0.58);
  text-shadow:
    0 0 6px #fff,
    0 0 14px currentColor;
}

.mob-mass {
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 72%),
    radial-gradient(circle, currentColor 0%, rgba(255,255,255,0) 78%);
  box-shadow:
    0 0 8px currentColor,
    0 0 18px currentColor,
    inset 0 0 10px rgba(255,255,255,.25);
}

.mob-horde {
  transform: scale(1.18);
  filter: saturate(1.45) brightness(1.25);
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: -4px;
}

.mob-n { color: #ff9ac5; }
.mob-e { color: #8faaff; }
.mob-s { color: #ffb067; }
.mob-w { color: #b88aff; }

.hint {
  margin-top: 6px;
  color: #b6ffb6;
  font-size: clamp(12px, 1.2vw, 16px);
}

.sidebar {
  flex: 0 0 320px;
  background: rgba(0,255,0,.05);
  border: 2px solid #28ff40;
  border-radius: 10px;
  padding: 22px;
  box-sizing: border-box;
}

.stat {
  margin-bottom: 20px;
}

.stat-label {
  font-size: 13px;
  color: #8cff8c;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 34px;
  font-weight: bold;
  color: #f1fff1;
}

.stat-value.lives {
  color: #ff7777;
}

.stat-value.gold {
  color: #ffe36e;
}

button {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 8px;
  background: #34ef40;
  color: #061006;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
}

button:hover {
  background: #58ff60;
}

.message {
  margin-top: 16px;
  min-height: 48px;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  color: #fff;
}

.legend {
  margin-top: 20px;
  border-top: 1px solid rgba(100,255,100,.3);
  padding-top: 16px;
}

.legend-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.legend-box {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}

.gameover {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 32px 46px;
  background: rgba(0,0,0,.95);
  border: 3px solid #ff5a5a;
  border-radius: 12px;
  color: #ff8080;
  font-size: 36px;
  font-weight: bold;
  z-index: 9999;
}

.error {
  color: #ff8080;
  padding: 30px;
  max-width: 900px;
  white-space: normal;
}

/* Écrans moyens : la sidebar passe dessous si nécessaire */
@media (max-width: 1200px) {
  .container {
    flex-direction: column;
    gap: 20px;
  }

  .sidebar {
    width: 100%;
    flex: none;
  }
}

/* Petits écrans */
@media (max-width: 700px) {
  .container {
    padding: 10px;
  }

  .game-grid {
    padding: 6px;
    border-width: 2px;
  }

  .sidebar {
    padding: 14px;
  }

  .stat-value {
    font-size: 28px;
  }
}


/* V18 : 2 mobs visibles par case, sans effet horde */
.mob {
  font-size: calc(var(--cell-size) * 0.42) !important;
  letter-spacing: -0.12em !important;
  white-space: nowrap !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.mob-stack {
  font-size: calc(var(--cell-size) * 0.38) !important;
  letter-spacing: -0.18em !important;
  text-shadow:
    0 0 4px #fff,
    0 0 8px currentColor !important;
  outline: none !important;
}

.mob-mass,
.mob-horde {
  transform: none !important;
  filter: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* V19 : vrai 2 par case sur chaque chemin */
.mob {
  font-size: calc(var(--cell-size) * 0.36) !important;
  letter-spacing: -0.20em !important;
  justify-content: center !important;
}

.mob-stack {
  font-size: calc(var(--cell-size) * 0.34) !important;
  letter-spacing: -0.24em !important;
  text-shadow:
    0 0 3px #fff,
    0 0 7px currentColor !important;
}


/* V20 : mouvement fluide des mobs */
.mobs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.mob-smooth {
  position: absolute;
  width: var(--cell-size);
  height: var(--cell-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);
  will-change: left, top;
  font-weight: bold;
  font-size: calc(var(--cell-size) * 0.34);
  letter-spacing: -0.20em;
  white-space: nowrap;
  text-shadow:
    0 0 3px #fff,
    0 0 7px currentColor;
}

.mob-smooth.mob-stack {
  font-size: calc(var(--cell-size) * 0.32);
  letter-spacing: -0.24em;
}


/* V21 : mobs plus rapides et décalés, sans effet clone */
.mob-smooth {
  font-size: calc(var(--cell-size) * 0.42) !important;
  letter-spacing: 0 !important;
  transition: none !important;
}

.mob-smooth.mob-stack {
  font-size: calc(var(--cell-size) * 0.40) !important;
  letter-spacing: 0 !important;
}


/* V22 : marche fluide et mobs désynchronisés */
.mobs-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.mob-smooth {
  position: absolute;
  width: var(--cell-size);
  height: var(--cell-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);
  will-change: left, top;
  font-weight: bold;
  font-size: calc(var(--cell-size) * 0.40);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 3px #fff,
    0 0 7px currentColor;
}


/* V23 : l'overlay des mobs ne bloque jamais les clics */
.mobs-layer,
.mob-smooth {
  pointer-events: none !important;
}


/* V24 : types de tours */
.tower-panel {
  margin: 16px 0;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(100,255,100,.25);
  border-radius: 8px;
}

.tower-choice {
  width: 100%;
  display: block;
  text-align: left;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(30, 255, 55, .10);
  color: #dfffe0;
  font-family: "Courier New", monospace;
  font-size: 14px;
  cursor: pointer;
}

.tower-choice span {
  float: right;
  color: #ffe36e;
}

.tower-choice small {
  display: block;
  clear: both;
  margin-top: 5px;
  color: #a8cfa8;
  font-size: 11px;
  line-height: 1.25;
}

.tower-choice.active {
  background: rgba(52,239,64,.35);
  border-color: #70ff70;
  box-shadow: 0 0 10px rgba(112,255,112,.30);
}

.selected-tower {
  margin-top: 10px;
  color: #fff;
  font-size: 13px;
}

.tower {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px #fff;
}

.tower-triangle { color: #ffffff; }
.tower-square { color: #ffe36e; }
.tower-x { color: #ff7777; }
.tower-sniper { color: #8fd7ff; }

.tower-levelup {
  text-shadow:
    0 0 5px #fff,
    0 0 12px currentColor,
    0 0 18px currentColor;
}


/* V25 : niveaux des tours */
.tower {
  position: relative;
}

.tower-symbol {
  display: inline-block;
  line-height: 1;
}

.tower-level {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: calc(var(--cell-size) * 0.30);
  color: #fff;
  background: rgba(0,0,0,.65);
  border-radius: 50%;
  min-width: calc(var(--cell-size) * 0.36);
  height: calc(var(--cell-size) * 0.36);
  line-height: calc(var(--cell-size) * 0.36);
  text-align: center;
  text-shadow: none;
}

.countdown {
  color: #ffe36e;
  text-shadow: 0 0 10px #ffe36e;
}

/* V25 : animations de tirs / impacts */
.effects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
}

.shot-fx,
.impact-fx,
.death-fx {
  position: absolute;
  pointer-events: none;
  display: block;
}

.shot-single {
  width: calc(var(--cell-size) * .26);
  height: calc(var(--cell-size) * .26);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 14px #79ff79;
}

.shot-sniper {
  height: 2px;
  background: linear-gradient(90deg, transparent, #dff7ff, #ffffff);
  transform-origin: left center;
  box-shadow: 0 0 6px #8fd7ff, 0 0 12px #ffffff;
}

.shot-shell {
  width: calc(var(--cell-size) * .42);
  height: calc(var(--cell-size) * .42);
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 8px #ffb347, 0 0 16px #ff6b00;
}

.shot-multi {
  width: calc(var(--cell-size) * .20);
  height: calc(var(--cell-size) * .20);
  border-radius: 50%;
  background: #ff7777;
  box-shadow: 0 0 8px #ff7777, 0 0 12px #ffffff;
}

.impact-fx {
  width: calc(var(--cell-size) * .48);
  height: calc(var(--cell-size) * .48);
  transform: translate(-50%, -50%) scale(calc(.5 + var(--p, .5)));
  opacity: calc(1 - var(--p, .5));
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px currentColor;
}

.impact-triangle { color: #ffffff; }
.impact-x { color: #ff7777; }
.impact-sniper { color: #8fd7ff; }
.impact-square,
.impact-aoe {
  color: #ffb347;
  border-color: #ffb347;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.death-fx {
  width: calc(var(--cell-size) * .82);
  height: calc(var(--cell-size) * .82);
  transform: translate(-50%, -50%) scale(calc(.4 + var(--p, .5)));
  opacity: calc(1 - var(--p, .5));
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.75) 20%, transparent 62%);
  box-shadow:
    0 0 10px #fff,
    0 0 18px #ff7777,
    0 0 28px currentColor;
}


/* V26 : lobby local joueurs */
.lobby-panel {
  margin: 16px 0;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(100,255,100,.25);
  border-radius: 8px;
}

.player-row {
  display: grid;
  grid-template-columns: 80px 1fr 52px;
  gap: 6px;
  align-items: center;
  margin: 7px 0;
  font-size: 12px;
}

.player-row input[type="text"] {
  min-width: 0;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 5px;
  padding: 6px;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.radio-line {
  white-space: nowrap;
}

.player-n { color: #ff9ac5; }
.player-e { color: #8faaff; }
.player-s { color: #ffb067; }
.player-w { color: #b88aff; }

.secondary-btn,
.start-btn {
  margin-top: 8px;
}

.secondary-btn {
  background: rgba(255,255,255,.14);
  color: #fff;
}

.start-btn {
  background: #ffe36e;
  color: #181200;
}

.lobby-note {
  margin-top: 8px;
  font-size: 11px;
  color: #a8cfa8;
  line-height: 1.25;
}


/* V27 : salons + chat */
.room-panel,
.chat-panel {
  margin: 16px 0;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(100,255,100,.25);
  border-radius: 8px;
}

.room-code-line {
  font-size: 14px;
  margin-bottom: 8px;
}

#roomCode {
  font-size: 22px;
  color: #ffe36e;
  letter-spacing: 2px;
}

.join-line,
.profile-line,
.chat-input-line {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.join-line input,
.profile-line input,
.profile-line select,
.chat-input-line input {
  min-width: 0;
  flex: 1;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 5px;
  padding: 7px;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

.profile-line select {
  flex: 0 0 80px;
}

.mini-btn {
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 5px;
}

.start-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.my-color {
  margin: 8px 0;
  font-size: 13px;
  color: #fff;
}

.players-list {
  margin: 8px 0;
}

.player-pill {
  padding: 5px 7px;
  margin: 4px 0;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: 12px;
}

.player-n { color: #ff9ac5; }
.player-e { color: #8faaff; }
.player-s { color: #ffb067; }
.player-w { color: #b88aff; }

.chat-messages {
  height: 130px;
  overflow-y: auto;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}

.chat-line {
  margin-bottom: 5px;
  line-height: 1.25;
}

.chat-line.system {
  color: #a8cfa8;
  font-style: italic;
}


/* V28 : panneau de droite compact */
.container {
  gap: 14px !important;
  padding: 10px !important;
  align-items: flex-start !important;
}

.sidebar {
  width: 300px !important;
  flex: 0 0 300px !important;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 12px !important;
  scrollbar-width: thin;
}

.sidebar .title {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}

.stat {
  margin-bottom: 8px !important;
}

.stat-label {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}

.stat-value {
  font-size: 24px !important;
}

.room-panel,
.tower-panel,
.chat-panel,
.legend {
  margin: 8px 0 !important;
  padding: 8px !important;
}

.tower-choice {
  margin: 5px 0 !important;
  padding: 7px !important;
  font-size: 12px !important;
}

.tower-choice small {
  display: none !important;
}

#roomCode {
  font-size: 18px !important;
}

.join-line,
.profile-line,
.chat-input-line {
  margin: 5px 0 !important;
  gap: 4px !important;
}

.join-line input,
.profile-line input,
.profile-line select,
.chat-input-line input {
  padding: 5px !important;
  font-size: 11px !important;
}

.mini-btn {
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.start-btn {
  padding: 9px !important;
  font-size: 13px !important;
}

.players-list {
  margin: 5px 0 !important;
}

.player-pill {
  padding: 4px 6px !important;
  margin: 3px 0 !important;
  font-size: 11px !important;
}

.chat-messages {
  height: 85px !important;
  padding: 6px !important;
  font-size: 11px !important;
}

.message {
  margin-top: 8px !important;
  min-height: 30px !important;
  padding: 8px !important;
  font-size: 12px !important;
}

.legend-item {
  margin: 4px 0 !important;
  font-size: 11px !important;
}

.legend-box {
  width: 14px !important;
  height: 14px !important;
}

.selected-tower,
.my-color,
.lobby-note {
  font-size: 11px !important;
}

@media (max-width: 1200px) {
  .sidebar {
    width: 100% !important;
    flex: none !important;
    max-height: none;
  }
}


/* V29 : corrections pseudo + mobs multi-joueurs */
#pseudoInput:focus {
  border-color: #ffe36e !important;
  box-shadow: 0 0 8px rgba(255,227,110,.35);
}

.mob-smooth {
  /* décalage plus léger : évite de déborder visuellement du chemin */
  font-size: calc(var(--cell-size) * 0.38) !important;
}


/* V32 */
.hint {
  display: none !important;
}

#restartRoomBtn {
  display: none;
  background: rgba(255,255,255,.14);
  color: #fff;
}


/* V33 : tache de sang à la mort des mobs */
.death-fx {
  width: calc(var(--cell-size) * .95) !important;
  height: calc(var(--cell-size) * .95) !important;
  transform: translate(-50%, -50%) scale(calc(.45 + var(--p, .5) * .85)) rotate(18deg) !important;
  opacity: calc(1 - (var(--p, .5) * .85)) !important;
  border-radius: 48% 52% 43% 57% / 55% 45% 58% 42% !important;
  background:
    radial-gradient(circle at 42% 48%, rgba(140,0,0,.95) 0%, rgba(120,0,0,.85) 24%, transparent 50%),
    radial-gradient(circle at 62% 38%, rgba(190,0,0,.75) 0%, rgba(110,0,0,.65) 18%, transparent 42%),
    radial-gradient(circle at 28% 65%, rgba(210,0,0,.70) 0%, rgba(120,0,0,.55) 14%, transparent 36%),
    radial-gradient(circle at 72% 68%, rgba(120,0,0,.80) 0%, rgba(80,0,0,.55) 12%, transparent 34%) !important;
  box-shadow:
    0 0 5px rgba(255,0,0,.55),
    0 0 13px rgba(120,0,0,.65) !important;
}


/* V34 : nouvelles tours + boss */
.tower-ice { color: #8ff7ff; }
.tower-fast { color: #b6ff6e; }

.shot-ice {
  width: calc(var(--cell-size) * .24);
  height: calc(var(--cell-size) * .24);
  border-radius: 50%;
  background: #9ff8ff;
  box-shadow: 0 0 8px #9ff8ff, 0 0 15px #ffffff;
}

.shot-fast {
  width: calc(var(--cell-size) * .16);
  height: calc(var(--cell-size) * .16);
  border-radius: 50%;
  background: #b6ff6e;
  box-shadow: 0 0 6px #b6ff6e, 0 0 12px #ffffff;
}

.mob-slowed {
  text-shadow:
    0 0 3px #fff,
    0 0 8px #8ff7ff,
    0 0 14px #8ff7ff !important;
}

.mob-boss {
  font-size: calc(var(--cell-size) * 0.66) !important;
  color: #ff3030 !important;
  text-shadow:
    0 0 5px #fff,
    0 0 12px #ff3030,
    0 0 20px #ff0000 !important;
  transform: scale(1.35);
  z-index: 25;
}


/* V35 : nouvelles tours + boss */
.tower-ice { color: #8ff7ff; }
.tower-fast { color: #b6ff6e; }

.shot-ice {
  width: calc(var(--cell-size) * .24);
  height: calc(var(--cell-size) * .24);
  border-radius: 50%;
  background: #9ff8ff;
  box-shadow: 0 0 8px #9ff8ff, 0 0 15px #ffffff;
}

.shot-fast {
  width: calc(var(--cell-size) * .16);
  height: calc(var(--cell-size) * .16);
  border-radius: 50%;
  background: #b6ff6e;
  box-shadow: 0 0 6px #b6ff6e, 0 0 12px #ffffff;
}

.mob-slowed {
  text-shadow:
    0 0 3px #fff,
    0 0 8px #8ff7ff,
    0 0 14px #8ff7ff !important;
}

.mob-boss {
  font-size: calc(var(--cell-size) * 0.66) !important;
  color: #ff3030 !important;
  text-shadow:
    0 0 5px #fff,
    0 0 12px #ff3030,
    0 0 20px #ff0000 !important;
  transform: scale(1.35);
  z-index: 25;
}


/* =========================================================
   V38 : POLISH VISUEL GLOBAL
   ========================================================= */

:root {
  --bg-deep: #030611;
  --bg-panel: rgba(8, 18, 32, .82);
  --neon-green: #54ff8a;
  --neon-cyan: #67e8ff;
  --neon-yellow: #ffe36e;
  --grid-dark: #0b1220;
  --grid-floor: #121a27;
  --grid-wall: #2e3a4c;
  --grid-path: #232016;
}

/* Fond plus moderne */
body {
  background:
    radial-gradient(circle at 18% 18%, rgba(84,255,138,.13) 0%, transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(103,232,255,.10) 0%, transparent 28%),
    radial-gradient(circle at 50% 95%, rgba(255,227,110,.08) 0%, transparent 32%),
    linear-gradient(135deg, #02030a 0%, #071120 55%, #030611 100%) !important;
  color: #e9fff1 !important;
}

/* Effet grille de fond léger */
body::before {
  opacity: .16 !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

body::after {
  opacity: .55 !important;
  background:
    radial-gradient(ellipse at center, rgba(84,255,138,0) 0%, rgba(0,0,0,.45) 100%) !important;
}

/* Layout */
.container {
  max-width: 1720px !important;
  margin: 0 auto !important;
  backdrop-filter: blur(2px);
}

.left-panel,
.game-area {
  min-width: 0;
}

/* Titre */
.title {
  color: var(--neon-green) !important;
  text-shadow:
    0 0 8px rgba(84,255,138,.70),
    0 0 22px rgba(84,255,138,.35) !important;
  letter-spacing: 4px !important;
  text-transform: uppercase;
}

/* Plateau */
.game-wrapper {
  padding: 8px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(84,255,138,.16), rgba(103,232,255,.08)),
    rgba(0,0,0,.20);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.game-grid {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    #07101b !important;
  border: 2px solid rgba(84,255,138,.78) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 22px rgba(84,255,138,.18),
    0 0 60px rgba(103,232,255,.07),
    inset 0 0 24px rgba(0,0,0,.65) !important;
}

/* Cellules */
.cell {
  border-radius: 3px;
  transition:
    background .12s linear,
    transform .08s linear,
    box-shadow .12s linear;
}

.floor {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.035), transparent 55%),
    var(--grid-floor) !important;
}

.wall {
  background:
    linear-gradient(135deg, #465163, #202938) !important;
  color: rgba(255,255,255,.35) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.12),
    inset -1px -1px 0 rgba(0,0,0,.30);
}

.path {
  background:
    linear-gradient(135deg, rgba(255,227,110,.08), rgba(255,227,110,.02)),
    #181713 !important;
  color: transparent !important;
}

.center {
  background:
    radial-gradient(circle, rgba(84,255,138,.40), rgba(19,78,37,.92)) !important;
  color: #eaffea !important;
  text-shadow: 0 0 12px #54ff8a;
  box-shadow: inset 0 0 12px rgba(84,255,138,.45);
}

/* Zones joueurs plus lisibles */
.zone-n {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(135deg, rgba(255,75,150,.82), rgba(130,28,80,.88)) !important;
}

.zone-e {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.15), transparent 45%),
    linear-gradient(135deg, rgba(82,120,255,.86), rgba(26,50,150,.90)) !important;
}

.zone-s {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.15), transparent 45%),
    linear-gradient(135deg, rgba(255,148,54,.88), rgba(148,68,16,.92)) !important;
}

.zone-w {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.15), transparent 45%),
    linear-gradient(135deg, rgba(160,88,255,.88), rgba(76,34,155,.92)) !important;
}

.buildable:hover {
  outline: none !important;
  transform: scale(1.06);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.80),
    0 0 14px rgba(255,255,255,.45);
  z-index: 5;
}

/* Tours */
.tower {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), rgba(255,255,255,.03) 52%, transparent 75%) !important;
  text-shadow:
    0 0 5px #fff,
    0 0 12px currentColor !important;
}

.tower-symbol {
  filter: drop-shadow(0 0 6px currentColor);
}

.tower-triangle { color: #f9fff9 !important; }
.tower-square { color: #ffe36e !important; }
.tower-x { color: #ff6b6b !important; }
.tower-sniper { color: #8fd7ff !important; }
.tower-ice { color: #8ff7ff !important; }
.tower-fast { color: #b6ff6e !important; }

.tower-level {
  right: 0 !important;
  bottom: 0 !important;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 8px rgba(255,255,255,.25);
}

/* Mobs */
.mob-smooth {
  filter: drop-shadow(0 0 5px currentColor);
  transition: filter .08s linear;
}

.mob-n { color: #ff9ac5 !important; }
.mob-e { color: #8faaff !important; }
.mob-s { color: #ffb067 !important; }
.mob-w { color: #b88aff !important; }

.mob-slowed {
  color: #aaf8ff !important;
  filter:
    drop-shadow(0 0 5px #9ff8ff)
    drop-shadow(0 0 12px #9ff8ff) !important;
}

.mob-boss {
  animation: bossPulseV38 .85s infinite alternate ease-in-out;
}

@keyframes bossPulseV38 {
  from { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ff3030); }
  to   { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 24px #ff0000); }
}

/* Projectiles plus visibles */
.shot-single {
  background: #eaffea !important;
  box-shadow:
    0 0 8px #fff,
    0 0 18px #54ff8a !important;
}

.shot-multi {
  background: #ff6767 !important;
  box-shadow:
    0 0 8px #ff6767,
    0 0 16px #fff !important;
}

.shot-sniper {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #8fd7ff, #ffffff, transparent) !important;
  box-shadow:
    0 0 8px #8fd7ff,
    0 0 18px #ffffff !important;
}

.shot-shell {
  background: radial-gradient(circle, #fff2a6, #ff9f22 55%, #9e3c00) !important;
}

.shot-ice {
  background: radial-gradient(circle, #fff, #9ff8ff 55%, #2388ff) !important;
}

.shot-fast {
  background: radial-gradient(circle, #fff, #b6ff6e 60%, #3ac44b) !important;
}

/* Impacts / sang */
.impact-fx {
  mix-blend-mode: screen;
}

.death-fx {
  mix-blend-mode: normal;
}

/* Sidebar */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    var(--bg-panel) !important;
  border: 1px solid rgba(84,255,138,.55) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 22px rgba(84,255,138,.08);
  border-radius: 16px !important;
}

.stat {
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 6px 8px;
}

.stat-label {
  color: rgba(191,255,204,.75) !important;
  letter-spacing: .04em;
}

.stat-value {
  color: #f5fff7 !important;
  text-shadow: 0 0 10px rgba(84,255,138,.38) !important;
}

.stat-value.lives {
  color: #ff6b6b !important;
  text-shadow: 0 0 10px rgba(255,80,80,.55) !important;
}

.stat-value.gold {
  color: var(--neon-yellow) !important;
  text-shadow: 0 0 10px rgba(255,227,110,.55) !important;
}

/* Panels */
.room-panel,
.tower-panel,
.chat-panel,
.legend,
.message {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
    rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
}

#roomCode {
  color: var(--neon-yellow) !important;
  text-shadow: 0 0 10px rgba(255,227,110,.45);
}

input,
select {
  outline: none;
}

.join-line input,
.profile-line input,
.profile-line select,
.chat-input-line input {
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(103,232,255,.18) !important;
  color: #e9fff1 !important;
}

.join-line input:focus,
.profile-line input:focus,
.profile-line select:focus,
.chat-input-line input:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 10px rgba(103,232,255,.23);
}

/* Boutons */
button,
.mini-btn,
.tower-choice {
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.25);
}

button:hover,
.mini-btn:hover,
.tower-choice:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 14px rgba(84,255,138,.22),
    0 10px 20px rgba(0,0,0,.30);
}

.tower-choice {
  background:
    linear-gradient(135deg, rgba(84,255,138,.12), rgba(103,232,255,.06)) !important;
}

.tower-choice.active {
  background:
    linear-gradient(135deg, rgba(84,255,138,.38), rgba(103,232,255,.20)) !important;
  border-color: rgba(84,255,138,.95) !important;
  box-shadow:
    0 0 16px rgba(84,255,138,.28),
    inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

.start-btn {
  background: linear-gradient(135deg, #ffe36e, #ffb347) !important;
  color: #1b1200 !important;
}

.secondary-btn {
  background: rgba(255,255,255,.10) !important;
}

/* Joueurs */
.player-pill {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05) !important;
}

.player-pill.player-n { box-shadow: inset 3px 0 0 #ff9ac5; }
.player-pill.player-e { box-shadow: inset 3px 0 0 #8faaff; }
.player-pill.player-s { box-shadow: inset 3px 0 0 #ffb067; }
.player-pill.player-w { box-shadow: inset 3px 0 0 #b88aff; }

/* Chat */
.chat-messages {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(103,232,255,.12) !important;
}

.chat-line {
  padding: 2px 0;
}

.chat-line.system {
  color: #b7ffc4 !important;
}

/* Scrollbars */
.sidebar::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(84,255,138,.34);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: rgba(0,0,0,.18);
}

/* Petite animation au chargement */
.game-grid,
.sidebar {
  animation: fadeInV38 .35s ease-out;
}

@keyframes fadeInV38 {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   V41 : FULLSCREEN MAP + CAMERA + FIXED SIDEBAR
   ========================================================= */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

.container {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.left-panel {
  position: fixed !important;
  left: 0;
  top: 0;
  width: calc(100vw - 340px) !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.title {
  position: fixed !important;
  left: 18px;
  top: 12px;
  z-index: 70;
  margin: 0 !important;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(84,255,138,.28);
  pointer-events: none;
}

.game-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  cursor: crosshair;
}

.game-wrapper::before,
.game-wrapper::after {
  content: "";
  position: absolute;
  z-index: 55;
  pointer-events: none;
}

.game-wrapper::before {
  inset: 0;
  background:
    linear-gradient(to right, rgba(84,255,138,.14), transparent 8%, transparent 92%, rgba(84,255,138,.14)),
    linear-gradient(to bottom, rgba(84,255,138,.14), transparent 8%, transparent 92%, rgba(84,255,138,.14));
  opacity: .32;
}

.game-wrapper::after {
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  content: "Déplace la souris vers les bords pour explorer la map";
  background: rgba(0,0,0,.44);
  color: rgba(233,255,241,.72);
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.10);
}

.game-grid {
  position: absolute !important;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  transition: none !important;
  max-width: none !important;
  user-select: none;
}

.sidebar {
  position: fixed !important;
  right: 0;
  top: 0;
  width: 340px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  flex: none !important;
  border-radius: 0 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 10px !important;
  overflow-y: auto !important;
  z-index: 100;
}

.hint {
  display: none !important;
}

@media (max-width: 900px) {
  .left-panel {
    width: calc(100vw - 300px) !important;
  }

  .sidebar {
    width: 300px !important;
  }
}

/* Mini map */
.minimap-panel {
  margin: 8px 0 !important;
  padding: 8px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
    rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
}

.minimap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(103,232,255,.16);
  position: relative;
}

.minimap-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  gap: 0;
}

.mm-cell {
  min-width: 0;
  min-height: 0;
}

.mm-floor { background: #101826; }
.mm-wall { background: #566174; }
.mm-path { background: #3a3219; }
.mm-n { background: #c63878; }
.mm-e { background: #355ed6; }
.mm-s { background: #d87320; }
.mm-w { background: #7038c7; }

.mm-tower {
  box-shadow: inset 0 0 0 1px #fff;
  filter: brightness(1.35);
}

.mm-mob {
  background: #fff !important;
  box-shadow: 0 0 4px #fff;
  z-index: 2;
}

.minimap-view {
  position: absolute;
  border: 2px solid #ffffff;
  box-shadow:
    0 0 6px rgba(255,255,255,.9),
    inset 0 0 5px rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 5;
}


/* =========================================================
   V42 : camera fix + bottom UI + flatter style
   ========================================================= */

/* Enlever bordures fluo et arrondis globalement */
* {
  border-radius: 0 !important;
}

.game-wrapper::after {
  display: none !important;
  content: none !important;
}

/* Vue plein écran avec barre basse */
.left-panel {
  width: calc(100vw - 320px) !important;
  height: calc(100vh - 150px) !important;
  bottom: 150px !important;
}

.game-wrapper {
  height: calc(100vh - 150px) !important;
  cursor: default !important;
}

.sidebar {
  width: 320px !important;
  height: calc(100vh - 150px) !important;
  max-height: calc(100vh - 150px) !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.title {
  border: none !important;
  background: rgba(0,0,0,.45) !important;
  box-shadow: none !important;
}

.game-wrapper,
.game-grid,
.sidebar,
.room-panel,
.chat-panel,
.legend,
.message,
.stat,
.minimap-panel,
.tower-panel,
.tower-choice,
button,
.mini-btn,
.start-btn,
.secondary-btn,
input,
select {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

/* Supprime le côté fluo trop marqué */
.game-grid {
  border: 1px solid rgba(255,255,255,.18) !important;
}

.game-wrapper {
  background: rgba(0,0,0,.12) !important;
  border: none !important;
}

/* Bottom panel */
.bottom-panel {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 150px;
  z-index: 120;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(14,22,34,.94), rgba(5,8,14,.98));
  border-top: 1px solid rgba(255,255,255,.16);
}

.bottom-minimap,
.bottom-towers {
  min-width: 0;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px;
}

.bottom-minimap .legend-title,
.bottom-towers .legend-title {
  margin-bottom: 6px;
  font-size: 12px;
}

.bottom-minimap .minimap {
  height: 108px;
  width: 108px;
  aspect-ratio: 1 / 1;
  max-height: none;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.14);
}

.tower-strip {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 4px;
}

.bottom-towers .tower-choice {
  width: 78px !important;
  min-width: 78px;
  height: 52px;
  margin: 0 !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  font-size: 20px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.bottom-towers .tower-choice span {
  float: none !important;
  display: block;
  font-size: 11px;
  margin-top: 2px;
  color: #ffe36e;
}

.bottom-towers .tower-choice.active {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.60) !important;
}

.bottom-towers .selected-tower {
  margin-top: 6px;
  font-size: 12px !important;
  color: #fff;
}

.tower-details {
  margin-top: 4px;
  color: rgba(233,255,241,.76);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cache ancien panneau tours s'il reste dans la sidebar */
.sidebar > .tower-panel,
.sidebar > .minimap-panel {
  display: none !important;
}

/* Mini map doit rester lisible */
.minimap-grid {
  border: none !important;
}

.minimap-view {
  border: 1px solid #fff !important;
  box-shadow: none !important;
}

/* Plus compact pour tout voir à droite */
.sidebar .legend {
  display: none !important;
}

.sidebar .stat {
  padding: 4px 6px !important;
  margin-bottom: 5px !important;
}

.sidebar .stat-value {
  font-size: 20px !important;
}

.room-panel,
.chat-panel {
  margin: 6px 0 !important;
  padding: 7px !important;
}

.message {
  min-height: 22px !important;
  padding: 6px !important;
}

.chat-messages {
  height: 70px !important;
}

@media (max-width: 1000px) {
  .left-panel {
    width: calc(100vw - 280px) !important;
  }

  .sidebar {
    width: 280px !important;
  }

  .bottom-panel {
    grid-template-columns: 150px 1fr;
  }

  .bottom-towers .tower-choice {
    width: 66px !important;
    min-width: 66px;
  }
}


/* V46 : caméra vraiment active + #game responsive dans #game-wrapper */
.game-grid {
  max-width: none !important;
  width: max-content !important;
  height: max-content !important;
  overflow: visible !important;
}

.left-panel,
.game-wrapper {
  touch-action: none;
}

.game-wrapper {
  background-size: cover !important;
}

.bottom-panel {
  user-select: none;
}


/* V47 : ultra-wide fill, minimap drag, tower stats */
.game-grid {
  min-width: 100% !important;
  min-height: 100% !important;
}

.minimap {
  cursor: grab;
}

.minimap:active {
  cursor: grabbing;
}

.placed-tower-stats {
  margin-top: 7px;
  padding: 7px 8px;
  min-height: 34px;
  font-size: 12px;
  color: rgba(233,255,241,.88);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  text-overflow: ellipsis;
}

.placed-tower-stats span {
  color: rgba(255,255,255,.62);
}

.friend-tower-stats {
  color: rgba(180,185,190,.72) !important;
  filter: grayscale(.75);
}

.selected-placed-tower {
  outline: 2px solid rgba(255,255,255,.85) !important;
  outline-offset: -2px;
  filter: brightness(1.2);
}

.bottom-towers {
  display: flex;
  flex-direction: column;
}

.tower-details {
  white-space: normal !important;
}


/* V48 : bottom order = minimap | towers | selected tower stats */
.bottom-panel {
  grid-template-columns: 170px minmax(430px, 1fr) 360px !important;
}

.bottom-placed-stats {
  min-width: 0;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px;
}

.bottom-placed-stats .legend-title {
  margin-bottom: 6px;
  font-size: 12px;
}

.bottom-towers .placed-tower-stats {
  display: none !important;
}

.bottom-placed-stats .placed-tower-stats {
  display: block !important;
  height: 88px;
  margin-top: 0;
  overflow: auto;
  white-space: normal;
  line-height: 1.35;
}

.friend-tower-stats {
  opacity: .65;
}

/* For very wide screens, make #game cover the viewport area visually */
.game-grid {
  min-width: 100% !important;
  min-height: 100% !important;
}

@media (min-width: 1700px) {
  .bottom-panel {
    grid-template-columns: 190px minmax(560px, 1fr) 420px !important;
  }
}

@media (max-width: 1150px) {
  .bottom-panel {
    grid-template-columns: 140px 1fr 260px !important;
  }

  .bottom-placed-stats .placed-tower-stats {
    font-size: 11px;
  }
}


/* V49 : suppression de l'ascenseur dans .tower-strip */
.tower-strip {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(62px, 1fr)) !important;
  gap: 8px !important;
  padding-bottom: 0 !important;
  align-items: stretch !important;
}

.bottom-towers .tower-choice {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  box-sizing: border-box !important;
}

.bottom-towers {
  overflow: hidden !important;
}

@media (max-width: 1250px) {
  .tower-strip {
    grid-template-columns: repeat(3, minmax(58px, 1fr)) !important;
    gap: 6px !important;
  }

  .bottom-towers .tower-choice {
    height: 42px !important;
    font-size: 15px !important;
    padding: 4px !important;
  }

  .bottom-towers .tower-choice span {
    font-size: 10px !important;
  }

  .tower-details,
  .selected-tower {
    font-size: 10px !important;
  }
}


/* V50 : HUD argent permanent */
.money-hud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 180;
  display: flex;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
  font-family: "Courier New", monospace;
}

.money-hud-main,
.money-hud-total {
  background: rgba(3, 6, 12, .82);
  border: 1px solid rgba(255,255,255,.16);
  padding: 8px 14px;
  color: #fff;
  min-width: 150px;
  text-align: center;
}

.money-hud-main {
  min-width: 210px;
}

.money-hud-label,
.money-hud-total span {
  display: block;
  font-size: 11px;
  color: rgba(233,255,241,.72);
  letter-spacing: .08em;
}

#moneyHudMine {
  display: block;
  font-size: 42px;
  line-height: 1;
  color: #ffe36e;
  text-shadow: 0 0 10px rgba(255,227,110,.45);
}

#moneyHudTotal {
  display: block;
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.1;
  color: #b6ff6e;
}

@media (max-width: 1050px) {
  .money-hud {
    left: 12px;
    transform: none;
    gap: 6px;
  }

  .money-hud-main {
    min-width: 150px;
  }

  #moneyHudMine {
    font-size: 30px;
  }

  #moneyHudTotal {
    font-size: 18px;
  }
}


/* V51 : argent actuel + cumul par joueur */
.money-hud-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

#moneyHudMine {
  font-size: 46px !important;
}

.money-hud-total {
  min-width: 260px !important;
  text-align: left !important;
}

.money-hud-players {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}

.money-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: rgba(233,255,241,.78);
  background: rgba(255,255,255,.045);
  padding: 2px 5px;
  min-width: 0;
}

.money-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-player strong {
  color: #b6ff6e;
  font-size: 13px;
}

.money-player.is-me {
  background: rgba(255,227,110,.15);
}

.money-player-n { border-left: 3px solid #ff9ac5; }
.money-player-e { border-left: 3px solid #8faaff; }
.money-player-s { border-left: 3px solid #ffb067; }
.money-player-w { border-left: 3px solid #b88aff; }

/* Projectiles légèrement plus visibles */
.shot-fx {
  z-index: 35 !important;
}

.effects-layer {
  z-index: 30 !important;
}


/* V52 : suppression label cumul + vente tour */
.money-hud-total > span {
  display: none !important;
}

.placed-tower-stats {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.placed-stats-main {
  min-width: 0;
}

.sell-tower-btn {
  width: auto !important;
  min-width: 92px;
  padding: 7px 10px !important;
  background: rgba(255,227,110,.18) !important;
  color: #ffe36e !important;
  border: 1px solid rgba(255,227,110,.35) !important;
  cursor: pointer;
  font-size: 12px !important;
}

.sell-tower-btn:hover {
  background: rgba(255,227,110,.28) !important;
}

.sell-disabled {
  color: rgba(180,185,190,.72);
  font-size: 11px;
  text-align: right;
  max-width: 120px;
}


/* V53 : rotation de vue par joueur */
.game-grid {
  transform-origin: center center !important;
  will-change: transform;
}


/* V54 : mini map cohérente avec la vue tournée */
.minimap .minimap-grid {
  transform-origin: center center;
}

.minimap.view-n .minimap-grid {
  transform: rotate(180deg);
}

.minimap.view-e .minimap-grid {
  transform: rotate(90deg);
}

.minimap.view-s .minimap-grid {
  transform: rotate(0deg);
}

.minimap.view-w .minimap-grid {
  transform: rotate(-90deg);
}

/* Garder les tours lisibles même quand la map est tournée */
#game.view-n .tower-symbol,
#game.view-n .tower-level {
  transform: rotate(180deg);
}

#game.view-e .tower-symbol,
#game.view-e .tower-level {
  transform: rotate(-90deg);
}

#game.view-s .tower-symbol,
#game.view-s .tower-level {
  transform: rotate(0deg);
}

#game.view-w .tower-symbol,
#game.view-w .tower-level {
  transform: rotate(90deg);
}

.tower-symbol,
.tower-level {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* Les mobs et boss restent aussi lisibles */
#game.view-n .mob-smooth {
  transform: translate(-50%, -50%) rotate(180deg);
}

#game.view-e .mob-smooth {
  transform: translate(-50%, -50%) rotate(-90deg);
}

#game.view-s .mob-smooth {
  transform: translate(-50%, -50%) rotate(0deg);
}

#game.view-w .mob-smooth {
  transform: translate(-50%, -50%) rotate(90deg);
}


/* V55 : correction mobs hors chemin après rotation V54
   Le left/top calculé est déjà aligné sur la case. Le translate(-50%, -50%) décalait les mobs. */
#game.view-n .mob-smooth {
  transform: rotate(180deg) !important;
}

#game.view-e .mob-smooth {
  transform: rotate(-90deg) !important;
}

#game.view-s .mob-smooth {
  transform: rotate(0deg) !important;
}

#game.view-w .mob-smooth {
  transform: rotate(90deg) !important;
}

/* V55 : sidebar plus compacte avec stats groupées */
.stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.stats-grid .stat {
  margin: 0 !important;
  min-width: 0;
}

.stats-grid .stat-label {
  font-size: 10px !important;
}

.stats-grid .stat-value {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

.sidebar {
  padding: 7px !important;
}

.room-panel,
.chat-panel,
.message {
  margin: 5px 0 !important;
  padding: 6px !important;
}

.room-code-line {
  margin-bottom: 4px !important;
}

#roomCode {
  font-size: 16px !important;
}

.players-list {
  margin: 4px 0 !important;
}

.player-pill {
  padding: 3px 5px !important;
  margin: 2px 0 !important;
  font-size: 10px !important;
}

.join-line,
.profile-line,
.chat-input-line {
  margin: 4px 0 !important;
}

.chat-messages {
  height: 58px !important;
}

.message {
  font-size: 11px !important;
  min-height: 18px !important;
}


/* V56 : mini map cohérente avec les rotations
   Elle est maintenant rendue dans le bon repère en JS, donc plus de rotation CSS. */
.minimap.view-n .minimap-grid,
.minimap.view-e .minimap-grid,
.minimap.view-s .minimap-grid,
.minimap.view-w .minimap-grid,
.minimap .minimap-grid.view-n,
.minimap .minimap-grid.view-e,
.minimap .minimap-grid.view-s,
.minimap .minimap-grid.view-w {
  transform: none !important;
}

/* Ordre stats : ligne 1 Vies/Vague, ligne 2 Crédits/Score */
.stats-grid .stat:nth-child(3) {
  order: 3;
}

.stats-grid .stat:nth-child(4) {
  order: 4;
}


/* V60 : rotation réelle au rendu, plus de rotation CSS du plateau */
#game.view-n,
#game.view-e,
#game.view-s,
#game.view-w {
  transform-origin: 0 0 !important;
}

#game.view-n .tower-symbol,
#game.view-n .tower-level,
#game.view-e .tower-symbol,
#game.view-e .tower-level,
#game.view-s .tower-symbol,
#game.view-s .tower-level,
#game.view-w .tower-symbol,
#game.view-w .tower-level,
#game.view-n .mob-smooth,
#game.view-e .mob-smooth,
#game.view-s .mob-smooth,
#game.view-w .mob-smooth {
  transform: none !important;
}


/* V61 : placement joueurs cohérent dans la mini map */
.mm-player-marker {
  position: absolute;
  z-index: 6;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.75);
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}

.mm-player-marker.is-me {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.mm-player-n { box-shadow: inset 0 -3px 0 #ff9ac5; }
.mm-player-e { box-shadow: inset 0 -3px 0 #8faaff; }
.mm-player-s { box-shadow: inset 0 -3px 0 #ffb067; }
.mm-player-w { box-shadow: inset 0 -3px 0 #b88aff; }


/* V62 : marqueurs joueurs centrés sur leur territoire dans la mini map */
.mm-player-marker {
  width: 16px !important;
  height: 16px !important;
  margin-left: -8px !important;
  margin-top: -8px !important;
  font-size: 10px !important;
  z-index: 10 !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  background: rgba(0,0,0,.76) !important;
}

.mm-player-marker.is-me {
  outline: 2px solid #ffe36e !important;
  outline-offset: 1px !important;
}

.mm-player-n { color: #ff9ac5 !important; }
.mm-player-e { color: #8faaff !important; }
.mm-player-s { color: #ffb067 !important; }
.mm-player-w { color: #b88aff !important; }

/* Verrouille définitivement la mini map sans rotation CSS */
.minimap .minimap-grid,
.minimap.view-n .minimap-grid,
.minimap.view-e .minimap-grid,
.minimap.view-s .minimap-grid,
.minimap.view-w .minimap-grid,
.minimap .minimap-grid.view-n,
.minimap .minimap-grid.view-e,
.minimap .minimap-grid.view-s,
.minimap .minimap-grid.view-w {
  transform: none !important;
  transform-origin: 0 0 !important;
}


/* V63 : mini map miroir exact du plateau */
.mm-player-marker {
  display: none !important;
}

.mm-mob-dot {
  position: absolute;
  z-index: 8;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.7);
  pointer-events: none;
}

.mm-mob-n { box-shadow: 0 0 3px #ff9ac5; }
.mm-mob-e { box-shadow: 0 0 3px #8faaff; }
.mm-mob-s { box-shadow: 0 0 3px #ffb067; }
.mm-mob-w { box-shadow: 0 0 3px #b88aff; }


/* V64 : mini map = miroir exact du plateau visible */
.mm-player-marker {
  display: none !important;
}

.mm-mob-dot {
  position: absolute;
  z-index: 8;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.7);
  pointer-events: none;
}

.mm-mob-n { box-shadow: 0 0 3px #ff9ac5; }
.mm-mob-e { box-shadow: 0 0 3px #8faaff; }
.mm-mob-s { box-shadow: 0 0 3px #ffb067; }
.mm-mob-w { box-shadow: 0 0 3px #b88aff; }

/* Verrouille la mini map sans rotation CSS parasite */
.minimap .minimap-grid,
.minimap.view-n .minimap-grid,
.minimap.view-e .minimap-grid,
.minimap.view-s .minimap-grid,
.minimap.view-w .minimap-grid,
.minimap .minimap-grid.view-n,
.minimap .minimap-grid.view-e,
.minimap .minimap-grid.view-s,
.minimap .minimap-grid.view-w {
  transform: none !important;
  transform-origin: 0 0 !important;
}


/* V70 : drag mini map/rectangle blanc fiable */
#minimap,
.minimap,
.minimap-grid {
  touch-action: none !important;
  user-select: none !important;
  cursor: grab !important;
}

#minimap:active,
.minimap:active {
  cursor: grabbing !important;
}

.minimap-view {
  pointer-events: none !important;
}


/* V72 : barres de vie mobs */
.mob-smooth {
  overflow: visible !important;
}

.mob-label {
  position: relative;
  z-index: 2;
  display: inline-block;
}

.mob-hp {
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  width: 82%;
  height: 4px;
  background: rgba(120, 0, 0, .72);
  border: 1px solid rgba(0,0,0,.72);
  box-sizing: border-box;
  z-index: 4;
  pointer-events: none;
}

.mob-boss .mob-hp {
  top: -9px;
  width: 96%;
  height: 5px;
}

.mob-hp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff3030, #ffe36e, #6eff78);
  box-shadow: 0 0 4px rgba(110,255,120,.45);
}

/* V72 : animation des tours au tir */
.tower-fire-fx {
  position: absolute;
  width: calc(var(--cell-size) * .70);
  height: calc(var(--cell-size) * .70);
  border: 2px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.12);
  z-index: 28;
  pointer-events: none;
  box-sizing: border-box;
}

.tower-fire-triangle {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-color: rgba(255,227,110,.90);
  background: rgba(255,227,110,.18);
}

.tower-fire-square {
  border-color: rgba(255,128,64,.90);
  background: rgba(255,128,64,.20);
}

.tower-fire-x {
  border-color: rgba(150,220,255,.95);
  background:
    linear-gradient(45deg, transparent 42%, rgba(150,220,255,.75) 45%, rgba(150,220,255,.75) 55%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, rgba(150,220,255,.75) 45%, rgba(150,220,255,.75) 55%, transparent 58%);
}

.tower-fire-sniper {
  width: calc(var(--cell-size) * .95);
  height: calc(var(--cell-size) * .22);
  border-color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.30);
}

.tower-fire-ice {
  border-color: rgba(120,220,255,.95);
  background: rgba(120,220,255,.22);
  box-shadow: 0 0 10px rgba(120,220,255,.65);
}

.tower-fire-fast {
  border-color: rgba(180,255,110,.95);
  background: rgba(180,255,110,.20);
}


/* V73 : barres de vie mobs plus discrètes */
.mob-hp {
  width: 40% !important;
  height: 3px !important;
  top: -5px !important;
}

.mob-boss .mob-hp {
  width: 52% !important;
  height: 4px !important;
  top: -7px !important;
}

.mob-hp-fill {
  box-shadow: 0 0 2px rgba(110,255,120,.35) !important;
}


/* V74 : barres de vie mobs encore plus petites et plus proches du mob */
.mob-hp {
  width: 20% !important;
  height: 2px !important;
  top: -2px !important;
  border-width: 0 !important;
}

.mob-boss .mob-hp {
  width: 28% !important;
  height: 3px !important;
  top: -4px !important;
}

.mob-hp-fill {
  box-shadow: none !important;
}

/* V74 : upgrade manuel tours */
.tower-upgrade-icon {
  position: absolute;
  right: 1px;
  top: 0px;
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  color: #101806;
  background: #b6ff6e;
  border: 1px solid rgba(0,0,0,.55);
  z-index: 5;
  pointer-events: none;
}

.tower-upgrade-ready {
  box-shadow: inset 0 0 0 2px rgba(182,255,110,.55) !important;
}

.tower-action-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.upgrade-tower-btn,
.sell-tower-btn {
  white-space: nowrap;
}

.upgrade-tower-btn {
  width: auto !important;
  min-width: 96px;
  padding: 7px 10px !important;
  background: rgba(182,255,110,.20) !important;
  color: #b6ff6e !important;
  border: 1px solid rgba(182,255,110,.42) !important;
  cursor: pointer;
  font-size: 12px !important;
}

.upgrade-tower-btn:hover:not(:disabled) {
  background: rgba(182,255,110,.30) !important;
}

.upgrade-tower-btn.disabled,
.upgrade-tower-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  color: rgba(220,220,220,.75) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.15) !important;
}


/* V75 : barre de vie plus proche du mob et plus épaisse */
.mob-hp {
  width: 20% !important;
  height: 3px !important;
  top: -1px !important;
  border-width: 0 !important;
}

.mob-boss .mob-hp {
  width: 28% !important;
  height: 4px !important;
  top: -2px !important;
}

.mob-hp-fill {
  min-width: 1px;
}


/* V76 : barre de vie mobs plus épaisse et beaucoup plus proche du mob */
.mob-hp {
  width: 20% !important;
  height: 4px !important;
  top: 1px !important;
  border-width: 0 !important;
  background: rgba(110, 0, 0, .78) !important;
  z-index: 5 !important;
}

.mob-boss .mob-hp {
  width: 28% !important;
  height: 5px !important;
  top: 0px !important;
}

.mob-hp-fill {
  min-width: 1px;
  box-shadow: none !important;
}

/* V76 : zone stats reset visuel */
.placed-tower-stats:empty::before {
  content: "Clique sur une tour posée pour voir ses stats.";
}


/* V77 : barre de vie collée au mob, espace vertical fortement réduit */
.mob-hp {
  width: 20% !important;
  height: 5px !important;
  top: 6px !important;
  border-width: 0 !important;
  background: rgba(110, 0, 0, .80) !important;
  z-index: 6 !important;
}

.mob-boss .mob-hp {
  width: 28% !important;
  height: 6px !important;
  top: 8px !important;
}

.mob-hp-fill {
  min-width: 1px;
  box-shadow: none !important;
}

/* V77 : panneau stats tour sans ascenseur vertical */
.bottom-placed-stats {
  overflow: visible !important;
}

.bottom-placed-stats .placed-tower-stats,
.placed-tower-stats {
  height: auto !important;
  min-height: 58px !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: center !important;
}

.placed-tower-stats {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.placed-stats-main {
  line-height: 1.2 !important;
  font-size: 11px !important;
}

.tower-action-buttons {
  flex-wrap: nowrap !important;
  gap: 5px !important;
}

.upgrade-tower-btn,
.sell-tower-btn {
  min-width: 78px !important;
  padding: 5px 7px !important;
  font-size: 11px !important;
}

/* V77 : animation de la tour elle-même au tir */
.cell.tower {
  transition: transform .08s ease, filter .08s ease, text-shadow .08s ease;
  transform-origin: center center;
}

.cell.tower-firing {
  animation: towerFireKickV77 230ms ease-out;
  z-index: 8;
}

.cell.tower-firing .tower-symbol {
  animation: towerSymbolFireV77 230ms ease-out;
}

.cell.tower-firing-triangle {
  filter: brightness(1.8) drop-shadow(0 0 5px rgba(255,227,110,.75));
}

.cell.tower-firing-square {
  filter: brightness(1.75) drop-shadow(0 0 6px rgba(255,128,64,.75));
}

.cell.tower-firing-x {
  filter: brightness(1.75) drop-shadow(0 0 6px rgba(150,220,255,.85));
}

.cell.tower-firing-sniper {
  filter: brightness(2.0) drop-shadow(0 0 7px rgba(255,255,255,.90));
}

.cell.tower-firing-ice {
  filter: brightness(1.8) drop-shadow(0 0 7px rgba(120,220,255,.90));
}

.cell.tower-firing-fast {
  filter: brightness(1.85) drop-shadow(0 0 6px rgba(180,255,110,.85));
}

@keyframes towerFireKickV77 {
  0%   { transform: scale(1) translateY(0); }
  28%  { transform: scale(1.24) translateY(-1px); }
  58%  { transform: scale(.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes towerSymbolFireV77 {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.28) rotate(-4deg); }
  70%  { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* On neutralise l'ancien effet visuel carré des tours si présent */
.tower-fire-fx {
  display: none !important;
}


/* V78 : tour aura + buffs */
.aura-mode-panel {
  display: none;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  font-size: 11px;
}

.aura-mode-panel.active {
  display: flex;
}

.aura-mode-choice {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(240,245,255,.86);
  padding: 4px 7px;
  cursor: pointer;
  font-size: 11px;
}

.aura-mode-choice.active {
  background: rgba(182,255,110,.20);
  color: #b6ff6e;
  border-color: rgba(182,255,110,.45);
}

.tower-aura-buffed {
  box-shadow: inset 0 0 0 2px rgba(80,255,120,.72), 0 0 8px rgba(80,255,120,.35) !important;
}

.tower-buff-text {
  color: #6eff78 !important;
  font-weight: 700;
}

.tower-aura-damage {
  box-shadow: inset 0 0 0 2px rgba(255,120,80,.60), 0 0 8px rgba(255,120,80,.30) !important;
}

.tower-aura-speed {
  box-shadow: inset 0 0 0 2px rgba(120,220,255,.60), 0 0 8px rgba(120,220,255,.30) !important;
}

.tower-aura-damage .tower-symbol,
.tower-aura-speed .tower-symbol {
  font-weight: 900;
}

.tower-aura-buffed .tower-symbol::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(110,255,120,.55);
  pointer-events: none;
}

.aura-switch-btn {
  width: auto !important;
  min-width: 68px;
  padding: 5px 7px !important;
  font-size: 11px !important;
  color: rgba(240,245,255,.82);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
}

.aura-switch-btn.active {
  color: #b6ff6e;
  background: rgba(182,255,110,.20);
  border-color: rgba(182,255,110,.45);
}


/* V79 : gestionnaire de tours compact sur une seule ligne */
.bottom-towers {
  min-width: 0 !important;
}

.tower-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: visible !important;
  align-items: stretch !important;
}

.tower-choice {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 4px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  height: 30px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.tower-choice span {
  font-size: 10px !important;
  line-height: 1 !important;
}

.selected-tower {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.tower-details {
  margin-top: 3px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  min-height: 12px !important;
}

.aura-mode-panel {
  margin-top: 3px !important;
  gap: 4px !important;
  font-size: 10.5px !important;
}

.aura-mode-choice {
  padding: 3px 5px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

/* Très petits écrans : on garde une ligne, mais on masque le prix dans le bouton si nécessaire */
@media (max-width: 900px) {
  .tower-choice {
    font-size: 12px !important;
    padding: 3px 2px !important;
    gap: 2px !important;
  }

  .tower-choice span {
    font-size: 9px !important;
  }
}

@media (max-width: 720px) {
  .tower-choice {
    font-size: 11px !important;
  }

  .tower-choice span {
    display: none !important;
  }
}


/* V80 : choix aura en fenêtre flottante, plus dans le bandeau compact */
.aura-mode-panel {
  display: none !important;
}

.aura-picker {
  position: fixed;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%) translateY(8px);
  z-index: 150;
  display: none;
  min-width: 320px;
  max-width: calc(100vw - 24px);
  padding: 9px;
  background: rgba(9, 12, 20, .94);
  border: 1px solid rgba(182,255,110,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.aura-picker.active {
  display: block;
  animation: auraPickerInV80 .12s ease-out forwards;
}

.aura-picker-title {
  font-size: 11px;
  font-weight: 800;
  color: rgba(240,245,255,.85);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.aura-picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.aura-picker-choice {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(240,245,255,.86);
  cursor: pointer;
  text-align: left;
}

.aura-picker-choice strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
}

.aura-picker-choice span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(240,245,255,.62);
}

.aura-picker-choice.active {
  background: rgba(182,255,110,.20);
  color: #b6ff6e;
  border-color: rgba(182,255,110,.55);
}

.aura-picker-choice.active span {
  color: rgba(220,255,190,.86);
}

.tower-choice[data-tower-type="aura"].aura-damage-selected {
  box-shadow: inset 0 -3px 0 rgba(255,120,80,.95) !important;
}

.tower-choice[data-tower-type="aura"].aura-speed-selected {
  box-shadow: inset 0 -3px 0 rgba(120,220,255,.95) !important;
}

@keyframes auraPickerInV80 {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-height: 650px) {
  .aura-picker {
    bottom: 96px;
    padding: 7px;
  }

  .aura-picker-choice {
    padding: 6px 7px;
  }
}


/* V81 : tour stun et aura figée */
.mob-stunned {
  filter: brightness(1.75) drop-shadow(0 0 5px rgba(255,255,255,.95)) !important;
}

.mob-stunned .mob-label::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  font-size: 9px;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255,255,255,.95);
  pointer-events: none;
}

.cell.tower-stun {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,.75);
}

.cell.tower-firing-stun {
  filter: brightness(2.0) drop-shadow(0 0 7px rgba(255,255,255,.95));
}

.aura-locked-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 5px 7px;
  font-size: 11px;
  color: #b6ff6e;
  border: 1px solid rgba(182,255,110,.28);
  background: rgba(182,255,110,.10);
  white-space: nowrap;
}

.aura-picker-choice.active {
  color: #b6ff6e;
}

/* V82 : fusion de tours */
.fuse-tower-btn {
  width: auto !important;
  min-width: 82px;
  padding: 5px 7px !important;
  font-size: 11px !important;
  color: #ffd36e !important;
  background: rgba(255,211,110,.16) !important;
  border: 1px solid rgba(255,211,110,.42) !important;
  cursor: pointer;
  white-space: nowrap;
}

.fuse-tower-btn:hover:not(:disabled) {
  background: rgba(255,211,110,.25) !important;
}

.tower-action-buttons {
  flex-wrap: nowrap !important;
}


/* V84 : fluidité mobs/projectiles */
.mob-smooth {
  left: 0 !important;
  top: 0 !important;
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
  contain: layout style paint;
}

.shot-fx,
.impact-fx,
.death-fx {
  will-change: transform, opacity, left, top;
  backface-visibility: hidden;
}

.mobs-layer,
.effects-layer {
  pointer-events: none;
  contain: layout style paint;
}


/* V85 : correction mobs invisibles après V84
   D'anciennes règles CSS de rotation avec !important écrasaient le transform inline utilisé pour positionner les mobs.
   On force maintenant la position via variables CSS dans une règle finale. */
#game .mobs-layer .mob-smooth,
#game.view-n .mobs-layer .mob-smooth,
#game.view-e .mobs-layer .mob-smooth,
#game.view-s .mobs-layer .mob-smooth,
#game.view-w .mobs-layer .mob-smooth {
  left: 0 !important;
  top: 0 !important;
  transform: translate3d(var(--mob-x, 0px), var(--mob-y, 0px), 0) !important;
  will-change: transform !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* Évite de couper la barre de vie et les effets au-dessus du mob */
#game .mobs-layer .mob-smooth {
  contain: layout style !important;
  overflow: visible !important;
}


/* V86 : mobs plus linéaires + individualité visuelle */
#game .mobs-layer .mob-smooth,
#game.view-n .mobs-layer .mob-smooth,
#game.view-e .mobs-layer .mob-smooth,
#game.view-s .mobs-layer .mob-smooth,
#game.view-w .mobs-layer .mob-smooth {
  transform:
    translate3d(var(--mob-x, 0px), var(--mob-y, 0px), 0)
    scale(var(--mob-scale, 1))
    rotate(var(--mob-tilt, 0deg)) !important;
  transition: none !important;
  will-change: transform !important;
}

#game .mobs-layer .mob-label {
  transform-origin: center center;
}


/* V87 : trajectoire mobs plus continue */
#game .mobs-layer .mob-smooth,
#game.view-n .mobs-layer .mob-smooth,
#game.view-e .mobs-layer .mob-smooth,
#game.view-s .mobs-layer .mob-smooth,
#game.view-w .mobs-layer .mob-smooth {
  will-change: transform !important;
  transform-origin: center center !important;
}

#game .mobs-layer {
  transform: translateZ(0);
}


/* V88 : anti-clignotement + marche naturelle */
#game .mobs-layer {
  isolation: isolate;
}

#game .mobs-layer .mob-smooth {
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased;
  contain: layout style !important;
}

#game .mobs-layer .mob-label {
  will-change: transform;
}

/* Les mobs stun/slow gardent leur effet mais sans animation d'opacité */
.mob-slowed,
.mob-stunned {
  opacity: 1 !important;
}


/* V89 : rendu plus "vivant" sans casser la trajectoire */
#game .mobs-layer .mob-smooth,
#game.view-n .mobs-layer .mob-smooth,
#game.view-e .mobs-layer .mob-smooth,
#game.view-s .mobs-layer .mob-smooth,
#game.view-w .mobs-layer .mob-smooth {
  transform:
    translate3d(var(--mob-x, 0px), var(--mob-y, 0px), 0)
    scale(var(--mob-scale, 1)) !important;
}

#game .mobs-layer .mob-label {
  transform:
    rotate(var(--mob-tilt, 0deg))
    scaleY(var(--mob-breathe, 1));
  transform-origin: 50% 65%;
  transition: none !important;
}

.mob-stunned .mob-label {
  transform: rotate(0deg) scaleY(1.02) !important;
}


/* V90 : les mobs ne sont plus empilés au spawn, donc on garde un rendu plus propre */
#game .mobs-layer .mob-smooth {
  text-rendering: optimizeSpeed;
}


/* V92 : anti flash noir pendant le spawn */
.game-grid,
.mobs-layer,
.effects-layer {
  overflow: hidden !important;
}

#game .mobs-layer {
  contain: strict !important;
  transform: translateZ(0);
  background: transparent !important;
}

#game .mobs-layer .mob-smooth {
  contain: layout style paint !important;
}


/* V93 : projectile triangle pour la tour triangle */
.shot-triangle {
  width: 0 !important;
  height: 0 !important;
  border-top: calc(var(--cell-size) * .16) solid transparent;
  border-bottom: calc(var(--cell-size) * .16) solid transparent;
  border-left: calc(var(--cell-size) * .34) solid #ffffff;
  filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 8px #79ff79);
  background: transparent !important;
  border-radius: 0 !important;
}

.shot-single {
  border-radius: 50%;
}


/* V94 : réduction des micro-freezes */
#game .mobs-layer,
#game .effects-layer {
  contain: strict !important;
}

#game .mob-smooth,
#game .shot-fx {
  will-change: transform !important;
}

#game .cell.tower-firing {
  will-change: transform, filter !important;
}


/* V95 : les mobs ne doivent plus couper les bords extérieurs de la map */
.game-grid {
  overflow: hidden !important;
  clip-path: inset(0 round 0);
}

#game .mobs-layer {
  overflow: hidden !important;
  inset: 0 !important;
}

#game .mobs-layer .mob-smooth {
  clip-path: none;
}


/* V96 : les mobs suivent les segments du chemin, sans coupe diagonale des angles */
#game .mobs-layer .mob-smooth {
  transform-origin: center center;
}


/* V97 : bouton fusion totale */
.fuse-tower-btn {
  min-width: 116px !important;
}


/* V98 : bouton fusion même niveau */
.fuse-tower-btn {
  min-width: 136px !important;
}

/* V99 : fusion par paire, bouton compact */
.fuse-tower-btn {
  min-width: 118px !important;
}

/* V100 : bouton fusion payante */
.fuse-tower-btn {
  min-width: 128px !important;
}

/* V101 : fusion-upgrade avec condition de kills */
.fuse-tower-btn.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: grayscale(.25);
}


/* V102 : chat toujours visible + messages de triche */
.chat-line.cheat {
  color: #ff3b3b !important;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255, 45, 45, .35);
}

/* V102 : fusion-upgrade disponible, affichage proche de l'upgrade */
.cell.tower-fusion-ready {
  box-shadow:
    inset 0 0 0 2px rgba(255, 211, 110, .92),
    0 0 10px rgba(255, 211, 110, .42) !important;
}

.cell.tower-fusion-ready .tower-symbol::after {
  content: "⇧";
  position: absolute;
  right: -6px;
  top: -7px;
  font-size: 10px;
  color: #ffd36e;
  text-shadow: 0 0 5px rgba(255,211,110,.9);
}

/* V102 : impact directement sur le mob, pas de carré ajouté par-dessus */
.mob-impact-hit .mob-label {
  animation: mobImpactHitV102 180ms ease-out;
}

.mob-impact-death .mob-label {
  animation: mobImpactDeathV102 360ms ease-out;
}

.mob-impact-square .mob-label {
  filter: drop-shadow(0 0 6px rgba(255,115,55,.95));
}

.mob-impact-triangle .mob-label {
  filter: drop-shadow(0 0 6px rgba(120,255,120,.95));
}

.mob-impact-x .mob-label,
.mob-impact-fast .mob-label {
  filter: drop-shadow(0 0 6px rgba(120,220,255,.95));
}

.mob-impact-sniper .mob-label {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.95));
}

.mob-impact-ice .mob-label {
  filter: drop-shadow(0 0 8px rgba(120,230,255,.95));
}

.mob-impact-stun .mob-label {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.95));
}

@keyframes mobImpactHitV102 {
  0%   { transform: rotate(var(--mob-tilt, 0deg)) scaleY(var(--mob-breathe, 1)) scale(1); }
  35%  { transform: rotate(var(--mob-tilt, 0deg)) scaleY(var(--mob-breathe, 1)) scale(1.28); }
  100% { transform: rotate(var(--mob-tilt, 0deg)) scaleY(var(--mob-breathe, 1)) scale(1); }
}

@keyframes mobImpactDeathV102 {
  0%   { transform: rotate(var(--mob-tilt, 0deg)) scale(1); opacity: 1; }
  45%  { transform: rotate(8deg) scale(1.38); opacity: .95; }
  100% { transform: rotate(-16deg) scale(.35); opacity: .15; }
}

/* Symboles lisibles */
.tower-choice[data-tower-type="ice"],
.cell.tower-ice { color: #9eefff; }

.tower-choice[data-tower-type="fast"],
.cell.tower-fast { color: #ffe66e; }

.tower-choice[data-tower-type="sniper"],
.cell.tower-sniper { color: #ffffff; }

.tower-choice[data-tower-type="stun"],
.cell.tower-stun { color: #f0f0ff; }

.tower-choice[data-tower-type="aura"],
.cell.tower-aura { color: #b6ff6e; }


/* V107 : les projectiles n'avancent plus les mobs côté JS, ils lisent seulement leur position de rendu */
.effects-layer {
  pointer-events: none;
}