/* Tela do player — base fixa de 1280x720, escalada por JS. Compatível com Chromium 62 (sem gap em flex, sem inset, sem aspect-ratio, sem clamp). */
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka-Variable.ttf") format("truetype"); font-weight: 300 700; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; }
body.nativo, body.nativo #palco { background: transparent; }
* { box-sizing: border-box; }

#palco {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden;
  transform-origin: 0 0; background: #231208; color: #FAF6F0;
  font-family: "Fredoka", "Roboto", "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased;
}
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#fundo-vazio {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: radial-gradient(ellipse at 20% 15%, rgba(232, 120, 32, .35), transparent 55%), linear-gradient(160deg, #3D2010, #231208);
}
.tem-video #fundo-vazio, body.nativo #fundo-vazio, body.nativo #video { display: none; }
.escondido { display: none !important; }

/* Marca */
.pill { position: absolute; left: 28px; top: 24px; padding: 8px 16px 8px 18px; border-radius: 999px; background: rgba(61, 32, 16, .78); border: 2.5px solid #E87820; display: flex; align-items: center; }
.logo { font-weight: 700; font-size: 30px; letter-spacing: -.5px; color: #FAF6F0; }
.logo b { color: #E87820; font-weight: 700; }
.selo { margin-left: 10px; font-weight: 700; font-size: 13px; letter-spacing: 2.5px; color: #E87820; }

/* Cartão do QR */
#cartao-qr {
  position: absolute; right: 28px; bottom: 124px; width: 300px; padding: 16px 16px 14px; border-radius: 22px;
  background: #FAF6F0; border: 4px solid #E87820; color: #3D2010; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
#cartao-qr.saindo { opacity: 0; transform: translateY(16px); }
#oferta-por { font-size: 15px; font-weight: 500; margin-bottom: 10px; color: #6B5444; }
#oferta-por b { color: #3D2010; font-weight: 700; }
#qr { width: 240px; height: 240px; margin: 0 auto; background: #fff; border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; }
#qr canvas, #qr img { display: block; image-rendering: pixelated; }
#qr-chamada { margin-top: 10px; font-weight: 700; font-size: 19px; }
#oferta { margin-top: 4px; font-weight: 700; font-size: 17px; color: #E87820; }
#oferta:empty { display: none; }

/* Tela final: QR grande no centro */
#palco.final #cartao-qr { right: 50%; bottom: 50%; width: 460px; margin-right: -230px; margin-bottom: -250px; padding: 22px 22px 18px; }
#palco.final #qr { width: 360px; height: 360px; }
#palco.final #qr-chamada { font-size: 26px; }

/* Faixa inferior (14% da altura) */
#faixa {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px; display: flex; align-items: center;
  background: linear-gradient(90deg, #231208, #3D2010 55%, #231208); border-top: 3px solid #E87820;
}
#clima { width: 285px; padding-left: 28px; display: flex; flex-direction: column; justify-content: center; border-right: 2px solid rgba(232, 120, 32, .35); height: 70px; }
#clima-temp { font-size: 38px; font-weight: 700; color: #E87820; line-height: 1; }
#clima-txt { font-size: 14px; color: #F5EDE3; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sem-clima #clima { display: none; }
#letreiro { flex: 1; overflow: hidden; height: 100px; position: relative; }
#letreiro-trilho { position: absolute; top: 0; height: 100px; line-height: 100px; white-space: nowrap; font-size: 28px; font-weight: 500; color: #FAF6F0; will-change: transform; }
#letreiro-trilho span { margin-right: 60px; }
#letreiro-trilho span:before { content: "●"; color: #E87820; font-size: 18px; margin-right: 18px; vertical-align: 4px; }
#relogio { width: 190px; padding-right: 28px; text-align: right; display: flex; flex-direction: column; justify-content: center; border-left: 2px solid rgba(232, 120, 32, .35); height: 70px; }
#hora { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#data { font-size: 15px; color: #F5EDE3; margin-top: 4px; }

/* Código pequeno de reconexão */
#codigo-canto { position: absolute; right: 18px; top: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: rgba(250, 246, 240, .75); font-size: 14px; font-family: monospace; display: flex; align-items: center; }
#codigo-canto i { width: 9px; height: 9px; border-radius: 50%; background: #E87820; margin-right: 8px; display: inline-block; }

/* Ativação */
#ativacao { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 0%, #5A3520, #231208 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ativ-marca .logo { font-size: 56px; }
.ativ-marca .selo { font-size: 18px; padding: 4px 12px; border: 3px solid #E87820; border-radius: 999px; }
.ativ-titulo { font-size: 30px; margin: 40px 0 18px; color: #F5EDE3; }
#ativ-codigo { font-size: 110px; font-weight: 700; letter-spacing: 8px; color: #E87820; background: rgba(250, 246, 240, .06); border: 3px dashed rgba(232, 120, 32, .6); border-radius: 28px; padding: 10px 48px; }
.ativ-passos { font-size: 24px; margin: 26px 0 0; color: #F5EDE3; }
.ativ-passos b { color: #E87820; }
.ativ-rede { font-size: 18px; margin-top: 30px; color: rgba(250, 246, 240, .55); }

/* Salvaguarda animada (último recurso, quando nem o vídeo da Zelai toca) */
#salvaguarda-slide { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, #F7B267 0%, #F4845F 38%, #3D2010 100%); }
#palco.salvaguarda #salvaguarda-slide { display: block; }
#palco.salvaguarda #fundo-vazio { display: none; }
.sg-mar { position: absolute; left: -10%; width: 120%; bottom: 100px; height: 260px;
  background: repeating-linear-gradient(170deg, rgba(31, 138, 160, .95) 0, rgba(31, 138, 160, .95) 40px, rgba(42, 160, 180, .95) 40px, rgba(42, 160, 180, .95) 80px);
  animation: sg-ondas 9s linear infinite; }
@keyframes sg-ondas { from { transform: translateX(0); } to { transform: translateX(-80px); } }
.sg-texto { position: absolute; left: 80px; top: 120px; width: 720px; color: #FAF6F0; text-shadow: 0 4px 24px rgba(35, 18, 8, .45); }
.sg-kicker { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: 4px; color: #3D2010; text-shadow: none; }
.sg-titulo { margin: 18px 0 0; font-weight: 700; font-size: 64px; line-height: 1.05; }
.sg-titulo b { color: #231208; text-shadow: none; }
.sg-sub { margin: 22px 0 0; font-size: 22px; color: #FAF6F0; }

.ativ-id { font-size: 16px; margin-top: 10px; color: rgba(250, 246, 240, .45); font-family: monospace; letter-spacing: 1px; }
#codigo-canto.alerta i { background: #C0392B; }