/* ==========================================================================
   AXOLY - GLOBALNE KOSMETYKI (RAMKI, KOLORY NICKÓW, ODZNAKI)
   Plik: static/css/kosmetyki.css
   ========================================================================== */

/* === UNIWERSALNA KLASA EMOJI === */
.emoji-font, .floating-emoji, .item-icon, .badge-icon {
    font-family: 'Noto Color Emoji', sans-serif !important;
}

/* === BAZOWE KLASY AWATARA I NICKU === */
.player-nick-container { 
    display: flex; align-items: center; 
}
.nick-base { 
    font-weight: 900; letter-spacing: 0.5px; 
} 
.emoji-span { 
    font-size: 1.2em; margin-left: 6px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.mini-avatar { 
    width: 45px; height: 45px; border-radius: 50%; border: 2px solid transparent; 
    object-fit: cover; background: rgba(20,20,20,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.5); flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   KOŁO FORTUNY - RANGI NICKÓW (SYSTEM RANKINGOWY AXOLY)
   ========================================================================== */

/* --- 🟢 POSPOLITE (Zwykłe kolory, standardowa czcionka) --- */
.nick_pospolity_bialy        { color: #ffffff; font-weight: 500; }
.nick_pospolity_czerwony     { color: #ef4444; font-weight: 500; }
.nick_pospolity_zielony      { color: #10b981; font-weight: 500; }
.nick_pospolity_niebieski    { color: #3b82f6; font-weight: 500; }
.nick_pospolity_zolty        { color: #eab308; font-weight: 500; }
.nick_pospolity_pomaranczowy { color: #f97316; font-weight: 500; }
.nick_pospolity_szary        { color: #9ca3af; font-weight: 500; }
.nick_pospolity_fioletowy    { color: #8b5cf6; font-weight: 500; }
.nick_pospolity_brazowy      { color: #8b4513; font-weight: 500; }

/* --- 🔵 NIEPOSPOLITE (Te same kolory, ale pogrubiona, masywna czcionka) --- */
.nick_niepospolity_bialy        { color: #ffffff; font-weight: 900; text-shadow: 0 0 1px rgba(255,255,255,0.5); }
.nick_niepospolity_czerwony     { color: #ef4444; font-weight: 900; text-shadow: 0 0 1px rgba(239,68,68,0.5); }
.nick_niepospolity_zielony      { color: #10b981; font-weight: 900; text-shadow: 0 0 1px rgba(16,185,129,0.5); }
.nick_niepospolity_niebieski    { color: #3b82f6; font-weight: 900; text-shadow: 0 0 1px rgba(59,130,246,0.5); }
.nick_niepospolity_zolty        { color: #eab308; font-weight: 900; text-shadow: 0 0 1px rgba(234,179,8,0.5); }
.nick_niepospolity_pomaranczowy { color: #f97316; font-weight: 900; text-shadow: 0 0 1px rgba(249,115,22,0.5); }
.nick_niepospolity_szary        { color: #9ca3af; font-weight: 900; text-shadow: 0 0 1px rgba(156,163,175,0.5); }
.nick_niepospolity_fioletowy    { color: #8b5cf6; font-weight: 900; text-shadow: 0 0 1px rgba(139,92,246,0.5); }
.nick_niepospolity_brazowy      { color: #8b4513; font-weight: 900; text-shadow: 0 0 1px rgba(139,69,19,0.5); }

/* --- 🟣 RZADKIE (Stonowane, eleganckie gradienty statyczne - 5 rodzajów) --- */
.nick_rzadki_morski {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_rzadki_wulkaniczny {
    background: linear-gradient(135deg, #b91c1c, #f97316);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_rzadki_magiczny {
    background: linear-gradient(135deg, #6d28d9, #ec4899);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_rzadki_lesny {
    background: linear-gradient(135deg, #047857, #a3e635);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_rzadki_bursztynowy {
    background: linear-gradient(135deg, #d97706, #fef08a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}

/* --- 🟡 EPICKIE (Żywe gradienty animowane / przesuwające się) --- */
.nick_epicki_zachod {
    background: linear-gradient(90deg, #f97316, #e11d48, #7c3aed, #f97316);
    background-size: 200% auto; animation: waveMove 3s linear infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_epicki_zorza {
    background: linear-gradient(90deg, #10b981, #06b6d4, #6d28d9, #10b981);
    background-size: 200% auto; animation: waveMove 3.5s linear infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}
.nick_epicki_cyberpunk {
    background: linear-gradient(90deg, #ff007f, #00ffff, #ff007f);
    background-size: 200% auto; animation: waveMove 2.5s linear infinite;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900;
}

/* --- 🔴 LEGENDARNE (Supernowa - rozświetlanie liter po kolei na przezroczystym tle) --- */
.nick_legendarny_supernowa {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.08) 0%, 
        rgba(255,255,255,0.35) 25%, 
        #ffffff 50%, 
        rgba(255,255,255,0.35) 75%, 
        rgba(255,255,255,0.08) 100%
    );
    background-size: 200% auto;
    animation: supernowaScan 2s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}

/* === DODATEK: Osobna klasa dla Premium === */
.nick_premium_gold { 
    background: linear-gradient(to right, #fbbf24, #f59e0b, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); animation: premiumPulse 2s infinite alternate; 
}


/* ==========================================================================
   KOŁO FORTUNY - RANGI RAMEK (4x10 KOLORÓW + LEGENDA)
   ========================================================================== */

/* --- 🟢 POSPOLITE (Cienkie, 2px solid) --- */
.frame_pospolita_biala        { border: 2px solid #ffffff !important; }
.frame_pospolita_czarna       { border: 2px solid #111111 !important; }
.frame_pospolita_czerwona     { border: 2px solid #ef4444 !important; }
.frame_pospolita_zielona      { border: 2px solid #10b981 !important; }
.frame_pospolita_niebieska    { border: 2px solid #3b82f6 !important; }
.frame_pospolita_zolta        { border: 2px solid #eab308 !important; }
.frame_pospolita_pomaranczowa { border: 2px solid #f97316 !important; }
.frame_pospolita_szara        { border: 2px solid #6b7280 !important; }
.frame_pospolita_fioletowa    { border: 2px solid #8b5cf6 !important; }
.frame_pospolita_brazowa      { border: 2px solid #8b4513 !important; }

/* --- 🔵 NIEPOSPOLITE (Grubsze, 4px solid) --- */
.frame_niepospolita_biala        { border: 4px solid #ffffff !important; }
.frame_niepospolita_czarna       { border: 4px solid #111111 !important; }
.frame_niepospolita_czerwona     { border: 4px solid #ef4444 !important; }
.frame_niepospolita_zielona      { border: 4px solid #10b981 !important; }
.frame_niepospolita_niebieska    { border: 4px solid #3b82f6 !important; }
.frame_niepospolita_zolta        { border: 4px solid #eab308 !important; }
.frame_niepospolita_pomaranczowa { border: 4px solid #f97316 !important; }
.frame_niepospolita_szara        { border: 4px solid #6b7280 !important; }
.frame_niepospolita_fioletowa    { border: 4px solid #8b5cf6 !important; }
.frame_niepospolita_brazowa      { border: 4px solid #8b4513 !important; }

/* --- 🟣 RZADKIE (3px solid + Pulsująca poświata) --- */
.frame_rzadka_biala        { border: 3px solid #ffffff !important; --rare-color: #ffffff; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_czarna       { border: 3px solid #111111 !important; --rare-color: #111111; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_czerwona     { border: 3px solid #ef4444 !important; --rare-color: #ef4444; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_zielona      { border: 3px solid #10b981 !important; --rare-color: #10b981; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_niebieska    { border: 3px solid #3b82f6 !important; --rare-color: #3b82f6; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_zolta        { border: 3px solid #eab308 !important; --rare-color: #eab308; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_pomaranczowa { border: 3px solid #f97316 !important; --rare-color: #f97316; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_szara        { border: 3px solid #6b7280 !important; --rare-color: #6b7280; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_fioletowa    { border: 3px solid #8b5cf6 !important; --rare-color: #8b5cf6; animation: rarePulse 1.5s infinite alternate ease-in-out; }
.frame_rzadka_brazowa      { border: 3px solid #8b4513 !important; --rare-color: #8b4513; animation: rarePulse 1.5s infinite alternate ease-in-out; }

/* --- 🟡 EPICKIE (3px solid + Poświata + Skalowanie całego awatara) --- */
.frame_epicka_biala        { border: 3px solid #ffffff !important; --epic-color: #ffffff; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_czarna       { border: 3px solid #111111 !important; --epic-color: #111111; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_czerwona     { border: 3px solid #ef4444 !important; --epic-color: #ef4444; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_zielona      { border: 3px solid #10b981 !important; --epic-color: #10b981; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_niebieska    { border: 3px solid #3b82f6 !important; --epic-color: #3b82f6; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_zolta        { border: 3px solid #eab308 !important; --epic-color: #eab308; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_pomaranczowa { border: 3px solid #f97316 !important; --epic-color: #f97316; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_szara        { border: 3px solid #6b7280 !important; --epic-color: #6b7280; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_fioletowa    { border: 3px solid #8b5cf6 !important; --epic-color: #8b5cf6; animation: epicPulse 1.5s infinite alternate ease-in-out; }
.frame_epicka_brazowa      { border: 3px solid #8b4513 !important; --epic-color: #8b4513; animation: epicPulse 1.5s infinite alternate ease-in-out; }

/* --- 🔴 LEGENDARNE (Efekt spadającej gwiazdy - płomyk krążący wokół obrysu) --- */
.frame_legendarna_supernowa { 
    border: 3px solid #050505 !important; 
    --leg-color: #a855f7; 
    animation: flyingFlame 1.2s linear infinite; 
}


/* ==========================================================================
   KLUCZOWE ANIMACJE (Dla ramek i nicków)
   ========================================================================== */

/* Animacje Ramek */
@keyframes rarePulse {
    0% { box-shadow: 0 0 2px var(--rare-color); }
    100% { box-shadow: 0 0 15px var(--rare-color); }
}

@keyframes epicPulse {
    0% { box-shadow: 0 0 2px var(--epic-color); transform: scale(1); }
    100% { box-shadow: 0 0 25px var(--epic-color); transform: scale(1.08); }
}

@keyframes flyingFlame {
    0%   { box-shadow: 0 -12px 10px -2px var(--leg-color); }
    25%  { box-shadow: 12px 0 10px -2px var(--leg-color); }
    50%  { box-shadow: 0 12px 10px -2px var(--leg-color); }
    75%  { box-shadow: -12px 0 10px -2px var(--leg-color); }
    100% { box-shadow: 0 -12px 10px -2px var(--leg-color); }
}

/* Animacje Nicków */
@keyframes waveMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes supernowaScan {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes premiumPulse { 
    0% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5)); } 
    100% { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)); } 
}


/* ==========================================================================
   SYSTEM POWIADOMIEŃ (TOAST)
   ========================================================================== */
.axoly-toast {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    color: white; padding: 15px 30px; border-radius: 50px; font-weight: 900; font-size: 1.1rem;
    letter-spacing: 1px; z-index: 10000;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.axoly-toast.show { top: 20px; }
.axoly-toast.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    border: 2px solid #10b981; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), inset 0 0 10px rgba(255,255,255,0.2);
}
.axoly-toast.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
    border: 2px solid #ef4444; box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4), inset 0 0 10px rgba(255,255,255,0.2);
}