/* ============================================================
   Jeopardy — buzzer styles (host panel + player phone screen)
   Linked after styles.css; reuses its :root tokens (--gold,
   --blue-*, --ink, fonts). Kept out of styles.css to respect the
   house 800-line-per-file limit. Honours prefers-reduced-motion.
   ============================================================ */

/* ============ Host: setup panel ============ */

.buzzer-setup { margin-top: 1.4rem; }

.buzzer-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: rgba(6, 12, 233, 0.16);
  border: 1px solid rgba(170, 176, 224, 0.22);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1.1rem;
}

.buzzer-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.buzzer-status {
  margin: 0;
  font-weight: 600;
  color: var(--ink-dim);
}

/* Static "join from this page" note under the host panel (index.html). */
.buzzer-join-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.buzzer-join-link {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.buzzer-join-link:hover { text-decoration-thickness: 2px; }

.buzzer-code-wrap { text-align: center; }

.buzzer-code-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.buzzer-code {
  margin: 0.1rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 6vw, 4.6rem);
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--gold-text);
  text-shadow: 0 3px 0 #6e530f, 0 6px 16px rgba(0, 0, 0, 0.6);
}

.buzzer-join {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  justify-content: center;
  font-size: 0.85rem;
}

.buzzer-join-label { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }

.buzzer-join-url {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  background: rgba(1, 1, 23, 0.55);
  border-radius: 6px;
  padding: 0.15em 0.5em;
  overflow-wrap: anywhere;
}

.buzzer-players {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.buzzer-player-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(1, 1, 23, 0.35);
  border: 1px solid rgba(170, 176, 224, 0.18);
  border-radius: var(--radius);
  padding: 0.4rem 0.5rem 0.4rem 0.7rem;
}

.buzzer-dot { font-size: 0.7rem; line-height: 1; }
.buzzer-player-name { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.buzzer-empty { color: var(--ink-dim); font-style: italic; }

.buzzer-kick {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid rgba(170, 176, 224, 0.35);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  cursor: pointer;
}
.buzzer-kick:hover { color: var(--red); border-color: var(--red); }
.buzzer-kick:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.buzzer-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }

/* Broker health line — "reconnecting to server…" (spec §9.5). */
.buzzer-broker {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-text);
}

/* ============ Host: topbar chip + popover ============ */

.buzzer-chip {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue-night);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border: none;
  border-radius: 999px;
  padding: 0.4em 0.9em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(217, 164, 55, 0.35);
}
.buzzer-chip:hover { filter: brightness(1.05); }
.buzzer-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.buzzer-popover {
  position: absolute;
  right: 1rem;
  top: 3.6rem;
  z-index: 60;
  width: min(340px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(180deg, rgba(20, 28, 96, 0.98), rgba(8, 12, 52, 0.99));
  border: 1px solid rgba(170, 176, 224, 0.3);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ============ Host: clue-modal buzz bar ============ */

.buzzer-clue-bar { width: 100%; display: flex; justify-content: center; margin-bottom: 0.4rem; }

.buzzer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: rgba(1, 1, 23, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.buzzer-armed { border-color: var(--gold-deep); }

.buzzer-armed-label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-text);
  animation: buzzer-pulse 1s ease-in-out infinite;
}

.buzzer-winner {
  background: linear-gradient(180deg, rgba(34, 128, 255, 0.28), rgba(6, 12, 233, 0.2));
  border-color: #57a8ff;
}

.buzzer-winner-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

/* Names of players who buzzed during the reading phase (locked out this clue). */
.buzzer-early-note {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
}

@keyframes buzzer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ============ Player mode: hide host chrome ============ */

body.player-mode .topbar,
body.player-mode main,
body.player-mode #screen-editor,
body.player-mode #clue-modal,
body.player-mode #final-modal {
  display: none !important;
}

body.player-mode {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ============ Player: join + buzzer screens ============ */

.screen-player {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  gap: 1.2rem;
}

.player-join {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(20, 28, 96, 0.85), rgba(8, 12, 52, 0.95));
  border: 1px solid rgba(170, 176, 224, 0.25);
  border-radius: 18px;
  padding: 1.8rem 1.6rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.player-join-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.4rem + 3vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-text);
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

.player-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.player-field input {
  font: inherit;
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: rgba(1, 1, 23, 0.6);
  border: 1px solid rgba(170, 176, 224, 0.35);
  border-radius: 10px;
  padding: 0.6em 0.8em;
}

.player-field input#player-code {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  text-align: center;
  font-family: var(--font-display);
  font-size: 2rem;
}

.player-field input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 204, 77, 0.25);
}

#player-join-btn { width: 100%; }

/* In-app-browser advisory + post-failure connection tips (spec §9.4). Hints only. */
.player-webview-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gold-text);
  background: rgba(217, 164, 55, 0.12);
  border: 1px solid rgba(217, 164, 55, 0.4);
  border-radius: 10px;
  padding: 0.6em 0.8em;
}

.player-tips {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(1, 1, 23, 0.4);
  border: 1px solid rgba(170, 176, 224, 0.28);
  border-radius: 10px;
  padding: 0.7em 0.9em;
}

.player-tips-title { margin: 0 0 0.35em; font-weight: 700; color: var(--ink-dim); }

.player-tips-list {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* --- buzzer screen --- */

.player-buzzer {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.player-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  font-weight: 700;
  color: var(--ink-dim);
}

.player-head-code {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  color: var(--gold-text);
}

.player-head-name { color: var(--ink); overflow-wrap: anywhere; }

.player-buzz-btn {
  width: min(78vw, 78vh, 460px);
  height: min(78vw, 78vh, 460px);
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 6vw, 3rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  /* §9.8: buzz fires on pointerdown. Kill the double-tap-zoom / 300ms tap delay and
     stray text selection so contact registers instantly and feels like a real buzzer. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  color: var(--ink-dim);
  background: radial-gradient(circle at 50% 38%, #131c66 0%, #070b34 70%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.35);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              background-color var(--duration) var(--ease-out);
}

.player-buzz-btn:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }

/* idle / taken / locked share the disabled dim look */
.player-buzz-btn.mode-idle,
.player-buzz-btn.mode-taken { color: var(--ink-dim); }

/* locked (either reason) — muted, dark, disabled. The label distinguishes
   "Too soon!" (early) from the wrong-answer lockout; the look is shared. */
.player-buzz-btn.mode-locked {
  color: #ffd9d9;
  background: radial-gradient(circle at 50% 38%, #5a1414 0%, #2a0808 72%);
  border-color: rgba(255, 107, 107, 0.4);
}

/* reading = the live trap: VIVID RED, ENABLED, "Wait for it…". A tap here buzzes
   in early and locks you out. Uses the ✗-judge red tone; deliberately a bright,
   saturated red so it can't be confused with the dark muted `locked` red. */
.player-buzz-btn.mode-reading {
  color: #fff;
  background: radial-gradient(circle at 50% 36%, #ff9d9d 0%, var(--red) 45%, #d63a3a 100%);
  border-color: #ffd0d0;
  box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.26), 0 18px 50px rgba(255, 107, 107, 0.42);
}

.player-buzz-btn.mode-reading:active { transform: scale(0.98); }

/* armed = GREEN "go" (was gold): vivid, glowing, enabled. Uses the ✓-judge green
   tone so red→green reads as an unmistakable stop→go flip for colourblind players. */
.player-buzz-btn.mode-armed {
  color: #032818;
  background: radial-gradient(circle at 50% 34%, #b6f5d0 0%, var(--green) 45%, #2b9a5f 100%);
  border-color: #d6ffe7;
  box-shadow: 0 0 0 6px rgba(81, 216, 138, 0.3), 0 20px 60px rgba(81, 216, 138, 0.5);
  animation: buzzer-glow 0.9s ease-in-out infinite;
}

.player-buzz-btn.mode-armed:active { transform: scale(0.97); }

.player-buzz-btn.mode-won {
  color: #fff;
  background: radial-gradient(circle at 50% 36%, #6fb2ff 0%, #2f7bff 45%, #0b4fd6 100%);
  border-color: #bcdcff;
  box-shadow: 0 0 0 6px rgba(87, 168, 255, 0.3), 0 20px 60px rgba(47, 123, 255, 0.5);
}

.player-buzz-btn:disabled { cursor: default; }

@keyframes buzzer-glow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(81, 216, 138, 0.3), 0 20px 60px rgba(81, 216, 138, 0.42); }
  50% { box-shadow: 0 0 0 12px rgba(81, 216, 138, 0.16), 0 26px 70px rgba(81, 216, 138, 0.6); }
}

.player-foot {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ============ Host: Daily Double + Final decorations ============ */

.buzzer-dd-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--gold-text);
}

.buzzer-final-lock {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-text);
  white-space: nowrap;
}

.buzzer-unlock { align-self: center; }

.buzzer-final-counter {
  margin: 0.4rem 0 0;
  font-weight: 700;
  color: var(--ink-dim);
  text-align: center;
}

.buzzer-final-answer {
  display: block;
  margin: 0.15rem 0 0.35rem;
  font-style: italic;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ============ Player: wager / answer / message screens ============ */

.player-form {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: linear-gradient(180deg, rgba(20, 28, 96, 0.85), rgba(8, 12, 52, 0.95));
  border: 1px solid rgba(170, 176, 224, 0.25);
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.8rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.player-form-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-text);
  text-align: center;
}

.player-form-cat {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-align: center;
}

.player-form-meta { margin: 0; color: var(--ink-dim); text-align: center; }

.player-form-clue {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.player-form-note { margin: 0; color: var(--gold-text); font-weight: 600; }

.player-field input#player-answer-input {
  font-size: 1.1rem;
  letter-spacing: normal;
  text-transform: none;
}

.player-buzz-note {
  margin: 0;
  min-height: 1.2em;
  font-weight: 700;
  color: var(--gold-text);
  text-align: center;
}

.player-message {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 2rem 1.5rem;
}

.player-message-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-text);
}

.player-message-sub { margin: 0; font-size: 1.1rem; color: var(--ink); }

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  .buzzer-armed-label,
  .player-buzz-btn.mode-armed {
    animation: none !important;
  }
}

/* ============ Narrow phones ============ */

@media (max-width: 360px) {
  .player-join { padding: 1.4rem 1.1rem 1.6rem; }
  .player-field input#player-code { letter-spacing: 0.25em; }
}