/* Estilos para o IP Público - Corrigido vazamento */
#user-ip-public {
margin-right: 15px;
transition: none;
animation: none !important;
display: inline-block;
max-width: 120px; /* Reduzido para garantir que não vaze em telas pequenas */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}

/* Remover overlay de vidro quadrado sobre os cards */
.card::after, .card::before, 
.grid-margin::after, .grid-margin::before,
.stretch-card::after, .stretch-card::before {
display: none !important;
content: none !important;
background: none !important;
backdrop-filter: none !important;
}

/* Garantir que o card não tenha filtros de desfoque indesejados */
.card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* Fixar imagem de fundo da página e remover fundos secundários */
body, .container-scroller, .main-panel, .content-wrapper {
background: transparent !important;
background-attachment: fixed !important;
}

body {
background-image: url('../css/fundo.jpg') !important; /* Ajustado para o caminho encontrado */
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}

/* Estilo para os IPs clicáveis */
.ip-clickable {
cursor: pointer;
position: relative;
display: inline-block;
padding: 2px 5px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
transition: background 0.3s;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}

.ip-clickable:hover {
background: rgba(255, 255, 255, 0.2);
}

.ip-clickable.revealed {
max-width: none;
white-space: normal;
word-break: break-all;
background: rgba(255, 255, 255, 0.15);
}

/* Remove gradientes de temas que podem estar sobrepondo */
[data-theme] body, [data-theme] .container-scroller {
background-image: none !important;
background: transparent !important;
}

/* Container das bolhas - Ajustado para não vazar e manter alinhamento */
.bubble-container {
display: flex;
gap: 5px; /* Espaçamento reduzido entre bolhas */
flex-wrap: nowrap; /* Força as bolhas a ficarem na mesma linha */
justify-content: flex-start; /* Alinha à esquerda */
align-items: center;
margin-top: 5px;
width: 100%; /* Ocupa a largura disponível */
overflow: hidden; /* Garante que nada saia do container */
}

/* Bolha de Água Animada - Tamanho Reduzido para caber no card */
.water-bubble {
width: 30px; /* Reduzido levemente de 35px para 30px para garantir espaço */
height: 30px;
min-width: 30px; /* Garante que a bolha não encolha */
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.85), rgba(180, 0, 0, 1));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 900;
font-size: 1rem; /* Ajustado para o novo tamanho */
box-shadow: 0 3px 8px rgba(255, 0, 0, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
animation: floatBubble 4s ease-in-out infinite, popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
transition: transform 0.3s ease, filter 0.5s ease;
user-select: none;
}

/* Reflexo na bolha */
.water-bubble::before {
content: '';
position: absolute;
top: 12%;
left: 12%;
width: 35%;
height: 35%;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
filter: blur(1px);
}

/* Animação de Flutuação */
@keyframes floatBubble {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-3px) rotate(3deg); }
}

/* Animação de Surgimento (Pop-in) */
@keyframes popIn {
0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Efeito de "Pulo" quando o número muda */
.bubble-update {
animation: bubblePulse 0.5s ease-out !important;
}

@keyframes bubblePulse {
0% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.15); filter: brightness(1.5); }
100% { transform: scale(1); filter: brightness(1); }
}

/* Rotação de cor dinâmica */
.bubble-hue-rotate {
filter: hue-rotate(var(--hue-angle, 0deg));
}