/* The picture that goes to YouTube: a fixed 1280 x 720 stage (scaled to the window when the window is
   another size; the egress recorder opens it at exactly 1280 x 720, so the scale is 1).
   Nothing here is animated: the recorder has no GPU, and every change should cost as little as possible. */
@font-face {
  font-family: "Manrope";
  src: url("assets/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: block;
}

:root {
  --sky: #dcebf8;
  --white: #ffffff;
  --navy: #0b2b4f;
  --blue: #1572c8;
  --ink: #1b1a26;
  --muted: #5b6275;
  --camera-bg: #b9c4d2;
  --camera-fg: #8190a3;
  --warning: #b54708;
  --shadow: 0 6px 24px rgba(11, 43, 79, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--sky);
}

#stage[data-layout="camera_full"] { background: #000; }
#stage[data-layout="slide_full"] { background: var(--white); }

.tile {
  position: absolute;
  overflow: hidden;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* Full-stage tiles have no frame. */
#stage[data-layout="camera_full"] #camera,
#stage[data-layout="slide_full"] #slide {
  border-radius: 0;
  box-shadow: none;
}

#camera { background: var(--camera-bg); }

#slideCanvas, #screenVideo, #cameraVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
}

#screenVideo { background: #000; }
#cameraVideo { background: #000; }
#cameraVideo.fill { object-fit: cover; }

.avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--camera-bg);
}
.avatar svg { width: 62%; max-height: 80%; fill: var(--camera-fg); }

.note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
}

.nametag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(11, 43, 79, 0.85);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#logo {
  position: absolute;
  right: 20px;
  bottom: 16px;
  width: 56px;
  height: 56px;
}

/* ---- Break, Technical issue, Starting soon ---- */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
#overlay .card { max-width: 900px; padding: 0 48px; }
#overlay svg { width: 96px; height: 96px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#overlay h1 { margin: 24px 0 8px; font-size: 56px; line-height: 1.15; font-weight: 800; }
#overlay p { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 500; opacity: 0.9; }
#overlay #overlayCount { margin-top: 20px; font-size: 64px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: 1; }
#stage[data-overlay="technical"] #overlay { background: #4a2b0b; }

[hidden] { display: none !important; }

/* A fatal problem (missing address or token): the egress reads div.error and fails the recording. */
div.error {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 24px;
  background: #b42318;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  z-index: 10;
}

#debug {
  position: fixed;
  left: 4px;
  top: 4px;
  z-index: 20;
  margin: 0;
  max-width: 60vw;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #8fd18f;
  font: 12px/1.35 ui-monospace, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}