/* Öffentliche Live-Seite – grüner Snooker-Look (wie die interne Server-UI).
   Brand-relevante Farben als Variablen (Default = grün); werden je gepushtem
   Verein aus dem Feed überschrieben (siehe common.php render_head). */
:root { color-scheme: dark;
        --header-bg: #0b3d20; --header-border: #1d5235;
        --accent: #5fd183; --btn-bg: #2f4839; --btn-hover: #38553f;
        /* Einheitliche Steuerhöhe wie in der Server-UI. */
        --btn-h: 36px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0;
       background: #0c1710; color: #e7efe9; }
header { background: var(--header-bg); padding: 12px 22px; font-size: 20px;
         font-weight: 600; border-bottom: 1px solid var(--header-border);
         display: flex; align-items: center; gap: 12px; }
header .logo { height: 30px; width: 30px; flex: none; display: block; }
header .clublogo { height: 34px; width: auto; max-width: 150px; flex: none;
                   display: block; border-radius: 4px; }
main { max-width: 900px; margin: 0 auto; padding: 22px; }
main.wide { max-width: 1180px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.bar { display: flex; justify-content: space-between; align-items: center;
       margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.muted { color: #6b8675; font-size: 13px; }
/* Buttons einheitlich wie in der Server-UI: feste Höhe, dezenter Rahmen, Hover
   hellt Füllung + Rahmen leicht auf (kein Farbwechsel, der den Text verschluckt). */
.btn { display: inline-flex; align-items: center; justify-content: center;
       height: var(--btn-h); background: var(--btn-bg); color: #e7efe9;
       padding: 0 16px; border-radius: 6px; border: 1px solid transparent;
       font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
       vertical-align: middle; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--btn-hover); border-color: rgba(255,255,255,.3);
       text-decoration: none; }
.notice { background: #14241a; border: 1px solid #21402e; border-radius: 10px;
          padding: 22px; text-align: center; color: #8eac98; }

/* Übersicht (Grid klickbarer Karten) – Kacheln min. 460px, max. 600px, mehrere
   nebeneinander; gleich hoch durch feste Box-Höhen. */
.tables { display: grid; gap: 16px;
          grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.tlink { display: block; text-decoration: none; color: inherit; }
.tlink:hover { text-decoration: none; }
.tlink:hover .match { border-color: var(--accent); background: #172a1d; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 10px;
         background: #2f4839; color: #cfe0d4; white-space: nowrap; }

/* WST-Anordnung: Tischname oben mittig, Spieler außen (Name oben an der Frames-
   Zeile, Bild unten an der Break-Zeile), in der Mitte der Stapel Frames · Points
   · Break. Aktiv-Farben aus der Vereins-Konfiguration (--accent). */
.match { max-width: 600px; margin: 0 auto; background: #14241a;
         border: 1px solid #21402e; border-radius: 12px; padding: 14px 16px;
         transition: border-color .12s, background .12s; }
.match.stale { opacity: .55; }
.match .mhead { text-align: center; margin-bottom: 14px; }
.match .tname { font-size: 18px; font-weight: 700; }
.match .tstatus { margin-top: 4px; font-size: 11px; text-transform: uppercase;
                  letter-spacing: .05em; color: #8eac98; }
/* Rest-Zeit der Match-Maximaldauer neben dem Status; rot, wenn überschritten. */
.match .tclock { font-variant-numeric: tabular-nums; color: #cfe0d4; }
.match .tclock.over { color: #ff5a5a; font-weight: 700; }
.match .mbody { display: grid; grid-template-columns: 1fr auto 1fr;
                align-items: stretch; gap: 16px; }
/* Spieler-Block über die volle Stapelhöhe: Name oben, Bild unten – so
   verrutscht das Bild nicht bei unterschiedlich langen Namen. */
.match .pcard { display: flex; flex-direction: column;
                justify-content: space-between; gap: 8px; min-width: 0;
                align-items: flex-start; }
.match .pcard.b { align-items: flex-end; }
.match .pname { font-size: 18px; line-height: 1.18; }
.match .pcard.b .pname { text-align: right; }
.match .pcard.active .pname { color: var(--accent); font-weight: 700; }
/* AST (Ø Stoßzeit) – kleine, dezente Kontroll-Info unter dem Namen. */
.match .ast { font-size: 12px; color: #6b8675; margin-top: 2px; }
.match .pcard.b .ast { text-align: right; }
/* Avatar füllt die Namensspalte (bis max.); Foto = quadratischer Zuschnitt. */
.match .avatar { position: relative; width: 100%; max-width: 132px;
                 aspect-ratio: 1 / 1; flex: none; border-radius: 12px;
                 overflow: hidden; background: #223528; color: #6f8b7b;
                 background-size: cover; background-position: center; }
.match .avatar::after { content: ""; position: absolute; inset: 0;
                 background: currentColor;
                 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M12 14c-4.4 0-8 2.6-8 6.4V22h16v-1.6c0-3.8-3.6-6.4-8-6.4z'/%3E%3C/svg%3E") center bottom / 74% no-repeat;
                         mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M12 14c-4.4 0-8 2.6-8 6.4V22h16v-1.6c0-3.8-3.6-6.4-8-6.4z'/%3E%3C/svg%3E") center bottom / 74% no-repeat; }
.match .avatar.photo::after { content: none; }
/* Nur der Name wird eingefärbt; beim Spielerbild zeigt die Farbsättigung den
   aktiven Spieler (inaktiv = entsättigt). */
.match .avatar.photo { filter: grayscale(100%); }
.match .pcard.active .avatar.photo { filter: none; }
.match .cstack { display: flex; flex-direction: column; gap: 7px; min-width: 210px; }
.match .box { background: #0f1c14; border: 1px solid #21402e; border-radius: 10px;
              padding: 5px 12px 7px; }
.match .box .bh { text-align: center; font-size: 11px; text-transform: uppercase;
                  letter-spacing: .05em; color: #6b8675; margin-bottom: 1px; }
.match .box .br { display: flex; align-items: baseline; min-height: 1.12em;
                  font-size: 26px; line-height: 1.12; font-weight: 600;
                  font-variant-numeric: tabular-nums; color: #e7efe9; }
.match .box .br .n { flex: 1; }
.match .box .br .n.r { text-align: right; }
.match .box .br .mid { flex: none; padding: 0 8px; font-size: 15px;
                       font-weight: 600; color: #6b8675; }
.match .box.brk { background: var(--accent); border-color: var(--accent); }
.match .box.brk .bh { color: rgba(0, 0, 0, .5); }
.match .box.brk .br { color: #0c1710; }

/* Große Einzelansicht */
.match.big { max-width: 820px; border-radius: 16px; padding: 22px 30px 26px; }
.match.big .mhead { margin-bottom: 20px; }
.match.big .tname { font-size: 28px; }
.match.big .mbody { gap: 28px; }
.match.big .avatar { max-width: 184px; border-radius: 16px; }
.match.big .pname { font-size: 26px; }
.match.big .cstack { min-width: 300px; gap: 10px; }
.match.big .box { padding: 7px 18px 11px; }
.match.big .box .bh { font-size: 12px; }
.match.big .box .br { font-size: 40px; }
.match.big .box .br .mid { font-size: 20px; }