:root {
  --bg: #0c1018;
  --panel: #161c28;
  --panel2: #1e2736;
  --line: #2c3a52;
  --txt: #eef3fb;
  --muted: #8aa0c0;
  --accent: #ffb31a;
  --win: #2bd47b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #000;
  color: var(--txt);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

/* Full-HD-Bühne: fix 1920x1080, per JS zentriert skaliert */
#scaler {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#stage {
  width: 1920px; height: 1080px;
  flex: none;          /* nicht vom Flex-Container schrumpfen lassen (sonst falsche Breite vor Transform) */
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, #131a28 0%, var(--bg) 60%);
  transform-origin: center center;
  overflow: hidden;
}

.view { position: absolute; inset: 0; display: none; }
.view.active { display: block; }

/* ---- Bild-View ---- */
#view-image { background: #000; }
/* Bild füllt die Fläche exakt (Breite + Höhe), kein Letterbox/Beschnitt – Grafiken passend bauen */
#img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* ---- Leer ---- */
#view-empty { display: none; align-items: center; justify-content: center; }
#view-empty.active { display: flex; }
.empty-msg { text-align: center; font-size: 40px; color: var(--muted); line-height: 1.5; }
.empty-msg span { font-size: 28px; }
.empty-msg b { color: var(--accent); }

/* ---- Turnierbaum (beidseitig, Finale in der Mitte) ---- */
:root {
  --tbg1: #2a5db0; --tbg2: #1c478f;
  --tbox: #16336f; --tbox-line: #2e5499; --tbox-win: #1d469a;
  --tyellow: #f6d200; --tred: #e2362a;
}
#view-bracket {
  padding: 28px 48px 36px;
  flex-direction: column;
  background: radial-gradient(140% 120% at 50% -10%, var(--tbg1) 0%, var(--tbg2) 70%);
  overflow: hidden;
}
#view-bracket.active { display: flex; }
/* Deko-Formen wie in der Vorlage */
#view-bracket::before {
  content: ''; position: absolute; top: -70px; right: -50px;
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--tyellow); z-index: 0;
}
#view-bracket::after {
  content: ''; position: absolute; bottom: -160px; left: -160px;
  width: 320px; height: 320px; background: var(--tred);
  transform: rotate(45deg); z-index: 0;
}

#t-header { position: relative; z-index: 2; text-align: center; margin-bottom: 18px; }
#t-title { font-size: 52px; font-weight: 800; letter-spacing: .5px; color: #fff; }
#t-champ { display: none; }

#bracket { position: relative; z-index: 1; flex: 1; min-height: 0; }

.connectors { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.connectors .conn { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.5; }

.bracket-row {
  position: relative; z-index: 1;
  display: flex; height: 100%;
  align-items: stretch; gap: 8px;
}
.round-col {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: space-around; align-items: center;
  min-width: 0;
}
.round-col.center { flex: 1.15; justify-content: center; }

.final-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.final-label {
  font-size: 24px; font-weight: 800; letter-spacing: 3px; color: #fff;
}
.champ-line { font-size: 26px; color: var(--tyellow); font-weight: 800; min-height: 30px; }
.champ-line b { color: #fff; }

.match {
  width: 200px; max-width: 100%;
  background: var(--tbox);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.round-col.center .match { width: 210px; }

.slot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-size: 23px; font-weight: 700; line-height: 1.05;
  color: #fff;
}
.slot + .slot { border-top: 2px solid var(--tbg2); }
.slot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .sc {
  flex: 0 0 auto; min-width: 26px; text-align: center;
  font-variant-numeric: tabular-nums;
  color: #bcd4f5; font-weight: 800;
}
.slot.empty .nm { color: #7e9bcb; font-style: italic; font-weight: 500; }
.slot.win { background: var(--tbox-win); box-shadow: inset 4px 0 0 var(--tyellow); }
.slot.win .sc { color: var(--tyellow); }
.slot.lose { opacity: .62; }

/* Verbindungs-Indikator */
#conn {
  position: fixed; right: 10px; bottom: 10px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--win); box-shadow: 0 0 8px var(--win);
  transition: .3s;
}
#conn.offline { background: #e0533d; box-shadow: 0 0 8px #e0533d; }