/* The overlay is transparent by design. It composites over live video, so
 * nothing here may paint a background. OBS shows checkerboard behind it. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

#stage {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The plaque. Names sit on a solid card rather than directly on video,
 * because text needs 4.5:1 and an outline alone cannot guarantee it
 * against every possible frame. */
.toast {
  position: fixed;
  /* Anchored by its TOP, under the shelf, so it grows DOWNWARD.
     That is the whole fix: bottom-anchored, the card grew up into the pot and
     the soil tokens the moment its text needed a second line, and on any
     source below 1080p it did so immediately.
     --card-top, --card-left, --card-max and --u are published by render.js
     from the same expressions it draws the shelf with, so this cannot drift.
     The fallbacks are only what is used before the first paint. */
  top: var(--card-top, 78vh);
  left: var(--card-left, 12px);
  bottom: auto;
  --pad: calc(var(--u, 4px) * 1.5);
  /* The second term keeps the card inside a narrow source. It is floored at
     160px because a viewport width of zero is a real state, seen in a hidden
     browser tab and in OBS while a source is being created, and without the
     floor min() collapses the card to nothing and the text wraps one
     character per line. */
  max-width: min(var(--card-max, 44ch),
                 max(160px, calc(100vw - var(--card-left, 12px) - var(--u, 4px) * 4)));
  padding: var(--pad) calc(var(--pad) * 1.35);
  /* The last two are for display names outside Latin: `who` is Twitch's
     display name, so it can be Japanese, Korean or Cyrillic, and none of the
     monospace faces above cover those. Without a fallback with real coverage
     the name renders as tofu boxes. */
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
               monospace, system-ui, sans-serif;
  font-size: max(11px, calc(var(--u, 4px) * 4));
  line-height: 1.35;
  /* Peri's ink, not a colour we picked, so the card belongs to the same
     drawing as everything else on screen. */
  color: #2015bf;
  background: #fefcf4;
  border: max(1px, calc(var(--u, 4px) * 0.5)) solid #2015bf;
  /* Square corners. Every corner in Peri's sprites is a square pixel, and a
     rounded card beside them is exactly how pixel art stops looking like a
     game and starts looking like a web page. */
  border-radius: 0;
  /* The white keyline every sprite gets from paint(), then the same hard
     offset shadow at the same 30% the art uses. The card was the only object
     on screen lit differently from everything around it. */
  box-shadow: 0 0 0 var(--u, 4px) #ffffff,
              var(--u, 4px) var(--u, 4px) 0 0 rgba(32, 21, 191, 0.30);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  /* Wraps to two lines instead of being cut off.
     It was nowrap at 44ch with an ellipsis, and the longest bloom line,
     "A sunflower opened. Plenty of resting went into that one.", is 57
     characters. Every bloom sentence, the payoff of a forty five minute
     cycle, was being silently truncated. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.bloom {
  background: #ffda72;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 120ms linear;
    transform: none;
  }
  .toast.show { transform: none; }
}

/* ---------------------------------------------------------------------------
   The activation card.

   Shown once, when a streamer first adds the source, and then almost never
   again. It sits centre-left rather than centre-screen so a streamer setting
   up with a face cam is not covered by it. It is the only moment this product
   asks anything of anybody, so the words are plain and there is exactly one
   thing to do.
   --------------------------------------------------------------------------- */
.card {
  position: fixed;
  left: 3.5vh;
  /* Anchored to the top, not centred. Centred put it straight over the pot,
     which is exactly what the streamer is trying to look at while they drag
     the source into position. Both need to be visible at once. */
  top: 5vh;
  max-width: min(46ch, 88vw);
  padding: 1.5em 1.7em;
  background: #fefcf4;
  border: 3px solid #211142;
  border-radius: 18px;
  box-shadow: 6px 6px 0 0 #211142;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #211142;
}
.card[hidden] { display: none; }

.card-eyebrow {
  margin: 0 0 0.65em;
  font-size: clamp(9px, 1.15vh, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #00806f;
}
.card-lead {
  margin: 0 0 0.5em;
  font-size: clamp(13px, 1.85vh, 26px);
  line-height: 1.4;
  font-weight: 500;
}
.card-code {
  margin: 0.35em 0 0.3em;
  font-size: clamp(26px, 5.6vh, 78px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.05;
  word-break: break-all;
}
.card-where {
  margin: 0 0 0.55em;
  font-size: clamp(12px, 1.7vh, 24px);
  font-weight: 700;
  color: #00806f;
}
.card-note {
  margin: 0;
  font-size: clamp(10px, 1.3vh, 17px);
  line-height: 1.6;
  opacity: 0.72;
}
.card-code:empty, .card-where:empty, .card-note:empty { display: none; }

/* ---------------------------------------------------------------------------
   The marker. Hidden while everything is fine, which is the point.
   --------------------------------------------------------------------------- */
.pulse {
  position: fixed;
  right: 2vh;
  bottom: 2vh;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.7em;
  background: #fefcf4;
  border: 2px solid #211142;
  border-radius: 999px;
  box-shadow: 3px 3px 0 0 #211142;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: clamp(9px, 1.15vh, 15px);
  color: #211142;
}
.pulse[hidden] { display: none; }
.pulse .dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #d98324;
  border: 2px solid #211142;
  flex: 0 0 auto;
}
.pulse em { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}