/* GABA3 — espetáculo da sala temporária (eventShow.js). Partículas no canvas;
   aqui só as cenas (bolo, gol, brinde, churrasqueira...) e a faixa dourada. */

.evshow-canvas{position:fixed;inset:0;z-index:10050;pointer-events:none}

.evshow-cena{
    position:fixed;inset:0;z-index:10049;display:grid;place-items:center;pointer-events:none;
    animation:evshowEntra .45s cubic-bezier(.2,1.4,.4,1) both;
    font-family:Inter,"Segoe UI",system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}
.evshow-cena.evshow-saindo{animation:evshowSai .45s ease both}
.evshow-cena-interativa{pointer-events:auto;background:radial-gradient(circle at 50% 50%,rgba(20,10,4,.55),rgba(5,2,1,.78))}
@keyframes evshowEntra{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes evshowSai{to{opacity:0;transform:scale(1.08)}}

/* faixa dourada (textos das festas) */
.evshow-faixa,.evshow-faixa-cena > div:not(.evshow-luzes){
    display:grid;justify-items:center;gap:6px;padding:18px 30px;text-align:center;
    background:linear-gradient(160deg,rgba(40,20,8,.88),rgba(14,7,3,.92));
    border:1px solid rgba(241,217,154,.55);border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(246,196,83,.25);
}
.evshow-faixa strong,.evshow-faixa-cena > div:not(.evshow-luzes) > strong{
    font-size:clamp(26px,5vw,46px);font-weight:900;letter-spacing:.01em;
    background:linear-gradient(180deg,#fff6d0,#f6c453 55%,#d99a1e);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.evshow-faixa span,.evshow-faixa-cena > div:not(.evshow-luzes) > span{color:#f8f0dc;font-size:clamp(13px,2vw,16px);font-weight:600}

/* bolo com velas */
.evshow-bolo{gap:14px;grid-auto-flow:row;align-content:center}
.evshow-bolo-svg{width:min(78vw,380px);height:auto;cursor:pointer;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.evshow-vela{cursor:pointer}
.evshow-chama{transform-box:fill-box;transform-origin:50% 100%;animation:evshowChama .35s ease-in-out infinite alternate}
.evshow-chama path:first-child{filter:drop-shadow(0 0 6px #ffb703)}
@keyframes evshowChama{from{transform:scaleY(.92) rotate(-3deg)}to{transform:scaleY(1.08) rotate(3deg)}}
.evshow-fumaca{opacity:0;fill:rgba(220,220,220,.55)}
.evshow-vela.apagada .evshow-chama{animation:evshowApaga .35s ease forwards}
.evshow-vela.apagada .evshow-fumaca{animation:evshowFumaca 1.6s ease-out forwards}
@keyframes evshowApaga{to{transform:scale(0);opacity:0}}
@keyframes evshowFumaca{0%{opacity:.8;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}
.evshow-dica{margin:0;padding:8px 18px;border-radius:999px;background:rgba(20,10,4,.75);border:1px solid rgba(241,217,154,.45);color:#fff6d0;font-weight:800;font-size:15px}
.evshow-fechar{position:absolute;top:14px;right:16px;border:0;background:transparent;color:#f8f0dc;font-size:34px;line-height:1;cursor:pointer;text-shadow:0 2px 6px #000}

/* gol */
.evshow-gol{display:grid;justify-items:center;gap:4px}
.evshow-gol strong{font-size:clamp(54px,12vw,120px);font-weight:900;font-style:italic;color:#fff;letter-spacing:.02em;
    text-shadow:0 0 0 #16a34a,4px 4px 0 #16a34a,8px 8px 0 #0b5d2a,0 0 40px rgba(34,197,94,.8);animation:evshowTreme .12s linear 6}
.evshow-gol-bola{font-size:64px;animation:evshowBola 1s cubic-bezier(.3,.6,.4,1) both}
@keyframes evshowTreme{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}}
@keyframes evshowBola{from{transform:translate(-40vw,30vh) rotate(-540deg) scale(.4)}to{transform:none}}

/* brinde */
.evshow-brinde svg{width:min(60vw,260px);height:auto}
.evshow-taca{transform-box:fill-box;transform-origin:50% 100%}
.evshow-taca-esq{animation:evshowTacaE .9s cubic-bezier(.4,1.6,.5,1) both}
.evshow-taca-dir{animation:evshowTacaD .9s cubic-bezier(.4,1.6,.5,1) both}
@keyframes evshowTacaE{from{transform:translateX(-40px) rotate(-8deg)}to{transform:translateX(10px) rotate(12deg)}}
@keyframes evshowTacaD{from{transform:translateX(40px) rotate(8deg)}to{transform:translateX(-10px) rotate(-12deg)}}
.evshow-brilho{transform-box:fill-box;transform-origin:center;opacity:0;animation:evshowBrilho .6s .75s ease-out both}
@keyframes evshowBrilho{0%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2.2)}}

/* churrasqueira */
.evshow-grelha svg{width:min(66vw,280px);height:auto}
.evshow-fogo{transform-box:fill-box;transform-origin:50% 100%;animation:evshowFogo .28s ease-in-out infinite alternate}
@keyframes evshowFogo{from{transform:scaleY(.9) skewX(-3deg)}to{transform:scaleY(1.1) skewX(3deg)}}

/* peixe */
.evshow-peixe-pulo{font-size:70px;display:block;animation:evshowPulo 1.1s cubic-bezier(.3,.7,.4,1) both}
@keyframes evshowPulo{0%{transform:translate(-120px,120px) rotate(40deg);opacity:0}50%{transform:translate(0,-40px) rotate(-20deg);opacity:1}100%{transform:translate(0,0) rotate(0)}}
.evshow-agua > div{background:linear-gradient(160deg,rgba(8,40,60,.9),rgba(4,18,30,.94))!important;border-color:rgba(125,211,252,.55)!important}

/* revelação do bebê */
.evshow-bebe{display:grid;justify-items:center;gap:14px}
.evshow-bebe-balao{width:130px;height:150px;border-radius:50% 50% 48% 48%;display:grid;place-items:center;
    background:radial-gradient(circle at 35% 30%,#fff,#d9d9d9 40%,#9a9a9a);color:#444;font-size:64px;font-weight:900;
    box-shadow:0 20px 40px rgba(0,0,0,.45);animation:evshowBalanca .5s ease-in-out infinite alternate}
.evshow-bebe-balao.estourou{animation:evshowEstoura .35s ease-out forwards}
@keyframes evshowBalanca{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes evshowEstoura{to{transform:scale(1.8);opacity:0;background:var(--cor)}}
.evshow-bebe-texto{font-size:clamp(34px,7vw,60px);font-weight:900;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.6)}

/* oferta, balada, sol */
.evshow-oferta .evshow-faixa{border-color:rgba(250,204,21,.8);box-shadow:0 0 50px rgba(250,204,21,.4)}
.evshow-luzes{position:fixed;inset:-20%;background:conic-gradient(from 0deg,rgba(255,77,109,.18),rgba(76,201,240,.18),rgba(199,125,255,.18),rgba(128,237,153,.18),rgba(255,77,109,.18));animation:evshowGira 2.4s linear infinite;mix-blend-mode:screen}
@keyframes evshowGira{to{transform:rotate(360deg)}}
.evshow-sol::before{content:"";position:fixed;top:-120px;right:-120px;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,#fff6b0 0%,#ffd166 35%,rgba(255,209,102,0) 70%);animation:evshowGira 18s linear infinite}

/* contagem final */
.evshow-contagem-cena{background:rgba(5,2,1,.55)}
.evshow-contagem span{display:block;font-size:clamp(90px,22vw,220px);font-weight:900;color:#fff6d0;
    text-shadow:0 0 40px rgba(246,196,83,.9),0 8px 30px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.evshow-contagem span.pulsa{animation:evshowPulsa .9s ease-out}
@keyframes evshowPulsa{from{transform:scale(1.6);opacity:.2}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
    .evshow-cena,.evshow-cena *{animation:none!important}
}

/* ================= Cabeçalho da sala temporária =================
   Ícones soltos (regra do dono: sem bola nem caixa). O botão estrela da festa
   é o destaque, em dourado; Celebrar e Música ficam discretos ao lado. */
html body.pagina-sala.sala-privada.sala-de-evento .evento-estrela-btn,
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-celebrar,
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-musica{
    display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;cursor:pointer;
    color:#f8f0dc!important;font:800 12.5px/1 Inter,"Segoe UI",system-ui,sans-serif;transition:transform .15s ease,filter .15s ease;
}
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-celebrar > span:first-child,
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-musica > span:first-child,
.evento-estrela-icone{font-size:20px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
html body.pagina-sala.sala-privada.sala-de-evento .evento-estrela-btn{color:#ffd77a!important}
.evento-estrela-icone{font-size:24px;animation:eventoEstrela 2.6s ease-in-out infinite}
@keyframes eventoEstrela{0%,100%{transform:scale(1) rotate(0)}8%{transform:scale(1.18) rotate(-8deg)}16%{transform:scale(1) rotate(6deg)}24%{transform:scale(1) rotate(0)}}
.evento-estrela-rotulo{background:linear-gradient(180deg,#fff6d0,#f6c453);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em}
html body.pagina-sala.sala-privada.sala-de-evento .evento-estrela-btn:hover,
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-celebrar:hover,
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-musica:hover{transform:translateY(-1px);filter:brightness(1.15) drop-shadow(0 0 8px rgba(246,196,83,.55))}
html body.pagina-sala.sala-privada.sala-de-evento #privada-btn-musica.activo > span:first-child{animation:eventoNota 1s ease-in-out infinite alternate}
@keyframes eventoNota{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-3px) rotate(6deg)}}
@media (max-width:820px){
    .evento-estrela-rotulo{display:none}
    .evento-estrela-icone{font-size:22px}
}

/* menu Celebrar (efeitos para todos) */
.privada-celebrar-menu .celebrar-menu-header button{background:none;border:0;color:#f8f0dc;font-size:20px;cursor:pointer}
.privada-celebrar-menu .celebrar-grid-efectos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.privada-celebrar-menu .celebrar-grid-efectos[hidden],.privada-celebrar-menu .celebrar-bebe[hidden]{display:none}
.privada-celebrar-menu .celebrar-efecto-btn{display:grid;justify-items:center;gap:4px;padding:10px 4px;border:0;border-radius:12px;background:rgba(255,246,208,.06);color:#f8f0dc;font:700 11.5px Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .15s}
.privada-celebrar-menu .celebrar-efecto-btn span:first-child{font-size:26px}
.privada-celebrar-menu .celebrar-efecto-btn:hover{background:rgba(246,196,83,.18);transform:translateY(-2px)}
.privada-celebrar-menu .celebrar-bebe p{margin:2px 0 10px;color:#f8f0dc;font-size:12.5px}
.privada-celebrar-menu .celebrar-bebe div{display:flex;gap:8px}
.privada-celebrar-menu .celebrar-bebe button{flex:1;padding:10px;border:1px solid rgba(241,217,154,.4);border-radius:12px;background:rgba(255,246,208,.06);color:#fff;font:800 13px Inter,system-ui,sans-serif;cursor:pointer}

/* ================= Cronômetro: anel que esvazia com o tempo ================= */
html body.pagina-sala.sala-privada .privada-cronometro{gap:7px;padding:3px 11px 3px 4px;font-family:Inter,"Segoe UI",system-ui,sans-serif}
.crono-anel{width:26px;height:26px;transform:rotate(-90deg);flex:0 0 auto}
.crono-anel-fundo{fill:none;stroke:rgba(255,255,255,.14);stroke-width:3.4}
.crono-anel-progresso{fill:none;stroke:var(--crono-cor,#80ed99);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .6s ease;filter:drop-shadow(0 0 3px var(--crono-cor,#80ed99))}
.crono-textos{display:grid;line-height:1.05}
.crono-rotulo{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(248,240,220,.62)}
html body.pagina-sala.sala-privada .privada-crono-timer{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.privada-cronometro.crono-warning-30m{--crono-cor:#facc15}
.privada-cronometro.crono-warning-5m{--crono-cor:#fb923c}
.privada-cronometro.crono-critical-1m{--crono-cor:#ef4444}
@media (max-width:820px){ .crono-rotulo{display:none} .crono-anel{width:22px;height:22px} }
/* A festa é das pessoas, não da plataforma: na sala de festa a conversa fica só
   com a madeira, sem a marca d'água "GABA3" repetida no fundo. */
html body.pagina-sala.sala-privada.sala-de-evento .semi-chat-sala,
html body.pagina-sala.sala-privada.sala-de-evento .semi-lista-mensagens{
    background-image:linear-gradient(150deg,rgba(10,5,2,.32),rgba(6,3,1,.42)),url("../../../assets/brand/fondo-madera-oscura-gaba3.webp")!important;
    background-size:auto,cover!important;
    background-repeat:no-repeat,no-repeat!important;
    background-position:center,center!important;
}