/* profile.css - das Aussehen des Profils.
   Entstanden aus muster-profil.html, freigegeben von Marco am 16.09.2026
   ("sieht super aus").

   Rahmen, Farben und Knoepfe sind woertlich aus shop.css uebernommen -
   Holz und Pergament. Alle Namen stehen innerhalb von .profil oder
   beginnen mit profil-, damit sich Profil und Karte nicht gegenseitig
   das Aussehen verstellen (dasselbe Muster wie jump- und shop-).

   Bildpfade zeigen mit ../../ nach app\bilder - dieses Stylesheet liegt
   zwei Ebenen tiefer als die Bilder. */

/* Laeuft auch allein, ohne base.css - deshalb steht das hier. Ohne
   box-sizing kommt bei 768 Punkten das Innenmass oben drauf und die Seite
   scrollt waagerecht. Genau das ist dem Shop am 16.09. passiert. */
*, *::before, *::after { box-sizing: border-box; }

.profile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1b3b5a url('../../bilder/map-background.jpg') center/cover;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Derselbe ruhige Schleier wie im Shop: die Insel scheint durch - man ist
   ja in Pumos Welt -, aber sie redet nicht mit. */
.profile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 40, 62, .74) 0%,
                              rgba(18, 40, 62, .74) 55%,
                              rgba(14, 32, 50, .86) 100%);
}

.profile > * { position: relative; }

/* ------------------------------------------------------------- Kopfzeile */

.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  flex: none;
}

/* Ohne Titel schiebt das den Pudding-Stand nach rechts - genau wie auf der
   Karte und im Shop (shop-kein-titel). */
.profile-head .balance { margin-left: auto; }

/* ---------------------------------------------------------- Der Inhalt

   ⚠️ KEIN Hauptknopf unten. Der Shop hat einen, weil er eine Haupthandlung
   hat. Hier gibt es nichts zu tun - man guckt nur. */

.profile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------------------------------------------- Pumo im Schaufenster */

.showcase {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 3px solid var(--holz-rand);
  background: var(--pergament);
  box-shadow: inset 0 2px 10px rgba(120, 72, 40, .18);
}

.showcase img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .25));
}

.showcase .worn {
  font-size: 14px;
  font-weight: 800;
  color: var(--schrift-matt);
  margin-top: 2px;
  text-align: center;
}

/* ------------------------------------------------------- Ein Abschnitt */

.profile .board {
  flex: none;
  border-radius: 16px;
  border: 3px solid var(--holz-rand);
  background: var(--pergament);
  box-shadow: inset 0 2px 10px rgba(120, 72, 40, .18);
  overflow: hidden;
}

.profile .board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  color: var(--schrift);
  font-size: 16px;
  font-weight: 900;
  border-bottom: 2px dashed #e0c9a6;
}

.profile .board-head svg { width: 20px; height: 20px; flex: none; stroke: var(--holz-dunkel); }

.profile .board-balance {
  font-size: 14px;
  font-weight: 700;
  color: var(--schrift-matt);
}

/* ------------------------------------- Eine Zeile: Name links, Wert rechts */

.profile .row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;                  /* alles Antippbare und Lesbare gross genug */
  padding: 9px 14px;
  border-bottom: 1px solid #efe2cd;
}

.profile .row:last-child { border-bottom: 0; }

.profile .row-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--schrift);
}

.profile .row-value {
  margin-left: auto;
  font-size: 18px;
  font-weight: 900;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;   /* die Zahlen stehen untereinander */
  white-space: nowrap;
}

.profile .row-value small {
  font-size: 13px;
  font-weight: 800;
  color: var(--schrift-matt);
  margin-left: 2px;
}

/* ------------------------------------------------------------- Die Erfolge */

.profile .achievement-grid {
  display: grid;
  /* 88 und nicht 96: so passen bei 360 Punkten DREI Abzeichen nebeneinander
     statt zwei. Nachgemessen an der Musterseite, nicht geschaetzt. */
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  padding: 12px;
}

.profile .achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 5px 7px;
  border: 3px solid #d8b892;
  border-radius: 14px;
  background: #fffdf6;
  text-align: center;
}

.profile .badge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gruen);
  border: 3px solid #fffdf6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .28);
}

.profile .badge svg { width: 26px; height: 26px; stroke: #fff; }

.profile .achievement .label {
  font-size: 12px;
  font-weight: 800;
  color: var(--schrift);
  line-height: 1.2;
}

.profile .achievement .goal {
  font-size: 11px;
  font-weight: 700;
  color: var(--schrift-matt);
}

/* Noch nicht geschafft: gedaempft UND gestrichelt UND beschriftet - nie nur
   ueber Farbe, genau wie die vier Lagen im Shop (shop-vier-lagen-sichtbar).
   Sichtbar bleibt es trotzdem, sonst weiss niemand, worauf er hinarbeitet. */
.profile .achievement.open {
  border-style: dashed;
  background: #f6efe2;
}

.profile .achievement.open .badge {
  background: #cbbca6;
  border-color: #f6efe2;
}

.profile .achievement.open .label { color: var(--schrift-matt); }

.profile .footnote {
  font-size: 13px;
  color: var(--schrift-matt);
  padding: 12px 14px;
  margin: 0;
  line-height: 1.4;
}

/* ------------------------------------------- Der Weg zur Bestenliste

   ⚠️ KEIN Hauptknopf (profil-kein-hauptknopf). Der Shop hat einen, weil er
   eine Handlung hat - kaufen. Das hier ist ein WEG: er sitzt im Inhalt,
   nicht unten in einer Leiste, traegt einen Pfeil nach rechts und heisst
   nach seinem Ziel. Die Pruefung, die nach .hauptknopf sucht, bleibt gruen. */

.profile .profile-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;                  /* nie unter 44 - alles Antippbare */
  padding: 10px 14px;
  border-radius: 16px;
  border: 3px solid var(--holz-rand);
  background: var(--pergament);
  box-shadow: inset 0 2px 10px rgba(120, 72, 40, .18);
  color: var(--schrift);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease-out;
}

.profile .profile-link > svg { width: 24px; height: 24px; flex: none; stroke: var(--holz-dunkel); }
.profile .profile-link .link-name { flex: 1; min-width: 0; }
.profile .profile-link .link-arrow { width: 22px; height: 22px; stroke: var(--holz-rand); }
.profile .profile-link:active { transform: translateY(2px); }

.profile .profile-link:focus-visible {
  outline: 4px solid var(--fokus);
  outline-offset: 2px;
}

/* Auf einem breiten Geraet darf der Inhalt nicht ins Endlose laufen -
   dieselbe Grenze wie im Shop. */
@media (min-width: 620px) {
  .profile-head, .profile-body { max-width: 760px; width: 100%; margin: 0 auto; }
}

/* =====================================================================
   DIE BESTENLISTE

   Entstanden aus muster-rangliste.html. Sie liegt IM Profil-Behaelter und
   ersetzt dessen Inhalt, solange sie offen ist - kein siebter Bereich, denn
   auf die Insel passen sechs Kacheln (karte-kein-scroll).

   Alle Namen beginnen mit rang-, damit sich Liste, Profil und Karte nicht
   gegenseitig das Aussehen verstellen - dasselbe Muster wie jump- und shop-.
   ===================================================================== */

.rank {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1b3b5a url('../../bilder/map-background.jpg') center/cover;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Derselbe ruhige Schleier wie im Shop und im Profil: die Insel scheint
   durch - man ist ja in Pumos Welt -, aber sie redet nicht mit. */
.rank::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 40, 62, .74) 0%,
                              rgba(18, 40, 62, .74) 55%,
                              rgba(14, 32, 50, .86) 100%);
}

.rank > * { position: relative; }

/* --------------------------------------------------------- Kopfzeile */

.rank-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  flex: none;
}

.rank-head .balance { margin-left: auto; }

/* ---------------------------------------------------- Zeitraum-Reiter

   Tag / Woche / Immer sitzen wie an einem Karteikasten OBEN auf der Tafel
   auf - dasselbe Bauteil wie die Kategorien im Shop (shop-reiter-oben).
   Der gewaehlte verschmilzt mit dem Pergament und steht einen Punkt hoeher:
   das liest sich ueber Form und Lage, nicht nur ueber Farbe. */

.rank-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  flex: none;
}

.rank-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 10px 4px 12px;
  border: 3px solid var(--holz-rand);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: #e8d5b5;
  color: var(--schrift-lesbar);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-tabs button[aria-selected="true"] {
  background: var(--pergament);
  color: var(--schrift);
  font-weight: 900;
  padding-bottom: 15px;
  margin-bottom: -3px;
  z-index: 2;
}

.rank-tabs button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

/* --------------------------------------------------------- Die Tafel */

.rank-board {
  flex: 1;
  min-height: 0;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  border-radius: 0 0 16px 16px;
  border: 3px solid var(--holz-rand);
  background: var(--pergament);
  box-shadow: inset 0 2px 10px rgba(120, 72, 40, .18);
  overflow: hidden;
}

/* ----------------------------------------------------- Wert-Umschalter */

.rank-values {
  display: flex;
  gap: 6px;
  padding: 10px 10px 9px;
  border-bottom: 2px dashed #e0c9a6;
  flex: none;
}

.rank-values button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border: 3px solid #d8b892;
  border-radius: 12px;
  background: #f6efe2;
  color: var(--schrift-lesbar);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.rank-values button > svg { width: 20px; height: 20px; flex: none; }
.rank-values button img { height: 22px; width: auto; flex: none; }

/* Gewaehlt heisst: eingedrueckt, dunklerer Rand, fette Schrift UND ein
   Haken. Nie nur die Farbe (shop-vier-lagen-sichtbar). */
.rank-values button[aria-pressed="true"] {
  border-color: var(--gruen-tief);
  background: #e6f2e1;
  color: var(--schrift);
  font-weight: 900;
  box-shadow: inset 0 3px 0 rgba(53, 114, 42, .28);
}

.rank-values button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

.rank-values .check { width: 17px; height: 17px; stroke: var(--gruen-tief); }
.rank-values button[aria-pressed="false"] .check { visibility: hidden; }

/* ------------------------------------------------------ Der Rolleteil */

.rank-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ⚠️ Der leere Fall stand zuerst OBEN in einer bildschirmhohen leeren
   Tafel - und sah dadurch nach Fehler aus, nicht nach "noch niemand da".
   Derselbe Befund wie bei den leeren Plaetzen im Regal
   (shop-leere-plaetze). Jetzt steht der Hinweis in der Mitte. */
.rank-scroll.empty { display: grid; place-items: center; }

/* ---------------------------------------------------------- Das Podest

   Die ersten drei mit Pumo im getragenen Outfit - der Prestige-Gedanke aus
   Kapitel 8: wer oben steht, zeigt allen sein Outfit.

   ⚠️ NUR die ersten drei tragen ein Bild. Bei hundert Zeilen waeren das
   sonst hundert Pumo-Bilder auf einem Handy. */

.rank-podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 6px;
  padding: 12px 8px 10px;
  border-bottom: 2px dashed #e0c9a6;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 3px 8px;
  border: 3px solid #d8b892;
  border-radius: 14px;
  background: #fffdf6;
  text-align: center;
  min-width: 0;
}

/* Platz 1 steht in der MITTE und hoeher - die Form sagt den Rang, nicht
   die Farbe. */
.podium-place.first {
  order: 2;
  padding-top: 11px;
  border-color: var(--holz-rand);
  border-width: 4px;
  box-shadow: 0 3px 0 rgba(120, 72, 40, .35);
}

.podium-place.second { order: 1; }
.podium-place.third { order: 3; }

.podium-place .pumo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25));
}

.podium-place.first .pumo { width: 74px; height: 74px; }

/* Der Kranz mit der Platznummer. Ziffer UND Medaillenzeichen - wer Farben
   schlecht unterscheidet, liest den Rang trotzdem. */
.podium-rank {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  background: var(--holz-dunkel);
  color: #fff8e1;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.podium-rank svg { width: 14px; height: 14px; stroke: currentColor; }
.podium-place.first .podium-rank { background: var(--gruen-tief); font-size: 15px; }

.podium-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--schrift);
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.podium-value {
  font-size: 16px;
  font-weight: 900;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.podium-place.first .podium-value { font-size: 18px; }
.podium-value small { font-size: 11px; font-weight: 800; color: var(--schrift-matt); }

/* Steht man selbst auf dem Podest, wird es auch dort markiert. */
.podium-place.me { border-color: var(--gruen); background: #e6f2e1; }

/* ---------------------------------------------------- Die Zeilen 4-100 */

.rank-list { list-style: none; margin: 0; padding: 0; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid #efe2cd;
  border-left: 5px solid transparent;
}

.rank-row:last-child { border-bottom: 0; }

.rank-no {
  flex: none;
  min-width: 34px;
  text-align: right;
  font-size: 14px;
  font-weight: 900;
  color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
}

.rank-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--schrift);
  /* Ein Name ist 3 bis 16 Zeichen lang - mehr laesst der Namensfilter nicht
     zu (konto-wortfilter-umfang). Hier kann also nichts abgeschnitten
     werden, und Umbrechen ist besser als Abschneiden. */
  overflow-wrap: anywhere;
}

.rank-value {
  flex: none;
  font-size: 17px;
  font-weight: 900;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;   /* die Zahlen stehen untereinander */
  white-space: nowrap;
}

.rank-value small { font-size: 12px; font-weight: 800; color: var(--schrift-matt); }

/* Die eigene Zeile: dicker Balken links, gruener Grund UND das Woertchen
   DU. Drei Merkmale, davon zwei ohne Farbe. */
.rank-row.me {
  background: #e6f2e1;
  border-left-color: var(--gruen);
}

.rank-row.me .rank-name, .rank-row.me .rank-no { color: var(--gruen-tief); }

/* ⚠️ Auch hier --gruen-tief (medien-gruen-ist-zu-hell). Diese Schrift ist
   mit 11 Punkten die KLEINSTE der drei — hier faellt der zu schwache
   Kontrast am meisten ins Gewicht. */
.me-sign {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gruen-tief);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
}

/* --------------------------------------- Ab Platz 101: nicht gelistet

   rangliste-top100 sagt: ab Platz 101 ist man NICHT sichtbar. Der eigene
   Stand steht deshalb nicht in der Liste, sondern als eigener Streifen
   darunter - ohne Platznummer, denn die gibt es dort nicht. Genau das soll
   ja antreiben.

   ⚠️ Zwei Zeilen, nicht eine. Nebeneinander brach bei 360 Punkten die
   Ueberschrift um und die Zahl wurde an den Rand gequetscht - gesehen im
   Bildschirmfoto der Musterseite, nicht gerechnet. */

.rank-foot:empty { display: none; }

.rank-me-outside {
  flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 3px solid var(--holz-rand);
  background: #f3ead9;
}

.rank-me-outside .topline { display: flex; align-items: center; gap: 9px; }

.rank-me-outside .stripe-icon {
  width: 26px; height: 26px;
  flex: none;
  stroke: var(--holz-dunkel);
}

.rank-me-outside .who {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--schrift-lesbar);
  font-weight: 700;
}

.rank-me-outside .who b {
  display: block;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--schrift);
}

.rank-me-outside .mine {
  flex: none;
  font-size: 22px;
  font-weight: 900;
  color: var(--schrift);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rank-me-outside .mine small { font-size: 12px; font-weight: 800; color: var(--schrift-matt); }

/* Der Abstand zu Platz 100 bekommt eine eigene Zeile ueber die ganze
   Breite - das ist der Satz, der antreiben soll, und gequetscht treibt er
   niemanden an. */
.rank-me-outside .rest {
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px dashed #d8c3a2;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--schrift-lesbar);
}

/* ------------------------------------------------------- Leer und Laden */

.rank-note {
  padding: 26px 20px;
  text-align: center;
  color: var(--schrift-lesbar);
  max-width: 300px;
}

.rank-note > svg {
  width: 46px; height: 46px;
  stroke: #c9b295;
  margin-bottom: 8px;
}

.rank-note p {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--schrift);
  line-height: 1.35;
}

.rank-note small {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--schrift-lesbar);
}

/* Ohne Netz gibt es etwas zu tun - also einen Knopf. Beim leeren Fall gibt
   es nichts zu tun, dort steht keiner. */
.rank-retry {
  margin-top: 14px;
  min-height: 48px;
  padding: 11px 20px;
  border-radius: 14px;
  border: 3px solid var(--holz-rand);
  background: transparent;
  color: var(--schrift);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.rank-retry:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

/* Beim Laden stehen Platzhalterbalken da, kein leerer Rahmen und kein
   Kreisel: die Tafel behaelt ihre Hoehe, es huepft nichts, wenn die Liste
   ankommt. */
.skeleton { padding: 12px 12px 4px; }

.skeleton-bar {
  height: 44px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #efe4d0 25%, #f8f1e3 50%, #efe4d0 75%);
  background-size: 260px 100%;
  animation: rang-wandern 1150ms linear infinite;
}

@keyframes rang-wandern {
  from { background-position: -130px 0; }
  to   { background-position: 130px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; }
  .profile .profile-link { transition: none; }
}

/* Auf einem breiten Geraet dieselbe Grenze wie im Shop und im Profil. */
@media (min-width: 620px) {
  .rank-head, .rank-tabs, .rank-board {
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}