/* Dragon Ball: naranja del gi + azul, aura de energía brillante en los
   acentos y corte anguloso en las tarjetas. */
:root[data-estilo="dragonball"] {
  --acento-2: #1e88e5;
  --radio: 10px;
  --radio-chico: 6px;
}
:root[data-estilo="dragonball"][data-tema="claro"] {
  --verde: #f57c00;
  --verde-claro: #ff9d3f;
  --gris-100: #fff3e6;
  --gris-200: #ffe0bd;
  --superficie: #ffffff;
  --superficie-alta: #fff1e0;
  --texto: #241100;
  --borde-tarjeta: 1px solid #ffcc90;
  --sombra: 0 2px 6px rgba(245, 124, 0, .15), 0 0 20px rgba(245, 124, 0, .12);
  --sombra-alta: 0 16px 40px rgba(245, 124, 0, .25);
}
:root[data-estilo="dragonball"][data-tema="oscuro"] {
  --verde: #ff9800;
  --verde-claro: #ffb74d;
  --gris-100: #0d0a05;
  --gris-200: #241a0a;
  --superficie: #1c1408;
  --superficie-alta: #2a1e0c;
  --texto: #fff3e0;
  --borde-tarjeta: 1px solid #3a2810;
  --sombra: 0 2px 8px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 152, 0, .25);
  --sombra-alta: 0 20px 50px rgba(255, 152, 0, .3);
}
:root[data-estilo="dragonball"] .card,
:root[data-estilo="dragonball"] .tarjeta-partido,
:root[data-estilo="dragonball"] .tarjeta-rivales {
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
/* Aura de energía al abrir una tarjeta con acordeón (Mis porras, campos
   extra del partido): un anillo que se expande y se desvanece desde el
   acento del tema, homenaje de color/forma a un destello de ki — nada de
   sprites ni personajes (mismo criterio que el resto del tema). */
:root[data-estilo="dragonball"] .tarjeta-porra-icono { position: relative; }
:root[data-estilo="dragonball"] .tarjeta-porra.abierta .tarjeta-porra-icono::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  animation: dragonball-ki-pulso .6s ease-out;
}
:root[data-estilo="dragonball"] .boton-extra-prediccion.abierto .chevron-extra {
  color: var(--verde);
  text-shadow: 0 0 8px color-mix(in srgb, var(--verde) 70%, transparent);
  animation: dragonball-ki-flash .5s ease-out;
}
@keyframes dragonball-ki-pulso {
  from { opacity: .9; transform: scale(.6); }
  to { opacity: 0; transform: scale(1.8); }
}
@keyframes dragonball-ki-flash {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(90deg) scale(1.4); }
  100% { transform: rotate(90deg) scale(1); }
}
:root[data-estilo="dragonball"] header.topbar {
  background-image: none;
  background: linear-gradient(120deg, var(--verde) 0%, var(--acento-2) 100%);
  color: #fff;
  box-shadow: 0 2px 24px color-mix(in srgb, var(--verde) 40%, transparent);
  border-bottom: none;
}
:root[data-estilo="dragonball"] header.topbar select,
:root[data-estilo="dragonball"] .boton-gestion { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); }
:root[data-estilo="dragonball"] nav.bottomnav a.activo {
  color: var(--verde);
  text-shadow: 0 0 8px color-mix(in srgb, var(--verde) 60%, transparent);
}
/* Iconos del menú inferior recortados de la hoja de sprites del tema
   (animaciones/svgdragonball) en vez de las siluetas genéricas: espada
   (Jornada), bola de 7 estrellas (Clasificación), Puar (Muro), la Tierra
   (LaLiga) y una esfera/orbe (Ajustes). Pixel art a tamaño nativo: nada
   de suavizado, que se vea nítido como el sprite original. */
:root[data-estilo="dragonball"] nav.bottomnav a .icono svg { display: none; }
:root[data-estilo="dragonball"] nav.bottomnav a .icono-dbz {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 0 transparent);
}
:root[data-estilo="dragonball"] nav.bottomnav a.activo .icono-dbz {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--verde) 70%, transparent));
}
/* Pulso de ki en el icono activo del menú inferior: mismo mecanismo que
   ya usa dragonball-ki-pulso en las tarjetas con acordeón (un anillo
   que se expande y se desvanece), aquí alrededor del icono en vez de
   sprites nuevos. Va en .icono (el contenedor), no en .icono-dbz
   directamente, porque los pseudo-elementos ::after no se pintan de
   forma fiable sobre <img>. */
:root[data-estilo="dragonball"] nav.bottomnav a .icono { position: relative; }
:root[data-estilo="dragonball"] nav.bottomnav a.activo .icono::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  animation: dragonball-ki-pulso .6s ease-out;
  pointer-events: none;
}
/* "Letra" tipo logo de Dragon Ball: sin descargar ninguna fuente nueva
   (nada de CDN externo, mismo criterio que ya usa Oswald autoalojada) —
   se consigue con relleno degradado dorado→rojo, contorno oscuro grueso
   e inclinación dinámica sobre la misma fuente que ya usa cada título. */
:root[data-estilo="dragonball"] h2.titulo-vista {
  display: inline-block;
  font-style: italic;
  transform: skewX(-8deg);
  background: linear-gradient(180deg, #ffe066 0%, #ffb300 45%, #d84315 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.4px #6a1b00;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}
:root[data-estilo="dragonball"] header.topbar h1 {
  font-style: italic;
  background: linear-gradient(180deg, #ffe066 0%, #ffb300 45%, #d84315 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #6a1b00;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
}

/* Escena Kinton: Goku niño (goku-kid-11frames.png, ciclo de carrera) montado
   sobre la nube voladora (nube-kinton-5frames.png, ciclo de flotación),
   cada sprite con su propio ciclo de fotogramas (técnica de sprite sheet:
   background-position animada en pasos, steps()). Solo visible con el tema
   Dragon Ball activo — vive siempre en el DOM (index.html) pero
   display:none el resto del tiempo.

   Un solo cruce de pantalla al elegir el tema (clase .volando, ver
   volarKinton() en app.js), no un bucle infinito: al terminar, JS quita la
   clase y todo se detiene hasta la próxima vez que se seleccione el tema.

   Proporciones y encaje (escala nube 2× la de Goku, mismo centro horizontal,
   pies hundidos un poco en la nube) calculadas a partir de la calibración
   que ya está en taller-animaciones.html (cScale=40, gScale=20, seat=44,
   seatX=0), reducidas a un tamaño pequeño para móvil (factor ~0.4). */
.escena-kinton {
  display: none;
  position: fixed;
  top: 4.4rem;
  left: -100px;
  width: 80px;
  height: 83px;
  z-index: 5;
  pointer-events: none;
}
:root[data-estilo="dragonball"] .escena-kinton { display: block; }
.escena-kinton.volando { animation: kinton-cruza 11s linear 1 forwards; }

.kinton-nube {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 45px;
  background: url('../../icons/dragonball/nube-kinton-5frames.png') 0 0 no-repeat;
  background-size: 400px 45px;
  image-rendering: pixelated;
}
.kinton-goku {
  position: absolute;
  bottom: 31px;
  left: 12px;
  width: 56px;
  height: 52px;
  background: url('../../icons/dragonball/goku-kid-11frames.png') 0 0 no-repeat;
  background-size: 616px 52px;
  image-rendering: pixelated;
}
.escena-kinton.volando .kinton-nube { animation: kinton-nube-frames .625s steps(5) infinite; }
.escena-kinton.volando .kinton-goku { animation: kinton-goku-frames 1.1s steps(11) infinite; }
@keyframes kinton-nube-frames { from { background-position-x: 0; } to { background-position-x: -400px; } }
@keyframes kinton-goku-frames { from { background-position-x: 0; } to { background-position-x: -616px; } }
@keyframes kinton-cruza {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 100px)); }
}