/* Turnier-Seite (02.11.): Kopf auf Rauch wie die anderen Reiter, großer Countdown mit Gameplay in den Ziffern, Champions mit Preis.
   Ein Akzent (Eisblau), keine Pillen. Grundformen (Arena-Karten, Ablauf, Bracket, Teilnehmer, Tippspiel) kommen aus style.css. */
.turnierseite .arena-kopf{padding:70px 0 50px;border-bottom:0;background:linear-gradient(#06070826,#060708 96%),url(bilder/rauch-standbild.jpg) 50% 30%/cover}
/* Oben breit der Name, darunter links Termin und Stand, rechts der Countdown. Der Name bricht nur zwischen Wörtern um (Melih 02.11.: „Smas-h“ sah schlimm aus). */
.turnier-held{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titel titel" "info uhr";gap:22px 56px;align-items:start}
.turnier-titel{grid-area:titel}
.turnier-info{grid-area:info}
.turnier-held .turnier-uhr{grid-area:uhr}
.turnier-titel h1{margin:8px 0 0;font:800 clamp(34px,7.4vw,104px)/1.02 var(--anzeige);letter-spacing:-.03em;overflow-wrap:break-word}
.turnier-titel h1 span{color:var(--akzent)}
.turnierseite .arena-meta{font-size:18px;color:#c3c8ce}
/* Stand als Text mit Punkt statt Pillen */
.turnierseite .arena-chips{gap:6px 22px;margin-top:14px}
.turnierseite .chip{min-height:0;padding:0;border:0;background:none;font:500 15px var(--text-schrift);color:var(--hell)}
.turnierseite .chip.gruen{color:var(--akzent)}
.turnierseite .chip.gold{color:var(--akzent-hell)}
.turnier-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.turnier-knoepfe:empty{display:none}

/* Countdown-Karte (.turnier-uhr, Ziffern mit Gameplay) steht in style.css – die Startseite nutzt sie auch.
   Hier wächst die Schrift mit der Karte und wird bei drei Stellen (über 99 Tage) kleiner, damit „03 04 59“ nie zu „030459“ zusammenläuft. */
.turnierseite .spiel-ziffern{container-type:inline-size}
.turnier-held .turnier-uhr{width:clamp(400px,38vw,500px)}   /* feste Breite: die Ziffern richten sich nach der Karte, nicht umgekehrt */
.turnierseite .ziffern-maske{font-size:min(90px,calc(30cqi / var(--stellen,2)))}
.uhr-plaetze{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;font-size:14px;color:var(--leise)}
.uhr-plaetze strong{font:600 16px var(--mono);color:var(--text)}
.turnier-uhr .balken{margin:8px 0 0}

/* Ablauf, Preise, Teilnehmer: Eisblau statt grauer Marken */
.turnierseite .arena-ablauf{margin-top:34px}
.turnierseite .preise li:first-child span{color:var(--akzent-hell);font-weight:600}
.turnierseite .spielerfeld .abzeichen{padding:0;border:0;background:none;font:500 13px var(--text-schrift);color:var(--leise)}
.turnierseite .spielerfeld .abzeichen.ok,.turnierseite .spielerfeld .abzeichen.gold{color:var(--akzent)}

/* Ohne Turnier: so läuft eins */
.so-schritte{list-style:none;padding:0;margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.so-schritte li{position:relative;display:grid;align-content:start;gap:12px;padding-top:18px;border-top:1px solid var(--linie)}
.so-schritte li::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--akzent)}
.so-schritte b{font:800 34px/1 var(--anzeige);color:var(--akzent)}
.so-schritte strong{display:block;margin-bottom:4px;font:700 19px var(--anzeige);letter-spacing:-.02em}
.so-schritte span{color:var(--leise);font-size:15px}

/* Champions: schlicht als Liste (Melih 02.11.: „viel zu groß“) – der Neueste zuerst mit eisblauem Rand, Preis in Eisblau */
.champions-teil .champion-wand{margin-top:18px}
.turnierseite .champion-wand small{display:block}
.turnierseite .champion-wand li.neuster{border-color:#66ffff66}
.turnierseite .champion-wand .champion-pokal{color:var(--akzent)}
.champion-wer{font:600 13px var(--text-schrift);color:var(--akzent)}
.turnierseite .champion-wand .champion-preis{color:var(--akzent-hell);font-weight:600}

@media (max-width:900px){
  .turnier-held{grid-template-columns:minmax(0,1fr);grid-template-areas:"titel" "info" "uhr";align-items:start}
  .turnier-held .turnier-uhr{width:auto}
  .so-schritte{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .turnierseite .arena-kopf{padding:44px 0 34px}
  .so-schritte{grid-template-columns:1fr}
}
/* Jetzt live (Melih 02.11.): zwei Kämpfer stehen sich gegenüber und gehen abwechselnd aufeinander los, dazwischen knistert es.
   Schlichte, scharfe Blitze in Eisblau und Weiß, kein Leuchten. Bei Smash links rot (P1), rechts blau (P2). */
.vs-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,240px) minmax(0,1fr);align-items:center;padding:28px 24px;border:1px solid var(--linie);border-radius:12px;background:var(--holz);overflow:hidden}
.vs-kaempfer{position:relative;z-index:1;display:grid;justify-items:center;gap:12px;min-width:0;text-align:center;--farbe:var(--akzent)}
.vs-buehne.farben .links{--farbe:#fd3232}
.vs-buehne.farben .rechts{--farbe:#2985f5}
.vs-kaempfer .namen{justify-items:center;max-width:100%}
.vs-kaempfer .namen b{font:800 clamp(17px,2.2vw,26px)/1.15 var(--anzeige);letter-spacing:-.01em}
.vs-figur{display:block;width:min(100%,200px);aspect-ratio:80/46;object-fit:cover;object-position:50% 30%;border:3px solid var(--farbe);border-radius:8px;background:#000}
span.vs-figur{display:grid;place-items:center;font:800 54px var(--anzeige);color:#060708;background:var(--hell)}
.vs-kaempfer.links{animation:vs-links 2.6s ease-in-out infinite}
.vs-kaempfer.rechts{animation:vs-rechts 2.6s ease-in-out infinite}
@keyframes vs-links{0%,30%,50%,72%,100%{translate:0}10%{translate:30px}16%{translate:-4px}60%{translate:-14px}66%{translate:0}}
@keyframes vs-rechts{0%,30%,50%,100%{translate:0}10%{translate:14px}16%{translate:0}60%{translate:-30px}66%{translate:4px}72%{translate:0}}
.vs-mitte{position:relative;display:grid;place-items:center;height:150px}
.vs-blitze{position:absolute;top:0;bottom:0;left:-90px;width:calc(100% + 180px);height:100%;overflow:visible}   /* reichen bis an die Kämpfer heran */
.vs-blitze .blitz{fill:none;stroke:var(--akzent);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.vs-blitze .funke{fill:#fff}
.vs-blitze .blitz.duenn{stroke:#fff;stroke-width:1.5}
.vs-mitte b{position:relative;z-index:1;padding:2px 12px;border-radius:8px;font:800 clamp(28px,4vw,50px) var(--anzeige);color:#fff;background:var(--holz);animation:vs-knall 2.6s ease-out infinite}
@keyframes vs-knall{0%,20%,50%,70%,100%{scale:1;color:#fff}10%,60%{scale:1.3;color:var(--akzent)}}
@media (prefers-reduced-motion:reduce){.vs-kaempfer.links,.vs-kaempfer.rechts,.vs-mitte b{animation:none}}
@media (max-width:600px){
  .vs-buehne{padding:18px 8px;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}
  .vs-mitte{height:96px}
  .vs-kaempfer .namen b{font-size:15px}
  @keyframes vs-links{0%,30%,50%,72%,100%{translate:0}10%{translate:12px}60%{translate:-6px}}
}
/* Turnierbaum für Zuschauer (Melih 03.11.: „auf einen Bildschirm, ob kleines oder großes Turnier“). Gleicher Look wie vorher, nur anders angeordnet:
   am PC von beiden Seiten zur Mitte, Finale und Pokal in der Mitte, die Spalten teilen sich die Breite (turnier.js wählt die Ansicht nach Platz). */
.turnierseite #t-baum-huelle{overflow:visible;padding:4px 0 8px}
@media (min-width:1101px){.turnierseite #t-baum-huelle{width:min(1680px,calc(100vw - 64px));margin-left:calc(50% - min(840px,50vw - 32px))}}
.baum.zweiseitig{--spalt:22px;display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));gap:var(--spalt);width:auto}
.baum.zweiseitig .runde{width:auto;min-width:0}
.baum.zweiseitig .runde-spiele{min-height:440px}
.baum.zweiseitig .runde-titel small{display:none}
.baum.zweiseitig .gespiegelt .runde-titel{justify-content:flex-end}
.baum.zweiseitig .mitte .runde-titel{justify-content:center;color:var(--akzent)}
/* rechte Seite: die Klammern zeigen nach links, zur Mitte */
.baum.zweiseitig .gespiegelt .paar::after{right:auto;left:calc(var(--spalt) / -2);border-left:2px solid var(--linienfarbe);border-right:0;border-radius:10px 0 0 10px}
.baum.zweiseitig .gespiegelt .paar::before{right:auto;left:calc(var(--spalt) * -1)}
.baum.zweiseitig .gespiegelt .paar.einzel::after{right:auto;left:calc(var(--spalt) * -1);border-left:0;border-radius:0}
.baum.zweiseitig .mitte .paar::after,.baum.zweiseitig .mitte .paar::before{display:none}
/* Mitte: das Finale bleibt auf Höhe der Linien, der Pokal steht darüber */
.baum.zweiseitig .mitte .runde-spiele{position:relative}
.baum.zweiseitig .mitte .pokal-karte{position:absolute;left:0;right:0;bottom:calc(50% + 74px);margin:0;padding:14px 10px;gap:6px}
.baum.zweiseitig .mitte .pokal-karte .pokal{width:30px;height:30px}
.baum.zweiseitig .mitte .pokal-karte .namen b{font-size:18px}
.baum.zweiseitig .mitte .pokal-karte.offen .namen{font-size:14px}
/* ab 32 Plätzen kleinere Karten, damit 8 Kämpfe pro Seite untereinander passen; den Sieger zeigt der Balken, der Haken bräuchte Platz für den Namen */
.baum.zweiseitig.dicht{--spalt:16px}
.baum.zweiseitig.dicht .haken-zeichen{display:none}
.baum.zweiseitig.dicht .spiel{margin:4px 0}
.baum.zweiseitig.dicht .spiel-marke{display:none}
.baum.zweiseitig.dicht .platz-knopf{min-height:32px;padding:3px 6px;gap:6px;font-size:13px}
.baum.zweiseitig.dicht .namen small{font-size:11px}
.baum.zweiseitig.dicht .platz .figur{width:28px;height:16px}
.baum.zweiseitig.dicht .platz .figur.initiale,.baum.zweiseitig.dicht .platz .figur.platzhalter{width:22px;height:22px;font-size:11px}
/* Handy und schmale Fenster: Runde für Runde zum Antippen, darunter die Kämpfe untereinander */
.baum.runden-ansicht{display:grid;gap:14px;width:auto}
.runden-reiter{display:flex;flex-wrap:wrap;gap:6px}
.runden-reiter button{min-height:40px;padding:0 14px;border:1px solid var(--linie);border-radius:8px;background:var(--holz);color:var(--hell);font:600 14px var(--kopf);cursor:pointer}
.runden-reiter button[aria-pressed=true]{border-color:var(--akzent);color:var(--akzent)}
.runden-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.runden-liste .spiel{margin:0}
.runden-liste .pokal-karte{margin:6px 0 0}