/* Siegertreppchen der drei Besten mit Bildern und Namenszeile: Topliste
   (/topliste.php) und Startseite (/index.php), Markup aus
   /topliste-podest.php. Ergaenzt /css/style.css. */

/* Farben wie in der Topliste (dort auch auf .tl) */
.tl-podest { --tl-gold: #e2bf41; --tl-silber: #c9d0db; --tl-bronze: #cf8c56; --tl-gruen: #5fd38a;
             --tl-stein: linear-gradient(170deg, #232835 0%, #161a24 55%, #10131b 100%);
             --tl-runen: 'Midgard Runen', 'Noto Sans Runic', 'Segoe UI Historic', sans-serif; }

/* ── Bilder ─────────────────────────────────────────────────── */
.tl-bild { --g: 64px; display: block; width: var(--g); height: var(--g); border-radius: 10px; background: #05070a; object-fit: cover; }
.tl-wappen {
  display: grid; place-items: center; box-sizing: border-box;
  font-size: calc(var(--g) * .46); font-weight: 800; color: var(--tl-gold);
  background: radial-gradient(circle at 50% 30%, rgba(226, 191, 65, .25), transparent 62%), var(--tl-stein);
  text-shadow: 0 0 14px rgba(226, 191, 65, .45), 0 2px 0 rgba(0, 0, 0, .6);
}
/* Ohne Avatar: das Wappen lädt zum eigenen Avatar ein (/tools/avatar/),
   gestrichelter Goldring und goldenes Plus; Farben fest gegen die
   allgemeinen Link-Stile */
a.tl-wappen--leer, a.tl-wappen--leer:visited, a.tl-wappen--leer:hover, a.tl-wappen--leer:focus-visible {
  position: relative; color: var(--tl-gold) !important; text-decoration: none !important;
  text-shadow: 0 0 14px rgba(226, 191, 65, .45), 0 2px 0 rgba(0, 0, 0, .6) !important; }
a.tl-wappen--leer { cursor: pointer; outline: 1.5px dashed rgba(226, 191, 65, .55); outline-offset: -6px;
  transition: filter .2s, outline-color .2s, box-shadow .2s, transform .2s; }
a.tl-wappen--leer:hover, a.tl-wappen--leer:focus-visible { filter: brightness(1.25); outline-color: var(--tl-gold);
  box-shadow: 0 0 0 2px rgba(226, 191, 65, .55), 0 0 20px rgba(226, 191, 65, .4); transform: scale(1.04); }
.tl-wappen__plus { position: absolute; right: 7%; bottom: 7%; display: grid; place-items: center;
  width: max(15px, calc(var(--g) * .27)); height: max(15px, calc(var(--g) * .27)); border-radius: 50%;
  font-size: max(12px, calc(var(--g) * .22)); font-weight: 800; line-height: 1; color: #17120a;
  background: linear-gradient(180deg, #f3d873, var(--tl-gold) 55%, #a8880e);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 0 10px rgba(226, 191, 65, .5); text-shadow: none; }

/* Namenszeile (Beiname, Name, online) */
.tl-presay { color: var(--gold-light); font-weight: 600; }
.tl-online { display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem; padding: .05rem .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-gruen); vertical-align: middle;
  border: 1px solid rgba(95, 211, 138, .45); border-radius: 999px; background: rgba(95, 211, 138, .08); }
.tl-online::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: var(--tl-gruen); box-shadow: 0 0 6px var(--tl-gruen); }

/* ── Siegertreppchen ────────────────────────────────────────── */
.tl-podest { list-style: none; margin: 0; padding: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem; align-items: end; }
.tl-podest[hidden] { display: none; }   /* bei der Suche: Treffer direkt unter der Ueberschrift */
.tl-podest__platz { --metall: var(--tl-gold); display: grid; min-width: 0; }
.tl-podest__platz.tl-platz-1 { order: 2; }
.tl-podest__platz.tl-platz-2 { order: 1; --metall: var(--tl-silber); }
.tl-podest__platz.tl-platz-3 { order: 3; --metall: var(--tl-bronze); }
.tl-podest__karte {
  position: relative; display: grid; justify-items: center; text-align: center; gap: .3rem;
  padding: 2.3rem 1rem 1.5rem; border-radius: 18px 18px 0 0; isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--metall) 30%, transparent), transparent 68%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .45), transparent 70%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 7px),
    linear-gradient(170deg, #252a36 0%, #161a24 60%, #0f1219 100%);
  border: 1px solid color-mix(in srgb, var(--metall) 55%, transparent); border-bottom: 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .35), inset 0 1px 0 color-mix(in srgb, var(--metall) 40%, transparent),
    inset 0 0 40px rgba(0, 0, 0, .35);
}
/* Eckbeschlaege oben in der Metallfarbe */
.tl-podest__karte::after { content: ''; position: absolute; inset: 7px 7px auto; height: 22px; pointer-events: none; z-index: 1;
  --e: color-mix(in srgb, var(--metall) 85%, transparent);
  background:
    linear-gradient(var(--e), var(--e)) left top / 22px 2px no-repeat,
    linear-gradient(var(--e), var(--e)) left top / 2px 22px no-repeat,
    linear-gradient(var(--e), var(--e)) right top / 22px 2px no-repeat,
    linear-gradient(var(--e), var(--e)) right top / 2px 22px no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--metall) 60%, transparent)); }
/* Lichtkranz hinter Platz 1 */
/* anklickbar: oeffnet den Steckbrief in der Liste darunter */
.tl-podest__karte[data-held] { cursor: pointer; transition: box-shadow .2s, border-color .2s, filter .2s; }
.tl-podest__karte[data-held]:hover, .tl-podest__karte[data-held]:focus-visible { filter: brightness(1.12);
  border-color: color-mix(in srgb, var(--metall) 85%, transparent); outline: none;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .35), 0 0 30px color-mix(in srgb, var(--metall) 30%, transparent); }
.tl-platz-1 .tl-podest__karte { padding-top: 2.8rem; overflow: hidden; }
.tl-platz-1 .tl-podest__karte::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 42%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(226, 191, 65, .13) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 58%); mask-image: radial-gradient(circle, #000 18%, transparent 58%);
  animation: tl-kranz 60s linear infinite;
}
@keyframes tl-kranz { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tl-podest__rang {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 2.5rem; height: 2.9rem; display: grid; place-items: center; padding-bottom: .35rem; box-sizing: border-box;
  font-size: 1.1rem; font-weight: 900; color: #15110a; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(160deg, #ffffff99, transparent 45%), var(--metall);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px color-mix(in srgb, var(--metall) 45%, transparent));
}
.tl-platz-1 .tl-podest__rang { top: .8rem; }
.tl-podest__rahmen { position: relative; margin: 1.5rem 0 .5rem; padding: 3px; border-radius: 14px;
  background: linear-gradient(160deg, #fff8, var(--metall) 30%, color-mix(in srgb, var(--metall) 35%, #000));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 0 0 4px color-mix(in srgb, var(--metall) 40%, transparent),
              0 10px 30px rgba(0, 0, 0, .55), 0 0 36px color-mix(in srgb, var(--metall) 25%, transparent); }
/* Krone ueber dem Bild von Platz 1 */
.tl-platz-1 .tl-podest__rahmen::before {
  content: ''; position: absolute; top: -1.25rem; left: 50%; transform: translateX(-50%);
  width: 2.3rem; height: 1.15rem; background: linear-gradient(180deg, #fff3c4, var(--tl-gold));
  clip-path: polygon(0 100%, 0 30%, 22% 62%, 50% 0, 78% 62%, 100% 30%, 100% 100%);
  filter: drop-shadow(0 0 8px rgba(226, 191, 65, .6));
}
.tl-platz-1 .tl-podest__rahmen { margin-top: 2.9rem; }
.tl-podest__rahmen::after { content: ''; position: absolute; z-index: -1; inset: -26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--metall) 45%, transparent), transparent 68%);
  animation: tl-hof 4.5s ease-in-out infinite; }
.tl-platz-1 .tl-podest__rahmen::after { inset: -40px; background: radial-gradient(circle, rgba(255, 214, 110, .55), rgba(226, 191, 65, .18) 45%, transparent 70%); }
@keyframes tl-hof { 50% { opacity: .55; transform: scale(.94); } }
.tl-podest__rahmen .tl-bild { --g: 128px; border-radius: 11px; }
.tl-platz-2 .tl-podest__rahmen .tl-bild, .tl-platz-3 .tl-podest__rahmen .tl-bild { --g: 104px; }
.tl-podest__name { font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f6eedc;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
/* Name in Metallschrift (Gold, Silber, Bronze) */
.tl-podest__name .tl-name { color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--metall) 70%, #fff) 38%, var(--metall) 60%, color-mix(in srgb, var(--metall) 55%, #000) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px color-mix(in srgb, var(--metall) 25%, transparent)); }
.tl-podest__online { display: block; line-height: 1; }
.tl-podest__online .tl-online { margin-left: 0; }
.tl-online--leer { visibility: hidden; }
.tl-platz-1 .tl-podest__name { font-size: 1.35rem; }
/* Titel auf einem Banner */
.tl-podest__titel { margin-top: .15rem; padding: .28rem 1.35rem .3rem; font-size: .82rem; line-height: 1.35; color: #ece4d0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--metall) 34%, #16130c), color-mix(in srgb, var(--metall) 16%, #0d0b07));
  clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8); }
.tl-podest__wert { margin-top: .45rem; font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; color: transparent;
  background: linear-gradient(180deg, #fffdf2 0%, color-mix(in srgb, var(--metall) 75%, #fff) 40%, var(--metall) 62%, color-mix(in srgb, var(--metall) 50%, #000) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--metall) 40%, transparent)) drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.tl-platz-1 .tl-podest__wert { font-size: 1.7rem; }
.tl-podest__neben { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Steinsockel: behauene Stufe mit Rune und eingemeisseltem Platz, Platz 1 am hoechsten */
.tl-podest__sockel {
  display: grid; place-items: center; align-content: center; gap: .1rem; height: 3.1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--metall) 26%, transparent), transparent 30%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #2a2f3b, #12151d);
  border: 1px solid color-mix(in srgb, var(--metall) 45%, transparent); border-top: 2px solid color-mix(in srgb, var(--metall) 85%, transparent);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -10px 18px rgba(0, 0, 0, .45);
}
.tl-podest__sockel b { font-family: var(--tl-runen); font-size: 1.15rem; font-weight: 400; letter-spacing: .25em; line-height: 1;
  color: var(--metall); text-shadow: 0 0 10px color-mix(in srgb, var(--metall) 55%, transparent), 0 1px 0 rgba(0, 0, 0, .9); }
.tl-podest__sockel em { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--metall) 70%, #000); text-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 -1px 0 rgba(0, 0, 0, .7); }
.tl-platz-1 .tl-podest__sockel { height: 4.6rem; }
.tl-platz-2 .tl-podest__sockel { height: 3.6rem; }

/* Platz 1: aufsteigende Glutfunken */
.tl-funken { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tl-funken i { position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: #ffd76a; box-shadow: 0 0 6px 2px rgba(255, 190, 60, .75), 0 0 14px 4px rgba(255, 140, 30, .35);
  opacity: 0; animation: tl-funke 7s linear infinite; }
.tl-funken i:nth-child(1) { left: 12%; animation-delay: 0s; }
.tl-funken i:nth-child(2) { left: 24%; animation-delay: 2.8s; animation-duration: 8s; }
.tl-funken i:nth-child(3) { left: 36%; animation-delay: 5.1s; width: 3px; height: 3px; }
.tl-funken i:nth-child(4) { left: 47%; animation-delay: 1.4s; animation-duration: 9s; }
.tl-funken i:nth-child(5) { left: 58%; animation-delay: 4.2s; width: 3px; height: 3px; }
.tl-funken i:nth-child(6) { left: 68%; animation-delay: .7s; animation-duration: 7.5s; }
.tl-funken i:nth-child(7) { left: 78%; animation-delay: 3.5s; }
.tl-funken i:nth-child(8) { left: 88%; animation-delay: 6.2s; animation-duration: 8.5s; width: 3px; height: 3px; }
.tl-funken i:nth-child(9) { left: 30%; animation-delay: 6.8s; animation-duration: 10s; }
.tl-funken i:nth-child(10) { left: 63%; animation-delay: 2.1s; animation-duration: 9.5s; width: 3px; height: 3px; }
@keyframes tl-funke {
  0% { bottom: -8px; opacity: 0; transform: translateX(0) scale(1); }
  10% { opacity: .95; }
  50% { transform: translateX(14px) scale(.85); }
  80% { opacity: .5; }
  100% { bottom: 96%; opacity: 0; transform: translateX(-10px) scale(.4); }
}

/* Auf der Startseite ist jede Karte ein Link zum aufgeklappten Helden in der
   Topliste: allgemeine Link-Stile (Farbe, Unterstreichung, rotes Leuchten)
   gelten hier nicht */
a.tl-podest__karte, a.tl-podest__karte:visited, a.tl-podest__karte:hover, a.tl-podest__karte:focus-visible {
  color: inherit !important; text-decoration: none !important; text-shadow: none !important; }
a.tl-podest__karte { cursor: pointer; transition: box-shadow .2s, border-color .2s, filter .2s; }
a.tl-podest__karte:hover, a.tl-podest__karte:focus-visible { filter: brightness(1.12);
  border-color: color-mix(in srgb, var(--metall) 85%, transparent); outline: none;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .35), 0 0 30px color-mix(in srgb, var(--metall) 30%, transparent); }

@media (max-width: 760px) {
  .tl-podest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .7rem; padding-top: .4rem; }
  .tl-podest__platz.tl-platz-1 { order: 0; grid-column: 1 / -1; }
  /* Platz 2 und 3 nebeneinander gleich hoch, auch wenn ein langer Name
     oder Titel umbricht */
  .tl-podest { align-items: stretch; }
  .tl-podest__platz { grid-template-rows: 1fr auto; }
  .tl-podest__karte { padding: 2rem .5rem 1rem; }
  .tl-podest__rahmen .tl-bild { --g: 112px; }
  .tl-platz-2 .tl-podest__rahmen .tl-bild, .tl-platz-3 .tl-podest__rahmen .tl-bild { --g: 84px; }
  .tl-podest__name { font-size: .98rem; letter-spacing: .08em; }
  .tl-platz-1 .tl-podest__name { font-size: 1.2rem; }
  .tl-podest__wert { font-size: 1.2rem; }
  .tl-platz-1 .tl-podest__wert { font-size: 1.45rem; }
  .tl-podest__sockel, .tl-platz-2 .tl-podest__sockel { height: 1.8rem; font-size: .9rem; }
  .tl-platz-1 .tl-podest__sockel { height: 2.2rem; }
  .tl-platz-2 .tl-podest__titel, .tl-platz-3 .tl-podest__titel { padding: .25rem .9rem; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-podest__karte[data-held], a.tl-podest__karte { transition: none; }
  .tl-funken { display: none; }
  .tl-podest__rahmen::after, .tl-platz-1 .tl-podest__karte::before { animation: none; }
}