:root{
  --bg:#150425; --bg2:#20083c; --panel:#26103f; --card:#2c1450; --card2:#331861; --line:#48237e;
  --gold:#ffcf4d; --gold2:#e89400; --text:#fff; --muted:#b9a6d8; --pink:#ff4fd8;
  --r:14px; --shadow:0 10px 30px #0006;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:Poppins,system-ui,sans-serif;color:var(--text);
  background:radial-gradient(1100px 560px at 50% -60px,#3a1266 0,var(--bg) 62%) fixed,var(--bg);min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:#5a2f96;border-radius:99px}

/* ---------- Header ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:12px 28px;background:#1b0733e6;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.logo svg{filter:drop-shadow(0 2px 8px #ff8a0055)}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text b{font-family:Cinzel,serif;font-size:19px;background:linear-gradient(#fff3b0,#ffb300);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:1px}
.logo-text small{font-size:10px;letter-spacing:4px;color:var(--muted)}
.mainnav{display:flex;gap:8px;margin:0 auto}
.navbtn{display:flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;border:1px solid transparent;
  background:#ffffff10;font-weight:700;font-size:15px;color:#eadcff;transition:.15s}
.navbtn:hover{background:#ffffff1c}
.navbtn.active{background:linear-gradient(#4a1a84,#33105c);border-color:var(--gold);color:#fff;box-shadow:0 0 0 1px #ffcf4d55,0 6px 18px #0005}
.navbtn .ico{font-size:17px}
.navbtn em{font-style:normal;font-size:9px;background:var(--gold);color:#3a1a00;padding:1px 6px;border-radius:6px;margin-left:2px}
.account{display:flex;align-items:center;gap:10px}
.guest{display:flex;gap:8px}
.pill{padding:9px 16px;border-radius:999px;background:#ffffff12;border:1px solid var(--line);font-weight:700;font-size:14px;white-space:nowrap;transition:.15s}
.pill:hover{background:#ffffff1e}
.lang{padding:9px 11px;border-radius:12px;background:#ffffff12;border:1px solid var(--line);font-weight:700}
.btn{padding:10px 18px;border-radius:12px;border:1px solid var(--line);font-weight:700;background:#ffffff12}
.btn.gold{background:linear-gradient(#ffe27a,#e89400);color:#3a1a00;border:0;box-shadow:0 4px 14px #e8940055}
.btn.gold:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.full{width:100%;margin-top:8px}
.btn.primary{background:linear-gradient(#7c3aed,#5b21b6);border:0;color:#fff}

/* ---------- Banner interactivo ---------- */
.hero{position:relative;aspect-ratio:2172 / 724;max-width:1500px;max-height:470px;margin:16px auto 0;border-radius:18px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.35);perspective:1200px;user-select:none;touch-action:pan-y}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:0 8%;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s .9s;clip-path:circle(0% at var(--cx,80%) 50%)}
.slide.on{opacity:1;visibility:visible;transition:opacity .9s ease,clip-path 1.1s cubic-bezier(.7,0,.2,1);clip-path:circle(150% at var(--cx,80%) 50%);z-index:1}
.slide .bg{position:absolute;inset:-6%;background:var(--bg);transform:scale(1.15);transition:transform 7s ease-out}
.slide.on .bg{transform:scale(1)}
.slide .rays{position:absolute;right:-10%;top:50%;width:900px;height:900px;margin-top:-450px;opacity:.25;
  background:repeating-conic-gradient(from 0deg,#fff3 0 6deg,transparent 6deg 18deg);border-radius:50%;animation:spin 40s linear infinite;
  mask:radial-gradient(circle,#000 20%,transparent 65%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%)}
@keyframes spin{to{transform:rotate(360deg)}}
.slide .copy{position:relative;z-index:3;max-width:680px;transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--my,0) * -8px),0)}
.slide .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:3px;padding:6px 14px;border-radius:99px;background:#0006;border:1px solid #ffd36b88;color:#ffd36b;margin-bottom:14px}
.slide h1{font-family:Cinzel,serif;font-weight:900;font-size:clamp(38px,6.8vw,94px);line-height:1;margin:0;filter:drop-shadow(0 4px 0 #4a1c00) drop-shadow(0 0 24px #ff8a0066)}
.slide h1 .w{display:inline-block;opacity:0;transform:translateY(40px) rotateX(-70deg);transform-origin:bottom;
  background:linear-gradient(#fff7c7 0%,#ffcf40 45%,#b86300 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide.on h1 .w{animation:wIn .8s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(.35s + var(--i) * .09s)}
@keyframes wIn{to{opacity:1;transform:none}}
.slide p{font-family:Cinzel,serif;font-size:clamp(16px,2.4vw,32px);color:#ffd36b;letter-spacing:2px;margin:14px 0 0;text-shadow:0 2px 0 #4a1c00;opacity:0;transform:translateX(-30px)}
.slide.on p{animation:pIn .7s .8s forwards}
.slide .cta{margin-top:22px;opacity:0;transform:translateY(16px);padding:14px 30px;border-radius:99px;border:0;font-weight:800;font-size:16px;letter-spacing:.5px;
  background:linear-gradient(#ffe27a,#f59e0b);color:#3a1a00;box-shadow:0 6px 0 #92400e,0 10px 30px #f59e0b66;position:relative;overflow:hidden}
.slide .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff9 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.8s 2s infinite}
.slide.on .cta{animation:pIn .6s 1.05s forwards}
.slide .cta:hover{transform:translateY(-2px)}
@keyframes pIn{to{opacity:1;transform:none}}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.slide .art{position:absolute;right:6%;top:50%;z-index:3;font-size:clamp(120px,21vw,290px);line-height:1;
  transform:translate3d(calc(var(--mx,0) * 28px),calc(-50% + var(--my,0) * 20px),0) rotateY(calc(var(--mx,0) * 18deg)) rotateX(calc(var(--my,0) * -12deg));
  filter:drop-shadow(0 0 40px var(--glow,#ffae00aa));transition:transform .2s ease-out}
.slide .art span{display:block;animation:float 5s ease-in-out infinite}
.slide.on .art span{animation:pop .9s cubic-bezier(.2,1.4,.4,1) both,float 5s 1s ease-in-out infinite}
.slide .orbit{position:absolute;right:calc(6% + 8vw);top:50%;z-index:2;width:0;height:0}
.slide .orbit i{position:absolute;font-style:normal;font-size:clamp(22px,3vw,40px);animation:orbit 9s linear infinite;animation-delay:calc(var(--k) * -3s)}
@keyframes orbit{from{transform:rotate(0) translateX(clamp(110px,14vw,210px)) rotate(0)}to{transform:rotate(360deg) translateX(clamp(110px,14vw,210px)) rotate(-360deg)}}
@keyframes pop{from{transform:scale(.2) rotate(-25deg);opacity:0}}
@keyframes float{50%{transform:translateY(-14px) rotate(-3deg)}}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:68px;border-radius:12px;border:2px solid #c9a24a;background:#2c0b52aa;color:var(--gold);font-size:34px;z-index:5;backdrop-filter:blur(4px);transition:.2s}
.arrow:hover{background:#4a1a84;box-shadow:0 0 20px #ffc93c88}
.arrow.left{left:16px}.arrow.right{right:16px}
.dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.dots button{width:10px;height:10px;border-radius:99px;border:2px solid var(--gold);background:transparent;padding:0;transition:.3s}
.dots button.on{width:30px;background:var(--gold)}
.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#0006;z-index:5}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd966,#ff4fd8)}
.hero.paused .progress span{opacity:.4}

/* ---------- Banners de imagen ---------- */
.slide.imgslide{padding:0;display:block;cursor:pointer}
.slide .banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12)}
.slide.on .banner{animation:kenburns 8s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.slide.imgslide:hover{filter:brightness(1.05)}
@media(max-width:640px){.slide .banner{object-position:left center}}

/* ---------- Lobby ---------- */
.lobby{max-width:1500px;margin:0 auto;padding:18px clamp(14px,3vw,34px) 60px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.tabs{display:flex;gap:6px;background:#ffffff0d;padding:5px;border-radius:999px;border:1px solid var(--line)}
.tab{background:none;border:0;padding:9px 22px;font-weight:700;font-size:14.5px;border-radius:999px;color:var(--muted);transition:.15s}
.tab:hover{color:#fff}
.tab.active{background:linear-gradient(#ffe27a,#e89400);color:#3a1a00}
.filters{display:flex;gap:10px}
.search{display:flex;align-items:center;gap:6px;background:#ffffff10;border:1px solid var(--line);border-radius:999px;padding:0 14px;width:230px}
.search span{color:var(--muted)}
.search input{background:none;border:0;outline:0;padding:11px 0;width:100%}
.search input::placeholder{color:var(--muted)}
.provider{background:#ffffff10;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-weight:600;min-width:190px}
.catchip{margin:6px 2px 0;display:inline-flex;gap:8px;align-items:center;background:#ffffff12;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-weight:600;font-size:13px}
.catchip button{background:none;border:0;font-size:18px;line-height:1;color:var(--muted)}

/* Fila de proveedores */
.provrow{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.provrow::-webkit-scrollbar{display:none}
.pchip{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:8px 16px 8px 8px;border-radius:999px;
  background:#ffffff10;border:1px solid var(--line);color:#fff;transition:.15s}
.pchip:hover{background:#ffffff1e;border-color:var(--gold);transform:translateY(-1px)}
.pchip img,.pchip .pini{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#22083d;display:grid;place-items:center;font-weight:800;color:var(--gold)}
.pchip b{font-size:14px;font-weight:600}.pchip small{color:var(--muted);font-size:11px}
/* Proveedores destacados (orden manual desde el panel) */
.pchip.feat{position:relative;border-color:var(--gold);background:linear-gradient(180deg,#ffcf4d22,#ffcf4d08);box-shadow:0 0 0 1px #ffcf4d55,0 6px 16px #0006}
.pchip.feat b{color:#ffe6a0}
.feat-star{color:var(--gold);filter:drop-shadow(0 1px 3px #ffcf4d88)}
.pchip.feat .feat-star{position:absolute;top:-6px;left:-4px;font-size:14px;background:#180a34;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--gold)}
.rail.feat .rail-scroll{padding:8px;border-radius:18px;background:linear-gradient(180deg,#a06bff14,#a06bff05);border:1px solid #a06bff40}
.rail.feat .rail-head h3{color:#d9c2ff}

/* Carruseles */
.rails{display:flex;flex-direction:column;gap:26px;margin-top:10px}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding:0 2px}
.rail-head h3{margin:0;font-size:clamp(16px,2.2vw,20px);font-weight:800;letter-spacing:.2px}
.rail-more{background:none;border:0;color:var(--gold);font-weight:700;font-size:13px}
.rail-more:hover{text-decoration:underline}
.rail-wrap{position:relative}
.rail-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:smooth}
.rail-scroll::-webkit-scrollbar{display:none}
.rail-scroll.drag{cursor:grabbing;scroll-behavior:auto}
.rail-scroll.drag *{pointer-events:none}
@media(min-width:640px){.rail-scroll{grid-auto-columns:minmax(180px,190px)}}
.rail-scroll>.card{scroll-snap-align:start}
.rail-nav{position:absolute;top:calc(50% - 20px);transform:translateY(-50%);width:40px;height:56px;border-radius:12px;z-index:3;
  border:1px solid var(--line);background:#1b0733ee;color:var(--gold);font-size:26px;backdrop-filter:blur(4px);transition:.15s;display:none;
  box-shadow:0 6px 16px #0007}
@media(min-width:900px){.rail-nav{display:grid;place-items:center}}
.rail-nav.l{left:-8px}.rail-nav.r{right:-8px}
.rail-nav:hover{border-color:var(--gold);box-shadow:0 0 16px #ffcf4d88;background:#2a1150}
.rail-nav[disabled]{opacity:.25;pointer-events:none}

/* Riel destacado: Populares */
.rail.pop .rail-head h3{color:var(--gold)}
.rail.pop .rail-scroll{padding:8px;border-radius:18px;background:linear-gradient(180deg,#ffcf4d14,#ffcf4d05);border:1px solid #ffcf4d33}
.rail.pop .card{border:1px solid #ffcf4d55;box-shadow:0 6px 18px #0007}
.rail.pop .card:hover{box-shadow:0 12px 28px #0009,0 0 0 2px var(--gold)}
.rail.pop .card:first-child .thumb::after{content:"🔥 TOP";position:absolute;left:8px;top:8px;font-size:10px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(#ffe27a,#e89400);color:#3a1a00;padding:3px 8px;border-radius:99px;box-shadow:0 2px 6px #0007}

/* Grilla (búsqueda / filtros) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

/* Tarjeta */
.card{background:var(--card);border:1px solid #ffffff10;border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;transition:transform .16s,box-shadow .16s;animation:cardIn .4s both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0009,0 0 0 1px var(--gold)}
.card .thumb{position:relative;aspect-ratio:1/1;background:#22083d}
.card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card .meta{padding:9px 11px}
.card .name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .prov{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.card .fav{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:0;background:#1a0630b0;color:#fff;font-size:15px;display:grid;place-items:center;opacity:0;transition:.15s}
.card:hover .fav,.card .fav.on{opacity:1}.card .fav.on{color:var(--gold)}
.card .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#0000,#0007 60%,#000a);opacity:0;transition:.15s}
.card:hover .play{opacity:1}
.card .play span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:linear-gradient(#ffe27a,#e89400);color:#3a1a00;box-shadow:0 6px 18px #000a;transform:translateY(6px);transition:.15s}
.card:hover .play span{transform:none}
.empty{text-align:center;color:var(--muted);padding:60px 0}

.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px 20px 90px;border-top:1px solid #ffffff12}
@media(min-width:900px){.foot{padding-bottom:24px}}

/* ---------- Dialogs ---------- */
.dlg{border:1px solid var(--line);border-radius:16px;background:#2a0a4d;color:#fff;padding:28px;width:min(400px,92vw)}
.dlg::backdrop{background:#0009;backdrop-filter:blur(3px)}
.dlg h2{margin:0 0 16px;font-family:Cinzel,serif;color:var(--gold)}
.dlg label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.dlg input{display:block;width:100%;margin-top:4px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#1c0636}
.dlg .x{position:absolute;right:12px;top:8px;background:none;border:0;font-size:26px;color:#fff}
.err{color:#ff7b9c;min-height:1em;font-size:13px}
.swap{text-align:center;font-size:13px}.swap a{color:var(--gold)}
.dlg.game{width:min(1200px,96vw);height:min(760px,92vh);padding:0;display:none;flex-direction:column;border-radius:16px;overflow:hidden}
.dlg.game[open]{display:flex}
/* En celular, el juego ocupa TODA la pantalla (dvh = alto real sin barra del navegador).
   Forzamos position/inset/margin para anular los márgenes por defecto del <dialog>,
   que son los que hacían que el juego se viera "en ventana" en vez de pantalla completa. */
@media (max-width:760px){
  .dlg.game{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0;border:0}
}
/* Cuando el <dialog> entra en pantalla completa real */
.dlg.game:fullscreen{width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0;margin:0}
.dlg.game:-webkit-full-screen{width:100vw;height:100vh;margin:0}
/* Modo inmersivo por CSS (para iPhone/navegadores sin Fullscreen API): oculta la barra
   superior y el juego ocupa toda la pantalla. Un botón flotante permite salir. */
.dlg.game.immersive .gamebar{display:none}
.dlg.game .fs-float{display:none;position:fixed;top:10px;right:10px;z-index:40;width:42px;height:42px;border-radius:50%;background:#000a;color:#fff;border:1px solid #ffffff55;font-size:20px;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.dlg.game.immersive .fs-float{display:flex}
.gamebar{display:flex;gap:12px;align-items:center;padding:8px 46px 8px 14px;background:#1c0636;position:relative;flex:none}
.gamebar b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.gamebar span{margin-left:auto;color:var(--gold);font-weight:700}
.gamebar .x{top:2px}
.game iframe{flex:1;border:0;width:100%;height:100%;background:#000;display:block}
/* ---- Deportiva / en vivo embebida en la página (estilo Ganamos) ---- */
.sportswrap{display:flex;flex-direction:column;border:1.5px solid #7a44c8;border-radius:16px;overflow:hidden;background:#0d0420;margin-top:4px}
.sportsbar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:linear-gradient(90deg,#2b1358,#180a34);flex:none}
.sportsbar b{font-size:14px;letter-spacing:.3px}
.sportsbal{margin-left:auto;color:var(--gold);font-weight:700;font-size:13px}
.sportsfs{background:#ffffff14;border:1px solid #ffffff2e;color:#fff;width:34px;height:34px;border-radius:9px;font-size:16px;cursor:pointer}
.sportsfs:hover{background:#ffffff26}
.sportsframe{position:relative;width:100%;height:calc(100vh - 230px);min-height:560px;background:#000}
.sportsframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.sportsload{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px;z-index:1}
.sportswrap.fs{position:fixed;inset:0;z-index:60;margin:0;border:0;border-radius:0}
.sportswrap.fs .sportsframe{height:calc(100vh - 52px);min-height:0}
@media (max-width:900px){.sportsframe{height:calc(100dvh - 180px);min-height:0}}
.lobby.live-on .toolbar,.lobby.live-on .crosssell{display:none}
.txwrap{max-height:50vh;overflow:auto}
#txTable{width:100%;border-collapse:collapse;font-size:13px}
#txTable td,#txTable th{padding:6px 4px;border-bottom:1px solid #ffffff14;text-align:left}
#txTable .neg{color:#ff7b9c}#txTable .pos{color:#6dff9e}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#000d;padding:12px 20px;border-radius:12px;z-index:99}

/* ---------- Barra inferior (celular) ---------- */
.botnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:#1b0733f2;backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:6px 2px calc(6px + env(safe-area-inset-bottom));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.botnav button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--muted);font-size:9.5px;font-weight:600;padding:6px 1px;border-radius:12px;min-width:0;overflow:hidden}
.botnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.botnav button.bn-live.on{color:#ff5a7a}.botnav button.bn-live.on i{filter:drop-shadow(0 4px 8px #ff5a7a66)}
.botnav button i{font-size:20px;font-style:normal;line-height:1;transition:.15s}
.botnav button.on{color:#fff}
.botnav button.on i{transform:translateY(-2px);filter:drop-shadow(0 4px 8px #ffcf4d66)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .topbar{padding:10px 14px;gap:10px}
  .mainnav{display:none}
  .account{margin-left:auto}
  .botnav{display:grid}
  .hero{aspect-ratio:2172 / 724;height:auto;max-width:none;max-height:none;min-height:170px;margin:0;border-radius:0;box-shadow:none}
  .toolbar{gap:8px}
  .filters{flex:1}.search{flex:1;width:auto}.provider{display:none}
  .tabs{overflow:auto}
}
@media (max-width:560px){
  .hero{min-height:150px}.arrow{display:none}
  .guest .btn{padding:8px 12px;font-size:13px}
  .logo-text{display:none}
  .tab{padding:8px 16px;font-size:13px}
}

/* ---------- Cuenta / perfil ---------- */
.userbox{display:flex;align-items:center;gap:10px}
.pill{display:flex;align-items:center;gap:8px}
.pill .coin{font-size:16px}.pill .refresh{opacity:.6;transition:transform .5s}
.pill.spin .refresh{transform:rotate(360deg)}
.pill b.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.2);color:var(--gold)}}
.avatar-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);background:linear-gradient(135deg,#8b5cf6,#ec4899);font-weight:800;color:#fff;box-shadow:0 0 14px #ffc93c55}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#1f0838;border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;gap:14px;padding:20px;overflow:hidden;animation:dIn .3s ease}
@keyframes dIn{from{transform:translateX(100%)}}
.drawer-scrim{position:fixed;inset:0;background:#0008;z-index:55;backdrop-filter:blur(2px)}
.drawer-head{display:flex;align-items:center;gap:14px}
.drawer-head h3{margin:0;font-size:20px}.drawer-head small{color:var(--muted)}
.drawer-head .x{margin-left:auto;background:none;border:0;font-size:28px;color:#fff}
.big-avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:3px solid var(--gold)}
.balance-card{background:linear-gradient(135deg,#6d28d9,#3b0764 60%,#1e0536);border:1px solid #a78bfa55;border-radius:18px;padding:18px;position:relative;overflow:hidden}
.balance-card::after{content:"💎";position:absolute;right:-10px;top:-14px;font-size:110px;opacity:.12}
.balance-card small{color:#ddd6fe;font-size:12px}
.balance-card>b{display:inline-block;font-size:34px;margin:4px 8px 0 0;font-variant-numeric:tabular-nums}
.balance-card>span{color:var(--gold);font-weight:700}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mini-stats div{background:#0003;border-radius:12px;padding:10px}.mini-stats b{display:block;font-size:16px}
.ptabs{display:flex;gap:6px;background:#0003;padding:4px;border-radius:12px}
.ptabs button{flex:1;background:none;border:0;padding:9px 4px;border-radius:9px;font-size:12px;font-weight:700;color:var(--muted)}
.ptabs button.on{background:#f1eaf7;color:#3a1170}
.pbody{flex:1;min-height:0;overflow:auto;padding-right:4px}
.drawer>*{flex-shrink:0}.drawer>.pbody{flex-shrink:1}
.hist{display:flex;flex-direction:column;gap:8px}
.hist .it{display:flex;align-items:center;gap:10px;background:#ffffff08;border-radius:12px;padding:10px 12px}
.hist .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#ffffff10;flex:none}
.hist .mid{min-width:0}.hist .mid b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hist .mid small{color:var(--muted);font-size:11px}
.hist .amt{margin-left:auto;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hist .amt small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.up{color:#6dff9e}.down{color:#ff7b9c}
.pform{display:flex;flex-direction:column;gap:10px}
.pform label{font-size:12px;color:var(--muted)}
.pform input{display:block;width:100%;margin-top:4px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#1c0636}
.dlg-logo{text-align:center;font-size:44px;filter:drop-shadow(0 0 14px #ff4fd8)}
#authDlg .dlg-logo{filter:drop-shadow(0 0 18px #c026d366) drop-shadow(0 4px 10px #0008);margin:-4px 0 0}
#authDlg .dlg-logo img{display:block;width:min(240px,70%);height:auto;margin:0 auto}
#authDlg .dlg-sub{text-align:center;margin:2px 0 10px;color:var(--muted,#b9a8e6);font-size:14px;letter-spacing:.02em}
.dlg h2{text-align:center}
.gamebar .fs{background:none;border:0;color:#fff;font-size:18px;margin-left:8px}
.soon{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:50px 20px;border:2px dashed var(--line);border-radius:18px;background:#ffffff06;text-align:center}
.soon .big{font-size:64px;animation:float 4s ease-in-out infinite}
.soon h3{margin:0;font-family:Cinzel,serif;color:var(--gold);font-size:26px}
.soon p{margin:0;color:var(--muted)}
.foot-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.agent-link{color:var(--gold);text-decoration:none;font-weight:700;border:1px solid #c9a24a66;padding:6px 14px;border-radius:99px}
.agent-link:hover{background:#c9a24a22}
.card{animation:cIn .4s both}
@keyframes cIn{from{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){.pill .refresh{display:none}.pill{padding:8px 12px;font-size:13px}.avatar-btn{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.slide h1 .w,.slide p,.slide .cta{opacity:1;transform:none}}

/* ============================ RULETA DE LA SUERTE ============================ */
.wheelbtn{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle at 35% 30%,#5a2aa0,#2a0a4d);font-size:22px;line-height:1;cursor:pointer;transition:.15s}
.wheelbtn:hover{border-color:var(--gold);box-shadow:0 0 16px #ffc93c88;transform:translateY(-1px)}
.wheelbtn.has{border-color:var(--gold);box-shadow:0 0 0 2px #ffc93c55,0 0 18px #ffc93c66}
.wheelbtn.ping{animation:wping 1s ease-in-out infinite}
@keyframes wping{0%,100%{box-shadow:0 0 0 2px #ffc93c66,0 0 18px #ffc93c66}50%{box-shadow:0 0 0 6px #ffc93c22,0 0 30px #ff4fd8aa}}
.wbadge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;
  background:var(--pink);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 6px #0007}

.wheeldlg{width:min(460px,94vw);text-align:center;overflow:hidden}
.wheeldlg .wheel-head p{color:var(--muted);font-size:13.5px;margin:2px 0 14px;line-height:1.5}
.wheeldlg .wheel-head b{color:var(--gold)}
.wheel-stage{position:relative;width:min(340px,76vw);margin:6px auto 4px;aspect-ratio:1}
.wheel-stage canvas{width:100%;height:100%;position:relative;z-index:2;filter:drop-shadow(0 8px 24px #0009)}
.wheel-glow{position:absolute;inset:-14%;z-index:0;background:radial-gradient(circle,#ff4fd855,transparent 62%);filter:blur(10px);animation:wglow 4s ease-in-out infinite}
@keyframes wglow{50%{opacity:.6;transform:scale(1.05)}}
.wheel-ptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:4;
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid var(--gold);
  filter:drop-shadow(0 3px 4px #000a)}
.wheel-hub{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26%;height:26%;border-radius:50%;border:0;cursor:pointer;color:#3a1c00;font-family:Cinzel,serif;font-weight:900;font-size:clamp(13px,3.4vw,17px);
  background:radial-gradient(circle at 50% 30%,#fff6cf,transparent 42%),conic-gradient(from 210deg,var(--gold2),var(--gold),#fff3b0,var(--gold),var(--gold2));
  box-shadow:0 3px 0 #fff8 inset,0 -6px 12px #0006 inset,0 6px 16px #000a,0 0 22px #ffc93c88;transition:transform .1s}
.wheel-hub:hover:not(:disabled){box-shadow:0 3px 0 #fff9 inset,0 -6px 12px #0006 inset,0 8px 20px #000b,0 0 34px #ffc93c}
.wheel-hub:active:not(:disabled){transform:translate(-50%,-50%) scale(.93)}
.wheel-hub:disabled{filter:grayscale(.55) brightness(.75);cursor:default}
.wheel-result{margin:12px auto 2px;font-size:18px;font-weight:700}
.wheel-result b{color:var(--gold);font-family:Cinzel,serif;font-size:22px}
.wheel-result.pop{animation:wpop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes wpop{from{transform:scale(.4);opacity:0}}
.wheel-foot{display:flex;align-items:center;gap:14px;margin:12px 2px 2px;flex-wrap:wrap}
.wchip{font-size:12.5px;color:var(--muted);white-space:nowrap}.wchip b{color:var(--gold);font-size:16px;margin-left:4px}
.wprog{flex:1;min-width:150px;text-align:left}
.wprog-bar{height:9px;border-radius:99px;background:#1c0636;border:1px solid var(--line);overflow:hidden}
.wprog-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .4s}
.wprog small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.wheel-note{color:var(--muted);font-size:11.5px;margin:12px 0 0;opacity:.85}
@media (prefers-reduced-motion:reduce){.wheelbtn.ping,.wheel-glow{animation:none}}

/* ============================ RECOMPENSAS ============================ */
.wdot{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--pink);
  border:2px solid #2a0a4d;box-shadow:0 0 8px var(--pink);animation:wping 1.4s ease-in-out infinite}
.btn.sm{padding:7px 12px;border-radius:9px;font-size:13px}
.rewardsdlg{width:min(440px,94vw);max-height:88vh;overflow:auto}
.rewards-body{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.rw-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.rw-card.vip{background:linear-gradient(135deg,#3a1170,#5a1d9e);border-color:var(--gold)}
.rw-card.promo{background:linear-gradient(135deg,#7a1350,#b81d6e);border-color:var(--pink)}
.rw-card.promo p{margin:6px 0 0;font-size:13px;color:#ffe1f3}
.rw-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rw-vip{font-family:Cinzel,serif;font-weight:900;font-size:18px;color:var(--gold)}
.rw-muted{color:var(--muted);font-size:12px}
.rw-bar{height:8px;border-radius:99px;background:#1c0636;border:1px solid var(--line);overflow:hidden;margin:8px 0}
.rw-bar.sm{height:6px;margin:5px 0 3px}
.rw-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .5s}
.rw-wait{font-size:12px;color:var(--muted);white-space:nowrap;background:#1c0636;border:1px solid var(--line);padding:6px 10px;border-radius:9px}
.rw-mission{display:flex;align-items:center;gap:12px;margin-top:10px}
.rw-m-info{flex:1;min-width:0}.rw-m-info span{font-size:13.5px;font-weight:600}
.rw-mission .btn.sm{white-space:nowrap}
.rw-mission .btn.sm:disabled{opacity:.5}

/* ============ Aviso legal, footer disclaimer y soporte ============ */
.foot{margin-top:40px;padding:26px 18px 96px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));color:var(--muted);font-size:13px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.foot-18{font-weight:700;color:var(--text)}
.foot-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.foot-link,.foot-more{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:12.5px;transition:.15s}
.foot-link:hover{border-color:var(--gold);color:var(--gold)}
.foot-more{border:none;padding:0;color:var(--gold);text-decoration:underline;border-radius:0}
.agent-link{color:var(--muted);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px}
.agent-link:hover{border-color:var(--gold);color:var(--gold)}
.foot-disc{max-width:1100px;margin:16px auto 0;line-height:1.6;font-size:12.5px;color:var(--muted);border:1px solid var(--line);background:rgba(0,0,0,.22);padding:14px 16px;border-radius:12px}
.foot-disc b{color:var(--text)}
.foot-small{max-width:1100px;margin:12px auto 0;font-size:12px;opacity:.8}

.legaldlg{max-width:660px;width:calc(100% - 28px)}
.legaldlg h2{margin:0 0 12px}
.legal-body{max-height:70vh;overflow:auto;padding-right:6px}
.legal-badge{display:inline-block;background:rgba(255,207,77,.12);border:1px solid var(--gold);color:var(--gold);font-weight:700;padding:7px 14px;border-radius:999px;font-size:13px;margin-bottom:14px}
.legal-body h3{margin:16px 0 5px;font-size:14.5px;color:var(--text)}
.legal-body p{margin:0 0 8px;line-height:1.6;font-size:13.5px;color:var(--muted)}
.legal-body b{color:var(--text)}
.legal-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-style:italic}

.supportdlg{max-width:440px;width:calc(100% - 28px)}
.support-sub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.supportdlg label{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
.supportdlg input,.supportdlg textarea{width:100%;margin-top:5px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#180533;color:var(--text);font:inherit;resize:vertical}
.supportdlg input:focus,.supportdlg textarea:focus{outline:none;border-color:var(--gold)}
.support-ok{text-align:center;padding:26px 12px;font-size:15px;font-weight:600;color:#7ee0a5}
.support-fab{position:fixed;right:18px;bottom:24px;width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--gold),#e0a92e);color:#2a1500;font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:40;transition:transform .15s}
.support-fab:hover{transform:scale(1.08)}
@media(max-width:900px){.support-fab{bottom:80px}}

/* ============ Aviso de edad +18 ============ */
body.gated{overflow:hidden}
.agegate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;
  background:radial-gradient(circle at 50% 30%,rgba(60,10,90,.6),rgba(8,2,16,.92));backdrop-filter:blur(8px)}
.agegate-card{max-width:440px;width:100%;text-align:center;background:linear-gradient(180deg,#210a3d,#160528);
  border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.agegate-badge{font-size:46px;margin-bottom:6px}
.agegate-card h2{margin:0 0 10px;font-size:22px;color:var(--gold)}
.agegate-card p{color:var(--muted);line-height:1.6;font-size:14px;margin:0 0 20px}
.agegate-card b{color:var(--text)}
.agegate-link{background:none;border:none;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.agegate-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.agegate-exit{color:var(--muted);font-size:13px;text-decoration:none;opacity:.8}
.agegate-exit:hover{opacity:1;color:var(--text)}

/* ============ Asistente de soporte (chatbot) ============ */
.supportdlg{max-width:440px;width:calc(100% - 28px)}
.sup-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sup-bot{font-size:30px;width:48px;height:48px;display:grid;place-items:center;background:rgba(255,207,77,.14);border-radius:50%}
.sup-head h2{margin:0;font-size:18px}
.sup-head small{color:var(--muted);font-size:12px}
.sup-chat{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;padding:4px 2px;margin-bottom:10px}
.sup-msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.5}
.sup-msg.bot{align-self:flex-start;background:#22103b;border:1px solid var(--line);border-bottom-left-radius:4px}
.sup-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--gold),#e0a92e);color:#2a1500;border-bottom-right-radius:4px}
.sup-msg b{font-weight:700}
.sup-topics{display:flex;flex-direction:column;gap:7px}
.sup-topics button{text-align:left;padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:#180533;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;transition:.15s}
.sup-topics button:hover{border-color:var(--gold);background:#20083f}
.sup-actions{display:flex;gap:8px;justify-content:space-between;margin-top:4px}

/* ===== Abanico de cartas del banner (póker/truco) ===== */
.slide .art .cardfan{position:relative;width:clamp(160px,27vw,330px);height:clamp(150px,24vw,300px);animation:float 5s ease-in-out infinite}
.slide .fcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));z-index:var(--z)}
.slide .pcard{width:clamp(90px,13vw,152px);height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.slide.on .fcard{animation:cardin .7s cubic-bezier(.2,1.3,.45,1) both;animation-delay:calc(var(--z) * .1s)}
@keyframes cardin{from{opacity:0;transform:translate(-50%,-50%) translateY(46px) rotate(0deg) scale(.82)}
  to{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.slide .art .cardfan{animation:none}.slide.on .fcard{animation:none}}

/* Cartas reales (imágenes) en el abanico del banner */
.slide .rcard{width:clamp(96px,13.5vw,164px);height:auto;display:block;border-radius:11px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
/* Portada de categoría (Truco) */
.cathero{margin:6px 0 18px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35);animation:heroin .5s ease both}
.cathero img{display:block;width:100%;height:auto}
@keyframes heroin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ===== Modal de bienvenida (premios) ===== */
.welcomedlg{max-width:440px;width:calc(100% - 32px);border:1px solid var(--gold);border-radius:20px;
  background:radial-gradient(600px 300px at 50% -40px,#40197033,transparent),var(--panel);color:var(--text);padding:22px}
.welcomedlg .wel-head{text-align:center;margin-bottom:14px}
.welcomedlg .wel-badge{font-size:44px;filter:drop-shadow(0 4px 10px #ffcf4d66)}
.welcomedlg h2{margin:6px 0 4px;font-size:22px}
.welcomedlg .wel-head p{margin:0;color:var(--muted);font-size:14px}
.welcomedlg .wel-list{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.welcomedlg .wel-item{display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px}
.welcomedlg .wel-ico{font-size:26px;line-height:1;flex:0 0 auto}
.welcomedlg .wel-item b{display:block;margin-bottom:2px}
.welcomedlg .wel-item p{margin:0;font-size:13px;color:var(--muted)}
.welcomedlg .wel-foot{text-align:center;font-size:13px;color:var(--muted);margin:0 0 14px}

/* ===== Ranking en vivo (póker / truco) ===== */
.livewrap{max-width:1500px;margin:16px auto 0;padding:0 clamp(14px,3vw,34px);
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.livewrap{grid-template-columns:1fr}}
.livecard{border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff0a,#0000),var(--card);transition:.15s;position:relative;overflow:hidden}
.livecard:hover{border-color:var(--gold);box-shadow:0 10px 26px #0006}
.livecard.poker{background:linear-gradient(180deg,#0b6e4f22,#0000),var(--card)}
.livecard.truco{background:linear-gradient(180deg,#8a1c1c22,#0000),var(--card)}
.live-top{display:flex;align-items:center;gap:12px}
.live-emoji{font-size:30px;line-height:1}
.live-h{flex:1;min-width:0}
.live-h b{display:block;font-size:16px}
.live-h small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 0 #39d98a;animation:livepulse 1.8s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 #39d98a88}70%{box-shadow:0 0 0 7px #39d98a00}100%{box-shadow:0 0 0 0 #39d98a00}}
.live-on{font-weight:800;color:#39d98a}
.live-cta{background:var(--gold);color:#3a1a00;border:0;border-radius:10px;padding:8px 14px;font-weight:800;font-size:13px;white-space:nowrap}
.live-cta:hover{filter:brightness(1.08)}
.live-rank{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.live-rank li{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;border-radius:9px;background:#ffffff08}
.live-rank .pos{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--line);color:#fff;flex:0 0 auto}
.live-rank li:nth-child(1) .pos{background:linear-gradient(#ffe98a,#e08a00);color:#3a1a00}
.live-rank li:nth-child(2) .pos{background:#c9d2e0;color:#222}
.live-rank li:nth-child(3) .pos{background:#e0955a;color:#3a1a00}
.live-rank .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.live-rank .amt{color:#39d98a;font-weight:800;font-size:12px}
.live-empty{color:var(--muted);font-size:12.5px;padding:10px 8px;text-align:center}

/* ===== Aviso cruzado (cross-sell) ===== */
.crosssell{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  margin:4px 0 10px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(90deg,#ffcf4d1a,#ff4fd814);border:1px solid #ffcf4d44}
.crosssell .cs-txt{font-size:14px;flex:1;min-width:200px}
.crosssell .cs-btns{display:flex;gap:8px;flex-wrap:wrap}
.crosssell .cs-btns button{background:var(--gold);color:#3a1a00;border:0;border-radius:10px;
  padding:8px 14px;font-weight:800;font-size:13px;white-space:nowrap}
.crosssell .cs-btns button:hover{filter:brightness(1.08)}

/* Íconos de imagen en la navegación (truco, etc.) */
.navbtn .ico .ico-img{width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.28em;display:inline-block}
.botnav i .ico-img{width:24px;height:24px;object-fit:contain;display:block}
.botnav button.on i .ico-img{filter:drop-shadow(0 4px 8px #ffcf4d66)}

/* ===================== Home 3 columnas + rails ===================== */
.home-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:clamp(14px,1.4vw,22px);max-width:1700px;margin:0 auto;padding:16px clamp(10px,1.6vw,26px) 0;align-items:start}
@media(min-width:1900px){.home-grid{max-width:1860px;grid-template-columns:330px minmax(0,1fr) 350px}}
.home-center{min-width:0}
.home-center .hero{max-width:none;margin:0}
.home-center .lobby{max-width:none;margin:0}
@media(max-width:1280px){
  .home-grid{grid-template-columns:1fr}
  .home-center{order:-1}
  .hrail{width:100%;max-width:680px;margin:0 auto}
}
.hrail{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:thin}
.hrail::-webkit-scrollbar{width:6px}.hrail::-webkit-scrollbar-thumb{background:#5a3a9c;border-radius:4px}
@media(max-width:1280px){.hrail{position:static}}
.hrail-card{background:linear-gradient(180deg,#2b1358,#180a34);border:1.5px solid #7a44c8;border-radius:18px;padding:15px;position:relative;
  box-shadow:0 0 0 1px #0e0620,0 0 22px #7c3aed44,0 16px 34px #0008,inset 0 1px 0 #ffffff12}
.hrail-card::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 24px #7c3aed22;border-top:1px solid #b98cff44}
.hrail-card[data-go]{cursor:pointer;transition:.15s}
.hrail-card[data-go]:hover{border-color:var(--gold);box-shadow:0 0 0 1px #ffcf4d33,0 14px 32px #0007}
.hrail-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hrail-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none;
  background:linear-gradient(160deg,#3a1a6e,#25103f);border:1px solid var(--line);box-shadow:inset 0 1px 0 #ffffff14}
.hrail-icon.poker{color:#c9b3ff}.hrail-icon.truco{color:#ffcf8a}
.hrail-t{flex:1;min-width:0}
.hrail-t b{display:block;font-size:15px;letter-spacing:.5px}
.hrail-t small{color:var(--muted);font-size:11.5px}
.hrail-crown{font-size:20px;filter:drop-shadow(0 2px 6px #ffcf4d66)}
.hrank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hrank-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:14px 6px}
.hrank-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;background:#ffffff08;font-size:13px}
.hrank-row.top1,.hrank-row.top2,.hrank-row.top3{border:1px solid transparent;background:#ffffff0d}
.hrank-row.top1{box-shadow:inset 0 0 0 1px #ffcf4d66;background:linear-gradient(90deg,#ffcf4d1c,#ffcf4d05)}
.hrank-row.top2{box-shadow:inset 0 0 0 1px #c9d2e055;background:linear-gradient(90deg,#c9d2e016,#c9d2e004)}
.hrank-row.top3{box-shadow:inset 0 0 0 1px #e0955a55;background:linear-gradient(90deg,#e0955a16,#e0955a04)}
.hrank-pos{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--line);flex:none}
.hrank-row.top1 .hrank-pos{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffcf4d 55%,#d68a00);color:#5a2c00}
.hrank-row.top2 .hrank-pos{background:radial-gradient(circle at 35% 30%,#fff,#cdd6e2 55%,#8b98ab);color:#26303c}
.hrank-row.top3 .hrank-pos{background:radial-gradient(circle at 35% 30%,#ffd2a6,#e0955a 55%,#9c5a26);color:#3a1a00}
.hrank-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none;background:linear-gradient(160deg,#7c3aed,#4a1a84)}
.hrank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hrank-pts{color:var(--gold);font-weight:800;font-size:12px;white-space:nowrap}
.hrail-more{width:100%;margin-top:12px;padding:11px;border-radius:12px;border:1px solid var(--gold);background:linear-gradient(#3a2a0e,#2a1150);color:#ffe6a0;font-weight:800;font-size:12.5px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.hrail-more:hover{background:linear-gradient(#4a3512,#3a1a5c);box-shadow:0 0 14px #ffcf4d44}
/* Notificaciones */
.notifs-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:13px;letter-spacing:.5px;margin-bottom:10px;color:#ffe6a0}
.notif-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.notif-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:14px 6px}
.notif-item{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;background:#ffffff08}
.notif-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none;background:linear-gradient(160deg,#3a1a6e,#25103f);border:1px solid var(--line)}
.notif-ic.concurso,.notif-ic.vip{box-shadow:inset 0 0 0 1px #ffcf4d55}
.notif-tx{flex:1;min-width:0;line-height:1.25}
.notif-tx b{display:block;font-size:12.5px}
.notif-tx small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.notif-ago{color:var(--muted);font-size:10.5px;white-space:nowrap;flex:none}

/* ===== Mis Premios (home) ===== */
.myrew-open{background:none;border:0;color:var(--gold);font-weight:700;font-size:11.5px;cursor:pointer}
.myrew-open:hover{text-decoration:underline}
.myrew-list{display:flex;flex-direction:column;gap:8px}
.mr-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff10}
.mr-item.ready{background:linear-gradient(90deg,#16a34a26,#16a34a08);border-color:#22c55e55}
.mr-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none;background:linear-gradient(160deg,#3a1a6e,#25103f);border:1px solid var(--line)}
.mr-tx{flex:1;min-width:0;line-height:1.28}
.mr-tx b{display:block;font-size:12.5px}
.mr-tx small{color:var(--muted);font-size:11px;display:block}
.mr-bar{height:6px;border-radius:99px;background:#ffffff14;overflow:hidden;margin-top:6px}
.mr-bar span{display:block;height:100%;background:linear-gradient(90deg,#ffcf4d,#ff8a00)}
.mr-btn{background:linear-gradient(#ffe27a,#f59e0b);color:#3a1a00;border:0;border-radius:9px;padding:8px 12px;font-weight:800;font-size:12px;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px #f59e0b44}
.mr-btn:hover{filter:brightness(1.06)}

/* ===== Sorteo Diamond 6 ===== */
.lotnav{background:linear-gradient(135deg,#3a1d6e,#2a0f55)!important;border:1px solid #ffcf4d66!important}
.lotdlg{width:min(720px,96vw);padding:0;background:radial-gradient(120% 80% at 50% 0%,#3b1672 0%,#1a0833 60%,#120523 100%);border:1px solid #ffcf4d55}
.lotdlg>.x{position:absolute;top:10px;right:12px;z-index:2}
.lot-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px 12px;flex-wrap:wrap}
.lot-logo{display:flex;align-items:center;gap:12px}.lot-logo>span{font-size:40px;filter:drop-shadow(0 4px 14px #7fd8ff88)}
.lot-logo h2{margin:0;font-size:26px;letter-spacing:.5px}.lot-logo h2 b{background:linear-gradient(180deg,#fff2a8,#f5b700);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:32px}
.lot-logo small{color:var(--muted)}
.lot-pool{text-align:right;background:#0006;border:1px solid #ffcf4d55;border-radius:14px;padding:8px 14px;margin-right:28px}
.lot-pool small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.lot-pool b{font-size:24px;color:#ffd84d}.lot-pool span{display:block;font-size:11px;color:#9fe3a0}
.lot-count{display:flex;align-items:center;gap:10px;margin:0 22px;padding:8px 14px;border-radius:12px;background:#ffffff0d;flex-wrap:wrap}
.lot-count b{font-variant-numeric:tabular-nums;font-size:18px;color:#fff}.lot-count small{color:var(--muted);margin-left:auto}
.lot-tabs{display:flex;gap:6px;padding:12px 22px 0;overflow-x:auto}
.lot-tabs button{background:#ffffff10;border:1px solid transparent;color:var(--muted);padding:7px 14px;border-radius:999px;font-weight:700;white-space:nowrap;cursor:pointer}
.lot-tabs button.on{background:linear-gradient(180deg,#ffe066,#f5a800);color:#2a1600}
.lot-body{padding:14px 22px 22px;max-height:60vh;overflow:auto}
.lot-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.lot-n{aspect-ratio:1;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0c;color:#fff;font-weight:800;font-size:15px;cursor:pointer;transition:.12s}
.lot-n:hover{border-color:#ffcf4d}
.lot-n.on{background:radial-gradient(circle at 35% 30%,#fff5c4,#f5b700 60%,#a86f00);color:#231500;border-color:#fff3;box-shadow:0 4px 14px #f5b70066;transform:scale(1.06)}
.lot-pick{display:flex;align-items:center;gap:8px;margin:14px 0;flex-wrap:wrap}
.lball,.lot-ball{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff5c4,#f5b700 60%,#a86f00);color:#231500;font-weight:900;font-size:14px;box-shadow:0 3px 8px #0007}
.lot-ball.empty{background:#ffffff10;border:1px dashed #ffffff33;box-shadow:none}
.lot-ball.hit{background:radial-gradient(circle at 35% 30%,#d9ffd9,#2fcf5f 60%,#137a30);color:#032}
.lot-ball.sm{width:26px;height:26px;font-size:11px}
.lot-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lot-actions .price{margin-left:auto;color:var(--muted)}.lot-actions .price b{color:#ffd84d}
.lot-tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.lot-tier{background:#ffffff0a;border-radius:12px;padding:10px}.lot-tier small{color:var(--muted);display:block}.lot-tier b{color:#ffd84d}
.lot-tk{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:#ffffff0a;margin-bottom:8px;flex-wrap:wrap}
.lot-tk .balls{display:flex;gap:4px;flex-wrap:wrap}.lot-tk .meta{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.lot-tk.win{background:linear-gradient(90deg,#2fcf5f22,#ffffff0a);border:1px solid #2fcf5f55}.lot-tk .meta b{color:#9fe3a0;font-size:14px}
.lot-res h4{margin:12px 0 6px}.lot-res .row{display:flex;gap:5px;flex-wrap:wrap}
.lot-how li{margin:6px 0;color:#ddd}
.lot-off{padding:30px;text-align:center;color:var(--muted)}
.lot-win{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#000a}
.lot-win>div{background:radial-gradient(circle at 50% 0%,#4a1c8c,#1a0833);border:1px solid #ffcf4d;border-radius:20px;padding:28px;text-align:center;max-width:360px;box-shadow:0 20px 60px #000}
.lot-win h3{font-size:26px;margin:6px 0}.lot-win b.amt{display:block;font-size:34px;color:#ffd84d;margin:8px 0}
@media (max-width:560px){.lot-grid{grid-template-columns:repeat(7,1fr)}.lot-head,.lot-body{padding-left:14px;padding-right:14px}.lot-count,.lot-tabs{margin-left:14px;margin-right:14px;padding-left:0;padding-right:0}.lot-count{padding:8px 10px}.lot-pool{margin-right:0}.lot-ball{width:30px;height:30px;font-size:13px}}
.lot-logo h2{text-align:left;font-family:inherit;font-weight:900}
@media (max-width:560px){.lot-actions .price{margin-left:0}.lot-actions #lotBuy{width:100%}.lot-head{padding-top:44px}}

/* Tarjeta del sorteo en el home */
.lotpromo{position:relative;display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;margin:14px 0 4px;padding:16px 20px;border-radius:20px;cursor:pointer;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#5b22a8 0%,#2a0d57 45%,#150630 100%);border:1px solid #ffcf4d77;box-shadow:0 10px 30px #0008,inset 0 0 40px #7fd8ff14;transition:.15s}
.lotpromo:hover{transform:translateY(-2px);border-color:#ffcf4d}
.lotpromo[hidden]{display:none}
.lp-art{position:relative;width:150px;height:110px}
.lp-drum{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffff22,#ffffff05 70%);border:2px solid #ffffff30;box-shadow:inset 0 0 20px #7fd8ff33;overflow:hidden;animation:lpspin 8s linear infinite}
.lp-drum span{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff5c4,#f5b700 60%,#a86f00);box-shadow:0 2px 6px #0008}
.lp-drum span:nth-child(1){left:18%;top:20%}.lp-drum span:nth-child(2){left:52%;top:14%;background:radial-gradient(circle at 35% 30%,#e3f7ff,#3ab4ff 60%,#0a5c9a)}
.lp-drum span:nth-child(3){left:34%;top:48%}.lp-drum span:nth-child(4){left:66%;top:46%;background:radial-gradient(circle at 35% 30%,#ffe0f0,#ff4f9a 60%,#8a1450)}
.lp-drum span:nth-child(5){left:14%;top:62%;background:radial-gradient(circle at 35% 30%,#d9ffd9,#2fcf5f 60%,#137a30)}.lp-drum span:nth-child(6){left:48%;top:70%}.lp-drum span:nth-child(7){left:78%;top:24%}
.lp-gem{position:absolute;right:-6px;bottom:-6px;font-size:40px;filter:drop-shadow(0 4px 12px #7fd8ffaa)}
@keyframes lpspin{to{transform:rotate(360deg)}}
.lp-tag{color:#9fe3ff;letter-spacing:2px;font-weight:800;font-size:11px}
.lp-info h3{margin:2px 0 8px;font-size:28px;font-weight:900}.lp-info h3 b{color:#ffd84d;font-size:34px}
.lp-balls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.lp-pool{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.lp-pool small{color:var(--muted);letter-spacing:1px;font-size:11px}.lp-pool b{font-size:34px;color:#ffd84d;line-height:1;text-shadow:0 2px 16px #f5b70066}
.lp-pool span{font-size:12px;color:#ddd}.lp-pool em{font-style:normal;font-weight:700;color:#fff}.lp-pool .btn{margin-top:6px}
@media (prefers-reduced-motion:reduce){.lp-drum{animation:none}}
@media (max-width:700px){.lotpromo{grid-template-columns:90px 1fr;padding:14px}.lp-art{width:90px;height:80px}.lp-drum span{width:18px;height:18px}.lp-gem{font-size:28px}
  .lp-pool{grid-column:1/-1;align-items:stretch;text-align:left}.lp-pool .btn{width:100%}.lp-info h3{font-size:22px}.lp-info h3 b{font-size:26px}}

/* ===== Diamond 6 v2: en vivo ===== */
.lotdlg{width:min(820px,96vw)}
.lot-head{padding-bottom:6px}
.lot-stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;margin:0 22px 10px}
.lot-stats>div{background:#0005;border:1px solid #ffffff18;border-radius:14px;padding:10px 14px}
.lot-stats small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.lot-stats b{font-size:22px;color:#fff}.lot-stats span{display:block;font-size:11px;color:#9fe3a0}
.lot-stats .ls-main{border-color:#ffcf4d77;background:linear-gradient(135deg,#ffcf4d22,#0005)}.lot-stats .ls-main b{color:#ffd84d;font-size:28px}
.lot-count.live{background:linear-gradient(90deg,#ff2d4d33,#ffffff08);border:1px solid #ff2d4d66}
.lp-live{color:#ff4d5e;font-weight:900;animation:lvblink 1s steps(2) infinite}
@keyframes lvblink{50%{opacity:.25}}
.lot-tabs button.is-live{background:#ff2d4d;color:#fff}
.lot-hint{margin:0 0 10px;color:#ddd;font-size:14px}
.lot-sub{margin:16px 0 8px;font-size:14px;color:#ffd84d;text-transform:uppercase;letter-spacing:1px}
.lot-pick small{color:var(--muted);margin-left:4px}
.lot-tier em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.lot-tier.w{border:1px solid #2fcf5f66;background:#2fcf5f14}.lot-tier.vac b{color:#aaa}
.lot-closed{text-align:center;padding:24px 10px}.lot-closed .lc-ic{font-size:44px}.lot-closed h3{margin:6px 0}.lot-closed p{color:#ccc}
.lot-claim{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:linear-gradient(90deg,#2fcf5f33,#ffcf4d22);border:1px solid #2fcf5f88;margin-bottom:8px}
.lot-claim small{display:block;color:#cfe}.lot-claim b{font-size:22px;color:#ffd84d}
.lot-tk small.ok,.lot-result .ok{color:#6fe39a}.lot-tk small.pend{color:#ffd84d}
.lot-how{display:flex;flex-direction:column;gap:10px}
.how-step{display:flex;gap:12px;align-items:flex-start;background:#ffffff0a;border-radius:14px;padding:12px}
.how-step>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#231500;background:radial-gradient(circle at 35% 30%,#fff5c4,#f5b700 60%,#a86f00)}
.how-step p{margin:3px 0 0;color:#ccc;font-size:13px}
/* bolillero */
.lv-stage{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:center;padding:14px;border-radius:18px;background:radial-gradient(100% 120% at 20% 20%,#3a1672,#12052a);border:1px solid #ffffff1c}
.lv-machine{position:relative;width:220px;height:250px;margin:auto}
.lv-drum{position:absolute;left:10px;top:0;width:200px;height:200px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#ffffff30,#ffffff08 55%,#7fd8ff10);border:3px solid #ffffff55;box-shadow:inset 0 0 30px #7fd8ff44,0 10px 30px #000a}
.lv-drum::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#ffffff40 0 18%,transparent 30%);pointer-events:none}
.lv-drum .db{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;border-radius:50%;font-style:normal;font-size:10px;font-weight:900;display:grid;place-items:center;color:#231500;
  background:radial-gradient(circle at 35% 30%,#fff5c4,#f5b700 60%,#a86f00);box-shadow:0 2px 5px #0009;animation:lvmix var(--d) ease-in-out var(--dl) infinite alternate}
.lv-drum .db.b{background:radial-gradient(circle at 35% 30%,#e3f7ff,#3ab4ff 60%,#0a5c9a)}.lv-drum .db.p{background:radial-gradient(circle at 35% 30%,#ffe0f0,#ff4f9a 60%,#8a1450)}
.lv-drum .db.v{background:radial-gradient(circle at 35% 30%,#efe0ff,#9b5cff 60%,#4a1c8c);color:#fff}.lv-drum .db.o{background:radial-gradient(circle at 35% 30%,#ffe9d6,#ff8a2a 60%,#9a3a00)}
.lv-drum.idle .db{animation-duration:calc(var(--d) * 3)}
.running .lv-drum{animation:lvshake .35s linear infinite}
@keyframes lvmix{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(40px,-50px) rotate(120deg)}66%{transform:translate(-35px,30px) rotate(240deg)}100%{transform:translate(20px,55px) rotate(360deg)}}
@keyframes lvshake{0%,100%{transform:rotate(0)}25%{transform:rotate(1.5deg)}75%{transform:rotate(-1.5deg)}}
.lv-neck{position:absolute;left:95px;top:192px;width:30px;height:26px;background:linear-gradient(90deg,#ffffff22,#ffffff44,#ffffff22);border:2px solid #ffffff44;border-top:0;border-radius:0 0 8px 8px}
.lv-out{position:absolute;left:50%;top:205px;transform:translateX(-50%);width:60px;height:60px}
.lot-ball.big{width:60px;height:60px;font-size:26px;box-shadow:0 0 0 4px #ffffff22,0 10px 30px #f5b700aa}
.lot-ball.drop{animation:lvdrop .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes lvdrop{0%{transform:translateY(-70px) scale(.3);opacity:0}60%{opacity:1}100%{transform:translateY(0) scale(1)}}
.lv-caller{text-align:center}
.lv-onair{display:inline-block;padding:3px 12px;border-radius:999px;background:#ff2d4d22;border:1px solid #ff2d4d88;font-weight:900;font-size:12px;letter-spacing:2px;margin-bottom:8px}
.lv-caller small{display:block;color:#9fe3ff;letter-spacing:2px;font-weight:800}
.lv-call{font-size:30px;font-weight:900;margin:8px 0;min-height:40px}.lv-call b{color:#ffd84d;font-size:40px}
.lv-next{color:#ccc}.lv-next b{color:#fff}
.lv-voice{margin-top:12px;background:#ffffff10;border:1px solid #ffffff30;color:#ddd;border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:700}.lv-voice.on{background:#2fcf5f33;border-color:#2fcf5f;color:#fff}
.lv-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.lv-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:#ffffff08;border:1px solid transparent;transition:.2s}
.lv-row.cur{border-color:#ffcf4d;background:#ffcf4d14;box-shadow:0 0 20px #ffcf4d22}
.lv-row small{width:120px;flex:none;font-weight:800;letter-spacing:1px;color:#ccc;font-size:11px}
.lv-row>div{display:flex;gap:6px;flex-wrap:wrap}
.lot-ball.pop{animation:lvpop .6s ease}
@keyframes lvpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.lot-ball.hit2{background:radial-gradient(circle at 35% 30%,#e3f7ff,#3ab4ff 60%,#0a5c9a);color:#012}
.lot-ball.hit3{background:radial-gradient(circle at 35% 30%,#efe0ff,#9b5cff 60%,#4a1c8c);color:#fff}
.lv-wait{display:flex;align-items:center;gap:18px;padding:12px;border-radius:18px;background:#ffffff08;margin-bottom:6px}
.lv-wait .lv-machine{width:130px;height:140px;transform-origin:top left}.lv-wait .lv-drum{width:120px;height:120px;left:5px}.lv-wait .lv-neck{left:52px;top:118px;width:24px;height:18px}
.lv-wait .lv-drum .db{width:16px;height:16px;font-size:0}
.lv-wait small{display:block;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:11px}.lv-wait b{display:block;font-size:18px}.lv-wait span{display:block;color:#ccc}.lv-wait em{font-style:normal;color:#ffd84d;font-weight:700}
.lot-result{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#ffffff0c;margin-bottom:10px}
.lot-result.win{background:linear-gradient(90deg,#2fcf5f33,#ffcf4d1c);border:1px solid #2fcf5f88}
.lot-result .lr-ic{font-size:34px}.lot-result>div:nth-child(2){flex:1}.lot-result b{display:block}.lot-result small{color:#ccc}
.lw-btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* home */
.lotbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:10px 16px;border-radius:14px;font-size:14px;cursor:default}
.lotbar[hidden]{display:none}
.lotbar .btn{margin-left:auto}
.lotbar.today{background:linear-gradient(90deg,#ffcf4d2a,#5b22a833);border:1px solid #ffcf4d77}
.lotbar.live{background:linear-gradient(90deg,#ff2d4d44,#5b22a833);border:1px solid #ff2d4d;animation:lvglow 1.6s ease-in-out infinite}
.lotbar.claim{background:linear-gradient(90deg,#2fcf5f3a,#ffcf4d22);border:1px solid #2fcf5f}
.lb-dot{width:10px;height:10px;border-radius:50%;background:#ff2d4d;box-shadow:0 0 10px #ff2d4d;animation:lvblink 1s steps(2) infinite}
@keyframes lvglow{50%{box-shadow:0 0 22px #ff2d4d66}}
.lp-status{margin-top:6px;font-size:13px;color:#fff}.lp-status b{color:#ffd84d}
.notif-lot{cursor:pointer;background:linear-gradient(90deg,#ffcf4d1c,transparent);border-left:3px solid #ffcf4d}
.notif-lot.live{background:linear-gradient(90deg,#ff2d4d2a,transparent);border-left-color:#ff2d4d}.notif-lot.live .notif-ago{color:#ff4d5e;font-weight:800}
@media (max-width:640px){
  .lot-stats{grid-template-columns:1fr 1fr;margin:0 14px 10px}.lot-stats .ls-main{grid-column:1/-1}
  .lv-stage{grid-template-columns:1fr;padding:10px}.lv-machine{transform:scale(.8);margin:-20px auto -40px}
  .lv-call{font-size:22px}.lv-call b{font-size:30px}.lv-row small{width:84px;font-size:10px}.lv-row{gap:6px;padding:6px 8px}
  .lv-row .lot-ball{width:30px;height:30px;font-size:12px}
  .lotbar .btn{margin-left:0;width:100%}}
.lv-row{min-height:50px}.lv-row>div{align-items:center}.lv-row .lot-ball{flex:none;height:34px;width:34px}
@media (max-width:640px){.lv-row .lot-ball{width:30px;height:30px}}
.lp-dl{color:#ffb14d;font-weight:700}.lot-tk small.exp,.lot-result .exp{color:#ff7a7a}.lr-cta{display:flex;flex-direction:column;align-items:center;gap:4px}.lot-claim small{display:block}

/* ===== Marca + arte Diamond 6 (v263) ===== */
.logo-img{height:58px;width:auto;display:block;filter:drop-shadow(0 4px 12px #0009)}
@media (max-width:700px){.logo-img{height:40px}}
.lot-ball.img{background:var(--b) center/cover no-repeat;color:transparent;box-shadow:0 3px 8px #0008;border:0}
.lot-ball.img i,.lot-n i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lot-ball{position:relative}
.lot-ball.img.hit{background:var(--b) center/cover;box-shadow:0 0 0 3px #2fcf5f,0 0 14px #2fcf5f}
.lot-ball.img.hit2{background:var(--b) center/cover;box-shadow:0 0 0 3px #3ab4ff,0 0 14px #3ab4ff}
.lot-ball.img.hit3{background:var(--b) center/cover;box-shadow:0 0 0 3px #b07cff,0 0 14px #b07cff}
.lot-ball.big.img{width:70px;height:70px;box-shadow:0 10px 30px #f5b700aa}
.lot-n{position:relative;font-size:15px}
.lot-n i{position:static;width:auto;height:auto;clip:auto}
.lot-n.on{background:var(--b) center/cover!important;border-color:transparent!important}
.lot-n.on i{color:transparent}
/* máquina */
.lv-stage{background:linear-gradient(#12052acc,#12052aee),url(/img/lottery/stage.webp) center/cover}
.lv-machine{position:relative;width:240px;height:auto;aspect-ratio:520/618;margin:auto}
.lv-mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 12px 30px #000c)}
.lv-glass{position:absolute;left:21%;top:13%;width:58%;aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:1;background:radial-gradient(circle,#2a0f55aa,#12052a)}
.lv-glass .db{position:absolute;left:var(--x);top:var(--y);width:16%;height:auto;animation:lvmix var(--d) ease-in-out var(--dl) infinite alternate}
.lv-machine:not(.running) .lv-glass .db{animation-duration:calc(var(--d) * 3)}
.running .lv-mimg{animation:lvshake .35s linear infinite}
.lv-out{position:absolute;left:50%;top:80%;transform:translateX(-50%);width:70px;height:70px;z-index:3}
.lv-wait .lv-machine{width:140px}
.lp-machine{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px #000a)}
@media (max-width:640px){.lv-machine{width:190px;transform:none;margin:0 auto}.lv-wait .lv-machine{width:110px}}
.lv-row>div{align-items:center;align-content:center}
.lv-row .lot-ball{height:34px!important;width:34px!important;flex:0 0 34px;align-self:center}
.lv-stage .lv-machine{margin-bottom:26px}
@media (max-width:640px){.lv-row .lot-ball{height:30px!important;width:30px!important;flex-basis:30px}.lv-stage .lv-machine{margin-bottom:34px}}

/* ===== Club de Temporada ===== */
.clubchip{--c:#ffcf4d;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;cursor:pointer;position:relative;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#1b0733),#1b0733);border:1px solid color-mix(in srgb,var(--c) 70%,transparent);color:#fff;font-weight:800;font-size:12px;letter-spacing:1px}
.clubchip[hidden]{display:none}.clubchip .cc-ic{font-size:18px}.clubchip b{color:var(--c)}
.cc-dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 8px #ff4d6d}
@media (max-width:700px){.clubchip b{display:none}.clubchip{padding:0 9px}}
.club-badge{--c:#ffcf4d;display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1px;cursor:pointer;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);margin:2px 0}
.club-badge[hidden]{display:none}.club-badge.big{font-size:15px;padding:4px 14px}
.clubdlg{width:min(860px,96vw);padding:0;background:radial-gradient(120% 70% at 50% 0%,#33125f,#14062b 65%);border:1px solid #ffcf4d55}
.clubdlg>.x{position:absolute;top:10px;right:12px;z-index:3}
#clubBody{padding:20px 22px 24px;max-height:86vh;overflow:auto}
.cl-empty{padding:40px;text-align:center;color:var(--muted)}
.cl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-right:30px;flex-wrap:wrap}
.cl-head small{color:#ffd84d;letter-spacing:2px;font-weight:800;font-size:11px}.cl-head h2{margin:2px 0 0;font-size:22px}
.cl-season{text-align:right;background:#0005;border:1px solid #ff8a3d66;border-radius:12px;padding:6px 14px}.cl-season small{color:var(--muted);letter-spacing:0}.cl-season b{display:block;font-size:20px;color:#ffb36b}
.cl-hero{--c:#ffcf4d;display:flex;gap:18px;align-items:center;margin:14px 0;padding:18px;border-radius:18px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 22%,#1a0833),#16062c 70%);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 10px 30px #0008,inset 0 0 40px color-mix(in srgb,var(--c) 12%,transparent)}
.cl-medal{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:52px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 40%,#000));box-shadow:0 0 0 4px #ffffff22,0 0 30px color-mix(in srgb,var(--c) 60%,transparent);animation:clglow 3s ease-in-out infinite}
@keyframes clglow{50%{box-shadow:0 0 0 4px #ffffff33,0 0 46px color-mix(in srgb,var(--c) 80%,transparent)}}
.cl-hero-tx{flex:1;min-width:0}.cl-hero-tx small{color:var(--muted);letter-spacing:2px;font-size:11px}
.cl-hero-tx h3{margin:0 0 8px;font-size:30px;font-weight:900;color:var(--c);letter-spacing:2px}
.cl-bar{height:14px;border-radius:999px;background:#0007;border:1px solid #ffffff22;overflow:hidden}
.cl-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 0 12px var(--c);transition:width 1s}
.cl-xp{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px}.cl-xp span{color:#ddd}
.cl-today{display:block;margin-top:4px;letter-spacing:0!important}
.cl-sub{margin:18px 0 8px;font-size:13px;color:#ffd84d;letter-spacing:1px;text-transform:uppercase}.cl-sub em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:6px}
.cl-map{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 2px}
.cl-node{--c:#999;flex:none;width:96px;text-align:center;opacity:.55}
.cl-node .cl-nd{width:54px;height:54px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#ffffff0d;border:2px dashed #ffffff33}
.cl-node.on{opacity:1}.cl-node.on .cl-nd{border:2px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent)}
.cl-node.cur .cl-nd{transform:scale(1.15);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent),0 0 24px var(--c)}
.cl-node b{display:block;font-size:12px;letter-spacing:1px;color:var(--c)}.cl-node small{color:var(--muted);font-size:11px}
.cl-link{flex:1;min-width:16px;height:3px;background:#ffffff1f;border-radius:2px;margin-bottom:34px}.cl-link.on{background:linear-gradient(90deg,#ffcf4d,#fff3)}
.cl-claim{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:12px 16px;border-radius:14px;background:linear-gradient(90deg,#2fcf5f33,#ffcf4d22);border:1px solid #2fcf5f88}
.cl-claim small{display:block;color:#cfe;font-size:11px;letter-spacing:1px}.cl-claim b{font-size:22px;color:#ffd84d}
.cl-mission{margin-top:12px;padding:12px 16px;border-radius:14px;background:#ffffff0a;border:1px solid #ffffff1a}.cl-mission small{color:#9fe3ff;letter-spacing:1px;font-weight:800;font-size:11px}.cl-mission p{margin:4px 0 0}
.cl-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cl-game{--c:#999;position:relative;border-radius:14px;padding:8px;background:#ffffff08;border:1px solid #ffffff18;display:flex;flex-direction:column;gap:3px}
.cl-game.open{border-color:var(--c);cursor:pointer;box-shadow:0 0 16px color-mix(in srgb,var(--c) 30%,transparent)}.cl-game.open:hover{transform:translateY(-2px)}
.cl-gthumb{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0006}
.cl-gthumb img{width:100%;height:100%;object-fit:cover}.cl-game:not(.open) .cl-gthumb img{filter:grayscale(.85) brightness(.45) blur(1px)}
.cl-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;text-shadow:0 2px 10px #000}
.cl-game b{font-size:13px}.cl-game small{color:var(--c);font-size:11px;font-weight:700}.cl-game em{font-style:normal;font-size:11px;color:#ffd84d}
.cl-how{margin-top:14px;color:#ccc;font-size:13px}.cl-how summary{cursor:pointer;color:#fff;font-weight:700}
/* lobby: slot bloqueado */
.card.locked{--lc:#ffcf4d;position:relative}
.card.locked .thumb img{filter:grayscale(.8) brightness(.4) blur(1px)}
.card.locked .play,.card.locked .fav{display:none}
.lockov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px;pointer-events:none}
.lockov .lk-ic{font-size:30px;filter:drop-shadow(0 2px 8px #000)}.lockov b{font-size:13px;text-shadow:0 2px 6px #000}
.lockov small{font-size:11px;color:#ddd}.lockov em{font-style:normal;font-weight:800;color:var(--lc)}
.club-tag{position:absolute;top:8px;left:8px;z-index:3;font-size:10px;font-weight:900;letter-spacing:1px;padding:3px 8px;border-radius:999px;background:#000a;border:1px solid var(--lc);color:var(--lc)}
.card.locked:hover .lockov .lk-ic{animation:lvshake .3s linear 2}
/* aviso de nivel */
.club-up>div{--c:#ffcf4d;border-color:var(--c)!important;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--c) 35%,#2a0d57),#14062b)!important}
.cu-medal{width:96px;height:96px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-size:56px;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 55%,#0006);box-shadow:0 0 40px var(--c);animation:cuin .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes cuin{0%{transform:scale(.2) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.club-up small{color:#ffd84d;letter-spacing:2px;font-weight:800}.club-up h3{font-size:34px!important;color:var(--c);letter-spacing:3px}
.cu-row{background:#ffffff0d;border-radius:10px;padding:8px;margin:6px 0}.cu-row small{display:block;font-size:10px;color:var(--muted)}
@media (max-width:640px){#clubBody{padding:16px 14px 20px}.cl-hero{flex-direction:column;text-align:center}.cl-medal{width:76px;height:76px;font-size:42px}.cl-hero-tx{width:100%}.cl-node{width:70px}.cl-node .cl-nd{width:44px;height:44px;font-size:21px}}
.cl-head h2{font-family:inherit;font-weight:900;color:#fff}.lv-color{width:46px;height:34px;padding:2px;border-radius:8px}

/* ===== Banners v2: sombra violeta (efecto superpuesto) + animaciones ===== */
.hero{box-shadow:0 18px 50px -8px #5b1fa8cc,0 0 0 1px #ffcf4d33,0 0 90px -20px #8b3cff88!important;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 70%,#14062bcc),radial-gradient(120% 90% at 50% 50%,transparent 62%,#1a0835aa);box-shadow:inset 0 0 40px #2a0d57aa}
.home-center .hero{margin-bottom:6px}
/* destello que cruza el banner */
.bn-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bn-sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;width:18%;left:-30%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,#fff5c433,#ffffff55,#fff5c433,transparent);filter:blur(2px)}
.slide.on .bn-sweep::before{animation:bnsweep 6.5s 1s ease-in-out infinite}
@keyframes bnsweep{0%{left:-30%}35%{left:120%}100%{left:120%}}
/* botón RECLAMAR del arte: brillo pulsante */
.fx-cta{position:absolute;z-index:1;left:4.2%;top:72.5%;width:25%;height:17%;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 #ffcf4d00;animation:fxcta 2.2s ease-in-out infinite}
@keyframes fxcta{0%,100%{box-shadow:0 0 0 0 #ffcf4d00,inset 0 0 0 0 #fff0}50%{box-shadow:0 0 28px 6px #ffcf4d88,inset 0 0 18px #fff5c455}}
/* medallas: halo dorado que va pasando de una a otra */
.fx-medals{position:absolute;z-index:1;left:52.4%;top:33.5%;width:44.5%;height:31%;display:flex;justify-content:space-between;pointer-events:none}
.fx-medals i{width:22.5%;aspect-ratio:1;border-radius:50%;animation:fxmed 4s ease-in-out infinite}
.fx-medals i:nth-child(2){animation-delay:1s}.fx-medals i:nth-child(3){animation-delay:2s}.fx-medals i:nth-child(4){animation-delay:3s}
@keyframes fxmed{0%,70%,100%{box-shadow:0 0 0 0 #ffcf4d00}15%{box-shadow:0 0 34px 8px #ffcf4daa}}
.slide.imgslide:hover .fx-cta{animation-duration:1s}
@media (prefers-reduced-motion:reduce){.bn-sweep::before,.fx-cta,.fx-medals i{animation:none!important}}
@media (max-width:760px){.hero{box-shadow:0 14px 34px -6px #5b1fa8cc!important}}
.slide .banner{transform:scale(1.03)}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero::after{background:linear-gradient(180deg,transparent 82%,#14062b99),radial-gradient(130% 100% at 50% 50%,transparent 70%,#1a083588)}
.hrank-name{display:flex;flex-direction:column;min-width:0}.hrank-det{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px}.hrank-det .w{color:#6fe39a}.hrank-det .l{color:#ff8a8a}
.rankdlg{width:min(720px,96vw);padding:16px;background:#14062b;border:1px solid #ffcf4d55}.rankdlg h2{margin:0 0 10px}.rankdlg iframe{border:0;width:100%;height:min(600px,75vh);max-height:75vh;border-radius:12px;background:#0b0418}
.hrank-pts.neg{color:#ff8a8a}
.hrank-nm{white-space:nowrap;overflow:hidden;text-overflow:clip}.hrank-nm .blur{font-style:normal;filter:blur(4px);opacity:.75;user-select:none;letter-spacing:1px;margin-left:1px}
.hrank-frame{list-style:none}.hrank-frame iframe{border:0;width:100%;height:320px;transition:height .2s;border-radius:12px;background:transparent}
@media (max-width:760px){.hero,.home-center .hero{width:100%;max-width:100%!important;min-height:0!important;height:auto;aspect-ratio:2172/724;border-radius:14px}}

.fs-tap{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;border:0;font:700 16px inherit;color:#fff;background:linear-gradient(90deg,#7c3aed,#c026d3);box-shadow:0 0 24px #c026d388;animation:fsPulse 1.4s ease-in-out infinite}
@keyframes fsPulse{50%{transform:translateX(-50%) scale(1.05)}}
.dlg.game{position:relative}

.mini-stats.one{grid-template-columns:1fr!important}.mini-stats.one b{color:#5cf2b0}
/* Juego en celular: ocupa TODA la pantalla (iPhone no respeta 100vh dentro de <dialog>) */
@media (max-width:760px){
  .dlg.game[open]{position:fixed!important;inset:0!important;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
    border:0!important;border-radius:0!important;padding:0!important;transform:none!important;display:flex;flex-direction:column;background:#000}
  .dlg.game .gamebar{padding-top:calc(8px + env(safe-area-inset-top));min-height:40px}
  .dlg.game iframe{flex:1 1 auto;width:100%!important;height:auto!important;min-height:0}
  .dlg.game::backdrop{background:#000}
}
/* Celular: la barra superior con sesión iniciada no puede pasarse del ancho (si se pasa, el iPhone
   achica toda la página y los juegos se ven corridos/raros) */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .topbar{min-width:0}
  .topbar .logo{flex:none}.topbar .logo-img{width:auto;height:38px}
  .account{min-width:0;gap:6px;flex-shrink:1}
  .userbox{gap:6px;min-width:0}
  .userbox .pill{padding:6px 9px;min-width:0}.userbox .pill .refresh{display:none}
  .clubchip b{display:none}.clubchip{padding:6px 8px}
  .wheelbtn{width:34px;height:34px}
  .avatar-btn{width:34px;height:34px;flex:none}
  body.logged #lang,.userbox:not([hidden]) ~ #lang{display:none}
}
@media (max-width:400px){ #lang{display:none} .userbox .pill .coin{display:none} }
.fs-tap{white-space:nowrap;max-width:92vw}