/* Lupus — vista TV */
body.tv { overflow: hidden; }
.tv-app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; padding: 22px 30px; gap: 14px; }

/* transizione giorno/notte */
body.tv { transition: background 1.2s ease; }
body.tv.is-day {
  background:
    radial-gradient(1000px 600px at 80% -10%, #ff9d5c66 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 0%, #ffd76b33 0%, transparent 55%),
    #232b5e;
}
body.tv.is-day .sky .star { opacity: 0.12; }
body.tv.is-day .sky .moon {
  background: radial-gradient(circle at 35% 35%, #fffde7, #ffd54f 55%, #ffb300);
  box-shadow: 0 0 70px rgba(255, 200, 60, 0.75);
}

/* la luna non deve coprire header e timer */
body.tv .sky .moon { top: 88px; right: 46px; }

/* header */
.tv-head { display: flex; align-items: center; gap: 18px; }
.tv-head .brand { font-size: 1.5rem; }
.tv-head .village { font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.tv-head .spacer { flex: 1; }
.tv-head .pill { font-size: 1.05rem; padding: 6px 16px; }
.tv-head .timer { font-size: 2rem; }

/* fascia fase */
.tv-phase { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px; }
.tv-phase .pe { font-size: 2.6rem; }
.tv-phase .pl { font-size: 2rem; font-weight: 700; }

/* narrazione */
.tv-story { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 0 6vw; min-height: 0; }
.tv-story .line {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.5; font-weight: 500;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.tv-story .line.prev { font-size: clamp(0.95rem, 1.6vw, 1.3rem); color: var(--muted); font-weight: 400; }
.tv-story .caret { display: inline-block; width: 3px; height: 1em; background: var(--accent); margin-left: 2px; vertical-align: -0.15em; animation: pulse 0.9s infinite; }

/* giocatori */
.tv-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-bottom: 4px; }
.tv-pl { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px; position: relative; transition: opacity 0.4s; }
.tv-pl .avatar { width: 56px; height: 56px; font-size: 30px; }
.tv-pl .name { font-size: 0.95rem; font-weight: 600; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-pl .sub { font-size: 0.78rem; color: var(--muted); min-height: 1em; }
.tv-pl.dead .avatar { filter: grayscale(1) brightness(0.55); }
.tv-pl.dead .name { text-decoration: line-through; color: var(--muted); }
.tv-pl .grave { position: absolute; top: -8px; right: 12px; font-size: 1.3rem; }
.tv-pl .votes-badge {
  position: absolute; top: -10px; left: 10px; min-width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent); color: #3a2410; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; padding: 0 7px; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.tv-pl.acked .sub { color: var(--village); }

/* lobby TV */
.tv-lobby { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6vw; flex-wrap: wrap; }
.tv-lobby .qr-big { background: #fff; padding: 16px; border-radius: 20px; }
.tv-lobby .join-info { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.tv-lobby .join-info .code { font-size: 4.5rem; font-weight: 700; letter-spacing: 16px; color: var(--accent); }
.tv-lobby .comp-chips { justify-content: flex-start; }

/* fine partita */
.tv-end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.tv-end .we { font-size: 6rem; }
.tv-end h1 { font-size: 3.2rem; margin: 0; }
.tv-end .roles-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 80vw; }

/* banner evento (morte/salvataggio) */
.tv-banner {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 200;
  background: var(--bg-2); border: 2px solid var(--accent); border-radius: 22px; padding: 22px 34px;
  font-size: 1.7rem; font-weight: 600; text-align: center; box-shadow: var(--shadow); max-width: 76vw;
}
.tv-controls { position: fixed; right: 14px; bottom: 12px; z-index: 300; opacity: 0.35; }
.tv-controls:hover { opacity: 1; }

.tv-setup { position: relative; z-index: 2; max-width: 460px; margin: 18vh auto; }