/* Palco: o que vai no projetor. Usado em tela cheia e na miniatura do celular. */
.stage {
  position: relative;
  overflow: hidden;
  container-type: size;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background 0.4s ease;
}
.stage.theme-noite {
  --st-bg: radial-gradient(120% 90% at 50% 0%, #1b2b4d 0%, #0d1528 55%, #070b16 100%);
  --st-text: #ffffff;
  --st-meta: #a9b8d6;
  --st-gold: #f2c14e;
}
.stage.theme-preto {
  --st-bg: #000;
  --st-text: #ffffff;
  --st-meta: #9a9a9a;
  --st-gold: #f2c14e;
}
.stage.theme-vinho {
  --st-bg: radial-gradient(120% 90% at 50% 0%, #4a1022 0%, #2a0812 55%, #160409 100%);
  --st-text: #ffffff;
  --st-meta: #e2b3c0;
  --st-gold: #f4c76a;
}
.stage.theme-oliva {
  --st-bg: radial-gradient(120% 90% at 50% 0%, #2b3a25 0%, #172015 55%, #0b1009 100%);
  --st-text: #ffffff;
  --st-meta: #c3d1ad;
  --st-gold: #e9cf7a;
}
.stage.theme-claro {
  --st-bg: linear-gradient(180deg, #fffefb 0%, #f7f2e8 100%);
  --st-text: #0a0a0a;
  --st-meta: #5b4d3a;
  --st-gold: #9a4f08;
}

.stage .layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.5cqh 3.5cqw;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.stage .layer.in {
  opacity: 1;
}
.stage .layer.is-hidden {
  background: #000;
}
.stage .body {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5cqh 0;
}
.stage .text {
  max-width: 100%;
  text-align: center;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-shadow: 0 0.06em 0.25em rgba(0, 0, 0, 0.35);
}
.stage.theme-claro .text {
  text-shadow: none;
  font-weight: 700;
}
/* projetor em sala clara: versículo mais encorpado no fundo claro */
.stage.theme-claro .text p.verse {
  font-weight: 700;
}
.stage .text .verse {
  margin: 0;
  text-wrap: pretty;
  font-weight: 600;
  line-height: 1.26;
}
.stage .text .ln {
  display: block;
  text-wrap: balance;
}
.stage .text.upper {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.stage .text.chorus {
  font-style: italic;
}
.stage .text .t-title {
  display: block;
  color: var(--st-gold);
  font-size: 0.72em;
  font-weight: 700;
  margin-bottom: 0.45em;
  text-wrap: balance;
}
.stage .meta-top,
.stage .meta-foot {
  display: flex;
  gap: 1.2cqw;
  align-items: baseline;
  justify-content: center;
  color: var(--st-meta);
  font-size: 3.6cqh;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage .meta-foot {
  font-size: 4.6cqh;
}
.stage .meta-foot.small {
  font-size: 3.4cqh;
}
.stage .meta-strong {
  color: var(--st-gold);
  font-weight: 700;
}
.stage .meta-ver {
  opacity: 0.8;
  font-weight: 500;
}

.stage .layer.is-idle {
  justify-content: center;
}
.stage .idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqh;
  color: var(--st-meta);
}
.stage .idle-mark {
  width: 9cqh;
  height: 9cqh;
  opacity: 0.35;
}
.stage .idle-name {
  color: var(--st-text);
  font-size: 6cqh;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
  max-width: 80cqw;
  opacity: 0.92;
}