/* Fernseher / Bühne: Kreis in der Mitte, Spielerliste rechts. */
body.tv { overflow: hidden; background: radial-gradient(ellipse 50% 65% at 42% 52%, rgba(255, 196, 100, .36), transparent 70%),
  radial-gradient(ellipse at 45% 50%, transparent 35%, rgba(12, 5, 0, .8) 100%), var(--holz); font-size: clamp(14px, 1.1vw + .6vh, 30px); }

.tv-rahmen {
  height: 100vh; height: 100dvh; padding: 1.4vmin 2vmin;
  display: grid; gap: 1vmin 2vmin;
  grid-template: "kopf kopf" auto "buehne logbuch" 1fr / 1fr minmax(10em, 19%);
}
.kopf { grid-area: kopf; display: flex; align-items: baseline; gap: 1.2em; border-bottom: 1px solid var(--linie); padding-bottom: .3em; }
.marke { font-family: var(--titel); font-weight: 700; font-size: 1.7em; letter-spacing: .02em; }
.marke::first-letter { color: var(--akzent); }
.runde { color: var(--leise); flex: 1; }
.raumecke b { font-family: var(--titel); letter-spacing: .15em; font-size: 1.2em; }

.buehne { --rand: .035; grid-area: buehne; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.logbuch { grid-area: logbuch; min-height: 0; overflow: auto; border-left: 1px solid var(--linie); padding-left: 1.2em; }
.logbuch h2 { font-size: 1.2em; color: var(--leise); margin-bottom: .4em; text-transform: uppercase; letter-spacing: .08em; }
.spieler { list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; }
.spieler li { position: relative; display: flex; align-items: center; gap: .55em; padding: .4em 0; border-bottom: 1px solid var(--grund-hell); font-size: 1.1em; }
.spieler li.weg { opacity: .45; }
.spieler .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler .stand { font-family: var(--titel); font-weight: 700; font-size: 1.25em; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.spieler .minus { position: absolute; right: 3.2em; color: var(--rot); font-family: var(--titel); font-weight: 700; animation: minus 1.8s both; }
.spieler .plus { color: var(--gruen); font-family: var(--titel); font-weight: 700; }
.spieler li.sieger .name { color: var(--akzent); }
@keyframes minus { 0% { opacity: 0; transform: translateY(.4em) scale(1.5); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-.6em); } }

/* Kreis: quadratische Karte, rund ausgeschnitten (Größe setzt tv.js). Außen ein goldener Leuchtring, darum ein langsam
   kreisender Lichtschweif in dem Rand, den --rand freihält. */
.kreisbox { position: relative; flex: none; }
.karte { position: absolute; inset: 0; clip-path: circle(50% at 50% 50%); }
.maske { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 .45vmin #fff4d6, 0 0 0 1vmin rgba(255, 204, 51, .95), 0 0 5vmin 1.5vmin rgba(255, 190, 60, .55),
    0 3vmin 7vmin rgba(0, 0, 0, .55), inset 0 0 6vmin rgba(120, 70, 20, .35); }
.rand { position: absolute; pointer-events: none; border-radius: 50%; inset: calc(var(--rand) / (1 - 2 * var(--rand)) * -100%);
  background: conic-gradient(transparent 0 8%, rgba(255, 226, 140, .9) 14%, transparent 22% 40%, rgba(255, 210, 110, .7) 47%,
    transparent 55% 72%, rgba(255, 236, 170, .85) 80%, transparent 88%);
  mask: radial-gradient(closest-side, transparent calc((1 - 2 * var(--rand)) * 100% + 1%), #000 calc((1 - 2 * var(--rand)) * 100% + 3%), transparent 99%);
  filter: blur(2px); animation: drehen 14s linear infinite; }
@keyframes drehen { to { transform: rotate(1turn); } }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titel); font-weight: 700;
  font-size: 9em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); pointer-events: none; }
.countdown.tick { animation: tick .9s both; }
@keyframes tick { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; transform: none; } }

/* Anzeige links neben dem Kreis, feste Breite (tv.js hält rechts gleich viel frei) */
.hud { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 7.5em; display: flex; flex-direction: column;
  line-height: 1.15; font-variant-numeric: tabular-nums; z-index: 2; white-space: nowrap; }
.hud b { font-family: var(--titel); font-size: 2.3em; line-height: 1; }
.hud [data-t] { color: var(--leise); margin-bottom: 1.2em; }
.hud #hudpunkte { color: var(--akzent); font-size: 1.15em; }
.hud #hudpunkte b { display: block; font-size: 2.6em; }
.banner { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 3; text-align: center; max-width: 90%;
  background: var(--papier); color: var(--tinte); border-radius: .3em; padding: .7em 1.4em; font-size: 1.25em;
  box-shadow: 0 8px 30px rgba(20, 8, 0, .55); animation: auf .5s both; }
.banner .ort { font-family: var(--titel); font-weight: 700; font-size: 1.5em; color: var(--siegel); }
@keyframes auf { from { opacity: 0; transform: translateY(.6em); } }
.osm { position: absolute; right: 0; bottom: 0; z-index: 2; }

.inhalt { position: relative; z-index: 2; }
.inhalt:empty { display: none; }

/* Marken auf der Karte (Auflösung) */
.startmarke { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.startmarke i { width: 22px; height: 22px; border-radius: 50%; background: #1d3557; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.startmarke span { margin-top: 4px; background: #fff; color: #14161f; font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 16px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }

/* Lobby, Ende */
.lobby, .endstand { display: flex; flex-direction: column; align-items: center; gap: 1.5em; max-width: 42em; text-align: center; }
.titelkarte h1 { font-size: 3.6em; line-height: 1; }
.titelkarte h1::first-letter { color: var(--akzent); }
.titelkarte p { margin: .6em 0 0; font-size: 1.05em; line-height: 1.45; color: var(--leise); }
.beitritt { display: flex; align-items: center; gap: 1.4em; text-align: left; }
.beitritt p { margin: .1em 0; }
.qr { width: 9em; height: 9em; padding: .3em; background: #fff; border-radius: .4em; }
.adresse { font-weight: 600; font-size: 1.1em; word-break: break-all; }
.code { font-family: var(--titel); font-weight: 700; font-size: 2.6em; letter-spacing: .25em; line-height: 1; color: var(--siegel); }
.einstellung { color: var(--leise); margin: 0; }
.beitritt { rotate: -1deg; }
.beitritt .knopf { color: var(--tinte); background: transparent; border-color: rgba(59, 42, 28, .35); }
.podest { list-style: none; padding: 0; margin: 0; display: grid; gap: .4em; min-width: 20em; }
.podest li { display: flex; align-items: center; gap: .7em; font-size: 1.3em; padding: .4em .9em; border-radius: .3em; background: var(--papier); color: var(--tinte); box-shadow: 0 .3em .9em rgba(20, 8, 0, .4); }
.podest li.platz1 { background: var(--akzent); color: #1a1400; font-size: 1.6em; box-shadow: 0 0 2em rgba(255, 196, 80, .45), 0 .3em .9em rgba(20, 8, 0, .4); }
.podest .rang { font-family: var(--titel); font-weight: 700; width: 1.6em; }
.podest .name { flex: 1; text-align: left; }
.podest .stand { font-family: var(--titel); font-weight: 700; }

/* Eingang */
.eingang { position: fixed; inset: 0; z-index: 10; background: var(--tisch); background-color: var(--grund); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6em; padding: 2em; text-align: center; transition: opacity .4s, visibility .4s; }
.eingang.weg { opacity: 0; visibility: hidden; }
.eingang-titel h1 { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; }
.eingang-titel h1::first-letter { color: var(--akzent); }
.eingang-titel p { color: var(--leise); font-size: 1.2rem; margin: .5em 0 0; }
.heimweg { position: absolute; left: 1.2em; top: 1em; color: var(--leise); text-decoration: none; }
.eingang-sprache { position: absolute; right: 1.2em; top: 1em; }
.wahl { display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; }
.wahlkarte { font: inherit; color: var(--text); text-decoration: none; cursor: pointer; width: 15em; padding: 1.2em; border-radius: 1em;
  border: 0; background: var(--papier); color: var(--tinte); box-shadow: 0 .6em 1.4em rgba(20, 8, 0, .5);
  display: flex; flex-direction: column; gap: .5em; text-align: left; transition: transform .15s, box-shadow .15s; }
.wahlkarte:hover, .wahlkarte:focus-visible { transform: translateY(-.25em); box-shadow: 0 0 0 3px var(--akzent), 0 .9em 1.8em rgba(20, 8, 0, .55); outline: 0; }
.wahlkarte b { font-family: var(--titel); font-size: 1.6rem; }
.wahlkarte span { color: #6b5038; line-height: 1.35; }
.knopf.gross { font-size: 1.6rem; }
.tischwahl { display: flex; align-items: center; gap: .6em; color: var(--leise); }
.tischwahl .feld { width: 6em; text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.eingangtext { color: var(--leise); max-width: 30em; }
.zurueck { color: var(--leise); }

/* Online: Bühne links, eigenes Pult (Karte) rechts */
body.kombi .tv-rahmen { position: fixed; left: 0; top: 0; bottom: 0; right: 40%; grid-template-columns: 1fr minmax(8em, 24%); }
.pult { position: fixed; right: 0; top: 0; bottom: 0; width: 40%; border-left: 1px solid var(--linie); }
.pult iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  body.kombi .tv-rahmen { right: 0; bottom: 50%; }
  .pult { width: auto; left: 0; top: 50%; border-left: 0; border-top: 1px solid var(--linie); }
}

/* Tisch verlassen (nur Lobby und Endstand): zurück zur Auswahl */
.verlassen { align-self: center; color: inherit; opacity: .85; text-decoration: none; font-size: .9em; white-space: nowrap; }
.verlassen:hover { opacity: 1; }