/* Patangi – Wordle-Chronik (wordle.html). Baut auf style.css auf. */

.wordle-head { padding-bottom: clamp(32px, 5vw, 56px); }
.wordle-head__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.wordle-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  background: var(--petrol-deep); border-radius: var(--radius); padding: 18px 20px;
}
.wordle-stats div { display: grid; gap: 2px; }
.wordle-stats b { font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.wordle-stats span { color: var(--on-petrol-muted); font-size: 0.9rem; }
@media (max-width: 760px) { .wordle-head__grid { grid-template-columns: 1fr; } }

/* Namen als Filter-Knopf */
.person {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 800; font-stretch: 80%;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.person:hover, .person[aria-pressed="true"] { text-decoration-color: var(--orange); }

/* Podium: Platz 1–3, kompakt in Reihenfolge */
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.podium__platz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 14px;
}
.podium__platz--1 { background: color-mix(in srgb, var(--orange) 22%, var(--card)); }
.podium__name { display: grid; min-width: 0; line-height: 1.2; }
.podium .person { font-size: 1.3rem; }
.podium__schnitt { font-size: 0.82rem; color: var(--muted); }
.podium__punkte { white-space: nowrap; font-size: 0.95rem; }
.podium__punkte b { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.podium__leer { grid-column: 1 / -1; font-family: var(--hand); font-size: 1.8rem; color: var(--orange-text); }
@media (max-width: 860px) { .podium { grid-template-columns: 1fr; gap: 8px; } }

.medaille { width: 30px; height: 38px; flex: none; }
.medaille__band { fill: var(--petrol); }
.medaille__ring { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.medaille text { font-family: var(--display); font-weight: 800; font-size: 12px; fill: var(--ink); }
.medaille--1 .medaille__muenze { fill: #e8b62c; }
.medaille--2 .medaille__muenze { fill: #b9c1c3; }
.medaille--3 .medaille__muenze { fill: #c98447; }

/* Plätze ab 4 */
.ranking { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.ranking li {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: baseline;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.ranking__nr { font-family: var(--display); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ranking .person { font-size: 1.2rem; }
.ranking__schnitt { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 560px) {
  .ranking li { grid-template-columns: 3ch minmax(0, 1fr) auto; }
  .ranking__schnitt { grid-column: 2 / -1; }
}

/* Chronik */
.wordle-tools { margin-bottom: 10px; }
.wordle-filter { margin-bottom: 20px; }
.wordle-tools .btn--small { box-shadow: none; }
.chronik { list-style: none; margin: 0; padding: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.eintrag {
  min-width: 0;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px 18px; display: grid; gap: 12px; grid-template-rows: auto auto 1fr;
}
.eintrag__datum { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.eintrag__wer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
/* Versuche-Tag immer fest unten rechts, Namen bleiben direkt unter dem Lösungswort */
.eintrag__wer .eintrag__versuche { grid-column: 2; align-self: end; }
.eintrag__wer b { font-weight: 700; }
.eintrag__keiner { font-family: var(--hand); font-size: 1.35rem; line-height: 1.1; color: var(--orange-text); }
.eintrag__versuche {
  font-family: var(--display); font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums;
  /* Info-Tag in Türkis wie die übrigen Tags der Seite: Fläche mit dunkler Schrift */
  background: var(--teal); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 10px; font-size: 0.95rem;
}

/* Das Wort als Wordle-Kacheln */
.wort { display: flex; gap: 5px; min-width: 0; }
.wort span {
  flex: 1 1 0; min-width: 0; max-width: 52px; aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: clamp(1.3rem, 4vw, 1.7rem);
  border-radius: 6px; border: 2px solid var(--ink);
}
.wort.is-geknackt span { background: var(--orange); color: var(--ink); }
.wort.is-offen span { background: var(--paper); color: var(--muted); border-style: dashed; border-color: var(--muted); }
.chronik .empty { grid-column: 1 / -1; }
.chronik-mehr { margin: 0 0 24px; text-align: center; }

/* Rateweg über dem Lösungswort */
.loesung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
.raster { display: grid; gap: 4px; }
.wort.is-weg span { max-width: 30px; font-size: 0.95rem; border-width: 0; border-radius: 4px; color: #fff; }
.wort.is-weg { gap: 4px; }
.wort.is-leer span { background: transparent; border: 1.5px dashed var(--line); }
.f-g { background: var(--r2); }
.f-y { background: #d9a520; }
.f-x { background: var(--r1); }
.eintrag__offen { color: var(--muted); font-style: italic; }

/* Weitere Plätze zum Aufklappen */
.mehr { margin-top: 4px; }
.mehr summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  margin-top: 14px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--card);
  font-family: var(--display); font-weight: 700; font-stretch: 85%; font-size: 1rem;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.mehr[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mehr summary span { color: var(--muted); font-weight: 600; }
.mehr summary:hover { background: var(--paper); }
.mehr .ranking { margin-top: 8px; }

/* Statistik: farbig unterlegter Block mit Verteilung + Kuriositäten */
#statistik { background: var(--petrol); color: var(--on-petrol); border-top: 0; }
#statistik + .section { border-top: 0; }
#statistik .label { color: var(--on-petrol-muted); }
.statistik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 28px); align-items: stretch; }
@media (max-width: 860px) { .statistik { grid-template-columns: 1fr; } }
.verteilung { background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--petrol-deep); padding: 16px 18px; display: flex; flex-direction: column; }
.verteilung h3 { font-size: 1.35rem; margin-bottom: 12px; }
/* Liste füllt die Höhe, damit der Kasten unten mit den Kacheln abschließt */
.verteilung__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; flex: 1; grid-auto-rows: 1fr; align-items: center; }
.balken {
  font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 10px; align-items: center; text-align: left;
}
.balken__name { font-family: var(--display); font-weight: 700; font-stretch: 85%; font-size: 0.95rem; }
.balken__spur { position: relative; display: flex; align-items: center; min-height: 26px; }
.balken__fill { display: block; height: 26px; min-width: 4px; border-radius: 5px; background: var(--r1); transition: filter .15s ease; }
.balken--top .balken__fill { background: var(--r2); }
.balken--offen .balken__fill { background: var(--orange); }
.balken__spur b { margin-left: 8px; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.balken:hover .balken__fill { filter: brightness(0.9); }
.balken[aria-pressed="true"] .balken__name { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.balken[aria-pressed="true"] .balken__fill { box-shadow: inset 0 0 0 2px var(--ink); }
.verteilung__hinweis { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }

.kurios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .kurios { grid-template-columns: 1fr; } }
.kurios__kachel {
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--petrol-deep);
  padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0;
}
.kurios__icon img { display: block; width: 64px; height: 64px; }
.kurios__inhalt { display: grid; gap: 3px; min-width: 0; }
.kurios__titel { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kurios__wert { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: clamp(1.5rem, 3.2vw, 1.9rem); line-height: 1.05; overflow-wrap: anywhere; }
.kurios__text { font-size: 0.9rem; color: var(--muted); }

/* Spielerkarte (erscheint beim Klick auf einen Namen) */
.spieler {
  background: var(--petrol-deep); color: var(--on-petrol); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px; display: grid; gap: 14px;
}
.spieler__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.spieler__platz { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--on-petrol-muted); min-width: 30px; text-align: center; }
.spieler__label { font-size: 0.85rem; color: var(--on-petrol-muted); }
.spieler h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.05; overflow-wrap: anywhere; }
.spieler .medaille text { fill: var(--ink); }
.spieler__zu {
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; color: var(--on-petrol); border: 1.5px solid var(--on-petrol-muted);
}
.spieler__zu:hover { border-color: var(--orange); color: var(--orange); }
.spieler__zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spieler__zahlen li { display: grid; gap: 2px; }
.spieler__zahlen b { font-family: var(--display); font-weight: 800; font-stretch: 78%; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.spieler__zahlen span { font-size: 0.85rem; color: var(--on-petrol-muted); }
.spieler__fakten { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 12px; }
.spieler__fakten dt { font-size: 0.8rem; color: var(--on-petrol-muted); }
.spieler__fakten dd { margin: 0; font-weight: 600; }

/* Startseite: letztes Wordle + Top 3 */
.wordle-start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .wordle-start { grid-template-columns: 1fr; } }
.wordle-start p { font-size: 1.1rem; margin-top: 14px; max-width: 40ch; }
.wordle-start h2 em { font-style: normal; color: var(--orange-text); }
.wordle-start .podium { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; max-width: 440px; }
/* Startseite: Namen sind nur Text, kein Link, also auch kein Hover */
.wordle-start .podium .person, .wordle-start .podium .person:hover { cursor: default; text-decoration: none; }
.wordle-start .btn { margin-top: 22px; }
.wordle-start__karte { max-width: 380px; width: 100%; justify-self: center; box-shadow: 5px 5px 0 var(--ink); border: 2px solid var(--ink); }
.wordle-start__karte-label { font-family: var(--hand); font-size: 1.5rem; line-height: 1; color: var(--orange-text); }

/* Kompaktere Abstände auf der Wordle-Seite */
.wordle-seite .section { padding-block: clamp(28px, 4vw, 44px); }
.wordle-seite .section__head { margin-bottom: clamp(14px, 2vw, 20px); }
.wordle-seite .page-head { padding-block: clamp(28px, 4.5vw, 52px); }
.wordle-seite .outro { padding-top: clamp(32px, 5vw, 60px); }
.wordle-seite .ranking { margin-top: 12px; }
.wordle-seite .ranking li { padding-block: 9px; }
/* Langer Platzhalter im Suchfeld passt auch aufs Handy */
@media (max-width: 440px) { #w-suche::placeholder { font-size: 0.86rem; } }