/* stay tuned — app-profil.css  (Profil-Startseite v3 nach Vorlage + Einstellungen-Detailkarte)
   Laedt NACH app-base/app-views/app-fun und ueberschreibt daher die Profil-Basisregeln. */

/* ---------- Profil-Karte: gross, Wellen unten, Aktions-Icons ---------- */
.profile-card{--av:min(66vw,250px);position:relative;overflow:visible;text-align:center;
  margin-top:calc(var(--av) / 2 + 10px);
  min-height:calc(100dvh - var(--tabbar-h) - var(--safe-b) - 150px);
  padding:12px 18px 222px}

/* Maracuja + Avatar: ~1/3 des Bildschirms, ragt oben ueber die Karte hinaus */
.profile-av{width:var(--av);height:var(--av);margin:calc(var(--av) / -2 + 8px) auto 14px}
.profile-av-inner{width:calc(var(--av) * 0.55);height:calc(var(--av) * 0.55)}
.profile-av-inner .avatar{--s:calc(var(--av) * 0.55)}
.profile-av-edit{right:-2px;bottom:6px;width:40px;height:40px}
.profile-av-edit svg{width:19px;height:19px}
.profile-name{font-size:30px;margin-bottom:18px}

/* Crew-Avatare: zentriert, Ring in eigener Hintergrundfarbe (Standard) */
.profile-card .crew-av .avatar{--s:52px}
.crew-members{gap:13px 15px;justify-content:center}

/* Pokale sammeln — ein Pokal je Sieg (waechst ueber die Zeit) */
.profile-trophies{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 2px 6px;color:var(--plum-2)}
.profile-trophies svg{width:27px;height:27px;display:block}
.profile-trophies:empty{display:none}

/* Zwei Wellen-Ebenen am unteren Rand (Gold hinten, Pflaume vorne) — als Hintergrund, in CSS leicht anpassbar.
   Hoehe + Kurven hier aendern; Lila reicht weit nach oben, damit die Symbole komplett darauf sitzen. */
.profile-waves{position:absolute;left:0;right:0;bottom:0;height:215px;z-index:0;pointer-events:none;overflow:hidden;border-radius:0 0 28px 28px;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20480%20215'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,215%20L0,88%20C120,54%20200,116%20280,92%20C360,70%20430,48%20480,68%20L480,215%20Z'%20fill='%23F4BE2C'/%3E%3Cpath%20d='M0,215%20L0,120%20C95,144%20180,154%20260,130%20C345,106%20420,130%20480,116%20L480,215%20Z'%20fill='%238A2F76'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%}

/* Runde Aktions-Symbole auf der Pflaume-Welle */
.profile-act{position:absolute;bottom:24px;z-index:2;width:54px;height:54px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:transform .1s ease}
.profile-act:active{transform:scale(.9)}
.profile-act.gear{left:26px;color:var(--gold)}
.profile-act.gear svg{width:46px;height:46px}
.profile-act.switch{right:26px;color:#F7E7C6}
.profile-act.switch svg{width:42px;height:42px}

/* ---------- Einstellungen: Detailkarte (Tea-Beleg-Optik, eine Seite, scrollbar) ---------- */
.pset-h{font-family:var(--font-d);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--plum);margin:20px 0 10px;line-height:1.2}
.pset-sub{font-size:13px;color:var(--muted);line-height:1.5;margin:-2px 0 12px}
.pset-share{display:flex;flex-direction:column;gap:8px;margin-bottom:2px}

/* ---------- Eigene Avatar-Farbe (Farbrad) ----------
   Elfte Kachel in der Farbauswahl: Regenbogen-Verlauf; darueber liegt UNSICHTBAR der
   native Farbwaehler (input type=color, Opazitaet 0) — der Tipp trifft direkt das Input
   und oeffnet das System-Farbrad. Nach einer Auswahl zeigt die Kachel die gewaehlte
   Farbe (.picked) statt des Regenbogens; .sel-Ring kommt aus den .swatch-Basisregeln. */
.swatch-custom-wrap{position:relative;display:inline-grid}
.swatch-custom{position:relative;background:conic-gradient(#EF4444,#F59E0B,#22C55E,#14B8A6,#3B82F6,#7C3AED,#EC4899,#EF4444)}
.swatch-custom::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:800;font-size:17px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.swatch-custom.picked::after{content:""}
.swatch-custom-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}

/* ---------- Avatar-Dekoration (Kopfschmuck) ---------- */
/* Deko-Bild darf ueber den runden Rahmen hinausragen. Position: --deco-top (vertikal, %),
   --deco-w (Breite, %), --deco-dx (horizontal, %). Werte kommen pro Deko aus der DB.
   max-width:none hebt die globale img{max-width:100%}-Regel auf, sonst liesse sich die
   Deko nicht ueber 100% der Avatarbreite vergroessern. */
.avatar:has(> .avatar-deco){overflow:visible}
.avatar-deco{position:absolute;left:calc(50% + var(--deco-dx,0%));top:var(--deco-top,-70%);width:var(--deco-w,120%);height:auto;max-width:none;transform:translateX(-50%);pointer-events:none;z-index:2}
.avatar-edit-prev:has(.avatar-deco){padding-top:80px}

/* Deko-Verwaltung (nur Admin) — gestapelte Karte je Deko: Vorschau oben, Regler in voller Breite */
.deco-add{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.deco-mgr-list{display:flex;flex-direction:column}
.deco-mgr-row{display:flex;flex-direction:column;gap:15px;padding:22px 0;border-top:1px solid var(--line)}
.deco-mgr-prev{display:grid;place-items:center;padding-top:70px;overflow:visible}
.deco-mgr-ctrls{display:flex;flex-direction:column;gap:18px}
.deco-mgr-name{display:flex;align-items:center;gap:10px}
.deco-mgr-name input{flex:1 1 auto;min-width:0}

/* Ein Regler: Kopfzeile (Bezeichnung + Wert) und darunter [−] [Schieber] [+] */
.deco-slider{display:flex;flex-direction:column;gap:9px}
.deco-slider-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-d);font-weight:700;font-size:14.5px;color:var(--ink-2)}
.deco-slider-head .val{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px;color:var(--plum)}
.deco-slider-ctl{display:flex;align-items:center;gap:12px}
.deco-step{flex:0 0 auto;width:46px;height:46px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--plum);font-family:var(--font-d);font-size:26px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s ease,background .12s ease}
.deco-step:active{transform:scale(.9);background:rgba(110,42,92,.14)}
.deco-slider input[type=range]{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;height:44px;background:transparent;cursor:pointer;margin:0}
.deco-slider input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--surface-2);border:1.5px solid var(--line)}
.deco-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:30px;height:30px;border-radius:50%;background:var(--plum);border:3px solid #fff;box-shadow:0 2px 6px rgba(7,54,48,.32);margin-top:-10px}
.deco-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
.deco-slider input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:var(--surface-2);border:1.5px solid var(--line)}
.deco-slider input[type=range]::-moz-range-thumb{box-sizing:border-box;width:30px;height:30px;border-radius:50%;background:var(--plum);border:3px solid #fff;box-shadow:0 2px 6px rgba(7,54,48,.32)}