/* ==========================================================
   TORNEO PLAYUSTRUCOS · estilos
   ----------------------------------------------------------
   Diseño oscuro pensado primero para el móvil (el 99 % del
   público). Violeta PlayUs como color de marca y oro para
   todo lo que tenga que ver con premios.
   Barlow Condensed en titulares y cifras; Inter en textos.
   ========================================================== */

:root{
  color-scheme: dark;

  --bg:#0A0817;
  --surface:#15112C;
  --surface-2:#1C173B;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --text:#F6F4FF;
  --text-2:#BDB7DD;
  --text-3:#8A84B0;

  --violet:#8272FF;
  --violet-soft:#AFA4FF;
  --violet-2:#5B4BD4;
  --violet-3:#3A2C9C;

  --gold:#FFC93D;
  --gold-hi:#FFE38F;
  --gold-2:#F4A91F;
  --gold-3:#A86C08;
  --gold-ink:#2B1D00;

  --green:#3DDC97;
  --red:#FF6B81;

  --r-xl:26px; --r-lg:20px; --r:16px; --r-sm:12px;

  --font-d:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gutter:16px;
  --maxw:1160px;
  --hdr:62px;

  /* esquinas de las capturas de juego: proporcionales al tamaño,
     tapan las esquinas redondeadas que traen las propias imágenes */
  --card-radius:6% / 9.6%;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 14px);
}
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 540px at 88% -6%, rgba(130,114,255,.22), transparent 62%),
    radial-gradient(760px 520px at -18% 26%, rgba(91,75,212,.16), transparent 60%),
    radial-gradient(640px 420px at 50% 112%, rgba(255,201,61,.07), transparent 62%);
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,p,ol,ul,figure{ margin:0; }
/* palabras muy largas (sobre todo en alemán) se parten con guion en vez de desbordar */
h1,h2,h3{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
ol,ul{ padding:0; list-style:none; }
b,strong{ font-weight:700; }
[hidden]{ display:none !important; }
::selection{ background:var(--violet); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:8px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.narrow{ max-width:800px; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; left:12px; top:-60px; z-index:100;
  padding:10px 16px; border-radius:10px; background:var(--gold); color:var(--gold-ink);
  font-weight:700; transition:top .2s;
}
.skip:focus{ top:12px; }

.i{
  width:1.2em; height:1.2em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- titulares ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-d); font-weight:700; font-size:14.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--violet-soft);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; }
.h2{
  font-family:var(--font-d); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px, 11.5vw, 68px); line-height:.92; letter-spacing:.005em;
  text-wrap:balance;
}
.sec-head{ margin-bottom:24px; }
.sec-head .h2{ margin-top:10px; }
.sec-head .sub{ margin-top:12px; color:var(--text-2); font-size:15.5px; max-width:54ch; text-wrap:pretty; }
.sec-head.center{ text-align:center; }
.sec-head.center .sub{ margin-left:auto; margin-right:auto; }
.sec-head.center .eyebrow::after{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor; }
.sec-head.split .link-more{ margin-top:10px; }
@media (min-width:640px){
  .sec-head.split{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
  .sec-head.split .link-more{ margin-top:0; }
}
.sec-meta{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:13px; color:var(--text-3);
}

/* ---------- secciones y tarjetas ---------- */
.sec{ position:relative; padding:56px 0; }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- botones ---------- */
.btn{
  --b-bg:rgba(255,255,255,.06); --b-fg:var(--text); --b-sh:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 22px; border-radius:14px;
  font-family:var(--font-d); font-weight:800; font-size:18px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  background:var(--b-bg); color:var(--b-fg);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  box-shadow:0 5px 0 var(--b-sh);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease, background-color .15s ease;
  -webkit-user-select:none; user-select:none;
}
.btn .i{ width:20px; height:20px; }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--b-sh); }
.btn-gold{
  --b-bg:linear-gradient(180deg,#FFDD6A 0%,#FFC93D 48%,#F5AE22 100%);
  --b-fg:var(--gold-ink); --b-sh:var(--gold-3);
}
.btn-gold:hover{ filter:brightness(1.06); }
.btn-violet{
  --b-bg:linear-gradient(180deg,#9587FF 0%,#7564F6 55%,#6150E6 100%);
  --b-fg:#fff; --b-sh:var(--violet-3);
}
.btn-violet:hover{ filter:brightness(1.08); }
.btn-ghost{ border-color:var(--line-2); box-shadow:none; }
.btn-ghost:hover{ --b-bg:rgba(255,255,255,.1); }
.btn-ghost:active{ transform:translateY(1px); box-shadow:none; }
.btn-sm{ min-height:40px; padding:0 16px; font-size:15.5px; border-radius:11px; box-shadow:0 3px 0 var(--b-sh); }
.btn-sm:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--b-sh); }
.btn-lg{ min-height:56px; font-size:19px; }
.btn-block{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--font-d); font-weight:800; font-size:16px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  padding:8px 0;
}
.link-more .i{ transition:transform .2s; }
.link-more:hover .i{ transform:translateX(3px); }

/* ---------- chips y puntos de estado ---------- */
.chip{
  display:inline-flex; align-items:center; gap:9px;
  min-height:34px; padding:0 14px 0 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-2);
  font-family:var(--font-d); font-weight:700; font-size:14.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  white-space:nowrap; max-width:100%;
}
.chip > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex:none; }
.dot.pulse{ animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,151,.6); }
  80%,100%{ box-shadow:0 0 0 9px rgba(61,220,151,0); }
}
.chip.is-done .dot{ background:var(--gold); animation:none; }
.chip.is-pre .dot{ background:var(--violet); animation:none; }
.chip.is-loading{ color:var(--text-3); }
.chip.is-loading .dot{ background:var(--text-3); animation:none; }

.tag{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 9px; border-radius:8px;
  font-family:var(--font-d); font-weight:800; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.tag .i{ width:14px; height:14px; }
.tag-new{ background:var(--gold); color:var(--gold-ink); box-shadow:0 2px 0 var(--gold-3); }
.tag-soft{ background:rgba(255,255,255,.08); color:var(--text-2); }
.tag-violet{ background:rgba(130,114,255,.2); color:var(--violet-soft); }

.medal{
  display:inline-grid; place-items:center; flex:none;
  width:22px; height:22px; border-radius:50%;
  font-family:var(--font-d); font-weight:800; font-size:13px; line-height:1;
  color:#1B1300; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.m1{ background:linear-gradient(180deg,#FFE9A0,#F2B233); }
.m2{ background:linear-gradient(180deg,#F7F9FD,#AAB5CA); }
.m3{ background:linear-gradient(180deg,#FFD0AA,#C97944); }

/* ==========================================================
   CABECERA
   ========================================================== */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(10,8,23,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--line);
}
.hdr-in{ height:var(--hdr); display:flex; align-items:center; gap:10px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; margin-right:auto; }
.brand img{
  width:38px; height:38px; border-radius:11px; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 8px 18px -8px rgba(130,114,255,.9);
}
.brand-txt{ display:flex; flex-direction:column; min-width:0; line-height:1; }
.brand-txt b{
  font-family:var(--font-d); font-weight:800; font-size:21px; letter-spacing:.03em;
  white-space:nowrap;
}
.brand-txt small{
  margin-top:4px; white-space:nowrap;
  font-family:var(--font-d); font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}

.nav{ display:none; }
.hdr-join{ display:none !important; }
.hdr .lang{ display:none; }

.lang{
  display:flex; align-items:center; gap:2px; padding:3px;
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.lang button{
  display:grid; place-items:center; width:34px; height:30px; padding:0;
  border:0; border-radius:9px; background:none; cursor:pointer;
  opacity:.45; transition:opacity .15s, background-color .15s;
}
.lang button svg{ width:22px; height:15px; border-radius:2px; display:block; }
.lang button:hover{ opacity:.85; }
.lang button.active{ opacity:1; background:rgba(255,255,255,.1); }

.menu-btn{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  cursor:pointer;
}
.menu-btn .burger{ display:block; position:relative; width:18px; height:2px; border-radius:2px; background:currentColor; transition:background-color .2s; }
.menu-btn .burger::before,
.menu-btn .burger::after{
  content:""; position:absolute; left:0; top:0; width:18px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .25s ease;
}
.menu-btn .burger::before{ transform:translateY(-6px); }
.menu-btn .burger::after{ transform:translateY(6px); }
.menu-btn[aria-expanded="true"] .bars{ background:transparent; }
.menu-btn[aria-expanded="true"] .bars::before{ transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after{ transform:rotate(-45deg); }

/* menú a pantalla completa (móvil) */
.menu{
  position:fixed; left:0; right:0; top:var(--hdr); bottom:0; z-index:59;
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(10,8,23,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  padding:6px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  animation:menuIn .22s ease;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px); } }
.menu nav a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:62px; border-bottom:1px solid var(--line);
  font-family:var(--font-d); font-weight:800; font-size:26px;
  letter-spacing:.03em; text-transform:uppercase;
}
.menu nav a::after{
  content:""; width:10px; height:10px; margin-right:6px;
  border-top:2px solid var(--text-3); border-right:2px solid var(--text-3);
  transform:rotate(45deg);
}
.menu nav a.on{ color:var(--gold); }
.menu-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0; }
.menu-lbl{
  font-family:var(--font-d); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
body.menu-open{ overflow:hidden; }

/* ==========================================================
   HERO (portada)
   ========================================================== */
.hero{ position:relative; padding-top:24px; overflow:hidden; }
.hero-grid{ position:relative; z-index:2; }
.hero-title{
  margin:18px 0 16px;
  font-family:var(--font-d); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(52px, 16.4vw, 124px); line-height:.86; letter-spacing:.005em;
}
.hero-title > span{ display:block; }
.hero-title em{
  font-style:italic; padding-right:.05em;
  background:linear-gradient(180deg,var(--gold-hi) 5%,var(--gold) 50%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ font-size:16.5px; line-height:1.5; color:var(--text-2); max-width:36ch; text-wrap:pretty; }
.hero-lead b{ color:var(--text); font-weight:600; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hero-ctas .btn{ flex:1 1 auto; padding:0 16px; }
.hero-me{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:8px 14px 8px 10px; border-radius:12px;
  background:rgba(130,114,255,.12); border:1px solid rgba(130,114,255,.3);
  font-size:13.5px; color:var(--text-2);
}
.hero-me .i{ color:var(--gold); width:18px; height:18px; }
.hero-me b{ color:var(--text); }

/* tarjeta de premio del hero */
.hero-prize{
  position:relative; margin-top:22px; padding:16px 18px;
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg, rgba(255,201,61,.17) 0%, rgba(255,201,61,.05) 55%, rgba(255,201,61,.02) 100%);
  border:1px solid rgba(255,201,61,.38);
  box-shadow:0 18px 40px -22px rgba(255,180,40,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.hp-top{ display:flex; align-items:center; gap:14px; }
.hp-amt{
  font-family:var(--font-d); font-weight:800; font-style:italic;
  font-size:58px; line-height:.85; padding-right:.04em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hp-lbl{
  font-family:var(--font-d); font-weight:800; font-size:17px; line-height:1.1;
  letter-spacing:.05em; text-transform:uppercase; max-width:14ch;
}
.hp-split{
  display:flex; gap:8px; margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,201,61,.22);
}
.hp-split li{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 6px; border-radius:12px; background:rgba(0,0,0,.22);
  font-family:var(--font-d); font-weight:800; font-size:21px; line-height:1;
}
.hp-rest{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:13.5px; color:var(--text-2);
}
.hp-rest .i{ color:var(--gold); width:18px; height:18px; }

/* cinta de juegos en movimiento */
.marquee{
  position:relative; margin-top:34px; padding:16px 0 34px;
  transform:rotate(-4deg) scale(1.1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  pointer-events:none;
}
.mq-row{
  display:flex; gap:12px; width:max-content; padding-right:12px;
  animation:mq 64s linear infinite; will-change:transform;
}
.mq-row + .mq-row{ margin-top:12px; animation-duration:76s; animation-direction:reverse; }
.mq-row img{
  width:150px; height:auto; aspect-ratio:1.6; object-fit:cover;
  border-radius:var(--card-radius);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.9);
}
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ==========================================================
   HOY: juego del día + cuenta atrás + progreso
   ========================================================== */
.sec-live{ padding-top:8px; }
.live-grid{ display:grid; gap:14px; }

.today{ padding:10px; }
.today-media{ position:relative; }
.today-media img{
  width:100%; aspect-ratio:1.6; object-fit:cover;
  border-radius:var(--card-radius); background:var(--surface-2);
}
.today-media .chip{
  position:absolute; left:10px; top:10px; min-height:30px; font-size:13px;
  background:rgba(10,8,23,.72); border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.today-body{ padding:14px 8px 8px; }
.today-body h3{
  font-family:var(--font-d); font-weight:800; font-size:36px; line-height:.95;
  text-transform:uppercase; letter-spacing:.01em;
}
.today-tip{ margin-top:8px; color:var(--text-2); font-size:14.5px; }
.today-body .btn{ margin-top:14px; }
.today-novideo{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  font-size:13.5px; color:var(--text-3);
}
.today-empty{ padding:26px 16px 22px; text-align:center; }
.today-empty .big-ico{
  width:56px; height:56px; margin:0 auto 14px; border-radius:18px;
  display:grid; place-items:center; background:rgba(130,114,255,.16); color:var(--violet-soft);
}
.today-empty .big-ico .i{ width:28px; height:28px; }
.today-empty .today-kicker{
  font-family:var(--font-d); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.today-empty h3{
  margin-top:6px; font-family:var(--font-d); font-weight:800; font-size:30px;
  line-height:1; text-transform:uppercase;
}
.today-empty p{ margin-top:8px; color:var(--text-2); font-size:14px; max-width:40ch; margin-left:auto; margin-right:auto; }
.today-emoji{ font-size:54px; line-height:1; }
.today-ph{
  display:grid; place-items:center; aspect-ratio:1.6;
  border-radius:var(--card-radius);
  background:radial-gradient(circle at 50% 40%, rgba(130,114,255,.35), rgba(130,114,255,.06) 70%), var(--surface-2);
  color:var(--violet-soft);
}
.today-ph .i{ width:56px; height:56px; }

.live-card{ padding:18px; }
.cd-lbl{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-d); font-weight:700; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.cd-lbl .i{ width:18px; height:18px; }
.cd-digits{ display:flex; align-items:stretch; gap:6px; margin-top:12px; }
.cd-u{
  flex:1; text-align:center; padding:12px 4px 10px; border-radius:16px;
  background:rgba(0,0,0,.28); border:1px solid var(--line);
}
.cd-u b{
  display:block; font-family:var(--font-d); font-weight:800;
  font-size:52px; line-height:.9; font-variant-numeric:tabular-nums;
}
.cd-u i{
  display:block; margin-top:6px; font-style:normal;
  font-family:var(--font-d); font-weight:700; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.cd-sep{ align-self:center; font-family:var(--font-d); font-weight:800; font-size:30px; color:var(--text-3); }
.cd-note{ margin-top:12px; font-size:13.5px; color:var(--text-2); }
.cd-done{ margin-top:10px; }
.cd-done strong{
  display:block; font-family:var(--font-d); font-weight:800; font-size:34px;
  line-height:1; text-transform:uppercase; color:var(--gold);
}
.cd-done p{ margin-top:6px; color:var(--text-2); font-size:14px; }

.prog{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.prog-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14px; color:var(--text-2);
}
.prog-head b{ color:var(--text); font-family:var(--font-d); font-weight:800; font-size:20px; }
.segs{ display:grid; grid-template-columns:repeat(var(--n,21), minmax(0,1fr)); gap:3px; margin-top:12px; }
.seg{ height:12px; border-radius:4px; background:rgba(255,255,255,.08); }
.seg.done{ background:linear-gradient(180deg,#9A8CFF,#6A5AF0); }
.seg.today{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));
  box-shadow:0 0 12px rgba(255,201,61,.65);
}
.prog-foot{
  display:flex; justify-content:space-between; gap:8px; margin-top:9px;
  font-family:var(--font-d); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
}
.prog-foot span:nth-child(2){ color:var(--text-2); }

/* ==========================================================
   CLASIFICACIÓN
   ========================================================== */
.stand-grid{ display:grid; gap:16px; }
.search{ position:relative; }
.search .i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:var(--text-3); pointer-events:none;
}
.search input{
  width:100%; height:56px; padding:0 16px 0 48px;
  border-radius:16px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.05); color:var(--text);
  font:inherit; font-size:16px; outline:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, background-color .15s;
}
.search input::placeholder{ color:var(--text-3); }
.search input:focus{ border-color:var(--violet); background:rgba(130,114,255,.08); }
.search input::-webkit-search-cancel-button{ filter:invert(1) opacity(.5); }
.search-sm input{ height:48px; border-radius:14px; }
.search-res:empty{ display:none; }
.search-res{ margin-top:10px; }
.hint{ margin-top:10px; display:flex; gap:8px; font-size:13px; color:var(--text-3); }
.hint .i{ width:16px; height:16px; margin-top:2px; color:var(--gold); }

.rank{ display:flex; flex-direction:column; gap:8px; }
.row{
  display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:11px 14px 11px 11px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.row.has-fav{ grid-template-columns:42px minmax(0,1fr) auto 40px; padding-right:8px; }
.row .pos{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:19px; line-height:1;
  background:rgba(255,255,255,.07); font-variant-numeric:tabular-nums;
}
.row .pos.long{ font-size:15px; }
.row .who{ min-width:0; }
.row .name{
  display:block; font-weight:700; font-size:15.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row .meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:2px;
  font-size:12.5px; color:var(--text-3);
}
.row .pts{ text-align:right; }
.row .pts b{
  display:block; font-family:var(--font-d); font-weight:800; font-size:23px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.row .pts i{
  font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.tr{ font-weight:700; font-variant-numeric:tabular-nums; }
.tr.up{ color:var(--green); }
.tr.down{ color:var(--red); }
.tr.same{ color:var(--text-3); }

.row.r1,.row.r2,.row.r3{ padding-top:14px; padding-bottom:14px; }
.row.r1{
  background:linear-gradient(90deg, rgba(255,201,61,.2), rgba(255,201,61,.04) 70%);
  border-color:rgba(255,201,61,.5);
  box-shadow:0 14px 34px -22px rgba(255,190,50,.8);
}
.row.r2{ background:linear-gradient(90deg, rgba(221,228,242,.13), rgba(221,228,242,.02) 70%); border-color:rgba(221,228,242,.3); }
.row.r3{ background:linear-gradient(90deg, rgba(239,163,107,.15), rgba(239,163,107,.02) 70%); border-color:rgba(239,163,107,.35); }
.row.r1 .pos{ background:linear-gradient(180deg,#FFE9A0,#F2B233); color:#2B1D00; }
.row.r2 .pos{ background:linear-gradient(180deg,#F7F9FD,#AAB5CA); color:#1A1F2B; }
.row.r3 .pos{ background:linear-gradient(180deg,#FFD0AA,#C97944); color:#2A1406; }
.row.r1 .name{ font-size:17px; }
.row.r1 .pts b{ color:var(--gold); font-size:26px; }
.row.me{ border-color:var(--violet); box-shadow:0 0 0 1px var(--violet), 0 12px 30px -18px rgba(130,114,255,.9); }

.rank-div{
  display:flex; align-items:center; gap:10px; margin:8px 2px 2px;
  font-family:var(--font-d); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); text-align:center;
}
.rank-div::before,.rank-div::after{ content:""; flex:1; height:1px; background:var(--line-2); }

.ztag{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:6px;
}
.ztag .i{ width:12px; height:12px; }
.ztag.z1{ background:rgba(255,201,61,.16); color:var(--gold); }
.ztag.z2{ background:rgba(130,114,255,.18); color:var(--violet-soft); }
.ztag.z3{ background:rgba(255,255,255,.07); color:var(--text-2); }

.fav{
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:12px; background:rgba(255,255,255,.06); cursor:pointer;
  color:var(--text-3); transition:color .15s, background-color .15s;
}
.fav .i{ width:20px; height:20px; }
.fav[aria-pressed="true"]{ color:var(--gold); background:rgba(255,201,61,.14); }
.fav[aria-pressed="true"] .i{ fill:currentColor; }

#followBox:empty{ display:none; }
.follow-card{
  margin-bottom:12px;
  padding:14px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(130,114,255,.2), rgba(130,114,255,.05));
  border:1px solid rgba(130,114,255,.4);
}
.fc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.fc-lbl{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-d); font-weight:800; font-size:14.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.fc-lbl .i{ width:17px; height:17px; fill:currentColor; }
.link-btn{
  border:0; background:none; padding:6px 0; cursor:pointer;
  font-size:13px; color:var(--text-3); text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{ color:var(--text); }
.follow-card .row{ background:rgba(10,8,23,.45); }
.follow-card .empty-line{ font-size:14px; color:var(--text-2); }

.more-btn{ margin-top:14px; }
.empty{
  padding:28px 20px; border-radius:18px; border:1px dashed var(--line-2);
  text-align:center; color:var(--text-2); font-size:14.5px;
}
.skel{
  border-radius:16px; min-height:66px;
  background:linear-gradient(90deg, rgba(255,255,255,.035) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.035) 75%);
  background-size:200% 100%; animation:skel 1.3s linear infinite;
}
@keyframes skel{ to{ background-position:-200% 0; } }

/* ==========================================================
   PREMIOS
   ========================================================== */
.podium{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end; gap:8px;
  max-width:620px; margin:6px auto 0;
}
.pod{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.pod-top{ display:flex; flex-direction:column; align-items:center; padding-bottom:12px; }
.pod .medal{ width:42px; height:42px; font-size:21px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.2), 0 8px 18px -8px rgba(0,0,0,.8); }
.pod-1 .medal{ width:52px; height:52px; font-size:26px; }
.pod .amt{
  display:block; margin-top:10px;
  font-family:var(--font-d); font-weight:800; font-style:italic;
  font-size:44px; line-height:.9; padding-right:.04em;
}
.pod-1 .amt{
  font-size:60px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 22px rgba(255,190,50,.35));
}
.pod .pl{
  display:block; margin-top:6px;
  font-family:var(--font-d); font-weight:700; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
}
.pod-base{
  width:100%; border-radius:16px 16px 6px 6px;
  display:grid; place-items:start center; padding-top:10px;
  font-family:var(--font-d); font-weight:800; font-size:46px; line-height:1;
  color:rgba(255,255,255,.12);
}
.pod-1 .pod-base{
  height:128px;
  background:linear-gradient(180deg, rgba(255,201,61,.38), rgba(255,201,61,.06));
  border:1px solid rgba(255,201,61,.5); border-bottom:0;
  box-shadow:0 -16px 50px -20px rgba(255,190,50,.55);
}
.pod-2 .pod-base{
  height:94px;
  background:linear-gradient(180deg, rgba(221,228,242,.24), rgba(221,228,242,.04));
  border:1px solid rgba(221,228,242,.32); border-bottom:0;
}
.pod-3 .pod-base{
  height:72px;
  background:linear-gradient(180deg, rgba(239,163,107,.26), rgba(239,163,107,.04));
  border:1px solid rgba(239,163,107,.36); border-bottom:0;
}
.podium-floor{
  max-width:680px; height:2px; margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.prize-rest{
  display:flex; gap:16px; align-items:center;
  max-width:680px; margin:22px auto 0; padding:18px;
}
.pr-ico{
  width:54px; height:54px; flex:none; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(130,114,255,.18); color:var(--violet-soft);
}
.pr-ico .i{ width:28px; height:28px; }
.pr-range{
  font-family:var(--font-d); font-weight:800; font-size:14.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--violet-soft);
}
.prize-rest h3{
  margin-top:2px; font-family:var(--font-d); font-weight:800; font-size:23px;
  line-height:1.05; text-transform:uppercase;
}
.prize-rest p{ margin-top:4px; font-size:14px; color:var(--text-2); }

/* ==========================================================
   21 DADOS
   ========================================================== */
.dice{
  position:relative; overflow:hidden; padding:26px 18px 18px;
  border-radius:var(--r-xl);
  background:
    radial-gradient(420px 280px at 92% -4%, rgba(255,140,40,.28), transparent 62%),
    radial-gradient(360px 260px at -10% 110%, rgba(130,114,255,.3), transparent 60%),
    linear-gradient(160deg, #2A1F70 0%, #1A1446 55%, #120E30 100%);
  border:1px solid rgba(130,114,255,.38);
  box-shadow:0 30px 60px -34px rgba(91,75,212,.9);
}
.dice-art{ position:relative; width:118px; height:118px; margin:4px 0 22px 6px; }
.dice-art img{
  width:100%; height:100%; border-radius:30px; transform:rotate(-8deg);
  box-shadow:0 22px 44px -18px rgba(255,140,40,.75), 0 0 0 1px rgba(255,255,255,.14);
}
.dice-x{
  position:absolute; right:-26px; bottom:-10px;
  padding:7px 12px 6px; border-radius:14px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));
  color:var(--gold-ink); box-shadow:0 5px 0 var(--gold-3);
  font-family:var(--font-d); font-weight:800; font-style:italic; font-size:32px; line-height:1;
  transform:rotate(7deg);
}
.dice .lead{ margin-top:12px; color:var(--text-2); font-size:16px; max-width:52ch; text-wrap:pretty; }
.dice-points{ display:grid; gap:10px; margin-top:22px; }
.dice-points li{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px; border-radius:18px;
  background:rgba(8,6,20,.32); border:1px solid rgba(255,255,255,.08);
}
.dp-ico{
  width:42px; height:42px; flex:none; border-radius:13px;
  display:grid; place-items:center; background:rgba(255,201,61,.14); color:var(--gold);
}
.dp-ico .i{ width:22px; height:22px; }
.dice-points li > div > b{
  display:block; font-family:var(--font-d); font-weight:800; font-size:20px;
  line-height:1.05; letter-spacing:.02em; text-transform:uppercase;
}
.dice-points li > div > span{ display:block; margin-top:3px; font-size:14px; color:var(--text-2); }

/* ==========================================================
   JUEGOS (tarjetas, carrusel, rejilla y ficha)
   ========================================================== */
.gcard{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  align-self:start; width:100%; padding:0;
  border:0; background:none; text-align:left; cursor:pointer;
}
.gimg{
  display:block; position:relative; aspect-ratio:1.6; overflow:hidden;
  border-radius:var(--card-radius); background:var(--surface-2);
  box-shadow:0 16px 28px -18px rgba(0,0,0,.95);
  transition:transform .2s ease;
}
.gimg img{ width:100%; height:100%; object-fit:cover; }
.gcard:hover .gimg{ transform:translateY(-3px); }
.gcard:active .gimg{ transform:scale(.97); }
.gtags{
  position:absolute; top:7px; left:7px; right:7px;
  display:flex; align-items:flex-start; gap:6px; pointer-events:none;
}
.gtags .tag{ height:22px; font-size:12px; padding:0 7px; }
.tag-play{
  margin-left:auto; width:28px; height:28px; padding:0 !important; justify-content:center;
  border-radius:50%; background:rgba(10,8,23,.72); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
}
.tag-play .i{ width:12px; height:12px; margin-left:2px; }
.gname{
  display:block; margin-top:10px;
  font-family:var(--font-d); font-weight:800; font-size:18px; line-height:1.05;
  letter-spacing:.03em; text-transform:uppercase;
}
.gmeta{ display:block; margin-top:3px; font-size:12.5px; color:var(--text-3); }
.gmeta .on{ color:var(--violet-soft); font-weight:600; }

.rail{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:4px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) 18px;
  scroll-padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ flex:0 0 auto; width:min(62vw, 250px); scroll-snap-align:start; }
.rail-more{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  aspect-ratio:1.6; border-radius:var(--card-radius);
  border:1.5px dashed var(--line-2); background:rgba(255,255,255,.03);
  font-family:var(--font-d); font-weight:800; font-size:18px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); text-align:center; padding:10px;
}
.rail-more .i{ width:26px; height:26px; }

.filters{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 4px;
}
.filters::-webkit-scrollbar{ display:none; }
.fchip{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  font-family:var(--font-d); font-weight:700; font-size:16px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); cursor:pointer;
  transition:background-color .15s, color .15s;
}
.fchip b{ font-weight:800; color:var(--text-3); font-variant-numeric:tabular-nums; }
.fchip[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:var(--bg); }
.fchip[aria-pressed="true"] b{ color:var(--violet-2); }
.games-tools{ display:grid; gap:12px; margin-bottom:22px; }

.ggrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 12px; }

/* ficha del juego (hoja inferior en móvil, ventana en escritorio) */
dialog.sheet{
  position:fixed; inset:0; margin:auto 0 0; padding:0;
  width:100%; max-width:100%; max-height:94dvh;
  border:0; background:none; color:inherit; overflow:visible;
}
dialog.sheet::backdrop{
  background:rgba(4,3,12,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.sheet-in{
  position:relative; max-height:94dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, #1D1840, var(--surface) 40%);
  border:1px solid var(--line-2); border-bottom:0; border-radius:26px 26px 0 0;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.9);
  animation:sheetUp .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp{ from{ transform:translateY(60px); opacity:0; } }
.sheet-grab{ display:block; width:42px; height:5px; margin:0 auto 12px; border-radius:3px; background:rgba(255,255,255,.22); }
.sheet-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line-2); background:rgba(10,8,23,.7); cursor:pointer;
}
.sheet-x .i{ width:18px; height:18px; }
.sheet-img img{ width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:var(--card-radius); }
.sheet-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.sheet-tags:empty{ display:none; }
.sheet h3{
  margin-top:12px; font-family:var(--font-d); font-weight:800; font-size:38px;
  line-height:.95; text-transform:uppercase;
}
.sheet-tip{ margin-top:10px; color:var(--text-2); font-size:15px; }
.sheet-tip.muted{ color:var(--text-3); font-size:14px; }
.sheet .btn{ margin-top:18px; }

/* ==========================================================
   INSCRIPCIÓN
   ========================================================== */
.join{ display:grid; gap:22px; }
.join .sec-head{ margin-bottom:0; }
.pass{
  position:relative; overflow:hidden; border-radius:26px;
  background:linear-gradient(160deg,#8374FF 0%,#5B4BD4 52%,#4233B5 100%);
  box-shadow:0 34px 60px -30px rgba(91,75,212,.95), inset 0 1px 0 rgba(255,255,255,.3);
}
.pass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.2px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
  mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.pass-top{ position:relative; display:flex; align-items:center; gap:14px; padding:20px 20px 16px; }
.pass-top img{ width:50px; height:50px; border-radius:15px; flex:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); }
.pass-kind{
  display:block; font-family:var(--font-d); font-weight:700; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.pass-group{
  display:block; font-family:var(--font-d); font-weight:800; font-size:23px; line-height:1.05;
  letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pass-top > div{ min-width:0; }
.pass-free{
  margin-left:auto; flex:none; padding:6px 10px; border-radius:9px;
  background:rgba(255,255,255,.2);
  font-family:var(--font-d); font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.pass-cut{
  position:relative; height:26px;
  background:
    radial-gradient(circle at 0 50%, var(--bg) 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--bg) 12px, transparent 12.5px);
}
.pass-cut::before{
  content:""; position:absolute; left:22px; right:22px; top:50%;
  border-top:2px dashed rgba(255,255,255,.32);
}
.pass-body{ position:relative; padding:6px 20px 22px; }
.pass-lbl{
  font-family:var(--font-d); font-weight:700; font-size:13.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75);
}
.pass-code-row{ display:flex; align-items:stretch; gap:10px; margin-top:8px; }
.pass-code{
  flex:1; min-width:0; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:46px; line-height:1;
  letter-spacing:.12em; padding:12px 10px 12px calc(10px + .12em);
  border-radius:16px; background:rgba(0,0,0,.24); border:1.5px dashed rgba(255,255,255,.42);
}
.copy-btn{
  flex:none; min-width:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0 12px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(255,255,255,.36); background:rgba(255,255,255,.15);
  font-family:var(--font-d); font-weight:800; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .15s;
}
.copy-btn .i{ width:22px; height:22px; }
.copy-btn:hover{ background:rgba(255,255,255,.24); }
.copy-btn.done{ background:var(--green); border-color:var(--green); color:#052A1A; }
.slots{ margin:18px 0 18px; }
.slots-bar{ height:8px; border-radius:99px; background:rgba(0,0,0,.28); overflow:hidden; }
.slots-bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transition:width .6s ease;
}
.slots-txt{ margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.88); }
.slots-txt b{ font-family:var(--font-d); font-weight:800; font-size:17px; color:#fff; }
.slots-full{ margin-top:6px; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.78); }
.pass .btn-gold{ --b-sh:#8F5C06; }
.pass-note{ margin-top:12px; text-align:center; font-size:12.5px; color:rgba(255,255,255,.75); }

.steps{ display:grid; gap:10px; }
.step{
  display:flex; gap:14px; padding:16px;
  border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.step-n{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:21px;
  background:rgba(130,114,255,.2); color:var(--violet-soft);
}
.step h3{
  font-family:var(--font-d); font-weight:800; font-size:21px;
  line-height:1.05; letter-spacing:.02em; text-transform:uppercase;
}
.step p{ margin-top:4px; font-size:14px; color:var(--text-2); }
.warn{
  display:flex; gap:10px; align-items:flex-start; margin-top:10px;
  padding:14px 16px; border-radius:16px;
  background:rgba(255,201,61,.08); border:1px solid rgba(255,201,61,.28);
  font-size:13.5px; color:#FFE3A0;
}
.warn .i{ width:18px; height:18px; margin-top:1px; color:var(--gold); }

/* ==========================================================
   PREGUNTAS FRECUENTES
   ========================================================== */
.faq{ display:grid; gap:10px; }
.faq details{
  border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  transition:background-color .2s, border-color .2s;
}
.faq details[open]{ background:rgba(130,114,255,.08); border-color:rgba(130,114,255,.3); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px; font-weight:700; font-size:15.5px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1;
  color:var(--violet-soft); background:rgba(130,114,255,.14);
  transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 18px 18px; color:var(--text-2); font-size:14.5px; }

/* ==========================================================
   PÁGINAS INTERIORES
   ========================================================== */
.phero{ padding:30px 0 6px; }
.phero .chip{ margin-top:16px; }
.phero h1{
  margin-top:12px;
  font-family:var(--font-d); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(46px, 14vw, 92px); line-height:.9; text-wrap:balance;
}
.phero .sub{ margin-top:14px; color:var(--text-2); font-size:16px; max-width:50ch; text-wrap:pretty; }
.page-sec{ padding:26px 0 56px; }

/* historial */
.hsum{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:16px; padding:14px 16px;
  border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  font-size:14.5px; color:var(--text-2);
}
.hsum b{ font-family:var(--font-d); font-weight:800; font-size:24px; color:var(--text); }
.hsum .segs{ flex:1 1 200px; margin-top:0; }
.hsum .seg{ height:10px; }
.hlist{ display:grid; gap:10px; }
.hrow{
  display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:center;
  padding:10px; border-radius:18px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.hrow.is-live{ border-color:rgba(61,220,151,.4); background:linear-gradient(90deg, rgba(61,220,151,.08), rgba(255,255,255,.02)); }
.himg{
  position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
}
.himg img, .himg .noimg{
  width:100%; aspect-ratio:1.6; object-fit:cover;
  border-radius:var(--card-radius); background:var(--surface-2);
}
.himg .noimg{ display:grid; place-items:center; font-size:30px; }
.hday{
  position:absolute; left:5px; top:5px;
  padding:3px 7px; border-radius:7px; background:rgba(10,8,23,.8);
  font-family:var(--font-d); font-weight:800; font-size:13px; letter-spacing:.06em; line-height:1.1;
}
.hbody{ min-width:0; }
.hkick{
  font-family:var(--font-d); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.hbody h3{
  margin-top:2px; font-family:var(--font-d); font-weight:800; font-size:23px;
  line-height:1; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hwin{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin-top:6px; font-size:14px; min-width:0; }
.hwin .i{ width:17px; height:17px; color:var(--gold); }
.hwin b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hwin span{ color:var(--text-3); white-space:nowrap; }
.hlive{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:13.5px; color:var(--green); font-weight:600; }
.hmeta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; font-size:12.5px; color:var(--text-3); }
.hmeta a{ display:inline-flex; align-items:center; gap:4px; color:var(--violet-soft); font-weight:600; }
.hmeta a .i, .hmeta span .i{ width:14px; height:14px; }
.hmeta span{ display:inline-flex; align-items:center; gap:4px; }

/* puntuación */
.scards{ display:grid; gap:12px; }
.scard{ padding:20px; }
.scard .amt{
  font-family:var(--font-d); font-weight:800; font-style:italic;
  font-size:60px; line-height:.85; padding-right:.04em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.scard h3{
  margin-top:10px; font-family:var(--font-d); font-weight:800; font-size:25px;
  line-height:1; text-transform:uppercase;
}
.scard p{ margin-top:8px; color:var(--text-2); font-size:14.5px; }
.chart{ margin-top:14px; padding:20px 16px 16px; }
.chart h3{
  font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1; text-transform:uppercase;
}
.chart .sub{ margin-top:6px; font-size:13.5px; color:var(--text-2); }
.bars{
  display:grid; grid-template-columns:repeat(var(--n,21), minmax(0,1fr)); align-items:end; gap:3px;
  height:170px; margin-top:34px; padding-bottom:1px;
  border-bottom:1px solid var(--line-2);
}
.bar{
  position:relative; min-height:3px; border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#9A8CFF,#5B4BD4);
}
.bar.future{ background:linear-gradient(180deg, rgba(154,140,255,.42), rgba(91,75,212,.3)); }
.bar.today{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));
  box-shadow:0 0 16px rgba(255,201,61,.55); opacity:1;
}
.bar i{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:5px;
  font-style:normal; font-family:var(--font-d); font-weight:800; font-size:13px;
  white-space:nowrap; color:var(--text);
}
.bar.today i{ color:var(--gold); }
.bars-x{
  display:grid; grid-template-columns:repeat(var(--n,21), minmax(0,1fr)); gap:3px; margin-top:6px;
  text-align:center; font-family:var(--font-d); font-weight:700; font-size:11.5px; color:var(--text-3);
}
.example{
  margin-top:14px; padding:18px; border-radius:18px;
  background:rgba(130,114,255,.1); border:1px solid rgba(130,114,255,.3);
  font-size:14.5px; color:var(--text-2);
}
.example .tag{ margin-bottom:8px; }
.example b{ color:var(--text); }

/* normas */
.rules{ display:grid; gap:12px; }
.art{ padding:18px 16px 8px; }
.art-h{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.art-n{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:18px;
  background:rgba(130,114,255,.2); color:var(--violet-soft);
}
.art h2{
  font-family:var(--font-d); font-weight:800; font-size:25px; line-height:1; text-transform:uppercase;
}
.clause{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--text-2);
}
.clause .num{ font-family:var(--font-d); font-weight:800; font-size:15px; color:var(--text-3); padding-top:1px; }
.clause b{ color:var(--text); }
.clause.hi, .clause.penalty{ margin:6px -6px; padding:13px 10px 13px 6px; border-radius:14px; }
.clause.hi{ background:rgba(255,201,61,.08); border:1px solid rgba(255,201,61,.3); }
.clause.hi .num{ color:var(--gold); }
.clause.penalty{ background:rgba(255,107,129,.08); border:1px solid rgba(255,107,129,.3); }
.clause.penalty .num{ color:var(--red); }
.xintro{ margin-top:4px; font-size:14.5px; color:var(--text-2); }
.xchips{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 10px; }
.xchips span{
  padding:6px 10px; border-radius:9px; font-size:13px;
  background:rgba(255,107,129,.08); border:1px solid rgba(255,107,129,.24); color:#FFC4CD;
}
.note{
  display:flex; flex-direction:column; gap:6px; margin-top:12px; padding:16px 18px;
  border-radius:18px; border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  font-size:14px; color:var(--text-2);
}
.note strong{
  font-family:var(--font-d); font-weight:800; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}

/* ==========================================================
   PIE
   ========================================================== */
.ftr{
  margin-top:20px; padding:44px 0 calc(116px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:rgba(0,0,0,.28);
}
.ftr-grid{ display:grid; gap:30px; }
.ftr-about{ margin-top:14px; font-size:13.5px; color:var(--text-2); max-width:54ch; }
.ftr h4{
  margin-bottom:12px; font-family:var(--font-d); font-weight:700; font-size:13.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.ftr-links{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.ftr-links a{ font-size:14.5px; color:var(--text-2); }
.ftr-links a:hover{ color:var(--text); }
.tt-link{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 12px;
  border-radius:14px; border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  font-weight:700; font-size:15px;
}
.tt-link .i{ width:22px; height:22px; }
.tt-link:hover{ background:rgba(255,255,255,.1); }
.ftr-legal{
  grid-column:1 / -1; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--text-3);
}

/* ==========================================================
   BARRA FIJA "UNIRSE" (móvil)
   ========================================================== */
.sticky-cta{
  position:fixed; left:10px; right:10px; z-index:55;
  bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  padding:9px 9px 9px 16px; border-radius:20px;
  background:rgba(24,19,50,.92);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line-2);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.85);
  transform:translateY(calc(100% + 40px)); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.sticky-cta.show{ transform:none; }
.sc-code{ display:flex; flex-direction:column; min-width:0; margin-right:auto; line-height:1.1; }
.sc-code span{
  font-family:var(--font-d); font-weight:700; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.sc-code b{ font-family:var(--font-d); font-weight:800; font-size:24px; letter-spacing:.1em; }
.sticky-cta .copy-mini{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.06); cursor:pointer;
}
.sticky-cta .copy-mini.done{ background:var(--green); border-color:var(--green); color:#052A1A; }
.sticky-cta .copy-mini .i{ width:20px; height:20px; }
.sticky-cta .btn{ min-height:46px; padding:0 20px; font-size:17px; box-shadow:0 4px 0 var(--b-sh); }

/* ==========================================================
   ENCUESTA "¿QUIÉN SERÁ EL CAMPEÓN?"
   ========================================================== */
.h2 em{
  font-style:normal;
  background:linear-gradient(180deg,var(--gold-hi) 5%,var(--gold) 50%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.poll{ padding:16px; }
.poll-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.poll-head b{ font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
.poll-head b.ok{ color:var(--green); }
.poll-head span{ font-size:13px; color:var(--text-3); white-space:nowrap; }
.opts{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.opt{
  display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
  width:100%; min-height:62px; padding:10px 12px 10px 10px; text-align:left; cursor:pointer;
  border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text);
  transition:border-color .15s, background-color .15s;
}
.opt:hover{ border-color:rgba(130,114,255,.55); background:rgba(130,114,255,.08); }
.opt:disabled{ opacity:.6; cursor:wait; }
.opt-rk{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  font-family:var(--font-d); font-weight:800; font-size:19px; background:rgba(255,255,255,.07);
}
.opt-rk.m1{ background:linear-gradient(180deg,#FFE9A0,#F2B233); color:#2B1D00; }
.opt-rk.m2{ background:linear-gradient(180deg,#F7F9FD,#AAB5CA); color:#1A1F2B; }
.opt-rk.m3{ background:linear-gradient(180deg,#FFD0AA,#C97944); color:#2A1406; }
.opt-who{ min-width:0; }
.opt-who b{ display:block; font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opt-who span{ display:block; margin-top:1px; font-size:12.5px; color:var(--text-3); }
.opt-go{
  display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px;
  font-family:var(--font-d); font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet-soft); background:rgba(130,114,255,.16);
}
.opt-go .i{ width:15px; height:15px; }
.opt.is-sel{ border-color:var(--gold); background:rgba(255,201,61,.08); }
.opt.is-sel .opt-go{ background:var(--gold); color:var(--gold-ink); }
.opt.is-mine{ border-color:var(--gold); }
.poll-confirm{
  margin:-2px 0 6px; padding:14px; border-radius:16px;
  background:rgba(255,201,61,.07); border:1px dashed rgba(255,201,61,.45);
  animation:menuIn .2s ease;
}
.poll-confirm p{ display:flex; gap:8px; align-items:flex-start; margin-bottom:12px; font-size:13.5px; color:#FFE3A0; }
.poll-confirm p .i{ width:17px; height:17px; margin-top:1px; color:var(--gold); }
.poll-confirm .btn{ white-space:normal; text-align:center; line-height:1.15; }
.poll-search{ margin-top:14px; }
#pollSearchRes{ margin-top:8px; }
.results{ display:grid; gap:8px; }
.res{ position:relative; overflow:hidden; padding:13px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.res-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(130,114,255,.38), rgba(130,114,255,.14));
  transition:width .9s cubic-bezier(.2,.8,.2,1);
}
.res.lead .res-fill{ background:linear-gradient(90deg, rgba(255,201,61,.42), rgba(255,201,61,.14)); }
.res.others .res-fill{ background:rgba(255,255,255,.08); }
.res.is-mine{ border-color:rgba(255,201,61,.6); }
.res-in{ position:relative; display:flex; align-items:center; gap:10px; }
.res-nm{ display:flex; align-items:center; gap:8px; min-width:0; margin-right:auto; }
.res-nm b{ font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res.others .res-nm b{ font-weight:600; color:var(--text-2); }
.res-nm .tag{ height:20px; font-size:11px; padding:0 7px; flex:none; }
.res-c{ font-size:12px; color:var(--text-3); white-space:nowrap; }
.res-p{ font-family:var(--font-d); font-weight:800; font-size:23px; min-width:54px; text-align:right; font-variant-numeric:tabular-nums; }
.res.lead .res-p{ color:var(--gold); }
.poll-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--text-3); }
.poll-done{ display:inline-flex; align-items:center; gap:7px; color:var(--text-2); }
.poll-done .i{ width:17px; height:17px; color:var(--green); }
.poll-empty{ padding:18px 10px; text-align:center; font-size:14px; color:var(--text-2); }
.poll-err{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:11px 13px; border-radius:12px; background:rgba(255,107,129,.1); border:1px solid rgba(255,107,129,.3); font-size:13.5px; color:#FFC2CC; }
.poll-err .i{ width:17px; height:17px; color:var(--red); margin-top:1px; }
.poll-winner{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; padding:12px 14px; border-radius:14px; background:rgba(255,201,61,.1); border:1px solid rgba(255,201,61,.3); font-size:14px; color:var(--text-2); }
.poll-winner .i{ width:19px; height:19px; color:var(--gold); }
.poll-winner b{ color:var(--text); }
.poll-msg{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 10px; }
.poll-msg .ico{ width:56px; height:56px; display:grid; place-items:center; margin-bottom:12px; border-radius:18px; color:var(--violet-soft); background:rgba(130,114,255,.16); }
.poll-msg .ico .i{ width:28px; height:28px; }
.poll-msg strong{ font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1.05; text-transform:uppercase; max-width:24ch; }
.poll-msg p{ margin-top:8px; font-size:14px; color:var(--text-2); max-width:42ch; }
@media (max-width:400px){ .res-c{ display:none; } }
@media (min-width:900px){ .poll{ padding:22px; } }

/* ==========================================================
   ESTADÍSTICAS Y FICHAS DE JUGADOR
   ========================================================== */
/* nombres que llevan a la ficha */
.row a.name, .hwin a{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.18); text-underline-offset:3px; transition:text-decoration-color .15s, color .15s; }
.row a.name:hover, .hwin a:hover{ text-decoration-color:var(--gold); }
.hwin a{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.blk{ margin-top:46px; }
.blk-h{
  font-family:var(--font-d); font-weight:800; font-size:26px; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
}
.blk .eyebrow + .blk-h{ margin-top:8px; }
.blk-sub{ margin-top:6px; font-size:13.5px; color:var(--text-2); }
.blk > .blk-h + .dlist, .blk > .blk-sub + .dlist, .blk > .blk-h + .slist{ margin-top:14px; }

/* cifras */
.kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.kpis .skel{ min-height:92px; }
.kpi{
  display:flex; flex-direction:column; justify-content:center; min-height:92px; padding:14px 16px;
  border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.kpi b{
  font-family:var(--font-d); font-weight:800; font-size:38px; line-height:.95;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.kpi span{
  margin-top:6px; font-family:var(--font-d); font-weight:700; font-size:13.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); line-height:1.15;
}
.kpi small{ margin-top:3px; font-size:12px; color:var(--text-3); }
.kpi.m1{ background:linear-gradient(160deg, rgba(255,201,61,.2), rgba(255,201,61,.04)); border-color:rgba(255,201,61,.45); }
.kpi.m1 b{ color:var(--gold); }
.kpi.m2{ background:linear-gradient(160deg, rgba(221,228,242,.14), rgba(221,228,242,.03)); border-color:rgba(221,228,242,.3); }
.kpi.m3{ background:linear-gradient(160deg, rgba(239,163,107,.16), rgba(239,163,107,.03)); border-color:rgba(239,163,107,.35); }

/* buscador de jugadores */
.st-top{ display:grid; gap:12px; }
.st-search{ padding:18px 16px; }
.st-search .blk-h{ font-size:23px; margin-bottom:14px; }
.st-search .search-res{ margin-top:12px; }
.st-mine{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.st-mine .fc-lbl{ margin-bottom:10px; }
.plist{ display:grid; gap:8px; }
.plist .hint{ justify-content:center; }
.prow{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:10px 14px 10px 10px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  transition:border-color .15s, background-color .15s;
}
.prow:hover{ border-color:rgba(130,114,255,.55); background:rgba(130,114,255,.08); }
.prow > .i{ width:18px; height:18px; color:var(--text-3); }
.pr-best{
  height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:17px; background:rgba(255,255,255,.07);
  font-variant-numeric:tabular-nums;
}
.pr-best.m1{ color:#2B1D00; } .pr-best.m2{ color:#1A1F2B; } .pr-best.m3{ color:#2A1406; }
.pr-who{ min-width:0; }
.pr-who b{ display:block; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-who span{ display:block; margin-top:1px; font-size:12.5px; line-height:1.4; color:var(--text-3); overflow-wrap:anywhere; }

/* acceso desde la clasificación de la portada */
.stats-cta{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px;
  margin-top:14px; padding:14px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,201,61,.12), rgba(255,201,61,.03));
  border:1px solid rgba(255,201,61,.3);
  transition:border-color .15s, background-color .15s;
}
.stats-cta:hover{ border-color:var(--gold); }
.stats-cta > .i{ width:18px; height:18px; color:var(--gold); }
.sc-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(255,201,61,.16); color:var(--gold); }
.sc-ico .i{ width:22px; height:22px; }
.sc-txt b{ display:block; font-family:var(--font-d); font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; line-height:1.1; }
.sc-txt span{ display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--text-2); }

/* temporadas */
.seasons{ display:grid; gap:12px; }
.season{
  padding:16px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.season.is-live{ border-color:rgba(61,220,151,.35); background:linear-gradient(180deg, rgba(61,220,151,.07), rgba(255,255,255,.02)); }
.season-h{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 12px; }
.season-n{
  grid-row:span 2; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-style:italic; font-size:26px;
  background:linear-gradient(180deg,#9587FF,#5B4BD4); box-shadow:0 4px 0 var(--violet-3);
}
.season.is-live .season-n{ background:linear-gradient(180deg,#5BE8A8,#1FA36A); color:#04281A; box-shadow:0 4px 0 #0E6B44; }
.season-t{ min-width:0; }
.season-t h3{ font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1; text-transform:uppercase; }
.season-t p{ margin-top:4px; font-size:12.5px; color:var(--text-3); }
.season-h .tag{ grid-column:2; justify-self:start; }
.tag-live{ gap:7px; background:rgba(61,220,151,.14); color:var(--green); }
.tag-live .dot{ width:7px; height:7px; }
.season-note{ margin-top:12px; font-size:12.5px; color:var(--text-3); }
.season-pod{ display:grid; gap:6px; margin-top:14px; }
.sp{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:9px 12px; border-radius:13px; background:rgba(10,8,23,.4); border:1px solid var(--line);
}
.sp .medal{ width:26px; height:26px; font-size:15px; }
.sp a{ font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp a:hover{ color:var(--gold); }
.sp-g{ font-family:var(--font-d); font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-g i{ font-style:normal; font-family:var(--font-b); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.sp1{ border-color:rgba(255,201,61,.45); background:linear-gradient(90deg, rgba(255,201,61,.16), rgba(255,201,61,.03)); }
.sp1 .sp-g{ color:var(--gold); }

/* pestañas pequeñas */
.tchips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
.tchips::-webkit-scrollbar{ display:none; }
.tchips:empty{ display:none; }
.tchip{
  flex:none; height:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text-2);
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .15s, color .15s;
}
.tchip:hover{ color:var(--text); }
.tchip[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:var(--bg); }

/* salón de la fama */
.fame-card{ padding:16px; }
.fame-desc{ margin:14px 0 12px; font-size:13.5px; color:var(--text-2); }
.fame{ display:grid; gap:8px; }
.frow{
  display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:10px 14px 10px 10px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  transition:border-color .15s;
}
.frow:hover{ border-color:rgba(130,114,255,.55); }
.frow .pos{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:19px; background:rgba(255,255,255,.07);
}
.frow.f1 .pos{ background:linear-gradient(180deg,#FFE9A0,#F2B233); color:#2B1D00; }
.frow.f2 .pos{ background:linear-gradient(180deg,#F7F9FD,#AAB5CA); color:#1A1F2B; }
.frow.f3 .pos{ background:linear-gradient(180deg,#FFD0AA,#C97944); color:#2A1406; }
.frow.f1{ border-color:rgba(255,201,61,.4); background:linear-gradient(90deg, rgba(255,201,61,.14), rgba(255,201,61,.02) 70%); }
.fame-who{ min-width:0; }
.fame-who b{ display:block; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fame-who span{ display:block; margin-top:1px; font-size:12.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fame-v{ text-align:right; }
.fame-v b{ display:block; font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1; font-variant-numeric:tabular-nums; }
.fame-v i{ font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.fame-m{ display:flex; gap:4px; }
.fame-m .medal{ width:28px; height:28px; font-size:16px; }

/* ---------- ficha ---------- */
.back{
  display:flex; width:fit-content; align-items:center; gap:6px; margin-bottom:18px;
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-2);
}
.back .i{ width:17px; height:17px; transform:scaleX(-1); }
.back:hover{ color:var(--text); }
.fj-hero h1{ font-size:clamp(40px, 12vw, 84px); word-break:break-word; }
.fj-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fj-actions .btn{ gap:8px; }
.fj-actions .btn .i{ width:17px; height:17px; }
#fjFollow[aria-pressed="true"] .i{ fill:currentColor; }
#fjShare.done{ --b-bg:var(--green); color:#052A1A; border-color:var(--green); }
.fj #fjMain > * + *{ margin-top:12px; }
.fj #fjMain > .blk{ margin-top:46px; }
.fj .kpis-6 .kpi b{ font-size:34px; }

.now{
  position:relative; overflow:hidden; padding:18px 16px 16px; border-radius:var(--r-xl);
  background:radial-gradient(120% 100% at 100% 0%, rgba(130,114,255,.35), transparent 60%), linear-gradient(160deg, #221B4D, #15112C);
  border:1px solid rgba(130,114,255,.45);
  box-shadow:0 22px 50px -30px rgba(130,114,255,.9);
}
.now.is-pod{ background:radial-gradient(120% 100% at 100% 0%, rgba(255,201,61,.32), transparent 60%), linear-gradient(160deg, #2A2040, #15112C); border-color:rgba(255,201,61,.5); }
.now-ey{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-d); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--green);
}
.now-main{ display:flex; align-items:flex-end; gap:18px; margin-top:10px; }
.now-pos b{
  display:block; font-family:var(--font-d); font-weight:800; font-style:italic; font-size:84px; line-height:.82;
  padding-right:.05em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,var(--violet-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.now.is-pod .now-pos b{ background-image:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-2)); }
.now-pos b::before{ content:"#"; font-size:.5em; vertical-align:.7em; margin-right:2px; opacity:.6; }
.now-pos span{ display:block; margin-top:6px; font-size:13px; color:var(--text-2); }
.now-info{ min-width:0; padding-bottom:20px; }
.now-g{ font-size:13.5px; color:var(--text-2); }
.now-g b{ font-family:var(--font-d); font-weight:800; font-size:28px; color:var(--text); font-variant-numeric:tabular-nums; }
.now-tr{ margin-top:2px; font-size:13px; }
.now-tr .muted{ color:var(--text-3); }
.now-list{ display:grid; gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.now-list li{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-2); }
.now-list .i{ width:17px; height:17px; color:var(--text-3); }
.now-list li.ok{ color:var(--text); }
.now-list li.ok .i{ color:var(--gold); }

/* temporada a temporada */
.slist{ display:grid; gap:8px; }
.srow{
  display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:12px; width:100%;
  padding:12px 14px 12px 12px; border-radius:16px; text-align:left; cursor:pointer; color:var(--text);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  transition:border-color .15s, background-color .15s;
}
.srow:hover{ border-color:rgba(130,114,255,.55); }
.srow.is-sel{ border-color:var(--violet); background:rgba(130,114,255,.1); }
.s-t{
  height:48px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-style:italic; font-size:21px;
  background:rgba(255,255,255,.07);
}
.srow.is-live .s-t{ background:rgba(61,220,151,.16); color:var(--green); }
.srow.f1 .s-t{ background:linear-gradient(180deg,#FFE9A0,#F2B233); color:#2B1D00; }
.srow.f2 .s-t{ background:linear-gradient(180deg,#F7F9FD,#AAB5CA); color:#1A1F2B; }
.srow.f3 .s-t{ background:linear-gradient(180deg,#FFD0AA,#C97944); color:#2A1406; }
.s-body{ min-width:0; display:block; }
.s-top{ display:flex; align-items:center; gap:7px; }
.s-top b{ font-family:var(--font-d); font-weight:800; font-size:24px; line-height:1; font-variant-numeric:tabular-nums; }
.s-top small{ font-size:12.5px; color:var(--text-3); white-space:nowrap; }
.s-tag{
  margin-left:auto; padding:3px 8px; border-radius:7px; white-space:nowrap;
  font-family:var(--font-d); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(130,114,255,.18); color:var(--violet-soft);
}
.srow.is-live .s-tag{ background:rgba(61,220,151,.14); color:var(--green); }
.s-bar{ display:block; height:6px; margin-top:8px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.s-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#6A5AF0,#AFA4FF); }
.srow.f1 .s-bar i, .srow.f2 .s-bar i, .srow.f3 .s-bar i{ background:linear-gradient(90deg,var(--gold-2),var(--gold-hi)); }
.s-meta{ display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--text-3); }

/* gráfico de evolución */
.evo{ padding:16px; }
.evo-h{ display:grid; gap:12px; }
.evo-h .blk-sub{ margin-top:6px; }
.evo-chart{ margin-top:14px; min-height:190px; }
.evo-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.evo-chart .z-pod{ fill:rgba(255,201,61,.1); }
.evo-chart .z-top{ fill:rgba(130,114,255,.08); }
.evo-chart .g{ stroke:rgba(255,255,255,.08); stroke-width:1; }
.evo-chart .ax{ fill:var(--text-3); font:600 11px var(--font-b); }
.evo-chart .area{ fill:rgba(130,114,255,.12); }
.evo-chart .ln{ fill:none; stroke:var(--violet-soft); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.evo-chart .pt{ fill:var(--bg); stroke:var(--violet-soft); stroke-width:2; }
.evo-chart .pt.win{ fill:var(--gold); stroke:var(--gold); }
.evo-chart .pt.last{ fill:var(--violet-soft); stroke:#fff; stroke-width:2.5; }
.evo-chart .lbl{ fill:var(--text); font:800 17px var(--font-d); letter-spacing:.02em; }
.evo-leg{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--text-3); }
.evo-leg span{ display:inline-flex; align-items:center; gap:6px; }
.evo-leg span::before{ content:""; width:12px; height:12px; border-radius:4px; }
.evo-leg .lg-pod::before{ background:rgba(255,201,61,.35); }
.evo-leg .lg-top::before{ background:rgba(130,114,255,.35); }
.evo-leg .lg-win::before{ border-radius:50%; width:9px; height:9px; background:var(--gold); }
.evo-res{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:14px; color:var(--text-2); }
.evo-res:empty{ display:none; }
.evo-res b{ color:var(--text); font-family:var(--font-d); font-weight:800; font-size:18px; }

/* jornada a jornada */
.dlist{ display:grid; gap:8px; }
.drow{
  display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:9px 14px 9px 9px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.d-img img, .d-img .noimg{
  width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:var(--card-radius); background:var(--surface-2);
}
.d-img .noimg{ display:grid; place-items:center; font-size:22px; }
.d-body{ min-width:0; }
.d-kick{ font-family:var(--font-d); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.d-game{ display:block; font-family:var(--font-d); font-weight:800; font-size:19px; line-height:1.05; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin-top:3px; font-size:12.5px; color:var(--text-3); }
.d-pos{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--text); }
.d-pos .medal{ width:18px; height:18px; font-size:11px; }
.ptype{
  padding:1px 7px; border-radius:6px; background:rgba(130,114,255,.18); color:var(--violet-soft);
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.d-gem{ text-align:right; }
.d-gem b{ display:block; font-family:var(--font-d); font-weight:800; font-size:19px; line-height:1; font-variant-numeric:tabular-nums; color:var(--green); }
.d-gem i{ font-style:normal; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.drow.p1{ border-color:rgba(255,201,61,.45); background:linear-gradient(90deg, rgba(255,201,61,.13), rgba(255,201,61,.02) 70%); }
.drow.p2{ border-color:rgba(221,228,242,.28); }
.drow.p3{ border-color:rgba(239,163,107,.32); }
.drow.is-miss{ background:transparent; border-style:dashed; }
.drow.is-miss .d-img{ opacity:.35; filter:grayscale(1); }
.drow.is-miss .d-game{ color:var(--text-3); }
.drow.is-live{ border-color:rgba(61,220,151,.35); }
.drow.is-live .d-meta{ color:var(--green); font-weight:600; gap:7px; }

@media (max-width:380px){
  .drow{ grid-template-columns:60px minmax(0,1fr) auto; gap:10px; }
  .now-pos b{ font-size:70px; }
  .kpi b{ font-size:32px; }
}
@media (min-width:640px){
  .kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .kpis-6{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .seasons{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tchips{ margin:0; padding:0; flex-wrap:wrap; }
  .evo-h{ grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .now{ padding:22px; }
  .now-pos b{ font-size:104px; }
  .fame-card, .evo{ padding:22px; }
}
@media (min-width:900px){
  .st-top{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:stretch; }
  .st-top .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .st-search{ padding:24px; }
  .blk{ margin-top:72px; }
  .fame{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:12px; }
  .fame li:nth-child(-n+5){ grid-column:1; }
  .fame li:nth-child(n+6){ grid-column:2; }
  .fame{ grid-auto-flow:dense; grid-template-rows:repeat(5, auto); }
}

/* ==========================================================
   APARICIÓN SUAVE AL HACER SCROLL
   ========================================================== */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* ==========================================================
   PANTALLAS MÁS GRANDES
   ========================================================== */
@media (max-width:359px){
  :root{ --gutter:14px; }
  .brand-txt b{ font-size:19px; }
  .brand-txt small{ letter-spacing:.14em; }
  .hp-amt{ font-size:50px; }
  .cd-u b{ font-size:44px; }
  .pass-code{ font-size:38px; }
}

@media (min-width:480px){
  .hdr .lang{ display:flex; }
  .rail > *{ width:240px; }
}

@media (min-width:640px){
  :root{ --gutter:24px; }
  .ggrid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 18px; }
  .dice-points{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .scards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hrow{ grid-template-columns:150px minmax(0,1fr); gap:18px; }
  .ftr-grid{ grid-template-columns:1.5fr 1fr; }
  .ftr-social{ grid-column:2; grid-row:1; }
  .ftr-links-wrap{ grid-column:1 / -1; }
}

@media (min-width:900px){
  .sec{ padding:96px 0; }
  .sec-head{ margin-bottom:34px; }
  .sec-live{ padding-top:24px; }
  .page-sec{ padding:34px 0 90px; }

  .hero{ padding-top:56px; }
  .hero-grid{
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    align-items:end; gap:48px;
  }
  .hero-lead{ font-size:18px; }
  .hero-ctas{ flex-wrap:nowrap; }
  .hero-ctas .btn{ flex:0 0 auto; padding:0 30px; }
  .hero-prize{ margin-top:0; padding:24px; }
  .hp-amt{ font-size:84px; }
  .hp-lbl{ font-size:20px; }
  .marquee{ margin-top:56px; }
  .mq-row img{ width:210px; }

  .live-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; }
  .live-card{ padding:26px; display:flex; flex-direction:column; justify-content:center; }
  .cd-u b{ font-size:64px; }

  .stand-grid{ grid-template-columns:minmax(0,380px) minmax(0,1fr); align-items:start; gap:28px; }
  .stand-side{ position:sticky; top:calc(var(--hdr) + 20px); }

  .dice{
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
    gap:14px 48px; padding:48px;
  }
  .dice-art{ width:170px; height:170px; margin:0 20px 0 10px; }
  .dice-art img{ border-radius:42px; }
  .dice-x{ font-size:40px; }
  .dice-points{ grid-column:1 / -1; margin-top:18px; }

  .join{
    grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:22px 56px;
    grid-template-areas:"head pass" "steps pass";
    align-items:start;
  }
  .join .sec-head{ grid-area:head; }
  .join .pass{ grid-area:pass; }
  .join .join-steps{ grid-area:steps; }

  .ggrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .games-tools{ grid-template-columns:auto minmax(0,320px); justify-content:space-between; align-items:center; }
  .filters{ margin:0; padding:0; }

  .rules{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
  .art.full{ grid-column:1 / -1; }

  .chart{ padding:28px 28px 22px; }
  .bars{ height:220px; gap:6px; }
  .bars-x{ gap:6px; font-size:13px; }

  dialog.sheet{ margin:auto; width:min(560px, calc(100% - 48px)); }
  .sheet-in{ border-radius:26px; border-bottom:1px solid var(--line-2); padding:22px; }
  .sheet-grab{ display:none; }

  .ftr{ padding-bottom:48px; }
  .ftr-grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .ftr-social, .ftr-links-wrap{ grid-column:auto; grid-row:auto; }
}

@media (min-width:1080px){
  :root{ --hdr:72px; }
  .brand img{ width:42px; height:42px; }
  .brand-txt b{ font-size:23px; }
  .nav{ display:flex; align-items:center; gap:2px; margin-right:6px; }
  .nav a{
    padding:9px 12px; border-radius:10px;
    font-family:var(--font-d); font-weight:700; font-size:16px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
    transition:color .15s, background-color .15s;
  }
  .nav a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
  .nav a.on{ color:var(--text); background:rgba(255,255,255,.09); }
  /* el logo ya lleva al inicio: así caben todas las secciones */
  .nav a[data-i18n="nav.inicio"]{ display:none; }
  .menu-btn{ display:none; }
  .hdr-join{ display:inline-flex !important; }
  .menu{ display:none !important; }
  .sticky-cta{ display:none; }
}

@media (min-width:1080px) and (max-width:1279px){
  .nav a{ padding:9px 9px; letter-spacing:.06em; }
}

/* ==========================================================
   MOVIMIENTO REDUCIDO
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .mq-row{ animation:none !important; }
  .js .reveal{ opacity:1; transform:none; }
}