/* CF San Pedro — "Killers de la Jornada": carrusel 3D glassmorphic.
   Reutiliza en su totalidad las variables/tokens de css/style.css. */

.killers-jornada-wrap { position: relative; }

.killers-3d-viewport {
  width: 100%;
  /* Debe ser mayor que .killers-3d-stage (300px) + este padding vertical
     (48px arriba y abajo = 96px) + margen para el ligero "scale" de la
     card activa; si no, el overflow:hidden recorta las cards por arriba
     y por abajo. */
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--stadium-gray);
  border-radius: var(--radius-lg);
  padding: 48px 20px;
}

.killers-3d-stage {
  width: 100%;
  max-width: 900px;
  height: 300px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}

.killers-3d-ring {
  position: relative;
  width: 220px; height: 280px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.killers-3d-ring:active { cursor: grabbing; }

.killers-3d-card {
  position: absolute; inset: 0;
  width: 220px; height: 280px;
  /* "Colchón" interno de 20px por lado: el tamaño visual real de la card
     (.killers-3d-card-glass) queda más pequeño que este contenedor, así el
     box-shadow/scale de la card activa y los badges en las esquinas tienen
     margen antes de tocar el límite de recorte del padre en 3D. */
  padding: 20px;
  box-sizing: border-box;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
  border: none; background: none;
}
.killers-3d-card-glass {
  position: relative;
  width: 100%; height: 100%;
  box-sizing: border-box;
  --avatar-size: 96px;
  transform: scale(var(--card-scale, 1));
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(0,42,88,0.06);
  border: 1px solid rgba(0,42,88,0.15);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,42,88,0.12);
  cursor: pointer;
}
.killers-3d-card.is-active .killers-3d-card-glass {
  border-color: var(--secondary-fixed-dim);
  box-shadow: 0 12px 40px rgba(188,0,10,0.25);
}

.killers-3d-round-badge {
  position: absolute; top: 22px; left: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--secondary-fixed); color: var(--secondary);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
}

/* Insignia de doblete/hat-trick: altura = 50% del avatar del card, ancho
   libre (object-fit:contain) para no deformar la imagen. */
.killers-3d-milestone {
  position: absolute; top: 22px; right: 5px;
  height: calc(var(--avatar-size) * 0.5);
  width: auto;
}
.killers-3d-milestone img { height: 100%; width: auto; display: block; object-fit: contain; }

.killers-3d-photo {
  width: var(--avatar-size); height: var(--avatar-size);
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(0,42,88,0.2);
  background: var(--surface-container-low);
}
.killers-3d-shirt {
  flex-shrink: 0;
  margin-top: -18px; margin-left: 62px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  border: 2px solid #fff;
}
.killers-3d-info { margin-top: 14px; text-align: center; }
.killers-3d-name {
  display: block; font-family: var(--font-display); font-weight: 800;
  color: var(--primary); font-size: 14px; text-transform: uppercase; line-height: 1.25;
}
.killers-3d-team {
  display: block; margin-top: 4px; font-size: 11px;
  color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.03em;
}
.killers-3d-goals {
  display: inline-block; margin-top: 10px; padding: 4px 12px;
  border-radius: 999px; background: rgba(188,0,10,0.85); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  white-space: nowrap;
}

.killers-3d-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 20px;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.killers-3d-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-container-low);
  border: 1px solid var(--stadium-gray);
  color: var(--primary);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.killers-3d-arrow:hover { background: var(--primary); color: #fff; }
/* Con muchos goleadores (un punto por jugador) la fila de puntos no debe
   desbordar el ancho de su propia columna: se ajusta con wrap en vez de
   extenderse en línea recta indefinidamente hacia los lados. */
.killers-3d-dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  min-width: 0; max-width: 100%;
}
.killers-3d-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--stadium-gray);
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.killers-3d-dot.is-active { background: var(--secondary); transform: scale(1.3); }

@media (max-width: 640px) {
  .killers-3d-viewport { min-height: 380px; padding: 28px 12px; }
  .killers-3d-stage { height: 300px; }
  .killers-3d-ring, .killers-3d-card { width: 170px; height: 280px; }
  .killers-3d-card-glass { padding: 16px 12px 14px; }
  .killers-3d-round-badge { top: 8px; left: 5px; padding: 2px 8px; font-size: 10px; }
  .killers-3d-milestone { top: 8px; right: 5px; }
  .killers-3d-card-glass { --avatar-size: 64px; }
  .killers-3d-photo { width: 64px; height: 64px; }
  .killers-3d-shirt { margin-top: -14px; margin-left: 40px; width: 26px; height: 26px; font-size: 12px; }
  .killers-3d-info { margin-top: 10px; }
  .killers-3d-name { font-size: 12px; line-height: 1.2; }
  .killers-3d-team { font-size: 10px; margin-top: 3px; }
  .killers-3d-goals { font-size: 11px; padding: 3px 10px; margin-top: 8px; }
}