:root {
  --bg: #0c0e12;
  --panel: #14171d;
  --ink: #f2f4f7;
  --muted: #98a1ae;
  --accent: #17c07a;
  --warn: #e2b93b;
  --bad: #e2704b;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* The safe-area insets keep the live view and the Leave button clear of the
     iPhone home indicator and the notch. */
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}

.panel { display: none; flex: 1; flex-direction: column; justify-content: center; gap: 18px; }
.panel[data-active] { display: flex; }

h1 { font-size: 27px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.lede { margin: 0; color: var(--muted); }
.fine { margin: 0; font-size: 14px; color: var(--muted); }

label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 6px; }

input[type="text"] {
  width: 100%;
  /* 17px or larger, or iOS Safari zooms the page on focus and the layout
     jumps at exactly the wrong moment. */
  font-size: 17px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid #2a2f39;
  background: var(--panel);
  color: var(--ink);
}
input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

form { display: flex; flex-direction: column; gap: 12px; }

button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 20px;
  /* Comfortably over the 44px minimum touch target, because this is tapped
     once, quickly, by someone who is also holding a drink. */
  min-height: 54px;
  cursor: pointer;
}
button:disabled { opacity: 0.6; }
.primary { background: var(--accent); color: #04140d; }
.ghost { background: transparent; color: var(--muted); border: 1px solid #2a2f39; }

.reassure { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.reassure li { margin-bottom: 6px; }

.panel-live { justify-content: flex-start; gap: 14px; }

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The self view is mirrored, which is what every phone camera app does and
     what people expect of their own reflection. The wall is NOT mirrored by
     default; that is a separate control on the wall app. */
  transform: scaleX(-1);
}

.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.82);
  font-size: 15px;
  font-weight: 600;
}
.badge.live { background: var(--accent); color: #04140d; }
.badge.queue { background: rgba(12, 14, 18, 0.82); color: var(--warn); }
.badge.warn { background: var(--bad); color: #180703; }

.status { margin: 0; text-align: center; color: var(--muted); }

.copybox { display: flex; flex-direction: column; gap: 10px; }
code {
  display: block;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel);
  font-size: 14px;
  word-break: break-all;
}

@media (prefers-reduced-motion: no-preference) {
  .panel[data-active] { animation: rise 180ms ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}