/* TV-Seiten (Podium + Liste). Alle Grössen in vh/vw, damit es auf jedem TV passt. */

.theme-salt {
  --bg: #000000;
  --bg-glow: rgba(31, 215, 101, 0.10);
  --card: #141414;
  --line: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --muted: #a3a3a3;
  --accent: #1fd765;
  --accent-deep: #058750;
  --on-accent: #000000;
}
.theme-talktalk {
  --bg: #2b1139;
  --bg-glow: rgba(187, 117, 229, 0.28);
  --card: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --muted: #d3bfe0;
  --accent: #face0a;
  --accent-deep: #662f88;
  --on-accent: #431b58;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.tv {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 50% 105%, var(--bg-glow), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Kopf ── */
.tv-head {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
  padding: 3.2vh 3.5vw 1.5vh;
}
.brand {
  font-size: 5.4vh;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand span { color: var(--accent); }
.head-mid { text-align: center; }
.head-mid h1 {
  font-size: 4.2vh;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-wrap: balance;
}
.head-mid .sub {
  margin-top: 0.6vh;
  font-size: 2.1vh;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rule {
  justify-self: end;
  padding: 1.1vh 1.4vw;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 2vh;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.rule strong { color: var(--accent); font-weight: 900; }

/* ── Fuss ── */
.tv-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 1.4vh 3.5vw 2.2vh;
  font-size: 1.7vh;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Avatar (Foto oder Initialen) ── */
.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--card);
  color: var(--muted);
  font-weight: 900;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════ PODIUM ═══════════════ */
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6vw;
  padding: 0 3.5vw;
}
.place {
  flex: 1 1 0;
  min-width: 0;
  max-width: 21vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.place .avatar {
  width: min(var(--av), 15vw);
  height: min(var(--av), 15vw);
  border: 0.5vh solid var(--line);
  font-size: calc(var(--av) * 0.34);
}
.place .name {
  width: 100%;
  margin-top: 1.4vh;
  font-size: 2.7vh;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.place .count {
  margin-top: 0.4vh;
  font-size: 5.2vh;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.place .count small {
  display: block;
  font-size: 1.5vh;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.place .prize {
  max-width: 100%;
  margin-top: 1vh;
  padding: 0.5vh 0.9vw;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.8vh;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place .bar {
  width: 100%;
  height: var(--bar);
  margin-top: 1.6vh;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 1.6vh 1.6vh 0 0;
  background: linear-gradient(180deg, var(--card), transparent);
  font-size: min(calc(var(--bar) * 0.62), 13vh);
  font-weight: 900;
  line-height: 1;
  color: var(--line);
  transform-origin: bottom;
}

.place.r1 { --av: 25vh; --bar: 27vh; }
.place.r2 { --av: 20vh; --bar: 21vh; }
.place.r3 { --av: 18vh; --bar: 16vh; }
.place.r4 { --av: 15vh; --bar: 12vh; }
.place.r5 { --av: 15vh; --bar: 9vh; }
.place.r6 { --av: 13vh; --bar: 7vh; }

.place.r1 .avatar { border-color: var(--accent); box-shadow: 0 0 9vh -1vh var(--accent); }
.place.r1 .name { font-size: 3.4vh; font-weight: 900; }
.place.r1 .count { font-size: 7vh; color: var(--accent); }
.place.r1 .bar {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-deep), transparent);
  color: var(--accent);
}

/* Platz noch frei */
.place.empty .avatar { border-style: dashed; background: transparent; }
.place.empty .name { font-weight: 600; color: var(--muted); }
.place.empty .hint { margin-top: 0.4vh; font-size: 1.7vh; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .place .bar { animation: grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--delay); }
  .place > :not(.bar) { animation: rise 0.6s ease-out both; animation-delay: calc(var(--delay) + 0.25s); }
  .row { animation: rise 0.45s ease-out both; animation-delay: var(--delay); }
}
@keyframes grow { from { transform: scaleY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(2vh); } }

/* ═══════════════ LISTE ═══════════════ */
.list {
  flex: 1;
  min-height: 0;
  --rh: min(11vh, calc(76vh / var(--rows)));
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), var(--rh));
  align-content: center;
  justify-content: center;
  column-gap: 1.6vw;
  padding: 0 3.5vw;
}
.list.cols-1 { grid-template-columns: minmax(0, 62vw); }

.row {
  height: calc(var(--rh) * 0.86);
  align-self: center;
  display: flex;
  align-items: center;
  gap: calc(var(--rh) * 0.22);
  padding: 0 calc(var(--rh) * 0.3) 0 calc(var(--rh) * 0.12);
  border: 1px solid transparent;
  border-left: calc(var(--rh) * 0.07) solid var(--line);
  border-radius: calc(var(--rh) * 0.2);
  background: var(--card);
}
.row .pos {
  width: calc(var(--rh) * 0.62);
  flex-shrink: 0;
  text-align: center;
  font-size: calc(var(--rh) * 0.38);
  font-weight: 900;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.row .avatar {
  width: calc(var(--rh) * 0.68);
  height: calc(var(--rh) * 0.68);
  font-size: calc(var(--rh) * 0.24);
  border: 1px solid var(--line);
}
.row .who { flex: 1; min-width: 0; }
.row .name {
  font-size: calc(var(--rh) * 0.3);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .meta {
  font-size: calc(var(--rh) * 0.18);
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .meta b { color: var(--accent); font-weight: 700; }
.row .cnt {
  flex-shrink: 0;
  font-size: calc(var(--rh) * 0.46);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.row.winner { border-color: var(--accent); border-left-color: var(--accent); }
.row.winner .pos, .row.winner .cnt { color: var(--accent); }

/* Niemand qualifiziert */
.nobody {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.5vh;
  padding: 0 10vw;
}
.nobody .big { font-size: 6vh; font-weight: 900; line-height: 1.1; text-wrap: balance; }
.nobody .big em { font-style: normal; color: var(--accent); }
.nobody .small { font-size: 2.4vh; color: var(--muted); }