/* ============================================================
   stage_vars.css — base do padrão hotspots-totem
   Cole no topo do style.css do projeto (ou importe separado).
   ============================================================ */

:root {
  /* Stage 16:9 escalado pra caber no viewport (preserva proporção) */
  --stage-w: min(100vw, calc(100vh * 16 / 9));
  --stage-h: calc(var(--stage-w) * 9 / 16);
}

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

body {
  background: #000;
  font-family: 'Helvetica', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage {
  width: var(--stage-w);
  height: var(--stage-h);
  position: relative;
  overflow: hidden;
  background: #1d1d1d center/cover no-repeat;
  /* --stage-x/--stage-y: offset em px editável no painel STAGE do debug.
     --stage-w/--stage-h também viram override em px quando salvos pelo painel. */
  transform: translate(var(--stage-x, 0px), var(--stage-y, 0px));
}

/* ===== Hotspots (área clicável transparente sobre a BG) ===== */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  cursor: pointer;
  z-index: 5;
  text-decoration: none;
  color: transparent;
  background: transparent;
  border: 0;
  font-family: inherit;
}

/* visualização no modo debug — aplica em hotspot E dbg-editable
   (.dbg-editable = container nao-hotspot que precisa ser arrastavel:
    camera-frame, figurinha-out, qualquer div com video/canvas/img dentro) */
body.debug .hotspot,
body.debug .dbg-editable {
  outline: 3px dashed #ff00ff;
  background: rgba(255, 0, 255, 0.18);
  touch-action: none;  /* drag por touch no debug (pointer events) */
  /* Em DEBUG todo editavel volta a receber clique e a aparecer, INDEPENDENTE
     do estado do app. HUD/placar/legenda costumam ser `pointer-events:none`
     de proposito (texto nao pode roubar toque) e botoes somem com
     `.oculto{opacity:0;pointer-events:none}` — sem estas duas linhas o
     Shift+D simplesmente NAO SELECIONA nenhum deles e parece que "o debug
     parou de reposicionar" (Prevent Genius 2026-08-29). */
  pointer-events: auto;
  opacity: 1;
}
/* bloqueia conteudo interno de capturar eventos no debug */
body.debug .dbg-editable * { pointer-events: none; }
body.debug .hotspot.selected,
body.debug .dbg-editable.selected {
  outline: 3px solid #ffff00;
  background: rgba(255, 255, 0, 0.3);
  z-index: 50;
}
body.debug .hotspot::before,
body.debug .dbg-editable::before {
  content: attr(data-name);
  position: absolute;
  top: -22px; left: 0;
  background: #ff00ff;
  color: #fff;
  font: bold 11px monospace;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
body.debug .hotspot.selected::before { background: #ff8800; }

/* alças de redimensionamento — anexadas no body com position:fixed
   pra funcionar inclusive em void elements (input, img, etc.)
   O debug.js posiciona left/top no PONTO exato da aresta/canto;
   o translate(-50%,-50%) centraliza a alça nele. */
.dbg-handle {
  position: fixed;
  width: 24px; height: 24px;    /* área de toque confortável em totem touch */
  transform: translate(-50%, -50%);
  background: #ffff00;
  border: 2px solid #000;
  border-radius: 3px;
  z-index: 10000;
  touch-action: none;           /* senão o browser rouba o pointermove pra pan/scroll */
}
.dbg-handle-nw { cursor: nw-resize; }
.dbg-handle-ne { cursor: ne-resize; }
.dbg-handle-sw { cursor: sw-resize; }
.dbg-handle-se { cursor: se-resize; }
.dbg-handle-n  { cursor: ns-resize; }
.dbg-handle-s  { cursor: ns-resize; }
.dbg-handle-e  { cursor: ew-resize; }
.dbg-handle-w  { cursor: ew-resize; }