/* ================================================================
   DOWNPOUR TV — the game in the middle, the room on both sides.
   Same tokens as styles.css; sized for a 1920x1080 screen read from a couch.
   ================================================================ */
body.tv { --col: min(100vw, calc(100vh * 420 / 740)); --side: calc((100vw - var(--col)) / 2); }
body.tv #app { max-width: var(--col); }
body.tv #tabbar, body.tv #btn-quit, body.tv #sum-ov { display: none !important; }
body.tv #btn-speed { pointer-events: none; }
[hidden] { display: none !important; }

.tv-side {
  position: fixed; top: 0; bottom: 0; width: var(--side);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2vh; padding: 3vh 2vw; text-align: center; color: var(--ink);
}
#tv-left { left: 0; }
#tv-right { right: 0; justify-content: flex-start; padding-top: 8vh; }
@media (max-aspect-ratio: 1/1) { .tv-side { display: none; } }

.tv-brand {
  font-family: var(--display); font-weight: 800; line-height: .88;
  font-size: 5.2vh; letter-spacing: .02em; color: var(--ink);
}
.tv-brand span { color: var(--gold); font-size: .55em; letter-spacing: .12em; }
.tv-brand.big { font-size: 9vh; }
.tv-eyebrow {
  font-family: var(--display); font-weight: 700; font-size: 2.2vh;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.tv-join { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; }
.tv-qr { background: #fff; padding: 1.2vh; border-radius: 1.6vh; line-height: 0; }
.tv-qr img, .tv-qr canvas { width: 20vh; height: 20vh; image-rendering: pixelated; }
.tv-qr.big img, .tv-qr.big canvas { width: 34vh; height: 34vh; }
.tv-url { font-size: 2vh; color: var(--dim); word-break: break-all; }
.tv-code {
  font-family: var(--display); font-weight: 800; font-size: 7vh; letter-spacing: .22em;
  color: var(--gold); text-shadow: 0 0 3vh rgba(255, 194, 62, .35); line-height: 1;
}
.tv-code.big { font-size: 15vh; }

/* players column */
#tv-board { width: 100%; display: flex; flex-direction: column; gap: 1.4vh; }
.tv-p {
  display: flex; align-items: center; gap: 1.2vw; padding: 1.4vh 1.2vw;
  border-radius: 1.8vh; background: var(--surface); border: 1px solid var(--stroke);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.tv-p .dot { width: 1.6vh; height: 1.6vh; border-radius: 50%; flex: none; }
.tv-p .nm { flex: 1; text-align: left; font-family: var(--display); font-weight: 800; font-size: 3.2vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-p .wv { font-family: var(--display); font-weight: 700; font-size: 2.6vh; color: var(--dim); white-space: nowrap; }
.tv-p.now { border-color: var(--gold); background: rgba(255, 194, 62, .1); transform: scale(1.04); }
.tv-p.now .wv { color: var(--gold); }
.tv-p.out { opacity: .45; }
.tv-p.off .nm::after { content: " · phone off"; font-size: .6em; color: var(--danger); }
.tv-rule { margin-top: auto; font-size: 1.9vh; color: var(--faint); }

/* full-screen layers: lobby, end, lost */
.tv-full {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(80% 60% at 50% 0%, #13213f 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 110%, #0d1526 0%, transparent 55%),
    var(--bg);
  transition: opacity .35s var(--ease);
}
.tv-full.gone { opacity: 0; pointer-events: none; }
.tv-lobby-in, .tv-end-in { display: flex; flex-direction: column; align-items: center; gap: 4vh; text-align: center; }
.tv-lobby-row { display: flex; align-items: center; gap: 5vw; }
.tv-lobby-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2vh; text-align: left; }
.tv-step { font-family: var(--display); font-weight: 700; font-size: 3.4vh; color: var(--ink); }
.tv-step.dim { color: var(--dim); font-weight: 600; font-size: 2.8vh; }
.tv-step.dim b { color: var(--ink); }
.tv-slots { display: flex; gap: 1.6vw; }
.tv-slot {
  width: 16vw; max-width: 260px; padding: 2.2vh 1vw; border-radius: 2vh;
  border: 2px dashed var(--stroke); color: var(--faint);
  font-family: var(--display); font-weight: 800; font-size: 3.4vh;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-slot.in { border-style: solid; color: var(--ink); background: var(--surface-2); animation: tvPop .4s var(--ease); }
.tv-slot.in small { display: block; font-size: .5em; color: var(--gold); letter-spacing: .14em; }
.tv-foot { font-size: 2.4vh; color: var(--dim); }
@keyframes tvPop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* up-next card, over the game column */
.tv-card {
  position: fixed; left: 50%; top: 50%; z-index: 40; width: min(var(--col), 90vw);
  transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  padding: 5vh 2vw; border-radius: 3vh; text-align: center;
  background: rgba(7, 11, 20, .92); border: 1px solid rgba(255, 194, 62, .4);
  box-shadow: 0 2vh 8vh rgba(0, 0, 0, .6);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tv-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tv-up-eyebrow { font-family: var(--display); font-weight: 700; font-size: 2.6vh; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.tv-up-name { font-family: var(--display); font-weight: 800; font-size: 9vh; line-height: 1; color: var(--gold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-up-sub { font-size: 3vh; color: var(--ink); }

/* end */
.tv-winner { font-family: var(--display); font-weight: 800; font-size: 10vh; line-height: 1; color: var(--gold); text-shadow: 0 0 4vh rgba(255, 194, 62, .35); }
#tv-rank { display: flex; flex-direction: column; gap: 1.4vh; min-width: 40vw; }
#tv-rank .tv-p .nm { font-size: 4vh; }
#tv-rank .tv-p .wv { font-size: 3.4vh; color: var(--ink); }
#tv-rank .tv-p:first-child { border-color: var(--gold); background: rgba(255, 194, 62, .1); }