/* =====================================================================
   TV-/Beamer-Modus: 16:9, kein Scrollen, lesbar aus 3 m.
   Alle Größen in vh/vw, damit es auf jedem Bildschirm "gleich" aussieht.
   ===================================================================== */

html,
body.tv {
  height: 100%;
  overflow: hidden;
}
body.tv {
  font-size: 2.2vh;
}
body.tv.hide-cursor {
  cursor: none;
}

.tv-grid {
  display: grid;
  /* minmax(0, …): Spalten richten sich nach dem Bildschirm, nie nach dem Inhalt (sonst drückt der Graph die Punkte weg) */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'head head'
    'score side'
    'bar bar';
  gap: 2vh 2.2vw;
  height: 100vh;
  height: 100dvh;
  padding: 2.2vh 2.4vw;
}

/* --- Kopf ---------------------------------------------------------- */
.tv-head {
  grid-area: head;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2vw;
}
.tv .logo-top {
  font-size: 1.9vh;
}
.tv .logo-main {
  font-size: 5.6vh;
}
.tv-event {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  text-align: right;
  font-size: 2.2vh;
  color: var(--text-dim);
}
.tv-event strong {
  font-size: 3.2vh;
  color: var(--text);
}
.tv .conn {
  font-size: 1.6vh;
  padding: 0.5vh 1vw;
}
.tv .conn i {
  width: 1.2vh;
  height: 1.2vh;
}

/* --- Punktestand ---------------------------------------------------- */
.tv-score {
  grid-area: score;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2vh;
  min-height: 0;
  /* Container Query: Die Duell-Anzeige skaliert nach der Breite DIESER Spalte,
     nicht nur nach der Bildschirmhöhe. min(vh, cqi) = was zuerst knapp wird. */
  container-type: inline-size;
}
.tv .duel-side {
  padding: 2.5vh 1.5cqi 2vh;
  border-top-width: 0.8vh;
}
.tv .duel-name {
  font-size: min(5vh, 4.2cqi);
}
.tv .duel-score {
  font-size: min(30vh, 24cqi);
  margin: 0;
}
.tv .duel-members {
  font-size: min(2.6vh, 2.3cqi);
}
.tv .duel-vs {
  font-size: min(6vh, 5cqi);
  padding: 0 1.5cqi;
  border-top-width: 0.8vh;
}
.tv .duel-bar {
  height: 1.6vh;
}
.tv .delta-pop {
  font-size: 7vh;
  right: 2vw;
  top: 1vh;
}

/* Rangliste: max. 8 Zeilen passen immer */
.tv .ranking {
  gap: 0.9vh;
}
.tv .rank-row {
  grid-template-columns: 7vh 7vh 1fr auto;
  gap: 1.4vw;
  padding: 0.9vh 1.6vw 0.9vh 0.8vw;
  border-left-width: 0.8vh;
}
.tv .rank-pos {
  font-size: 5vh;
}
.tv .avatar {
  width: 7vh;
  height: 7vh;
  font-size: 3.6vh;
}
.tv .rank-name strong {
  font-size: min(4vh, 3.6cqi);
}
.tv .rank-name small {
  font-size: 2.2vh;
}
.tv .rank-score {
  font-size: min(6.5vh, 6cqi);
}
.tv .badge {
  font-size: 1.6vh;
}
.tv .verdict {
  font-size: 3.8vh;
  padding: 1.4vh 2vw;
}

/* --- Rechte Spalte -------------------------------------------------- */
.tv-side {
  grid-area: side;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  min-height: 0;
}
.tv .now-card {
  padding: 3vh 2vw 2.6vh;
}
.tv .now-card.is-live::before {
  padding: 1.3vh;
  background-size: 2.6vh 2.6vh;
  background-position: -0.65vh -0.65vh;
}
@keyframes chase-tv {
  to { background-position: 1.95vh 1.95vh; }
}
.tv .now-card.is-live::before {
  animation-name: chase-tv;
}
.tv .now-kicker {
  font-size: 2.2vh;
}
.tv .live-dot {
  width: 1.6vh;
  height: 1.6vh;
}
.tv .now-title {
  font-size: 7vh;
  margin: 1vh 0 1.4vh;
}
.tv .stake-label,
.tv .stake-unit {
  font-size: 2.4vh;
}
.tv .stake-num {
  font-size: 10vh;
}
.tv .now-sub {
  font-size: 2.2vh;
}
.tv .stats {
  gap: 1vw;
}
.tv .stat {
  padding: 1.4vh 0.6vw 1.2vh;
}
.tv .stat-num {
  font-size: 6vh;
}
.tv .stat-label {
  font-size: 1.7vh;
}
.tv .chart-wrap {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 1.2vh 1vw 0.6vh;
}

/* --- Spielleiste unten (Signatur des TV-Modus) ------------------------ */
.tv-bar {
  grid-area: bar;
}
.gamebar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5vw;
}
.gamebar li {
  --c: var(--panel-solid);
  flex: 1 1 0;
  min-width: 0;
  padding: 1vh 0.6vw 0.9vh;
  text-align: center;
  background: var(--panel);
  border-bottom: 0.6vh solid var(--c);
  clip-path: polygon(0.8vh 0, 100% 0, calc(100% - 0.8vh) 100%, 0 100%);
}
.gamebar .gb-no {
  display: block;
  font-family: var(--font-display);
  font-size: 3.6vh;
  line-height: 1;
  color: var(--text-faint);
}
.gamebar .gb-name {
  display: block;
  font-size: 1.8vh;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
}
.gamebar .is-done {
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c) 45%, transparent)), var(--panel);
}
.gamebar .is-done .gb-no {
  color: var(--text);
}
.gamebar .is-live {
  --c: var(--live);
  background: linear-gradient(180deg, rgba(255, 45, 85, 0.45), rgba(255, 45, 85, 0.12));
  animation: livePulse 1.6s ease-in-out infinite;
}
.gamebar .is-live .gb-no,
.gamebar .is-live .gb-name {
  color: #fff;
}
@keyframes livePulse {
  50% { filter: brightness(1.35); }
}

/* Links am TV: nicht anklickbar, aber gut lesbar (Spieler tippen am Handy) */
.tv .link-buttons {
  margin-top: 1.4vh;
  gap: 0.8vh;
}
.tv .link-btn {
  min-height: 0;
  padding: 0.8vh 1.2vw;
}
/* Mit QR-Code: Code links, Text rechts; nebeneinander bei mehreren Links */
.tv .link-buttons.has-qr {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
}
.tv .has-qr .link-btn {
  gap: 1.2vw;
  padding: 1vh 1.4vw;
}
.tv .has-qr .link-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4vh;
}
.tv .qr {
  flex-shrink: 0;
  width: 15vh;
  height: 15vh;
  border-radius: 0.6vh;
  box-shadow: 0 0 0 0.4vh rgba(0, 0, 0, 0.25);
}
.tv .has-qr[data-count='2'] .qr {
  width: 12vh;
  height: 12vh;
}
.tv .has-qr[data-count='3'] .qr {
  width: 10vh;
  height: 10vh;
}
/* Ab 2 Links: Name unter den QR-Code statt daneben (sonst bricht er Buchstabe für Buchstabe um) */
.tv .has-qr:not([data-count='1']) .link-btn {
  flex-direction: column;
  justify-content: center;
  gap: 0.8vh;
  padding: 1.2vh 1vw 1vh;
}
.tv .has-qr:not([data-count='1']) .link-text {
  align-items: center;
  max-width: 100%;
}
.tv .has-qr:not([data-count='1']) .link-label,
.tv .has-qr:not([data-count='1']) .link-host {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  text-align: center;
}
.tv .has-qr:not([data-count='1']) .link-label {
  font-size: 2.3vh;
}
.tv .has-qr[data-count='3'] .link-host {
  display: none; /* zu eng – QR-Code und Name reichen */
}
.tv .link-label {
  font-size: 2.6vh;
}
.tv .link-host {
  font-size: 2.2vh;
  opacity: 0.85;
}
.gamebar .is-pool {
  opacity: 0.55;
  border-bottom-style: dashed;
}
.tv .td-name {
  font-size: 9vh;
}
.tv .td-team-name {
  font-size: 4vh;
}
.tv .td-member {
  font-size: 3.4vh;
}
.tv .draw-name {
  font-size: 14vh;
}

/* --- Vollbild-Button ---------------------------------------------- */
.fs-btn {
  position: fixed;
  right: 1.2vw;
  bottom: 13vh;
  z-index: 20;
  padding: 1vh 1.2vw;
  font-weight: 700;
  font-size: 2vh;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--panel-edge);
  cursor: pointer;
  opacity: 0.85;
}
.fs-btn:hover {
  opacity: 1;
  border-color: var(--gold);
}
.tv .celebration-name {
  font-size: 18vh;
}
.tv .celebration-kicker {
  font-size: 3.4vh;
}
.tv .celebration-points {
  font-size: 9vh;
}
.tv .toasts {
  bottom: 14vh;
  width: 50vw;
  font-size: 3vh;
}

/* Schmale Querformate (z. B. Browserfenster nicht maximiert): Punkte bekommen mehr Platz */
@media (max-aspect-ratio: 3/2) {
  .tv-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .tv .now-title {
    font-size: min(7vh, 4.4vw);
  }
}

/* Hochkant-Bildschirme: untereinander statt nebeneinander */
@media (max-aspect-ratio: 1/1) {
  .tv-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'head' 'score' 'side' 'bar';
  }
  /* Hochkant reicht die Höhe nicht für einen lesbaren Graphen */
  .tv .chart-wrap {
    display: none;
  }
  .tv .duel-score {
    font-size: min(16vh, 24cqi);
  }
}