/* Jogo da TV vertical. Desenhado em 1080x1920 e escalado para caber em qualquer tela. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); overflow: hidden; }
body { color: var(--texto); font-family: var(--fonte-texto); -webkit-font-smoothing: antialiased; user-select: none; }
body.sem-cursor, body.sem-cursor * { cursor: none !important; }
[hidden] { display: none !important; }
kbd { font-family: var(--fonte-texto); font-size: .8em; border: 1px solid currentColor; border-radius: 6px; padding: 1px 8px; opacity: .7; }

.palco {
  position: absolute; left: 0; top: 0; /* tv.js posiciona em pixels inteiros */
  width: 1080px; height: 1920px;
  transform-origin: 0 0;
  background: var(--fundo) var(--fundo-imagem) center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}

.selo-ensaio {
  position: absolute; top: 28px; left: 28px; z-index: 25;
  font-size: 22px; letter-spacing: .3em; font-weight: 700;
  color: #000; background: var(--vip); padding: 8px 16px; border-radius: 6px;
}

.selo-mudo {
  position: absolute; top: 28px; right: 28px; z-index: 25;
  font-size: 18px; letter-spacing: .12em; font-weight: 700;
  color: #000; background: var(--prata); padding: 8px 14px; border-radius: 6px;
}
/* A janela do jogo perdeu o foco: o botão USB não chega. Faixa para a atendente clicar. */
.faixa-foco {
  position: absolute; top: 0; left: 0; right: 0; z-index: 26;
  font: inherit; font-size: 26px; font-weight: 700; color: #000; background: var(--erro);
  border: 0; padding: 18px; cursor: pointer;
}
/* Nenhum brinde normal ligado no tablet: a TV avisa, e o servidor não gasta a jogada de ninguém. */
.faixa-pausa {
  margin: 18px 60px 0; padding: 16px; border-radius: 14px; text-align: center;
  font-size: 30px; font-weight: 700; color: #000; background: var(--vip);
}
.pronto-aviso { margin: 24px 0 0; font-size: 28px; font-weight: 700; color: var(--vip); }

/* ---------- topo ---------- */
.topo { padding-top: 64px; text-align: center; }
.logo { width: 420px; height: auto; display: block; margin: 0 auto; }
.evento { margin: 6px 0 0; font-size: 26px; letter-spacing: .5em; color: var(--prata); padding-left: .5em; }
.chamada { margin: 14px 0 0; font-family: var(--fonte-titulo); font-weight: 400; font-size: 92px; line-height: 1; letter-spacing: -.01em; }

/* ---------- máquina ---------- */
/* A arte original (skin/maquina, 1400 px = 1000 px na tela). A caixa .moldura é só o corpo da
   máquina: a alavanca sobe 218 px acima dela (ao lado do título) e, puxada, desce por baixo. As
   posições dos rolos são as janelas da arte medidas na imagem; a altura (267) é a ALTURA do tv.js. */
.maquina { position: relative; margin-top: 46px; width: 1000px; }
.moldura { position: relative; width: 1000px; height: 487px; }
.maquina-arte { position: absolute; left: 0; top: -218px; width: 1000px; height: auto; opacity: 0; pointer-events: none; }
.maquina-arte.ativa { opacity: 1; }
.rolo { position: absolute; top: 96px; height: 267px; overflow: hidden; border-radius: 6px; }
.rolo:nth-of-type(1) { left: 121px; width: 153px; }
.rolo:nth-of-type(2) { left: 371px; width: 153px; }
.rolo:nth-of-type(3) { left: 619px; width: 150px; }
/* Sombra do cilindro por cima dos símbolos, para eles parecerem pintados no rolo. */
.rolo::before, .rolo::after { content: ''; position: absolute; left: 0; right: 0; height: 64px; z-index: 2; pointer-events: none; }
.rolo::before { top: 0; background: linear-gradient(rgba(30,36,46,.5), transparent); }
.rolo::after { bottom: 0; background: linear-gradient(transparent, rgba(30,36,46,.5)); }
.fita { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.fita.rolando { animation: rolar .32s linear infinite; filter: blur(3px); }
@keyframes rolar { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.simbolo { height: 267px; display: flex; align-items: center; justify-content: center; }
.simbolo img { width: 124px; height: 124px; object-fit: contain; }
/* Os ícones provisórios (.svg) são brancos: no rolo prateado, ficam grafite. A arte final (.png) entra como é. */
.simbolo img[src*=".svg"] { filter: invert(.82); }
/* Foto de produto (.png) no rolo: maior que o ícone, sem filtro, dentro da janela de 153 × 267. */
.simbolo img:not([src*=".svg"]) { width: 140px; height: 190px; }
.moldura.ganhou .rolo { animation: brilho 1s ease-in-out 3; }
@keyframes brilho { 50% { box-shadow: inset 0 0 40px rgba(255,214,120,.9); } }
.moldura.ganhou .maquina-arte.ativa { filter: drop-shadow(0 0 50px rgba(255,255,255,.3)); }

/* alavanca: área de clique por cima da alavanca da arte */
.alavanca { position: absolute; left: 822px; top: -218px; z-index: 3; width: 178px; height: 609px; border: 0; padding: 0; background: none; cursor: pointer; }

/* ---------- área de baixo ---------- */
.area { position: relative; width: 900px; flex: 1; margin-top: 44px; }
.tela { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; animation: entra .35s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }
.tela-titulo { margin: 0 0 26px; font-family: var(--fonte-titulo); font-weight: 400; font-size: 46px; }
/* Último giro (hora e brinde, sem nome): a promotora confere o que entregar sem a tela do resultado. */
.ultimo-giro { margin: -14px 0 20px; font-size: 22px; color: #6a6a6a; }
.ultimo-giro-pronto { margin: 34px 0 0; }

.campos { width: 100%; display: grid; gap: 18px; text-align: left; }
.campos-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo span { display: block; font-size: 22px; color: var(--texto-suave); margin: 0 0 6px 4px; letter-spacing: .05em; }
.campo input {
  width: 100%; font: inherit; font-size: 36px; color: var(--texto); background: #111; border: 2px solid #333; border-radius: 14px; padding: 16px 20px; outline: none;
}
.campo input:focus { border-color: var(--destaque); background: #161616; }
.campo input::placeholder { color: #444; }
.campo input.invalido { border-color: var(--erro); }
.aceite { display: flex; gap: 18px; align-items: flex-start; font-size: 22px; line-height: 1.4; color: #cfcfcf; margin-top: 6px; }
.aceite input { width: 38px; height: 38px; flex: 0 0 auto; margin: 0; accent-color: #fff; }
.aceite.invalido span { color: var(--erro); }
.erro { min-height: 34px; margin: 16px 0 0; color: var(--erro); font-size: 26px; }
.botao { margin-top: 10px; font: inherit; font-size: 32px; font-weight: 600; letter-spacing: .04em; color: #000; background: var(--destaque); border: 0; border-radius: 999px; padding: 20px 56px; cursor: pointer; }
.botao kbd { margin-left: 10px; }

.botao-girar {
  margin-top: 90px; width: 300px; height: 300px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 54px; font-weight: 700; letter-spacing: .12em; color: #000;
  background: radial-gradient(circle at 35% 30%, #fff, var(--prata) 55%, var(--prata-escuro));
  border: 10px solid #1b1b1b; box-shadow: 0 0 0 6px var(--prata), 0 0 60px rgba(255,255,255,.25);
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa { 50% { transform: scale(1.05); box-shadow: 0 0 0 6px var(--prata), 0 0 90px rgba(255,255,255,.45); } }
.girando .botao-girar { animation: none; opacity: .35; transform: scale(.94); }
.girando .dica, .girando .dica-atendente { visibility: hidden; }
.dica { margin: 40px 0 0; font-size: 34px; color: var(--prata); }
.dica-atendente { margin: 28px 0 0; font-size: 20px; color: #5c5c5c; }

.res-titulo { margin: 10px 0 0; font-family: var(--fonte-titulo); font-size: 68px; line-height: 1.1; }
.res-texto { margin: 16px 0 0; font-size: 32px; color: var(--prata); max-width: 820px; line-height: 1.35; }

/* ---------- pop-up do resultado ----------
   Abre 1 s depois de os rolos pararem, por cima da máquina escurecida. Três caras:
   .ganhou (brinde simples, prata), .ganhou.vip (dourado) e .perdeu / .esgotado (sóbrio). */
.popup { inset: 0; z-index: 8; justify-content: center; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); animation: escurece .4s ease-out; }
@keyframes escurece { from { opacity: 0; } }
.cartao {
  width: 920px; padding: 64px 56px 44px; border-radius: 44px; text-align: center;
  background: linear-gradient(180deg, #1c1c1e 0%, #070708 70%, #000 100%);
  border: 2px solid var(--prata-escuro); box-shadow: 0 40px 120px rgba(0,0,0,.8);
  animation: abre .55s cubic-bezier(.2,1.3,.4,1);
}
@keyframes abre { from { transform: scale(.82) translateY(40px); opacity: 0; } }
.ganhou .cartao { border-color: var(--prata); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 140px rgba(255,255,255,.16), 0 40px 120px rgba(0,0,0,.8); }
.ganhou.vip .cartao { border-color: var(--vip); box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 0 160px rgba(212,175,55,.28), 0 40px 120px rgba(0,0,0,.8); }

.res-chapeu { margin: 0 0 18px; font-size: 30px; letter-spacing: .5em; padding-left: .5em; color: var(--prata); font-weight: 600; }
.ganhou.vip .res-chapeu { color: var(--vip); }
.perdeu .res-chapeu, .esgotado .res-chapeu { display: none; }

/* A vitrine: a imagem grande do brinde sobre um clarão suave, para a foto do produto se soltar do preto. */
.res-vitrine { position: relative; width: 680px; height: 680px; margin: 0 auto; display: grid; place-items: center; }
.ganhou .res-vitrine::before {
  content: ''; position: absolute; inset: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 45%, transparent 70%);
  animation: respira 2.6s ease-in-out infinite;
}
.ganhou.vip .res-vitrine::before { background: radial-gradient(circle, rgba(212,175,55,.38) 0%, rgba(212,175,55,.1) 45%, transparent 70%); }
@keyframes respira { 50% { transform: scale(1.08); opacity: .8; } }
.res-imagem { position: relative; width: 600px; height: 600px; object-fit: contain; animation: surge .7s .15s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
@keyframes surge { from { transform: scale(.4); opacity: 0; } }
.perdeu .res-vitrine, .esgotado .res-vitrine { width: 260px; height: 260px; margin-bottom: 10px; }
.perdeu .res-imagem, .esgotado .res-imagem { width: 200px; height: 200px; opacity: .45; filter: none; }

.popup .res-titulo { margin: 8px 0 0; font-size: 84px; }
.popup .res-brinde { margin: 10px 0 0; font-size: 64px; font-weight: 700; line-height: 1.15; }
.ganhou.vip .res-brinde { color: var(--vip); }
.popup .res-texto { margin: 22px auto 0; font-size: 34px; max-width: 760px; }
.popup .botao-finalizar { margin-top: 44px; font-size: 40px; padding: 24px 84px; }

/* ---------- descanso de tela (28/10) ----------
   Fica por cima de tudo no palco (menos os selos e a faixa de foco). Um toque em qualquer lugar abre a máquina. */
.descanso {
  position: absolute; inset: 0; z-index: 20; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 70px;
  background: var(--fundo); cursor: pointer; animation: escurece .4s ease-out;
}
.descanso-logo { width: 640px; height: auto; }
.descanso-texto { margin: 0; font-family: var(--fonte-titulo); font-size: 76px; color: var(--texto); text-align: center; }
.descanso-ultimo { position: absolute; bottom: 90px; margin: 0; }

.rodape { position: absolute; bottom: 34px; font-size: 19px; color: #555; letter-spacing: .03em; }

/* ---------- sobreposições ---------- */
.sobreposicao { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.86); }
.caixa { width: min(90vw, 640px); background: #111; border: 1px solid #333; border-radius: 20px; padding: 36px; text-align: center; display: grid; gap: 14px; }
.caixa h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 400; font-size: 34px; }
.caixa p { margin: 0; color: #bbb; font-size: 18px; line-height: 1.45; }
.caixa input { font: inherit; font-size: 24px; color: #fff; background: #000; border: 2px solid #444; border-radius: 12px; padding: 12px 16px; text-align: center; }
.caixa .botao { font-size: 22px; padding: 14px 36px; justify-self: center; }
.caixa code { color: #fff; }