/* /buzz/green · /buzz/red — phone buzzer, portrait first */
body.buzz {
  --team: var(--green); --team-d: var(--green-d); --team-l: var(--green-l);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: radial-gradient(120% 80% at 50% 45%, #16285F 0%, var(--bg) 70%);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.buzz.team-red { --team: var(--red); --team-d: var(--red-d); --team-l: var(--red-l); }

.bz-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.bz-team { background: var(--team); color: #fff; font-weight: 700; font-size: 22px; padding: 6px 18px; border-radius: 99px; }
.bz-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; padding: 0 16px; min-height: 0; }

.bz-btn {
  position: relative; width: min(84vw, 56vh); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 35% 28%, var(--team-l) 0%, var(--team) 45%, var(--team-d) 100%);
  box-shadow: 0 2.2vh 0 #0006, 0 3vh 6vh #000a, inset 0 -1.2vh 0 #0003;
  color: #fff; display: grid; place-items: center; touch-action: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.bz-text { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: min(11vw, 7.4vh); line-height: 1.25; text-align: center; padding: 0 10%; text-shadow: 0 .5vh 0 #0003; }
.bz-ring { position: absolute; inset: -3.5%; border-radius: 50%; border: 1.2vh solid transparent; pointer-events: none; }
.bz-sub { margin: 0; font-size: 21px; font-weight: 600; color: var(--muted); text-align: center; min-height: 1.6em; line-height: 1.5; }

/* states */
.s-locked .bz-btn, .s-pass .bz-btn, .s-other .bz-btn, .s-lose .bz-btn { filter: grayscale(.85) brightness(.6); }
.s-locked .bz-text { font-size: min(9vw, 6vh); }
.s-open .bz-text { font-size: min(19vw, 12vh); }
.s-open .bz-ring { border-color: var(--gold); animation: ring 0.9s ease-in-out infinite; }
.s-open .bz-sub { color: #fff; }
.s-me .bz-btn, .s-team .bz-btn, .s-win .bz-btn { filter: none; transform: scale(1.03); }
.s-me .bz-ring, .s-team .bz-ring, .s-win .bz-ring { border-color: var(--gold); box-shadow: 0 0 6vh var(--gold); }
.s-me .bz-sub, .s-team .bz-sub, .s-win .bz-sub { color: var(--gold); }
.s-other .bz-text, .s-pass .bz-text, .s-lose .bz-text { font-size: min(8.6vw, 5.8vh); }
.s-me .bz-text, .s-team .bz-text, .s-win .bz-text { font-size: min(10vw, 6.6vh); }
.bz-btn.pressed { transform: scale(.93) !important; box-shadow: 0 .6vh 0 #0006, 0 1vh 3vh #000a, inset 0 -1.2vh 0 #0003; }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .55; } }

.bz-foot { display: flex; justify-content: center; gap: 10px; padding: 14px 16px 22px; color: var(--muted); font-size: 17px; font-weight: 600; }
.bz-foot .dot { opacity: .5; }
.bz-off { position: fixed; top: 0; left: 0; right: 0; background: #E9A23B; color: #1b1300; text-align: center; padding: 10px; font-weight: 700; font-size: 18px; display: none; z-index: 10; }
.bz-off.show { display: block; }

@media (orientation: landscape) and (max-height: 500px) {
  .bz-main { flex-direction: row; gap: 6vw; }
  .bz-btn { width: 62vh; }
}

/* the answer countdown takes the button's place once a team rings */
.counting .bz-text { font-size: min(34vw, 22vh) !important; line-height: 1; font-variant-numeric: tabular-nums; }
.counting.hurry .bz-text { color: var(--gold); animation: bzHurry .5s ease-in-out infinite; }
@keyframes bzHurry { 50% { transform: scale(1.1); } }

/* ---------- the player's name ---------- */
.bz-me { background: #ffffff14; border: 1px solid #ffffff2a; color: #fff; font: inherit; font-size: 16px; font-weight: 600; padding: 6px 12px; border-radius: 99px; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-name { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: #050a1ee6; padding: 24px; }
.bz-name.show { display: flex; }
.bz-name form { width: 100%; max-width: 360px; background: var(--panel); border: 2px solid var(--team); border-radius: 24px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.bz-name h2 { margin: 0; font-family: var(--display); font-size: 30px; color: #fff; }
.bz-name p { margin: 0; color: var(--muted); font-size: 16px; }
.bz-name input { font: inherit; font-size: 22px; padding: 12px 14px; border-radius: 14px; border: 2px solid #ffffff30; background: #0A1433; color: #fff; text-align: center; }
.bz-name button { font: inherit; font-size: 22px; font-weight: 800; padding: 12px; border-radius: 14px; border: 0; background: var(--team); color: #fff; }