/* ===========================================================================
   WüM-Finale live (wuem-ergebnisse.php). Ergänzt assets/style.css und
   assets/wuem-einteilung.css (Kacheln, Kästen); eigene Klassen mit „wr-“.
   Gedacht fürs Handy: Die Spieler kommen über den QR-Code auf dem Zettel.
   =========================================================================== */

.wr-live { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
           margin: 4px 0 10px; color: var(--muted); font-size: .9rem; }
.wr-live b { color: var(--ink); font-size: 1rem; }
.wr-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d23b3b; margin-right: 6px;
            animation: wr-blink 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .wr-punkt { animation: none; } }
@keyframes wr-blink { 50% { opacity: .3; } }

.wr-stand { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wr-stand th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left;
               padding: 6px 6px; border-bottom: 2px solid var(--line); font-weight: 600; }
.wr-stand td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.wr-stand .n { text-align: right; white-space: nowrap; }
.wr-stand .wr-rang { font-weight: 700; width: 1.6em; }
/* Medaillen im Finale (ws_rang()): Platz 1–3 als Münze in Gold, Silber, Bronze.
   Die Farben bedeuten etwas und stehen deshalb hier fest, nicht im :root. */
.wr-medaille { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -2px 0 -2px -3px; border-radius: 50%;
               font-size: .78rem; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 1px 2px rgba(20, 40, 90, .25); }
.wr-rang-zahl { display: inline-block; width: 24px; margin-left: -3px; text-align: center; }
.wr-medaille--1 { background: radial-gradient(circle at 32% 28%, #fff1b0 0 15%, #f2c230 45%, #c99200 100%); color: #3d2c00; }
.wr-medaille--2 { background: radial-gradient(circle at 32% 28%, #ffffff 0 15%, #cfd5de 45%, #98a2b0 100%); color: #26303d; }
.wr-medaille--3 { background: radial-gradient(circle at 32% 28%, #ffe0c4 0 15%, #d4925c 45%, #9a5a2a 100%); color: #3a1f0b; }
.wr-verein { display: block; font-size: .8rem; color: var(--muted); }
.wr-gleich { display: block; font-size: .75rem; color: var(--warn); font-weight: 700; }
.wr-ges { font-size: 1.05rem; }
@media (max-width: 420px) { .wr-schmal { display: none; } }

.wr-spiele { display: grid; gap: 8px; margin-top: 16px; }
.wr-spiele details { border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; background: var(--soft); }
.wr-spiele summary { cursor: pointer; font-weight: 700; }
.wr-spiele summary span { font-weight: 400; color: var(--muted); }
.wr-pm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 4px 0;
         font-size: .9rem; font-variant-numeric: tabular-nums; }
.wr-pm .r { text-align: right; }
.wr-pm b { white-space: nowrap; }
.wr-offen { color: var(--muted); font-style: italic; font-weight: 400; }
.wr-sieger { margin: 6px 0 2px; font-size: .9rem; }
/* K.-o.-Begegnung zugeklappt (seit 0.371): Titel und Stand-Pille oben, darunter
   die Gegner – der Sieger grün. Das Raster sitzt auf dem inneren .wr-kopf, nicht
   auf <summary> (ältere Safari ignorieren grid dort); den Pfeil zeichnet
   .wr-kopf selbst. Stehen die Gegner noch nicht fest, steht derselbe Kopf in
   einem Kasten ohne Aufklappen (.wr-kasten), der Pfeil ist dort unsichtbar,
   damit die Titel bündig bleiben. */
.wr-spiele .wr-kasten { border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; background: var(--soft); }
.wr-spiele summary.wr-sum { list-style: none; }
.wr-spiele summary.wr-sum::-webkit-details-marker { display: none; }
.wr-spiele .wr-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
                      color: var(--muted); font-weight: 400; }
.wr-spiele .wr-kopf::before { content: "▶"; content: "▶" / ""; grid-row: span 2; align-self: start; margin-top: .4em;
                              color: var(--muted); font-size: .7rem; line-height: 1; transition: transform .15s; }
.wr-spiele .wr-kasten .wr-kopf::before { visibility: hidden; }
.wr-spiele details[open] > summary .wr-kopf::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .wr-spiele .wr-kopf::before { transition: none; } }
.wr-spiele .wr-kopf__titel { font-weight: 700; color: var(--ink); min-width: 0; }
/* Gegen „.wr-spiele summary span“ (grau, normal) die Pillen wieder durchsetzen. */
.wr-spiele .wr-kopf .wr-z { margin-top: 0; font-weight: 700; color: var(--muted); }
.wr-spiele .wr-kopf .wr-z--fertig { color: var(--ok); }
.wr-spiele .wr-kopf .wr-z--laeuft { color: var(--warn); }
.wr-spiele .wr-kopf__namen { grid-column: 2 / 4; font-size: .86rem; min-width: 0; color: var(--muted); }
.wr-kopf__namen b { color: var(--ink); }
.wr-kopf__namen .wr-gew { color: var(--ok); }
/* Regel des Finales zwischen Datum und Knöpfen (seit 0.325). */
.wr-regel.wr-regel--oben { margin: 4px 0 0; }
/* „(07.11.2026 in Feuerbach)“ in der Überschrift – gleiche Zeile, nicht fett. */
.wr-h2-zusatz { font-weight: 400; }
/* Ohne Knöpfe (Doppel, Mixed: nur der Finalreiter) folgt gleich der Stand – etwas Luft. */
.wr-regel--oben + .wr-live { margin-top: 12px; }
/* Glückwunsch unter dem Endstand (ws_glueckwunsch()) – Gold wie die Medaille, ruhig gesetzt. */
.wr-meister { margin-top: 16px; padding: 16px 18px; border: 1px solid #e6c46e; border-radius: 12px; text-align: center;
              background: linear-gradient(180deg, #fff8e1, #fffdf6); }
.wr-meister p { margin: 0; }
.wr-meister__gruss { font-size: .92rem; color: #7a5600; }
.wr-meister__name { margin-top: 8px !important; font-size: 1.35rem; font-weight: 800; color: var(--ink); text-wrap: balance; }
.wr-sieger b { color: var(--ok); }
/* Siegerbild unter dem Glückwunsch (seit 0.352): höchstens 800 px, am Handy volle Breite. */
.wr-siegerbild { margin: 16px auto 0; max-width: 800px; }
.wr-siegerbild img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #e6c46e; }
/* Linie unter dem Bild, vor der nächsten Klasse der Senioren. */
.wr-trenner { border: 0; border-top: 2px solid var(--line); margin: 28px 0 4px; }
.wr-regel { font-size: .85rem; color: var(--muted); margin-top: 14px; }

/* Knöpfe je Runde mit Tag und Zustand (seit 0.309, Variante B). Links statt
   Skript: Die gewählte Runde steht in der Adresse und übersteht das Neuladen
   jede Minute. Schmal nur das Kürzel. */
.wr-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 14px 0 12px; }
.wr-knoepfe a { display: block; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px;
                background: var(--soft); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.25; }
.wr-knoepfe a:hover { border-color: var(--blue); }
.wr-knoepfe a.is-aktiv { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--card); }
/* Seit 0.325 ohne Datum (steht in der Überschrift): Name und darunter der
   Stand, zentriert. Linksbündig wäre: text-align weg, margin 4px 0 0. */
.wr-knoepfe a { text-align: center; }
.wr-knoepfe .wr-z { display: block; width: fit-content; margin: 4px auto 0; }
.wr-knoepfe .wr-kurz { display: none; }
@media (max-width: 420px) { .wr-knoepfe .wr-lang { display: none; } .wr-knoepfe .wr-kurz { display: inline; } }
.wr-z { display: inline-block; margin-top: 4px; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 0 7px;
        background: var(--line); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.wr-z--fertig { background: var(--ok-bg); color: var(--ok); }
.wr-z--laeuft { background: var(--warn-bg); color: var(--warn); }

.wr-gruppe { font-size: 1.05rem; margin: 18px 0 4px; }
/* Name und Summen oben, die Spiele der Runde darunter über die volle Breite. */
.wr-stand tr.wr-oben td { border-bottom: 0; padding-bottom: 2px; }
.wr-stand tr.wr-sp td { padding-top: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* 300er: Feld und Münze kommen aus style.css (.pins-300, .muenze-300). Im
   K.-o.-Endstand gibt es keine Summe – dort steht die Münze hinter dem Namen. */
.wr-stand td:not(.n) > .muenze-300 { margin: -4px 0 -4px 8px; }
/* Absage (seit 0.325): eingereiht wie alle, in der abgesagten Runde dieses Wort statt der Pins. */
/* Schnitt unter der Summe: klein, kursiv, grau – Zusatz, nicht Wertung. */
.wr-ds { display: block; margin-top: 2px; font-size: .78rem; font-style: italic; color: var(--muted); font-weight: 400; }
.wr-abg { color: var(--muted); font-style: italic; font-size: .9rem; }
.wr-raus td { color: var(--muted); }
.wr-raus .wr-ges { font-weight: 600; }
.wr-grenze td { padding: 0; border-bottom: 0; }
.wr-grenze span { display: block; margin: -1px 0 0; padding: 3px 6px; border-top: 2px dashed var(--blue);
                  font-size: .72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; }
.wr-ohne { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; }
.wr-ohne summary { cursor: pointer; font-weight: 600; }
.wr-ohne summary span { font-weight: 400; color: var(--muted); }
.wr-ohne p { margin: 6px 0 2px; font-size: .88rem; color: var(--muted); }

/* Wettbewerbswahl am Handy kompakt (seit 0.309, Variante K2): drei Spalten mit
   Kurznamen, ein grüner Strich unten statt Datum und Pille, die Einleitung nur ein Satz –
   sonst sieht man nach dem Scannen des QR-Codes nur Kacheln. */
.wr-schmal-t { display: none; }
@media (max-width: 560px) {
    .wr-breit { display: none; }
    .wr-schmal-t { display: inline; }
    .wr-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
    .wr-wahl .we-kachel { padding: 7px 4px; text-align: center; border-radius: 8px; }
    .wr-wahl .we-kachel__t { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wr-wahl .we-kachel__d, .wr-wahl .we-kachel__z { display: none; }
    .wr-wahl .wr-hat:not(.is-aktiv) { box-shadow: inset 0 -3px 0 var(--ok); }
}

/* Senioren-Trio (ws_trio_tabelle(), seit 0.351): je Trio ein Block wie die
   bisherige Auswertung – Kopfzeile mit Teamname und Teamsummen abgesetzt,
   darunter die Personen eingerückt und ohne Trennlinien. */
.wt-stand tr.wt-kopf td { background: var(--soft); border-top: 2px solid var(--line-strong); border-bottom: 0; padding: 7px 6px; }
.wt-stand tr.wt-person td { border-bottom: 0; padding: 3px 6px; font-size: .9rem; }
.wt-stand tbody.wt-team tr:last-child td { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.wt-stand td.wt-name { padding-left: 16px; }
.wt-stand tr.wt-ohne td { color: var(--muted); }
.wt-ers { font-size: .72rem; color: var(--muted); font-weight: 600; }
.wt-spiele { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.wt-stand tbody + tbody tr.wr-grenze td { border-top: 0; }
@media (max-width: 420px) { .wt-stand td.wt-name { padding-left: 8px; } }
/* Neun Spalten passen erst ab gut 640 px – darunter nur Name, laufende Runde, Gesamt, Schnitt. */
@media (max-width: 640px) { .wt-schmal { display: none; } }

/* Zwischenstand nach dem Bahnwechsel (seit 0.365, Artefakt „WüM Zwischenstand“):
   Leiste je Welle, Plakette „nach Spiel 4“ und der Hinweis zur Reihung nach Schnitt. */
.wr-wellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 0 0 10px; }
.wr-welle { border: 1px solid var(--line); background: var(--soft); border-radius: 9px; padding: 5px 6px; text-align: center; line-height: 1.25; }
.wr-welle span { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); }
.wr-welle b { display: block; font-size: .85rem; }
.wr-welle--fertig { border-color: var(--ok-line); background: var(--ok-bg); }
.wr-welle--fertig span, .wr-welle--fertig b { color: var(--ok); }
.wr-welle--laeuft { border-color: var(--warn-line); background: var(--warn-bg); }
.wr-welle--laeuft span, .wr-welle--laeuft b { color: var(--warn); }
.wr-nach { display: inline-block; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 0 7px; margin-left: 4px;
           background: var(--warn-bg); color: var(--warn); white-space: nowrap; font-style: normal; vertical-align: 1px; }
.wr-hinweis { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: .85rem; line-height: 1.45; }