@charset "utf-8";

/* --- ЗМІННІ ТА ОСНОВА --- */
:root {
    --p-pink: #ff0080;
    --p-purple: #7928ca;
    --p-blue: #0070f3;
}

html {
    background-color: #050507;
}

body {
    background: transparent !important; /* ЗНІМАЄМО "ЧОРНУ ШТОРУ" */
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.font-heavy { font-family: 'Unbounded', sans-serif; }


/* --- ФОНОВІ ЕФЕКТИ --- */
.bg-mesh {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-color: #050507; overflow: hidden;
}

.bg-mesh::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000'%3E%3Cpath d='M0 100c100 0 100 100 200 100s100-100 200-100 100 100 200 100 100-100 200-100M0 300c100 0 100 100 200 100s100-100 200-100 100 100 200 100 100-100 200-100M0 500c100 0 100 100 200 100s100-100 200-100 100 100 200 100 100-100 200-100M0 700c100 0 100 100 200 100s100-100 200-100 100 100 200 100 100-100 200-100M0 900c100 0 100 100 200 100s100-100 200-100 100 100 200 100 100-100 200-100' stroke='%23ffffff' stroke-opacity='0.03' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 800px; filter: blur(1px);
}

.bg-mesh::after {
    content: ""; position: absolute; inset: 0;
    background: 
        radial-gradient(circle at 10% 10%, rgba(0, 242, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(255, 0, 208, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(121, 40, 202, 0.1) 0%, transparent 50%);
    filter: blur(80px); animation: pulseGlow 10s ease-in-out infinite alternate;
}

.bg-grain { 
    position: fixed; inset: 0; z-index: -1; opacity: 0.4; pointer-events: none; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/svg%3E"); 
}

.bg-mesh, .bg-grain { pointer-events: none !important; }
.bg-grid { display: none !important; }


/* --- КАРТКИ ТА ФОНИ КАРТОК --- */
.user-card {
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.user-card-bg {
    position: relative;
    background: #0b0b0d !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-bg::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at top left, var(--c1) 0%, transparent 60%),
                radial-gradient(circle at bottom right, var(--c2) 0%, transparent 60%);
    opacity: 0.03; transition: opacity 0.6s ease; z-index: 0;
}

.user-card:hover .user-card-bg::before { opacity: 0.12; }
.card-tapped { transform: scale(0.97) translateY(4px) !important; }


/* --- РЕЙТИНГОВІ СТИЛІ (ТОП 1, 2, 3) --- */

/* ТОП-1: Залишаємо магічне сяйво та анімацію рамки */
.rank-1-glow {
    background: linear-gradient(#0b0b0d, #0b0b0d) padding-box, linear-gradient(90deg, #00f2ff, #ff00d0, #ffd700, #00f2ff) border-box !important;
    border: 3px solid transparent !important; background-size: 200% 200%; animation: flowBorder 3s linear infinite;
    position: relative; box-shadow: 0 0 25px rgba(0, 242, 255, 0.2);
}

.rank-1-glow::after {
    content: ''; position: absolute; inset: -15px; background: linear-gradient(90deg, #00f2ff, #ff00d0, #ffd700);
    filter: blur(35px); opacity: 0.15; z-index: -1; transition: all 0.6s ease; border-radius: 2rem;
}
.rank-1-glow:hover::after { opacity: 0.4; filter: blur(45px); }

/* ТОП-2: Прибрано анімацію сяйва (metalShine), залишено статичний колір */
.rank-2-glow { 
    border-color: #ffd700 !important; 
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); 
    position: relative; 
}
.rank-2-glow::after { 
    content: ''; position: absolute; inset: -10px; 
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%); 
    z-index: -1; opacity: 0.5; 
}

/* ТОП-3: Прибрано анімацію сяйва, залишено статичний колір */
.rank-3-glow { 
    border-color: #ff6b00 !important; 
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.15); 
    position: relative; 
}
.rank-3-glow::after { 
    content: ''; position: absolute; inset: -10px; 
    background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%); 
    z-index: -1; opacity: 0.5; 
}

/* Анімація корони для ТОП-1 */
.animate-leader-crown { 
    animation: leader-crown 2s ease-in-out infinite; 
    transform-origin: center bottom;
}


/* --- ТАПАЛКА ТА ЕФЕКТИ ЗАРЯДУ --- */
.tapper-box {
    background-size: 200% auto !important;
    background-position: 0% center !important;
    transition: all 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.tapper-box:hover {
    background-position: 100% center !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.zap-icon-bg { box-shadow: 0 0 20px var(--zap-color); }
.group-active\/tap { filter: brightness(1.5); }

/* Яскрава пульсація блискавки в блоці Charge */
.animate-lightning-glow { 
    animation: lightning-glow 1.5s ease-in-out infinite; 
}

/* Жорстка тряска перед вибухом (коли 980+ вотумів) */
.charge-exploding {
    animation: shake-violent 0.15s infinite !important;
    border-color: #ff0055 !important;
    background: rgba(255, 0, 85, 0.15) !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.6) !important;
}

.energy-pulse { animation: aura-pulse 0.5s ease-in-out infinite alternate; }


/* --- СТРІМ АВАТАРОК --- */
#activity-stream-container { 
    position: fixed; bottom: -60px; left: 20px; z-index: 150; 
    display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; 
}

.stream-item { 
    pointer-events: auto; position: relative; 
    width: 56px; height: 56px; cursor: pointer; 
    animation: slideUpSlow 25s linear forwards; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.stream-avatar-wrapper {
    position: relative; width: 100%; height: 100%; 
    border-radius: 50%; background: #0b0b0d; 
    padding: 3px; overflow: hidden; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px rgba(255, 0, 208, 0.4);
    transition: box-shadow 0.3s ease;
}

.stream-avatar-wrapper img { 
    width: 100%; height: 100%; border-radius: 50%; 
    object-fit: cover; position: relative; z-index: 10;
    border: 2px solid #050507;
}

.stream-avatar-wrapper::before {
    content: ''; position: absolute;
    width: 150%; height: 150%;
    background: conic-gradient(#ff00d0, #00f2ff, #ffd700, #ff00d0);
    animation: spinBorder 3s linear infinite;
    opacity: 0.4; transition: opacity 0.3s ease;
}

.stream-item:hover { 
    animation-play-state: paused; 
    transform: scale(1.25); z-index: 200; 
}

.stream-item:hover .stream-avatar-wrapper::before { opacity: 1; animation: spinBorder 0.8s linear infinite; }
.stream-item:hover .stream-avatar-wrapper { box-shadow: 0 0 30px #ff00d0, 0 0 15px #00f2ff; }

.stream-heart {
    position: absolute; color: #ff0080;
    filter: drop-shadow(0 0 8px #ff00d0) drop-shadow(0 0 15px #ff00d0);
    fill: #ff0080; pointer-events: none; z-index: 10;
    animation: heartExplode 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- КЛЮЧОВІ КАДРИ АНІМАЦІЙ --- */
@keyframes flowBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseGlow {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}

@keyframes spinBorder {
    100% { transform: rotate(360deg); }
}

@keyframes leader-crown {
    0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
    50% { transform: translateY(-5px) rotate(5deg) scale(1.1); }
}

@keyframes heartExplode {
    0% { transform: translate(0, 0) scale(0) rotate(0); opacity: 0; }
    20% { opacity: 1; transform: translate(0, 0) scale(1.2) rotate(0); }
    100% { transform: translate(var(--x), var(--y)) scale(0) rotate(var(--r)); opacity: 0; }
}

@keyframes slideUpSlow {
    from { transform: translateY(100vh); }
    to { transform: translateY(-200vh); }
}

/* --- ЧАСТИНКИ ТА КОМБО --- */
.combo-text { position: fixed; pointer-events: none; z-index: 2000; font-family: 'Unbounded', sans-serif; font-weight: 900; color: #ffd700; text-shadow: 0 0 10px #ff00d0, 0 0 20px #ff00d0; animation: comboAnim 0.5s ease-out forwards; font-style: italic; }
.t-particle { position: fixed; pointer-events: none; z-index: 1000; font-family: 'Unbounded', sans-serif; font-weight: 900; color: #ff0080; text-shadow: 0 0 10px rgba(255,0,128,0.5); animation: particleAnim 0.8s ease-out forwards; }
.t-particle-crit { position: fixed; pointer-events: none; z-index: 1100; font-family: 'Unbounded', sans-serif; font-weight: 900; color: #ffd700; text-shadow: 0 0 20px #ffd700, 0 0 40px #ffae00; animation: critAnim 1s ease-out forwards; }

.fab { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background: linear-gradient(135deg, #ff0080, #7928ca); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(255, 0, 128, 0.4); z-index: 200; border: 2px solid rgba(255,255,255,0.2); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.fab:active { transform: scale(0.8) rotate(45deg); }

/* --- АНІМАЦІЇ --- */
@keyframes pulseGlow { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.1) translate(-2%, 2%); } }
@keyframes flowBorder { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes metalShine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
@keyframes particleAnim { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-120px) scale(2); opacity: 0; } }
@keyframes critAnim { 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translateY(-150px) scale(3) rotate(20deg); opacity: 0; } }
@keyframes comboAnim { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 50% { transform: scale(1.2) rotate(10deg); opacity: 1; } 100% { transform: translateY(-80px) scale(1) rotate(0deg); opacity: 0; } }
@keyframes slideUpSlow { 0% { transform: translateY(0); opacity: 0; } 2% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(-95vh); opacity: 0; } }
@keyframes aura-pulse { 0% { filter: drop-shadow(0 0 5px var(--accent)) brightness(1); } 100% { filter: drop-shadow(0 0 25px var(--accent)) brightness(1.5); } }
@keyframes spinBorder { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes heartExplode { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; } 30% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.5) rotate(var(--r)); } 100% { transform: translate(calc(var(--x) * 1.5), calc(var(--y) - 60px)) scale(0.8) rotate(calc(var(--r) * 2)); opacity: 0; } }
@keyframes leader-crown { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 0 5px #00f2ff); } 50% { transform: translateY(-5px) scale(1.15) rotate(5deg); filter: drop-shadow(0 0 15px #ff00d0); } }
@keyframes lightning-glow { 0%, 100% { filter: drop-shadow(0 0 3px #ffd700) brightness(1); transform: scale(1); } 50% { filter: drop-shadow(0 0 15px #ffae00) brightness(1.5); transform: scale(1.15); } }
@keyframes shake-violent { 0%, 100% { transform: translate(0, 0) scale(1); } 20% { transform: translate(-2px, 2px) scale(1.03); filter: brightness(1.5); } 40% { transform: translate(2px, -2px) scale(1.03); } 60% { transform: translate(-2px, -2px) scale(1.03); filter: brightness(1.5); } 80% { transform: translate(2px, 2px) scale(1.03); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* --- МЕДІА --- */
@media (max-width: 768px) {
    .header-focused #headerLogo { width: 0; margin-right: 0; opacity: 0; transform: translateX(-20px); pointer-events: none; }
    .header-focused #headerActions { width: 0; margin-left: 0; opacity: 0; transform: translateX(20px); pointer-events: none; }
}

/* Анімація нервового тремтіння */
@keyframes nervous-shake {
    0% { transform: translate(0,0) scale(1); }
    10% { transform: translate(-2px, 1px) scale(1.05); }
    30% { transform: translate(2px, -1px) rotate(2deg); }
    50% { transform: translate(-3px, -1px) scale(1.1); }
    70% { transform: translate(3px, 1px) rotate(-2deg); }
    90% { transform: translate(-1px, 2px) scale(1.05); }
    100% { transform: translate(0,0) scale(1); }
}

.is-nervous {
    animation: nervous-shake 0.1s infinite;
    filter: drop-shadow(0 0 15px var(--zap-color));
}

/* Ефект вибуху на аватарці */
@keyframes avatar-charge-flash {
    0% { transform: scale(1); box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.8); }
    50% { transform: scale(1.15); box-shadow: 0 0 30px 10px var(--c1); }
    100% { transform: scale(1); box-shadow: 0 0 0 0px rgba(255, 255, 255, 0); }
}

.charge-boom {
    animation: avatar-charge-flash 0.6s ease-out;
}

@keyframes zap-impact {
    0% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.4) rotate(-15deg); filter: brightness(1.5); }
    40% { transform: scale(1) rotate(15deg); }
    60% { transform: scale(1.2) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Клас, який ми будемо додавати через JS */
.zap-active {
    animation: zap-impact 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Додатково: зробимо перехід фону іконки м'якшим */
.zap-icon-bg {
    transition: transform 0.1s ease, background 0.2s ease;
    will-change: transform;
}

/* Анімація блискавки при тапі */
@keyframes zap-hit {
    0% { transform: scale(1); }
    20% { transform: scale(1.4) rotate(-15deg); filter: brightness(1.5) drop-shadow(0 0 15px var(--zap-color)); }
    100% { transform: scale(1) rotate(0deg); }
}
.zap-impact { animation: zap-hit 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* Анімація лічильника Charge (вибух заряду) */
@keyframes charge-bump {
    0% { transform: scale(1); filter: brightness(1); }
    10% { transform: scale(1.8); filter: brightness(2) drop-shadow(0 0 20px #00f2ff); }
    100% { transform: scale(1); filter: brightness(1); }
}
.charge-upgrade { animation: charge-bump 0.8s ease-out forwards; }

/* Легке постійне миготіння зарядів */
@keyframes gentle-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}
.charge-idle { animation: gentle-blink 2s ease-in-out infinite; }


/* 1. Спокійний стан (легке миготіння іконки) */
.charge-zap-idle {
    animation: zap-soft-pulse 2s ease-in-out infinite;
}

@keyframes zap-soft-pulse {
    0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px #ffd700); }
    50% { opacity: 0.6; transform: scale(1.1); filter: drop-shadow(0 0 8px #ffd700); }
}

/* 2. Стан напруження (коли > 900 вотумів) */
.charge-warning {
    animation: box-shake 0.1s infinite, box-glow-flicker 0.3s infinite !important;
    border-color: #00f2ff !important;
    background: rgba(0, 242, 255, 0.15) !important;
}

@keyframes box-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 1px); }
}

@keyframes box-glow-flicker {
    0%, 100% { box-shadow: 0 0 5px #00f2ff; }
    50% { box-shadow: 0 0 25px #00f2ff; }
}

/* 3. Текст "SUPERCHARGED", що вилітає при вибуху */
.charged-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 14px;
    white-space: nowrap;
    text-shadow: 0 0 20px #00f2ff;
    pointer-events: none;
    z-index: 50;
    animation: charged-popup 1.5s ease-out forwards;
}

@keyframes charged-popup {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -150%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -250%) scale(1); opacity: 0; }
}