[hidden]{display:none!important}
:root{
  --bg:#1c1030; --bg2:#2a1a45; --ink:#fff6e0; --muted:#bfa9e6; --line:rgba(191,169,230,.35);
  --panel:rgba(255,255,255,.06);
  --ticket:#ffd23f; --ticket-ink:#3a1150; --red:#e8336b; --mint:#3ee0a8;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;min-height:100%;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
  background:radial-gradient(120% 70% at 50% 0%,var(--bg2),var(--bg) 70%) fixed,var(--bg);
}
main{max-width:460px;margin:0 auto;padding:20px 16px 48px}
h1.logo{
  font-family:"Bungee","Impact",sans-serif;font-weight:400;font-size:clamp(2.2rem,11vw,3.2rem);line-height:.95;
  margin:0;color:var(--ticket);text-shadow:3px 3px 0 var(--red),6px 6px 0 rgba(0,0,0,.25);transform:rotate(-2deg);text-align:center
}
.sub{margin:10px 0 18px;color:var(--muted);text-align:center}
button{font-family:inherit}
.btn{
  font:900 1rem "Nunito",sans-serif;padding:13px 14px;border-radius:12px;cursor:pointer;border:0;
  background:var(--red);color:#fff;box-shadow:0 4px 0 #9e1f47;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px
}
.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--muted);box-shadow:none}
.btn.wa{background:#1fae5b;box-shadow:0 4px 0 #11713a}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.45;cursor:default}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* Carga */
#loader{position:fixed;inset:0;display:grid;place-items:center;z-index:20;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 45%,#4b2a86,var(--bg) 75%),var(--bg);transition:opacity .5s,transform .5s}
#loader.fuera{opacity:0;transform:scale(1.08);pointer-events:none}
.rays{position:absolute;left:50%;top:45%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.13) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 12%,transparent 45%);mask:radial-gradient(circle,#000 0,#000 12%,transparent 45%);
  animation:girar 26s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.flotan{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55}
.flotan .f{position:absolute;bottom:-90px;width:58px;height:58px;display:grid;place-items:center;font-size:2.6rem;opacity:.85;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:sube linear infinite}
.flotan .f .fig{width:100%;animation:none}
@keyframes sube{0%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-55vh) translateX(18px) rotate(10deg)}100%{transform:translateY(-115vh) rotate(-8deg)}}
.ld{position:relative;z-index:2;width:min(320px,84vw);text-align:center}
.ld-logo{font:400 clamp(2.6rem,13vw,3.6rem)/.92 "Bungee","Impact",sans-serif;color:var(--ticket);
  text-shadow:3px 3px 0 var(--red),6px 6px 0 rgba(0,0,0,.35);animation:entraLogo .8s cubic-bezier(.2,1.6,.4,1) both,latido 1.6s .8s ease-in-out infinite}
@keyframes entraLogo{from{transform:scale(.2) rotate(-12deg);opacity:0}}
@keyframes latido{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(1deg) scale(1.05)}}
.moneda{position:relative;width:96px;height:96px;margin:22px auto 18px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  font:400 2.6rem "Bungee",sans-serif;color:#8a5a00;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd23f 45%,#d99a00);
  box-shadow:inset 0 0 0 6px #e7ad12,0 0 0 6px rgba(255,210,63,.18),0 0 40px rgba(255,210,63,.55);
  animation:gira 1.4s linear infinite,brillo 1.4s ease-in-out infinite alternate}
.moneda::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);animation:destello 1.4s linear infinite}
@keyframes gira{to{transform:rotateY(360deg)}}
@keyframes brillo{to{box-shadow:inset 0 0 0 6px #e7ad12,0 0 0 12px rgba(255,210,63,.1),0 0 70px rgba(255,210,63,.8)}}
@keyframes destello{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
.barra{height:16px;border-radius:99px;background:rgba(0,0,0,.35);border:2px solid rgba(255,210,63,.45);margin:6px 0 8px;overflow:hidden}
.barra i{display:block;height:100%;width:0;border-radius:inherit;
  background:repeating-linear-gradient(45deg,var(--ticket) 0 12px,#ffb703 12px 24px);background-size:34px 34px;animation:rayas .6s linear infinite;
  box-shadow:0 0 14px rgba(255,210,63,.7)}
@keyframes rayas{to{background-position:34px 0}}
.pct{font:400 1.5rem "Bungee",sans-serif;color:#fff}
.tip{color:var(--muted);font-size:.95rem;font-weight:700;min-height:2.6em;margin-top:4px;transition:opacity .25s}

/* Cartón */
.tabs{display:flex;gap:8px;justify-content:center;margin:0 0 16px;flex-wrap:wrap}
.tab{font:700 .9rem "Nunito",sans-serif;border:2px solid var(--muted);background:transparent;color:var(--ink);
  padding:7px 14px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px}
.tab[aria-selected="true"]{background:var(--ticket);color:var(--ticket-ink);border-color:var(--ticket)}
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.tab.won .dot{background:var(--mint)} .tab.lost .dot{background:var(--red)}
.ticket{position:relative;background:var(--ticket);color:var(--ticket-ink);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow);--n:14px;
  -webkit-mask:radial-gradient(circle var(--n) at 0 70%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 70%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--n) at 0 70%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% 70%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.12;background:repeating-linear-gradient(45deg,var(--red) 0 2px,transparent 2px 12px)}
.ticket.entra{animation:entra .45s cubic-bezier(.2,.8,.3,1.2)}
@keyframes entra{from{transform:translateY(16px) rotate(-1.5deg);opacity:0}}
.t-head{position:relative;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.t-head strong{font:400 1.25rem "Bungee",sans-serif;color:var(--red)}
.t-head span{font-weight:900;font-size:.8rem;opacity:.8}
.rule{position:relative;font-size:.85rem;font-weight:700;margin:0 0 10px}
.board{position:relative;border-radius:16px;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 3px var(--ticket-ink);
  background:radial-gradient(circle at 20% 15%,rgba(255,210,63,.55) 0 8%,transparent 9%),radial-gradient(circle at 85% 80%,rgba(62,224,168,.5) 0 10%,transparent 11%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 6px,transparent 6px 14px),linear-gradient(160deg,#8a5cf6,#5b2bb5 55%,#3a1a7a)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px}
.cell{aspect-ratio:1/1.12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;
  background:#fff;border-radius:12px;box-shadow:0 3px 0 rgba(58,17,80,.35),inset 0 0 0 1px rgba(58,17,80,.08);color:#1d1233}
.cell.hit{background:#dcfff1;box-shadow:0 0 0 3px var(--mint),0 3px 0 rgba(58,17,80,.35);animation:pop .5s ease both}
.fig{width:54%;display:block;height:auto;aspect-ratio:1;object-fit:contain;user-select:none;-webkit-user-drag:none;animation:flota 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.fig.emo{width:auto;aspect-ratio:auto;font-size:clamp(1.8rem,9vw,2.6rem);line-height:1}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.cell.hit .fig{animation:salta .5s ease-in-out infinite alternate}
@keyframes salta{to{transform:scale(1.2) translateY(-4px)}}
.fig.nand{animation:girar 9s linear infinite}
.fig.nand svg{width:100%;height:100%;display:block}
.pz{font:900 clamp(.58rem,2.6vw,.72rem)/1.2 "Nunito",sans-serif;text-transform:uppercase;white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis}
.nm{font:800 clamp(.56rem,2.5vw,.7rem)/1.2 "Nunito",sans-serif;color:#5a2a78;white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis}
.cell.mayor .pz{color:var(--red)}
.precio{position:relative;display:inline-block;background:var(--red);color:#fff;font:900 .85rem "Nunito",sans-serif;padding:3px 10px;border-radius:99px;transform:rotate(2deg);box-shadow:0 2px 0 #9e1f47}
@keyframes pop{50%{transform:scale(1.2)}}
.board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .5s}
.board canvas.gone{opacity:0;pointer-events:none}
.perf{position:relative;border-top:3px dotted var(--ticket-ink);margin:18px -18px 12px;opacity:.5}
.result{position:relative;text-align:center;min-height:70px}
.result .big{font:400 1.45rem/1.1 "Bungee",sans-serif}
.result.win .big{color:#0b7a55} .result.lose .big{color:var(--red)}
.result small{display:block;font-weight:700;margin-top:4px}
.code{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:6px;background:var(--ticket-ink);color:var(--ticket);font-weight:900;letter-spacing:.08em}
details.tabla{position:relative;margin-top:12px;font-size:.85rem;font-weight:700}
details.tabla summary{cursor:pointer}
.premios{display:grid;grid-template-columns:1fr;gap:4px 12px;margin-top:8px}
.premios div{display:flex;gap:8px;align-items:center}
.premios .fig{width:30px;height:30px;flex:none}
.premios .fig.emo{font-size:1.4rem}
.premios b{margin-left:auto;font-weight:900}
.actions{display:flex;gap:10px;margin-top:16px}
.actions .btn{flex:1}
.resumen{margin-top:22px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.resumen h2{font:400 1.1rem "Bungee",sans-serif;margin:0 0 8px;color:var(--ticket)}
.resumen ul{list-style:none;padding:0;margin:0 0 12px}
.resumen li{padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.resumen li b{white-space:nowrap}
.resumen .btn{width:100%}
.foot{text-align:center;color:var(--muted);font-size:.8rem;margin-top:18px}
.aviso{text-align:center;padding:40px 10px}
.aviso p{color:var(--muted)}
.confetti{position:fixed;top:-20px;width:10px;height:14px;pointer-events:none;z-index:30;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.moneda,.moneda::after,.cell.hit,.ticket.entra,.fig,.rays,.ld-logo,.barra i{animation:none!important}.confetti,.flotan{display:none}}

/* Cartel de premio */
.cartel{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(10,4,20,.72);backdrop-filter:blur(3px)}
.cartel[hidden]{display:none}
.cartel-box{position:relative;width:min(340px,92vw);text-align:center;padding:26px 20px 20px;border-radius:22px;overflow:hidden;color:var(--ticket-ink);
  background:linear-gradient(170deg,#fff3b0,var(--ticket) 45%,#ffb703);border:4px solid #fff;box-shadow:0 0 0 4px var(--red),0 20px 60px rgba(0,0,0,.6);
  animation:cartelIn .6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cartelIn{from{transform:scale(.3) rotate(-8deg);opacity:0}}
.cartel-box .rayos{position:absolute;left:50%;top:30%;width:600px;height:600px;margin:-300px 0 0 -300px;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg);animation:girar 14s linear infinite}
.cartel-box>*{position:relative}
.c-fig{width:96px;height:96px;margin:0 auto 4px;display:grid;place-items:center}
.c-fig .fig{width:100%;height:100%;animation:salta .5s ease-in-out infinite alternate}
.c-fig .fig.emo{font-size:4rem;width:auto;height:auto}
.c-tit{font:400 1.5rem "Bungee",sans-serif;color:var(--red);letter-spacing:.02em}
.c-monto{font:400 clamp(1.9rem,10vw,2.6rem)/1.05 "Bungee",sans-serif;color:#1d1233;margin:6px 0 4px;text-shadow:2px 2px 0 #fff}
.c-sub{font-weight:800;font-size:.95rem}
.cartel-box .code{margin:10px 0 14px}
.cartel-box .btn{width:100%}
@media (prefers-reduced-motion:reduce){.cartel-box,.cartel-box .rayos,.c-fig .fig{animation:none}}

.sonido-btn{position:fixed;z-index:15;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);
  background:rgba(28,16,48,.85);font-size:1.2rem;cursor:pointer;backdrop-filter:blur(6px)}
.sonido-btn[hidden]{display:none}
.vence{display:block;margin-top:6px;font-weight:800;font-size:.8rem;opacity:.85}
.mini-share{margin-top:10px;padding:9px 14px;font-size:.9rem;color:var(--ticket-ink);border-color:var(--ticket-ink)}
.c-vence{font-weight:800;font-size:.85rem;margin:-6px 0 12px}
.c-vence:empty{display:none}
.cartel-box .c-share{margin-top:8px;color:var(--ticket-ink);border-color:var(--ticket-ink)}

.tabs.muchos{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.tabs.muchos .tab{flex:none;scroll-snap-align:center}
.progreso{text-align:center;font-weight:800;font-size:.85rem;color:var(--muted);margin:-6px 0 8px}
.progreso:empty{display:none}

/* Pozo acumulado */
.pozo{position:relative;overflow:hidden;text-align:center;margin:0 0 18px;padding:16px 14px 14px;border-radius:20px;color:#2a1340;
  background:linear-gradient(160deg,#fff3b0,var(--ticket) 40%,#ffb703 75%,#ff8a00);border:3px solid #fff;
  box-shadow:0 0 0 3px var(--red),0 0 34px rgba(255,183,3,.55);animation:pozoLuz 2.4s ease-in-out infinite alternate}
@keyframes pozoLuz{to{box-shadow:0 0 0 3px var(--red),0 0 60px rgba(255,183,3,.9)}}
.pozo::before{content:"";position:absolute;left:50%;top:50%;width:700px;height:700px;margin:-350px 0 0 -350px;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 8deg,transparent 8deg 16deg);animation:girar 18s linear infinite}
.pozo-brillo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-100%);animation:barrido 3.2s ease-in-out infinite}
@keyframes barrido{60%,100%{transform:translateX(100%)}}
.pozo>*{position:relative}
.pozo-tit{display:block;font:400 1rem "Bungee",sans-serif;color:var(--red);letter-spacing:.04em}
.pozo-monto{display:block;font:400 clamp(2rem,11vw,2.9rem)/1.05 "Bungee",sans-serif;color:#1d1233;margin:6px 0 2px;text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(232,51,107,.35);font-variant-numeric:tabular-nums}
.pozo-sub{display:block;font-weight:900;font-size:.85rem;opacity:.8}
.pozo-mayor{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:6px 10px;border-radius:99px;background:rgba(42,19,64,.9);color:#fff;font-weight:800;font-size:.82rem}
.pozo-mayor:empty{display:none}
.pozo-mayor .fig{width:28px;height:28px;animation:salta .6s ease-in-out infinite alternate}
.pozo-mayor .fig.emo{font-size:1.3rem;width:auto;height:auto}
.pozo-mayor b{color:var(--ticket)}
@media (prefers-reduced-motion:reduce){.pozo,.pozo::before,.pozo-brillo,.pozo-mayor .fig{animation:none}}

.seguro{display:block;margin:10px auto 0;max-width:330px;font-weight:700;font-size:.74rem;line-height:1.35;opacity:.8}

.no-soy{text-align:center;color:var(--muted);font-size:.78rem;font-weight:700;margin:-10px 0 16px;opacity:.85}

.confirma{margin:12px auto 0;max-width:340px;padding:12px;border-radius:12px;background:rgba(58,17,80,.08);border:2px dashed var(--ticket-ink);font-weight:800;font-size:.9rem}
.confirma b{display:block;margin-bottom:4px}
.confirma.ok{border-style:solid;border-color:#0b7a55;color:#0b7a55}
.confirma.mal{border-style:solid;border-color:var(--red);color:var(--red)}
.confirma-bt{display:flex;gap:8px;margin-top:10px}
.confirma-bt .btn{flex:1;padding:10px;font-size:.9rem}
.confirma-bt .btn.alt{color:var(--ticket-ink);border-color:var(--ticket-ink)}
.foot a{color:var(--ticket)}