INFO-BANNER · WIRD ALLEN SPIELERN ANGEZEIGT

Ankündigung

{current && (

● AKTIV: „{current.text}"

)}

setDraft(e.target.value)}
          style={{ resize: "vertical", fontFamily: "var(--font-ui)", fontSize: 14, lineHeight: 1.5 }}
        />
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-primary" onClick={save} disabled={!draft.trim()}>
            VERÖFFENTLICHEN
          </button>
          {current && (
            <button className="btn btn-ghost" onClick={clear} style={{ color: "var(--bad)" }}>
              ENTFERNEN
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// -- Admin ---------------------------------------------------------------
function ApiSyncSection() {
  const [status, setStatus]   = React.useState('idle');   // idle | loading | done | error
  const [message, setMessage] = React.useState('');
  const [syncedCount, setSyncedCount] = React.useState(null);
  const [lastSync, setLastSync]       = React.useState(null);

const statusColor = { idle: 'var(--ink-2)', loading: 'var(--accent)', done: 'var(--good)', error: 'var(--bad)' }[status];
  const statusIcon  = { idle: '○', loading: '◉', done: '✓', error: '✕' }[status];

return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '14px 16px', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div className="h-tag">JOLPICA F1-API · LÄUFT AUTOMATISCH BEI LOGIN</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, marginTop: 2 }}>Ergebnis-Sync</div>
        </div>
        <span className="chip chip-cyan" style={{ fontSize: 10 }}>AUTO</span>
      </div>
      <div style={{ padding: '14px 16px' }}>
        <div style={{ fontSize: 13, color: 'var(--ink-1)', marginBottom: 14, lineHeight: 1.6 }}>
          Pole, Sieger, Sprint-Sieger und Finisher-Anzahl werden beim Admin-Login automatisch
          von der <strong style={{ color: 'var(--ink-0)' }}>Jolpica F1-API</strong> geladen
          und in der Datenbank gespeichert. Manuell auslösbar bei Bedarf.
        </div>

{(status !== 'idle' || lastSync) && (
          <div style={{
            padding: '8px 12px', marginBottom: 12,
            background: 'var(--bg-3)', borderLeft: `3px solid ${statusColor}`,
            fontSize: 12, color: statusColor, fontFamily: 'var(--font-mono)',
            letterSpacing: '0.06em', lineHeight: 1.7,
          }}>
            <span style={{ marginRight: 8 }}>{statusIcon}</span>
            {status === 'loading' && (message || 'Lade...')}
            {status === 'done'    && `${syncedCount} Rennen synchronisiert · Stand ${lastSync}`}
            {status === 'error'   && message}
          </div>
        )}

<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button className="btn btn-ghost" onClick={sync} disabled={status === 'loading'}>
            {status === 'loading' ? '⏳  LADE DATEN...' : '↻  JETZT SYNCHRONISIEREN'}
          </button>
        </div>

<div className="h-mono" style={{ marginTop: 12, fontSize: 10, color: 'var(--ink-3)' }}>
          QUELLE: api.jolpi.ca/ergast/f1 · KEIN ECHTZEIT-FEED · DATEN ERSCHEINEN ~1H NACH RENNENDE
        </div>
      </div>
    </div>
  );
}

function AdminScreen() {
  const SEED = window.SEED;
  const { results, raceState, scoring } = useStore();
  const cur = scoring || SEED.scoring;

const [editingRace, setEditingRace] = React.useState(null);
  const finished = SEED.calendar.filter(r => raceState[r.id] === "finished");

return (
    <div className="container col" style={{ gap: 16, paddingBottom: 60 }}>
      <SectionH title="Admin" sub="ERGEBNIS-EINGABE & PUNKTE-KONFIG" right={<span className="chip chip-cyan">ROLLE: ADMIN</span>} />

{/* Scoring config */}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)" }}>
          <div className="h-tag">PUNKTE-KONFIGURATION · DEFAULT WERTE</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>Scoring-Tabelle</div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 0 }}>
          {[
            ["pole", "Pole Position", "pro Rennen"],
            ["raceWinner", "Renn-Sieger", "pro Rennen"],
            ["sprintPole", "Sprint-Pole", "Sprint-Wochenenden"],
            ["sprintWinner", "Sprint-Sieger", "Sprint-Wochenenden"],
            ["finishers", "Finisher (exakt)", "pro Rennen"],
            ["finishersClose", "Finisher (±1)", "Trostpreis"],
            ["seasonChampion", "Fahrer-WM", "einmalig pro Saison"],
            ["seasonConstructor", "Constructors", "einmalig pro Saison"],
            ["seasonDestructor", "Destructor", "einmalig pro Saison"],
            ["seasonDriverKicked", "Fahrer gekickt", "einmalig pro Saison"],
            ["seasonTeamBossKicked", "Teamchef gekickt", "einmalig pro Saison"],
            ["seasonSurprise", "Biggest Surprise", "einmalig pro Saison"],
          ].map(([k, l, hint]) => (
            <div key={k} style={{ padding: "12px 14px", borderTop: "1px solid var(--line)", borderRight: "1px solid var(--line)" }}>
              <div className="h-tag">{hint}</div>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>{l}</div>
              <div className="row" style={{ marginTop: 8, gap: 6 }}>
                <input
                  type="number" min="0" max="99"
                  className="input tnum" style={{ width: 64, padding: "6px 8px", fontSize: 16 }}
                  value={cur[k]}
                  onChange={e => {
                    const v = parseInt(e.target.value, 10) || 0;
                    setState(s => ({ ...s, scoring: { ...(s.scoring || SEED.scoring), [k]: v } }));
                  }}
                />
                <span className="h-mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>PKT</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: 12, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button className="btn btn-ghost" onClick={() => setState({ scoring: null })}>DEFAULTS WIEDERHERSTELLEN</button>
        </div>
      </div>

{/* Season Picks Lock */}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)" }}>
          <div className="h-tag">SAISON-TIPPS</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>Abstimmungs-Lock</div>
        </div>
        <div className="spread" style={{ padding: "16px 16px", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 14, marginBottom: 4 }}>
              {scoring?.seasonLocked
                ? "Saison-Tipps sind gesperrt."
                : "Saison-Tipps sind offen — Spieler können noch ändern."}
            </div>
            <div className="muted" style={{ fontSize: 12 }}>
              Gesperrt: Niemand kann Saison-Tipps mehr abgeben oder ändern.
            </div>
          </div>
          <button
            className={`btn ${scoring?.seasonLocked ? "btn-ghost" : "btn-primary"}`}
            onClick={() => setState(s => ({
              ...s,
              scoring: { ...(s.scoring || SEED.scoring), seasonLocked: !s.scoring?.seasonLocked }
            }))}
          >
            {scoring?.seasonLocked ? "ENTSPERREN" : "SPERREN"}
          </button>
        </div>
      </div>

{/* Announcement */}
      <AnnouncementAdminSection scoring={scoring} />

{/* API Sync */}
      <ApiSyncSection />

{/* Manuelle Korrekturen */}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)" }}>
          <div className="h-tag">FALLBACK · NUR BEI API-FEHLERN</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>Manuelle Korrekturen</div>
        </div>
        <div style={{ padding: "10px 16px" }}>
          {finished.length === 0 && (
            <div className="muted" style={{ padding: "10px 0", fontSize: 13 }}>Noch keine abgeschlossenen Rennen.</div>
          )}
          {finished.map(r => (
            <div key={r.id} className="spread" style={{ padding: "10px 0", borderBottom: "1px solid var(--bg-3)" }}>
              <div>
                <span style={{ fontWeight: 600 }}>{r.name}</span>
                <span className="h-mono muted" style={{ fontSize: 11, marginLeft: 10 }}>
                  POLE: {results[r.id]?.pole ? getDriver(results[r.id].pole)?.code ?? "?" : "—"} ·
                  WIN: {results[r.id]?.winner ? getDriver(results[r.id].winner)?.code ?? "?" : "—"}
                  {r.sprint ? ` · SPOLE: ${results[r.id]?.sprintPole ? getDriver(results[r.id].sprintPole)?.code ?? "?" : "—"}` : ""}
                </span>
              </div>
              <button className="btn btn-ghost" onClick={() => setEditingRace(r.id)}>KORRIGIEREN</button>
            </div>
          ))}
        </div>
      </div>

{editingRace && <ResultModal raceId={editingRace} close={() => setEditingRace(null)} />}

{/* Saison-Ergebnisse */}
      <SeasonResultsSection scoring={scoring} />

{/* Neustart */}
      <ResetSection />

{/* Spielerverwaltung */}
      <PlayerManagement />
    </div>
  );
}

function ResultModal({ raceId, close }) {
  const SEED = window.SEED;
  const race = getRace(raceId);
  const cur = useStore(s => s.results[raceId]) || { pole: null, winner: null, sprintWinner: null, finishers: 18 };
  const [draft, setDraft] = React.useState(cur);

const save = () => {
    setState(s => ({
      ...s,
      results: { ...s.results, [raceId]: draft },
      raceState: { ...s.raceState, [raceId]: "finished" }
    }));
    close();
  };

return (
    <div onClick={close} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", zIndex: 100,
      display: "grid", placeItems: "center", padding: 16, overflowY: "auto",
    }}>
      <div onClick={e => e.stopPropagation()} className="card"
           style={{ width: "100%", maxWidth: 520, padding: 0, overflow: "hidden" }}>
        <div style={{
          background: "linear-gradient(135deg, #2a1510 0%, #1a1528 100%)",
          padding: "18px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)",
          position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", right: -8, top: -12,
            fontFamily: "var(--font-display)", fontSize: 80,
            color: "rgba(225,6,0,0.08)", lineHeight: 1,
            userSelect: "none", pointerEvents: "none",
          }}>RES</div>
          <div className="h-tag">ERGEBNIS · {race.country}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginTop: 4 }}>{race.name}</div>
        </div>
        <div className="col" style={{ padding: 18, gap: 14 }}>
          <DriverSelect label="POLE POSITION" value={draft.pole} onChange={v => setDraft({...draft, pole: v})} />
          {race.sprint && <DriverSelect label="SPRINT-POLE" value={draft.sprintPole} onChange={v => setDraft({...draft, sprintPole: v})} />}
          {race.sprint && <DriverSelect label="SPRINT-SIEGER" value={draft.sprintWinner} onChange={v => setDraft({...draft, sprintWinner: v})} />}
          <DriverSelect label="RENN-SIEGER" value={draft.winner} onChange={v => setDraft({...draft, winner: v})} />
          <div>
            <div className="h-tag" style={{ marginBottom: 6 }}>FINISHER</div>
            <input type="number" min="0" max="22" className="input tnum"
                   value={draft.finishers ?? 18}
                   onChange={e => setDraft({...draft, finishers: parseInt(e.target.value, 10)})}/>
          </div>
        </div>
        <div className="row" style={{ padding: 14, borderTop: "1px solid var(--line)", justifyContent: "flex-end", gap: 8 }}>
          <button className="btn btn-ghost" onClick={close}>ABBRECHEN</button>
          <button className="btn btn-primary" onClick={save}>✓ SPEICHERN & PUNKTE BERECHNEN</button>
        </div>
      </div>
    </div>
  );
}

function DriverSelect({ label, value, onChange }) {
  return (
    <div>
      <div className="h-tag" style={{ marginBottom: 6 }}>{label}</div>
      <select className="input" value={value || ""} onChange={e => onChange(e.target.value || null)}>
        <option value="">— wählen —</option>
        {window.SEED.drivers.map(d => (
          <option key={d.id} value={d.id}>#{d.num} {d.first} {d.last} ({getTeam(d.team).short})</option>
        ))}
      </select>
    </div>
  );
}

// ---- Neustart: alle Tipps löschen --------------------------------------
function ResetSection() {
  const [phase, setPhase] = React.useState("idle"); // idle | confirm | running | done
  const sb = window._supabase;

const doReset = async () => {
    setPhase("running");
    try {
      // Alle Tipps aus DB löschen (RLS: Admin darf alle Zeilen löschen)
      const [rp, sp] = await Promise.all([
        sb.from('race_picks').delete().neq('race_id', '___never___'),
        sb.from('season_picks').delete().neq('user_id', '00000000-0000-0000-0000-000000000000'),
      ]);
      if (rp.error) throw rp.error;
      if (sp.error) throw sp.error;

// Lokalen Store leeren
      window.setState(s => ({ ...s, racePicks: {}, seasonPicks: {} }));
      setPhase("done");
      setTimeout(() => setPhase("idle"), 3000);
      showToast("Alle Tipps wurden zurückgesetzt.", "ok");
    } catch (err) {
      console.error("[reset]", err);
      showToast("Fehler beim Zurücksetzen: " + err.message, "err");
      setPhase("idle");
    }
  };

return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)" }}>
        <div className="h-tag">SAISONSTART</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>Neustart</div>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 13, marginBottom: 12, color: "var(--ink-1)", lineHeight: 1.5 }}>
          Löscht <strong>alle Tipps aller Spieler</strong> (Renn- und Saison-Tipps). Rennergebnisse
          und Rennstatus bleiben erhalten. Kann nicht rückgängig gemacht werden.
        </div>
        {phase === "idle" && (
          <button className="btn btn-ghost" style={{ color: "var(--bad)" }}
                  onClick={() => setPhase("confirm")}>
            ALLE TIPPS ZURÜCKSETZEN
          </button>
        )}
        {phase === "confirm" && (
          <div className="col" style={{ gap: 10 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--bad)" }}>
              Bist du sicher? Diese Aktion kann nicht rückgängig gemacht werden.
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button className="btn btn-primary" style={{ background: "var(--bad)" }}
                      onClick={doReset}>
                JA, JETZT ZURÜCKSETZEN
              </button>
              <button className="btn btn-ghost" onClick={() => setPhase("idle")}>
                ABBRECHEN
              </button>
            </div>
          </div>
        )}
        {phase === "running" && (
          <div className="h-mono muted" style={{ fontSize: 12 }}>Wird zurückgesetzt…</div>
        )}
        {phase === "done" && (
          <div className="h-mono" style={{ fontSize: 12, color: "var(--good)" }}>✓ Alle Tipps gelöscht.</div>
        )}
      </div>
    </div>
  );
}

// ---- Saison-Ergebnisse (Admin trägt am Saisonende ein) ------------------
function SeasonResultsSection({ scoring }) {
  const SEED = window.SEED;
  const sr = scoring?.seasonResults || {};

const setResult = (key, val) => {
    setState(s => ({
      ...s,
      scoring: {
        ...(s.scoring || SEED.scoring),
        seasonResults: { ...((s.scoring || SEED.scoring).seasonResults || {}), [key]: val || null },
      },
    }));
  };

const cats = [
    { key: "driverChampion",  label: "Fahrer-Weltmeister",   kind: "driver" },
    { key: "constructor",     label: "Constructors Champion", kind: "team"   },
    { key: "destructor",      label: "Destructor",            kind: "driver" },
    { key: "driverKicked",    label: "Fahrer wurde gekickt",  kind: "driver" },
    { key: "teamBossKicked",  label: "Teamchef-Wechsel",      kind: "team"   },
    { key: "surprise",        label: "Biggest Surprise",      kind: "driver" },
  ];

const filled = cats.filter(c => sr[c.key]).length;

return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div className="h-tag">AM SAISONENDE AUSFÜLLEN · {filled}/6 EINGETRAGEN</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>Saison-Ergebnisse</div>
        </div>
        <span className={`chip ${filled === 6 ? "chip-good" : "chip-warn"}`}>{filled === 6 ? "KOMPLETT" : "OFFEN"}</span>
      </div>
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 0 }}>
        {cats.map(c => (
          <div key={c.key} style={{ padding: "12px 14px", borderTop: "1px solid var(--line)", borderRight: "1px solid var(--line)" }}>
            <div className="h-tag" style={{ marginBottom: 6 }}>{c.label}</div>
            {c.kind === "driver" ? (
              <select className="input" value={sr[c.key] || ""} onChange={e => setResult(c.key, e.target.value)}>
                <option value="">— noch nicht bekannt —</option>
                {SEED.drivers.map(d => (
                  <option key={d.id} value={d.id}>#{d.num} {d.first} {d.last}</option>
                ))}
              </select>
            ) : (
              <select className="input" value={sr[c.key] || ""} onChange={e => setResult(c.key, e.target.value)}>
                <option value="">— noch nicht bekannt —</option>
                {SEED.teams.map(t => (
                  <option key={t.id} value={t.id}>{t.name}</option>
                ))}
              </select>
            )}
          </div>
        ))}
      </div>
      <div className="muted" style={{ padding: "10px 14px", fontSize: 11 }}>
        Sobald ein Ergebnis eingetragen ist, werden die Saison-Punkte aller Spieler sofort berechnet.
      </div>
    </div>
  );
}

// ---- Spielerverwaltung (nur Live-Modus mit Supabase) --------------------
function PlayerManagement() {
  const [players,  setPlayers]  = React.useState([]);
  const [loading,  setLoading]  = React.useState(true);
  const [newEmail, setNewEmail] = React.useState("");
  const [newName,  setNewName]  = React.useState("");
  const [newAdmin, setNewAdmin] = React.useState(false);
  const [saving,   setSaving]   = React.useState(false);
  const [msg,      setMsg]      = React.useState("");

const sb = window._supabase;

const load = async () => {
    setLoading(true);
    const { data, error } = await sb.from('players').select('*').order('created_at');
    if (!error) setPlayers(data || []);
    setLoading(false);
  };

React.useEffect(() => { if (sb) load(); else setLoading(false); }, []);

const toggleAdmin = async (id, current) => {
    await sb.from('players').update({ is_admin: !current }).eq('id', id);
    load();
  };

if (!sb) {
    return (
      <div className="card" style={{ padding: 16 }}>
        <div className="h-tag" style={{ marginBottom: 6 }}>SPIELER VERWALTEN</div>
        <div className="muted" style={{ fontSize: 13 }}>
          Nur im Live-Modus verfügbar (Supabase-Config erforderlich).
        </div>
      </div>
    );
  }

return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "14px 16px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)" }}>
        <div className="h-tag">SPIELER VERWALTEN · ZUGANG & EINLADUNGEN</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 2 }}>
          Teilnehmer
        </div>
      </div>

{/* Neuen Spieler anlegen */}
      <form onSubmit={addPlayer} style={{
        padding: 14, borderBottom: "1px solid var(--line)",
        display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end",
      }}>
        <div style={{ flex: "1 1 120px" }}>
          <div className="h-tag" style={{ marginBottom: 4 }}>NAME</div>
          <input className="input" placeholder="Max Verstappen" value={newName}
                 onChange={e => setNewName(e.target.value)} disabled={saving} />
        </div>
        <div style={{ flex: "2 1 200px" }}>
          <div className="h-tag" style={{ marginBottom: 4 }}>E-MAIL</div>
          <input className="input" type="email" placeholder="max@redbull.com" value={newEmail}
                 onChange={e => setNewEmail(e.target.value)} disabled={saving} />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, paddingBottom: 2 }}>
          <input type="checkbox" id="newAdminCb" checked={newAdmin}
                 onChange={e => setNewAdmin(e.target.checked)} />
          <label htmlFor="newAdminCb" className="h-tag">ADMIN</label>
        </div>
        <button className="btn btn-primary" type="submit"
                disabled={saving || !newEmail.trim() || !newName.trim()}
                style={{ flexShrink: 0 }}>
          {saving ? "..." : "+ HINZUFÜGEN"}
        </button>
      </form>

{msg && (
        <div style={{
          padding: "8px 14px", fontSize: 13,
          color: msg.startsWith("✓") ? "var(--good)" : "var(--bad)",
          borderBottom: "1px solid var(--line)",
        }}>{msg}</div>
      )}

{/* Spieler-Liste */}
      {loading ? (
        <div style={{ padding: 16, color: "var(--ink-2)", fontSize: 13 }}>Lade Spieler…</div>
      ) : players.length === 0 ? (
        <div style={{ padding: 16, color: "var(--ink-2)", fontSize: 13 }}>
          Noch keine Spieler. Füg dich selbst zuerst hinzu!
        </div>
      ) : (
        <div>
          {players.map(p => (
            <div key={p.id} className="spread"
                 style={{ padding: "10px 14px", borderBottom: "1px solid var(--bg-3)" }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontWeight: 600 }}>
                  {p.name}
                  {p.is_admin && (
                    <span className="chip chip-cyan" style={{ marginLeft: 8, padding: "1px 6px", fontSize: 9 }}>
                      ADMIN
                    </span>
                  )}
                </div>
                <div className="h-mono muted" style={{ fontSize: 11 }}>
                  {p.email}
                  {" · "}
                  {p.user_id
                    ? <span style={{ color: "var(--good)" }}>✓ eingeloggt</span>
                    : <span style={{ color: "var(--warn)" }}>○ noch nie eingeloggt</span>
                  }
                </div>
              </div>
              <div className="row" style={{ gap: 6, flexShrink: 0 }}>
                <button
                  className={`btn btn-ghost ${p.is_admin ? "active" : ""}`}
                  style={{ padding: "4px 10px", fontSize: 11 }}
                  onClick={() => toggleAdmin(p.id, p.is_admin)}
                  title={p.is_admin ? "Admin-Rechte entziehen" : "Zum Admin machen"}
                >
                  {p.is_admin ? "ADMIN ✓" : "ADMIN"}
                </button>
                <button
                  className="btn btn-ghost"
                  style={{ padding: "4px 8px", fontSize: 11, color: "var(--bad)" }}
                  onClick={() => removePlayer(p.id, p.name, p.user_id)}
                  title="Spieler entfernen"
                >
                  ✕
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

<div style={{ padding: "10px 14px", background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
        <div className="muted" style={{ fontSize: 12 }}>
          Spieler, die noch nicht eingeloggt waren, können sich über den Magic-Link-Login anmelden.
          Ihre Tipps werden dem Konto automatisch zugeordnet.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LeaderboardScreen, AdminScreen, PlayerManagement });