/* =========================
app.css (NA RAIZ)
Base mestre — Canvas virtual 1080×1850
COVER no mobile (sem barras pretas) + Card central no desktop (reto)
Sem mexer nos botões
========================= */

:root{
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --vvh: 100vh; /* preenchido pelo JS, mas funciona sem também */
}

/* ===== 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;
}

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

/* =========================================
CANVAS 1080×1850 (virtual) — COVER LIMPO
Sem max()/min()
- Padrão: trava pela ALTURA (cobre em telas mais "altas")
- Em telas mais "largas": trava pela LARGURA
========================================= */
#canvas1080,
#canvas1080v{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate3d(-50%,-50%,0);

  /* padrão: cobre pela altura (elimina faixa preta embaixo) */
  width:calc(var(--vvh) * 1080 / 1850);
  height:var(--vvh);

  overflow:hidden;
  touch-action:manipulation;
}

/* telas mais largas que o canvas -> cobre pela largura */
@media (min-aspect-ratio:1080/1850){
  #canvas1080,
  #canvas1080v{
    width:100vw;
    height:calc(100vw * 1850 / 1080);
  }
}

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

#capa.is-opening{ opacity:0; }

#capa img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

#abrirConvite{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:60;
  -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 (ativa só com body.safe-bottom) body class="safe-bottom" */
body.safe-bottom #botoesConvite{
  transform:translateY(calc(-1 * var(--safeBottom)));
}

/* ===== OVERLAYS (NO MESMO CANVAS) ===== */
.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 PIX ===== */
#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 (opcional) ===== */
#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;          /* ✅ reto */
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.55);
  }
}