/* ---------- Stat tiles ---------- */
  /* Feste 4 Spalten → 8 Kacheln ergeben exakt zwei volle Reihen, keine Lücke. */
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
  .tile{border-radius:var(--r);padding:15px 18px 12px;background:var(--canvas);
    box-shadow:7px 7px 14px var(--lo),-5px -5px 12px var(--hi)}
  .tile .lbl{font-size:9.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
  /* Wert links, Sparkline rechts — die Kachel füllt ihre Breite und bleibt flach. */
  .tile .trow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:5px}
  .tile .trow>div{min-width:0}
  .tile .val{font-size:25px;font-weight:650;line-height:1.1}
  .tile .val small{font-size:13px;font-weight:500;color:var(--ink2)}
  .tile .det{font-size:11px;color:var(--ink2);margin-top:1px;white-space:nowrap}
  /* Eine Zusatzzeile, die laenger ist als die halbe Kachel, darf UMBRECHEN
     statt unter der Sparkline zu verschwinden. Betrifft genau die Form-Zeile
     der Winrate-Kachel: sie nennt seit dem 28.07. auch die Spielzahl im
     Filter ("letzte 20 von 942") und passt sonst nicht mehr in eine Zeile.
     Die Kachelreihe wird dadurch eine Textzeile hoeher — sichtbar, aber
     ehrlicher als ein abgeschnittener Satz. */
  .tile .det.wrap{white-space:normal;line-height:1.35}
  /* Fehlerzustand: an der Stelle der Zahlen steht der Grund. Die Kachel nimmt
     die volle Breite der Kachelreihe ein — der Satz soll gelesen werden, nicht
     in eine Spalte gequetscht sein. Es gibt hier bewusst KEINE Zahl. */
  .tile.failbox{grid-column:1/-1;padding:17px 20px 16px;white-space:normal}
  .failbox .faillead{font-size:13px;line-height:1.55;color:var(--loss)}
  .failbox .faillead b{color:var(--loss);font-weight:700}
  .failbox .failbody{font-size:11.5px;line-height:1.6;color:var(--ink2);margin-top:7px}
  .failbox .faildo{font-size:11.5px;line-height:1.6;color:var(--ink2);margin-top:5px}
  .failbox .faildo b{color:var(--ink);font-weight:600;
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
  /* overflow:visible — der Endpunkt wird mit fester Pixelgröße gezeichnet und
     darf deshalb minimal über die viewBox hinausragen, ohne abgeschnitten zu
     werden (Innenabstand der Kachel fängt ihn auf). */
  .tile .spark{flex:0 1 auto;width:118px;max-width:46%;height:auto;margin-bottom:2px;overflow:visible}
  .ffhead{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
    color:var(--ink3);margin:14px 0 6px}

  /* ---------- Grids ---------- */
  /* align-items:start — Karten strecken sich nicht auf Zeilenhöhe, sondern
     bleiben so hoch wie ihr Inhalt (keine toten Flächen am Kartenende). */
  /* Gleich breite Spalten → die skalierenden SVG-Charts sind in allen Spalten
     exakt gleich hoch. */
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);align-items:start}
  .stack{display:flex;flex-direction:column;gap:var(--gap)}
  /* Thematische Reihe: drei gleich hohe Karten, deren Inhalt sich streckt,
     damit alle Kartenunterkanten exakt fluchten (kein Masonry-Versatz mehr). */
  .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
  .row3>.card{display:flex;flex-direction:column}
  .row3 .grow{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
  /* Eine hohe Karte links, zwei gestapelte rechts */
  .rowsplit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
  .rowsplit>.stack{display:flex;flex-direction:column;gap:var(--gap)}
  /* Abschnitts-Überschrift über jeder Reihe */
  .secthead{display:flex;align-items:baseline;gap:12px;margin:10px 2px -4px}
  .secthead h3{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
  .secthead .sub{font-size:11.5px;color:var(--ink3)}
  /* Schmaler: die Stapel lösen sich auf (display:contents), damit die Karten
     einzeln umbrechen — sonst bliebe eine ganze Spalte leer. */
  @media(max-width:1080px){
    .grid3{grid-template-columns:1fr 1fr}
    .grid3 .stack{display:contents}
    .row3{grid-template-columns:1fr 1fr}
  }
  @media(max-width:860px){
    .grid3{grid-template-columns:1fr}
    .row3{grid-template-columns:1fr}
    .rowsplit{grid-template-columns:1fr}
    .tiles{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:760px){
    body{padding:18px 14px 50px}
    .stickybar{margin:-6px -14px 0;padding:8px 14px 4px}
    .tb-profile{border-left:none;padding-left:0;margin-left:0}
  }

  /* ---------- Bar lists ---------- */
  /* Einheitliche Zeilenmetrik für ALLE Balkenlisten (Farm, Ping-Typen, Objectives, Rollen). */
  .frow{display:grid;grid-template-columns:120px 1fr 46px;align-items:center;gap:10px;
    min-height:38px;padding:5px 6px;border-radius:10px}
  .frow:hover{background:rgba(255,255,255,.04)}
  .frow.small{opacity:.62}
  .fname{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
  .fmeta{font-size:10.5px;color:var(--ink3);line-height:1.25}
  .ftrack{height:8px;border-radius:6px;position:relative;
    box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
  .fbar{position:absolute;left:0;top:0;height:8px;border-radius:0 4px 4px 0;background:var(--cyan)}
  .fval{font-size:12px;color:var(--ink);text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
  .fcell{display:flex;align-items:center;gap:8px;min-width:0}
  .cwrap{display:inline-flex;flex:0 0 auto}
  .cicon{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;
    box-shadow:2px 2px 5px var(--lo),-2px -2px 4px var(--hi)}
  .cfall{display:none;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:var(--ink2);
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}

  /* ---------- Objective-Icons (Community Dragon, mit Glyph-Fallback) ---------- */
  .oi{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}
  .oi img{width:100%;height:100%;object-fit:contain;display:block}
  .oi .ofb{display:none;align-items:center;justify-content:center;width:100%;height:100%;color:#b8c2d2}
  .oi.big{width:26px;height:26px}
  .oi.sm{width:17px;height:17px}
  /* Well-Variante für die Balkenliste im Dashboard */
  .oiwell{width:28px;height:28px;border-radius:50%;padding:4px;background:rgba(0,0,0,.16);
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}

  /* ---------- SVG charts ---------- */
  .chart{width:100%;height:auto;display:block}
  .grid-l{stroke:var(--grid);stroke-width:1}
  .axis-l{stroke:var(--axis);stroke-width:1}
  .tick{font-size:9.5px;fill:var(--ink3)}
  .dlabel{font-size:10px;font-weight:700;fill:var(--ink)}
  .reflabel{font-size:9.5px;font-weight:600;fill:var(--ink2)}

  /* ---------- Columns ---------- */
  .cols{display:flex;align-items:flex-end;gap:2px;height:126px;padding:0 4px;border-bottom:1px solid var(--axis)}
  .colhit{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;border-radius:8px}
  .colhit:hover{background:rgba(255,255,255,.05)}
  .col{width:100%;max-width:12px;border-radius:4px 4px 0 0}
  .clabel{position:absolute;top:0;font-size:10px;font-weight:700;color:var(--ink)}
  .cxrow{display:flex;gap:2px;padding:4px 4px 0}
  .cxrow span{flex:1;text-align:center;font-size:9.5px;color:var(--ink3);white-space:nowrap}
  /* Achsen-Enden: linke Beschriftung linksbündig, rechte rechtsbündig —
     so bleibt auch der längere englische Text ("20 games ago") im Rahmen. */
  .cxrow .lft{text-align:left} .cxrow .rgt{text-align:right}

  /* ---------- Streaks ---------- */
  .streakgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .swell{border-radius:var(--rw);padding:12px 14px;
    box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
  .swell .lbl{font-size:9.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px}
  .swell .val{font-size:22px;font-weight:700;margin-top:2px;line-height:1.15}
  .swell .val.w{color:var(--win)} .swell .val.l{color:var(--loss)}
  .swell .note{font-size:10px;color:var(--ink3);margin-top:2px;line-height:1.3}
  .strip{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
  .chip{width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;
    font-size:9.5px;font-weight:800;
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  .chip.W{color:var(--win)} .chip.L{color:var(--loss)}
  .stripnote{font-size:11px;color:var(--ink3);margin-top:7px}
  /* Nullbefund-Zeile: bewusst sichtbar, nicht weggelassen — der Nutzer soll
     sehen, dass geprüft wurde und nichts herauskam. */
  .stripnote.nullnote{margin-top:9px;line-height:1.45;font-size:10.5px}

  /* ---------- Callout ---------- */
  .callout{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:11.5px;line-height:1.45;color:var(--ink2);
    display:flex;align-items:center;gap:11px;
    box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
  .callout b{color:var(--ink)}
  .callout .big{font-size:22px;font-weight:700;color:var(--ink);line-height:1;flex:0 0 auto}

  /* ---------- Heatmap ---------- */
  .hm{display:grid;grid-template-columns:44px repeat(13,1fr);gap:3px}
  .hm .hlbl{font-size:10.5px;color:var(--ink3);display:flex;align-items:center;justify-content:center}
  .hm .day{font-size:11px;color:var(--ink2);display:flex;align-items:center;font-weight:600}
  .cell{height:30px;border-radius:7px;position:relative;cursor:default}
  .cell:hover{outline:2px solid var(--ink);outline-offset:1px;z-index:2}
  /* „Zu wenige Spiele" ist KEIN Datenwert — die Zelle bekommt deshalb einen
     eigenen, klar dunkleren Grund UND eine feine 45°-Schraffur. Beides zusammen
     macht sie auch dann als „leer" lesbar, wenn direkt daneben ein Slot mit
     exakt 50 % WR (= --hm-neut) liegt. */
  .cell.null{background:var(--hm-null);opacity:1;
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 2px,rgba(0,0,0,0) 2px 6px);
    box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
  /* .cell.mark / [data-flag] (🏆 bester, 💤 schlechtester Slot) sind am
     28.07.2026 entfallen — siehe renderHeat(): die Markierung behauptete
     einen Zeit-Effekt, den der Permutationstest nicht belegt. */
  .legend{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11px;color:var(--ink3)}
  .lgrad{width:150px;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--hm-warm),var(--hm-neut) 50%,var(--hm-cool))}
  .hcall{margin-top:12px;font-size:11.5px;color:var(--ink2)}
  .hcall b{color:var(--ink)}