:root{
  --rosa:#d61f6f;
  --rosa-escuro:#a01b5b;
  --creme:#fbf3ea;
  --texto:#5a2a45;
  --sombra:0 10px 30px rgba(160,27,91,.18);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* Garante que o atributo hidden sempre esconda (vence regras display:flex das classes) */
[hidden]{display:none !important;}

html,body{margin:0;padding:0;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,#fde7f0 0%,#fbf3ea 45%,#fff 100%);
  color:var(--texto);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px 14px 28px;
}

.topo{text-align:center;margin:6px 0 14px;}
.topo h1{
  font-size:1.35rem;
  margin:0 0 4px;
  color:var(--rosa-escuro);
  font-weight:800;
  letter-spacing:.2px;
}
.topo p{margin:0;font-size:.92rem;opacity:.8;}

.palco{
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Quadro (moldura) */
.quadro{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--sombra);
  background:#fff;
}
#canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none; /* permite arrastar sem rolar a página */
}

/* Botão sobre o quadrado da foto (posição = coordenadas do quadro) */
.area-toque{
  position:absolute;
  /* x=55 y=57 w=753 h=858 em base 1254 */
  left:4.386%;
  top:4.545%;
  width:60.048%;
  height:68.421%;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:5%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:8%;
  animation:pulsar 2.2s ease-in-out infinite;
}
.area-toque::after{
  content:"Toque aqui";
  font-size:.8rem;
  font-weight:700;
  color:var(--rosa);
  background:rgba(255,255,255,.85);
  padding:5px 12px;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(160,27,91,.25);
}
.area-toque__ripple{
  position:absolute;inset:0;
  border:3px dashed rgba(214,31,111,.55);
  border-radius:5%;
}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.55}}

/* Dica do editor */
.dica{
  font-size:.85rem;
  text-align:center;
  margin:12px 6px 4px;
  opacity:.85;
}

/* Zoom */
.zoom{
  width:100%;
  max-width:360px;
  display:flex;
  align-items:center;
  gap:12px;
  margin:8px 0 2px;
}
.zoom__ico{font-size:1.4rem;font-weight:700;color:var(--rosa);width:16px;text-align:center;}
#zoom{
  flex:1;
  -webkit-appearance:none;appearance:none;
  height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--rosa),var(--rosa-escuro));
  outline:none;
}
#zoom::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--rosa);
  box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;
}
#zoom::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--rosa);cursor:pointer;
}

/* Ações */
.acoes{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:16px;
}
.btn{
  border:none;
  border-radius:14px;
  padding:14px 20px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  flex:1 1 auto;
  min-width:140px;
  transition:transform .08s ease,box-shadow .2s ease,opacity .2s;
}
.btn:active{transform:scale(.97);}
.btn--principal{
  background:linear-gradient(135deg,var(--rosa),var(--rosa-escuro));
  color:#fff;
  box-shadow:0 8px 20px rgba(214,31,111,.35);
}
.btn--secundario{
  background:#fff;
  color:var(--rosa-escuro);
  border:2px solid var(--rosa);
}
.btn--fantasma{
  background:transparent;
  color:var(--rosa-escuro);
  text-decoration:underline;
  box-shadow:none;
  flex:1 1 100%;
  padding:8px;
}

/* Câmera ao vivo */
.camera{
  position:fixed;inset:0;z-index:50;
  background:#000;
  display:flex;flex-direction:column;
}
#video{
  flex:1;
  width:100%;height:100%;
  object-fit:cover;
  background:#000;
}
.camera__topo{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;
}
.camera__baixo{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px calc(env(safe-area-inset-bottom) + 28px);
}
.camera__btn{
  width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;
  font-size:1.2rem;cursor:pointer;backdrop-filter:blur(4px);
}
.camera__disparo{
  width:74px;height:74px;border-radius:50%;
  background:#fff;border:5px solid rgba(255,255,255,.5);
  cursor:pointer;box-shadow:0 0 0 4px rgba(255,255,255,.25);
}
.camera__disparo:active{transform:scale(.92);}
.camera__galeria{
  background:rgba(0,0,0,.45);color:#fff;border:none;
  padding:10px 16px;border-radius:20px;font-size:.9rem;cursor:pointer;
  backdrop-filter:blur(4px);
}
.camera__espaco{width:72px;}

/* Aviso */
.aviso{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#3a1226;color:#fff;padding:12px 18px;border-radius:12px;
  font-size:.9rem;max-width:90%;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.3);
  text-align:center;
}

@media (min-width:520px){
  .topo h1{font-size:1.6rem;}
}