/* ===== El Parche · capa visual premium ===== */
:root{--gold:#ffcf4a;--gold2:#ff9d2e;--glass:rgba(255,255,255,.1)}
body{background:#120b33;position:relative;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.75;pointer-events:none}
body:before{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;background:radial-gradient(circle,#6a3df0,transparent 65%);animation:orb1 18s ease-in-out infinite alternate}
body:after{width:60vmax;height:60vmax;right:-25vmax;top:10vmax;background:radial-gradient(circle,#e0358f,transparent 65%);animation:orb2 22s ease-in-out infinite alternate}
@keyframes orb1{to{transform:translate(18vmax,22vmax) scale(1.15)}}
@keyframes orb2{to{transform:translate(-20vmax,25vmax) scale(.9)}}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.3px);background-size:26px 26px;mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%)}
#confetti{position:fixed;inset:0;z-index:60;pointer-events:none;width:100%;height:100%}
#app.enter>*{animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both}
#app.enter>*:nth-child(2){animation-delay:.05s}#app.enter>*:nth-child(3){animation-delay:.1s}#app.enter>*:nth-child(4){animation-delay:.15s}#app.enter>*:nth-child(5){animation-delay:.2s}#app.enter>*:nth-child(n+6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}}
.card{background:linear-gradient(180deg,#fff,#f6f3ff);border-radius:26px;box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 10px 0 rgba(8,4,40,.35),0 22px 40px rgba(8,4,40,.35);border:1px solid rgba(255,255,255,.6)}
.btn{background:linear-gradient(180deg,#fff,#e6e0ff);box-shadow:0 5px 0 #b9aeea,0 10px 18px rgba(8,4,40,.25);position:relative;overflow:hidden;border-radius:18px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #b9aeea}
.btn.pri{background:linear-gradient(180deg,#ffe27a,var(--gold) 45%,var(--gold2));box-shadow:0 5px 0 #c96a00,0 12px 22px rgba(255,157,46,.45);color:#4a2500;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn.pri:active{box-shadow:0 1px 0 #c96a00}
.btn.pri:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.2s infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn.tl{background:linear-gradient(180deg,#6ff0d6,#19c7a8);box-shadow:0 5px 0 #0b8f78,0 10px 18px rgba(25,199,168,.35)}
.btn.red{background:linear-gradient(180deg,#ff7d92,#ea3358);box-shadow:0 5px 0 #a81636,0 12px 22px rgba(234,51,88,.45)}
.btn.s{box-shadow:0 3px 0 #b9aeea}
.logo{padding:30px 0 10px}
.logo b{font-size:64px;background:linear-gradient(180deg,#fff 30%,#ffd9f0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 rgba(0,0,0,.3))}
.logo b i{background:linear-gradient(180deg,#fff0a8,var(--gold) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{display:flex;justify-content:center;gap:18px;height:96px;align-items:center;perspective:600px;margin-top:6px}
.hero .dice{animation:float 4s ease-in-out infinite}.hero .dice:nth-child(2){animation-delay:-2s}
.hero .dice .cube{animation:tumble 9s linear infinite}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes tumble{to{transform:rotateX(360deg) rotateY(720deg)}}
.top .code{background:var(--glass);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ghead{font-size:19px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.bar{height:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 4px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15)}
.bar b{background:linear-gradient(90deg,#ff5d8f,var(--gold));box-shadow:0 0 12px rgba(255,207,74,.7)}
.pl .av,.chip i{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.pl .av{background:linear-gradient(145deg,#fff,#e9e3ff);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.bigcode{background:linear-gradient(180deg,#6a3df0,#e0358f);-webkit-background-clip:text;background-clip:text;color:transparent}
/* menú de juegos */
.games{gap:14px}
.gc{position:relative;padding:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 0 rgba(8,4,40,.4),0 18px 30px rgba(8,4,40,.35);transition:transform .12s;text-align:left}
.gc:active{transform:translateY(5px) scale(.98)}
.gc .cov{height:104px;display:grid;place-items:center;background:linear-gradient(140deg,var(--c1),var(--c2));position:relative;overflow:hidden}
.gc .cov:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.55),transparent 45%),radial-gradient(circle at 85% 110%,rgba(0,0,0,.3),transparent 55%)}
.gc .cov:after{content:"";position:absolute;width:150%;height:60%;left:-25%;bottom:-42%;background:rgba(255,255,255,.18);border-radius:50%}
.gc .cov i{font-size:62px;position:relative;z-index:1;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));animation:bob 3.4s ease-in-out infinite}
.gc:nth-child(2n) .cov i{animation-delay:-1.2s}.gc:nth-child(3n) .cov i{animation-delay:-2.1s}
.gc .cov u{position:absolute;font-size:22px;text-decoration:none;opacity:.55;z-index:0}
.gc .cov u:nth-of-type(1){left:10px;top:8px;transform:rotate(-18deg)}.gc .cov u:nth-of-type(2){right:10px;bottom:10px;transform:rotate(16deg);font-size:26px}
@keyframes bob{50%{transform:translateY(-7px) rotate(-4deg)}}
.gc .inf{padding:9px 12px 12px}.gc b{font-size:17px;line-height:1.1}.gc span{font-size:13px}
/* preguntas */
.opt{border:0;background:linear-gradient(180deg,#fff,#efeaff);box-shadow:0 5px 0 #cdc4f3,0 8px 14px rgba(8,4,40,.12);border-radius:18px;transition:transform .08s;animation:popin .35s cubic-bezier(.2,.9,.3,1.4) both}
.opts .opt:nth-child(2){animation-delay:.06s}.opts .opt:nth-child(3){animation-delay:.12s}.opts .opt:nth-child(4){animation-delay:.18s}
@keyframes popin{from{opacity:0;transform:scale(.7)}}
.opt:active{transform:translateY(4px)}
.opt.sel{background:linear-gradient(180deg,#e9f3ff,#cfe4ff);box-shadow:0 5px 0 var(--b)}
.opt.ok{background:linear-gradient(180deg,#e2fbe9,#b9f1cd);box-shadow:0 5px 0 var(--ok);animation:yes .5s}
.opt.bad{background:linear-gradient(180deg,#ffe9ee,#ffc9d3);box-shadow:0 5px 0 var(--bad);animation:sh .35s}
@keyframes yes{40%{transform:scale(1.08)}}
.flag{border-radius:10px;box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(0,0,0,.1),0 14px 26px rgba(8,4,40,.35);animation:flagin .5s cubic-bezier(.2,.9,.3,1.3) both;transform-origin:50% 0}
@keyframes flagin{from{opacity:0;transform:rotateX(-70deg)}}
.res{animation:popin .4s cubic-bezier(.2,.9,.3,1.6) both}
.tiles span{background:linear-gradient(180deg,#f3efff,#ddd5fb);box-shadow:0 4px 0 #bfb4ee;border-radius:10px;height:46px}
.tiles span.on{background:linear-gradient(180deg,#ffe27a,var(--gold2));box-shadow:0 4px 0 #c96a00;animation:flip .4s}
@keyframes flip{from{transform:rotateX(90deg)}}
.letter{background:linear-gradient(160deg,#ff8fb3,#e0358f 60%,#a81f9a);box-shadow:0 8px 0 #7d1470,0 18px 30px rgba(224,53,143,.5),inset 0 3px 0 rgba(255,255,255,.4);text-shadow:0 4px 0 rgba(0,0,0,.2)}
.letter.spin{animation:slot .12s linear infinite}
@keyframes slot{0%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.inp{background:linear-gradient(180deg,#faf9ff,#fff);box-shadow:inset 0 2px 5px rgba(8,4,40,.08)}
.stopbtn{animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.03)}}
/* dado 3D */
.dice{width:64px;height:64px;perspective:500px;display:inline-block;margin:6px 10px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.cube .f{position:absolute;inset:0;border-radius:14px;background:radial-gradient(circle at 30% 25%,#fff,#f1eefb 60%,#d9d2f0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -6px 12px rgba(80,60,160,.18);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube .f i{border-radius:50%;margin:1.5px}
.cube .f i.p{background:radial-gradient(circle at 35% 30%,#5b4a8a,#1c1436 70%);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.8)}
.cube .f1 i.p{background:radial-gradient(circle at 35% 30%,#ff7d92,#c2183c 70%)}
.cube .f1{transform:translateZ(32px)}.cube .f6{transform:rotateY(180deg) translateZ(32px)}.cube .f2{transform:rotateY(90deg) translateZ(32px)}
.cube .f5{transform:rotateY(-90deg) translateZ(32px)}.cube .f3{transform:rotateX(90deg) translateZ(32px)}.cube .f4{transform:rotateX(-90deg) translateZ(32px)}
.dicebox{display:flex;justify-content:center;align-items:center;min-height:92px;filter:drop-shadow(0 14px 10px rgba(8,4,40,.35))}
/* tablero */
.board{border-radius:18px;border:7px solid #7a4a1e;box-shadow:0 0 0 3px #c98d4b inset,0 10px 0 #4d2c0e,0 24px 36px rgba(8,4,40,.5);background:#f7ecd2}
.board .cells div{font-size:10px;font-weight:700;color:rgba(60,40,20,.55);box-shadow:inset 0 0 0 .5px rgba(90,60,20,.18)}
.board .cells .a{background:linear-gradient(135deg,#ffe9b0,#ffd98a)}.board .cells .b{background:linear-gradient(135deg,#fff8e6,#fdeecb)}
.board .cells .g{background:linear-gradient(135deg,#ffe27a,#ff9d2e);font-size:15px}.board .cells .s{background:linear-gradient(135deg,#b8f3c9,#6fdc95)}
.tok{font-size:20px;z-index:3;transition:left .75s cubic-bezier(.4,1.6,.5,1),top .75s cubic-bezier(.4,1.6,.5,1)}
.tok b{display:grid;place-items:center;width:84%;height:84%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,var(--tc,#ddd) 75%);box-shadow:0 0 0 2px #fff,0 4px 0 rgba(0,0,0,.35),0 7px 8px rgba(0,0,0,.3);font-weight:400}
.tok.cur{z-index:4}.tok.cur b{animation:hop .8s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-22%) scale(1.12)}}
/* memoria */
.mem{perspective:900px}
.mem button{background:none;box-shadow:none;position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.3,.5,1);border-radius:14px}
.mem button:before,.mem button:after{content:"";position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mem button:before{background:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px),linear-gradient(135deg,#4d9fff,#7b5cff 55%,#e0358f);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 5px 0 rgba(8,4,40,.4)}
.mem button span{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#f1edff);border-radius:14px;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 0 rgba(8,4,40,.4);font-size:32px}
.mem button.up,.mem button.gone{transform:rotateY(180deg);background:none}
.mem button.gone{opacity:1}.mem button.gone span{background:linear-gradient(180deg,#e2fbe9,#b9f1cd);box-shadow:0 0 0 3px var(--ok),0 0 18px rgba(47,191,113,.7)}
/* reflejos */
.pad{box-shadow:0 10px 0 rgba(0,0,0,.3),0 24px 40px rgba(8,4,40,.45),inset 0 6px 0 rgba(255,255,255,.3),inset 0 -30px 60px rgba(0,0,0,.2);text-shadow:0 4px 0 rgba(0,0,0,.25);font-size:44px;position:relative;overflow:hidden}
.pad:before{content:"";position:absolute;left:50%;top:50%;width:60%;aspect-ratio:1;border-radius:50%;border:5px solid rgba(255,255,255,.5);transform:translate(-50%,-50%);animation:ring 1.4s ease-out infinite}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
/* podio y marcador */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin:8px 0 2px}
.podium div{flex:1;max-width:120px;text-align:center;font-weight:600;font-size:14px;animation:growup .7s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:50% 100%}
.podium div i{font-style:normal;font-size:40px;display:block;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.podium div em{display:block;font-style:normal;border-radius:14px 14px 0 0;color:#fff;font-size:22px;font-weight:700;padding-top:8px;box-shadow:inset 0 4px 0 rgba(255,255,255,.35)}
.podium .p1 em{height:92px;background:linear-gradient(180deg,#ffd84a,#f09a00)}.podium .p2 em{height:66px;background:linear-gradient(180deg,#d5dbe6,#98a2b5)}.podium .p3 em{height:48px;background:linear-gradient(180deg,#f0a878,#c16a34)}
.podium .p2{animation-delay:.15s}.podium .p3{animation-delay:.3s}
@keyframes growup{from{transform:scaleY(.1);opacity:0}}
.tbar{height:30px;background:rgba(8,4,40,.08);box-shadow:inset 0 2px 4px rgba(8,4,40,.15)}.tbar b{box-shadow:inset 0 3px 0 rgba(255,255,255,.4);transition:width .8s cubic-bezier(.2,.9,.3,1)}.tbar span{padding:4px 10px}
.sheet{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s}.sheet>div{animation:up .3s cubic-bezier(.2,.9,.3,1.1)}
@keyframes fade{from{opacity:0}}@keyframes up{from{transform:translateY(100%)}}
.toast{background:linear-gradient(180deg,#2a2350,#120b33);border:1px solid rgba(255,255,255,.2);animation:rise .25s}
#cv{border:6px solid #fff;box-shadow:0 10px 0 rgba(8,4,40,.35),0 22px 36px rgba(8,4,40,.35)}
/* bingo */
.ball{width:120px;height:120px;border-radius:50%;margin:4px auto;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,#fff 0 10%,var(--bc) 42%,#000 160%);box-shadow:0 12px 18px rgba(8,4,40,.45),inset 0 -10px 18px rgba(0,0,0,.35);animation:drop .7s cubic-bezier(.3,1.5,.5,1) both}
.ball b{width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:30px;line-height:1;box-shadow:inset 0 0 0 3px var(--bc)}
.ball b small{display:block;font-size:13px;color:var(--bc)}
@keyframes drop{from{transform:translateY(-140px) rotate(-200deg);opacity:0}}
.balls{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.balls span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.8),var(--bc) 55%);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.bcard{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;background:linear-gradient(160deg,#6a3df0,#e0358f);padding:9px;border-radius:20px;box-shadow:0 10px 0 rgba(8,4,40,.4),0 22px 36px rgba(8,4,40,.4)}
.bcard u{text-decoration:none;text-align:center;color:#fff;font-weight:700;font-size:24px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.bcard button{aspect-ratio:1;border:0;border-radius:12px;background:linear-gradient(180deg,#fff,#efeaff);font-weight:700;font-size:21px;box-shadow:0 3px 0 rgba(8,4,40,.3);position:relative;padding:0}
.bcard button.m{background:radial-gradient(circle at 35% 30%,#ffe27a,#ff9d2e 70%);color:#4a2500;animation:stamp .3s cubic-bezier(.3,1.6,.5,1)}
.bcard button.w{box-shadow:0 0 0 3px #fff,0 0 16px #fff}
@keyframes stamp{from{transform:scale(1.5) rotate(-12deg)}}
/* gatito (ahorcado) */
.kb{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:10px}
.kb button{border:0;border-radius:10px;padding:0;height:44px;font-weight:700;font-size:19px;background:linear-gradient(180deg,#fff,#e6e0ff);box-shadow:0 4px 0 #b9aeea}
.kb button.y{background:linear-gradient(180deg,#b9f1cd,#5fd38d);box-shadow:0 4px 0 #2a9b5c;color:#0c4a26}
.kb button.n{background:#d9d5e6;box-shadow:none;color:#a39cc0;transform:translateY(3px)}
.kb button:disabled{opacity:1}
.sky{border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#7fd0ff,#d9f3ff 70%,#8fe3a0 70%,#5cc978);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.sky svg{display:block;width:100%;height:auto}
.sky .bl{transition:transform .5s,opacity .3s;transform-origin:center;transform-box:fill-box}.sky .bl.pop{transform:scale(1.8);opacity:0}
.sky .cat{transition:transform 1s cubic-bezier(.5,0,.9,.6)}
.sky .sway{animation:sway 3s ease-in-out infinite;transform-origin:150px 0}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* Cuatro en línea */
.c4{display:grid;grid-template-columns:repeat(var(--w),1fr);gap:5px;padding:12px;margin:12px 0;border-radius:22px;background:linear-gradient(160deg,#3f6bff,#1b2fae);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -8px 0 rgba(0,0,0,.25),0 14px 30px rgba(10,10,60,.5)}
.c4 button{aspect-ratio:1;border:0;padding:0;border-radius:50%;background:radial-gradient(circle at 50% 40%,#120a3a,#0b0626);box-shadow:inset 0 4px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.25);position:relative;overflow:visible}
.c4.my button{cursor:pointer}
.c4 i{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0,color-mix(in srgb,var(--dc) 60%,#fff) 14%,var(--dc) 48%,color-mix(in srgb,var(--dc) 70%,#000) 100%);box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.18)}
.c4 i.new{animation:c4drop .5s cubic-bezier(.3,.0,.6,1)}
.c4 i.w{animation:c4win .7s ease-in-out infinite alternate;z-index:2}
@keyframes c4drop{0%{transform:translateY(var(--dy))}70%{transform:translateY(0)}82%{transform:translateY(-12%)}100%{transform:translateY(0)}}
@keyframes c4win{from{transform:scale(1);box-shadow:0 0 0 3px #fff,0 0 14px #fff}to{transform:scale(1.12);box-shadow:0 0 0 4px #fff,0 0 26px var(--dc)}}
.chip .dot{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:6px;vertical-align:-2px;box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)}
.sky.gal .gp{transition:opacity .5s}
.sky.gal .gp:not([style]){animation:pop .45s}