/* ============================================================ */
/*  BOTS — estilos para la sala y los jugadores bot            */
/* ============================================================ */

.room-player.bot {
  border-color: rgba(128,224,255,0.35);
  background: linear-gradient(135deg, rgba(128,224,255,0.06) 0%, rgba(128,224,255,0.02) 100%);
}

/* ============================================================ */
/*  PILLS al lado del nombre                                   */
/* ============================================================ */
.bot-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Pill "🤖 BOT" — siempre llamativo */
.bot-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, #80e0ff 0%, #40a0d0 100%);
  color: #04121a;
  border: 1px solid rgba(200,240,255,0.6);
  box-shadow: 0 0 8px rgba(128,224,255,0.5), 0 1px 2px rgba(0,0,0,0.4);
  text-transform: uppercase;
  white-space: nowrap;
  animation: botPulse 2.4s ease-in-out infinite;
}
@keyframes botPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(128,224,255,0.5), 0 1px 2px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 14px rgba(128,224,255,0.9), 0 1px 2px rgba(0,0,0,0.4); }
}

/* Pill de dificultad — color según nivel */
.bot-dif {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid;
  white-space: nowrap;
}

/* Color según dificultad (1-10) */
.bot-dif.n1, .bot-dif.n2, .bot-dif.n3 { color: #8fd69f; border-color: rgba(143,214,159,0.4); }
.bot-dif.n4, .bot-dif.n5, .bot-dif.n6 { color: #80e0ff; border-color: rgba(128,224,255,0.4); }
.bot-dif.n7, .bot-dif.n8             { color: #ffb84d; border-color: rgba(255,184,77,0.5); }
.bot-dif.n9                          { color: #ff8a5c; border-color: rgba(255,138,92,0.5); }
.bot-dif.n10                         { color: #ffd166; border-color: rgba(255,209,102,0.7);
                                       text-shadow: 0 0 6px rgba(255,209,102,0.6); }

/* Puntito animado al lado del avatar */
.room-player.bot .room-player-avatar {
  position: relative;
}
.room-player.bot .room-player-avatar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #80e0ff;
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 6px rgba(128,224,255,0.8);
  animation: botDot 1.6s ease-in-out infinite;
}
@keyframes botDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Botón quitar bot */
.bot-remove {
  padding: 4px 8px !important;
  font-size: 11px !important;
  min-width: 28px;
}

/* ============================================================ */
/*  Panel de control de bots en la sala                        */
/* ============================================================ */
.room-bots-wrap {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.room-bots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.room-bots-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.room-bots-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.bot-select {
  padding: 8px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  min-width: 210px;
}
.bot-select:focus { border-color: var(--accent-2); }
.bot-select option { background: var(--bg-2); color: var(--text); }

/* ============================================================ */
/*  Timer de la sala (TTL) — chip en la cabecera               */
/* ============================================================ */
.room-ttl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.room-ttl .ttl-icon { font-size: 12px; }
.room-ttl.warn {
  color: #ffb84d;
  border-color: rgba(255,184,77,0.5);
  background: rgba(255,184,77,0.08);
}
.room-ttl.danger {
  color: #ff5566;
  border-color: rgba(255,85,102,0.6);
  background: rgba(255,85,102,0.1);
  animation: ttlBlink 1s ease-in-out infinite;
}
@keyframes ttlBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Chip de TTL en el lobby (lista de salas) */
.room-ttl-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  margin-left: 6px;
}
.room-ttl-inline.warn { color: #ffb84d; }
.room-ttl-inline.danger { color: #ff5566; }

@media (max-width: 600px) {
  .bot-select { min-width: auto; flex: 1; }
  .room-bots-controls .btn { flex: 1; }
  .bot-pills { flex-wrap: wrap; }
}