/* Header and topic emphasis */
.stage-top {
  height: 15%;
  grid-template-columns: 1fr 2.05fr 1fr;
}

.brand {
  font-size: clamp(16px, 1.85vw, 31px);
}

.show-title {
  font-size: clamp(20px, 2.35vw, 40px);
  line-height: 1;
  text-shadow: 0 3px 6px #000, 0 0 12px #700;
}

.panel {
  height: 75%;
  grid-template-columns: 1.1fr 1fr 1fr;
}

.stage.one-to-one .panel {
  grid-template-columns: 1.05fr .9fr 1.05fr;
}

@media (max-width: 680px) {
  .stage-top {
    height: 15%;
    grid-template-columns: 1fr 2fr 1fr;
  }

  .brand {
    font-size: clamp(12px, 3vw, 18px);
  }

  .show-title {
    font-size: clamp(17px, 4vw, 25px);
  }

  .panel {
    height: 75%;
    grid-template-columns: 1.05fr .95fr 1fr;
  }

  .stage.one-to-one .panel {
    grid-template-columns: 1.03fr .82fr 1.03fr;
  }
}

.guest-mode {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 15%, #7b0007, #170105 48%, #07080b 100%);
}

.guest-lobby { width: min(100%, 520px); }
.guest-card { background: #121720; border: 1px solid #3b4351; border-top: 5px solid var(--gold); border-radius: 14px; padding: 24px; box-shadow: 0 24px 70px #000a; }
.guest-brand { color: #fff; font-weight: 900; letter-spacing: .08em; }
.guest-brand b { color: var(--gold); }
.guest-card h1 { margin: 12px 0 4px; font-size: clamp(25px, 6vw, 38px); }
.guest-card p { margin: 0 0 18px; color: #b5bdca; line-height: 1.5; }
.guest-preview { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; background: #080b10; border: 2px solid #3b4351; }
.guest-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.guest-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #9fa8b6; background: radial-gradient(circle, #303846, #10141b); }
.guest-card label { display: block; margin: 18px 0 12px; color: #ccd2dc; font-weight: 700; }
.guest-card input { width: 100%; margin-top: 6px; padding: 12px; color: #fff; background: #090d13; border: 1px solid #3a4352; border-radius: 7px; font: 600 16px inherit; }
.guest-join { width: 100%; padding: 13px; border: 0; border-radius: 8px; color: #fff; background: var(--red); font: 800 16px inherit; cursor: pointer; }
.guest-join:disabled { background: #226d45; cursor: default; }
.guest-state { margin-top: 12px; padding: 10px; border-radius: 7px; color: #c1c8d3; background: #0b0f15; text-align: center; font-size: 14px; }
.guest-state.ready { color: #8cf0b4; }