/* Pokémon — Pokédex roja, Poké Ball y el azul/amarillo del logo. */

:root {
  --bg: #eef2f8;
  --fondo:
    radial-gradient(circle at 50% 50%, transparent 17px, rgba(30, 40, 60, .05) 18px, rgba(30, 40, 60, .05) 20px, transparent 21px) 0 0 / 90px 90px,
    linear-gradient(180deg, #f7f9fc, #e6ecf5);
  --surface: #ffffff;
  --surface-2: #e9eef6;
  --borde: #d3dbe8;
  --texto: #1d2433;
  --suave: #5f6b82;
  --acento: #2a75bb;
  --grad: linear-gradient(180deg, #3b86cc, #2a63a8);
  --sobre-acento: #fff;
  --ok: #3aa55d;
  --sobre-ok: #fff;
  --casi: #ffcb05;
  --sobre-casi: #3a2e00;
  --mal: #e05050;
  --sobre-mal: #fff;
  --r: 16px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Fredoka', 'Inter', sans-serif;
  --cab-bg: linear-gradient(180deg, #ee3b2b, #cc2a1c);
  --rojo: #e3350d;
  --amarillo: #ffcb05;
  --azul: #2a75bb;
}

/* Cabecera: parte roja de la Poké Ball, con la franja negra */
.top { background: var(--cab-bg); border-bottom: 5px solid #1d1d1d; backdrop-filter: none; }
.top .logo { color: #fff; }
.top .logo b { background: none; color: var(--amarillo); -webkit-text-fill-color: var(--amarillo); }
.top .tema-link { color: #fff; font-weight: 600; font-size: 22px; }
.top .nav a { color: #ffe0da; }
.top .nav a:hover, .top .nav a.on { color: #fff; background: rgba(0, 0, 0, .15); }
.top .nav a.on { box-shadow: inset 0 -3px 0 var(--amarillo); }
.top .icono { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .35); color: #fff; }
@media (max-width: 860px) { .top .nav { background: #cc2a1c; } }

h1.titulo { font-weight: 600; color: var(--azul); -webkit-text-stroke: 1px #1d3f6e; text-shadow: 2px 3px 0 var(--amarillo); letter-spacing: .5px; }
.tarjeta, .juego, .modal { border: 2px solid var(--borde); box-shadow: 0 6px 18px rgba(30, 50, 90, .08); }
.btn { border-radius: 999px; }
.campo input { border-radius: 999px; border: 2px solid var(--borde); padding-left: 20px; }
.sugerencias li img { background: none; object-fit: contain; image-rendering: pixelated; }
.juego .cuerpo b { font: 600 26px/1 var(--font-d); color: var(--azul); }
.juego .muestra { background: linear-gradient(180deg, #fff, #eef2f8); border-bottom: 3px solid #1d1d1d; }
.juego .ir { background: linear-gradient(180deg, #ee3b2b, #cc2a1c); }

.pk-hero { text-align: center; padding: 18px 0 28px; }
.pk-hero h1 { font: 700 clamp(56px, 13vw, 96px)/.95 var(--font-d); color: var(--amarillo); -webkit-text-stroke: 3px var(--azul); paint-order: stroke fill; text-shadow: 0 6px 0 #1d3f6e; }
.pk-hero p { color: var(--suave); margin-top: 14px; }

/* ── Clásico ── */
.tabla-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; }
.tabla-clasico { display: grid; grid-template-columns: 1.6fr repeat(8, 1fr); gap: 6px; min-width: 880px; }
.tabla-clasico .cab { font-size: 11px; font-weight: 700; color: var(--suave); text-align: center; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 4px; border-bottom: 2px solid var(--borde); }
.tabla-clasico .fila { display: contents; }
.celda {
  min-height: 70px; padding: 6px; border-radius: 12px;
  display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: 13px; line-height: 1.2;
}
.celda.ok { background: var(--ok); color: var(--sobre-ok); }
.celda.casi { background: var(--casi); color: var(--sobre-casi); }
.celda.mal { background: var(--mal); color: var(--sobre-mal); }
.celda.pk { display: flex; gap: 6px; justify-content: flex-start; background: var(--surface); border: 2px solid var(--borde); color: var(--texto); text-align: left; }
.celda.pk.ok { border-color: var(--ok); }
.celda.pk img { width: 60px; height: 60px; image-rendering: pixelated; flex-shrink: 0; }
.fila.nueva .celda { animation: girar .45s both; animation-delay: calc(var(--i, 0) * .16s); }
.leyenda { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin: -8px 0 16px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }

/* ── Silueta: "¿Quién es ese Pokémon?" ── */
.quien {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 16px; overflow: hidden;
  border-radius: 20px; border: 4px solid #1d3f6e;
  background: repeating-conic-gradient(from 0deg at 35% 50%, #3b8ad8 0 10deg, #62a6ec 10deg 20deg);
}
.quien img { width: 62%; max-height: 88%; object-fit: contain; filter: brightness(0) drop-shadow(0 0 0 #000); transition: filter .8s, transform .8s; transform: translateX(-12%); }
.quien.revelado img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.quien .rotulo {
  position: absolute; right: 12px; bottom: 10px; max-width: 42%; text-align: right;
  font: 700 clamp(18px, 4.5vw, 28px)/1 var(--font-d); color: var(--amarillo);
  -webkit-text-stroke: 2px #1d3f6e; paint-order: stroke fill;
}
.pistas { display: grid; gap: 8px; margin-bottom: 16px; }
.pista { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 2px solid var(--borde); font-size: 14px; }
.pista b { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; min-width: 90px; }
.pista.bloqueada { color: var(--suave); font-style: italic; }
.intentos { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.intentos li { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px; border-radius: 999px; font-weight: 600; background: var(--mal); color: var(--sobre-mal); }
.intentos li.ok { background: var(--ok); }
.intentos li img { width: 40px; height: 40px; image-rendering: pixelated; }

/* Insignias de tipo */
.tipo { display: inline-block; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); margin: 2px; }

/* ── Duelo de estadísticas ── */
.pregunta-stat { text-align: center; font: 600 22px/1.2 var(--font-d); margin-bottom: 14px; }
.pregunta-stat span { color: var(--rojo); }
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.vs { font: 700 30px/1 var(--font-d); color: var(--rojo); }
.carta {
  padding: 12px 10px 14px; text-align: center; border-radius: 18px; cursor: pointer;
  background: var(--surface); border: 3px solid var(--borde); box-shadow: 0 6px 18px rgba(30, 50, 90, .1);
  transition: transform .15s, border-color .15s;
}
.carta:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--azul); }
.carta img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.carta .nombre { font: 600 18px/1.1 var(--font-d); margin-top: 4px; }
.carta .valor { font: 700 26px/1 var(--font-d); margin-top: 6px; min-height: 26px; color: var(--azul); }
.carta .valor.oculto { color: transparent; }
.carta.gana { border-color: var(--ok); }
.carta.pierde { border-color: var(--mal); opacity: .75; }
.marcador { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; }
.marcador span { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #1d1d1d; position: relative; overflow: hidden; }
.marcador span::before { content: ''; position: absolute; inset: 0 0 50% 0; background: var(--surface-2); }
.marcador span.ok::before { background: var(--ok); }
.marcador span.mal::before { background: var(--mal); }
.marcador span.actual::before { background: var(--rojo); }

.solucion { display: flex; gap: 14px; align-items: center; text-align: left; }
.solucion img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.solucion b { font: 600 26px/1 var(--font-d); display: block; }