/* ================================================================
   PLAY SCROLL – core/style_profil.css   (aus core/style.css ausgelagert, 2026-10-10)
   Profilseite und Profil-Charakter (Avatar + Editor).
   REIHENFOLGE ZAEHLT: style.css -> style_ansichten.css -> style_pc.css ->
   style_profil.css -> style_rangliste.css. Die Dateien wurden nur an
   Abschnittsgrenzen geteilt, nicht umsortiert - so bleibt die Kaskade
   genau wie vorher. Farben: Variablen aus style.css (:root / html.ps-hell).
   ================================================================ */
/* ================= PROFILSEITE ================= */

/* Graue Abschnittstitel wie in Systemeinstellungen - sie gliedern die
   Liste, ohne selbst aufzufallen. */
.ps-abschnitt{font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--seite-txt-dim);
  margin:22px 4px 8px;opacity:.8}

/* Profilkarte: Avatar links, Name und Level rechts daneben. */
.pc-head{display:flex;align-items:center;gap:14px;text-align:left;margin-bottom:14px}
.pc-info{flex:1;min-width:0}
.pc-info h1{font-size:20px;font-weight:900;line-height:1.2}






/* ============================================================
   Profil-Charakter (siehe core/avatar.js)

   Der Editor bringt bewusst SEINE EIGENE dunkle Buehne mit, statt
   sich wie Games/Profil/Nachrichten am PC auf Weiss umzustellen:
   der Avatar hat einen farbigen Hintergrund, der auf einer hellen
   Seite anders wirkt als spaeter im Feed. Man soll waehrend des
   Bauens genau das sehen, was hinterher ueberall steht - deshalb
   ist die Buehne auf jedem Geraet gleich.
   ============================================================ */

/* ---------- Der Avatar selbst ---------- */
.av-svg{display:block;width:100%;height:100%}
.av-bild{display:inline-block;border-radius:50%;overflow:hidden;flex:none;
  background:var(--bg2);vertical-align:middle}

/* Die Profilkarte: aus dem Buchstaben-Kreis ist ein Knopf geworden. */
.avatar-big{width:76px;height:76px;border-radius:50%;margin:8px auto 0;flex:none;
  overflow:hidden;padding:0;border:2px solid var(--seite-glass-border);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease}
.avatar-big:active{transform:scale(.95)}

/* Einladung zum Bearbeiten - Avatar, Text, Pfeil. */
.av-profil{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;
  padding:14px;border-radius:18px;background:var(--seite-glass);border:1px solid var(--seite-glass-border);
  text-align:left;color:var(--seite-txt);transition:transform .12s ease}
.av-profil:active{transform:scale(.985)}
.av-profil .av-bild{border:2px solid var(--seite-glass-border)}
.av-profil-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.av-profil-text b{font-size:15px;font-weight:800}
.av-profil-text small{font-size:12px;color:var(--seite-txt-dim);line-height:1.35}
.av-profil-pfeil{font-size:16px;color:var(--seite-txt-dim);flex:none}

/* Kommentare und Nachrichten */
.comment .av.av-rund{overflow:hidden;background:var(--bg2);padding:0}
.msg-head .av-bild{border:1px solid var(--seite-glass-border)}

/* ---------- Der Editor ---------- */
body.av-offen{overflow:hidden}          /* Seite dahinter nicht mitscrollen */

.av-editor{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:var(--bg);color:var(--txt);
  padding-bottom:env(safe-area-inset-bottom)}
.av-editor.open{display:flex}

.av-ed-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--linie);flex:none}
.av-ed-titel{font-size:16px;font-weight:900}
.av-ed-zu,.av-ed-platz{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:16px;color:var(--txt)}
.av-ed-zu{background:var(--glass);border:1px solid var(--glass-border)}

/* Buehne: grosse Vorschau + Wuerfeln/Zuruecksetzen */
.av-buehne{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:18px 16px 14px}
.av-vorschau{width:200px;height:200px;border-radius:50%;overflow:hidden;
  border:3px solid var(--glass-border);background:var(--bg2);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.av-vorschau .av-svg{width:100%;height:100%}
/* Unter der Vorschau steht entweder der Kaufbalken oder die beiden
   Knoepfe - nie beides. Feste Mindesthoehe, damit die Vorschau beim
   Wechsel nicht springt. */
.av-buehne-unten{width:100%;display:flex;justify-content:center;min-height:40px}
.av-buehne-knoepfe{display:flex;gap:10px}
.av-knopf{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--txt);
  background:var(--glass);border:1px solid var(--glass-border);transition:transform .12s ease}
.av-knopf:active{transform:scale(.95)}

/* Reiterleiste: zehn Kategorien, deshalb waagerecht scrollbar statt
   umbrechend - so bleibt die Vorschau oben immer sichtbar. */
.av-reiter{flex:none;display:flex;gap:8px;padding:0 14px 12px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.av-reiter::-webkit-scrollbar{display:none}
/* Rahmen um die Reiter-Leiste mit den beiden Pfeilen (avReiterScroll in
   core/avatar.js). Die Pfeile liegen auf einem Verlauf in der Editorfarbe
   und erscheinen nur, wenn es in ihrer Richtung weitergeht - so sieht man
   auch am Rand, dass die Leiste noch nicht zu Ende ist. */
.av-reiter-rahmen{position:relative;flex:none}
.av-reiter{cursor:grab}
.av-reiter.zieht{cursor:grabbing;user-select:none}
.av-reiter.zieht .av-reiter-btn{pointer-events:none}
.av-reiter-pfeil{position:absolute;top:0;bottom:12px;width:52px;z-index:2;display:flex;
  align-items:center;border:0;padding:0;cursor:pointer;color:var(--txt);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.av-reiter-pfeil.links{left:0;justify-content:flex-start;padding-left:6px;
  background:linear-gradient(90deg,var(--bg) 40%,transparent)}
.av-reiter-pfeil.rechts{right:0;justify-content:flex-end;padding-right:6px;
  background:linear-gradient(270deg,var(--bg) 40%,transparent)}
.av-reiter-pfeil.sichtbar{opacity:1;pointer-events:auto}
.av-reiter-pfeil svg{width:18px;height:18px;padding:5px;border-radius:50%;box-sizing:content-box;
  background:var(--flaeche);border:1px solid var(--glass-border);
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.av-reiter-pfeil:active svg{transform:scale(.9)}
.av-reiter-btn{flex:none;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--txt-dim);background:var(--glass);border:1px solid var(--glass-border);
  white-space:nowrap}
.av-reiter-btn.active{background:linear-gradient(90deg,var(--pink),#ffb020);
  color:#fff;border-color:transparent}

/* Auswahlflaeche - der einzige Teil, der scrollt */
.av-optionen{flex:1;overflow-y:auto;padding:0 14px 18px;-webkit-overflow-scrolling:touch}
.av-optionen::-webkit-scrollbar{width:4px}
.av-optionen::-webkit-scrollbar-thumb{background:var(--rollbalken);border-radius:2px}
.av-abschnitt{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--txt-dim);margin:14px 2px 10px}

.av-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px}
.av-kachel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;
  border-radius:14px;background:var(--glass);border:1.5px solid transparent;
  transition:transform .12s ease}
.av-kachel:active{transform:scale(.95)}
.av-kachel.active{border-color:var(--cyan-txt);background:rgba(255,201,60,.12)}
.av-kachel-bild{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--bg2);
  display:block}
.av-kachel-bild .av-svg{width:64px;height:64px}
.av-kachel-name{font-size:10.5px;line-height:1.2;color:var(--txt-dim);text-align:center;
  word-break:break-word}
.av-kachel.active .av-kachel-name{color:var(--txt)}

.av-farben{display:flex;flex-wrap:wrap;gap:10px}
.av-farbe{width:38px;height:38px;border-radius:50%;padding:3px;
  border:2px solid transparent;background:var(--glass);transition:transform .12s ease}
.av-farbe span{display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.av-farbe:active{transform:scale(.9)}
.av-farbe.active{border-color:var(--cyan-txt)}
/* Frei waehlbare Farbe unter jeder Palette (siehe avatarOptionenZeichnen).
   Das native <input type="color"> liegt unsichtbar ueber der ganzen Zeile.
   Ohne eigene Wahl zeigt das Kreislein einen Farbkreis - "hier gibt es
   jede Farbe" -, mit eigener Wahl die gewaehlte Farbe. */
.av-eigen{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:12px;
  padding:5px 16px 5px 5px;border-radius:999px;background:var(--glass);
  border:1.5px solid var(--glass-border);cursor:pointer;font-size:13px;font-weight:700;
  color:var(--txt-dim)}
.av-eigen.active{border-color:var(--cyan-txt);color:var(--txt)}
.av-eigen-probe{width:28px;height:28px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.av-eigen input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:pointer;border:0;padding:0}

.av-ed-fuss{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie)}
.av-ed-fuss .knopf-auth{width:100%;margin:0}

/* Goldstand im Editor-Kopf: die kostenpflichtigen Teile sind sonst
   eine Preisangabe ohne Bezug - man muesste den Editor verlassen, um
   nachzusehen, ob es reicht. */
.av-ed-gold{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;
  padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border)}

/* Gesperrte Kachel: sichtbar, aber gedaempft - man soll sehen, was es
   gibt, und erkennen, dass es noch nicht einem selbst gehoert. */
.av-kachel{position:relative}
.av-kachel.gesperrt .av-kachel-bild{opacity:.5}
.av-kachel.gesperrt .av-kachel-name{opacity:.72}
.av-schloss{position:absolute;top:5px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:3px;white-space:nowrap;
  padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:800;
  background:rgba(8,8,16,.82);color:var(--gold);border:1px solid rgba(255,213,74,.35)}
/* Gerade angeprobt: gestrichelter Rahmen - deutlich anders als das
   durchgezogene Cyan der wirklich gewaehlten Kachel. */
.av-kachel.anprobe{border-style:dashed;border-color:var(--gold);background:rgba(255,213,74,.1)}
.av-kachel.anprobe .av-kachel-bild{opacity:1}

/* Kaufbalken unter der Vorschau */
.av-kauf{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;
  padding:9px 10px 9px 14px;border-radius:16px;
  background:rgba(255,213,74,.1);border:1px solid rgba(255,213,74,.32)}
.av-kauf-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.av-kauf-text b{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:5px}
.av-kauf-text small{font-size:11px;color:var(--txt-dim);line-height:1.3}
.av-kauf-btn{flex:none;display:flex;align-items:center;gap:5px;padding:9px 14px;
  border-radius:999px;font-size:12.5px;font-weight:800;color:#1a1408;
  background:linear-gradient(90deg,var(--gold),#ffb020);transition:transform .12s ease}
.av-kauf-btn:active{transform:scale(.95)}
.av-kauf.knapp .av-kauf-btn{background:var(--glass);color:var(--txt-dim);
  border:1px solid var(--glass-border)}
.av-kauf.knapp .av-kauf-text small{color:var(--pink)}

/* Auf niedrigen Bildschirmen (Handy quer, kleine Geraete) wuerde die
   200px-Vorschau die Auswahl darunter wegdruecken. */
@media(max-height:720px){
  .av-buehne{padding:12px 16px 10px;gap:9px}
  .av-vorschau{width:150px;height:150px}
}

/* Am PC ein zentriertes Fenster statt der ganzen Flaeche.

   Das Abdunkeln dahinter macht der ZWEITE box-shadow: ein Schatten ohne
   Versatz und Weichzeichnung, aber mit riesigem spread (100vmax). Er legt
   sich rings um das Fenster und laesst dessen eigene Flaeche unberuehrt -
   ganz ohne zweites Element im HTML.

   Vorher stand hier ein ::before mit position:fixed, inset:0 und
   z-index:-1. Das konnte nie funktionieren, es fiel nur nicht auf:
   .av-editor hat mit position:fixed + z-index:200 (und hier zusaetzlich
   transform) einen EIGENEN Stapelkontext. Darin kommt z-index:-1 nicht
   hinter das Element, sondern nur zwischen dessen Hintergrund und den
   Inhalt. Und weil ein transform-Vorfahre der Bezug fuer position:fixed
   wird, deckte inset:0 nicht den Bildschirm ab, sondern genau den Editor.
   Das ::before dunkelte also den Editor selbst ab statt der Seite. Bei
   dunklem --bg war das unsichtbar (Schleier und Grund fast gleiche Farbe),
   in der hellen Ansicht wurde das Fenster dadurch grau. */
@media(min-width:1024px){
  .av-editor{inset:26px auto;left:50%;transform:translateX(-50%);
    width:min(560px,92vw);border-radius:24px;overflow:hidden;
    border:1px solid var(--glass-border);
    box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 100vmax var(--abdunkeln)}
  .av-ed-kopf{padding:14px 18px}
}

/* Die helle PC-Seite: Profil und Nachrichten stellen dort auf Weiss um
   (siehe den Block weiter oben), die Avatar-Flaechen muessen mit. Der
   Avatar selbst bleibt unveraendert - er bringt seinen eigenen
   Hintergrund mit. */
@media(min-width:1024px){
  .av-profil{background:var(--seite-glass);border-color:var(--seite-glass-border);
    color:var(--seite-txt)}
  .av-profil-text small,.av-profil-pfeil{color:var(--seite-txt-dim)}
  .av-profil .av-bild,.avatar-big,.msg-head .av-bild{border-color:var(--seite-glass-border)}
}