/* =====================================================================
   Gerador "Eu sou competidora" — campeonatos da Glamour Beauty Show 2026
   Compartilhado pelas tres paginas (nails, makeup, lashes).

   O que muda de um campeonato para outro NAO esta aqui: esta no bloco
   window.PECA de cada HTML. Aqui so ha a marca e a estrutura.
   ===================================================================== */

/* ======================= 1. A CARA DA PECA =======================

   Estes valores foram medidos nas LPs dos proprios campeonatos, no ar em
   glamourbeauty.show/campeonato-nails, -makeup e -lash: o fundo, a cor de
   corpo de texto, as duas fontes e o botao em capsula com degrade radial sao
   os de la, e nao os do Eu Vou do Encontro.

   O que e COMUM as tres esta aqui. O acento, que MUDA por campeonato, esta no
   <style> do <head> de cada pagina — as LPs usam magenta no Nails, violeta no
   Makeup e lilas no Lash & Brow, e a peca tem de chegar junto com a LP de onde
   a competidora veio. */
:root{
  --bg:#140418;            /* fundo das tres LPs */
  --bg-2:#140418;          /* fundo por tras da foto, dentro do palco */
  --card:rgba(0,0,0,.14);  /* o card das LPs */
  --line:rgba(177,177,177,.22);
  --line-2:rgba(177,177,177,.40);
  --txt:#FFFFFF;
  --muted:#B1B1B1;         /* cor de corpo de texto das LPs */
  --dim:#7E7484;
  --r:10px;                /* raio de card das LPs */
  --r2:16px;
  --fonte:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-titulo:Gabarito,var(--fonte);

  /* Trocados por pagina. Os de baixo sao os do Nails, e valem de reserva caso
     uma pagina nova esqueca de declarar os seus. */
  --acento:#FF80C1;        /* texto, links e foco — tem de ler sobre o fundo */
  --btn-a:#FF00ED;         /* centro-baixo do degrade do botao, o saturado */
  --btn-b:#FF80C1;         /* bordas do degrade, o claro */
  --glow:255,0,237;        /* o acento em RGB cru, para as sombras e os veus */

  /* Preenchido pelo JS com a proporcao real da moldura. O valor aqui e so o
     chute inicial (9/16), valido ate a imagem terminar de baixar. */
  --razao:0.5625;
}

/* ======================= 2. DAQUI PARA BAIXO E ESTRUTURA ======================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);font-family:var(--fonte);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding:40px 0 70px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Gabarito no peso 400: e assim que os titulos aparecem nas tres LPs. Em 900
   o titulo ganha outra voz e a peca deixa de parecer a mesma casa. */
h1,h2{font-family:var(--fonte-titulo);font-weight:400;line-height:1.06;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 40px,1180px);margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte);font-weight:700;text-transform:uppercase;
  font-size:.9rem;padding:18px 36px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s,border-color .25s;
}
/* O degrade radial com o foco no centro-baixo e a assinatura do botao das tres
   LPs. Trocar por um linear deixa o botao parecido, e nao igual. */
.btn-primary{
  background:radial-gradient(at 50% 100%,var(--btn-a) 34%,var(--btn-b) 100%);color:#fff;
  box-shadow:0 12px 40px -14px rgba(var(--glow),.85);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{background:var(--card);border-color:var(--line-2);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--acento)}
.btn-sm{padding:12px 24px;font-size:.76rem}
.btn-lg{padding:21px 46px;font-size:1rem}

.eu-voltar{
  display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--dim);transition:color .2s;
}
.eu-voltar:hover{color:var(--acento)}

/* A tarja que diz DE QUAL campeonato e esta pagina. Existe porque as tres sao
   irmas e quase identicas: o link chega solto no grupo de WhatsApp, e sem ela
   a competidora de Makeup monta a peca de Nails sem perceber. */
.eu-selo-linha{display:flex;justify-content:center;margin:24px 0 0}
.eu-selo{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:999px;
  background:rgba(var(--glow),.10);border:1px solid rgba(var(--glow),.45);
  color:var(--acento);font-family:var(--fonte);font-weight:700;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
}

.eu-cab{text-align:center;max-width:660px;margin:18px auto 0}
.eu-cab h1{font-size:clamp(2.1rem,6.4vw,3rem);font-weight:400;margin:0 0 16px}
.eu-cab p{color:var(--muted);font-size:1.03rem;margin:0}

/* Palco: segue a proporcao da moldura e nunca passa da altura da tela. Sem o
   teto por `svh`, o cartaz fica mais alto que o celular e a pessoa perde os
   botoes de vista enquanto arrasta a foto. Os 300px descontados sao o espaco
   do cabecalho, da dica e dos botoes. */
.eu-palco{
  width:min(100%,calc((100svh - 300px) * var(--razao)),420px);
  margin:30px auto 0;
  aspect-ratio:var(--razao);
  position:relative;border-radius:var(--r2);overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 32px 90px -34px rgba(var(--glow),.55), 0 0 0 1px var(--line);
}
.eu-palco canvas{
  width:100%;height:100%;display:block;
  touch-action:none;              /* o arrasto e nosso, nao da rolagem da pagina */
  cursor:grab;
}
.eu-palco.arrastando canvas{cursor:grabbing}

/* Estado vazio: fica POR CIMA do canvas, e nao no lugar dele, para o palco nao
   mudar de altura quando a foto entra.

   E por isso que ele e um VEU, e nao um fundo: a moldura ja esta desenhada no
   canvas assim que a imagem baixa, e a competidora precisa ver a arte antes de
   decidir. E a arte que responde "vale a pena mexer nisso?" — com um retangulo
   tracejado no lugar dela, a pessoa tem de subir uma foto so para descobrir no
   que vai dar. O veu escurece o suficiente para a chamada ler por cima de
   qualquer arte, e de leve o bastante para a moldura continuar sendo o que se
   ve. */
.eu-vazio{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;padding:24px;text-align:center;
  background:rgba(20,4,24,.42);border-radius:var(--r2);
  transition:background .2s;cursor:pointer;
}
.eu-vazio.sobre{background:rgba(var(--glow),.30)}
.eu-vazio.escondido{display:none}

/* A chamada tem fundo proprio porque as tres artes sao escuras, texturizadas e
   diferentes entre si: sem a capsula, "toque para escolher" some em cima do
   granulado de uma e brilha demais na outra. */
.eu-chamada{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:22px 26px;border-radius:var(--r2);
  background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.eu-chamada svg{width:40px;height:40px;stroke:var(--acento);fill:none;stroke-width:1.7}
.eu-chamada p{margin:0;color:#fff;font-size:.88rem;font-weight:600;line-height:1.45;max-width:215px}

.eu-dica{text-align:center;color:var(--dim);font-size:.82rem;font-weight:600;margin:15px auto 0;min-height:1.2em;padding:0 20px}

/* Zoom. O slider existe porque no celular a pinca de dois dedos e imprecisa
   dentro de um palco estreito, e porque com um dedo so ela nem existe. */
.eu-zoom{display:flex;align-items:center;gap:13px;max-width:420px;margin:16px auto 0}
.eu-zoom[hidden]{display:none}
.eu-zoom span{font-size:1.05rem;line-height:1;color:var(--dim)}
.eu-zoom input{
  flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;
  background:rgba(255,255,255,.14);outline:none;
}
.eu-zoom input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(at 50% 100%,var(--btn-a) 34%,var(--btn-b) 100%);cursor:pointer;
  box-shadow:0 3px 12px rgba(var(--glow),.7);
}
.eu-zoom input::-moz-range-thumb{
  width:22px;height:22px;border:0;border-radius:50%;
  background:radial-gradient(at 50% 100%,var(--btn-a) 34%,var(--btn-b) 100%);cursor:pointer;
}

.eu-acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px auto 0}
.eu-acoes .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* Legenda pronta para colar. Some enquanto nao ha foto: antes disso e ruido. */
.eu-legenda{
  max-width:560px;margin:44px auto 0;padding:22px 24px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
}
.eu-legenda[hidden]{display:none}
.eu-legenda h2{font-family:var(--fonte);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);margin:0 0 12px}
.eu-legenda-txt{color:var(--muted);font-size:.93rem;line-height:1.6;white-space:pre-wrap;margin:0 0 16px}
.eu-legenda .btn{width:100%}

.eu-privacidade{max-width:560px;margin:30px auto 0;text-align:center;color:var(--dim);font-size:.81rem;line-height:1.6}
.eu-privacidade b{color:var(--muted);font-weight:700}

/* Rodape com as irmas. Mesmo motivo do selo: o link circula solto, e daqui a
   pessoa se corrige sozinha em vez de voltar a pedir o link certo. */
.eu-irmas{max-width:560px;margin:34px auto 0;text-align:center;color:var(--dim);font-size:.82rem;line-height:2}
.eu-irmas a{color:var(--acento);font-weight:700;border-bottom:1px solid rgba(var(--glow),.45)}
.eu-irmas a:hover{color:#fff;border-color:#fff}

.eu-erro{
  max-width:560px;margin:20px auto 0;padding:14px 18px;text-align:center;
  background:rgba(204,51,102,.14);border:1px solid rgba(204,51,102,.50);
  border-radius:var(--r);color:#FFD5E2;font-size:.88rem;font-weight:600;
}
.eu-erro[hidden]{display:none}

@media (max-width:520px){ .eu-acoes .btn{width:100%} }
/* Tela deitada e baixa: ali o teto por `svh` engole o cartaz. */
@media (max-height:520px) and (orientation:landscape){ .eu-palco{width:min(100%,240px)} }
