// Tournaments hub: list view + detail view (double-elim bracket)

const BracketScreen = ({ tweaks, role, onScoreSubmit }) => {
  const [selectedId, setSelectedId] = useState(null);
  const [tournaments, setTournaments] = useState([]);
  const [loadingTrn, setLoadingTrn] = useState(true);

  useEffect(() => {
    WZN_Store.getTournaments().then(data => {
      setTournaments(data || []);
      setLoadingTrn(false);
    });
  }, []);

  const selected = tournaments.find(t => t.id === selectedId);

  if (!selected) {
    return <TournamentsList tweaks={tweaks} onSelect={setSelectedId} role={role}
             onScoreSubmit={onScoreSubmit} tournaments={tournaments} loading={loadingTrn} />;
  }
  return <TournamentDetail tweaks={tweaks} tournament={selected} onBack={() => setSelectedId(null)}
           role={role} onScoreSubmit={onScoreSubmit} />;
};

// ===================================================================
// TOURNAMENTS LIST
// ===================================================================

const TournamentsList = ({ tweaks, onSelect, role, onScoreSubmit, tournaments = [], loading = false }) => {
  const canSubmit = role === "captain" || role === "mod" || role === "admin" || role === "superadmin";
  const active   = tournaments.filter(t => t.status === "live");
  const upcoming = tournaments.filter(t => t.status === "open" || t.status === "upcoming" || t.status === "locked");
  const completed = tournaments.filter(t => t.status === "completed");

  return (
    <div className="t-list">
      {/* Page banner */}
      <div className="t-list-banner">
        <div className="t-list-banner-grid"/>
        <div className="t-list-banner-left">
          <div className="trn-eyebrow">
            <span className="trn-pip" style={{background: tweaks.accent}}/>
            <span>OPERASJONER / TURNERINGER / SECTOR-NO</span>
          </div>
          <h1 className="t-list-title">TURNERING — KOMMANDOSENTRAL</h1>
          <p className="t-list-lede">
            Trykk på en pågående operasjon for å åpne bracketen. Alle turneringer kjører
            double-elim — losers bracket gir andre sjanse. Auto-fyller BYE i 8/16/32-brackets
            hvis det ikke er fullt påmeldt.
          </p>
        </div>
        <div className="t-list-banner-right">
          <div className="t-summary">
            <div className="t-sum-cell">
              <span>LIVE</span>
              <b style={{color: tweaks.accent}}>{active.length}</b>
            </div>
            <div className="t-sum-cell">
              <span>KOMMENDE</span>
              <b>{upcoming.length}</b>
            </div>
            <div className="t-sum-cell">
              <span>FERDIG</span>
              <b>{completed.length}</b>
            </div>
          </div>
        </div>
      </div>

      {/* Loading */}
      {loading && (
        <div style={{color:"var(--text-faint)", padding:"3rem", textAlign:"center"}}>Laster turneringer…</div>
      )}

      {/* Active */}
      {!loading && (
      <div className="panel">
        <SectionHeader
          code="A"
          title="PÅGÅR NÅ"
          subtitle={`${active.length} aktive turneringer · trykk for å se bracket`}
          accent={tweaks.accent}
          right={<span className="status-live" style={{color: tweaks.accent}}>● LIVE</span>}
        />
        <div className="t-grid">
          {active.length === 0 && (
            <div style={{color:"var(--text-faint)", padding:"1.5rem", gridColumn:"1/-1"}}>Ingen aktive turneringer</div>
          )}
          {active.map(t => (
            <TournamentCard
              key={t.id} t={t} tweaks={tweaks} onClick={() => onSelect(t.id)} live
              canSubmit={canSubmit} onScoreSubmit={onScoreSubmit}
            />
          ))}
        </div>
      </div>
      )}

      {/* Upcoming + Completed */}
      {!loading && (
      <div className="dual">
        <div className="panel">
          <SectionHeader code="B" title="KOMMENDE" subtitle="Åpne for påmelding" accent={tweaks.accent}/>
          <ul className="t-list-rows">
            {upcoming.length === 0 && (
              <li style={{color:"var(--text-faint)", padding:"1rem", listStyle:"none"}}>Ingen kommende turneringer</li>
            )}
            {upcoming.map(t => {
              const dt = t.start_date || t.startsAt || "";
              return (
              <li key={t.id} className="t-row" onClick={() => onSelect(t.id)}>
                <div className="t-row-date">
                  <div className="t-row-d">{dt ? dt.slice(8,10)+"."+dt.slice(5,7) : "—"}</div>
                  <div className="t-row-t">{dt ? dt.slice(11,16) : ""}</div>
                </div>
                <div className="t-row-mid">
                  <div className="t-row-name">{t.name}</div>
                  <div className="t-row-meta">
                    <span className={`t-type-pill ${t.type}`} style={{borderColor: tweaks.accent, color: tweaks.accent}}>{(t.type||"bracket").toUpperCase()}</span>
                    <span>{t.max_teams || "?"} LAG MAKS</span>
                    <span>{t.prize_pool ? `${t.prize_pool.toLocaleString()} NOK` : "—"}</span>
                  </div>
                </div>
                <button className="t-row-go" style={{borderColor: tweaks.accent, color: tweaks.accent}}>SE ↗</button>
              </li>
            );})}
          </ul>
        </div>
        <div className="panel">
          <SectionHeader code="C" title="FERDIG" subtitle="Siste resultater" accent={tweaks.accent}/>
          <ul className="t-list-rows">
            {completed.length === 0 && (
              <li style={{color:"var(--text-faint)", padding:"1rem", listStyle:"none"}}>Ingen fullførte turneringer ennå</li>
            )}
            {completed.map(t => {
              const dt = t.start_date || t.startsAt || "";
              return (
              <li key={t.id} className="t-row done" onClick={() => onSelect(t.id)}>
                <div className="t-row-date">
                  <div className="t-row-d">{dt ? dt.slice(8,10)+"."+dt.slice(5,7) : "—"}</div>
                  <div className="t-row-t">FERDIG</div>
                </div>
                <div className="t-row-mid">
                  <div className="t-row-name">{t.name}</div>
                  <div className="t-row-meta">
                    <span className={`t-type-pill ${t.type}`}>{(t.type||"bracket").toUpperCase()}</span>
                  </div>
                </div>
                <button className="t-row-go ghost">REPLAY ↗</button>
              </li>
            );})}
          </ul>
        </div>
      </div>
      )}
    </div>
  );
};

const _nextPow2 = n => { let p = 1; while (p < n) p <<= 1; return p; };

const TournamentCard = ({ t, tweaks, onClick, live, canSubmit, onScoreSubmit }) => {
  const teamCount = t.max_teams || 0;
  const bracketSize = _nextPow2(teamCount || 16);
  const dt = t.start_date || t.startsAt || "";
  return (
    <div className={`t-card ${live ? "live" : ""}`} onClick={onClick} style={live ? {borderColor: tweaks.accent, cursor: "pointer"} : {cursor: "pointer"}}>
      <div className="t-card-corners"><span/><span/><span/><span/></div>
      <div className="t-card-head">
        <div className="t-card-id">SN/ {(t.id||"").slice(0,8).toUpperCase()}</div>
        {live && <span className="t-card-live" style={{color: tweaks.accent}}><span className="pulse-dot" style={{background: tweaks.accent}}/>LIVE</span>}
      </div>
      <div className="t-card-type" style={{color: tweaks.accent}}>
        {t.type === "killrace" ? "▰ KILLRACE" : "▰ DOUBLE-ELIM BRACKET"}
      </div>
      <div className="t-card-name">{t.name}</div>
      <div className="t-card-sub">{t.team_size ? `${(t.team_size||"trios").toUpperCase()} · ${t.games || 5} GAMES` : ""}</div>

      <div className="t-card-status" style={{borderColor: tweaks.accent, color: tweaks.accent}}>
        {(t.status||"draft").toUpperCase()}
      </div>

      <div className="t-card-meta">
        <div className="t-meta-cell">
          <span>FORMAT</span>
          <b>{bracketSize}-LAG {(t.type||"bracket").toUpperCase()}</b>
        </div>
        <div className="t-meta-cell">
          <span>MAP</span>
          <b>{(t.maps||[]).join(", ") || "—"}</b>
        </div>
        <div className="t-meta-cell">
          <span>PREMIE</span>
          <b style={{color: tweaks.accent}}>{t.prize_pool ? `${t.prize_pool.toLocaleString()} NOK` : "—"}</b>
        </div>
      </div>

      <div className="t-card-bracket-info">
        <div className="tcb-left">
          <div className="tcb-bracket-size">{bracketSize}<span>-LAG BRACKET</span></div>
          <div className="tcb-fill">
            <div className="tcb-fill-bar">
              <div className="tcb-fill-bar-in" style={{width: `${(teamCount/bracketSize)*100}%`, background: tweaks.accent}}/>
            </div>
            <span>{teamCount} PÅMELDT · {byes} BYE</span>
          </div>
        </div>
        <div className="tcb-cta" style={{color: tweaks.accent}}>ÅPNE BRACKET →</div>
      </div>

      {live && canSubmit && (
        <button
          className="t-card-rapporter-btn"
          style={{background: tweaks.accent}}
          onClick={e => {
            e.stopPropagation();
            onScoreSubmit && onScoreSubmit({
              type: t.type === "2v2" ? "2v2" : "killrace",
              tournament: t.name,
              game: 1,
              gameLabel: "GAME 1",
            });
          }}
        >
          <span className="trn-rapporter-dot"/>
          RAPPORTER SCORE
        </button>
      )}
    </div>
  );
};

// ===================================================================
// TOURNAMENT DETAIL
// ===================================================================

const TournamentDetail = ({ tweaks, tournament, onBack, role, onScoreSubmit }) => {
  const canSubmit = role === "captain" || role === "mod" || role === "admin" || role === "superadmin";
  const isAdmin = role === "admin" || role === "superadmin";
  const isLive = tournament.status === "live";
  const isBracket = tournament.type === "bracket" || tournament.type === "2v2";
  const [view, setView] = useState(isBracket ? "bracket" : "leaderboard");
  const [teams, setTeams] = useState([]);
  const [matches, setMatches] = useState([]);
  const [loadingBracket, setLoadingBracket] = useState(true);
  const [generatingBracket, setGeneratingBracket] = useState(false);
  const [switcharooOpen, setSwitcharooOpen] = useState(false);

  useEffect(() => {
    setLoadingBracket(true);
    Promise.all([
      WZN_Store.getTournamentTeams(tournament.id),
      WZN_Store.getBracketMatches(tournament.id),
    ]).then(([t, m]) => {
      setTeams(t || []);
      setMatches(m || []);
      setLoadingBracket(false);
    });
  }, [tournament.id]);

  const handleGenerateBracket = async () => {
    if (!confirm(`Generer bracket for ${teams.length} lag?`)) return;
    setGeneratingBracket(true);
    const { error, matchCount } = await WZN_Store.generateBracket(tournament.id);
    if (!error) {
      const [t, m] = await Promise.all([
        WZN_Store.getTournamentTeams(tournament.id),
        WZN_Store.getBracketMatches(tournament.id),
      ]);
      setTeams(t || []);
      setMatches(m || []);
      alert(`Bracket generert! ${matchCount} kamper opprettet.`);
    } else {
      alert("Feil: " + error.message);
    }
    setGeneratingBracket(false);
  };

  const bracketSize = _nextPow2(teams.length || 2);
  const byeCount = bracketSize - teams.length;

  return (
    <div className="bracket-screen">
      <button className="t-back" onClick={onBack} style={{borderColor: tweaks.accent}}>
        <span style={{color: tweaks.accent}}>←</span> TILBAKE TIL TURNERINGER
      </button>

      {/* Tournament header */}
      <div className="trn-head">
        <div className="trn-head-grid"/>
        <div className="trn-head-left">
          <div className="trn-eyebrow">
            <span className="trn-pip" style={{background: tweaks.accent}}/>
            <span>TURNERING / {tournament.type.toUpperCase()} / {isBracket ? "DOUBLE ELIMINATION" : "KILLRACE LEADERBOARD"}</span>
            <span className="trn-status">● {tournament.statusLabel}</span>
          </div>
          <h1 className="trn-title">{tournament.name}</h1>
          <div className="trn-sub-line">{isBracket ? "DOUBLE ELIMINATION" : "KILLRACE LEADERBOARD"} · {(tournament.team_size||"trios").toUpperCase()}</div>
          <div className="trn-meta">
            <div className="tm-cell"><span>FORMAT</span><b>{bracketSize}-LAG {isBracket ? "D-ELIM" : "KILLRACE"}</b></div>
            <div className="tm-cell">
              <span>LAG</span>
              <b>{loadingBracket ? "…" : `${teams.length} / ${bracketSize} (${byeCount} BYE)`}</b>
            </div>
            <div className="tm-cell"><span>MAP</span><b>{(tournament.maps||[]).join(", ")||"—"}</b></div>
            <div className="tm-cell"><span>ENTRY</span><b>{tournament.entry_fee ? `${tournament.entry_fee} NOK` : "GRATIS"}</b></div>
          </div>
          {isAdmin && (
            <div style={{marginTop:"1rem", display:"flex", gap:".5rem", flexWrap:"wrap"}}>
              {isBracket && matches.length === 0 && !loadingBracket && (
                <button
                  onClick={handleGenerateBracket}
                  disabled={generatingBracket || teams.length < 2}
                  style={{background: tweaks.accent, border:"none", color:"#000",
                    padding:".5rem 1.25rem", fontFamily:"var(--font-mono)", fontSize:".8rem",
                    cursor: teams.length >= 2 ? "pointer" : "not-allowed", fontWeight:700}}
                >
                  {generatingBracket ? "GENERERER…" : `⊞ GENERER BRACKET (${teams.length} LAG)`}
                </button>
              )}
              <button
                onClick={() => setSwitcharooOpen(true)}
                style={{background:"transparent", border:`1px solid ${tweaks.accent}`,
                  color: tweaks.accent, padding:".5rem 1.25rem",
                  fontFamily:"var(--font-mono)", fontSize:".8rem", cursor:"pointer", fontWeight:700}}
              >
                🎰 2V2 SWITCHAROO WHEEL
              </button>
            </div>
          )}
          {switcharooOpen && (
            <SwitcharooWheel
              tournamentId={tournament.id}
              accent={tweaks.accent}
              onClose={() => setSwitcharooOpen(false)}
              onComplete={() => {
                // Refresh teams etter switcharoo
                WZN_Store.getTournamentTeams(tournament.id).then(setTeams);
              }}
            />
          )}
        </div>
        <div className="trn-head-right">
          <div className="prize-card">
            <div className="prize-eye">PREMIEPOTT</div>
            <div className="prize-num" style={{color: tweaks.accent}}>
              {tournament.prize_pool ? `${tournament.prize_pool.toLocaleString()} NOK` : "—"}
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="trn-tabs">
        <div className="trn-tab-row">
          {(isBracket
            ? [
                { id:"bracket", label:"BRACKET", code:"A" },
                { id:"teams",   label:"PÅMELDTE",code:"B" },
                { id:"rules",   label:"REGLER",  code:"C" },
              ]
            : [
                { id:"leaderboard", label:"LEADERBOARD", code:"A" },
                { id:"maps",        label:"MAP-FOR-MAP", code:"B" },
                { id:"rules",       label:"REGLER",      code:"C" },
              ]
          ).map(t => (
            <button key={t.id}
              className={`tab ${view === t.id ? "active" : ""}`}
              onClick={() => setView(t.id)}
              style={view === t.id ? {borderColor: tweaks.accent} : null}
            >
              <span className="tab-code">{t.code}</span>{t.label}
            </button>
          ))}
        </div>
        <div className="trn-tab-actions">
          <button className="ghost-btn"><span className="status-live" style={{color: tweaks.accent}}>●</span> LIVE STREAM</button>
          {canSubmit && isLive && (
            <button
              className="trn-rapporter-btn"
              onClick={() => onScoreSubmit && onScoreSubmit({
                type: tournament.type === "2v2" ? "2v2" : "killrace",
                tournament: tournament.name,
                game: 1,
                gameLabel: "GAME 1",
              })}
              style={{background: tweaks.accent}}
            >
              <span className="trn-rapporter-dot"/>
              RAPPORTER SCORE
            </button>
          )}
          <button className="ghost-btn">EKSPORT ↗</button>
        </div>
      </div>

      {isBracket && view === "bracket" && <DoubleElimView tweaks={tweaks} tournament={tournament} matches={matches} teams={teams} loading={loadingBracket}/>}
      {isBracket && view === "teams"   && <TeamsView tweaks={tweaks} tournament={tournament} teams={teams} loading={loadingBracket}/>}

      {!isBracket && view === "leaderboard" && <KillraceLeaderboard tweaks={tweaks} tournament={tournament} teams={teams} loading={loadingBracket}/>}
      {!isBracket && view === "maps"        && <KillraceMapByMap tweaks={tweaks} tournament={tournament} matches={matches}/>}

      {view === "rules" && <RulesView tweaks={tweaks} tournament={tournament}/>}
    </div>
  );
};

// ===================================================================
// DOUBLE-ELIM BRACKET VIEW
// ===================================================================

// Challengermode-inspired bracket: round columns, status pills,
// match cards med team-rows og scores. Ingen play-knapper.
const DoubleElimView = ({ tweaks, tournament, matches = [], teams = [], loading = false }) => {
  if (loading) return <div style={{padding:"3rem", color:"var(--text-faint)", textAlign:"center"}}>Laster bracket…</div>;
  if (matches.length === 0) return (
    <div style={{padding:"3rem", color:"var(--text-faint)", textAlign:"center", border:"1px solid var(--line)", margin:"1.5rem"}}>
      <div style={{fontSize:"2rem", marginBottom:".5rem"}}>⊞</div>
      <div>Bracket ikke generert ennå.</div>
      <div style={{fontSize:".8rem", marginTop:".5rem"}}>Admin: godkjenn lag, deretter trykk "GENERER BRACKET"</div>
    </div>
  );

  const accent = tweaks.accent;

  // Grupper kamper per side og runde
  const wbMatches = matches.filter(m => m.side === "winners").sort((a,b) => a.round - b.round || a.match_number - b.match_number);
  const lbMatches = matches.filter(m => m.side === "losers").sort((a,b) => a.round - b.round || a.match_number - b.match_number);
  const gfMatches = matches.filter(m => m.side === "grand_final");

  const groupByRound = (arr) => {
    const rounds = {};
    arr.forEach(m => { (rounds[m.round] = rounds[m.round] || []).push(m); });
    return Object.values(rounds);
  };

  const wbRounds = groupByRound(wbMatches);
  const lbRounds = groupByRound(lbMatches);

  // Round label generator — etterligner CM: "Upper Round of 16", "Upper Quarter finals", etc.
  const wbRoundLabels = (() => {
    const total = wbRounds.length;
    if (total === 0) return [];
    const teamCount = wbRounds[0].length * 2;
    const labels = [];
    let n = teamCount;
    for (let i = 0; i < total; i++) {
      if (i === total - 1) labels.push("Upper Final");
      else if (i === total - 2) labels.push("Upper Semi finals");
      else if (i === total - 3) labels.push("Upper Quarter finals");
      else labels.push(`Upper Round of ${n}`);
      n = n / 2;
    }
    return labels;
  })();

  const lbRoundLabels = (() => {
    const total = lbRounds.length;
    if (total === 0) return [];
    const labels = [];
    for (let i = 0; i < total; i++) {
      if (i === total - 1) labels.push("Lower Final");
      else if (i === total - 2) labels.push("Lower Semi finals");
      else if (i === total - 3) labels.push("Lower Quarter finals");
      else {
        const matchCount = lbRounds[i].length;
        labels.push(`Lower Round of ${matchCount * 2}`);
      }
    }
    return labels;
  })();

  // Status mapping → status-pill
  const statusPill = (status) => {
    const map = {
      completed: { label: "Finished", bg: "rgba(46, 204, 113, 0.18)", color: "#2ecc71" },
      live:      { label: "Paused",   bg: "rgba(255, 159, 64, 0.18)", color: "#ff9f40" },
      pending:   { label: "Waiting",  bg: "rgba(125, 132, 141, 0.18)", color: "#9aa0a6" },
      walkover:  { label: "Walkover", bg: "rgba(99, 132, 255, 0.18)", color: "#6384ff" },
      cancelled: { label: "Cancelled", bg: "rgba(220, 53, 69, 0.18)", color: "#dc3545" },
      timeout:   { label: "Timed out", bg: "rgba(220, 53, 69, 0.18)", color: "#dc3545" },
      bye:       { label: "Bye",      bg: "rgba(125, 132, 141, 0.12)", color: "#9aa0a6" },
    };
    return map[status] || map.pending;
  };

  const teamLabel = (m, side, t) => {
    if (t) return t.team_name || t.team_tag || "—";
    // Inferer hvilken match denne placeholderen kommer fra
    if (side === "team1" && m.team1_from_match) return `From match ${m.team1_from_match}`;
    if (side === "team2" && m.team2_from_match) return `From match ${m.team2_from_match}`;
    return "To be decided";
  };

  const MatchCard = ({ m, isGF }) => {
    const t1 = teams.find(t => t.id === m.team1_id);
    const t2 = teams.find(t => t.id === m.team2_id);
    const w = m.winner_id;
    const s1 = (m.team1_score && (m.team1_score.kills ?? m.team1_score.score)) ?? 0;
    const s2 = (m.team2_score && (m.team2_score.kills ?? m.team2_score.score)) ?? 0;
    const pill = statusPill(m.status);
    const isByeMatch = m.status === "bye";
    const bo = m.bo || (isGF ? 5 : 3);

    const teamRow = (label, score, isWinner) => (
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "8px 10px",
        background: isWinner ? `linear-gradient(90deg, ${accent}22, transparent)` : "transparent",
        borderLeft: isWinner ? `2px solid ${accent}` : "2px solid transparent",
      }}>
        <span style={{
          width: 18, height: 18, borderRadius: "50%",
          background: "var(--bg-3)", display: "inline-flex",
          alignItems: "center", justifyContent: "center",
          fontSize: 9, color: "var(--text-faint)",
          fontFamily: "var(--font-mono)",
          flexShrink: 0,
        }}>◆</span>
        <span style={{
          flex: 1, minWidth: 0,
          fontFamily: "var(--font-body)", fontSize: 13,
          color: isWinner ? accent : "var(--text)",
          fontWeight: isWinner ? 600 : 400,
          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
        }}>{label}</span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 13,
          color: isWinner ? accent : "var(--text-dim)",
          fontWeight: 600,
          minWidth: 18, textAlign: "right",
        }}>{score}</span>
      </div>
    );

    return (
      <div style={{
        background: "var(--bg-1)",
        border: "1px solid var(--line)",
        borderRadius: 4,
        marginBottom: 24,
        overflow: "hidden",
        minWidth: 240,
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 8,
          padding: "6px 10px",
          background: "var(--bg-2)",
          borderBottom: "1px solid var(--line)",
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 9,
            padding: "2px 8px",
            background: pill.bg, color: pill.color,
            letterSpacing: "0.06em", textTransform: "uppercase",
            borderRadius: 2,
          }}>{pill.label}</span>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--text-faint)", letterSpacing: "0.08em",
            marginLeft: "auto",
          }}>Match {m.match_number} · BO{bo}</span>
        </div>
        {isByeMatch ? (
          <div style={{ padding: "12px 10px", fontSize: 12, color: "var(--text-faint)", fontFamily: "var(--font-mono)" }}>
            {t1 ? (t1.team_name || t1.team_tag) : "—"} · BYE
          </div>
        ) : (
          <>
            {teamRow(teamLabel(m, "team1", t1), s1, w && w === m.team1_id)}
            <div style={{ height: 1, background: "var(--line)" }} />
            {teamRow(teamLabel(m, "team2", t2), s2, w && w === m.team2_id)}
          </>
        )}
      </div>
    );
  };

  const RoundColumn = ({ label, matchList }) => (
    <div style={{
      minWidth: 280, marginRight: 24,
      display: "flex", flexDirection: "column",
    }}>
      <div style={{ marginBottom: 16, textAlign: "center" }}>
        <div style={{
          fontFamily: "var(--font-stencil)", fontSize: 16,
          color: "var(--text)", letterSpacing: "0.04em",
        }}>{label}</div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--text-faint)", letterSpacing: "0.15em",
          marginTop: 4,
        }}>{matchList.length} {matchList.length === 1 ? "match" : "matches"}</div>
      </div>
      {matchList.map(m => <MatchCard key={m.id} m={m} />)}
    </div>
  );

  const completed = matches.filter(m => m.status === "completed").length;
  const bracketSize = _nextPow2(teams.length || 2);
  const byeCount = matches.filter(m => m.status === "bye").length;

  return (
    <div className="de-wrap">
      {/* Grand Final — alone på toppen */}
      {gfMatches.length > 0 && (
        <div style={{ padding: "24px 24px 0", marginBottom: 16, borderBottom: "1px solid var(--line)" }}>
          <div style={{ display: "flex" }}>
            <RoundColumn label="Grand final" matchList={gfMatches.map(m => ({ ...m, isGF: true }))} />
          </div>
        </div>
      )}

      {/* Upper bracket (Winners) */}
      {wbRounds.length > 0 && (
        <div style={{ padding: "24px", overflowX: "auto" }}>
          <div style={{ display: "flex", paddingBottom: 24 }}>
            {wbRounds.map((round, ri) => (
              <RoundColumn key={`wb-${ri}`} label={wbRoundLabels[ri]} matchList={round} />
            ))}
          </div>
        </div>
      )}

      {/* Lower bracket (Losers) */}
      {lbRounds.length > 0 && (
        <div style={{
          padding: "24px", overflowX: "auto",
          borderTop: "1px solid var(--line)",
          background: "var(--bg-0)",
        }}>
          <div style={{ display: "flex", paddingBottom: 24 }}>
            {lbRounds.map((round, ri) => (
              <RoundColumn key={`lb-${ri}`} label={lbRoundLabels[ri]} matchList={round} />
            ))}
          </div>
        </div>
      )}

      <div className="bracket-footer">
        <div className="bf-stat"><span>BRACKET STR.</span><b>{bracketSize} LAG</b></div>
        <div className="bf-stat"><span>PÅMELDTE</span><b>{teams.length}</b></div>
        <div className="bf-stat"><span>BYE-PLASSER</span><b>{byeCount}</b></div>
        <div className="bf-stat"><span>MATCHER SPILT</span><b>{completed}/{matches.length}</b></div>
        <div className="bf-stat"><span>FORMAT</span><b>DOUBLE ELIM</b></div>
      </div>
    </div>
  );
};

// ===================================================================
// ROUND COLUMN + MATCH CARD
// ===================================================================

const RoundColumn = ({ label, sub, matches, tweaks, tournament, isFinal, isGF, isLB, hasDrop }) => (
  <div className={`de-round ${isGF ? "is-gf" : ""} ${isLB ? "is-lb" : ""}`}>
    <div className={`de-round-head ${isFinal ? "is-final" : ""}`}>
      <div className="de-round-name" style={isFinal ? {color: tweaks.accent} : null}>{label}</div>
      <div className={`de-round-sub ${hasDrop ? "is-drop" : ""}`}>{sub}</div>
    </div>
    <div className="de-round-matches">
      {matches.map(m => (
        <DEMatch key={m.id} match={m} tweaks={tweaks} tournament={tournament} isFinal={isFinal}/>
      ))}
    </div>
  </div>
);

const DEMatch = ({ match, tweaks, tournament, isFinal }) => {
  const { teamA, teamB, scoreA, scoreB, winner, status, isBye, bracket, round, matchNum, time, id } = match;
  const isLive = status === "live";
  const isDone = status === "completed";
  const isPending = status === "pending";
  const isByeMatch = status === "bye";

  const matchCode = bracket === "gf" ? "GF" :
                    `${bracket.toUpperCase()}.R${round}.${matchNum}`;
  const bo = bracket === "gf"
    ? (tournament.gfBestOf || 5)
    : bracket === "lb"
      ? (tournament.lbBestOf || 1)
      : (tournament.wbBestOf || 3);

  return (
    <div
      className={`dem ${status} ${isFinal ? "is-final" : ""} ${isByeMatch ? "is-bye" : ""}`}
      style={isLive ? {borderColor: tweaks.accent} : (isFinal && !isByeMatch ? {borderColor: tweaks.accent} : null)}
    >
      {isFinal && !isByeMatch && (
        <>
          <span className="dem-corner dem-corner-tl" style={{borderColor: tweaks.accent}}/>
          <span className="dem-corner dem-corner-br" style={{borderColor: tweaks.accent}}/>
        </>
      )}
      <div className="dem-head">
        <span className="dem-id">{matchCode}</span>
        {!isByeMatch && <span className="dem-bo" style={{color: tweaks.accent, borderColor: "var(--line-2)"}}>BO{bo}</span>}
        {isLive && <span className="dem-live" style={{color: tweaks.accent}}><span className="pulse-dot" style={{background: tweaks.accent}}/>LIVE</span>}
        {isDone && <span className="dem-done">✓</span>}
        {isPending && <span className="dem-time">{time}</span>}
        {isByeMatch && <span className="dem-bye-tag">BYE</span>}
      </div>
      <DETeam team={teamA} score={scoreA} isWinner={winner === "A"} isLoser={!isByeMatch && winner === "B"} accent={tweaks.accent} type={tournament.type}/>
      <DETeam team={teamB} score={scoreB} isWinner={winner === "B"} isLoser={!isByeMatch && winner === "A"} accent={tweaks.accent} type={tournament.type}/>
      {isLive && (
        <div className="dem-live-bar" style={{borderColor: tweaks.accent}}>
          <span style={{color: tweaks.accent}}>► STREAM</span>
          <span className="dem-watchers">{200 + (id.length * 73) % 1800} WATCHING</span>
        </div>
      )}
    </div>
  );
};

const DETeam = ({ team, score, isWinner, isLoser, accent, type }) => {
  if (!team) {
    return (
      <div className="dem-team tbd">
        <span className="dem-team-tbd">VENTER PÅ VINNER</span>
      </div>
    );
  }
  if (team.bye) {
    return (
      <div className="dem-team bye">
        <span className="dem-team-bye-tag">— BYE —</span>
      </div>
    );
  }
  return (
    <div className={`dem-team ${isWinner ? "winner" : ""} ${isLoser ? "loser" : ""}`}>
      <span className="dem-seed">{String(team.seed).padStart(2,"0")}</span>
      <span className="dem-tag" style={isWinner ? {borderColor: accent, color: accent} : null}>{team.tag}</span>
      <span className="dem-name">{team.name}</span>
      <span className="dem-score" style={isWinner ? {color: accent} : null}>{score}</span>
      {isWinner && <span className="dem-winner-bar" style={{background: accent}}/>}
    </div>
  );
};

// ===================================================================
// KILLRACE LEADERBOARD VIEW (no bracket — cumulative kills)
// ===================================================================

const KillraceLeaderboard = ({ tweaks, tournament, teams = [], loading = false }) => {
  if (loading) return <div style={{padding:"3rem", color:"var(--text-faint)", textAlign:"center"}}>Laster leaderboard…</div>;
  if (teams.length === 0) return (
    <div style={{padding:"3rem", color:"var(--text-faint)", textAlign:"center", border:"1px solid var(--line)", margin:"1.5rem"}}>
      Ingen lag registrert ennå.
    </div>
  );
  const ranked = [...teams].sort((a, b) => (b.wsow_total || 0) - (a.wsow_total || 0));
  const maps = tournament.maps || [];
  const mapsPlayed = 0;
  const mapsLive = 0;

  return (
    <div className="kr-wrap">
      {/* Map strip */}
      <div className="kr-mapstrip">
        {maps.map((m, i) => (
          <div key={i} className={`kr-mapcell ${m.status}`} style={m.status === "live" ? {borderColor: tweaks.accent} : null}>
            <div className="kr-mapcell-head">
              <span className="kr-mapidx">M{m.idx}</span>
              {m.status === "completed" && <span className="kr-mapstat done">✓ FERDIG</span>}
              {m.status === "live" && <span className="kr-mapstat live" style={{color: tweaks.accent}}><span className="pulse-dot" style={{background: tweaks.accent}}/>LIVE</span>}
              {m.status === "pending" && <span className="kr-mapstat pending">{m.time}</span>}
            </div>
            <div className="kr-mapname">{m.map}</div>
            <div className="kr-mapsub">12 MIN · 2v2 NO BUY BACK</div>
          </div>
        ))}
      </div>

      {/* Top 3 podium */}
      <div className="kr-podium">
        {[ranked[1], ranked[0], ranked[2]].map((t, i) => {
          if (!t) return null;
          const place = i === 0 ? 2 : i === 1 ? 1 : 3;
          return (
            <div key={t.tag} className={`kr-pod-cell place-${place}`} style={place === 1 ? {borderColor: tweaks.accent} : null}>
              <div className="kr-pod-place" style={place === 1 ? {color: tweaks.accent} : null}>
                {place === 1 ? "1ST" : place === 2 ? "2ND" : "3RD"}
              </div>
              <div className="kr-pod-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.tag}</div>
              <div className="kr-pod-name">{t.name}</div>
              <div className="kr-pod-players">{t.p1} <span style={{color: tweaks.accent}}>+</span> {t.p2}</div>
              <div className="kr-pod-kills" style={{color: tweaks.accent}}>{t.total}<span> KILLS</span></div>
              <div className="kr-pod-dmg">{t.damage.toLocaleString()} damage</div>
            </div>
          );
        })}
      </div>

      {/* Leaderboard table */}
      <div className="panel">
        <SectionHeader
          code="A"
          title="LEADERBOARD"
          subtitle={`Kumulative kills etter ${mapsPlayed} av ${maps.length} maps · tie-breaker: damage`}
          accent={tweaks.accent}
          right={<span style={{fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--text-faint)"}}>SISTE OPPDATERT 20:14</span>}
        />
        <table className="leaderboard kr-table">
          <thead>
            <tr>
              <th style={{width: 56}}>POS</th>
              <th>DUO</th>
              <th>SPILLERE</th>
              {maps.map((m, i) => (
                <th key={i} style={{width: 70, textAlign: "right"}} className="kr-th-map">
                  <div>M{m.idx}</div>
                  <div className="kr-th-mapname">{m.map.slice(0,4).toUpperCase()}</div>
                </th>
              ))}
              <th style={{width: 90, textAlign: "right"}}>DAMAGE</th>
              <th style={{width: 90, textAlign: "right"}}>TOTAL</th>
            </tr>
          </thead>
          <tbody>
            {ranked.map((t, i) => {
              const pos = i + 1;
              const isPodium = pos <= 3;
              const isPaid = pos <= 3;
              return (
                <tr key={t.tag} className={`${isPodium ? "kr-podium-row" : ""}`}>
                  <td>
                    <div className="pos-cell">
                      <span className="pos-num" style={isPaid ? {color: tweaks.accent} : null}>{String(pos).padStart(2,"0")}</span>
                      {isPaid && <span className="pos-tick" style={{background: tweaks.accent}}/>}
                    </div>
                  </td>
                  <td>
                    <div className="team-cell">
                      <div className="team-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.tag}</div>
                      <div className="team-name">{t.name}</div>
                    </div>
                  </td>
                  <td className="mono kr-players">{t.p1} <span style={{color: tweaks.accent}}>+</span> {t.p2}</td>
                  {t.maps.map((m, mi) => (
                    <td key={mi} className="num kr-cell" style={{textAlign: "right"}}>
                      {m.kills === null
                        ? <span className="kr-pending">—</span>
                        : <span>{m.kills}</span>}
                    </td>
                  ))}
                  <td className="num kr-cell" style={{textAlign: "right", color: "var(--text-dim)", fontSize: 12}}>
                    {t.damage.toLocaleString()}
                  </td>
                  <td className="num big kr-total" style={{textAlign: "right", color: tweaks.accent}}>
                    {t.total}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="zone-legend">
          <span><span className="zone-dot promo" style={{background: tweaks.accent}}/> PREMIEPLASS (TOP 3)</span>
          <span>● TIE-BREAKER: HØYESTE DAMAGE</span>
        </div>
      </div>

      {/* Footer */}
      <div className="bracket-footer">
        <div className="bf-stat"><span>MAPS SPILT</span><b>{mapsPlayed}/{maps.length}</b></div>
        <div className="bf-stat"><span>LAG</span><b>{teams.length}</b></div>
        <div className="bf-stat"><span>TOTALE KILLS</span><b>{ranked.reduce((s,t)=>s+t.total,0)}</b></div>
        <div className="bf-stat"><span>LIVE NÅ</span><b style={{color: tweaks.accent}}>● {mapsLive} MAP</b></div>
        <div className="bf-stat"><span>FORMAT</span><b>2v2 KILLRACE</b></div>
      </div>
    </div>
  );
};

// ===================================================================
// KILLRACE MAP-BY-MAP DETAIL VIEW
// ===================================================================

const KillraceMapByMap = ({ tweaks, tournament, matches = [] }) => {
  const maps = tournament.maps || [];
  return (
    <div className="kr-maps-detail">
      {maps.map((m, mi) => {
        // Per-map ranking
        const ranked = [...results].map(t => ({
          ...t,
          mapKills: t.maps[mi].kills,
          mapDamage: t.maps[mi].damage,
          status: t.maps[mi].status,
        })).sort((a,b) => (b.mapKills || 0) - (a.mapKills || 0));
        const totalKills = ranked.reduce((s,t)=>s+(t.mapKills||0), 0);
        return (
          <div className="panel" key={mi}>
            <SectionHeader
              code={`M${m.idx}`}
              title={`MAP ${m.idx} · ${m.map.toUpperCase()}`}
              subtitle={`12 min lobby · 2v2 No Buy Back · ${m.status === "pending" ? `Starter ${m.time}` : `${totalKills} total kills`}`}
              accent={tweaks.accent}
              right={
                m.status === "live"
                  ? <span style={{color: tweaks.accent, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em"}}><span className="pulse-dot" style={{background: tweaks.accent, marginRight: 6}}/>LIVE</span>
                  : m.status === "completed"
                    ? <span style={{color: "var(--ok)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em"}}>✓ FERDIG</span>
                    : <span style={{color: "var(--text-faint)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em"}}>VENTER · {m.time}</span>
              }
            />
            {m.status === "pending" ? (
              <div className="kr-pending-block">
                <span>Lobby starter {m.time} · {m.map}</span>
              </div>
            ) : (
              <table className="leaderboard kr-table-compact">
                <thead>
                  <tr>
                    <th style={{width: 56}}>POS</th>
                    <th>DUO</th>
                    <th>SPILLERE</th>
                    <th style={{width: 100, textAlign: "right"}}>DAMAGE</th>
                    <th style={{width: 90, textAlign: "right"}}>KILLS</th>
                  </tr>
                </thead>
                <tbody>
                  {ranked.slice(0, 6).map((t, i) => (
                    <tr key={t.tag} className={i < 3 ? "kr-podium-row" : ""}>
                      <td><span className="pos-num" style={i < 3 ? {color: tweaks.accent} : null}>{String(i+1).padStart(2,"0")}</span></td>
                      <td>
                        <div className="team-cell">
                          <div className="team-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.tag}</div>
                          <div className="team-name">{t.name}</div>
                        </div>
                      </td>
                      <td className="mono kr-players">{t.p1} + {t.p2}</td>
                      <td className="num" style={{textAlign: "right", color: "var(--text-dim)"}}>{t.mapDamage?.toLocaleString()}</td>
                      <td className="num big" style={{textAlign: "right", color: tweaks.accent}}>{t.mapKills}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        );
      })}
    </div>
  );
};

const TeamsView = ({ tweaks, tournament, teams = [], loading = false }) => {
  const bracketSize = _nextPow2(teams.length || 2);
  const byeCount = bracketSize - teams.length;
  if (loading) return <div style={{padding:"3rem", color:"var(--text-faint)", textAlign:"center"}}>Laster lag…</div>;
  return (
    <div className="panel">
      <SectionHeader
        code="A"
        title="PÅMELDTE LAG"
        subtitle={`${teams.length} lag · ${bracketSize}-lag bracket · ${byeCount} BYE-plasser`}
        accent={tweaks.accent}
      />
      {teams.length === 0 ? (
        <div style={{padding:"2rem", color:"var(--text-faint)", textAlign:"center"}}>
          Ingen lag godkjent ennå. Admin: godkjenn lag-søknader i admin-panelet.
        </div>
      ) : (
        <table className="leaderboard duos-table">
          <thead>
            <tr>
              <th style={{width: 60}}>SEED</th>
              <th>LAG</th>
              <th>KAPTEIN</th>
              <th>ROSTER</th>
              <th style={{width: 90}}>STATUS</th>
            </tr>
          </thead>
          <tbody>
            {teams.map((t, i) => {
              const roster = Array.isArray(t.roster) ? t.roster : [];
              return (
                <tr key={t.id}>
                  <td><span className="seed-pill" style={{borderColor: tweaks.accent, color: tweaks.accent}}>#{String(t.seed || i+1).padStart(2,"0")}</span></td>
                  <td>
                    <div className="team-cell">
                      <div className="team-tag" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.team_tag || "—"}</div>
                      <div className="team-name">{t.team_name}</div>
                    </div>
                  </td>
                  <td className="mono">{t.captain || "—"}</td>
                  <td className="mono" style={{fontSize:".75rem"}}>{roster.map(p => p.activisionId || p.displayName || p).join(" · ") || "—"}</td>
                  <td><span className={`badge-${t.status === "active" ? "ok" : "out"}`}>{(t.status||"active").toUpperCase()}</span></td>
                </tr>
              );
            })}
            {Array.from({length: byeCount}).map((_, i) => (
              <tr key={`bye-${i}`} className="bye-row">
                <td><span className="seed-pill bye">#{String(teams.length + i + 1).padStart(2,"0")}</span></td>
                <td><div className="team-cell"><div className="team-tag bye">—</div><div className="team-name bye">BYE-PLASS</div></div></td>
                <td colSpan={2} className="mono bye">— ingen påmeldt · høyest-seedet lag avanserer automatisk —</td>
                <td><span className="badge-out">BYE</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

const RulesView = ({ tweaks, tournament }) => {
  const isBracket = tournament.type === "bracket" || tournament.type === "2v2";
  return (
    <div className="rules-stack">
      {/* Format card */}
      <div className="panel">
        <SectionHeader code="A" title="FORMAT" accent={tweaks.accent}/>
        {isBracket ? (
          <ul className="rules-list">
            <li><b>Double elimination</b> — Winners Bracket + Losers Bracket. Tap én gang i WB → drop til LB. Tap én gang i LB → ute.</li>
            <li><b>Winners Bracket:</b> Lag med flest kombinerte kills over alle maps avanserer.</li>
            <li><b>Losers Bracket:</b> Andre sjanse — tap én gang til = ute.</li>
            <li><b>Grand Final:</b> LB-vinner må slå WB-vinner to ganger (bracket reset).</li>
            <li><b>Map:</b> {(tournament.maps||[]).join(", ")||"—"} · {(tournament.team_size||"trios").toUpperCase()}</li>
            <li><b>Seeding:</b> Etter registreringsrekkefølge. Ved BYE: tidligst påmeldt avanserer.</li>
          </ul>
        ) : (
          <ul className="rules-list">
            <li><b>Killrace · {tournament.games || 5} games</b> — alle lag spiller parallelt</li>
            <li><b>Kills × Placement multiplier</b> — kills akkumuleres på tvers av alle maps</li>
            <li><b>Map-rotasjon:</b> {(tournament.maps||[]).join(" → ")||"—"}</li>
            <li><b>Tie-breaker:</b> høyest total damage</li>
          </ul>
        )}
      </div>

      {/* Match conduct */}
      <div className="panel">
        <SectionHeader code="B" title="MATCH-AVVIKLING" accent={tweaks.accent}/>
        <ul className="rules-list">
          <li><b>Lobby-host:</b> Høyest seed hoster map 1. Lav seed hoster map 2. Lag med flest kills i map 2 hoster map 3.</li>
          <li><b>Finn match:</b> Alle 4 spillere joiner samme lobby og searcher squad-game.</li>
          <li><b>Win-condition:</b> Lag med flest totale kills over spilte maps avanserer.</li>
          <li><b>Tie-breaker:</b> Mest combined damage. Ved fortsatt tie: ny map med kill-carryover.</li>
          <li><b>Kills etter match avsluttet teller ikke.</b> Når siste motspiller er død, slutter telling.</li>
          <li><b>Reviver lagkamerat er tillatt.</b> Gulag-kills teller mot total.</li>
          <li><b>Default starttid R1:</b> {tournament.start_date?.slice(11,16)||"—"} CET. Senere runder: dynamisk basert på forrige runde-rapport.</li>
          <li><b>No-show:</b> 15 min etter scheduled start → forfeit. Lagene må være klare når motstander er ferdig.</li>
        </ul>
      </div>

      {/* Jailbreak + game events */}
      <div className="panel">
        <SectionHeader code="C" title="JAILBREAK + EVENTS" accent={tweaks.accent}/>
        <ul className="rules-list">
          <li><b>Jailbreak / Resurgence event når begge i duo er døde:</b> Spiller MÅ kille seg selv umiddelbart (åpne fallskjerm + kutt linja).</li>
          <li>Forfeit av alle kills på map'et hvis spiller fortsetter etter Jailbreak når både du og partner var fully dead.</li>
          <li>Hvis kun én av duo'en er død (partner lever), eller event skjer i Gulag → fair game, ingen straff.</li>
          <li><b>Choppers er tillatt</b> — bruk av gunner-seter er IKKE tillatt.</li>
          <li><b>Griefing:</b> sprenge okkupert kjøretøy = forfeit av alle kills på map'et. Tomme kjøretøy er fair game.</li>
        </ul>
      </div>

      {/* Tech + streaming */}
      <div className="panel">
        <SectionHeader code="D" title="TEKNISK + STREAMING" accent={tweaks.accent}/>
        <ul className="rules-list">
          <li><b>Stream-krav:</b> Alle PC-spillere MÅ streame med audio. Console: minst én pr. duo streamer.</li>
          <li><b>VOD-arkiv:</b> Stream må være tilgjengelig i 48t etter turnering for review (Twitch VODs enabled).</li>
          <li><b>30-sek delay anbefales</b> for å unngå stream sniping. Restart-krav nektes med mindre delay er aktiv.</li>
          <li><b>Lag-regel:</b> 10 sek etter landing kan begge i duo'en leave ved lag (med proof). Etter 10 sek / etter skade tatt → match står.</li>
          <li><b>Diskonnekt 30+ sek etter landing:</b> kan replayes ved admin-discretion med valid proof.</li>
          <li><b>VPN forbudt</b> · Mistanke → diskvalifisering.</li>
          <li><b>Activision ID:</b> Begge spillere må linke verifisert ID med #-nummer før påmelding.</li>
        </ul>
      </div>

      {/* Anti-cheat + integrity */}
      <div className="panel">
        <SectionHeader code="E" title="INTEGRITET + ANTI-CHEAT" accent={tweaks.accent}/>
        <ul className="rules-list">
          <li><b>Zero tolerance for cheating.</b> Cronus / mod packs / scripts = umiddelbar DQ + ban fra alle fremtidige WZN-turneringer.</li>
          <li><b>Shared accounts forbudt.</b> Spill kun på din egen primary account.</li>
          <li><b>Account-krav:</b> minst 100 spilte Warzone-kamper. Nye/mistenkelige kontoer kan bli avvist.</li>
          <li><b>Stream-snipe forbudt.</b> Brudd → DQ.</li>
          <li><b>Teaming med andre lag forbudt.</b> Eneste interaksjon er kill / die.</li>
          <li><b>Same duo hele turneringen</b> — kan ikke bytte teammate underveis.</li>
          <li>Admin har siste ord ved disputter. Argumentering = ejection.</li>
        </ul>
      </div>

      {/* Prize */}
      <div className="panel prize-panel">
        <SectionHeader code="F" title="PREMIEPOTT" accent={tweaks.accent}/>
        <table className="prize-table">
          {tournament.prizeSplit?.map(([k, v]) => (
            <tr key={k}><td>{k}</td><td style={{color: tweaks.accent}}><b>{v} NOK</b></td></tr>
          ))}
          <tr><td>MVP (mest kills total)</td><td><b>WZN Hoodie</b></td></tr>
          <tr><td>Utbetaling</td><td><b>Vipps · innen 72t</b></td></tr>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, { BracketScreen });