/* ==========================================================================
   Game night — styles. Theme tokens and shared components come from
   shared/style.css.

   The night (the scoreboard, the host's pick of the next game, the games
   played so far) and the room (code, share buttons). Before the first game
   the room comes first, after it the night.
   ========================================================================== */

.nt-intro { display: grid; gap: .7rem; }
.nt-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.nt-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.nt-center-btn { justify-self: center; }
.howto { max-width: 30rem; margin: 1.5rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 .6rem; padding-inline-start: 1.4rem; list-style: decimal; }
.howto p { padding-bottom: 1rem; }

.nt { display: grid; gap: 1rem; max-width: 30rem; margin: 1.2rem auto; }
.nt[hidden] { display: none; }
.nt-card { display: grid; gap: .7rem; padding: 1rem; }
.nt-h2 { font-size: 1.25rem; }
.nt-goal { font-size: .85rem; font-weight: 700; }
.nt-wait { font-weight: 800; text-align: center; }

/* ---------- The scoreboard ---------- */

.nt-standings { display: grid; gap: .35rem; }
.nt-card-body { display: grid; gap: .6rem; }
.nt-row { display: flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .25rem .6rem; background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; }
.nt-row.is-you { box-shadow: 3px 3px 0 var(--sea); }
.nt-row.is-away { opacity: .6; }
.nt-row__place { width: 1.8rem; font-size: 1.3rem; text-align: center; }
.nt-row__face { font-size: 1.4rem; }
.nt-row__name { flex: 1; min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.nt-row__points { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- The next game ---------- */

.nt-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.nt-game {
  display: grid;
  justify-items: center;
  gap: .1rem;
  width: 100%;
  height: 100%;
  padding: .55rem .4rem;
  font: inherit;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border: 2.5px solid var(--line);
  border-radius: 14px 12px 15px 11px;
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
  touch-action: manipulation;
}
.nt-game:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.nt-game[disabled] { opacity: .35; cursor: not-allowed; }
.nt-game.is-played { background: var(--surface-2); }
.nt-game__icon { font-size: 1.8rem; line-height: 1.1; }
.nt-game__name { font-size: .9rem; font-weight: 900; line-height: 1.2; }
.nt-game__note { font-size: .72rem; font-weight: 700; color: var(--muted); }

/* ---------- Played so far ---------- */

.nt-played { display: grid; gap: .3rem; font-weight: 600; }

/* ---------- The champion ---------- */

.nt-champion { justify-items: center; text-align: center; border-color: var(--sun); box-shadow: 5px 5px 0 var(--sun); }
.nt-champion__label { font-size: 1.1rem; font-weight: 900; color: var(--tomato); }
.nt-champion__faces { font-size: 3.4rem; line-height: 1; animation: nt-pop .5s cubic-bezier(.2, 1.6, .5, 1) both; }
.nt-champion__name { font-size: clamp(1.6rem, 8vw, 2.2rem); font-weight: 900; line-height: 1.1; }
.nt-champion .btn--block { width: 100%; }
@keyframes nt-pop { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nt-champion__faces { animation: none; } }