html, body { height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#app { height: 100dvh; display: flex; flex-direction: column; }

.hidden { display: none !important; }

.reconnect {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--bad); color: #fff; text-align: center;
  padding: 8px; font-weight: 700; font-size: .9rem;
}

/* ---- team picker ---- */
.picker { flex: 1; display: flex; flex-direction: column; padding: 22px; gap: 14px; }
.picker h1 { font-size: 1.4rem; text-align: center; }
.picker p { text-align: center; color: var(--ink-dim); margin-bottom: 6px; }
.team-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 18px; border: 2px solid rgba(255,255,255,.15);
  background: var(--card); color: #fff; font-size: 1.3rem; font-weight: 700; cursor: pointer;
}
.team-btn .swatch { width: 26px; height: 26px; border-radius: 8px; }
.team-btn:active { transform: scale(.98); }

/* ---- buzzer screen ---- */
.play-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.play-head .team-tag { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.play-head .swatch { width: 18px; height: 18px; border-radius: 6px; }
.score-tag { font-weight: 800; font-size: 1.1rem; color: var(--accent); }

.buzz-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; gap: 18px; }

.status { font-size: 1.3rem; font-weight: 700; text-align: center; min-height: 1.6em; }
.status.dim { color: var(--ink-dim); }

.buzzer {
  width: min(74vw, 320px); aspect-ratio: 1; border-radius: 50%; border: none;
  color: #fff; font-family: 'Fredoka', sans-serif; font-size: 2.4rem; font-weight: 700;
  cursor: pointer; position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 45%), var(--team, #ff4d8d);
  box-shadow: 0 14px 0 rgba(0,0,0,.35), inset 0 -8px 18px rgba(0,0,0,.25);
  transition: transform .06s ease, filter .15s ease;
}
.buzzer:active { transform: translateY(8px) scale(.98); box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 -8px 18px rgba(0,0,0,.25); }
.buzzer.live { animation: pulseGlow 1.4s infinite; }
.buzzer:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; box-shadow: 0 8px 0 rgba(0,0,0,.3); animation: none; }

.countdown { font-family: 'Fredoka', sans-serif; font-size: 5rem; font-weight: 700; color: var(--accent); }

.banner { padding: 16px 22px; border-radius: 16px; font-weight: 800; font-size: 1.4rem; text-align: center; animation: pop .3s ease; }
.banner.win { background: var(--good); color: #04240f; }
.banner.lose { background: var(--card); color: var(--ink-dim); border: 1px solid var(--card-line); }
.banner.correct { background: var(--good); color: #04240f; }
.banner.wrong { background: var(--bad); color: #2a0000; }
.shake { animation: shake .5s; }