/* ==========================================================================
   HOST — teams, the tap battle, showdown betting and the drawing gallery.
   Loaded after host-rounds.css.
   ========================================================================== */

/* ---- team rosters (round intro) ----------------------------------------- */

.team-rosters {
  display: flex;
  align-items: center;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
}
.roster {
  background: var(--surface);
  border: 3px solid var(--team, var(--line));
  border-radius: 22px;
  padding: 1em 1.8em;
  min-width: 22vw;
}
.roster-name {
  font-size: clamp(1.2rem, 2.8vw, 2.6rem);
  font-weight: 900;
  color: var(--team, var(--text));
  letter-spacing: .05em;
}
.roster-members {
  color: var(--muted);
  font-size: clamp(.8rem, 1.4vw, 1.3rem);
  font-weight: 700;
  margin-top: .3em;
}
.roster-vs {
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 900;
  color: var(--gold);
}

/* ---- tap battle (tug of war) -------------------------------------------- */

.battle-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  background: var(--bg);
}
.battle-word {
  font-size: clamp(2.5rem, 9vw, 9rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--muted);
}
.battle-stage.go .battle-word {
  color: var(--gold);
  animation: slam .15s ease;
}

.tug {
  display: flex;
  width: 84vw;
  height: clamp(90px, 18vh, 200px);
  border-radius: 22px;
  overflow: hidden;
  border: 4px solid var(--line);
}
.tug-side {
  background: var(--team, var(--line));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #0d0b0a;
  transition: flex-grow .18s var(--ease);
  min-width: 0;
  overflow: hidden;
}
.tug-name {
  font-size: clamp(.9rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
}
.tug-count { font-size: clamp(1.2rem, 3vw, 3rem); font-weight: 900; }

/* ---- showdown betting --------------------------------------------------- */

.bet-strip {
  position: absolute;
  bottom: 6vh;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6vh;
}
.bet-label {
  color: var(--muted);
  font-size: clamp(.9rem, 1.6vw, 1.5rem);
  font-weight: 700;
}
.bet-count {
  background: var(--surface);
  border: 2px solid var(--blue);
  color: var(--blue);
  border-radius: 999px;
  padding: .4em 1.4em;
  font-weight: 900;
  font-size: clamp(.85rem, 1.4vw, 1.3rem);
}
.tap-stage.go .bet-strip { display: none; }

.bet-results {
  display: flex;
  flex-wrap: wrap;
  gap: .6vh .8vw;
  justify-content: center;
  margin-bottom: 1.5vh;
  max-width: 80%;
}
.bet-chip {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .35em 1em;
  font-size: clamp(.75rem, 1.2vw, 1.1rem);
  font-weight: 700;
}
.bet-chip.won  { border-color: var(--green); color: var(--green); }
.bet-chip.lost { border-color: var(--pink);  color: var(--pink); }

/* ---- team results (reveal) ---------------------------------------------- */

.team-results {
  display: flex;
  gap: 2vw;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5vh;
}
.team-card {
  background: var(--surface);
  border: 3px solid var(--team, var(--line));
  border-radius: 22px;
  padding: .9em 1.6em;
  text-align: center;
  min-width: 20vw;
  opacity: .55;
}
.team-card.won { opacity: 1; box-shadow: 0 0 40px color-mix(in srgb, var(--team) 30%, transparent); }
.tc-name {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 900;
  color: var(--team, var(--text));
}
.tc-score { font-size: clamp(1.6rem, 4vw, 3.4rem); font-weight: 900; }
.tc-answer {
  font-size: clamp(.9rem, 1.6vw, 1.5rem);
  font-weight: 800;
  margin: .2em 0;
}
.tc-members {
  color: var(--muted);
  font-size: clamp(.7rem, 1.1vw, 1rem);
  font-weight: 700;
  margin-top: .3em;
}

/* ---- drawing gallery ---------------------------------------------------- */

/* Everything must fit on screen: a TV cannot be scrolled from across a room.

   --tile now comes from JS, which measures the box this grid was actually
   given rather than guessing at it with vh budgets. The old guess (56vh) was
   wrong whenever the prompt above wrapped to a second line, and the tiles
   overflowed upward on top of the round title. */
.vote-grid.gallery {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), var(--tile, 120px));
  grid-auto-rows: var(--tile, 120px);
  gap: 14px;
  width: 100%;
  justify-content: center;
  align-content: center;
  overflow: hidden;
}
.vote-card.art {
  padding: .4em;
  background: #fff;
  border-color: var(--purple);
  aspect-ratio: 1;
  display: flex;
}
.vote-card.art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Measured the same way as the gallery. `ratio` at the call site accounts for
   the name caption underneath, which the picture alone does not. */
.art-results {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--tile, 110px));
  gap: 10px;
  width: 100%;
  margin-bottom: 1vh;
  justify-content: center;
  align-content: center;
  overflow: hidden;
}
.art-card {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: .3em;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.art-card.best { border-color: var(--gold); box-shadow: 0 0 30px rgba(208, 154, 60,.35); }
.art-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
}
/* Whose drawing this was. The point of the round, so it is sized to be read
   across a room rather than tucked away as a caption. */
.art-card figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4em;
  padding: .25em .3em 0;
  color: #0d0b0a;
  font-weight: 900;
}
.art-card .ac-name {
  font-size: clamp(.72rem, calc(var(--tile, 110px) * .13), 1.4rem);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.art-card .ac-votes {
  background: var(--gold);
  color: #3a2c00;
  border-radius: 999px;
  padding: .05em .5em;
  font-size: clamp(.65rem, calc(var(--tile, 110px) * .11), 1.1rem);
  flex: none;
}
.art-card.best .ac-name { color: #7a5c00; }

@media (max-height: 820px) {
  .tug { height: clamp(70px, 14vh, 150px); }
}
/* Whose turn it is, and whether the room should be watching yet. */
.perform-turn {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(.7rem, 1.2vw, 1.1rem);
  margin-top: .4vh;
}
/* Still finding the backing track. Dimmed so the room can tell at a glance
   that nothing has started yet. */
.perform-who span.waiting {
  opacity: .55;
  animation: hotPulse 1.6s ease-in-out infinite;
}

/* ---- listening to song clips -------------------------------------------- */

.listen-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  text-align: center;
}
.listen-who {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.5vw, 6.5rem);
  font-weight: 900;
  font-stretch: 100%;
  letter-spacing: -.035em;
  color: var(--text);
  animation: slam .35s cubic-bezier(.2,1.4,.4,1);
}
.listen-track {
  font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  font-weight: 800;
  max-width: 80%;
  text-wrap: balance;
}
.listen-chan { color: var(--muted); font-size: clamp(.85rem, 1.5vw, 1.3rem); font-weight: 700; }
.listen-hint { color: var(--muted); font-size: clamp(.8rem, 1.4vw, 1.2rem); margin-top: 1vh; }

/* Small on purpose. The clip is the content; the video is just where the
   sound happens to come from, and a full-screen music video would take the
   room's attention off each other. */
.yt-stage {
  width: clamp(200px, 22vw, 380px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #000;
}
.yt-stage iframe { width: 100%; height: 100%; border: 0; }

/* Ballot cards for song rounds carry both the picker and the track. */
.vote-card.song { flex-direction: column; gap: .3em; }
.vote-card.song .vs-name {
  color: var(--gold);
  font-size: .8em;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vote-card.song .vs-track { font-size: .95em; line-height: 1.2; text-wrap: balance; }