/* ---------- Master+ (Champion-Winrate, Runen, Items, Kaufreihenfolge) ----------
     Der Tab hat EINE gestalterische Aufgabe, die kein anderer hat: er muss
     verhindern, dass eine 52-%-Winrate als „starker Champion" gelesen wird.
     Master+ ist fast flach — 95 % aller Champions liegen zwischen 47,4 % und
     52,6 %. Daraus folgen drei Entscheidungen:

     1. Der Streuungskasten (.msflat) steht GANZ OBEN und ist optisch die
        auffaelligste Karte des Tabs. Als Fussnote wuerde er nicht gelesen.
     2. Der Winrate-Balken (.msbar) ist auf 42–58 % gedehnt. Ein 0–100-Balken
        waere fuer alle 814 Zellen derselbe halbe Strich, also Dekoration. Die
        Dehnung ist in der Spaltenbeschriftung genannt.
     3. Eine Zelle unter 500 Spielen bekommt KEINEN Balken und keine gedimmte
        Zahl, sondern .msmiss — den Satz, wie viele Spiele fehlen. Es gibt
        keinen Zustand dieses Tabs, in dem eine duenne Zelle wie eine dicke
        aussieht. */

  /* ---- Hinweiszeilen. Drei Stufen, und jede hat eine Bedeutung:
     neutral = Herkunft der Zahl, warn = Vorbehalt, den man lesen MUSS,
     good = die Entwarnung („nimm den, den alle nehmen"). ---- */
  .msnote{font-size:11.5px;line-height:1.6;color:var(--ink2);padding:9px 13px;
    border-radius:var(--rw);margin:10px 0;
    box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}
  .msnote.warn{color:var(--ink);border-left:3px solid var(--amber)}
  .msnote.good{color:var(--ink);border-left:3px solid var(--win)}
  .msnote .mssrc{display:block;margin-top:4px;font-size:10.5px;color:var(--ink3)}
  .mscode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
    color:var(--cyan);padding:10px 13px;border-radius:var(--rw);margin:10px 0;
    overflow-x:auto;box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}

  .msgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 18px;
    margin:10px 0}
  .mskv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:5px 0;border-bottom:1px solid rgba(0,0,0,.22);font-size:11.5px}
  .mskv .k{color:var(--ink3)}
  .mskv .v{color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
  .mskv .v b{color:var(--ink);font-weight:700}

  /* ---- Der Kasten, ohne den die Tabelle falsch gelesen wird ---- */
  .msflat{border-left:3px solid var(--cyan)}
  .msclaim{font-size:14.5px;line-height:1.55;font-weight:600;color:var(--ink);
    padding:12px 15px;border-radius:var(--rw);
    box-shadow:inset 4px 4px 10px var(--lo),inset -4px -4px 10px var(--hi)}
  .msth{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
    margin:10px 0}
  .mstbox{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--rw);
    box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}
  .mstbox b{font-size:22px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums;
    line-height:1.1}
  .mstbox.thin b{color:var(--ink3)}
  .mstbox .l{font-size:11.5px;font-weight:700;color:var(--ink)}
  .mstbox .m{font-size:10.5px;line-height:1.5;color:var(--ink3)}

  /* ---- Auswahl nach Zahl der Endgegenstaende ---- */
  .msslots{display:flex;flex-direction:column;gap:4px}
  .msslot{display:grid;grid-template-columns:24px 1fr 74px 62px 62px;align-items:center;gap:10px;
    font-size:11.5px;font-variant-numeric:tabular-nums}
  .msslot .k{font-weight:800;color:var(--ink);text-align:center}
  .msslot .tr{position:relative;height:8px;border-radius:5px;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .msslot .tr i{position:absolute;left:0;top:0;height:8px;border-radius:5px;
    background:var(--chart-cat1);opacity:.75}
  .msslot .n{color:var(--ink2);text-align:right}
  .msslot .w{color:var(--ink);font-weight:700;text-align:right}
  .msslot .d{color:var(--ink3);text-align:right}

  /* ---- Champion-Tabelle ---- */
  .mstbl{width:100%}
  .mstbl tbody tr{cursor:pointer}
  .mstbl tbody tr:hover td{background:rgba(255,255,255,.04)}
  .mstbl tbody tr.on td{background:rgba(79,195,232,.10)}
  .mstbl td.c{display:flex;align-items:center;gap:9px}
  .mstbl td.small,.mstbl th.num{font-size:10.5px}
  .mstbl td.small{color:var(--ink3);font-variant-numeric:tabular-nums}
  .mstbl tr.thin td{color:var(--ink3)}
  .mschimg{width:26px;height:26px;flex:0 0 auto;border-radius:8px;object-fit:cover;display:block;
    box-shadow:inset 2px 2px 5px var(--lo)}

  /* Gedehnte Skala 42–58 %. Die Mittellinie ist 50 % und immer sichtbar —
     ohne sie ist ein Punkt links oder rechts keine Aussage. */
  .msbar{position:relative;display:block;width:130px;height:11px}
  .msbar.empty{opacity:0}
  .msbar .mid{position:absolute;left:50%;top:0;width:1.5px;height:11px;
    background:var(--ink3);opacity:.7}
  .msbar .ci{position:absolute;top:4px;height:3px;border-radius:2px;
    background:rgba(79,195,232,.30)}
  .msbar .pt{position:absolute;top:1px;width:4px;height:9px;border-radius:2px;
    transform:translateX(-2px)}
  .msbar .pt.up{background:var(--win)} .msbar .pt.dn{background:var(--loss)}

  /* Einordnung in Einheiten der ECHTEN Streuung. „middle" ist bewusst grau und
     nicht gelb: ein Champion im Mittelfeld ist der Normalfall, kein Mangel. */
  .msband{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.3px;
    padding:2px 7px;border-radius:7px;white-space:nowrap;color:var(--ink3);
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  .msband.middle{color:var(--ink2)}
  .msband.upper{color:var(--mate-up)}
  .msband.top{color:var(--win)}
  .msband.lower{color:var(--amber)}
  .msband.bottom{color:var(--loss)}
  /* Was FEHLT, ist eine eigene Auszeichnung — nie eine blasse Zahl. */
  .msmiss{font-size:10.5px;color:var(--ink3);font-style:italic}

  /* ---- Detail ---- */
  .msroles{margin-bottom:12px;max-width:100%}
  .msroles .bon{font-size:9.5px;font-weight:800;color:var(--ink3);
    font-variant-numeric:tabular-nums;margin-left:5px}
  .msroles button.on .bon{color:var(--cyan)}
  .mscell{padding:14px 16px;border-radius:var(--rw);
    box-shadow:inset 4px 4px 10px var(--lo),inset -4px -4px 10px var(--hi)}
  .msbigrow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .msbig{font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
    line-height:1}
  .mscell.thin .msbig{font-size:16px;color:var(--ink3);font-weight:700}
  .msbigmeta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:11.5px;
    color:var(--ink3);font-variant-numeric:tabular-nums}
  .msbigmeta b{color:var(--ink)}

  /* ---- Runen ---- */
  .msks{display:flex;flex-direction:column;gap:3px}
  .msksrow{display:grid;grid-template-columns:30px minmax(120px,1.2fr) 1fr 56px 62px 62px 96px;
    align-items:center;gap:10px;padding:4px 6px;border-radius:9px;font-size:11.5px;
    font-variant-numeric:tabular-nums}
  .msksrow:hover{background:rgba(255,255,255,.04)}
  .msksrow.thin{opacity:.55}
  .msksrow .i img{width:26px;height:26px;display:block}
  .msksrow .n{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .msksrow .n em{font-size:9.5px;font-weight:800;color:var(--cyan);margin-left:6px;
    font-style:normal}
  .msksrow .tr{position:relative;height:7px;border-radius:5px;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .msksrow .tr i{position:absolute;left:0;top:0;height:7px;border-radius:5px;
    background:var(--violet);opacity:.7}
  .msksrow .p{color:var(--ink);font-weight:700;text-align:right}
  .msksrow .g,.msksrow .ci{color:var(--ink3);text-align:right;font-size:10.5px}
  .msksrow .w{color:var(--ink2);text-align:right}

  /* ---- Skillreihenfolge und Jungel ----
     Dieselbe Zeile wie bei den Runen, nur ohne Rune: die erste Spalte traegt
     statt eines 26-px-Icons drei Buchstabenkaesten, also braucht sie mehr
     Platz. Die uebrigen sechs Spalten bleiben bewusst gleich breit — die
     Zeilen stehen im selben Kasten untereinander und muessen sich decken. */
  .msksrow.skill{grid-template-columns:74px minmax(120px,1.2fr) 1fr 56px 62px 62px 96px}
  .msksrow.modal .n{font-weight:700}
  .msskl{display:flex;gap:3px}
  .msskl b{display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:6px;font-size:10.5px;font-weight:800;
    color:var(--ink);background:var(--bg);
    box-shadow:inset 1px 1px 3px var(--lo),inset -1px -1px 3px var(--hi)}
  /* Der erste Buchstabe ist der erste Punkt. Ohne diese Hervorhebung liest
     sich „QEW" als Menge und nicht als Reihenfolge. */
  .msskl b:first-child{color:var(--cyan)}

  /* ---- Items ---- */
  .msits{display:flex;flex-direction:column;gap:3px}
  .msitrow{display:grid;grid-template-columns:30px minmax(140px,1.3fr) 1fr 56px 66px 150px;
    align-items:center;gap:10px;padding:4px 6px;border-radius:9px;font-size:11.5px;
    font-variant-numeric:tabular-nums}
  .msitrow:hover{background:rgba(255,255,255,.04)}
  /* Anteil >= 85 %: die Vergleichsgruppe der bereinigten Differenz ist eine
     Absonderlichkeit. Die Zeile wird markiert, nicht versteckt. */
  .msitrow.hi{border-left:3px solid var(--amber);padding-left:4px}
  .msitimg{width:26px;height:26px;border-radius:7px;object-fit:cover;display:block;
    box-shadow:inset 2px 2px 5px var(--lo)}
  .msitrow .n{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .msitrow .n em{font-size:9.5px;font-weight:800;margin-left:6px;font-style:normal;
    color:var(--ink3)}
  .msitrow .n em.def.mr{color:var(--violet)}
  .msitrow .n em.def.armor{color:var(--chart-cat3)}
  .msitrow .tr{position:relative;height:7px;border-radius:5px;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .msitrow .tr i{position:absolute;left:0;top:0;height:7px;border-radius:5px;
    background:var(--chart-cat1);opacity:.7}
  .msitrow .p{color:var(--ink);font-weight:700;text-align:right}
  .msitrow .g{color:var(--ink3);text-align:right;font-size:10.5px}
  .msitrow .adj{text-align:right}
  .msitrow .adj b{font-weight:800}
  .msitrow .adj b.up{color:var(--win)} .msitrow .adj b.dn{color:var(--loss)}
  .msitrow .adj em{display:block;font-size:9.5px;color:var(--ink3);font-style:normal}

  .msdmg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
    margin:12px 0 0;font-size:11.5px}
  .msdmg .l{color:var(--ink3)}
  .msdmg .tr{position:relative;height:9px;border-radius:5px;overflow:hidden;
    background:var(--chart-cat3);opacity:.55}
  .msdmg .tr i{position:absolute;left:0;top:0;height:9px;background:var(--violet);opacity:1}
  .msdmg .v{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
    white-space:nowrap}

  /* ---- Kaufreihenfolge ---- */
  .msorwrap{overflow-x:auto}
  .msorcols{display:flex;gap:12px;align-items:flex-start;min-width:min-content}
  .msorcol{flex:0 0 224px;min-width:0;display:flex;flex-direction:column;gap:5px;
    padding:10px 11px;border-radius:var(--rw);
    box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}
  /* Die Aussagekraft steht in der Farbe des Kopfes, nicht nur im Text: ab
     Position 3 wird die Stichprobe zur Gewinnerauswahl. */
  .msorcol.recommend .st{color:var(--win)}
  .msorcol.describe .st{color:var(--amber)}
  .msorcol.count_only{opacity:.72}
  .msorcol.count_only .st{color:var(--ink3)}
  .msorcol .h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    padding-bottom:5px;border-bottom:1px solid rgba(0,0,0,.28)}
  .msorcol .h b{font-size:11px;font-weight:700;color:var(--ink)}
  .msorcol .st{font-size:9.5px;font-weight:800;letter-spacing:.2px}
  .msorcol .m{font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .msorit{display:grid;grid-template-columns:26px minmax(0,1fr) 40px 40px;align-items:center;
    gap:7px;font-size:10.5px;font-variant-numeric:tabular-nums}
  .msorit .n{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .msorit .tr{position:relative;height:6px;border-radius:4px;
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  .msorit .tr i{position:absolute;left:0;top:0;height:6px;border-radius:4px;
    background:var(--chart-cat2);opacity:.7}
  .msorit .p{color:var(--ink);font-weight:700;text-align:right}

  /* ---- Rollenpruefung und „nicht gebaut" ---- */
  .msrole{display:flex;flex-direction:column;gap:4px}
  .msrole .msrow{display:grid;grid-template-columns:minmax(150px,1fr) 1fr 1fr auto;
    align-items:center;gap:12px;padding:6px;border-radius:9px;font-size:11.5px}
  .msrole .msrow .c{display:flex;align-items:center;gap:8px;min-width:0}
  .msrole .msrow .c b{color:var(--ink)}
  .msrole .msrow .c em{font-size:10px;color:var(--ink3);font-style:normal}
  .msrole .msrow .s,.msrole .msrow .f{color:var(--ink3);font-variant-numeric:tabular-nums}
  .msrole .msrow .v{font-size:10px;font-weight:800;white-space:nowrap}
  .msrole .msrow .v.ok{color:var(--win)} .msrole .msrow .v.bad{color:var(--loss)}

  .msnb{display:grid;grid-template-columns:minmax(160px,1fr) 3fr auto;gap:14px;
    align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.22);
    font-size:11.5px;line-height:1.6}
  .msnb b{color:var(--ink);font-weight:700}
  .msnb span{color:var(--ink2)}
  .msnb em{font-size:9.5px;font-weight:800;color:var(--win);font-style:normal;
    white-space:nowrap}
  .msnb em.off{color:var(--ink3)}

  /* ---- Telefon ---- */
  @media (max-width:760px){
    .msksrow{grid-template-columns:26px 1fr 52px 60px;row-gap:2px}
    .msksrow .tr,.msksrow .g,.msksrow .ci{display:none}
    .msitrow{grid-template-columns:26px 1fr 52px 120px;row-gap:2px}
    .msitrow .tr,.msitrow .g{display:none}
    .msslot{grid-template-columns:20px 1fr 60px 54px}
    .msslot .d{display:none}
    .msbar{width:96px}
    .msnb{grid-template-columns:1fr;gap:4px}
    .msrole .msrow{grid-template-columns:1fr;gap:2px}
  }

  /* ---- Filterfeld und Nachlegen ----
     814 Champion-Rollen-Paare sind eine Seite von 39.000 px Höhe (gemessen).
     Deshalb zeigt die Tabelle die ersten 140 Zeilen und ZÄHLT den Rest —
     dieselbe Lösung wie in der Match-Historie. Verschwiegen wird nichts. */
  .msfind{min-width:150px;flex:0 1 190px;font-size:12px;color:var(--ink);
    background:transparent;border:0;border-radius:10px;padding:7px 11px;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .msfind::placeholder{color:var(--ink3)}
  .msfind:focus{outline:1px solid var(--cyan);outline-offset:1px}
  .msmore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
    font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

  /* Der Vorbehalt bei sehr hohem Anteil steht als TEXT in der Zeile, nicht nur
     als Farbe am Rand: ein Randstreifen wird übersehen, und wer keine Farben
     unterscheidet, sieht ihn gar nicht. */
  .msitrow .n em.warn{color:var(--amber)}
  .msitrow.hi{background:rgba(217,164,65,.07)}

/* --- Bestes Build (kontextfrei) ----------------------------------------- */
/* Der oberste Kern ist die Aussage der Sektion und darf gross stehen; die
   uebrigen Kerne sind Vergleich, nicht Empfehlung, und bleiben Zeilen. */
.msbbtop{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(0,0,0,.32);border-radius:10px;margin-bottom:10px}
.msbbtop.thin{opacity:.75}
.msbbitems{display:inline-flex;gap:4px;align-items:center}
.msbbit img,.msbbit .msitimg{width:34px;height:34px;border-radius:6px}
.msbbmeta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.msbbwr{font-size:22px}
.msbbseq{display:flex;gap:8px;align-items:center;font-size:12px}
.msbbseq .msbbit img{width:22px;height:22px}
.msbbseq em{opacity:.7;font-style:normal}
.msbbseq.dim{opacity:.8}
.msbblist{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.msbbrow{display:flex;gap:12px;align-items:center;font-size:12px}
.msbbrow .msbbit img{width:22px;height:22px}
.msbbrow.thin{opacity:.6}
.msbbrow .g{min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.msbbrow .w em{opacity:.7;font-style:normal;margin-left:6px}
.msbbrow .p{margin-left:auto;font-variant-numeric:tabular-nums}