/* ---------- Champions ---------- */
  #chtbl tbody tr{cursor:pointer}
  #chtbl tbody tr:hover td{background:rgba(255,255,255,.04)}
  #chtbl tbody tr.on td{background:rgba(79,195,232,.10)}
  .wrbar{display:flex;align-items:center;gap:9px;min-width:150px}
  .wrtrack{position:relative;flex:1;height:7px;border-radius:5px;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .wrci{position:absolute;top:0;height:7px;border-radius:4px;background:rgba(79,195,232,.28)}
  .wrdot{position:absolute;top:-2px;width:4px;height:11px;border-radius:2px;background:var(--cyan)}
  .wrbase{position:absolute;top:-3px;width:1.5px;height:13px;background:var(--ink3);opacity:.75}
  .wrnum{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;flex:0 0 auto;width:52px;text-align:right}
  .buildrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .bslot{display:flex;flex-direction:column;align-items:center;gap:5px;width:78px}
  .bslot .bimg{width:44px;height:44px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
    box-shadow:inset 2px 2px 6px var(--lo),inset -2px -2px 6px var(--hi)}
  .bslot .bimg img{width:44px;height:44px;object-fit:cover;display:block}
  .bslot .bn{font-size:10px;color:var(--ink2);text-align:center;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bslot .bp{font-size:10.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .bslot .bd{font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .bd.up{color:var(--win)} .bd.dn{color:var(--loss)}
  .barrow{color:var(--ink3);font-size:15px;align-self:center;margin-top:-14px}

  /* ---------- Build-Reihenfolge (KONZEPT §16g) ----------
     Je Kaufposition eine Spalte. Sechs Spalten sind breiter als ein Telefon,
     deshalb bekommt der Block seinen EIGENEN waagerechten Scrollbereich
     (.xscroll trägt bereits overscroll-behavior). Die Seite selbst scrollt
     dadurch nie seitwärts. */
  .boroles{margin-bottom:12px;max-width:100%}
  .boroles .bon{font-size:9.5px;font-weight:800;color:var(--ink3);
    font-variant-numeric:tabular-nums;margin-left:5px}
  .boroles button.on .bon{color:var(--cyan)}
  .bobasis{font-size:11.5px;line-height:1.55;color:var(--ink2);padding:10px 14px;
    border-radius:var(--rw);margin-bottom:12px;
    box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
  .bobrow{display:flex;gap:8px;flex-wrap:wrap}
  .bobrow b{color:var(--ink);font-weight:700;white-space:nowrap}
  .bobasis .bowhy{margin-top:6px;font-size:10.5px;line-height:1.5;color:var(--ink3)}
  .bowrap{overflow-x:auto}
  .bocols{display:flex;gap:12px;align-items:flex-start;min-width:min-content}
  .bocols.bostart{min-width:0}
  .bocol{flex:0 0 232px;min-width:0;display:flex;flex-direction:column;gap:5px}
  .bocols.bostart .bocol{flex:1 1 232px}
  .boch{display:flex;align-items:baseline;gap:8px;padding:0 3px 5px;
    border-bottom:1px solid rgba(0,0,0,.30)}
  .boch b{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.2px}
  .boch span{font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .boitem{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px}
  .boitem:hover{background:rgba(255,255,255,.045)}
  .boimg{width:30px;height:30px;flex:0 0 auto;border-radius:8px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .boimg img{width:30px;height:30px;object-fit:cover;display:block}
  .bomain{flex:1 1 auto;min-width:0}
  .bonm{display:block;font-size:11.5px;color:var(--ink);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bonm .botag{font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    color:var(--ink3);font-style:normal;margin-left:6px}
  .botrack{display:block;height:4px;border-radius:3px;margin-top:4px;overflow:hidden;
    box-shadow:inset 2px 2px 4px var(--lo),inset -1px -1px 3px var(--hi)}
  .botrack i{display:block;height:100%;border-radius:3px;background:var(--cyan)}
  .bonum{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
  .bonum b{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
  .bonum em{display:block;font-size:10px;font-style:normal;color:var(--ink3)}
  .bonote{margin-top:8px;font-size:10.5px;line-height:1.5;color:var(--ink3)}

  /* ---------- Endbuild UND Kaufreihenfolge nebeneinander ----------
     „Was steht am Ende im Inventar" und „womit fange ich an" sind zwei
     verschiedene Fragen. Sie stehen deshalb als zwei gleich breite Felder
     direkt nebeneinander und ganz oben im Champion-Detail: wer einen
     Champion aufklappt, hat beide sofort im Bild. Die vollständige
     Rangliste je Kaufposition folgt erst darunter. */
  .cb2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  @media(max-width:1180px){.cb2{grid-template-columns:1fr}}
  .cb2pane{min-width:0}
  .cb2h{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-bottom:9px;
    padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.30)}
  .cb2h b{font-size:11.5px;font-weight:700;color:var(--ink);letter-spacing:.2px}
  .cb2h span{font-size:10.5px;line-height:1.35;color:var(--ink3)}
  /* Die Reihenfolge-Kette benutzt bewusst dieselben Kacheln wie der Endbuild —
     nur so lassen sich beide Zeilen ohne Nachdenken vergleichen. */
  .bochain{gap:7px}
  .boslot{width:76px}
  .boslot .bopos{font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink3);font-variant-numeric:tabular-nums;line-height:1.2}
  .boslot .bn .botag{display:block;font-size:8.5px;font-weight:800;letter-spacing:.5px;
    text-transform:uppercase;color:var(--ink3);font-style:normal}
  /* Ladeplatz. Er steht SOFORT da und sagt, was gerade passiert: die
     Reihenfolge wird aus den Match-Timelines gelesen und ist beim ersten
     Aufruf eines viel gespielten Champions langsam. Ein leerer Kasten wäre
     hier derselbe Fehler wie eine Reihenfolge, die niemand findet. */
  .boload{display:flex;align-items:flex-start;gap:6px 11px;flex-wrap:wrap}
  .bospin{flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
    border:2px solid var(--ink3);border-top-color:transparent;animation:bospin 1s linear infinite}
  .bolt{flex:1 1 170px;min-width:0;font-size:11.5px;line-height:1.5}
  .bolt b{display:block;color:var(--ink);font-weight:650}
  .bolt .boel{color:var(--ink3);font-variant-numeric:tabular-nums}
  .bolwhy{flex:1 1 100%;font-size:10.5px;line-height:1.5;color:var(--ink3)}
  @keyframes bospin{to{transform:rotate(360deg)}}
  /* Aufgeklapptes Detail unter einer langen Championliste: ohne diesen
     Abstand schöbe die klebende Filterleiste den Kopf der Karte zu. */
  #chdetail{scroll-margin-top:78px}

  .runerow{display:flex;gap:10px;flex-wrap:wrap}
  .rchip{display:flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;border-radius:13px;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .rchip img{width:28px;height:28px;object-fit:contain;display:block;flex:0 0 auto}
  .rchip .rn{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.25}
  .rchip .rm{font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .mugrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
  @media(max-width:860px){.mugrid{grid-template-columns:1fr}}

  /* Ø K/D/A als Dreiergruppe: nur die Tode sind farblich abgesetzt — bei ihnen
     ist „klein" gut, bei Kills und Assists „groß". */
  .kda3{font-variant-numeric:tabular-nums;white-space:nowrap}
  .kda3 .d{color:var(--loss)}
  .kda3 .sl{color:var(--ink3);font-weight:500}

  /* ---------- Rollen-Aufschlüsselung je Champion (Aufgabe 2) ----------
     Jede Rolle ist eine eigene, aufklappbare Zeile. Rollen mit wenig Spielen
     werden NICHT versteckt, sondern nur gedimmt (.sparse) — „selten gespielt"
     ist eine Information, „nicht vorhanden" wäre eine Lüge. */
  .rolelist{display:flex;flex-direction:column;gap:8px}
  .rolebox{border-radius:var(--rw);overflow:hidden;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .rolebox.sparse{opacity:.62}
  .rolebox.sparse:hover,.rolebox.open.sparse{opacity:.85}
  .rolehead{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;width:100%;
    border:0;background:transparent;color:inherit;font:inherit;text-align:left;
    cursor:pointer;padding:10px 13px}
  .rolehead:hover{background:rgba(255,255,255,.04)}
  .rolehead:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
  .rolebox.open .rolehead .chev{transform:rotate(90deg)}
  .rolehead .rlname{font-size:12.5px;font-weight:700;color:var(--ink);min-width:66px}
  .rolehead .rlmain{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--cyan);padding:1px 6px;border-radius:6px;
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  .rolehead .rlgames{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
  .rolehead .wrbar{min-width:132px;flex:0 0 auto}
  .rlstats{display:flex;align-items:flex-end;gap:4px 16px;flex-wrap:wrap;margin-left:auto}
  .rlstat{line-height:1.2;text-align:right;min-width:44px}
  .rlstat .v{display:block;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .rlstat .l{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:var(--ink3)}
  .rlstat .v .d{color:var(--loss)} .rlstat .v .sl{color:var(--ink3);font-weight:500}
  .rolebody{display:none;padding:2px 13px 14px}
  .rolebox.open .rolebody{display:block}
  .rolebody .chead{margin-bottom:8px}
  .rolebody .well{background:rgba(0,0,0,.12)}
  .rolenote{font-size:11px;color:var(--ink3);padding:4px 2px 2px;line-height:1.45}
  @media(max-width:860px){
    .rolehead .wrbar{min-width:110px}
    .rlstats{margin-left:0;width:100%;justify-content:flex-start}
  }
  .skin-bento .rolebox{background:var(--inset);border:1px solid var(--line);box-shadow:none}
  /* Build-Reihenfolge im flachen Skin: dieselben Flächen, 1-px-Kanten. */
  .skin-bento .bobasis{background:var(--inset);border:1px solid var(--line);box-shadow:none}
  .skin-bento .boimg,.skin-bento .botrack{background:var(--track);box-shadow:none}
  .skin-bento .botrack i{border-radius:2px}
  .skin-bento .boch{border-bottom:1px solid var(--line)}
  .skin-bento .boitem:hover{background:var(--surface)}
  .skin-bento .cb2h{border-bottom:1px solid var(--line)}
  .skin-bento .bospin{border-color:var(--line2);border-top-color:transparent}
  .skin-bento .rolehead .rlmain{background:var(--surface);border:1px solid var(--line2);box-shadow:none}
  .skin-bento .rolebody .well{background:var(--surface)}

  /* ---------- Records ---------- */
  .recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .recgrid.small{grid-template-columns:repeat(3,1fr)}
  @media(max-width:1080px){.recgrid{grid-template-columns:repeat(3,1fr)}.recgrid.small{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:760px){.recgrid,.recgrid.small{grid-template-columns:repeat(2,1fr)}}
  .rcard{position:relative;padding:13px 15px;border-radius:var(--rw);text-align:left;
    border:0;background:transparent;color:inherit;font:inherit;width:100%;
    box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
  button.rcard{cursor:pointer}
  button.rcard:hover{box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi),0 0 0 1.5px rgba(79,195,232,.45)}
  .rcard .rl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--ink3)}
  .rcard .rv{font-size:23px;font-weight:700;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
  .rcard .rd{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ink2);margin-top:6px}
  .rcard .rd img{width:20px;height:20px;border-radius:50%;flex:0 0 auto}
  .rcard .rw{font-weight:800} .rcard .rw.w{color:var(--win)} .rcard .rw.l{color:var(--loss)}
  .rcard .rsub{font-size:10.5px;color:var(--ink3);margin-top:4px;line-height:1.4}

  /* ---------- Raw ---------- */
  .rawmeta{font-size:11.5px;color:var(--ink3);margin-bottom:10px;font-variant-numeric:tabular-nums}
  .rawwell{padding:0;overflow:hidden}
  .rawpre{max-height:640px;overflow:auto;padding:14px 16px;margin:0;
    font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:11.5px;line-height:1.55;
    color:var(--ink2);white-space:pre;tab-size:2}

  /* ---------- Tooltip ---------- */
  #tip{position:fixed;display:none;z-index:99;pointer-events:none;max-width:250px;
    background:#151920;color:#eef2f8;font-size:12px;padding:7px 11px;border-radius:10px;
    box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)}
  #tip b{color:#fff}