/* ═══════════════════════════════════════════════════════════════════════
   Tactical Ops Chile · Diseño v3 "Cell Broadcast" — base compartida
   Paleta del logo Torneo Cell · tipografía Barlow Condensed (estilo EA Sports)
   Incluye las reglas de la auditoría con skills (mobile-design,
   web-design-guidelines, fixing-accessibility, fixing-motion-performance).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#07090f; --bg-2:#0b0f18; --panel:#111624; --panel-2:#161d2e; --line:#20293b; --line-2:#2c374d;
  --txt:#f4f6fb; --txt-2:#aeb7c8; --txt-3:#717c92;
  --y:#ffc91f; --o:#ff8a1f; --r:#e8262f; --tt:#ff4b4b; --sf:#4aa8ff;
  --grad:linear-gradient(100deg,var(--r) 0%,var(--o) 52%,var(--y) 100%);
  --win:#38d17a; --lose:#e8262f;
  --f-c:"Barlow Condensed",system-ui,sans-serif; --f-b:"Barlow",system-ui,sans-serif;
  --max:1240px; --skew:-12deg; --z-nav:40; --z-top:60;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:rgba(255,201,31,.18)}
body{background:var(--bg);color:var(--txt);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a,button,input{touch-action:manipulation}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}   /* que .btn, .tag, etc. (display propio) no le ganen al atributo hidden */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:200;padding:12px 18px;background:var(--y);color:#111;font:800 16px var(--f-c);text-transform:uppercase}
.skip:focus{top:12px}
section[id],[id^="p-"]{scroll-margin-top:120px}
.mm [data-rv]{opacity:0}

/* ═══ Fondo "Pelea de ki detrás de las nubes" (elección del usuario 2026-10-06): shader WebGL con luces en las esquinas
   (#v3-ki, kiFondo() de v3-core.js) + brasas naranjas encima (#v3-fx). Esta capa oscurece parejo y un poco más el centro,
   donde va el contenido, para que el texto se lea siempre (contraste). Sin diagonales. ═══ */
/* capa semi oscura pareja al 65 % (pedido del usuario): el fondo se sigue viendo, más sutil */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(7,9,15,.65)}
/* desenfoque del fondo: 8 px (pedido del usuario). inset negativo para que el borde no se aclare */
.v3-ki{position:fixed;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);z-index:-3;pointer-events:none;filter:blur(8px)}
.v3-fx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
/* (2026-10-06) La franja + línea detrás del título de cada sección se eliminó a pedido del usuario. */

/* Etiqueta y botones inclinados */
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;font:800 italic 13px/1 var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:#111;background:var(--y);transform:skewX(var(--skew))}
.tag>*{transform:skewX(calc(var(--skew) * -1))}
.tag.red{background:var(--r);color:#fff} .tag.dark{background:var(--panel-2);color:var(--txt-2)} .tag.ghost{background:transparent;color:var(--txt-2);box-shadow:inset 0 0 0 1px var(--line-2)} .tag.green{background:var(--win);color:#04130a}
.live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;font:800 italic 16px/1 var(--f-c);letter-spacing:.06em;text-transform:uppercase;transform:skewX(var(--skew));transition:filter .2s,box-shadow .2s,color .2s;overflow:hidden}
.btn>*{transform:skewX(calc(var(--skew) * -1))}
.btn-main{background:var(--grad);color:#fff} .btn-main:hover{filter:brightness(1.08)}
.btn-out{box-shadow:inset 0 0 0 2px var(--line-2);color:#fff} .btn-out:hover{box-shadow:inset 0 0 0 2px var(--y);color:var(--y)}

/* Barra de progreso (Magic UI · Scroll Progress) con scroll-timeline nativo */
.sprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-top);background:var(--grad);transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline: scroll()){.sprog{animation:sprog linear both;animation-timeline:scroll(root)}}
@keyframes sprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Aviso de cookies (V3.cookies) */
.ckbar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:calc(var(--z-top) + 5);max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;background:var(--panel);border:1px solid var(--line-2);border-top:3px solid var(--y);box-shadow:0 24px 60px -12px rgba(0,0,0,.85)}
.ckbar>div:first-child{flex:1 1 320px}
.ckbar b#ck-t{display:block;font:900 italic 20px var(--f-c);text-transform:uppercase}
.ckbar p{margin-top:4px;font-size:14px;color:var(--txt-2)}
.ckbar a{color:var(--y);text-decoration:underline}
.ckbar .ck-b{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){.ckbar{bottom:calc(76px + env(safe-area-inset-bottom))} .ckbar .ck-b{width:100%} .ckbar .ck-b .btn{flex:1}}

/* Medallas de los servidores (V3.medallaHtml, 2026-10-08) */
.mdls{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.mdl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 8px 12px;background:var(--bg-2);border:1px solid var(--line)}
.mdl-i{width:68px;height:68px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.mdl-i .nm rect{fill:#e8262f;stroke:#07090f;stroke-width:1}
.mdl-i .nm text{fill:#fff;font:900 10px var(--f-c);text-anchor:middle}
.mdl-i .st{fill:#ffc91f;stroke:#5a3a00;stroke-width:.7}
.mdl-i.r0 .st{fill:#4b5366}
.mdl b{font:800 italic 16px/1.1 var(--f-c);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.mdl small{font-size:12.5px;line-height:1.3;color:var(--txt-3)}
.mdl small i{font-style:normal;opacity:.8}
.mdl .mdl-n{font:700 13px var(--f-b)}
.mdl .mdl-d{font-size:11.5px;line-height:1.3;color:var(--txt-3)}
.mdl.r3{border-color:rgba(255,201,31,.5);background:linear-gradient(180deg,rgba(255,201,31,.1),var(--bg-2) 60%)}
.mdl.r3 .mdl-n{color:var(--y)} .mdl.r2 .mdl-n{color:#c9d1dc} .mdl.r1 .mdl-n{color:#e0a26a}
.mdl.off .mdl-i{filter:grayscale(1) brightness(.55);opacity:.55}
.mdl.off b{color:var(--txt-3)}
/* Logros (V3.logros / V3.logroHtml) */
.logros{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.logro{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line)}
.logro img{width:40px;height:40px;filter:grayscale(1) brightness(.45)}
.logro b{display:block;font:800 italic 16px/1.1 var(--f-c);text-transform:uppercase;color:var(--txt-3)}
.logro small{display:block;font-size:12px;color:var(--txt-3);margin-top:2px}
.logro .lg-st{font:800 13px var(--f-c);color:var(--txt-3);font-variant-numeric:tabular-nums}
.logro.ok{border-color:rgba(255,201,31,.35)} .logro.ok img{filter:drop-shadow(0 4px 10px rgba(255,138,31,.45))}
.logro.ok b{color:#fff} .logro.ok .lg-st{color:var(--y)}
/* Desafíos I–V (2026-10-07): nivel en romano + barra de avance al siguiente nivel */
.logro{position:relative;overflow:hidden}
.logro .lg-niv{font-style:normal;font-size:13px;padding:0 5px;margin-left:4px;background:var(--y);color:#07090f;vertical-align:2px}
.logro .lg-bar{position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:linear-gradient(90deg,var(--o,#ff8a1f),var(--y))}
.logro:not(.ok) .lg-bar{background:var(--txt-3);opacity:.6}
.logro.max{border-color:var(--y);background:linear-gradient(135deg,rgba(255,201,31,.10),var(--bg-2) 60%)}
.logro.max .lg-bar{display:none}
.logros-g{margin:18px 0 8px;font:800 italic 14px var(--f-c);text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
/* Ver todos los logros (2026-10-08, Mi cuenta): botón hamburguesa que se vuelve ✕ al abrir */
.lg-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin-top:10px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--line);color:#fff;font:800 italic 16px var(--f-c);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-align:left}
.lg-toggle:hover{border-color:rgba(255,201,31,.45)} .lg-toggle:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.lg-toggle small{margin-left:auto;font:600 13px var(--f-b);text-transform:none;letter-spacing:0;color:var(--txt-3)}
.lg-ham{position:relative;width:20px;height:14px;flex:none}
.lg-ham i{position:absolute;left:0;width:100%;height:2px;background:var(--y);transition:transform .2s ease,opacity .2s ease}
.lg-ham i:nth-child(1){top:0} .lg-ham i:nth-child(2){top:6px} .lg-ham i:nth-child(3){top:12px}
.lg-toggle[aria-expanded="true"] .lg-ham i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lg-toggle[aria-expanded="true"] .lg-ham i:nth-child(2){opacity:0}
.lg-toggle[aria-expanded="true"] .lg-ham i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.lg-ham i{transition:none}}

/* Nav */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(7,9,15,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--y)}
.brand b{font:800 italic 19px/1 var(--f-c);text-transform:uppercase;white-space:nowrap}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{position:relative;padding:10px 12px;font:700 15px/1 var(--f-c);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--grad);transform:scaleX(0) skewX(var(--skew));transform-origin:left;transition:transform .25s}
.menu a:hover,.menu a[aria-current]{color:#fff} .menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1) skewX(var(--skew))}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px;white-space:nowrap}
@media (max-width:1400px){.nav .wrap{gap:20px} .menu a{padding:10px 9px} .menu a::after{left:9px;right:9px} .nav-cta .xs-hide{display:none}}
.crumbs{font:700 13px var(--f-c);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.crumbs a:hover{color:var(--y)}

/* Encabezados de sección */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sh h2{font:900 italic clamp(28px,3.4vw,44px)/.95 var(--f-c);text-transform:uppercase}
.sh h2 .tag{display:flex;width:fit-content;margin-bottom:12px}
.note{font:600 13px var(--f-c);letter-spacing:.06em;color:var(--txt-3);text-transform:uppercase}
.note b{color:var(--txt-2)}
.mascot{height:96px;margin:0 auto -22px 18px;align-self:flex-end;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));pointer-events:none}
.empty{padding:40px;text-align:center;background:var(--panel);border:1px dashed var(--line-2);color:var(--txt-3);font:700 18px var(--f-c);text-transform:uppercase;letter-spacing:.06em}
.empty img{height:120px;margin:0 auto 12px}
.sk{background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%);background-size:300% 100%;animation:sk 1.4s infinite;min-height:120px}
@keyframes sk{to{background-position:-150% 0}}

/* Tablas */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
.table{width:100%;border-collapse:collapse;font-family:var(--f-c)}
.table th{padding:12px 10px;font:700 13px var(--f-c);letter-spacing:.14em;color:var(--txt-3);text-transform:uppercase;text-align:center;border-bottom:1px solid var(--line);background:var(--bg-2);white-space:nowrap}
.table th.l,.table td.l{text-align:left}
.table td{padding:10px;text-align:center;font-weight:700;font-size:18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--panel-2)}
.pos{font:900 italic 22px var(--f-c);color:var(--txt-3);width:44px}
.pts{font:900 italic 24px var(--f-c)}
.dif.p,.good{color:var(--win)} .dif.n,.bad{color:var(--lose)}
.plink{color:#fff;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.plink:hover{color:var(--y);border-bottom-color:var(--y)}
.mvp-star{display:inline-block;margin-left:6px;padding:1px 6px;font:800 italic 11px var(--f-c);letter-spacing:.08em;color:#111;background:var(--y);transform:skewX(var(--skew));vertical-align:middle}
.form i{width:18px;height:18px;display:inline-grid;place-items:center;font:800 11px/1 var(--f-c);font-style:normal;color:#fff;transform:skewX(var(--skew))}
.form .G{background:var(--win)} .form .E{background:#5b6478} .form .P{background:var(--lose)}

/* Scorebug */
.bug{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border:1px solid var(--line);transition:border-color .2s;
  background:linear-gradient(90deg,rgba(17,22,36,.92) 0%,rgba(17,22,36,.45) 50%,rgba(17,22,36,.92) 100%),var(--map,none) center/cover,var(--panel)}
a.bug:hover{border-color:var(--line-2)}
.bug .t{display:flex;align-items:center;gap:10px;padding:11px 14px;font:800 italic 18px var(--f-c);text-transform:uppercase;min-width:0}
.bug .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bug .t.b{flex-direction:row-reverse;text-align:right}
.bug .t img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.bug .t.lose{color:var(--txt-3)}
.bug .sc{display:flex;gap:2px;font:900 italic 26px/1 var(--f-c);font-variant-numeric:tabular-nums}
.bug .sc i{padding:9px 12px;background:var(--bg-2);font-style:inherit;min-width:44px;text-align:center} .bug .sc i.w{background:var(--grad);color:#fff}
.bug .meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;padding:6px 14px;background:rgba(11,15,24,.92);border-top:1px solid var(--line);font:600 12px var(--f-c);letter-spacing:.1em;color:var(--txt-3);text-transform:uppercase}
.bug .meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}   /* mapa y fecha en una línea; si no caben, se cortan con … */

/* Carta tipo Ultimate Team (Aceternity 3D Card + Magic UI Glare) */
.fut{position:relative;aspect-ratio:3/4.15;padding:22px 20px 18px;display:flex;flex-direction:column;isolation:isolate;color:#fff;
  clip-path:polygon(12% 0,88% 0,100% 7%,100% 88%,50% 100%,0 88%,0 7%);clip-path:url(#fut-shape);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
/* marco metálico (::before, borde) + cara interior con textura // (::after); cada variante define sus colores */
.fut{--edge:linear-gradient(160deg,#6b7896,#262e42 45%,#4a5672);--face:linear-gradient(160deg,#283149,#121826 65%);--stripe:rgba(255,255,255,.05);--slash:rgba(255,201,31,.10)}
.fut.gold{color:#2a1a00;--edge:linear-gradient(160deg,#fff4b8,#c9860c 48%,#ffe07a);--face:linear-gradient(160deg,#ffe58a,#ffb423 46%,#c27a0c);--stripe:rgba(110,60,0,.13);--slash:rgba(255,248,205,.55)}
.fut.silver{color:#141a24;--edge:linear-gradient(160deg,#ffffff,#8a94a6 48%,#eef1f6);--face:linear-gradient(160deg,#f3f6fa,#bcc5d2 50%,#7a8597);--stripe:rgba(20,30,50,.11);--slash:rgba(255,255,255,.6)}
.fut::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--edge)}
.fut::after{content:"";position:absolute;inset:5px;z-index:-1;clip-path:inherit;
  background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.28),transparent 55%),
    linear-gradient(125deg,transparent 46%,var(--slash) 46% 52%,transparent 52% 57%,var(--slash) 57% 63%,transparent 63%) 0 0/100% 62% no-repeat,   /* franjas // grandes detrás del retrato */
    repeating-linear-gradient(115deg,transparent 0 9px,var(--stripe) 9px 11px),var(--face)}
.fut .glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:overlay;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.75),transparent 55%)}
.fut:hover .glare{opacity:1}

/* Diálogo (video / imagen) — Magic UI · Hero Video Dialog */
/* Confirmación v3 (V3.confirmar) */
dialog.vconf{margin:auto;width:min(92vw,440px);padding:24px 24px 20px;border:0;background:var(--panel);color:var(--txt);box-shadow:inset 0 3px 0 var(--y),0 0 0 1px var(--line-2),0 30px 80px rgba(0,0,0,.7)}
dialog.vconf::backdrop{background:rgba(3,4,8,.75);backdrop-filter:blur(4px)}
dialog.vconf h2{font:900 italic 26px/1.05 var(--f-c);overflow-wrap:anywhere}   /* sin mayúsculas: no cambiar cómo se escribe un nick */
dialog.vconf p{margin-top:10px;color:var(--txt-2);font-size:15px;line-height:1.5}
dialog.vconf .acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px}
dialog.vconf .btn{min-height:44px}
dialog.vconf .acts.tres{flex-direction:column-reverse;align-items:stretch}   /* DOM: Cancelar · otro · acción → acción arriba */
dialog.vconf .acts.tres .btn{justify-content:center;width:100%}
.btn-peligro{background:var(--r);color:#fff}
.btn-peligro:hover,.btn-peligro:focus-visible{filter:brightness(1.12)}
@media (prefers-reduced-motion:no-preference){dialog.vconf[open]{animation:vconf .16s ease-out}}
@keyframes vconf{from{opacity:0;transform:translateY(8px)}}
dialog.vd{margin:auto;width:min(92vw,1100px);border:0;padding:0;background:#000;overflow:visible;box-shadow:0 30px 80px rgba(0,0,0,.7);overscroll-behavior:contain}
dialog.vd::backdrop{background:rgba(3,4,8,.88);backdrop-filter:blur(6px)}
dialog.vd iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
dialog.vd img{width:100%;max-height:82vh;object-fit:contain}
dialog.vd .x{position:absolute;top:-52px;right:0;width:44px;height:44px;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* Menú móvil: v3-core.js arma la hamburguesa y el panel a partir de .menu */
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line-2);color:#fff}
.drawer{position:fixed;inset:0;z-index:calc(var(--z-top) + 10);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;
  padding:max(14px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));isolation:isolate;
  /* mismo fondo que la web (brasas de ki): casi opaco para que se lea, y deja ver las chispas del canvas #v3-fx detrás.
     Sin la grilla de puntos ni la franja inclinada del fondo anterior. */
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,138,31,.07),transparent 70%),radial-gradient(ellipse 120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.55) 100%),rgba(7,9,15,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.drawer[hidden]{display:none}
.dw-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 14px;border-bottom:1px solid var(--line)}
.dw-hd .brand b{font-size:18px}
.drawer .x{width:46px;height:46px;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2)}
.drawer .x:hover{box-shadow:inset 0 0 0 1px var(--y);color:var(--y)}
.dw-body{flex:1;overflow-y:auto;padding:6px 20px 16px}
.dw-lbl{margin:18px 0 6px;font:800 italic 12px var(--f-c);letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.dw-main a{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:4px 6px 4px 12px;border-bottom:1px solid var(--line);color:var(--txt-2)}
.dw-main a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--grad);transform:scaleY(0) skewX(var(--skew));transition:transform .2s}
.dw-n{width:24px;font:800 italic 14px var(--f-c);color:var(--txt-3);font-variant-numeric:tabular-nums}
.dw-t{flex:1;font:900 italic 26px/1 var(--f-c);text-transform:uppercase}
.dw-main a svg{width:18px;height:18px;color:var(--txt-3);transition:transform .2s,color .2s}
.dw-main a:active,.dw-main a:hover,.dw-main a:focus-visible{color:#fff;background:rgba(255,201,31,.05)}
.dw-main a:hover svg,.dw-main a:focus-visible svg{color:var(--y);transform:translateX(3px)}
.dw-main a[aria-current]{color:var(--y)} .dw-main a[aria-current]::before{transform:scaleY(1) skewX(var(--skew))} .dw-main a[aria-current] .dw-n{color:var(--y)}
.dw-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dw-acc a{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:88px;background:var(--panel);border:1px solid var(--line-2);color:var(--txt-2);transition:border-color .2s,color .2s}
.dw-acc a svg{width:24px;height:24px;color:var(--y)}
.dw-acc b{font:900 italic 19px/1 var(--f-c);text-transform:uppercase}
.dw-acc a:hover,.dw-acc a:focus-visible,.dw-acc a[aria-current]{border-color:var(--y);color:#fff}
.dw-ft{padding:14px 20px 0;border-top:1px solid var(--line)}
.dw-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dw-cta .btn{padding:0 10px;font-size:15px}
.dw-soc{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;font:700 13px var(--f-c);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.dw-soc a{display:inline-flex;align-items:center;min-height:44px;color:var(--txt-2)} .dw-soc a:hover{color:var(--y)}
.dw-soc span{margin-left:auto}
@media (prefers-reduced-motion:no-preference){
  .drawer:not([hidden]){animation:dw-in .3s cubic-bezier(.2,.8,.2,1)}
  .drawer:not([hidden]) .dw-main a{animation:dw-row .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(60ms + var(--i) * 35ms)}
}
@keyframes dw-in{from{opacity:0;transform:translateX(24px)}}
@keyframes dw-row{from{opacity:0;transform:translateX(16px)}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:var(--z-top);transform:translateX(-50%) skewX(var(--skew));padding:12px 22px;width:max-content;max-width:min(92vw,560px);text-align:center;background:var(--grad);color:#fff;font:800 italic 16px var(--f-c);text-transform:uppercase;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

/* Barra de estadísticas tipo transmisión */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border:1px solid var(--line)}
/* sin separadores entre celdas; la franja inclinada va dentro de cada celda (antes se salía por el borde) */
.statbar>div{position:relative;padding:18px 22px 18px 40px}
.statbar>div::before{content:"";position:absolute;left:20px;top:20px;bottom:20px;width:4px;background:var(--grad);transform:skewX(var(--skew))}
.statbar dt{font:700 12px var(--f-c);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.statbar dd{font:800 italic 40px/1.05 var(--f-c);font-variant-numeric:tabular-nums}
.statbar dd small{font:600 14px var(--f-b);color:var(--txt-3);font-style:normal;margin-left:6px}

/* Clan en tablas, retirados y forma (últimos 5) */
.clan{display:flex;align-items:center;gap:12px;font-size:19px;text-transform:uppercase}
.clan img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--bg-2)}
.out td{opacity:.42}
/* Palomita de verificado junto al nick (V3.marcarVerificados) */
.vtick{display:inline-block;width:clamp(14px,.5em,28px);height:clamp(14px,.5em,28px);margin-left:clamp(4px,.18em,10px);vertical-align:middle;flex:none;transform:none;cursor:help;line-height:0}
.vtick+.vtick{margin-left:.12em}
.vtick svg{width:100%;height:100%;display:block}
.badge{font:700 11px var(--f-c);letter-spacing:.12em;color:var(--r);box-shadow:inset 0 0 0 1px var(--r);padding:1px 6px;text-transform:uppercase}
.form{display:flex;gap:3px;justify-content:center}
.bug .sc .vsx{font-size:18px;color:var(--txt-3);padding:9px 18px}

/* Próximo partido (cara a cara) */
.matchup{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:28px 30px;
  background:linear-gradient(90deg,rgba(17,22,36,.92) 0%,rgba(17,22,36,.5) 50%,rgba(17,22,36,.92) 100%),var(--map,none) center/cover,var(--panel);border:1px solid var(--line-2);overflow:hidden;isolation:isolate}
.matchup .side{display:flex;align-items:center;gap:16px;min-width:0}
.matchup .side.b{flex-direction:row-reverse;text-align:right}
.matchup .logo{width:76px;height:76px;flex:none;border-radius:50%;background:var(--bg-2) center/cover}
.matchup .side.a .logo{box-shadow:0 0 0 3px var(--r)} .matchup .side.b .logo{box-shadow:0 0 0 3px var(--y)}
.matchup .nm{font:900 italic clamp(24px,2.6vw,36px)/.9 var(--f-c);text-transform:uppercase}
.matchup .tg{font:700 13px var(--f-c);letter-spacing:.16em;color:var(--txt-3);text-transform:uppercase}
.matchup .mid{text-align:center}
.matchups{display:grid;gap:12px}
a.matchup{transition:border-color .2s} a.matchup:hover{border-color:var(--y)}
.late.now{display:inline-flex;align-items:center;gap:6px;color:#fff;background:var(--r);box-shadow:none}
.matchup .vs{font:900 italic 46px/.8 var(--f-c);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.matchup .when{font:800 italic 18px var(--f-c);text-transform:uppercase;margin-top:8px}
.matchup .where{font:600 13px var(--f-c);letter-spacing:.08em;color:var(--txt-3);text-transform:uppercase}
.late{display:inline-block;margin-top:8px;padding:3px 10px;font:800 italic 12px var(--f-c);letter-spacing:.1em;text-transform:uppercase;color:var(--o);box-shadow:inset 0 0 0 1px var(--o);transform:skewX(var(--skew))}
/* Si el contenedor (.cq o uno con container-type) es angosto, cada equipo se apila: logo sobre nombre */
.cq{container-type:inline-size}
@container (max-width:860px){
  .matchup .side,.matchup .side.b{flex-direction:column;text-align:center;gap:10px}
  .matchup{padding:24px 18px}
}
/* Magic UI · Border Beam: haz de luz que recorre el borde */
@property --bb{syntax:"<angle>";inherits:false;initial-value:0deg}
.beam::after{content:"";position:absolute;inset:0;z-index:2;padding:2px;pointer-events:none;background:conic-gradient(from var(--bb),transparent 0 80%,var(--o) 90%,var(--y) 95%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bb 6s linear infinite}
@keyframes bb{to{--bb:360deg}}

/* Magic UI · Light Rays (detrás de Shenlong / Cell) y esferas flotando */
.rays{position:absolute;z-index:-1;pointer-events:none;opacity:.32;inset:-18%;
  background:repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,214,90,.55) 0deg 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 46%,#000 0,rgba(0,0,0,.6) 28%,transparent 62%);mask:radial-gradient(circle at 50% 46%,#000 0,rgba(0,0,0,.6) 28%,transparent 62%);
  animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-10px)}}

/* Menú "Accesos": se despliega al pasar el mouse, con clic o con teclado (v3-core.js maneja aria-expanded y Esc) */
.dd{position:relative}
.dd-btn{position:relative;display:inline-flex;align-items:center;gap:4px;padding:10px 12px;font:700 15px/1 var(--f-c);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.dd-btn svg{width:14px;height:14px;transition:transform .2s}
.dd-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--grad);transform:scaleX(0) skewX(var(--skew));transform-origin:left;transition:transform .25s}
.dd:hover .dd-btn,.dd.open .dd-btn,.dd.cur .dd-btn{color:#fff}
.dd:hover .dd-btn::after,.dd.open .dd-btn::after,.dd.cur .dd-btn::after{transform:scaleX(1) skewX(var(--skew))}
.dd:hover .dd-btn svg,.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:5;min-width:220px;padding:6px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 22px 40px -12px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* puente: el mouse no "se cae" entre el botón y el menú */
.dd-menu::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.dd:hover .dd-menu,.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.menu .dd-menu a{display:flex;align-items:center;min-height:44px;padding:10px 14px;font:800 italic 17px/1 var(--f-c);color:var(--txt-2)}
.menu .dd-menu a::after{display:none}
.menu .dd-menu a:hover,.menu .dd-menu a:focus-visible{background:rgba(255,201,31,.08);color:var(--y)}
.menu .dd-menu a[aria-current]{color:var(--y);box-shadow:inset 3px 0 0 var(--y)}

/* Pantallas de inicio de sesión (capitanes-v3, login-v3): arte + tarjeta */
.login{position:relative;flex:1;display:flex;align-items:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 80% at 25% 45%,rgba(255,138,31,.14),transparent 60%),rgba(7,9,15,.35)}
.login::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-8%;width:44%;z-index:-1;background:var(--grad);opacity:.8;transform:skewX(var(--skew));
  -webkit-mask:linear-gradient(90deg,#000 40%,transparent);mask:linear-gradient(90deg,#000 40%,transparent)}
.login .wrap{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:48px;align-items:center;width:100%;padding-block:48px}
.login-art{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:28px;isolation:isolate}
.login-art .rays{inset:-30% -10% -30% -30%}
.login-art .hero-dbz{height:min(52vh,420px);filter:drop-shadow(0 25px 30px rgba(0,0,0,.65))}
.login-art .ball{position:absolute;width:52px;left:4%;top:6%;filter:drop-shadow(0 8px 14px rgba(255,138,31,.5));animation:float 5s ease-in-out infinite}
.login-art h1{font:900 italic clamp(44px,5.6vw,80px)/.86 var(--f-c);text-transform:uppercase;margin:16px 0 14px}
.login-art h1 span{display:block;-webkit-text-stroke:2px var(--y);color:transparent}
.login-art p{max-width:34ch;color:var(--txt-2);font-size:17px}
.login-art ul{list-style:none;display:grid;gap:8px;margin-top:20px}
.login-art li{display:flex;gap:10px;align-items:center;font:700 15px var(--f-c);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.login-art li b{font:900 italic 20px var(--f-c);color:var(--o);width:26px}

.auth-card{position:relative;padding:30px 30px 28px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
.auth-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.auth-card h2{font:900 italic 32px/1 var(--f-c);text-transform:uppercase;margin:12px 0 4px}
.auth-card .sub{color:var(--txt-3);font-size:14px;margin-bottom:22px}
.auth-card .fld{margin-bottom:16px}
.auth-card label{display:block;margin-bottom:6px;font:800 13px var(--f-c);letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.auth-card input{width:100%;min-height:50px;padding:0 14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);font:600 16px var(--f-b)}
.auth-card input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--y)}
.auth-card .btn{width:100%;margin-top:8px}
.auth-card .btn:disabled{opacity:.55;cursor:wait}
#login-error{margin-top:16px;padding:12px 14px;background:rgba(232,38,47,.1);border-left:3px solid var(--r);color:#ffb4b4;font-weight:600;font-size:14px}
.auth-card .help{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--txt-3)}
.auth-card .help a{color:var(--y)}


/* Compartir: íconos chicos arriba a la derecha de las secciones (V3.shr). Se ven de 36 px; el área táctil es de 44 px. */
.shr{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.shr-l{font:700 11px var(--f-c);letter-spacing:.16em;color:var(--txt-3);text-transform:uppercase;margin-right:2px}
.shr-b{position:relative;display:grid;place-items:center;width:36px;height:36px;color:var(--txt-2);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);transform:skewX(var(--skew));transition:color .15s,box-shadow .15s}
.shr-b::after{content:"";position:absolute;inset:-4px}
.shr-b .ico{width:17px;height:17px;transform:skewX(calc(var(--skew) * -1))}
.shr-b:hover,.shr-b:focus-visible{color:var(--y);box-shadow:inset 0 0 0 1px var(--y)}
.shr-b[data-sh=wa]:hover,.shr-b[data-sh=wa]:focus-visible{color:#fff;background:var(--grad);box-shadow:none}
.sh .shr{align-self:flex-end}
@media (max-width:640px){.shr-l{display:none}}

/* Aviso de partido EN VIVO (lo arma enVivo() de v3-core.js dentro de la barra fija) */
.envivo{border-top:1px solid rgba(232,38,47,.45);background:linear-gradient(90deg,rgba(232,38,47,.22),rgba(7,9,15,.6) 45%,rgba(7,9,15,.6))}
.envivo[hidden]{display:none}
.envivo .wrap{display:grid;gap:0}
.lv-item{display:flex;align-items:center;gap:4px;min-height:46px}
.lv-item+.lv-item{border-top:1px solid var(--line)}
.lv{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:44px;font:700 15px var(--f-c);letter-spacing:.04em;text-transform:uppercase}
.lv-tag{display:inline-flex;align-items:center;gap:7px;flex:none;padding:3px 10px;background:var(--r);color:#fff;font:800 italic 12px var(--f-c);letter-spacing:.12em;transform:skewX(var(--skew))}
.lv-t{display:inline-flex;align-items:center;gap:7px;min-width:0}
.lv-t img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.lv-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-t .sm-n{display:none}
.lv-sc{flex:none;font:900 italic 22px/1 var(--f-c);font-variant-numeric:tabular-nums}
.lv-sc i{display:inline-block;font-style:inherit;padding:0 4px}
.lv-sc .bump{color:var(--y);animation:lv-bump .9s ease-out}
@keyframes lv-bump{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.lv-meta{color:var(--txt-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-go{margin-left:auto;flex:none;color:var(--y);white-space:nowrap}
.lv:hover .lv-go,.lv:focus-visible .lv-go{text-decoration:underline}
.lv-x{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--txt-3)}
.lv-x:hover{color:#fff}
.lv-x .ico{width:18px;height:18px}
@media (max-width:900px){.lv-meta{display:none}}
@media (max-width:640px){
  .lv{gap:9px;font-size:14px} .lv .lg-n{display:none} .lv-t .sm-n{display:inline} .lv-go{font-size:18px}
  .lv-tag{padding:3px 8px;font-size:11px}
}

/* Footer y dock móvil */
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--txt-3);font:600 14px var(--f-c);letter-spacing:.06em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:18px} footer a:hover{color:var(--y)}
.dock{display:none}
/* Botón de cuenta de la barra de arriba (2026-10-08, auditoría móvil): ícono + "Iniciar sesión" / "Entrar" (celular) / "Mi cuenta" */
.cta-cuenta>span{display:inline-flex;align-items:center;gap:7px}
.cta-cuenta .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.m-show{display:none}
/* Objetivos táctiles de 44 px (mobile-design / web-design-guidelines): compartir, filtros, nicks en tablas y listas */
@media (pointer:coarse){
  .shr a,.shr button{min-width:44px;min-height:44px}
  .filters button,.envivo a,.envivo button{min-height:44px}
  table td a,.plink{display:inline-flex;align-items:center;min-height:44px}
}
.offscreen,.offscreen *,.offscreen::before,.offscreen::after,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

@media (pointer:coarse){button.note,a.note,.menu a,.crumbs a,footer a,.tabbtn{min-height:44px;display:inline-flex;align-items:center}}
/* 7 secciones + 2 botones no caben bajo ~1180 px: desde ahí, hamburguesa */
@media (max-width:1180px){
  .menu{display:none}
  .burger{display:inline-flex} .menu+*{margin-left:auto}   /* lo que sigue al menú (botones o hamburguesa) se va a la derecha */
}
@media (max-width:1080px){
  .mascot{display:none}
  .login .wrap{grid-template-columns:1fr;max-width:560px} .login-art{grid-template-columns:1fr} .login-art .hero-dbz,.login-art .ball{display:none} .login::before{width:80%;opacity:.45}
  .statbar{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .auth-card{padding:24px 18px 22px} .login .wrap{padding-block:28px}
  .nav .wrap{gap:10px} .brand b{font-size:17px} .nav .btn{padding:0 14px} .nav-cta .adm{display:none}   /* Administración queda en el menú */
  /* celular: arriba solo la marca, la cuenta y el menú; Discord queda en el menú y el pie (antes se repetía 2-3 veces) */
  .nav-cta a[href*="discord"]{display:none} .nav-cta a.cta-cuenta{display:inline-flex} .m-hide{display:none} .m-show{display:inline}
  .nav .brand{min-width:0} .nav .brand b{white-space:normal;line-height:1;max-width:8.5em}   /* la marca en 2 líneas si no cabe junto al botón */
  .nav .burger{flex:none;min-width:44px;min-height:44px} .nav-cta a.cta-cuenta{min-height:44px;padding:0 12px}
  .statbar dd{font-size:32px} .statbar>div{padding:14px 12px 14px 30px} .statbar>div::before{left:14px;top:16px;bottom:16px}
  .matchup{grid-template-columns:1fr;text-align:center;padding:22px 16px}
  .matchup .side,.matchup .side.b{flex-direction:column;text-align:center;gap:10px}
  .toast{bottom:calc(70px + env(safe-area-inset-bottom))}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);background:rgba(7,9,15,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;font:800 italic 13px var(--f-c);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
  .dock a:active{color:var(--y);background:rgba(255,201,31,.06)}
  .dock a.hot{color:#fff;background:var(--grad)}
  .dock a.on{color:var(--y);box-shadow:inset 0 3px 0 var(--y)}
  .dock .ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .dock svg{width:20px;height:20px}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Selector de ranking (2026-10-07): Global (servidores) | KI — ranking.html y ki.html */
.rsw{display:inline-flex;gap:6px;margin:4px 0 14px}
.rsw a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);font:800 italic 16px var(--f-c);text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2);transform:skewX(var(--skew))}
.rsw a:hover{color:#fff}
.rsw a[aria-current="page"]{background:var(--y);color:#07090f;box-shadow:none}