body { overflow-x: hidden; }

.join {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(70% 50% at 50% -5%, #e5383b22, transparent 70%), var(--bg);
}
.join .card { width: min(100%, 400px); display: grid; gap: 18px; }
.join .mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #e5383b1c; color: var(--accent); border: 1px solid #e5383b40; }
.join .mark svg.i { width: 26px; height: 26px; }
.join h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.join .lead { margin: -10px 0 0; color: var(--muted); }
.join .code { height: 62px; font: 700 28px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .22em; text-align: center; text-transform: uppercase; padding: 0 0 0 .22em; }
.join .code::placeholder { letter-spacing: .22em; font-weight: 500; }
.join .go { min-height: 52px; font-size: 16px; width: 100%; }

@media (min-width: 640px) {
  .join .card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: 0 30px 80px #0009; }
}
@media (max-width: 639px) {
  .join { align-items: start; padding-top: max(18dvh, env(safe-area-inset-top)); }
}

#room { position: fixed; inset: 0; }
@media (max-width: 760px) and (orientation: portrait) {
  #room { position: static; min-height: 100dvh; }
}
.pill .dot.live { background: var(--ok); box-shadow: 0 0 0 3px #4cc38a2b; }
.pill .dot.warn { background: var(--accent); }
.pill .dot.off { background: var(--danger); }
.leave { width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 999px; background: #15151bcc; border: 1px solid #ffffff1f; backdrop-filter: blur(10px); }