:root {
  --bg: #0a0a0f;
  --accent: #f4c430;
  --text: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: none;
}

#stage { position: fixed; inset: 0; }

/* Camadas de imagem para o cross-fade */
.layer {
  position: absolute; inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.layer.show { opacity: 1; }

/* Brilho de fundo suave a partir da própria foto */
#stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), rgba(0,0,0,0.7));
  pointer-events: none; z-index: 2;
}

/* Overlay: marca + QR */
#overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.brand {
  position: absolute; top: 4vh; left: 4vh;
  font-size: 2.2vh; font-weight: 600; letter-spacing: .5px;
  color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.8);
  opacity: .92;
}

.qrbox {
  position: absolute; bottom: 4vh; right: 4vh;
  background: rgba(255,255,255,.96);
  border-radius: 1.4vh;
  padding: 1.6vh 1.6vh 1.2vh;
  box-shadow: 0 1vh 4vh rgba(0,0,0,.55);
  text-align: center;
}
.qrbox img { width: 18vh; height: 18vh; display: block; image-rendering: pixelated; }
.qrhint {
  margin-top: .8vh; font-size: 1.5vh; line-height: 1.2;
  color: #111; font-weight: 600;
}

/* Estado vazio */
.empty {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.empty.hidden { display: none; }
.empty-inner { text-align: center; opacity: .85; }
.empty-logo {
  font-size: 5vh; font-weight: 700; color: var(--accent);
  margin-bottom: 2vh;
}
.empty-inner p { font-size: 3vh; opacity: .7; }

/* Botão tela cheia (some sozinho) */
#fsbtn {
  position: absolute; top: 2vh; right: 2vh; z-index: 5;
  width: 6vh; height: 6vh; border: none; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 3vh;
  cursor: pointer; pointer-events: auto; transition: opacity .4s;
}
#fsbtn:hover { background: rgba(255,255,255,.25); }
body.idle #fsbtn { opacity: 0; }