/* Vitrine da sala na portada: cartão com a imagem do dono, título desenhado
   e o me gusta. Usado nas histórias da portada (frontend/portada/showcaseStories.js) e na prévia do
   editor da sala privada (frontend/private-room/services/roomShowcase.js). */
.gaba3-vitrine-card{position:relative;flex:0 0 auto;width:220px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#1a1a1a center/cover no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer;scroll-snap-align:start;isolation:isolate;color:#fff;text-decoration:none}
.gaba3-vitrine-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%);z-index:0}
.gaba3-vitrine-selo{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.03em;backdrop-filter:blur(4px)}
.gaba3-vitrine-titulo{position:absolute;left:12px;right:12px;bottom:54px;z-index:2;margin:0;font-size:26px;line-height:1.05;font-weight:900;overflow-wrap:anywhere;text-wrap:balance}
.gaba3-vitrine-rodape{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gaba3-vitrine-like{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#1d1d1d;font:800 14px/1 system-ui,sans-serif;cursor:pointer;transition:transform .12s ease}
.gaba3-vitrine-like[aria-pressed="true"]{background:#2e7d32;color:#fff}
.gaba3-vitrine-like:active{transform:scale(.94)}
.gaba3-vitrine-like:disabled{opacity:.75;cursor:default}
.gaba3-vitrine-like .polegar{display:inline-flex;width:18px;height:18px;line-height:1}
.gaba3-vitrine-like .polegar svg{width:100%;height:100%}
.gaba3-vitrine-like.pop .polegar{animation:gaba3-vitrine-pop .45s ease}
@keyframes gaba3-vitrine-pop{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-12deg)}100%{transform:scale(1)}}
.gaba3-vitrine-mais{min-width:36px;min-height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:18px;cursor:pointer}

/* Estilos do título (o dono escolhe) */
.gaba3-vitrine-card.estilo-classico .gaba3-vitrine-titulo{font-family:Georgia,"Times New Roman",serif;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.gaba3-vitrine-card.estilo-neon .gaba3-vitrine-titulo{font-family:system-ui,sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 6px #fff,0 0 14px #00e5ff,0 0 28px #00e5ff,0 0 42px #2979ff}
.gaba3-vitrine-card.estilo-ouro .gaba3-vitrine-titulo{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(180deg,#fff6c8 0%,#f5c542 45%,#b8860b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.gaba3-vitrine-card.estilo-grafite .gaba3-vitrine-titulo{font-family:Impact,"Arial Black",sans-serif;font-weight:400;text-transform:uppercase;color:#ffeb3b;-webkit-text-stroke:2px #111;transform:rotate(-4deg);text-shadow:4px 4px 0 #e91e63}
.gaba3-vitrine-card.estilo-rosa .gaba3-vitrine-titulo{font-family:"Brush Script MT","Segoe Script",cursive;font-weight:400;font-size:32px;color:#fff;text-shadow:0 0 8px #ff4f9a,0 2px 12px #c2185b}
.gaba3-vitrine-card.estilo-fogo .gaba3-vitrine-titulo{font-family:Impact,"Arial Black",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;background:linear-gradient(0deg,#ff1744 0%,#ff9100 55%,#ffea00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.9))}
.gaba3-vitrine-card.estilo-tropical .gaba3-vitrine-titulo{font-family:"Trebuchet MS",system-ui,sans-serif;color:#fff;text-shadow:3px 3px 0 #00bfa5,6px 6px 0 #ff6d00}
.gaba3-vitrine-card.estilo-oceano .gaba3-vitrine-titulo{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(180deg,#e0f7ff,#4fc3f7 55%,#0277bd);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
@media (prefers-reduced-motion:reduce){.gaba3-vitrine-like.pop .polegar{animation:none}}
@media (max-width:720px){.gaba3-vitrine-card{width:170px}.gaba3-vitrine-titulo{font-size:22px}.gaba3-vitrine-card.estilo-rosa .gaba3-vitrine-titulo{font-size:27px}}

/* Editor da vitrine (sala privada, só o dono) */
.privada-vitrine-previa{display:grid;place-items:center;margin:10px 0 12px}
.privada-vitrine-previa .gaba3-vitrine-card{width:200px;cursor:default}
.privada-vitrine-rotulo{display:grid;gap:6px;margin:12px 0 4px;font-weight:700;color:#f2e6cc}
.privada-vitrine-rotulo input{min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:#11160f;color:#fff;font:inherit;font-size:16px}
.privada-vitrine-estilos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.privada-vitrine-salvar{width:100%;margin-top:10px}

/* Toque numa vitrine: sala privada, nunca entra — aviso no próprio cartão */
.gaba3-vitrine-privada{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;background:rgba(8,10,12,.78);backdrop-filter:blur(3px);animation:gaba3-vitrine-entra .25s ease both}
.gaba3-vitrine-privada .cadeado{display:block;width:40px;height:40px;color:#f1d99a;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));animation:gaba3-vitrine-cadeado .6s ease}
.gaba3-vitrine-privada .cadeado svg{width:100%;height:100%}
.gaba3-vitrine-privada b{font:800 17px/1.2 system-ui,sans-serif;color:#fff}
.gaba3-vitrine-privada small{font:600 13px/1.35 system-ui,sans-serif;color:#d9e3d0}
.gaba3-vitrine-privada.saindo{opacity:0;transition:opacity .35s ease}
@keyframes gaba3-vitrine-entra{from{opacity:0}to{opacity:1}}
@keyframes gaba3-vitrine-cadeado{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gaba3-vitrine-privada,.gaba3-vitrine-privada .cadeado{animation:none}}

/* ---------- Histórias (topo da portada) ---------- */
.gaba3-historias{margin:6px 0 14px;overflow:hidden}
.gaba3-historias-trilho{display:flex;gap:10px;overflow-x:auto;padding:4px 14px 6px;scrollbar-width:none}
/* 👍 de cada letreirinho: solto (sem bola), com o número, no canto de cima. */
.gaba3-historia-like{position:absolute;top:5px;right:5px;z-index:2;display:inline-flex;align-items:center;gap:3px;min-height:28px;padding:2px 4px;border:0;background:none;color:#fff;font:800 12px/1 system-ui,sans-serif;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.7)}
.gaba3-historia-like .gaba3-historia-polegar{display:inline-flex;width:16px;height:16px;color:#f1d99a;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
.gaba3-historia-like .gaba3-historia-polegar svg,.gaba3-historia-salto svg{width:100%;height:100%}
.gaba3-historia-like.curtido .gaba3-historia-polegar{color:#c6ff6b}
.gaba3-historia-like.curtido{color:#c6ff6b}
.gaba3-historia-like:disabled{cursor:default;opacity:.85}
.gaba3-historia-salto{position:absolute;left:50%;top:44%;z-index:3;width:44px;height:44px;color:#c6ff6b;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));pointer-events:none;transform:translate(-50%,-50%) scale(.4);animation:gaba3-salto .9s ease-out forwards}
@keyframes gaba3-salto{40%{transform:translate(-50%,-60%) scale(1.15);opacity:1}100%{transform:translate(-50%,-110%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.gaba3-historia-salto{animation:none;opacity:0}}
.gaba3-historias-trilho::-webkit-scrollbar{display:none}
/* Letreirinhos: retângulo em pé, cantos levemente arredondados (o estilo dos
   cartões da GABA3), foto inteira e o nome dentro, numa faixa escura embaixo. */
.gaba3-historia{position:relative;flex:0 0 auto;display:block;width:86px;color:#fff}
.gaba3-historia .anel{position:relative;display:block;width:86px;height:118px;padding:3px;box-sizing:border-box;border:0;cursor:pointer;color:#fff;border-radius:12px;background:linear-gradient(160deg,#c6ff6b,#55c900 45%,#2e7d32);box-shadow:0 4px 12px rgba(0,0,0,.45);transition:transform .15s ease}
.gaba3-historia:active .anel{transform:scale(.95)}
.gaba3-historia.vista .anel{background:linear-gradient(160deg,#9a9a9a,#5a5a5a)}
.gaba3-historia .foto{display:block;width:100%;height:100%;border-radius:9px;background:#222 center/cover no-repeat}
.gaba3-historia .foto.inteira{background-size:contain;background-color:#120a05;background-position:center 38%}
.gaba3-historia .nome{position:absolute;left:3px;right:3px;bottom:3px;padding:14px 6px 6px;border-radius:0 0 9px 9px;background:linear-gradient(transparent,rgba(0,0,0,.82));font:800 10.5px/1.2 system-ui,sans-serif;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.9);overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.gaba3-historia-aberta,.gaba3-historia-aberta body{overflow:hidden}
.gaba3-historia-visor{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(0,0,0,.94);touch-action:none;animation:gaba3-vitrine-entra .2s ease both}
.gaba3-historia-visor .palco{width:min(100vw,460px);height:min(100dvh,820px)}
.gaba3-historia-visor .palco .gaba3-vitrine-card{width:100%;height:100%;aspect-ratio:auto;border-radius:0;cursor:default}
@media (min-width:480px){.gaba3-historia-visor .palco .gaba3-vitrine-card{border-radius:18px}}
.gaba3-historia-visor .palco .gaba3-vitrine-titulo{font-size:40px;bottom:84px}
.gaba3-historia-visor .palco .gaba3-vitrine-rodape{bottom:22px;left:16px;right:16px;z-index:4}
.gaba3-historia-visor .palco .gaba3-vitrine-like{min-height:46px;padding:6px 18px;font-size:17px}
.gaba3-historia-visor .palco .gaba3-vitrine-selo{top:30px}
.gaba3-historia-visor .barras{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(100vw,460px);display:flex;gap:4px;padding:0 10px;z-index:5;box-sizing:border-box}
.gaba3-historia-visor .barras span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.gaba3-historia-visor .barras span i{display:block;height:100%;width:0;background:#fff}
.gaba3-historia-visor .barras span.cheia i{width:100%}
.gaba3-historia-visor .barras span.atual i{animation:gaba3-historia-barra var(--dur,6s) linear forwards}
.gaba3-historia-visor .barras.pausado span.atual i{animation-play-state:paused}
@keyframes gaba3-historia-barra{from{width:0}to{width:100%}}
.gaba3-historia-visor .fechar{position:absolute;top:max(22px,calc(env(safe-area-inset-top) + 12px));right:max(12px,calc((100vw - 460px) / 2 + 12px));z-index:6;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.gaba3-historia-visor .zona{position:absolute;top:70px;bottom:96px;z-index:3;width:min(35vw,170px);border:0;background:transparent;cursor:pointer}
.gaba3-historia-visor .zona.ant{left:max(0px,calc((100vw - 460px) / 2))}
.gaba3-historia-visor .zona.prox{right:max(0px,calc((100vw - 460px) / 2))}
@media (prefers-reduced-motion:reduce){.gaba3-historia-visor{animation:none}}