/* =====================
   PALETA Y VARIABLES
   ===================== */
:root {
  --pp-dark1: #0f2027;
  --pp-dark2: #203a43;
  --pp-dark3: #2c5364;
  --pp-accent: #00ffc6;
  --pp-win:   #00ffc6;
  --pp-loss:  #ff4d4d;
}

/* =====================
   REGLAS GENERALES
   ===================== */
html, body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pp-dark1), var(--pp-dark2), var(--pp-dark3));
  color: #fff;
}

.text-accent { color: var(--pp-accent) !important; }
.bg-accent   { background: var(--pp-accent) !important; }
.badge.bg-accent {
  color: #0f2027 !important;
  box-shadow: 0 0 10px rgba(0,255,198,0.6);
  font-weight: bold;
}
.badge.bg-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pp-logo {
  width: 180px;
  filter: drop-shadow(0 0 8px var(--pp-accent));
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Featured */
.featured {
  border: 2px solid var(--pp-accent);
  box-shadow: 0 0 20px var(--pp-accent);
}

/* Pick box */
.pick-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Flags redondas con glow */
img.flag {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 255, 198, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img.flag:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(0, 255, 198, 0.8);
}

/* Botón acento */
.btn-accent {
  background: var(--pp-accent);
  color: #0f2027;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 10px rgba(0,255,198,0.6);
  transition: all 0.3s ease;
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0,255,198,0.9);
  color:#0f2027;
}

/* Tarjetas ganadas resaltadas */
.card-win {
  border: 2px solid var(--pp-win);
  box-shadow: 0 0 16px var(--pp-win);
}

/* Fallback móviles */
@media (max-width: 767px) {
  .glass-card { backdrop-filter: none; -webkit-backdrop-filter:none; }
}
