/* =========================================================
   FERNSEHER-ERGAENZUNGEN (tv.html) – baut auf style.css auf
========================================================== */

/* Nabe ist auf dem Fernseher nur Deko */
.tv-mode .hub { cursor: default; }
.tv-mode .hub:hover { transform: translate(-50%, -50%); }
.tv-mode .hub.pressed { transform: translate(-50%, -50%) scale(0.92); }

/* Hinweis "Dreh das Rad am Tablet!" */
.tv-hint {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 6px;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-size: clamp(1.3rem, 4vw, 2rem);
  line-height: 1.05;
  color: #fff3c4;
  text-align: left;
  -webkit-text-stroke: 0.06em #3a1650;
  paint-order: stroke fill;
  text-shadow: 0 0 18px rgba(255, 140, 40, 0.75), 0 4px 0 #3a1650;
  animation: tvHintPulse 1.8s ease-in-out infinite;
}

.tv-hint-icon {
  font-size: 1.3em;
  animation: tvHintPoint 1.8s ease-in-out infinite;
}

@keyframes tvHintPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes tvHintPoint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.25em); }
}

@media (min-aspect-ratio: 4/3) {
  .tv-hint {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    font-size: max(1.4rem, 5vh);
    transform: translateY(-6vh);
    animation: none;
  }

  .tv-hint-text {
    display: inline-block;
    animation: tvHintPulse 1.8s ease-in-out infinite;
  }

  .tv-mode .status {
    transform: translateY(7vh);
  }
}

/* ---------- Werbevideo ---------- */
.promo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #000;
  visibility: hidden;
}

.promo.show { visibility: visible; }

.promo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Fledermaus-Auftritt (vor und nach dem Werbevideo) ---------- */
.clip-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 95;
  pointer-events: none;
  display: none;
}

.clip-intro.show { display: block; }

/* waehrend die grosse Fledermaus auftritt, ist die kleine hinter dem Rad "weg" */
.bat-rig { transition: opacity 0.35s ease; }
.tv-mode.intro-active .bat-rig { opacity: 0; }

/* ---------- Fledermaus-Uebergang ---------- */
.bat-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
  display: none;
}

.bat-transition.show { display: block; }

/* ---------- Start-Bildschirm ---------- */
.tv-start {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 20, 70, 0.92), rgba(8, 3, 14, 0.97));
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.tv-start.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tv-start-card {
  text-align: center;
  padding: 3vh 4vw;
  max-width: 90vw;
}

.tv-start-logo {
  width: min(60vw, 46vh);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 157, 61, 0.5));
}

.tv-start-btn {
  display: block;
  margin: 3vh auto 2vh;
  padding: 2.2vh 5vh;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-size: max(1.3rem, 4vh);
  color: #2a0d00;
  background: linear-gradient(180deg, var(--gold), var(--orange));
  box-shadow: 0 1vh 0 #b85c00, 0 2vh 4vh rgba(0, 0, 0, 0.5);
}

.tv-start-btn:active { transform: translateY(0.5vh); box-shadow: 0 0.5vh 0 #b85c00; }

.tv-start-sub,
.tv-start-link {
  margin: 0.6vh 0;
  color: var(--text-dim);
  font-size: max(0.95rem, 2.2vh);
  line-height: 1.4;
}

.tv-start-link { color: #ffd28a; }

/* Gewinnbildschirm auf dem TV: ohne Button (schliesst automatisch) */
.tv-mode .ws-close { display: none; }