/* ================================
RESET
================================ */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 50% 0%, #1e3a8a 0%, #0f172a 60%);
  color:white;
  text-align:center;
  overflow-x:hidden;
}

/* ================================
TITULO
================================ */
h1{
  margin:25px 0 10px;
  font-size:28px;
  letter-spacing:1px;
}

/* ================================
BOTONES SUPERIORES
================================ */
select{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  background:#1e293b;
  color:white;
  font-weight:bold;
  margin:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}

.btn-3d{
  padding:12px 22px;
  margin:8px;
  border:none;
  border-radius:14px;
  font-weight:bold;
  font-size:14px;
  color:white;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 6px 0 rgba(0,0,0,.4);
}

.btn-3d:hover{
  transform:translateY(-4px);
}

.btn-3d:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* COLORES RESTAURADOS */
.azul{ background:#2563eb; }
.verde{ background:#16a34a; }
.naranja{ background:#ea580c; }
.rojo{ background:#dc2626; }
.guardar{ background:#9333ea; }

/* ================================
CANCHA PREMIUM
================================ */
.cancha{
  position:relative;
  width:100%;
  height:650px;
  margin:40px auto;
  border:6px solid #ffffff;
  border-radius:25px;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      90deg,
      #1f7a3a 0px,
      #1f7a3a 80px,
      #1b6e34 80px,
      #1b6e34 160px
    );
  box-shadow:
    0 0 80px rgba(0,0,0,.8),
    inset 0 0 80px rgba(0,0,0,.4);
  animation: brilloCampo 6s infinite alternate ease-in-out;
}

/* Animación luz estadio */
@keyframes brilloCampo{
  from{ filter:brightness(1); }
  to{ filter:brightness(1.08); }
}

/* LINEAS */
.linea-vertical{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  background:white;
  transform:translateX(-50%);
}

.linea-horizontal{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:4px;
  background:white;
  transform:translateY(-50%);
}

.circulo-central{
  position:absolute;
  width:140px;
  height:140px;
  border:4px solid white;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* AREAS */
.area-grande-superior,
.area-grande-inferior{
  position:absolute;
  left:50%;
  width:320px;
  height:160px;
  border:4px solid white;
  transform:translateX(-50%);
}

.area-grande-superior{
  top:0;
  border-top:none;
}

.area-grande-inferior{
  bottom:0;
  border-bottom:none;
}

.area-chica-superior,
.area-chica-inferior{
  position:absolute;
  left:50%;
  width:160px;
  height:80px;
  border:4px solid white;
  transform:translateX(-50%);
}

.area-chica-superior{
  top:0;
  border-top:none;
}

.area-chica-inferior{
  bottom:0;
  border-bottom:none;
}

/* ESQUINAS ¼ CIRCULO */
.esquina{
  position:absolute;
  width:40px;
  height:40px;
  border:4px solid white;
}

.esquina-tl{
  top:-4px;
  left:-4px;
  border-right:none;
  border-bottom:none;
  border-radius:0 0 100% 0;
}

.esquina-tr{
  top:-4px;
  right:-4px;
  border-left:none;
  border-bottom:none;
  border-radius:0 0 0 100%;
}

.esquina-bl{
  bottom:-4px;
  left:-4px;
  border-right:none;
  border-top:none;
  border-radius:0 100% 0 0;
}

.esquina-br{
  bottom:-4px;
  right:-4px;
  border-left:none;
  border-top:none;
  border-radius:100% 0 0 0;
}

/* ================================
JUGADORES PREMIUM
================================ */
.jugador-card{
  position:absolute;
  width:150px;
  padding:12px;
  background:linear-gradient(145deg,#0f172a,#1e293b);
  border-radius:16px;
  text-align:center;
  color:white;
  cursor:pointer;
  transform:translate(-50%,-50%);
  box-shadow:
    0 15px 30px rgba(0,0,0,.7),
    0 0 20px rgba(59,130,246,.5);
  transition:.3s;
  z-index:10;
}

.jugador-card:hover{
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:
    0 20px 40px rgba(0,0,0,.9),
    0 0 25px rgba(147,51,234,.7);
}

.jugador-card .nombre{
  font-weight:bold;
  margin-bottom:4px;
}

.jugador-card .equipo{
  font-size:12px;
  opacity:.85;
}

/* RESPONSIVE */
@media(max-width:900px){
  .cancha{ height:520px; }
  .jugador-card{ width:120px; }
}