/* ============================================
   Far Feud — Game Styles
   Neo-brutalist Family Feud
   ============================================ */

/* ---------- Layout ---------- */
#feud-app {
  min-height: calc(100vh - var(--nav-height));
  padding-top: var(--nav-height);
}
#feud-app > section {
  display: none;
  padding: var(--space-8) var(--space-6);
  max-width: 900px;
  margin: 0 auto;
  animation: feudFadeIn 0.4s var(--ease) both;
}
#feud-app[data-view="lobby"] > .view-lobby,
#feud-app[data-view="faceoff"] > .view-faceoff,
#feud-app[data-view="round-end"] > .view-round-end,
#feud-app[data-view="gameover"] > .view-gameover { display: block; }
#feud-app[data-view="game"] > .view-game { display: grid; }

@keyframes feudFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scorebar ---------- */
.scorebar {
  position: fixed; top: var(--nav-height); left: 0; right: 0;
  z-index: 900; display: none;
  align-items: center; justify-content: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
#feud-app[data-view="faceoff"] .scorebar,
#feud-app[data-view="game"] .scorebar,
#feud-app[data-view="round-end"] .scorebar { display: flex; }

.scorebar__team {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all var(--dur) var(--ease);
  min-width: 140px; justify-content: space-between;
}
.scorebar__team--active {
  border-color: var(--apricot-cream);
  box-shadow: 0 0 12px rgba(var(--apricot-cream-rgb), 0.3);
}
.scorebar__team--active[data-color="teal"] {
  border-color: var(--muted-teal);
  box-shadow: 0 0 12px rgba(var(--muted-teal-rgb), 0.3);
}
.scorebar__name {
  font-weight: 600; font-size: var(--text-sm);
}
.scorebar__score {
  font-family: 'Space Grotesk', var(--font-body);
  font-size: var(--text-2xl); font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-width: 32px; text-align: center;
}
.scorebar__center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.scorebar__round {
  font-size: var(--text-xs); color: var(--text-tertiary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
}
.scorebar__double {
  font-size: 10px; font-weight: 800;
  color: var(--burnt-peach);
  letter-spacing: 0.05em; text-transform: uppercase;
  animation: doublePulse 1.5s ease-in-out infinite;
}
@keyframes doublePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* offset content when scorebar visible */
#feud-app[data-view="faceoff"] > section,
#feud-app[data-view="game"] > section,
#feud-app[data-view="round-end"] > section { padding-top: calc(var(--space-10) + 60px); }

/* ---------- Lobby ---------- */
/* Host setup — hidden until host mode chosen */
.lobby__host-setup { display: none; }
body[data-feud-mode="host"] .lobby--mode-chosen .lobby__host-setup {
  display: flex; flex-direction: column; gap: var(--space-5);
  animation: feudFadeIn 0.4s var(--ease) both;
}
/* Player setup — hidden until player mode chosen */
.lobby__player-setup { display: none; }
body[data-feud-mode="player"] .lobby--mode-chosen .lobby__player-setup {
  display: flex; flex-direction: column; gap: var(--space-5);
  animation: feudFadeIn 0.4s var(--ease) both;
}
/* Screen setup — hidden until screen mode chosen */
.lobby__screen-setup { display: none; }
body[data-feud-mode="screen"] .lobby--mode-chosen .lobby__screen-setup {
  display: flex; flex-direction: column; gap: var(--space-5);
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__start-btn {
  margin-top: var(--space-4); align-self: center;
}

.lobby {
  text-align: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.lobby__mascot {
  width: 120px; height: 120px; object-fit: contain;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .lobby__mascot {
  mix-blend-mode: normal;
  background: var(--bg-card);
  padding: 8px;
  box-shadow: none;
}
.lobby__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
}
.lobby__subtitle {
  font-size: var(--text-lg); color: var(--text-secondary);
  margin-bottom: var(--space-10);
}
.lobby__form {
  max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.lobby__field {
  text-align: start;
}
.lobby__label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  margin-bottom: var(--space-2); color: var(--text-secondary);
}
.lobby__input, .lobby__select {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease);
}
.lobby__input:focus, .lobby__select:focus {
  outline: none;
  border-color: var(--apricot-cream);
  box-shadow: 0 0 0 3px rgba(var(--apricot-cream-rgb), 0.15);
}
/* Mode prompt */
.lobby__mode-prompt {
  font-size: var(--text-xl); font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}
.lobby--mode-chosen .lobby__mode-prompt { display: none; }

/* Mode picker */
.lobby__mode-pick {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4);
}
.lobby__mode-btn {
  position: relative;
  padding: var(--space-6) var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer; transition: all var(--dur) var(--ease);
  text-align: center;
  box-shadow: 4px 4px 0px var(--border-color);
}
.lobby__mode-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--border-color);
}
.lobby__mode-btn--active {
  border-color: var(--apricot-cream);
  background: rgba(var(--apricot-cream-rgb), 0.08);
  box-shadow: 4px 4px 0px var(--apricot-cream);
}
.lobby__mode-btn--active:hover {
  box-shadow: 6px 6px 0px var(--apricot-cream);
}
.lobby__mode-btn--active::after {
  content: '';
  position: absolute; top: var(--space-2); inset-inline-end: var(--space-2);
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--muted-teal);
  box-shadow: 0 0 6px var(--muted-teal);
}
.lobby__mode-icon {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; margin: 0 auto var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--text-2xl);
  transition: transform var(--dur) var(--ease);
  overflow: hidden;
}
.lobby__mode-mascot {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .lobby__mode-mascot {
  mix-blend-mode: normal;
}
.lobby__mode-btn:hover .lobby__mode-icon { transform: scale(1.08) rotate(-2deg); }
.lobby__mode-btn:nth-child(1) .lobby__mode-icon {
  background: rgba(var(--apricot-cream-rgb), 0.12);
}
.lobby__mode-btn:nth-child(2) .lobby__mode-icon {
  background: rgba(var(--muted-teal-rgb), 0.12);
}
.lobby__mode-title {
  display: block; font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}
.lobby__mode-desc {
  font-size: var(--text-xs); color: var(--text-tertiary);
  line-height: 1.5;
}
/* Back/reset button */
.lobby__back-btn {
  display: none; align-items: center; gap: var(--space-2);
  margin: 0 auto var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: none; background: none;
  color: var(--text-tertiary);
  font-family: var(--font-body); font-size: var(--text-sm);
  cursor: pointer; transition: color var(--dur) var(--ease);
}
.lobby__back-btn:hover { color: var(--text-primary); }
.lobby--mode-chosen .lobby__back-btn { display: inline-flex; }
.lobby--mode-chosen .lobby__mode-pick { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; }
.lobby--mode-chosen .lobby__mode-btn:not(.lobby__mode-btn--active) { display: none; }
.lobby--mode-chosen .lobby__mode-btn--active {
  cursor: default; pointer-events: none;
}

/* Lobby Waiting (Player/Board opened via QR) */
.lobby__waiting {
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.lobby__waiting-icon {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  animation: feudFadeIn 0.6s var(--ease);
}
.lobby__waiting-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.lobby__waiting-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
.lobby__waiting-pulse {
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--muted-teal);
  margin: 0 auto;
  animation: waitPulse 1.5s ease-in-out infinite;
}
@keyframes waitPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.8); opacity: 1; }
}
.lobby__waiting-back {
  display: inline-block;
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: none;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--dur) var(--ease);
}
.lobby__waiting-back:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ---------- Room Code Input ---------- */
.lobby__join-code {
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-2xl); font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.lobby__join-error {
  font-size: 13px; color: var(--burnt-peach); font-weight: 500;
  text-align: center; min-height: 0;
}
.lobby__join-error:empty { display: none; }

/* ---------- Player Connected State ---------- */
.lobby__connected {
  padding: var(--space-6) 0;
  text-align: center;
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__connected-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--muted-teal);
  border-radius: var(--radius-full);
  background: rgba(var(--muted-teal-rgb), 0.08);
  font-size: var(--text-sm); font-weight: 500;
  margin-bottom: var(--space-6);
}
.lobby__connected-badge strong {
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-base);
  letter-spacing: 0.15em;
  color: var(--muted-teal);
}
.lobby__connected-name {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
  margin-bottom: var(--space-4);
}
.lobby__connected-name:empty { display: none; }
.lobby__connected-team-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 2px solid; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
}
.lobby__connected-team-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.lobby__connected-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--muted-teal);
  animation: waitPulse 1.5s ease-in-out infinite;
}
.lobby__connected-players {
  margin: var(--space-4) auto;
  max-width: 320px;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
}
.lobby__connected-players-title {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-1);
  width: 100%;
}
/* ---------- Player Team Chooser ---------- */
.lobby__team-chooser {
  margin: var(--space-5) auto;
  max-width: 340px;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 4px 4px 0px var(--border-color);
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__team-chooser-label {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-3); text-align: center;
}
.lobby__team-chooser-pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.lobby__team-chooser-btn {
  padding: var(--space-4) var(--space-3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  box-shadow: 3px 3px 0px var(--border-color);
}
.lobby__team-chooser-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--border-color);
}
.lobby__team-chooser-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--border-color);
}
.lobby__team-chooser-btn[data-color="apricot"].lobby__team-chooser-btn--active {
  border-color: var(--apricot-cream);
  background: rgba(var(--apricot-cream-rgb), 0.1);
  box-shadow: 3px 3px 0px var(--apricot-cream);
}
.lobby__team-chooser-btn[data-color="teal"].lobby__team-chooser-btn--active {
  border-color: var(--muted-teal);
  background: rgba(var(--muted-teal-rgb), 0.1);
  box-shadow: 3px 3px 0px var(--muted-teal);
}

.lobby__join-leave {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-tertiary);
  background: none; border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--dur) var(--ease);
  font-family: var(--font-body);
}
.lobby__join-leave:hover {
  color: var(--burnt-peach);
  border-color: var(--burnt-peach);
}

/* (QR Share Card removed — buzzer link in room panel is sufficient) */

/* Buzzer Card */
.lobby__buzzer-card {
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__buzzer-link {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-decoration: none; color: var(--text-primary);
  transition: all var(--dur) var(--ease);
  box-shadow: 3px 3px 0px var(--border-color);
}
.lobby__buzzer-link:hover {
  border-color: var(--muted-teal);
  box-shadow: 4px 4px 0px var(--muted-teal);
  transform: translate(-1px, -1px);
}
.lobby__buzzer-mascot {
  width: 48px; height: 48px; object-fit: contain;
  flex-shrink: 0; border-radius: var(--radius-md);
}
.lobby__buzzer-text {
  flex: 1; text-align: start;
  display: flex; flex-direction: column; gap: 2px;
}
.lobby__buzzer-title {
  font-weight: 700; font-size: var(--text-sm);
}
.lobby__buzzer-desc {
  font-size: var(--text-xs); color: var(--text-tertiary);
  line-height: 1.4;
}
.lobby__buzzer-arrow {
  font-size: var(--text-lg); color: var(--muted-teal);
  flex-shrink: 0;
}

/* ---------- Online Room Card ---------- */
.lobby__room-card {
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__room-create-btn {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; padding: var(--space-4) var(--space-5);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer; text-align: start;
  transition: all var(--dur) var(--ease);
  box-shadow: 3px 3px 0px var(--border-color);
  font-family: var(--font-body);
}
.lobby__room-create-btn:hover {
  border-color: var(--apricot-cream);
  box-shadow: 4px 4px 0px var(--apricot-cream);
  transform: translate(-1px, -1px);
}
.lobby__room-create-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--border-color);
}
.lobby__room-mascot {
  width: 48px; height: 48px; object-fit: contain;
  flex-shrink: 0; border-radius: var(--radius-md);
}
.lobby__room-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.lobby__room-title { font-weight: 700; font-size: var(--text-sm); }
.lobby__room-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.4; }
.lobby__room-arrow { font-size: var(--text-lg); color: var(--apricot-cream); flex-shrink: 0; }
.lobby__room-error {
  font-size: 13px; color: var(--burnt-peach); font-weight: 500;
  text-align: center; min-height: 0; margin-top: var(--space-2);
}
.lobby__room-error:empty { display: none; }

/* Room Panel (shown after creating) */
.lobby__room-panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--apricot-cream);
  border-radius: var(--radius-xl);
  background: rgba(var(--apricot-cream-rgb), 0.04);
  box-shadow: 4px 4px 0px var(--apricot-cream);
  text-align: center;
  animation: feudFadeIn 0.4s var(--ease) both;
}
.lobby__room-code-wrap {
  margin-bottom: var(--space-3);
}
.lobby__room-code-label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block; margin-bottom: var(--space-1);
}
.lobby__room-code {
  font-family: 'Space Grotesk', monospace;
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700; letter-spacing: 0.3em;
  color: var(--apricot-cream);
  margin-top: var(--space-1);
  user-select: all;
}
/* Copy code button */
.lobby__room-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--apricot-cream);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--apricot-cream);
  font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-3);
}
.lobby__room-copy-btn:hover {
  background: var(--apricot-cream); color: var(--bg-primary);
  box-shadow: 3px 3px 0px rgba(var(--apricot-cream-rgb), 0.3);
}

/* Room hint text */
.lobby__room-hint {
  font-size: var(--text-xs); color: var(--text-tertiary);
  margin-bottom: var(--space-4); line-height: 1.5;
}

/* Players list in room panel */
.lobby__room-players {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-4);
  min-height: 32px;
}
.lobby__players-empty {
  font-size: var(--text-xs); color: var(--text-tertiary);
  width: 100%; text-align: center; padding: var(--space-2);
}
.lobby__player-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
}
.lobby__player-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.lobby__player-pill[data-color="apricot"] .lobby__player-dot { background: var(--apricot-cream); }
.lobby__player-pill[data-color="teal"] .lobby__player-dot { background: var(--muted-teal); }
.lobby__player-pill[data-color="none"] .lobby__player-dot { background: var(--border-color); }
.lobby__player-pill[data-color="host"] .lobby__player-dot { background: var(--accent); }
.lobby__player-pill[data-color="host"] { border-color: var(--accent); }

.lobby__room-close {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: var(--font-body);
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-4);
  transition: color var(--dur) var(--ease);
}
.lobby__room-close:hover { color: #e74c3c; }

/* ---------- Faceoff Buzz Results ---------- */
.faceoff__buzz-results {
  max-width: 340px; width: 100%; margin: 0 auto var(--space-5);
  background: var(--bg-card);
  border: 2px solid var(--muted-teal);
  border-radius: var(--radius-lg);
  box-shadow: 3px 3px 0px var(--muted-teal);
  overflow: hidden;
  animation: feudFadeIn 0.3s var(--ease) both;
}
.faceoff__buzz-results-title {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-teal);
  border-bottom: 1px solid var(--border-color);
}
.faceoff__buzz-result {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}
.faceoff__buzz-result:last-child { border-bottom: none; }
.faceoff__buzz-result--first {
  background: rgba(var(--muted-teal-rgb), 0.06);
}
.faceoff__buzz-rank {
  font-family: 'Space Grotesk', monospace;
  font-weight: 700; color: var(--text-tertiary);
  min-width: 28px;
}
.faceoff__buzz-result--first .faceoff__buzz-rank { color: var(--muted-teal); }
.faceoff__buzz-name { flex: 1; }
.faceoff__buzz-team-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.faceoff__buzz-team-dot[data-color="apricot"] { background: var(--apricot-cream); }
.faceoff__buzz-team-dot[data-color="teal"] { background: var(--muted-teal); }
.faceoff__buzz-team-name {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-tertiary);
  margin-inline-start: 2px;
}

/* Host buzz countup timer on faceoff */
.faceoff__host-buzz-timer {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 90px; height: 90px;
  margin: var(--space-3) auto;
  animation: buzzTimerPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faceoff__host-buzz-timer svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.faceoff__host-buzz-time {
  position: relative; z-index: 1;
  font-family: 'Space Grotesk', var(--font-body);
  font-size: var(--text-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-teal);
}

/* ---------- Buttons ---------- */
.feud-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 700;
  cursor: pointer; transition: all var(--dur) var(--ease);
  border: 2px solid var(--twilight-indigo);
  text-decoration: none;
}
.feud-btn--primary {
  background: var(--apricot-cream); color: var(--twilight-indigo);
  border-color: var(--apricot-cream);
  box-shadow: 4px 4px 0px var(--twilight-indigo);
}
.feud-btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--twilight-indigo);
}
[data-theme="dark"] .feud-btn--primary {
  box-shadow: 4px 4px 0px rgba(var(--apricot-cream-rgb), 0.3);
}
.feud-btn--ghost {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-color);
}
.feud-btn--ghost:hover { border-color: var(--text-primary); }
.feud-btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-lg);
}

/* ---------- Faceoff ---------- */
.faceoff {
  text-align: center;
  padding-top: calc(var(--space-16) + 56px);
}
.faceoff__question {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-height: 80px;
  transition: border-color 0.3s var(--ease);
}
/* Typewriter blinking cursor */
.faceoff__question--typing {
  border-color: var(--accent);
}
.faceoff__question--typing::after {
  content: '|';
  display: inline;
  color: var(--accent);
  font-weight: 400;
  animation: faceoffCursor 0.6s step-end infinite;
}
@keyframes faceoffCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* When stopped mid-type: flash effect */
.faceoff__question--stopped {
  animation: faceoffFlash 0.4s ease;
}
@keyframes faceoffFlash {
  0% { border-color: var(--accent); box-shadow: 0 0 20px rgba(var(--burnt-peach-rgb), 0.25); }
  100% { border-color: var(--border-color); box-shadow: var(--shadow-card); }
}
.faceoff__desc {
  font-size: var(--text-sm); color: var(--text-tertiary);
  margin-bottom: var(--space-10);
}
.faceoff__teams {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-6);
}
.faceoff__vs {
  font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--text-tertiary); font-weight: 700;
}
.faceoff__buzz {
  flex: 1; max-width: 260px; padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  border: 3px solid var(--twilight-indigo);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  transition: all var(--dur) var(--ease);
  box-shadow: 6px 6px 0px var(--twilight-indigo);
}
.faceoff__buzz--apricot {
  background: rgba(var(--apricot-cream-rgb), 0.15);
}
.faceoff__buzz--teal {
  background: rgba(var(--muted-teal-rgb), 0.15);
}
.faceoff__buzz:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px var(--twilight-indigo);
}
.faceoff__buzz:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--twilight-indigo);
}
[data-theme="dark"] .faceoff__buzz {
  border-color: var(--border-strong);
  box-shadow: 6px 6px 0px rgba(var(--burnt-peach-rgb), 0.2);
}
.faceoff__team-name {
  font-family: var(--font-display); font-size: var(--text-xl);
}
.faceoff__buzz-text {
  font-size: var(--text-3xl); font-weight: 800;
  letter-spacing: 0.05em;
}
.faceoff__buzz--apricot .faceoff__buzz-text { color: var(--apricot-cream); }
.faceoff__buzz--teal .faceoff__buzz-text { color: var(--muted-teal); }
.faceoff__buzz--disabled {
  cursor: default; opacity: 0.7;
  pointer-events: none;
}
/* Winner highlight when a player buzzes first */
.faceoff__buzz--winner {
  animation: faceoffWinnerPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 6px 6px 0px var(--twilight-indigo), 0 0 20px rgba(var(--muted-teal-rgb), 0.3);
  transform: scale(1.04);
}
.faceoff__buzz--apricot.faceoff__buzz--winner {
  border-color: var(--apricot-cream);
  box-shadow: 6px 6px 0px var(--twilight-indigo), 0 0 20px rgba(var(--apricot-cream-rgb), 0.4);
}
.faceoff__buzz--teal.faceoff__buzz--winner {
  border-color: var(--muted-teal);
  box-shadow: 6px 6px 0px var(--twilight-indigo), 0 0 20px rgba(var(--muted-teal-rgb), 0.4);
}
@keyframes faceoffWinnerPulse {
  from { transform: scale(0.95); }
  to { transform: scale(1.04); }
}
.faceoff__buzz-player {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ---------- Player Buzz Button ---------- */
.faceoff__player-buzz {
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 4px solid var(--accent);
  background: rgba(var(--burnt-peach-rgb), 0.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin: var(--space-4) auto;
  box-shadow: 6px 6px 0px var(--accent);
  transition: all 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: buzzPulseGlow 2s ease-in-out infinite;
}
@keyframes buzzPulseGlow {
  0%, 100% { box-shadow: 6px 6px 0px var(--accent); }
  50% { box-shadow: 6px 6px 16px rgba(var(--burnt-peach-rgb), 0.4); }
}
.faceoff__player-buzz:active {
  transform: translate(4px, 4px) scale(0.95);
  box-shadow: 1px 1px 0px var(--accent);
}
.faceoff__player-buzz-label {
  font-family: var(--font-body);
  font-size: var(--text-2xl); font-weight: 800;
  color: var(--accent);
  pointer-events: none;
}
.faceoff__player-buzz--pressed {
  pointer-events: none;
  transform: none;
  box-shadow: none;
  animation: none;
  border: 3px solid var(--muted-teal);
  background: rgba(var(--muted-teal-rgb), 0.04);
  position: relative;
}
.faceoff__player-buzz--pressed .faceoff__player-buzz-label {
  color: var(--muted-teal);
}
/* Winner state — teal glow with pulse */
.faceoff__player-buzz--winner {
  pointer-events: none;
  border: 3px solid var(--muted-teal);
  background: rgba(var(--muted-teal-rgb), 0.06);
  box-shadow: 0 0 24px rgba(var(--muted-teal-rgb), 0.25),
              inset 0 0 12px rgba(var(--muted-teal-rgb), 0.06);
  animation: winnerGlow 2s ease-in-out infinite;
}
@keyframes winnerGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(var(--muted-teal-rgb), 0.2), inset 0 0 12px rgba(var(--muted-teal-rgb), 0.04); }
  50% { box-shadow: 0 0 36px rgba(var(--muted-teal-rgb), 0.35), inset 0 0 16px rgba(var(--muted-teal-rgb), 0.08); }
}
/* Late state — muted peach, shake then settle */
.faceoff__player-buzz--late {
  pointer-events: none;
  border: 3px solid rgba(var(--burnt-peach-rgb), 0.5);
  background: rgba(var(--burnt-peach-rgb), 0.04);
  box-shadow: none;
  animation: lateShake 0.4s ease-out;
  opacity: 0.7;
}
.faceoff__player-buzz--late .faceoff__player-buzz-label {
  color: var(--burnt-peach);
  font-size: var(--text-lg);
  font-weight: 700;
}
@keyframes lateShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
/* Status badge below the buzz circle — winner / late */
.faceoff__buzz-status {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full, 100px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.faceoff__buzz-status--winner {
  background: rgba(var(--muted-teal-rgb), 0.1);
  color: var(--muted-teal);
  border: 1.5px solid rgba(var(--muted-teal-rgb), 0.25);
}
.faceoff__buzz-status--late {
  background: rgba(var(--burnt-peach-rgb), 0.08);
  color: var(--burnt-peach);
  border: 1.5px solid rgba(var(--burnt-peach-rgb), 0.2);
}
.faceoff__buzz-winner-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.faceoff__buzz-winner-dot[data-color="apricot"] { background: var(--apricot-cream); }
.faceoff__buzz-winner-dot[data-color="teal"] { background: var(--muted-teal); }
/* Buzz ring timer inside pressed button */
.faceoff__player-buzz-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.faceoff__buzz-ring {
  display: block;
}
.faceoff__buzz-ring-time {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--muted-teal);
  pointer-events: none;
}
.faceoff__player-scores {
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.faceoff__player-score {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-color);
  font-weight: 500;
}
.faceoff__player-score[data-color="apricot"] { border-color: var(--apricot-cream); }
.faceoff__player-score[data-color="teal"] { border-color: var(--muted-teal); }
.faceoff__player-score strong {
  font-family: 'Space Grotesk', monospace;
  font-weight: 700; margin-inline-start: 4px;
}
.faceoff__player-vs {
  font-weight: 800; font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.faceoff__double-banner {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-lg); font-weight: 800;
  color: var(--burnt-peach);
  border: 2px solid var(--burnt-peach);
  border-radius: var(--radius-full);
  background: rgba(var(--burnt-peach-rgb), 0.08);
  margin-bottom: var(--space-4);
  animation: doublePulse 1.5s ease-in-out infinite;
}
.board__double-badge {
  position: absolute; top: var(--space-2); inset-inline-end: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm); font-weight: 800;
  color: #fff; background: var(--burnt-peach);
  border-radius: var(--radius-full);
  z-index: 10;
  animation: doublePulse 1.5s ease-in-out infinite;
}

/* ---------- Game Board ---------- */
.view-game { position: relative; }
.game-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-top: calc(var(--space-8) + 56px);
}
.board__question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-align: center;
  padding: var(--space-4) var(--space-6);
  background: var(--apricot-cream);
  color: var(--twilight-indigo);
  border: 2px solid var(--twilight-indigo);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0px var(--twilight-indigo);
}
[data-theme="dark"] .board__question {
  box-shadow: 4px 4px 0px rgba(var(--apricot-cream-rgb), 0.3);
}

/* Answers grid */
.board__answers {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.board__answer {
  height: 56px; position: relative;
  perspective: 800px;
}
.board__answer-front, .board__answer-back {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  border: 2px solid var(--twilight-indigo);
  backface-visibility: hidden;
  transition: transform 0.5s var(--ease);
  font-weight: 700;
}
.board__answer-front {
  background: var(--twilight-indigo);
  color: var(--eggshell);
  box-shadow: 3px 3px 0px rgba(var(--apricot-cream-rgb), 0.4);
}
[data-theme="dark"] .board__answer-front {
  background: var(--bg-card);
  border-color: var(--border-strong);
}
.board__answer-num {
  font-family: var(--font-display); font-size: var(--text-xl);
}
.board__answer-back {
  background: var(--bg-card);
  color: var(--text-primary);
  transform: rotateX(180deg);
  padding: 0 var(--space-4);
  justify-content: space-between;
  box-shadow: 3px 3px 0px var(--muted-teal);
}
[data-theme="dark"] .board__answer-back {
  border-color: var(--muted-teal);
  box-shadow: 3px 3px 0px rgba(var(--muted-teal-rgb), 0.3);
}
.board__answer--revealed .board__answer-front { transform: rotateX(180deg); }
.board__answer--revealed .board__answer-back { transform: rotateX(0deg); }

.board__answer-text {
  font-size: var(--text-base);
}
.board__answer-pts {
  background: var(--muted-teal); color: #fff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 800;
  min-width: 36px; text-align: center;
}

/* Strikes */
.board__strikes {
  display: flex; justify-content: center; gap: var(--space-4);
  margin: var(--space-4) 0;
}
.board__strike {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--border-color);
  transition: all 0.3s var(--ease-bounce);
}
.board__strike--active {
  color: var(--burnt-peach);
  border-color: var(--burnt-peach);
  background: rgba(var(--burnt-peach-rgb), 0.1);
  animation: strikePop 0.4s var(--ease-bounce);
}
@keyframes strikePop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.board__points-total {
  text-align: center;
  font-family: 'Space Grotesk', var(--font-body); font-size: var(--text-2xl);
  font-weight: 700; color: var(--apricot-cream);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buzz Timer (ring style — matches player buzz ring) ---------- */
.buzz-timer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px; height: 120px;
  margin: var(--space-4) auto;
  animation: buzzTimerPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes buzzTimerPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.buzz-timer__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.buzz-timer__fill {
  transition: stroke 0.2s ease;
}
.buzz-timer--urgent {
  animation: buzzTimerShake 0.3s ease infinite;
}
@keyframes buzzTimerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.buzz-timer__text {
  position: relative;
  font-family: 'Space Grotesk', var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-teal);
  z-index: 1;
}
.buzz-timer--urgent .buzz-timer__text {
  color: var(--burnt-peach);
}
/* Compact timer in host sidebar */
.host .buzz-timer {
  width: 80px; height: 80px;
  margin: var(--space-2) auto;
}
.host .buzz-timer__text { font-size: var(--text-lg); }
/* Dark mode */
[data-theme="dark"] .buzz-timer__text { color: var(--text-primary); }
[data-theme="dark"] .buzz-timer--urgent .buzz-timer__text { color: var(--burnt-peach); }

/* Input area */
.board__input-section {
  margin-top: var(--space-4);
}
.board__steal-banner {
  text-align: center;
  padding: var(--space-4);
  background: rgba(var(--burnt-peach-rgb), 0.1);
  border: 2px solid var(--burnt-peach);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-weight: 700; color: var(--burnt-peach);
  animation: feudFadeIn 0.4s var(--ease);
}
.board__steal-banner small {
  font-weight: 400; font-size: var(--text-sm);
  color: var(--text-secondary);
}
.board__steal-banner--win {
  background: rgba(var(--muted-teal-rgb), 0.08);
  border-color: var(--muted-teal);
  color: var(--muted-teal);
}
.board__steal-banner--fail {
  background: rgba(var(--twilight-indigo-rgb), 0.06);
  border-color: var(--twilight-indigo);
  color: var(--twilight-indigo);
}
[data-theme="dark"] .board__steal-banner--fail {
  background: rgba(var(--eggshell-rgb), 0.06);
  border-color: var(--eggshell);
  color: var(--eggshell);
}
.board__input-form {
  display: flex; gap: var(--space-3);
}
.board__input {
  flex: 1; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease);
}
.board__input:focus {
  outline: none; border-color: var(--apricot-cream);
  box-shadow: 0 0 0 3px rgba(var(--apricot-cream-rgb), 0.15);
}
.board__submit-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--apricot-cream); color: var(--twilight-indigo);
  border: 2px solid var(--twilight-indigo); border-radius: var(--radius-md);
  font-weight: 700; cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: 3px 3px 0px var(--twilight-indigo);
}
.board__submit-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--twilight-indigo);
}
[data-theme="dark"] .board__submit-btn {
  box-shadow: 3px 3px 0px rgba(var(--apricot-cream-rgb), 0.3);
}

/* ---------- Host Sidebar (fixed, visible on all game views) ---------- */
.host-sidebar {
  display: none;
}
body[data-feud-mode="host"] .host-sidebar {
  display: block;
  position: fixed;
  top: calc(var(--nav-height) + 56px);
  inset-inline-start: 0;
  width: 340px;
  bottom: 0;
  background: var(--bg-card);
  border-inline-end: 2px solid var(--border-color);
  box-shadow: 2px 0 16px rgba(0,0,0,0.06);
  padding: var(--space-6) var(--space-5) var(--space-10);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 800;
}
/* Hide sidebar during lobby */
#feud-app[data-view="lobby"] ~ .host-sidebar { display: none !important; }
/* Push main content + navbar when sidebar is active (toggled via JS) */
body.feud-sidebar-active #feud-app {
  margin-inline-start: 340px;
}
body.feud-sidebar-active .navbar {
  padding-inline-start: 340px;
}

/* ---------- Host Panel Content ---------- */
.host__mascot-wrap {
  text-align: center; margin-bottom: var(--space-3);
  margin-top: var(--space-2);
}
.host__mascot {
  width: 48px; height: 48px; object-fit: contain;
  border-radius: var(--radius-lg);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .host__mascot {
  mix-blend-mode: normal;
  background: var(--bg-secondary);
  padding: 4px;
}
.host__scores-mini {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-3);
}
.host__score-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 2px solid; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
}
.host__score-pill strong {
  font-family: 'Space Grotesk', var(--font-body); font-size: var(--text-lg);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

.host__title {
  font-family: var(--font-display); font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.host__team-indicator {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(var(--apricot-cream-rgb), 0.1);
  border: 1px solid var(--apricot-cream);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm); font-weight: 600;
}
.host__control-badge {
  font-size: var(--text-xs); padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--apricot-cream); color: var(--twilight-indigo);
}
.host__team-indicator--steal {
  background: rgba(var(--burnt-peach-rgb), 0.1);
  border-color: var(--burnt-peach);
}
.host__team-indicator--steal .host__control-badge {
  background: var(--burnt-peach); color: #fff;
}
.host__steal-fail-banner {
  padding: var(--space-3); margin-bottom: var(--space-3);
  text-align: center; font-weight: 700; font-size: var(--text-sm);
  color: var(--burnt-peach);
  background: rgba(var(--burnt-peach-rgb), 0.08);
  border: 2px solid var(--burnt-peach);
  border-radius: var(--radius-md);
}
.host__steal-win-banner {
  padding: var(--space-3); margin-bottom: var(--space-3);
  text-align: center; font-weight: 700; font-size: var(--text-sm);
  color: var(--muted-teal);
  background: rgba(var(--muted-teal-rgb), 0.08);
  border: 2px solid var(--muted-teal);
  border-radius: var(--radius-md);
}
.host__team-indicator--steal-win {
  border-color: var(--muted-teal);
  background: rgba(var(--muted-teal-rgb), 0.06);
}
.host__double-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px; font-weight: 800;
  color: #fff; background: var(--burnt-peach);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-inline-start: var(--space-2);
}
.host__answers {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.host__answer {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: var(--text-sm);
  transition: all var(--dur) var(--ease);
}
.host__answer--revealed {
  background: rgba(var(--muted-teal-rgb), 0.1);
  border-color: var(--muted-teal);
}
.host__answer-num {
  font-weight: 700; color: var(--text-tertiary);
  min-width: 20px;
}
.host__answer-text { flex: 1; font-weight: 600; }
.host__answer-pts {
  font-size: var(--text-xs); color: var(--text-tertiary);
}
.host__reveal-btn {
  padding: 2px 10px; font-size: var(--text-xs); font-weight: 700;
  border: 1px solid var(--muted-teal); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-teal);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.host__reveal-btn:hover { background: var(--muted-teal); color: #fff; }
.host__check { color: var(--muted-teal); font-weight: 700; }

.host__actions {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.host__actions-row {
  display: flex; gap: var(--space-2);
}
.host__actions-row > * { flex: 1; }
.host__divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) 0;
}
.host__action-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all var(--dur) var(--ease);
  text-align: center;
}
.host__action-btn:hover { border-color: var(--text-primary); transform: translateY(-1px); }
.host__action-btn--strike { border-color: var(--burnt-peach); color: var(--burnt-peach); }
.host__action-btn--strike:hover { background: var(--burnt-peach); color: #fff; }
.host__action-btn--undo-strike { border-color: var(--burnt-peach); color: var(--burnt-peach); opacity: 0.7; flex: 0 0 auto; width: 48px; }
.host__action-btn--undo-strike:hover { background: var(--burnt-peach); color: #fff; opacity: 1; }
.host__action-btn--switch { border-color: var(--twilight-indigo); color: var(--twilight-indigo); }
[data-theme="dark"] .host__action-btn--switch { border-color: var(--eggshell); color: var(--eggshell); }
.host__action-btn--switch:hover { background: var(--twilight-indigo); color: var(--eggshell); }
.host__action-btn--reveal-all { border-color: var(--muted-teal); color: var(--muted-teal); }
.host__action-btn--reveal-all:hover { background: var(--muted-teal); color: #fff; }
.host__action-btn--award-0 { border-color: var(--apricot-cream); color: var(--apricot-cream); background: rgba(var(--apricot-cream-rgb), 0.08); }
.host__action-btn--award-0:hover { background: var(--apricot-cream); color: var(--twilight-indigo); }
.host__action-btn--award-1 { border-color: var(--muted-teal); color: var(--muted-teal); background: rgba(var(--muted-teal-rgb), 0.08); }
.host__action-btn--award-1:hover { background: var(--muted-teal); color: #fff; }
.host__action-btn--skip { border-color: var(--text-tertiary); color: var(--text-tertiary); }
.host__action-btn--skip:hover { background: var(--text-tertiary); color: var(--bg-card); }
.host__action-btn--end { border-color: var(--muted-teal); color: var(--muted-teal); }
.host__action-btn--end:hover { background: var(--muted-teal); color: #fff; }
.host__action-btn--pts { border-color: var(--apricot-cream); color: var(--text-secondary); font-size: var(--text-xs); }
.host__action-btn--pts:hover { background: var(--apricot-cream); color: var(--twilight-indigo); }
.host__action-btn--undo { border-color: var(--apricot-cream); color: var(--apricot-cream); }
.host__action-btn--undo:hover { background: var(--apricot-cream); color: var(--twilight-indigo); }
.host__action-btn--share { border-color: var(--twilight-indigo); color: var(--text-secondary); }
[data-theme="dark"] .host__action-btn--share { border-color: var(--border-color); }
.host__action-btn--share:hover { background: var(--twilight-indigo); color: var(--eggshell); }

.host__section-label {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}
.host__question {
  font-family: var(--font-display); font-size: var(--text-base);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: rgba(var(--apricot-cream-rgb), 0.08);
  border: 1px solid rgba(var(--apricot-cream-rgb), 0.2);
  margin-bottom: var(--space-3);
}
.host__strike-count { opacity: 0.6; }
.host__qr-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-color); }

/* ---------- Board Team Bar ---------- */
.board__team-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 2px solid; border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.board__team-name { font-weight: 700; font-size: var(--text-base); }
.board__team-badge {
  font-size: var(--text-xs); font-weight: 700;
  padding: 2px 10px; border-radius: var(--radius-full);
  color: var(--twilight-indigo);
}
.board__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-4);
}

/* ---------- Team Members Row ---------- */
.board__teams-row {
  display: flex; gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: center;
}
.board__team-members {
  flex: 1;
  max-width: 260px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
}
.board__team-members[data-color="apricot"] {
  border-color: rgba(var(--apricot-cream-rgb), 0.4);
}
.board__team-members[data-color="teal"] {
  border-color: rgba(var(--muted-teal-rgb), 0.4);
}
.board__team-members-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
  opacity: 0.65;
}
.board__team-members[data-color="apricot"] .board__team-members-label {
  color: var(--apricot-cream);
}
.board__team-members[data-color="teal"] .board__team-members-label {
  color: var(--muted-teal);
}
.board__team-members-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: var(--text-xs);
}
.board__member {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--border-color-rgb, 128,128,128), 0.08);
  font-weight: 500;
  white-space: nowrap;
}
.board__team-members[data-color="apricot"] .board__member {
  background: rgba(var(--apricot-cream-rgb), 0.1);
  color: var(--apricot-cream);
}
.board__team-members[data-color="teal"] .board__member {
  background: rgba(var(--muted-teal-rgb), 0.1);
  color: var(--muted-teal);
}

/* ---------- QR Modal ---------- */
.qr-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  animation: feudFadeIn 0.3s var(--ease);
}
.qr-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
}
.qr-modal__card {
  position: relative; z-index: 1;
  background: var(--bg-card); border: 2px solid var(--border-color);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-card);
  text-align: center; max-width: 380px; width: 90%;
}
.qr-modal__card h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.qr-modal__card p {
  font-size: var(--text-sm); color: var(--text-secondary);
  margin-bottom: var(--space-6);
}
.qr-modal__img {
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  border: 2px solid var(--border-color);
}
.qr-modal__url {
  font-size: var(--text-xs); color: var(--text-tertiary);
  word-break: break-all;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-family: monospace;
}
.qr-modal__actions { display: flex; gap: var(--space-3); justify-content: center; }

/* ---------- Round End ---------- */
.round-end {
  text-align: center;
  padding-top: calc(var(--space-16) + 56px);
}
.round-end__trophy {
  margin: 0 auto var(--space-4);
  animation: feudFadeIn 0.6s var(--ease);
  text-align: center;
}
.round-end__trophy img {
  width: 100px; height: 100px;
  object-fit: contain;
}
.round-end__team {
  font-family: var(--font-display); font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}
.round-end__text {
  font-size: var(--text-lg); color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.round-end__points {
  font-family: 'Space Grotesk', var(--font-body); font-size: var(--text-4xl);
  font-weight: 700; color: var(--apricot-cream); margin-bottom: var(--space-8);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  animation: pointsBounce 0.6s var(--ease-bounce);
}
@keyframes pointsBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.round-end__scores, .gameover__scores {
  display: flex; justify-content: center; gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.round-end__score-card, .gameover__score-card {
  padding: var(--space-4) var(--space-8);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.round-end__score-card span, .gameover__score-card span {
  display: block; font-size: var(--text-sm); color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.round-end__score-card strong, .gameover__score-card strong {
  display: block; font-family: 'Space Grotesk', var(--font-body);
  font-size: var(--text-2xl); font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.round-end__wait {
  font-size: var(--text-sm); color: var(--text-tertiary);
  margin-top: var(--space-4);
  animation: waitPulse 1.5s ease-in-out infinite;
}
.round-end__double-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm); font-weight: 800;
  color: var(--burnt-peach);
  border: 2px solid var(--burnt-peach);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

/* ---------- Game Over ---------- */
.gameover {
  text-align: center;
  padding-top: var(--space-16);
}
.gameover__trophy-img {
  width: 120px; height: 120px; object-fit: contain;
  margin-bottom: var(--space-4);
  animation: feudFadeIn 0.6s var(--ease);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.15));
}
.gameover__label {
  font-size: var(--text-sm); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.gameover__winner {
  font-family: var(--font-display); font-size: var(--text-4xl);
  color: var(--apricot-cream); margin-bottom: var(--space-8);
  animation: pointsBounce 0.8s var(--ease-bounce);
}
.gameover__actions {
  display: flex; justify-content: center; gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  body[data-feud-mode="host"] .host-sidebar {
    width: 280px;
  }
  body.feud-sidebar-active #feud-app {
    margin-inline-start: 280px;
  }
  body.feud-sidebar-active .navbar {
    padding-inline-start: 280px;
  }
}
/* ---------- Host sidebar toggle (hidden on desktop, visible on mobile) ---------- */
.host-sidebar__toggle {
  display: none;
}
.host-sidebar__content {
  /* desktop: no wrapper styling needed */
}

@media (max-width: 768px) {
  .lobby__mode-pick { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  .lobby__mascot { width: 80px; height: 80px; margin-bottom: var(--space-3); }
  .lobby__title { font-size: var(--text-2xl); }
  .lobby__subtitle { margin-bottom: var(--space-6); }
  body[data-feud-mode="host"] .host-sidebar {
    position: fixed;
    width: 100%;
    height: auto;
    max-height: 40vh;
    top: auto; bottom: 0;
    inset-inline-start: 0;
    border-inline-end: none;
    border-top: 2px solid var(--border-color);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 850;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Expanded state */
  body[data-feud-mode="host"] .host-sidebar.host-sidebar--expanded {
    max-height: 80vh;
  }
  /* Toggle handle — visible on mobile */
  body[data-feud-mode="host"] .host-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-2) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
  }
  .host-sidebar__toggle-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background var(--dur) var(--ease);
  }
  .host-sidebar__toggle:active .host-sidebar__toggle-handle {
    background: var(--apricot-cream);
  }
  /* Scrollable content area */
  body[data-feud-mode="host"] .host-sidebar__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(40vh - 28px);
    padding: 0 var(--space-4) var(--space-6);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body[data-feud-mode="host"] .host-sidebar--expanded .host-sidebar__content {
    max-height: calc(80vh - 28px);
  }
  /* Reduce padding-bottom to match new default height */
  body.feud-sidebar-active #feud-app {
    margin-inline-start: 0;
    padding-bottom: 42vh;
  }
  body.feud-sidebar-active .navbar {
    padding-inline-start: 0;
  }
  /* Expanded bottom padding */
  body.feud-sidebar-expanded #feud-app {
    padding-bottom: 82vh;
  }
  /* Hide mascot on mobile to save space */
  body[data-feud-mode="host"] .host__mascot-wrap {
    display: none;
  }
  /* Bigger touch targets for buttons */
  body[data-feud-mode="host"] .host__action-btn {
    min-height: 44px;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
  }
  body[data-feud-mode="host"] .host__reveal-btn {
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }
  /* Compact question on mobile */
  body[data-feud-mode="host"] .host__question {
    font-size: var(--text-sm);
    padding: var(--space-2);
  }
  /* Compact title */
  body[data-feud-mode="host"] .host__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }
  /* Reduce spacing between sections */
  body[data-feud-mode="host"] .host__section-label {
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
  }
  body[data-feud-mode="host"] .host__answers {
    margin-bottom: var(--space-3);
    gap: var(--space-1);
  }
  body[data-feud-mode="host"] .host__answer {
    padding: var(--space-2);
  }
  body[data-feud-mode="host"] .host__actions {
    gap: var(--space-2);
  }
  body[data-feud-mode="host"] .host__divider {
    margin: var(--space-1) 0;
  }
  /* Team indicator more compact */
  body[data-feud-mode="host"] .host__team-indicator {
    margin-bottom: var(--space-2);
  }
}

/* ---------- Player compact board (one-screen) ---------- */
[data-feud-mode="player"] #feud-app > section {
  padding-inline: var(--space-4);
  padding-bottom: var(--space-2);
  /* keep base padding-top from line 91 for scorebar clearance */
}
[data-feud-mode="player"] .board__question {
  font-size: var(--text-xl);
  padding: var(--space-3) var(--space-4);
  box-shadow: 3px 3px 0px var(--twilight-indigo);
}
[data-feud-mode="player"] .board__team-bar {
  padding: var(--space-2) var(--space-4);
  margin: var(--space-2) 0;
  font-size: var(--text-base);
}
[data-feud-mode="player"] .board__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: var(--space-2);
  direction: ltr; /* keep column 1 on the left in RTL */
}
[data-feud-mode="player"] .board__answer {
  height: 56px;
}
[data-feud-mode="player"] .board__answer-num {
  font-size: var(--text-lg);
}
[data-feud-mode="player"] .board__answer-text {
  font-size: var(--text-base);
}
[data-feud-mode="player"] .board__answer-pts {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  min-width: 32px;
}
[data-feud-mode="player"] .board__strikes {
  margin: var(--space-2) 0;
  gap: var(--space-3);
}
[data-feud-mode="player"] .board__strike {
  width: 36px; height: 36px;
  font-size: 1.1rem;
}
[data-feud-mode="player"] .board__points-total {
  font-size: var(--text-lg);
  margin-top: 0;
}
[data-feud-mode="player"] .board__footer {
  display: flex; align-items: center; justify-content: center; gap: var(--space-6);
  margin-top: var(--space-2);
}
[data-feud-mode="player"] .board__steal-banner {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}
[data-feud-mode="player"] .buzz-timer {
  width: 60px; height: 60px;
  margin: var(--space-2) auto;
}
[data-feud-mode="player"] .buzz-timer__text {
  font-size: var(--text-base);
}

@media (max-width: 960px) {
  [data-feud-mode="player"] .faceoff__question {
    font-size: clamp(1.35rem, 4.2vw, 1.9rem);
    line-height: 1.35;
  }
  [data-feud-mode="player"] .faceoff__player-buzz {
    width: min(72vw, 280px);
    height: min(72vw, 280px);
  }
  [data-feud-mode="player"] .faceoff__player-scores {
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
  }
  [data-feud-mode="player"] .faceoff__player-score {
    min-width: 150px;
  }
  [data-feud-mode="player"] .board__footer {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  [data-feud-mode="player"] .board__teams-row {
    flex-direction: column;
    align-items: stretch;
  }
  [data-feud-mode="player"] .board__team-members {
    max-width: none;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .faceoff__teams { flex-direction: column; }
  .faceoff__buzz { max-width: 100%; }
  .faceoff__vs { transform: rotate(90deg); }
  .scorebar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .scorebar__team { min-width: 100px; padding: var(--space-1) var(--space-2); }
  .scorebar__name { font-size: var(--text-xs); }
  .board__answer { height: 50px; }
  .lobby__mode-pick { grid-template-columns: 1fr; }
  .host__actions-row { flex-direction: column; }
  .round-end__scores, .gameover__scores { flex-direction: column; align-items: center; }
  /* Player on mobile — even more compact */
  [data-feud-mode="player"] .board__answer { height: 46px; }
  [data-feud-mode="player"] .board__strike { width: 30px; height: 30px; font-size: 0.9rem; }
  [data-feud-mode="player"] .buzz-timer { width: 50px; height: 50px; }
}

@media (max-width: 640px) {
  [data-feud-mode="player"] .faceoff__desc {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }
  [data-feud-mode="player"] .faceoff__player-buzz {
    width: min(82vw, 260px);
    height: min(82vw, 260px);
  }
  [data-feud-mode="player"] .faceoff__player-scores {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  [data-feud-mode="player"] .faceoff__player-score {
    justify-content: space-between;
    width: 100%;
  }
  [data-feud-mode="player"] .faceoff__player-vs { display: none; }
  [data-feud-mode="player"] .board__footer { justify-content: center; }
  body[data-feud-mode="host"] .host-sidebar { padding-bottom: env(safe-area-inset-bottom); }
  body[data-feud-mode="host"] .host-sidebar__content { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
}

/* ---------- Screen Mode (TV Display) ---------- */
/* Screen mode inherits player layout for the board, with extra TV-optimized styles */
[data-feud-mode="screen"] #feud-app > section {
  padding-inline: var(--space-6);
  padding-bottom: var(--space-4);
}
[data-feud-mode="screen"] #feud-app { padding-top: var(--space-4); }
[data-feud-mode="screen"] .scorebar { top: 0; }
[data-feud-mode="screen"] .view-lobby { padding-top: calc(var(--space-16) + var(--space-8)); }
[data-feud-mode="screen"] .board__question {
  font-size: var(--text-2xl);
  padding: var(--space-4) var(--space-6);
  box-shadow: 3px 3px 0px var(--twilight-indigo);
}
[data-feud-mode="screen"] .board__team-bar {
  padding: var(--space-3) var(--space-6);
  margin: var(--space-3) 0;
  font-size: var(--text-lg);
}
[data-feud-mode="screen"] .board__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: var(--space-3);
  direction: ltr;
}
[data-feud-mode="screen"] .board__answer { height: 64px; }
[data-feud-mode="screen"] .board__answer-num { font-size: var(--text-xl); }
[data-feud-mode="screen"] .board__answer-text { font-size: var(--text-lg); }
[data-feud-mode="screen"] .board__answer-pts { padding: var(--space-1) var(--space-3); font-size: var(--text-base); min-width: 40px; }
[data-feud-mode="screen"] .board__strikes { margin: var(--space-3) 0; gap: var(--space-4); }
[data-feud-mode="screen"] .board__strike { width: 44px; height: 44px; font-size: 1.3rem; }
[data-feud-mode="screen"] .board__points-total { font-size: var(--text-xl); margin-top: 0; }
[data-feud-mode="screen"] .board__footer {
  display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  margin-top: var(--space-3);
}
[data-feud-mode="screen"] .board__steal-banner {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  margin: var(--space-3) 0;
}
[data-feud-mode="screen"] .scorebar__name { font-size: var(--text-base); }
[data-feud-mode="screen"] .scorebar__score { font-size: var(--text-xl); }
/* Faceoff screen mode styles */
[data-feud-mode="screen"] .faceoff__question { font-size: var(--text-2xl); }
[data-feud-mode="screen"] .faceoff__buzz { cursor: default; }
[data-feud-mode="screen"] .faceoff__buzz:hover { transform: none; box-shadow: none; }
.faceoff__screen-buzz-result {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-lg); padding: var(--space-3) var(--space-4);
  background: rgba(var(--apricot-cream-rgb), 0.08);
  border: 2px solid var(--apricot-cream);
  border-radius: var(--radius-lg);
  margin: var(--space-4) auto; max-width: 400px;
  animation: feudFadeIn 0.4s ease;
}
.faceoff__team-score {
  display: block; font-family: var(--font-display); font-size: var(--text-2xl);
  margin-top: var(--space-1); opacity: 0.7;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .board__answer-front, .board__answer-back { transition: none; }
  .board__strike--active { animation: none; }
  .round-end__points { animation: none; }
  .gameover__winner { animation: none; }
  @keyframes feudFadeIn { from { opacity: 1; transform: none; } }
}