/* Shared by the overlay and the editor, so a style fix lands in both. */

:root {
  --sc-bg: #0e1013;
  --sc-panel: #171a1f;
  --sc-panel-2: #1f242b;
  --sc-line: #2b3139;
  --sc-text: #e6e9ee;
  --sc-dim: #9aa4b2;
  --sc-accent: #5b9cff;
  --sc-warn: #ffb020;
  --sc-bad: #ff5c5c;
  --sc-ok: #3ddc84;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* --- the stage, identical in both pages --------------------------------- */

.sc-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sc-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* Everything inside positions against this box, in canvas units. */
}

.sc-el {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
  /* The compositor keeps transformed layers off the main thread; without this
     a drag of a large element janks in OBS at 60fps. */
  will-change: transform;
}

.sc-el > * {
  width: 100%;
  height: 100%;
  display: block;
}

.sc-text {
  display: flex;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  /* An overlay's text must not be selectable in the editor's canvas or a
     drag turns into a text selection. */
  user-select: none;
}

.sc-img { object-fit: contain; }

.sc-embed { border: 0; background: transparent; }

/* --- overlay page ------------------------------------------------------- */
/* OBS composites whatever the page does not paint. A background colour on
   body is the single most common reason an overlay shows up as a black
   rectangle on stream, so it is explicitly transparent here. */

body.sc-overlay {
  background: transparent;
  overflow: hidden;
  cursor: none;
}

.sc-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  font: 600 13px/1.4 ui-monospace, monospace;
  color: #fff;
  background: rgba(200, 40, 40, .92);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  max-width: 460px;
}

.sc-badge small {
  display: block;
  font-weight: 400;
  opacity: .85;
  margin-top: 3px;
}