/* Tafel, Statistik, Chat und Reiter der Zuschauerseite – geteilt mit der
   Ergebnis-Seite (/spiel), die dieselbe Tafel zeigt. */

  .reiter { display:flex; gap:.5rem; margin:1.5rem 0 1rem; }
  .reiter button { flex:1; padding:.7rem; border-radius:.6rem; cursor:pointer;
    border:1px solid var(--rule-lit); background:var(--panel); color:var(--ink);
    font:inherit; font-weight:600; }
  .reiter button[aria-selected="true"] {
    background:var(--accent); border-color:var(--accent); color:#eafaf1; }
  .tafel-karte { background:var(--panel); border:1px solid var(--rule);
    border-radius:.7rem; padding:.8rem 1rem; margin-bottom:.6rem; }
  .amzug { border-color:var(--accent-lit); }
  .reihe { display:flex; align-items:center; gap:.7rem; }
  .punkt { width:.65rem; height:.65rem; border-radius:50%; flex:0 0 auto; }
  .sname { font-weight:600; flex:1; min-width:0; overflow-wrap:anywhere; }
  .wert { font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; }
  .unter { color:var(--ink-dim); font-size:.82rem; }
  .gitter { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  .gitter th, .gitter td { padding:.3rem; text-align:center;
    border-bottom:1px solid var(--rule); font-size:.88rem; }
  .gitter th:first-child, .gitter td:first-child { text-align:left; color:var(--ink-dim); }
  .zu { color:var(--accent-lit); font-weight:700; }
  .finish { color:var(--accent-lit); font-weight:600; }
  .tafelreihe { display:grid; gap:.6rem; margin-bottom:.6rem;
    grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); }
  .skarte { background:var(--panel); border:1px solid var(--rule);
    border-radius:.7rem; padding:.7rem; text-align:center; }
  .skarte.amzug { border-color:var(--accent-lit); background:#12170f; }
  .skarte.ruht { opacity:.55; }
  .skarte.raus { opacity:.4; }
  .skarte.raus .gross, .skarte.raus .skopf { text-decoration:line-through;
    text-decoration-color:#d98a8a; }
  .augen { color:var(--accent-lit); font-weight:600; }
  .gesperrt { color:#d98a8a; font-size:.85rem; margin-top:.5rem; }
  .zeile input:disabled, .zeile button:disabled { opacity:.45; cursor:not-allowed; }
  .band { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem;
    border-radius:.7rem; margin-bottom:.7rem; font-weight:600; }
  /* Kräftig genug, um nicht übersehen zu werden – darum geht es hier. */
  .band.beendet { background:#1f4536; border:1px solid #4e9b78; color:#eafaf1; }
  .band.weg { background:#55282a; border:1px solid #b56a6a; color:#ffe9e9; }
  .band .zeichen { font-size:1.3rem; line-height:1; }
  .band small { display:block; font-weight:400; opacity:.75; font-size:.8rem; }
  .erstarrt { opacity:.45; filter:grayscale(.35); }
  .crick { width:100%; border-collapse:collapse; table-layout:fixed; }
  .crick th.kopf { vertical-align:bottom; padding:.5rem .25rem; border-bottom:1px solid var(--rule-lit);
    background:var(--panel); border-radius:.6rem .6rem 0 0; }
  .crick th.kopf.amzug { background:#12170f; box-shadow:inset 0 0 0 1px var(--accent-lit); }
  .crick th.kopf.raus { opacity:.4; }
  .crick th.kopf.raus .kpunkte, .crick th.kopf.raus .kname {
    text-decoration:line-through; text-decoration-color:#d98a8a; }
  .crick th.ecke { width:3.2rem; }
  .kname { display:flex; align-items:center; justify-content:center; gap:.3rem;
    font-size:.82rem; font-weight:600; overflow-wrap:anywhere; }
  .kpunkte { font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
  .kunter { font-size:.7rem; color:var(--ink-dim); }
  .crick td { padding:.15rem; text-align:center; border-bottom:1px solid var(--rule); }
  .crick td.ziel { text-align:left; color:var(--ink-dim); font-size:.88rem;
    font-variant-numeric:tabular-nums; }
  .raus-marke { color:#d98a8a; font-size:.75rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em; }
  .skopf { display:flex; align-items:center; justify-content:center; gap:.4rem;
    font-weight:600; font-size:.9rem; overflow-wrap:anywhere; }
  .gitter th { font-weight:600; overflow-wrap:anywhere; max-width:5.5rem; }
  .gitter td.mark { padding:.15rem; }
  .gitter td.mark svg { display:block; margin:0 auto; }
  .gross { font-size:2.4rem; font-weight:700; font-variant-numeric:tabular-nums;
    line-height:1.1; margin:.1rem 0; }
  .statreihe { display:flex; justify-content:space-between; gap:.6rem;
    padding:.25rem 0; border-bottom:1px solid var(--rule); font-size:.9rem; }
  .statreihe:last-child { border-bottom:0; }
  .statreihe span:last-child { font-variant-numeric:tabular-nums; font-weight:600; }
  h2.abschnitt { font-size:1rem; margin:1.6rem 0 .6rem; color:var(--ink-dim);
    text-transform:uppercase; letter-spacing:.08em; }
  .fehler { color:#d98a8a; font-size:.9rem; }
  #chat { max-height:15rem; overflow:auto; }
  .msg { margin:.3rem 0; font-size:.92rem; }
  .msg b { color:var(--accent-lit); }
  .zeile { display:flex; gap:.5rem; margin-top:.6rem; }
  .zeile input { flex:1; min-width:0; padding:.55rem .7rem; border-radius:.5rem;
    border:1px solid var(--rule-lit); background:#0e100e; color:var(--ink); font:inherit; }
  .zeile button { padding:.55rem 1rem; border-radius:.5rem; border:0;
    background:var(--accent); color:#eafaf1; font:inherit; font-weight:600; cursor:pointer; }
  #code { text-transform:uppercase; letter-spacing:.2em; }
  .weg { display:none; }
  .liste a.tafel-karte { display:block; text-decoration:none; color:inherit; }