/* La portada de Pockies (index.html). Noche violeta con rayos, como la
   tarjeta del jugador y la Tienda de Cosméticos; las mismas letras que el
   juego (Fredoka para títulos, Nunito para el texto). */
:root {
  --noche: #1d0b3a;
  --noche2: #2e1060;
  --panel: rgba(255, 255, 255, .06);
  --borde: rgba(255, 255, 255, .14);
  --texto: #f0e8ff;
  --texto2: #cbb8f0;
  --rosa: #ff5fa2;
  --violeta: #aa00ff;
  --oro: #ffd23f;
  --comun: #22cc55;
  --rara: #1188ff;
  --epica: #aa00ff;
  --legendaria: #ff8c00;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--texto); font-family: 'Nunito', system-ui, sans-serif; line-height: 1.55;
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 95, 162, .28) 0, transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(62, 231, 255, .14) 0, transparent 40%),
    linear-gradient(180deg, var(--noche2) 0%, var(--noche) 60%, #12052a 100%);
  min-height: 100vh;
}
/* Debajo de todo, por si la página es más alta que el degradé. */
html { background: #12052a; }
a { color: #ffb3d9; }
h1, h2, h3 { font-family: 'Fredoka', sans-serif; line-height: 1.12; margin: 0; }
img { max-width: 100%; }

.saltar { position: absolute; left: -999px; top: 8px; background: #fff; color: #2b1b3d; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.saltar:focus { left: 8px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 999px; padding: 12px 22px; cursor: pointer; text-decoration: none;
  font: 800 1rem 'Nunito', sans-serif; color: #2b1b3d; background: linear-gradient(180deg, #fff3a8, var(--oro));
  box-shadow: 0 4px 0 #b88a00, 0 10px 24px -8px rgba(255, 210, 63, .6);
  transition: transform .12s ease, box-shadow .12s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(2px); box-shadow: 0 2px 0 #b88a00; }
.boton:disabled { opacity: .6; cursor: default; transform: none; }
.boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.boton-grande { font-size: 1.1rem; padding: 15px 26px; }
.boton-secundario { background: rgba(255, 255, 255, .12); color: var(--texto); box-shadow: inset 0 0 0 2px var(--borde); }
.boton-chico { padding: 8px 14px; font-size: .88rem; box-shadow: 0 3px 0 #b88a00; }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } .boton:hover { transform: none; } }

/* ── La barra de arriba ── */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: rgba(29, 11, 58, .82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font: 700 1.4rem 'Fredoka', sans-serif; }
.barra nav { display: flex; gap: 18px; }
.barra nav a { color: var(--texto2); text-decoration: none; font-weight: 800; font-size: .92rem; }
.barra nav a:hover { color: #fff; }
@media (max-width: 640px) { .barra nav { display: none; } }

main { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.aviso-jugador { margin: 16px 0 0; padding: 10px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--borde); font-weight: 700; }

/* ── La portada ── */
.portada { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; padding: 56px 0 40px; }
.fecha-salida {
  display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 210, 63, .14); color: #ffe38a; font-weight: 800; font-size: .88rem;
}
.portada h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.resaltado { background: linear-gradient(90deg, #ff9ec4, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bajada { color: var(--texto2); font-size: 1.08rem; margin: 16px 0 0; max-width: 60ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.portada-pockies {
  position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg);
  border-radius: 50%;
}
.portada-pockies::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .35), transparent 70%); }
.flota { position: absolute; filter: drop-shadow(0 8px 10px rgba(18, 5, 42, .45)); animation: flotar 5s ease-in-out infinite; }
.f1 { left: 30%; top: 28%; width: 40%; height: auto; }
.f2 { left: 2%; top: 12%; width: 28%; height: auto; animation-delay: -1s; }
.f3 { right: 0; top: 6%; width: 30%; height: auto; animation-delay: -2.2s; }
.f4 { left: 6%; bottom: 4%; width: 26%; height: auto; animation-delay: -3s; }
.f5 { right: 4%; bottom: 6%; width: 28%; height: auto; animation-delay: -4s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .flota { animation: none; } }
@media (max-width: 760px) {
  .portada { grid-template-columns: 1fr; padding-top: 32px; }
  .portada-pockies { max-width: 320px; order: -1; }
}

/* ── Secciones ── */
.seccion { padding: 44px 0; }
.seccion h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: 18px; }
.rasgos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rasgo { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--borde); }
.rasgo h3 { font-size: 1.15rem; margin-bottom: 6px; color: #fff; }
.rasgo p { margin: 0; color: var(--texto2); }
@media (max-width: 860px) { .rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rasgos { grid-template-columns: 1fr; } }

.vitrina { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ficha {
  --r: var(--comun);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 14px 8px 12px; border-radius: 16px; border: 3px solid color-mix(in srgb, var(--r) 70%, #fff);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--r) 35%, #fff) 0%, var(--r) 50%, color-mix(in srgb, var(--r) 55%, #12052a) 100%);
}
.ficha.rara { --r: var(--rara); } .ficha.epica { --r: var(--epica); } .ficha.legendaria { --r: var(--legendaria); }
.ficha img { width: 96px; height: 96px; filter: drop-shadow(0 4px 4px rgba(18, 5, 42, .35)); }
.ficha strong { font-family: 'Fredoka', sans-serif; font-size: 1.05rem; color: #fff; }
.ficha span { font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) { .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── El preregistro ── */
.preregistro { border-top: 1px solid var(--borde); }
.contador { margin: 22px 0 18px; padding: 20px; border-radius: 20px; background: linear-gradient(160deg, #3a1470, #22094a); border: 2px solid rgba(255, 210, 63, .35); }
.contador-numero { margin: 0; font-size: 1.1rem; color: var(--texto2); }
.contador-numero strong { font: 700 2.4rem 'Fredoka', sans-serif; color: #fff; margin-right: 4px; }
.contador-barra { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 10px 0 8px; }
.contador-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--rosa), var(--oro)); transition: width .6s ease; }
.contador-proxima { margin: 0; font-weight: 700; }

.metas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.meta {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--borde);
}
.meta-numero { font: 700 1.2rem 'Fredoka', sans-serif; color: var(--oro); }
.meta-premio { font-weight: 800; color: #fff; }
.meta-premio sup { color: var(--texto2); margin-left: 2px; }
.meta-estado { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--texto2); }
.meta.lograda { background: rgba(34, 204, 85, .14); border-color: rgba(34, 204, 85, .5); }
.meta.lograda .meta-estado { color: #8df08d; }
.meta.siguiente { border-color: rgba(255, 210, 63, .7); box-shadow: 0 0 0 3px rgba(255, 210, 63, .15); }
.meta.siguiente .meta-estado { color: var(--oro); }
@media (max-width: 520px) {
  .meta { grid-template-columns: 64px minmax(0, 1fr); }
  .meta-estado { grid-column: 2; }
}
.notas-metas { margin-top: 12px; font-size: .84rem; color: var(--texto2); }
.notas-metas p { margin: 4px 0; }

.registro { margin-top: 24px; padding: 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--borde); text-align: center; }
.registro-estado p { margin: 0 0 14px; }
.registro-listo { color: #8df08d; }
.letra-chica { margin: 16px auto 0; max-width: 70ch; font-size: .76rem; color: var(--texto2); }

/* ── Preguntas ── */
.preguntas { display: grid; gap: 8px; }
.preguntas details { padding: 14px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--borde); }
.preguntas summary { cursor: pointer; font-weight: 800; color: #fff; }
.preguntas p { margin: 8px 0 0; color: var(--texto2); }

.pie { max-width: 1080px; margin: 0 auto; padding: 28px 20px 40px; border-top: 1px solid var(--borde); color: var(--texto2); font-size: .9rem; }
.pie p { margin: 4px 0; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ── Canjear un código (redeem.html) ── */
.canje { max-width: 560px; margin: 0 auto; text-align: center; }
.canje-form { display: grid; gap: 12px; justify-items: center; }
.canje-etiqueta { font-weight: 800; }
.canje-campo {
  width: 100%; max-width: 360px; padding: 14px 16px; border-radius: 14px;
  border: 2px solid var(--borde); background: rgba(0, 0, 0, .25); color: #fff;
  font: 700 1.3rem 'Nunito', sans-serif; text-align: center; letter-spacing: .08em; text-transform: uppercase;
}
.canje-campo::placeholder { color: var(--texto2); text-transform: none; letter-spacing: 0; font-weight: 400; }
.canje-campo:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.canje-estado { margin-top: 18px; }
.canje-estado:empty { display: none; }
.canje-error p { color: #ffb3c8; }
.canje-pockie { display: block; margin: 0 auto 10px; }

/* ── El aviso para no caer en estafas (redeem.html, codigos.html) ── */
.aviso-seguro {
  margin: 18px auto; padding: 14px 18px; max-width: 640px; text-align: left;
  border-radius: 14px; background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .45);
}
.aviso-seguro h2 { margin: 0 0 8px; font-size: 1.05rem; }
.aviso-seguro p, .aviso-seguro li { margin: 0 0 6px; line-height: 1.45; }
.aviso-seguro ul { margin: 0; padding-left: 20px; }
.aviso-seguro a { color: var(--oro); font-weight: 800; }

/* ── La lista oficial de códigos (codigos.html) ── */
.codigos { max-width: 720px; margin: 0 auto; text-align: center; }
.codigos-orden { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 18px 0 10px; }
.codigos-orden label { font-weight: 800; }
.codigos-orden select {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borde);
  background: rgba(0, 0, 0, .25); color: #fff; font: 700 .95rem 'Nunito', sans-serif;
}
.codigos-lista { display: grid; gap: 12px; text-align: left; }
.codigos-vacio { text-align: center; color: var(--texto2); }
.codigo {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--borde);
}
.codigo-inactivo { opacity: .65; }
.codigo-arte { flex: none; }
.codigo-info { flex: 1; min-width: 0; }
.codigo-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.codigo-texto { font: 800 1.15rem 'Nunito', monospace; letter-spacing: .06em; color: #fff; word-break: break-all; }
.codigo-estado { padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: rgba(141, 240, 141, .18); color: #8df08d; }
.codigo[data-estado="vencido"] .codigo-estado, .codigo[data-estado="agotado"] .codigo-estado { background: rgba(255, 255, 255, .1); color: var(--texto2); }
.codigo-premio { margin: 6px 0 2px; font-weight: 700; }
.codigo-fechas { margin: 0; color: var(--texto2); font-size: .88rem; }
@media (max-width: 520px) { .codigo { flex-wrap: wrap; } .codigo .boton { width: 100%; text-align: center; } }