/* ============================================================
   tournament.css — Quartals-Turnier (js/screens/tournament.js,
   js/screens/admin/tournament.js, Turnier-Reiter in js/app.js,
   Multiball-Pille im Scorer)

   Bildsprache wie im Rest der App: grüne Bühnen im satten Fando-
   Verlauf MIT grosser, angeschnittener Palme (nie Hellgrün als
   Fläche), Glas-Chips darauf, weisse Karten darunter.
   ============================================================ */

/* ---------------- Turnier-Bubble ----------------
   Statt eines Reiters (Paul, 2.9.): eine runde Bubble rechts über der
   Navigationsleiste, nur vom Start bis zum Ende des Turniers und nie auf
   der Turnier-Seite selbst (syncNav in js/app.js). Sie springt herein,
   schwebt leicht, trägt einen Pulsring; „Du bist dran!“ erscheint kurz
   als Sprechblase links daneben. Der Scorer liegt darüber (z-overlay). */
.t-bubble {
  position: absolute; right: 14px;
  bottom: calc(var(--safe-bottom) + 10px + var(--nav-h) + 14px);
  z-index: var(--z-nav); padding: 0; border: 0; background: none; cursor: pointer;
  width: 56px; height: 56px; color: #fff;
  -webkit-tap-highlight-color: transparent;
  animation: t-bubble-in 0.7s var(--ease-spring) both;
}
.t-bubble-orb {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: t-bubble-float 3.4s ease-in-out 0.7s infinite;
}
.t-bubble-orb .icon { width: 26px; height: 26px; }
.t-bubble-orb::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--fando); opacity: 0; pointer-events: none;
  animation: t-bubble-pulse 2.8s ease-out 1s infinite;
}
.t-bubble.hot .t-bubble-orb::before { animation-duration: 1.5s; border-width: 3px; }
.t-bubble-dot {
  position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--danger); border: 2px solid #fff;
}
.t-bubble-lbl {
  position: absolute; right: calc(100% + 10px); top: 50%;
  height: 34px; padding: 0 12px; border-radius: 99px;
  display: inline-flex; align-items: center;
  background: var(--ink-800); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
  box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0; transform: translate(12px, -50%);
  transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-spring);
}
.t-bubble-lbl::after {   /* Sprechblasen-Spitze zur Bubble hin */
  content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-left-color: var(--ink-800);
}
.t-bubble.say .t-bubble-lbl { opacity: 1; transform: translate(0, -50%); }
.t-bubble:active .t-bubble-orb { transform: scale(0.92); animation: none; }
@keyframes t-bubble-in { from { opacity: 0; transform: translateY(26px) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes t-bubble-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes t-bubble-pulse { 0% { transform: scale(0.85); opacity: 0.9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-bubble, .t-bubble-orb, .t-bubble-orb::before { animation: none; }
}

/* ---------------- Grüne Bühne der Turnier-Seite ---------------- */
.tn-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 22px 20px 20px; border-radius: var(--r-lg);
  background: linear-gradient(158deg, #5aa233 0%, #43811f 58%, #33641a 100%);
  box-shadow: var(--shadow-sm);
}
.tn-hero::before {
  content: ""; position: absolute; right: -42px; bottom: -46px;
  width: 196px; height: 224px; pointer-events: none;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.12; transform-origin: 60% 30%;
  animation: palm-sway 7s ease-in-out infinite;
}
.tn-hero > * { position: relative; z-index: 1; }
.tn-hero h2 {
  margin-top: 10px; font-size: var(--fs-2xl); font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight); line-height: 1.1; text-wrap: balance;
}
.tn-hero p {
  margin-top: 6px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86);
  display: flex; align-items: center; gap: 6px;
}
.tn-hero p .icon-sm { width: 14px; height: 14px; flex: none; }
.tn-hero .tn-me {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: var(--fs-md); color: #fff; line-height: var(--lh-snug);
}
.tn-hero .tn-me .icon-sm { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.tn-hero .tn-me > span { min-width: 0; }
.tn-hero .tn-me b { font-weight: var(--fw-black); }
.tn-hero.quiet { background: linear-gradient(158deg, var(--ink-600), var(--ink-800)); }
.tn-hero .wn-badge .badge-dot { margin-right: 6px; }
.tn-btn {
  margin-top: 12px; width: 100%; height: 48px;
  --btn-bg: #fff; --btn-fg: var(--fando-700);
  box-shadow: var(--shadow-sm);
}
.tn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.tn-chip .tn-palm { width: 13px; height: 15px; object-fit: contain; }
.tn-chip.gold { background: var(--ink-800); color: var(--gold-pale); box-shadow: none; }
.tn-chip .icon-sm { width: 14px; height: 14px; }

/* ---------------- Der Aufruf: die Einladung ----------------
   Paul (2.9.): „besser gestaltet und dramatischer“. Die Anfrage-Karte im
   Spiele-Reiter ist keine weisse Karte mehr, sondern eine grüne Bühne mit
   Palme und Lichtstreifen: Überzeile, grosse Überschrift, ein Satz mit
   Fallhöhe, Glas-Chips (Termin, Spielart, Palmen, Krone), dann die weisse
   Hauptaktion „Ich bin dabei“ und daneben „Absagen“ als Glas. Auf der
   Turnierseite trägt die Bühne (.tn-hero.call) dieselbe Einladung. */
.tn-call {
  position: relative; overflow: hidden; color: #fff;
  padding: 20px 18px 16px; border-radius: var(--r-lg);
  background: linear-gradient(158deg, #5aa233 0%, #43811f 58%, #2f5d18 100%);
  box-shadow: var(--shadow-md);
}
.tn-call::before {
  content: ""; position: absolute; right: -46px; bottom: -50px;
  width: 210px; height: 240px; pointer-events: none;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.13; transform-origin: 60% 30%;
  animation: palm-sway 7s ease-in-out infinite;
}
.tn-call > * { position: relative; z-index: 1; }
.tn-call .wn-glint { z-index: 0; }
.tn-call-kicker {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px;
  border-radius: 99px; background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase;
}
.tn-call-kicker .icon-sm { width: 13px; height: 13px; }
.tn-call-title {
  margin: 12px 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight); line-height: 1.08; text-wrap: balance;
}
.tn-call-text, .tn-hero .tn-call-text {
  display: block; margin-top: 8px; font-size: var(--fs-md); line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.92); text-wrap: pretty;
}
.tn-call-text .nowrap, .tn-invite .nowrap { white-space: nowrap; }
/* Turniername als eigene Zeile unter der Überschrift, davor die Einleitung. */
.tn-call-name, .tn-hero .tn-call-name {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--fs-md); font-weight: var(--fw-black); color: #fff; letter-spacing: var(--tracking-tight);
}
.tn-call-name .icon-sm { width: 15px; height: 15px; flex: none; }
.tn-call-intro, .tn-hero .tn-call-intro {
  display: block; margin-top: 10px; font-size: var(--fs-sm); line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.8); text-wrap: pretty;
}
.tn-call .tn-chips { margin-top: 14px; }
.tn-call-acts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; margin-top: 14px; }
.tn-call-acts .tn-btn { margin-top: 0; }
.tn-call-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; border-radius: var(--r-md); padding: 0 12px;
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff; font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-2);
}
.tn-call-glass:active { background: rgba(255, 255, 255, 0.24); }
.tn-call-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 0;
  color: rgba(255, 255, 255, 0.85); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4);
}
.tn-call-link .icon-sm { width: 12px; height: 12px; }
.tn-hero.call { background: linear-gradient(158deg, #5aa233 0%, #43811f 58%, #2f5d18 100%); box-shadow: var(--shadow-md); }
.tn-hero.call h2 { font-size: var(--fs-2xl); }
.tn-hero.call .wn-badge { display: inline-flex; gap: 6px; }
.tn-hero.call .wn-badge .icon-sm { width: 13px; height: 13px; }

/* Podium auf der Sieger-Bühne: 2 · 1 · 3 (bzw. 3 & 3) */
.tn-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  margin-top: 16px;
}
.tn-fig {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; max-width: 96px; color: #fff; text-align: center;
}
.tn-fig .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
.tn-fig.p1 .avatar { box-shadow: 0 0 0 3px var(--gold); }
.tn-fig .tn-crown { color: var(--gold); margin-bottom: -2px; animation: crown-float 3s ease-in-out infinite; }
.tn-fig .tn-crown .icon { width: 26px; height: 26px; }
.tn-fig-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); max-width: 100%; }
.tn-fig.p1 .tn-fig-name { font-size: var(--fs-md); }
.tn-fig-platz { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
@keyframes crown-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------------- Einladung ---------------- */
.tn-invite { padding: var(--sp-4); margin-top: 14px; border-left: 3px solid var(--fando); }
.tn-invite .request-actions { margin-top: 12px; }
/* Beantwortet: gleiche Karte, Kante in Grün (dabei) oder Grau (abgesagt);
   der Umentscheiden-Knopf bleibt in der Zeile und drückt den Text nicht. */
.tn-invite .row { align-items: center; }
.tn-invite .row > .btn { flex: none; margin-left: auto; }
.tn-invite.off { border-left-color: var(--stone-300); }
.tn-invite .activity-dot.stone { background: var(--stone-100); color: var(--stone-500); }
.tn-invite strong.small { display: block; }

/* ---------------- Die Arena: der Baum als dunkle Bühne ----------------
   Von unten (Viertelfinale) nach oben zur Krone. Knoten = Avatar-Paar mit
   Stand, absolut gesetzt (x in %, y in px – Geometrie in tournament.js
   AR/AR_X); die Verbindungen sind ein SVG darunter, das mit der Bühne
   skaliert (preserveAspectRatio none + non-scaling-stroke). Linien
   zeichnen sich beim ersten Aufbau ein (.still = schon gezeichnet). */
.arena {
  position: relative; height: 444px; overflow: hidden; color: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  background:
    radial-gradient(130% 70% at 50% -10%, rgba(90, 162, 51, 0.38), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
}
.arena.final { background:
    radial-gradient(130% 70% at 50% -10%, rgba(240, 200, 90, 0.28), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900)); }
.arena::before {
  content: ""; position: absolute; right: -60px; bottom: -70px;
  width: 240px; height: 270px; pointer-events: none;
  background: url("../img/logo-white.svg") no-repeat center / contain; opacity: 0.05;
}
.ar-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ar-lines path {
  fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.ar-lines path.lit { stroke: var(--fando); filter: drop-shadow(0 0 4px rgba(90, 162, 51, 0.9)); }
.ar-lines path.gold { stroke: var(--gold); filter: drop-shadow(0 0 5px rgba(240, 200, 90, 0.8)); }
.ar-lines path.live {
  stroke: var(--fando); stroke-dasharray: 0.05 0.035;
  animation: ar-flow 1.1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(90, 162, 51, 0.8));
}
@keyframes ar-flow { to { stroke-dashoffset: -0.085; } }
/* Einzeichnen beim ersten Aufbau: Runde für Runde von unten nach oben. */
.arena:not(.still) .ar-lines path:not(.live) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ar-draw 0.6s var(--ease-out) forwards; }
.arena:not(.still) .ar-lines path.r0 { animation-delay: 0.15s; }
.arena:not(.still) .ar-lines path.r1 { animation-delay: 0.55s; }
.arena:not(.still) .ar-lines path.r2 { animation-delay: 0.9s; }
@keyframes ar-draw { to { stroke-dashoffset: 0; } }
/* Eigene Einblend-Keyframes: fade-up setzt transform und würde die
   zentrierende translate(-50%,-50%) der Knoten dauerhaft überschreiben
   (gleiche Falle wie bei der Multiball-Pille). */
.arena:not(.still) .ar-node { animation: ar-node-in var(--dur-4) var(--ease-out) both; }
.arena:not(.still) .ar-champ { animation: ar-champ-in var(--dur-4) var(--ease-out) 1s both; }
@keyframes ar-node-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ar-champ-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .arena .ar-lines path, .arena .ar-node, .arena .ar-champ, .arena .ar-stub { animation: none !important; stroke-dashoffset: 0; }
}

.ar-lbl {
  position: absolute; left: 10px; transform: translateY(-50%);
  font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); white-space: nowrap; pointer-events: none;
}
.ar-lbl.c { transform: translate(-50%, -50%); }

/* Platz 3: gestrichelter Knoten mittig zwischen den Halbfinals, zwei kurze
   gestrichelte Stummel von den Halbfinal-Knoten hinein (HTML statt SVG:
   Knotenbreite ist px, die SVG-x-Achse Prozent – so enden die Stummel bei
   jeder Bühnenbreite exakt an den Knotenkanten). */
.ar-node.p3 { border-style: dashed; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.03); }
.ar-node.p3.sel, .ar-node.p3.live, .ar-node.p3.mine { border-style: solid; }
.ar-node.src { border-color: rgba(255, 255, 255, 0.55); }
.ar-stub {
  position: absolute; height: 0; margin-top: -1px; pointer-events: none;
  border-top: 2px dashed rgba(255, 255, 255, 0.24);
}
.ar-stub.l { left: calc(25% + 32px); width: calc(25% - 64px); }
.ar-stub.r { left: calc(50% + 32px); width: calc(25% - 64px); }
.ar-stub.lit { border-top-color: var(--fando); filter: drop-shadow(0 0 4px rgba(90, 162, 51, 0.9)); }
.ar-stub.live { border-top-color: var(--fando); animation: ar-pulse 1.4s ease-in-out infinite; }
.arena:not(.still) .ar-stub { animation: ar-stub-in var(--dur-4) var(--ease-out) 0.55s both; }
@keyframes ar-stub-in { from { opacity: 0; } to { opacity: 1; } }
.ar-lbl.foot { left: 50%; top: auto; bottom: 8px; transform: translateX(-50%); }

/* Knoten */
.ar-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 64px; height: 60px; padding: 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.ar-node:active { transform: translate(-50%, -50%) scale(0.94); animation: none; }
.ar-node.done { background: rgba(255, 255, 255, 0.04); }
.ar-node.mine { border-color: rgba(163, 214, 128, 0.7); }
.ar-node.live { border-color: var(--fando); box-shadow: 0 0 0 1px var(--fando), 0 0 18px rgba(90, 162, 51, 0.55); }
.ar-node.sel { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.ar-node.sel.live { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 18px rgba(90, 162, 51, 0.55); }
.ar-pair { display: flex; gap: 3px; }
.ar-av { position: relative; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.ar-av .avatar { --sz: 24px; font-size: 9px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.ar-av.won .avatar { box-shadow: 0 0 0 2px var(--fando); }
.ar-av.lost .avatar { opacity: 0.38; filter: grayscale(1); }
.ar-av.tbd, .ar-av.bye {
  display: grid; place-items: center; border: 1.5px dashed rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: var(--fw-bold); font-style: normal;
}
.ar-seed {
  position: absolute; left: -5px; top: -5px; width: 13px; height: 13px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  background: var(--ink-900); color: #fff; font-size: 7.5px; font-weight: var(--fw-bold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.ar-av.won .ar-seed { background: var(--fando-700); }
.ar-score {
  font-size: 11px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; line-height: 1;
  color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em;
}
.ar-score.dim { color: rgba(255, 255, 255, 0.4); font-weight: var(--fw-semibold); font-size: 10px; }
.ar-score.live { color: #b9ec9a; animation: ar-pulse 1.4s ease-in-out infinite; }
@keyframes ar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Ganz oben: die Krone */
.ar-champ {
  position: absolute; left: 50%; transform: translateX(-50%); width: 60%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ar-champ .tn-crown { position: absolute; top: -24px; color: var(--gold); animation: crown-float 3s ease-in-out infinite; }
.ar-champ .tn-crown .icon { width: 24px; height: 24px; }
.ar-champ .pr-avatar .avatar { --sz: 54px; font-size: var(--fs-md); box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(240, 200, 90, 0.5); }
.ar-champ .ar-av.big { width: 54px; height: 54px; border-width: 2px; color: rgba(255, 255, 255, 0.5); }
.ar-champ .ar-av.big .icon { width: 22px; height: 22px; }
.ar-champ-name { margin-top: 6px; max-width: 100%; font-size: var(--fs-sm); font-weight: var(--fw-black); }
.ar-champ.has .ar-champ-name { color: var(--gold-pale); }
.ar-champ-sub { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }

/* Die Karte zur angetippten Paarung */
.ar-detail { margin-top: 10px; }
.tl-go { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--fando-700); white-space: nowrap; }
.tl-go .icon-sm { width: 12px; height: 12px; }
.tl-tie.finale .tl-go { color: var(--gold-pale); }

/* ---------------- Paarungs-Karte (Detail unter der Arena) ---------------- */
.tl-tie {
  position: relative; display: flex; flex-direction: column;
  width: 100%; padding: 8px 12px 6px; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-xs);
}
button.tl-tie { cursor: pointer; }
button.tl-tie:active { transform: scale(0.985); }
.tl-tie.live { border-color: var(--fando); box-shadow: 0 0 0 1px var(--fando), var(--shadow-xs); }
.tl-tie.mine:not(.live) { border-color: var(--fando-300); }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.tl-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-subtle);
}
.tl-lbl .icon-sm { width: 13px; height: 13px; }
.tl-st {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 99px; background: var(--stone-100); color: var(--text-muted);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.tl-st.live { background: var(--fando); color: #fff; }
.tl-st.mine { background: var(--fando-100); color: var(--fando-700); }
.tl-side {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 42px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text);
}
.tl-side + .tl-side { border-top: 1px solid var(--border); }
.tl-side .avatar { --sz: 28px; font-size: 10px; }
.tl-side .pr-avatar { flex: none; }
.tl-seed {
  flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  background: var(--stone-100); color: var(--text-muted);
  font-size: 10px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.tl-seed:empty { background: transparent; }
.tl-ph {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed var(--stone-300); color: var(--text-subtle);
  font-size: 12px; font-weight: var(--fw-bold);
}
.tl-name { flex: 1; min-width: 0; }
.tl-du {
  flex: none; height: 18px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center;
  background: var(--fando-100); color: var(--fando-700);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase;
}
.tl-score {
  flex: none; min-width: 22px; text-align: right;
  font-size: var(--fs-lg); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.tl-score .icon-sm { width: 16px; height: 16px; color: var(--fando); }
.tl-tie.live .tl-score { color: var(--text); }
.tl-side.won .tl-name { font-weight: var(--fw-black); }
.tl-side.won .tl-score { color: var(--fando-700); }
.tl-side.lost { color: var(--text-subtle); }
.tl-side.lost .avatar { opacity: 0.55; }
.tl-side.tbd .tl-name, .tl-side.bye .tl-name { color: var(--text-subtle); font-weight: var(--fw-medium); font-style: italic; }
.tl-side.me .tl-name { font-weight: var(--fw-black); }

/* Finale: dunkles Plättchen mit Goldschrift – wie die Kronen-Chips, keine
   helle Goldfläche. */
.tl-tie.finale {
  background: linear-gradient(158deg, var(--ink-700), var(--ink-900));
  border-color: transparent; color: #fff;
}
.tl-tie.finale .tl-lbl { color: var(--gold-pale); }
.tl-tie.finale .tl-side { color: #fff; }
.tl-tie.finale .tl-side + .tl-side { border-top-color: rgba(255, 255, 255, 0.14); }
.tl-tie.finale .tl-seed { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tl-tie.finale .tl-ph { border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.6); }
.tl-tie.finale .tl-st { background: rgba(255, 255, 255, 0.16); color: #fff; }
.tl-tie.finale .tl-st.live { background: var(--fando); }
.tl-tie.finale .tl-score { color: rgba(255, 255, 255, 0.72); }
.tl-tie.finale .tl-side.won .tl-name, .tl-tie.finale .tl-side.won .tl-score { color: var(--gold-pale); }
.tl-tie.finale .tl-score .icon-sm { color: var(--gold-pale); }
.tl-tie.finale .tl-side.lost { color: rgba(255, 255, 255, 0.55); }
.tl-tie.finale .tl-side.tbd .tl-name, .tl-tie.finale .tl-side.bye .tl-name { color: rgba(255, 255, 255, 0.6); }
.tl-tie.finale.live { border-color: var(--fando); box-shadow: 0 0 0 1px var(--fando), var(--shadow-sm); }
.tl-tie.finale.mine:not(.live) { border-color: var(--fando-300); }
.badge-dot.live { background: currentColor; animation: pulse-dot 1.4s ease infinite; }

/* ---------------- Admin: Spieler wählen ---------------- */
.tn-pick input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--fando); flex: none; }
.tn-pick:has(input:checked) { border-color: var(--fando); background: var(--fando-tint); }
.tn-pick:has(input:disabled) { opacity: 0.5; }

/* ---------------- Startbildschirm ---------------- */
.d5-spot .sic.medal { background: var(--fando-100); color: var(--fando-700); }

/* ---------------- Scorer: Multiball-Pille ----------------
   Schwebt in der Mitte zwischen den Hälften und sagt, welche Disziplin
   das NÄCHSTE Rack hat. Glas wie die Uhr im Kopf. */
.scorer-multi {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 6px; border-radius: 99px;
  /* Bewusst ohne backdrop-filter: Der Weichzeichner hob die Pille in
     Bildschirmfotos über den Beenden-Dialog – eine feste Tönung reicht. */
  background: rgba(20, 22, 22, 0.78); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; white-space: nowrap;
  pointer-events: none;
}
.scorer-multi .mode-ball.sm { width: 22px; height: 22px; box-shadow: none; }
/* Eigener Hüpfer: Die allgemeine pop-Animation setzt nur scale() und
   würde das zentrierende translate(-50%, -50%) für die Dauer der Animation
   überschreiben – die Pille sprang dann kurz nach rechts unten (Paul, 2.9.).
   Deshalb hier Keyframes, die die Mitte in jedem Schritt mitführen. */
.scorer-multi.anim-pop { animation: multi-pop var(--dur-3) var(--ease-spring); }
@keyframes multi-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.14); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ---------------- Admin-Reiter „Turnier“ (js/screens/admin/tournament.js) ----------------
   Umbau nach Pauls Kritik („pickt alles aneinander“): EINE grüne
   Kopfkarte mit einer Hauptaktion und drei gleich breiten Glas-Knöpfen,
   darunter der Stand des Feldes als Balken und ruhige Zeilen. */
.tadm-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 20px 18px 16px; border-radius: var(--r-lg); margin-bottom: 8px;
  background: linear-gradient(158deg, #5aa233 0%, #43811f 58%, #33641a 100%);
  box-shadow: var(--shadow-sm);
}
.tadm-hero::before {
  content: ""; position: absolute; right: -42px; bottom: -46px;
  width: 196px; height: 224px; pointer-events: none;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.12; transform-origin: 60% 30%;
  animation: palm-sway 7s ease-in-out infinite;
}
.tadm-hero > * { position: relative; z-index: 1; }
.tadm-hero h2 {
  margin-top: 8px; font-size: var(--fs-xl); font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight); line-height: 1.1; text-wrap: balance;
}
.tadm-hero .wn-badge .badge-dot { margin-right: 6px; }
.tadm-termin {
  margin-top: 6px; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.88);
}
.tadm-termin .icon-sm { width: 14px; height: 14px; flex: none; }
.tadm-hero .tn-btn { margin-top: 14px; }
.tadm-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tadm-acts.one { grid-template-columns: 1fr; }
.tadm-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
  transition: background var(--dur-2);
}
.tadm-act .icon-sm { width: 15px; height: 15px; flex: none; }
.tadm-act:active { background: rgba(255, 255, 255, 0.26); }
.tadm-prog { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tadm-prog .small { color: rgba(255, 255, 255, 0.9); font-weight: var(--fw-semibold); }
.tadm-track { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.tadm-track i { display: block; height: 100%; background: #fff; border-radius: 99px; transition: width var(--dur-4) var(--ease-out); }

/* Stand des Feldes: acht Segmente + Legende */
.tadm-feld { padding: 12px 14px; margin-bottom: 10px; }
.tadm-bar { display: flex; gap: 4px; height: 10px; }
.tadm-bar i { flex: 1; border-radius: 99px; background: var(--stone-200); }
.tadm-bar i.ok { background: var(--fando); }
.tadm-bar i.bad { background: var(--danger); }
.tadm-bar i.frei { background: transparent; border: 1.5px dashed var(--stone-300); }
.tadm-legs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.tadm-leg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--stone-300); margin-right: 5px; box-sizing: border-box; }
.tadm-leg.ok::before { background: var(--fando); }
.tadm-leg.bad::before { background: var(--danger); }
.tadm-leg.frei::before { background: transparent; border: 1.5px dashed var(--stone-400); }
.tadm-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; }
.tadm-hint .icon-sm { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--fando); }

/* Zeilen des Spielerfelds und des Archivs */
.tadm-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  border-left-width: 3px;
}
.tadm-row.accepted { border-left-color: var(--fando); }
.tadm-row.declined { border-left-color: var(--danger); }
.tadm-row.open, .tadm-row.alt { border-left-color: var(--stone-300); }
.tadm-seed {
  width: 22px; flex: none; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.tadm-mark {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid #fff; background: var(--stone-400); color: #fff;
}
.tadm-mark .icon-sm { width: 10px; height: 10px; }
.tadm-mark.ok { background: var(--fando); }
.tadm-mark.bad { background: var(--danger); }
.tadm-mark.gold { background: var(--ink-800); color: var(--gold); }
.tadm-st.ok { color: var(--fando-700); font-weight: var(--fw-semibold); }
.tadm-st.bad { color: var(--danger); font-weight: var(--fw-semibold); }
.tadm-x {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--stone-100); color: var(--text-muted); transition: background var(--dur-2), color var(--dur-2);
}
.tadm-x:active { background: var(--danger-tint); color: var(--danger); }
.tadm-x.plain:active { background: var(--fando-100); color: var(--fando-700); }
.tadm-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--stone-100); color: var(--text-muted); }
.tadm-ic.green { background: var(--fando-100); color: var(--fando-700); }
.tadm-leer { padding: 26px 20px 20px; margin-bottom: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.tadm-leer-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--fando-100); color: var(--fando-700); margin-bottom: 6px; }
.tadm-leer .btn { margin-top: 12px; }

/* Formular: Abschnitte mit Overline, Kacheln, Stepper, Pillen, Palmen-Felder */
.tadm-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--divider); }
.tadm-sec .overline { color: var(--fando-700); }
.mode-options.four { grid-template-columns: repeat(4, 1fr); margin-top: 0; gap: 6px; }
.mode-options.four .mode-option { padding: 10px 2px 8px; gap: 2px; }
.mode-options.four .mode-ball.big { width: 38px; height: 38px; }
.mode-options.four .mode-ball.big i { font-size: 15px; }
.mode-options.four .mode-option strong { font-size: 11px; }
.tadm-step { display: flex; align-items: center; gap: 10px; }
.tadm-step-btn {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--stone-100); color: var(--text); transition: background var(--dur-2), color var(--dur-2);
}
.tadm-step-btn:active { background: var(--fando-100); color: var(--fando-700); }
.tadm-step-val { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tadm-step-val b { font-size: var(--fs-2xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tadm-step-val small { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.tadm-palms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tadm-palm { display: flex; flex-direction: column; gap: 4px; }
.tadm-palm-in { position: relative; display: block; }
.tadm-palm-in .tn-palm-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 15px; object-fit: contain; pointer-events: none; }
.tadm-palm-in .input { padding-left: 30px; text-align: center; }
.tadm-pick {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px 8px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur-2), background var(--dur-2);
}
.tadm-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tadm-check {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: transparent;
  transition: background var(--dur-2), border-color var(--dur-2);
}
.tadm-check .icon-sm { width: 13px; height: 13px; }
.tadm-pick.on { border-color: var(--fando); background: var(--fando-tint); }
.tadm-pick.on .tadm-check { background: var(--fando); border-color: var(--fando); color: #fff; }
.tadm-pick.off { opacity: 0.45; }
.tadm-plus { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fando-100); color: var(--fando-700); }