/* ═══════════════════════════════════════════════════════════════════════════
   SPIELERPROFILE — Dialog (v3.58)
   ───────────────────────────────────────────────────────────────────────────
   Liegt NACH design.css und battles.css. Der Dialog sitzt im Modal der Seite
   (#modal-box, 500 px, scrollbar); hier stehen nur Kopf, Kacheln und die
   Abschnitte. Die Drop-Kacheln kommen unveraendert aus battles.css
   (.cs-drops / .cs-drop), das Level-Kaestchen aus design.css (.chat-lvl) —
   so ist es dieselbe Kachel und dasselbe Kaestchen wie ueberall.

   Ruhig gehalten: eine Schrift (Inter), Versalien mit .04em, keine
   Bewegung ausser dem Einblenden des Modals, das die Seite ohnehin macht.
   ═══════════════════════════════════════════════════════════════════════════ */

.profil { display: flex; flex-direction: column; gap: var(--s5); min-width: 0 }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.profil__kopf { display: flex; align-items: center; gap: var(--s4); padding-right: var(--s7) }
.profil__av {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--line-2); background: var(--ink-750);
}
.profil__av--txt {
  display: grid; place-items: center;
  font: 700 1.4rem/1 var(--font-disp); color: var(--text-2);
}
.profil__wer { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.profil__zeile { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap }
.profil__name {
  font: var(--t-karte);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.profil__name--admin { color: var(--gold) }
.profil__verifiziert {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); color: #06301a;
}
.profil__check { width: 11px; height: 11px }
.profil__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font: var(--t-klein);
  color: var(--muted);
}
.profil__rang { font-weight: 700; color: var(--rton, var(--text-2)) }
.profil__punkt { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex-shrink: 0 }

/* ── Kacheln ────────────────────────────────────────────────────────────── */
.profil__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) }
.profil__kachel {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 68px;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-800);
}
.profil__k-label {
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
}
.profil__k-wert {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font: var(--t-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.profil__k-klein { font: var(--t-klein); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.profil__kasse { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap }
.profil__kasse em, .profil__kasse-kurz {
  font: var(--t-etikett-klein);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--kton, var(--muted));
}
.profil__kasse-kurz { color: var(--muted) }
.profil__plus { color: var(--green-ink) }
.profil__leer { color: var(--muted); font-weight: 500 }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.profil__abschnitt { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.profil__titel {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: var(--t-abschnitt);
  letter-spacing: var(--ls-abschnitt);
  text-transform: uppercase;
  color: var(--text-2);
}
.profil__zaehler {
  padding: 2px 6px; border-radius: 4px; background: var(--ink-700);
  font: 700 .58rem/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted);
}
/* Die Leiste aus battles.css, ohne ihren Abstand nach unten; Kacheln zeigen keinen Zeiger (kein Klick). */
.profil__drops { margin-bottom: 0 }
.profil__drops .cs-drops__band { min-height: 0 }
.profil__drops .cs-drop { cursor: default }
.profil__drops .cs-drop:hover { transform: none }
.profil__leer-text { margin: 0; font: var(--t-klein); color: var(--muted) }

.profil__battles-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-800);
  font: var(--t-klein);
  color: var(--muted);
}
.profil__battles-zeile b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text) }

/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.profil__knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap }
.profil__knoepfe:empty { display: none }
.profil__knoepfe .btn { flex: 1 1 auto }

/* ── Laden und Fehler ───────────────────────────────────────────────────── */
.profil__skelett {
  position: relative; overflow: hidden;
  background: var(--ink-750); border-color: transparent;
}
/* v3.65: Der Schimmer wanderte ueber background-position – das malt die
   Flaeche jedes Bild neu. Jetzt gleitet ein fertiger Lichtstreifen (::after)
   per transform darueber, gleiche Farben, gleiche Dauer. */
.profil__skelett::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink-700), transparent);
  transform: translateX(-100%);
  animation: profil-schimmer 1.4s linear infinite;
}
.profil__skelett--text { display: inline-block; width: 140px; height: 10px; border-radius: 4px }
@keyframes profil-schimmer { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.profil__fehler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--s6) 0;
  text-align: center;
  font: var(--t-text);
  color: var(--text-2);
}

/* Hervorgehobene Zeile im Admin-Bereich („Open in admin“). */
.profil-treffer td { background: var(--accent-dim) }

/* ── Eigener Ueberzug (nur ohne #modal-overlay der Seite) ───────────────── */
.profil-overlay {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: var(--s5); background: rgba(4,4,9,.72);
}
.profil-overlay.open { display: flex }
.profil-overlay__box {
  width: 100%; max-width: 500px; max-height: 88vh; overflow-y: auto; padding: var(--s6);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--ink-850); box-shadow: var(--sh-4);
}

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .profil__kopf { padding-right: var(--s6) }
  .profil__av { width: 56px; height: 56px }
  .profil__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .profil__k-wert { font: var(--t-zahl); font-variant-numeric: tabular-nums }
}

@media (prefers-reduced-motion: reduce) {
  .profil__skelett, .profil__skelett::after { animation: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERFOLGE (v3.61) — Abzeichen, Abschnitt, Vollansicht, Toast
   ───────────────────────────────────────────────────────────────────────────
   Die Stufe (bronze/silber/gold/diamant) faerbt NUR den Rahmen des Bildes
   ueber --eton; dasselbe Motiv dient mehreren Erfolgen. Offene Erfolge sind
   entsaettigt (grayscale + opacity) — kein zweites Bild je Zustand.
   ═══════════════════════════════════════════════════════════════════════════ */
.profil__erfolg-bild, .profil__abzeichen-bild { --eton: var(--line-2) }
[data-stufe="bronze"]  { --eton: #c87f4d }
[data-stufe="silber"]  { --eton: #cfd3d8 }
[data-stufe="gold"]    { --eton: #f5c46a }
[data-stufe="diamant"] { --eton: #4cc9f0 }

/* ── Abzeichen-Reihe unter dem Kopf (36 px) ─────────────────────────────── */
.profil__abzeichen { display: flex; align-items: center; gap: var(--s2); margin-top: calc(-1 * var(--s2)) }
.profil__abzeichen:empty { display: none }
.profil__abzeichen-bild {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px solid var(--eton); background: var(--ink-800);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.profil__abzeichen-bild img { width: 28px; height: 28px; display: block }

/* ── Abschnitt „Achievements“ im Profil ──────────────────────────────────── */
.profil__erfolge-neueste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) }
.profil__erfolge-alle { align-self: flex-start }
.profil__erfolg {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-800);
}
.profil__erfolg-bild {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  border: 1.5px solid var(--eton); background: var(--ink-750);
}
.profil__erfolg-bild img { width: 34px; height: 34px; display: block }
.profil__erfolg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.profil__erfolg-name {
  font: var(--t-zeile);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profil__erfolg-datum, .profil__erfolg-wie, .profil__erfolg-stand {
  font: 500 .64rem/1.3 var(--font-ui); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profil__erfolg-wie { white-space: normal }
.profil__erfolg-stand { font-family: var(--font-num); font-variant-numeric: tabular-nums }

/* Offen: Bild entsaettigt, Rahmen ohne Farbe, Text gedaempft. */
.profil__erfolg--offen .profil__erfolg-bild img { filter: grayscale(1) opacity(.45) }
.profil__erfolg--offen .profil__erfolg-bild { border-color: var(--line-2) }
.profil__erfolg--offen .profil__erfolg-name { color: var(--text-2) }

/* Fortschrittsbalken der offenen Erfolge. */
.profil__balken { display: block; width: 100%; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--ink-700); overflow: hidden }
.profil__balken-fuell { display: block; height: 100%; border-radius: 2px; background: var(--eton) }

/* ── Vollansicht: Raster je Gruppe ───────────────────────────────────────── */
.profil--erfolge { gap: var(--s4) }
.profil__kopf--erfolge { padding-right: var(--s7) }
.profil__erfolge-fuer { cursor: pointer }
.profil__erfolge-fuer:hover { text-decoration: underline; text-underline-offset: 3px }
.profil__erfolge-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) }

/* ── Toast „Achievement unlocked“ (im Toast-Behaelter der Seite) ─────────── */
.profil-toast { display: flex; align-items: center; gap: 10px; padding-left: 12px }
.profil-toast__bild { width: 40px; height: 40px; border-radius: 9px }
.profil-toast__bild img { width: 30px; height: 30px }
.profil-toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.profil-toast__text small {
  font: var(--t-etikett-klein);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
}
.profil-toast__text b { font: var(--t-zeile); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* Eigener Behaelter nur ohne #toast-container der Seite. */
.profil-toasts {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: 1000;
  display: flex; flex-direction: column; gap: var(--s2); pointer-events: none;
}
.profil-toasts .profil-toast {
  max-width: 340px; padding: 10px 16px 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--ink-850); box-shadow: var(--sh-4);
}

@media (max-width: 560px) {
  .profil__erfolge-neueste, .profil__erfolge-raster { grid-template-columns: 1fr }
  .profil__abzeichen-bild { width: 32px; height: 32px }
  .profil__abzeichen-bild img { width: 24px; height: 24px }
}