/* app.css */
:root{
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --vvh: 100vh;
}

/* RESET */
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
}
*{ box-sizing:border-box; }

img,video{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
}

/* PALCO */
#capa,
#container2-video{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--vvh);
  background:#000;
  overflow:hidden;
}

@supports (-webkit-touch-callout:none){
  #capa,#container2-video{ height:-webkit-fill-available; }
}

/* CANVAS virtual 1080×1850 */
#canvas1080,
#canvas1080v{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate3d(-50%,-50%,0);

  width:calc(var(--vvh) * 1080 / 1850);
  height:var(--vvh);

  overflow:hidden;
  touch-action:manipulation;
}

@media (min-aspect-ratio:1080/1850){
  #canvas1080,
  #canvas1080v{
    width:100vw;
    height:calc(100vw * 1850 / 1080);
  }
}

/* CAPA */
#capa{
  z-index:50;
  opacity:1;
  transition:opacity .55s ease;
  will-change:opacity;
  contain:layout style paint;
}
#capa.is-opening{ opacity:0; }

/* CAMADAS */
.layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

/* stacking */
#fundo{ z-index:1; }
#cupulaWrap{ z-index:2; }
#base{ z-index:3; }

/* CÚPULA ARRASTÁVEL */
#cupulaWrap{
  position:absolute;
  inset:0;
  transform:translate3d(0,0,0);
  touch-action:none;
  will-change:transform;
}

#cupulaHit{
  position:absolute;
  inset:0;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:grab;
  touch-action:none;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

/* IMPORTANTE: não bloquear o drag */
#abrirConvite{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:1;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}

/* VÍDEO */
#video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  transform:translateZ(0);
}
video::-webkit-media-controls-enclosure{ display:none!important; }

/* BOTÕES */
#botoesConvite{
  position:absolute;
  inset:0;
  z-index:40;
  pointer-events:none;
  touch-action:manipulation;
}
#botoesConvite a{
  position:absolute;
  display:block;
  pointer-events:auto;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent!important;
}

/* SAFE-BOTTOM opcional */
body.safe-bottom #botoesConvite{
  transform:translateY(calc(-1 * var(--safeBottom)));
}

/* OVERLAYS */
.overlayConvite{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:45;

  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.overlayConvite img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.fecharOverlay{
  position:absolute;
  top:calc(2.5% + var(--safeTop));
  right:4%;
  background:rgba(255,255,255,.18);
  color:#fff;
  border:0;
  border-radius:10px;
  font-size:22px;
  padding:4px 12px;
  cursor:pointer;
  z-index:60;
}

/* TOAST */
#toastPix{
  display:none;
  position:fixed;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  z-index:10001;
  font-weight:600;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* HINT */
#hintVideo{
  display:none;
  position:absolute;
  left:50%;
  bottom:14%;
  transform:translateX(-50%);
  max-width:88%;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  z-index:44;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* DESKTOP: card central reto */
@media (min-width:768px){
  html,body{
    background:radial-gradient(circle at center, #111 0%, #000 70%);
  }

  #capa,
  #container2-video{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #canvas1080,
  #canvas1080v{
    position:relative;
    top:auto;
    left:auto;
    transform:none;

    height:92vh;
    width:calc(92vh * 1080 / 1850);
    max-width:520px;

    border-radius:0;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.55);
  }
}