/* ==========================================================================
   HOST — cup scoreboard, performance rounds, and the idle float.
   Loaded last.
   ========================================================================== */

/* ---- the cup scoreboard -------------------------------------------------- */

.sb-title {
  font-size: clamp(1.6rem, 4.5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--pink), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cup-row {
  display: flex;
  gap: 1.6vw;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 92%;
}
.cup-cell { display: flex; flex-direction: column; align-items: center; gap: .8vh; }

.cup {
  width: clamp(70px, 9vw, 130px);
  height: auto;
  aspect-ratio: 100 / 132;
  display: block;
}

/* Glass: a thin bright edge, nothing filled, so the liquid reads through it. */
.cup-glass {
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Liquid rises by moving these rects, so the transition is on `y`. */
.cup-water   { transition: y 1.1s var(--ease); }
.cup-surface { fill: rgba(255,255,255,.98); transition: y 1.1s var(--ease); }

/* The count, printed through the liquid: light above, dark below. */
.cup-num {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 46px;
  font-variant-numeric: tabular-nums;
}
.cup-num-out { fill: #f4f4fa; }
.cup-num-in  { fill: #0b0b12; }

.cup-name {
  font-size: clamp(.75rem, 1.2vw, 1.15rem);
  font-weight: 800;
  color: var(--muted);
  max-width: 12ch;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tighter when a big group means many cups. */
@media (max-height: 820px) {
  .cup { width: clamp(56px, 7vw, 100px); }
  .cup-num { font-size: 42px; }
}

/* ---- karaoke / breakdance ------------------------------------------------ */

.perform-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background: var(--bg);
}
.perform-who {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  font-size: clamp(1.4rem, 4vw, 4rem);
  font-weight: 900;
  flex-wrap: wrap;
  justify-content: center;
}
.perform-who span {
  background: var(--surface);
  border: 3px solid var(--gold);
  border-radius: 22px;
  padding: .35em .9em;
  color: var(--gold);
}
.perform-who em { color: var(--muted); font-style: normal; font-size: .55em; }

.perform-clock {
  font-size: clamp(4rem, 16vw, 15rem);
  font-weight: 900;
  line-height: 1;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
}
.perform-prompt {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--muted);
  max-width: 70%;
  text-align: center;
}

/* ---- idle float ---------------------------------------------------------- */

/* A slow drift so a static screen does not read as frozen. Deliberately
   tiny and slow: anything faster is distracting on a TV people glance at.
   base.css already collapses this under prefers-reduced-motion. */
@keyframes idleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.logo,
.round-title,
.sb-title,
.cards-title,
.ad-brand,
.challenge-name,
#s-scores .round-title {
  animation: idleFloat 5.5s ease-in-out infinite;
}
/* The round title also slams in; let that finish before it starts drifting. */
.round-title { animation: slam .4s cubic-bezier(.2,1.4,.4,1), idleFloat 5.5s ease-in-out .4s infinite; }

.room-code { animation: idleFloat 6.5s ease-in-out infinite; }
.qr-wrap   { animation: idleFloat 7.5s ease-in-out infinite; }