html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #fff; }
[hidden] { display: none !important; }

/* ---------- palco (girado por JS conforme orientação) ---------- */
#stage { position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh; overflow: hidden; background: #000;
  transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; display: none; background: transparent; }
#video { background: #000; }
.panel { position: absolute; inset: 0; display: none; overflow: hidden; }
.panel img { position: absolute; }

#overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: #000; color: #cfd8d3; font-size: 3.2vmin; letter-spacing: .02em; }

.hud { position: fixed; display: none; background: rgba(0,0,0,.6); color: #fff; padding: .7vmin 1.6vmin;
  border-radius: 1vmin; font-size: 2.2vmin; z-index: 2147483000; }
#txtDeviceName { top: 2vmin; left: 2vmin; }
#txtErro { bottom: 2vmin; left: 2vmin; max-width: 70vw; background: rgba(140,20,20,.88); }
#txtSom { bottom: 2vmin; right: 2vmin; background: rgba(150,90,0,.9); }
#txtClock { top: 2vmin; right: 2vmin; font-variant-numeric: tabular-nums; }
#txtMediaName { position: absolute; bottom: 4vmin; left: 50%; transform: translateX(-50%); font-size: 2.6vmin; z-index: 2147483000; }

/* ---------- card ---------- */
#cardPanel { background: #12161C; }
#cFundo { inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#cScrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: none; }
#cBox { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 5vmin; gap: 3vmin; box-sizing: border-box; text-align: center; }
#cBox.topo { justify-content: flex-start; align-items: flex-start; text-align: left; }
#cImg { position: static !important; max-width: 60%; max-height: 40%; object-fit: contain; display: none; }
#cTitulo { font-size: 7vmin; font-weight: 800; line-height: 1.1; }
#cTexto { font-size: 4vmin; line-height: 1.3; }
#stBg { inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#storyRoot { position: absolute; inset: 0; display: none; }
#storyRoot > * { position: absolute; left: 50%; top: 50%; }
.stTxt { transform-origin: center; text-align: center; white-space: pre-wrap; transform: translate(-50%, -50%); }


/* ---------- clima ---------- */
#weatherPanel { background: #0d1a2b; }
#wFoto { inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#wScrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65)); display: none; }
#wCredito { position: absolute; right: 2vmin; bottom: 1.6vmin; font-size: 1.6vmin; color: #ffffffa0; text-shadow: 0 .2vmin .6vmin #000; display: none; }
.wBody { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vmin;
  text-shadow: 0 .3vmin 1.2vmin rgba(0,0,0,.7); }
#wCidade { font-size: 6vmin; font-weight: 600; }
.wAgora { display: flex; align-items: center; gap: 3vmin; }
#wIcone { font-size: 16vmin; }
#wTemp { font-size: 20vmin; font-weight: 700; }
#wDesc { font-size: 5vmin; }
#wExtra { font-size: 2.8vmin; color: #dce6ff; }
#wPrevisao { display: flex; gap: 4vmin; margin-top: 3vmin; }
#wPrevisao > div { display: flex; flex-direction: column; align-items: center; gap: .6vmin; }
#wPrevisao .d { font-size: 2.6vmin; color: #dce6ff; }
#wPrevisao .i { font-size: 5vmin; }
#wPrevisao .t { font-size: 2.6vmin; color: #afc3f5; }

/* ---------- notícias ---------- */
#newsPanel { background: #0b1216; }
#nFoto { inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#nScrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%); display: none; }
#nFotoLado { right: 0; top: 0; width: 38%; height: 100%; object-fit: cover; display: none; }
.nBody { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 6vmin 6vmin 6vmin 7vmin; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 3vmin; }
#nTema { font-size: 3vmin; letter-spacing: .25em; color: #3DCE78; font-weight: 700; }
#nLista { display: flex; flex-direction: column; gap: 3.2vmin; text-shadow: 0 .2vmin 1vmin rgba(0,0,0,.8); }
#nLista.lado { max-width: 58%; }
.mn .t { font-size: 3.6vmin; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn .m { font-size: 2.2vmin; color: #3DCE78; margin-top: .5vmin; }
.mn.g .t { font-size: 6vmin; -webkit-line-clamp: 4; }
.mn.g .m { font-size: 2.8vmin; margin-top: 1.6vmin; }

/* ---------- marca (vincular e carregando): mesmo visual do site e do app ---------- */
.pPill { padding: .25em .7em; border-radius: 999px; background: #3dff8a; color: #03210f; font-size: .62em; font-weight: 800; letter-spacing: .12em; }

/* ---------- vincular ---------- */
#pairing { position: fixed; inset: 0; display: none; z-index: 50; cursor: default; color: #f2fbf5; overflow: hidden;
  background: radial-gradient(70vmax 60vmax at 85% 10%, #1d5a35 0%, transparent 60%), radial-gradient(60vmax 50vmax at 0% 100%, #0f3a22 0%, transparent 65%), #08130d; }
.pTopo { position: absolute; left: 5vw; right: 5vw; top: 5vh; display: flex; align-items: center; gap: 1.2vmin; font-size: clamp(18px, 3.4vmin, 40px); }
.pTopo img { width: 1.6em; height: 1.6em; }
.pTopo b { font-weight: 800; letter-spacing: -.01em; }
.pAparelho { display: none; }   /* o dono pediu para não mostrar "Play Web/Box/Desktop" no canto */
.pGrade { position: absolute; left: 5vw; right: 5vw; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; gap: 6vw; }
.pPassos { flex: 1; min-width: 0; }
.pPassos h1 { margin: 0 0 4vmin; font-size: clamp(30px, 7vmin, 84px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; }
.pPassos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2vmin; }
.pPassos li { display: flex; align-items: center; gap: 2vmin; font-size: clamp(15px, 2.9vmin, 34px); color: #d7eadf; line-height: 1.25; }
.pPassos li span { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: #0f2a1b; border: 2px solid #3dff8a66; color: #3dff8a; font-weight: 800; font-size: .8em; }
.pPassos li b { color: #fff; }
.pRotulo { margin: 5vmin 0 .6vmin; font-size: clamp(12px, 2vmin, 22px); color: #a9c4b5; letter-spacing: .14em; text-transform: uppercase; }
#pCode { margin: 0; font-size: clamp(36px, 10vmin, 120px); font-weight: 800; letter-spacing: .06em; color: #3dff8a; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4vmin #3dff8a55; }
.pQrCaixa { flex: none; padding: 2vmin; border-radius: 3vmin; background: #fff; box-shadow: 0 0 0 1px #3dff8a55, 0 0 8vmin #3dff8a33; line-height: 0; }
.pQrCaixa:has(#pQr[hidden]) { display: none; }
#pQr { width: clamp(150px, 36vmin, 420px); height: clamp(150px, 36vmin, 420px); image-rendering: pixelated; }
.pStatus { position: absolute; left: 5vw; bottom: 6vh; display: flex; align-items: center; gap: 1.6vmin; font-size: clamp(13px, 2.4vmin, 26px); color: #a9c4b5; }
.pGira, .cgRoda i { border-radius: 50%; border: .35em solid #3dff8a2e; border-top-color: #3dff8a; animation: gira .85s linear infinite; }
.pGira { width: 1.1em; height: 1.1em; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (orientation: portrait) {
  .pGrade { flex-direction: column-reverse; align-items: flex-start; gap: 5vh; }
  .pTopo .pAparelho { display: none; }
}

/* ---------- tela que não pode exibir (mesmo visual da tela de vincular) ---------- */
#overlay .bqFundo { position: absolute; inset: 0; color: #f2fbf5; overflow: hidden; text-align: left;
  background: radial-gradient(70vmax 60vmax at 85% 10%, #1d5a35 0%, transparent 60%), radial-gradient(60vmax 50vmax at 0% 100%, #0f3a22 0%, transparent 65%), #08130d; }
#overlay .bqFundo .pTopo img { border-radius: .3em; object-fit: contain; width: auto; max-width: 4.5em; }
#overlay .bqFundo .pPassos h1 { font-size: clamp(26px, 6vmin, 72px); margin-bottom: 3vmin; text-wrap: balance; }
#overlay .bqIntro { margin: 0 0 3.4vmin; font-size: clamp(15px, 3vmin, 34px); line-height: 1.35; color: #d7eadf; max-width: 60ch; }
#overlay .bqFundo .pPassos li span { font-size: .75em; }
#overlay .bqFim { margin: 3.4vmin 0 0; font-size: clamp(14px, 2.7vmin, 30px); color: #a9c4b5; }
#overlay .bqQr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.6vmin; text-align: center; max-width: 44vmin; }
#overlay .bqQrCv { width: clamp(150px, 36vmin, 420px); height: clamp(150px, 36vmin, 420px); image-rendering: pixelated; display: block; }
#overlay .bqQrLeg { font-size: clamp(14px, 2.7vmin, 30px); font-weight: 700; color: #f2fbf5; }
#overlay .bqValor { font-size: clamp(20px, 4.4vmin, 48px); font-weight: 800; color: #3dff8a; text-shadow: 0 0 3vmin #3dff8a55; }
#overlay .bqQrNota { font-size: clamp(12px, 2.1vmin, 24px); color: #a9c4b5; }
@media (orientation: portrait) { #overlay .bqFundo .pGrade { flex-direction: column; align-items: flex-start; } }

/* ---------- preparando (baixando as mídias antes de começar) ---------- */
#carregando { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vmin;
  color: #f2fbf5; background: radial-gradient(60vmax 50vmax at 50% 0%, #1d5a35 0%, transparent 60%), #08130d; }
#carregando[hidden] { display: none !important; }
.cgMarca { position: absolute; top: 5vh; left: 5vw; display: flex; align-items: center; gap: 1.2vmin; font-size: clamp(16px, 3vmin, 34px); }
.cgMarca img { width: 1.6em; height: 1.6em; }
.cgRoda { position: relative; width: clamp(110px, 22vmin, 260px); height: clamp(110px, 22vmin, 260px); display: grid; place-items: center; }
.cgRoda i { position: absolute; inset: 0; border-width: clamp(6px, 1.2vmin, 14px); }
#cgPct { font-size: clamp(24px, 5.4vmin, 64px); font-weight: 800; color: #3dff8a; font-variant-numeric: tabular-nums; }
#cgTitulo { margin: 2vmin 0 0; font-size: clamp(20px, 4.4vmin, 52px); font-weight: 800; letter-spacing: -.01em; }
#cgDet { margin: 0; font-size: clamp(13px, 2.4vmin, 28px); color: #a9c4b5; font-variant-numeric: tabular-nums; }
.cgBarra { width: min(60vw, 640px); height: clamp(6px, 1vmin, 12px); border-radius: 99px; background: #3dff8a22; overflow: hidden; }
.cgBarra i { display: block; height: 100%; width: 0; border-radius: 99px; background: #3dff8a; box-shadow: 0 0 2vmin #3dff8a; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .pGira, .cgRoda i { animation-duration: 3s; } }

/* tela de assinatura pendente: aviso discreto + QR do Pix */
#overlay .bloq { display: flex; flex-direction: column; align-items: center; gap: 3vmin; max-width: 86vmin; text-align: center; padding: 3vmin; }
#overlay .bloq.lado { flex-direction: row; max-width: 92vw; text-align: left; gap: 6vmin; }
#overlay .bq-col { display: flex; flex-direction: column; align-items: center; gap: 1.6vmin; max-width: 90vmin; }
#overlay .bloq.lado .bq-col { align-items: flex-start; }
#overlay .bq-lado { display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; flex: none; }
#overlay .bq-logo { max-height: 11vmin; max-width: 40vmin; object-fit: contain; border-radius: 1vmin; }
#overlay .bq-marca { font-size: 2.2vmin; letter-spacing: .18em; text-transform: uppercase; color: #7a8a82; }
#overlay .bq-titulo { font-size: 4.4vmin; font-weight: 600; color: #eef4f0; }
#overlay .bq-texto { font-size: 2.8vmin; line-height: 1.55; color: #c9d4ce; white-space: pre-line; }
#overlay .bq-qr { width: 42vmin; height: 42vmin; border-radius: 1.4vmin; background: #fff; margin-top: 1vmin; image-rendering: pixelated; }
#overlay .bq-valor { font-size: 3.4vmin; font-weight: 600; color: #3dce78; }
#overlay .bq-dica { font-size: 2.2vmin; color: #9fb0a6; max-width: 46vmin; text-align: center; }