@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(/e/4697e3a56df19de6.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(/e/2c3ec93d1781c693.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{color-scheme:dark;--bg:#0b0f16;--bg2:#0e1420;--card:#151c28;--card2:#1b2432;--bd:#26303f;
--bd2:#33415a;--tx:#e8eef6;--mut:#8e9bad;--ac:#3fd07a;--ac2:#5aa9ff;
--oro:#f2c33d;--pla:#c9d4e0;--bro:#d1874a;--rojo:#ff6b6b;
/* dorado de la TIENDA, el mismo de supercraft.es. Aparte de --oro a proposito:
   --oro aqui quiere decir «primer puesto». */
--tienda:#ffb300}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);
font:15px/1.55 'Exo 2',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* 🪤 Medido con fontTools, no a ojo: la altura de la x de Exo 2 es 0,487 em y
   la de Segoe UI 0,500, asi que al mismo tamano se veria un 3% mas pequena.
   `font-size-adjust` iguala la altura de la x en vez de tocar el tamano, y de
   paso hace que la fuente de respaldo se vea IGUAL si Exo 2 no llega a cargar,
   que es el salto feo de siempre. */
font-size-adjust:0.5;
/* 🪤 Y esta linea no es un adorno. Las cifras de Segoe UI y Roboto son
   TABULARES por defecto; las de Exo 2 son PROPORCIONALES (miden entre 398 y
   615 unidades). Sin esto, al cambiar de fuente los numeros de las tablas
   empezarian a bailar de fila en fila. Exo 2 trae la funcion `tnum`, asi que
   se pide para todo el sitio: aqui se leen cifras en columna en casi cada
   pagina, y que alineen importa mas que la estetica del texto corrido. */
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;
background-image:radial-gradient(1100px 460px at 50% -180px,#19212e 0%,transparent 70%)}
a{color:inherit;text-decoration:none}
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
img{max-width:100%}
/* Las skins son pixeles de 8x8 de verdad: si el navegador las suaviza al
   escalarlas quedan borrosas y dejan de parecer Minecraft. */
.av,.cuerpo{image-rendering:pixelated;image-rendering:crisp-edges}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--ac);color:#04220f;
padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;z-index:50}
.saltar:focus{left:0}
header{border-bottom:1px solid var(--bd);background:rgba(11,15,22,.86);
backdrop-filter:blur(9px);position:sticky;top:0;z-index:9}
header .wrap{display:flex;align-items:center;gap:22px;height:60px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.4px}
.logo span{color:var(--ac)}
nav{display:flex;gap:6px;margin-left:auto;font-size:14px}
nav a{color:var(--mut);padding:6px 11px;border-radius:6px}
nav a:hover{color:var(--tx);background:var(--card)}
nav a.on{color:var(--tx);background:var(--card);box-shadow:inset 0 0 0 1px var(--bd)}
h1{font-size:30px;font-weight:800;letter-spacing:-.8px;margin:28px 0 5px}
h2{font-size:17px;font-weight:700;margin:0 0 13px;letter-spacing:-.2px}
.sub{color:var(--mut);font-size:14px;margin-bottom:22px}
.sub b{color:var(--tx);font-weight:600}
.busca{display:flex;gap:9px;margin:20px 0 30px;position:relative}
.busca input{flex:1;-webkit-appearance:none;appearance:none;background:var(--card);border:1px solid var(--bd2);border-radius:10px;
padding:14px 16px;color:var(--tx);font-size:16px;outline:none;min-width:0}
.busca input::placeholder{color:var(--mut)}
.busca input:focus{border-color:var(--ac2);box-shadow:0 0 0 3px rgba(90,169,255,.14)}
.busca button{background:var(--ac);border:0;border-radius:10px;padding:0 26px;color:#04220f;
font-weight:700;font-size:15px;cursor:pointer}
.busca button:hover{filter:brightness(1.08)}
.suge{position:absolute;top:56px;left:0;right:0;background:var(--card);border:1px solid var(--bd2);
border-radius:10px;overflow:hidden;overflow-y:auto;overscroll-behavior:contain;
max-height:min(52vh,340px);z-index:20;display:none;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.suge a{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--bd)}
.suge a:last-child{border:0}.suge a:hover,.suge a.sel{background:var(--card2)}
.rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:13px;align-items:start}
.card{background:linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%);
border:1px solid var(--bd);border-radius:10px;padding:17px;
transition:border-color .13s,transform .13s}
a.card:hover{border-color:var(--ac);transform:translateY(-2px)}
.card h3{font-size:16px;font-weight:700;margin-bottom:3px}
.card p{color:var(--mut);font-size:13px}
.card.cjug{display:flex;align-items:center;gap:13px}
.card.gris{opacity:.42}
.card .lider{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;
border-top:1px solid var(--bd)}
.card .lider .lt{display:flex;flex-direction:column;min-width:0}
.card .lider b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.card .lider small{color:var(--ac);font-weight:600;font-size:12px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;
letter-spacing:.7px;padding:0 10px 10px}
td{padding:7px 10px;border-top:1px solid var(--bd)}
tr.yo{background:#132437}
tr.yo td:first-child{box-shadow:inset 3px 0 0 var(--ac2)}
.pos{width:82px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.sube{color:var(--ac);font-size:12px;font-weight:700;margin-left:5px;
font-variant-numeric:tabular-nums}
.baja{color:var(--rojo);font-size:12px;font-weight:700;margin-left:5px;
font-variant-numeric:tabular-nums}
.pos.p1{color:var(--oro)}.pos.p2{color:var(--pla)}.pos.p3{color:var(--bro)}
/* 🪤 En `tr:has(.p1) td{background:gradient}` el degradado se pinta UNA VEZ POR
   CELDA, asi que se repetia tres veces a lo ancho de la fila. Va en el <tr>. */
tr:has(.p1){background:linear-gradient(90deg,rgba(242,195,61,.10),transparent 60%)}
tr:has(.p2){background:linear-gradient(90deg,rgba(201,212,224,.08),transparent 60%)}
tr:has(.p3){background:linear-gradient(90deg,rgba(209,135,74,.09),transparent 60%)}
tbody tr:hover{background:var(--card2)}
.val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.de{color:var(--mut);font-weight:400;font-size:13px}
.ic{vertical-align:-2px;margin-right:7px;opacity:.55;flex:0 0 auto}
a:hover>.ic,tr:hover .ic{opacity:.9}
.est{display:inline-flex;align-items:center}
.ic.ich{opacity:.75;color:var(--m,var(--mut));margin-right:0}
.ic.ic1{width:24px;height:24px;opacity:.8;color:var(--m);margin-right:0}
.chip .ic{margin-right:5px;opacity:.5}
table.vs td.etq .ic{margin-right:5px}
.pct{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;
color:var(--m,var(--ac));border:1px solid currentColor;border-radius:16px;
padding:0 6px;opacity:.85;vertical-align:1px}
.medl{display:flex;gap:7px;align-items:center}
.med{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
border-radius:6px;font-size:14px;font-weight:800;color:#0b0f16}
.med.m1{background:var(--oro)}.med.m2{background:var(--pla)}.med.m3{background:var(--bro)}
.jug{display:flex;align-items:center;gap:10px;min-width:0}
.jug a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jug a:hover{color:var(--ac2)}
.av{border-radius:6px;flex:0 0 auto;display:block}
.bd{font-size:10px;font-weight:700;color:#7fe3ff;background:#0d2b39;border:1px solid #1a5570;
border-radius:6px;padding:1px 6px;letter-spacing:.3px;flex:0 0 auto}
.bloq{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:17px;margin-bottom:15px}
.bloq.mod{border-left:3px solid var(--m,var(--bd))}
.bloq.mod h2 a{color:var(--m,var(--tx))}
.card.mod{border-top:2px solid var(--m,var(--bd))}
a.card.mod:hover{border-color:var(--m)}
a.card:active{transform:translateY(0)}
.busca button:active{filter:brightness(.94)}
.pod:active{transform:translateY(-1px)}
.chip:active{background:var(--card2)}
.pag a:active{background:var(--card2)}
.card.mod h3{color:var(--m)}
.tmod{display:flex;align-items:center;gap:12px}
.tmod:before{content:"";width:5px;height:30px;border-radius:999px;background:var(--m);flex:0 0 auto}
.bloq h2,.bloq h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
font-size:17px;font-weight:700;margin:0 0 13px;letter-spacing:-.2px}
.bloq h2 small,.bloq h3 small{color:var(--mut);font-weight:500;font-size:12px}
.bloq h2 .mas,.bloq h3 .mas{margin-left:auto;font-size:13px;color:var(--ac2);font-weight:600}
.bloq h2 .mas:hover,.bloq h3 .mas:hover{text-decoration:underline}
h2.sec{margin-top:30px}
.cifra small .ic{margin-right:5px;opacity:.5;vertical-align:-2px}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:15px;
/* 🪤 Sin esto, la rejilla estira TODAS las tarjetas a la altura de la mas alta.
   En la ficha de un jugador que tiene 9 estadisticas en una modalidad y UNA en
   las otras dos, eso dejaba dos cajones de 490 px casi vacios, con el borde
   dibujado alrededor de la nada. Cada tarjeta mide lo que tiene dentro.
   🪤 OJO: en el Mercado el arreglo del mismo sintoma fue el CONTRARIO
   (`align-items:stretch`). Alli las dos columnas eran mitades de UNA tarjeta
   con un solo borde alrededor, asi que encogerlas dejaba el borde suelto. Aqui
   cada tarjeta tiene su propio borde. El sintoma se parece; el arreglo depende
   de si el marco es uno o son varios. */
align-items:start}
.chip{display:inline-block;background:var(--card2);border:1px solid var(--bd);border-radius:16px;
padding:5px 13px;font-size:13px;color:var(--mut);margin:0 6px 7px 0}
a.chip:hover{color:var(--tx);border-color:var(--ac);background:var(--card)}
.vacio{color:var(--mut);padding:26px 0;text-align:center}
.aviso{background:linear-gradient(90deg,rgba(90,169,255,.10),transparent);
border:1px solid var(--bd2);border-left:3px solid var(--ac2);border-radius:10px;
padding:12px 16px;font-size:14px;color:var(--tx);margin:0 0 16px}
.aviso b{color:var(--ac2)}
.aviso a{color:var(--ac2);font-weight:600;text-decoration:underline}
/* 🪤 Los enlaces dentro de .sub y .txt heredaban el gris del parrafo, sin
   subrayado ni cambio al pasar el raton: contraste 1,0:1 con el texto vecino,
   o sea invisibles. Son la miga de pan de vuelta en ~110 paginas. */
.fuente{margin-left:6px;padding:1px 6px;border:1px solid var(--bd);border-radius:10px;
font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);vertical-align:middle}
.nota td{color:var(--mut);font-size:12px;line-height:1.45;padding-top:9px;
border-top:1px solid var(--bd)}
.sub a,.txt a{color:var(--ac2);text-decoration:underline;text-underline-offset:2px}
.sub a:hover,.txt a:hover{color:var(--ac)}
.txt{color:var(--mut);font-size:15px;line-height:1.65;max-width:76ch}
.txt b{color:var(--tx);font-weight:600}
.txt code{background:var(--card2);border:1px solid var(--bd);border-radius:6px;
padding:1px 6px;font-size:13px;color:var(--ac)}
/* ficha del jugador */
.ficha{display:flex;gap:24px;align-items:center;margin:30px 0 8px;flex-wrap:wrap}
.fig{background:linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%);
border:1px solid var(--bd);border-radius:16px;padding:16px 22px;flex:0 0 auto}
.cuerpo{display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.fdatos{flex:1;min-width:260px}
.fdatos h1{margin:0 0 4px}
.fdatos .sub{margin-bottom:16px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin:0 0 8px}
.cifra{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:13px 15px}
.cifra b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.25;
font-variant-numeric:tabular-nums}
.cifra small{color:var(--mut);font-size:12px}
.vivo{display:flex;align-items:center;gap:11px;background:var(--card);
border:1px solid var(--bd);border-radius:10px;padding:11px 15px;margin:16px 0 6px;
font-size:14px;color:var(--mut);flex-wrap:wrap}
.vivo b{color:var(--tx);font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.vivo .punto{width:9px;height:9px;border-radius:50%;background:var(--ac);flex:0 0 auto;
box-shadow:0 0 0 0 rgba(63,208,122,.6);animation:late 2.2s infinite}
@keyframes late{70%{box-shadow:0 0 0 9px rgba(63,208,122,0)}100%{box-shadow:0 0 0 0 rgba(63,208,122,0)}}
@media(prefers-reduced-motion:reduce){.vivo .punto{animation:none}}
.vivo .spark{margin-left:auto;opacity:.85}
.vivo .ip{color:var(--ac);font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hero{display:flex;gap:30px;align-items:center;justify-content:space-between;margin-bottom:8px}
.hizq{flex:1;min-width:280px}
.heroe{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--bd);
border-radius:16px;padding:16px 24px 18px;text-align:center;flex:0 0 auto;
box-shadow:0 16px 36px rgba(0,0,0,.35)}
.hetq{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.8px;
font-weight:700;margin-bottom:10px}
.heroe .cuerpo{margin:0 auto}
.henom{display:block;font-weight:700;margin-top:11px;font-size:15px}
.henom:hover{color:var(--ac2)}
.heval{color:var(--ac);font-weight:700;font-size:13px}
@media(max-width:820px){.hero{flex-direction:column;align-items:stretch}
.heroe{display:flex;align-items:center;gap:16px;text-align:left;padding:14px 18px}
.heroe .cuerpo{height:110px;width:55px;margin:0}
.hetq{margin:0}}
.podio{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:6px 0 24px;flex-wrap:wrap}
.pod{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--bd);
border-radius:16px;padding:15px 18px 14px;text-align:center;min-width:152px;
transition:transform .13s,border-color .13s}
.pod{align-self:flex-end}
.pod.p1{margin-bottom:18px}
.pod:hover{transform:translateY(-3px)}
.pod.p1{border-color:rgba(242,195,61,.48);padding:19px 24px 18px;
box-shadow:0 0 0 1px rgba(242,195,61,.14),0 16px 34px rgba(0,0,0,.42)}
.pod.p1 .pmed{width:32px;height:32px;font-size:16px}
.pod.p2{border-color:rgba(201,212,224,.32)}
.pod.p3{border-color:rgba(209,135,74,.34)}
.pmed{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-weight:800;font-size:14px;margin:0 auto 9px;color:#0b0f16}
.pod.p1 .pmed{background:var(--oro)}
.pod.p2 .pmed{background:var(--pla)}
.pod.p3 .pmed{background:var(--bro)}
.pod .cuerpo{margin:0 auto}
.pnom{font-weight:700;margin-top:11px;font-size:14px;max-width:152px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.pval{color:var(--ac);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.vscab{display:flex;align-items:center;justify-content:center;gap:26px;margin:24px 0 18px;flex-wrap:wrap}
.vsj{text-align:center}
.vsnom{font-weight:800;font-size:17px;margin-top:10px}
.vsn{color:var(--ac);font-weight:700;font-size:13px}
.vsmed{font-weight:800;font-size:15px;color:var(--oro);text-transform:uppercase;
letter-spacing:1px;padding:9px 15px;border:1px solid var(--bd);border-radius:10px;
background:var(--card);text-align:center}
.vsform input{flex:1}
table.vs td{width:38%;font-variant-numeric:tabular-nums;font-weight:600}
table.vs th.etq{width:24%;text-align:center;color:var(--mut);font-weight:500;font-size:13px}
table.vs thead th{font-size:11px}
table.vs thead th:first-child{text-align:right}
table.vs thead th:last-child{text-align:left}
/* texto que solo leen los lectores de pantalla */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.vs td.ganaa{text-align:right}
table.vs td.ganab{text-align:left}
table.vs td.gana{color:var(--ac)}
table.vs td.gana .de{color:var(--ac);opacity:.7}
@media(max-width:640px){.vscab{gap:12px}.vscab .cuerpo{height:120px;width:60px}
table.vs td.etq{font-size:11px}}
.vsc{width:34px;text-align:center}
.vsc a{display:inline-block;color:var(--mut);font-size:16px;line-height:1;
padding:3px 6px;border-radius:6px;border:1px solid transparent}
.vsc a:hover{color:var(--ac2);border-color:var(--bd2);background:var(--card2)}
.pag{display:flex;gap:9px;align-items:center;justify-content:center;margin:20px 0 4px;font-size:14px}
.pag a,.pag span{padding:8px 16px;border:1px solid var(--bd);border-radius:10px;color:var(--mut)}
.pag a:hover{color:var(--tx);border-color:var(--ac);background:var(--card)}
.pag .act{color:var(--tx);background:var(--card)}
footer{color:var(--mut);font-size:13px;padding:30px 0;border-top:1px solid var(--bd);margin-top:48px}
footer .fl{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:9px;align-items:center}
footer b{color:var(--ac);font-weight:700}
footer a{color:var(--ac2)}
@media(max-width:560px){
header .wrap{height:auto;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;gap:8px}
.logo{font-size:17px}
nav{margin-left:0;width:100%;justify-content:flex-start;gap:4px;flex-wrap:wrap}
nav a{padding:5px 8px;font-size:13px}
/* El icono se queda tambien en movil: es lo que hace que se reconozca como el
   mismo boton de supercraft.es. Con «Mercado» ya son SEIS enlaces y a 390 px no
   caben en una linea: la barra envuelve a dos, que para eso lleva flex-wrap.
   Es preferible a esconder secciones detras de un menu desplegable. */
nav a.tienda{padding:5px 9px;gap:5px}}
@media(max-width:640px){.wrap{padding:0 14px}h1{font-size:24px}
.pos{width:auto}.pct{display:none}.de{font-size:11px}
.pod.p1{margin-bottom:10px}
/* 🪤 En movil el primero conservaba el relleno de escritorio (.pod.p1 gana en
   especificidad a .pod), asi que le quedaban 66 px de contenido frente a los
   102 del segundo: al que ha quedado PRIMERO se le cortaba el nombre y al
   segundo no. */
.pod.p1{padding:12px 6px 14px}
.busca button{padding:0 17px}td,th{padding-left:7px;padding-right:7px}
.dos{grid-template-columns:1fr}.pos{width:56px}
.ficha{gap:16px}.fig{padding:12px 16px}.ficha .cuerpo{height:150px;width:75px}
.podio{gap:7px}.pod{min-width:0;flex:1;padding:12px 6px}
.pod .cuerpo{height:96px;width:48px}.pnom{font-size:12px}.pval{font-size:13px}}
.dos>.evbloque{grid-column:1/-1}
/* 🪤 `auto-fit` con `minmax` reparte lo que quepa, y ocupando la fila entera
   caben CINCO. Pero las cajas son siempre seis (`utiles[:6]`), asi que quedaba
   5+1 y otro hueco. Con seis, lo unico que cuadra siempre es 3, 2 o 1: se fija
   el numero de columnas en vez de dejarlo al ancho disponible. */
.evs{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:620px){.evs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.evs{grid-template-columns:repeat(3,1fr)}}
.ev{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--bd);
border-top:2px solid var(--m,var(--bd));border-radius:10px;padding:13px 15px 9px;overflow:hidden}
.evc{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.evc a{min-width:0}
.evc b{display:block;font-size:14px;font-weight:700;color:var(--m,var(--tx))}
.evc small{color:var(--mut);font-size:12px}
.evc a:hover b{text-decoration:underline}
.evp{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ev .lp{display:block;width:100%;height:54px;margin:2px 0 0}
.evf{display:flex;justify-content:space-between;color:var(--mut);font-size:11px;margin-top:2px}
nav a.tienda,footer a.pietienda{display:inline-flex;align-items:center;gap:6px;
color:var(--tienda);background:rgba(255,179,0,.10);border:1px solid rgba(255,179,0,.28);
font-weight:700;border-radius:6px;padding:6px 11px;white-space:nowrap}
nav a.tienda:hover,footer a.pietienda:hover{background:rgba(255,179,0,.18);
border-color:rgba(255,179,0,.55);color:var(--tienda);box-shadow:0 0 14px rgba(255,179,0,.18)}
footer a.pietienda{padding:3px 10px;font-size:12px}
.jugando{display:inline-flex;align-items:center;gap:6px;margin-left:9px;
font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--ac);
background:rgba(63,208,122,.12);border:1px solid rgba(63,208,122,.28);
border-radius:16px;padding:2px 9px;vertical-align:2px;white-space:nowrap}
.jugando i{width:6px;height:6px;border-radius:50%;background:var(--ac);flex:0 0 auto;
box-shadow:0 0 0 0 rgba(63,208,122,.6);animation:late 2.2s infinite}
.card h3 .jugando{font-size:11px;margin-left:7px}
h1 .jugando{font-size:13px;padding:3px 11px;vertical-align:6px}
@media(prefers-reduced-motion:reduce){.jugando i{animation:none}}
button.ip{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
padding:3px 8px;border-radius:6px;cursor:pointer;color:var(--ac);font-weight:700;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:inherit}
button.ip:hover{background:var(--card2)}
button.ip .ico-cp{opacity:.6}
button.ip:hover .ico-cp{opacity:1}
button.ip.hecho{color:var(--tx);background:rgba(63,208,122,.16)}
button.ip.hecho .ico-cp{display:none}
footer button.ip{font-size:13px}
.lidera{margin:-8px 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lidera .le{color:var(--mut);font-size:13px}
.lidera .chip{margin:0;color:var(--tx);border-color:var(--bd2)}
.lidera .cm{color:var(--mut);font-weight:400}
/* ── Pulido ─────────────────────────────────────────────────────────────── */
::selection{background:rgba(63,208,122,.28);color:#fff}
:root{scrollbar-color:var(--bd2) var(--bg);accent-color:var(--ac)}
.tw{scrollbar-width:thin}
h1,h2,h3{text-wrap:balance}
.txt p,.sub{text-wrap:pretty}
/* 🪤 En movil el :hover se queda PEGADO tras tocar: la tarjeta se levantaba y
   ahi se quedaba. En pantallas sin raton no hay efectos de hover. */
@media(hover:none){
a.card:hover{transform:none;border-color:var(--bd)}
.pod:hover{transform:none}
tbody tr:hover{background:transparent}}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
a.card:hover,.pod:hover{transform:none}}
/* Cabecera de tabla fija: en una lista de 100 filas se pierde que columna es
   cada una. Solo en pantalla ancha: .tw lleva overflow-x, y un contenedor con
   overflow es el que manda sobre position:sticky, asi que en movil no pegaria
   nada — ahi se deja quieta. */
@media(min-width:760px){
.tw{overflow:visible}
thead th{position:sticky;top:60px;background:var(--bg);z-index:3;
padding-top:10px;box-shadow:0 1px 0 var(--bd)}}

/* Las tarjetas de tops necesitan mas sitio del que tenian. Con
   minmax(340px,1fr) dentro de un .wrap de 1120 entraban TRES columnas de 340
   px, y ahi no cabe "MOBS ELIMINADOS" con un numero de seis cifras al lado:
   el numero se publicaba CORTADO (se leia "1.193.95", sin el ultimo digito).
   Se ensancha el contenedor solo en las paginas que llevan esta rejilla. */
/* Va en el BODY y no en el .wrap del contenido: la barra de arriba tiene su
   propio .wrap, y ensanchando solo el de abajo el logo quedaba desalineado
   respecto a las tarjetas. Desde el body alcanza a los dos. */
body:has(.dos) .wrap{max-width:1440px}
/* El `min(410px,100%)` NO es adorno. Con `minmax(410px,1fr)` a secas la
   columna no puede bajar de 410 px aunque la pantalla mida 390: en un movil el
   contenido se salia por la derecha y se cortaban el enlace "ver los N", la
   cabecera de la tabla y los propios numeros. Medido con el navegador a 390
   px: window.innerWidth salia 425. */
.dos{grid-template-columns:repeat(auto-fit,minmax(min(410px,100%),1fr))}

/* Y una tabla NO puede salirse de su tarjeta. La regla de arriba pone .tw en
   overflow:visible a partir de 760px -hace falta, porque un contenedor con
   overflow manda sobre position:sticky y sin eso la cabecera no se pega en los
   rankings de 100 filas-, pero dentro de una tarjeta estrecha eso deja que la
   tabla se derrame por fuera del borde, que es justo lo que se veia. Aqui se
   vuelve a encerrar; la cabecera pegajosa se apaga porque en una lista de diez
   filas no hace ninguna falta. */
.dos .tw{overflow-x:auto}
.dos thead th{position:static;top:auto;box-shadow:none;padding-top:0}

/* El titulo de cada tarjeta lleva tres cosas: nombre, "N jugadores - hace X"
   y el enlace "ver los N". En una tarjeta de rejilla no caben las tres en una
   linea cuando el nombre es largo ("Mobs eliminados"), y lo que se caia
   cambiaba de tarjeta en tarjeta: unas empezaban la tabla mas abajo que otras
   y la fila quedaba descuadrada. Se pone SIEMPRE en dos lineas -nombre y
   enlace arriba, el dato de en medio debajo- para que todas midan igual, en
   vez de dejarlo a lo que quepa. */
.dos .bloq h2{flex-wrap:wrap;row-gap:2px}
.dos .bloq h2 .mas{order:2;margin-left:auto;white-space:nowrap;flex:0 0 auto}
.dos .bloq h2 small{order:3;flex:1 0 100%;margin-left:0}

/* Fila de clan: cara del lider, nombre del clan y debajo quien lo lleva. */
.clan{display:flex;align-items:center;gap:9px;min-width:0}
.clan .ct{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.clan b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clan small{color:var(--mut);font-size:12px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
/* La columna del valor se queda con lo justo y NUNCA se parte; la del clan es
   la que cede, que para eso recorta con puntos suspensivos. Sin esto, dentro
   de una tarjeta estrecha el nombre del clan empujaba el numero fuera del
   cuadro y no se veia ni una cifra. */
.dos .bloq th.val,.dos .bloq td.val{width:1%;white-space:nowrap}
/* 🪤 `:not(.val)` no es cosmetico. Esta regla se escribio para las tablas de
   CLANES, donde la columna 2 es el nombre del clan y tiene que ceder. Pero en
   la ficha de jugador la tabla es ESTADISTICA | VALOR | PUESTO, asi que la
   columna 2 es el numero: le caia `max-width:0; overflow:hidden` y, como
   `.val` no lleva `text-overflow`, se cortaba a CLIP, sin puntos suspensivos.
   En /jugador/dylancf «251.209» se veia «251.20»: no parece un numero roto,
   parece otro numero. Y la misma pagina se contradecia, porque el mini-ranking
   de mas abajo sí lo escribia entero. Un dato mal leido es peor que un dato
   que falta, porque nadie lo denuncia. Lo encontro screensuper-74 midiendo
   scrollWidth contra clientWidth celda a celda. */
.dos .bloq td:nth-child(2):not(.val){max-width:0;overflow:hidden}

/* ── Repaso de acabado (auditoria 27-08-2026) ───────────────────────────── */

/* 🪤 Los controles de formulario NO heredan la tipografia: es un default del
   navegador, no un olvido. Sin esta linea el buscador principal -el control mas
   visible del sitio- se pintaba con la fuente del sistema mientras todo lo de
   alrededor iba en Exo 2, y en la cabecera del mercado se veia «Survival OP»
   dos veces a 130 px una de otra, cada una con una tipografia. */
input,select,textarea,button{font-family:inherit}

/* El pie flotaba a media pantalla en /comparar y en los 404: la pagina acaba en
   y=397 con 900 px de alto (56% muerto, 63% a 1080p) y el degradado del body
   volvia a empezar ahi, dejando dos costuras horizontales. Con el body en
   columna y el main estirando se arreglan las dos cosas a la vez. */
body{min-height:100dvh;display:flex;flex-direction:column}
/* 🪤 Y el `width:100%` NO sobra, aunque lo parezca. Al convertir el body en
   contenedor flex, sus hijos dejan de poder encogerse por debajo del ancho
   MINIMO de su contenido: a 320 px el titulo mas largo empujaba el <main> a 352
   y aparecia barra horizontal en TODA la web. Lo metio este mismo arreglo y lo
   caza el medidor de desbordes; sin la linea, cambiar el pie de sitio rompia la
   pagina entera en los moviles pequeños. */
body>header,body>main,body>footer{width:100%;min-width:0}
main.wrap{flex:1 0 auto}

/* El rotulo de seccion y el titulo de tarjeta computaban IGUAL -17px, 700, el
   mismo color-, asi que desenfocando el padre pesaba MENOS que sus propios
   hijos, que van sobre la superficie clara de la tarjeta. En /tops/<modalidad>
   eso dejaba «Top Clanes» -el unico punto donde las filas dejan de ser
   jugadores- como la linea mas debil de la pantalla. */
h2.sec{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:34px}

/* Un cuerpo de skin negro sobre tarjeta oscura se lee como un agujero: el n.o 1
   de /tops/skypvp/money da 1,17:1 contra su fondo, y son 47 de 204. Dos halos
   blancos muy cortos dibujan el filo siguiendo el alfa del PNG; en una skin
   clara no hay borde oscuro que resaltar, asi que no se nota. */
.cuerpo{filter:drop-shadow(0 0 1px rgba(255,255,255,.75))
              drop-shadow(0 0 2px rgba(255,255,255,.38))
              drop-shadow(0 10px 14px rgba(0,0,0,.45))}

/* La rejilla resolvia en TRES pistas de 432 px: la primera tarjeta partia 6 de
   sus 9 filas (+140 px de alto inutil) al lado de un hueco de 395.550 px2, la
   mitad visible sin bajar. Con suelo de 520 son dos columnas anchas. El .wrap
   topa en 1440, asi que tres ya no caben en ningun ancho: es lo que se busca. */
.dos{grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr))}

/* La banda de la fila sobresalia por los dos lados de la tarjeta: .tw tira 4 px
   hacia fuera y las celdas meten 10 de relleno, asi que el titulo quedaba a 18
   px del borde y la primera columna a 24. Igualando el tiron al relleno cuadran
   al pixel. */
.tw{margin:0 -10px}

/* Los inputs de comparar quedaban en 85,6 px utiles: un tercio de los nicks de
   la red no cabe, y con 16 caracteres se ven 10. */
/* 🪤 Cada campo de busqueda es el ancla de SU lista de sugerencias. Sin esto,
   `.suge` se posiciona contra el formulario entero (`left:0;right:0`) y en
   comparar la lista del primer campo se abriria tapando tambien el segundo. */
.campo{position:relative;display:flex;min-width:0}
.campo>input{flex:1;min-width:0}
.campo>.suge{top:calc(100% + 5px)}
.vsform{flex-wrap:wrap}
.vsform .campo{flex:1 1 140px}
.vsform button{flex:0 0 auto}

/* La linea de actividad no decia ni que ventana pinta ni con que escala, y se
   autoescala en cada render para llenar el 81% del alto: dibujaba la misma
   montaña pasando de 30 a 34 jugadores que de 30 a 400. */
.sparkw{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.vivo .sparkw .spark{margin-left:0}
.sparkl{color:var(--mut);font-size:11px;line-height:1;white-space:nowrap}

/* En la ficha, la fila calculada «Asesinatos por muerte» era la unica sin icono
   y su etiqueta rompia 22 px a la izquierda de todas las demas. El hueco mide
   exactamente lo que mide un icono. */
.ichueco{display:inline-block;width:15px;height:15px;margin-right:7px;vertical-align:-2px}

@media(max-width:759px){
/* 🪤 Con `table-layout:auto` el ancho MINIMO de una tabla es la suma de los
   minimos de sus columnas, y el minimo de un nick es el nick entero: la tabla
   medía 389 px dentro de un .tw de 370 y se comian 19. Y no se veia, porque no
   hay barra de scroll ni sombra: 97 de 97 valores salian cortados y «1.073.965»
   se leia «1.073.96», que sigue pareciendo un numero valido. En
   /survivalop/top-fish la columna de valores se iba ENTERA fuera de pantalla.
   Se fija el reparto y el unico que puede ceder pasa a ser el nick, con puntos
   suspensivos y el nombre completo en `title`. */
.tw>table{table-layout:fixed;width:100%}
/* 🪤 Y los anchos hay que darlos MIRANDO LA FORMA de cada tabla, porque en
   `fixed` un `width` deja de ser una sugerencia y se cumple a rajatabla. En un
   ranking el puesto va el PRIMERO y le basta con 74 px («#40▲59» es lo mas
   largo que sale); en la ficha va el ULTIMO y dice «#542 de 759», que necesita
   un tercio. Y el `width:1%` que las tarjetas de rejilla usan para encoger la
   columna del valor -un truco que solo funciona en `auto`- aqui se tomaba
   literal: el 1%, y se cortaba TODO. */
.tw>table>thead>tr>th.pos:first-child,.tw>table>tbody>tr>td.pos:first-child{width:74px}
.tw>table>thead>tr>th.pos:last-child,.tw>table>tbody>tr>td.pos:last-child{width:36%}
.tw>table th.val,.tw>table td.val{width:30%}
.tw>table td.val{white-space:nowrap}
.dos .bloq th.val{width:30%;white-space:normal}
.dos .bloq td.val{width:30%;white-space:nowrap}
.jug>a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Y una cabecera larga («JUEGOS DEL CHAT GANADOS», 159 px de tinta) ya no puede
   reclamar 173 px para pintar numeros de 39: parte en dos lineas. */
.tw>table thead th{white-space:normal}
/* La cabecera se comia 122 px -el 14,5% de la pantalla- porque «Tienda» caia
   sola a una segunda fila con el 76% vacio. Se deja en una sola linea y, si no
   cabe, el menu se desliza. */
header .wrap{flex-wrap:nowrap;gap:12px}
.logo{white-space:nowrap;flex:0 0 auto}
nav{flex-wrap:nowrap;flex:1 1 auto;min-width:0;justify-content:flex-start;margin-left:0;
width:auto;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;flex:0 0 auto}
/* 🪤 Con el menu deslizante y alineado a la derecha pasaba lo contrario de lo
   que se buscaba: arrancaba desplazado y «Inicio», «Rankings» y «Red» quedaban
   FUERA de pantalla. Empieza por el principio, y Tienda se queda clavada a la
   derecha con el resto pasando por debajo -de ahi la sombra y el fondo opaco,
   que su ambar es translucido y se veria el texto a traves. */
nav a.tienda{position:sticky;right:0;
background:linear-gradient(rgba(255,179,0,.10),rgba(255,179,0,.10)),rgba(11,15,22,.98);
box-shadow:-14px 0 12px -8px rgba(11,15,22,.95)}
}

/* A 320 px la cabecera del heroe y los titulos largos se salian por la derecha
   desde antes de todo esto: `.hero` no envuelve y `.hizq` pedia 280 px de suelo
   dentro de 292 disponibles. */
@media(max-width:640px){
.hero{flex-wrap:wrap}
.hizq{min-width:0;flex:1 1 100%}
h1,h2,h3{overflow-wrap:break-word}
/* 🪤 El que empujaba de verdad era el BUSCADOR, no el titulo: un <input> trae
   de fabrica un ancho intrinseco de ~20 caracteres, y con `flex:1` la base sale
   de ese ancho. `min-width:0` no vale aqui -deja encoger, pero la BASE sigue
   siendo 231 px-, asi que el formulario pedia 324 px dentro de 292 y la portada
   entera se iba 18 px por la derecha en un movil de 320. Con la base a cero el
   input cede y el boton se queda como esta. */
.busca input,.busca .campo{width:0;flex:1 1 auto;min-width:0}
/* 🪤 ...pero esa base a cero NO vale para comparar: alli hay DOS campos y un
   boton en la misma fila, y sin base propia se repartian lo que sobraba —85 px
   utiles a 320, donde no cabe ni un tercio de los nicks de la red—. Con base de
   140 px la fila se parte cuando toca en vez de estrujarlos, y por debajo de 430
   cada campo se lleva una linea entera, que es lo unico que da para un nick de
   16 caracteres. */
.vsform .campo{width:auto;flex:1 1 140px}
@media(max-width:430px){.vsform .campo,.vsform button{flex:1 1 100%}}
/* Y la linea de actividad, que mide 260 px fijos, en 292 no deja sitio a nada
   mas: en pantalla estrecha se dibuja mas corta. */
.vivo .sparkw{min-width:0;flex:0 1 auto}
.vivo .spark{width:150px;height:34px}
}