/* ==========================================================
   SPONSORMII AD DEMO · CONTROLS CSS
   Barra de mandos simplificada: Spamear y Lanzar Banner
   ========================================================== */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
}

/* BOTÓN 1: SPAMEAR (Comando de chat) */
.spam-action-btn {
  font: 900 16px/1 var(--display);
  background: var(--accent-color);
  color: var(--blue-deep);
  border: 3px solid var(--blue-deep);
  box-shadow: 0 4px 0 var(--blue-deep);
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.08s, box-shadow 0.08s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spam-action-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--blue-deep);
}

.spam-action-btn kbd {
  font: 700 11px var(--body);
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

/* BOTÓN 2: LANZAR BANNER */
.launch-banner-btn {
  font: 800 15px/1 var(--display);
  background: linear-gradient(135deg, #2D336B, #1B1E40);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 12px 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.launch-banner-btn:hover:not(:disabled) {
  border-color: var(--accent-color);
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.25);
  transform: translateY(-1px);
}

.launch-banner-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.launch-banner-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lbl {
  font: 700 11px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  font: 700 13px var(--body);
  padding: 9px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s;
}

.ghost:hover {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}

.spacer {
  flex: 1;
}

.phase {
  font: 700 13px/1.3 var(--body);
  color: var(--muted);
}

.phase b {
  color: var(--fg);
}