/* TV host page: a 10-foot UI. Sizes are in vh/vw so 720p, 1080p and 4K all look the same.
   No CSS variables or grid: older TV browsers do not have them.
   Palette (Art/store/src/brand.py): cream #F2E3C2, cream dark #EBD7AC, chocolate #4A2C1A, dark #241812,
   velvet #8E1F2B, orange #C4561B, gold #E3A72F, avocado #6B7A2A, teal #1F7F7A. */

@font-face {
  font-family: "Shrikhand";
  src: url("/fonts/Shrikhand-Regular.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #F2E3C2;
  color: #4A2C1A;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif;
  overflow: hidden;
}

[hidden] { display: none !important; }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* keep clear of TV overscan */
  padding: 5vh 5vw;
}

/* The rainbow arch from the key art, as nested circles rising from the bottom edge. */
.arch {
  position: absolute;
  left: 50%;
  bottom: -62vw;
  width: 96vw;
  height: 96vw;
  margin-left: -48vw;
  opacity: 0.22;
}
.band { width: 100%; height: 100%; border-radius: 50%; padding: 2.6vw; }
.band-1 { background: #8E1F2B; }
.band-2 { background: #C4561B; }
.band-3 { background: #E3A72F; }
.band-4 { background: #6B7A2A; }
.band-5 { background: #1F7F7A; }
.band-6 { background: #F2E3C2; }

.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* ---- start / show / ended ---- */
.scene-start {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
.logo-big { width: 62vw; max-height: 26vh; object-fit: contain; }
.tagline { font-size: 4.4vh; margin: 3vh 0 5vh; color: #7A4A26; }
.hint { font-size: 2.4vh; color: #7A4A26; margin-top: 4vh; }
.msg { font-size: 2.8vh; min-height: 3.6vh; margin: 2vh 0 0; color: #8E1F2B; font-weight: bold; }

.buttons { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.btn {
  display: inline-block;
  font-family: "Shrikhand", Georgia, serif;
  font-size: 4.6vh;
  line-height: 1;
  padding: 2.4vh 4vw 2.8vh;
  margin: 0 1.2vw;
  color: #F2E3C2;
  background: #1F7F7A;
  border: 0.5vh solid #241812;
  border-radius: 1.6vh;
  box-shadow: 0.6vh 0.6vh 0 #E3A72F, 1.2vh 1.2vh 0 #C4561B;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet {
  font-size: 3vh;
  padding: 1.6vh 2.4vw 1.9vh;
  background: #F2E3C2;
  color: #4A2C1A;
  box-shadow: 0.5vh 0.5vh 0 #EBD7AC;
}
.btn:focus {
  outline: none;
  background: #8E1F2B;
  color: #F2E3C2;
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  box-shadow: 0.6vh 0.6vh 0 #E3A72F, 1.2vh 1.2vh 0 #C4561B, 0 0 0 0.8vh rgba(36, 24, 18, 0.25);
}

/* ---- lobby ---- */
.topbar {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 12vh;
}
.logo-small { height: 10vh; width: auto; }
.topbar-note { font-size: 3.2vh; color: #7A4A26; margin: 0; font-style: italic; }

.lobby {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  min-height: 0;
}

.qr-card {
  -webkit-flex: none;
  flex: none;
  width: 54vh;
  height: 54vh;
  max-width: 30vw;
  max-height: 30vw;
  padding: 2.2vh;
  background: #F2E3C2;
  border: 0.7vh solid #241812;
  border-radius: 2.4vh;
  box-shadow: 0.9vh 0.9vh 0 #1F7F7A, 1.8vh 1.8vh 0 #E3A72F, 2.7vh 2.7vh 0 #C4561B, 3.6vh 3.6vh 0 #8E1F2B;
}
.qr { display: block; width: 100%; height: 100%; }

.join-info {
  -webkit-flex: none;
  flex: none;
  width: 36vw;
  padding: 0 2vw 0 5vw;
}
.eyebrow {
  font-family: "Shrikhand", Georgia, serif;
  font-size: 5.6vh;
  line-height: 1.1;
  margin: 0 0 1.5vh;
  color: #8E1F2B;
}
.or { font-size: 3.6vh; margin: 0 0 6vh; }
.room-label { font-size: 2.2vh; font-weight: bold; text-transform: uppercase; letter-spacing: 0.12em; color: #7A4A26; margin: 0 0 1.2vh; }
.or strong { color: #1F7F7A; }
.small { font-size: 2.4vh; color: #7A4A26; margin: 3vh 0 0; }

.code { display: -webkit-flex; display: flex; }
.code-letter {
  font-family: "Shrikhand", Georgia, serif;
  font-size: 8vh;
  line-height: 1;
  width: 4.4vw;
  padding: 1.2vh 0 2.2vh;
  margin-right: 0.8vw;
  text-align: center;
  color: #F2E3C2;
  background: #4A2C1A;
  border-radius: 1.4vh;
  box-shadow: 0.5vh 0.5vh 0 #E3A72F, 1vh 1vh 0 #C4561B;
}

.guests {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-align-self: stretch;
  align-self: stretch;
  padding: 4vh 0 0 2vw;
  border-left: 0.4vh dashed #7A4A26;
}
.count { font-family: "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif; font-size: 3.2vh; color: #7A4A26; }
.players { list-style: none; margin: 0; padding: 0; }
.player {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 3.8vh;
  font-weight: bold;
  padding: 1.1vh 1.2vw;
  margin-bottom: 1.1vh;
  background: #EBD7AC;
  border-radius: 1.2vh;
  border-left: 1vh solid #1F7F7A;
}
.players-dense .player { font-size: 2.8vh; padding: 0.6vh 1vw; margin-bottom: 0.7vh; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-away { opacity: 0.45; border-left-color: #7A4A26; }
.badge {
  -webkit-flex: none;
  flex: none;
  font-size: 2vh;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5vh 0.8vw;
  margin-left: 1vw;
  border-radius: 3vh;
  color: #F2E3C2;
  background: #C4561B;
}
.badge-headset { background: #8E1F2B; }
.badge-phone { background: #6B7A2A; }
.empty { font-size: 2.8vh; color: #7A4A26; font-style: italic; margin: 1vh 0; }

.bottombar {
  height: 11vh;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.bottombar .buttons .btn { margin: 0 1.6vw 0 0; }
.bottombar .msg { margin: 0; }

/* A phone or small window that lands on the TV page: stack it so it is still usable. */
@media (max-aspect-ratio: 1/1) {
  html, body { overflow: auto; }
  .stage { height: auto; min-height: 100vh; }
  .lobby { -webkit-flex-direction: column; flex-direction: column; }
  .qr-card { width: 70vw; height: 70vw; margin: 3vh 0; }
  .join-info { width: 100%; padding: 2vh 0; text-align: center; }
  .code { -webkit-justify-content: center; justify-content: center; }
  .code-letter { width: 13vw; font-size: 6vh; }
  .guests { width: 100%; border-left: 0; padding-left: 0; }
  .logo-big { width: 86vw; }
  .buttons { -webkit-flex-direction: column; flex-direction: column; }
  .btn { margin: 1.2vh 0; }
  .bottombar { height: auto; padding: 2vh 0; -webkit-flex-direction: column; flex-direction: column; }
}