/* [hidden] debe ganar siempre, aunque header.topbar/nav.bottomnav pongan su
   propio display:flex con más especificidad que la regla [hidden] del user
   agent — si no, se ven aunque tengan el atributo hidden puesto. */
header.topbar[hidden], nav.bottomnav[hidden] { display: none; }

header.topbar {
  background-image: var(--patron-cesped), linear-gradient(135deg, var(--verde-claro) 0%, var(--verde) 55%, #073826 100%);
  background-color: var(--verde);
  color: #fff;
  padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

header.topbar h1 {
  font-family: var(--fuente-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.topbar-derecha {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

header.topbar select {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  padding: .3rem .4rem;
  max-width: 30vw;
  font-size: .82rem;
}

.boton-gestion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s ease, background-color .15s ease;
}
.boton-gestion svg { width: 1.15rem; height: 1.15rem; }
.boton-gestion:active { transform: scale(.9) rotate(20deg); background: rgba(255, 255, 255, .3); }

main {
  flex: 1;
  padding: .75rem;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

main.anim-vista { animation: fade-in-up .22s ease both; }
main.anim-profundizar { animation: deslizar-desde-derecha .28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes deslizar-desde-derecha { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }

.pull-refresh {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  color: var(--verde);
}
.pull-refresh-icono {
  font-size: 1.3rem;
  display: inline-block;
  line-height: 1;
}
.pull-refresh.cargando .pull-refresh-icono { animation: pull-refresh-girar .7s linear infinite; }
@keyframes pull-refresh-girar { to { transform: rotate(360deg); } }

.pantalla-auth {
  min-height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin: -.75rem -.75rem 0;
  padding: 2.5rem 1.25rem 3rem;
  background-image: var(--patron-cesped), linear-gradient(160deg, var(--verde-claro) 0%, var(--verde) 45%, #052a1c 100%);
}
.pantalla-auth-marca { text-align: center; color: #fff; }
.pantalla-auth-icono {
  font-size: 3.4rem;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
  animation: pulso-splash 2.6s ease-in-out infinite;
}
.pantalla-auth-marca h1 { margin: .5rem 0 0; font-size: 1.35rem; font-weight: 800; }
.pantalla-auth-marca p { margin: .15rem 0 0; opacity: .8; font-size: .72rem; letter-spacing: .12em; }
.pantalla-auth-card {
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.splash-arranque {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

/* Saque de centro: el balón entra rodando desde la izquierda, bota una vez
   al llegar al círculo central y se queda dando vueltas suavemente hasta
   que la carga termina — en vez de un simple emoji parpadeando. Usa
   --verde/--acento-2 para las marcas del campo, así hereda el color de
   cualquier tema (Cristal/PS5/Xbox/Switch) sin CSS aparte. */
.saque-centro {
  position: relative;
  width: 180px;
  height: 140px;
}
.circulo-saque {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 2px solid color-mix(in srgb, var(--verde) 45%, transparent);
  border-radius: 50%;
  animation: aparecer-marca-campo .4s ease .5s both;
}
.linea-medio-saque {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 2px;
  background: color-mix(in srgb, var(--verde) 30%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  animation: linea-medio-in .35s ease .3s forwards;
}
@keyframes linea-medio-in { to { transform: scaleX(1); } }
@keyframes aparecer-marca-campo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

.sombra-balon-saque {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 30px;
  height: 8px;
  margin-left: -15px;
  margin-top: 8px;
  background: rgba(0, 0, 0, .28);
  border-radius: 50%;
  filter: blur(2px);
  animation: sombra-saque 3.6s ease-in-out .95s infinite;
}
@keyframes sombra-saque {
  0%, 100% { transform: scaleX(1); opacity: .28; }
  50% { transform: scaleX(.7); opacity: .16; }
}

.balon-saque {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0%, #f1f2f4 55%, #cfd3d8 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 -3px 4px rgba(0, 0, 0, .12);
  animation:
    balon-entra .65s cubic-bezier(.3, .1, .3, 1) both,
    balon-bote 3.6s ease-in-out .65s infinite;
}
.balon-pentagono {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #2b2f33;
  clip-path: polygon(50% 0%, 95% 35%, 77% 90%, 23% 90%, 5% 35%);
}
.balon-pentagono-1 { top: 22%; left: 38%; }
.balon-pentagono-2 { top: 52%; left: 12%; transform: scale(.8) rotate(20deg); }
.balon-pentagono-3 { top: 52%; left: 62%; transform: scale(.8) rotate(-15deg); }

@keyframes balon-entra {
  from { transform: translate(-160px, -18px) rotate(-220deg); opacity: 0; }
  70% { opacity: 1; }
  to { transform: translate(0, 0) rotate(0deg); }
}
@keyframes balon-bote {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(180deg); }
}

nav.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--superficie);
  border-top: var(--borde-tarjeta);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}

.nav-pill {
  position: absolute;
  top: .3rem;
  height: 2.1rem;
  background: var(--superficie-alta);
  border-radius: var(--radio-chico);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), width .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
  z-index: 0;
  pointer-events: none;
}

nav.bottomnav a { position: relative; z-index: 1; }

nav.bottomnav a {
  flex: 1;
  text-align: center;
  padding: .5rem 0 .6rem;
  font-size: .68rem;
  color: var(--gris-700);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  transition: color .2s ease;
}

nav.bottomnav a .icono { display: flex; transition: transform .2s ease; }
nav.bottomnav a .icono svg { width: 1.35rem; height: 1.35rem; }
nav.bottomnav a .icono-dbz { display: none; }

/* Iconos de menú propios por tema (PS5, Xbox, LoL...): un solo elemento
   por enlace, la forma la pone la variable --icono-tema-* que redefine
   cada tema (ver base.css para los valores por defecto a "none" y
   DISENO_ESTADO.local.md sección 2). Se usa mask-image en vez de <img>
   para que el icono herede el color de acento del tema vía
   background-color: currentColor, igual que ya hacen los SVG genéricos
   con stroke="currentColor". Oculto por defecto: solo un tema que
   redefina "display: block" (y sus variables) lo activa. */
nav.bottomnav a .icono-tematico {
  display: none;
  width: 1.35rem;
  height: 1.35rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
nav.bottomnav a .icono-tematico-jornada { -webkit-mask-image: var(--icono-tema-jornada); mask-image: var(--icono-tema-jornada); }
nav.bottomnav a .icono-tematico-clasificacion { -webkit-mask-image: var(--icono-tema-clasificacion); mask-image: var(--icono-tema-clasificacion); }
nav.bottomnav a .icono-tematico-muro { -webkit-mask-image: var(--icono-tema-muro); mask-image: var(--icono-tema-muro); }
nav.bottomnav a .icono-tematico-liga { -webkit-mask-image: var(--icono-tema-liga); mask-image: var(--icono-tema-liga); }
nav.bottomnav a .icono-tematico-ajustes { -webkit-mask-image: var(--icono-tema-ajustes); mask-image: var(--icono-tema-ajustes); }

nav.bottomnav a.activo { color: var(--verde); font-weight: 600; }
nav.bottomnav a.activo .icono { animation: bounce-nav .35s ease; }
nav.bottomnav a:active .icono { transform: scale(.85); }

.card {
  background: var(--superficie);
  border: var(--borde-tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem;
  margin-bottom: .75rem;
  animation: fade-in-up .3s ease both;
}
.opciones-registro-porra {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .88rem;
}
.opciones-registro-porra label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  color: var(--texto);
  margin-bottom: 0;
}
.opciones-registro-porra input[type="radio"] { width: auto; flex: none; }