: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;height:clamp(360px,42vw,480px);overflow:hidden;border-bottom:1px solid #000;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}

/* ---------- 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}

/* 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) */
@media (max-width:760px){
  .dlg.game{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}
.dlg.game:-webkit-full-screen{width:100vw;height:100vh}
.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}
.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 4px calc(6px + env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr)}
.botnav button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--muted);font-size:10px;font-weight:600;padding:6px 2px;border-radius:12px}
.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{height:280px}
  .toolbar{gap:8px}
  .filters{flex:1}.search{flex:1;width:auto}.provider{display:none}
  .tabs{overflow:auto}
}
@media (max-width:560px){
  .hero{height:230px}.slide .art{opacity:.4;right:-6%}.slide .orbit{display:none}.arrow{display:none}.slide{padding:0 22px}.slide .cta{padding:11px 22px;font-size:14px}
  .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)}
.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)}