/* main.css — projector view. Full-bleed, read-only, built to read across a room. */

#stage { cursor: none; }

.watermark {
  position: fixed;
  bottom: 18px;
  right: 20px;
  opacity: 0.18;
  z-index: 30;
  height: 34px;
}

/* presence — climbing number + a fill grid of cells lighting up */
.presence-num {
  font-weight: 800;
  font-size: clamp(6rem, 34vmin, 32rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.presence-grid {
  display: grid;
  gap: clamp(4px, 0.8vmin, 12px);
  margin-top: 3vmin;
  width: min(80vw, 1100px);
}
.presence-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(246, 244, 238, 0.08);
  transition: background-color 400ms ease, box-shadow 400ms ease;
}
.presence-cell.on {
  background: var(--candle);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.6);
}

/* react — surging number */
.react-num {
  font-weight: 800;
  font-size: clamp(7rem, 40vmin, 36rem);
  line-height: 0.85;
  color: var(--ember);
  transition: transform 120ms ease;
}

/* react — energy meter (reads as a live rising/falling gauge) */
.energy {
  position: relative;
  width: clamp(90px, 18vmin, 260px);
  height: 60vh;
  border-radius: 26px;
  background: rgba(246, 244, 238, 0.08);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.energy-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, var(--ember), var(--candle-deep), var(--candle));
  box-shadow: 0 0 50px rgba(255, 209, 102, 0.5);
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.energy-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(2rem, 9vmin, 6rem);
  color: var(--paper);
  mix-blend-mode: difference;
}

/* thisOrThat — two proportional colour masses (NOT a bar chart) */
.masses {
  position: absolute;
  inset: 0;
  display: flex;
}
.mass {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1vmin;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.mass .mass-label {
  font-weight: 800;
  font-size: clamp(1.4rem, 6vmin, 5rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.mass .mass-count {
  font-weight: 600;
  font-size: clamp(1rem, 3.4vmin, 2.4rem);
  opacity: 0.85;
}
.prompt-over {
  position: absolute;
  top: 6vmin;
  left: 0;
  right: 0;
  z-index: 6;
  font-weight: 700;
  font-size: clamp(1.2rem, 4.2vmin, 3rem);
  padding: 0 6vmin;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* wordBloom — words grow with frequency */
.bloom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em 0.7em;
  width: 92%;
  max-height: 78vh;
  overflow: hidden;
}
.bloom-word {
  font-weight: 700;
  line-height: 1;
  animation: ok-rise 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  color: var(--paper);
}

/* QR shown on the main screen for relay registration */
.origin-qr {
  position: absolute;
  bottom: 4vmin;
  left: 4vmin;
  display: flex;
  align-items: center;
  gap: 2vmin;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  padding: 2vmin;
  border-radius: 14px;
  z-index: 8;
}
.origin-qr img { width: clamp(120px, 16vmin, 240px); height: auto; display: block; }
.origin-qr .qr-cap { text-align: left; max-width: 28vw; }
.origin-qr .qr-cap b { font-size: clamp(1rem, 2.4vmin, 1.6rem); }
.origin-qr .qr-cap span { font-size: clamp(0.7rem, 1.6vmin, 1rem); color: #444; }

/* mosaic preview on main before reveal */
.mosaic-preview {
  width: min(70vw, 1000px);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #000;
}
.mosaic-instructions {
  font-weight: 700;
  font-size: clamp(1.2rem, 4vmin, 3rem);
  line-height: 1.15;
}