/* ==========================================================================
   HOST — truth or dare, the water round, and the next-round line.
   ========================================================================== */

/* ---- truth or dare ------------------------------------------------------- */

.td-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 4vh 6vw;
  background: var(--bg);
  text-align: center;
}
.td-counter {
  color: var(--muted);
  letter-spacing: .22em;
  font-size: clamp(.7rem, 1.1vw, 1rem);
  font-weight: 800;
}
.td-name {
  font-size: clamp(2rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--gold);
  line-height: 1;
}
.td-choice {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 900;
  letter-spacing: .3em;
  padding: .3em 1.2em;
  border-radius: 999px;
  border: 3px solid var(--line);
  color: var(--muted);
}
.td-choice:empty { display: none; }
.td-choice.truth { border-color: var(--blue);   color: var(--blue); }
.td-choice.dare  { border-color: var(--pink);   color: var(--pink); }

.td-prompt {
  font-size: clamp(1.2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1.25;
  max-width: 80%;
  text-wrap: balance;
}
.td-prompt:empty { display: none; }

.td-status {
  font-size: clamp(.9rem, 1.7vw, 1.6rem);
  font-weight: 700;
  color: var(--muted);
}
.td-status.passed  { color: var(--green); }
.td-status.failed,
.td-status.refused { color: var(--pink); }

/* ---- water round --------------------------------------------------------- */

.water-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  background: radial-gradient(60% 50% at 50% 40%, rgba(103,163,236,.18), var(--bg) 70%);
}
.water-icon {
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 1;
  animation: idleFloat 3.5s ease-in-out infinite;
}
.water-title {
  font-size: clamp(2rem, 7vw, 7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--blue);
}
.water-sub {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--muted);
  max-width: 70%;
  text-align: center;
}

/* ---- next round line ----------------------------------------------------- */

.next-round {
  display: flex;
  align-items: center;
  gap: .8em;
  margin-top: 1.5vh;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .5em 1.6em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.next-round:empty { display: none; }
.next-round span {
  color: var(--muted);
  letter-spacing: .2em;
  font-size: clamp(.65rem, 1vw, .9rem);
  font-weight: 800;
}
.next-round b {
  color: var(--gold);
  font-size: clamp(.9rem, 1.6vw, 1.5rem);
  font-weight: 900;
}