/* Universo soyese: tarjetas coleccionables holográficas, revelación del personaje y preguntas tipo juego. */
.ucard { --w: 300px; --rx: 0deg; --ry: 0deg; --mx: .5; --my: .4; position: relative; width: min(var(--w), 100%); aspect-ratio: 5/7; border-radius: 22px; padding: 9px; isolation: isolate;
  background: conic-gradient(from 210deg, #ffe9a8, #f2b84b, #fff3c4, #c98a1b, #ffe9a8, #f2b84b, #fff3c4, #ffe9a8); box-shadow: 0 24px 60px rgba(20,8,70,.45), 0 0 0 1px rgba(255,255,255,.25) inset;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; will-change: transform; color: #fff; font-family: var(--head, system-ui); }
.uc-frame { position: relative; height: 100%; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #1a1442, #0d0a2a); box-shadow: 0 0 0 2px rgba(0,0,0,.35) inset; }
.uc-frame::before, .uc-frame::after { content: "◆"; position: absolute; z-index: 5; color: #ffe9a8; font-size: 15px; top: 5px; text-shadow: 0 0 8px #f2b84b; }
.uc-frame::before { left: 7px; } .uc-frame::after { right: 7px; }
.uc-top { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; padding: 8px 26px 4px; font: 800 .68rem var(--head, system-ui); letter-spacing: .14em; text-transform: uppercase; }
.uc-el { color: var(--c1); text-shadow: 0 0 10px var(--c2); } .uc-no { color: rgba(255,255,255,.7); }
.uc-art { position: relative; flex: 1; margin-bottom: 0; min-height: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, var(--c1) 0, var(--c2) 38%, #1b1347 78%); overflow: hidden; }
.uc-ring { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(255,255,255,.55); box-shadow: 0 0 24px var(--c1), inset 0 0 24px rgba(255,255,255,.35); animation: ucspin 18s linear infinite; }
.uc-ring.r2 { width: 92%; border: 2px solid rgba(255,255,255,.25); animation-duration: 28s; animation-direction: reverse; }
.uc-sp { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px 3px var(--c1); animation: ucfloat 3.4s ease-in-out infinite; }
.uc-sp.s1 { left: 14%; top: 24%; } .uc-sp.s2 { right: 16%; top: 38%; animation-delay: -1.2s; } .uc-sp.s3 { left: 30%; bottom: 30%; animation-delay: -2.2s; }
.uc-char { position: relative; z-index: 2; width: 64%; height: auto; margin-top: -10%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)); animation: ucfloat 4s ease-in-out infinite; }
.uc-stats { position: absolute; z-index: 5; left: 6px; bottom: 6px; margin: 0; padding: 14px 10px 20px 10px; list-style: none; width: 40%; background: linear-gradient(160deg, var(--c1), var(--c2) 60%, #1b1347); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.uc-stats li { display: grid; grid-template-columns: 1fr 12px; gap: 3px; align-items: center; font: 800 .54rem system-ui; letter-spacing: .03em; text-transform: uppercase; padding: 1px 2px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.uc-stats b { display: none; } .uc-stats em { font-style: normal; text-align: right; color: #ffe9a8; }
.uc-plate { position: absolute; z-index: 6; left: 36%; right: 6px; bottom: 12px; padding: 6px 10px 7px 22px; text-align: center; background: linear-gradient(180deg, #2a1f66, #14103a); border: 2px solid #f2b84b; clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.uc-plate b { display: block; font: 900 1.05rem var(--head, system-ui); letter-spacing: .16em; color: #ffe9a8; line-height: 1.1; } .uc-plate span { font: 700 .62rem system-ui; color: #fff; line-height: 1.2; display: block; }
.uc-foot { display: none; }
.uc-holo { position: absolute; inset: 0; z-index: 6; border-radius: 22px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .34;
  background: repeating-linear-gradient(115deg, #ff7ad9 0%, #ffe45e 12%, #6dffd2 24%, #6cb8ff 36%, #c48bff 48%, #ff7ad9 60%); background-size: 240% 240%; background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%); }
.uc-shine { position: absolute; inset: 0; z-index: 7; border-radius: 22px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0; animation: ucshine 5.5s ease-in-out infinite; }
.ucard.mystery .uc-char { filter: brightness(0) drop-shadow(0 0 16px var(--c1)); } .ucard.mystery .uc-stats { visibility: hidden; }
.ucards { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); justify-items: center; }
@keyframes ucspin { to { transform: rotate(360deg); } } @keyframes ucfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ucshine { 0%, 55% { background-position: 160% 0; } 80%, 100% { background-position: -60% 0; } }

/* Revelación del personaje */
body.urev-lock { overflow: hidden; }
.urev { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, #2b1d6e 0, #0b0720 70%); animation: urin .4s ease both; }
.urev.out { animation: urout .45s ease both; }
.ur-rays { position: absolute; width: 160vmax; height: 160vmax; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 6deg, transparent 6deg 18deg); animation: ucspin 40s linear infinite; mask-image: radial-gradient(circle, #000 0, transparent 60%); }
.ur-portal { position: absolute; width: min(70vmin, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.ur-portal i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c1); box-shadow: 0 0 40px var(--c1), inset 0 0 40px var(--c2); animation: ucspin 6s linear infinite; border-style: dashed; }
.ur-portal i:nth-child(2) { inset: 12%; animation-duration: 9s; animation-direction: reverse; border-style: solid; opacity: .7; } .ur-portal i:nth-child(3) { inset: 26%; animation-duration: 4s; opacity: .5; }
.ur-sil { position: relative; z-index: 2; width: min(46vmin, 280px); height: auto; filter: brightness(0) drop-shadow(0 0 22px var(--c1)); animation: ursil 1.8s ease-in-out infinite; }
.ur-msg { position: absolute; bottom: 14vh; margin: 0; width: 100%; text-align: center; font: 800 clamp(1.05rem, 4vw, 1.5rem) var(--head, system-ui); color: #fff; text-shadow: 0 2px 16px #000; letter-spacing: .02em; }
.ur-skip { position: absolute; top: 16px; right: 16px; z-index: 5; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); color: #fff; padding: 8px 14px; border-radius: 99px; font: 700 .85rem system-ui; cursor: pointer; }
.ur-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ur-card { position: absolute; z-index: 4; opacity: 0; transform: scale(.4) rotate(-8deg); pointer-events: none; }
.ur-card .ucard { --w: min(72vw, 330px); }
.urev.burst .ur-sil, .urev.burst .ur-msg, .urev.burst .ur-portal { animation: urgone .45s ease both; }
.urev.burst .ur-flash { animation: urflash .9s ease both; }
.urev.burst .ur-card { animation: urcard .9s .25s cubic-bezier(.2,1.3,.3,1) both; pointer-events: auto; }
@keyframes urin { from { opacity: 0; } } @keyframes urout { to { opacity: 0; } }
@keyframes ursil { 0%, 100% { transform: scale(.96) translateY(0); } 50% { transform: scale(1.04) translateY(-8px); } }
@keyframes urgone { to { opacity: 0; transform: scale(1.4); } } @keyframes urflash { 0% { opacity: 0; } 20% { opacity: .95; } 100% { opacity: 0; } }
@keyframes urcard { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* Preguntas tipo juego (se aplican con la clase .game en el contenedor de la pregunta) */
.game .opt, .game .option { border-radius: 18px; border: 2px solid rgba(124,92,255,.35); background: linear-gradient(180deg, #fff, #f3eeff); box-shadow: 0 6px 0 rgba(108,71,255,.25); transition: transform .12s, box-shadow .12s, border-color .12s; }
.game .opt:active, .game .option:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(108,71,255,.25); }
.game .opt.on, .game .option.on { border-color: #6c47ff; background: linear-gradient(180deg, #efe8ff, #ddd0ff); }
@media (prefers-reduced-motion: reduce) { .ucard, .uc-ring, .uc-char, .uc-sp, .uc-shine, .ur-rays, .ur-portal i, .ur-sil { animation: none !important; transition: none !important; } }

.urev::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 180deg at 50% -10%, transparent 30deg, rgba(255,255,255,.10) 40deg, transparent 55deg, rgba(255,255,255,.07) 70deg, transparent 85deg, rgba(255,255,255,.10) 100deg, transparent 120deg, transparent 240deg, rgba(255,255,255,.08) 260deg, transparent 280deg); animation: urin 1.2s ease both; pointer-events: none; }
.urev::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -8%; height: 38%; background: radial-gradient(ellipse at 50% 100%, rgba(190,170,255,.55), rgba(190,170,255,0) 70%); filter: blur(14px); animation: urfog 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes urfog { from { transform: translateX(-3%); opacity: .7; } to { transform: translateX(3%); opacity: 1; } }
.ur-portal i:first-child { border-style: dotted; border-width: 6px; }
@media (prefers-reduced-motion: reduce) { .urev::after, .urev::before { animation: none !important; } }