/* Roleta Stone ABF CON — totem 1200x1920 (10:16) */
@font-face { font-family: 'GravityWide'; src: url('../assets/fonts/ABCGravity-Wide.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'GravityComp'; src: url('../assets/fonts/ABCGravity-Compressed.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Roobert'; src: url('../assets/fonts/Roobert-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('../assets/fonts/Roobert-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('../assets/fonts/Roobert-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('../assets/fonts/Roobert-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --fundo: #004314;
  --lima: #C4FF65;
  --verde: #00FD00;
  --texto-escuro: #04490D;
  --branco: #FFFFFF;
  --alerta: #FFD24A;
  /* stage 10:16; o kiosk.js fixa em px */
  --stage-w: min(100vw, calc(100vh * 1200 / 1920));
  --stage-h: calc(var(--stage-w) * 1.6);
}

/* ===== kiosk lock (padrão da casa) ===== */
html, body, *, *::before, *::after {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none; user-drag: none;
}
html { touch-action: manipulation; overscroll-behavior: none; }

html, body { margin: 0; padding: 0; height: 100%; background: var(--fundo); }
body {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roobert', system-ui, sans-serif;
  color: var(--branco);
}

.stage {
  width: var(--stage-w);
  height: var(--stage-h);
  position: relative;
  overflow: hidden;
  background: var(--fundo);
  flex: none;
}

.screen {
  position: absolute; inset: 0;
  display: none;
  background: var(--fundo) center / 100% 100% no-repeat;
}
.screen.active { display: block; }

/* BG trocável pelo /admin (aba Telas): var(--bg-<tela>) vem do /api/config */
.scr-codigo   { background-image: var(--bg-codigo, url('../assets/img/bg_codigo.webp')); }
.scr-roleta   { background-image: var(--bg-roleta, url('../assets/img/bg_roleta.webp')); }
.scr-ganhou   { background-image: var(--bg-ganhou, url('../assets/img/bg_ganhou.webp')); }
.scr-nao      { background-image: var(--bg-nao, url('../assets/img/bg_nao.webp')); }
.scr-descanso { background-image: var(--bg-descanso, url('../assets/img/bg_base.webp')); z-index: 100; }

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  background: transparent;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  color: inherit; font: inherit;
}
.dbg-editable { position: absolute; transform: translate(-50%, -50%); }

/* ===== hotspots de sistema (reiniciar 1,5s / admin 5s) ===== */
.hs-sistema { z-index: 200; touch-action: none; }
.hs-barra {
  position: absolute; left: 12%; right: 12%; bottom: 14%;
  height: calc(var(--stage-w) * 0.010); border-radius: 999px;
  background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.25);
  opacity: 0; transition: opacity 120ms ease-out;
  pointer-events: none; overflow: hidden;
}
.hs-sistema.segurando .hs-barra { opacity: 1; }
.hs-barra b { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--lima); }

/* ===== TELA 1 — código ===== */
.vd-qr-cad { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(var(--stage-w) * .7); }
.vd-qr-cad .qr-tit {
  margin: 0; font-family: 'GravityWide', sans-serif; color: var(--lima);
  font-size: calc(var(--stage-w) * .03); line-height: 1.15; text-transform: uppercase;
}
.vd-qr-cad .qr-img {
  width: calc(var(--stage-w) * .23); height: calc(var(--stage-w) * .23);
  margin: calc(var(--stage-w) * .022) 0;
  background: #fff; border-radius: calc(var(--stage-w) * .012);
  padding: calc(var(--stage-w) * .012); box-sizing: border-box;
}
.vd-qr-cad .qr-img svg { width: 100%; height: 100%; display: block; }
.vd-qr-cad .qr-sub { margin: 0; font-weight: 500; color: var(--branco); font-size: calc(var(--stage-w) * .026); }

.vd-digitos { display: flex; justify-content: space-between; pointer-events: none; }
.vd-digitos span {
  width: 14.72%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'GravityWide', sans-serif; color: var(--texto-escuro);
  font-size: calc(var(--stage-w) * .07); line-height: 1;
  border-radius: calc(var(--stage-w) * .008);
  transition: box-shadow .15s ease;
}
.vd-digitos span.atual { box-shadow: inset 0 0 0 calc(var(--stage-w) * .005) var(--verde); }
.vd-digitos.erro span { box-shadow: inset 0 0 0 calc(var(--stage-w) * .005) var(--alerta); }
.vd-digitos.treme { animation: treme .38s ease; }
@keyframes treme {
  20%, 60% { transform: translate(calc(-50% - var(--stage-w) * .012), -50%); }
  40%, 80% { transform: translate(calc(-50% + var(--stage-w) * .012), -50%); }
}

.vd-cod-msg {
  margin: 0; width: calc(var(--stage-w) * .86); text-align: center;
  font-weight: 600; color: var(--alerta);
  font-size: calc(var(--stage-w) * .028); line-height: 1.25; min-height: 1em;
}

.hs-start-codigo { border-radius: calc(var(--stage-w) * .008); transition: transform .1s ease, opacity .15s ease; }
.hs-start-codigo:active { transform: translate(-50%, -50%) scale(.97); }
.hs-start-codigo.inativo { background: rgba(0, 67, 20, .45); }
.hs-start-codigo.carregando { pointer-events: none; background: rgba(0, 67, 20, .35); }

.vd-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--stage-w) * .02);
}
.vd-numpad button {
  border: calc(var(--stage-w) * .003) solid var(--lima);
  background: rgba(196, 255, 101, .06);
  color: var(--lima);
  border-radius: calc(var(--stage-w) * .012);
  font-family: 'GravityWide', sans-serif;
  font-size: calc(var(--stage-w) * .05);
  line-height: 1; padding: 0; cursor: pointer;
  touch-action: manipulation;
  transition: background .08s ease, transform .08s ease;
}
.vd-numpad button.np-acao { font-size: calc(var(--stage-w) * .024); text-transform: uppercase; }
.vd-numpad button[data-k="apagar"] { font-family: 'Roobert', sans-serif; font-size: calc(var(--stage-w) * .05); }
.vd-numpad button:active, .vd-numpad button.tocou { background: var(--lima); color: var(--texto-escuro); transform: scale(.96); }

/* ===== TELA 2 — roleta ===== */
.vd-roda { pointer-events: none; }
.vd-roda .roda-giro { width: 100%; height: 100%; will-change: transform; }
.vd-roda img, .vd-centro, .vd-ponteiro { display: block; pointer-events: none; }
.vd-roda img { width: 100%; height: 100%; }
.vd-ponteiro { transform-origin: 50% 20%; filter: drop-shadow(0 calc(var(--stage-w) * .004) calc(var(--stage-w) * .006) rgba(0,0,0,.35)); }
.vd-ponteiro.bate { animation: bate .09s ease-out; }
@keyframes bate { 50% { transform: translate(-50%, -50%) rotate(-10deg); } }
.vd-ola {
  margin: 0; width: calc(var(--stage-w) * .9); text-align: center;
  font-weight: 600; color: var(--lima); font-size: calc(var(--stage-w) * .032);
}
.vd-ola b { color: var(--branco); }
.hs-girar { border-radius: calc(var(--stage-w) * .008); }
.hs-girar.girando { pointer-events: none; background: rgba(0, 67, 20, .45); }
.hs-girar.pulsa { animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 255, 101, .55); }
  50% { box-shadow: 0 0 0 calc(var(--stage-w) * .022) rgba(196, 255, 101, 0); }
}

/* ===== TELA 3 — ganhou ===== */
.vd-brinde { width: calc(var(--stage-w) * .86); text-align: center; }
.vd-brinde p { margin: 0; }
.vd-brinde .brinde-rot {
  font-weight: 600; color: var(--branco); text-transform: uppercase; letter-spacing: .12em;
  font-size: calc(var(--stage-w) * .024);
}
.vd-brinde .brinde-nome {
  display: inline-block; margin-top: calc(var(--stage-w) * .02);
  font-family: 'GravityWide', sans-serif; text-transform: uppercase;
  color: var(--texto-escuro); background: var(--lima);
  font-size: calc(var(--stage-w) * .044); line-height: 1.1; white-space: nowrap;
  padding: calc(var(--stage-w) * .022) calc(var(--stage-w) * .045) calc(var(--stage-w) * .018);
  border-radius: calc(var(--stage-w) * .01);
}

/* ===== TELA 4 — não ganhou / descanso ===== */
.vd-nao-msg { margin: 0; width: calc(var(--stage-w) * .8); text-align: center; font-weight: 500; color: var(--branco); font-size: calc(var(--stage-w) * .034); }
.vd-descanso-msg { width: calc(var(--stage-w) * .8); text-align: center; }
.vd-descanso-msg h1 { margin: 0; font-family: 'GravityWide', sans-serif; font-weight: 400; color: var(--lima); font-size: calc(var(--stage-w) * .08); text-transform: uppercase; }
.vd-descanso-msg p { margin: calc(var(--stage-w) * .03) 0 0; font-weight: 500; font-size: calc(var(--stage-w) * .034); }

/* confete no "ganhou" */
.confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confete i {
  position: absolute; top: -5%;
  width: calc(var(--stage-w) * .016); height: calc(var(--stage-w) * .03);
  border-radius: 2px;
  animation: cai linear forwards;
}
@keyframes cai { to { transform: translateY(calc(var(--stage-h) * 1.15)) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  .hs-girar.pulsa, .confete i, .vd-digitos.treme { animation: none; }
}