/* Core CSS para todos os overlays - Extraído do overlay.css original */
/* Variáveis globais */
:root {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.85, 0, 0.15, 1);
--primary-color: #ff0000;
--secondary-color: #ff6b6b;
--text-color: white;
--background-color: rgba(0,0,0,0.8);
--border-color: white;
--shadow-color: rgba(255,255,255,0.7);
--progress-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--primary-color));
--counter-height: 125px;
--counter-min-width: 575px;
}
/* Reset básico */

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Configuração de fontes */
@font-face {
font-family: 'Burbank';
src: url('../../assets/fonts/BurbankBigCondensed.ttf') format('truetype');
font-display: swap;
}
/* Configuração do corpo */
body {
overflow: hidden;
background-color: transparent;
}
/* Contador de Likes - Estrutura Base */
.like-counter {
font-family: 'Burbank', 'Arial Black', sans-serif;
font-size: 30px;
color: var(--text-color);
background: var(--background-color);
border: 2px solid var(--border-color);
border-radius: 10px;
box-shadow: 0 0 10px var(--shadow-color);
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
min-width: var(--counter-min-width);
height: var(--counter-height);
display: flex;
align-items: center;
padding: 10px 100px 10px 50px;
overflow: hidden;
backface-visibility: hidden;
will-change: transform, opacity;
isolation: isolate;
contain: layout;
z-index: 1000;
}
/* Barra de Progresso - Core */
.progress-bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
transform: translateZ(0);
z-index: 1;
}
.progress-bar {
height: 100%;
width: 0%;
background: var(--progress-gradient);
transition: width 0.5s var(--ease-out);
mask: linear-gradient(to right, #000 0 95%, transparent 98%);
-webkit-mask: linear-gradient(to right, #000 0 95%, transparent 98%);
box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
/* Efeito líquido */
.progress-bar::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 10%, transparent 60%);
top: -75%;
left: -50%;
opacity: 0.6;
animation: wave 3s infinite linear;
}
@keyframes wave {
0% { transform: translateX(0) translateY(0); }
50% { transform: translateX(25%) translateY(10%); }
100% { transform: translateX(50%) translateY(0); }
}
/* Símbolo de Like - Core */
.like-symbol {
font-size: 80px;
position: relative;
left: -30px;
animation:
moveLike 1.8s var(--ease-in-out) infinite,
pulse 1.5s ease infinite alternate;
z-index: 10;
transform: translateZ(0);
}
@keyframes moveLike {
0%, 100% { transform: translateY(0) rotate(-5deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
@keyframes pulse {
from { filter: brightness(1); }
to { filter: brightness(1.2); }
}
/* Container do texto de likes - Core */
.like-text-container {
margin-left: -10px;
z-index: 10;
position: relative;
}
.like-text {
font-size: 60px;
overflow: hidden;
letter-spacing: 3px;
position: relative;
top: 25px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-variant-numeric: tabular-nums;
background: linear-gradient(
45deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0.9) 50%,
rgba(255,255,255,1) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
text-shadow: 0 0 12px rgba(255,255,255,0.4);
}
/* Caixa de mensagens - Core */
.message-box {
position: absolute;
top: 10px;
left: 125px;
width: 70%;
height: 60px;
perspective: 1000px;
z-index: 20;
overflow: visible;
}
/* Estilos de mensagens - Core */
.msg {
position: absolute;
opacity: 0;
visibility: hidden;
transition:
opacity 0.7s var(--ease-out),
transform 0.7s var(--ease-out),
visibility 0.7s var(--ease-out);
font-size: 45px;
white-space: nowrap;
left: 0 !important;
top: 0;
pointer-events: none;
will-change: opacity, transform;
transform: translateY(10px) scale(0.98);
letter-spacing: 4px;
color: white;
text-shadow:
0 0 5px rgba(0,0,0,0.5),
0 0 8px rgba(255,255,255,0.3);
z-index: 100;
display: block;
}
.msg.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
z-index: 101;
}
/* Estilo do ícone de gemas - Core */
.gem-icon {
width: 45px !important;
height: 45px !important;
vertical-align: middle;
margin-right: 10px;
display: inline-block !important;
object-fit: contain;
position: relative;
z-index: 200;
}
.gem-glow {
animation:
rainbow-glow 3s linear infinite,
float 3s ease-in-out infinite;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
@keyframes rainbow-glow {
0% { filter: hue-rotate(0deg) brightness(1.1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
50% { filter: hue-rotate(180deg) brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }
100% { filter: hue-rotate(360deg) brightness(1.1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Tela de erro - Core */
.error-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 10px;
text-align: center;
color: white;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
min-width: 300px;
z-index: 9999;
}
.error-overlay h2 {
margin-top: 0;
color: #ff6b6b;
}
.dashboard-link {
display: inline-block;
margin-top: 20px;
background: #ff6b6b;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s ease;
}
.dashboard-link:hover {
background: #ff0000;
}
/* SVG Filter para efeito Gooey - Core */
.gooey-filter {
position: absolute;
width: 0;
height: 0;
}

/* REMOVIDO: Botão de upgrade - Core */

/* Alerta de limite de likes - Core */
.likes-alert {
position: fixed;
bottom: 80px;
right: 20px;
background-color: #ff9800;
color: white;
padding: 15px;
border-radius: 10px;
z-index: 1100;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.likes-alert button {
background-color: white;
color: #ff9800;
border: none;
padding: 5px 10px;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
/* Modal para links - Core */
.modal {
display: none;
position: fixed;
z-index: 1200;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 80%;
max-width: 600px;
position: relative;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.link-container {
display: flex;
margin: 20px 0;
}
.link-container input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px 0 0 5px;
}
.btn-copy {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.help-text {
font-size: 14px;
color: #666;
}
/* Responsividade para móveis - Core */
@media screen and (max-width: 768px) {
.like-counter {
min-width: 90%;
padding: 10px 20px;
}
.like-symbol {
    font-size: 60px;
    left: -10px;
}

.like-text {
    font-size: 40px;
}

.message-box {
    width: 60%;
    left: 80px;
}

.msg {
    font-size: 30px;
}
}