/* ---------------------------------------------------------------- *
 * 3 · Vergleich (Dashboard)                                        *
 * ---------------------------------------------------------------- */
.w-cmplegend{display:flex;gap:8px 16px;flex-wrap:wrap;margin-bottom:12px}
.w-cmpchip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);
  padding:5px 12px;border-radius:999px;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.w-cmpchip .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.w-cmpchip .w-rk{font-size:10px;font-weight:800;color:var(--ink3)}
.w-cmpchip .w-role{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink3)}
.w-cmpchip.me{color:var(--ink)}
.w-cmpchip .w-rm{border:0;background:transparent;color:var(--ink3);font:inherit;font-size:13px;
  line-height:1;cursor:pointer;padding:0 0 0 2px}
.w-cmpchip .w-rm:hover{color:var(--loss)}

/* Winrate steht bewusst AUSSERHALB des Rankings: eigene Sektion, immer mit
   95-%-Intervall. Nutzt die vorhandenen .wrtrack/.wrci/.wrdot-Klassen. */
.w-wrlist{display:flex;flex-direction:column;gap:4px}
.w-wrrow{display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr 108px;gap:12px;align-items:center;
  min-height:32px;padding:3px 6px;border-radius:8px}
.w-wrrow:hover{background:rgba(255,255,255,.04)}
.w-wrname{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-wrname .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0}
.w-wrci{font-size:11px;color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
.w-wrci b{color:var(--ink);font-weight:700}
.w-nowr{font-size:11px;color:var(--ink3);padding:8px 6px}

/* #cmpgrid wird beim echten Vergleich vom starren Raster zu gestapelten
   Sektionen; jede Sektion bringt ihr eigenes .cmp-grid mit. */
.w-cmpsections{display:block}
.w-cmpsections>.w-sechead:first-child{margin-top:0}

.w-sechead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 2px 9px}
.w-sechead h3{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--cyan)}
.w-sechead span{font-size:11px;color:var(--ink3)}
.w-caveat{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--rw);
  font-size:11.5px;line-height:1.55;color:var(--ink3);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-caveat .w-ci{font-size:17px;line-height:1;opacity:.7;flex:0 0 auto;color:var(--amber)}
.w-caveat b{color:var(--ink2)}

/* Head-to-Head */
.w-h2h{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:860px){.w-h2h{grid-template-columns:1fr}}
.w-h2hcard{padding:12px 14px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-h2htop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:9px}
.w-h2htop .w-vs{font-size:9.5px;font-weight:800;letter-spacing:.9px;color:var(--ink3)}
.w-h2htop .w-nm{font-weight:700;color:var(--ink)}
.w-h2hverdict{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--ink3)}
.w-h2hrole{display:grid;grid-template-columns:64px 1fr 1fr;gap:9px;align-items:center;
  min-height:28px;font-size:11.5px;font-variant-numeric:tabular-nums}
.w-h2hrole .w-rl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3)}
.w-h2hrole .w-sa,.w-h2hrole .w-sb{padding:2px 8px;border-radius:7px;text-align:center;color:var(--ink2)}
.w-h2hrole .win{color:var(--ink);font-weight:700;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-h2hempty{font-size:11px;color:var(--ink3)}
.w-h2hfoot{margin-top:9px;font-size:10.5px;color:var(--ink3);line-height:1.5}

/* ---------------------------------------------------------------- *
 * 3b · Vergleich v2 — Rollen-Reiter, vier Zahlen, Nerd-Info        *
 *                                                                  *
 * Ebene 1 zeigt je Spieler GENAU vier Werte. Der Duellwert ist der  *
 * Leitwert: gross, mit divergierendem Balken um die 50er-Mitte.     *
 * Die Winrate steht bewusst kleiner und ohne Balken — sie rankt     *
 * nicht und darf auch optisch nicht wie der Leitwert aussehen.      *
 * ---------------------------------------------------------------- */
.w-cmp2{display:flex;flex-direction:column;gap:12px}

/* Rollen-Reiter (ALL · Top · Jungle · Mid · Bot · Support) */
.w-c2tabs{display:flex;gap:6px;flex-wrap:wrap}
.w-c2tab{border:0;background:transparent;color:var(--ink3);font:inherit;font-size:11.5px;
  font-weight:700;letter-spacing:.3px;padding:7px 15px;border-radius:999px;cursor:pointer;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.w-c2tab:hover{color:var(--ink2)}
.w-c2tab.on{color:var(--cyan)}
.w-c2tab[disabled]{opacity:.42;cursor:not-allowed}
.w-c2tab[disabled]:hover{color:var(--ink3)}
.w-c2tab .w-c2n{font-size:10px;font-weight:800;opacity:.7;margin-left:7px;
  font-variant-numeric:tabular-nums}

/* Elo-Hinweis — der Rang ist Anzeige, nie Summand. */
/* Das tatsaechlich geltende Fenster. Es steht bewusst UEBER dem Elo-Hinweis
   und ueber der Liste: es beantwortet die Frage „warum steht da n=219, obwohl
   ich 50 eingestellt habe" — die stellt sich beim ersten Blick, nicht beim
   Lesen der Fussnote. */
.w-c2win{font-size:12px;line-height:1.5;color:var(--ink2);padding:10px 15px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-c2win .w-c2winl b{color:var(--ink);font-weight:700}
.w-c2win .w-c2winall{color:var(--ink3)}
.w-c2win .w-c2winw{margin-top:5px;font-size:10.5px;line-height:1.5;color:var(--ink3)}
.w-c2elo{font-size:11.5px;line-height:1.55;color:var(--ink3);padding:11px 15px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-c2elo b{color:var(--ink2)}
.w-c2elo p{margin-top:7px;font-size:11px;line-height:1.55}
.w-c2why{margin-top:7px}
.w-c2why>summary{cursor:pointer;font-size:10.5px;font-weight:700;color:var(--ink2);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.w-c2why>summary::-webkit-details-marker{display:none}
.w-c2why>summary::before{content:"▸";font-size:9px}
.w-c2why[open]>summary::before{content:"▾"}

/* Rangliste */
.w-c2list{display:flex;flex-direction:column;gap:7px}
.w-c2row{padding:10px 13px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
/* minmax(0,…) bei JEDER Spalte: ohne die 0-Untergrenze waere die
   Mindestbreite eines Grid-Feldes sein min-content — lange Namen und
   Beschriftungen wie „Winrate · n=145" haetten die Karte aufgesprengt. */
.w-c2main{display:grid;gap:13px;align-items:center;
  grid-template-columns:24px minmax(0,1.45fr) minmax(0,2fr) minmax(0,74px) minmax(0,74px) minmax(0,116px)}
@media(max-width:1180px){
  .w-c2main{gap:10px;
    grid-template-columns:22px minmax(0,1.3fr) minmax(0,1.8fr) minmax(0,66px) minmax(0,66px) minmax(0,104px)}
}
@media(max-width:900px){
  .w-c2main{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);row-gap:11px}
  .w-c2who{grid-column:2/-1}
  .w-c2duel{grid-column:1/-1}
}
.w-c2pos{font-size:12.5px;font-weight:800;color:var(--ink3);text-align:center;
  font-variant-numeric:tabular-nums}
.w-c2who{min-width:0}
.w-c2name{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-c2meta{display:block;font-size:10px;color:var(--ink3);margin-top:3px;line-height:1.5}
.w-c2badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;color:var(--ink2);margin-right:6px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-c2delta.up{color:var(--win)} .w-c2delta.down{color:var(--loss)} .w-c2delta.flat{color:var(--ink3)}

/* Leitwert: Zahl + divergierender Balken um 50 */
.w-c2duel{display:flex;align-items:center;gap:12px;min-width:0}
.w-c2big{font-size:21px;font-weight:800;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.w-c2bar{flex:1;min-width:64px}
.w-c2track{position:relative;display:block;height:9px;border-radius:6px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-c2track::before{content:"";position:absolute;left:50%;top:-3px;width:1.5px;height:15px;
  background:var(--ink3);opacity:.5}
.w-c2fill{position:absolute;top:0;height:9px;border-radius:4px}
.w-c2fill.pos{left:50%;background:var(--win)}
.w-c2fill.neg{right:50%;background:var(--loss)}
/* Geschrumpfte Stichprobe (n < 20): gestrichelter Balken statt vollem. */
.w-c2fill.pos.dash{background:repeating-linear-gradient(90deg,var(--win) 0 5px,transparent 5px 9px)}
.w-c2fill.neg.dash{background:repeating-linear-gradient(90deg,var(--loss) 0 5px,transparent 5px 9px)}

/* Die drei begleitenden Zahlen */
.w-c2num{text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.w-c2v{display:block;font-size:13px;font-weight:700;color:var(--ink2)}
.w-c2l{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink3);margin-top:3px}
.w-c2duel .w-c2l{text-align:left}
.w-c2wr .w-c2v{font-size:11.5px;font-weight:600}
.w-c2na{font-size:10.5px;font-weight:600;color:var(--ink3);font-style:normal}
i.w-c2na{font-weight:500}

/* Nerd-Info */
.w-c2nerd{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.w-c2nerd>summary{cursor:pointer;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.9px;color:var(--ink3);list-style:none;display:inline-flex;align-items:center;gap:6px}
.w-c2nerd>summary::-webkit-details-marker{display:none}
.w-c2nerd>summary::before{content:"▸";font-size:9px}
.w-c2nerd[open]>summary::before{content:"▾"}
.w-c2nerd>summary:hover{color:var(--ink2)}
.w-c2grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px 22px;margin-top:11px}
.w-c2blk h4{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.85px;
  color:var(--cyan);margin-bottom:6px}
.w-c2kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:11px;padding:2px 0;color:var(--ink3)}
.w-c2kv b{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.w-c2kv em{font-style:normal;font-size:9.5px;opacity:.75;margin-left:6px}
/* Zweizeilige Fassung fuer die WICHTIGE Zahl: Beschriftung samt Zusatz oben,
   der Wert darunter in voller Breite. Nebeneinander braeche in der schmalen
   Spalte sonst der Name mitten durch („Vollstaendige | Lobbys alle 10 |
   Raenge bekannt") — und die Zahl der vollstaendigen Lobbys ist genau die,
   auf die es hier ankommt. */
.w-c2kv.stack{flex-wrap:wrap;padding:5px 0 4px}
.w-c2kv.stack>span{flex:1 1 100%;min-width:0}
.w-c2kv.stack em{display:block;margin-left:0;line-height:1.35}
.w-c2kv.stack>b{flex:1 1 100%;text-align:left;margin-top:3px;font-size:12px;color:var(--ink)}
.w-c2note{font-size:10.5px;line-height:1.5;color:var(--ink3);margin-top:7px}
.w-c2qnote{margin:0}
/* Lobby-Rang-Abdeckung: EINE Kachel je Quelle. Die beiden Quellen sind nicht
   gleichwertig (die eine taugt fuer Vorhersagen, die andere nicht) und stehen
   deshalb getrennt untereinander — nie zu einer Zahl verrechnet. */
.w-c2blk h4[data-tip]{cursor:help}
.w-c2src{margin-top:8px;padding:8px 10px;border-radius:var(--rw);
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.w-c2srch{font-size:10.5px;font-weight:700;line-height:1.4;color:var(--ink2);margin-bottom:3px}
/* In der schmalen Spalte darf der Zahlenwert umbrechen — sonst schoebe eine
   lange Zeile wie „942 von 942 · 100,0 %" die Kachel ueber den Rand. */
.w-c2src .w-c2kv b{white-space:normal;text-align:right}
.w-c2flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.w-c2flag{font-size:9px;font-weight:800;letter-spacing:.3px;line-height:1.35;
  padding:2px 7px;border-radius:999px;color:var(--ink3);
  box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
.w-c2flag.ok{color:var(--win)}
.w-c2flag.warn{color:var(--amber)}

/* Ausgeschlossene Spieler — graue Zeilen mit echtem n und Grund */
.w-c2excl{display:flex;flex-direction:column;gap:3px}
.w-c2ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,76px) minmax(0,3fr);gap:13px;align-items:baseline;
  font-size:11px;line-height:1.5;color:var(--ink3);padding:5px 13px;border-radius:8px}
.w-c2ex:hover{background:rgba(255,255,255,.04)}
.w-c2ex b{color:var(--ink2);font-weight:600}
.w-c2ex .w-c2exn{text-align:right;font-variant-numeric:tabular-nums}
.w-c2ex .w-c2exn2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){
  .w-c2ex{grid-template-columns:1fr;gap:1px}
  .w-c2ex .w-c2exn{text-align:left}
}

/* Laden / Fehler / leer — nie erfundene Zahlen */
.w-c2msg{font-size:11.5px;line-height:1.6;color:var(--ink3);padding:18px 14px;text-align:center}
.w-c2msg.err{color:var(--loss)}
.w-c2msg b{color:var(--ink2)}

/* Head-to-Head */
.w-c2h2h{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(max-width:900px){.w-c2h2h{grid-template-columns:1fr}}
.w-c2pair{padding:11px 13px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-c2ptop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:11.5px;margin-bottom:7px}
.w-c2ptop .w-nm{font-weight:700;color:var(--ink)}
.w-c2ptop .w-vs{font-size:9.5px;font-weight:800;letter-spacing:.9px;color:var(--ink3)}
.w-c2pv{margin-left:auto;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--ink3)}
.w-c2prole{display:grid;grid-template-columns:62px 1fr 1fr;gap:9px;align-items:center;
  min-height:24px;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.w-c2prole .w-rl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink3)}
.w-c2prole>span:not(.w-rl){text-align:right}
.w-c2prole span.win{color:var(--ink);font-weight:800}