/* ---------- Match history ---------- */
  .tblwrap{overflow-x:auto;border-radius:10px}
  /* Fussleiste der History: wie viele Zeilen von wie vielen stehen da, und der
     Knopf, der den naechsten Schwung nachlegt. */
  .histmore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:12px;font-size:11.5px;color:var(--ink3)}
  .histmore[hidden]{display:none}
  .histmore .hmtxt{flex:1;min-width:160px}
  table{width:100%;border-collapse:collapse;font-size:12.5px}
  th{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:600;text-align:left;
    padding:8px 9px;border-bottom:1px solid var(--axis);white-space:nowrap}
  td{padding:9px 9px;color:var(--ink2);border-bottom:1px solid rgba(0,0,0,.28);white-space:nowrap}
  tbody tr.mrow-h{cursor:pointer}
  /* ---- Sieg/Niederlage als ganz leichte Flaechentoenung ----
     Zweck: die Farbfolge eines Abends beim UEBERFLIEGEN sehen. Wer auf eine
     einzelne Zeile schaut, soll die Toenung kaum bemerken — sie wirkt erst,
     wenn mehrere Zeilen untereinander stehen. Deshalb bewusst unterhalb der
     Schwelle, ab der man „gruen" bzw. „rot" denkt.
     Die Werte sind aus --win/--loss abgeleitet und je Skin eigens gesetzt:
     die Bento-Toene sind kraeftiger gesaettigt (#4fd191/#ff6b5e gegen
     #46c07a/#e0616a) und liegen auf einer dunkleren Flaeche (--surface
     #191d25 gegen --canvas #262b33), dieselbe Deckkraft wirkt dort also
     staerker — Bento bekommt entsprechend weniger.
     Die Kennzeichnung selbst (das W/L in `.wl`) bleibt unveraendert: die
     Toenung KOMMT HINZU, sie ersetzt nichts. Ohne Farbwahrnehmung bleibt die
     Zeile damit genauso lesbar wie vorher. */
  :root{ --rowwin:rgba(70,192,122,.055); --rowloss:rgba(224,97,106,.05) }
  #hist tbody tr.mr-w>td{background-color:var(--rowwin)}
  #hist tbody tr.mr-l>td{background-color:var(--rowloss)}
  /* Das Ueberfahren legt sich als eigene Ebene DARUEBER (background-image
     statt background-color). Setzte es wie frueher die Flaechenfarbe, wuerde
     es die Toenung ausloeschen und die ueberfahrene Zeile faelschlich
     neutral aussehen lassen. So bleibt beides sichtbar und addiert sich. */
  tbody tr.mrow-h:hover td{
    background-image:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045))}
  td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}
  .champ{font-weight:650;color:var(--ink)}
  .champsub{font-size:10px;color:var(--ink3);font-weight:500}
  .wl{display:inline-flex;width:26px;height:26px;border-radius:9px;align-items:center;justify-content:center;font-weight:800;font-size:12px;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .wl.W{color:var(--win)} .wl.L{color:var(--loss)}
  .pill{display:inline-block;padding:2px 9px;border-radius:9px;font-size:11px;font-weight:700;
    box-shadow:3px 3px 6px var(--lo),-2px -2px 5px var(--hi)}
  .pill.gut{color:var(--win)} .pill.ok{color:var(--amber)} .pill.naja{color:var(--amber)} .pill.mies{color:var(--loss)}
  /* Mate-Score bekommt EIGENE Stufenklassen. .pill teilt sich die Pille mit
     dem perf_score (.gut/.ok/.naja/.mies) — dessen Skala bleibt unberührt,
     sonst hätte eine Änderung am Mate-Score still den Score umgefärbt. */
  .pill.mt1{color:var(--loss)} .pill.mt2{color:var(--spike)} .pill.mt3{color:var(--win)}
  .pill.mt4{color:var(--mate-up)} .pill.mt5{color:var(--mate-up2)}
  /* Legende der Mate-Skala unter dem Kartenkopf der Match-History. Sie bricht
     um statt zu scrollen: fünf kurze Wortpaare, kein breiter Inhalt. */
  .mtleg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:-4px 0 12px;
    font-size:10.5px;color:var(--ink3)}
  .mtleg:empty{display:none}
  .mtleg .mtlt{font-weight:700;letter-spacing:.2px;color:var(--ink2)}
  .mtleg .mtl{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .mtleg .mtl b{font-variant-numeric:tabular-nums;font-weight:700}
  .mtleg .mtl.mt1 b{color:var(--loss)} .mtleg .mtl.mt2 b{color:var(--spike)}
  .mtleg .mtl.mt3 b{color:var(--win)} .mtleg .mtl.mt4 b{color:var(--mate-up)}
  .mtleg .mtl.mt5 b{color:var(--mate-up2)}
  .lobby{display:inline-block;padding:2px 8px;border-radius:9px;font-size:11px;font-weight:700;color:var(--ink2);
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  .lobby.mvp{color:var(--amber)}
  /* Fehlender Lobby-Platz: gedimmter Strich, damit „kein Wert" nicht wie ein
     schlechter Wert aussieht. */
  .lobby.na{color:var(--ink3)}
  .chev{color:var(--ink3);font-size:10px;transition:transform .15s;display:inline-block}
  tr.open .chev{transform:rotate(90deg)}
  tr.drow{display:none}
  tr.drow.show{display:table-row}
  tr.drow>td{padding:6px 9px 16px;white-space:normal}
  /* ---------- Session-Trenner in der Match-History ---------- */
  tr.srow>td{border-bottom:0;padding:18px 2px 7px;white-space:normal}
  #hist tbody tr.srow:first-child>td{padding-top:6px}
  .sess{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:7px 13px;border-radius:11px;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .sess .sdate{font-size:11.5px;font-weight:700;color:var(--ink);letter-spacing:.2px}
  .sess .stime{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .sess .smeta{font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
  .sess .smeta b.w{color:var(--win)} .sess .smeta b.l{color:var(--loss)}
  .sess .srating{color:var(--ink3)}
  .sess .sstrip{display:inline-flex;gap:3px;margin-left:auto}
  .sess .schip{width:13px;height:7px;border-radius:3px;display:inline-block}
  .sess .schip.W{background:rgba(70,192,122,.8)}
  .sess .schip.L{background:rgba(224,97,106,.75)}
  .detail{padding:12px 14px}
  .detail h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:700;margin-bottom:8px}
  /* ---------- Scoreboard (aufgeklapptes Match) ---------- */
  .sbwrap{overflow-x:auto;padding-bottom:2px}
  /* --sbcols definiert das Spaltenraster EINMAL — Kopfzeile und alle Spielerzeilen
     teilen es sich, damit alles exakt untereinander steht. */
  .sb{min-width:1040px;display:flex;flex-direction:column;gap:22px;
    --sbcols:46px 44px 28px 28px 162px 232px 88px 54px 62px minmax(118px,1fr) 54px}
  .sbhead{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:9px 14px;border-radius:13px;
    margin-bottom:9px;box-shadow:5px 5px 11px var(--lo),-4px -4px 10px var(--hi)}
  .sbres{font-size:15.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
  .sbres.w{color:var(--win)} .sbres.l{color:var(--loss)}
  .sbres span{margin-left:7px;font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:0}
  .objs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .obj{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 5px;border-radius:9px;color:var(--ink3);
    font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .obj svg{display:block;flex:0 0 auto}
  .obj .oi{width:19px;height:19px}
  .obj .oi+.oi{margin-left:-3px}
  .obj .n{color:var(--ink);margin-left:2px}
  .obj.zero{opacity:.45}
  /* Kopfzeile des Scoreboards: Überschrift + EIN Match-Link-Button je Match */
  .sbtop{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:9px}
  .sbtop h3{margin-bottom:0}
  .sbtop .copybtn{margin-left:auto;font-size:11.5px;padding:7px 15px;white-space:nowrap}
  /* Kopfzeile mit Spaltenlabels — typografisch klar untergeordnet */
  .sbcols{display:grid;gap:10px;align-items:end;grid-template-columns:var(--sbcols);
    padding:0 10px 6px;margin-bottom:2px;border-bottom:1px solid rgba(0,0,0,.32);
    font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.65px;color:var(--ink3)}
  .sbcols .who{grid-column:1/6}
  .sbcols .c{text-align:center} .sbcols .r{text-align:right}
  .sbrows{display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
  .prow{display:grid;gap:10px;align-items:center;padding:7px 10px;min-height:46px;
    grid-template-columns:var(--sbcols)}
  .prow+.prow{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
  .prow:nth-child(even){background:rgba(255,255,255,.022)}
  .prow.me{background:rgba(79,195,232,.10);box-shadow:inset 3px 0 0 0 var(--cyan),inset 0 1px 0 rgba(255,255,255,.045)}
  .prow:hover{background:rgba(255,255,255,.055)}
  .prow.me:hover{background:rgba(79,195,232,.155)}
  .pbadge{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 6px;border-radius:8px;
    font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--ink3);
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .pbadge.mvp{color:#f0cb69;background:rgba(217,164,65,.14);
    box-shadow:inset 0 0 0 1.2px rgba(217,164,65,.55),inset 2px 2px 5px rgba(0,0,0,.38)}
  .pbadge.ace{color:#a8dcf4;background:rgba(79,195,232,.13);
    box-shadow:inset 0 0 0 1.2px rgba(79,195,232,.5),inset 2px 2px 5px rgba(0,0,0,.38)}
  .pchamp{position:relative;display:inline-flex;width:34px;height:34px;flex:0 0 auto}
  .cicon2{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;
    box-shadow:3px 3px 6px var(--lo),-2px -2px 5px var(--hi)}
  .cfall2{display:none;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:var(--ink2);
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .plvl{position:absolute;right:-5px;bottom:-4px;min-width:17px;height:15px;padding:0 3px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;background:var(--canvas);
    font-size:9.5px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums;
    box-shadow:2px 2px 5px var(--lo),-1px -1px 3px var(--hi)}
  .pruns,.pspells{display:flex;flex-direction:column;gap:3px;align-items:center}
  .rwell{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;background:#20242b;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 4px var(--hi)}
  .rwell.sq{border-radius:7px}
  .rwell img{width:100%;height:100%;object-fit:contain;display:block}
  .rwell .rfall{display:none;width:100%;height:100%;align-items:center;justify-content:center;
    font-size:8px;font-weight:800;letter-spacing:.2px;color:var(--ink3)}
  .pname2{min-width:0}
  .pname2 a{display:block;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pname2 a:hover{color:var(--cyan);text-decoration:underline}
  .ptag{color:var(--ink3);font-weight:500}
  .prank2{font-size:10.5px;color:var(--ink3);white-space:nowrap}
  .pitems{gap:4px;flex-wrap:nowrap}
  .pitems .itile{flex:0 0 auto}
  .pkda{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink);
    font-variant-numeric:tabular-nums;line-height:1.25;white-space:nowrap}
  .pkda .d{color:var(--loss)}
  .pkda .sl{color:var(--ink3);font-weight:500}
  .kdar{font-size:10px;font-weight:600;color:var(--ink3)}
  .pstat{text-align:center;line-height:1.25}
  .pstat .v{font-size:12.5px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
  .pstat .l{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3)}
  .pdmg{text-align:center;line-height:1.25;min-width:0}
  .pdmg .v{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .pdmg .pm{font-size:9.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .dtrack2{height:5px;border-radius:3px;margin-top:5px;
    box-shadow:inset 2px 2px 4px var(--lo),inset -1px -1px 3px var(--hi)}
  .dbar2{height:5px;border-radius:0 4px 4px 0;background:var(--ink3);opacity:.85}
  .pscore{text-align:right;font-size:21px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
  .pscore.hi{color:var(--win)} .pscore.mid{color:var(--ink)} .pscore.lo{color:var(--loss)}
  .pscore.na{color:var(--ink3)} .pbadge.na{color:var(--ink3)}
  /* Enger wird nur das Raster — Runen und Spells bleiben in JEDER Breite sichtbar,
     .sbwrap scrollt horizontal, damit die Zeile immer vollständig ist. */
  @media(max-width:1200px){
    .sb{min-width:960px;--sbcols:44px 42px 26px 26px 140px 216px 82px 50px 58px minmax(104px,1fr) 50px}
  }
  @media(max-width:900px){
    .sb{min-width:620px;--sbcols:38px 38px 24px 24px minmax(92px,1fr) 72px 44px 50px 88px 42px}
    .sbcols{display:none}
    .prow{gap:8px}
    .pitems{order:9;grid-column:1/-1;margin-top:5px}
    .pscore{font-size:19px}
  }
  .plink{color:var(--ink);text-decoration:none;font-weight:600}
  .plink:hover{color:var(--cyan);text-decoration:underline}
  .irow{display:flex;gap:4px;align-items:center}
  .itile{display:inline-flex;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;
    flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.2px;color:var(--ink2);cursor:default;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .itile.empty{opacity:.45}
  /* Trinket klar von den 6 Item-Slots getrennt */
  .itile.trink{color:var(--amber);margin-left:10px}
  .itile .iimg{width:28px;height:28px;border-radius:8px;object-fit:cover;display:block}
  .teamdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
  .teamdot.b{background:var(--cyan)} .teamdot.r{background:var(--violet)}

  /* ---------- Vergleich ---------- */
  .cmp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .cmp-input{flex:1;min-width:210px;display:flex;align-items:center;gap:10px}
  .cmp-input input{
    flex:1;border:0;outline:none;background:var(--canvas);color:var(--ink);font:inherit;font-size:13px;
    padding:10px 16px;border-radius:12px;
    box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
  .cmp-input input::placeholder{color:var(--ink3)}
  .cmp-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2);margin-bottom:12px}
  .cmp-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
  /* 6 Metriken → exakt 3×2, keine einsame Kachel in der letzten Reihe */
  .cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px}
  @media(max-width:860px){.cmp-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.cmp-grid{grid-template-columns:1fr}}
  .duel{padding:12px 14px;border-radius:var(--rw);
    box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
  .duel .mlbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3);margin-bottom:9px}
  .drow2{display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center;padding:2.5px 0;border-radius:6px}
  .drow2:hover{background:rgba(255,255,255,.04)}
  .dtrack{height:7px;border-radius:5px;position:relative;background:rgba(0,0,0,.25)}
  .dbar{position:absolute;left:0;top:0;height:7px;border-radius:0 4px 4px 0}
  .dval{font-size:11px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
  .cmp-note{font-size:11px;color:var(--ink3);margin-top:14px}

  /* ---------- Views ---------- */
  .viewwrap{display:flex;flex-direction:column;gap:var(--gap)}
  .viewwrap[hidden]{display:none!important}
  .stickybar[data-hidden]{display:none}
  /* ---------- Reiterleiste ----------
     Der Blickfang der Kopfzeile. Sie ist der Weg zu allen neun Bereichen und
     traegt deshalb die groesste Schrift der Zeile (frueher: die kleinste).
     Der aktive Reiter bekommt DREI Kanaele statt einem: Akzentfarbe, erhabene
     Flaeche und einen 2 px starken Balken an der Unterkante. Der Balken ist
     deckend gesetzt (kein Alpha), damit er in beiden Skins gleich sitzt. */
  .viewseg{margin-left:16px;padding:4px}
  /* 9 px Innenabstand statt 11: die 36 px, die das ueber neun Reiter spart,
     gehen an den Accountblock. Ohne sie stand dessen zweite Zeile im
     Neo-Skin bei JEDER Breite als „Emerald IV · 91 " da — 44 px fehlten.
     Der Schriftgrad bleibt, die Reiterleiste also weiterhin der groesste
     Text der Zeile; nur ihre Polster werden knapper. */
  .viewseg button{font-size:12.5px;font-weight:650;padding:7px 9px;color:var(--ink2);
    position:relative}
  .viewseg button:hover{color:var(--ink)}
  .viewseg button.on{color:var(--cyan);font-weight:750}
  .viewseg button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;
    height:2px;border-radius:2px;background:var(--cyan)}