/* ============================================================================
   eurocup-chant.css — CHANT BATTLE.

   Same scoring shape as the karaoke package: per phrase, volume 55 / timing 45,
   batched and sent as numbers. No audio ever leaves the phone.

   The board shows the phrase big enough to sing from at the back of a plaza;
   the phone shows the same phrase plus the next one, because a chant only
   works if you know what is coming.
   ========================================================================== */

/* ------------------------------------------------------------- the board */

.ec-chant-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2vmin;
}

/* The live phrase. Nothing smaller than a fist at 60 m, so it scales with the
   short side and wraps rather than shrinking below the floor. */
.ec-chant-line {
  font-size: 11vmin;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 92vw;
}

.ec-chant-next {
  font-size: 3.4vmin;
  letter-spacing: 0.18em;
  color: var(--ec-dim);
  font-weight: 700;
  text-transform: uppercase;
}

/* Phrase progress. Stepped per phrase, not a smooth sweep — a bar that creeps
   is a bar nobody can sing to. */
.ec-chant-steps {
  display: flex;
  gap: 0.6vmin;
  width: 70vw;
  height: 1.6vmin;
}
.ec-chant-steps i { flex: 1; background: var(--ec-tint-2); }
.ec-chant-steps i.on { background: var(--ec-hot); }

.ec-chant-board .ec-rows { flex: none; margin-top: 3vmin; }

/* --------------------------------------------------------------- phone */

.ec-chant-fan h2 {
  font-size: 34px;
  line-height: 0.95;
  min-height: 2.2em;
}

.ec-chant-fan .ec-note.next {
  color: var(--ec-hot);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* No chant map for this nation is a state, not an error: federation chants
   and terrace claps are the fallback, and the phone says so plainly rather
   than showing an empty screen. */
.ec-chant-empty {
  border: 1px solid var(--ec-line);
  padding: 16px;
  margin-top: 14px;
  color: var(--ec-dim);
  font-size: 14px;
  line-height: 1.45;
}