.fgn-app {
  --fgn-bg: #120f2d;
  --fgn-panel: rgba(255, 255, 255, 0.96);
  --fgn-panel-soft: rgba(255, 255, 255, 0.12);
  --fgn-text: #111827;
  --fgn-muted: #667085;
  --fgn-brand: #7c3aed;
  --fgn-brand-2: #c0143c;
  --fgn-border: rgba(17, 24, 39, 0.12);
  --fgn-radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fgn-text);
}

.fgn-app * {
  box-sizing: border-box;
}

.fgn-tv-shell {
  min-height: 88vh;
  padding: clamp(24px, 4vw, 56px);
  background:
    radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.38), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(192, 20, 60, 0.28), transparent 34%),
    linear-gradient(135deg, #120f2d 0%, #1d1646 50%, #2a1237 100%);
  border-radius: 28px;
  color: #fff;
  overflow: hidden;
}

.fgn-phone-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 14px;
}

.fgn-topbar,
.fgn-lobby-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.fgn-tv-shell h1,
.fgn-tv-shell h2,
.fgn-card h1,
.fgn-card h2 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.fgn-tv-shell h1 {
  font-size: clamp(42px, 6vw, 92px);
}

.fgn-card h1 {
  font-size: clamp(34px, 8vw, 52px);
}

.fgn-tv-shell h2 {
  font-size: clamp(28px, 3vw, 46px);
}

.fgn-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
  color: #a78bfa;
}

.fgn-card {
  background: var(--fgn-panel);
  color: var(--fgn-text);
  border: 1px solid var(--fgn-border);
  border-radius: var(--fgn-radius);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 22px 70px rgba(0,0,0,0.22);
}

.fgn-start-card {
  max-width: 760px;
}

.fgn-start-card p,
.fgn-card p {
  color: var(--fgn-muted);
  font-size: 17px;
}

.fgn-grid {
  display: grid;
  gap: 24px;
}

.fgn-grid-host {
  grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.55fr);
  align-items: stretch;
}

.fgn-join-card,
.fgn-lobby-card,
.fgn-teams-card {
  min-height: 100%;
}

.fgn-teams-card {
  margin-top: 24px;
}

.fgn-status-pill {
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  text-transform: capitalize;
}

.fgn-qr-placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  border-radius: 22px;
  background: #f5f3ff;
  border: 1px dashed rgba(124, 58, 237, 0.3);
  color: var(--fgn-muted);
  margin: 18px 0;
  overflow: hidden;
}

.fgn-qr-placeholder img {
  display: block;
  width: min(100%, 320px);
  height: auto;
}

.fgn-code-box {
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff1f4 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.fgn-code-box span {
  color: var(--fgn-muted);
  font-weight: 700;
}

.fgn-code-box strong {
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: 0.08em;
  color: var(--fgn-brand);
}

.fgn-code-box-small {
  margin: 18px 0;
}

.fgn-code-box-small strong {
  font-size: 34px;
}

.fgn-player-count {
  min-width: 116px;
  border-radius: 20px;
  background: #111827;
  color: #fff;
  padding: 14px 18px;
  text-align: center;
}

.fgn-player-count strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}

.fgn-player-count span {
  display: block;
  color: rgba(255,255,255,0.74);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.fgn-player-list,
.fgn-team-list {
  display: grid;
  gap: 12px;
}

.fgn-player-row,
.fgn-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.fgn-player-row {
  justify-content: flex-start;
}

.fgn-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #ede9fe;
  font-size: 25px;
  flex: 0 0 auto;
}

.fgn-player-text,
.fgn-team-row div:first-child {
  display: grid;
  gap: 3px;
}

.fgn-player-text strong,
.fgn-team-row strong {
  font-size: 18px;
}

.fgn-player-text span,
.fgn-team-row span {
  color: var(--fgn-muted);
  font-size: 14px;
}

.fgn-team-score {
  min-width: 54px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.fgn-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.fgn-label {
  display: block;
  font-weight: 800;
  color: #111827;
  margin-top: 6px;
}

.fgn-label span {
  color: var(--fgn-muted);
  font-weight: 600;
}

.fgn-input {
  width: 100%;
  border: 1px solid #d0d5dd !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  min-height: 52px;
  font-size: 17px !important;
  color: #111827 !important;
}

.fgn-button,
.fgn-link-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  min-height: 52px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--fgn-brand), var(--fgn-brand-2));
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.25);
}

.fgn-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.fgn-link-button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 13px;
}

.fgn-small {
  font-size: 14px !important;
  color: var(--fgn-muted) !important;
}

.fgn-warning,
.fgn-empty {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412 !important;
  border-radius: 16px;
  padding: 14px 16px;
}

.fgn-success-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 42px;
  font-weight: 900;
  margin: 20px 0 12px;
}

.fgn-joined-state {
  margin-top: 18px;
}

.fgn-phone-status {
  margin: 18px 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f5f3ff;
  color: var(--fgn-brand);
  font-weight: 900;
}

.fgn-mini-list {
  display: grid;
  gap: 8px;
}

.fgn-mini-player {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-weight: 700;
}

@media (max-width: 860px) {
  .fgn-grid-host {
    grid-template-columns: 1fr;
  }

  .fgn-topbar,
  .fgn-lobby-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.fgn-grid-bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
}

.fgn-game-card {
  margin-top: 24px;
}

.fgn-control-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.fgn-button-secondary {
  background: #111827;
  box-shadow: none;
}

.fgn-reset-button {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  box-shadow: none;
}

.fgn-question-panel,
.fgn-question-wrap,
.fgn-phone-question {
  display: grid;
  gap: 18px;
}

.fgn-question-meta {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f5f3ff;
  color: var(--fgn-brand);
  font-size: 13px;
  font-weight: 900;
}

.fgn-question-title {
  font-size: clamp(30px, 4vw, 58px) !important;
  letter-spacing: -0.04em;
  line-height: 1.03;
}

.fgn-options-grid,
.fgn-phone-options {
  display: grid;
  gap: 12px;
}

.fgn-options-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fgn-option-card,
.fgn-answer-button {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 18px;
  padding: 16px;
  text-align: left;
}

.fgn-option-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.fgn-option-card strong,
.fgn-answer-button {
  font-size: 17px;
  font-weight: 900;
}

.fgn-option-card span {
  color: var(--fgn-muted);
  font-weight: 800;
  white-space: nowrap;
}

.fgn-option-card.is-correct,
.fgn-answer-button.is-correct {
  border-color: #22c55e;
  background: #dcfce7;
  color: #166534;
}

.fgn-answer-button.is-selected {
  border-color: var(--fgn-brand);
  background: #f5f3ff;
  color: var(--fgn-brand);
}

.fgn-answer-button.is-wrong {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
}

.fgn-answer-button:disabled {
  cursor: not-allowed;
}

.fgn-reveal-banner,
.fgn-winner-card {
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff1f4 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: #111827;
  font-weight: 900;
}

.fgn-winner-card h2 {
  font-size: clamp(30px, 5vw, 64px) !important;
}

.fgn-phone-game {
  margin-top: 18px;
}

.fgn-phone-question-title {
  font-size: clamp(24px, 7vw, 34px) !important;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fgn-answer-button {
  width: 100%;
  min-height: 62px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .fgn-grid-bottom,
  .fgn-options-grid {
    grid-template-columns: 1fr;
  }

  .fgn-control-buttons {
    justify-content: flex-start;
  }
}

.fgn-team-preview {
  margin-top: 12px;
  border-radius: 16px;
  padding: 13px 15px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  color: #475467;
  font-size: 15px;
}

.fgn-team-preview strong {
  color: #111827;
}

.fgn-team-field[hidden] {
  display: none !important;
}

.fgn-mode-label {
  margin: 6px 0 0 !important;
}

.fgn-timer-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 10px 0 18px;
  border-radius: 999px;
  padding: 10px 16px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #155e75;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.fgn-timer-card.is-expired,
.fgn-timeup-banner {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.fgn-answer-button.is-timeup {
  opacity: 0.55;
}

/* Phase 7: TV polish and holiday game feel */
.fgn-app {
  position: relative;
}

.fgn-tv-shell {
  position: relative;
}

.fgn-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fgn-sound-toggle {
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 900;
  cursor: pointer;
}

.fgn-sound-toggle.is-muted {
  opacity: 0.72;
}

.fgn-answer-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: -4px;
}

.fgn-answer-progress-bar {
  position: relative;
  flex: 1;
  min-height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #ede9fe;
  border: 1px solid rgba(124, 58, 237, 0.16);
}

.fgn-answer-progress-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--fgn-brand), var(--fgn-brand-2));
  transition: width 0.35s ease;
}

.fgn-answer-progress strong {
  color: #111827;
  font-size: 14px;
  white-space: nowrap;
}

.fgn-timer-card.is-warning {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
  animation: fgnPulseWarning 0.7s ease-in-out infinite alternate;
}

.fgn-question-wrap.is-final-warning,
.fgn-phone-question.is-final-warning {
  border-radius: 24px;
  outline: 3px solid rgba(192, 20, 60, 0.14);
  outline-offset: 8px;
}

.fgn-question-wrap.is-time-up,
.fgn-phone-question.is-time-up {
  filter: saturate(0.92);
}

.fgn-team-row.is-leading {
  border-color: rgba(124, 58, 237, 0.28);
  background: linear-gradient(135deg, #f7f4ff 0%, #fff1f4 100%);
}

.fgn-winner-card-party {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(26px, 5vw, 54px);
}

.fgn-winner-card-party::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 220px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 62%);
  pointer-events: none;
}

.fgn-trophy-mark {
  display: grid;
  place-items: center;
  width: clamp(76px, 10vw, 116px);
  height: clamp(76px, 10vw, 116px);
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: clamp(42px, 6vw, 72px);
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.25);
}

.fgn-winner-score {
  font-size: clamp(24px, 4vw, 42px) !important;
  color: var(--fgn-brand) !important;
  font-weight: 950;
  margin: 10px 0 22px;
}

.fgn-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 8px;
}

.fgn-podium-card {
  display: grid;
  gap: 5px;
  align-content: center;
  min-height: 130px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
}

.fgn-podium-card.fgn-place-1 {
  transform: translateY(-10px);
  border-color: rgba(124, 58, 237, 0.26);
  background: linear-gradient(135deg, #f7f4ff 0%, #fff1f4 100%);
}

.fgn-podium-medal {
  font-size: 34px;
  line-height: 1;
}

.fgn-podium-card strong {
  font-size: 18px;
  color: #111827;
}

.fgn-podium-card span {
  color: var(--fgn-muted);
  font-weight: 900;
}

.fgn-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.fgn-confetti-piece {
  position: absolute;
  top: -60px;
  animation-name: fgnConfettiFall;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
  animation-fill-mode: forwards;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.18));
}

.fgn-celebration-toast {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 13px 22px;
  background: rgba(17, 24, 39, 0.86);
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.02em;
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}

@keyframes fgnConfettiFall {
  0% {
    transform: translate3d(0, -80px, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--fgn-drift, 0px), 100vh, 0) rotate(720deg);
    opacity: 0;
  }
}

@keyframes fgnPulseWarning {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(192, 20, 60, 0);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgba(192, 20, 60, 0.08);
  }
}

@media (max-width: 860px) {
  .fgn-topbar-actions {
    justify-content: flex-start;
  }

  .fgn-podium {
    grid-template-columns: 1fr;
  }

  .fgn-podium-card.fgn-place-1 {
    transform: none;
  }

  .fgn-answer-progress {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
}

/* Phase 7.2: Enfold full-screen polish */
html.fgn-fullscreen-root,
html.fgn-fullscreen-root body {
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #120f2d !important;
}

body.fgn-fullscreen-page #header,
body.fgn-fullscreen-page #footer,
body.fgn-fullscreen-page #socket,
body.fgn-fullscreen-page .title_container,
body.fgn-fullscreen-page .stretch_full,
body.fgn-fullscreen-page .avia-breadcrumbs {
  display: none !important;
}

body.fgn-fullscreen-page #wrap_all,
body.fgn-fullscreen-page #main,
body.fgn-fullscreen-page .main_color,
body.fgn-fullscreen-page .main_color .container_wrap,
body.fgn-fullscreen-page .template-page,
body.fgn-fullscreen-page .content,
body.fgn-fullscreen-page .entry-content-wrapper,
body.fgn-fullscreen-page .post-entry,
body.fgn-fullscreen-page .post-entry .entry-content,
body.fgn-fullscreen-page .avia_textblock {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.fgn-fullscreen-page #top .container,
body.fgn-fullscreen-page .container,
body.fgn-fullscreen-page .container_wrap .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.fgn-fullscreen-page .sidebar,
body.fgn-fullscreen-page .content .entry-content-wrapper .sidebar {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-app {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.fgn-fullscreen-page .fgn-tv-shell {
  min-height: 100vh;
  min-height: 100svh;
  border-radius: 0;
  padding: clamp(22px, 3.1vw, 54px);
}

body.fgn-fullscreen-page .fgn-phone-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(18px, 4vw, 34px) 16px;
}

body.fgn-fullscreen-page .fgn-host .fgn-tv-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}

body.fgn-fullscreen-page .fgn-host .fgn-topbar {
  margin-bottom: 0;
}

body.fgn-fullscreen-page .fgn-host .fgn-grid-host {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(340px, 0.75fr) minmax(520px, 1.25fr);
  align-items: stretch;
}

body.fgn-fullscreen-page .fgn-host .fgn-card {
  backdrop-filter: blur(14px);
}

body.fgn-fullscreen-page .fgn-host .fgn-join-card,
body.fgn-fullscreen-page .fgn-host .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host .fgn-game-card,
body.fgn-fullscreen-page .fgn-host .fgn-teams-card,
body.fgn-fullscreen-page .fgn-host .fgn-leaderboard-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.30);
}

body.fgn-fullscreen-page .fgn-host .fgn-qr-placeholder {
  min-height: clamp(240px, 27vh, 380px);
}

body.fgn-fullscreen-page .fgn-host .fgn-qr-placeholder img {
  width: min(100%, 360px);
}

body.fgn-fullscreen-page .fgn-host .fgn-player-list,
body.fgn-fullscreen-page .fgn-host .fgn-team-list,
body.fgn-fullscreen-page .fgn-host #fgn-leaderboard-list {
  max-height: min(46vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

body.fgn-fullscreen-page .fgn-host .fgn-game-card,
body.fgn-fullscreen-page .fgn-host .fgn-grid-bottom {
  margin-top: 0;
}

body.fgn-fullscreen-page .fgn-host .fgn-grid-bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.fgn-fullscreen-page .fgn-start-card {
  width: min(820px, 100%);
  margin: auto;
}

body.fgn-fullscreen-page .fgn-player .fgn-card {
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

body.fgn-fullscreen-page .fgn-phone-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 8%, rgba(124, 58, 237, 0.40), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(192, 20, 60, 0.30), transparent 36%),
    linear-gradient(135deg, #120f2d 0%, #1d1646 50%, #2a1237 100%);
}

@media (min-width: 1300px) {
  body.fgn-fullscreen-page .fgn-host .fgn-tv-shell h1 {
    font-size: clamp(54px, 5vw, 92px);
  }

  body.fgn-fullscreen-page .fgn-host .fgn-question-title {
    font-size: clamp(42px, 3.8vw, 72px) !important;
  }

  body.fgn-fullscreen-page .fgn-host .fgn-player-row,
  body.fgn-fullscreen-page .fgn-host .fgn-team-row {
    padding: 16px 18px;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page .fgn-host .fgn-grid-host,
  body.fgn-fullscreen-page .fgn-host .fgn-grid-bottom {
    grid-template-columns: 1fr;
  }

  body.fgn-fullscreen-page .fgn-host .fgn-player-list,
  body.fgn-fullscreen-page .fgn-host .fgn-team-list,
  body.fgn-fullscreen-page .fgn-host #fgn-leaderboard-list {
    max-height: none;
  }
}


/* Phase 7.3: state-based one-screen TV host layouts */
body.fgn-fullscreen-page .fgn-host .fgn-tv-shell {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

body.fgn-fullscreen-page .fgn-host .fgn-topbar {
  min-height: 0;
  align-items: center;
}

body.fgn-fullscreen-page .fgn-host .fgn-topbar h1 {
  font-size: clamp(34px, 3.7vw, 68px);
}

body.fgn-fullscreen-page .fgn-host .fgn-topbar .fgn-kicker {
  margin-bottom: 4px;
}

body.fgn-fullscreen-page .fgn-host .fgn-card {
  min-height: 0;
  overflow: hidden;
}

body.fgn-fullscreen-page .fgn-host .fgn-lobby-head {
  margin-bottom: clamp(10px, 1.2vw, 18px);
}

/* Lobby screen: QR + players with compact start controls. */
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-grid-host {
  display: grid;
  min-height: 0;
  height: 100%;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-game-card {
  padding: clamp(14px, 1.3vw, 22px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-game-card .fgn-lobby-head {
  margin-bottom: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-question-panel {
  display: none;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-grid-bottom {
  display: none;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card {
  display: flex;
  flex-direction: column;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder {
  flex: 1;
  min-height: 0;
  margin: clamp(10px, 1.2vw, 16px) 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder img {
  width: min(100%, 40vh, 390px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Question/reveal screens: make the question the main canvas and keep scores compact at the bottom. */
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
  grid-template-rows: auto minmax(0, 1fr) minmax(140px, 23vh);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-host,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-host {
  display: none;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-game-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-game-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 30px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-panel,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-panel {
  min-height: 0;
  flex: 1;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-wrap,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-wrap {
  min-height: 0;
  height: 100%;
  gap: clamp(10px, 1.2vw, 16px);
  grid-template-rows: auto auto auto auto 1fr auto;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-title,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-title {
  font-size: clamp(34px, 3.4vw, 62px) !important;
  line-height: 0.98;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-timer-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-timer-card {
  margin: 0;
  padding: 8px 14px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-options-grid,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-options-grid {
  min-height: 0;
  align-content: stretch;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-option-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card {
  min-height: 0;
  padding: clamp(12px, 1.25vw, 18px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
  display: grid;
  min-height: 0;
  height: 100%;
  margin-top: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-card {
  padding: clamp(12px, 1.2vw, 18px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom h2,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom h2 {
  font-size: clamp(20px, 1.7vw, 30px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-lobby-head,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-lobby-head {
  margin-bottom: 8px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-question #fgn-leaderboard-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal #fgn-leaderboard-list {
  max-height: none;
  height: calc(100% - 44px);
  overflow: auto;
  gap: 8px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row {
  padding: 9px 11px;
  border-radius: 14px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-score,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-score {
  min-height: 34px;
  min-width: 44px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row strong,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row strong {
  font-size: 15px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row span,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row span {
  font-size: 12px;
}

/* Finished screen: winner card takes the full canvas. */
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-tv-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-grid-host,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-grid-bottom {
  display: none;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-game-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-question-panel {
  min-height: 0;
  flex: 1;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-winner-card-party {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(8px, 1.2vw, 16px);
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-podium {
  width: min(920px, 100%);
  margin: 12px auto 6px;
}

/* Prevent Enfold/TV views from page scrolling once inside the game. */
body.fgn-fullscreen-page.fgn-host-page {
  overflow: hidden !important;
}

@media (max-height: 760px) and (min-width: 900px) {
  body.fgn-fullscreen-page .fgn-host .fgn-tv-shell {
    padding: 18px;
    gap: 12px;
  }

  body.fgn-fullscreen-page .fgn-host .fgn-card {
    padding: 16px;
  }

  body.fgn-fullscreen-page .fgn-host .fgn-topbar h1 {
    font-size: clamp(30px, 3vw, 52px);
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-title,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-title {
    font-size: clamp(28px, 3vw, 50px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
  }

  body.fgn-fullscreen-page .fgn-host .fgn-kicker {
    font-size: 10px;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-tv-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  body.fgn-fullscreen-page.fgn-host-page {
    overflow: auto !important;
  }
}

/* Phase 7.4: Enfold setup screen fix
   The setup screen must be usable before a room exists. The in-game screens can remain locked to one TV viewport,
   but the pre-room screen should be compact and never hide the Start TV Lobby button. */
html.fgn-fullscreen-root,
html.fgn-fullscreen-root body {
  margin-top: 0 !important;
}

body.fgn-fullscreen-page #wpadminbar {
  display: none !important;
}

body.fgn-fullscreen-page.admin-bar {
  margin-top: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page,
body.fgn-fullscreen-page.fgn-host-page.fgn-host-setup-page {
  overflow: auto !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  overflow: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  padding: clamp(18px, 2.1vw, 34px);
  gap: clamp(12px, 1.4vw, 20px);
  border-radius: 0;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-topbar,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar {
  margin-bottom: 0;
  align-items: center;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-topbar h1,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar h1 {
  font-size: clamp(30px, 3.4vw, 58px);
  letter-spacing: -0.055em;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-topbar .fgn-kicker,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar .fgn-kicker {
  margin-bottom: 3px;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-card,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-card {
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
}

.fgn-start-compact {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
  padding: clamp(18px, 2vw, 28px) !important;
}

.fgn-start-intro {
  display: grid;
  gap: 12px;
  align-content: start;
}

.fgn-start-intro h2 {
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 0.98;
}

.fgn-start-intro p {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
}

.fgn-setup-note {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f4ff 0%, #fff1f4 100%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  color: #344054;
}

.fgn-setup-note strong {
  color: #111827;
}

.fgn-start-form {
  display: grid;
  gap: 12px;
}

.fgn-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.fgn-setup-field-wide {
  grid-column: 1 / -1;
}

.fgn-setup-field .fgn-label,
.fgn-start-form .fgn-label {
  margin: 0 0 6px;
  font-size: 13px;
}

.fgn-start-form .fgn-input {
  min-height: 48px;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}

.fgn-team-preview-compact {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  gap: 3px;
  border-radius: 16px;
}

.fgn-team-preview-compact strong {
  display: block;
}

.fgn-team-preview-compact span {
  color: #344054;
  line-height: 1.35;
}

.fgn-start-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  padding-top: 2px;
}

.fgn-start-actions .fgn-button {
  min-width: 210px;
  min-height: 50px;
}

.fgn-start-actions .fgn-small {
  margin: 0;
  line-height: 1.35;
}

body.fgn-fullscreen-page.fgn-active-room-page.fgn-host-page {
  overflow: hidden !important;
}

@media (max-height: 760px) and (min-width: 900px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
    padding: 14px 18px;
    gap: 10px;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-topbar h1,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar h1 {
    font-size: clamp(28px, 3vw, 48px);
  }

  .fgn-start-compact {
    grid-template-columns: minmax(220px, 0.7fr) minmax(460px, 1.3fr);
    padding: 16px !important;
    gap: 16px;
  }

  .fgn-start-intro h2 {
    font-size: clamp(28px, 3vw, 44px);
  }

  .fgn-start-intro p,
  .fgn-team-preview-compact span,
  .fgn-setup-note span {
    font-size: 14px;
  }

  .fgn-setup-note,
  .fgn-team-preview-compact {
    padding: 10px 12px;
  }

  .fgn-start-form {
    gap: 10px;
  }

  .fgn-start-form .fgn-input {
    min-height: 44px;
    padding: 9px 12px !important;
  }
}

@media (max-width: 860px) {
  .fgn-start-compact,
  .fgn-setup-grid,
  .fgn-start-actions {
    grid-template-columns: 1fr;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
    overflow: visible;
  }
}

/* Phase 7.5: premium setup dashboard based on the approved Family Game Night mockup. */
body.fgn-fullscreen-page.fgn-host-setup-page,
body.fgn-fullscreen-page.fgn-host-page.fgn-host-setup-page {
  overflow: auto !important;
  background: #120f2d !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  padding: clamp(18px, 2.6vw, 38px) clamp(20px, 4vw, 66px);
  gap: clamp(16px, 2vw, 26px);
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 9% 10%, rgba(124, 58, 237, 0.56), transparent 28%),
    radial-gradient(circle at 92% 9%, rgba(219, 39, 119, 0.56), transparent 30%),
    radial-gradient(circle at 84% 88%, rgba(192, 20, 60, 0.22), transparent 32%),
    linear-gradient(135deg, #140d35 0%, #20124c 43%, #3a1037 100%);
  border-radius: 0;
  overflow: auto;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fgn-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-weight: 950;
  line-height: 0.9;
}

.fgn-brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 27px;
  background: linear-gradient(135deg, rgba(139, 47, 201, 0.9), rgba(192, 20, 60, 0.92));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 14px 32px rgba(0,0,0,0.22);
}

.fgn-brand-small,
.fgn-brand-large {
  margin: 0;
  color: #fff !important;
}

.fgn-brand-small { font-size: clamp(18px, 1.6vw, 26px); }
.fgn-brand-large { font-size: clamp(21px, 1.9vw, 31px); }

.fgn-setup-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 16px 38px rgba(0,0,0,0.18);
  backdrop-filter: blur(16px);
}

.fgn-setup-stepper span {
  min-height: 42px;
  padding: 0 18px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.58);
  font-weight: 850;
  white-space: nowrap;
}

.fgn-setup-stepper span b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
}

.fgn-setup-stepper span.is-active {
  color: #fff;
  background: linear-gradient(135deg, #8b2fc9 0%, #7c3aed 100%);
  box-shadow: 0 10px 28px rgba(124,58,237,0.32);
}

.fgn-setup-stepper span.is-active b {
  background: #fff;
  color: #7c3aed;
}

.fgn-status-pill-setup {
  display: none !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
  width: min(1320px, 100%);
  min-height: clamp(560px, calc(100svh - 142px), 680px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, 0.88fr) minmax(520px, 1.12fr);
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(15, 13, 48, 0.88), rgba(46, 26, 82, 0.84));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 34px 95px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(18px);
}

.fgn-setup-panel {
  min-width: 0;
  color: #fff;
}

.fgn-setup-panel-intro {
  background:
    radial-gradient(circle at 18% 34%, rgba(124,58,237,0.28), transparent 36%),
    linear-gradient(180deg, rgba(12, 13, 46, 0.96), rgba(12, 13, 46, 0.82));
  border-right: 1px solid rgba(255,255,255,0.12);
}

.fgn-setup-panel-form {
  background:
    radial-gradient(circle at 88% 6%, rgba(219,39,119,0.14), transparent 36%),
    linear-gradient(180deg, rgba(42,24,78,0.68), rgba(20,18,55,0.38));
}

.fgn-setup-panel-inner {
  height: 100%;
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.4vw, 21px);
  padding: clamp(28px, 3.2vw, 44px);
}

.fgn-setup-panel .fgn-kicker {
  margin: 0;
  color: #c084fc;
  letter-spacing: 0.12em;
  font-size: clamp(12px, 0.9vw, 14px);
}

.fgn-setup-panel h2 {
  margin: 0;
  max-width: 620px;
  color: #fff;
  font-size: clamp(28px, 3.1vw, 43px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-shadow: 0 12px 24px rgba(0,0,0,0.28);
}

.fgn-setup-lede {
  margin: 0;
  max-width: 540px;
  color: rgba(255,255,255,0.82) !important;
  font-size: clamp(15px, 1.14vw, 18px) !important;
  line-height: 1.55;
}

.fgn-tv-tip-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,184,77,0.13), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,184,77,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.fgn-tip-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,184,77,0.14);
  color: #fbbf24;
  font-size: 28px;
}

.fgn-tv-tip-card strong,
.fgn-tv-tip-card span {
  display: block;
}

.fgn-tv-tip-card strong {
  color: #fff;
  font-size: 18px;
  margin-bottom: 4px;
}

.fgn-tv-tip-card span {
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
  font-size: 15px;
}

.fgn-how-it-works {
  display: grid;
  gap: 16px;
  margin-top: clamp(4px, 0.8vw, 12px);
}

.fgn-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}

.fgn-step {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.fgn-step::after {
  content: "";
  position: absolute;
  top: 43px;
  left: 76px;
  right: -8px;
  border-top: 3px dotted rgba(255,255,255,0.28);
}

.fgn-step:last-child::after { display: none; }

.fgn-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(124,58,237,0.38);
  margin-left: 26px;
  z-index: 2;
}

.fgn-step-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  color: #a78bfa;
  font-size: 29px;
  z-index: 2;
}

.fgn-step strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
}

.fgn-step small {
  display: block;
  color: rgba(255,255,255,0.66);
  font-size: 12.5px;
  line-height: 1.35;
}

.fgn-setup-panel-form .fgn-setup-panel-inner {
  align-content: center;
  gap: 18px;
}

.fgn-setup-panel-form .fgn-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
}

.fgn-setup-panel-form .fgn-setup-field-wide { grid-column: 1 / -1; }

.fgn-setup-panel-form .fgn-label,
.fgn-setup-panel-form .fgn-team-preview strong {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 950;
}

.fgn-setup-panel-form .fgn-team-preview strong span {
  color: rgba(255,255,255,0.5);
  font-weight: 850;
}

.fgn-setup-panel-form .fgn-input,
.fgn-setup-panel-form .fgn-team-preview-compact {
  min-height: 58px;
  width: 100%;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.055) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 16px !important;
  font-weight: 650;
}

.fgn-setup-panel-form .fgn-input {
  padding: 15px 48px 15px 58px !important;
  appearance: auto;
}

.fgn-setup-panel-form .fgn-input option {
  color: #111827;
  background: #fff;
}

.fgn-icon-field {
  position: relative;
}

.fgn-icon-field::before {
  position: absolute;
  left: 18px;
  top: 40px;
  z-index: 2;
  color: #a78bfa;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(124,58,237,0.28));
}

.fgn-icon-pencil::before { content: "✎"; }
.fgn-icon-pack::before { content: "▣"; }
.fgn-icon-players::before { content: "👥"; font-size: 18px; }
.fgn-icon-clock::before { content: "◷"; }
.fgn-icon-teams::before { content: "👥"; font-size: 18px; }

.fgn-setup-panel-form .fgn-team-preview-compact {
  margin: 0;
  padding: 14px 18px 14px 58px;
  display: grid;
  gap: 4px;
}

.fgn-setup-panel-form .fgn-team-preview-compact::before {
  top: 38px;
}

.fgn-setup-panel-form .fgn-team-preview-compact span {
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
}

.fgn-room-copy-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.68);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  padding-bottom: 16px;
  margin-top: -2px;
}

.fgn-room-copy-note span {
  color: rgba(255,255,255,0.86);
}

.fgn-room-copy-note p {
  margin: 0;
  color: rgba(255,255,255,0.68) !important;
  font-size: 14px !important;
}

.fgn-setup-panel-form .fgn-start-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
}

.fgn-setup-panel-form .fgn-start-actions .fgn-button {
  width: 100%;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  background: linear-gradient(100deg, #8738ff 0%, #b12dd1 45%, #e11d62 100%);
  color: #fff;
  font-size: 21px;
  font-weight: 950;
  box-shadow: 0 18px 38px rgba(192,20,60,0.28), 0 14px 32px rgba(124,58,237,0.22);
}

.fgn-setup-panel-form .fgn-start-actions .fgn-small {
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
}

.fgn-setup-panel-form #fgn-create-message {
  margin: 0;
  min-height: 18px;
  color: rgba(255,255,255,0.75) !important;
}

@media (max-height: 760px) and (min-width: 900px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
    padding: 14px 28px;
    gap: 12px;
  }

  .fgn-brand-mark {
    width: 38px;
    height: 38px;
    font-size: 22px;
    border-radius: 13px;
  }

  .fgn-brand-small { font-size: 17px; }
  .fgn-brand-large { font-size: 21px; }

  .fgn-setup-stepper {
    padding: 5px;
  }

  .fgn-setup-stepper span {
    min-height: 36px;
    padding: 0 12px 0 8px;
    gap: 8px;
    font-size: 13px;
  }

  .fgn-setup-stepper span b {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    min-height: calc(100svh - 92px);
    grid-template-columns: minmax(300px, 0.84fr) minmax(520px, 1.16fr);
    border-radius: 26px;
  }

  .fgn-setup-panel-inner {
    padding: 23px 30px;
    gap: 13px;
  }

  .fgn-setup-panel h2 {
    font-size: clamp(27px, 2.6vw, 36px);
  }

  .fgn-setup-lede {
    font-size: 14px !important;
    line-height: 1.42;
  }

  .fgn-tv-tip-card {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 13px;
  }

  .fgn-tip-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 23px;
  }

  .fgn-tv-tip-card strong { font-size: 16px; }
  .fgn-tv-tip-card span { font-size: 13px; }

  .fgn-how-it-works { gap: 10px; }
  .fgn-steps { gap: 12px; }

  .fgn-step-number {
    width: 24px;
    height: 24px;
    margin-left: 21px;
  }

  .fgn-step-icon {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }

  .fgn-step::after {
    top: 36px;
    left: 65px;
  }

  .fgn-step strong { font-size: 13px; }
  .fgn-step small { font-size: 11.5px; }

  .fgn-setup-panel-form .fgn-setup-grid {
    gap: 14px 18px;
  }

  .fgn-setup-panel-form .fgn-input,
  .fgn-setup-panel-form .fgn-team-preview-compact {
    min-height: 50px;
    font-size: 15px !important;
  }

  .fgn-setup-panel-form .fgn-input {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .fgn-icon-field::before {
    top: 37px;
  }

  .fgn-setup-panel-form .fgn-team-preview-compact::before {
    top: 35px;
  }

  .fgn-room-copy-note {
    padding-bottom: 10px;
  }

  .fgn-setup-panel-form .fgn-start-actions .fgn-button {
    min-height: 54px;
    font-size: 18px;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    grid-template-columns: 1fr;
  }

  .fgn-setup-panel-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
}

@media (max-width: 700px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .fgn-setup-stepper {
    width: 100%;
    justify-content: space-between;
  }

  .fgn-setup-stepper span {
    flex: 1;
    justify-content: center;
    padding: 0 8px;
  }

  .fgn-setup-panel-form .fgn-setup-grid,
  .fgn-steps {
    grid-template-columns: 1fr;
  }

  .fgn-step::after { display: none; }
}

/* Phase 7.6: premium active TV lobby dashboard with state-aware layout. */
body.fgn-fullscreen-page.fgn-active-room-page .fgn-host .fgn-tv-shell {
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(20px, 2.8vw, 46px) clamp(22px, 3.7vw, 58px);
  background:
    radial-gradient(circle at 12% 12%, rgba(124, 58, 237, 0.56), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(219, 39, 119, 0.50), transparent 32%),
    radial-gradient(circle at 78% 92%, rgba(245, 158, 11, 0.12), transparent 30%),
    linear-gradient(135deg, #0b0924 0%, #1a1046 46%, #351032 100%);
}

body.fgn-fullscreen-page.fgn-active-room-page .fgn-host .fgn-topbar {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  min-height: 0;
}

body.fgn-fullscreen-page.fgn-active-room-page .fgn-brand-lockup {
  gap: 13px;
}

body.fgn-fullscreen-page.fgn-active-room-page .fgn-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  font-size: 29px;
}

body.fgn-fullscreen-page.fgn-active-room-page .fgn-status-pill,
body.fgn-fullscreen-page.fgn-active-room-page .fgn-sound-toggle {
  min-height: 52px;
  padding: 0 20px;
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
}

.fgn-lobby-dashboard {
  min-height: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
  width: 100%;
  max-width: 1720px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(310px, 0.86fr) minmax(430px, 1.32fr) minmax(300px, 0.72fr);
  gap: clamp(16px, 1.8vw, 26px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-grid-bottom {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-card {
  min-height: 0;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055));
  box-shadow: 0 28px 85px rgba(0, 0, 0, 0.33), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.25vw, 18px);
  padding: clamp(18px, 2vw, 30px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-kicker {
  color: #c4b5fd;
  margin: 0;
  font-size: clamp(10px, 0.86vw, 13px);
  letter-spacing: 0.14em;
}

.fgn-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fgn-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.24);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.fgn-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.48);
  animation: fgnLivePulse 1.25s ease-out infinite;
}

.fgn-lobby-panel-title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(23px, 1.8vw, 34px) !important;
  letter-spacing: -0.045em;
}

.fgn-lobby-panel-copy,
.fgn-lobby-subtitle {
  margin: 0;
  color: rgba(255,255,255,0.72) !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.45;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: clamp(16px, 2vh, 26px);
  display: grid;
  place-items: center;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(247,244,255,1));
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 18px 48px rgba(0,0,0,0.20);
  overflow: visible;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder img {
  width: min(100%, 42vh, 430px);
  max-height: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby {
  flex: 0 0 auto;
  border-radius: 24px;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.7vw, 22px);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
  border: 1px solid rgba(255,255,255,0.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby span {
  color: rgba(255,255,255,0.66);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby strong {
  color: #fff;
  text-shadow: 0 0 24px rgba(167,139,250,0.42);
  font-size: clamp(34px, 3.8vw, 62px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby #fgn-join-url {
  margin: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby #fgn-copy-link {
  width: 100%;
  min-height: 44px;
  color: #fff;
  background: linear-gradient(100deg, #8738ff, #e11d62);
  box-shadow: 0 16px 32px rgba(192,20,60,0.22);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(236,72,153,0.15), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-head {
  margin: 0;
  align-items: flex-start;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-head h2 {
  color: #fff !important;
  font-size: clamp(30px, 3vw, 54px) !important;
  letter-spacing: -0.055em;
  max-width: 720px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-count {
  min-width: 108px;
  border-radius: 24px;
  background: #fff;
  color: #160e3f;
  padding: 14px 17px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-count strong {
  color: #e11d62;
  font-size: clamp(38px, 3.4vw, 58px);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-count span {
  color: rgba(22,14,63,0.62);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 2px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-content: start;
  gap: 12px;
}

.fgn-lobby-empty-state {
  grid-column: 1 / -1;
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: clamp(22px, 3vw, 42px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(167,139,250,0.20), transparent 40%),
    rgba(255,255,255,0.055);
  border: 1px dashed rgba(255,255,255,0.24);
  text-align: center;
  color: #fff;
}

.fgn-lobby-empty-state strong {
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: -0.045em;
}

.fgn-lobby-empty-state p {
  margin: 0;
  max-width: 430px;
  color: rgba(255,255,255,0.70) !important;
  font-size: 15px !important;
}

.fgn-waiting-orb {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,47,201,0.28), rgba(225,29,98,0.24));
  box-shadow: 0 22px 48px rgba(0,0,0,0.18);
}

.fgn-waiting-orb::before {
  content: "📱";
  position: relative;
  z-index: 2;
  font-size: 40px;
}

.fgn-waiting-orb span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.30);
  animation: fgnWaitingRipple 2.1s ease-out infinite;
}

.fgn-waiting-orb span:nth-child(2) { animation-delay: 0.45s; }
.fgn-waiting-orb span:nth-child(3) { animation-delay: 0.9s; }

.fgn-empty-mini-steps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fgn-empty-mini-steps span {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 900;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card {
  min-height: 104px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 22px;
  padding: 15px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card.is-new-player {
  animation: fgnPlayerPop 0.66s cubic-bezier(.16, 1, .3, 1);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card .fgn-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(139,47,201,0.36), rgba(225,29,98,0.22));
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 29px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-text strong {
  color: #fff;
  font-size: 17px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-text span {
  color: rgba(255,255,255,0.62);
}

.fgn-player-ready-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(34,197,94,0.13);
  color: #bbf7d0;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.fgn-lobby-activity-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.72);
}

.fgn-lobby-activity-strip strong {
  color: #fff;
  white-space: nowrap;
}

.fgn-lobby-activity-strip em {
  font-style: normal;
  min-width: 0;
  color: rgba(255,255,255,0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(124,58,237,0.20), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-head h2 {
  color: #fff !important;
  font-size: clamp(26px, 2.4vw, 43px) !important;
}

.fgn-lobby-control-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fgn-lobby-stat {
  min-height: 80px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.fgn-lobby-stat-wide {
  grid-column: 1 / -1;
}

.fgn-lobby-stat span {
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 900;
}

.fgn-lobby-stat strong {
  color: #fff;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.fgn-lobby-ready-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px;
  border-radius: 22px;
  background: rgba(251,191,36,0.11);
  border: 1px solid rgba(251,191,36,0.24);
}

.fgn-lobby-ready-card.is-ready {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.26);
}

.fgn-ready-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,0.11);
  font-size: 27px;
}

.fgn-lobby-ready-card strong {
  color: #fff;
  font-size: 17px;
}

.fgn-lobby-ready-card p {
  margin: 4px 0 0;
  color: rgba(255,255,255,0.66) !important;
  font-size: 13px !important;
  line-height: 1.36;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-button {
  width: 100%;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 999px;
  background: linear-gradient(100deg, #8738ff 0%, #b12dd1 45%, #e11d62 100%);
  box-shadow: 0 18px 38px rgba(192,20,60,0.28), 0 14px 32px rgba(124,58,237,0.22);
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby:not(.has-players) .fgn-control-buttons .fgn-button[data-fgn-action="start_game"] {
  opacity: 0.74;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-question-panel {
  display: none !important;
}

/* Let the same host screen rearrange itself when the state changes. */
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-dashboard,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-dashboard,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-dashboard {
  display: contents;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-card {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-rail-card {
  display: flex;
  flex-direction: column;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-ready-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-ready-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-ready-card {
  display: none !important;
}

@keyframes fgnLivePulse {
  to { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

@keyframes fgnWaitingRipple {
  0% { transform: scale(0.72); opacity: 0.62; }
  100% { transform: scale(1.65); opacity: 0; }
}

@keyframes fgnPlayerPop {
  0% { transform: translateY(14px) scale(0.94); opacity: 0; box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  55% { transform: translateY(-2px) scale(1.02); opacity: 1; box-shadow: 0 0 0 12px rgba(34,197,94,0); }
  100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: none; }
}

@media (max-height: 780px) and (min-width: 1000px) {
  body.fgn-fullscreen-page.fgn-active-room-page .fgn-host .fgn-tv-shell {
    padding: 16px 28px;
    gap: 12px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
    gap: 14px;
    grid-template-columns: minmax(280px, 0.8fr) minmax(410px, 1.32fr) minmax(280px, 0.72fr);
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
    padding: 16px;
    gap: 10px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder img {
    width: min(100%, 39vh, 360px);
  }

  .fgn-lobby-panel-copy,
  .fgn-lobby-subtitle,
  .fgn-lobby-ready-card p {
    font-size: 12.5px !important;
  }

  .fgn-lobby-stat {
    min-height: 64px;
    padding: 10px 12px;
  }

  .fgn-lobby-ready-card {
    padding: 12px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-button {
    min-height: 52px;
    font-size: 17px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card {
    min-height: 82px;
    padding: 11px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card .fgn-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 24px;
  }
}

@media (max-width: 1180px) {
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.35fr);
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) minmax(220px, 0.8fr);
    align-items: center;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card .fgn-question-panel {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  body.fgn-fullscreen-page.fgn-active-room-page .fgn-host .fgn-tv-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
    grid-template-columns: 1fr;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-grid {
    max-height: none;
  }
}

/* Phase 7.7: state-based TV fixes and in-game screen redesign. */
.fgn-app [hidden] {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-link-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-link-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-link-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons .fgn-link-button[hidden],
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons .fgn-button[hidden] {
  display: none !important;
}

/* Keep lobby controls inside the right rail. The previous CSS was forcing hidden buttons back onscreen. */
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons {
  margin-top: auto;
  max-height: 190px;
  overflow: hidden;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-link-button:not([hidden]) {
  display: inline-flex !important;
}

/* Question and reveal states become their own TV screen: main game canvas + compact live score rail. */
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 25vw);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(18px, 2.6vw, 42px) clamp(20px, 3.4vw, 54px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-topbar,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-dashboard,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-dashboard {
  grid-column: 1;
  grid-row: 2;
  display: block !important;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-card {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(18px, 2vw, 30px);
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(circle at 88% 12%, rgba(225,29,98,0.22), transparent 32%),
    radial-gradient(circle at 12% 8%, rgba(124,58,237,0.26), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.055));
  box-shadow: 0 28px 85px rgba(0,0,0,0.33), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head {
  margin: 0;
  padding-right: min(440px, 38vw);
  align-items: start;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head h2,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head h2 {
  color: #fff !important;
  font-size: clamp(28px, 3.2vw, 58px) !important;
  letter-spacing: -0.055em;
  text-shadow: 0 16px 32px rgba(0,0,0,0.26);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons {
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  right: clamp(18px, 2vw, 30px);
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  max-width: min(420px, 45%);
  flex-wrap: wrap;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-link-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-link-button:not([hidden]) {
  display: inline-flex !important;
  width: auto !important;
  min-height: 48px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  background: #fff;
  color: #160e3f;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-button-secondary:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-button-secondary:not([hidden]) {
  background: linear-gradient(100deg, #8738ff 0%, #e11d62 100%);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-ready-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-ready-card {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-panel,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-wrap,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-wrap {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.2vw, 16px);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-meta,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-meta {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
  color: #c4b5fd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-title,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-title {
  color: #fff !important;
  font-size: clamp(32px, 4.2vw, 70px) !important;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-shadow: 0 18px 34px rgba(0,0,0,0.26);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-timer-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-timer-card {
  margin: 0;
  width: fit-content;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-timer-card.is-warning {
  background: rgba(225,29,98,0.18);
  border-color: rgba(251,113,133,0.42);
  color: #fecdd3;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-timer-card.is-expired,
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-timeup-banner,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-timeup-banner {
  background: rgba(251,191,36,0.13);
  border-color: rgba(251,191,36,0.32);
  color: #fde68a;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-answer-progress strong,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-answer-progress strong {
  color: rgba(255,255,255,0.82);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-answer-progress-bar,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-answer-progress-bar {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.12);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-options-grid,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-options-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: clamp(10px, 1.2vw, 16px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-option-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card {
  min-height: 78px;
  height: 100%;
  padding: clamp(14px, 1.5vw, 22px);
  border-radius: 22px;
  background: rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-option-card strong,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card strong {
  color: #fff;
  font-size: clamp(16px, 1.4vw, 23px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-option-card span,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card span {
  color: rgba(255,255,255,0.58);
}

body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card.is-correct {
  background: rgba(34,197,94,0.18);
  border-color: rgba(74,222,128,0.42);
  color: #dcfce7;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-reveal-banner,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-reveal-banner {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(12px, 1.4vw, 18px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055));
  box-shadow: 0 22px 58px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-lobby-head,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-lobby-head {
  margin: 0 0 10px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom h2,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom h2 {
  color: #fff !important;
  font-size: clamp(20px, 1.7vw, 30px) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-small,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-small {
  color: rgba(255,255,255,0.64) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-question #fgn-leaderboard-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal #fgn-leaderboard-list {
  max-height: none;
  height: calc(100% - 52px);
  min-height: 0;
  overflow: auto;
  gap: 8px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row.is-leading,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row.is-leading {
  background: linear-gradient(135deg, rgba(124,58,237,0.26), rgba(225,29,98,0.18));
  border-color: rgba(196,181,253,0.24);
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row strong,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row strong {
  color: #fff;
  font-size: 14px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row span,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row span {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-score,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-score {
  min-width: 42px;
  min-height: 34px;
  border-radius: 13px;
  background: #fff;
  color: #160e3f;
}

body.fgn-fullscreen-page .fgn-host.is-time-up .fgn-control-rail-card {
  box-shadow: 0 28px 85px rgba(0,0,0,0.33), 0 0 0 2px rgba(251,191,36,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Finished state should be a clean celebration screen, not a white card with cropped controls. */
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-tv-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-dashboard {
  display: block !important;
  height: 100%;
  min-height: 0;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-grid-bottom,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-control-summary,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-ready-card {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-rail-card {
  height: 100%;
  min-height: 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 10%, rgba(251,191,36,0.16), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.055));
  border: 1px solid rgba(255,255,255,0.16);
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-winner-card-party {
  background: transparent;
  color: #fff;
  border: 0;
  box-shadow: none;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-winner-card-party h2,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-winner-card-party strong,
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-winner-card-party p {
  color: #fff !important;
}

@media (max-height: 780px) and (min-width: 1000px) {
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 24vw);
    padding: 16px 28px;
    gap: 12px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-card {
    padding: 14px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head {
    padding-right: 330px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head h2,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head h2 {
    font-size: clamp(26px, 2.8vw, 46px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-title,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-title {
    font-size: clamp(28px, 3.4vw, 54px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-option-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-option-card {
    min-height: 56px;
    padding: 10px 12px;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-link-button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-link-button:not([hidden]) {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
    grid-column: 1;
    grid-row: auto;
    height: auto;
  }
}

/* v0.7.8: room recovery + automatic pacing polish */
.fgn-resume-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.fgn-resume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.fgn-resume-head strong,
.fgn-resume-head span {
  display: block;
}

.fgn-resume-head strong {
  color: #fff;
  font-weight: 900;
}

.fgn-resume-head span {
  margin-top: 2px;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
}

.fgn-resume-list {
  display: grid;
  gap: 8px;
}

.fgn-resume-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.fgn-resume-room:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.24);
}

.fgn-resume-room strong,
.fgn-resume-room em,
.fgn-resume-room b {
  display: block;
}

.fgn-resume-room strong {
  font-weight: 900;
}

.fgn-resume-room em {
  margin-top: 2px;
  color: rgba(255,255,255,.66);
  font-style: normal;
  font-size: .8rem;
}

.fgn-resume-room b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #9333ea, #db2777);
  font-size: .78rem;
}

.fgn-player .fgn-answer-button:not(:disabled) {
  cursor: pointer;
}

.fgn-player .fgn-answer-button.is-selected:not(:disabled)::after {
  content: 'Tap another answer to change';
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 700;
  opacity: .72;
}

.fgn-reveal-banner {
  animation: fgnRevealPulse .45s ease both;
}

@keyframes fgnRevealPulse {
  from { transform: translateY(6px); opacity: .2; }
  to { transform: translateY(0); opacity: 1; }
}

/* v0.7.9: premium setup dashboard refresh + dated room recovery list */
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
  padding: clamp(16px, 2.2vw, 34px) clamp(18px, 4vw, 68px);
  background:
    radial-gradient(circle at 10% 9%, rgba(124, 58, 237, 0.62), transparent 30%),
    radial-gradient(circle at 94% 12%, rgba(225, 29, 98, 0.58), transparent 31%),
    radial-gradient(circle at 84% 100%, rgba(225, 29, 98, 0.28), transparent 33%),
    linear-gradient(135deg, #0d0929 0%, #1b1042 46%, #330f35 100%);
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar {
  width: min(1460px, 100%);
  margin-bottom: clamp(12px, 1.5vw, 22px);
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-lockup .fgn-brand-small,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-lockup .fgn-brand-large,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-lockup .fgn-brand-small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-lockup .fgn-brand-large {
  letter-spacing: -0.055em;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-mark,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-mark {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(135deg, rgba(124,58,237,.98), rgba(225,29,98,.95));
  box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 18px 42px rgba(225,29,98,.26);
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper {
  gap: 10px;
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(11, 9, 36, .35);
  border: 1px solid rgba(255,255,255,.18);
}

.fgn-setup-stepper i {
  display: grid;
  gap: 1px;
  font-style: normal;
  line-height: 1.05;
}

.fgn-setup-stepper small {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.fgn-setup-stepper span.is-active small {
  color: rgba(255,255,255,.72);
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
  width: min(1460px, 100%);
  min-height: 0;
  height: auto;
  max-height: none;
  grid-template-columns: minmax(420px, .82fr) minmax(620px, 1.18fr);
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(135deg, rgba(16, 11, 49, .94), rgba(40, 20, 73, .72)),
    radial-gradient(circle at 94% 92%, rgba(225,29,98,.16), transparent 28%);
  box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
}

@media (min-width: 980px) and (min-height: 740px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    height: calc(100svh - 126px);
    max-height: 760px;
  }
}

.fgn-setup-panel-intro {
  background:
    radial-gradient(circle at 72% 38%, rgba(225, 29, 98, .09), transparent 34%),
    radial-gradient(circle at 20% 12%, rgba(124, 58, 237, .26), transparent 38%),
    linear-gradient(180deg, rgba(11, 10, 39, .98), rgba(15, 13, 48, .88));
}

.fgn-setup-panel-form {
  background:
    radial-gradient(circle at 90% 8%, rgba(225,29,98,.15), transparent 34%),
    linear-gradient(180deg, rgba(46, 26, 82, .58), rgba(20, 18, 55, .34));
}

.fgn-setup-panel-inner {
  align-content: stretch;
  gap: clamp(12px, 1.25vw, 18px);
  padding: clamp(25px, 3vw, 42px) clamp(30px, 3.4vw, 54px);
}

.fgn-setup-panel h2 {
  max-width: 560px;
  font-size: clamp(34px, 3.9vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}

.fgn-setup-panel .fgn-kicker {
  color: #f472b6;
}

.fgn-setup-lede {
  max-width: 610px;
}

.fgn-tv-tip-card {
  grid-template-columns: 70px minmax(0,1fr);
  border-color: rgba(168, 85, 247, .45);
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,255,255,.045));
}

.fgn-tip-icon {
  background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(225,29,98,.20));
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

.fgn-how-it-works {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.fgn-step-icon {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.18);
}

.fgn-setup-panel-form .fgn-setup-panel-inner {
  display: grid;
  align-content: start;
  gap: 14px;
}

.fgn-setup-panel-form .fgn-setup-grid {
  gap: 17px 22px;
}

.fgn-setup-panel-form .fgn-label,
.fgn-setup-panel-form .fgn-team-preview strong {
  color: rgba(255,255,255,.78);
  letter-spacing: .075em;
}

.fgn-setup-panel-form .fgn-input,
.fgn-setup-panel-form .fgn-team-preview-compact {
  min-height: 52px;
  border-radius: 15px !important;
  background: rgba(9, 8, 32, .20) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.10);
}

.fgn-setup-panel-form .fgn-input:focus {
  border-color: rgba(192,132,252,.62) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.16), inset 0 1px 0 rgba(255,255,255,.07);
}

.fgn-setup-panel-form .fgn-team-preview-compact {
  min-height: 60px;
  border-radius: 16px !important;
}

.fgn-room-copy-note {
  padding-bottom: 12px;
}

.fgn-setup-panel-form .fgn-start-actions .fgn-button {
  min-height: 60px;
  background: linear-gradient(100deg, #7538ff 0%, #a82ee4 42%, #f01768 100%);
  box-shadow: 0 16px 36px rgba(225,29,98,.28), 0 12px 26px rgba(117,56,255,.24);
}

.fgn-setup-panel-form .fgn-start-actions .fgn-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.fgn-resume-panel {
  margin-top: 4px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.12);
}

.fgn-resume-head {
  margin-bottom: 12px;
}

.fgn-resume-head strong {
  color: #fff;
  font-size: 18px;
  letter-spacing: -.015em;
}

.fgn-resume-head span {
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.fgn-resume-head .fgn-link-button {
  color: #d8b4fe !important;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.fgn-resume-list {
  display: grid;
  gap: 9px;
  max-height: 276px;
  overflow: auto;
  padding-right: 2px;
}

.fgn-resume-room {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.fgn-resume-room:hover {
  background: rgba(255,255,255,.115);
  border-color: rgba(255,255,255,.26);
}

.fgn-resume-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,.34), rgba(225,29,98,.22));
  border: 1px solid rgba(255,255,255,.13);
  font-size: 22px;
}

.fgn-resume-room.is-status-question .fgn-resume-icon { background: linear-gradient(135deg, rgba(34,197,94,.34), rgba(20,184,166,.18)); }
.fgn-resume-room.is-status-reveal .fgn-resume-icon { background: linear-gradient(135deg, rgba(59,130,246,.34), rgba(124,58,237,.18)); }
.fgn-resume-room.is-status-finished .fgn-resume-icon { background: linear-gradient(135deg, rgba(251,191,36,.34), rgba(225,29,98,.18)); }

.fgn-resume-main {
  min-width: 0;
  display: grid !important;
  gap: 4px;
}

.fgn-resume-main strong {
  color: #fff;
  font-weight: 950;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fgn-resume-main em {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: rgba(255,255,255,.72);
}

.fgn-resume-main small {
  color: rgba(255,255,255,.50);
  font-size: 12px;
  line-height: 1.2;
}

.fgn-resume-code,
.fgn-resume-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.fgn-resume-status {
  color: #f97316;
  background: rgba(249,115,22,.12);
}

.fgn-resume-room.is-status-question .fgn-resume-status { color: #22c55e; background: rgba(34,197,94,.12); }
.fgn-resume-room.is-status-reveal .fgn-resume-status { color: #60a5fa; background: rgba(96,165,250,.12); }
.fgn-resume-room.is-status-finished .fgn-resume-status { color: #fbbf24; background: rgba(251,191,36,.12); }

.fgn-resume-room b {
  padding: 10px 17px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b2fc9, #f01768);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(225,29,98,.18);
}

@media (max-height: 820px) and (min-width: 980px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    height: auto;
    min-height: calc(100svh - 96px);
  }

  .fgn-setup-panel-inner {
    padding: 22px 36px;
    gap: 10px;
  }

  .fgn-setup-panel h2 {
    font-size: clamp(30px, 3vw, 44px);
  }

  .fgn-setup-lede {
    font-size: 14px !important;
    line-height: 1.38;
  }

  .fgn-tv-tip-card {
    padding: 12px 14px;
  }

  .fgn-how-it-works {
    gap: 10px;
    padding-top: 8px;
  }

  .fgn-step-icon {
    width: 54px;
    height: 54px;
    font-size: 23px;
  }

  .fgn-step-number {
    width: 23px;
    height: 23px;
    margin-left: 20px;
  }

  .fgn-step::after {
    top: 34px;
    left: 61px;
  }

  .fgn-step small {
    display: none;
  }

  .fgn-setup-panel-form .fgn-input,
  .fgn-setup-panel-form .fgn-team-preview-compact {
    min-height: 48px;
  }

  .fgn-room-copy-note {
    padding-bottom: 8px;
  }

  .fgn-setup-panel-form .fgn-start-actions .fgn-button {
    min-height: 52px;
    font-size: 18px;
  }

  .fgn-resume-panel {
    padding: 12px;
  }

  .fgn-resume-list {
    max-height: 206px;
  }

  .fgn-resume-room {
    padding: 9px 10px;
  }

  .fgn-resume-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
  }

  .fgn-resume-main small {
    display: none;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    grid-template-columns: 1fr;
    height: auto;
  }

  .fgn-resume-list {
    max-height: none;
  }
}

/* ==========================================================
   FGN 0.8.0 — clean journey design foundation
   Rebuilds the visual shell without changing game logic.
   ========================================================== */
:root {
  --fgn-bg-1: #09051f;
  --fgn-bg-2: #1d0b4d;
  --fgn-bg-3: #771044;
  --fgn-ink: #ffffff;
  --fgn-muted: rgba(255,255,255,.68);
  --fgn-soft: rgba(255,255,255,.11);
  --fgn-line: rgba(255,255,255,.18);
  --fgn-hot: #ff1d70;
  --fgn-violet: #7b35ff;
  --fgn-purple: #a038ff;
  --fgn-cyan: #56d8ff;
  --fgn-success: #45e587;
  --fgn-warning: #ffb94a;
  --fgn-radius-xl: 30px;
  --fgn-radius-lg: 22px;
  --fgn-radius-md: 16px;
  --fgn-shadow-big: 0 28px 80px rgba(0,0,0,.42);
  --fgn-shadow-glow: 0 0 55px rgba(255,29,112,.22);
}

html.fgn-fullscreen-root,
body.fgn-fullscreen-page {
  min-height: 100%;
  background: var(--fgn-bg-1) !important;
}

body.fgn-fullscreen-page .fgn-app,
body.fgn-fullscreen-page .fgn-app * {
  box-sizing: border-box;
}

body.fgn-fullscreen-page .fgn-app {
  color: var(--fgn-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,29,112,.34), transparent 30%),
    radial-gradient(circle at 16% 8%, rgba(123,53,255,.38), transparent 34%),
    linear-gradient(135deg, var(--fgn-bg-1) 0%, var(--fgn-bg-2) 45%, var(--fgn-bg-3) 100%) !important;
}

body.fgn-fullscreen-page .fgn-tv-shell {
  width: 100% !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 34px 28px !important;
  display: grid !important;
  grid-template-rows: 74px minmax(0, 1fr) !important;
  gap: 16px !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.fgn-fullscreen-page .fgn-topbar {
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
}

.fgn-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.fgn-brand-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  background: linear-gradient(145deg, #7b35ff, #ff1d70) !important;
  box-shadow: 0 12px 34px rgba(255,29,112,.25) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

.fgn-brand-small,
.fgn-brand-large {
  margin: 0 !important;
  line-height: .92 !important;
  font-weight: 950 !important;
}

.fgn-brand-small { font-size: 19px !important; color: #fff !important; }
.fgn-brand-large { font-size: 28px !important; color: #fff !important; }

.fgn-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.fgn-status-pill,
.fgn-sound-toggle,
.fgn-link-button {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}

.fgn-setup-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.fgn-setup-stepper span {
  min-width: 0 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.64) !important;
}
.fgn-setup-stepper span.is-active {
  background: linear-gradient(135deg, #7b35ff, #bd2aff) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(123,53,255,.30) !important;
}
.fgn-setup-stepper b {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.16) !important;
  color: inherit !important;
  font-size: 13px !important;
}
.fgn-setup-stepper i {
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}
.fgn-setup-stepper small { display: none !important; }

/* Setup screen rebuild */
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
  height: 100% !important;
  min-height: 0 !important;
  width: min(100%, 1680px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: var(--fgn-radius-xl) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: var(--fgn-shadow-big), var(--fgn-shadow-glow) !important;
  background:
    radial-gradient(circle at 30% 34%, rgba(86,216,255,.08), transparent 27%),
    radial-gradient(circle at 62% 10%, rgba(255,29,112,.14), transparent 38%),
    linear-gradient(135deg, rgba(10,8,42,.88), rgba(41,16,78,.86) 48%, rgba(94,22,72,.78)) !important;
}

.fgn-setup-panel {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.fgn-setup-panel-intro {
  border-right: 1px solid rgba(255,255,255,.19) !important;
  background:
    radial-gradient(circle at 83% 38%, rgba(255,184,74,.08), transparent 28%),
    linear-gradient(180deg, rgba(9,6,32,.72), rgba(9,6,32,.42)) !important;
}

.fgn-setup-panel-inner {
  height: 100% !important;
  padding: clamp(24px, 3.1vw, 52px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 0 !important;
}

.fgn-setup-panel .fgn-kicker,
.fgn-kicker {
  color: #ff63ab !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  margin: 0 0 10px !important;
}

.fgn-setup-panel h2 {
  color: #fff !important;
  font-size: clamp(38px, 4vw, 62px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  margin: 0 !important;
  max-width: 520px !important;
}

.fgn-setup-lede {
  color: rgba(255,255,255,.80) !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.45 !important;
  max-width: 600px !important;
  margin: 0 !important;
}

.fgn-tv-tip-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.fgn-tip-icon {
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(123,53,255,.28) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  font-size: 28px !important;
}
.fgn-tv-tip-card strong {
  display: block !important;
  color: #fff !important;
  font-size: 20px !important;
  margin: 0 0 4px !important;
}
.fgn-tv-tip-card span { color: rgba(255,255,255,.76) !important; font-size: 15px !important; line-height: 1.35 !important; }

.fgn-how-it-works {
  margin-top: 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.20) !important;
}
.fgn-how-it-works .fgn-kicker { color: #c77aff !important; margin-bottom: 14px !important; }
.fgn-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.fgn-step {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.fgn-step::after { display: none !important; }
.fgn-step-number {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #7b35ff, #d941ff) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}
.fgn-step-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  font-size: 26px !important;
}
.fgn-step strong { color: #fff !important; font-size: 15px !important; line-height: 1.12 !important; }
.fgn-step small { color: rgba(255,255,255,.62) !important; font-size: 12px !important; line-height: 1.25 !important; max-width: 135px !important; }

.fgn-setup-panel-form .fgn-setup-panel-inner {
  justify-content: start !important;
  gap: 16px !important;
  padding: clamp(24px, 2.7vw, 44px) !important;
}
.fgn-setup-panel-form .fgn-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
}
.fgn-setup-panel-form .fgn-setup-field-wide { grid-column: 1 / -1 !important; }
.fgn-setup-panel-form .fgn-label,
.fgn-setup-panel-form .fgn-team-preview strong {
  color: rgba(255,255,255,.75) !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  margin: 0 0 7px !important;
}
.fgn-setup-panel-form .fgn-input,
.fgn-setup-panel-form .fgn-team-preview-compact {
  width: 100% !important;
  min-height: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(9,6,32,.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 0 18px 0 52px !important;
  outline: 0 !important;
}
.fgn-setup-panel-form .fgn-input:focus {
  border-color: rgba(255,99,171,.70) !important;
  box-shadow: 0 0 0 4px rgba(255,99,171,.12), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.fgn-setup-panel-form .fgn-team-preview-compact {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 74px !important;
  padding: 12px 18px 12px 52px !important;
}
.fgn-setup-panel-form .fgn-team-preview-compact span {
  color: #fff !important;
  font-size: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fgn-room-copy-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.66) !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.28) !important;
  margin: 0 !important;
}
.fgn-room-copy-note p { margin: 0 !important; color: inherit !important; font-size: 14px !important; }
.fgn-setup-panel-form .fgn-start-actions { margin: 0 !important; display: grid !important; gap: 8px !important; }
.fgn-setup-panel-form .fgn-start-actions .fgn-button,
.fgn-button {
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #7b35ff 0%, #bb29df 48%, #ff1d70 100%) !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 18px !important;
  box-shadow: 0 18px 42px rgba(255,29,112,.25) !important;
  cursor: pointer !important;
}
.fgn-setup-panel-form .fgn-start-actions .fgn-small {
  color: rgba(255,255,255,.58) !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
}

.fgn-resume-panel {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  min-height: 0 !important;
  margin-top: auto !important;
}
.fgn-resume-panel[hidden] { display: none !important; }
.fgn-resume-head {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.fgn-resume-head strong { color: #fff !important; font-size: 18px !important; line-height: 1.1 !important; }
.fgn-resume-head span { color: rgba(255,255,255,.62) !important; display: block !important; font-size: 13px !important; margin-top: 2px !important; }
.fgn-resume-head .fgn-link-button { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
.fgn-resume-list {
  display: grid !important;
  gap: 8px !important;
  max-height: 230px !important;
  overflow: auto !important;
  padding-right: 3px !important;
}
.fgn-resume-room {
  min-height: 58px !important;
  padding: 9px 11px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.075) !important;
  color: #fff !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.fgn-resume-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 21px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.65), rgba(255,29,112,.45)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.fgn-resume-main { min-width: 0 !important; display: grid !important; gap: 2px !important; }
.fgn-resume-main strong { color: #fff !important; font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.fgn-resume-main em {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  font-style: normal !important;
}
.fgn-resume-main small {
  color: rgba(255,255,255,.54) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fgn-resume-code,
.fgn-resume-status {
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: rgba(255,255,255,.12) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.fgn-resume-status { color: #ffb94a !important; }
.fgn-resume-room.is-status-question .fgn-resume-status { color: #62ef9d !important; }
.fgn-resume-room.is-status-finished .fgn-resume-status { color: #56d8ff !important; }
.fgn-resume-room > b {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  background: linear-gradient(135deg, #9637ff, #ff1d70) !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Active host state foundation — keep each TV state disciplined */
body.fgn-fullscreen-page.fgn-active-room-page .fgn-host .fgn-tv-shell {
  grid-template-rows: 70px minmax(0, 1fr) !important;
  padding: 22px 30px 28px !important;
}
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.45fr) minmax(280px, .82fr) !important;
  gap: 18px !important;
  overflow: hidden !important;
}
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-grid-bottom { display: none !important; }
body.fgn-fullscreen-page .fgn-card {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.fgn-join-card,
.fgn-lobby-card,
.fgn-control-rail-card {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.fgn-join-card { display: grid !important; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important; gap: 12px !important; }
#fgn-qr {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  max-height: min(48vh, 410px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
}
#fgn-qr img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.fgn-code-box-lobby {
  padding: 12px 16px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.fgn-code-box-lobby strong { font-size: clamp(36px, 4vw, 62px) !important; letter-spacing: .13em !important; text-align: right !important; color: #fff !important; }
.fgn-player-list.fgn-player-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: 12px !important; overflow: auto !important; min-height: 0 !important; }
.fgn-lobby-card { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; gap: 16px !important; }
.fgn-control-rail-card { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.fgn-control-buttons { display: grid !important; gap: 10px !important; margin-top: auto !important; }
.fgn-control-buttons [hidden] { display: none !important; }

/* Phone controller redesign foundation */
body.fgn-fullscreen-page .fgn-player {
  min-height: 100dvh !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(123,53,255,.35), transparent 30%),
    radial-gradient(circle at 80% 8%, rgba(255,29,112,.32), transparent 34%),
    linear-gradient(160deg, #08051e, #1e0d4d 55%, #6c1245) !important;
}
body.fgn-fullscreen-page .fgn-phone-shell {
  min-height: 100dvh !important;
  width: 100% !important;
  max-width: none !important;
  padding: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}
.fgn-phone-frame {
  width: min(100%, 430px) !important;
  display: grid !important;
  gap: 14px !important;
}
.fgn-phone-brandbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.fgn-brand-lockup-mini .fgn-brand-mark { width: 40px !important; height: 40px !important; font-size: 22px !important; border-radius: 13px !important; }
.fgn-brand-lockup-mini .fgn-brand-small { font-size: 15px !important; }
.fgn-brand-lockup-mini .fgn-brand-large { font-size: 21px !important; }
.fgn-phone-room-chip {
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
}
.fgn-phone-card {
  width: 100% !important;
  padding: 24px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.06)) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.fgn-phone-card h1 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}
.fgn-phone-lede {
  margin: 0 0 18px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.fgn-phone-form { display: grid !important; gap: 13px !important; }
.fgn-phone-form .fgn-label { color: rgba(255,255,255,.78) !important; font-size: 12px !important; letter-spacing: .13em !important; text-transform: uppercase !important; font-weight: 900 !important; }
.fgn-phone-form .fgn-input {
  min-height: 54px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(0,0,0,.24) !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 0 16px !important;
  outline: 0 !important;
}
.fgn-phone-form .fgn-input::placeholder { color: rgba(255,255,255,.42) !important; }
.fgn-room-code-input { text-align: center !important; letter-spacing: .14em !important; font-weight: 950 !important; text-transform: uppercase !important; font-size: 24px !important; }
.fgn-phone-mode-card {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 14px !important;
  margin: 0 0 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.22) !important;
}
.fgn-phone-mode-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(123,53,255,.34) !important;
  font-size: 24px !important;
  flex: 0 0 auto !important;
}
.fgn-phone-mode-card.is-team-mode .fgn-phone-mode-icon::before { content: '👥'; }
.fgn-phone-mode-card.is-team-mode .fgn-phone-mode-icon { font-size: 0 !important; }
.fgn-phone-mode-card.is-random-team .fgn-phone-mode-icon::before { content: '🎲'; font-size: 24px !important; }
.fgn-phone-mode-card strong { color: #fff !important; font-size: 16px !important; display: block !important; }
.fgn-phone-mode-card p { color: rgba(255,255,255,.68) !important; margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.3 !important; }
.fgn-team-field {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important;
  padding: 14px !important;
  border-radius: 20px !important;
}
.fgn-joined-state {
  text-align: center !important;
  display: grid !important;
  gap: 14px !important;
}
.fgn-joined-state[hidden] { display: none !important; }
.fgn-success-icon {
  margin: 0 auto !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #45e587, #56d8ff) !important;
  color: #06121e !important;
  font-size: 38px !important;
  font-weight: 950 !important;
  box-shadow: 0 20px 55px rgba(69,229,135,.26) !important;
}
.fgn-phone-game, .fgn-phone-lobby { text-align: left !important; }
.fgn-phone-question {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.18) !important;
  padding: 16px !important;
}
.fgn-phone-options { display: grid !important; gap: 10px !important; }
.fgn-answer-button {
  min-height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
  text-align: left !important;
  padding: 14px !important;
  font-weight: 800 !important;
}
.fgn-answer-button.is-selected { background: linear-gradient(135deg, rgba(123,53,255,.72), rgba(255,29,112,.48)) !important; border-color: rgba(255,255,255,.45) !important; }
.fgn-answer-button.is-correct { background: linear-gradient(135deg, rgba(69,229,135,.80), rgba(86,216,255,.46)) !important; color: #04131a !important; }
.fgn-answer-button.is-wrong { background: rgba(255,75,75,.35) !important; }

@media (max-height: 820px) {
  body.fgn-fullscreen-page .fgn-tv-shell { padding-top: 16px !important; padding-bottom: 18px !important; grid-template-rows: 60px minmax(0, 1fr) !important; gap: 12px !important; }
  body.fgn-fullscreen-page .fgn-topbar { height: 60px !important; min-height: 60px !important; }
  .fgn-brand-mark { width: 42px !important; height: 42px !important; font-size: 23px !important; }
  .fgn-brand-small { font-size: 16px !important; }
  .fgn-brand-large { font-size: 23px !important; }
  .fgn-setup-panel-inner { padding: 26px 32px !important; gap: 14px !important; }
  .fgn-setup-panel h2 { font-size: clamp(34px, 3.6vw, 50px) !important; }
  .fgn-setup-lede { font-size: 15px !important; line-height: 1.38 !important; }
  .fgn-tv-tip-card { padding: 14px 16px !important; }
  .fgn-tip-icon { width: 48px !important; height: 48px !important; font-size: 24px !important; }
  .fgn-step-icon { width: 50px !important; height: 50px !important; font-size: 22px !important; }
  .fgn-step small { display: none !important; }
  .fgn-setup-panel-form .fgn-input { height: 49px !important; min-height: 49px !important; }
  .fgn-setup-panel-form .fgn-team-preview-compact { height: 62px !important; min-height: 62px !important; }
  .fgn-setup-panel-form .fgn-start-actions .fgn-button { min-height: 52px !important; }
  .fgn-resume-list { max-height: 178px !important; }
  .fgn-resume-room { min-height: 52px !important; }
  .fgn-resume-main small { display: none !important; }
}

@media (max-width: 1100px) {
  body.fgn-fullscreen-page .fgn-tv-shell { height: auto !important; min-height: 100dvh !important; overflow: visible !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }
  .fgn-setup-panel-intro { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; }
  .fgn-resume-list { max-height: none !important; }
}

/* =========================================================
   Phase 8.1 — clean TV setup + resume-room polish
   Purpose: stop the setup screen feeling cropped/bolted-on and
   keep the host setup journey readable in a normal browser window.
   ========================================================= */
body.fgn-fullscreen-page.fgn-host-setup-page,
body.fgn-fullscreen-page:has(.fgn-host[data-room=""]) {
  overflow: auto !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host,
body.fgn-fullscreen-page .fgn-host[data-room=""] {
  min-height: 100dvh !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(123,53,255,.36), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(255,29,112,.38), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(86,216,255,.13), transparent 42%),
    linear-gradient(145deg, #07051c 0%, #170a3a 48%, #5f123f 100%) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: clamp(14px, 2vw, 24px) clamp(18px, 3vw, 48px) clamp(18px, 2.4vw, 32px) !important;
  display: grid !important;
  grid-template-rows: 64px minmax(0, auto) !important;
  gap: 14px !important;
  overflow: visible !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar {
  min-height: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-lockup,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: max-content !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-mark,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.92), rgba(255,29,112,.88)) !important;
  box-shadow: 0 18px 45px rgba(255,29,112,.2) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-small,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-large,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-large {
  margin: 0 !important;
  color: #fff !important;
  line-height: .88 !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-small {
  font-size: 18px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-brand-large,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-brand-large {
  font-size: 28px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar-actions,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper {
  height: 46px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper span {
  min-width: 114px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.62) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper span.is-active,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper span.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(123,53,255,.78), rgba(255,29,112,.55)) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper b,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper b {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 12px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper i,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper i {
  font-style: normal !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper small {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.58) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-status-pill-setup,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-status-pill-setup {
  display: none !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
  width: min(100%, 1580px) !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  height: min(800px, calc(100dvh - 102px)) !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .74fr) minmax(560px, 1.26fr) !important;
  gap: 0 !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background:
    linear-gradient(90deg, rgba(9,7,34,.92), rgba(19,9,52,.78) 45%, rgba(82,24,79,.67)) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,29,112,.06) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-intro,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-intro {
  border-right: 1px solid rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 75% 32%, rgba(255,29,112,.10), transparent 34%),
    linear-gradient(180deg, rgba(5,7,30,.42), rgba(5,7,30,.12)) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner {
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(24px, 3.6vw, 52px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(14px, 2vh, 24px) !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-kicker,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-kicker {
  margin: 0 !important;
  color: #ff63b2 !important;
  font-weight: 950 !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 {
  margin: 0 !important;
  max-width: 560px !important;
  color: #fff !important;
  font-size: clamp(40px, 4.2vw, 70px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-lede,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-lede {
  max-width: 560px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.45 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: auto !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tip-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tip-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 30px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.38), rgba(255,29,112,.24)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card strong {
  display: block !important;
  color: #fff !important;
  font-size: 20px !important;
  margin: 0 0 4px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card span {
  display: block !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-how-it-works,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-how-it-works {
  border-top: 1px solid rgba(255,255,255,.20) !important;
  padding-top: 16px !important;
  margin: 0 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-steps,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  align-items: start !important;
  justify-items: center !important;
  text-align: center !important;
  position: relative !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step-number,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step-number {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7b35ff, #ff1d70) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step strong {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step small {
  color: rgba(255,255,255,.58) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-setup-panel-inner,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner {
  padding: clamp(22px, 3vw, 42px) !important;
  justify-content: center !important;
  gap: 14px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-field,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-field {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-field-wide,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-field-wide {
  grid-column: auto !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-label,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-label {
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-input,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-input {
  height: 54px !important;
  min-height: 54px !important;
  width: 100% !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(7,5,28,.40) !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 18px 0 52px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: 0 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-icon-field::before,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-icon-field::before {
  left: 18px !important;
  bottom: 15px !important;
  color: #b98aff !important;
  opacity: 1 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact {
  min-height: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 9px 18px 9px 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(7,5,28,.36) !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  color: #fff !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact strong {
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact strong span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact strong span { color: rgba(255,255,255,.45) !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact > span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact > span {
  color: #fff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-room-copy-note,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-room-copy-note {
  margin: 0 !important;
  padding: 0 0 0 2px !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.62) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-room-copy-note p,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-room-copy-note p { margin: 0 !important; font-size: 13px !important; line-height: 1.3 !important; }

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions {
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
  display: grid !important;
  gap: 8px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions .fgn-button,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions .fgn-button {
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #7b35ff 0%, #b727d6 45%, #ff1d70 100%) !important;
  box-shadow: 0 20px 44px rgba(255,29,112,.22) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions .fgn-small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions .fgn-small { text-align: center !important; color: rgba(255,255,255,.52) !important; font-size: 12px !important; }

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel {
  margin: 0 !important;
  padding: 13px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(7,5,28,.34) !important;
  display: grid !important;
  gap: 9px !important;
  min-height: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel[hidden],
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel[hidden] { display: none !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head strong { color: #fff !important; font-size: 17px !important; line-height: 1 !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head span { color: rgba(255,255,255,.58) !important; font-size: 12px !important; margin-top: 4px !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head .fgn-link-button,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head .fgn-link-button {
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 13px !important;
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  font-size: 12px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-list,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-list {
  max-height: min(214px, 28vh) !important;
  overflow: auto !important;
  display: grid !important;
  gap: 8px !important;
  padding-right: 2px !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room {
  min-height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 17px !important;
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room:hover,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,99,178,.44) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.065)) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-icon {
  width: 43px !important;
  height: 43px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 21px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.55), rgba(255,29,112,.38)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main { min-width: 0 !important; display: grid !important; gap: 3px !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main strong { color: #fff !important; font-size: 14px !important; line-height: 1.05 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main em,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main em { display: flex !important; align-items: center !important; gap: 7px !important; flex-wrap: wrap !important; font-style: normal !important; color: rgba(255,255,255,.72) !important; font-size: 11px !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main small { display: flex !important; align-items: center !important; gap: 10px !important; color: rgba(255,255,255,.50) !important; font-size: 10.5px !important; line-height: 1.15 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-code,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-code,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-status {
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: rgba(255,255,255,.12) !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 950 !important;
}
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-status { color: #ffb94a !important; background: rgba(255,185,74,.12) !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room.is-status-question .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room.is-status-question .fgn-resume-status { color: #62ef9d !important; background: rgba(98,239,157,.12) !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room.is-status-reveal .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room.is-status-reveal .fgn-resume-status { color: #56d8ff !important; background: rgba(86,216,255,.12) !important; }
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room > b,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room > b {
  min-width: 86px !important;
  height: 38px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 14px !important;
  background: linear-gradient(135deg, #9637ff, #ff1d70) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page #fgn-create-message,
body.fgn-fullscreen-page .fgn-host[data-room=""] #fgn-create-message { margin: 0 !important; min-height: 0 !important; }

@media (max-height: 820px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell { grid-template-rows: 54px minmax(0, auto) !important; gap: 10px !important; padding-top: 12px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar { min-height: 54px !important; height: 54px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard { height: min(690px, calc(100dvh - 76px)) !important; border-radius: 28px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner { padding: 24px 32px !important; gap: 12px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 { font-size: clamp(34px, 3.4vw, 48px) !important; max-width: 460px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-lede,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-lede { font-size: 14px !important; line-height: 1.35 !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card { padding: 14px !important; grid-template-columns: 48px 1fr !important; gap: 13px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tip-icon,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tip-icon { width: 48px !important; height: 48px !important; font-size: 24px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-how-it-works,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-how-it-works { padding-top: 12px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-steps,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-steps { margin-top: 10px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step-icon,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step small { display: none !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner { padding: 20px 28px !important; gap: 10px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid { gap: 10px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-input,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-input { height: 47px !important; min-height: 47px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact { height: 51px !important; min-height: 51px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions { padding-top: 10px !important; gap: 5px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions .fgn-button,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions .fgn-button { min-height: 48px !important; font-size: 17px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-list,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-list { max-height: min(168px, 24vh) !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main small { display: none !important; }
}

@media (max-width: 1180px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell { height: auto !important; overflow: visible !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel { height: auto !important; overflow: visible !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-intro,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-intro { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner { overflow: visible !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid { grid-template-columns: 1fr !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-field-wide,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-field-wide { grid-column: 1 !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-list,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-list { max-height: none !important; }
}

@media (max-width: 760px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-topbar,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-topbar { height: auto !important; min-height: 0 !important; align-items: flex-start !important; flex-direction: column !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper { width: 100% !important; overflow-x: auto !important; justify-content: flex-start !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-stepper span,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-stepper span { min-width: 94px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner { padding: 22px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 { font-size: 38px !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-steps,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-steps { grid-template-columns: 1fr !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step { grid-template-columns: 32px 42px 1fr !important; text-align: left !important; justify-items: start !important; align-items: center !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step small { display: none !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room { grid-template-columns: 40px minmax(0, 1fr) !important; }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room > b,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room > b { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* Phase 8.2 — phone join/play-mode controller polish */
body.fgn-fullscreen-page .fgn-phone-frame {
  width: min(100%, 440px) !important;
  gap: 12px !important;
}
.fgn-phone-progress {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.fgn-phone-progress span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.62) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}
.fgn-phone-progress b {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 11px !important;
}
.fgn-phone-progress span.is-active {
  background: linear-gradient(135deg, rgba(123,53,255,.92), rgba(255,29,112,.72)) !important;
  color: #fff !important;
  box-shadow: 0 12px 35px rgba(210,30,145,.24) !important;
}
.fgn-phone-progress span.is-done { color: rgba(255,255,255,.82) !important; }
.fgn-phone-progress span.is-done b { background: rgba(68,230,135,.28) !important; color: #8fffc0 !important; }
.fgn-phone-card-head { margin-bottom: 16px !important; }
.fgn-phone-card .fgn-kicker { color: #ff6aa6 !important; }
.fgn-phone-field-card,
.fgn-code-entry-card {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  padding: 14px !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.fgn-code-entry-card { gap: 12px !important; }
.fgn-visually-hidden-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.fgn-avatar-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 9px !important;
  margin-top: 10px !important;
}
.fgn-avatar-choice {
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
  min-height: 54px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 27px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.fgn-avatar-choice.is-selected {
  border-color: rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, rgba(123,53,255,.86), rgba(255,29,112,.62)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 35px rgba(255,29,112,.20) !important;
}
.fgn-team-choice-grid {
  display: grid !important;
  gap: 9px !important;
  margin-top: 10px !important;
}
.fgn-team-choice {
  appearance: none !important;
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  padding: 13px 14px !important;
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
}
.fgn-team-choice strong { font-size: 15px !important; color: #fff !important; }
.fgn-team-choice span { font-size: 12px !important; color: rgba(255,255,255,.62) !important; }
.fgn-team-choice.is-selected {
  border-color: rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, rgba(123,53,255,.70), rgba(255,29,112,.38)) !important;
}
.fgn-team-choice.is-random { cursor: default !important; }
.fgn-join-button { margin-top: 2px !important; min-height: 58px !important; }
.fgn-phone-message {
  min-height: 18px !important;
  color: rgba(255,255,255,.74) !important;
  text-align: center !important;
  margin-top: 12px !important;
}
.fgn-connected-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.20) !important;
  text-align: left !important;
}
.fgn-connected-card .fgn-success-icon {
  margin: 0 !important;
  width: 58px !important;
  height: 58px !important;
  font-size: 28px !important;
  flex: 0 0 auto !important;
}
.fgn-connected-card h2 { margin: 0 0 4px !important; color: #fff !important; font-size: 24px !important; }
.fgn-connected-card p { margin: 0 !important; color: rgba(255,255,255,.68) !important; line-height: 1.3 !important; }
.fgn-my-player-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.22), rgba(255,29,112,.15)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  text-align: left !important;
}
.fgn-my-player-card[hidden] { display: none !important; }
.fgn-my-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 17px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  background: rgba(255,255,255,.14) !important;
}
.fgn-my-player-card strong { display: block !important; color: #fff !important; font-size: 16px !important; }
.fgn-my-player-card span { display: block !important; color: rgba(255,255,255,.66) !important; font-size: 12px !important; }
.fgn-my-player-card em {
  margin-left: auto !important;
  font-style: normal !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  background: rgba(69,229,135,.14) !important;
  color: #9dffc3 !important;
  border: 1px solid rgba(69,229,135,.20) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.fgn-phone-waiting-card,
.fgn-phone-status-card {
  border-radius: 20px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  text-align: left !important;
}
.fgn-phone-waiting-card strong,
.fgn-phone-status-card strong { display: block !important; color: #fff !important; font-size: 16px !important; }
.fgn-phone-waiting-card span,
.fgn-phone-status-card span { display: block !important; color: rgba(255,255,255,.66) !important; font-size: 13px !important; margin-top: 4px !important; }
.fgn-phone-waiting-card i {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  border-radius: 999px !important;
  margin-top: 12px !important;
  background: linear-gradient(90deg, rgba(123,53,255,.20), rgba(255,29,112,.90), rgba(123,53,255,.20)) !important;
  background-size: 200% 100% !important;
  animation: fgnPhonePulseBar 1.4s ease-in-out infinite !important;
}
@keyframes fgnPhonePulseBar {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}
.fgn-mini-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.fgn-mini-player {
  display: grid !important;
  grid-template-columns: 34px 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 16px !important;
  padding: 9px !important;
  background: rgba(0,0,0,.17) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.fgn-mini-player span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.12) !important;
}
.fgn-mini-player strong { color: #fff !important; font-size: 13px !important; }
.fgn-mini-player em { color: rgba(255,255,255,.58) !important; font-style: normal !important; font-size: 11px !important; text-align: right !important; }
.fgn-phone-question-title { font-size: 23px !important; line-height: 1.1 !important; }
.fgn-phone-question .fgn-timer-card { margin: 12px 0 !important; }
.fgn-player .fgn-answer-button {
  position: relative !important;
  padding-right: 42px !important;
}
.fgn-player .fgn-answer-button.is-selected:not(:disabled)::after {
  content: '✓' !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.92) !important;
  color: #7b35ff !important;
  font-weight: 950 !important;
}
@media (max-width: 420px) {
  body.fgn-fullscreen-page .fgn-phone-shell { padding: 12px !important; align-items: start !important; }
  .fgn-phone-card { padding: 18px !important; border-radius: 24px !important; }
  .fgn-phone-card h1 { font-size: 30px !important; }
  .fgn-avatar-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .fgn-avatar-choice { min-height: 50px !important; font-size: 24px !important; }
  .fgn-my-player-card { align-items: flex-start !important; }
  .fgn-my-player-card em { font-size: 10px !important; padding: 7px 8px !important; }
}

/* =========================================================
   v0.8.3 — TV lobby mode-specific rebuild
   ---------------------------------------------------------
   Keeps the lobby inside one TV-friendly viewport and changes
   the centre panel based on individual/team/random modes.
   ========================================================= */
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: clamp(12px, 1.3vw, 20px) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-topbar {
  min-height: 54px !important;
  padding: 10px 14px !important;
  flex-shrink: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(240px, .78fr) minmax(380px, 1.35fr) minmax(260px, .86fr) !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
  align-items: stretch !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(150deg, rgba(31, 19, 71, .94), rgba(17, 13, 44, .94)) !important;
  box-shadow: 0 22px 70px rgba(11, 7, 31, .42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(188px, 1fr) auto auto !important;
  gap: 10px !important;
  padding: clamp(16px, 1.3vw, 22px) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card .fgn-card-topline,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-head,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-head {
  gap: 10px !important;
  margin: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-panel-title,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-head h2,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-head h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.95rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  margin: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-panel-copy,
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-subtitle {
  font-size: clamp(.84rem, .9vw, .98rem) !important;
  line-height: 1.35 !important;
  margin: 6px 0 0 !important;
  color: rgba(248, 244, 255, .74) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  max-height: min(38vh, 310px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #ffffff, #f7f2ff) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 55px rgba(8, 6, 27, .34), 0 0 0 8px rgba(255,255,255,.055) !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder img {
  width: 100% !important;
  height: 100% !important;
  max-width: 268px !important;
  max-height: 268px !important;
  object-fit: contain !important;
  display: block !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby {
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.07) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby strong {
  font-size: clamp(1.6rem, 2.4vw, 2.5rem) !important;
  letter-spacing: .18em !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: clamp(16px, 1.3vw, 22px) !important;
}

.fgn-lobby-mode-panel {
  min-height: 0;
  overflow: hidden;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-mode-panel {
  display: grid !important;
  gap: 11px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.fgn-lobby-mode-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: radial-gradient(circle at left top, rgba(224, 57, 255, .18), transparent 46%), rgba(255,255,255,.055);
}

.fgn-lobby-mode-header strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 1vw, 1.12rem);
  letter-spacing: -.02em;
}

.fgn-lobby-mode-header small {
  display: block;
  margin-top: 3px;
  color: rgba(248,244,255,.72);
  line-height: 1.32;
}

.fgn-lobby-mode-pill {
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  background: linear-gradient(135deg, #8b2fc9, #ef2f78);
  box-shadow: 0 10px 26px rgba(210, 30, 130, .28);
}

.fgn-individual-ready-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fgn-individual-ready-strip span {
  min-height: 74px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  text-align: center;
}

.fgn-individual-ready-strip i {
  font-style: normal;
  font-size: 1.45rem;
}

.fgn-lobby-team-fill-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

.fgn-lobby-team-card {
  min-height: 128px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  position: relative;
  overflow: hidden;
}

.fgn-lobby-team-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -45% 30%;
  height: 80px;
  background: radial-gradient(circle, rgba(235, 47, 120, .2), transparent 68%);
  pointer-events: none;
}

.fgn-lobby-team-card.has-members {
  border-color: rgba(255,255,255,.22);
  background: radial-gradient(circle at right bottom, rgba(139,47,201,.18), transparent 48%), rgba(255,255,255,.07);
}

.fgn-lobby-team-card-top {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.fgn-team-colour-dot {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #8b2fc9, #ef2f78);
  box-shadow: 0 10px 24px rgba(139,47,201,.32);
}

.fgn-lobby-team-card strong {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fgn-lobby-team-card small {
  display: block;
  color: rgba(248,244,255,.62);
  font-size: .76rem;
}

.fgn-lobby-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  min-height: 0;
  overflow: hidden;
}

.fgn-team-member-chip,
.fgn-team-more-chip,
.fgn-team-empty-slot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border-radius: 999px;
  font-size: .74rem;
  line-height: 1;
  padding: 7px 9px;
}

.fgn-team-member-chip,
.fgn-team-more-chip {
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.08);
}

.fgn-team-member-chip i {
  font-style: normal;
}

.fgn-team-empty-slot {
  width: 100%;
  border: 1px dashed rgba(255,255,255,.16);
  color: rgba(248,244,255,.58);
  background: rgba(255,255,255,.035);
}

.fgn-lobby-mode-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(248,244,255,.74);
}

.fgn-lobby-mode-note span {
  font-size: 1.2rem;
}

.fgn-lobby-mode-note p {
  margin: 0;
  line-height: 1.28;
  font-size: .82rem;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby.is-mode-teams-manual .fgn-player-grid,
body.fgn-fullscreen-page .fgn-host.is-state-lobby.is-mode-teams-random .fgn-player-grid {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby.is-mode-individual .fgn-player-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  overflow: auto !important;
  min-height: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-card {
  min-height: 74px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-activity-strip {
  padding: 10px 12px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-activity-strip em {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 12px !important;
  padding: clamp(16px, 1.3vw, 22px) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-control-summary {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-stat {
  min-height: 72px !important;
  padding: 11px !important;
  border-radius: 18px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-stat-wide {
  grid-column: span 2 !important;
  min-height: 62px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-ready-card {
  padding: 12px !important;
  border-radius: 20px !important;
  min-height: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons {
  margin-top: 0 !important;
  display: grid !important;
  gap: 9px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons .fgn-link-button:not([hidden]) {
  width: 100% !important;
  min-height: 52px !important;
  justify-content: center !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-question-panel {
  display: none !important;
}

@media (max-width: 1100px) {
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby.is-mode-teams-manual .fgn-player-grid,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby.is-mode-teams-random .fgn-player-grid {
    display: grid !important;
  }
}

@media (max-height: 760px) and (min-width: 1101px) {
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-panel-copy,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby #fgn-join-url {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card {
    grid-template-rows: auto auto minmax(170px, 1fr) auto !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder img {
    max-width: 225px !important;
    max-height: 225px !important;
  }

  .fgn-lobby-team-card {
    min-height: 112px;
  }

  .fgn-lobby-mode-note {
    display: none;
  }
}

/* =========================================================
   Phase 8.4 — phone gameplay controller rebuild
   Purpose: make the in-game phone view feel like a real controller,
   with clear answer states, timer feedback and reveal/next cues.
   ========================================================= */
body.fgn-fullscreen-page .fgn-player.is-phone-state-question .fgn-phone-card,
body.fgn-fullscreen-page .fgn-player.is-phone-state-reveal .fgn-phone-card,
body.fgn-fullscreen-page .fgn-player.is-phone-state-finished .fgn-phone-card {
  padding: 16px !important;
}

.fgn-player.is-phone-state-question .fgn-connected-card,
.fgn-player.is-phone-state-reveal .fgn-connected-card {
  display: none !important;
}

.fgn-phone-play-screen {
  display: grid !important;
  gap: 12px !important;
  border-radius: 26px !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(123,53,255,.32), transparent 38%),
    radial-gradient(circle at 100% 20%, rgba(255,29,112,.26), transparent 42%),
    rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.24) !important;
}

.fgn-phone-play-hud {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.fgn-phone-play-hud span {
  display: block !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
}

.fgn-phone-play-hud strong {
  display: block !important;
  margin-top: 3px !important;
  color: #fff !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
}

.fgn-phone-points-pill {
  min-width: 64px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.95), rgba(255,29,112,.76)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 34px rgba(255,29,112,.22) !important;
}

.fgn-phone-timer-panel {
  display: grid !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
}

.fgn-phone-timer-panel > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.fgn-phone-timer-panel span {
  color: rgba(255,255,255,.63) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
  font-size: 11px !important;
}

.fgn-phone-timer-panel strong {
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.fgn-phone-timer-panel.is-warning {
  background: linear-gradient(135deg, rgba(255,194,87,.20), rgba(255,29,112,.18)) !important;
  border-color: rgba(255,194,87,.45) !important;
  box-shadow: 0 0 0 3px rgba(255,194,87,.08) !important;
}

.fgn-phone-timer-panel.is-expired {
  background: rgba(255,75,75,.16) !important;
  border-color: rgba(255,75,75,.32) !important;
}

.fgn-phone-timer-track {
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
}

.fgn-phone-timer-track i {
  display: block !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #56d8ff, #7b35ff, #ff1d70) !important;
  transition: width .32s ease !important;
}

.fgn-phone-play-screen.is-final-warning .fgn-phone-timer-track i {
  background: linear-gradient(90deg, #ffc257, #ff6a3d, #ff1d70) !important;
}

.fgn-phone-play-screen.is-time-up .fgn-phone-timer-track i {
  width: 0 !important;
}

.fgn-phone-play-screen .fgn-phone-question-title {
  margin: 2px 0 0 !important;
  color: #fff !important;
  font-size: clamp(23px, 6.3vw, 31px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
}

.fgn-phone-answer-note {
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(86,216,255,.09) !important;
  border: 1px solid rgba(86,216,255,.18) !important;
}

.fgn-phone-answer-note span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.12) !important;
}

.fgn-phone-answer-note strong {
  color: rgba(255,255,255,.82) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
}

.fgn-phone-answer-note.has-answer {
  background: rgba(69,229,135,.12) !important;
  border-color: rgba(69,229,135,.22) !important;
}

.fgn-phone-answer-note.is-locked {
  background: rgba(255,75,75,.13) !important;
  border-color: rgba(255,75,75,.26) !important;
}

.fgn-phone-answer-note.is-reveal {
  background: rgba(255,194,87,.12) !important;
  border-color: rgba(255,194,87,.26) !important;
}

.fgn-phone-answer-grid {
  display: grid !important;
  gap: 10px !important;
}

.fgn-player .fgn-phone-answer-card,
.fgn-phone-answer-card {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 11px 44px 11px 11px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.fgn-phone-answer-card b {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.fgn-phone-answer-card span {
  color: #fff !important;
  font-size: 15.5px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.fgn-player .fgn-phone-answer-card.is-selected:not(:disabled) {
  background: linear-gradient(135deg, rgba(123,53,255,.86), rgba(255,29,112,.54)) !important;
  border-color: rgba(255,255,255,.42) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(255,29,112,.18), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.fgn-player .fgn-phone-answer-card.is-correct {
  background: linear-gradient(135deg, rgba(69,229,135,.86), rgba(86,216,255,.54)) !important;
  border-color: rgba(143,255,192,.62) !important;
  color: #06121e !important;
}

.fgn-player .fgn-phone-answer-card.is-correct b,
.fgn-player .fgn-phone-answer-card.is-correct span {
  color: #06121e !important;
}

.fgn-player .fgn-phone-answer-card.is-wrong {
  background: linear-gradient(135deg, rgba(255,75,75,.40), rgba(255,29,112,.22)) !important;
  border-color: rgba(255,120,120,.45) !important;
}

.fgn-player .fgn-phone-answer-card:disabled {
  opacity: .86 !important;
}

.fgn-phone-result-card {
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 13px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

.fgn-phone-result-card > span {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.13) !important;
  font-size: 25px !important;
}

.fgn-phone-result-card strong,
.fgn-phone-result-card small {
  display: block !important;
}

.fgn-phone-result-card strong {
  color: #fff !important;
  font-size: 16px !important;
}

.fgn-phone-result-card small {
  margin-top: 2px !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

.fgn-phone-result-card.is-correct {
  background: rgba(69,229,135,.13) !important;
  border-color: rgba(69,229,135,.26) !important;
}

.fgn-phone-result-card.is-wrong {
  background: rgba(255,75,75,.13) !important;
  border-color: rgba(255,75,75,.24) !important;
}

.fgn-phone-next-card {
  display: grid !important;
  grid-template-columns: 1fr 54px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(123,53,255,.28), rgba(255,29,112,.20)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.fgn-phone-next-card strong {
  color: #fff !important;
  font-size: 15px !important;
}

.fgn-phone-next-card span {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, #7b35ff, #ff1d70) !important;
  box-shadow: 0 14px 32px rgba(255,29,112,.26) !important;
}

.fgn-player.is-phone-state-question .fgn-phone-lobby,
.fgn-player.is-phone-state-reveal .fgn-phone-lobby,
.fgn-player.is-phone-state-finished .fgn-phone-lobby {
  display: none !important;
}

.fgn-player.is-phone-state-question .fgn-my-player-card,
.fgn-player.is-phone-state-reveal .fgn-my-player-card {
  padding: 10px !important;
  border-radius: 18px !important;
}

.fgn-player.is-phone-state-question .fgn-my-avatar,
.fgn-player.is-phone-state-reveal .fgn-my-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 23px !important;
}

@media (max-width: 420px) {
  .fgn-phone-play-screen { padding: 12px !important; border-radius: 23px !important; }
  .fgn-phone-play-screen .fgn-phone-question-title { font-size: 24px !important; }
  .fgn-phone-answer-card { min-height: 58px !important; border-radius: 18px !important; }
  .fgn-phone-answer-card span { font-size: 14.5px !important; }
}

/* =========================================================
   Phase 8.5 — TV question/reveal screen rebuild
   Purpose: make the TV gameplay state feel like one clear game screen,
   with a readable question canvas, answer cards, timer orb, response meter,
   reveal strip and compact score rail.
   ========================================================= */
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 360px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(12px, 1.35vw, 20px) !important;
  padding: clamp(14px, 1.8vw, 28px) clamp(16px, 2.4vw, 38px) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-dashboard,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-dashboard {
  grid-column: 1 !important;
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(14px, 1.45vw, 24px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(10px, 1vw, 16px) !important;
  border-radius: clamp(24px, 2.1vw, 36px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 2%, rgba(139,47,201,.36), transparent 34%),
    radial-gradient(circle at 92% 6%, rgba(239,47,120,.28), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(230px, 26vw, 420px) 0 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head .fgn-kicker,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head .fgn-kicker {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head h2,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head h2 {
  font-size: clamp(18px, 1.35vw, 28px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: rgba(255,255,255,.78) !important;
  margin: 0 !important;
  text-shadow: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons {
  position: absolute !important;
  top: clamp(14px, 1.45vw, 24px) !important;
  right: clamp(14px, 1.45vw, 24px) !important;
  z-index: 8 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  max-width: min(390px, 42vw) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons [hidden],
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons [hidden] {
  display: none !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons .fgn-link-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons .fgn-link-button:not([hidden]) {
  min-height: 40px !important;
  width: auto !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-question-panel,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-question-panel {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.fgn-tv-play-screen {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, .88fr) minmax(0, 1.05fr) auto !important;
  gap: clamp(10px, 1.05vw, 16px) !important;
  color: #fff !important;
}

.fgn-tv-play-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: clamp(12px, 1vw, 18px) !important;
  padding-right: clamp(0px, 13vw, 230px) !important;
}

.fgn-tv-play-meta {
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
}

.fgn-tv-stage-chip {
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, rgba(139,47,201,.92), rgba(239,47,120,.78)) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 28px rgba(239,47,120,.20) !important;
}

.fgn-tv-play-meta strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(22px, 2.05vw, 40px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.fgn-tv-play-meta small {
  color: rgba(248,244,255,.66) !important;
  font-size: clamp(12px, .9vw, 15px) !important;
  font-weight: 750 !important;
}

.fgn-tv-timer-orb {
  --fgn-progress: 100%;
  width: clamp(88px, 7.7vw, 126px) !important;
  height: clamp(88px, 7.7vw, 126px) !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  background:
    radial-gradient(circle at center, rgba(19, 12, 52, .96) 0 57%, transparent 58%),
    conic-gradient(#22c55e var(--fgn-progress), rgba(255,255,255,.13) 0) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.fgn-tv-timer-orb.is-warning {
  background:
    radial-gradient(circle at center, rgba(41, 15, 49, .97) 0 57%, transparent 58%),
    conic-gradient(#fb7185 var(--fgn-progress), rgba(255,255,255,.13) 0) !important;
  box-shadow: 0 0 0 5px rgba(251,113,133,.10), 0 20px 46px rgba(0,0,0,.28) !important;
}

.fgn-tv-timer-orb.is-expired,
.fgn-tv-timer-orb.is-reveal {
  background:
    radial-gradient(circle at center, rgba(32, 18, 58, .97) 0 57%, transparent 58%),
    conic-gradient(#fbbf24 var(--fgn-progress), rgba(255,255,255,.13) 0) !important;
}

.fgn-tv-timer-orb strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(30px, 3.3vw, 54px) !important;
  line-height: .86 !important;
  letter-spacing: -.055em !important;
}

.fgn-tv-timer-orb span {
  color: rgba(248,244,255,.64) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

.fgn-tv-question-canvas {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(10px, 1vw, 16px) !important;
  padding: clamp(14px, 1.6vw, 26px) !important;
  border-radius: clamp(24px, 2vw, 34px) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.22), transparent 40%),
    rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

.fgn-tv-question-title {
  color: #fff !important;
  margin: 0 !important;
  align-self: center !important;
  font-size: clamp(34px, 4.5vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 20px 45px rgba(0,0,0,.24) !important;
}

.fgn-tv-response-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 24%) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(0,0,0,.18) !important;
}

.fgn-tv-response-panel strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(16px, 1.2vw, 22px) !important;
}

.fgn-tv-response-panel span {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(248,244,255,.62) !important;
  font-size: clamp(12px, .86vw, 15px) !important;
  line-height: 1.25 !important;
}

.fgn-tv-response-meter,
.fgn-tv-option-meter {
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.fgn-tv-response-meter i,
.fgn-tv-option-meter i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #8b2fc9, #ef2f78, #fbbf24) !important;
  transition: width .25s ease !important;
}

.fgn-tv-options-grid {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 16px) !important;
}

.fgn-tv-option-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px 12px !important;
  padding: clamp(13px, 1.3vw, 20px) !important;
  border-radius: clamp(22px, 1.8vw, 30px) !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.052)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 16px 36px rgba(0,0,0,.16) !important;
  overflow: hidden !important;
}

.fgn-tv-option-key {
  width: clamp(38px, 3vw, 52px) !important;
  height: clamp(38px, 3vw, 52px) !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  background: linear-gradient(135deg, rgba(139,47,201,.96), rgba(239,47,120,.78)) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 26px rgba(139,47,201,.24) !important;
}

.fgn-tv-option-text {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
}

.fgn-tv-option-text strong {
  color: #fff !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.fgn-tv-option-text span {
  color: rgba(248,244,255,.58) !important;
  font-size: clamp(12px, .9vw, 14px) !important;
  font-weight: 750 !important;
}

.fgn-tv-option-meter {
  grid-column: 1 / -1 !important;
  height: 8px !important;
}

.fgn-tv-option-card.is-correct {
  background:
    radial-gradient(circle at 88% 14%, rgba(34,197,94,.24), transparent 42%),
    linear-gradient(145deg, rgba(34,197,94,.20), rgba(255,255,255,.07)) !important;
  border-color: rgba(74,222,128,.46) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.15), 0 18px 44px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.fgn-tv-option-card.is-correct .fgn-tv-option-key {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.fgn-tv-option-card.is-dimmed {
  opacity: .56 !important;
  filter: saturate(.75) !important;
}

.fgn-tv-reveal-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: clamp(12px, 1vw, 16px) clamp(14px, 1.2vw, 18px) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(139,47,201,.16)) !important;
  border: 1px solid rgba(74,222,128,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.fgn-tv-timeup-strip {
  background: linear-gradient(135deg, rgba(251,191,36,.20), rgba(239,47,120,.13)) !important;
  border-color: rgba(251,191,36,.35) !important;
}

.fgn-tv-reveal-strip > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  flex: 0 0 auto !important;
}

.fgn-tv-reveal-strip strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(15px, 1.15vw, 21px) !important;
  line-height: 1.15 !important;
}

.fgn-tv-reveal-strip small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(248,244,255,.68) !important;
  font-weight: 750 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(10px, 1vw, 15px) !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-card,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-card {
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(12px, 1vw, 17px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.052)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom .fgn-lobby-head,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom .fgn-lobby-head {
  margin-bottom: 8px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom h2,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom h2 {
  font-size: clamp(17px, 1.35vw, 24px) !important;
  color: #fff !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-question #fgn-leaderboard-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-list,
body.fgn-fullscreen-page .fgn-host.is-state-reveal #fgn-leaderboard-list {
  height: calc(100% - 44px) !important;
  min-height: 0 !important;
  overflow: auto !important;
  gap: 7px !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-team-row,
body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-team-row {
  padding: 9px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

@media (max-height: 760px) and (min-width: 1000px) {
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
    grid-template-columns: minmax(0, 1fr) clamp(235px, 23vw, 315px) !important;
    gap: 10px !important;
    padding: 12px 18px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card {
    padding: 12px !important;
  }

  .fgn-tv-play-screen {
    grid-template-rows: auto minmax(0, .78fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .fgn-tv-question-title {
    font-size: clamp(28px, 3.8vw, 58px) !important;
  }

  .fgn-tv-option-card {
    padding: 10px !important;
    gap: 8px 10px !important;
  }

  .fgn-tv-option-text strong {
    font-size: clamp(15px, 1.15vw, 20px) !important;
  }

  .fgn-tv-timer-orb {
    width: 82px !important;
    height: 82px !important;
  }

  .fgn-tv-timer-orb strong {
    font-size: 31px !important;
  }

  .fgn-tv-response-panel {
    padding: 9px 11px !important;
  }
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell {
    height: auto !important;
    min-height: 100svh !important;
    overflow: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-grid-bottom,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-grid-bottom {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto !important;
  }

  .fgn-tv-play-screen {
    height: auto !important;
  }

  .fgn-tv-options-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v0.8.6 — final leaderboard + play-again polish */
body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-game-card {
  min-height: 0 !important;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-question-panel {
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.fgn-final-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
  padding: clamp(14px, 1.8vw, 28px);
  color: #fff;
}

.fgn-final-hero,
.fgn-final-board {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 210, 93, .18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(225, 29, 98, .28), transparent 38%),
    linear-gradient(145deg, rgba(21, 15, 52, .92), rgba(39, 22, 83, .78));
  box-shadow: 0 26px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13);
}

.fgn-final-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 3vw, 48px);
}

.fgn-final-hero::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.fgn-final-kicker,
.fgn-final-hero .fgn-kicker {
  margin: 0 0 10px;
  color: #ffd66e;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .78rem;
}

.fgn-final-trophy {
  width: clamp(86px, 10vw, 132px);
  height: clamp(86px, 10vw, 132px);
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), rgba(251,191,36,.22) 35%, rgba(225,29,98,.18) 70%);
  box-shadow: 0 0 50px rgba(251,191,36,.22), inset 0 0 0 1px rgba(255,255,255,.14);
}

.fgn-final-hero h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.055em;
  color: #fff;
  text-shadow: 0 12px 38px rgba(0,0,0,.32);
}

.fgn-final-score {
  margin: 14px 0 0;
  font-size: clamp(1.2rem, 2.3vw, 2rem);
  font-weight: 900;
  color: #ffd66e;
}

.fgn-final-copy {
  max-width: 34rem;
  margin: 10px auto 0;
  color: rgba(255,255,255,.75);
  font-size: clamp(.96rem, 1.2vw, 1.12rem);
}

.fgn-final-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(18px, 2.5vw, 30px) 0 0;
}

.fgn-final-stat {
  padding: 13px 14px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}

.fgn-final-stat span {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fgn-final-stat strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  line-height: 1.1;
}

.fgn-final-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(18px, 2.2vw, 32px);
  position: relative;
  z-index: 2;
}

.fgn-final-actions .fgn-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.fgn-final-board {
  padding: clamp(18px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.fgn-final-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.fgn-final-board-head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: -.035em;
}

.fgn-final-room-code {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  font-weight: 900;
  white-space: nowrap;
}

.fgn-final-board .fgn-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.fgn-final-board .fgn-podium-card {
  min-height: 118px;
  padding: 14px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.11);
}

.fgn-final-board .fgn-podium-card.fgn-place-1 {
  background: linear-gradient(145deg, rgba(251,191,36,.24), rgba(225,29,98,.13));
  transform: translateY(-6px);
}

.fgn-final-rank-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 3px;
}

.fgn-final-rank-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.09);
}

.fgn-final-rank-row.is-winner {
  background: linear-gradient(90deg, rgba(251,191,36,.2), rgba(225,29,98,.12));
  border-color: rgba(251,191,36,.28);
}

.fgn-final-rank-num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 950;
}

.fgn-final-rank-name {
  min-width: 0;
}

.fgn-final-rank-name strong,
.fgn-final-rank-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fgn-final-rank-name strong {
  color: #fff;
  font-weight: 950;
}

.fgn-final-rank-name small {
  margin-top: 2px;
  color: rgba(255,255,255,.56);
}

.fgn-final-rank-score {
  color: #ffd66e;
  font-size: 1rem;
  white-space: nowrap;
}

body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons {
  display: none !important;
}

.fgn-phone-final-card {
  border-radius: 28px;
  padding: 22px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,191,36,.2), transparent 30%),
    linear-gradient(145deg, rgba(42, 22, 88, .96), rgba(20, 13, 47, .96));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.fgn-phone-final-card h2 {
  margin: 8px 0 14px;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
}

.fgn-phone-final-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.fgn-phone-final-summary div {
  padding: 13px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}

.fgn-phone-final-summary span,
.fgn-phone-final-summary strong {
  display: block;
}

.fgn-phone-final-summary span {
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fgn-phone-final-summary strong {
  color: #ffd66e;
  margin-top: 4px;
  font-size: 1.35rem;
}

.fgn-phone-final-list {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  text-align: left;
}

.fgn-phone-final-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.fgn-phone-final-row.is-winner {
  background: rgba(251,191,36,.12);
  border-color: rgba(251,191,36,.22);
}

.fgn-phone-final-row span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 950;
}

.fgn-phone-final-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.fgn-phone-final-row em {
  color: #ffd66e;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .fgn-final-screen {
    grid-template-columns: 1fr;
    height: auto;
    overflow: auto;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .fgn-final-hero {
    padding: 22px;
  }
  .fgn-final-trophy {
    width: 82px;
    height: 82px;
    font-size: 3.3rem;
  }
  .fgn-final-hero h2 {
    font-size: clamp(2rem, 4vw, 3.8rem);
  }
  .fgn-final-board .fgn-podium-card {
    min-height: 96px;
    padding: 10px;
  }
  .fgn-final-rank-row {
    padding: 8px 10px;
  }
}

/* Phase 9.0 richer mode polish */
.fgn-tv-stage-chip,
.fgn-phone-points-pill {
  white-space: nowrap;
}
.fgn-tv-option-card.is-voted {
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 18px 46px rgba(139,47,201,0.28);
}
.fgn-phone-answer-card b,
.fgn-tv-option-key {
  min-width: 2.2em;
  text-align: center;
}
.fgn-phone-answer-card:has(b:first-child) {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.fgn-phone-answer-card.is-selected:not(.is-correct):not(.is-wrong) {
  border-color: rgba(255, 255, 255, 0.48);
  background: linear-gradient(135deg, rgba(139,47,201,0.42), rgba(192,20,60,0.30));
}
.fgn-admin-question-grid {
  grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .7fr) minmax(100px, .4fr);
}
@media (max-width: 900px) {
  .fgn-admin-question-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   v0.9.1 — mode-specific TV + phone game polish
   ======================================================================== */

body.fgn-fullscreen-page .fgn-tv-mode-strip {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px 16px !important;
  margin: 0 0 16px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top left, rgba(255, 79, 164, .24), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 16px 35px rgba(0,0,0,.18) !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-strip > span {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  font-size: 27px !important;
  background: linear-gradient(135deg, rgba(255,74,165,.34), rgba(127,85,255,.28)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-strip strong {
  display: block !important;
  color: #fff !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-strip small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(255,255,255,.70) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body.fgn-fullscreen-page .fgn-tv-play-screen.is-mode-this-or-that .fgn-tv-mode-strip {
  background:
    radial-gradient(circle at 0 0, rgba(255, 197, 87, .23), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(255, 77, 164, .22), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
}

body.fgn-fullscreen-page .fgn-tv-play-screen.is-mode-most-likely .fgn-tv-mode-strip {
  background:
    radial-gradient(circle at top left, rgba(82, 209, 255, .24), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
}

body.fgn-fullscreen-page .fgn-tv-play-screen.is-mode-buzz-in .fgn-tv-mode-strip {
  background:
    radial-gradient(circle at top left, rgba(255, 56, 105, .32), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  border-color: rgba(255, 99, 132, .28) !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-options-this-or-that {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-this-or-that {
  min-height: 158px !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  padding: 24px !important;
  border-radius: 30px !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-this-or-that .fgn-tv-option-key {
  width: 70px !important;
  height: 70px !important;
  border-radius: 24px !important;
  font-size: 18px !important;
  letter-spacing: .08em !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-this-or-that .fgn-tv-option-text strong {
  font-size: clamp(30px, 3vw, 52px) !important;
  line-height: .98 !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-this-or-that:nth-child(1) {
  background:
    radial-gradient(circle at 10% 0, rgba(255, 203, 93, .22), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-this-or-that:nth-child(2) {
  background:
    radial-gradient(circle at 90% 0, rgba(255, 74, 164, .24), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-options-most-likely {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-most-likely {
  min-height: 118px !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at top left, rgba(82, 209, 255, .18), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-most-likely .fgn-tv-option-key {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  color: #bff1ff !important;
  background: rgba(82, 209, 255, .16) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-most-likely .fgn-tv-option-text strong {
  font-size: clamp(18px, 1.6vw, 25px) !important;
}

body.fgn-fullscreen-page .fgn-tv-mode-options-buzz-in {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 760px !important;
  width: 100% !important;
  justify-self: center !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-buzz-in {
  min-height: 210px !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  padding: 30px !important;
  border-radius: 38px !important;
  border-color: rgba(255, 80, 124, .38) !important;
  background:
    radial-gradient(circle at 20% 0, rgba(255, 53, 98, .38), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.30), 0 0 60px rgba(255, 56, 105, .14) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-buzz-in .fgn-tv-option-key {
  width: 128px !important;
  height: 128px !important;
  border-radius: 50% !important;
  font-size: 19px !important;
  letter-spacing: .12em !important;
  color: #fff !important;
  background: radial-gradient(circle, #ff6f9c 0, #ec255f 52%, #8d1238 100%) !important;
  border: 5px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 40px rgba(255, 54, 105, .45), inset 0 10px 18px rgba(255,255,255,.18) !important;
}

body.fgn-fullscreen-page .fgn-tv-option-mode-buzz-in .fgn-tv-option-text strong {
  font-size: clamp(32px, 3vw, 54px) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

body.fgn-fullscreen-page .fgn-tv-play-screen.is-mode-buzz-in:not(.is-tv-reveal) .fgn-tv-option-mode-buzz-in .fgn-tv-option-key {
  animation: fgnBuzzerPulse 1s ease-in-out infinite !important;
}

@keyframes fgnBuzzerPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.055); filter: brightness(1.18); }
}

body.fgn-fullscreen-page .fgn-tv-reveal-mode-this-or-that,
body.fgn-fullscreen-page .fgn-tv-reveal-mode-most-likely,
body.fgn-fullscreen-page .fgn-tv-reveal-mode-buzz-in {
  border-radius: 24px !important;
}

body.fgn-fullscreen-page .fgn-tv-reveal-mode-buzz-in {
  border-color: rgba(255, 89, 132, .36) !important;
  background: linear-gradient(135deg, rgba(255, 58, 111, .18), rgba(255,255,255,.055)) !important;
}

/* Phone mode-specific controller polish */
.fgn-phone-mode-strip {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  margin: 10px 0 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.06) !important;
}

.fgn-phone-mode-strip > span {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.10) !important;
  font-size: 22px !important;
  grid-row: span 2 !important;
}

.fgn-phone-mode-strip strong {
  display: block !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.05 !important;
}

.fgn-phone-mode-strip small {
  display: block !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.fgn-phone-answer-grid-this-or-that {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.fgn-phone-answer-mode-this-or-that {
  min-height: 148px !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 16px 12px !important;
}

.fgn-phone-answer-mode-this-or-that b {
  width: auto !important;
  min-width: 62px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.fgn-phone-answer-mode-this-or-that span {
  font-size: 20px !important;
  line-height: 1.02 !important;
}

.fgn-phone-answer-grid-most-likely {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

.fgn-phone-answer-mode-most-likely {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  min-height: 72px !important;
  border-radius: 20px !important;
}

.fgn-phone-answer-mode-most-likely b {
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  color: #bff1ff !important;
  background: rgba(82, 209, 255, .14) !important;
}

.fgn-phone-answer-mode-most-likely span {
  font-size: 17px !important;
}

.fgn-phone-answer-grid-buzz-in {
  grid-template-columns: 1fr !important;
  padding-top: 6px !important;
}

.fgn-phone-buzzer {
  min-height: 235px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255, 88, 132, .38) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 76, 128, .40), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.32), 0 0 42px rgba(255, 54, 105, .18) !important;
}

.fgn-phone-buzzer b {
  width: 138px !important;
  height: 138px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  color: #fff !important;
  font-size: 20px !important;
  letter-spacing: .14em !important;
  background: radial-gradient(circle, #ff7ca4 0, #f0326f 50%, #8f113a 100%) !important;
  border: 6px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 44px rgba(255, 54, 105, .46), inset 0 10px 18px rgba(255,255,255,.20) !important;
  animation: fgnPhoneBuzzerPulse .9s ease-in-out infinite !important;
}

.fgn-phone-buzzer span {
  font-size: 24px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.fgn-phone-buzzer em {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(255,255,255,.66) !important;
  font-style: normal !important;
  font-size: 13px !important;
}

.fgn-phone-buzzer.is-selected b,
.fgn-phone-buzzer:disabled b {
  animation: none !important;
}

@keyframes fgnPhoneBuzzerPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.2); }
}

.fgn-phone-play-screen.is-mode-buzz-in .fgn-phone-answer-note:not(.is-reveal) {
  border-color: rgba(255, 88, 132, .28) !important;
}

.fgn-phone-play-screen.is-mode-this-or-that .fgn-phone-mode-strip {
  background: linear-gradient(135deg, rgba(255, 203, 93, .12), rgba(255, 74, 164, .10)) !important;
}

.fgn-phone-play-screen.is-mode-most-likely .fgn-phone-mode-strip {
  background: linear-gradient(135deg, rgba(82, 209, 255, .13), rgba(255,255,255,.055)) !important;
}

.fgn-phone-play-screen.is-mode-buzz-in .fgn-phone-mode-strip {
  background: linear-gradient(135deg, rgba(255, 58, 111, .16), rgba(255,255,255,.055)) !important;
  border-color: rgba(255, 88, 132, .24) !important;
}

@media (max-width: 520px) {
  .fgn-phone-answer-grid-this-or-that {
    grid-template-columns: 1fr !important;
  }

  .fgn-phone-answer-mode-this-or-that {
    min-height: 104px !important;
  }

  .fgn-phone-buzzer {
    min-height: 210px !important;
  }

  .fgn-phone-buzzer b {
    width: 122px !important;
    height: 122px !important;
  }
}

/* v0.9.2 family host flow controls */
body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons,
body.fgn-fullscreen-page .fgn-host.is-state-archived .fgn-control-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}
body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons [hidden],
body.fgn-fullscreen-page .fgn-host.is-state-archived .fgn-control-buttons [hidden] {
  display: none !important;
}
body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons .fgn-link-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-archived .fgn-control-buttons .fgn-button:not([hidden]),
body.fgn-fullscreen-page .fgn-host.is-state-archived .fgn-control-buttons .fgn-link-button:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.fgn-paused-card {
  display: grid !important;
  gap: 8px !important;
  place-items: center;
  text-align: center;
  min-height: 220px;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: radial-gradient(circle at top, rgba(255,255,255,.1), rgba(9,7,28,.72)) !important;
}
.fgn-paused-card strong { font-size: clamp(1.4rem, 3vw, 2.4rem); color: #fff; }
.fgn-paused-card span { color: rgba(255,255,255,.75); max-width: 560px; }
.fgn-archive-button:not([hidden]) { color: rgba(255,255,255,.72) !important; }
.fgn-phone-paused-card { border-color: rgba(255,255,255,.18) !important; }

/* Phase 9.3 — family host safety tools */
.fgn-host-safety-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.fgn-safety-head,
.fgn-host-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fgn-safety-head strong { display: block; color: #fff; font-size: .95rem; }
.fgn-safety-head span { display: block; color: rgba(255,255,255,.65); font-size: .78rem; margin-top: 2px; }
.fgn-safety-head em {
  font-style: normal;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.fgn-safety-head em.is-locked { background: rgba(255,194,102,.16); color: #ffe3aa; border-color: rgba(255,194,102,.32); }
.fgn-safety-head em.is-open { background: rgba(71,255,177,.12); color: #bcffde; border-color: rgba(71,255,177,.28); }
.fgn-safety-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.fgn-mini-action,
.fgn-mini-link {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fgn-mini-action:hover,
.fgn-mini-link:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.fgn-mini-action.is-active { background: linear-gradient(135deg, rgba(139,47,201,.75), rgba(192,20,60,.65)); border-color: rgba(255,255,255,.22); }
.fgn-safety-note { margin: 0; color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.35; }
.fgn-host-edit-details {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 8px;
  color: rgba(255,255,255,.82);
}
.fgn-host-edit-details summary {
  cursor: pointer;
  font-weight: 900;
  font-size: .8rem;
  color: #fff;
  list-style-position: outside;
}
.fgn-host-edit-list { display: grid; gap: 7px; margin-top: 8px; }
.fgn-host-edit-row {
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.fgn-host-edit-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.86);
  font-size: .8rem;
}
.fgn-host-edit-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fgn-mini-link {
  padding: 6px 8px;
  border-radius: 10px;
  font-size: .72rem;
}
.fgn-mini-link.is-danger { color: #ffd0d8; border-color: rgba(255,100,130,.28); background: rgba(255,70,110,.1); }
@media (max-width: 900px) {
  .fgn-safety-toggle-grid { grid-template-columns: 1fr; }
}

/* Phase 9.4 — holiday-ready testing + QR fallback */
#fgn-qr .fgn-qr-inner-card {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
}
#fgn-qr .fgn-qr-inner-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
#fgn-qr .fgn-qr-inner-card.is-qr-fallback {
  background: linear-gradient(135deg, #fff, #f7f4ff);
  color: #171326;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  gap: 6px;
}
.fgn-qr-fallback-icon { font-size: clamp(42px, 7vw, 76px); line-height: 1; }
#fgn-qr .fgn-qr-inner-card.is-qr-fallback strong { font-size: 1.05rem; color: #171326; }
#fgn-qr .fgn-qr-inner-card.is-qr-fallback span { color: #5f5871; font-size: .9rem; line-height: 1.35; }
.fgn-join-fallback {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
}
.fgn-join-fallback span { color: rgba(255,255,255,.62); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.fgn-join-fallback strong { color: #fff; font-size: 1.35rem; letter-spacing: .16em; }
.fgn-join-fallback small { grid-column: 1 / -1; color: rgba(255,255,255,.48); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgn-test-tools .fgn-empty { padding: 9px; font-size: .74rem; background: rgba(255,255,255,.06); }
.fgn-mini-action:nth-child(2) { background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(192,20,60,.28)); }
@media (max-width: 900px) {
  .fgn-join-fallback { grid-template-columns: 1fr; text-align: center; }
}

/* v0.9.5 final family-use accessibility and focus polish */
.fgn-host button:focus-visible,
.fgn-host a:focus-visible,
.fgn-host input:focus-visible,
.fgn-host select:focus-visible,
.fgn-player button:focus-visible,
.fgn-player a:focus-visible,
.fgn-player input:focus-visible,
.fgn-player select:focus-visible,
.fgn-setup-screen button:focus-visible,
.fgn-setup-screen a:focus-visible,
.fgn-setup-screen input:focus-visible,
.fgn-setup-screen select:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(192, 20, 60, 0.35) !important;
}

.fgn-host [aria-live],
.fgn-player [aria-live] {
  min-height: 1em;
}

.fgn-host button:disabled,
.fgn-player button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

@media (prefers-reduced-motion: reduce) {
  .fgn-host *,
  .fgn-player *,
  .fgn-setup-screen * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v0.9.6 visual bug bash — stable TV/phone layout overrides */
:root {
  --fgn-bb-bg: #08051b;
  --fgn-bb-panel: rgba(18, 13, 43, 0.84);
  --fgn-bb-panel-strong: rgba(26, 17, 55, 0.94);
  --fgn-bb-line: rgba(255, 255, 255, 0.13);
  --fgn-bb-text: #ffffff;
  --fgn-bb-muted: rgba(255, 255, 255, 0.68);
  --fgn-bb-dim: rgba(255, 255, 255, 0.48);
  --fgn-bb-pink: #ff4fa3;
  --fgn-bb-purple: #8b2fc9;
  --fgn-bb-crimson: #c0143c;
}

body.fgn-fullscreen-page {
  background: radial-gradient(circle at 12% 14%, rgba(255, 79, 163, .26), transparent 26%), radial-gradient(circle at 88% 6%, rgba(139, 47, 201, .38), transparent 30%), linear-gradient(135deg, #07051a 0%, #16052d 48%, #2a0635 100%) !important;
}

body.fgn-fullscreen-page .fgn-app,
body.fgn-fullscreen-page .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-phone-shell {
  box-sizing: border-box !important;
}

body.fgn-fullscreen-page .fgn-topbar {
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  gap: 14px !important;
  align-items: center !important;
}

body.fgn-fullscreen-page .fgn-brand-lockup {
  min-width: 0 !important;
}

body.fgn-fullscreen-page .fgn-brand-mark {
  width: 42px !important;
  height: 42px !important;
  font-size: 22px !important;
  flex: 0 0 42px !important;
}

body.fgn-fullscreen-page .fgn-brand-small {
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

body.fgn-fullscreen-page .fgn-brand-large {
  font-size: clamp(18px, 2vw, 25px) !important;
  letter-spacing: .02em !important;
}

body.fgn-fullscreen-page .fgn-status-pill,
body.fgn-fullscreen-page .fgn-sound-toggle {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}

/* Setup screen: keep the dashboard balanced and stop left/right panels from being cropped. */
@media (min-width: 1024px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 650px !important;
    max-height: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: clamp(12px, 1.3vw, 18px) clamp(16px, 2vw, 32px) clamp(14px, 1.5vw, 22px) !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    width: min(1480px, 100%) !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(330px, .9fr) minmax(430px, 1.1fr) !important;
    align-items: stretch !important;
    border-radius: clamp(24px, 2.2vw, 34px) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: linear-gradient(135deg, rgba(20, 13, 48, .94), rgba(28, 14, 58, .90)) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: clamp(20px, 2vw, 34px) !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-intro .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-intro .fgn-setup-panel-inner {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    align-content: start !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 {
    font-size: clamp(32px, 3vw, 50px) !important;
    line-height: .98 !important;
    max-width: 620px !important;
    margin: 0 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-lede,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-lede {
    font-size: clamp(13px, .95vw, 15px) !important;
    line-height: 1.35 !important;
    max-width: 640px !important;
    margin: 0 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card {
    padding: 14px !important;
    min-height: 0 !important;
    gap: 12px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tip-icon,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tip-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 23px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-how-it-works,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-how-it-works {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-steps,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step {
    min-width: 0 !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    gap: 4px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step-icon,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step small {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-field-wide,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-field-wide {
    grid-column: 1 / -1 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-label,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-label {
    font-size: 10px !important;
    margin-bottom: 5px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-input,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-input {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-preview-compact,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-preview-compact {
    min-height: 0 !important;
    padding: 11px 14px !important;
    flex: 0 0 auto !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-room-copy-note,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-room-copy-note {
    padding: 8px 10px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions {
    gap: 6px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions .fgn-button,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions .fgn-button {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 15px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    margin-top: 2px !important;
    border-radius: 18px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head {
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head span,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-list,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-list {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
    display: grid !important;
    gap: 8px !important;
    padding-right: 4px !important;
    max-height: none !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room {
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-icon,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 19px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main {
    min-width: 0 !important;
    gap: 3px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main small {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 9px !important;
    font-size: 10.5px !important;
  }
}

/* TV lobby: keep QR, player area and controls on one screen without cutting the code. */
@media (min-width: 1024px) {
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell {
    height: 100dvh !important;
    min-height: 650px !important;
    overflow: hidden !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: clamp(12px, 1.3vw, 18px) clamp(16px, 2vw, 28px) clamp(14px, 1.5vw, 22px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-dashboard {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(245px, .76fr) minmax(0, 1.48fr) minmax(280px, .86fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-card {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-join-card {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
    gap: 9px !important;
    padding: clamp(14px, 1.35vw, 20px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-panel-title {
    font-size: clamp(22px, 2.4vw, 34px) !important;
    margin: 0 !important;
    line-height: 1.02 !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-panel-copy {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: min(36dvh, 320px) !important;
    min-height: 190px !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: visible !important;
    padding: clamp(10px, 1.1vw, 18px) !important;
    border-radius: 24px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby #fgn-qr .fgn-qr-inner-card,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby #fgn-qr .fgn-qr-inner-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-code-box-lobby {
    margin: 0 !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-card {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    padding: clamp(14px, 1.35vw, 20px) !important;
    gap: 10px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-player-list,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-lobby-mode-panel {
    min-height: 0 !important;
    overflow: auto !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-rail-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: clamp(14px, 1.25vw, 18px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-stats-grid,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-room-safety-grid {
    gap: 8px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-safety-toggle-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons [hidden] {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-control-buttons button:not([hidden]) {
    min-height: 42px !important;
    width: 100% !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-grid-bottom {
    display: none !important;
  }
}

/* TV question/reveal/final: avoid stacked cards and keep game canvas stable. */
@media (min-width: 1024px) {
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-tv-shell {
    height: 100dvh !important;
    min-height: 650px !important;
    overflow: hidden !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: clamp(12px, 1.3vw, 18px) clamp(16px, 2vw, 28px) clamp(14px, 1.5vw, 22px) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-dashboard {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    gap: 14px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-card {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-rail-card,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-rail-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
    gap: 14px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-rail-head,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-rail-head,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-rail-head,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-rail-head,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-game-stats,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-game-stats,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-game-stats,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-game-stats,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-host-safety-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-host-safety-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-host-safety-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-host-safety-panel {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question #fgn-question-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal #fgn-question-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-paused #fgn-question-panel,
  body.fgn-fullscreen-page .fgn-host.is-state-finished #fgn-question-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    grid-column: 1 / 2 !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons,
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons {
    grid-column: 2 / 3 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons [hidden],
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons [hidden],
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons [hidden],
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons [hidden] {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-control-buttons button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-control-buttons button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-paused .fgn-control-buttons button:not([hidden]),
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-control-buttons button:not([hidden]) {
    width: 100% !important;
    min-height: 42px !important;
  }

  body.fgn-fullscreen-page .fgn-tv-play-screen,
  body.fgn-fullscreen-page .fgn-final-screen,
  body.fgn-fullscreen-page .fgn-paused-card {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fgn-fullscreen-page .fgn-tv-play-screen {
    display: grid !important;
    grid-template-rows: auto minmax(0, .9fr) minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
  }

  body.fgn-fullscreen-page .fgn-tv-question-title {
    font-size: clamp(32px, 4vw, 58px) !important;
    line-height: 1.02 !important;
    margin: 0 !important;
  }

  body.fgn-fullscreen-page .fgn-tv-options-grid {
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 10px !important;
  }

  body.fgn-fullscreen-page .fgn-tv-option-card {
    min-height: 0 !important;
    padding: clamp(12px, 1.3vw, 18px) !important;
  }

  body.fgn-fullscreen-page .fgn-final-screen {
    display: grid !important;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr) !important;
    gap: 14px !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
  }
}

/* Phone controller: keep it thumb-friendly, centred and never cropped by Enfold. */
body.fgn-fullscreen-page .fgn-phone-shell {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  padding: clamp(14px, 3vw, 28px) 14px !important;
}

body.fgn-fullscreen-page .fgn-phone-frame {
  width: min(100%, 440px) !important;
  margin: 0 auto !important;
  min-height: 0 !important;
}

body.fgn-fullscreen-page .fgn-phone-card {
  overflow: visible !important;
}

body.fgn-fullscreen-page .fgn-phone-card-head h1 {
  font-size: clamp(28px, 9vw, 42px) !important;
  line-height: 1 !important;
}

body.fgn-fullscreen-page .fgn-avatar-grid,
body.fgn-fullscreen-page .fgn-team-choice-grid,
body.fgn-fullscreen-page .fgn-phone-options {
  gap: 10px !important;
}

/* Shorter screens: deliberately reduce decorative detail before allowing scroll. */
@media (min-width: 1024px) and (max-height: 740px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-host .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-tv-shell,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-tv-shell {
    min-height: 600px !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  body.fgn-fullscreen-page .fgn-topbar {
    height: 48px !important;
    min-height: 48px !important;
  }

  body.fgn-fullscreen-page .fgn-setup-stepper span small,
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step small {
    display: none !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 {
    font-size: clamp(28px, 2.7vw, 40px) !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-tip-card,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-tip-card {
    padding: 10px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner {
    padding: 18px 22px !important;
    gap: 8px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room {
    min-height: 58px !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-lobby .fgn-qr-placeholder {
    max-height: min(32dvh, 260px) !important;
    min-height: 170px !important;
  }
}

/* Tablet and small laptop fallback: stack cleanly instead of looking broken. */
@media (max-width: 1023px) {
  body.fgn-fullscreen-page .fgn-host .fgn-tv-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  body.fgn-fullscreen-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-dashboard,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.fgn-fullscreen-page .fgn-setup-panel,
  body.fgn-fullscreen-page .fgn-card,
  body.fgn-fullscreen-page .fgn-control-rail-card {
    height: auto !important;
    overflow: visible !important;
  }

  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-join-card,
  body.fgn-fullscreen-page .fgn-host.is-state-question .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-reveal .fgn-lobby-card,
  body.fgn-fullscreen-page .fgn-host.is-state-finished .fgn-lobby-card {
    display: none !important;
  }

  body.fgn-fullscreen-page .fgn-qr-placeholder {
    width: min(100%, 320px) !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }
}

/* v1.0.1 setup recovery and mode-picker rebuild */
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-tv-shell,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-tv-shell {
  overflow: hidden !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
  position: relative !important;
  grid-template-columns: minmax(390px, .86fr) minmax(520px, 1.14fr) !important;
  height: min(760px, calc(100dvh - 96px)) !important;
  max-height: min(760px, calc(100dvh - 96px)) !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-intro .fgn-setup-panel-inner,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-intro .fgn-setup-panel-inner {
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel h2,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel h2 {
  font-size: clamp(34px, 4.1vw, 58px) !important;
  line-height: .96 !important;
  margin-bottom: 2px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-lede,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-lede {
  max-width: 600px !important;
  margin-bottom: 6px !important;
}

.fgn-setup-action-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 4px 0 4px !important;
}

.fgn-setup-action-card {
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
  color: #fff !important;
  padding: 14px !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px 10px !important;
  align-items: center !important;
  cursor: pointer !important;
  min-height: 88px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.16) !important;
}

.fgn-setup-action-card:hover,
.fgn-setup-action-card:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 18px 40px rgba(139,47,201,.24) !important;
  outline: none !important;
}

.fgn-setup-action-card.is-primary {
  background: linear-gradient(135deg, rgba(139,47,201,.28), rgba(236,24,105,.18)) !important;
  border-color: rgba(236,24,105,.38) !important;
}

.fgn-setup-action-card > span {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.10) !important;
  grid-row: span 2 !important;
}

.fgn-setup-action-card strong {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

.fgn-setup-action-card small {
  color: rgba(255,255,255,.68) !important;
  line-height: 1.25 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-how-it-works,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-how-it-works {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
  align-self: end !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-steps,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-steps {
  align-items: start !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step {
  gap: 6px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-step-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-step-icon {
  width: 46px !important;
  height: 46px !important;
  font-size: 21px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-setup-panel-inner,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  padding-bottom: 22px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

.fgn-icon-mode::before { content: '🎯' !important; }

.fgn-field-help {
  margin: 7px 0 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.fgn-field-help strong { color: #fff !important; }

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-setup-field,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-setup-field {
  grid-column: 1 / -1 !important;
  min-height: auto !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-setup-field.is-disabled,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-setup-field.is-disabled {
  opacity: .64 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-team-setup-field.is-disabled .fgn-input,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-team-setup-field.is-disabled .fgn-input {
  cursor: not-allowed !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-room-copy-note,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-room-copy-note {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-start-actions,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-start-actions {
  margin-top: 4px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel.fgn-resume-drawer,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel.fgn-resume-drawer {
  position: absolute !important;
  inset: 18px !important;
  z-index: 50 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(14px, 2vw, 24px) !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: rgba(5, 4, 22, .72) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 30px 80px rgba(0,0,0,.44) !important;
  overflow: hidden !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel.fgn-resume-drawer[hidden],
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel.fgn-resume-drawer[hidden] {
  display: none !important;
}

.fgn-resume-drawer-card {
  width: min(980px, 100%) !important;
  max-height: min(620px, calc(100dvh - 150px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: linear-gradient(145deg, rgba(21, 11, 54, .96), rgba(84, 23, 82, .94)) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.45) !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
  overflow: hidden !important;
}

.fgn-resume-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-head,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-head strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-head strong {
  display: block !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1 !important;
  color: #fff !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-head span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-head span {
  display: block !important;
  color: rgba(255,255,255,.68) !important;
  margin-top: 6px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-list,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-list {
  display: grid !important;
  gap: 10px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  min-height: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-room,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-room {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 82px !important;
  padding: 13px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(139,47,201,.52), rgba(236,24,105,.34)) !important;
  font-size: 24px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-main,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-main {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-main strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-main strong {
  font-size: 17px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-main em,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-main em,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-main small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-main small {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: center !important;
  color: rgba(255,255,255,.66) !important;
  font-style: normal !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-code,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-code,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-status,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-players,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-players {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  background: rgba(255,255,255,.07) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-room > b,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-room > b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 104px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8b2fc9, #ec1869) !important;
  box-shadow: 0 14px 32px rgba(236,24,105,.26) !important;
}

.fgn-resume-empty {
  min-height: 160px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  border-radius: 22px !important;
  border: 1px dashed rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.72) !important;
  padding: 22px !important;
}

.fgn-resume-empty strong {
  color: #fff !important;
  font-size: 20px !important;
}

@media (min-width: 1024px) and (max-height: 760px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-action-card,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-action-card {
    min-height: 70px !important;
    padding: 10px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-action-card small,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-action-card small,
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-field-help,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-field-help {
    display: none !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    height: min(680px, calc(100dvh - 72px)) !important;
    max-height: min(680px, calc(100dvh - 72px)) !important;
  }
}

@media (max-width: 1100px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-inner,
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-panel-form .fgn-setup-panel-inner,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner {
    overflow: visible !important;
  }
}

@media (max-width: 700px) {
  .fgn-setup-action-cards,
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-grid,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-grid {
    grid-template-columns: 1fr !important;
  }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-room,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-room {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer .fgn-resume-room > b,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer .fgn-resume-room > b {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}


/* ===== v1.0.2 setup compact cleanup ===== */
.fgn-host[data-room=""] .fgn-topbar {
  margin-bottom: 14px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard,
.fgn-host[data-room=""] .fgn-setup-dashboard {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.43fr) minmax(560px, 0.57fr) !important;
  height: min(720px, calc(100dvh - 88px)) !important;
  min-height: 620px !important;
  max-height: min(720px, calc(100dvh - 88px)) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.fgn-host[data-room=""] .fgn-setup-panel,
.fgn-host[data-room=""] .fgn-setup-panel-inner {
  min-height: 0 !important;
}

.fgn-host[data-room=""] .fgn-setup-panel-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  height: 100% !important;
  padding: 26px 30px !important;
  overflow: hidden !important;
}

.fgn-host[data-room=""] .fgn-setup-panel-intro .fgn-setup-panel-inner {
  justify-content: flex-start !important;
}

.fgn-host[data-room=""] .fgn-setup-panel-form .fgn-setup-panel-inner {
  justify-content: flex-start !important;
}

.fgn-host[data-room=""] .fgn-setup-panel-intro h2 {
  margin: 2px 0 4px !important;
  font-size: clamp(2.2rem, 4vw, 4.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  max-width: 8.5ch !important;
}

.fgn-host[data-room=""] .fgn-setup-lede {
  margin: 0 !important;
  max-width: 34rem !important;
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
}

.fgn-host[data-room=""] .fgn-tv-tip-card {
  margin: 4px 0 2px !important;
  padding: 16px 18px !important;
}

.fgn-host[data-room=""] .fgn-setup-action-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 2px 0 0 !important;
}

.fgn-host[data-room=""] .fgn-setup-action-card {
  min-height: 94px !important;
  padding: 16px 18px !important;
}

.fgn-host[data-room=""] .fgn-how-it-works {
  margin-top: auto !important;
  padding-top: 16px !important;
}

.fgn-host[data-room=""] .fgn-how-it-works .fgn-kicker {
  margin-bottom: 8px !important;
}

.fgn-host[data-room=""] .fgn-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.fgn-host[data-room=""] .fgn-step {
  gap: 8px !important;
}

.fgn-host[data-room=""] .fgn-step-number {
  margin-bottom: 2px !important;
}

.fgn-host[data-room=""] .fgn-step-icon {
  width: 50px !important;
  height: 50px !important;
  font-size: 1.2rem !important;
}

.fgn-host[data-room=""] .fgn-step strong {
  font-size: 1rem !important;
}

.fgn-host[data-room=""] .fgn-step small {
  font-size: 0.83rem !important;
  line-height: 1.35 !important;
}

.fgn-host[data-room=""] .fgn-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  margin: 0 !important;
}

.fgn-host[data-room=""] .fgn-setup-field,
.fgn-host[data-room=""] .fgn-team-setup-field {
  margin: 0 !important;
}

.fgn-host[data-room=""] .fgn-setup-field-wide {
  grid-column: 1 / -1 !important;
}

.fgn-host[data-room=""] .fgn-label {
  margin-bottom: 6px !important;
  font-size: 0.82rem !important;
}

.fgn-host[data-room=""] .fgn-input,
.fgn-host[data-room=""] select.fgn-input,
.fgn-host[data-room=""] input.fgn-input {
  min-height: 50px !important;
  height: 50px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.fgn-host[data-room=""] .fgn-icon-field .fgn-input {
  padding-left: 48px !important;
}

.fgn-host[data-room=""] .fgn-field-help {
  margin-top: 6px !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.fgn-host[data-room=""] .fgn-team-setup-field.is-disabled {
  display: none !important;
}

.fgn-host[data-room=""] .fgn-room-copy-note {
  margin: 0 !important;
  padding: 0 !important;
}

.fgn-host[data-room=""] .fgn-room-copy-note p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
}

.fgn-host[data-room=""] .fgn-start-actions {
  margin-top: 2px !important;
  gap: 8px !important;
}

.fgn-host[data-room=""] .fgn-button#fgn-create-room {
  min-height: 54px !important;
}

.fgn-host[data-room=""] #fgn-create-message:empty {
  display: none !important;
}

@media (max-width: 1400px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard,
  .fgn-host[data-room=""] .fgn-setup-dashboard {
    grid-template-columns: minmax(320px, 0.42fr) minmax(520px, 0.58fr) !important;
    height: min(700px, calc(100dvh - 84px)) !important;
    max-height: min(700px, calc(100dvh - 84px)) !important;
  }

  .fgn-host[data-room=""] .fgn-setup-panel-inner {
    padding: 24px 24px !important;
  }

  .fgn-host[data-room=""] .fgn-setup-panel-intro h2 {
    font-size: clamp(2rem, 3.4vw, 3.6rem) !important;
  }
}

@media (max-width: 1100px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-setup-dashboard,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-setup-dashboard,
  .fgn-host[data-room=""] .fgn-setup-dashboard {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .fgn-host[data-room=""] .fgn-setup-panel-inner {
    overflow: visible !important;
  }
}


/* ===== v1.0.3 resume room modal cleanup ===== */
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-panel,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-panel,
.fgn-host[data-room=""] .fgn-resume-panel {
  padding: 28px !important;
  backdrop-filter: blur(10px) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer-card,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer-card,
.fgn-host[data-room=""] .fgn-resume-drawer-card {
  width: min(980px, calc(100vw - 80px)) !important;
  max-height: min(76vh, 760px) !important;
  border-radius: 28px !important;
  padding: 22px 26px 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: 0 24px 80px rgba(6, 5, 24, 0.5) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head,
.fgn-host[data-room=""] .fgn-resume-head {
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head .fgn-kicker,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head .fgn-kicker,
.fgn-host[data-room=""] .fgn-resume-head .fgn-kicker {
  margin: 0 0 6px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head strong,
.fgn-host[data-room=""] .fgn-resume-head strong {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: .96 !important;
  letter-spacing: -0.04em !important;
  margin: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head span,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head span,
.fgn-host[data-room=""] .fgn-resume-head span {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  max-width: 54ch !important;
}

.fgn-host[data-room=""] .fgn-resume-head-actions {
  display: flex !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head .fgn-link-button,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head .fgn-link-button,
.fgn-host[data-room=""] .fgn-resume-head .fgn-link-button {
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-list,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-list,
.fgn-host[data-room=""] .fgn-resume-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-right: 6px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room,
.fgn-host[data-room=""] .fgn-resume-room {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) 112px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 94px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-icon,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-icon,
.fgn-host[data-room=""] .fgn-resume-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 1.5rem !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main,
.fgn-host[data-room=""] .fgn-resume-main {
  display: grid !important;
  gap: 6px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main strong,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main strong,
.fgn-host[data-room=""] .fgn-resume-main strong {
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main em,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main em,
.fgn-host[data-room=""] .fgn-resume-main em {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-main small,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-main small,
.fgn-host[data-room=""] .fgn-resume-main small {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-code,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-code,
.fgn-host[data-room=""] .fgn-resume-code,
body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-status,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-status,
.fgn-host[data-room=""] .fgn-resume-status,
.fgn-host[data-room=""] .fgn-resume-players {
  min-height: 28px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}

body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room > b,
body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room > b,
.fgn-host[data-room=""] .fgn-resume-room > b {
  width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
}

.fgn-host[data-room=""] .fgn-resume-empty {
  padding: 28px !important;
  border-radius: 20px !important;
}

@media (max-width: 980px) {
  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-drawer-card,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-drawer-card,
  .fgn-host[data-room=""] .fgn-resume-drawer-card {
    width: calc(100vw - 36px) !important;
    max-height: calc(100vh - 36px) !important;
    padding: 18px !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-head,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-head,
  .fgn-host[data-room=""] .fgn-resume-head {
    flex-direction: column !important;
  }

  .fgn-host[data-room=""] .fgn-resume-head-actions {
    margin-left: 0 !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room,
  .fgn-host[data-room=""] .fgn-resume-room {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  body.fgn-fullscreen-page.fgn-host-setup-page .fgn-resume-room > b,
  body.fgn-fullscreen-page .fgn-host[data-room=""] .fgn-resume-room > b,
  .fgn-host[data-room=""] .fgn-resume-room > b {
    grid-column: 1 / -1 !important;
  }
}