.mer-ranking{padding:2.5rem 1.5rem;max-width:600px;margin:0 auto}
.mer-ranking h1{color:var(--t-text);margin-bottom:1.25rem}
.mer-ranking__yo{margin-bottom:1.25rem;padding:.6rem .9rem;border:1px solid var(--t-line);border-radius:.5rem;color:var(--t-text);font-size:.9rem;background:var(--t-surface,transparent)}

.mer-ranking__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mer-ranking__tab{border:1px solid var(--t-line);background:transparent;color:var(--t-muted);padding:.4rem .9rem;border-radius:999px;font-size:.85rem;cursor:pointer}
.mer-ranking__tab:hover{color:var(--t-text);border-color:var(--t-accent)}
.mer-ranking__tab--activo{background:var(--t-accent);color:var(--t-accent-contrast,#fff);border-color:var(--t-accent)}

.mer-ranking__panel{display:none}
.mer-ranking__panel--activo{display:table}

.mer-ranking__tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.mer-ranking__tabla th{text-align:left;color:var(--t-muted);border-bottom:1px solid var(--t-line);padding:.5rem}
.mer-ranking__tabla td{padding:.5rem;border-bottom:1px solid var(--t-line);color:var(--t-text)}
.mer-ranking__pos{width:2.5rem;text-align:center}
.mer-ranking__tu{color:var(--t-accent);font-size:.8rem}

.mer-fila--oro td{background:color-mix(in srgb, gold 16%, transparent)}
.mer-fila--plata td{background:color-mix(in srgb, silver 16%, transparent)}
.mer-fila--bronce td{background:color-mix(in srgb, peru 14%, transparent)}
.mer-fila--yo td{outline:2px solid var(--t-accent);outline-offset:-2px}

@media (max-width: 480px) {
  .mer-ranking { padding: 1.5rem 1rem; }
}