: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 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
-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 9px 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:8px}
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:11px;
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:11px;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:11px;overflow:hidden;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}
.card{background:linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%);
border:1px solid var(--bd);border-radius:13px;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:11.5px;font-weight:700;margin-left:5px;
font-variant-numeric:tabular-nums}
.baja{color:var(--rojo);font-size:11.5px;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:12.5px}
.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:20px;
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:8px;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:5px;padding:1px 6px;letter-spacing:.3px;flex:0 0 auto}
.bloq{background:var(--card);border:1px solid var(--bd);border-radius:13px;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:3px;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}
.chip{display:inline-block;background:var(--card2);border:1px solid var(--bd);border-radius:20px;
padding:5px 13px;font-size:12.5px;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:9px;
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:14.5px;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:5px;
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:15px;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:12px;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:12px;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:15px;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:11px;
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:12.5px}
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:7px;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:9px;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:12.5px;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:13px;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:8px;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:11.5px;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:20px;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:8px;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:12.5px}
.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:11.5px;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}