/* =====================================================================
     SKIN „ugg" — globale Optik im Stil grosser Stat-Seiten (u.gg-artig).
     KEINE Kopie fremder Marken/Logos/Assets: nur ein eigenstaendiges
     dunkles Navy-Blau-Thema (Aufbau, Farben, Tabellen-/Karten-Optik).

     Baut auf „graphit" auf: applySkin() setzt html.skin-graphit UND
     html.skin-ugg. Graphit liefert die flache Struktur (Hairlines, keine
     Schatten, drei Ebenen); diese Datei ueberschreibt NUR die Palette und
     ein paar Dichte-/Akzent-Details. Sie wird NACH skin-graphit.css geladen,
     damit die Token-Overrides bei gleicher Spezifitaet gewinnen.
     ===================================================================== */
  html.skin-ugg{
    --lo:transparent; --hi:transparent;
    /* Drei Ebenen, sehr dunkles Navy-Schwarz: Seite < Karte < gehoben. */
    --canvas:#0A0E17; --surface:#12161F; --inset:#1A1F2C;
    --line:#232A38; --line2:#323C4E; --track:#232A38;
    /* Text: hell, klar gestuft. */
    --ink:#E7EBF2; --ink2:#9AA4B8; --ink3:#6E7688;
    /* --cyan ist DIE Akzentvariable (aktive Reiter, Knoepfe, Fokus, Balken)
       → kraeftiges Blau. --violet traegt Avatar-Initialen u. Ae. */
    --cyan:#4E86FF; --violet:#8B7BF0;
    /* Statusfarben: Win = Blau (Konvention grosser Stat-Seiten), Loss = Rot. */
    --win:#3D7BFD; --loss:#E0575F; --amber:#E0A63C; --spike:#E0663C;
    /* Mate-Score-Stufen: violette Familie. */
    --mate-up:#8B7BF0; --mate-up2:#B3A6F7;
    /* Divergenz-Skala Heatmap: Loss ↔ dunkle Mitte ↔ Win. Als HEX, weil
       mix()/hx() in js/view/render.js #rrggbb parsen. */
    --hm-warm:#E0575F; --hm-cool:#3D7BFD; --hm-neut:#2A3242; --hm-null:#070A11;
    /* Teamfarben. */
    --team-b:#3D7BFD; --team-r:#E0575F;
    --grid:#232A38; --axis:#323C4E;
    /* Diagrammserien (fest, NICHT der Akzent — der darf keine Datenreihe sein). */
    --chart-surf:var(--inset);
    --chart-cat1:#4E86FF; --chart-cat2:#E0863C; --chart-cat3:#22B07A;
    --chart-ref:#6E7688;
    /* Zeilentoenung der History: hauchduenn. */
    --rowwin:rgba(61,123,253,.06); --rowloss:rgba(224,87,95,.05);
    /* Spielerfarben Vergleich/Lobby. */
    --w-p1:#4E86FF; --w-p2:#E0863C; --w-p3:#22B07A;
    --w-p4:#E0A63C; --w-p5:#D55181; --w-p6:#7FA7CF;
    /* Kompakte Radien wie bei den grossen Stat-Seiten. */
    --r:6px; --rw:4px;
    --gap:14px; --pad:14px; --padx:18px;
    scrollbar-color:#323C4E #0A0E17;
  }

  /* ---- Aktiver Reiter: Akzentfarbe + Unterstrich (Tab-Optik) ---------- */
  html.skin-ugg .seg.viewseg button.on{
    color:var(--cyan);
    box-shadow:inset 0 -2px 0 0 var(--cyan);
    border-radius:0}
  html.skin-ugg .seg.viewseg button{border-radius:0}

  /* ---- Kopfzeile: durchgehender dunkler Balken statt „Karte" ---------- */
  html.skin-ugg .topbar{
    background:var(--surface);border:0;border-bottom:1px solid var(--line);
    border-radius:0}

  /* ---- Tabellen dichter, mit klaren Zeilentrennern und Hover ---------- */
  html.skin-ugg table th{
    color:var(--ink3);font-size:11px;letter-spacing:.3px;text-transform:uppercase;
    border-bottom:1px solid var(--line2);padding:8px 10px}
  html.skin-ugg table td{padding:7px 10px;border-bottom:1px solid var(--line)}
  html.skin-ugg tbody tr:hover td{background:rgba(78,134,255,.05)}

  /* ---- Kacheln: flacher, kompakter Rahmen ---------------------------- */
  html.skin-ugg .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}

  /* ---- Primaerknopf im Akzentblau (u.gg-typische Buttons) ------------ */
  html.skin-ugg .btn.primary,html.skin-ugg #cmpbtn,html.skin-ugg #syncbtn:not(.w-locked){
    background:var(--cyan);color:#08111f;border-color:var(--cyan);font-weight:700}