/* /sorteo: sorteo «último en pie» con farolillos o gotas dibujados por código (js/sorteo.js). */
.sx-page [hidden]{display:none!important}
.sx-page main *,.sx-page main *::before{box-sizing:border-box}
.sx-main{padding-top:1.2rem;padding-bottom:3rem}
.sx-hero{padding:1.4rem 0 1rem;max-width:760px;margin:0 auto}
.sx-hero h1{font-family:'Unbounded',sans-serif;font-size:clamp(1.8rem,5vw,3rem);line-height:1.1;margin:.4rem 0 .6rem}
.sx-hero .lead{font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.5;margin:0}
.sx-defs{position:absolute;width:0;height:0;overflow:hidden}
.sx-page main button{min-height:44px;padding:.55rem 1rem;font:700 .9rem 'Instrument Sans',sans-serif;cursor:pointer}

/* Preparar la lista */
.sx-card{max-width:760px;margin:0 auto;padding:1.2rem;border:2px solid #ffd58355;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#99449655,transparent 60%),var(--surface);display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;box-shadow:inset 0 1px 0 #ffffff14,0 5px 0 #1a0d2c55}
.sx-label{font:700 1.05rem 'Unbounded',sans-serif;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.sx-label small{font:500 .8rem 'Instrument Sans',sans-serif;color:var(--muted)}
.sx-card textarea{width:100%;min-height:190px;padding:.85rem 1rem;border-radius:16px;font:500 .95rem/1.55 'JetBrains Mono',monospace;resize:vertical}
.sx-msg{margin:0;padding:.55rem .8rem;border-radius:12px;background:#ffd5831f;border:1px solid #ffd58366;color:var(--gold);font-size:.88rem}
.sx-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.sx-count{font:700 .9rem 'Unbounded',sans-serif;color:var(--gold)}
.sx-mini{display:flex;gap:.5rem;flex-wrap:wrap}
.sx-opts{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sx-opts legend{padding:0;margin-bottom:.4rem;font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sx-chip{position:relative}
.sx-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sx-chip span{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .9rem;border-radius:14px;border:2px solid #d9b8f550;background:#ffffff0a;font-weight:700;cursor:pointer}
.sx-chip small{font-weight:500;color:var(--muted);font-size:.78rem}
.sx-chip input:checked+span{border-color:var(--gold);background:#ffd5831f;color:var(--gold)}
.sx-chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.sx-chip i{display:inline-block;width:18px;height:25px}
.sx-chip i .sx-svg{width:100%;height:100%;overflow:visible}
.sx-page main .sx-start{width:100%;min-height:58px;font:700 1.05rem 'Unbounded',sans-serif}
.sx-how{margin:0;padding:.75rem .9rem;border-radius:12px;border-left:3px solid var(--gold);background:#ffffff0a;font-size:.86rem;line-height:1.5;color:#e4d8ef}
.sx-how code{font-size:.8rem;overflow-wrap:anywhere}
.sx-tip{margin:0;font-size:.8rem;line-height:1.45;color:var(--muted);flex:1 1 200px}

/* Sorteo en marcha */
.sx-game{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.sx-page main>.sx-game{scroll-margin-top:0}
.sx-bar{position:sticky;top:78px;z-index:5;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.2rem .9rem;padding:.6rem .9rem;border-radius:16px;background:#1f1433;border:2px solid var(--edge);box-shadow:0 6px 18px #0006}
.sx-left{font:700 .95rem 'Unbounded',sans-serif;white-space:nowrap}
.sx-left b{color:var(--gold);font-size:1.3rem}
.sx-now{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#e4d8ef}
.sx-now b{color:#fff}
.sx-arena{--w:84px;--sz:62px;--fs:.8rem;list-style:none;margin:0;padding:1rem .6rem 1.1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--w),1fr));gap:.25rem .3rem;border-radius:24px;border:2px solid #2a1240;box-shadow:inset 0 0 60px #0008,0 6px 0 #12061f;overflow:hidden}
.sx-arena.farol{background:radial-gradient(circle at 20% 30%,#fff6d840 0 1px,transparent 2px) 0 0/53px 47px,radial-gradient(circle at 70% 60%,#fff6d82e 0 1px,transparent 2px) 0 0/71px 61px,linear-gradient(180deg,#120a2a,#2a1747 65%,#3a1f58)}
.sx-arena.gotas{background:radial-gradient(circle at 30% 40%,#bff3ff26 0 2px,transparent 3px) 0 0/61px 73px,radial-gradient(circle at 70% 70%,#bff3ff1a 0 1px,transparent 2px) 0 0/43px 51px,linear-gradient(180deg,#0e1a38,#123a5a 70%,#17576a)}
.sx-arena.n-xl{--w:96px;--sz:84px;--fs:.95rem}
.sx-arena.n-m{--w:62px;--sz:42px;--fs:.68rem}
.sx-arena.n-s{--w:46px;--sz:28px;--fs:.56rem}
.sx-it{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;padding-bottom:.3rem}
.farol .sx-it::before{content:"";position:absolute;top:0;left:-.2rem;right:-.2rem;height:1.5px;background:#d9c3ff55}
.sx-it .sx-svg{width:var(--sz);height:calc(var(--sz)*1.4);overflow:visible;transform-origin:50% 0;animation:sx-sw 3.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.gotas .sx-it .sx-svg{animation-name:sx-bob;transform-origin:50% 50%}
.sx-it span{max-width:100%;margin-top:.15rem;padding:.08rem .4rem;border-radius:7px;background:#1a0f2ccc;color:#fff;font:600 var(--fs)/1.3 'Instrument Sans',sans-serif;overflow:hidden;overflow-wrap:anywhere;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* nombres largos de X: hasta 2 líneas */

/* Piezas del dibujo */
.sx-svg .cd{stroke:#d9c3ff99;stroke-width:1.2}
.sx-svg .cap{fill:#3a2650;stroke:#ffffff40;stroke-width:.6}
.sx-svg .bd{stroke:#2a1640;stroke-width:1.4;transition:fill .5s,transform .6s;transform-box:fill-box;transform-origin:50% 100%}
.sx-svg .rb{fill:none;stroke:#ffffffa8;stroke-width:.9}
.sx-svg .fl{fill:#fff3c4;animation:sx-fl 1.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.sx-svg .hl{fill:#fff;opacity:.75}
.sx-svg .ts{stroke-width:1.6;stroke-linecap:round}
.sx-svg .gl{transition:opacity .5s;transform-box:fill-box;transform-origin:center}
.sx-svg .hu{fill:none;stroke:#e6d6ff;stroke-width:1.3;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
.gotas .sx-svg .hu{stroke:#9fe8ff}
.out .sx-svg{opacity:.6}
.out .gl,.out .fl{opacity:0;animation:none}
.out .bd{fill:#4a3a63}
.out .rb{stroke:#ffffff2a}
.out .ts{stroke:#4a3a63}
.out .hu{animation:sx-humo 1.3s ease-out}
.gotas .out .sx-svg{animation:none}
.gotas .out .bd{fill:#2c4766;transform:translateY(4px) scale(.8)}
.gotas .out .hl{opacity:.15}
.gotas .out .hu{animation-name:sx-onda}
.out span{background:#1a0f2c80;color:#a99bc4}
.win{z-index:2}
.win .gl,.sx-win .gl{animation:sx-pulse 1.6s ease-in-out infinite alternate}
.win span{background:var(--gold);color:#2d1743;font-weight:700}
@keyframes sx-sw{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes sx-bob{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@keyframes sx-fl{from{opacity:.7}to{opacity:1}}
@keyframes sx-humo{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(-9px)}}
@keyframes sx-onda{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes sx-pulse{from{transform:scale(1.3)}to{transform:scale(1.7)}}

/* Resultado */
.sx-result{padding:1.1rem;border-radius:22px;border:2px solid #ffd58388;background:linear-gradient(135deg,#7a3fd0cc,#b8459acc);display:grid;gap:.8rem;scroll-margin-top:60px}
.sx-win{display:flex;align-items:center;gap:1.1rem;min-width:0}
.sx-win>div{min-width:0}
.sx-win .sx-svg{flex:none;width:64px;height:90px;overflow:visible}
.sx-win small{display:block;font:700 .68rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sx-win strong{display:block;font:700 clamp(1.5rem,6vw,2.4rem)/1.15 'Unbounded',sans-serif;color:#fff;overflow-wrap:anywhere}
.sx-win span{color:#f3e6ff;font-size:.88rem}
.sx-result .sx-tip{color:#f3e6ff}
.sx-result h3{margin:0;font:700 1rem 'Unbounded',sans-serif}
.sx-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.sx-rank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.35rem;max-height:360px;overflow:auto}
.sx-rank li{display:flex;gap:.5rem;align-items:center;min-width:0;padding:.4rem .6rem;border-radius:10px;background:#1a0f2c99;font-size:.88rem}
.sx-rank li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-rank b{min-width:2.3rem;color:var(--gold);font-family:'JetBrains Mono',monospace}
.sx-rank li.top{background:#ffd58333;font-weight:700}
.sx-h2{margin:.6rem 0 0;font:700 clamp(1.05rem,3vw,1.3rem) 'Unbounded',sans-serif}
.sx-log{list-style:none;margin:0;padding:.8rem 1rem;max-height:240px;overflow:auto;border-radius:16px;background:var(--surface);border:2px solid var(--edge);display:grid;gap:.3rem;font-size:.86rem;color:#e4d8ef}
.sx-log li:first-child{color:var(--gold)}
.sx-log b{color:#fff}
.sx-game:fullscreen{max-width:none;padding:1rem;overflow:auto;align-content:start;background:#1a0f2c}
.sx-game:fullscreen .sx-bar{top:0}

/* Mientras se sortea, fuera el aviso del Pozo (js/cuenta-hud.js): tapaba la arena y al ganador en el móvil. */
.sx-page:has(.sx-game:not([hidden])) .cdx-toast{display:none}

/* Preguntas y nota */
.sx-faq{max-width:760px;margin:2rem auto 0;display:grid;gap:.5rem}
.sx-faq details{padding:.1rem .9rem;border:2px solid var(--edge);border-radius:14px;background:var(--surface)}
.sx-faq summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.sx-faq p{margin:.1rem 0 .8rem;font-size:.92rem;line-height:1.5;color:#e4d8ef}
.sx-note{max-width:760px;margin:2rem auto 0;padding-top:1rem;border-top:1px solid #ffffff1a;font-size:.85rem;color:var(--muted)}

@media(min-width:900px){.sx-arena.n-xl{--w:120px;--sz:96px;--fs:1rem}.sx-arena.n-m{--w:84px;--sz:52px;--fs:.74rem}.sx-arena.n-s{--w:62px;--sz:36px;--fs:.64rem}}
@media(max-width:560px){.sx-card{padding:1rem;border-radius:20px}.sx-win .sx-svg{width:50px;height:70px}.sx-bar{top:70px}.sx-tools{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.sx-page main .sx-tools button{padding:.4rem .5rem;font-size:.82rem;line-height:1.15}}
@media(prefers-reduced-motion:reduce){.sx-page .sx-svg,.sx-page .sx-svg *{animation:none!important;transition:none!important}}