/* smp.winku.de — Bereich „Erfolge" (/achievements): Diamant-Himmel mit dem eigenen Stand, Erfolge als Kacheln wie der
   Fortschrittsbaum im Spiel (Rahmen: Aufgabe eckig, Ziel rund, Herausforderung gezackt), Seltenheit, Ranglisten als
   Anzeigetafeln. Nur auf dieser Seite geladen (huelle: stile). Kein style= im HTML — Werte setzt js/erfolge.js als Variablen. */

[data-bereich="erfolge"] { --marke-1: #22d3ee; --marke-2: #f5c542; --marke-3: #7dd3fc; --knopf-1: #0e9aa7; --knopf-2: #b7791f; --akzent: #22d3ee; --akzent-2: #f5c542; }

.erfolge-himmel { min-block-size: min(640px, 86vh); }
@media (min-width: 520px) { .titel-bild.klein { block-size: 82px; } }
.erfolge-stand { display: grid; justify-items: center; gap: 10px; text-align: center; }
.erfolge-stand .stand-zahlen { margin: 0; font: 400 20px/28px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten), 0 0 12px rgb(0 0 0 / .35); max-inline-size: 40rem; }
.erfolge-stand .stand-zahlen b { font-weight: 400; color: var(--mc-gelb); }
.erfolge-stand .stand-platz { margin: 0; font: 400 20px/24px var(--mc-schrift); color: #a5f3fc; text-shadow: 2px 2px 0 #0b2b30; }
/* Wie viele der geheimen Erfolge („???") man schon gefunden hat */
.erfolge-stand .stand-geheim { margin: -4px 0 0; font: 400 18px/22px var(--mc-schrift); color: #d8b4fe; text-shadow: 2px 2px 0 #241038; }
.erfolge-xp { inline-size: min(100%, 364px); }
.himmel .erfolge-stand { padding: 10px 18px; background: rgb(6 10 26 / calc((1 - var(--glanz)) * .55)); }

/* ── Gruppen und Kacheln ─────────────────────────────────────────────────────────────────────────────────────────── */
.erfolge-gruppe { margin-block: 0 44px; }
.gruppe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 16px; font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); }
.gruppe-kopf img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.gruppe-kopf small { font: 500 .9rem/1.4 var(--schrift-text); color: #cfd3dc; text-shadow: none; }
.gruppe-zahl { margin-inline-start: auto; padding: 2px 10px 4px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); background: rgb(0 0 0 / .4); text-shadow: 2px 2px 0 #3f3f15; }
.erfolge-gitter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }

.erfolg {
  /* Alles OBEN, der Fuß (Punkte, Seltenheit, Datum) unten: Karten einer Reihe sind gleich hoch — mittig ausgerichtet
     rutschten Bild und Titel in langen Karten nach unten und standen schief neben den Nachbarn (23.09.2026). */
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 14px; align-items: start;
  padding: 12px; background: rgb(12 12 16 / .72); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .06), 0 6px 0 rgb(0 0 0 / .25);
}
.erfolg-rahmen {
  grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 72px; block-size: 72px; background: #3a3a3a; border: 4px solid #1b1b1b;
  box-shadow: inset 4px 4px 0 #6a6a6a, inset -4px -4px 0 #262626;
}
.erfolg[data-art="ziel"] .erfolg-rahmen { border-radius: 18px; }
.erfolg[data-art="herausforderung"] .erfolg-rahmen { clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); border-color: #3b1d4a; background: #4a2d5c; box-shadow: inset 4px 4px 0 #7a5a8c, inset -4px -4px 0 #2a1238; }
.erfolg-rahmen img { inline-size: 48px; block-size: 48px; image-rendering: pixelated; }
.erfolg:not([data-erreicht]) .erfolg-rahmen img { filter: grayscale(1) brightness(.6); }
.erfolg[data-erreicht] .erfolg-rahmen { background: #c7922b; box-shadow: inset 4px 4px 0 #ffe08a, inset -4px -4px 0 #7a5410; }
.erfolg[data-erreicht][data-art="herausforderung"] .erfolg-rahmen { background: #9b4dca; border-color: #3b1d4a; box-shadow: inset 4px 4px 0 #e0b0ff, inset -4px -4px 0 #5a1f86; }
.erfolg-frage { font: 400 40px/1 var(--mc-schrift); color: #8a8a8a; text-shadow: 4px 4px 0 #1b1b1b; }
.erfolg-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-self: start; min-inline-size: 0; }   /* Spalte nach dem Platz, nicht nach dem längsten Wort (23.09.2026) */
.erfolg-text b { font: 400 20px/24px var(--mc-schrift); color: #d0d0d0; text-shadow: 2px 2px 0 var(--mc-schatten); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.erfolg[data-erreicht] .erfolg-text b { color: var(--mc-gelb); }
.erfolg[data-erreicht][data-art="herausforderung"] .erfolg-text b { color: #e0b0ff; }
.erfolg-text > span { font-size: .86rem; line-height: 1.45; color: #aeb3bd; }
.erfolg[data-erreicht] .erfolg-text > span { color: #e2e5ec; }
.erfolg-fuss { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; align-self: end; font: 400 10px/12px var(--mc-schrift); color: #9a9a9a; }
.erfolg-punkte { color: var(--mc-gruen); }
.erfolg:not([data-erreicht]) .erfolg-punkte { color: #6f8f6f; }
.erfolg time { color: #d4d8e0; }
.erfolg-selten { padding: 1px 5px 2px; background: rgb(255 255 255 / .06); }
.erfolg[data-selten="selten"] .erfolg-selten { color: #7dd3fc; }
.erfolg[data-selten="episch"] .erfolg-selten { color: #d8a6ff; }
.erfolg[data-selten="legendaer"] .erfolg-selten { color: #ffcf5a; }
.erfolg[data-erreicht][data-selten="legendaer"] { box-shadow: inset 0 0 0 2px rgb(255 207 90 / .55), 0 0 26px -6px rgb(255 207 90 / .6), 0 6px 0 rgb(0 0 0 / .25); }
.erfolg[data-erreicht][data-selten="episch"] { box-shadow: inset 0 0 0 2px rgb(216 166 255 / .45), 0 0 22px -8px rgb(216 166 255 / .55), 0 6px 0 rgb(0 0 0 / .25); }
@media (prefers-reduced-motion: no-preference) {
  .erfolg[data-erreicht] .erfolg-rahmen img { animation: erfolg-glanz 3.2s ease-in-out infinite; }
  .erfolg[data-neu] { animation: erfolg-neu 1s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes erfolg-glanz { 0%, 86%, 100% { filter: none; } 92% { filter: brightness(1.45) drop-shadow(0 0 6px #fff6c8); } }
@keyframes erfolg-neu { from { scale: .6; opacity: 0; } }
/* 03.10.2026 Sprung aus der Benachrichtigung (js/erfolge.js zielZeigen): die gemeinten Erfolge bzw. die eigene Zeile der Rangliste */
.erfolg[data-ziel] { outline: 3px solid var(--mc-gelb); outline-offset: 3px; box-shadow: inset 0 0 0 2px rgb(255 255 85 / .35), 0 0 28px -4px rgb(255 255 85 / .65), 0 6px 0 rgb(0 0 0 / .25); }
.rangtafel .zeile[data-ziel], .rangtafel[data-ziel] { outline: 2px solid var(--mc-gelb); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .erfolg[data-ziel], .rangtafel .zeile[data-ziel], .rangtafel[data-ziel] { animation: erfolg-ziel 1.1s ease-in-out 3; }
}
@keyframes erfolg-ziel { 50% { outline-color: transparent; } }
@media (max-width: 520px) { .erfolge-gitter { grid-template-columns: 1fr; } .gruppe-kopf { font-size: 20px; line-height: 24px; } }

/* ── Ranglisten: drei Anzeigetafeln wie am Bildschirmrand im Spiel ───────────────────────────────────────────────────── */
.ranglisten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; margin-block-end: 30px; }
.rangtafel { min-inline-size: 0; }
.rangtafel .tafel-titel { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rangtafel .tafel-titel img { inline-size: 24px; block-size: 24px; image-rendering: pixelated; }
.rangtafel .zeile > span:first-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangtafel .platz { color: #9a9a9a; }
.rangtafel .zeile > span:first-child { display: flex; align-items: center; gap: 6px; }
.rangtafel .rang-kopf { inline-size: 16px; block-size: 16px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 1px rgb(0 0 0 / .45); }
.rangtafel .rang-kopf.leer { background: #3a3a3a; }
.rangtafel .rang-abzeichen { block-size: 18px; inline-size: auto; flex: none; image-rendering: pixelated; }
.rangtafel .versteckt { color: #8a8a8a; }
.rangtafel .zeile.du { background: rgb(255 255 85 / .12); }
.rangtafel .zeile.du > span:first-child { color: var(--mc-gelb); }
.rangtafel .du-marke { color: #bdbdbd; }
.rangtafel .zeile.trenner { justify-content: center; color: #6a6a6a; }
.rangtafel .zeile.fuss { margin-block-start: 6px; font-size: 10px; line-height: 16px; color: #8a8a8a; }
.rangtafel .zeile.leer { color: #bdbdbd; }
/* 29.09.2026 Erzrausch: alte Wertung (Fassung 1) zugeklappt unter den Ranglisten — Schrift nur in Vielfachen von 10 px */
.alte-wertung { max-inline-size: 560px; margin: 0 auto 30px; padding: 10px 14px; background: rgb(0 0 0 / .35); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgb(255 255 255 / .08); }
.alte-wertung > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-block-size: 44px; font: 400 20px/24px var(--mc-schrift); color: #e0e0e0; text-shadow: 2px 2px 0 var(--mc-schatten); }
.alte-wertung > summary::-webkit-details-marker { display: none; }
.alte-wertung > summary::after { content: '▸'; margin-inline-start: auto; color: var(--mc-gelb); }
.alte-wertung[open] > summary::after { content: '▾'; }
.alte-wertung > summary img { inline-size: 24px; block-size: 24px; image-rendering: pixelated; flex: none; }
.alte-wertung-satz { margin: 6px 0 14px; font-size: .9rem; line-height: 1.5; color: #cfcfcf; }
.alte-wertung .ranglisten { grid-template-columns: minmax(0, 1fr); margin-block-end: 0; }
.ranglisten-wahl { max-inline-size: 560px; margin-inline: auto; display: grid; gap: 12px; }
.ranglisten-wahl .hinweis-mc { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--gui-text); }
/* der eigene Minecraft-Name wie ein Namensschild über dem Kopf (lib/namen.js) */
.ranglisten-wahl .ranglisten-name { margin: 0; display: flex; align-items: center; gap: 12px; }
.ranglisten-wahl .ranglisten-name b { padding: 2px 10px 4px; background: rgb(0 0 0 / .45); font: 400 20px/24px var(--mc-schrift); color: #fff; text-shadow: 2px 2px 0 var(--mc-schatten); overflow-wrap: anywhere; }