/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#fbf7ee;overscroll-behavior:none}
body{position:fixed;inset:0}

/* ===== Palco 9:16, centralizado e sempre inteiro na tela ===== */
.palco{
  position:absolute;left:50%;top:50%;
  width:min(100vw,56.25vh);            /* fallback */
  width:min(100vw,56.25dvh);
  aspect-ratio:9/16;
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:#fbf7ee;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}

.camada{position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.palco img{pointer-events:none;-webkit-user-drag:none;user-select:none}

/* Remendo que cobre o Zazu desenhado na capa: ocupa 640x640 do canto sup. esquerdo (1080x1920) */
.remendo{left:0;top:0;width:59.2593%;height:33.3333%}

/* ===== Vídeo ===== */
.video{opacity:0;background:#fbf7ee}
.video.on{opacity:1}

/* ===== Zazu arrastável (posição/tamanho em %, definidos também no script.js) ===== */
.zazu{
  position:absolute;
  left:4.44%;top:-0.73%;width:43.8%;height:27.8%;
  touch-action:none;                   /* sem rolagem/zoom enquanto arrasta */
  cursor:grab;z-index:5;
  will-change:left,top;
}
.zazu.arrastando{cursor:grabbing;z-index:6}
.zazu img{width:100%;height:100%;display:block;pointer-events:none}
.zazu.fim{pointer-events:none}

/* ===== Botões invisíveis sobre os ícones do vídeo ===== */
.botoes{position:absolute;inset:0;pointer-events:none;z-index:4}
.area{position:absolute;display:block;pointer-events:none;
  top:36.5%;height:19.5%;-webkit-touch-callout:default}
.botoes.ativos .area{pointer-events:auto;cursor:pointer}
.area.presenca{left:7.4%;width:26.9%}
.area.local{left:37.5%;width:27.3%}
.area.presente{left:66.7%;width:26.9%}