body { overflow: hidden; }
#qr { background: #fff; border-radius: 16px; padding: 8px; width: min(60vh, 70vw); height: auto; }
.marca { font-size: 1.4rem; letter-spacing: .02em; }
#aula, #deck { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }
#recepcao {
  position: fixed; inset: 0; background: var(--fundo); display: grid; grid-template-columns: 1.3fr 1fr;
  align-items: center; gap: 4vw; padding: 5vh 6vw;
}
#rec-titulo { font-size: clamp(2rem, 5vw, 4.2rem); }
#rec-local { font-size: 1.5rem; }
.rec-qr { text-align: center; }
#rec-qr { width: min(42vh, 36vw); background: #fff; border-radius: 16px; padding: 8px; }
.codigo { font-size: 1.3rem; margin-top: 1em; }
.codigo b { font-size: max(8vh, 48px); letter-spacing: .12em; display: block; color: var(--destaque); }
.chegando { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3vh; }
.chegando span { background: #1b2430; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px; font-size: 1.2rem; animation: chega .6s ease-out; }
@keyframes chega { from { transform: translateY(20px); opacity: 0; } }
#canto {
  position: fixed; right: 14px; bottom: 14px; z-index: 5; display: flex; gap: 10px; align-items: center;
  background: #0e1116e6; border: 1px solid var(--borda); border-radius: 14px; padding: 8px;
}
#canto img { width: max(14vh, 110px); background: #fff; border-radius: 8px; padding: 3px; }
#canto small { display: block; color: var(--suave); }
#canto b { font-size: max(5vh, 34px); letter-spacing: .1em; color: var(--destaque); }
#momento-telao {
  position: fixed; inset: 0; z-index: 4; background: #06080c; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 5vh 6vw; text-align: center;
}
#momento-telao h2 { font-size: clamp(1.8rem, 4.5vw, 3.6rem); max-width: 80vw; }
.contador { font-size: 2rem; color: var(--suave); margin-top: 2vh; }
.barras { width: min(80vw, 1100px); margin-top: 3vh; text-align: left; }
.barra { display: grid; grid-template-columns: 1fr 120px; gap: 14px; align-items: center; margin: 12px 0; font-size: 1.6rem; }
.barra .fundo { background: #1b2430; border-radius: 10px; overflow: hidden; position: relative; height: 64px; }
.barra .cheio { position: absolute; inset: 0 auto 0 0; background: #2d4e6b; transition: width .8s ease-out; }
.barra.certa .cheio { background: var(--ok); }
.barra .rotulo { position: relative; padding: 0 18px; line-height: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa { position: relative; max-height: 65vh; margin-top: 2vh; }
.mapa img { max-height: 65vh; max-width: 80vw; display: block; border-radius: 12px; }
.mapa .toque { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #ffb84fb0; transform: translate(-50%, -50%); box-shadow: 0 0 10px #ffb84f; }
.mapa .alvo { position: absolute; border: 4px solid var(--ok); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 18px var(--ok); aspect-ratio: 1; }
/* QR de saída: preto puro sobre branco puro, grande (≥ 60 % da altura), para ler do fundo da sala. */
.saida-linha { display: flex; align-items: center; gap: 5vw; margin-top: 2vh; }
.qr-saida { height: min(62vh, 46vw); background: #fff; border-radius: 12px; }
.digitos-saida { font-size: min(20vh, 13vw); font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: #fff; }
#barra { position: fixed; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 10; }
#offline {
  position: fixed; bottom: 10px; left: 10px; z-index: 10; background: var(--erro); color: #fff;
  border-radius: 8px; padding: 4px 10px; font-size: .85rem;
}