/* The TV screen: sized in vh so it fills any TV or laptop. */
body.tv { min-height: 100vh; display: flex; flex-direction: column; padding: 4vh 5vw; font-size: 2.4vh; overflow: hidden; }
.tv-top { display: flex; align-items: baseline; justify-content: space-between; }
.tv-top .brand { font-size: 4vh; }
.tv-name { font: 800 4vh/1 var(--display); }
body.tv main { flex: 1; display: flex; }
body.tv .screen { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 6vw; }
body.tv h2 { font: 800 7vh/1 var(--display); letter-spacing: -.015em; margin: 0 0 4vh; }
body.tv .btn { height: 9vh; padding: 0 5vh; font-size: 3.2vh; }
body.tv .btn:disabled { opacity: .4; cursor: default; }

.join { display: grid; gap: 2vh; justify-items: start; }
.join p { margin: 0; font-size: 3.4vh; color: var(--soft); }
.join b { color: var(--ink); }
.tv-code { font: 800 22vh/.9 var(--display) !important; letter-spacing: .03em; color: var(--accent) !important; }
.qr { width: 24vh; height: 24vh; padding: 1.6vh; border-radius: 2.4vh; background: #fff; box-shadow: var(--shadow); }
.qr svg { display: block; width: 100%; height: 100%; }
.room { flex: 1; display: grid; gap: 3vh; align-content: center; justify-items: start; }
.tv-meta { margin: 0; color: var(--soft); font-size: 3vh; min-height: 1.4em; }

.tv-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(26vh, 1fr)); gap: 2.4vh 3vh; width: 100%; }
.tv-people li { display: flex; align-items: center; gap: 1.6vh; font: 700 3.4vh/1.1 var(--display); }
.tv-people li i { width: 7vh; height: 7vh; border-radius: 50%; background: var(--tint); flex: none; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.4); } }
.tv-swiping { flex-direction: column !important; align-items: stretch !important; justify-content: center; }
.progress-list { grid-template-columns: repeat(auto-fill, minmax(40vh, 1fr)); }
.progress-list li { flex-wrap: wrap; }
.progress-list b { flex: 1; }
.bar { flex-basis: 100%; height: 1.4vh; border-radius: 1vh; background: var(--line); overflow: hidden; margin-left: 8.6vh; margin-top: -1vh; }
.bar u { display: block; height: 100%; background: var(--ink); transition: width .3s ease; }

.tv-done .plate {
  width: 56vh; height: 64vh; flex: none; border-radius: 5vh; padding: 5vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--tint); color: var(--food-ink); box-shadow: var(--shadow); container-type: inline-size;
  animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
.tv-done .plate b { font: 800 min(14vh, calc(160cqi / var(--len, 6)))/.95 var(--display); white-space: nowrap; }
.tv-done .plate span { font-size: 3vh; font-weight: 600; opacity: .75; }
.tv-done .plate .face { margin: auto; }