#screen-play,
#screen-ended {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bomb-card {
  text-align: center;
}

.bomb-icon {
  font-size: 2.4rem;
  margin: 6px 0 2px;
  animation: bomb-pulse 1.4s ease-in-out infinite;
}

@keyframes bomb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.bomb-letter-display {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 10px;
}

.turn-banner {
  margin: 0 0 12px;
  text-align: center;
}

.turn-banner.my-turn {
  color: var(--accent);
}

.bomb-last-answer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lives-tag {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.bomb-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.bomb-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
}

.bomb-log-letter {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.bomb-log-text {
  flex: 1;
  font-weight: 700;
  min-width: 0;
}

/* Sur ordinateur, le jeu utilise enfin la largeur disponible : état des
   joueurs à gauche, bombe au centre, historique toujours visible à droite. */
.container { max-width: 1500px; }

#screen-join,
#screen-lobby,
#screen-ended {
  max-width: 960px;
  margin-inline: auto;
}

.bomb-play-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(520px, 1.65fr) minmax(290px, 1fr);
  align-items: start;
  gap: 16px;
}

.bomb-side {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 116px);
  overflow: auto;
}

.bomb-players-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.bomb-player-status {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.bomb-player-status.current {
  outline: 1px solid var(--accent);
  box-shadow: var(--shadow-glow);
}

.bomb-player-status.dead { opacity: 0.45; }
.bomb-player-order { color: var(--text-muted); text-align: center; }
.bomb-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bomb-player-lives { white-space: nowrap; font-size: 0.78rem; }

@media (max-width: 1120px) {
  .bomb-play-layout { grid-template-columns: minmax(180px, 0.7fr) minmax(480px, 1.5fr); }
  .bomb-history-card { grid-column: 1 / -1; position: static; max-height: none; }
}

@media (max-width: 760px) {
  .bomb-play-layout { grid-template-columns: 1fr; }
  .bomb-game-card { grid-row: 1; }
  .bomb-side { position: static; max-height: none; }
  .bomb-players-card { grid-row: 2; }
  .bomb-history-card { grid-row: 3; }
}

.bomb-log-anime {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-weight: 500;
}

.bomb-log-author {
  flex-shrink: 0;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 10px;
}

.ranking-medal {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.ranking-row .name {
  font-weight: 700;
  flex: 1;
}

/* La table : bombe au centre, joueurs en cercle autour. Le rayon est calculé
   en CSS depuis la taille de l'arène, donc rien à recalculer au redimensionnement
   — app.js ne pose qu'un angle par siège. */
.bomb-arena {
  --arena: min(360px, 86vw);
  --seat: 76px;
  position: relative;
  width: var(--arena);
  height: var(--arena);
  margin: 8px auto 4px;
}

.bomb-ring {
  position: absolute;
  /* Cercle décoratif entre la bombe et les sièges, pas au travers. */
  inset: var(--seat);
  border-radius: 50%;
  border: 2px dashed var(--border);
  animation: bomb-ring-spin 24s linear infinite;
}

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

/* Un cran plus petit que sur l ancien écran : la lettre partage désormais le
   centre avec la bombe et les sièges. */
.bomb-arena .bomb-letter-display {
  font-size: 3rem;
  margin: 0;
}

.bomb-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bomb-seat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--seat);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  /* rotate -> on s'éloigne du centre -> rotate inverse pour redresser le
     siège -> on le recentre sur son point. */
  transform: rotate(var(--angle)) translate(calc(var(--arena) / 2 - var(--seat) / 2))
    rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
}

.bomb-seat .avatar {
  border: 2px solid transparent;
}

.bomb-seat-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bomb-seat-lives {
  font-size: 0.7rem;
  letter-spacing: -0.05em;
}

.bomb-seat.you .bomb-seat-name {
  color: var(--text);
  font-weight: 700;
}

/* Celui qui tient la bombe : c'est l'information principale de l'écran. */
.bomb-seat.current .bomb-seat-name {
  color: var(--accent);
  font-weight: 700;
}

.bomb-seat.current .avatar {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  animation: bomb-pulse 1.4s ease-in-out infinite;
}

.bomb-seat.dead {
  opacity: 0.4;
}

.bomb-seat.dead .avatar {
  filter: grayscale(1);
}

.bomb-seat.offline .avatar {
  opacity: 0.5;
}