:root{
  --bg:#090d28;--bg2:#151d4e;--text:#fff;--muted:#c7cdf5;
  --yellow:#ffd84d;--cyan:#55e7ff;--purple:#8d66ff;
  --danger:#ff617d;--green:#43d996;--shadow:0 18px 48px rgba(0,0,0,.34);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:
radial-gradient(circle at 15% 5%,rgba(141,102,255,.42),transparent 28%),
radial-gradient(circle at 88% 12%,rgba(85,231,255,.2),transparent 25%),
linear-gradient(var(--bg2),var(--bg));color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:29px 29px;opacity:.22}
button{font:inherit}.app{width:min(100%,520px);min-height:100dvh;margin:auto;padding:18px 16px 28px;position:relative}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow{margin:0;color:var(--cyan);font-size:.7rem;font-weight:950;letter-spacing:.16em}
h1{font-size:1.35rem;line-height:1.05;margin:4px 0 0}h2,h3,p{margin-top:0}
.icon-btn,.cerrar{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:16px;padding:10px 12px;font-weight:850}
.icon-btn b{background:var(--yellow);color:#2f2500;padding:3px 7px;border-radius:999px}
.pantalla{display:none}.pantalla.activa{display:block;animation:fade .28s ease}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{min-height:430px;border-radius:30px;overflow:hidden;position:relative;background:url("../imagenes/seba.jpg") center 22%/cover;border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow)}
.hero:after{content:"";position:absolute;inset:36% 0 0;background:linear-gradient(transparent,rgba(5,8,28,.98))}
.hero-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:22px}.hero-copy h2{font-size:2rem;line-height:1.04;margin:10px 0}.hero-copy p{color:#e5e8ff;line-height:1.45}
.badge{display:inline-block;background:var(--yellow);color:#2d2400;padding:7px 10px;border-radius:999px;font-size:.68rem;font-weight:950;letter-spacing:.1em}
.panel{margin-top:14px;padding:18px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.btn-principal,.btn-secundario,.btn-peligro{width:100%;border-radius:17px;padding:15px;border:0;font-weight:950;cursor:pointer}
.btn-principal{background:linear-gradient(135deg,#ffe36a,#ffb53f);color:#312500;box-shadow:0 8px 0 #a86215}.btn-principal:active{transform:translateY(4px);box-shadow:0 4px 0 #a86215}
.btn-secundario{margin-top:14px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.btn-peligro{margin-top:22px;background:rgba(255,97,125,.14);color:#ff93a6;border:1px solid rgba(255,97,125,.3)}
.mundos-grid{display:grid;gap:14px;margin-top:16px}.mundo{position:relative;overflow:hidden;min-height:205px;border:1px solid rgba(255,255,255,.18);border-radius:27px;padding:22px;color:#fff;text-align:left;box-shadow:var(--shadow)}
.mundo strong{display:block;font-size:1.55rem;margin:10px 0 7px}.mundo small{display:block;color:#eef1ff;font-size:.92rem}.mundo .mini{font-size:.68rem;font-weight:950;letter-spacing:.13em;background:rgba(255,255,255,.15);padding:7px 9px;border-radius:999px}
.mundo i{position:absolute;right:-18px;bottom:-28px;width:138px;height:138px;border-radius:50%;box-shadow:inset -18px -14px 0 rgba(0,0,0,.12)}
.mundo-mate{background:linear-gradient(145deg,#5a39ad,#233071)}.mundo-mate i{background:linear-gradient(135deg,#ffd65d,#ff6aa6)}
.mundo-palabras{background:linear-gradient(145deg,#126f8a,#20376d)}.mundo-palabras i{background:linear-gradient(135deg,#5cf0da,#4b80ff)}
.estado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.estado div,.progreso-doble div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;text-align:center;padding:10px}.estado span,.progreso-doble span{display:block;color:var(--muted);font-size:.7rem}.estado strong,.progreso-doble strong{font-size:1.35rem}
.pregunta-card{min-height:430px;padding:24px 16px;border-radius:29px;background:linear-gradient(155deg,#47328f,#1a265f 65%,#10163e);border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden}
.pregunta-card.palabras{background:linear-gradient(155deg,#13718d,#1a3569 65%,#10163e)}.pregunta-card>p{color:var(--cyan);font-size:.7rem;font-weight:950;letter-spacing:.15em}
.pregunta{font-size:4.4rem;font-weight:1000;margin:60px 0 38px;position:relative;z-index:1}.pregunta.palabra{font-size:2.8rem;line-height:1.1;margin:72px 0 45px}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1}.opcion{padding:18px 5px;border-radius:19px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;font-size:1.45rem;font-weight:950}.opcion.palabra{font-size:.95rem}.opcion.correcta{background:var(--green);color:#062a1a}.opcion.incorrecta{background:var(--danger)}
.mensaje{min-height:28px;text-align:center;color:var(--muted);font-weight:800;margin:10px 0}
.coleccion-head{display:flex;justify-content:space-between;align-items:center}.resumen{color:var(--muted);margin:14px 0}.progreso-doble{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.carta{position:relative;overflow:hidden;border-radius:22px;background:#28336d;border:3px solid #9299cb;box-shadow:var(--shadow)}.carta img{width:100%;aspect-ratio:1/1.08;object-fit:cover;display:block}.carta-info{padding:11px 12px 13px}.carta h3{margin:0 0 4px;font-size:1rem}.rareza{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:950;color:var(--cyan)}.cantidad{position:absolute;right:9px;top:9px;background:#111738;border:2px solid white;border-radius:999px;min-width:34px;height:34px;display:grid;place-items:center;font-weight:950}
.bloqueada img{filter:grayscale(1) brightness(.24)}.bloqueada .carta-info{opacity:.55}.raro{border-color:#4edfff}.epico{border-color:#ba6cff}.legendario{border-color:#ffd84a;box-shadow:0 0 28px rgba(255,216,74,.25)}
.modal{position:fixed;inset:0;background:rgba(4,6,22,.86);backdrop-filter:blur(8px);display:none;place-items:center;padding:18px;z-index:20}.modal.abierto{display:grid}.modal-card{width:min(100%,390px);background:linear-gradient(155deg,#2f397b,#151b46);border:1px solid rgba(255,255,255,.18);border-radius:29px;padding:20px;text-align:center}.modal-card .carta{width:82%;margin:14px auto 20px}.modal-mini{color:var(--yellow);font-size:.72rem;font-weight:950;letter-spacing:.14em}
.felicitaciones-card{text-align:center;padding:20px 0}.felicitaciones-card img{width:100%;max-height:330px;object-fit:cover;border-radius:28px;margin:10px 0 18px;border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow)}.felicitaciones-card h2{font-size:2.2rem;margin:12px 0}.felicitaciones-card p{color:#e5e8ff;line-height:1.5}.confeti{font-size:1.7rem;letter-spacing:.2em;animation:brillo 1.2s infinite alternate}@keyframes brillo{to{transform:scale(1.06);filter:brightness(1.35)}}.mini-coleccion{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0}.mini-coleccion img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin:0}
@media(max-width:380px){.pregunta{font-size:3.7rem}.pregunta.palabra{font-size:2.3rem}.opcion{font-size:1.2rem}.opcion.palabra{font-size:.84rem}.hero{min-height:390px}}


.hero-portada{
  min-height:calc(100dvh - 104px);
  background-image:url("../imagenes/portada-inicio.jpg");
  background-position:center center;
  background-size:cover;
}
.hero-portada:after{display:none}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,7,24,.05) 0%,rgba(4,7,24,.12) 42%,rgba(4,7,24,.78) 78%,rgba(4,7,24,.96) 100%);
}
.hero-copy-inicio{
  left:18px;
  right:18px;
  bottom:24px;
  text-align:center;
}
.hero-copy-inicio h2{
  font-size:2.15rem;
  text-shadow:0 4px 18px rgba(0,0,0,.65);
}
.hero-copy-inicio p{
  max-width:320px;
  margin:0 auto 18px;
  text-shadow:0 3px 14px rgba(0,0,0,.65);
}
.btn-comenzar{
  max-width:320px;
  margin:0 auto;
  display:block;
  font-size:1.08rem;
}
@media(max-width:380px){
  .hero-portada{min-height:calc(100dvh - 96px)}
  .hero-copy-inicio h2{font-size:1.85rem}
}

.oculto{display:none!important}
.sobre{
  width:230px;height:305px;margin:18px auto 24px;border-radius:24px;
  background:linear-gradient(145deg,#263a91,#121a52 62%,#070b28);
  border:3px solid #5be6ff;box-shadow:0 0 34px rgba(83,231,255,.35);
  position:relative;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  animation:flotar 1.4s ease-in-out infinite alternate;
}
.sobre:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 25% 25%,rgba(255,255,255,.9) 0 1px,transparent 2px),
radial-gradient(circle at 70% 65%,rgba(255,255,255,.75) 0 1px,transparent 2px);
background-size:27px 27px,34px 34px;opacity:.55}
.sobre-tapa{position:absolute;top:-2px;left:-2px;right:-2px;height:120px;
background:linear-gradient(160deg,#4b68e6,#1b2a7a);clip-path:polygon(0 0,100% 0,50% 100%)}
.sobre-logo{font-size:4rem;color:var(--yellow);filter:drop-shadow(0 0 12px rgba(255,216,77,.7));z-index:2}
.sobre span{position:absolute;bottom:18px;font-weight:950;color:#dff9ff;z-index:2}
.sobre.abriendo{animation:abrirSobre .7s forwards}
@keyframes flotar{to{transform:translateY(-7px) rotate(.8deg)}}
@keyframes abrirSobre{50%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(.2);opacity:0}}
.carta-revelada{display:none}
.carta-revelada.visible{display:block;animation:revelarCarta .65s cubic-bezier(.2,.9,.2,1)}
@keyframes revelarCarta{from{opacity:0;transform:rotateY(90deg) scale(.75)}to{opacity:1;transform:none}}
.filtros{display:flex;gap:8px;overflow:auto;padding-bottom:10px;margin:4px 0 12px}
.filtro{white-space:nowrap;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#fff;padding:9px 11px;border-radius:999px;font-size:.75rem;font-weight:850}
.filtro.activo{background:var(--yellow);color:#312500}
.carta{cursor:pointer}
.numero-carta{position:absolute;left:9px;top:9px;background:rgba(7,11,40,.88);border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:5px 8px;font-size:.62rem;font-weight:950}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.statline{background:rgba(255,255,255,.07);padding:8px;border-radius:10px;font-size:.72rem}
.statline b{display:block;font-size:.95rem}
.detalle-card{position:relative}
.detalle-cerrar{position:absolute;right:12px;top:12px;z-index:3}
.detalle-card .carta{width:88%;margin:12px auto}
.legendario{animation:brilloLegendario 1.5s infinite alternate}
@keyframes brilloLegendario{to{box-shadow:0 0 38px rgba(255,216,74,.65)}}

.racha-legendaria{
  margin:-2px 0 12px;padding:12px 13px;border-radius:17px;
  background:linear-gradient(135deg,rgba(255,190,35,.16),rgba(255,216,74,.06));
  border:1px solid rgba(255,216,74,.4);
}
.racha-texto{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.75rem}
.racha-texto span{color:#ffe88a;font-weight:900}.racha-texto strong{color:#fff}
.barra-racha{height:9px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden;margin-top:8px}
.barra-racha i{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff9f24,#ffe35f);transition:width .35s ease}
.universo-carta{display:block;margin-top:4px;color:#bfc7f4;font-size:.62rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.recompensa-legendaria{color:#ffe160!important;text-shadow:0 0 14px rgba(255,216,74,.65)}