/* Camadas 1 a 3: paredes, telas em HTML e penumbra. */
#palco {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  perspective: 1400px;
  touch-action: none;
  outline: none;
  background: radial-gradient(ellipse at center, #2a323b 0%, var(--fundo) 75%);
}
#paredes { position: absolute; inset: 0; }

.giro {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.giro[data-oculta] { visibility: hidden; }

.parede {
  position: absolute; left: 0; top: 0;
  width: 1024px; height: 572px;
  transform-origin: 0 0;
  /* A transição do foco é ligada só durante o movimento (camera.js). */
}
.parede.animando { transition: transform var(--foco-ms, 600ms) cubic-bezier(.45, .05, .25, 1); }

.parede-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}

.aviso-provisoria {
  position: absolute; left: 50%; top: 430px; transform: translateX(-50%);
  margin: 0; padding: 6px 14px; border-radius: 999px;
  background: rgba(250, 247, 240, .92); border: 1.5px dashed var(--texto-2);
  color: var(--texto-2); font-size: 14px; white-space: nowrap;
  pointer-events: none;
}

/* Telas em HTML encaixadas na ilustração (seção 6.4). */
.tela-slot {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.parede.animando .tela-slot.anima-tela { transition: transform var(--foco-ms, 600ms) cubic-bezier(.45, .05, .25, 1); }
.tela-slot.interativa { pointer-events: auto; }
.tela-slot.acima-penumbra { z-index: 6; }

.ventoinhas-off {
  position: absolute; z-index: 3;
  background: rgba(28, 28, 30, .86);
  border-radius: 2px;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ventoinhas-off.ligado { opacity: 0; }

/* Camada 3: penumbra do blecaute (cobre ilustração e telas, menos o notebook). */
.escuro {
  position: absolute; inset: -2px; z-index: 5;
  background: #000; opacity: 0;
  pointer-events: none;
}

/* Itens clicáveis com destaque de jogo antigo (seção 5.5). */
.item {
  position: absolute; z-index: 4;
  padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.item .alvo { position: absolute; }
.item .contorno {
  position: absolute; inset: 0;
  border: calc(2.6px / var(--s, 1)) solid var(--destaque);
  border-radius: calc(4px / var(--s, 1));
  box-shadow: 0 0 calc(10px / var(--s, 1)) calc(2px / var(--s, 1)) rgba(250, 204, 21, .75);
  opacity: .25;
  animation: pulso 1.5s ease-in-out infinite;
}
.item:hover .contorno, .item:focus-visible .contorno { animation: none; opacity: 1; box-shadow: 0 0 calc(16px / var(--s, 1)) calc(5px / var(--s, 1)) rgba(250, 204, 21, .95); }
.item:focus-visible { outline: none; }
@keyframes pulso { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }

body.modo-foco .item, body.modo-passeio .item { pointer-events: none; }
body.modo-foco .item .contorno, body.modo-passeio .item:not(.espiado) .contorno { animation: none; opacity: 0; }
body.modo-passeio .item.espiado .contorno { animation: none; opacity: 1; }

/* Fundo escurecido no foco de telas: esconde a ilustração ampliada demais. */
#fundo-foco {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10, 12, 15, 0) 52%, rgba(10, 12, 15, .82) 100%);
  opacity: 0; transition: opacity .5s ease;
}
body.foco-tela #fundo-foco { opacity: 1; }

/* Camada 4: conteúdo do foco (post-its, legendas, medalhas). */
#conteudo-foco {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
}
#conteudo-foco > * { pointer-events: auto; }