/* ---- Temas "cultura pop" ----
   Homenaje de paleta/silueta, no de marca: sin logos ni personajes, solo
   los colores y detalles de forma que se asocian a cada uno — igual que ya
   se hizo con PS5/Xbox/Switch. */

/* Simpsons: amarillo icónico + azul cielo, contorno grueso tipo cómic. */
:root[data-estilo="simpsons"] {
  --acento-2: #36a5d8;
  --radio: 18px;
  --radio-chico: 12px;
}
:root[data-estilo="simpsons"][data-tema="claro"] {
  /* --verde hacía de color de texto (enlaces, "pts", nav activo) y a la vez
     --superficie (fondo de tarjeta) era el amarillo saturado de Homer: esa
     combinación daba un contraste real de 1.6:1 (WCAG pide 4.5:1), casi
     ilegible. El amarillo se queda de fondo de página (gris-100) y en la
     topbar; la tarjeta pasa a un crema casi blanco (como el resto de temas)
     y el acento a un naranja quemado con contraste de sobra. */
  --verde: #c1440e;
  --verde-claro: #d9601f;
  --gris-100: #fdeba3;
  --gris-200: #ffedad;
  --superficie: #fffef2;
  --superficie-alta: #fff4d6;
  --texto: #1a1a1a;
  --borde-tarjeta: 3px solid #1a1a1a;
  --sombra: 4px 4px 0 rgba(26, 26, 26, .9);
  --sombra-alta: 6px 6px 0 rgba(26, 26, 26, .9);
}
:root[data-estilo="simpsons"][data-tema="oscuro"] {
  --verde: #ffb300;
  --verde-claro: #ffca42;
  --gris-100: #14171a;
  --gris-200: #2a2200;
  --superficie: #2b2500;
  --superficie-alta: #3a3100;
  --texto: #fff6d6;
  --borde-tarjeta: 3px solid #fed41d;
  --sombra: 4px 4px 0 rgba(0, 0, 0, .6);
  --sombra-alta: 6px 6px 0 rgba(0, 0, 0, .6);
}
:root[data-estilo="simpsons"] header.topbar {
  background-image: none;
  background: var(--acento-2);
  color: #1a1a1a;
  border-bottom: 3px solid #1a1a1a;
  box-shadow: none;
}
:root[data-estilo="simpsons"] header.topbar select,
:root[data-estilo="simpsons"] .boton-gestion { background: #fff; color: #1a1a1a; border: 2px solid #1a1a1a; }
:root[data-estilo="simpsons"] nav.bottomnav { border-top: 3px solid #1a1a1a; }
:root[data-estilo="simpsons"] .btn { border: 2px solid #1a1a1a; }
/* Rebote "cartoon" al abrir una tarjeta con acordeón (Mis porras, campos
   extra del partido): un golpe elástico exagerado en vez del giro seco
   genérico, a tono con el resto del tema (contorno grueso, sombra dura). */
:root[data-estilo="simpsons"] .tarjeta-porra.abierta .tarjeta-porra-icono {
  animation: simpsons-rebote .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes simpsons-rebote {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.3) rotate(-10deg); }
  60% { transform: scale(.9) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
:root[data-estilo="simpsons"] .boton-extra-prediccion.abierto .chevron-extra {
  animation: simpsons-rebote-chevron .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes simpsons-rebote-chevron {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(80deg) scale(1.35); }
  60% { transform: rotate(96deg) scale(.9); }
  100% { transform: rotate(90deg) scale(1); }
}

/* Iconos de menú propios: estallido de cómic de 4 puntas (tipo "¡POW!"),
   homenaje de forma sin usar al personaje — cada uno con un detalle
   perforado distinto salvo Ajustes, que se queda con el estallido puro
   como marca del tema. */
:root[data-estilo="simpsons"] nav.bottomnav a .icono svg,
:root[data-estilo="simpsons"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="simpsons"] nav.bottomnav a .icono-tematico { display: block; }
/* Títulos "letras de cómic": mismo truco que ya usa Dragon Ball
   (relleno degradado + contorno grueso sobre la misma Oswald de
   siempre), aquí en amarillo Simpsons con contorno negro bien grueso,
   coherente con el borde de 3px que ya tienen las tarjetas del tema. */
:root[data-estilo="simpsons"] h2.titulo-vista,
:root[data-estilo="simpsons"] header.topbar h1 {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd11a 55%, #f2a900 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.6px #1a1a1a;
  text-shadow: 2px 2px 0 rgba(26, 26, 26, .9);
}
:root[data-estilo="simpsons"] {
  --icono-tema-jornada: url("../../icons/temas/simpsons/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/simpsons/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/simpsons/muro.svg");
  --icono-tema-liga: url("../../icons/temas/simpsons/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/simpsons/ajustes.svg");
}