:root {
    --bg-body: #050507;
    --text-color: #e0e0e0;
    --accent: #d4af37;
    --glass: rgba(20, 20, 25, 0.7);
    --border: 1px solid rgba(255,255,255,0.08);
    --font-main: 'Inter', sans-serif;
    --blur: blur(12px);
}
body { background: var(--bg-body); color: var(--text-color); font-family: var(--font-main); margin:0; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.site-header { position: fixed; width: 100%; top: 0; background: var(--glass); backdrop-filter: var(--blur); border-bottom: var(--border); z-index: 999; padding: 0 20px; }
.header-container { max-width: 1200px; margin: 0 auto; height: 80px; display: flex; justify-content: space-between; align-items: center; }
.brand-logo { font-weight: 800; font-size: 1.2rem; color: #fff; text-transform: uppercase; }
.brand-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-item { color: #888; font-weight: 500; }
.nav-item:hover, .nav-item.active { color: #fff; }
.btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.btn.gold { background: linear-gradient(135deg, #d4af37, #aa892c); color: #000; box-shadow: 0 4px 15px rgba(212,175,55,0.3); }
.btn.dark { background: #222; color: #fff; border: 1px solid #333; }
.btn.ghost { background: transparent; color: #ccc; border: 1px solid #333; }
main.container { max-width: 1200px; margin: 100px auto; padding: 20px; text-align: center; }
.hero h1 { font-size: 3.5rem; background: linear-gradient(#fff, #888); -webkit-background-clip: text; color: transparent; margin-bottom: 10px; }
.hero .subtitle { color: #666; margin-bottom: 40px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 50px; }
.stat-card { background: #0f0f12; padding: 30px; border-radius: 16px; border: var(--border); }
.stat-card p { font-size: 2rem; font-weight: 700; color: #fff; margin-top: 10px; }
footer { text-align: center; padding: 40px; color: #444; border-top: var(--border); margin-top: 50px; }

/* --- CINEMATIC MINIMAL LAYOUT (Added via Update) --- */

/* Wielka Typografia */
.hero-title {
    font-size: clamp(3rem, 8vw, 6rem); /* Skalowalne */
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

/* Subtelny Tagline */
.hero-tag {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    opacity: 0.7;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
}

/* Pasek Danych (HUD) zamiast Kafelków */
.server-hud {
    display: flex;
    gap: 60px;
    padding: 30px 60px;
    border-radius: 100px; /* Pigułka */
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transition: transform 0.5s;
}

.server-hud:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.15);
}

.hud-item {
    text-align: center;
    position: relative;
}

/* Separatory między danymi */
.hud-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

.hud-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hud-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-top: 5px;
}

/* Dostosowanie kolorów pod motywy (nadpisuje domyślne #fff) */
/* Jeśli motyw ma zdefiniowane --accent, użyj go */
.hud-value { text-shadow: 0 0 20px rgba(255,255,255,0.1); }


/* --- ULTRA 3D DEPTH & ANIMATIONS UPDATE --- */

/* 1. Animacja Wjazdu (Grawitacja) */
    0% { 
        opacity: 0; 
        transform: translateY(-100px) scale(0.9); 
        filter: blur(10px);
    }
    70% {
        transform: translateY(10px); /* Odbicie */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0);
    }
}

    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. Tytuł z Głębią 3D (Statyczną) */
.hero-title {
    /* Resetujemy poprzednie style */
    background: none !important;
    -webkit-text-fill-color: initial !important; 
    
    font-family: "Cinzel", sans-serif; /* Bardziej epicka czcionka */
    color: #e0e0e0;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    
    /* MAGIA 3D CSS - Warstwy cienia symulujące grubość */
    text-shadow: 
        0 1px 0 #444,
        0 2px 0 #333,
        0 3px 0 #222,
        0 4px 0 #111,
        0 5px 0 #000,
        0 20px 40px rgba(0,0,0,0.8), /* Cień rzucany na tło */
        0 0 50px rgba(255,255,255,0.1); /* Lekka poświata */
        
}

/* Korekta dla jasnych motywów (żeby złoto też miało 3D) */
/* Jeśli element ma klasę "gold", nadpisujemy kolor, ale zostawiamy cień */
.hero-title span {
    color: var(--accent, #d4af37);
}


/* 3. HUD - Wygląd "Solidny Blok" */
.server-hud {
    /* Usuwamy lekki styl */
    background: #0a0a0a;
    border: none;
    
    /* GŁĘBIA POKŁADOWA */
    box-shadow: 
        /* Cień zewnętrzny (odsuniecie od tła) */
        0 30px 60px rgba(0,0,0,1),
        /* Światło od góry (krawędź) */
        inset 0 1px 1px rgba(255,255,255,0.3),
        /* Cień wewnętrzny (wklęsłość) */
        inset 0 -10px 20px rgba(0,0,0,0.8);
        
    border-radius: 12px; /* Mniej zaokrąglone, bardziej techniczne */
    padding: 20px 50px;
    border-top: 1px solid rgba(255,255,255,0.1);
    
    opacity: 0; /* Start ukryty */
}

/* Wartości w HUDzie - Wytłoczone */
.hud-value {
    text-shadow: 0 2px 5px rgba(0,0,0,1);
    font-weight: 800;
}

.hud-item {
    position: relative;
    padding: 0 30px;
}

/* Separatory jako wcięcia */
.hud-item:not(:last-child)::after {
    background: #222;
    box-shadow: 1px 0 0 #444; /* Efekt wyrytej linii */
    height: 70%;
    top: 15%;
}

/* 4. Tagline - Stylizowany */
.hero-tag {
    font-weight: 600;
    text-shadow: 0 2px 4px #000;
    opacity: 0;
}


/* --- AUTH & FORMS UPDATE (Floating Labels) --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.auth-card {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 50px;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.auth-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}

.auth-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Floating Input Group */
.input-group {
    position: relative;
    margin-bottom: 30px;
}

.input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: #fff;
    padding: 10px 0;
    font-size: 1.1rem;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
}

.input-label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #666;
    pointer-events: auto !important; cursor: pointer !important;
    transition: 0.3s ease all;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Magia: Kiedy input jest aktywny lub wypełniony */
.input-field:focus,
.input-field:valid {
    border-bottom-color: #fff; /* Fallback */
    border-bottom-color: var(--accent, #d4af37); /* Theme color */
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.5);
}

.input-field:focus ~ .input-label,
.input-field:valid ~ .input-label {
    top: -20px;
    font-size: 0.7rem;
    color: var(--accent, #d4af37);
    font-weight: 700;
}

.auth-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #666;
}
.auth-footer a { color: #888; text-decoration: underline; }
.auth-footer a:hover { color: #fff; }


/* --- NEXUS PRIME DASHBOARD --- */

/* Główny Kontener - Siatka Dashboardu */
.nexus-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 1000px) {
    .nexus-grid { grid-template-columns: 1fr; }
}

/* Kafelki (Glassmorphism) */
.glass-panel {
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transition: transform 0.3s, border-color 0.3s;
}
.glass-panel:hover {
    border-color: var(--accent, #d4af37);
    transform: translateY(-2px);
}

/* --- LEWY PANEL: PROFIL & NAWIGACJA --- */
.profile-card {
    text-align: center;
    margin-bottom: 20px;
}
.profile-avatar-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent, #d4af37);
    padding: 3px;
    margin: 0 auto 15px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.profile-avatar-inner {
    width: 100%; height: 100%;
    background: #222;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #333, #111);
}

.nav-menu {
    list-style: none; padding: 0; margin: 0;
}
.nav-btn {
    display: flex; align-items: center; gap: 15px;
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 8px;
    color: #aaa;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
}
.nav-btn:hover, .nav-btn.active {
    background: rgba(212, 175, 55, 0.1);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent, #d4af37);
}

/* --- PRAWY PANEL: ANALITYKA --- */

/* Globalne Statystyki Konta (Górny pasek) */
.account-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}
.mini-stat-card {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.mini-label { font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.mini-value { font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: 5px; }
.val-gold { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }

/* LISTA POSTACI - MODUŁY */
.char-module {
    margin-bottom: 25px;
    border-left: 3px solid transparent;
}
.char-module:hover { border-left-color: var(--accent, #d4af37); }

.char-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}
.char-identity h3 { margin: 0; font-size: 1.3rem; color: #fff; }
.char-identity span { color: var(--accent, #d4af37); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}
.badge-on { background: rgba(0, 255, 0, 0.1); color: #4ade80; border: 1px solid #4ade80; }
.badge-off { background: rgba(255, 255, 255, 0.05); color: #888; border: 1px solid #444; }

/* Grid Statystyk Postaci */
.char-data-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
}
@media (max-width: 800px) { .char-data-grid { grid-template-columns: 1fr; } }

/* Sekcja Witalna (Bary) */
.vital-section {
    display: flex; flex-direction: column; gap: 10px;
}
.nexus-bar-group { position: relative; }
.nexus-bar-info { display: flex; justify-content: space-between; font-size: 0.7rem; color: #888; margin-bottom: 3px; }
.nexus-track { background: #111; height: 8px; border-radius: 4px; overflow: hidden; }
.nexus-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }

.fill-hp-nx { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.fill-mp-nx { background: linear-gradient(90deg, #1e3a8a, #3b82f6); }
.fill-cp-nx { background: linear-gradient(90deg, #b45309, #f59e0b); }
.fill-xp-nx { background: linear-gradient(90deg, #444, #aaa); height: 4px; }

/* Sekcja Detali (Karma, PvP, etc) */
.details-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.detail-box {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
.detail-label { font-size: 0.6rem; color: #555; text-transform: uppercase; }
.detail-val { font-size: 0.9rem; font-weight: bold; color: #ddd; }

/* Sekcja Akcji */
.actions-section {
    display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.action-btn-nx {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #ccc;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    text-transform: uppercase;
}
.action-btn-nx:hover { background: #fff; color: #000; border-color: #fff; }
.btn-danger { border-color: #7f1d1d; color: #f87171; }
.btn-danger:hover { background: #7f1d1d; color: #fff; }



/* --- OBSIDIAN SLATE DASHBOARD --- */

/* Główny grid */
.obsidian-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}
@media (max-width: 1024px) { .obsidian-layout { grid-template-columns: 1fr; } }

/* Karty (Moduły) */
.obs-card {
    background: #141416;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Panel Boczny */
.user-brief {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(180deg, #1a1a1e 0%, #141416 100%);
    border-bottom: 1px solid #2a2a2e;
}
.user-avatar {
    width: 70px; height: 70px;
    background: #252529;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
    border: 2px solid #333;
}
.brief-stat {
    display: flex; justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    font-size: 0.85rem;
    color: #888;
}
.brief-stat span:last-child { color: #fff; font-weight: 600; }

.side-menu a {
    display: block;
    padding: 14px 20px;
    color: #888;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: 0.2s;
    font-size: 0.9rem;
}
.side-menu a:hover, .side-menu a.active {
    background: #1a1a1e;
    color: #e0e0e0;
    border-left-color: var(--accent, #d4af37);
}

/* Sekcja Główna */
.global-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.g-stat-box {
    background: #1a1a1e;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #2a2a2e;
}
.g-label { font-size: 0.7rem; text-transform: uppercase; color: #666; letter-spacing: 1px; margin-bottom: 8px; }
.g-value { font-size: 1.4rem; font-weight: 700; color: #fff; }

/* Lista Postaci - Stonowana */
.char-row {
    background: #1a1a1e;
    border: 1px solid #2a2a2e;
    border-radius: 6px;
    margin-bottom: 15px;
    transition: 0.2s;
}
.char-row:hover { border-color: #444; }

/* Nagłówek Postaci */
.char-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px;
    background: #202025;
    border-bottom: 1px solid #2a2a2e;
}
.char-title h3 { margin: 0; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 10px; }
.char-meta { font-size: 0.8rem; color: #777; margin-top: 4px; }
.char-badge {
    padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
}
.badge-on { background: #1b3a24; color: #4ade80; }
.badge-off { background: #2a2a2e; color: #666; }

/* Siatka Szczegółów Postaci */
.char-details {
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    gap: 30px;
}
@media (max-width: 900px) { .char-details { grid-template-columns: 1fr; } }

.detail-group h4 { margin: 0 0 10px 0; font-size: 0.7rem; color: #555; text-transform: uppercase; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.85rem; }
.info-item { color: #888; }
.info-item b { color: #ccc; font-weight: normal; margin-left: 5px; }

/* Paski (Slim) */
.bar-slim-group { margin-bottom: 6px; display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: #666; }
.bar-track { flex: 1; height: 6px; background: #111; border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; }
.fill-hp { background: #b94a48; }
.fill-mp { background: #4a7bb9; }
.fill-cp { background: #dba63a; }

/* Przyciski Akcji */
.action-grid { display: flex; flex-direction: column; gap: 8px; }
.act-btn-small {
    background: #252529; border: 1px solid #333; color: #aaa;
    padding: 8px; font-size: 0.75rem; cursor: pointer; border-radius: 4px;
    text-align: center; transition: 0.2s;
}
.act-btn-small:hover { background: #333; color: #fff; }
.danger { color: #a55; }
.danger:hover { background: #311; color: #f77; border-color: #522; }



/* --- SINGULARITY DASHBOARD --- */

.singularity-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: 80vh;
    background: #0f0f11;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8);
}

@media (max-width: 900px) { .singularity-container { grid-template-columns: 1fr; } }

/* LEWY PANEL - LISTA WYBORU */
.char-selector {
    background: #141416;
    border-right: 1px solid #2a2a2e;
    padding: 20px 0;
}
.selector-header {
    padding: 0 20px 20px;
    color: #666;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #222;
}
.char-btn {
    display: flex; align-items: center; gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: 0.2s;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.char-btn:hover { background: #1a1a1e; }
.char-btn.active { background: #1f1f23; border-left-color: var(--accent, #d4af37); }

.c-avatar-small {
    width: 40px; height: 40px;
    background: #252529; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-weight: bold; font-size: 0.9rem;
    border: 1px solid #333;
}
.char-btn.active .c-avatar-small { border-color: var(--accent, #d4af37); color: #fff; background: var(--accent, #d4af37); color: #000; }

.c-info-small { display: flex; flex-direction: column; }
.c-name-s { color: #ccc; font-weight: 600; font-size: 0.9rem; }
.c-lvl-s { color: #666; font-size: 0.75rem; }

/* PRAWY PANEL - GŁÓWNY WIDOK */
.main-stage {
    background: radial-gradient(circle at center, #1a1a20 0%, #0f0f11 100%);
    padding: 40px;
    position: relative;
    overflow-y: auto;
}

/* DRZEWO DANYCH (Grid Layout) */
.tree-grid {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 1100px) { .tree-grid { grid-template-columns: 1fr; } }

/* Centralny Węzeł - Avatar */
.central-node {
    grid-column: 2;
    grid-row: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    z-index: 2;
}
.big-avatar {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 4px solid #222;
    box-shadow: 0 0 0 4px var(--accent, #d4af37), 0 0 50px rgba(0,0,0,0.8);
    background: #111;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #fff;
    margin-bottom: 20px;
    position: relative;
}
.class-badge {
    position: absolute; bottom: 0; background: #000; color: var(--accent, #d4af37);
    padding: 5px 15px; border-radius: 20px; border: 1px solid #444; font-size: 0.8rem; font-weight: bold;
}

/* Moduły Boczne */
.data-module {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: 0.3s;
}
.data-module:hover { border-color: #444; background: rgba(30,30,35,0.8); }

/* Linie łączące (dekoracja) */
.tree-grid { position: relative; }

.module-title {
    font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 5px;
}

/* Statystyki wewnątrz modułów */
.stat-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; color: #888; }
.stat-row b { color: #ccc; }

/* Paski */
.bar-container { margin-bottom: 10px; }
.bar-top { display: flex; justify-content: space-between; font-size: 0.7rem; color: #aaa; margin-bottom: 2px; }
.track { height: 6px; background: #000; border-radius: 3px; }
.fill { height: 100%; border-radius: 3px; }
.f-hp { background: #d32f2f; }
.f-mp { background: #1976d2; }
.f-cp { background: #fbc02d; }
.f-xp { background: linear-gradient(90deg, #444, #fff); }

/* Dolny panel (Stopka) */
.footer-node {
    grid-column: 1 / -1;
    display: flex; justify-content: center; gap: 20px;
    margin-top: 20px;
}

/* Kafelki 10 Ciekawostek */
.feature-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.feature-box {
    background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; text-align: center;
}
.feat-label { font-size: 0.65rem; color: #666; }
.feat-val { font-size: 0.9rem; color: #eee; font-weight: bold; }

/* Akcje */
.action-btn-tree {
    background: transparent; border: 1px solid #444; color: #aaa;
    padding: 10px 30px; border-radius: 30px; text-transform: uppercase; font-size: 0.8rem;
    cursor: pointer; transition: 0.2s;
}
.action-btn-tree:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

/* Pusty Stan */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
    color: #444; text-align: center;
}


/* --- HARMONY DASHBOARD --- */

.harmony-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    font-family: "Inter", system-ui, sans-serif;
}

/* GŁÓWNA KONSOLA - JEDNA BRYŁA */
.harmony-console {
    background: #0e0e10;
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

/* GÓRNY PASEK - ZAKŁADKI POSTACI (TABS) */
.char-tabs {
    display: flex;
    background: #141417;
    border-bottom: 1px solid #222;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.char-tabs::-webkit-scrollbar { display: none; }

.char-tab {
    padding: 15px 25px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    border-right: 1px solid #222;
    border-bottom: 2px solid transparent;
    color: #666;
    text-decoration: none;
    transition: 0.3s;
    min-width: 180px;
}
.char-tab:hover { background: #1a1a1e; color: #aaa; }
.char-tab.active {
    background: #1a1a1e;
    color: #fff;
    border-bottom-color: var(--accent, #d4af37);
}
.tab-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #222;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.8rem; border: 1px solid #444;
}
.char-tab.active .tab-avatar { border-color: var(--accent, #d4af37); color: var(--accent, #d4af37); }

/* WNĘTRZE KONSOLI - GRID */
.console-body {
    display: grid;
    grid-template-columns: 300px 1fr 300px; /* 3 KOLUMNY: INFO | STATY | WYROCZNIA */
    flex: 1;
}
@media (max-width: 1100px) { .console-body { grid-template-columns: 1fr; } }

/* KOLUMNA 1: TOŻSAMOŚĆ */
.col-identity {
    padding: 40px;
    background: linear-gradient(135deg, #141417 0%, #0e0e10 100%);
    border-right: 1px solid #222;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.big-hex-avatar {
    width: 120px; height: 120px;
    background: #111;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #fff;
    border: 2px solid #333; /* Fallback */
    margin-bottom: 20px;
    position: relative;
}
.big-hex-avatar::after {
    content: ""; position: absolute; top:0; left:0; right:0; bottom:0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    border: 2px solid var(--accent, #d4af37);
    pointer-events: auto !important; cursor: pointer !important;
}

.c-name-main { font-size: 1.8rem; font-weight: 300; letter-spacing: 2px; color: #fff; margin: 0; }
.c-meta-main { color: #666; font-size: 0.8rem; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }

.status-indicator {
    margin-top: 20px;
    padding: 5px 15px; background: rgba(0,255,0,0.05); color: #4ade80;
    border: 1px solid #1b3a24; border-radius: 20px; font-size: 0.7rem; font-weight: bold;
}
.status-offline { background: rgba(255,255,255,0.05); color: #666; border-color: #333; }

/* KOLUMNA 2: CENTRUM DANYCH */
.col-stats {
    padding: 40px;
    display: flex; flex-direction: column; gap: 30px;
}

.stat-group h4 { margin: 0 0 15px 0; font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 2px; }

/* Eleganckie Paski */
.harmony-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.hb-label { width: 30px; font-weight: bold; font-size: 0.75rem; color: #888; }
.hb-track { flex: 1; height: 4px; background: #222; border-radius: 2px; overflow: hidden; }
.hb-fill { height: 100%; border-radius: 2px; position: relative; }
.hb-fill::after { content:""; position:relative; top:0; right:0; bottom:0; width:5px; background:rgba(255,255,255,0.5); box-shadow: 0 0 10px #fff; }

.fill-hp { background: #d64040; box-shadow: 0 0 15px rgba(214, 64, 64, 0.3); }
.fill-mp { background: #407ad6; box-shadow: 0 0 15px rgba(64, 122, 214, 0.3); }
.fill-cp { background: #d6a540; box-shadow: 0 0 15px rgba(214, 165, 64, 0.3); }

/* Siatka Liczb */
.numbers-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.num-box { background: #141417; padding: 15px; border-radius: 6px; border: 1px solid #222; text-align: center; }
.num-label { font-size: 0.65rem; color: #666; text-transform: uppercase; }
.num-val { font-size: 1.1rem; color: #e0e0e0; font-weight: 600; margin-top: 5px; }

/* KOLUMNA 3: THE ORACLE (SMACZEK) */
.col-oracle {
    padding: 0;
    background: #111;
    border-left: 1px solid #222;
    position: relative;
    overflow: hidden;
}

/* Tło Oracla */
.oracle-bg {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background:  url("https://www.transparenttextures.com/patterns/cubes.png"), linear-gradient(180deg, #1a1a20 0%, #000 100%);
    opacity: 0.5; z-index: 0;
}

.oracle-content {
    position: relative; z-index: 1; padding: 40px; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
}

.oracle-title { font-size: 0.8rem; color: var(--accent, #d4af37); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.oracle-title::before { content: "👁"; font-size: 1.2rem; }

.suggestion-box { margin-top: 20px; }
.sugg-label { color: #666; font-size: 0.7rem; margin-bottom: 5px; }
.sugg-zone { font-size: 1.4rem; color: #fff; font-weight: 300; margin-bottom: 5px; border-left: 3px solid var(--accent, #d4af37); padding-left: 15px; }
.sugg-mob { color: #888; font-size: 0.8rem; font-style: italic; padding-left: 15px; }

.oracle-actions { margin-top: auto; display: grid; gap: 10px; }
.o-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #aaa;
    padding: 12px; text-transform: uppercase; font-size: 0.75rem; cursor: pointer;
    transition: 0.2s; text-align: center;
}
.o-btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

/* PUSTY STAN */
.empty-console { padding: 100px; text-align: center; color: #444; width: 100%; }



/* FIX: HERO BUTTON CLICKABILITY */

.hero-buttons a {
    position: relative;
    z-index: 6;
}

/* GLOBAL ECOSYSTEM BUTTON HOVER */
.btn.gold {
    transition: all .25s ease;
}

.btn.gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(197,160,89,0.35);
    filter: brightness(1.05);
}

/* NOSTALGIE™ STRONG BUTTON HOVER */
.btn.gold {
    transition: all .25s ease;
}

.btn.gold:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 35px rgba(197,160,89,0.55);
    filter: brightness(1.12);
}

/* NOSTALGIE™ GLOBAL BUTTON EFFECT */
    transition: all .25s ease;
}

    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 35px rgba(197,160,89,0.55);
    filter: brightness(1.12);
}

/* NOSTALGIE ECOSYSTEM MAIN BUTTON */
.btn.gold.eco-main{
    padding:15px 50px;
    font-size:1rem;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    border-radius:8px;
    transition:all .25s ease;
}
.btn.gold.eco-main:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 15px 40px rgba(197,160,89,0.45);
}

/* NOSTALGIE ECOSYSTEM BUTTON */
.btn.gold{
    padding:15px 50px;
    font-size:1rem;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.55);
    transition:all .25s ease;
}
.btn.gold:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 18px 45px rgba(197,160,89,0.55);
}

.hero-main-btn{
    padding:14px 40px;
    font-size:1rem;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    transition: all .25s ease;
}
.hero-main-btn:hover{
    transform: translateY(-2px);
    box-shadow:0 0 25px rgba(212,175,55,0.6);
}

/* NOSTALGIE BUTTON GLOW */
.btn.gold{
    box-shadow:0 0 25px rgba(212,175,55,0.45), 0 10px 35px rgba(0,0,0,0.6);
    transition:all .25s ease;
}
.btn.gold:hover{
    box-shadow:0 0 45px rgba(212,175,55,0.75), 0 15px 45px rgba(0,0,0,0.8);
    transform:translateY(-1px);
}

/* --- NOSTALGIE SUPPORTER SEAL --- */
.supporter-seal{
    margin-top:20px;
    padding:18px;
    text-align:center;
    border:1px solid rgba(197,160,89,0.5);
    background:linear-gradient(180deg,rgba(197,160,89,0.15),rgba(0,0,0,0.6));
    color:#e8d7a5;
    font-weight:600;
    letter-spacing:1px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
}

.supporter-seal::after{
    content:'';
    position:relative;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);
    animation:none !important;
}

@keyframes sealShine{
    0%{ left:-100%; }
    60%{ left:120%; }
    100%{ left:120%; }
}

/* VIP SEAL ANIMATION — NOSTALGIE */
.vip-seal{
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:18px 40px;
    border-radius:10px;
    background:linear-gradient(135deg,#8a6a1e,#d4af37,#8a6a1e);
    color:#111;
    font-weight:bold;
    letter-spacing:2px;
    text-align:center;
    box-shadow:0 0 25px rgba(212,175,55,0.6);
}
.vip-seal::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.65),transparent);
    animation:none !important;
}
@keyframes vipSweep{
    0%{left:-120%;}
    100%{left:120%;}
}

/* Nostalgie™ centered lists */
.n-card ul,
.n-container ul {
    text-align: left;
    display: table;
    margin: 0 auto;
    padding-left: 0;
}

.n-card ul li::marker {
    color: #c5a059;
    text-shadow: 0 0 6px rgba(197,160,89,0.6);
}


/* ===== NOSTALGIE PRO PLAYER PANEL ===== */
.player-pro-card{
    background: linear-gradient(180deg, rgba(18,18,20,0.95), rgba(8,8,10,0.95));
    border: 1px solid rgba(197,160,89,0.25);
    border-radius: 14px;
    padding: 28px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(197,160,89,0.06);
    transition: all .25s ease;
}

.player-pro-card:hover{
    border-color: rgba(197,160,89,0.5);
    box-shadow:
        0 15px 50px rgba(0,0,0,0.9),
        inset 0 0 60px rgba(197,160,89,0.08);
}

.player-pro-title{
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: #d7c38a;
}

.player-pro-value{
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
}

/* ===== NOSTALGIE™ SUPPORTER PRO SEAL ===== */
.supporter-seal-pro{
    max-width:1150px;
    margin:20px auto 0 auto;
    padding:22px 40px;
    text-align:center;
    font-weight:700;
    letter-spacing:3px;
    border-radius:14px;
    color:#1a1405;
    background:
        linear-gradient(145deg,#5f4814,#d4af37,#5f4814);
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.25),
        inset 0 -4px 12px rgba(0,0,0,0.6),
        0 0 35px rgba(212,175,55,0.35);
    position:relative;
    overflow:hidden;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.4),
        0 -1px 1px rgba(0,0,0,0.8);
}

/* moving royal reflection */
.supporter-seal-pro::after{
    content:'';
    position:relative;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:skewX(-25deg);
    animation:none !important;
}

@keyframes sealShine{
    0%{ left:-120%; }
    100%{ left:140%; }
}

/* === NOSTALGIE™ SUPPORTER PRO SEAL (ULTRA) === */
.supporter-seal-pro{
    position: relative;
    margin:20px auto 10px auto;
    padding:22px 40px;
    border-radius:14px;
    text-align:center;
    font-weight:800;
    letter-spacing:3px;
    color:#1a1200;

    background:
        linear-gradient(145deg,#7a5a16,#d4af37,#7a5a16);

    border:1px solid rgba(255,215,0,.35);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.35),
        inset 0 -6px 12px rgba(0,0,0,.5),
        0 0 45px rgba(212,175,55,.35);

    text-shadow:
        0 1px 0 rgba(255,255,255,.35),
        0 -1px 0 rgba(0,0,0,.7),
        0 0 12px rgba(255,215,0,.35);
}

/* moving reflection */
.supporter-seal-pro::after{
    content:"";
    position:relative;
    top:0;
    left:-60%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%);
    transform:skewX(-25deg);
    animation:none !important;
    pointer-events:none;
}

@keyframes supporterShine{
    0%{ left:-60%; }
    100%{ left:140%; }
}


/* === NOSTALGIE PRO ENGRAVED TITLE === */
}

/* płynny nieskończony połysk */
    100%{ background-position:300% 50%; }
}


/* ===== FULL WIDTH SUPPORTER SHINE ===== */
.supporter-seal-pro{
    position:relative;
    overflow:hidden;
}

/* pasek połysku lecący przez CAŁĄ szerokość */
.supporter-seal-pro::after{
    content:'';
    position:relative;
    top:0;
    left:-60%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:none !important;
}

@keyframes nostalgieFullShine{
    0%{ left:-60%; }
    100%{ left:140%; }
}


/* ===== COMMAND CORE BASE ===== */
.command-core-title{
    color:#ffffff;
}

/* płynny metal flow */

/* moving sunlight shine (nie urywa się) */




/* ===== PRO ENGRAVED GOLD — LUXURY SOFT EDIT ===== */
.pro-engrave{
    position:relative;
    display:inline-block;
    font-weight:700;
    letter-spacing:2px;

    background:linear-gradient(180deg,#fff2b0,#d4af37,#8c6b1f);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 1px 0 rgba(255,255,255,.35),
        0 2px 3px rgba(0,0,0,.55),
        0 0 10px rgba(212,175,55,.18);
}

/* rzadki subtelny refleks — raz na ~12s */
.pro-engrave::after{
    content:"";
    position:relative;
    top:0;
    left:-160%;
    width:160%;
    height:100%;
    background:linear-gradient(110deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 45%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.18) 55%,
        rgba(255,255,255,0) 100%);
    animation:none !important;
}

@keyframes proSoftSweep{
    0%   { left:-160%; opacity:0; }
    15%  { opacity:1; }
    85%  { opacity:1; }
    100% { left:160%; opacity:0; }
}
    100%{ left:200%; }
}


/* ===== PRO GOLD SUN FLASH ===== */
.pro-engrave::before{
    content:"";
    position:relative;
    inset:-2px;
    background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.45), transparent 55%);
    opacity:0;
    pointer-events:none;
    animation:proGoldFlash 14s ease-in-out infinite;
}

@keyframes proGoldFlash{
    0%,85%,100% { opacity:0; }
    88% { opacity:.55; }
    92% { opacity:.25; }
}

/* ===== COMMAND CORE COLOR FIX ===== */
.command-core-title{
    color:#ffffff !important;
}

.command-core-title b,
.command-core-title span{
    color:#ffffff !important;
}

/* tylko PRO złote */
.command-core-title .pro-engrave{
    color:#f2d27a !important;
    -webkit-text-fill-color:#f2d27a !important;
}


/* === PRO occasional sun sparkle === */
.pro-engrave{
    position:relative;
}

/* pojedynczy błysk złota */
.pro-engrave::before{
    content:"";
    position:relative;
    top:-20%;
    left:-40%;
    width:30%;
    height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    opacity:0;
    transform:skewX(-25deg);
    animation:proSunFlash 9s ease-in-out infinite;
    pointer-events:none;
}

@keyframes proSunFlash{
    0%   { left:-40%; opacity:0; }
    5%   { opacity:0.9; }
    12%  { left:120%; opacity:0; }
    100% { left:120%; opacity:0; }
}


/* === PRO occasional sun sparkle === */
.pro-engrave{
    position:relative;
}

/* pojedynczy błysk złota */
.pro-engrave::before{
    content:"";
    position:relative;
    top:-20%;
    left:-40%;
    width:30%;
    height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    opacity:0;
    transform:skewX(-25deg);
    animation:proSunFlash 9s ease-in-out infinite;
    pointer-events:none;
}

@keyframes proSunFlash{
    0%   { left:-40%; opacity:0; }
    5%   { opacity:0.9; }
    12%  { left:120%; opacity:0; }
    100% { left:120%; opacity:0; }
}


/* ===== FINAL COMMAND CORE COLOR CONTROL ===== */

/* zwykły tytuł — biały */
.command-core-title b{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* tylko PRO ma złoto */
.pro-engrave{
    color:#e6c36a !important;
    background:linear-gradient(90deg,#6e5315,#d4af37,#fff1a6,#d4af37,#6e5315);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent !important;
    animation:proSunFlash 10s ease-in-out infinite;
}

/* jednorazowy miękki sweep po wejściu */
.pro-engrave::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
    animation:none !important;
    pointer-events:none;
}

@keyframes proSweepOnce{
    0%{ left:-120%; opacity:.9;}
    100%{ left:120%; opacity:0;}
}

/* sporadyczny błysk złota */
@keyframes proSunFlash{
    0%,94%,100%{ background-position:0% 50%; filter:brightness(1);}
    96%{ background-position:120% 50%; filter:brightness(1.25);}
}

/* ===== FINAL PRO MICRO SPARK + SUN REFLECTION ===== */

/* usuń stare efekty */
.pro-engrave::after{
    animation:none !important;
    background:none !important;
}

/* szybki refleks słońca przy załadowaniu */
.pro-engrave::before{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
    animation:none !important;
    pointer-events:none;
}

@keyframes proSunSweepOnce{
    0%{ left:-120%; opacity:.9;}
    100%{ left:120%; opacity:0;}
}

/* subtelne mikro-gwiazdki złota */
.pro-engrave{
    position:relative;
    overflow:visible;
}

.pro-engrave span.spark{
    position:relative;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#fff4c2;
    box-shadow:0 0 6px rgba(255,215,0,.8);
    opacity:0;
    animation:proSparkle 6s linear infinite;
}

@keyframes proSparkle{
    0%,96%,100%{ opacity:0; transform:scale(.5);}
    97%{ opacity:1; transform:scale(1.3);}
    98%{ opacity:.7; transform:scale(1);}
}


/* ===== COMMAND CORE BASE WHITE ===== */
.command-core-title b{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* ===== ONLY PRO GOLD ===== */
.command-core-title .pro-engrave{
    color:#e6c46a !important;
    background:linear-gradient(90deg,#8a6a1f,#ffd76a,#fff3b0,#ffd76a,#8a6a1f);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* CORE TEXT WHITE */
.core-main{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* ONLY PRO GOLD */
.core-main .pro-engrave{
    color:#e6c46a;
    background:linear-gradient(90deg,#8a6a1f,#ffd76a,#fff3b0,#ffd76a,#8a6a1f);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* ============================
   NOSTALGIE™ PRO UI ENGINE
   ============================ */

.pro-ui{
    --pro-gold:#e6c46a;
    --pro-glow:rgba(230,196,106,.25);
}

/* delikatne podniesienie kontrastu całego panelu */
.pro-ui .harmony-console{
    box-shadow:0 0 40px rgba(0,0,0,.6),
               inset 0 0 60px rgba(230,196,106,.04);
}

/* nagłówki sekcji */
.pro-ui .section-title{
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--pro-gold);
}

/* kontenery systemowe */
.pro-ui .system-panel{
    border:1px solid rgba(230,196,106,.15);
    background:linear-gradient(180deg,rgba(20,20,20,.9),rgba(10,10,10,.95));
    box-shadow:0 0 20px rgba(0,0,0,.5);
}


/* ================================
   NOSTALGIE™ PRO PLAYER PANEL SKIN
   aktywuje się tylko gdy body ma klasę pro-user
================================ */

/* character tabs */
body.pro-user .char-tab{
    background:linear-gradient(180deg,#0f1116,#07080b);
    border:1px solid rgba(255,215,0,.15);
    box-shadow:0 0 20px rgba(0,0,0,.5) inset;
    transition:.25s;
}

body.pro-user .char-tab.active{
    border:1px solid rgba(255,215,0,.5);
    box-shadow:
        0 0 12px rgba(255,215,0,.35),
        inset 0 0 25px rgba(255,215,0,.15);
}

/* identity panel */
body.pro-user .col-identity{
    background:linear-gradient(180deg,#08090c,#050608);
    border:1px solid rgba(255,215,0,.18);
    box-shadow:
        inset 0 0 60px rgba(255,215,0,.04),
        0 0 25px rgba(0,0,0,.7);
}

/* stats */
body.pro-user .col-stats{
    background:linear-gradient(180deg,#090a0e,#050608);
    border:1px solid rgba(255,215,0,.12);
}

/* oracle */
body.pro-user .col-oracle{
    background:linear-gradient(180deg,#06070a,#030406);
    border-left:1px solid rgba(255,215,0,.25);
}

/* subtle gold separators */
body.pro-user .stat-group h4{
    color:#e6c36f;
    letter-spacing:2px;
}


/* ===== PRO BADGE ===== */
.pro-badge{
    margin-left:10px;
    padding:2px 10px;
    border-radius:6px;
    font-size:.7em;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(135deg,#b9922e,#ffd76a,#b9922e);
    color:#000;
    box-shadow:0 0 18px rgba(255,215,0,.35);
    position:relative;
    overflow:hidden;
}

/* one-time sun flash */
}


/* one-time sun flash (clean vanish) */
    100%{
        left:140%;
        opacity:0;
    }
}


.pro-badge{
    position:relative;
    overflow:hidden;
}

/* sun flash — appears once and disappears completely */
.pro-badge::after{
    content:"";
    position:relative;
    top:0;
    left:-150%;
    width:140%;
    height:100%;
    opacity:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
    animation:proFlash 1.2s ease-out;
    pointer-events:none;
}

@keyframes proFlash{
    0%{
        left:-150%;
        opacity:0;
    }
    15%{
        opacity:1;
    }
    85%{
        opacity:1;
    }
    100%{
        left:150%;
        opacity:0;
    }
}


/* =========================
   NOSTALGIE PRO MODE PANEL
   ========================= */

.pro-mode{
    position:relative;
}

.pro-mode::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:14px;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 0%, rgba(212,175,55,.18), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(212,175,55,.12), transparent 45%);
    filter:blur(14px);
    z-index:0;
}

.pro-mode .harmony-console{
    border:1px solid rgba(212,175,55,.25);
    box-shadow:
        0 0 40px rgba(212,175,55,.08),
        inset 0 0 30px rgba(212,175,55,.05);
}


/* =========================
   PRO CHAR TABS ENERGY LINE
   ========================= */

.pro-mode .char-tab.active{
    position:relative;
    overflow:hidden;
}

.pro-mode .char-tab.active::after{
    content:"";
    position:relative;
    left:-40%;
    bottom:0;
    width:40%;
    height:2px;
    background:linear-gradient(90deg, transparent, #ffd700, transparent);
    animation:proTabFlow 3s linear infinite;
}

@keyframes proTabFlow{
    0%{ left:-40%; }
    100%{ left:120%; }
}


/* =========================
   PRO MODE — VITALS PREMIUM
   ========================= */

.pro-mode .hb-fill{
    position:relative;
    box-shadow:
        0 0 10px rgba(255,215,0,.25),
        inset 0 0 6px rgba(255,255,255,.12);
}

.pro-mode .hb-fill::after{
    content:"";
    position:relative;
    top:0;
    left:-50%;
    width:40%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation:proVitalsFlow 4s linear infinite;
}

@keyframes proVitalsFlow{
    0%{ left:-50%; }
    100%{ left:120%; }
}


/* =========================
   PRO MODE — HERO PROFILE
   ========================= */

.pro-mode .col-identity{
    position:relative;
    transition: all .35s ease;
}

.pro-mode .col-identity::before{
    content:"";
    position:relative;
    inset:-1px;
    border-radius:14px;
    background: radial-gradient(circle at 50% 30%, rgba(255,215,0,.12), transparent 70%);
    opacity:.7;
    pointer-events:none;
    transition: opacity .3s ease;
}

.pro-mode .col-identity:hover::before{
    opacity:1;
}

.pro-mode .col-identity:hover{
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.55),
        0 0 18px rgba(255,215,0,.25);
}


/* =========================
   PRO MODE — CHARACTER TABS
   ========================= */

.pro-mode .char-tabs{
    display:flex;
    gap:8px;
    padding:6px;
    background:linear-gradient(180deg,#0c0c0f,#070708);
    border-radius:12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.pro-mode .char-tab{
    border-radius:10px;
    transition:all .25s ease;
    border:1px solid rgba(255,215,0,.08);
}

.pro-mode .char-tab.active{
    background:linear-gradient(180deg,#1b1608,#0e0b02);
    border:1px solid rgba(255,215,0,.35);
    box-shadow:
        0 0 10px rgba(255,215,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.pro-mode .char-tab:hover{
    transform:translateY(-2px);
    border-color:rgba(255,215,0,.45);
    box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 10px rgba(255,215,0,.25);
}


/* ======================
   PRO MODE — ORACLE CORE
   ====================== */

.pro-mode .col-oracle{
    background:
        radial-gradient(circle at top, rgba(255,215,0,.06), transparent 60%),
        #08080a;
    border-left:1px solid rgba(255,215,0,.25);
    box-shadow:
        inset 0 0 25px rgba(255,215,0,.06),
        0 0 20px rgba(0,0,0,.6);
}

/* search scan */
.pro-mode #oracleInput{
    border:1px solid rgba(255,215,0,.25);
    box-shadow:0 0 10px rgba(255,215,0,.12);
}

.pro-mode #oracleInput:focus{
    box-shadow:
        0 0 14px rgba(255,215,0,.35),
        inset 0 0 8px rgba(255,215,0,.12);
}

/* results */
.pro-mode #oracleResults div{
    transition:all .18s ease;
}

.pro-mode #oracleResults div:hover{
    background:rgba(255,215,0,.04);
    box-shadow:inset 0 0 0 1px rgba(255,215,0,.12);
}

/* rarity glow */
.pro-mode .oracle-rare{
    color:#ffd700;
    text-shadow:0 0 8px rgba(255,215,0,.45);
}


/* ===== NOSTALGIE ECOSYSTEM GRID ===== */
.ecosystem-grid{
    display:grid;
    grid-template-columns: 340px 1fr 360px;
    gap:30px;
    align-items:stretch;
}

@media (max-width: 1200px){
    .ecosystem-grid{
        grid-template-columns:1fr;
    }
}

/* ===== ECOSYSTEM TITLES ===== */
.eco-people::before,
.eco-core::before,
.eco-system::before{
    display:block;
    font-size:0.7rem;
    letter-spacing:2px;
    color:#777;
    margin-bottom:10px;
    text-transform:uppercase;
}

.eco-people::before{ content:"Nostalgie™ People"; }
.eco-core::before{ content:"Nostalgie™ Core"; }
.eco-system::before{ content:"Nostalgie™ System"; }

.eco-system{
    border-left:1px solid rgba(212,175,55,.25);
}

/* FIX: remove duplicated header overlay */
.site-header::after,
header::after{
    display:none !important;
    content:none !important;
}

/* ===== HEADER USERNAME ===== */
.user-name{
    border:1px solid #333;
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(4px);
}

/* Supporter PRO username */
.user-name.pro{
    color:#f0d37a;
    border-color:#8b6b1f;
    text-shadow:0 0 10px rgba(212,175,55,.35);
}

/* ===== ADMIN BUTTON ===== */
.admin-btn{
    border:1px solid rgba(212,175,55,.5);
    color:#ffd86b !important;
    background:rgba(212,175,55,.08);
    box-shadow:0 0 12px rgba(212,175,55,.25);
    transition:.25s;
}

.admin-btn:hover{
    background:rgba(212,175,55,.18);
    box-shadow:0 0 20px rgba(212,175,55,.45);
}

/* ===== ADMIN BREATHING RED ===== */
.admin-btn{
    border:1px solid rgba(255,80,80,.6);
    color:#ff6b6b !important;
    background:rgba(255,50,50,.06);
    animation:adminBreath 3.5s ease-in-out infinite;
}

@keyframes adminBreath{
    0%{ box-shadow:0 0 6px rgba(255,60,60,.25); }
    50%{ box-shadow:0 0 18px rgba(255,60,60,.55); }
    100%{ box-shadow:0 0 6px rgba(255,60,60,.25); }
}


/* ===== SUPPORTER NAME PRESTIGE ===== */
.user-name.pro{
    background:linear-gradient(90deg,#7a5a16,#d4af37,#fff2a8,#d4af37,#7a5a16);
    background-size:300% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:
        0 1px 0 rgba(255,255,255,.25),
        0 0 12px rgba(212,175,55,.35);
    animation:proNameShimmer 10s linear infinite;
}

@keyframes proNameShimmer{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}


/* ===== USER PRESTIGE SYSTEM ===== */

.user-pro{
    border:1px solid rgba(212,175,55,.6);
    color:#f3d98a !important;
    box-shadow:0 0 12px rgba(212,175,55,.25), inset 0 0 8px rgba(212,175,55,.15);
    background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(0,0,0,.4));
    font-weight:600;
}

.user-pro::after{
    content:" PRO";
    margin-left:6px;
    font-size:0.65rem;
    letter-spacing:1px;
    color:#000;
    background:linear-gradient(180deg,#fff1a6,#d4af37);
    padding:2px 6px;
    border-radius:6px;
    box-shadow:0 0 10px rgba(212,175,55,.4);
}

/* ADMIN breathing */
.user-admin{
    border:1px solid rgba(255,80,80,.6);
    color:#ff9a9a !important;
    animation:adminBreath 2.8s ease-in-out infinite;
}

@keyframes adminBreath{
    0%{ box-shadow:0 0 6px rgba(255,60,60,.3); }
    50%{ box-shadow:0 0 18px rgba(255,60,60,.8); }
    100%{ box-shadow:0 0 6px rgba(255,60,60,.3); }
}


/* === USERNAME PRESTIGE === */
.user-pro .user-name{
    background:linear-gradient(90deg,#7a5a16,#d4af37,#fff1a6,#d4af37,#7a5a16);
    background-size:300% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 10px rgba(212,175,55,.45);
    animation:userGoldFlow 8s linear infinite;
    font-weight:700;
}

@keyframes userGoldFlow{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}


/* ===== USER PRO HEADER ===== */
.user-pro{
    color:#f2d27a !important;
    text-shadow:
        0 0 8px rgba(212,175,55,.7),
        0 0 18px rgba(212,175,55,.5);
    font-weight:700;
    letter-spacing:1px;
}

/* === RESTORE CHARACTER CARD GOLD AMBIENT === */
.char-tab.active,
.col-identity,
.console-body > div{
    box-shadow:
        0 0 0 1px rgba(212,175,55,.15),
        0 0 18px rgba(212,175,55,.12),
        inset 0 0 30px rgba(255,215,120,.05);
    background:
        radial-gradient(circle at 20% 0%, rgba(255,215,120,.06), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(255,215,120,.04), transparent 70%);
}

/* delikatne "luxury ambient" tylko dla PRO */
.user-pro ~ main .console-body{
    position:relative;
}

.user-pro ~ main .console-body::before{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,215,120,.05), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(255,215,120,.04), transparent 45%);
}

/* === NOSTALGIE™ PRO INTERFACE LAYER === */

.user-pro ~ main{
    position:relative;
    overflow:hidden;
}

/* global premium ambient */
.user-pro ~ main::before{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,215,120,.06), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(255,215,120,.05), transparent 45%),
        radial-gradient(circle at 50% 0%, rgba(255,215,120,.04), transparent 60%);
    animation:proAmbientMove 18s linear infinite;
    opacity:.7;
}

/* bardzo wolny ruch premium glow */
@keyframes proAmbientMove{
    0%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(-1%,1%,0); }
    100%{ transform:translate3d(0,0,0); }
}

/* subtelna głębia paneli */
.user-pro .console-body > div{
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,215,120,.08);
    box-shadow:
        0 0 20px rgba(212,175,55,.08),
        inset 0 0 25px rgba(255,215,120,.04);
}


/* ===== PRO DASHBOARD REFINED DEPTH ===== */
.user-pro .harmony-wrapper{
    position:relative;
    background:linear-gradient(180deg, rgba(212,175,55,.06), rgba(0,0,0,0));
    border:1px solid rgba(212,175,55,.18);
    box-shadow:
        inset 0 0 40px rgba(212,175,55,.06),
        0 0 25px rgba(212,175,55,.08);
}

/* subtle luxury edge */
.user-pro .harmony-wrapper::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:12px;
    pointer-events:none;
    box-shadow:
        inset 0 1px 0 rgba(255,230,150,.25),
        inset 0 -1px 0 rgba(212,175,55,.15);
}


/* ===== LOCKED PRO DEPTH (clean luxury) ===== */
.user-pro .harmony-wrapper{
    position:relative;
    background:linear-gradient(180deg, rgba(212,175,55,.03), rgba(0,0,0,0));
    border:1px solid rgba(212,175,55,.18);
    box-shadow:
        inset 0 0 18px rgba(212,175,55,.05),
        0 0 18px rgba(212,175,55,.06);
    overflow:hidden;
}

/* remove old wide glow if present */
.user-pro .harmony-wrapper::after{
    display:none;
}


/* ===== PRO LIGHT HIERARCHY ===== */

/* CORE — centralny złoty ambient */
.user-pro .core-panel{
    box-shadow:
        inset 0 0 40px rgba(212,175,55,.06),
        0 0 24px rgba(212,175,55,.10);
}

/* PEOPLE — chłodniejszy steel tint */
.user-pro .people-panel{
    box-shadow:
        inset 0 0 35px rgba(160,170,190,.05),
        0 0 18px rgba(212,175,55,.05);
}

/* ORACLE — arcane glow */
.user-pro .oracle-panel{
    box-shadow:
        inset 0 0 35px rgba(120,160,255,.06),
        0 0 18px rgba(120,160,255,.10);
}


/* ===== DASHBOARD WRAPPER FIX ===== */
.harmony-wrapper{
    background: radial-gradient(1200px 600px at 50% -200px,
                rgba(255,215,0,0.06),
                rgba(0,0,0,0.85));
}

.harmony-console{
    background: rgba(10,10,14,0.82);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 20px 60px rgba(0,0,0,0.65);
}

.char-tab{
    background: linear-gradient(180deg,
        rgba(255,255,255,0.05),
        rgba(0,0,0,0.55));
    border:1px solid rgba(255,255,255,0.08);
}

.char-tab.active{
    background: linear-gradient(180deg,
        rgba(255,215,0,0.22),
        rgba(120,90,10,0.55));
    border:1px solid rgba(255,215,0,0.55);
    box-shadow:
        0 0 14px rgba(255,215,0,0.35),
        inset 0 0 8px rgba(255,215,0,0.18);
}


/* ===== CLEAR PANEL (REMOVE FOG) ===== */

.harmony-wrapper{
    background:
        radial-gradient(1000px 500px at 50% -200px,
        rgba(255,215,0,0.04),
        rgba(5,5,7,0.96));
}

.harmony-console{
    background: rgba(10,10,14,0.96);   /* było ~0.82 */
    backdrop-filter: blur(3px);        /* było 10px */
}

.col-identity,
.col-stats,
.col-oracle{
    background: rgba(12,12,16,0.96);
    backdrop-filter: blur(2px);
}

.char-tab{
    background: rgba(18,18,22,0.92);
}


/* ===== SHARP PREMIUM TEXT (REMOVE MILK EFFECT) ===== */

.harmony-wrapper *{
    text-shadow: none;
}

.command-core-title,
.char-name,
.section-title{
    text-shadow:
        0 0 6px rgba(255,215,0,0.25),
        0 0 1px rgba(255,255,255,0.15);
}

/* ACTIVE TAB */
.char-tab.active{
    box-shadow:
        inset 0 0 0 1px rgba(255,215,0,0.35),
        0 0 18px rgba(255,215,0,0.15);
}

/* PANEL EDGE */
.harmony-console{
    box-shadow:
        0 0 0 1px rgba(255,215,0,0.15),
        0 30px 80px rgba(0,0,0,0.65);
}


/* ===== REMOVE MILKY PRO WRAPPER ===== */
.harmony-wrapper.user-pro{
    backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.0)) !important;
}

/* ===== SHARP METAL PANEL ===== */
.harmony-console{
    border:1px solid rgba(255,215,0,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 30px rgba(255,215,0,0.12),
        0 25px 70px rgba(0,0,0,0.7);
}

/* ===== METALLIC TEXT ===== */
.command-core-title b,
.char-name{
    color:#f5d97a;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.25),
        0 0 8px rgba(255,215,0,0.25);
}

/* ===== ACTIVE TAB GOLD ===== */
.char-tab.active{
    background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,215,0,0.05));
    border:1px solid rgba(255,215,0,0.45);
    box-shadow:0 0 18px rgba(255,215,0,0.25);
}


/* ===== ULTRA SUBTLE METAL REFLECTION ===== */
.harmony-console::after{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 55%,
        transparent 100%
    );
    transform:translateX(-120%);
    animation:none !important;
}

@keyframes metalReflection_DISABLED{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(120%); }
}


/* ===== PEOPLE SECTION — GLOBAL CLEAN READABILITY ===== */

.people-card,
.character-card{
    background:linear-gradient(180deg,#0b0f18,#0a0d14);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 28px rgba(0,0,0,0.55);
    color:#e6e9ef;
}

/* avatar clarity */
.character-avatar{
    background:#05070c;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 10px 25px rgba(0,0,0,0.6);
}

/* name readability */
.character-name{
    color:#f1f3f7;
    text-shadow:0 1px 1px rgba(0,0,0,0.6);
    letter-spacing:1px;
}

/* level text */
.character-meta{
    color:#9aa3b2;
}

/* subtle hover premium */
.character-card:hover{
    border-color:rgba(212,175,55,0.35);
    box-shadow:
        0 0 0 1px rgba(212,175,55,0.12),
        0 18px 40px rgba(0,0,0,0.7);
    transform:translateY(-2px);
}


/* ===== NOSTALGIE PEOPLE — AVATAR REDESIGN ===== */

.tab-avatar,
.big-hex-avatar{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:700;
    color:#fff;
    background:
        radial-gradient(circle at 30% 30%, #2b2f3a, #0b0e14);
    border-radius:18px;
    position:relative;
    overflow:hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 25px rgba(0,0,0,0.7);
}

/* gold edge glow */
.tab-avatar::after,
.big-hex-avatar::after{
    content:'';
    position:relative;
    inset:0;
    border-radius:18px;
    padding:1px;
    background:linear-gradient(120deg, rgba(212,175,55,0.0), rgba(212,175,55,0.7), rgba(212,175,55,0.0));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:.35;
}

/* character names typography */
.c-name-main{
    font-family:'Cinzel', serif;
    letter-spacing:1.5px;
    font-weight:600;
    color:#f3f5f9;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* tabs typography */
.char-tab{
    font-family:'Cinzel', serif;
    letter-spacing:.8px;
}

.char-tab.active{
    background:linear-gradient(180deg,#121622,#0c0f16);
    border-bottom:2px solid rgba(212,175,55,.65);
}


/* ===== RACE COLORS ===== */

.race-human::after{
    background:linear-gradient(120deg, transparent, rgba(255,215,120,.7), transparent);
}

.race-elf::after{
    background:linear-gradient(120deg, transparent, rgba(120,255,190,.7), transparent);
}

.race-darkelf::after{
    background:linear-gradient(120deg, transparent, rgba(170,120,255,.7), transparent);
}

.race-orc::after{
    background:linear-gradient(120deg, transparent, rgba(120,255,120,.7), transparent);
}

.race-dwarf::after{
    background:linear-gradient(120deg, transparent, rgba(255,180,80,.7), transparent);
}

.race-kamael::after{
    background:linear-gradient(120deg, transparent, rgba(120,200,255,.7), transparent);
}


/* ===== CHARACTER TABS PREMIUM INTERACTION ===== */

.char-tab{
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.char-tab:hover{
    transform: scale(1.06);
    box-shadow: 0 8px 25px rgba(0,0,0,.45), 0 0 12px rgba(255,215,120,.25);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
}

/* active character focus */
.char-tab.active{
    transform: scale(1.08);
    box-shadow:
        0 0 0 1px rgba(255,215,120,.35),
        0 10px 35px rgba(0,0,0,.6),
        0 0 18px rgba(255,215,120,.25);
    background: linear-gradient(180deg, rgba(255,215,120,.08), rgba(0,0,0,.35));
}


/* ===== PEOPLE SECTION FONT UPGRADE ===== */

.char-tab,
.c-name-main,
.c-meta-main{
    font-family: 'Cinzel', serif;
    letter-spacing:.6px;
}

/* ===== REMOVE MILKY OVERLAY LAYER ===== */

.char-tab::before,
.char-tab::after{
    display:none !important;
}

/* subtle premium readability */
.char-tab{
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
    border:1px solid rgba(255,255,255,.06);
}


/* ===== PEOPLE FONT HARD OVERRIDE ===== */
.char-tabs,
.char-tab,
.char-tab *,
.c-name-main,
.c-meta-main{
    font-family:'Cinzel', serif !important;
}

/* ===== REMOVE HOVER SCALE (clean premium look) ===== */
.char-tab{
    transform:none !important;
    overflow:hidden;
}

.char-tab:hover{
    transform:none !important;
}

/* ===== CLEAN BORDER LOOK ===== */
.char-tab{
    background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.85));
    border:1px solid rgba(255,255,255,.08);
}


/* ===== RACE AVATAR EMBLEM ===== */

.big-hex-avatar{
    position:relative;
    font-family:'Cinzel', serif;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(180deg,#111,#000);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 20px rgba(0,0,0,.6) inset;
}

/* human */
.race-human{
    box-shadow:
        0 0 20px rgba(255,215,120,.25),
        0 0 60px rgba(255,215,120,.10) inset;
}

/* elf */
.race-elf{
    box-shadow:
        0 0 20px rgba(120,255,190,.25),
        0 0 60px rgba(120,255,190,.10) inset;
}

/* dark elf */
.race-darkelf{
    box-shadow:
        0 0 20px rgba(170,120,255,.25),
        0 0 60px rgba(170,120,255,.10) inset;
}

/* orc */
.race-orc{
    box-shadow:
        0 0 20px rgba(120,255,120,.25),
        0 0 60px rgba(120,255,120,.10) inset;
}

/* dwarf */
.race-dwarf{
    box-shadow:
        0 0 20px rgba(255,180,80,.25),
        0 0 60px rgba(255,180,80,.10) inset;
}

/* kamael */
.race-kamael{
    box-shadow:
        0 0 20px rgba(120,200,255,.25),
        0 0 60px rgba(120,200,255,.10) inset;
}


/* ===== AVATAR EFFECT LAYER FIX ===== */

.big-hex-avatar{
    position:relative;
    overflow:hidden;
}

.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    opacity:.55;
    mix-blend-mode:screen;
    pointer-events:none;
}


/* ===== AVATAR PREMIUM VISIBILITY BOOST ===== */

.big-hex-avatar{
    position:relative;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 60%),
        linear-gradient(180deg,#0b0e14,#0a0c11);
    box-shadow:
        inset 0 0 25px rgba(255,215,120,.15),
        0 0 20px rgba(0,0,0,.6);
}

.big-hex-avatar::after{
    opacity:.85;
    filter:blur(6px);
}

.char-tab.active .big-hex-avatar{
    box-shadow:
        inset 0 0 30px rgba(255,215,120,.35),
        0 0 22px rgba(255,215,120,.18);
}


/* ===== CHARACTER TAB AVATAR FIX ===== */

.char-tab .char-avatar{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 60%),
        linear-gradient(180deg,#11161f,#0b0f15);
    border:1px solid rgba(255,215,120,.35);
    box-shadow:
        inset 0 0 12px rgba(255,215,120,.25),
        0 0 12px rgba(0,0,0,.6);
    color:#fff;
    font-weight:700;
    text-shadow:0 0 10px rgba(255,215,120,.6);
}

.char-tab.active .char-avatar{
    box-shadow:
        inset 0 0 18px rgba(255,215,120,.45),
        0 0 16px rgba(255,215,120,.25);
}


/* ===== TAB AVATAR PREMIUM ===== */

.char-tab-avatar{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(180deg,#141a24,#0a0e14);
    border:1px solid rgba(255,215,120,.35);
    box-shadow:
        inset 0 0 10px rgba(255,215,120,.2),
        0 0 10px rgba(0,0,0,.7);
    text-shadow:0 0 8px rgba(255,215,120,.6);
    transition:.25s;
}

.char-tab.active .char-tab-avatar{
    transform:scale(1.05);
    box-shadow:
        inset 0 0 14px rgba(255,215,120,.4),
        0 0 18px rgba(255,215,120,.25);
}


/* ===== FIX TAB CHARACTER LOOK ===== */

.char-tab{
    background:linear-gradient(180deg,#0f141c,#070b11);
    border:1px solid rgba(255,215,120,.18);
    box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}

.char-tab.active{
    background:linear-gradient(180deg,#171f2b,#0b1017);
    border:1px solid rgba(255,215,120,.45);
    box-shadow:
        inset 0 0 30px rgba(255,215,120,.15),
        0 0 18px rgba(255,215,120,.15);
}

.char-tab-avatar{
    background:linear-gradient(180deg,#1b2330,#0d121a);
    border:1px solid rgba(255,215,120,.45);
    box-shadow:
        inset 0 0 12px rgba(255,215,120,.25),
        0 0 10px rgba(0,0,0,.6);
}

.char-tab.active .char-tab-avatar{
    box-shadow:
        inset 0 0 18px rgba(255,215,120,.45),
        0 0 22px rgba(255,215,120,.35);
    transform:scale(1.06);
}


/* ===== CLEAN CHARACTER AVATAR STYLE ===== */

.tab-avatar,
.big-hex-avatar{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#1a1f2b,#0b0e14) !important;
    border:1px solid rgba(255,215,120,.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 14px rgba(0,0,0,.55);
    backdrop-filter:none !important;
}

/* REMOVE GLASS OVERLAY */
.tab-avatar::before,
.big-hex-avatar::before{
    display:none !important;
}

/* LETTER STYLE */
.tab-avatar,
.big-hex-avatar{
    font-family: 'Cinzel', serif;
    font-weight:600;
    color:#f5f5f5;
    text-shadow:0 0 10px rgba(255,215,120,.35);
}

/* HOVER */
.char-tab:hover .tab-avatar{
    transform:scale(1.05);
    border-color:rgba(255,215,120,.5);
}


/* ===== RACE ICON AVATARS ===== */

.tab-avatar,
.big-hex-avatar{
    background-size:cover;
    background-position:center;
    color:transparent;
}

/* race images */
.race-human{background-image:url('/assets/img/races/human.svg');}
.race-elf{background-image:url('/assets/img/races/elf.svg');}
.race-darkelf{background-image:url('/assets/img/races/darkelf.svg');}
.race-orc{background-image:url('/assets/img/races/orc.svg');}
.race-dwarf{background-image:url('/assets/img/races/dwarf.svg');}
.race-kamael{background-image:url('/assets/img/races/kamael.svg');}


/* race icon visibility fix */

.tab-avatar,
.big-hex-avatar{
    background-size:70% !important;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 0 6px rgba(255,215,120,.6));
}

.big-hex-avatar{
    background-size:60% !important;
}


/* remove glass blur from avatars */

.tab-avatar::before,
.big-hex-avatar::before{
    display:none !important;
}

.tab-avatar,
.big-hex-avatar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background-color:#0b0f18 !important;
}


/* ===== RACE ICONS ===== */

.race-human{
    background:url('/assets/img/races/human.svg') center/55% no-repeat, #0b0f18;
}
.race-elf{
    background:url('/assets/img/races/elf.svg') center/55% no-repeat, #0b0f18;
}
.race-darkelf{
    background:url('/assets/img/races/darkelf.svg') center/55% no-repeat, #0b0f18;
}
.race-orc{
    background:url('/assets/img/races/orc.svg') center/55% no-repeat, #0b0f18;
}
.race-dwarf{
    background:url('/assets/img/races/dwarf.svg') center/55% no-repeat, #0b0f18;
}
.race-kamael{
    background:url('/assets/img/races/kamael.svg') center/55% no-repeat, #0b0f18;
}


/* ===== RACE ICON IMAGES ===== */

.big-hex-avatar,
.tab-avatar{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:transparent;
}

/* PEOPLE PANEL */

.big-hex-avatar.race-human{background-image:url('/assets/img/races/human.png');}
.big-hex-avatar.race-elf{background-image:url('/assets/img/races/elf.png');}
.big-hex-avatar.race-darkelf{background-image:url('/assets/img/races/darkelf.png');}
.big-hex-avatar.race-orc{background-image:url('/assets/img/races/orc.png');}
.big-hex-avatar.race-dwarf{background-image:url('/assets/img/races/dwarf.png');}
.big-hex-avatar.race-kamael{background-image:url('/assets/img/races/kamael.png');}

/* CHAR TABS */

.tab-avatar.race-human{background-image:url('/assets/img/races/human.png');}
.tab-avatar.race-elf{background-image:url('/assets/img/races/elf.png');}
.tab-avatar.race-darkelf{background-image:url('/assets/img/races/darkelf.png');}
.tab-avatar.race-orc{background-image:url('/assets/img/races/orc.png');}
.tab-avatar.race-dwarf{background-image:url('/assets/img/races/dwarf.png');}
.tab-avatar.race-kamael{background-image:url('/assets/img/races/kamael.png');}


/* ===== REMOVE AVATAR OVERLAY ===== */

.big-hex-avatar::after,
.tab-avatar::after{
    display:none !important;
}

.big-hex-avatar,
.tab-avatar{
    background-color:transparent !important;
    box-shadow:0 0 14px rgba(255,215,120,.25);
}


/* ===== RACE ICON IMAGES ===== */

.tab-avatar,
.big-hex-avatar{
    background-size:cover !important;
    background-position:center !important;
    color:transparent !important;
    font-size:0 !important;
}

/* RACES */

.race-human{ background-image:url('/assets/img/races/human.png') !important; }
.race-elf{ background-image:url('/assets/img/races/elf.png') !important; }
.race-darkelf{ background-image:url('/assets/img/races/darkelf.png') !important; }
.race-orc{ background-image:url('/assets/img/races/orc.png') !important; }
.race-dwarf{ background-image:url('/assets/img/races/dwarf.png') !important; }
.race-kamael{ background-image:url('/assets/img/races/kamael.png') !important; }


/* ===== PEOPLE CARD AVATAR REDESIGN ===== */

.big-hex-avatar{
    width:120px;
    height:150px;
    border-radius:18px;
    background:#0b0f17;
    border:2px solid rgba(255,215,120,.55);
    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 18px rgba(255,215,120,.18);
    background-size:cover;
    background-position:center;
    position:relative;
}

/* remove old hex pseudo layers */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
}

/* TAB avatar match */
.tab-avatar{
    border-radius:14px !important;
    border:1px solid rgba(255,215,120,.35);
    box-shadow:0 0 10px rgba(255,215,120,.15);
}


/* ===== SQUARE HERO AVATAR ===== */

.big-hex-avatar{
    width:170px !important;
    height:170px !important;
    border-radius:22px !important;
    border:2px solid rgba(255,215,120,.65);
    background:#0b0f17;
    background-size:cover !important;
    background-position:center !important;
    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 22px rgba(255,215,120,.22);
}

/* disable any old hex shapes */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
    content:none !important;
}


/* ===== FORCE SQUARE AVATAR ===== */

.big-hex-avatar{
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;

    width:180px !important;
    height:180px !important;

    border-radius:20px !important;
    border:2px solid rgba(255,215,120,.7);

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 28px rgba(255,215,120,.22);
}

/* kill hex pseudo layers */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
    content:none !important;
}


/* ===== PREMIUM AVATAR FRAME ===== */

.big-hex-avatar{
    position:relative;
    overflow:hidden;
}

/* gold glow */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:20px;
    pointer-events:none;

    box-shadow:
        0 0 0 1px rgba(255,215,120,.45) inset,
        0 0 25px rgba(255,215,120,.28),
        0 0 60px rgba(255,215,120,.12);
}

/* shimmer */
.big-hex-avatar::after{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:80%;
    height:180%;
    pointer-events:none;

    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,235,160,.35) 50%,
        transparent 70%
    );

    transform:rotate(20deg);
    animation:avatarShimmer 6s linear infinite;
    opacity:.45;
}

@keyframes avatarShimmer{
    0%{ transform:translateX(-120%) rotate(20deg); }
    100%{ transform:translateX(220%) rotate(20deg); }
}


/* ===== AVATAR ACTIVE / INACTIVE EFFECT ===== */

/* inactive tabs grayscale */
.char-tab .tab-avatar{
    filter:grayscale(100%) brightness(.7);
    transition:all .35s ease;
}

/* active tab full color */
.char-tab.active .tab-avatar{
    filter:none;
}

/* ===== GLASS OVERLAY ===== */

.tab-avatar::after,
.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.18),
            rgba(255,255,255,.05) 40%,
            rgba(0,0,0,.25)
        );
}


/* ===== CHARACTER AVATAR GLASS SYSTEM ===== */

.char-tab .tab-avatar{
    filter:grayscale(100%) brightness(.7);
    position:relative;
    overflow:hidden;
}

/* szkło */
.char-tab .tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,.02) 40%, transparent 60%);
    pointer-events:none;
}

/* aktywna karta = kolor */
.char-tab.active .tab-avatar{
    filter:none;
    box-shadow:
        0 0 14px rgba(255,215,0,.45),
        inset 0 0 10px rgba(255,255,255,.15);
}


/* ===== NOSTALGIE™ PEOPLE AVATAR ULTRA GLASS ===== */

.big-hex-avatar{
    position:relative;
    border-radius:14px;
    border:2px solid rgba(212,175,55,.55);
    box-shadow:
        0 12px 30px rgba(0,0,0,.6),
        0 0 22px rgba(212,175,55,.35),
        inset 0 0 25px rgba(255,255,255,.08);
    overflow:hidden;
    transform:translateZ(0);
}

/* glass layer */
.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    background:
        linear-gradient(140deg,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.08) 30%,
            rgba(255,255,255,.02) 50%,
            transparent 60%),
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 40%);
    pointer-events:none;
}

/* subtle depth highlight */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,.25),
        inset 0 -10px 20px rgba(0,0,0,.55);
    pointer-events:none;
}


/* ===== REMOVE GLOBAL SWEEP SHINE ===== */

.supporter-seal-pro::after,
.pro-engrave::after,
.pro-engrave::before{
    animation:none !important;
    opacity:0 !important;
}


/* ===== PEOPLE ULTRA GOLD FRAME ===== */

.big-hex-avatar{
    border:2px solid rgba(212,175,55,.65);
    box-shadow:
        0 12px 35px rgba(0,0,0,.6),
        0 0 22px rgba(212,175,55,.35),
        inset 0 0 25px rgba(255,255,255,.08);
    position:relative;
    overflow:hidden;
}

/* sun sparkle border */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:16px;
    background:linear-gradient(120deg,
        transparent 40%,
        rgba(255,235,150,.9) 50%,
        transparent 60%);
    opacity:0;
    pointer-events:none;
    animation:avatarSunSpark 18s linear infinite;
}

/* subtle occasional shine */
@keyframes avatarSunSpark{
    0%{ opacity:0; transform:translateX(-120%); }
    4%{ opacity:.9; }
    8%{ opacity:0; transform:translateX(140%); }
    100%{ opacity:0; transform:translateX(140%); }
}


/* ===== AVATAR ULTIMATE FRAME ===== */

.big-hex-avatar{
    border:3px solid #d4af37 !important;
    border-radius:14px !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 10px 30px rgba(0,0,0,.6),
        0 0 25px rgba(212,175,55,.35);
    position:relative;
    overflow:hidden;
}

/* occasional sun reflection */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(120deg,
        transparent 45%,
        rgba(255,240,160,.95) 50%,
        transparent 55%);
    opacity:0;
    animation:avatarGoldFlash 16s linear infinite;
}

@keyframes avatarGoldFlash{
    0%{ opacity:0; transform:translateX(-120%); }
    4%{ opacity:.9; }
    8%{ opacity:0; transform:translateX(130%); }
    100%{ opacity:0; }
}


/* ===== GLOBAL SWEEP HARD OFF ===== */

.harmony-wrapper::before,
.harmony-wrapper::after,
.ecosystem-grid::before,
.ecosystem-grid::after,
.supporter-seal::before,
.supporter-seal::after{
    animation:none !important;
    opacity:0 !important;
    display:none !important;
    content:none !important;
}


/* ===== REMOVE GLOBAL PRO SWEEP COMPLETELY ===== */

.user-pro::before,
.user-pro::after,
.user-pro ~ main::before,
.user-pro ~ main::after,
.user-pro ~ main .console-body::before,
.user-pro ~ main .console-body::after,
.user-pro .harmony-wrapper::before,
.user-pro .harmony-wrapper::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    opacity:0 !important;
    background:none !important;
}


/* ===== SUBTLE GLOBAL LIGHT (ULTRA SOFT) ===== */

.harmony-wrapper{
    position:relative;
    overflow:hidden;
}

.harmony-wrapper::after{
    content:"";
    position:relative;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    pointer-events:none;
    background:radial-gradient(circle at 30% 30%, rgba(255,215,120,.05), transparent 40%);
    animation:subtleReflection 28s linear infinite;
    opacity:.35;
}

/* ultra smooth — brak początku */
@keyframes subtleReflection{
    0%   { transform:translateX(-10%) translateY(0%); }
    50%  { transform:translateX(10%) translateY(5%); }
    100% { transform:translateX(-10%) translateY(0%); }
}


/* ===== STRONGER LUX LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    pointer-events:none;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,215,120,.12), transparent 45%),
        radial-gradient(circle at 70% 60%, rgba(255,215,120,.10), transparent 50%);

    animation:luxReflection 24s linear infinite;
    opacity:.55;
}

/* smooth cinematic motion */
@keyframes luxReflection{
    0%   { transform:translateX(-6%) translateY(0%); }
    50%  { transform:translateX(6%) translateY(4%); }
    100% { transform:translateX(-6%) translateY(0%); }
}


/* ===== STRONG LUX PANEL LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-40%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,220,140,.28), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,220,140,.22), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,220,140,.08), transparent 60%);

    animation:luxReflection 18s ease-in-out infinite;
    opacity:.9;
}

@keyframes luxReflection{
    0%   { transform:translate3d(-4%, -2%, 0); }
    50%  { transform:translate3d(4%, 2%, 0); }
    100% { transform:translate3d(-4%, -2%, 0); }
}


/* ===== SUBTLE PREMIUM PANEL LIGHT ===== */

.harmony-wrapper{
    position:relative;
    overflow:hidden;
}

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-30%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,225,140,.18), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,225,140,.14), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,225,140,.06), transparent 60%);

    animation:luxReflectionSoft 22s ease-in-out infinite;
}

@keyframes luxReflectionSoft{
    0%   { transform:translate3d(-2%, -1%, 0); }
    50%  { transform:translate3d(2%, 1%, 0); }
    100% { transform:translate3d(-2%, -1%, 0); }
}


/* ===== STRONGER PREMIUM PANEL LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-35%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,225,140,.30), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,225,140,.22), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,225,140,.12), transparent 65%);

    filter: blur(28px);
    animation:luxReflectionSoft 20s ease-in-out infinite;
}


/* ===== MAX PREMIUM LIGHT DEPTH ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-40%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,230,150,.55), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,215,120,.45), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,215,120,.30), transparent 70%);

    filter: blur(30px);
    opacity:.9;
    animation:luxReflectionSoft 18s ease-in-out infinite;
}


/* ===== FORCE PREMIUM LIGHT VISIBLE ===== */

.harmony-wrapper{
    position:relative !important;
    overflow:visible !important;
}

/* światło premium */
.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-25%;
    pointer-events:none;
    z-index:5;

    background:
        radial-gradient(circle at 30% 30%, rgba(255,235,150,.65), transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(255,215,120,.55), transparent 55%);

    filter: blur(28px);
    mix-blend-mode:screen;
    opacity:.85;

    animation:luxReflectionSoft 14s ease-in-out infinite;
}


/* ===== FORCE GLOBAL LIGHT (DEBUG VISIBLE) ===== */

.harmony-wrapper{
    position:relative !important;
}

/* silny refleks testowy */
.harmony-wrapper::before{
    content:"";
    position:relative;
    inset:-30%;
    pointer-events:none;

    z-index:9999 !important;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,230,120,.9), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,210,90,.85), transparent 50%);

    filter: blur(40px);
    opacity:.95;
    mix-blend-mode:screen;
}


}

    0%   { transform:translateX(-120%); opacity:.15; }
    50%  { opacity:.45; }
    100% { transform:translateX(120%); opacity:.15; }
}


/* ===== PEOPLE AVATAR — PREMIUM FRAME ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    filter:grayscale(100%);
    transition:all .35s ease;
}

/* złota cinematic ramka */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    padding:2px;
    background:linear-gradient(120deg,#3a2c08,#d4af37,#fff1a6,#d4af37,#3a2c08);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.85;
}

/* glass layer */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
    pointer-events:none;
}

/* aktywna postać — kolor */
.char-tab.active .tab-avatar,
.col-identity .big-hex-avatar{
    filter:none;
    transform:scale(1.03);
    box-shadow:0 0 18px rgba(212,175,55,.35);
}

/* hover subtelny */
.char-tab:hover .tab-avatar{
    filter:none;
    transform:scale(1.02);
}


/* ===== AVATAR ULTRA GLASS LAYER FIX ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* glass overlay — na samej górze */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    border-radius:14px;

    background:
        linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.03) 100%);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    pointer-events:none;
}

/* górny refleks szkła */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    top:0;
    left:0;
    right:0;
    height:40%;
    z-index:6;
    border-radius:14px 14px 0 0;

    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events:none;
}


/* ===== AVATAR SUN GLASS REFLECTION ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* glass shine sweep */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    top:-40%;
    left:-60%;
    width:60%;
    height:180%;
    z-index:6;
    pointer-events:none;

    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 100%);

    transform:rotate(18deg);
    animation:avatarSunSweep 8s linear infinite;
    opacity:.65;
}

@keyframes avatarSunSweep{
    0%   { left:-60%; }
    100% { left:140%; }
}

/* subtle glass highlight */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.03));
    pointer-events:none;
}


/* ===== STATIC GLASS REFLECTION (VISIBLE) ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* stały refleks szkła */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    pointer-events:none;

    background:
        linear-gradient(145deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.25) 18%,
            rgba(255,255,255,.06) 40%,
            rgba(255,255,255,0) 60%);

    mix-blend-mode:screen;
}

/* lekki połysk krawędzi */
.big-hex-avatar{
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.45),
        inset 0 -2px 6px rgba(0,0,0,.35),
        0 0 18px rgba(0,0,0,.45);
}


/* ===== STRONG GLASS REFLECTION (VISIBLE) ===== */

.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:6;
    pointer-events:none;

    background:
        linear-gradient(120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.75) 12%,
            rgba(255,255,255,.25) 20%,
            rgba(255,255,255,0) 35%
        );

    mix-blend-mode:screen;
}

/* dodatkowa górna linia szkła */
.big-hex-avatar::after{
    content:"";
    position:relative;
    left:8%;
    right:8%;
    margin-top:20px;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.65);
    box-shadow:0 0 12px rgba(255,255,255,.45);
    pointer-events:none;
    z-index:7;
}


/* ===== AVATAR GLASS FIX (force visible reflection) ===== */

.tab-avatar,
.big-hex-avatar{
    position:relative !important;
    overflow:hidden !important;
}

/* mocny refleks szkła */
.tab-avatar::before,
.big-hex-avatar::before{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.85) 25%,
        rgba(255,255,255,.35) 35%,
        rgba(255,255,255,0) 50%);
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:5;
    opacity:.85;
}

/* górna linia szkła */
.big-hex-avatar::after{
    content:"";
    position:relative;
    left:6%;
    right:6%;
    margin-top:20px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.85);
    box-shadow:0 0 14px rgba(255,255,255,.6);
    z-index:6;
    pointer-events:none;
}


/* ===== DEBUG GLASS VISIBILITY ===== */

.big-hex-avatar{
    position:relative !important;
    overflow:hidden !important;
}

.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:rgba(255,0,0,.35) !important;
    z-index:50 !important;
    pointer-events:none;
}


/* ===== PEOPLE AVATAR FINAL ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    border:2px solid rgba(120,120,120,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.5);
    transition:.25s;
}

/* glass layer */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,.02) 60%,
        rgba(255,255,255,.18));
    pointer-events:none;
}

/* inactive grayscale */
.char-tab .tab-avatar{
    filter:grayscale(1) brightness(.7);
}

/* ACTIVE CHARACTER */
.char-tab.active .tab-avatar{
    filter:none;
    border:2px solid rgba(255,210,120,.9);
    box-shadow:
        0 0 18px rgba(255,200,90,.35),
        inset 0 0 15px rgba(255,200,120,.15);
}

/* premium gold reflection */
.char-tab.active .tab-avatar::after{
    content:"";
    position:relative;
    inset:-40%;
    background:linear-gradient(120deg,
        transparent,
        rgba(255,220,120,.7),
        transparent);
    transform:rotate(25deg);
    animation:avatarGoldFlash 8s infinite;
}

@keyframes avatarGoldFlash{
    0%{ transform:translateX(-120%) rotate(25deg); opacity:0; }
    20%{ opacity:.6; }
    40%{ transform:translateX(120%) rotate(25deg); opacity:0; }
    100%{ opacity:0; }
}


/* ===== PEOPLE AVATAR FINAL ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    border:2px solid rgba(120,120,120,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.5);
    transition:.25s;
}

/* glass layer */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,.02) 60%,
        rgba(255,255,255,.18));
    pointer-events:none;
}

/* inactive grayscale */
.char-tab .tab-avatar{
    filter:grayscale(1) brightness(.7);
}

/* ACTIVE CHARACTER */
.char-tab.active .tab-avatar{
    filter:none;
    border:2px solid rgba(255,210,120,.9);
    box-shadow:
        0 0 18px rgba(255,200,90,.35),
        inset 0 0 15px rgba(255,200,120,.15);
}

/* premium gold reflection */
.char-tab.active .tab-avatar::after{
    content:"";
    position:relative;
    inset:-40%;
    background:linear-gradient(120deg,
        transparent,
        rgba(255,220,120,.7),
        transparent);
    transform:rotate(25deg);
    animation:avatarGoldFlash 8s infinite;
}

@keyframes avatarGoldFlash{
    0%{ transform:translateX(-120%) rotate(25deg); opacity:0; }
    20%{ opacity:.6; }
    40%{ transform:translateX(120%) rotate(25deg); opacity:0; }
    100%{ opacity:0; }
}


/* ===== HARD GLASS FORCE ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative !important;
    overflow:hidden !important;
}

/* GLASS */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    pointer-events:none !important;

    background:
        linear-gradient(140deg,
            rgba(255,255,255,.35) 0%,
            rgba(255,255,255,.08) 30%,
            rgba(255,255,255,.03) 60%,
            rgba(255,255,255,.28) 100%) !important;

    mix-blend-mode:screen !important;
}

/* stronger visibility */
.char-tab.active .tab-avatar::before{
    background:
        linear-gradient(140deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.12) 40%,
            rgba(255,255,255,.05) 70%,
            rgba(255,255,255,.45)) !important;
}


/* ===== PREMIUM LOGO ===== */

.premium-logo{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    text-decoration:none;
}

.logo-top{
    font-size:.55rem;
    letter-spacing:.25rem;
    color:#888;
    text-transform:uppercase;
}

.logo-main{
    font-family:'Cinzel',serif;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.12rem;
    background:linear-gradient(180deg,#fff,#f0e2b0,#cfae42);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 12px rgba(212,175,55,.25);
}

.premium-logo:hover .logo-main{
    text-shadow:0 0 18px rgba(212,175,55,.45);
}


/* ===== PREMIUM LOGO ===== */

.site-logo-img{
    height:44px;
    filter:drop-shadow(0 0 8px rgba(230,196,106,.25));
    animation:logoPulse 6s ease-in-out infinite;
}

@keyframes logoPulse{
    0%{ filter:drop-shadow(0 0 6px rgba(230,196,106,.20)); }
    50%{ filter:drop-shadow(0 0 18px rgba(230,196,106,.55)); }
    100%{ filter:drop-shadow(0 0 6px rgba(230,196,106,.20)); }
}


/* HERO LOGO SIZE */
    width:50%;
    height:auto;
    max-width:420px;
    display:block;
    margin:0 auto;
}


/* ===== HERO LOGO FINAL ===== */

/* ukryj stare tekstowe LINEAGE II */
.hero-title,
.hero-title-main,
.hero h1{
    display:none !important;
}

/* nowe logo */
    width:70%;
    max-width:620px;
    height:auto;
    display:block;
    margin:0 auto 20px auto;
}


/* ===== HERO CINEMATIC LOGO LAYOUT ===== */

    display:block;
    margin:40px auto 20px auto;
    width:520px;
    max-width:90%;
    filter: drop-shadow(0 0 25px rgba(230,196,106,.35));
}

/* HERO RATES TEXT */
.hero-rates,
.hero-description,
.hero-stats{
    text-align:center !important;
    margin-top:15px !important;
}

/* PANEL BUTTON ALIGN */
.hero-actions{
    text-align:center !important;
    margin-top:35px !important;
}


/* ===== HERO MOVE UP ===== */

.hero-content{
    margin-top:-40px !important;
}


/* ===== HERO MOVE UP STRONG ===== */

.hero-content{
    margin-top:-120px !important;
}


/* ===== HERO LOGO POSITION FIX ===== */
.hero-logo{
    margin-top:-80px !important;
}

/* ===== STATS + RATES ALWAYS VISIBLE ===== */
.stats-bar,
.server-stats,
.rates-bar{
    position:relative !important;
    margin-top:40px !important;
    z-index:5 !important;
}


.rates-banner-fixed{
    position:fixed;
    bottom:90px;
    left:0;
    width:100%;
    text-align:center;
    padding:10px 0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    color:#e6c46a;
    letter-spacing:3px;
    font-size:14px;
    z-index:9999;
    border-top:1px solid rgba(212,175,55,.35);
    border-bottom:1px solid rgba(212,175,55,.35);
}

    margin-top:20px;
    text-align:center;
    color:#e6c46a;
    letter-spacing:3px;
    font-size:14px;
    padding:10px 25px;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    border:1px solid rgba(212,175,55,.35);
    display:inline-block;
    border-radius:6px;
    box-shadow:0 0 18px rgba(212,175,55,.15);
}

/* ===== HERO HIGH POSITION ===== */
.hero{
    padding-top:40px !important;
    padding-bottom:40px !important;
}

/* ===== PREMIUM RATES BAR READABLE ===== */
    margin-top:20px;
    text-align:center;
    color:#ffd76a;
    letter-spacing:4px;
    font-size:18px;
    font-weight:600;
    padding:14px 40px;
    background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.55));
    border:1px solid rgba(212,175,55,.55);
    display:inline-block;
    border-radius:8px;
    box-shadow:
        0 0 28px rgba(212,175,55,.25),
        inset 0 0 18px rgba(255,220,120,.08);
}

/* ===== HERO GLOBAL LIFT ===== */
.hero{
    margin-top:-120px !important;
}

/* ===== KEEP STATUS LOWER ===== */
.server-stats{
    margin-top:70px !important;
}


/* ===== HERO GLOBAL LIFT ===== */
.hero{
    margin-top:-120px !important;
}

/* ===== KEEP STATUS LOWER ===== */
.server-stats{
    margin-top:70px !important;
}


/* ===== HERO RATES REFINED ===== */

.hero-rates,
.rates-bar{
    font-size:14px !important;
    letter-spacing:2px !important;
    text-transform:uppercase;
    opacity:.95;
}

/* multipliers highlight */
.hero-rates b,
.rates-bar b{
    color:#f0d27a !important;
    font-weight:700;
    letter-spacing:1px;
    text-shadow:0 0 6px rgba(240,210,122,.35);
}


/* ===== HERO RATES PREMIUM ===== */

    font-size:14px !important;
    letter-spacing:2px;
    text-align:center;
    opacity:.95;
}

/* multipliers */
    color:#e6c46a;
    font-weight:800;
    font-size:1.15em;
    text-shadow:0 0 8px rgba(230,196,106,.55);
}


/* ===== HERO STACK HIGH POSITION ===== */


/* ===== RATES BAR POSITION ===== */

    margin-top:18px !important;
    font-size:14px !important;
    letter-spacing:2px;
    text-align:center;
}

/* ===== GOLD MULTIPLIER BADGE ===== */

    display:inline-block;
    padding:3px 10px;
    margin:0 3px;
    background:#000;
    color:#e6c46a;
    border:1px solid rgba(230,196,106,.55);
    border-radius:6px;
    font-weight:800;
    text-shadow:0 0 8px rgba(230,196,106,.6);
    box-shadow:0 0 10px rgba(230,196,106,.25);
}


/* ===== HERO HIGHER ===== */

/* ===== RATES BASE TEXT ===== */
    color:#cfcfcf !important;
    font-size:13px !important;
    letter-spacing:1.5px;
    text-align:center;
}

/* ===== GOLD MULTIPLIERS ONLY ===== */
    display:inline-block;
    padding:3px 10px;
    margin:0 4px;
    background:#000;
    color:#e6c46a !important;
    border:1px solid rgba(230,196,106,.7);
    border-radius:6px;
    font-weight:900;
    text-shadow:0 0 10px rgba(230,196,106,.8);
    box-shadow:0 0 12px rgba(230,196,106,.35);
}


/* ===== HERO LOWER SLIGHTLY ===== */

/* ===== RATES BAR FRAME ===== */
    margin-top:18px !important;
    padding:12px 26px !important;
    border:1px solid rgba(230,196,106,.35);
    border-radius:12px;
    background:rgba(0,0,0,.45);
    box-shadow:0 0 20px rgba(230,196,106,.15);
}

/* ===== MULTIPLIER CAPSULES ===== */
    display:inline-block;
    padding:3px 12px;
    margin:0 4px;
    border-radius:6px;
    background:#000;
    border:1px solid rgba(230,196,106,.75);
    color:#e6c46a;
    font-weight:900;
    position:relative;
    overflow:hidden;
}

/* subtle gold shimmer */
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:60%;
    height:180%;
    background:linear-gradient(120deg, transparent, rgba(255,215,120,.45), transparent);
    transform:rotate(25deg);
    animation:rateShimmer 6s linear infinite;
    opacity:.7;
}

@keyframes rateShimmer{
    0%{ left:-60%; }
    100%{ left:160%; }
}



/* ===== HERO LOWER GLOBAL ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:60px !important;
}

    margin-top:20px !important;
}


/* ===== HERO LOWER STRONG ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:140px !important;
}

    margin-top:35px !important;
}


/* ===== HERO POSITION FIX ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:40px !important;
}

    margin-top:20px !important;
}


/* ===== HERO HEIGHT RESTORE ===== */
.hero,

/* cofnięcie wcześniejszego przesunięcia */
.hero-logo,
.hero-content{
    margin-top:0 !important;
}


    display:block;
    margin:40px auto 20px auto;
    max-width:520px;
    width:60%;
    filter: drop-shadow(0 0 25px rgba(255,215,120,.45));
}


    display:block;
    margin:40px auto 30px auto;
    width:520px;
    max-width:70%;
    background:none;
}

.hero-cta{
    text-align:center;
    margin-top:20px;
}


/* HERO FINAL ALIGN */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-margin-top:20px;
}

    width:520px;
    max-width:70%;
    margin:0 auto 25px auto;
}

.hero-cta{
    margin:10px 0 25px 0;
}

    margin:10px auto 25px auto;
    font-size:14px;
    letter-spacing:2px;
    text-align:center;
}

.server-stats{
    margin-top:20px;
}


/* HERO HEIGHT FIX */
.hero{
    min-height:720px !important;
    padding-top:140px !important;
    padding-bottom:80px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

    margin-top:0 !important;
}


/* HERO ORDER — LOGO ABOVE RATES */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
}

    order:1;
    margin-bottom:20px;
}

    order:2;
    margin-top:20px;
}

.hero-cta{
    order:3;
}


/* ===== LIMIT GLOBAL SWEEP ONLY TO LOGO ===== */

/* wyłącz sweep z całej sekcji hero */
.hero::before,
.hero::after{
    display:none !important;
    animation:none !important;
    content:none !important;
}

/* glass shine tylko na logo */
    position:relative;
    z-index:2;
}

    content:"";
    position:relative;
    inset:0;
    border-radius:12px;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0) 70%
    );
    transform:translateX(-120%);
    animation:logoSweep 7s linear infinite;
    mix-blend-mode:screen;
}

@keyframes logoSweep{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(120%); }
}


/* =========================
   HERO RATES CINEMATIC
========================= */

    animation:ratesFadeIn 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    transform:translateY(40px);
    opacity:0;
    animation-delay:.55s;
}

@keyframes ratesFadeIn{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* podkreślenie X1 X2 */

    color:#d4af37;
    padding:2px 6px;
    border-radius:6px;
    background:rgba(0,0,0,0.45);
    box-shadow:0 0 10px rgba(212,175,55,.35);
    animation:ratePulse 4s ease-in-out infinite;
}

@keyframes ratePulse{
    0%,100%{ box-shadow:0 0 10px rgba(212,175,55,.25); }
    50%{ box-shadow:0 0 18px rgba(212,175,55,.55); }
}


/* =========================
   HERO RATES CINEMATIC
========================= */

    animation:ratesFadeIn 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    transform:translateY(40px);
    opacity:0;
    animation-delay:.55s;
}

@keyframes ratesFadeIn{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* podkreślenie X1 X2 */

    color:#d4af37;
    padding:2px 6px;
    border-radius:6px;
    background:rgba(0,0,0,0.45);
    box-shadow:0 0 10px rgba(212,175,55,.35);
    animation:ratePulse 4s ease-in-out infinite;
}

@keyframes ratePulse{
    0%,100%{ box-shadow:0 0 10px rgba(212,175,55,.25); }
    50%{ box-shadow:0 0 18px rgba(212,175,55,.55); }
}


/* ===== CINEMATIC LOGO DROP ===== */

    position:relative;
    z-index:5;
    transform:translateY(-80px);
    opacity:0;
    animation:logoDrop 1s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes logoDrop{
    to{
        transform:translateY(0);
        opacity:1;
    }
}


    text-align:center;
    margin-top:20px;
}

    width:520px;
    max-width:70%;
    display:block;
    margin:0 auto 30px auto;
}

    font-size:14px;
    letter-spacing:2px;
    color:#caa84a;
}

    color:#ffd86b;
    font-weight:700;
}


/* ===== HERO HARD RESET (logo visibility) ===== */


/* usuwa stare cinematic overlay które zasłaniało */

/* logo */
    position:relative;
    z-index:20;
    display:block;
    margin:20px auto 15px auto;
    width:520px;
    max-width:70%;
}

/* rates pod logiem */
    position:relative;
    z-index:20;
    margin-top:20px;
    font-size:0.95rem;
    letter-spacing:1px;
    color:#ddd;
}

/* HUD pod hero */
.server-hud{
    margin-top:20px;
    position:relative;
    z-index:20;
}


/* HERO SPACE FROM HEADER */

    margin-top:20px;
}


/* HERO offset pod fixed header */

/* delikatne podniesienie logo */
    margin-top:-40px;
}


/* rates pod HUD */
    margin-top:20px;
    text-align:center;
}

    font-size:14px;
    letter-spacing:2px;
    opacity:0.9;
}

.rate{
    color:#e7c36a;
    font-weight:700;
}


/* ===== HERO LOGO MOVE UP ===== */
    margin-top:-80px !important;
}

    margin-top:0 !important;
}


.launch-wrapper{
    text-align:center;
    margin-top:20px;
}

.launch-title{
    color:#e6c46a;
    font-size:1rem;
    letter-spacing:3px;
    margin-bottom:10px;
    opacity:.85;
}

.launch-countdown{
    display:flex;
    justify-content:center;
    gap:22px;
}

.cd-box{
    background:linear-gradient(180deg,#111,#050505);
    border:1px solid rgba(230,196,106,.6);
    padding:18px 20px;
    border-radius:12px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

.cd-box span{
    font-size:2.5rem;
    font-weight:700;
    color:#e6c46a;
    display:block;
    letter-spacing:2px;
}

.cd-box small{
    font-size:.7rem;
    color:#aaa;
}


/* ===== CINEMATIC COUNTDOWN PRO FIX ===== */

.launch-countdown{
    display:flex;
    justify-content:center;
    gap:22px;
}

.cd-box{
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#0d0d0d,#050505);
    border:1px solid rgba(230,196,106,.6);
    border-radius:14px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

/* stała szerokość cyfr */
.cd-box span{
    font-size:2.8rem;
    font-weight:700;
    color:#e6c46a;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing:2px;
}

.cd-box small{
    font-size:.7rem;
    color:#aaa;
    margin-top:20px;
}

/* subtelny cinematic glow */
.cd-box::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    background:radial-gradient(circle at 50% 0%, rgba(255,220,120,.25), transparent 70%);
    opacity:.35;
    pointer-events:none;
}


/* HUD ping tweaks */
.hud-value span {
    font-size: 0.5em !important;   /* zmniejsza rozmiar ms */
    opacity: 0.6;
    vertical-align: super;         /* przesuwa w górę, żeby nie nachodziło */
}

.hud-value {
    min-width: 30px;               /* gwarantuje, że kreska lub liczba nie przesuwa się */
    text-align: center;
}

/* HUD ping tweaks */
.hud-value span {
    font-size: 0.5em !important;   /* zmniejsza rozmiar ms */
    opacity: 0.6;
    vertical-align: super;         /* przesuwa w górę, żeby nie nachodziło */
}

.hud-value {
    min-width: 30px;               /* gwarantuje, że kreska lub liczba nie przesuwa się */
    text-align: center;
}

/* ===== HERO LOGO ===== */
    display:block;
    margin:20px auto 30px auto;
    width:600px;       /* powiększenie z 520px */
    max-width:80%;
    background:none;
}


/* ===== EXIT BUTTON HEADER ===== */
.header-exit {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #FFD700 !important;           /* złota widoczna czcionka */
    background: rgba(255, 255, 255, 0.05); /* delikatne tło */
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.header-exit:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}


/* Exit button style */
.exit-btn {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: #f87171 !important;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid #f87171;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.exit-btn:hover {
    background-color: #f87171;
    color: #ffffff !important;
    text-decoration: none;
}


/* Premium hover effect for player name button */
.premium-btn {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15;
    transition: all 0.3s ease-in-out;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 4px;
}
.premium-btn:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #facc15, 0 0 20px #facc15, 0 0 30px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
}

/* Premium hover effect for logged-in player button */
.user-name {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15;
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #facc15, 0 0 20px #facc15, 0 0 30px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow: 0 0 5px #facc15, 0 0 15px #facc15, 0 0 25px #facc15;
}
/* Premium hover effect for logged-in player button with stroke and depth */
.user-name {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    -webkit-text-stroke: 1px #000; /* czarna ramka każdej litery */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.3),
        0 4px 6px rgba(0,0,0,0.2); /* głębia */
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
}
/* Premium hover effect for logged-in player button with refined stroke and depth */
.user-name {
    font-weight: 700;
    color: #facc15;
    -webkit-text-stroke: 0.8px #000; /* delikatniejsza ramka */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.25),
        0 4px 8px rgba(0,0,0,0.15); /* głębia bez przesady */
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    -webkit-text-stroke: 0.8px #000;
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
}

/* Header Logo: Nostalgie™ Nexus */
.brand-logo {
    font-family: 'Cinzel', 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #fcd34d; /* złoto */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow:
        0 1px 0 #00000044,
        0 2px 0 #00000033,
        0 4px 0 #00000022,
        0 0 10px #fcd34d,
        0 0 20px #fbbf24,
        0 0 30px #f59e0b;
    transition: all 0.3s ease-in-out;
}

.brand-logo:hover {
    color: #fff8dc;
    text-shadow:
        0 1px 0 #00000044,
        0 2px 0 #00000033,
        0 4px 0 #00000022,
        0 0 15px #fcd34d,
        0 0 30px #fbbf24,
        0 0 45px #f59e0b;
}

.brand-logo span.logo-top {
    display: block;
    font-size: 0.7em;
    color: #fde68a;
    text-shadow: 0 0 5px #fbbf24;
}

.brand-logo span.logo-main {
    display: block;
    font-size: 1.2em;
    line-height: 1.1em;
    color: #fcd34d;
    text-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b;
}

/* Apple-style font for header logo */
.brand-logo .logo-main {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #facc15; /* złoty */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15, 0 0 15px rgba(250,204,21,0.6);
}


/* --- JĘZYKI (FLAGS) --- */
.lang-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.lang-btn {
    text-decoration: none;
    font-size: 1.4rem;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.lang-btn:hover, .lang-btn.active {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* --- POPRAWKA FLAG (OBOK LOGO) --- */
.lang-switcher {
    position: static !important; /* Wyłączamy absolute */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-left: 20px; /* Odstęp od Logo */
    background: transparent !important; /* Bez tła */
    border: none !important; /* Bez ramki */
    padding: 0 !important;
    top: auto; right: auto; /* Reset pozycji */
}

.lang-btn {
    font-size: 1.2rem;
    opacity: 0.6;
    transition: 0.2s;
    text-decoration: none;
    filter: grayscale(100%);
}

.lang-btn:hover, .lang-btn.active {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.2);
}

/* Dostosowanie kontenera nagłówka, żeby elementy były w jednej linii */
.header-container {
    display: flex;
    align-items: center;
    /* Upewniamy się, że logo i flagi nie rozwalają układu */
    flex-wrap: wrap; 
}

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */
/* NOSTALGIE™ VELVET REVEAL (MAYBACH LUXURY)              */
/* ====================================================== */

    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Minimalna wysokość, żeby zawsze było miejsce */
    padding: 80px 0;
    perspective: 1200px; /* Głębia dla subtelnego ruchu */
    background: #000; /* Start z czarnego tła */
    overflow: hidden; /* Ważne dla czystego wyjścia tła */
}

/* 1. TŁO - SUBTELNA, ROSNĄCA MGŁAWICA ZŁOTA */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0; /* Startuje jako niewidzialny punkt */
    height: 0;
    background: radial-gradient(circle, 
        rgba(255, 200, 0, 0.08) 0%, 
        transparent 70%
    );
    border-radius: 50%;
    z-index: -1;
    
    /* Animacja tła: Powolne rośnięcie mgławicy */
    animation: velvetAuraGrowth 10s ease-out forwards;
}

/* 2. LOGO - JEDWABISTE WYŁANIANIE SIĘ I POZOSTAWANIE */
    position: relative;
    z-index: 100 !important;
    display: block;
    opacity: 0; /* Start niewidoczne */
    will-change: transform, filter, opacity; /* Optymalizacja */
    
    /* Animacje:
       1. velvetEntry: 8s - Wyłanianie się i stabilizacja.
       2. subtleShineLoop: 6s - Dyskretne falowanie blasku (startuje po wejściu).
    */
    animation: 
        velvetEntry 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
        subtleShineLoop 6s ease-in-out infinite 8s; 
}

/* --- KLATKI ANIMACJI --- */

/* Tło: Powolny rozrost złotej mgławicy */
@keyframes velvetAuraGrowth {
    0% {
        width: 0; height: 0; opacity: 0;
    }
    30% {
        opacity: 0.3; /* Zaczyna być widoczne */
    }
    100% {
        width: 700px; height: 350px; /* Maksymalny rozmiar */
        opacity: 1; /* Pełna widoczność mgławicy */
        filter: blur(50px);
    }
}

/* Logo: Jedwabiste wyłanianie się z czerni */
@keyframes velvetEntry {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px); /* Lekko z dołu, mniejsze */
        filter: blur(15px) brightness(0.5); /* Rozmyte, ciemne */
    }
    30% {
        opacity: 0.1; /* Minimalnie widoczne */
        filter: blur(10px) brightness(0.7);
    }
    80% {
        opacity: 1;
        transform: scale(1.02) translateY(-5px); /* Lekkie przejechanie */
        filter: blur(0px) brightness(1.2) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)); /* Blask! */
    }
    100% {
        opacity: 1; /* Pozostaje widoczne */
        transform: scale(1) translateY(0);
        filter: brightness(1) drop-shadow(0 0 20px rgba(255, 180, 0, 0.3));
    }
}

/* Po wejściu: Dyskretne falowanie blasku na powierzchni */
@keyframes subtleShineLoop {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(255, 180, 0, 0.3));
        transform: scale(1);
    }
    50% {
        filter: brightness(1.1) drop-shadow(0 0 35px rgba(255, 200, 0, 0.6));
        transform: scale(1.005); /* Bardzo subtelny ruch */
    }
}

/* Hover: Jeszcze więcej luksusu */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: scale(1.03) translateY(-2px);
    filter: brightness(1.3) drop-shadow(0 0 50px rgba(255, 220, 0, 0.9));
}


/* ====================================================== */
/* GAP CLOSER (FIX ODLEGŁOŚCI)                            */
/* ====================================================== */

/* 1. Zmniejszamy obszar kontenera loga */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    /* Pozwalamy elementom zbliżyć się do krawędzi */
    height: auto !important; 
    min-height: 300px !important; /* Zmniejszamy z 400px, ale zostawiamy miejsce na blask */
}

/* 2. AGRESYWNE PODCIĄGNIĘCIE ZEGARA DO GÓRY */
#nostalgie-timer {
    /* To jest klucz: Ujemny margines wciąga element do góry */
    margin-top: -80px !important; 
    
    position: relative;
    z-index: 200; /* Musi być NAD poświatą loga, żeby dało się klikać/widzieć */
    padding-top: 0 !important;
}

/* 3. Ewentualna korekta samego obrazka, żeby nie uciekał */
    margin-bottom: 0 !important;
}


/* ====================================================== */
/* GAP CORRECTION (Trochę niżej)                          */
/* ====================================================== */

#nostalgie-timer {
    /* Zmieniamy z -80px na -40px. 
       To opuści zegar w dół, dając logu trochę oddechu. */
    margin-top: -40px !important; 
}


/* ====================================================== */
/* ====================================================== */

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101; /* Nad logiem */
    pointer-events: auto !important; cursor: pointer !important; /* Nie blokuje klikania */
    
    /* TWORZENIE PROMIENIA ŚWIATŁA */
    /* Przezroczysty -> Biały Błysk -> Przezroczysty */
    background: linear-gradient(
        120deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 215, 0, 0.6) 55%,
        transparent 70%
    );
    background-size: 200% 100%; /* Rozciągamy tło, żeby móc je przesuwać */
    
    /* MAGIA: MASKOWANIE (Światło pokaże się TYLKO na kształcie liter) */
    /* Używamy tego samego obrazka co logo jako maski */
    -webkit-mask-image: url('/assets/img/l2nos.png');
    mask-image: url('/assets/img/l2nos.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* Dopasowanie rozmiaru maski do rozmiaru obrazka w kontenerze */
    -webkit-mask-size: auto; 
    mask-size: auto;

    /* Domyślnie ukryte */
    opacity: 0;
    
    /* ANIMACJA: Czeka 20s, przechodzi, czeka znowu */
    
    /* Opóźnienie startu, żeby nie błyskało podczas wejścia loga */
    animation-delay: 5s; 
}

/* --- KLATKI ANIMACJI --- */
    0% {
        background-position: 200% 0; /* Start po prawej (lub lewej zależnie od kąta) */
        opacity: 0;
    }
    /* PRZEZ 90% CZASU NIC SIĘ NIE DZIEJE (Cisza 18 sekund) */
    90% {
        background-position: 200% 0; 
        opacity: 0;
    }
    /* MOMENT PRZEJŚCIA (Szybki błysk w ostatnich 2 sekundach) */
    90.1% {
        background-position: 200% 0; /* Reset pozycji */
        opacity: 1; /* Włączamy światło */
    }
    100% {
        background-position: -200% 0; /* Przesuwamy w lewo */
        opacity: 0; /* Zanikanie na końcu */
    }
}


/* ====================================================== */
/* TRUE PNG SUN SHEEN (Światło tylko na literach)         */
/* ====================================================== */

/* Wrapper przylega idealnie do obrazka */
.logo-wrapper {
    position: relative;
    display: inline-block; /* To sprawia, że div ma wymiary obrazka inside */
    z-index: 110;
}

/* Warstwa światła */
.logo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto !important; cursor: pointer !important;
    
    /* DEFINICJA ŚWIATŁA: */
    /* Ostry, jasny promień światła */
    background: linear-gradient(
        105deg, 
        transparent 40%, 
        rgba(255, 255, 255, 0.9) 45%, 
        rgba(255, 215, 0, 0.5) 50%, 
        transparent 55%
    );
    background-size: 200% 100%;
    background-position: 150% 0; /* Start poza widokiem */

    /* MASKA: Używamy tego samego obrazka co logo! */
    /* Dzięki temu światło pokaże się TYLKO tam, gdzie są piksele loga */
    -webkit-mask-image: url('/assets/img/l2nos.png');
    mask-image: url('/assets/img/l2nos.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* ANIMACJA: Co 20 sekund */
    animation: trueShine 20s infinite;
    /* Czekamy 6 sekund na start (żeby nie zakłócić wejścia) */
    animation-delay: 6s;
}

@keyframes trueShine {
    0% {
        background-position: 200% 0; /* Po prawej */
        opacity: 0;
    }
    /* DŁUGA PAUZA */
    90% {
        background-position: 200% 0;
        opacity: 0;
    }
    /* SZYBKI PRZEJAZD (BŁYSK) */
    92% {
        opacity: 1; /* Włączamy widoczność promienia */
    }
    98% {
        background-position: -100% 0; /* Przejazd na lewo */
        opacity: 1;
    }
    100% {
        background-position: -100% 0;
        opacity: 0;
    }
}


/* ====================================================== */
/* LOGO LINK FIX (Interaktywność)                         */
/* ====================================================== */

a.logo-wrapper {
    cursor: pointer !important; /* Łapka po najechaniu */
    text-decoration: none !important; /* Brak podkreślenia */
    border: none !important;
    outline: none !important;
    transition: transform 0.3s ease; /* Płynne wciskanie */
}

/* Efekt wciśnięcia przy kliknięciu */
a.logo-wrapper:active {
    transform: scale(0.98);
}


/* NOSTALGIE™ UNIFIED WRAPPER */
.nostalgie-login-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(255,215,0,0.02) 0%, transparent 70%);
}

.support-block{
    max-width:520px;
    margin:0 auto;
    text-align:center;
}

.support-strong{
    font-weight:600;
    margin-top:20px;
}

.support-percent{
    margin-top:20px;
    font-size:18px;
    opacity:0.9;
}

.support-bar-wrap{
    margin-top:20px;
}

.support-bar-bg{
    width:100%;
    height:20px;
    background:rgba(255,255,255,0.08);
    border-radius:10px;
    overflow:hidden;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
}

.support-bar-fill{
    height:100%;
    border-radius:10px;
    transition:width 0.8s ease;
    box-shadow:0 0 12px currentColor;
}


/* --- ONE COLUMN LAYOUT --- */
.nostalgie-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

/* nagłówek */
.n-header{
    text-align:center;
    margin-bottom:40px;
}

.n-title{
    font-size:34px;
    font-weight:700;
    margin-bottom:10px;
}

.n-subtitle{
    font-size:18px;
    opacity:0.8;
}

/* bloki tekstowe */
.n-text-block{
    max-width:700px;
    margin-bottom:35px;
    line-height:1.9;
    font-size:17px;
}

/* lista zasad */
.n-text-block p{
    margin-bottom:12px;
}

/* sekcja statusu */
.n-status-active{
    margin-top:20px;
    margin-bottom:15px;
}


/* --- NOSTALGIE™ HEROES SYSTEM --- */

.hero-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* PODIUM STYLES */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.podium-card {
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 260px;
}

.podium-card:hover {
    transform: translateY(-10px);
}

.podium-card.place-1 {
    order: 2;
    width: 300px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
    z-index: 2;
}

.podium-card.place-2 {
    order: 1;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(192, 192, 192, 0.4);
}

.podium-card.place-3 {
    order: 3;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(205, 127, 50, 0.4);
}

.podium-avatar-wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.place-1 .podium-avatar-wrap {
    width: 150px;
    height: 150px;
    border-color: #ffd700;
}

.podium-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-rank {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: 800;
    background: #111;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #333;
}

.place-1 .podium-rank { color: #ffd700; border-color: #ffd700; }
.place-2 .podium-rank { color: #c0c0c0; border-color: #c0c0c0; }
.place-3 .podium-rank { color: #cd7f32; border-color: #cd7f32; }

.podium-name { font-size: 1.4rem; font-weight: bold; color: #fff; margin-bottom: 5px; }
.place-1 .podium-name { font-size: 1.8rem; color: #ffd700; text-transform: uppercase; letter-spacing: 1px; }

.podium-clan { color: #888; font-size: 0.9rem; margin-bottom: 15px; }

.podium-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.stat-pill { background: rgba(0,0,0,0.4); padding: 5px 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; display:flex; align-items:center; gap:5px;}
.stat-pill.pvp { color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.stat-pill.pk { color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }

/* APPLE STYLE RACE BADGE */
.race-badge.apple-style {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.race-badge.apple-style img {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

/* LIST TABLE STYLES */
.ranking-list-container {
    background: rgba(10, 10, 12, 0.6);
    border-radius: 15px;
    border: 1px solid #333;
    overflow: hidden;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    text-align: left;
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-table td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}

.ranking-table tr:hover td {
    background: rgba(255,255,255,0.02);
}

.rank-num { font-weight: bold; color: #666; font-family: monospace; font-size: 1.1rem; }

.player-mini-flex { display: flex; align-items: center; gap: 12px; }
.mini-avatar { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid #444; }
.player-meta { display: flex; flex-direction: column; }
.p-name { color: #fff; font-weight: 600; font-size: 0.95rem; }
.p-clan { color: #666; font-size: 0.8rem; }

/* APPLE STYLE MINI ICON */
.race-icon-apple {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    vertical-align: middle;
}

.lvl-cell { font-weight: bold; color: #ffd700; }
.stats-cell { font-family: monospace; font-size: 0.9rem; }
.pvp-txt { color: #4ade80; }
.pk-txt { color: #f87171; }

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.status-badge.on { background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.status-badge.off { background: rgba(255, 255, 255, 0.05); color: #666; border: 1px solid #333; }

/* RESPONSYWNOŚĆ */
@media (max-width: 900px) {
    .podium-container { flex-direction: column; align-items: center; }
    .podium-card.place-1 { order: 1; width: 100%; }
    .podium-card.place-2 { order: 2; width: 100%; }
    .podium-card.place-3 { order: 3; width: 100%; }
}

/* --- DASHBOARD V2 STYLES --- */
.dashboard-core { max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* Char Selector */
.char-selector-bar { display: flex; gap: 10px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 10px; }
.char-chip { background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 20px; text-decoration: none; color: #888; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; transition: 0.3s; }
.char-chip:hover { background: rgba(255,255,255,0.1); }
.char-chip.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #ffd700; }
.lvl-badge { background: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: 300px 1fr 350px; gap: 20px; }
@media(max-width: 1000px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dash-col { background: rgba(18, 18, 20, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; }

/* Profile Card */
.profile-card { padding: 30px 20px; text-align: center; position: relative; }
.profile-card.premium-glow { border: 1px solid rgba(255, 215, 0, 0.5); box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); }
.vip-badge { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; color: #ffd700; border: 1px solid #ffd700; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px; }

.avatar-uploader { width: 120px; height: 120px; margin: 0 auto 15px; border-radius: 50%; position: relative; cursor: pointer; overflow: hidden; border: 3px solid rgba(255,255,255,0.1); }
.profile-card.premium-glow .avatar-uploader { border-color: #ffd700; }
.main-avatar { width: 100%; height: 100%; object-fit: cover; }
.upload-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; color: #fff; font-size: 0.8rem; }
.avatar-uploader:hover .upload-overlay { opacity: 1; }

.char-name { margin: 10px 0 5px; font-size: 1.5rem; color: #fff; }
.char-race { color: #888; font-size: 0.9rem; margin-bottom: 25px; }

.profile-details { text-align: left; }
.detail-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 10px 0; }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: #666; font-size: 0.9rem; }
.detail-row .value { color: #eee; font-weight: 600; font-size: 0.9rem; }
.value.on { color: #4ade80; } .value.off { color: #666; } .value.gold { color: #ffd700; }

/* Stats Card */
.stats-card { padding: 25px; }
.card-title { margin-top: 0; color: #ccc; font-weight: 400; font-size: 1rem; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }

.vitals-circles { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; }
.vital-circle { width: 100px; position: relative; text-align: center; }
.circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; }
.circle-bg { fill: none; stroke: #222; stroke-width: 2.5; }
.circle { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 1s ease; }
.circular-chart.red .circle { stroke: #ff453a; }
.circular-chart.blue .circle { stroke: #0a84ff; }
.vital-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 1.1rem; color: #fff; }
.vital-label { margin-top: 5px; font-size: 0.8rem; color: #888; }

.combat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.combat-box { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.c-val { display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 2px; }
.c-val.green { color: #4ade80; } .c-val.red { color: #ff453a; } .c-val.gray { color: #aaa; } .c-val.gold { color: #ffd700; }
.c-lbl { font-size: 0.75rem; color: #666; text-transform: uppercase; }

.vitality-bar-wrap { margin-top: auto; }
.v-label { font-size: 0.8rem; color: #aaa; margin-bottom: 5px; }
.v-track { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); width: 0; }

/* Oracle Card */
.oracle-card { display: flex; flex-direction: column; height: 600px; }
.oracle-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.oracle-header h3 { margin: 0; color: #ffd700; font-size: 1rem; letter-spacing: 1px; }

.oracle-interface { padding: 20px; display: flex; flex-direction: column; height: 100%; }
.search-wrap input { width: 100%; background: #111; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.search-wrap input:focus { border-color: #ffd700; outline: none; }

.filter-wrap { display: flex; gap: 10px; margin-bottom: 15px; }
.f-btn { flex: 1; padding: 8px; border: 1px solid #333; background: transparent; color: #666; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.3s; }
.f-btn.active { border-color: #ffd700; color: #ffd700; background: rgba(255,215,0,0.05); }

.sort-check { font-size: 0.8rem; color: #888; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; cursor: pointer; }

.oracle-results-box { flex: 1; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.05); }
.empty-state { text-align: center; color: #555; margin-top: 50px; font-size: 0.9rem; }

.oracle-result-row { background: rgba(255,255,255,0.03); padding: 10px; border-radius: 6px; margin-bottom: 8px; border-left: 2px solid transparent; }
.oracle-result-row:hover { background: rgba(255,255,255,0.06); }
.or-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.or-item { color: #fff; font-weight: 600; font-size: 0.9rem; }
.or-lvl { font-size: 0.75rem; }
.or-sub { font-size: 0.8rem; color: #888; margin-bottom: 4px; }
.or-stats { display: flex; justify-content: space-between; font-size: 0.75rem; }

/* Oracle Locked */
.oracle-card.locked { opacity: 0.7; }
.oracle-lock-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.gold-text { color: #ffd700; margin-bottom: 20px; }
.btn-upgrade { background: #ffd700; color: #000; padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: bold; transition: 0.3s; }
.btn-upgrade:hover { box-shadow: 0 0 15px rgba(255,215,0,0.4); }


/* --- NOSTALGIE COMPACT DASHBOARD --- */

.dashboard-core.compact-mode {
    max-width: 1200px;
    margin: 20px auto;
    font-size: 0.85rem; /* Mniejsza czcionka bazowa */
}

/* Header & Title */
.dash-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.nostalgie-title { font-size: 1.4rem; color: #fff; margin: 0; font-family: 'Cinzel', serif; letter-spacing: 1px; }
.nostalgie-title .accent { color: #ffd700; }

.char-scroller { display: flex; gap: 6px; }
.char-pill { background: rgba(255,255,255,0.05); padding: 5px 12px; border-radius: 15px; color: #aaa; text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; transition:0.2s; }
.char-pill:hover, .char-pill.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #ffd700; }
.char-pill .lvl { background: #000; padding: 1px 5px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }

/* Grid Layout */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 260px 1fr 300px; /* Węższe kolumny */
    gap: 15px; 
    align-items: start; /* Żeby karty nie rozciągały się na siłę */
}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dash-card { background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(8px); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); padding: 15px; overflow: hidden; }

/* Profile Compact */
.avatar-area { width: 90px; height: 90px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid #444; position: relative; cursor: pointer; overflow: hidden; }
.vip-glow .avatar-area { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.2); }
.profile-img { width: 100%; height: 100%; object-fit: cover; }
.edit-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:0.3s; color:#fff; font-size:0.7rem; }
.avatar-area:hover .edit-overlay { opacity:1; }
.vip-tag { position: absolute; bottom: 0; width: 100%; background: #ffd700; color: #000; font-size: 0.6rem; font-weight: bold; text-align: center; }

.p-name { text-align: center; margin: 0; font-size: 1.2rem; color: #fff; }
.p-sub { text-align: center; font-size: 0.8rem; color: #888; }
.p-sub.clan { color: #aaa; margin-bottom: 15px; }

.p-details { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }
.pd-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.pd-row span { color: #666; }
.pd-row b { color: #eee; font-weight: 500; }
.pd-row b.on { color: #4ade80; } .pd-row b.gold { color: #ffd700; }

/* Stats Compact */
.c-head { margin: 0 0 15px 0; font-size: 0.9rem; color: #ccc; border-bottom: 1px solid #333; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

.vitals-row { display: flex; gap: 10px; margin-bottom: 15px; }
.vital-mini { flex: 1; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 6px; }
.vm-val { font-size: 1rem; font-weight: bold; color: #fff; text-align: right; }
.vm-lbl { font-size: 0.7rem; color: #666; }
.vm-bar { height: 4px; background: #222; margin: 4px 0; border-radius: 2px; }
.hp .vm-bar div { height: 100%; background: #ff453a; }
.mp .vm-bar div { height: 100%; background: #0a84ff; }

.stats-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.s-box { background: rgba(255,255,255,0.03); padding: 8px; border-radius: 4px; text-align: center; }
.s-val { display: block; font-weight: bold; font-size: 1rem; }
.s-lbl { font-size: 0.7rem; color: #666; text-transform: uppercase; }
.s-val.g { color: #4ade80; } .s-val.r { color: #ff453a; } .s-val.y { color: #ffd700; }

.eco-bar { display: flex; gap: 10px; margin-bottom: 10px; }
.eco-item { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 6px; border: 1px solid rgba(255,215,0,0.1); }
.eco-icon { font-size: 1.2rem; }
.eco-val { display: block; color: #ffd700; font-weight: bold; font-family: monospace; font-size: 0.95rem; }
.eco-lbl { font-size: 0.7rem; color: #888; }

.vitality-mini { font-size: 0.75rem; color: #888; }
.v-track { height: 4px; background: #222; margin-top: 4px; border-radius: 2px; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); }

/* ORACLE FIX - SZTYWNA WYSOKOŚĆ */
.oracle-tools { display: flex; gap: 5px; margin-bottom: 10px; }
.oracle-tools input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; }
.or-btns { display: flex; gap: 2px; }
.o-btn { background: #222; border: 1px solid #333; color: #666; padding: 0 10px; font-size: 0.7rem; cursor: pointer; transition: 0.2s; }
.o-btn.active { background: #ffd700; color: #000; font-weight: bold; border-color: #ffd700; }
.or-opt { font-size: 0.75rem; color: #888; margin-bottom: 10px; }

/* FIX DLA ORAKLE - To zapobiega "sypaniu" się wyglądu */
.oracle-list { 
    height: 320px; /* Sztywna wysokość */
    overflow-y: auto; /* Pasek przewijania */
    background: rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 6px; 
    padding: 5px;
}

.or-row { background: rgba(255,255,255,0.03); padding: 6px; border-radius: 4px; margin-bottom: 4px; font-size: 0.8rem; }
.or-row:hover { background: rgba(255,255,255,0.08); }
.or-top { display: flex; justify-content: space-between; }
.or-item { color: #fff; font-weight: 600; }
.or-mid { color: #888; font-size: 0.75rem; margin: 2px 0; }
.or-bot { display: flex; justify-content: space-between; font-size: 0.75rem; }
.or-empty { text-align: center; color: #555; margin-top: 50px; font-size: 0.8rem; }

.lock-info { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #666; }
.btn-tiny { background: #ffd700; color: #000; padding: 4px 12px; border-radius: 10px; text-decoration: none; font-size: 0.75rem; font-weight: bold; margin-top: 10px; }


/* --- DASHBOARD SHOP-STYLE OVERRIDE --- */

.shop-style-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
}

.shop-header { margin-bottom: 40px; }
.n-title { font-family: 'Cinzel', serif; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 15px rgba(255,215,0,0.3); }
.n-subtitle { color: #888; font-family: 'Inter', sans-serif; font-size: 0.9rem; letter-spacing: 1px; margin-top: 5px; text-transform: uppercase; }

/* Tabs like Shop Categories */
.char-tabs-wrapper { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.shop-tab { 
    background: rgba(20, 20, 25, 0.6); 
    border: 1px solid rgba(255,255,255,0.1); 
    padding: 10px 20px; 
    border-radius: 4px; 
    text-decoration: none; 
    color: #aaa; 
    transition: 0.3s; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
}
.shop-tab:hover, .shop-tab.active { 
    border-color: #b1922e; 
    background: linear-gradient(180deg, rgba(177, 146, 46, 0.2) 0%, rgba(0,0,0,0) 100%); 
    color: #ffd700; 
    box-shadow: 0 0 15px rgba(177, 146, 46, 0.2);
}
.lvl-tag { font-family: 'Inter', sans-serif; font-size: 0.7rem; background: #000; padding: 2px 6px; border-radius: 2px; color: #fff; }

/* Cards like Shop Items */
.shop-grid-layout { display: grid; grid-template-columns: 300px 1fr 320px; gap: 25px; align-items: start; }
@media (max-width: 1000px) { .shop-grid-layout { grid-template-columns: 1fr; } }

.nostalgie-card {
    background: rgba(18, 18, 22, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; /* Ostrzejsze rogi jak w shopie */
    padding: 25px;
    position: relative;
    overflow: hidden;
}
.nostalgie-card.premium-border { border-color: #b1922e; box-shadow: inset 0 0 20px rgba(177, 146, 46, 0.1); }

/* Typography */
.cinzel-title { font-family: 'Cinzel', serif; font-size: 1.6rem; margin: 10px 0 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.inter-text { font-family: 'Inter', sans-serif; }
.card-header-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: #b1922e; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin: 0 0 20px 0; letter-spacing: 1px; }

/* Profile Specifics */
.profile-top { text-align: center; margin-bottom: 20px; }
.avatar-frame { width: 120px; height: 120px; margin: 0 auto; border: 2px solid #333; padding: 3px; border-radius: 50%; cursor: pointer; position: relative; transition: 0.3s; }
.avatar-frame:hover { border-color: #ffd700; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-edit { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.6rem; text-align: center; padding: 2px 0; }
.sub-info { color: #888; font-size: 0.85rem; }
.sub-info.clan-info { color: #aaa; margin-top: 2px; }

.profile-data-list .data-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.03); padding: 8px 0; font-size: 0.9rem; }
.stat-on { color: #4ade80; font-weight: bold; }
.stat-off { color: #666; }
.stat-gold { color: #ffd700; font-family: monospace; }
.stat-mono { color: #ccc; font-family: monospace; }
.premium-badge-row { margin-top: 15px; background: rgba(177, 146, 46, 0.2); color: #ffd700; text-align: center; padding: 8px; font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; border: 1px solid #b1922e; }

/* Stats Specifics */
.vitals-display { display: flex; gap: 15px; margin-bottom: 25px; }
.vital-block { flex: 1; }
.vital-val { text-align: right; font-weight: bold; font-family: monospace; font-size: 1.1rem; margin-bottom: 5px; }
.vital-val.red { color: #ff453a; } .vital-val.blue { color: #0a84ff; }
.vital-bar-bg { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.vital-bar-fill { height: 100%; }
.vital-bar-fill.red { background: #ff453a; } .vital-bar-fill.blue { background: #0a84ff; }
.vital-lbl { font-size: 0.7rem; color: #666; margin-top: 5px; text-transform: uppercase; }

.stats-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px; }
.stat-cell { background: rgba(0,0,0,0.3); padding: 10px; border: 1px solid rgba(255,255,255,0.05); text-align: center; }
.s-val { display: block; font-size: 1.2rem; font-weight: bold; font-family: monospace; }
.s-val.green { color: #4ade80; } .s-val.red { color: #ff453a; } .s-val.gold { color: #ffd700; } .s-val.white { color: #fff; }
.s-lbl { font-size: 0.7rem; color: #666; text-transform: uppercase; margin-top: 3px; }

.economy-strip { display: flex; gap: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
.eco-unit { flex: 1; display: flex; align-items: center; gap: 10px; }
.eco-i { font-size: 1.2rem; }
.eco-n { color: #ffd700; font-family: monospace; font-size: 1rem; font-weight: bold; display: block; }
.eco-l { color: #888; font-size: 0.75rem; }

.vitality-strip { margin-top: 25px; }
.v-lbl { font-size: 0.7rem; color: #666; margin-bottom: 5px; }
.v-track { height: 4px; background: #222; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); }

/* Oracle Shop Style */
.oracle-search-bar input { width: 100%; background: #111; border: 1px solid #333; color: #fff; padding: 10px; font-family: 'Inter', sans-serif; margin-bottom: 10px; }
.oracle-controls { display: flex; gap: 5px; align-items: center; margin-bottom: 15px; }
.shop-btn-small { background: transparent; border: 1px solid #444; color: #888; padding: 5px 10px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.75rem; transition: 0.3s; }
.shop-btn-small:hover, .shop-btn-small.active { border-color: #ffd700; color: #ffd700; background: rgba(177, 146, 46, 0.1); }
.lvl-sort { margin-left: auto; font-size: 0.75rem; color: #666; }

.oracle-results-container { height: 350px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 5px; border: 1px solid rgba(255,255,255,0.05); }
.or-placeholder { padding: 40px; text-align: center; color: #555; font-size: 0.85rem; }
.locked-content { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; }
.lock-icon { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; }


/* --- NOSTALGIE COIN (NC) ANIMATIONS --- */

.nc-coin-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding-right: 5px; /* Miejsce na szufladkę jak się schowa */
    margin-right: 15px;
}

/* 1. STATE: POOR (0 Bilans) */
.nc-coin-wrapper.inactive-poor {
    filter: grayscale(100%) contrast(0.8) brightness(0.7);
    cursor: pointer !important;
    pointer-events: auto !important; cursor: pointer !important; /* Opcjonalne: czy da się klikać jak puste? */
}
.inactive-poor .nc-drawer {
    display: none; /* Szuflada schowana na stałe */
}

/* 2. STATE: RICH (Bilans > 0) */
.nc-coin-wrapper.active-rich {
    cursor: pointer;
}

/* MONETA (COIN) */
.nc-coin-body {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b1922e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,255,255,0.4);
    border: 1px solid #d4af37;
    z-index: 2; /* Nad szufladą */
    position: relative;
}

/* KONICZYNKA W ŚRODKU */
.nc-clover {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* SZUFLADKA (DRAWER) */
.nc-drawer {
    background: linear-gradient(90deg, #111 0%, #222 100%);
    height: 24px;
    border-radius: 0 12px 12px 0;
    margin-left: -16px; /* Chowa się pod monetę */
    padding-left: 20px; /* Offset na monetę */
    padding-right: 0;
    display: flex;
    align-items: center;
    border: 1px solid #444;
    border-left: none;
    overflow: hidden;
    max-width: 0; /* START STATE: Zamknięta */
    opacity: 0;
    
    /* ANIMACJA SZUFLADKI: Wyjeżdża po załadowaniu */
    animation: drawer-slide-out 1s ease-out 0.5s forwards;
}

.nc-content {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
}

.nc-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.nc-value {
    color: #ffd700;
    font-weight: bold;
    font-family: monospace;
    font-size: 0.9rem;
}

/* --- ANIMACJE (KEYFRAMES) --- */

/* 1. Intro Monety (Obrót + Zoom) */
.active-rich .nc-coin-body {
    animation: coin-intro 2.5s ease-in-out forwards;
}

/* 2. Shine (Błysk co 15s) */
.active-rich .nc-coin-body::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg) translate(-100%, 0);
    opacity: 0;
    
    /* 15s pętla: 1s shine, 14s wait */
    animation: coin-shine 15s infinite ease-in-out 3s; 
}

@keyframes drawer-slide-out {
    0% { max-width: 0; opacity: 0; }
    100% { max-width: 150px; opacity: 1; padding-right: 12px; }
}

@keyframes coin-intro {
    0% { transform: rotate(0deg) scale(0.5); }
    50% { transform: rotate(720deg) scale(1.3); } /* Over-zoom */
    100% { transform: rotate(1080deg) scale(1); } /* 3 obroty i normalny rozmiar */
}

@keyframes coin-shine {
    0% { transform: rotate(30deg) translate(-100%, 0); opacity: 0; }
    5% { opacity: 0.5; }
    10% { transform: rotate(30deg) translate(100%, 0); opacity: 0; }
    100% { transform: rotate(30deg) translate(100%, 0); opacity: 0; }
}



/* --- NOSTALGIE GOLD COIN SYSTEM (FINAL CLEAN) --- */

/* 1. KONTENER IZOLUJĄCY */
.nc-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    z-index: 1000; /* Musi być nad menu */
    perspective: 1000px; /* Głębia 3D */
    overflow: visible !important; /* Kluczowe! Inaczej utnie 3D */
}

.nc-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transform-style: preserve-3d;
    cursor: pointer;
}

/* Stan Biedny (Szary) */
.state-poor { filter: grayscale(100%) contrast(0.8); cursor: pointer !important; pointer-events: auto !important; cursor: pointer !important; }
.state-poor .nc-drawer { display: none; }

/* 2. FIZYKA MONETY (OBRÓT I POZYCJA) */
.nc-coin {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 8px auto; /* Wyśrodkowanie w wrapperze 60px */
    transform-style: preserve-3d;
    
    /* START: Bokiem (Profil) - widać grubość */
    transform: rotateY(-65deg);
    
    /* Płynna fizyka */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10; /* Nad szufladą */
}

/* HOVER: Wyprostowanie do twarzy + Zoom + Przybliżenie */
.state-rich:hover .nc-coin {
    transform: rotateY(0deg) scale(1.2) translateZ(10px);
}

/* 3. GRUBOŚĆ MONETY (STACK LAYERS) */
/* Tworzymy 6 warstw przesuniętych o 1px, co daje efekt litej bryły */
.edge {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    
    /* Ząbkowana krawędź (Milled Edge) */
    background: repeating-linear-gradient(
        45deg,
        #b8860b 0px,
        #ffd700 1px,
        #8b4513 2px
    );
    border: 1px solid #daa520;
}

.e1 { transform: translateZ(-1px); }
.e2 { transform: translateZ(-2px); }
.e3 { transform: translateZ(-3px); }
.e4 { transform: translateZ(-4px); }
.e5 { transform: translateZ(-5px); }
.e6 { transform: translateZ(-6px); background: #5e4b20; } /* Tył ciemny */

/* 4. TWARZ (AWERS) */
.face {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    backface-visibility: hidden;
    
    /* Bogate Złoto */
    background: radial-gradient(ellipse at center, #fff8db 0%, #ffd700 50%, #b8860b 100%);
    border: 2px solid #ffd700;
    box-shadow: inset 0 0 5px rgba(139, 69, 19, 0.6); /* Wewnętrzny cień */
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Żeby błysk nie wyjechał */
}

.face.front { transform: translateZ(0.5px); } /* Lekko przed krawędzią */
.face.back  { transform: translateZ(-6.5px) rotateY(180deg); }

/* 5. GRAWERUNEK (Tekst wklęsły) */
.ring-engrave {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1px dashed rgba(184, 134, 11, 0.4); /* Ozdobny otok */
}

.txt-n, .txt-c {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 6px;
    color: #a07315; /* Ciemne złoto */
    letter-spacing: 1px;
    
    /* Efekt wyrycia (Inset Shadow) */
    text-shadow: 
        0 1px 0 rgba(255,255,255,0.5), 
        0 -1px 0 rgba(0,0,0,0.8);
}
.txt-n { top: 4px; }
.txt-c { bottom: 4px; }

.clover {
    font-size: 20px;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.5)) drop-shadow(0 -1px 1px rgba(0,0,0,0.5));
    margin-top: -1px;
}

/* 6. POŁYSK (SHINE) - Tylko na tarczy */
.glare {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 60%
    );
    animation: gold-shine 10s infinite linear; /* Błysk co 10s */
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes gold-shine {
    0% { transform: translate(-100px, -100px); opacity: 0; }
    20% { opacity: 1; }
    40% { transform: translate(100px, 100px); opacity: 0; }
    100% { opacity: 0; }
}

/* 7. SZUFLADKA (DRAWER) - Pozycjonowanie absolutne względem wrapper */
.nc-drawer {
    position: absolute;
    left: 30px; /* Startuje ze środka monety */
    top: 50%;
    transform: translateY(-50%) translateZ(-20px); /* Fizycznie pod spodem */
    
    height: 24px;
    background: linear-gradient(90deg, #111, #222);
    border: 1px solid #444;
    border-radius: 0 12px 12px 0;
    
    display: flex;
    align-items: center;
    padding-left: 20px; /* Margines na monetę */
    padding-right: 12px;
    white-space: nowrap;
    z-index: 1; /* Pod monetą */
    
    /* Animacja wyjazdu */
    width: 0;
    opacity: 0;
    overflow: hidden;
    animation: drawer-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

@keyframes drawer-pop {
    to { width: auto; min-width: 80px; opacity: 1; }
}

.lbl { font-size: 8px; color: #666; margin-right: 5px; font-weight: bold; }
.val { font-size: 11px; color: #ffd700; font-family: monospace; font-weight: bold; text-shadow: 0 0 5px rgba(255,215,0,0.4); }


/* ================= HERO CLEAN HUD ================= */

.hero-clean {
    position: relative;
}

.hero-hud {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    padding: 14px 50px;
    border-radius: 60px;
    background: rgba(15,15,20,0.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    color: #fff;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

.hero-hud .status-dot {
    font-size: 18px;
    margin-right: 8px;
}

.hero-hud.online .status-dot {
    color: #00ff88;
}

.hero-hud.offline .status-dot {
    color: #ff4444;
}

.hero-hud .players {
    color: #ffd700;
    font-weight: 700;
}


@keyframes onlinePulse {
    0%   { box-shadow: 0 0 0 rgba(0,255,120,0.0); }
    50%  { box-shadow: 0 0 30px rgba(0,255,120,0.6); }
    100% { box-shadow: 0 0 0 rgba(0,255,120,0.0); }
}

.hero-hud.online {
    animation: onlinePulse 2.5s infinite;
}


/* ===== EPIC HERO UPGRADE ===== */

/* 🔥 Złota aura z centrum */
.hero-clean{
    position:relative;
    overflow:hidden;
}
.hero-clean::before{
    content:"";
    position:relative;
    inset:-20%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,215,120,0.35), transparent 55%),
        radial-gradient(circle at 50% 60%, rgba(255,180,60,0.25), transparent 65%);
    filter:blur(60px);
    animation:heroAura 8s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}
@keyframes heroAura{
    0%{opacity:.6; transform:scale(1);}
    50%{opacity:1; transform:scale(1.05);}
    100%{opacity:.6; transform:scale(1);}
}

/* 💎 Mocny glow pod logo */
.hero-clean img{
    position:relative;
    z-index:2;
    filter:drop-shadow(0 0 40px rgba(255,215,120,0.8))
           drop-shadow(0 0 80px rgba(255,180,60,0.4));
}

/* ⚡ Shimmer na rates */
.hero-clean div:last-of-type{
    position:relative;
    display:inline-block;
}
.hero-clean div:last-of-type::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform:skewX(-25deg);
    animation:rateShimmer 6s infinite;
}
@keyframes rateShimmer{
    0%{left:-120%;}
    100%{left:150%;}
}

/* 🛡️ HUD metal glass */
.hero-hud{
    background:linear-gradient(180deg, rgba(25,25,30,0.85), rgba(15,15,20,0.75));
    border:1px solid rgba(255,215,120,0.4);
    box-shadow:
        0 0 30px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(255,215,120,0.08);
}

/* 🌀 Slow pulse */
@keyframes hudPulse{
    0%{box-shadow:0 0 0 rgba(255,215,120,0);}
    50%{box-shadow:0 0 35px rgba(255,215,120,0.5);}
    100%{box-shadow:0 0 0 rgba(255,215,120,0);}
}
.hero-hud.online{
    animation:hudPulse 3.5s infinite;
}


/* ===== CINEMATIC DEPTH BOOST ===== */

/* 🌌 Delikatna winieta */
.hero-clean::after{
    content:"";
    position:relative;
    inset:0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.6) 100%);
    pointer-events:none;
    z-index:1;
}

/* ✨ Cząsteczki światła */
.hero-clean .light-particles{
    position:relative;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}
.hero-clean .light-particles span{
    position:relative;
    width:4px;
    height:4px;
    background:rgba(255,220,120,0.8);
    border-radius:50%;
    box-shadow:0 0 10px rgba(255,215,120,0.9);
    animation:floatParticle 12s linear infinite;
    opacity:0;
}
@keyframes floatParticle{
    0%{transform:translateY(40px) scale(0.5); opacity:0;}
    20%{opacity:1;}
    80%{opacity:1;}
    100%{transform:translateY(-600px) scale(1); opacity:0;}
}

/* 🔥 Mocniejszy fokus logo */
.hero-clean img{
    animation:logoBreath 6s ease-in-out infinite;
}
@keyframes logoBreath{
    0%{transform:scale(1);}
    50%{transform:scale(1.04);}
    100%{transform:scale(1);}
}

/* 🌟 Głębia tekstu rates */
.hero-clean div:last-of-type{
    text-shadow:
        0 0 15px rgba(255,215,120,0.6),
        0 0 30px rgba(255,180,60,0.4);
}



/* ================= HERO CINEMATIC BOOST ================= */

/* 🔥 GŁĘBOKA ZŁOTA AURA Z CENTRUM */
.hero-clean {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, rgba(212,175,55,0.35), transparent 60%),
        radial-gradient(circle at 50% 60%, rgba(255,215,120,0.15), transparent 70%);
}

/* ✨ Delikatne cząsteczki */
.hero-clean::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,215,120,0.8) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.08;
    pointer-events: auto !important; cursor: pointer !important;
    animation: heroParticles 40s linear infinite;
}

@keyframes heroParticles {
    from { background-position: 0 0; }
    to   { background-position: 0 1000px; }
}

/* 💎 MOCNY ZŁOTY GLOW POD LOGO */
.hero-clean img {
    filter:
        drop-shadow(0 0 25px rgba(255,215,120,0.6))
        drop-shadow(0 0 60px rgba(212,175,55,0.4));
}

/* ⚡ SHIMMER NA RATES BAR */
.hero-clean div:last-of-type {
    position: relative;
    overflow: hidden;
}

.hero-clean div:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );
    transform: skewX(-20deg);
    animation: heroShimmer 6s infinite;
}

@keyframes heroShimmer {
    0%   { left: -120%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}

/* 🛡️ HUD TAKTYCZNY */
.hero-hud {
    background: linear-gradient(180deg, rgba(25,25,30,0.8), rgba(15,15,20,0.8));
    border: 1px solid rgba(212,175,55,0.4);
    box-shadow:
        0 0 25px rgba(212,175,55,0.25),
        inset 0 0 15px rgba(255,255,255,0.05);
}

/* 🌀 SUBTELNY SLOW PULSE */
.hero-hud.online {
    animation: onlinePulse 3s infinite;
}



/* ================= HERO ULTRA REFINEMENT ================= */

/* 🌀 Subtelne unoszenie logo (slow float) */
.hero-clean img {
    animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}


/* 🌫 Ambient gold fog (miękka mgła głębi) */
.hero-clean::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,215,120,0.15), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(212,175,55,0.12), transparent 70%);
    filter: blur(80px);
    opacity: 0.6;
    pointer-events: auto !important; cursor: pointer !important;
}


/* ✨ Mikro-metaliczny shimmer HUD */
.hero-hud::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transform: skewX(-25deg);
    animation: hudShimmer 8s infinite;
}

@keyframes hudShimmer {
    0%   { left: -150%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}


/* 💎 Głębszy złoty tekst rates */
.hero-clean div:last-of-type {
    text-shadow:
        0 0 8px rgba(255,215,120,0.6),
        0 0 20px rgba(212,175,55,0.4);
}


/* 🔥 Delikatny vignette (cinematic focus) */
.hero-clean {
    box-shadow:
        inset 0 0 180px rgba(0,0,0,0.85);
}



/* ================= CINEMATIC HERO INTRO ================= */

.hero-clean {
    opacity: 0;
    transform: scale(1.04);
    animation: heroIntro 1.8s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes heroIntro {
    0% {
        opacity: 0;
        transform: scale(1.08);
        filter: blur(10px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Cinematic fade logo */
.hero-clean img {
    opacity: 0;
    animation: logoFadeIn 1.6s ease forwards;
    animation-delay: .4s;
}

@keyframes logoFadeIn {
    to { opacity: 1; }
}


/* HUD soft fade */
.hero-hud {
    opacity: 0;
    transform: translateY(-20px);
    animation: hudFadeIn 1.4s ease forwards;
    animation-delay: .6s;
}

@keyframes hudFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Rates bar fade */
.hero-clean div:last-of-type {
    opacity: 0;
    transform: translateY(20px);
    animation: ratesFade 1.6s ease forwards;
    animation-delay: .8s;
}

@keyframes ratesFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== FIX: SHIMMER ONLY INSIDE STATUS HUD ===== */

.hero-hud {
    position: relative;
    overflow: hidden !important;
}

.hero-hud::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: hudShimmer 4s infinite;
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes hudShimmer {
    0%   { left: -60%; }
    100% { left: 120%; }
}


/* ===== TUNE: SOFT SHIMMER (LESS INTENSE) ===== */

.hero-hud::after {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.07) 50%,
        transparent 100%
    ) !important;
    animation: hudShimmerSoft 8s infinite !important;
    opacity: 0.6;
}

@keyframes hudShimmerSoft {
    0%   { left: -80%; }
    100% { left: 140%; }
}


/* ===== SOFT SHIMMER – RATES BAR ONLY ===== */

.hero-clean > div:last-of-type {
    position: relative;
    overflow: hidden;
}

.hero-clean > div:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 215, 120, 0.12) 50%,
        transparent 100%
    );
    animation: ratesShimmerSoft 10s infinite;
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes ratesShimmerSoft {
    0%   { left: -120%; }
    100% { left: 160%; }
}


/* ===== BETA COUNTDOWN ===== */

.beta-countdown-wrapper{
    text-align:center;
    padding:70px 20px 90px;
}

.beta-live{
    color:#00ff88;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:20px;
    animation: betaPulse 3s infinite;
}

@keyframes betaPulse{
    0%{opacity:.6}
    50%{opacity:1}
    100%{opacity:.6}
}

.beta-timer-title{
    font-family:'Cinzel', serif;
    font-size:32px;
    color:#ffd700;
    margin-bottom:15px;
}

.beta-timer-desc{
    color:#ccc;
    margin-bottom:35px;
    font-size:18px;
}

.beta-countdown{
    display:flex;
    justify-content:center;
    gap:35px;
}

.beta-countdown div{
    background:rgba(20,20,25,.65);
    padding:20px 25px;
    border-radius:12px;
    border:1px solid rgba(255,215,0,.25);
    min-width:80px;
}

.beta-countdown span{
    display:block;
    font-size:32px;
    font-weight:700;
    color:#fff;
}

.beta-countdown label{
    font-size:12px;
    color:#ffd700;
    letter-spacing:2px;
}


/* ===== NOSTALGIE LOGIN MERGE ===== */
/* --- NOSTALGIE™ LOGIN SYSTEM V2 --- */
:root {
    --glass-bg: rgba(10, 10, 10, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gold-accent: #c5a059;
    --gold-glow: rgba(197, 160, 89, 0.25);
    --error-red: #ff4444;
    --input-bg: rgba(0, 0, 0, 0.6);
}

.nostalgie-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
    position: relative;
}

.nostalgie-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 400px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.n-header { text-align: center; margin-bottom: 30px; }
.n-title { font-size: 24px; font-weight: 200; letter-spacing: 4px; color: #fff; text-transform: uppercase; margin: 0; }
.n-subtitle { font-size: 10px; color: var(--gold-accent); letter-spacing: 2px; opacity: 0.8; margin-top: 5px; font-weight: 700; }

.n-group { position: relative; margin-bottom: 20px; }

.n-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
    box-sizing: border-box;
}

.n-input:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 15px var(--gold-glow);
}

    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #8d6e38 0%, #c5a059 50%, #8d6e38 100%);
    background-size: 200% auto;
    border: none;
    color: #000;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.5s;
    margin-top: 10px;
}

.n-alert {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid var(--error-red);
    color: #ffcccc;
    padding: 10px;
    font-size: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.n-footer { text-align: center; margin-top: 25px; font-size: 12px; color: #666; }
.n-link { color: var(--gold-accent); text-decoration: none; font-weight: bold; }

/* Dodatkowe wsparcie dla unifikacji ekosystemu */
.n-input, select.n-input, textarea.n-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-family: inherit;
    box-sizing: border-box;
}
select.n-input option {
    background: #1a1a1c;
    color: #fff;
}
.nostalgie-card.wide {
    max-width: 1100px;
}

/* LIVE CHECK UI */
.live-status-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: auto !important; cursor: pointer !important;
    animation: fadeInIcon 0.3s ease;
}
@keyframes fadeInIcon { from { opacity:0; transform: translateY(-50%) scale(0.8); } to { opacity:1; transform: translateY(-50%) scale(1); } }

/* UNIFIED MESSAGES SYSTEM */
.n-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    line-height: 1.4;
    animation: n-slideDown 0.4s ease;
}

.n-msg-error {
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

.n-msg-success {
    background: rgba(48, 209, 88, 0.1);
    border: 1px solid rgba(48, 209, 88, 0.3);
    color: #30d158;
}

.n-msg svg {
    flex-shrink: 0;
    width: 20px;
}

@keyframes n-slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== PANEL CLEANUP ===== */

.panel-muted { color:#888; font-size:0.9rem; }
.panel-pvp { color:#4f4; }
.panel-pk { color:#f44; }

.oracle-header { text-align:center; margin-bottom:30px; }
.oracle-title { font-family:'Cinzel'; font-size:2.5rem; color:#ffd700; margin:0; }
.oracle-sub { color:#888; text-transform:uppercase; letter-spacing:2px; }

.oracle-lock { font-size:60px; color:#ffd700; margin-bottom:20px; }

.oracle-msg { color:#aaa; max-width:500px; margin:auto; }

.oracle-blur { filter:blur(10px); opacity:0.3; text-align:center; }

.oracle-flex { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; }

.table-center { text-align:center; }
.table-right { text-align:right; }

.no-results { text-align:center; padding:40px; color:#666; display:none; }

.oracle-npc { color:#ffd700; font-weight:bold; }

.oracle-h3 { color:#fff; }
.th-center { text-align:center; }
.th-right { text-align:right; }
.hidden-file { display:none; }


/* =========================================================
   ===== NOSTALGIE™ CLEAN HERO SYSTEM (2026 RESET) =====
   ========================================================= */

.nostalgie-container{
    min-height:calc(100vh - 80px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 20px;
    position:relative;
}

.beta-badge{
    margin-bottom:35px;
    margin-bottom:25px;
    margin-top:15px;
    margin-bottom:20px;
    position:relative;
    margin-top:20px;
    font-size:0.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#e6c46a;
    opacity:.85;
}

.logo-wrapper{
    margin-bottom:35px;
    margin-bottom:20px;
    margin-bottom:30px;
}

.logo-img{
    width:520px;
    max-width:80%;
    transition:transform .4s ease, filter .4s ease;
}

.logo-img:hover{
    transform:scale(1.04);
    filter:drop-shadow(0 0 25px rgba(230,196,106,.5));
}

.grand-opening-text{
    margin-top:10px;
    margin-bottom:30px;
    margin-top:10px;
    font-size:1rem;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;
    color:#aaa;
}

.countdown-container{
    margin-bottom:40px;
    display:flex;
    gap:25px;
    margin-bottom:50px;
    flex-wrap:wrap;
    justify-content:center;
}

.time-box{
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#111,#050505);
    border:1px solid rgba(230,196,106,.6);
    border-radius:14px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

.time-val{
    font-size:2.4rem;
    font-weight:700;
    color:#e6c46a;
    letter-spacing:2px;
}

.time-label{
    font-size:.7rem;
    color:#aaa;
    text-transform:uppercase;
    letter-spacing:2px;
}

.glass-menu{
    display:flex;
    gap:20px;
    margin-top:20px;
    flex-wrap:wrap;
    justify-content:center;
}


.logo-wrapper{
    margin-bottom:35px;
    margin-bottom:20px;
    margin-top:-40px;
}


/* ===== CLEAN MAIN ACTIONS (HOME) ===== */

.main-actions{
    display:flex;
    gap:25px;
    justify-content:center;
    margin-top:40px;
    flex-wrap:wrap;
}

.main-btn{
    padding:16px 38px;
    font-size:0.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:12px;
    text-decoration:none;
    transition:0.3s ease;
}

.main-btn.primary{
    background:linear-gradient(135deg,#e6c46a,#b88c2a);
    color:#000;
    font-weight:700;
    box-shadow:0 0 25px rgba(230,196,106,.35);
}

.main-btn.primary:hover{
    transform:translateY(-3px);
    box-shadow:0 0 35px rgba(230,196,106,.6);
}

.main-btn.secondary{
    border:1px solid rgba(255,255,255,.2);
    color:#ddd;
}

.main-btn.secondary:hover{
    background:rgba(255,255,255,.05);
}



/* ===========================
   HERO CLEAN STABLE VERSION
=========================== */

.home-cinematic{
    min-height: calc(100vh - 90px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    background:#000;
}

.home-logo img{
    max-width:420px;
    width:100%;
    height:auto;
    margin-bottom:30px;
}

.home-badge{
    font-size:14px;
    letter-spacing:2px;
    color:#d4af37;
    margin-bottom:15px;
}

.home-opening{
    font-size:18px;
    letter-spacing:3px;
    color:#aaa;
    margin-bottom:35px;
}

.home-countdown{
    display:flex;
    gap:25px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.cd-box{
    width:110px;
    height:130px;
    border:1px solid rgba(212,175,55,0.3);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 0 25px rgba(212,175,55,0.08);
}

.cd-box span{
    font-size:42px;
    font-weight:700;
    color:#d4af37;
}

.cd-box small{
    font-size:11px;
    letter-spacing:2px;
    color:#888;
}

.home-actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.home-btn{
    padding:12px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    letter-spacing:1px;
    transition:0.3s ease;
}

.home-btn.primary{
    background:#d4af37;
    color:#000;
}

.home-btn.primary:hover{
    box-shadow:0 0 20px rgba(212,175,55,0.6);
}

.home-btn.secondary{
    border:1px solid #555;
    color:#fff;
}

.home-btn.secondary:hover{
    border-color:#d4af37;
    color:#d4af37;
}

.home-footer-text{
    margin-top:60px;
    font-size:12px;
    color:#555;
    letter-spacing:1px;
}

@media (max-width: 768px){
    .cd-box{
        width:80px;
        height:100px;
    }
    .cd-box span{
        font-size:28px;
    }
}



/* =========================
   PANEL – CHARACTERS GRID
========================= */

.chars-grid{
    max-width:1200px;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    padding:0 20px;
}

.char-card{
    position:relative;
    background:linear-gradient(160deg, rgba(20,20,20,0.85) 0%, rgba(10,10,10,0.95) 100%);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:18px;
    padding:25px 20px 30px 20px;
    text-align:center;
    transition:all .35s cubic-bezier(.175,.885,.32,1.275);
    overflow:hidden;
}

.char-card:hover{
    transform:translateY(-8px) scale(1.02);
    border-color:rgba(212,175,55,0.4);
    box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

.avatar-wrapper{
    position:relative;
    display:inline-block;
    cursor:pointer;
}

.avatar-img{
    width:110px;
    height:110px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid rgba(212,175,55,0.4);
    transition:all .3s ease;
}

.char-card:hover .avatar-img{
    border-color:#d4af37;
    box-shadow:0 0 20px rgba(212,175,55,0.5);
}

.avatar-edit-icon{
    position:absolute;
    bottom:0;
    right:0;
    background:#111;
    border:1px solid #d4af37;
    border-radius:50%;
    padding:6px;
    font-size:12px;
    opacity:0;
    transition:.3s;
}

.avatar-wrapper:hover .avatar-edit-icon{
    opacity:1;
}

.char-name{
    font-family:'Cinzel', serif;
    font-size:1.3rem;
    margin-top:15px;
    letter-spacing:1px;
}

.panel-muted{
    color:#888;
    font-size:.85rem;
}

.panel-pvp{
    color:#4caf50;
}

.panel-pk{
    color:#e53935;
}

.status-badge{
    position:absolute;
    top:15px;
    right:15px;
    padding:6px 12px;
    font-size:.7rem;
    border-radius:20px;
    letter-spacing:1px;
    font-weight:600;
    backdrop-filter:blur(4px);
}

.status-badge.on{
    background:rgba(0,255,0,0.1);
    border:1px solid rgba(0,255,0,0.4);
    color:#7CFF7C;
    box-shadow:0 0 15px rgba(0,255,0,0.4);
}

.status-badge.off{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:#999;
}

/* subtle entrance animation */
.char-card{
    animation:fadeUp .6s ease forwards;
    opacity:0;
}

@keyframes fadeUp{
    from{ transform:translateY(20px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}



/* =========================
   PANEL – ORACLE UPGRADE
========================= */

.oracle-section{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.oracle-glass{
    position:relative;
    padding:60px 40px;
    border-radius:24px;
    background:
        radial-gradient(circle at top center, rgba(212,175,55,0.15), transparent 60%),
        linear-gradient(160deg, rgba(15,15,15,0.95) 0%, rgba(5,5,5,1) 100%);
    border:1px solid rgba(212,175,55,0.15);
    box-shadow:
        inset 0 0 40px rgba(212,175,55,0.05),
        0 25px 80px rgba(0,0,0,0.8);
    backdrop-filter:blur(18px);
    transition:all .4s ease;
}

.oracle-glass:hover{
    border-color:rgba(212,175,55,0.4);
    box-shadow:
        inset 0 0 60px rgba(212,175,55,0.1),
        0 35px 100px rgba(0,0,0,0.9);
}

.oracle-title{
    font-family:'Cinzel', serif;
    font-size:2.8rem;
    letter-spacing:3px;
    text-shadow:0 0 20px rgba(212,175,55,0.6);
}

.oracle-sub{
    margin-top:10px;
    font-size:.8rem;
    letter-spacing:3px;
    color:#aaa;
    text-transform:uppercase;
}

.oracle-locked{
    margin-top:40px;
}

.oracle-lock{
    font-size:70px;
    animation:slowPulse 3s infinite;
}

@keyframes slowPulse{
    0%{ text-shadow:0 0 10px rgba(212,175,55,0.4); }
    50%{ text-shadow:0 0 30px rgba(212,175,55,0.9); }
    100%{ text-shadow:0 0 10px rgba(212,175,55,0.4); }
}

.oracle-input{
    background:rgba(0,0,0,0.6);
    border:1px solid rgba(212,175,55,0.3);
    padding:12px 15px;
    border-radius:8px;
    color:#fff;
    transition:.3s;
}

.oracle-input:focus{
    border-color:#d4af37;
    box-shadow:0 0 15px rgba(212,175,55,0.6);
    outline:none;
}

.results-table{
    margin-top:40px;
    background:rgba(0,0,0,0.5);
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.05);
}

.results-table thead{
    background:rgba(212,175,55,0.1);
}

.results-table th{
    padding:15px;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:1px;
}

.results-table td{
    padding:12px 15px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.results-table tr:hover{
    background:rgba(212,175,55,0.05);
}


/* =========================
   ORACLE – DROP / SPOIL SWITCH UPGRADE
========================= */

.smart-toggle-wrapper{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:10px;
}

.toggle-label{
    font-family:'Cinzel', serif;
    font-size:0.9rem;
    letter-spacing:1px;
    opacity:0.4;
    transition:.3s ease;
}

.toggle-label.active{
    opacity:1;
    color:#ffd700;
    text-shadow:0 0 10px rgba(212,175,55,0.6);
}

.smart-switch{
    position:relative;
    display:inline-block;
    width:64px;
    height:32px;
}

.smart-switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    background:rgba(255,255,255,0.08);
    border-radius:50px;
    border:1px solid rgba(255,255,255,0.1);
    transition:.4s;
}

.slider:before{
    content:"";
    position:absolute;
    height:24px;
    width:24px;
    left:4px;
    top:3px;
    background:#ffd700;
    border-radius:50%;
    transition:.4s;
    box-shadow:0 0 12px rgba(212,175,55,0.8);
}

.smart-switch input:checked + .slider{
    background:rgba(212,175,55,0.2);
}

.smart-switch input:checked + .slider:before{
    transform:translateX(30px);
}


/* ===== SMART LEVEL CHECKBOX STYLE ===== */

.smart-level-wrapper{
    margin-top:12px;
    font-family:'Cinzel', serif;
    font-size:0.85rem;
    color:#aaa;
    letter-spacing:1px;
}

.smart-level-wrapper input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:#d4af37;
    cursor:pointer;
    margin-right:8px;
}

.smart-level-wrapper label{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
}

.smart-level-wrapper input[type="checkbox"]:checked + *{
    color:#ffd700;
}


/* ===============================
   RANKING – NOSTALGIE HEROES
================================ */

.hero-wrapper{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
    text-align:center;
}

.hero-wrapper h2{
    font-family:'Cinzel', serif;
    font-size:3rem;
    color:#ffd700;
    letter-spacing:4px;
    margin-bottom:5px;
    text-shadow:0 0 20px rgba(212,175,55,0.6);
}

.podium-container{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:30px;
    margin:50px 0;
}

.podium-card{
    width:220px;
    padding:25px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.6));
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    transition:.4s;
}

.podium-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

.podium-avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    margin:15px auto;
    border:3px solid rgba(212,175,55,0.6);
}

.podium-name{
    font-family:'Cinzel', serif;
    font-size:1.2rem;
    color:#fff;
    margin:10px 0;
}

.podium-rank{
    font-size:1.5rem;
    font-weight:bold;
    color:#ffd700;
}

.place-1{
    transform:scale(1.15);
    box-shadow:0 0 40px rgba(255,215,0,0.4);
}

.place-2{
    box-shadow:0 0 25px rgba(192,192,192,0.3);
}

.place-3{
    box-shadow:0 0 25px rgba(205,127,50,0.3);
}

.podium-stats{
    display:flex;
    justify-content:center;
    gap:15px;
    font-size:0.9rem;
    color:#ccc;
    margin-top:10px;
}

/* ===== TABLE ===== */

.ranking-table{
    width:100%;
    border-collapse:collapse;
    margin-top:40px;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(8px);
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.ranking-table thead{
    background:linear-gradient(90deg, #111, #1a1a1a);
}

.ranking-table th{
    padding:15px;
    font-family:'Cinzel', serif;
    font-size:0.85rem;
    letter-spacing:2px;
    color:#ffd700;
    text-transform:uppercase;
}

.ranking-table td{
    padding:14px;
    border-top:1px solid rgba(255,255,255,0.05);
    color:#ddd;
}

.ranking-table tbody tr{
    transition:.3s;
}

.ranking-table tbody tr:hover{
    background:rgba(255,215,0,0.05);
}

.rank-num{
    font-weight:bold;
    color:#ffd700;
}

.mini-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
    border:1px solid rgba(255,255,255,0.2);
}

.pvp-txt{
    color:#4caf50;
    font-weight:bold;
}

.pk-txt{
    color:#f44336;
    font-weight:bold;
}


/* ===== HEROES CINEMATIC BOOST ===== */

.place-1{
    transform:scale(1.2) translateY(-10px);
    position:relative;
    background:radial-gradient(circle at top, rgba(255,215,0,0.25), rgba(0,0,0,0.8));
    border:1px solid rgba(255,215,0,0.6);
}

.place-1::before{
    content:"";
    position:absolute;
    inset:-30px;
    background:radial-gradient(circle, rgba(255,215,0,0.15), transparent 70%);
    z-index:-1;
    filter:blur(40px);
}

.place-1 .podium-avatar{
    width:120px;
    height:120px;
    border:4px solid #ffd700;
    box-shadow:0 0 25px rgba(255,215,0,0.7);
}

.place-1 .podium-name{
    font-size:1.4rem;
    color:#ffd700;
}

.place-2 .podium-avatar{
    border-color:silver;
}

.place-3 .podium-avatar{
    border-color:#cd7f32;
}

.podium-card{
    backdrop-filter:blur(15px);
}


/* ===== ONLINE PULSE EFFECT ===== */

@keyframes onlinePulse {
    0%   { box-shadow:0 0 0 rgba(76,175,80,0.4); }
    50%  { box-shadow:0 0 12px rgba(76,175,80,0.8); }
    100% { box-shadow:0 0 0 rgba(76,175,80,0.4); }
}

.status-badge.on{
    background:rgba(76,175,80,0.15);
    border:1px solid rgba(76,175,80,0.5);
    color:#4caf50;
    animation:onlinePulse 2.5s infinite ease-in-out;
}

.status-badge.off{
    background:rgba(244,67,54,0.1);
    border:1px solid rgba(244,67,54,0.3);
    color:#f44336;
}


.oracle-location {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
    color: #aaa;
}

.oracle-location b {
    color: #ffd700;
}


/* =========================================
   ORACLE TABLE REFINEMENT
========================================= */

.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.results-table th {
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 14px 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,215,120,0.15);
}

.results-table td {
    padding: 18px 10px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,215,120,0.08);
}

/* Kolumny */
.results-table th:nth-child(1),
.results-table td:nth-child(1) {
    width: 42%;
}

.results-table th:nth-child(2),
.results-table td:nth-child(2) {
    width: 8%;
    text-align: center;
    font-weight: 600;
    color: #d4af37;
}

.results-table th:nth-child(3),
.results-table td:nth-child(3) {
    width: 25%;
}

.results-table th:nth-child(4),
.results-table td:nth-child(4),
.results-table th:nth-child(5),
.results-table td:nth-child(5) {
    width: 12%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Lokalizacja pod nazwą */
.oracle-location {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.65;
    line-height: 1.5;
}

/* Hover efekt */
.results-table tbody tr {
    transition: all 0.25s ease;
}


/* Szansa lekki akcent */
.results-table td:last-child {
    font-weight: 600;
    color: #ffd700;
}


/* ============================= */
/* ORACLE MODE STYLING          */
/* ============================= */

/* DROP (złoty) */
.results-table.mode-drop tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.08),
        rgba(212,175,55,0.02)
    );
}

/* DROP – szansa */
.results-table.mode-drop td:last-child {
    color: #ffd700;
}

/* SPOIL (niebieski) */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.12),
        rgba(0,140,255,0.04)
    );
}

/* SPOIL – szansa */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
}


/* ============================= */
/* ORACLE – TRYB KOLORÓW        */
/* ============================= */

/* DROP (złoty) */
.results-table.mode-drop tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.10),
        rgba(212,175,55,0.03)
    );
}

/* DROP – procent */
.results-table.mode-drop td:last-child {
    color: #ffd700;
}

/* SPOIL (niebieski) */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.15),
        rgba(0,140,255,0.05)
    );
}

/* SPOIL – procent */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
}


/* ===================================================== */
/* ORACLE – PEŁNE PRZEŁĄCZENIE ZŁOTO → NIEBIESKI (SPOIL) */
/* ===================================================== */

.results-table.mode-spoil {

    /* ogólny kolor tekstu */
    color: #cfe9ff;

}

/* Nagłówki */
.results-table.mode-spoil th {
    color: #4db8ff;
}

/* Nazwa potwora */
.results-table.mode-spoil .oracle-npc {
    color: #66c2ff;
}

/* Lokalizacja */
.results-table.mode-spoil .oracle-location {
    color: #7fd1ff;
    opacity: 0.9;
}

/* Szansa */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
    font-weight: 600;
}

/* Hover */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.18),
        rgba(0,140,255,0.05)
    );
}

/* Delikatne podświetlenie aktywnego wiersza */
.results-table.mode-spoil tbody tr {
    border-left: 3px solid rgba(0,140,255,0.35);
}

/* Usuwamy złoty glow jeśli gdzieś był */
.results-table.mode-spoil * {
    text-shadow: none;
    box-shadow: none;
}


/* ========================================= */
/* ORACLE TOGGLE – ZŁOTO (DROP) vs NIEBIESKI (SPOIL) */
/* ========================================= */

/* Domyślnie DROP (złoty aktywny) */
.toggle-label.active {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* Gdy tabela ma tryb SPOIL */
.results-table.mode-spoil ~ * .toggle-label.active,
.results-table.mode-spoil + * .toggle-label.active {
    color: #00bfff;
    text-shadow: 0 0 8px rgba(0,191,255,0.7);
}

/* Bezpieczniejsze wymuszenie (jeśli powyższe nie złapie struktury) */
.mode-spoil .toggle-label.active {
    color: #00bfff !important;
    text-shadow: 0 0 8px rgba(0,191,255,0.7) !important;
}

/* Checkbox glow przy SPOIL */
.mode-spoil input[type="checkbox"]:checked {
    accent-color: #00bfff;
    filter: drop-shadow(0 0 4px rgba(0,191,255,0.6));
}

/* Checkbox glow przy DROP */
input[type="checkbox"]:checked {
    accent-color: #ffd700;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}


/* ===========================
   ORACLE COLOR MODES
=========================== */

/* DROP (gold) */
.hero-wrapper.mode-drop .results-table th,
.hero-wrapper.mode-drop .oracle-npc,
.hero-wrapper.mode-drop .results-table td:last-child {
    color: #ffd700;
}

.hero-wrapper.mode-drop .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.12),
        rgba(212,175,55,0.03)
    );
}

/* SPOIL (blue) */
.hero-wrapper.mode-spoil .results-table th,
.hero-wrapper.mode-spoil .oracle-npc,
.hero-wrapper.mode-spoil .results-table td:last-child {
    color: #4da6ff;
}

.hero-wrapper.mode-spoil .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(77,166,255,0.12),
        rgba(77,166,255,0.03)
    );
}

/* Toggle slider color change */
.hero-wrapper.mode-spoil .smart-switch .slider {
    background-color: #4da6ff;
}

.hero-wrapper.mode-drop .smart-switch .slider {
    background-color: #d4af37;
}


/* =========================================
   FORCE ORACLE COLOR MODE (OVERRIDE)
========================================= */

/* GOLD MODE */
.hero-wrapper.mode-drop .results-table th,
.hero-wrapper.mode-drop .results-table td,
.hero-wrapper.mode-drop .oracle-npc {
    color: #ffd700 !important;
}

.hero-wrapper.mode-drop .oracle-location {
    color: rgba(255,215,0,0.7) !important;
}

/* BLUE MODE */
.hero-wrapper.mode-spoil .results-table th,
.hero-wrapper.mode-spoil .results-table td,
.hero-wrapper.mode-spoil .oracle-npc {
    color: #4da6ff !important;
}

.hero-wrapper.mode-spoil .oracle-location {
    color: rgba(77,166,255,0.7) !important;
}

/* Hover gold */
.hero-wrapper.mode-drop .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.15),
        rgba(212,175,55,0.04)
    ) !important;
}

/* Hover blue */
.hero-wrapper.mode-spoil .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(77,166,255,0.15),
        rgba(77,166,255,0.04)
    ) !important;
}

/* Toggle switch color */
.hero-wrapper.mode-spoil .smart-switch .slider {
    background-color: #4da6ff !important;
}

.hero-wrapper.mode-drop .smart-switch .slider {
    background-color: #d4af37 !important;
}


/* ========================= */
/* SPOIL FULL BLUE OVERRIDE */
/* ========================= */

#results-table.mode-spoil,
#results-table.mode-spoil th,
#results-table.mode-spoil td,
#results-table.mode-spoil .oracle-npc,
#results-table.mode-spoil .oracle-location {
    color: #57b8ff !important;
}

#results-table.mode-spoil td:last-child {
    color: #6ec6ff !important;
    font-weight: 600;
}

#results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(87,184,255,0.12),
        rgba(87,184,255,0.03)
    ) !important;
}

/* Toggle kolor */
#results-table.mode-spoil ~ * .toggle-label.active {
    color: #57b8ff !important;
}


/* ===================================== */
/* SPOIL MODE – FULL SECTION BLUE THEME */
/* ===================================== */

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
    text-shadow: 0 0 15px rgba(87,184,255,0.4) !important;
}

.oracle-section.mode-spoil .oracle-sub {
    color: #8fd3ff !important;
}

.oracle-section.mode-spoil {
    background: linear-gradient(
        135deg,
        rgba(15,25,45,0.95),
        rgba(5,15,35,0.98)
    ) !important;
    box-shadow: 0 0 40px rgba(87,184,255,0.15) inset !important;
}

.oracle-section.mode-spoil .oracle-input {
    border-color: #57b8ff !important;
    box-shadow: 0 0 10px rgba(87,184,255,0.4) !important;
}

.oracle-section.mode-spoil .smart-switch .slider {
    background-color: #57b8ff !important;
}


/* ========================================= */
/* HARD OVERRIDE – SPOIL BLUE EVERYTHING    */
/* ========================================= */

#results-table.mode-spoil thead th {
    color: #57b8ff !important;
    border-bottom: 1px solid rgba(87,184,255,0.4) !important;
}

#results-table.mode-spoil tbody td {
    color: #6ec6ff !important;
}

#results-table.mode-spoil tbody td.panel-muted {
    color: #6ec6ff !important;
}

#results-table.mode-spoil .oracle-npc {
    color: #6ec6ff !important;
}

#results-table.mode-spoil .oracle-location {
    color: #6ec6ff !important;
}


/* ================================= */
/* ORACLE TITLE – MODE COLOR SWITCH */
/* ================================= */

.oracle-section.mode-drop .oracle-title {
    color: #ffd700 !important;
    text-shadow: 0 0 18px rgba(255,215,0,0.4) !important;
}

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
    text-shadow: 0 0 18px rgba(87,184,255,0.5) !important;
}


/* ===== SPOIL FORCE BLUE NPC NAME ===== */

.oracle-section.mode-spoil .oracle-npc {
    color: #57b8ff !important;
}

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
}


/* ===== SPOIL FORCE BLUE CHANCE COLUMN ===== */

.oracle-section.mode-spoil .results-table td:last-child {
    color: #6ec6ff !important;
}


/* ===== SPOIL FORCE BLUE LV COLUMN ===== */

.oracle-section.mode-spoil .results-table th:nth-child(2),
.oracle-section.mode-spoil .results-table td:nth-child(2) {
    color: #57b8ff !important;
}


/* ========================= */
/* DASHBOARD HERO SECTION  */
/* ========================= */

.dashboard-hero{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:30px 0 20px 0;
}

.dashboard-title{
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
    color:#ffd700;
    text-transform:none;
}

.dashboard-title .dash-pro{
    color:#57b8ff;
    font-weight:700;
    margin-left:8px;
}

.dashboard-user{
    font-size:20px;
    font-weight:600;
    letter-spacing:2px;
    color:#ffffff;
    text-transform:uppercase;
}


/* ========================= */
/* DASHBOARD USER FRAME     */
/* ========================= */

.dashboard-user{
    margin-top:5px;
    padding:8px 18px;
    border-radius:30px;
    display:inline-block;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:0.3s ease;
}

/* zwykły user */
.dashboard-user.normal-user{
    border:1px solid rgba(255,215,0,0.4);
    background:rgba(255,215,0,0.05);
    color:#ffd700;
}

/* premium */
.dashboard-user.premium-user{
    border:1px solid rgba(87,184,255,0.7);
    background:linear-gradient(
        135deg,
        rgba(255,215,0,0.12),
        rgba(87,184,255,0.15)
    );
    color:#ffffff;
    box-shadow:
        0 0 12px rgba(87,184,255,0.4),
        0 0 20px rgba(255,215,0,0.25);
}

/* delikatny hover premium */
.dashboard-user.premium-user:hover{
    box-shadow:
        0 0 18px rgba(87,184,255,0.6),
        0 0 28px rgba(255,215,0,0.35);
    transform:translateY(-1px);
}


/* ========================= */
/* PREMIUM ANIMATED GLOW    */
/* ========================= */

@keyframes premiumPulse {
    0% {
        box-shadow:
            0 0 10px rgba(87,184,255,0.4),
            0 0 20px rgba(255,215,0,0.25);
    }
    50% {
        box-shadow:
            0 0 18px rgba(87,184,255,0.7),
            0 0 35px rgba(255,215,0,0.45);
    }
    100% {
        box-shadow:
            0 0 10px rgba(87,184,255,0.4),
            0 0 20px rgba(255,215,0,0.25);
    }
}

.dashboard-user.premium-user{
    animation: premiumPulse 3.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* lekki shimmer przechodzący */
.dashboard-user.premium-user::after{
    content: "";
    position: absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.25) 50%,
        transparent 100%
    );
    animation: shimmerMove 4s infinite;
}

@keyframes shimmerMove{
    0% { left:-100%; }
    100% { left:120%; }
}


/* ========================= */
/* PREMIUM AVATAR RING      */
/* ========================= */

.char-card.premium-user .avatar-wrapper {
    position: relative;
}

.char-card.premium-user .avatar-wrapper::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(
        45deg,
        rgba(255,215,0,0.9),
        rgba(87,184,255,0.7),
        rgba(255,215,0,0.9)
    );
    z-index: 0;
    animation: premiumRingRotate 6s linear infinite;
}

.char-card.premium-user .avatar-img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

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


/* ========================= */
/* PANEL TOP POSITION FIX   */
/* ========================= */

.dashboard-header {
    margin-top: 20px !important;
}

.chars-grid {
    margin-top: 25px !important;
}


/* =========================================
   NOSTALGIE™ COIN HEADER FIX (2026-02-17)
   ========================================= */

/* Kontener całego licznika (Moneta + Tekst) */
.nc-coin-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important; /* Moneta po lewej, tekst po prawej (zależy od HTML, ale to zazwyczaj pomaga) */
    gap: 12px !important; /* Odstęp między monetą a cyframi */
    
    /* Wygląd Modern Glass */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important; /* Złota ramka */
    border-radius: 20px !important;
    padding: 5px 15px !important;
    height: 36px !important; /* Stała wysokość, żeby nie rozpychało headera */
    margin-top: 0 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    min-width: 120px !important; /* Minimalna szerokość dla estetyki */
}

/* Sama moneta - zmniejszona i opanowana */
.nc-coin {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important; /* Usuwa stare centrowanie */
    transform: none !important; /* Wyłącza dziwną rotację 3D, która zasłaniała tekst */
    background-size: contain !important;
    position: relative !important;
    flex-shrink: 0 !important; /* Nie zgniataj monety */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8)) !important; /* Złoty blask */
}

/* Jeśli moneta jest zbudowana z warstw (body), też ją resetujemy */
.nc-coin-body {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    animation: none !important; /* Wyłączamy latanie monety */
}

/* Tekst bilansu */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #ffd700 !important; /* Złoty tekst */
    font-weight: 600 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,1) !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Efekt hover - lekkie podświetlenie całości */
.nc-coin-wrapper:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    cursor: pointer;
}

/* ==================================================
   NOSTALGIE™ HEADER COIN FIX (CLEAN GLASS UI)
   ================================================== */

/* 1. Kontener - robimy z niego szklaną plakietkę */
.nc-coin-wrapper {
    display: inline-flex !important;       /* Układa elementy obok siebie */
    align-items: center !important;        /* Centruje w pionie */
    justify-content: center !important;
    gap: 10px !important;                  /* KLUCZOWE: Odstęp 10px między monetą a tekstem */
    
    /* Wygląd */
    background: rgba(0, 0, 0, 0.6) !important;     /* Ciemniejsze tło dla kontrastu */
    border: 1px solid rgba(255, 215, 0, 0.3) !important; /* Złota ramka */
    border-radius: 30px !important;        /* Zaokrąglone rogi */
    padding: 4px 15px !important;          /* Wewnętrzne odstępy */
    height: 38px !important;               /* Stała wysokość */
    min-width: 100px !important;
    margin-right: 15px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
}

/* 2. Moneta - prostujemy ją i zmniejszamy */
.nc-coin {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform: none !important;            /* Wyłączamy obrót 3D - moneta przodem */
    background-size: contain !important;
    flex-shrink: 0 !important;             /* Zapobiega zgniataniu monety */
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) !important; /* Złota poświata */
}

/* Reset wewnętrznych elementów monety, jeśli istnieją */
.nc-coin-body, .nc-coin-body::after, .nc-coin-body::before {
    animation: none !important;            /* Wyłączamy zbędne animacje w headerze */
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    background: none !important;           /* Jeśli to CSS-owa moneta, resetujemy tło */
}
/* Jeśli moneta jest obrazkiem w tle lub img */
.nc-coin img {
    width: 100% !important;
    height: 100% !important;
}

/* 3. Tekst Bilansu - stylizacja cyfr */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #ffd700 !important;             /* Złoty kolor */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Efekt najechania myszką */
.nc-coin-wrapper:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #ffd700 !important;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* =================================================================
   NOSTALGIE™ COIN REBORN (Total Reset & New Design) - 2026-02-17
   ================================================================= */

/* 1. KONTENER (SZUFLADKA) */
.nc-coin-wrapper {
    /* Resetujemy stare pozycjonowanie */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Nowy wygląd "Szufladki" */
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    border-radius: 50px !important; /* Idealna pigułka */
    
    /* Wymiary i odstępy */
    padding: 3px 15px 3px 3px !important; /* Mniej po lewej bo tam jest moneta */
    height: 36px !important;
    min-width: 110px !important;
    margin-right: 20px !important;
    
    /* Reset efektów */
    transform: none !important;
    filter: none !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nc-coin-wrapper:hover {
    border-color: rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* 2. NOWA MONETA (CZYSTA GRAFIKA CSS) */
/* Ukrywamy stare, zepsute elementy 3D wewnątrz monety */
.nc-coin-body, .edge, .face {
    display: none !important; 
}

/* Tworzymy nową monetę na bazie głównego kontenera .nc-coin */
.nc-coin {
    /* Reset */
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
    
    /* Nowy wygląd - Złoty Krążek */
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    
    /* Złoty Gradient (efekt metalu) */
    background: radial-gradient(circle at 30% 30%, #fffacd, #ffd700, #b8860b) !important;
    border: 1px solid #8b6914 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 5px rgba(0,0,0,0.5) !important;
    
    /* Pozycjonowanie */
    flex-shrink: 0 !important;
    margin-right: 12px !important; /* Odstęp od tekstu */
    position: relative !important;
}

/* Symbol dolara/waluty na monecie (opcjonalny detal dla realizmu) */
.nc-coin::after {
    content: 'N' !important; /* N jak Nostalgie */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #8b6914 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    font-family: serif !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* 3. TEKST BILANSU */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #fff !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    
    /* Upewniamy się, że tekst jest widoczny */
    display: inline-block !important;
    line-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kolor dla waluty (złoty akcent) */
.nc-coin-wrapper span::after {
    content: '' !important; /* Można tu dodać ' Coins' w CSS jeśli brakuje w HTML */
}
:root {
    --bg-body: #050507;
    --text-color: #e0e0e0;
    --accent: #d4af37;
    --glass: rgba(20, 20, 25, 0.7);
    --border: 1px solid rgba(255,255,255,0.08);
    --font-main: 'Inter', sans-serif;
    --blur: blur(12px);
}
body { background: var(--bg-body); color: var(--text-color); font-family: var(--font-main); margin:0; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.site-header { position: fixed; width: 100%; top: 0; background: var(--glass); backdrop-filter: var(--blur); border-bottom: var(--border); z-index: 999; padding: 0 20px; }
.header-container { max-width: 1200px; margin: 0 auto; height: 80px; display: flex; justify-content: space-between; align-items: center; }
.brand-logo { font-weight: 800; font-size: 1.2rem; color: #fff; text-transform: uppercase; }
.brand-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-item { color: #888; font-weight: 500; }
.nav-item:hover, .nav-item.active { color: #fff; }
.btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.btn.gold { background: linear-gradient(135deg, #d4af37, #aa892c); color: #000; box-shadow: 0 4px 15px rgba(212,175,55,0.3); }
.btn.dark { background: #222; color: #fff; border: 1px solid #333; }
.btn.ghost { background: transparent; color: #ccc; border: 1px solid #333; }
main.container { max-width: 1200px; margin: 100px auto; padding: 20px; text-align: center; }
.hero h1 { font-size: 3.5rem; background: linear-gradient(#fff, #888); -webkit-background-clip: text; color: transparent; margin-bottom: 10px; }
.hero .subtitle { color: #666; margin-bottom: 40px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 50px; }
.stat-card { background: #0f0f12; padding: 30px; border-radius: 16px; border: var(--border); }
.stat-card p { font-size: 2rem; font-weight: 700; color: #fff; margin-top: 10px; }
footer { text-align: center; padding: 40px; color: #444; border-top: var(--border); margin-top: 50px; }

/* --- CINEMATIC MINIMAL LAYOUT (Added via Update) --- */

/* Wielka Typografia */
.hero-title {
    font-size: clamp(3rem, 8vw, 6rem); /* Skalowalne */
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

/* Subtelny Tagline */
.hero-tag {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    opacity: 0.7;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
}

/* Pasek Danych (HUD) zamiast Kafelków */
.server-hud {
    display: flex;
    gap: 60px;
    padding: 30px 60px;
    border-radius: 100px; /* Pigułka */
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transition: transform 0.5s;
}

.server-hud:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.15);
}

.hud-item {
    text-align: center;
    position: relative;
}

/* Separatory między danymi */
.hud-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

.hud-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hud-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-top: 5px;
}

/* Dostosowanie kolorów pod motywy (nadpisuje domyślne #fff) */
/* Jeśli motyw ma zdefiniowane --accent, użyj go */
.hud-value { text-shadow: 0 0 20px rgba(255,255,255,0.1); }


/* --- ULTRA 3D DEPTH & ANIMATIONS UPDATE --- */

/* 1. Animacja Wjazdu (Grawitacja) */
    0% { 
        opacity: 0; 
        transform: translateY(-100px) scale(0.9); 
        filter: blur(10px);
    }
    70% {
        transform: translateY(10px); /* Odbicie */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0);
    }
}

    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. Tytuł z Głębią 3D (Statyczną) */
.hero-title {
    /* Resetujemy poprzednie style */
    background: none !important;
    -webkit-text-fill-color: initial !important; 
    
    font-family: "Cinzel", sans-serif; /* Bardziej epicka czcionka */
    color: #e0e0e0;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    
    /* MAGIA 3D CSS - Warstwy cienia symulujące grubość */
    text-shadow: 
        0 1px 0 #444,
        0 2px 0 #333,
        0 3px 0 #222,
        0 4px 0 #111,
        0 5px 0 #000,
        0 20px 40px rgba(0,0,0,0.8), /* Cień rzucany na tło */
        0 0 50px rgba(255,255,255,0.1); /* Lekka poświata */
        
}

/* Korekta dla jasnych motywów (żeby złoto też miało 3D) */
/* Jeśli element ma klasę "gold", nadpisujemy kolor, ale zostawiamy cień */
.hero-title span {
    color: var(--accent, #d4af37);
}


/* 3. HUD - Wygląd "Solidny Blok" */
.server-hud {
    /* Usuwamy lekki styl */
    background: #0a0a0a;
    border: none;
    
    /* GŁĘBIA POKŁADOWA */
    box-shadow: 
        /* Cień zewnętrzny (odsuniecie od tła) */
        0 30px 60px rgba(0,0,0,1),
        /* Światło od góry (krawędź) */
        inset 0 1px 1px rgba(255,255,255,0.3),
        /* Cień wewnętrzny (wklęsłość) */
        inset 0 -10px 20px rgba(0,0,0,0.8);
        
    border-radius: 12px; /* Mniej zaokrąglone, bardziej techniczne */
    padding: 20px 50px;
    border-top: 1px solid rgba(255,255,255,0.1);
    
    opacity: 0; /* Start ukryty */
}

/* Wartości w HUDzie - Wytłoczone */
.hud-value {
    text-shadow: 0 2px 5px rgba(0,0,0,1);
    font-weight: 800;
}

.hud-item {
    position: relative;
    padding: 0 30px;
}

/* Separatory jako wcięcia */
.hud-item:not(:last-child)::after {
    background: #222;
    box-shadow: 1px 0 0 #444; /* Efekt wyrytej linii */
    height: 70%;
    top: 15%;
}

/* 4. Tagline - Stylizowany */
.hero-tag {
    font-weight: 600;
    text-shadow: 0 2px 4px #000;
    opacity: 0;
}


/* --- AUTH & FORMS UPDATE (Floating Labels) --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.auth-card {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 50px;
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.auth-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}

.auth-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Floating Input Group */
.input-group {
    position: relative;
    margin-bottom: 30px;
}

.input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: #fff;
    padding: 10px 0;
    font-size: 1.1rem;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
}

.input-label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #666;
    pointer-events: auto !important; cursor: pointer !important;
    transition: 0.3s ease all;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Magia: Kiedy input jest aktywny lub wypełniony */
.input-field:focus,
.input-field:valid {
    border-bottom-color: #fff; /* Fallback */
    border-bottom-color: var(--accent, #d4af37); /* Theme color */
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.5);
}

.input-field:focus ~ .input-label,
.input-field:valid ~ .input-label {
    top: -20px;
    font-size: 0.7rem;
    color: var(--accent, #d4af37);
    font-weight: 700;
}

.auth-footer {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #666;
}
.auth-footer a { color: #888; text-decoration: underline; }
.auth-footer a:hover { color: #fff; }


/* --- NEXUS PRIME DASHBOARD --- */

/* Główny Kontener - Siatka Dashboardu */
.nexus-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 1000px) {
    .nexus-grid { grid-template-columns: 1fr; }
}

/* Kafelki (Glassmorphism) */
.glass-panel {
    background: rgba(15, 15, 20, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transition: transform 0.3s, border-color 0.3s;
}
.glass-panel:hover {
    border-color: var(--accent, #d4af37);
    transform: translateY(-2px);
}

/* --- LEWY PANEL: PROFIL & NAWIGACJA --- */
.profile-card {
    text-align: center;
    margin-bottom: 20px;
}
.profile-avatar-ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid var(--accent, #d4af37);
    padding: 3px;
    margin: 0 auto 15px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.profile-avatar-inner {
    width: 100%; height: 100%;
    background: #222;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #333, #111);
}

.nav-menu {
    list-style: none; padding: 0; margin: 0;
}
.nav-btn {
    display: flex; align-items: center; gap: 15px;
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 8px;
    color: #aaa;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
}
.nav-btn:hover, .nav-btn.active {
    background: rgba(212, 175, 55, 0.1);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent, #d4af37);
}

/* --- PRAWY PANEL: ANALITYKA --- */

/* Globalne Statystyki Konta (Górny pasek) */
.account-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}
.mini-stat-card {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.mini-label { font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.mini-value { font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: 5px; }
.val-gold { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }

/* LISTA POSTACI - MODUŁY */
.char-module {
    margin-bottom: 25px;
    border-left: 3px solid transparent;
}
.char-module:hover { border-left-color: var(--accent, #d4af37); }

.char-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}
.char-identity h3 { margin: 0; font-size: 1.3rem; color: #fff; }
.char-identity span { color: var(--accent, #d4af37); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}
.badge-on { background: rgba(0, 255, 0, 0.1); color: #4ade80; border: 1px solid #4ade80; }
.badge-off { background: rgba(255, 255, 255, 0.05); color: #888; border: 1px solid #444; }

/* Grid Statystyk Postaci */
.char-data-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
}
@media (max-width: 800px) { .char-data-grid { grid-template-columns: 1fr; } }

/* Sekcja Witalna (Bary) */
.vital-section {
    display: flex; flex-direction: column; gap: 10px;
}
.nexus-bar-group { position: relative; }
.nexus-bar-info { display: flex; justify-content: space-between; font-size: 0.7rem; color: #888; margin-bottom: 3px; }
.nexus-track { background: #111; height: 8px; border-radius: 4px; overflow: hidden; }
.nexus-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }

.fill-hp-nx { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.fill-mp-nx { background: linear-gradient(90deg, #1e3a8a, #3b82f6); }
.fill-cp-nx { background: linear-gradient(90deg, #b45309, #f59e0b); }
.fill-xp-nx { background: linear-gradient(90deg, #444, #aaa); height: 4px; }

/* Sekcja Detali (Karma, PvP, etc) */
.details-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.detail-box {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
.detail-label { font-size: 0.6rem; color: #555; text-transform: uppercase; }
.detail-val { font-size: 0.9rem; font-weight: bold; color: #ddd; }

/* Sekcja Akcji */
.actions-section {
    display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.action-btn-nx {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #ccc;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    text-transform: uppercase;
}
.action-btn-nx:hover { background: #fff; color: #000; border-color: #fff; }
.btn-danger { border-color: #7f1d1d; color: #f87171; }
.btn-danger:hover { background: #7f1d1d; color: #fff; }



/* --- OBSIDIAN SLATE DASHBOARD --- */

/* Główny grid */
.obsidian-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}
@media (max-width: 1024px) { .obsidian-layout { grid-template-columns: 1fr; } }

/* Karty (Moduły) */
.obs-card {
    background: #141416;
    border: 1px solid #2a2a2e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Panel Boczny */
.user-brief {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(180deg, #1a1a1e 0%, #141416 100%);
    border-bottom: 1px solid #2a2a2e;
}
.user-avatar {
    width: 70px; height: 70px;
    background: #252529;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
    border: 2px solid #333;
}
.brief-stat {
    display: flex; justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    font-size: 0.85rem;
    color: #888;
}
.brief-stat span:last-child { color: #fff; font-weight: 600; }

.side-menu a {
    display: block;
    padding: 14px 20px;
    color: #888;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: 0.2s;
    font-size: 0.9rem;
}
.side-menu a:hover, .side-menu a.active {
    background: #1a1a1e;
    color: #e0e0e0;
    border-left-color: var(--accent, #d4af37);
}

/* Sekcja Główna */
.global-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.g-stat-box {
    background: #1a1a1e;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #2a2a2e;
}
.g-label { font-size: 0.7rem; text-transform: uppercase; color: #666; letter-spacing: 1px; margin-bottom: 8px; }
.g-value { font-size: 1.4rem; font-weight: 700; color: #fff; }

/* Lista Postaci - Stonowana */
.char-row {
    background: #1a1a1e;
    border: 1px solid #2a2a2e;
    border-radius: 6px;
    margin-bottom: 15px;
    transition: 0.2s;
}
.char-row:hover { border-color: #444; }

/* Nagłówek Postaci */
.char-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px;
    background: #202025;
    border-bottom: 1px solid #2a2a2e;
}
.char-title h3 { margin: 0; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 10px; }
.char-meta { font-size: 0.8rem; color: #777; margin-top: 4px; }
.char-badge {
    padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
}
.badge-on { background: #1b3a24; color: #4ade80; }
.badge-off { background: #2a2a2e; color: #666; }

/* Siatka Szczegółów Postaci */
.char-details {
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    gap: 30px;
}
@media (max-width: 900px) { .char-details { grid-template-columns: 1fr; } }

.detail-group h4 { margin: 0 0 10px 0; font-size: 0.7rem; color: #555; text-transform: uppercase; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.85rem; }
.info-item { color: #888; }
.info-item b { color: #ccc; font-weight: normal; margin-left: 5px; }

/* Paski (Slim) */
.bar-slim-group { margin-bottom: 6px; display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: #666; }
.bar-track { flex: 1; height: 6px; background: #111; border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; }
.fill-hp { background: #b94a48; }
.fill-mp { background: #4a7bb9; }
.fill-cp { background: #dba63a; }

/* Przyciski Akcji */
.action-grid { display: flex; flex-direction: column; gap: 8px; }
.act-btn-small {
    background: #252529; border: 1px solid #333; color: #aaa;
    padding: 8px; font-size: 0.75rem; cursor: pointer; border-radius: 4px;
    text-align: center; transition: 0.2s;
}
.act-btn-small:hover { background: #333; color: #fff; }
.danger { color: #a55; }
.danger:hover { background: #311; color: #f77; border-color: #522; }



/* --- SINGULARITY DASHBOARD --- */

.singularity-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: 80vh;
    background: #0f0f11;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8);
}

@media (max-width: 900px) { .singularity-container { grid-template-columns: 1fr; } }

/* LEWY PANEL - LISTA WYBORU */
.char-selector {
    background: #141416;
    border-right: 1px solid #2a2a2e;
    padding: 20px 0;
}
.selector-header {
    padding: 0 20px 20px;
    color: #666;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border-bottom: 1px solid #222;
}
.char-btn {
    display: flex; align-items: center; gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: 0.2s;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.char-btn:hover { background: #1a1a1e; }
.char-btn.active { background: #1f1f23; border-left-color: var(--accent, #d4af37); }

.c-avatar-small {
    width: 40px; height: 40px;
    background: #252529; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-weight: bold; font-size: 0.9rem;
    border: 1px solid #333;
}
.char-btn.active .c-avatar-small { border-color: var(--accent, #d4af37); color: #fff; background: var(--accent, #d4af37); color: #000; }

.c-info-small { display: flex; flex-direction: column; }
.c-name-s { color: #ccc; font-weight: 600; font-size: 0.9rem; }
.c-lvl-s { color: #666; font-size: 0.75rem; }

/* PRAWY PANEL - GŁÓWNY WIDOK */
.main-stage {
    background: radial-gradient(circle at center, #1a1a20 0%, #0f0f11 100%);
    padding: 40px;
    position: relative;
    overflow-y: auto;
}

/* DRZEWO DANYCH (Grid Layout) */
.tree-grid {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 1100px) { .tree-grid { grid-template-columns: 1fr; } }

/* Centralny Węzeł - Avatar */
.central-node {
    grid-column: 2;
    grid-row: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    z-index: 2;
}
.big-avatar {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 4px solid #222;
    box-shadow: 0 0 0 4px var(--accent, #d4af37), 0 0 50px rgba(0,0,0,0.8);
    background: #111;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #fff;
    margin-bottom: 20px;
    position: relative;
}
.class-badge {
    position: absolute; bottom: 0; background: #000; color: var(--accent, #d4af37);
    padding: 5px 15px; border-radius: 20px; border: 1px solid #444; font-size: 0.8rem; font-weight: bold;
}

/* Moduły Boczne */
.data-module {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: 0.3s;
}
.data-module:hover { border-color: #444; background: rgba(30,30,35,0.8); }

/* Linie łączące (dekoracja) */
.tree-grid { position: relative; }

.module-title {
    font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 5px;
}

/* Statystyki wewnątrz modułów */
.stat-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; color: #888; }
.stat-row b { color: #ccc; }

/* Paski */
.bar-container { margin-bottom: 10px; }
.bar-top { display: flex; justify-content: space-between; font-size: 0.7rem; color: #aaa; margin-bottom: 2px; }
.track { height: 6px; background: #000; border-radius: 3px; }
.fill { height: 100%; border-radius: 3px; }
.f-hp { background: #d32f2f; }
.f-mp { background: #1976d2; }
.f-cp { background: #fbc02d; }
.f-xp { background: linear-gradient(90deg, #444, #fff); }

/* Dolny panel (Stopka) */
.footer-node {
    grid-column: 1 / -1;
    display: flex; justify-content: center; gap: 20px;
    margin-top: 20px;
}

/* Kafelki 10 Ciekawostek */
.feature-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.feature-box {
    background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; text-align: center;
}
.feat-label { font-size: 0.65rem; color: #666; }
.feat-val { font-size: 0.9rem; color: #eee; font-weight: bold; }

/* Akcje */
.action-btn-tree {
    background: transparent; border: 1px solid #444; color: #aaa;
    padding: 10px 30px; border-radius: 30px; text-transform: uppercase; font-size: 0.8rem;
    cursor: pointer; transition: 0.2s;
}
.action-btn-tree:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

/* Pusty Stan */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
    color: #444; text-align: center;
}


/* --- HARMONY DASHBOARD --- */

.harmony-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    font-family: "Inter", system-ui, sans-serif;
}

/* GŁÓWNA KONSOLA - JEDNA BRYŁA */
.harmony-console {
    background: #0e0e10;
    border: 1px solid #2a2a2e;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

/* GÓRNY PASEK - ZAKŁADKI POSTACI (TABS) */
.char-tabs {
    display: flex;
    background: #141417;
    border-bottom: 1px solid #222;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.char-tabs::-webkit-scrollbar { display: none; }

.char-tab {
    padding: 15px 25px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    border-right: 1px solid #222;
    border-bottom: 2px solid transparent;
    color: #666;
    text-decoration: none;
    transition: 0.3s;
    min-width: 180px;
}
.char-tab:hover { background: #1a1a1e; color: #aaa; }
.char-tab.active {
    background: #1a1a1e;
    color: #fff;
    border-bottom-color: var(--accent, #d4af37);
}
.tab-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #222;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.8rem; border: 1px solid #444;
}
.char-tab.active .tab-avatar { border-color: var(--accent, #d4af37); color: var(--accent, #d4af37); }

/* WNĘTRZE KONSOLI - GRID */
.console-body {
    display: grid;
    grid-template-columns: 300px 1fr 300px; /* 3 KOLUMNY: INFO | STATY | WYROCZNIA */
    flex: 1;
}
@media (max-width: 1100px) { .console-body { grid-template-columns: 1fr; } }

/* KOLUMNA 1: TOŻSAMOŚĆ */
.col-identity {
    padding: 40px;
    background: linear-gradient(135deg, #141417 0%, #0e0e10 100%);
    border-right: 1px solid #222;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.big-hex-avatar {
    width: 120px; height: 120px;
    background: #111;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #fff;
    border: 2px solid #333; /* Fallback */
    margin-bottom: 20px;
    position: relative;
}
.big-hex-avatar::after {
    content: ""; position: absolute; top:0; left:0; right:0; bottom:0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    border: 2px solid var(--accent, #d4af37);
    pointer-events: auto !important; cursor: pointer !important;
}

.c-name-main { font-size: 1.8rem; font-weight: 300; letter-spacing: 2px; color: #fff; margin: 0; }
.c-meta-main { color: #666; font-size: 0.8rem; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }

.status-indicator {
    margin-top: 20px;
    padding: 5px 15px; background: rgba(0,255,0,0.05); color: #4ade80;
    border: 1px solid #1b3a24; border-radius: 20px; font-size: 0.7rem; font-weight: bold;
}
.status-offline { background: rgba(255,255,255,0.05); color: #666; border-color: #333; }

/* KOLUMNA 2: CENTRUM DANYCH */
.col-stats {
    padding: 40px;
    display: flex; flex-direction: column; gap: 30px;
}

.stat-group h4 { margin: 0 0 15px 0; font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 2px; }

/* Eleganckie Paski */
.harmony-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
.hb-label { width: 30px; font-weight: bold; font-size: 0.75rem; color: #888; }
.hb-track { flex: 1; height: 4px; background: #222; border-radius: 2px; overflow: hidden; }
.hb-fill { height: 100%; border-radius: 2px; position: relative; }
.hb-fill::after { content:""; position:relative; top:0; right:0; bottom:0; width:5px; background:rgba(255,255,255,0.5); box-shadow: 0 0 10px #fff; }

.fill-hp { background: #d64040; box-shadow: 0 0 15px rgba(214, 64, 64, 0.3); }
.fill-mp { background: #407ad6; box-shadow: 0 0 15px rgba(64, 122, 214, 0.3); }
.fill-cp { background: #d6a540; box-shadow: 0 0 15px rgba(214, 165, 64, 0.3); }

/* Siatka Liczb */
.numbers-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.num-box { background: #141417; padding: 15px; border-radius: 6px; border: 1px solid #222; text-align: center; }
.num-label { font-size: 0.65rem; color: #666; text-transform: uppercase; }
.num-val { font-size: 1.1rem; color: #e0e0e0; font-weight: 600; margin-top: 5px; }

/* KOLUMNA 3: THE ORACLE (SMACZEK) */
.col-oracle {
    padding: 0;
    background: #111;
    border-left: 1px solid #222;
    position: relative;
    overflow: hidden;
}

/* Tło Oracla */
.oracle-bg {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background:  url("https://www.transparenttextures.com/patterns/cubes.png"), linear-gradient(180deg, #1a1a20 0%, #000 100%);
    opacity: 0.5; z-index: 0;
}

.oracle-content {
    position: relative; z-index: 1; padding: 40px; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
}

.oracle-title { font-size: 0.8rem; color: var(--accent, #d4af37); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.oracle-title::before { content: "👁"; font-size: 1.2rem; }

.suggestion-box { margin-top: 20px; }
.sugg-label { color: #666; font-size: 0.7rem; margin-bottom: 5px; }
.sugg-zone { font-size: 1.4rem; color: #fff; font-weight: 300; margin-bottom: 5px; border-left: 3px solid var(--accent, #d4af37); padding-left: 15px; }
.sugg-mob { color: #888; font-size: 0.8rem; font-style: italic; padding-left: 15px; }

.oracle-actions { margin-top: auto; display: grid; gap: 10px; }
.o-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #aaa;
    padding: 12px; text-transform: uppercase; font-size: 0.75rem; cursor: pointer;
    transition: 0.2s; text-align: center;
}
.o-btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

/* PUSTY STAN */
.empty-console { padding: 100px; text-align: center; color: #444; width: 100%; }



/* FIX: HERO BUTTON CLICKABILITY */

.hero-buttons a {
    position: relative;
    z-index: 6;
}

/* GLOBAL ECOSYSTEM BUTTON HOVER */
.btn.gold {
    transition: all .25s ease;
}

.btn.gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(197,160,89,0.35);
    filter: brightness(1.05);
}

/* NOSTALGIE™ STRONG BUTTON HOVER */
.btn.gold {
    transition: all .25s ease;
}

.btn.gold:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 35px rgba(197,160,89,0.55);
    filter: brightness(1.12);
}

/* NOSTALGIE™ GLOBAL BUTTON EFFECT */
    transition: all .25s ease;
}

    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 35px rgba(197,160,89,0.55);
    filter: brightness(1.12);
}

/* NOSTALGIE ECOSYSTEM MAIN BUTTON */
.btn.gold.eco-main{
    padding:15px 50px;
    font-size:1rem;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    border-radius:8px;
    transition:all .25s ease;
}
.btn.gold.eco-main:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 15px 40px rgba(197,160,89,0.45);
}

/* NOSTALGIE ECOSYSTEM BUTTON */
.btn.gold{
    padding:15px 50px;
    font-size:1rem;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.55);
    transition:all .25s ease;
}
.btn.gold:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 18px 45px rgba(197,160,89,0.55);
}

.hero-main-btn{
    padding:14px 40px;
    font-size:1rem;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    transition: all .25s ease;
}
.hero-main-btn:hover{
    transform: translateY(-2px);
    box-shadow:0 0 25px rgba(212,175,55,0.6);
}

/* NOSTALGIE BUTTON GLOW */
.btn.gold{
    box-shadow:0 0 25px rgba(212,175,55,0.45), 0 10px 35px rgba(0,0,0,0.6);
    transition:all .25s ease;
}
.btn.gold:hover{
    box-shadow:0 0 45px rgba(212,175,55,0.75), 0 15px 45px rgba(0,0,0,0.8);
    transform:translateY(-1px);
}

/* --- NOSTALGIE SUPPORTER SEAL --- */
.supporter-seal{
    margin-top:20px;
    padding:18px;
    text-align:center;
    border:1px solid rgba(197,160,89,0.5);
    background:linear-gradient(180deg,rgba(197,160,89,0.15),rgba(0,0,0,0.6));
    color:#e8d7a5;
    font-weight:600;
    letter-spacing:1px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
}

.supporter-seal::after{
    content:'';
    position:relative;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);
    animation:none !important;
}

@keyframes sealShine{
    0%{ left:-100%; }
    60%{ left:120%; }
    100%{ left:120%; }
}

/* VIP SEAL ANIMATION — NOSTALGIE */
.vip-seal{
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:18px 40px;
    border-radius:10px;
    background:linear-gradient(135deg,#8a6a1e,#d4af37,#8a6a1e);
    color:#111;
    font-weight:bold;
    letter-spacing:2px;
    text-align:center;
    box-shadow:0 0 25px rgba(212,175,55,0.6);
}
.vip-seal::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.65),transparent);
    animation:none !important;
}
@keyframes vipSweep{
    0%{left:-120%;}
    100%{left:120%;}
}

/* Nostalgie™ centered lists */
.n-card ul,
.n-container ul {
    text-align: left;
    display: table;
    margin: 0 auto;
    padding-left: 0;
}

.n-card ul li::marker {
    color: #c5a059;
    text-shadow: 0 0 6px rgba(197,160,89,0.6);
}


/* ===== NOSTALGIE PRO PLAYER PANEL ===== */
.player-pro-card{
    background: linear-gradient(180deg, rgba(18,18,20,0.95), rgba(8,8,10,0.95));
    border: 1px solid rgba(197,160,89,0.25);
    border-radius: 14px;
    padding: 28px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(197,160,89,0.06);
    transition: all .25s ease;
}

.player-pro-card:hover{
    border-color: rgba(197,160,89,0.5);
    box-shadow:
        0 15px 50px rgba(0,0,0,0.9),
        inset 0 0 60px rgba(197,160,89,0.08);
}

.player-pro-title{
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: #d7c38a;
}

.player-pro-value{
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
}

/* ===== NOSTALGIE™ SUPPORTER PRO SEAL ===== */
.supporter-seal-pro{
    max-width:1150px;
    margin:20px auto 0 auto;
    padding:22px 40px;
    text-align:center;
    font-weight:700;
    letter-spacing:3px;
    border-radius:14px;
    color:#1a1405;
    background:
        linear-gradient(145deg,#5f4814,#d4af37,#5f4814);
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.25),
        inset 0 -4px 12px rgba(0,0,0,0.6),
        0 0 35px rgba(212,175,55,0.35);
    position:relative;
    overflow:hidden;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.4),
        0 -1px 1px rgba(0,0,0,0.8);
}

/* moving royal reflection */
.supporter-seal-pro::after{
    content:'';
    position:relative;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:skewX(-25deg);
    animation:none !important;
}

@keyframes sealShine{
    0%{ left:-120%; }
    100%{ left:140%; }
}

/* === NOSTALGIE™ SUPPORTER PRO SEAL (ULTRA) === */
.supporter-seal-pro{
    position: relative;
    margin:20px auto 10px auto;
    padding:22px 40px;
    border-radius:14px;
    text-align:center;
    font-weight:800;
    letter-spacing:3px;
    color:#1a1200;

    background:
        linear-gradient(145deg,#7a5a16,#d4af37,#7a5a16);

    border:1px solid rgba(255,215,0,.35);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.35),
        inset 0 -6px 12px rgba(0,0,0,.5),
        0 0 45px rgba(212,175,55,.35);

    text-shadow:
        0 1px 0 rgba(255,255,255,.35),
        0 -1px 0 rgba(0,0,0,.7),
        0 0 12px rgba(255,215,0,.35);
}

/* moving reflection */
.supporter-seal-pro::after{
    content:"";
    position:relative;
    top:0;
    left:-60%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%);
    transform:skewX(-25deg);
    animation:none !important;
    pointer-events:none;
}

@keyframes supporterShine{
    0%{ left:-60%; }
    100%{ left:140%; }
}


/* === NOSTALGIE PRO ENGRAVED TITLE === */
}

/* płynny nieskończony połysk */
    100%{ background-position:300% 50%; }
}


/* ===== FULL WIDTH SUPPORTER SHINE ===== */
.supporter-seal-pro{
    position:relative;
    overflow:hidden;
}

/* pasek połysku lecący przez CAŁĄ szerokość */
.supporter-seal-pro::after{
    content:'';
    position:relative;
    top:0;
    left:-60%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:none !important;
}

@keyframes nostalgieFullShine{
    0%{ left:-60%; }
    100%{ left:140%; }
}


/* ===== COMMAND CORE BASE ===== */
.command-core-title{
    color:#ffffff;
}

/* płynny metal flow */

/* moving sunlight shine (nie urywa się) */




/* ===== PRO ENGRAVED GOLD — LUXURY SOFT EDIT ===== */
.pro-engrave{
    position:relative;
    display:inline-block;
    font-weight:700;
    letter-spacing:2px;

    background:linear-gradient(180deg,#fff2b0,#d4af37,#8c6b1f);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 1px 0 rgba(255,255,255,.35),
        0 2px 3px rgba(0,0,0,.55),
        0 0 10px rgba(212,175,55,.18);
}

/* rzadki subtelny refleks — raz na ~12s */
.pro-engrave::after{
    content:"";
    position:relative;
    top:0;
    left:-160%;
    width:160%;
    height:100%;
    background:linear-gradient(110deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 45%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0.18) 55%,
        rgba(255,255,255,0) 100%);
    animation:none !important;
}

@keyframes proSoftSweep{
    0%   { left:-160%; opacity:0; }
    15%  { opacity:1; }
    85%  { opacity:1; }
    100% { left:160%; opacity:0; }
}
    100%{ left:200%; }
}


/* ===== PRO GOLD SUN FLASH ===== */
.pro-engrave::before{
    content:"";
    position:relative;
    inset:-2px;
    background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.45), transparent 55%);
    opacity:0;
    pointer-events:none;
    animation:proGoldFlash 14s ease-in-out infinite;
}

@keyframes proGoldFlash{
    0%,85%,100% { opacity:0; }
    88% { opacity:.55; }
    92% { opacity:.25; }
}

/* ===== COMMAND CORE COLOR FIX ===== */
.command-core-title{
    color:#ffffff !important;
}

.command-core-title b,
.command-core-title span{
    color:#ffffff !important;
}

/* tylko PRO złote */
.command-core-title .pro-engrave{
    color:#f2d27a !important;
    -webkit-text-fill-color:#f2d27a !important;
}


/* === PRO occasional sun sparkle === */
.pro-engrave{
    position:relative;
}

/* pojedynczy błysk złota */
.pro-engrave::before{
    content:"";
    position:relative;
    top:-20%;
    left:-40%;
    width:30%;
    height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    opacity:0;
    transform:skewX(-25deg);
    animation:proSunFlash 9s ease-in-out infinite;
    pointer-events:none;
}

@keyframes proSunFlash{
    0%   { left:-40%; opacity:0; }
    5%   { opacity:0.9; }
    12%  { left:120%; opacity:0; }
    100% { left:120%; opacity:0; }
}


/* === PRO occasional sun sparkle === */
.pro-engrave{
    position:relative;
}

/* pojedynczy błysk złota */
.pro-engrave::before{
    content:"";
    position:relative;
    top:-20%;
    left:-40%;
    width:30%;
    height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    opacity:0;
    transform:skewX(-25deg);
    animation:proSunFlash 9s ease-in-out infinite;
    pointer-events:none;
}

@keyframes proSunFlash{
    0%   { left:-40%; opacity:0; }
    5%   { opacity:0.9; }
    12%  { left:120%; opacity:0; }
    100% { left:120%; opacity:0; }
}


/* ===== FINAL COMMAND CORE COLOR CONTROL ===== */

/* zwykły tytuł — biały */
.command-core-title b{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* tylko PRO ma złoto */
.pro-engrave{
    color:#e6c36a !important;
    background:linear-gradient(90deg,#6e5315,#d4af37,#fff1a6,#d4af37,#6e5315);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent !important;
    animation:proSunFlash 10s ease-in-out infinite;
}

/* jednorazowy miękki sweep po wejściu */
.pro-engrave::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
    animation:none !important;
    pointer-events:none;
}

@keyframes proSweepOnce{
    0%{ left:-120%; opacity:.9;}
    100%{ left:120%; opacity:0;}
}

/* sporadyczny błysk złota */
@keyframes proSunFlash{
    0%,94%,100%{ background-position:0% 50%; filter:brightness(1);}
    96%{ background-position:120% 50%; filter:brightness(1.25);}
}

/* ===== FINAL PRO MICRO SPARK + SUN REFLECTION ===== */

/* usuń stare efekty */
.pro-engrave::after{
    animation:none !important;
    background:none !important;
}

/* szybki refleks słońca przy załadowaniu */
.pro-engrave::before{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
    animation:none !important;
    pointer-events:none;
}

@keyframes proSunSweepOnce{
    0%{ left:-120%; opacity:.9;}
    100%{ left:120%; opacity:0;}
}

/* subtelne mikro-gwiazdki złota */
.pro-engrave{
    position:relative;
    overflow:visible;
}

.pro-engrave span.spark{
    position:relative;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#fff4c2;
    box-shadow:0 0 6px rgba(255,215,0,.8);
    opacity:0;
    animation:proSparkle 6s linear infinite;
}

@keyframes proSparkle{
    0%,96%,100%{ opacity:0; transform:scale(.5);}
    97%{ opacity:1; transform:scale(1.3);}
    98%{ opacity:.7; transform:scale(1);}
}


/* ===== COMMAND CORE BASE WHITE ===== */
.command-core-title b{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* ===== ONLY PRO GOLD ===== */
.command-core-title .pro-engrave{
    color:#e6c46a !important;
    background:linear-gradient(90deg,#8a6a1f,#ffd76a,#fff3b0,#ffd76a,#8a6a1f);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* CORE TEXT WHITE */
.core-main{
    color:#ffffff !important;
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* ONLY PRO GOLD */
.core-main .pro-engrave{
    color:#e6c46a;
    background:linear-gradient(90deg,#8a6a1f,#ffd76a,#fff3b0,#ffd76a,#8a6a1f);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* ============================
   NOSTALGIE™ PRO UI ENGINE
   ============================ */

.pro-ui{
    --pro-gold:#e6c46a;
    --pro-glow:rgba(230,196,106,.25);
}

/* delikatne podniesienie kontrastu całego panelu */
.pro-ui .harmony-console{
    box-shadow:0 0 40px rgba(0,0,0,.6),
               inset 0 0 60px rgba(230,196,106,.04);
}

/* nagłówki sekcji */
.pro-ui .section-title{
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--pro-gold);
}

/* kontenery systemowe */
.pro-ui .system-panel{
    border:1px solid rgba(230,196,106,.15);
    background:linear-gradient(180deg,rgba(20,20,20,.9),rgba(10,10,10,.95));
    box-shadow:0 0 20px rgba(0,0,0,.5);
}


/* ================================
   NOSTALGIE™ PRO PLAYER PANEL SKIN
   aktywuje się tylko gdy body ma klasę pro-user
================================ */

/* character tabs */
body.pro-user .char-tab{
    background:linear-gradient(180deg,#0f1116,#07080b);
    border:1px solid rgba(255,215,0,.15);
    box-shadow:0 0 20px rgba(0,0,0,.5) inset;
    transition:.25s;
}

body.pro-user .char-tab.active{
    border:1px solid rgba(255,215,0,.5);
    box-shadow:
        0 0 12px rgba(255,215,0,.35),
        inset 0 0 25px rgba(255,215,0,.15);
}

/* identity panel */
body.pro-user .col-identity{
    background:linear-gradient(180deg,#08090c,#050608);
    border:1px solid rgba(255,215,0,.18);
    box-shadow:
        inset 0 0 60px rgba(255,215,0,.04),
        0 0 25px rgba(0,0,0,.7);
}

/* stats */
body.pro-user .col-stats{
    background:linear-gradient(180deg,#090a0e,#050608);
    border:1px solid rgba(255,215,0,.12);
}

/* oracle */
body.pro-user .col-oracle{
    background:linear-gradient(180deg,#06070a,#030406);
    border-left:1px solid rgba(255,215,0,.25);
}

/* subtle gold separators */
body.pro-user .stat-group h4{
    color:#e6c36f;
    letter-spacing:2px;
}


/* ===== PRO BADGE ===== */
.pro-badge{
    margin-left:10px;
    padding:2px 10px;
    border-radius:6px;
    font-size:.7em;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(135deg,#b9922e,#ffd76a,#b9922e);
    color:#000;
    box-shadow:0 0 18px rgba(255,215,0,.35);
    position:relative;
    overflow:hidden;
}

/* one-time sun flash */
}


/* one-time sun flash (clean vanish) */
    100%{
        left:140%;
        opacity:0;
    }
}


.pro-badge{
    position:relative;
    overflow:hidden;
}

/* sun flash — appears once and disappears completely */
.pro-badge::after{
    content:"";
    position:relative;
    top:0;
    left:-150%;
    width:140%;
    height:100%;
    opacity:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
    animation:proFlash 1.2s ease-out;
    pointer-events:none;
}

@keyframes proFlash{
    0%{
        left:-150%;
        opacity:0;
    }
    15%{
        opacity:1;
    }
    85%{
        opacity:1;
    }
    100%{
        left:150%;
        opacity:0;
    }
}


/* =========================
   NOSTALGIE PRO MODE PANEL
   ========================= */

.pro-mode{
    position:relative;
}

.pro-mode::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:14px;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 0%, rgba(212,175,55,.18), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(212,175,55,.12), transparent 45%);
    filter:blur(14px);
    z-index:0;
}

.pro-mode .harmony-console{
    border:1px solid rgba(212,175,55,.25);
    box-shadow:
        0 0 40px rgba(212,175,55,.08),
        inset 0 0 30px rgba(212,175,55,.05);
}


/* =========================
   PRO CHAR TABS ENERGY LINE
   ========================= */

.pro-mode .char-tab.active{
    position:relative;
    overflow:hidden;
}

.pro-mode .char-tab.active::after{
    content:"";
    position:relative;
    left:-40%;
    bottom:0;
    width:40%;
    height:2px;
    background:linear-gradient(90deg, transparent, #ffd700, transparent);
    animation:proTabFlow 3s linear infinite;
}

@keyframes proTabFlow{
    0%{ left:-40%; }
    100%{ left:120%; }
}


/* =========================
   PRO MODE — VITALS PREMIUM
   ========================= */

.pro-mode .hb-fill{
    position:relative;
    box-shadow:
        0 0 10px rgba(255,215,0,.25),
        inset 0 0 6px rgba(255,255,255,.12);
}

.pro-mode .hb-fill::after{
    content:"";
    position:relative;
    top:0;
    left:-50%;
    width:40%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation:proVitalsFlow 4s linear infinite;
}

@keyframes proVitalsFlow{
    0%{ left:-50%; }
    100%{ left:120%; }
}


/* =========================
   PRO MODE — HERO PROFILE
   ========================= */

.pro-mode .col-identity{
    position:relative;
    transition: all .35s ease;
}

.pro-mode .col-identity::before{
    content:"";
    position:relative;
    inset:-1px;
    border-radius:14px;
    background: radial-gradient(circle at 50% 30%, rgba(255,215,0,.12), transparent 70%);
    opacity:.7;
    pointer-events:none;
    transition: opacity .3s ease;
}

.pro-mode .col-identity:hover::before{
    opacity:1;
}

.pro-mode .col-identity:hover{
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.55),
        0 0 18px rgba(255,215,0,.25);
}


/* =========================
   PRO MODE — CHARACTER TABS
   ========================= */

.pro-mode .char-tabs{
    display:flex;
    gap:8px;
    padding:6px;
    background:linear-gradient(180deg,#0c0c0f,#070708);
    border-radius:12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.pro-mode .char-tab{
    border-radius:10px;
    transition:all .25s ease;
    border:1px solid rgba(255,215,0,.08);
}

.pro-mode .char-tab.active{
    background:linear-gradient(180deg,#1b1608,#0e0b02);
    border:1px solid rgba(255,215,0,.35);
    box-shadow:
        0 0 10px rgba(255,215,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.pro-mode .char-tab:hover{
    transform:translateY(-2px);
    border-color:rgba(255,215,0,.45);
    box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 10px rgba(255,215,0,.25);
}


/* ======================
   PRO MODE — ORACLE CORE
   ====================== */

.pro-mode .col-oracle{
    background:
        radial-gradient(circle at top, rgba(255,215,0,.06), transparent 60%),
        #08080a;
    border-left:1px solid rgba(255,215,0,.25);
    box-shadow:
        inset 0 0 25px rgba(255,215,0,.06),
        0 0 20px rgba(0,0,0,.6);
}

/* search scan */
.pro-mode #oracleInput{
    border:1px solid rgba(255,215,0,.25);
    box-shadow:0 0 10px rgba(255,215,0,.12);
}

.pro-mode #oracleInput:focus{
    box-shadow:
        0 0 14px rgba(255,215,0,.35),
        inset 0 0 8px rgba(255,215,0,.12);
}

/* results */
.pro-mode #oracleResults div{
    transition:all .18s ease;
}

.pro-mode #oracleResults div:hover{
    background:rgba(255,215,0,.04);
    box-shadow:inset 0 0 0 1px rgba(255,215,0,.12);
}

/* rarity glow */
.pro-mode .oracle-rare{
    color:#ffd700;
    text-shadow:0 0 8px rgba(255,215,0,.45);
}


/* ===== NOSTALGIE ECOSYSTEM GRID ===== */
.ecosystem-grid{
    display:grid;
    grid-template-columns: 340px 1fr 360px;
    gap:30px;
    align-items:stretch;
}

@media (max-width: 1200px){
    .ecosystem-grid{
        grid-template-columns:1fr;
    }
}

/* ===== ECOSYSTEM TITLES ===== */
.eco-people::before,
.eco-core::before,
.eco-system::before{
    display:block;
    font-size:0.7rem;
    letter-spacing:2px;
    color:#777;
    margin-bottom:10px;
    text-transform:uppercase;
}

.eco-people::before{ content:"Nostalgie™ People"; }
.eco-core::before{ content:"Nostalgie™ Core"; }
.eco-system::before{ content:"Nostalgie™ System"; }

.eco-system{
    border-left:1px solid rgba(212,175,55,.25);
}

/* FIX: remove duplicated header overlay */
.site-header::after,
header::after{
    display:none !important;
    content:none !important;
}

/* ===== HEADER USERNAME ===== */
.user-name{
    border:1px solid #333;
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(4px);
}

/* Supporter PRO username */
.user-name.pro{
    color:#f0d37a;
    border-color:#8b6b1f;
    text-shadow:0 0 10px rgba(212,175,55,.35);
}

/* ===== ADMIN BUTTON ===== */
.admin-btn{
    border:1px solid rgba(212,175,55,.5);
    color:#ffd86b !important;
    background:rgba(212,175,55,.08);
    box-shadow:0 0 12px rgba(212,175,55,.25);
    transition:.25s;
}

.admin-btn:hover{
    background:rgba(212,175,55,.18);
    box-shadow:0 0 20px rgba(212,175,55,.45);
}

/* ===== ADMIN BREATHING RED ===== */
.admin-btn{
    border:1px solid rgba(255,80,80,.6);
    color:#ff6b6b !important;
    background:rgba(255,50,50,.06);
    animation:adminBreath 3.5s ease-in-out infinite;
}

@keyframes adminBreath{
    0%{ box-shadow:0 0 6px rgba(255,60,60,.25); }
    50%{ box-shadow:0 0 18px rgba(255,60,60,.55); }
    100%{ box-shadow:0 0 6px rgba(255,60,60,.25); }
}


/* ===== SUPPORTER NAME PRESTIGE ===== */
.user-name.pro{
    background:linear-gradient(90deg,#7a5a16,#d4af37,#fff2a8,#d4af37,#7a5a16);
    background-size:300% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:
        0 1px 0 rgba(255,255,255,.25),
        0 0 12px rgba(212,175,55,.35);
    animation:proNameShimmer 10s linear infinite;
}

@keyframes proNameShimmer{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}


/* ===== USER PRESTIGE SYSTEM ===== */

.user-pro{
    border:1px solid rgba(212,175,55,.6);
    color:#f3d98a !important;
    box-shadow:0 0 12px rgba(212,175,55,.25), inset 0 0 8px rgba(212,175,55,.15);
    background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(0,0,0,.4));
    font-weight:600;
}

.user-pro::after{
    content:" PRO";
    margin-left:6px;
    font-size:0.65rem;
    letter-spacing:1px;
    color:#000;
    background:linear-gradient(180deg,#fff1a6,#d4af37);
    padding:2px 6px;
    border-radius:6px;
    box-shadow:0 0 10px rgba(212,175,55,.4);
}

/* ADMIN breathing */
.user-admin{
    border:1px solid rgba(255,80,80,.6);
    color:#ff9a9a !important;
    animation:adminBreath 2.8s ease-in-out infinite;
}

@keyframes adminBreath{
    0%{ box-shadow:0 0 6px rgba(255,60,60,.3); }
    50%{ box-shadow:0 0 18px rgba(255,60,60,.8); }
    100%{ box-shadow:0 0 6px rgba(255,60,60,.3); }
}


/* === USERNAME PRESTIGE === */
.user-pro .user-name{
    background:linear-gradient(90deg,#7a5a16,#d4af37,#fff1a6,#d4af37,#7a5a16);
    background-size:300% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 10px rgba(212,175,55,.45);
    animation:userGoldFlow 8s linear infinite;
    font-weight:700;
}

@keyframes userGoldFlow{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}


/* ===== USER PRO HEADER ===== */
.user-pro{
    color:#f2d27a !important;
    text-shadow:
        0 0 8px rgba(212,175,55,.7),
        0 0 18px rgba(212,175,55,.5);
    font-weight:700;
    letter-spacing:1px;
}

/* === RESTORE CHARACTER CARD GOLD AMBIENT === */
.char-tab.active,
.col-identity,
.console-body > div{
    box-shadow:
        0 0 0 1px rgba(212,175,55,.15),
        0 0 18px rgba(212,175,55,.12),
        inset 0 0 30px rgba(255,215,120,.05);
    background:
        radial-gradient(circle at 20% 0%, rgba(255,215,120,.06), transparent 60%),
        radial-gradient(circle at 80% 100%, rgba(255,215,120,.04), transparent 70%);
}

/* delikatne "luxury ambient" tylko dla PRO */
.user-pro ~ main .console-body{
    position:relative;
}

.user-pro ~ main .console-body::before{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,215,120,.05), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(255,215,120,.04), transparent 45%);
}

/* === NOSTALGIE™ PRO INTERFACE LAYER === */

.user-pro ~ main{
    position:relative;
    overflow:hidden;
}

/* global premium ambient */
.user-pro ~ main::before{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,215,120,.06), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(255,215,120,.05), transparent 45%),
        radial-gradient(circle at 50% 0%, rgba(255,215,120,.04), transparent 60%);
    animation:proAmbientMove 18s linear infinite;
    opacity:.7;
}

/* bardzo wolny ruch premium glow */
@keyframes proAmbientMove{
    0%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(-1%,1%,0); }
    100%{ transform:translate3d(0,0,0); }
}

/* subtelna głębia paneli */
.user-pro .console-body > div{
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,215,120,.08);
    box-shadow:
        0 0 20px rgba(212,175,55,.08),
        inset 0 0 25px rgba(255,215,120,.04);
}


/* ===== PRO DASHBOARD REFINED DEPTH ===== */
.user-pro .harmony-wrapper{
    position:relative;
    background:linear-gradient(180deg, rgba(212,175,55,.06), rgba(0,0,0,0));
    border:1px solid rgba(212,175,55,.18);
    box-shadow:
        inset 0 0 40px rgba(212,175,55,.06),
        0 0 25px rgba(212,175,55,.08);
}

/* subtle luxury edge */
.user-pro .harmony-wrapper::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:12px;
    pointer-events:none;
    box-shadow:
        inset 0 1px 0 rgba(255,230,150,.25),
        inset 0 -1px 0 rgba(212,175,55,.15);
}


/* ===== LOCKED PRO DEPTH (clean luxury) ===== */
.user-pro .harmony-wrapper{
    position:relative;
    background:linear-gradient(180deg, rgba(212,175,55,.03), rgba(0,0,0,0));
    border:1px solid rgba(212,175,55,.18);
    box-shadow:
        inset 0 0 18px rgba(212,175,55,.05),
        0 0 18px rgba(212,175,55,.06);
    overflow:hidden;
}

/* remove old wide glow if present */
.user-pro .harmony-wrapper::after{
    display:none;
}


/* ===== PRO LIGHT HIERARCHY ===== */

/* CORE — centralny złoty ambient */
.user-pro .core-panel{
    box-shadow:
        inset 0 0 40px rgba(212,175,55,.06),
        0 0 24px rgba(212,175,55,.10);
}

/* PEOPLE — chłodniejszy steel tint */
.user-pro .people-panel{
    box-shadow:
        inset 0 0 35px rgba(160,170,190,.05),
        0 0 18px rgba(212,175,55,.05);
}

/* ORACLE — arcane glow */
.user-pro .oracle-panel{
    box-shadow:
        inset 0 0 35px rgba(120,160,255,.06),
        0 0 18px rgba(120,160,255,.10);
}


/* ===== DASHBOARD WRAPPER FIX ===== */
.harmony-wrapper{
    background: radial-gradient(1200px 600px at 50% -200px,
                rgba(255,215,0,0.06),
                rgba(0,0,0,0.85));
}

.harmony-console{
    background: rgba(10,10,14,0.82);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 20px 60px rgba(0,0,0,0.65);
}

.char-tab{
    background: linear-gradient(180deg,
        rgba(255,255,255,0.05),
        rgba(0,0,0,0.55));
    border:1px solid rgba(255,255,255,0.08);
}

.char-tab.active{
    background: linear-gradient(180deg,
        rgba(255,215,0,0.22),
        rgba(120,90,10,0.55));
    border:1px solid rgba(255,215,0,0.55);
    box-shadow:
        0 0 14px rgba(255,215,0,0.35),
        inset 0 0 8px rgba(255,215,0,0.18);
}


/* ===== CLEAR PANEL (REMOVE FOG) ===== */

.harmony-wrapper{
    background:
        radial-gradient(1000px 500px at 50% -200px,
        rgba(255,215,0,0.04),
        rgba(5,5,7,0.96));
}

.harmony-console{
    background: rgba(10,10,14,0.96);   /* było ~0.82 */
    backdrop-filter: blur(3px);        /* było 10px */
}

.col-identity,
.col-stats,
.col-oracle{
    background: rgba(12,12,16,0.96);
    backdrop-filter: blur(2px);
}

.char-tab{
    background: rgba(18,18,22,0.92);
}


/* ===== SHARP PREMIUM TEXT (REMOVE MILK EFFECT) ===== */

.harmony-wrapper *{
    text-shadow: none;
}

.command-core-title,
.char-name,
.section-title{
    text-shadow:
        0 0 6px rgba(255,215,0,0.25),
        0 0 1px rgba(255,255,255,0.15);
}

/* ACTIVE TAB */
.char-tab.active{
    box-shadow:
        inset 0 0 0 1px rgba(255,215,0,0.35),
        0 0 18px rgba(255,215,0,0.15);
}

/* PANEL EDGE */
.harmony-console{
    box-shadow:
        0 0 0 1px rgba(255,215,0,0.15),
        0 30px 80px rgba(0,0,0,0.65);
}


/* ===== REMOVE MILKY PRO WRAPPER ===== */
.harmony-wrapper.user-pro{
    backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.0)) !important;
}

/* ===== SHARP METAL PANEL ===== */
.harmony-console{
    border:1px solid rgba(255,215,0,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 30px rgba(255,215,0,0.12),
        0 25px 70px rgba(0,0,0,0.7);
}

/* ===== METALLIC TEXT ===== */
.command-core-title b,
.char-name{
    color:#f5d97a;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.25),
        0 0 8px rgba(255,215,0,0.25);
}

/* ===== ACTIVE TAB GOLD ===== */
.char-tab.active{
    background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,215,0,0.05));
    border:1px solid rgba(255,215,0,0.45);
    box-shadow:0 0 18px rgba(255,215,0,0.25);
}


/* ===== ULTRA SUBTLE METAL REFLECTION ===== */
.harmony-console::after{
    content:"";
    position:relative;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 55%,
        transparent 100%
    );
    transform:translateX(-120%);
    animation:none !important;
}

@keyframes metalReflection_DISABLED{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(120%); }
}


/* ===== PEOPLE SECTION — GLOBAL CLEAN READABILITY ===== */

.people-card,
.character-card{
    background:linear-gradient(180deg,#0b0f18,#0a0d14);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 28px rgba(0,0,0,0.55);
    color:#e6e9ef;
}

/* avatar clarity */
.character-avatar{
    background:#05070c;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 10px 25px rgba(0,0,0,0.6);
}

/* name readability */
.character-name{
    color:#f1f3f7;
    text-shadow:0 1px 1px rgba(0,0,0,0.6);
    letter-spacing:1px;
}

/* level text */
.character-meta{
    color:#9aa3b2;
}

/* subtle hover premium */
.character-card:hover{
    border-color:rgba(212,175,55,0.35);
    box-shadow:
        0 0 0 1px rgba(212,175,55,0.12),
        0 18px 40px rgba(0,0,0,0.7);
    transform:translateY(-2px);
}


/* ===== NOSTALGIE PEOPLE — AVATAR REDESIGN ===== */

.tab-avatar,
.big-hex-avatar{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:700;
    color:#fff;
    background:
        radial-gradient(circle at 30% 30%, #2b2f3a, #0b0e14);
    border-radius:18px;
    position:relative;
    overflow:hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 25px rgba(0,0,0,0.7);
}

/* gold edge glow */
.tab-avatar::after,
.big-hex-avatar::after{
    content:'';
    position:relative;
    inset:0;
    border-radius:18px;
    padding:1px;
    background:linear-gradient(120deg, rgba(212,175,55,0.0), rgba(212,175,55,0.7), rgba(212,175,55,0.0));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:.35;
}

/* character names typography */
.c-name-main{
    font-family:'Cinzel', serif;
    letter-spacing:1.5px;
    font-weight:600;
    color:#f3f5f9;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* tabs typography */
.char-tab{
    font-family:'Cinzel', serif;
    letter-spacing:.8px;
}

.char-tab.active{
    background:linear-gradient(180deg,#121622,#0c0f16);
    border-bottom:2px solid rgba(212,175,55,.65);
}


/* ===== RACE COLORS ===== */

.race-human::after{
    background:linear-gradient(120deg, transparent, rgba(255,215,120,.7), transparent);
}

.race-elf::after{
    background:linear-gradient(120deg, transparent, rgba(120,255,190,.7), transparent);
}

.race-darkelf::after{
    background:linear-gradient(120deg, transparent, rgba(170,120,255,.7), transparent);
}

.race-orc::after{
    background:linear-gradient(120deg, transparent, rgba(120,255,120,.7), transparent);
}

.race-dwarf::after{
    background:linear-gradient(120deg, transparent, rgba(255,180,80,.7), transparent);
}

.race-kamael::after{
    background:linear-gradient(120deg, transparent, rgba(120,200,255,.7), transparent);
}


/* ===== CHARACTER TABS PREMIUM INTERACTION ===== */

.char-tab{
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.char-tab:hover{
    transform: scale(1.06);
    box-shadow: 0 8px 25px rgba(0,0,0,.45), 0 0 12px rgba(255,215,120,.25);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
}

/* active character focus */
.char-tab.active{
    transform: scale(1.08);
    box-shadow:
        0 0 0 1px rgba(255,215,120,.35),
        0 10px 35px rgba(0,0,0,.6),
        0 0 18px rgba(255,215,120,.25);
    background: linear-gradient(180deg, rgba(255,215,120,.08), rgba(0,0,0,.35));
}


/* ===== PEOPLE SECTION FONT UPGRADE ===== */

.char-tab,
.c-name-main,
.c-meta-main{
    font-family: 'Cinzel', serif;
    letter-spacing:.6px;
}

/* ===== REMOVE MILKY OVERLAY LAYER ===== */

.char-tab::before,
.char-tab::after{
    display:none !important;
}

/* subtle premium readability */
.char-tab{
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
    border:1px solid rgba(255,255,255,.06);
}


/* ===== PEOPLE FONT HARD OVERRIDE ===== */
.char-tabs,
.char-tab,
.char-tab *,
.c-name-main,
.c-meta-main{
    font-family:'Cinzel', serif !important;
}

/* ===== REMOVE HOVER SCALE (clean premium look) ===== */
.char-tab{
    transform:none !important;
    overflow:hidden;
}

.char-tab:hover{
    transform:none !important;
}

/* ===== CLEAN BORDER LOOK ===== */
.char-tab{
    background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.85));
    border:1px solid rgba(255,255,255,.08);
}


/* ===== RACE AVATAR EMBLEM ===== */

.big-hex-avatar{
    position:relative;
    font-family:'Cinzel', serif;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(180deg,#111,#000);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 20px rgba(0,0,0,.6) inset;
}

/* human */
.race-human{
    box-shadow:
        0 0 20px rgba(255,215,120,.25),
        0 0 60px rgba(255,215,120,.10) inset;
}

/* elf */
.race-elf{
    box-shadow:
        0 0 20px rgba(120,255,190,.25),
        0 0 60px rgba(120,255,190,.10) inset;
}

/* dark elf */
.race-darkelf{
    box-shadow:
        0 0 20px rgba(170,120,255,.25),
        0 0 60px rgba(170,120,255,.10) inset;
}

/* orc */
.race-orc{
    box-shadow:
        0 0 20px rgba(120,255,120,.25),
        0 0 60px rgba(120,255,120,.10) inset;
}

/* dwarf */
.race-dwarf{
    box-shadow:
        0 0 20px rgba(255,180,80,.25),
        0 0 60px rgba(255,180,80,.10) inset;
}

/* kamael */
.race-kamael{
    box-shadow:
        0 0 20px rgba(120,200,255,.25),
        0 0 60px rgba(120,200,255,.10) inset;
}


/* ===== AVATAR EFFECT LAYER FIX ===== */

.big-hex-avatar{
    position:relative;
    overflow:hidden;
}

.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    opacity:.55;
    mix-blend-mode:screen;
    pointer-events:none;
}


/* ===== AVATAR PREMIUM VISIBILITY BOOST ===== */

.big-hex-avatar{
    position:relative;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 60%),
        linear-gradient(180deg,#0b0e14,#0a0c11);
    box-shadow:
        inset 0 0 25px rgba(255,215,120,.15),
        0 0 20px rgba(0,0,0,.6);
}

.big-hex-avatar::after{
    opacity:.85;
    filter:blur(6px);
}

.char-tab.active .big-hex-avatar{
    box-shadow:
        inset 0 0 30px rgba(255,215,120,.35),
        0 0 22px rgba(255,215,120,.18);
}


/* ===== CHARACTER TAB AVATAR FIX ===== */

.char-tab .char-avatar{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.15), transparent 60%),
        linear-gradient(180deg,#11161f,#0b0f15);
    border:1px solid rgba(255,215,120,.35);
    box-shadow:
        inset 0 0 12px rgba(255,215,120,.25),
        0 0 12px rgba(0,0,0,.6);
    color:#fff;
    font-weight:700;
    text-shadow:0 0 10px rgba(255,215,120,.6);
}

.char-tab.active .char-avatar{
    box-shadow:
        inset 0 0 18px rgba(255,215,120,.45),
        0 0 16px rgba(255,215,120,.25);
}


/* ===== TAB AVATAR PREMIUM ===== */

.char-tab-avatar{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(180deg,#141a24,#0a0e14);
    border:1px solid rgba(255,215,120,.35);
    box-shadow:
        inset 0 0 10px rgba(255,215,120,.2),
        0 0 10px rgba(0,0,0,.7);
    text-shadow:0 0 8px rgba(255,215,120,.6);
    transition:.25s;
}

.char-tab.active .char-tab-avatar{
    transform:scale(1.05);
    box-shadow:
        inset 0 0 14px rgba(255,215,120,.4),
        0 0 18px rgba(255,215,120,.25);
}


/* ===== FIX TAB CHARACTER LOOK ===== */

.char-tab{
    background:linear-gradient(180deg,#0f141c,#070b11);
    border:1px solid rgba(255,215,120,.18);
    box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}

.char-tab.active{
    background:linear-gradient(180deg,#171f2b,#0b1017);
    border:1px solid rgba(255,215,120,.45);
    box-shadow:
        inset 0 0 30px rgba(255,215,120,.15),
        0 0 18px rgba(255,215,120,.15);
}

.char-tab-avatar{
    background:linear-gradient(180deg,#1b2330,#0d121a);
    border:1px solid rgba(255,215,120,.45);
    box-shadow:
        inset 0 0 12px rgba(255,215,120,.25),
        0 0 10px rgba(0,0,0,.6);
}

.char-tab.active .char-tab-avatar{
    box-shadow:
        inset 0 0 18px rgba(255,215,120,.45),
        0 0 22px rgba(255,215,120,.35);
    transform:scale(1.06);
}


/* ===== CLEAN CHARACTER AVATAR STYLE ===== */

.tab-avatar,
.big-hex-avatar{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#1a1f2b,#0b0e14) !important;
    border:1px solid rgba(255,215,120,.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 14px rgba(0,0,0,.55);
    backdrop-filter:none !important;
}

/* REMOVE GLASS OVERLAY */
.tab-avatar::before,
.big-hex-avatar::before{
    display:none !important;
}

/* LETTER STYLE */
.tab-avatar,
.big-hex-avatar{
    font-family: 'Cinzel', serif;
    font-weight:600;
    color:#f5f5f5;
    text-shadow:0 0 10px rgba(255,215,120,.35);
}

/* HOVER */
.char-tab:hover .tab-avatar{
    transform:scale(1.05);
    border-color:rgba(255,215,120,.5);
}


/* ===== RACE ICON AVATARS ===== */

.tab-avatar,
.big-hex-avatar{
    background-size:cover;
    background-position:center;
    color:transparent;
}

/* race images */
.race-human{background-image:url('/assets/img/races/human.svg');}
.race-elf{background-image:url('/assets/img/races/elf.svg');}
.race-darkelf{background-image:url('/assets/img/races/darkelf.svg');}
.race-orc{background-image:url('/assets/img/races/orc.svg');}
.race-dwarf{background-image:url('/assets/img/races/dwarf.svg');}
.race-kamael{background-image:url('/assets/img/races/kamael.svg');}


/* race icon visibility fix */

.tab-avatar,
.big-hex-avatar{
    background-size:70% !important;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 0 6px rgba(255,215,120,.6));
}

.big-hex-avatar{
    background-size:60% !important;
}


/* remove glass blur from avatars */

.tab-avatar::before,
.big-hex-avatar::before{
    display:none !important;
}

.tab-avatar,
.big-hex-avatar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background-color:#0b0f18 !important;
}


/* ===== RACE ICONS ===== */

.race-human{
    background:url('/assets/img/races/human.svg') center/55% no-repeat, #0b0f18;
}
.race-elf{
    background:url('/assets/img/races/elf.svg') center/55% no-repeat, #0b0f18;
}
.race-darkelf{
    background:url('/assets/img/races/darkelf.svg') center/55% no-repeat, #0b0f18;
}
.race-orc{
    background:url('/assets/img/races/orc.svg') center/55% no-repeat, #0b0f18;
}
.race-dwarf{
    background:url('/assets/img/races/dwarf.svg') center/55% no-repeat, #0b0f18;
}
.race-kamael{
    background:url('/assets/img/races/kamael.svg') center/55% no-repeat, #0b0f18;
}


/* ===== RACE ICON IMAGES ===== */

.big-hex-avatar,
.tab-avatar{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:transparent;
}

/* PEOPLE PANEL */

.big-hex-avatar.race-human{background-image:url('/assets/img/races/human.png');}
.big-hex-avatar.race-elf{background-image:url('/assets/img/races/elf.png');}
.big-hex-avatar.race-darkelf{background-image:url('/assets/img/races/darkelf.png');}
.big-hex-avatar.race-orc{background-image:url('/assets/img/races/orc.png');}
.big-hex-avatar.race-dwarf{background-image:url('/assets/img/races/dwarf.png');}
.big-hex-avatar.race-kamael{background-image:url('/assets/img/races/kamael.png');}

/* CHAR TABS */

.tab-avatar.race-human{background-image:url('/assets/img/races/human.png');}
.tab-avatar.race-elf{background-image:url('/assets/img/races/elf.png');}
.tab-avatar.race-darkelf{background-image:url('/assets/img/races/darkelf.png');}
.tab-avatar.race-orc{background-image:url('/assets/img/races/orc.png');}
.tab-avatar.race-dwarf{background-image:url('/assets/img/races/dwarf.png');}
.tab-avatar.race-kamael{background-image:url('/assets/img/races/kamael.png');}


/* ===== REMOVE AVATAR OVERLAY ===== */

.big-hex-avatar::after,
.tab-avatar::after{
    display:none !important;
}

.big-hex-avatar,
.tab-avatar{
    background-color:transparent !important;
    box-shadow:0 0 14px rgba(255,215,120,.25);
}


/* ===== RACE ICON IMAGES ===== */

.tab-avatar,
.big-hex-avatar{
    background-size:cover !important;
    background-position:center !important;
    color:transparent !important;
    font-size:0 !important;
}

/* RACES */

.race-human{ background-image:url('/assets/img/races/human.png') !important; }
.race-elf{ background-image:url('/assets/img/races/elf.png') !important; }
.race-darkelf{ background-image:url('/assets/img/races/darkelf.png') !important; }
.race-orc{ background-image:url('/assets/img/races/orc.png') !important; }
.race-dwarf{ background-image:url('/assets/img/races/dwarf.png') !important; }
.race-kamael{ background-image:url('/assets/img/races/kamael.png') !important; }


/* ===== PEOPLE CARD AVATAR REDESIGN ===== */

.big-hex-avatar{
    width:120px;
    height:150px;
    border-radius:18px;
    background:#0b0f17;
    border:2px solid rgba(255,215,120,.55);
    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 18px rgba(255,215,120,.18);
    background-size:cover;
    background-position:center;
    position:relative;
}

/* remove old hex pseudo layers */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
}

/* TAB avatar match */
.tab-avatar{
    border-radius:14px !important;
    border:1px solid rgba(255,215,120,.35);
    box-shadow:0 0 10px rgba(255,215,120,.15);
}


/* ===== SQUARE HERO AVATAR ===== */

.big-hex-avatar{
    width:170px !important;
    height:170px !important;
    border-radius:22px !important;
    border:2px solid rgba(255,215,120,.65);
    background:#0b0f17;
    background-size:cover !important;
    background-position:center !important;
    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 22px rgba(255,215,120,.22);
}

/* disable any old hex shapes */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
    content:none !important;
}


/* ===== FORCE SQUARE AVATAR ===== */

.big-hex-avatar{
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;

    width:180px !important;
    height:180px !important;

    border-radius:20px !important;
    border:2px solid rgba(255,215,120,.7);

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    box-shadow:
        0 0 0 1px rgba(255,215,120,.25) inset,
        0 0 28px rgba(255,215,120,.22);
}

/* kill hex pseudo layers */
.big-hex-avatar:before,
.big-hex-avatar:after{
    display:none !important;
    content:none !important;
}


/* ===== PREMIUM AVATAR FRAME ===== */

.big-hex-avatar{
    position:relative;
    overflow:hidden;
}

/* gold glow */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:20px;
    pointer-events:none;

    box-shadow:
        0 0 0 1px rgba(255,215,120,.45) inset,
        0 0 25px rgba(255,215,120,.28),
        0 0 60px rgba(255,215,120,.12);
}

/* shimmer */
.big-hex-avatar::after{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:80%;
    height:180%;
    pointer-events:none;

    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,235,160,.35) 50%,
        transparent 70%
    );

    transform:rotate(20deg);
    animation:avatarShimmer 6s linear infinite;
    opacity:.45;
}

@keyframes avatarShimmer{
    0%{ transform:translateX(-120%) rotate(20deg); }
    100%{ transform:translateX(220%) rotate(20deg); }
}


/* ===== AVATAR ACTIVE / INACTIVE EFFECT ===== */

/* inactive tabs grayscale */
.char-tab .tab-avatar{
    filter:grayscale(100%) brightness(.7);
    transition:all .35s ease;
}

/* active tab full color */
.char-tab.active .tab-avatar{
    filter:none;
}

/* ===== GLASS OVERLAY ===== */

.tab-avatar::after,
.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.18),
            rgba(255,255,255,.05) 40%,
            rgba(0,0,0,.25)
        );
}


/* ===== CHARACTER AVATAR GLASS SYSTEM ===== */

.char-tab .tab-avatar{
    filter:grayscale(100%) brightness(.7);
    position:relative;
    overflow:hidden;
}

/* szkło */
.char-tab .tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,.02) 40%, transparent 60%);
    pointer-events:none;
}

/* aktywna karta = kolor */
.char-tab.active .tab-avatar{
    filter:none;
    box-shadow:
        0 0 14px rgba(255,215,0,.45),
        inset 0 0 10px rgba(255,255,255,.15);
}


/* ===== NOSTALGIE™ PEOPLE AVATAR ULTRA GLASS ===== */

.big-hex-avatar{
    position:relative;
    border-radius:14px;
    border:2px solid rgba(212,175,55,.55);
    box-shadow:
        0 12px 30px rgba(0,0,0,.6),
        0 0 22px rgba(212,175,55,.35),
        inset 0 0 25px rgba(255,255,255,.08);
    overflow:hidden;
    transform:translateZ(0);
}

/* glass layer */
.big-hex-avatar::after{
    content:"";
    position:relative;
    inset:0;
    background:
        linear-gradient(140deg,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.08) 30%,
            rgba(255,255,255,.02) 50%,
            transparent 60%),
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 40%);
    pointer-events:none;
}

/* subtle depth highlight */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,.25),
        inset 0 -10px 20px rgba(0,0,0,.55);
    pointer-events:none;
}


/* ===== REMOVE GLOBAL SWEEP SHINE ===== */

.supporter-seal-pro::after,
.pro-engrave::after,
.pro-engrave::before{
    animation:none !important;
    opacity:0 !important;
}


/* ===== PEOPLE ULTRA GOLD FRAME ===== */

.big-hex-avatar{
    border:2px solid rgba(212,175,55,.65);
    box-shadow:
        0 12px 35px rgba(0,0,0,.6),
        0 0 22px rgba(212,175,55,.35),
        inset 0 0 25px rgba(255,255,255,.08);
    position:relative;
    overflow:hidden;
}

/* sun sparkle border */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:16px;
    background:linear-gradient(120deg,
        transparent 40%,
        rgba(255,235,150,.9) 50%,
        transparent 60%);
    opacity:0;
    pointer-events:none;
    animation:avatarSunSpark 18s linear infinite;
}

/* subtle occasional shine */
@keyframes avatarSunSpark{
    0%{ opacity:0; transform:translateX(-120%); }
    4%{ opacity:.9; }
    8%{ opacity:0; transform:translateX(140%); }
    100%{ opacity:0; transform:translateX(140%); }
}


/* ===== AVATAR ULTIMATE FRAME ===== */

.big-hex-avatar{
    border:3px solid #d4af37 !important;
    border-radius:14px !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 10px 30px rgba(0,0,0,.6),
        0 0 25px rgba(212,175,55,.35);
    position:relative;
    overflow:hidden;
}

/* occasional sun reflection */
.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(120deg,
        transparent 45%,
        rgba(255,240,160,.95) 50%,
        transparent 55%);
    opacity:0;
    animation:avatarGoldFlash 16s linear infinite;
}

@keyframes avatarGoldFlash{
    0%{ opacity:0; transform:translateX(-120%); }
    4%{ opacity:.9; }
    8%{ opacity:0; transform:translateX(130%); }
    100%{ opacity:0; }
}


/* ===== GLOBAL SWEEP HARD OFF ===== */

.harmony-wrapper::before,
.harmony-wrapper::after,
.ecosystem-grid::before,
.ecosystem-grid::after,
.supporter-seal::before,
.supporter-seal::after{
    animation:none !important;
    opacity:0 !important;
    display:none !important;
    content:none !important;
}


/* ===== REMOVE GLOBAL PRO SWEEP COMPLETELY ===== */

.user-pro::before,
.user-pro::after,
.user-pro ~ main::before,
.user-pro ~ main::after,
.user-pro ~ main .console-body::before,
.user-pro ~ main .console-body::after,
.user-pro .harmony-wrapper::before,
.user-pro .harmony-wrapper::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    opacity:0 !important;
    background:none !important;
}


/* ===== SUBTLE GLOBAL LIGHT (ULTRA SOFT) ===== */

.harmony-wrapper{
    position:relative;
    overflow:hidden;
}

.harmony-wrapper::after{
    content:"";
    position:relative;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    pointer-events:none;
    background:radial-gradient(circle at 30% 30%, rgba(255,215,120,.05), transparent 40%);
    animation:subtleReflection 28s linear infinite;
    opacity:.35;
}

/* ultra smooth — brak początku */
@keyframes subtleReflection{
    0%   { transform:translateX(-10%) translateY(0%); }
    50%  { transform:translateX(10%) translateY(5%); }
    100% { transform:translateX(-10%) translateY(0%); }
}


/* ===== STRONGER LUX LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    pointer-events:none;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,215,120,.12), transparent 45%),
        radial-gradient(circle at 70% 60%, rgba(255,215,120,.10), transparent 50%);

    animation:luxReflection 24s linear infinite;
    opacity:.55;
}

/* smooth cinematic motion */
@keyframes luxReflection{
    0%   { transform:translateX(-6%) translateY(0%); }
    50%  { transform:translateX(6%) translateY(4%); }
    100% { transform:translateX(-6%) translateY(0%); }
}


/* ===== STRONG LUX PANEL LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-40%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,220,140,.28), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,220,140,.22), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,220,140,.08), transparent 60%);

    animation:luxReflection 18s ease-in-out infinite;
    opacity:.9;
}

@keyframes luxReflection{
    0%   { transform:translate3d(-4%, -2%, 0); }
    50%  { transform:translate3d(4%, 2%, 0); }
    100% { transform:translate3d(-4%, -2%, 0); }
}


/* ===== SUBTLE PREMIUM PANEL LIGHT ===== */

.harmony-wrapper{
    position:relative;
    overflow:hidden;
}

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-30%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,225,140,.18), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,225,140,.14), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,225,140,.06), transparent 60%);

    animation:luxReflectionSoft 22s ease-in-out infinite;
}

@keyframes luxReflectionSoft{
    0%   { transform:translate3d(-2%, -1%, 0); }
    50%  { transform:translate3d(2%, 1%, 0); }
    100% { transform:translate3d(-2%, -1%, 0); }
}


/* ===== STRONGER PREMIUM PANEL LIGHT ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-35%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,225,140,.30), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,225,140,.22), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,225,140,.12), transparent 65%);

    filter: blur(28px);
    animation:luxReflectionSoft 20s ease-in-out infinite;
}


/* ===== MAX PREMIUM LIGHT DEPTH ===== */

.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-40%;
    pointer-events:none;
    z-index:0;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,230,150,.55), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,215,120,.45), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,215,120,.30), transparent 70%);

    filter: blur(30px);
    opacity:.9;
    animation:luxReflectionSoft 18s ease-in-out infinite;
}


/* ===== FORCE PREMIUM LIGHT VISIBLE ===== */

.harmony-wrapper{
    position:relative !important;
    overflow:visible !important;
}

/* światło premium */
.harmony-wrapper::after{
    content:"";
    position:relative;
    inset:-25%;
    pointer-events:none;
    z-index:5;

    background:
        radial-gradient(circle at 30% 30%, rgba(255,235,150,.65), transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(255,215,120,.55), transparent 55%);

    filter: blur(28px);
    mix-blend-mode:screen;
    opacity:.85;

    animation:luxReflectionSoft 14s ease-in-out infinite;
}


/* ===== FORCE GLOBAL LIGHT (DEBUG VISIBLE) ===== */

.harmony-wrapper{
    position:relative !important;
}

/* silny refleks testowy */
.harmony-wrapper::before{
    content:"";
    position:relative;
    inset:-30%;
    pointer-events:none;

    z-index:9999 !important;

    background:
        radial-gradient(circle at 25% 25%, rgba(255,230,120,.9), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,210,90,.85), transparent 50%);

    filter: blur(40px);
    opacity:.95;
    mix-blend-mode:screen;
}


}

    0%   { transform:translateX(-120%); opacity:.15; }
    50%  { opacity:.45; }
    100% { transform:translateX(120%); opacity:.15; }
}


/* ===== PEOPLE AVATAR — PREMIUM FRAME ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    filter:grayscale(100%);
    transition:all .35s ease;
}

/* złota cinematic ramka */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    padding:2px;
    background:linear-gradient(120deg,#3a2c08,#d4af37,#fff1a6,#d4af37,#3a2c08);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.85;
}

/* glass layer */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
    pointer-events:none;
}

/* aktywna postać — kolor */
.char-tab.active .tab-avatar,
.col-identity .big-hex-avatar{
    filter:none;
    transform:scale(1.03);
    box-shadow:0 0 18px rgba(212,175,55,.35);
}

/* hover subtelny */
.char-tab:hover .tab-avatar{
    filter:none;
    transform:scale(1.02);
}


/* ===== AVATAR ULTRA GLASS LAYER FIX ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* glass overlay — na samej górze */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    border-radius:14px;

    background:
        linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.03) 100%);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    pointer-events:none;
}

/* górny refleks szkła */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    top:0;
    left:0;
    right:0;
    height:40%;
    z-index:6;
    border-radius:14px 14px 0 0;

    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events:none;
}


/* ===== AVATAR SUN GLASS REFLECTION ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* glass shine sweep */
.big-hex-avatar::after,
.tab-avatar::after{
    content:"";
    position:relative;
    top:-40%;
    left:-60%;
    width:60%;
    height:180%;
    z-index:6;
    pointer-events:none;

    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 100%);

    transform:rotate(18deg);
    animation:avatarSunSweep 8s linear infinite;
    opacity:.65;
}

@keyframes avatarSunSweep{
    0%   { left:-60%; }
    100% { left:140%; }
}

/* subtle glass highlight */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.03));
    pointer-events:none;
}


/* ===== STATIC GLASS REFLECTION (VISIBLE) ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    overflow:hidden;
}

/* stały refleks szkła */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:5;
    pointer-events:none;

    background:
        linear-gradient(145deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.25) 18%,
            rgba(255,255,255,.06) 40%,
            rgba(255,255,255,0) 60%);

    mix-blend-mode:screen;
}

/* lekki połysk krawędzi */
.big-hex-avatar{
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.45),
        inset 0 -2px 6px rgba(0,0,0,.35),
        0 0 18px rgba(0,0,0,.45);
}


/* ===== STRONG GLASS REFLECTION (VISIBLE) ===== */

.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    z-index:6;
    pointer-events:none;

    background:
        linear-gradient(120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.75) 12%,
            rgba(255,255,255,.25) 20%,
            rgba(255,255,255,0) 35%
        );

    mix-blend-mode:screen;
}

/* dodatkowa górna linia szkła */
.big-hex-avatar::after{
    content:"";
    position:relative;
    left:8%;
    right:8%;
    margin-top:20px;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.65);
    box-shadow:0 0 12px rgba(255,255,255,.45);
    pointer-events:none;
    z-index:7;
}


/* ===== AVATAR GLASS FIX (force visible reflection) ===== */

.tab-avatar,
.big-hex-avatar{
    position:relative !important;
    overflow:hidden !important;
}

/* mocny refleks szkła */
.tab-avatar::before,
.big-hex-avatar::before{
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.85) 25%,
        rgba(255,255,255,.35) 35%,
        rgba(255,255,255,0) 50%);
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:5;
    opacity:.85;
}

/* górna linia szkła */
.big-hex-avatar::after{
    content:"";
    position:relative;
    left:6%;
    right:6%;
    margin-top:20px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.85);
    box-shadow:0 0 14px rgba(255,255,255,.6);
    z-index:6;
    pointer-events:none;
}


/* ===== DEBUG GLASS VISIBILITY ===== */

.big-hex-avatar{
    position:relative !important;
    overflow:hidden !important;
}

.big-hex-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:rgba(255,0,0,.35) !important;
    z-index:50 !important;
    pointer-events:none;
}


/* ===== PEOPLE AVATAR FINAL ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    border:2px solid rgba(120,120,120,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.5);
    transition:.25s;
}

/* glass layer */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,.02) 60%,
        rgba(255,255,255,.18));
    pointer-events:none;
}

/* inactive grayscale */
.char-tab .tab-avatar{
    filter:grayscale(1) brightness(.7);
}

/* ACTIVE CHARACTER */
.char-tab.active .tab-avatar{
    filter:none;
    border:2px solid rgba(255,210,120,.9);
    box-shadow:
        0 0 18px rgba(255,200,90,.35),
        inset 0 0 15px rgba(255,200,120,.15);
}

/* premium gold reflection */
.char-tab.active .tab-avatar::after{
    content:"";
    position:relative;
    inset:-40%;
    background:linear-gradient(120deg,
        transparent,
        rgba(255,220,120,.7),
        transparent);
    transform:rotate(25deg);
    animation:avatarGoldFlash 8s infinite;
}

@keyframes avatarGoldFlash{
    0%{ transform:translateX(-120%) rotate(25deg); opacity:0; }
    20%{ opacity:.6; }
    40%{ transform:translateX(120%) rotate(25deg); opacity:0; }
    100%{ opacity:0; }
}


/* ===== PEOPLE AVATAR FINAL ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    border:2px solid rgba(120,120,120,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.5);
    transition:.25s;
}

/* glass layer */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"";
    position:relative;
    inset:0;
    background:linear-gradient(120deg,
        rgba(255,255,255,.25),
        rgba(255,255,255,.05) 30%,
        rgba(255,255,255,.02) 60%,
        rgba(255,255,255,.18));
    pointer-events:none;
}

/* inactive grayscale */
.char-tab .tab-avatar{
    filter:grayscale(1) brightness(.7);
}

/* ACTIVE CHARACTER */
.char-tab.active .tab-avatar{
    filter:none;
    border:2px solid rgba(255,210,120,.9);
    box-shadow:
        0 0 18px rgba(255,200,90,.35),
        inset 0 0 15px rgba(255,200,120,.15);
}

/* premium gold reflection */
.char-tab.active .tab-avatar::after{
    content:"";
    position:relative;
    inset:-40%;
    background:linear-gradient(120deg,
        transparent,
        rgba(255,220,120,.7),
        transparent);
    transform:rotate(25deg);
    animation:avatarGoldFlash 8s infinite;
}

@keyframes avatarGoldFlash{
    0%{ transform:translateX(-120%) rotate(25deg); opacity:0; }
    20%{ opacity:.6; }
    40%{ transform:translateX(120%) rotate(25deg); opacity:0; }
    100%{ opacity:0; }
}


/* ===== HARD GLASS FORCE ===== */

.big-hex-avatar,
.tab-avatar{
    position:relative !important;
    overflow:hidden !important;
}

/* GLASS */
.big-hex-avatar::before,
.tab-avatar::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    pointer-events:none !important;

    background:
        linear-gradient(140deg,
            rgba(255,255,255,.35) 0%,
            rgba(255,255,255,.08) 30%,
            rgba(255,255,255,.03) 60%,
            rgba(255,255,255,.28) 100%) !important;

    mix-blend-mode:screen !important;
}

/* stronger visibility */
.char-tab.active .tab-avatar::before{
    background:
        linear-gradient(140deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.12) 40%,
            rgba(255,255,255,.05) 70%,
            rgba(255,255,255,.45)) !important;
}


/* ===== PREMIUM LOGO ===== */

.premium-logo{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    text-decoration:none;
}

.logo-top{
    font-size:.55rem;
    letter-spacing:.25rem;
    color:#888;
    text-transform:uppercase;
}

.logo-main{
    font-family:'Cinzel',serif;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.12rem;
    background:linear-gradient(180deg,#fff,#f0e2b0,#cfae42);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 12px rgba(212,175,55,.25);
}

.premium-logo:hover .logo-main{
    text-shadow:0 0 18px rgba(212,175,55,.45);
}


/* ===== PREMIUM LOGO ===== */

.site-logo-img{
    height:44px;
    filter:drop-shadow(0 0 8px rgba(230,196,106,.25));
    animation:logoPulse 6s ease-in-out infinite;
}

@keyframes logoPulse{
    0%{ filter:drop-shadow(0 0 6px rgba(230,196,106,.20)); }
    50%{ filter:drop-shadow(0 0 18px rgba(230,196,106,.55)); }
    100%{ filter:drop-shadow(0 0 6px rgba(230,196,106,.20)); }
}


/* HERO LOGO SIZE */
    width:50%;
    height:auto;
    max-width:420px;
    display:block;
    margin:0 auto;
}


/* ===== HERO LOGO FINAL ===== */

/* ukryj stare tekstowe LINEAGE II */
.hero-title,
.hero-title-main,
.hero h1{
    display:none !important;
}

/* nowe logo */
    width:70%;
    max-width:620px;
    height:auto;
    display:block;
    margin:0 auto 20px auto;
}


/* ===== HERO CINEMATIC LOGO LAYOUT ===== */

    display:block;
    margin:40px auto 20px auto;
    width:520px;
    max-width:90%;
    filter: drop-shadow(0 0 25px rgba(230,196,106,.35));
}

/* HERO RATES TEXT */
.hero-rates,
.hero-description,
.hero-stats{
    text-align:center !important;
    margin-top:15px !important;
}

/* PANEL BUTTON ALIGN */
.hero-actions{
    text-align:center !important;
    margin-top:35px !important;
}


/* ===== HERO MOVE UP ===== */

.hero-content{
    margin-top:-40px !important;
}


/* ===== HERO MOVE UP STRONG ===== */

.hero-content{
    margin-top:-120px !important;
}


/* ===== HERO LOGO POSITION FIX ===== */
.hero-logo{
    margin-top:-80px !important;
}

/* ===== STATS + RATES ALWAYS VISIBLE ===== */
.stats-bar,
.server-stats,
.rates-bar{
    position:relative !important;
    margin-top:40px !important;
    z-index:5 !important;
}


.rates-banner-fixed{
    position:fixed;
    bottom:90px;
    left:0;
    width:100%;
    text-align:center;
    padding:10px 0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    color:#e6c46a;
    letter-spacing:3px;
    font-size:14px;
    z-index:9999;
    border-top:1px solid rgba(212,175,55,.35);
    border-bottom:1px solid rgba(212,175,55,.35);
}

    margin-top:20px;
    text-align:center;
    color:#e6c46a;
    letter-spacing:3px;
    font-size:14px;
    padding:10px 25px;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    border:1px solid rgba(212,175,55,.35);
    display:inline-block;
    border-radius:6px;
    box-shadow:0 0 18px rgba(212,175,55,.15);
}

/* ===== HERO HIGH POSITION ===== */
.hero{
    padding-top:40px !important;
    padding-bottom:40px !important;
}

/* ===== PREMIUM RATES BAR READABLE ===== */
    margin-top:20px;
    text-align:center;
    color:#ffd76a;
    letter-spacing:4px;
    font-size:18px;
    font-weight:600;
    padding:14px 40px;
    background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.55));
    border:1px solid rgba(212,175,55,.55);
    display:inline-block;
    border-radius:8px;
    box-shadow:
        0 0 28px rgba(212,175,55,.25),
        inset 0 0 18px rgba(255,220,120,.08);
}

/* ===== HERO GLOBAL LIFT ===== */
.hero{
    margin-top:-120px !important;
}

/* ===== KEEP STATUS LOWER ===== */
.server-stats{
    margin-top:70px !important;
}


/* ===== HERO GLOBAL LIFT ===== */
.hero{
    margin-top:-120px !important;
}

/* ===== KEEP STATUS LOWER ===== */
.server-stats{
    margin-top:70px !important;
}


/* ===== HERO RATES REFINED ===== */

.hero-rates,
.rates-bar{
    font-size:14px !important;
    letter-spacing:2px !important;
    text-transform:uppercase;
    opacity:.95;
}

/* multipliers highlight */
.hero-rates b,
.rates-bar b{
    color:#f0d27a !important;
    font-weight:700;
    letter-spacing:1px;
    text-shadow:0 0 6px rgba(240,210,122,.35);
}


/* ===== HERO RATES PREMIUM ===== */

    font-size:14px !important;
    letter-spacing:2px;
    text-align:center;
    opacity:.95;
}

/* multipliers */
    color:#e6c46a;
    font-weight:800;
    font-size:1.15em;
    text-shadow:0 0 8px rgba(230,196,106,.55);
}


/* ===== HERO STACK HIGH POSITION ===== */


/* ===== RATES BAR POSITION ===== */

    margin-top:18px !important;
    font-size:14px !important;
    letter-spacing:2px;
    text-align:center;
}

/* ===== GOLD MULTIPLIER BADGE ===== */

    display:inline-block;
    padding:3px 10px;
    margin:0 3px;
    background:#000;
    color:#e6c46a;
    border:1px solid rgba(230,196,106,.55);
    border-radius:6px;
    font-weight:800;
    text-shadow:0 0 8px rgba(230,196,106,.6);
    box-shadow:0 0 10px rgba(230,196,106,.25);
}


/* ===== HERO HIGHER ===== */

/* ===== RATES BASE TEXT ===== */
    color:#cfcfcf !important;
    font-size:13px !important;
    letter-spacing:1.5px;
    text-align:center;
}

/* ===== GOLD MULTIPLIERS ONLY ===== */
    display:inline-block;
    padding:3px 10px;
    margin:0 4px;
    background:#000;
    color:#e6c46a !important;
    border:1px solid rgba(230,196,106,.7);
    border-radius:6px;
    font-weight:900;
    text-shadow:0 0 10px rgba(230,196,106,.8);
    box-shadow:0 0 12px rgba(230,196,106,.35);
}


/* ===== HERO LOWER SLIGHTLY ===== */

/* ===== RATES BAR FRAME ===== */
    margin-top:18px !important;
    padding:12px 26px !important;
    border:1px solid rgba(230,196,106,.35);
    border-radius:12px;
    background:rgba(0,0,0,.45);
    box-shadow:0 0 20px rgba(230,196,106,.15);
}

/* ===== MULTIPLIER CAPSULES ===== */
    display:inline-block;
    padding:3px 12px;
    margin:0 4px;
    border-radius:6px;
    background:#000;
    border:1px solid rgba(230,196,106,.75);
    color:#e6c46a;
    font-weight:900;
    position:relative;
    overflow:hidden;
}

/* subtle gold shimmer */
    content:"";
    position:relative;
    top:-40%;
    left:-40%;
    width:60%;
    height:180%;
    background:linear-gradient(120deg, transparent, rgba(255,215,120,.45), transparent);
    transform:rotate(25deg);
    animation:rateShimmer 6s linear infinite;
    opacity:.7;
}

@keyframes rateShimmer{
    0%{ left:-60%; }
    100%{ left:160%; }
}



/* ===== HERO LOWER GLOBAL ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:60px !important;
}

    margin-top:20px !important;
}


/* ===== HERO LOWER STRONG ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:140px !important;
}

    margin-top:35px !important;
}


/* ===== HERO POSITION FIX ===== */
.hero-logo,
.hero-logo-wrap,
.hero-content{
    margin-top:40px !important;
}

    margin-top:20px !important;
}


/* ===== HERO HEIGHT RESTORE ===== */
.hero,

/* cofnięcie wcześniejszego przesunięcia */
.hero-logo,
.hero-content{
    margin-top:0 !important;
}


    display:block;
    margin:40px auto 20px auto;
    max-width:520px;
    width:60%;
    filter: drop-shadow(0 0 25px rgba(255,215,120,.45));
}


    display:block;
    margin:40px auto 30px auto;
    width:520px;
    max-width:70%;
    background:none;
}

.hero-cta{
    text-align:center;
    margin-top:20px;
}


/* HERO FINAL ALIGN */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-margin-top:20px;
}

    width:520px;
    max-width:70%;
    margin:0 auto 25px auto;
}

.hero-cta{
    margin:10px 0 25px 0;
}

    margin:10px auto 25px auto;
    font-size:14px;
    letter-spacing:2px;
    text-align:center;
}

.server-stats{
    margin-top:20px;
}


/* HERO HEIGHT FIX */
.hero{
    min-height:720px !important;
    padding-top:140px !important;
    padding-bottom:80px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

    margin-top:0 !important;
}


/* HERO ORDER — LOGO ABOVE RATES */
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
}

    order:1;
    margin-bottom:20px;
}

    order:2;
    margin-top:20px;
}

.hero-cta{
    order:3;
}


/* ===== LIMIT GLOBAL SWEEP ONLY TO LOGO ===== */

/* wyłącz sweep z całej sekcji hero */
.hero::before,
.hero::after{
    display:none !important;
    animation:none !important;
    content:none !important;
}

/* glass shine tylko na logo */
    position:relative;
    z-index:2;
}

    content:"";
    position:relative;
    inset:0;
    border-radius:12px;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0) 70%
    );
    transform:translateX(-120%);
    animation:logoSweep 7s linear infinite;
    mix-blend-mode:screen;
}

@keyframes logoSweep{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(120%); }
}


/* =========================
   HERO RATES CINEMATIC
========================= */

    animation:ratesFadeIn 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    transform:translateY(40px);
    opacity:0;
    animation-delay:.55s;
}

@keyframes ratesFadeIn{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* podkreślenie X1 X2 */

    color:#d4af37;
    padding:2px 6px;
    border-radius:6px;
    background:rgba(0,0,0,0.45);
    box-shadow:0 0 10px rgba(212,175,55,.35);
    animation:ratePulse 4s ease-in-out infinite;
}

@keyframes ratePulse{
    0%,100%{ box-shadow:0 0 10px rgba(212,175,55,.25); }
    50%{ box-shadow:0 0 18px rgba(212,175,55,.55); }
}


/* =========================
   HERO RATES CINEMATIC
========================= */

    animation:ratesFadeIn 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    transform:translateY(40px);
    opacity:0;
    animation-delay:.55s;
}

@keyframes ratesFadeIn{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* podkreślenie X1 X2 */

    color:#d4af37;
    padding:2px 6px;
    border-radius:6px;
    background:rgba(0,0,0,0.45);
    box-shadow:0 0 10px rgba(212,175,55,.35);
    animation:ratePulse 4s ease-in-out infinite;
}

@keyframes ratePulse{
    0%,100%{ box-shadow:0 0 10px rgba(212,175,55,.25); }
    50%{ box-shadow:0 0 18px rgba(212,175,55,.55); }
}


/* ===== CINEMATIC LOGO DROP ===== */

    position:relative;
    z-index:5;
    transform:translateY(-80px);
    opacity:0;
    animation:logoDrop 1s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes logoDrop{
    to{
        transform:translateY(0);
        opacity:1;
    }
}


    text-align:center;
    margin-top:20px;
}

    width:520px;
    max-width:70%;
    display:block;
    margin:0 auto 30px auto;
}

    font-size:14px;
    letter-spacing:2px;
    color:#caa84a;
}

    color:#ffd86b;
    font-weight:700;
}


/* ===== HERO HARD RESET (logo visibility) ===== */


/* usuwa stare cinematic overlay które zasłaniało */

/* logo */
    position:relative;
    z-index:20;
    display:block;
    margin:20px auto 15px auto;
    width:520px;
    max-width:70%;
}

/* rates pod logiem */
    position:relative;
    z-index:20;
    margin-top:20px;
    font-size:0.95rem;
    letter-spacing:1px;
    color:#ddd;
}

/* HUD pod hero */
.server-hud{
    margin-top:20px;
    position:relative;
    z-index:20;
}


/* HERO SPACE FROM HEADER */

    margin-top:20px;
}


/* HERO offset pod fixed header */

/* delikatne podniesienie logo */
    margin-top:-40px;
}


/* rates pod HUD */
    margin-top:20px;
    text-align:center;
}

    font-size:14px;
    letter-spacing:2px;
    opacity:0.9;
}

.rate{
    color:#e7c36a;
    font-weight:700;
}


/* ===== HERO LOGO MOVE UP ===== */
    margin-top:-80px !important;
}

    margin-top:0 !important;
}


.launch-wrapper{
    text-align:center;
    margin-top:20px;
}

.launch-title{
    color:#e6c46a;
    font-size:1rem;
    letter-spacing:3px;
    margin-bottom:10px;
    opacity:.85;
}

.launch-countdown{
    display:flex;
    justify-content:center;
    gap:22px;
}

.cd-box{
    background:linear-gradient(180deg,#111,#050505);
    border:1px solid rgba(230,196,106,.6);
    padding:18px 20px;
    border-radius:12px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

.cd-box span{
    font-size:2.5rem;
    font-weight:700;
    color:#e6c46a;
    display:block;
    letter-spacing:2px;
}

.cd-box small{
    font-size:.7rem;
    color:#aaa;
}


/* ===== CINEMATIC COUNTDOWN PRO FIX ===== */

.launch-countdown{
    display:flex;
    justify-content:center;
    gap:22px;
}

.cd-box{
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#0d0d0d,#050505);
    border:1px solid rgba(230,196,106,.6);
    border-radius:14px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

/* stała szerokość cyfr */
.cd-box span{
    font-size:2.8rem;
    font-weight:700;
    color:#e6c46a;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing:2px;
}

.cd-box small{
    font-size:.7rem;
    color:#aaa;
    margin-top:20px;
}

/* subtelny cinematic glow */
.cd-box::after{
    content:"";
    position:relative;
    inset:0;
    border-radius:14px;
    background:radial-gradient(circle at 50% 0%, rgba(255,220,120,.25), transparent 70%);
    opacity:.35;
    pointer-events:none;
}


/* HUD ping tweaks */
.hud-value span {
    font-size: 0.5em !important;   /* zmniejsza rozmiar ms */
    opacity: 0.6;
    vertical-align: super;         /* przesuwa w górę, żeby nie nachodziło */
}

.hud-value {
    min-width: 30px;               /* gwarantuje, że kreska lub liczba nie przesuwa się */
    text-align: center;
}

/* HUD ping tweaks */
.hud-value span {
    font-size: 0.5em !important;   /* zmniejsza rozmiar ms */
    opacity: 0.6;
    vertical-align: super;         /* przesuwa w górę, żeby nie nachodziło */
}

.hud-value {
    min-width: 30px;               /* gwarantuje, że kreska lub liczba nie przesuwa się */
    text-align: center;
}

/* ===== HERO LOGO ===== */
    display:block;
    margin:20px auto 30px auto;
    width:600px;       /* powiększenie z 520px */
    max-width:80%;
    background:none;
}


/* ===== EXIT BUTTON HEADER ===== */
.header-exit {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #FFD700 !important;           /* złota widoczna czcionka */
    background: rgba(255, 255, 255, 0.05); /* delikatne tło */
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.header-exit:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}


/* Exit button style */
.exit-btn {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: #f87171 !important;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid #f87171;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.exit-btn:hover {
    background-color: #f87171;
    color: #ffffff !important;
    text-decoration: none;
}


/* Premium hover effect for player name button */
.premium-btn {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15;
    transition: all 0.3s ease-in-out;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 4px;
}
.premium-btn:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #facc15, 0 0 20px #facc15, 0 0 30px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
}

/* Premium hover effect for logged-in player button */
.user-name {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15;
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #facc15, 0 0 20px #facc15, 0 0 30px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow: 0 0 5px #facc15, 0 0 15px #facc15, 0 0 25px #facc15;
}
/* Premium hover effect for logged-in player button with stroke and depth */
.user-name {
    font-weight: 700;
    color: #facc15; /* złoty odcień */
    -webkit-text-stroke: 1px #000; /* czarna ramka każdej litery */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.3),
        0 4px 6px rgba(0,0,0,0.2); /* głębia */
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    -webkit-text-stroke: 1px #000;
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
}
/* Premium hover effect for logged-in player button with refined stroke and depth */
.user-name {
    font-weight: 700;
    color: #facc15;
    -webkit-text-stroke: 0.8px #000; /* delikatniejsza ramka */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.25),
        0 4px 8px rgba(0,0,0,0.15); /* głębia bez przesady */
    transition: all 0.3s ease-in-out;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    display: inline-block;
}
.user-name:hover {
    color: #ffffff;
    -webkit-text-stroke: 0.8px #000;
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
    box-shadow: 0 0 10px #facc15, 0 0 20px #facc15 inset;
    background: rgba(250, 204, 21, 0.2);
    cursor: pointer;
}
.user-name.user-pro {
    text-shadow:
        0 1px 3px #000,
        0 2px 6px #facc15,
        0 3px 12px #facc15;
}

/* Header Logo: Nostalgie™ Nexus */
.brand-logo {
    font-family: 'Cinzel', 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #fcd34d; /* złoto */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow:
        0 1px 0 #00000044,
        0 2px 0 #00000033,
        0 4px 0 #00000022,
        0 0 10px #fcd34d,
        0 0 20px #fbbf24,
        0 0 30px #f59e0b;
    transition: all 0.3s ease-in-out;
}

.brand-logo:hover {
    color: #fff8dc;
    text-shadow:
        0 1px 0 #00000044,
        0 2px 0 #00000033,
        0 4px 0 #00000022,
        0 0 15px #fcd34d,
        0 0 30px #fbbf24,
        0 0 45px #f59e0b;
}

.brand-logo span.logo-top {
    display: block;
    font-size: 0.7em;
    color: #fde68a;
    text-shadow: 0 0 5px #fbbf24;
}

.brand-logo span.logo-main {
    display: block;
    font-size: 1.2em;
    line-height: 1.1em;
    color: #fcd34d;
    text-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b;
}

/* Apple-style font for header logo */
.brand-logo .logo-main {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #facc15; /* złoty */
    text-shadow: 0 0 5px #facc15, 0 0 10px #facc15, 0 0 15px rgba(250,204,21,0.6);
}


/* --- JĘZYKI (FLAGS) --- */
.lang-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.lang-btn {
    text-decoration: none;
    font-size: 1.4rem;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.lang-btn:hover, .lang-btn.active {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* --- POPRAWKA FLAG (OBOK LOGO) --- */
.lang-switcher {
    position: static !important; /* Wyłączamy absolute */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-left: 20px; /* Odstęp od Logo */
    background: transparent !important; /* Bez tła */
    border: none !important; /* Bez ramki */
    padding: 0 !important;
    top: auto; right: auto; /* Reset pozycji */
}

.lang-btn {
    font-size: 1.2rem;
    opacity: 0.6;
    transition: 0.2s;
    text-decoration: none;
    filter: grayscale(100%);
}

.lang-btn:hover, .lang-btn.active {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.2);
}

/* Dostosowanie kontenera nagłówka, żeby elementy były w jednej linii */
.header-container {
    display: flex;
    align-items: center;
    /* Upewniamy się, że logo i flagi nie rozwalają układu */
    flex-wrap: wrap; 
}

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */

/* ====================================================== */
/* NOSTALGIE™ VELVET REVEAL (MAYBACH LUXURY)              */
/* ====================================================== */

    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Minimalna wysokość, żeby zawsze było miejsce */
    padding: 80px 0;
    perspective: 1200px; /* Głębia dla subtelnego ruchu */
    background: #000; /* Start z czarnego tła */
    overflow: hidden; /* Ważne dla czystego wyjścia tła */
}

/* 1. TŁO - SUBTELNA, ROSNĄCA MGŁAWICA ZŁOTA */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0; /* Startuje jako niewidzialny punkt */
    height: 0;
    background: radial-gradient(circle, 
        rgba(255, 200, 0, 0.08) 0%, 
        transparent 70%
    );
    border-radius: 50%;
    z-index: -1;
    
    /* Animacja tła: Powolne rośnięcie mgławicy */
    animation: velvetAuraGrowth 10s ease-out forwards;
}

/* 2. LOGO - JEDWABISTE WYŁANIANIE SIĘ I POZOSTAWANIE */
    position: relative;
    z-index: 100 !important;
    display: block;
    opacity: 0; /* Start niewidoczne */
    will-change: transform, filter, opacity; /* Optymalizacja */
    
    /* Animacje:
       1. velvetEntry: 8s - Wyłanianie się i stabilizacja.
       2. subtleShineLoop: 6s - Dyskretne falowanie blasku (startuje po wejściu).
    */
    animation: 
        velvetEntry 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
        subtleShineLoop 6s ease-in-out infinite 8s; 
}

/* --- KLATKI ANIMACJI --- */

/* Tło: Powolny rozrost złotej mgławicy */
@keyframes velvetAuraGrowth {
    0% {
        width: 0; height: 0; opacity: 0;
    }
    30% {
        opacity: 0.3; /* Zaczyna być widoczne */
    }
    100% {
        width: 700px; height: 350px; /* Maksymalny rozmiar */
        opacity: 1; /* Pełna widoczność mgławicy */
        filter: blur(50px);
    }
}

/* Logo: Jedwabiste wyłanianie się z czerni */
@keyframes velvetEntry {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px); /* Lekko z dołu, mniejsze */
        filter: blur(15px) brightness(0.5); /* Rozmyte, ciemne */
    }
    30% {
        opacity: 0.1; /* Minimalnie widoczne */
        filter: blur(10px) brightness(0.7);
    }
    80% {
        opacity: 1;
        transform: scale(1.02) translateY(-5px); /* Lekkie przejechanie */
        filter: blur(0px) brightness(1.2) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)); /* Blask! */
    }
    100% {
        opacity: 1; /* Pozostaje widoczne */
        transform: scale(1) translateY(0);
        filter: brightness(1) drop-shadow(0 0 20px rgba(255, 180, 0, 0.3));
    }
}

/* Po wejściu: Dyskretne falowanie blasku na powierzchni */
@keyframes subtleShineLoop {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(255, 180, 0, 0.3));
        transform: scale(1);
    }
    50% {
        filter: brightness(1.1) drop-shadow(0 0 35px rgba(255, 200, 0, 0.6));
        transform: scale(1.005); /* Bardzo subtelny ruch */
    }
}

/* Hover: Jeszcze więcej luksusu */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: scale(1.03) translateY(-2px);
    filter: brightness(1.3) drop-shadow(0 0 50px rgba(255, 220, 0, 0.9));
}


/* ====================================================== */
/* GAP CLOSER (FIX ODLEGŁOŚCI)                            */
/* ====================================================== */

/* 1. Zmniejszamy obszar kontenera loga */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    /* Pozwalamy elementom zbliżyć się do krawędzi */
    height: auto !important; 
    min-height: 300px !important; /* Zmniejszamy z 400px, ale zostawiamy miejsce na blask */
}

/* 2. AGRESYWNE PODCIĄGNIĘCIE ZEGARA DO GÓRY */
#nostalgie-timer {
    /* To jest klucz: Ujemny margines wciąga element do góry */
    margin-top: -80px !important; 
    
    position: relative;
    z-index: 200; /* Musi być NAD poświatą loga, żeby dało się klikać/widzieć */
    padding-top: 0 !important;
}

/* 3. Ewentualna korekta samego obrazka, żeby nie uciekał */
    margin-bottom: 0 !important;
}


/* ====================================================== */
/* GAP CORRECTION (Trochę niżej)                          */
/* ====================================================== */

#nostalgie-timer {
    /* Zmieniamy z -80px na -40px. 
       To opuści zegar w dół, dając logu trochę oddechu. */
    margin-top: -40px !important; 
}


/* ====================================================== */
/* ====================================================== */

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101; /* Nad logiem */
    pointer-events: auto !important; cursor: pointer !important; /* Nie blokuje klikania */
    
    /* TWORZENIE PROMIENIA ŚWIATŁA */
    /* Przezroczysty -> Biały Błysk -> Przezroczysty */
    background: linear-gradient(
        120deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 215, 0, 0.6) 55%,
        transparent 70%
    );
    background-size: 200% 100%; /* Rozciągamy tło, żeby móc je przesuwać */
    
    /* MAGIA: MASKOWANIE (Światło pokaże się TYLKO na kształcie liter) */
    /* Używamy tego samego obrazka co logo jako maski */
    -webkit-mask-image: url('/assets/img/l2nos.png');
    mask-image: url('/assets/img/l2nos.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* Dopasowanie rozmiaru maski do rozmiaru obrazka w kontenerze */
    -webkit-mask-size: auto; 
    mask-size: auto;

    /* Domyślnie ukryte */
    opacity: 0;
    
    /* ANIMACJA: Czeka 20s, przechodzi, czeka znowu */
    
    /* Opóźnienie startu, żeby nie błyskało podczas wejścia loga */
    animation-delay: 5s; 
}

/* --- KLATKI ANIMACJI --- */
    0% {
        background-position: 200% 0; /* Start po prawej (lub lewej zależnie od kąta) */
        opacity: 0;
    }
    /* PRZEZ 90% CZASU NIC SIĘ NIE DZIEJE (Cisza 18 sekund) */
    90% {
        background-position: 200% 0; 
        opacity: 0;
    }
    /* MOMENT PRZEJŚCIA (Szybki błysk w ostatnich 2 sekundach) */
    90.1% {
        background-position: 200% 0; /* Reset pozycji */
        opacity: 1; /* Włączamy światło */
    }
    100% {
        background-position: -200% 0; /* Przesuwamy w lewo */
        opacity: 0; /* Zanikanie na końcu */
    }
}


/* ====================================================== */
/* TRUE PNG SUN SHEEN (Światło tylko na literach)         */
/* ====================================================== */

/* Wrapper przylega idealnie do obrazka */
.logo-wrapper {
    position: relative;
    display: inline-block; /* To sprawia, że div ma wymiary obrazka inside */
    z-index: 110;
}

/* Warstwa światła */
.logo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto !important; cursor: pointer !important;
    
    /* DEFINICJA ŚWIATŁA: */
    /* Ostry, jasny promień światła */
    background: linear-gradient(
        105deg, 
        transparent 40%, 
        rgba(255, 255, 255, 0.9) 45%, 
        rgba(255, 215, 0, 0.5) 50%, 
        transparent 55%
    );
    background-size: 200% 100%;
    background-position: 150% 0; /* Start poza widokiem */

    /* MASKA: Używamy tego samego obrazka co logo! */
    /* Dzięki temu światło pokaże się TYLKO tam, gdzie są piksele loga */
    -webkit-mask-image: url('/assets/img/l2nos.png');
    mask-image: url('/assets/img/l2nos.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    /* ANIMACJA: Co 20 sekund */
    animation: trueShine 20s infinite;
    /* Czekamy 6 sekund na start (żeby nie zakłócić wejścia) */
    animation-delay: 6s;
}

@keyframes trueShine {
    0% {
        background-position: 200% 0; /* Po prawej */
        opacity: 0;
    }
    /* DŁUGA PAUZA */
    90% {
        background-position: 200% 0;
        opacity: 0;
    }
    /* SZYBKI PRZEJAZD (BŁYSK) */
    92% {
        opacity: 1; /* Włączamy widoczność promienia */
    }
    98% {
        background-position: -100% 0; /* Przejazd na lewo */
        opacity: 1;
    }
    100% {
        background-position: -100% 0;
        opacity: 0;
    }
}


/* ====================================================== */
/* LOGO LINK FIX (Interaktywność)                         */
/* ====================================================== */

a.logo-wrapper {
    cursor: pointer !important; /* Łapka po najechaniu */
    text-decoration: none !important; /* Brak podkreślenia */
    border: none !important;
    outline: none !important;
    transition: transform 0.3s ease; /* Płynne wciskanie */
}

/* Efekt wciśnięcia przy kliknięciu */
a.logo-wrapper:active {
    transform: scale(0.98);
}


/* NOSTALGIE™ UNIFIED WRAPPER */
.nostalgie-login-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(255,215,0,0.02) 0%, transparent 70%);
}

.support-block{
    max-width:520px;
    margin:0 auto;
    text-align:center;
}

.support-strong{
    font-weight:600;
    margin-top:20px;
}

.support-percent{
    margin-top:20px;
    font-size:18px;
    opacity:0.9;
}

.support-bar-wrap{
    margin-top:20px;
}

.support-bar-bg{
    width:100%;
    height:20px;
    background:rgba(255,255,255,0.08);
    border-radius:10px;
    overflow:hidden;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
}

.support-bar-fill{
    height:100%;
    border-radius:10px;
    transition:width 0.8s ease;
    box-shadow:0 0 12px currentColor;
}


/* --- ONE COLUMN LAYOUT --- */
.nostalgie-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

/* nagłówek */
.n-header{
    text-align:center;
    margin-bottom:40px;
}

.n-title{
    font-size:34px;
    font-weight:700;
    margin-bottom:10px;
}

.n-subtitle{
    font-size:18px;
    opacity:0.8;
}

/* bloki tekstowe */
.n-text-block{
    max-width:700px;
    margin-bottom:35px;
    line-height:1.9;
    font-size:17px;
}

/* lista zasad */
.n-text-block p{
    margin-bottom:12px;
}

/* sekcja statusu */
.n-status-active{
    margin-top:20px;
    margin-bottom:15px;
}


/* --- NOSTALGIE™ HEROES SYSTEM --- */

.hero-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* PODIUM STYLES */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.podium-card {
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 260px;
}

.podium-card:hover {
    transform: translateY(-10px);
}

.podium-card.place-1 {
    order: 2;
    width: 300px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
    z-index: 2;
}

.podium-card.place-2 {
    order: 1;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(192, 192, 192, 0.4);
}

.podium-card.place-3 {
    order: 3;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.1) 0%, rgba(20, 20, 25, 0.8) 100%);
    border-color: rgba(205, 127, 50, 0.4);
}

.podium-avatar-wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.place-1 .podium-avatar-wrap {
    width: 150px;
    height: 150px;
    border-color: #ffd700;
}

.podium-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-rank {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: 800;
    background: #111;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid #333;
}

.place-1 .podium-rank { color: #ffd700; border-color: #ffd700; }
.place-2 .podium-rank { color: #c0c0c0; border-color: #c0c0c0; }
.place-3 .podium-rank { color: #cd7f32; border-color: #cd7f32; }

.podium-name { font-size: 1.4rem; font-weight: bold; color: #fff; margin-bottom: 5px; }
.place-1 .podium-name { font-size: 1.8rem; color: #ffd700; text-transform: uppercase; letter-spacing: 1px; }

.podium-clan { color: #888; font-size: 0.9rem; margin-bottom: 15px; }

.podium-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.stat-pill { background: rgba(0,0,0,0.4); padding: 5px 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; display:flex; align-items:center; gap:5px;}
.stat-pill.pvp { color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.stat-pill.pk { color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }

/* APPLE STYLE RACE BADGE */
.race-badge.apple-style {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.race-badge.apple-style img {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

/* LIST TABLE STYLES */
.ranking-list-container {
    background: rgba(10, 10, 12, 0.6);
    border-radius: 15px;
    border: 1px solid #333;
    overflow: hidden;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    text-align: left;
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-table td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}

.ranking-table tr:hover td {
    background: rgba(255,255,255,0.02);
}

.rank-num { font-weight: bold; color: #666; font-family: monospace; font-size: 1.1rem; }

.player-mini-flex { display: flex; align-items: center; gap: 12px; }
.mini-avatar { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid #444; }
.player-meta { display: flex; flex-direction: column; }
.p-name { color: #fff; font-weight: 600; font-size: 0.95rem; }
.p-clan { color: #666; font-size: 0.8rem; }

/* APPLE STYLE MINI ICON */
.race-icon-apple {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    vertical-align: middle;
}

.lvl-cell { font-weight: bold; color: #ffd700; }
.stats-cell { font-family: monospace; font-size: 0.9rem; }
.pvp-txt { color: #4ade80; }
.pk-txt { color: #f87171; }

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.status-badge.on { background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); }
.status-badge.off { background: rgba(255, 255, 255, 0.05); color: #666; border: 1px solid #333; }

/* RESPONSYWNOŚĆ */
@media (max-width: 900px) {
    .podium-container { flex-direction: column; align-items: center; }
    .podium-card.place-1 { order: 1; width: 100%; }
    .podium-card.place-2 { order: 2; width: 100%; }
    .podium-card.place-3 { order: 3; width: 100%; }
}

/* --- DASHBOARD V2 STYLES --- */
.dashboard-core { max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* Char Selector */
.char-selector-bar { display: flex; gap: 10px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 10px; }
.char-chip { background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 20px; text-decoration: none; color: #888; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; transition: 0.3s; }
.char-chip:hover { background: rgba(255,255,255,0.1); }
.char-chip.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #ffd700; }
.lvl-badge { background: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: 300px 1fr 350px; gap: 20px; }
@media(max-width: 1000px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dash-col { background: rgba(18, 18, 20, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; }

/* Profile Card */
.profile-card { padding: 30px 20px; text-align: center; position: relative; }
.profile-card.premium-glow { border: 1px solid rgba(255, 215, 0, 0.5); box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); }
.vip-badge { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; color: #ffd700; border: 1px solid #ffd700; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px; }

.avatar-uploader { width: 120px; height: 120px; margin: 0 auto 15px; border-radius: 50%; position: relative; cursor: pointer; overflow: hidden; border: 3px solid rgba(255,255,255,0.1); }
.profile-card.premium-glow .avatar-uploader { border-color: #ffd700; }
.main-avatar { width: 100%; height: 100%; object-fit: cover; }
.upload-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; color: #fff; font-size: 0.8rem; }
.avatar-uploader:hover .upload-overlay { opacity: 1; }

.char-name { margin: 10px 0 5px; font-size: 1.5rem; color: #fff; }
.char-race { color: #888; font-size: 0.9rem; margin-bottom: 25px; }

.profile-details { text-align: left; }
.detail-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 10px 0; }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: #666; font-size: 0.9rem; }
.detail-row .value { color: #eee; font-weight: 600; font-size: 0.9rem; }
.value.on { color: #4ade80; } .value.off { color: #666; } .value.gold { color: #ffd700; }

/* Stats Card */
.stats-card { padding: 25px; }
.card-title { margin-top: 0; color: #ccc; font-weight: 400; font-size: 1rem; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }

.vitals-circles { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; }
.vital-circle { width: 100px; position: relative; text-align: center; }
.circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; }
.circle-bg { fill: none; stroke: #222; stroke-width: 2.5; }
.circle { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 1s ease; }
.circular-chart.red .circle { stroke: #ff453a; }
.circular-chart.blue .circle { stroke: #0a84ff; }
.vital-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 1.1rem; color: #fff; }
.vital-label { margin-top: 5px; font-size: 0.8rem; color: #888; }

.combat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.combat-box { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.c-val { display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 2px; }
.c-val.green { color: #4ade80; } .c-val.red { color: #ff453a; } .c-val.gray { color: #aaa; } .c-val.gold { color: #ffd700; }
.c-lbl { font-size: 0.75rem; color: #666; text-transform: uppercase; }

.vitality-bar-wrap { margin-top: auto; }
.v-label { font-size: 0.8rem; color: #aaa; margin-bottom: 5px; }
.v-track { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); width: 0; }

/* Oracle Card */
.oracle-card { display: flex; flex-direction: column; height: 600px; }
.oracle-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.oracle-header h3 { margin: 0; color: #ffd700; font-size: 1rem; letter-spacing: 1px; }

.oracle-interface { padding: 20px; display: flex; flex-direction: column; height: 100%; }
.search-wrap input { width: 100%; background: #111; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.search-wrap input:focus { border-color: #ffd700; outline: none; }

.filter-wrap { display: flex; gap: 10px; margin-bottom: 15px; }
.f-btn { flex: 1; padding: 8px; border: 1px solid #333; background: transparent; color: #666; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.3s; }
.f-btn.active { border-color: #ffd700; color: #ffd700; background: rgba(255,215,0,0.05); }

.sort-check { font-size: 0.8rem; color: #888; display: flex; align-items: center; gap: 8px; margin-bottom: 15px; cursor: pointer; }

.oracle-results-box { flex: 1; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.05); }
.empty-state { text-align: center; color: #555; margin-top: 50px; font-size: 0.9rem; }

.oracle-result-row { background: rgba(255,255,255,0.03); padding: 10px; border-radius: 6px; margin-bottom: 8px; border-left: 2px solid transparent; }
.oracle-result-row:hover { background: rgba(255,255,255,0.06); }
.or-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.or-item { color: #fff; font-weight: 600; font-size: 0.9rem; }
.or-lvl { font-size: 0.75rem; }
.or-sub { font-size: 0.8rem; color: #888; margin-bottom: 4px; }
.or-stats { display: flex; justify-content: space-between; font-size: 0.75rem; }

/* Oracle Locked */
.oracle-card.locked { opacity: 0.7; }
.oracle-lock-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.gold-text { color: #ffd700; margin-bottom: 20px; }
.btn-upgrade { background: #ffd700; color: #000; padding: 10px 20px; border-radius: 20px; text-decoration: none; font-weight: bold; transition: 0.3s; }
.btn-upgrade:hover { box-shadow: 0 0 15px rgba(255,215,0,0.4); }


/* --- NOSTALGIE COMPACT DASHBOARD --- */

.dashboard-core.compact-mode {
    max-width: 1200px;
    margin: 20px auto;
    font-size: 0.85rem; /* Mniejsza czcionka bazowa */
}

/* Header & Title */
.dash-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.nostalgie-title { font-size: 1.4rem; color: #fff; margin: 0; font-family: 'Cinzel', serif; letter-spacing: 1px; }
.nostalgie-title .accent { color: #ffd700; }

.char-scroller { display: flex; gap: 6px; }
.char-pill { background: rgba(255,255,255,0.05); padding: 5px 12px; border-radius: 15px; color: #aaa; text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; transition:0.2s; }
.char-pill:hover, .char-pill.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #ffd700; }
.char-pill .lvl { background: #000; padding: 1px 5px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }

/* Grid Layout */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 260px 1fr 300px; /* Węższe kolumny */
    gap: 15px; 
    align-items: start; /* Żeby karty nie rozciągały się na siłę */
}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dash-card { background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(8px); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); padding: 15px; overflow: hidden; }

/* Profile Compact */
.avatar-area { width: 90px; height: 90px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid #444; position: relative; cursor: pointer; overflow: hidden; }
.vip-glow .avatar-area { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.2); }
.profile-img { width: 100%; height: 100%; object-fit: cover; }
.edit-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:0.3s; color:#fff; font-size:0.7rem; }
.avatar-area:hover .edit-overlay { opacity:1; }
.vip-tag { position: absolute; bottom: 0; width: 100%; background: #ffd700; color: #000; font-size: 0.6rem; font-weight: bold; text-align: center; }

.p-name { text-align: center; margin: 0; font-size: 1.2rem; color: #fff; }
.p-sub { text-align: center; font-size: 0.8rem; color: #888; }
.p-sub.clan { color: #aaa; margin-bottom: 15px; }

.p-details { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }
.pd-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.pd-row span { color: #666; }
.pd-row b { color: #eee; font-weight: 500; }
.pd-row b.on { color: #4ade80; } .pd-row b.gold { color: #ffd700; }

/* Stats Compact */
.c-head { margin: 0 0 15px 0; font-size: 0.9rem; color: #ccc; border-bottom: 1px solid #333; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

.vitals-row { display: flex; gap: 10px; margin-bottom: 15px; }
.vital-mini { flex: 1; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 6px; }
.vm-val { font-size: 1rem; font-weight: bold; color: #fff; text-align: right; }
.vm-lbl { font-size: 0.7rem; color: #666; }
.vm-bar { height: 4px; background: #222; margin: 4px 0; border-radius: 2px; }
.hp .vm-bar div { height: 100%; background: #ff453a; }
.mp .vm-bar div { height: 100%; background: #0a84ff; }

.stats-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.s-box { background: rgba(255,255,255,0.03); padding: 8px; border-radius: 4px; text-align: center; }
.s-val { display: block; font-weight: bold; font-size: 1rem; }
.s-lbl { font-size: 0.7rem; color: #666; text-transform: uppercase; }
.s-val.g { color: #4ade80; } .s-val.r { color: #ff453a; } .s-val.y { color: #ffd700; }

.eco-bar { display: flex; gap: 10px; margin-bottom: 10px; }
.eco-item { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 6px; border: 1px solid rgba(255,215,0,0.1); }
.eco-icon { font-size: 1.2rem; }
.eco-val { display: block; color: #ffd700; font-weight: bold; font-family: monospace; font-size: 0.95rem; }
.eco-lbl { font-size: 0.7rem; color: #888; }

.vitality-mini { font-size: 0.75rem; color: #888; }
.v-track { height: 4px; background: #222; margin-top: 4px; border-radius: 2px; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); }

/* ORACLE FIX - SZTYWNA WYSOKOŚĆ */
.oracle-tools { display: flex; gap: 5px; margin-bottom: 10px; }
.oracle-tools input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85rem; }
.or-btns { display: flex; gap: 2px; }
.o-btn { background: #222; border: 1px solid #333; color: #666; padding: 0 10px; font-size: 0.7rem; cursor: pointer; transition: 0.2s; }
.o-btn.active { background: #ffd700; color: #000; font-weight: bold; border-color: #ffd700; }
.or-opt { font-size: 0.75rem; color: #888; margin-bottom: 10px; }

/* FIX DLA ORAKLE - To zapobiega "sypaniu" się wyglądu */
.oracle-list { 
    height: 320px; /* Sztywna wysokość */
    overflow-y: auto; /* Pasek przewijania */
    background: rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 6px; 
    padding: 5px;
}

.or-row { background: rgba(255,255,255,0.03); padding: 6px; border-radius: 4px; margin-bottom: 4px; font-size: 0.8rem; }
.or-row:hover { background: rgba(255,255,255,0.08); }
.or-top { display: flex; justify-content: space-between; }
.or-item { color: #fff; font-weight: 600; }
.or-mid { color: #888; font-size: 0.75rem; margin: 2px 0; }
.or-bot { display: flex; justify-content: space-between; font-size: 0.75rem; }
.or-empty { text-align: center; color: #555; margin-top: 50px; font-size: 0.8rem; }

.lock-info { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #666; }
.btn-tiny { background: #ffd700; color: #000; padding: 4px 12px; border-radius: 10px; text-decoration: none; font-size: 0.75rem; font-weight: bold; margin-top: 10px; }


/* --- DASHBOARD SHOP-STYLE OVERRIDE --- */

.shop-style-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
}

.shop-header { margin-bottom: 40px; }
.n-title { font-family: 'Cinzel', serif; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 15px rgba(255,215,0,0.3); }
.n-subtitle { color: #888; font-family: 'Inter', sans-serif; font-size: 0.9rem; letter-spacing: 1px; margin-top: 5px; text-transform: uppercase; }

/* Tabs like Shop Categories */
.char-tabs-wrapper { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.shop-tab { 
    background: rgba(20, 20, 25, 0.6); 
    border: 1px solid rgba(255,255,255,0.1); 
    padding: 10px 20px; 
    border-radius: 4px; 
    text-decoration: none; 
    color: #aaa; 
    transition: 0.3s; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
}
.shop-tab:hover, .shop-tab.active { 
    border-color: #b1922e; 
    background: linear-gradient(180deg, rgba(177, 146, 46, 0.2) 0%, rgba(0,0,0,0) 100%); 
    color: #ffd700; 
    box-shadow: 0 0 15px rgba(177, 146, 46, 0.2);
}
.lvl-tag { font-family: 'Inter', sans-serif; font-size: 0.7rem; background: #000; padding: 2px 6px; border-radius: 2px; color: #fff; }

/* Cards like Shop Items */
.shop-grid-layout { display: grid; grid-template-columns: 300px 1fr 320px; gap: 25px; align-items: start; }
@media (max-width: 1000px) { .shop-grid-layout { grid-template-columns: 1fr; } }

.nostalgie-card {
    background: rgba(18, 18, 22, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; /* Ostrzejsze rogi jak w shopie */
    padding: 25px;
    position: relative;
    overflow: hidden;
}
.nostalgie-card.premium-border { border-color: #b1922e; box-shadow: inset 0 0 20px rgba(177, 146, 46, 0.1); }

/* Typography */
.cinzel-title { font-family: 'Cinzel', serif; font-size: 1.6rem; margin: 10px 0 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.inter-text { font-family: 'Inter', sans-serif; }
.card-header-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: #b1922e; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin: 0 0 20px 0; letter-spacing: 1px; }

/* Profile Specifics */
.profile-top { text-align: center; margin-bottom: 20px; }
.avatar-frame { width: 120px; height: 120px; margin: 0 auto; border: 2px solid #333; padding: 3px; border-radius: 50%; cursor: pointer; position: relative; transition: 0.3s; }
.avatar-frame:hover { border-color: #ffd700; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-edit { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.6rem; text-align: center; padding: 2px 0; }
.sub-info { color: #888; font-size: 0.85rem; }
.sub-info.clan-info { color: #aaa; margin-top: 2px; }

.profile-data-list .data-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.03); padding: 8px 0; font-size: 0.9rem; }
.stat-on { color: #4ade80; font-weight: bold; }
.stat-off { color: #666; }
.stat-gold { color: #ffd700; font-family: monospace; }
.stat-mono { color: #ccc; font-family: monospace; }
.premium-badge-row { margin-top: 15px; background: rgba(177, 146, 46, 0.2); color: #ffd700; text-align: center; padding: 8px; font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; border: 1px solid #b1922e; }

/* Stats Specifics */
.vitals-display { display: flex; gap: 15px; margin-bottom: 25px; }
.vital-block { flex: 1; }
.vital-val { text-align: right; font-weight: bold; font-family: monospace; font-size: 1.1rem; margin-bottom: 5px; }
.vital-val.red { color: #ff453a; } .vital-val.blue { color: #0a84ff; }
.vital-bar-bg { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.vital-bar-fill { height: 100%; }
.vital-bar-fill.red { background: #ff453a; } .vital-bar-fill.blue { background: #0a84ff; }
.vital-lbl { font-size: 0.7rem; color: #666; margin-top: 5px; text-transform: uppercase; }

.stats-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px; }
.stat-cell { background: rgba(0,0,0,0.3); padding: 10px; border: 1px solid rgba(255,255,255,0.05); text-align: center; }
.s-val { display: block; font-size: 1.2rem; font-weight: bold; font-family: monospace; }
.s-val.green { color: #4ade80; } .s-val.red { color: #ff453a; } .s-val.gold { color: #ffd700; } .s-val.white { color: #fff; }
.s-lbl { font-size: 0.7rem; color: #666; text-transform: uppercase; margin-top: 3px; }

.economy-strip { display: flex; gap: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); }
.eco-unit { flex: 1; display: flex; align-items: center; gap: 10px; }
.eco-i { font-size: 1.2rem; }
.eco-n { color: #ffd700; font-family: monospace; font-size: 1rem; font-weight: bold; display: block; }
.eco-l { color: #888; font-size: 0.75rem; }

.vitality-strip { margin-top: 25px; }
.v-lbl { font-size: 0.7rem; color: #666; margin-bottom: 5px; }
.v-track { height: 4px; background: #222; }
.v-fill { height: 100%; background: linear-gradient(90deg, #ff453a, #ffd700); }

/* Oracle Shop Style */
.oracle-search-bar input { width: 100%; background: #111; border: 1px solid #333; color: #fff; padding: 10px; font-family: 'Inter', sans-serif; margin-bottom: 10px; }
.oracle-controls { display: flex; gap: 5px; align-items: center; margin-bottom: 15px; }
.shop-btn-small { background: transparent; border: 1px solid #444; color: #888; padding: 5px 10px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.75rem; transition: 0.3s; }
.shop-btn-small:hover, .shop-btn-small.active { border-color: #ffd700; color: #ffd700; background: rgba(177, 146, 46, 0.1); }
.lvl-sort { margin-left: auto; font-size: 0.75rem; color: #666; }

.oracle-results-container { height: 350px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 5px; border: 1px solid rgba(255,255,255,0.05); }
.or-placeholder { padding: 40px; text-align: center; color: #555; font-size: 0.85rem; }
.locked-content { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; }
.lock-icon { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; }


/* --- NOSTALGIE COIN (NC) ANIMATIONS --- */

.nc-coin-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding-right: 5px; /* Miejsce na szufladkę jak się schowa */
    margin-right: 15px;
}

/* 1. STATE: POOR (0 Bilans) */
.nc-coin-wrapper.inactive-poor {
    filter: grayscale(100%) contrast(0.8) brightness(0.7);
    cursor: pointer !important;
    pointer-events: auto !important; cursor: pointer !important; /* Opcjonalne: czy da się klikać jak puste? */
}
.inactive-poor .nc-drawer {
    display: none; /* Szuflada schowana na stałe */
}

/* 2. STATE: RICH (Bilans > 0) */
.nc-coin-wrapper.active-rich {
    cursor: pointer;
}

/* MONETA (COIN) */
.nc-coin-body {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b1922e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,255,255,0.4);
    border: 1px solid #d4af37;
    z-index: 2; /* Nad szufladą */
    position: relative;
}

/* KONICZYNKA W ŚRODKU */
.nc-clover {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* SZUFLADKA (DRAWER) */
.nc-drawer {
    background: linear-gradient(90deg, #111 0%, #222 100%);
    height: 24px;
    border-radius: 0 12px 12px 0;
    margin-left: -16px; /* Chowa się pod monetę */
    padding-left: 20px; /* Offset na monetę */
    padding-right: 0;
    display: flex;
    align-items: center;
    border: 1px solid #444;
    border-left: none;
    overflow: hidden;
    max-width: 0; /* START STATE: Zamknięta */
    opacity: 0;
    
    /* ANIMACJA SZUFLADKI: Wyjeżdża po załadowaniu */
    animation: drawer-slide-out 1s ease-out 0.5s forwards;
}

.nc-content {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
}

.nc-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
}

.nc-value {
    color: #ffd700;
    font-weight: bold;
    font-family: monospace;
    font-size: 0.9rem;
}

/* --- ANIMACJE (KEYFRAMES) --- */

/* 1. Intro Monety (Obrót + Zoom) */
.active-rich .nc-coin-body {
    animation: coin-intro 2.5s ease-in-out forwards;
}

/* 2. Shine (Błysk co 15s) */
.active-rich .nc-coin-body::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg) translate(-100%, 0);
    opacity: 0;
    
    /* 15s pętla: 1s shine, 14s wait */
    animation: coin-shine 15s infinite ease-in-out 3s; 
}

@keyframes drawer-slide-out {
    0% { max-width: 0; opacity: 0; }
    100% { max-width: 150px; opacity: 1; padding-right: 12px; }
}

@keyframes coin-intro {
    0% { transform: rotate(0deg) scale(0.5); }
    50% { transform: rotate(720deg) scale(1.3); } /* Over-zoom */
    100% { transform: rotate(1080deg) scale(1); } /* 3 obroty i normalny rozmiar */
}

@keyframes coin-shine {
    0% { transform: rotate(30deg) translate(-100%, 0); opacity: 0; }
    5% { opacity: 0.5; }
    10% { transform: rotate(30deg) translate(100%, 0); opacity: 0; }
    100% { transform: rotate(30deg) translate(100%, 0); opacity: 0; }
}



/* --- NOSTALGIE GOLD COIN SYSTEM (FINAL CLEAN) --- */

/* 1. KONTENER IZOLUJĄCY */
.nc-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    z-index: 1000; /* Musi być nad menu */
    perspective: 1000px; /* Głębia 3D */
    overflow: visible !important; /* Kluczowe! Inaczej utnie 3D */
}

.nc-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transform-style: preserve-3d;
    cursor: pointer;
}

/* Stan Biedny (Szary) */
.state-poor { filter: grayscale(100%) contrast(0.8); cursor: pointer !important; pointer-events: auto !important; cursor: pointer !important; }
.state-poor .nc-drawer { display: none; }

/* 2. FIZYKA MONETY (OBRÓT I POZYCJA) */
.nc-coin {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 8px auto; /* Wyśrodkowanie w wrapperze 60px */
    transform-style: preserve-3d;
    
    /* START: Bokiem (Profil) - widać grubość */
    transform: rotateY(-65deg);
    
    /* Płynna fizyka */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10; /* Nad szufladą */
}

/* HOVER: Wyprostowanie do twarzy + Zoom + Przybliżenie */
.state-rich:hover .nc-coin {
    transform: rotateY(0deg) scale(1.2) translateZ(10px);
}

/* 3. GRUBOŚĆ MONETY (STACK LAYERS) */
/* Tworzymy 6 warstw przesuniętych o 1px, co daje efekt litej bryły */
.edge {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    
    /* Ząbkowana krawędź (Milled Edge) */
    background: repeating-linear-gradient(
        45deg,
        #b8860b 0px,
        #ffd700 1px,
        #8b4513 2px
    );
    border: 1px solid #daa520;
}

.e1 { transform: translateZ(-1px); }
.e2 { transform: translateZ(-2px); }
.e3 { transform: translateZ(-3px); }
.e4 { transform: translateZ(-4px); }
.e5 { transform: translateZ(-5px); }
.e6 { transform: translateZ(-6px); background: #5e4b20; } /* Tył ciemny */

/* 4. TWARZ (AWERS) */
.face {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    backface-visibility: hidden;
    
    /* Bogate Złoto */
    background: radial-gradient(ellipse at center, #fff8db 0%, #ffd700 50%, #b8860b 100%);
    border: 2px solid #ffd700;
    box-shadow: inset 0 0 5px rgba(139, 69, 19, 0.6); /* Wewnętrzny cień */
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Żeby błysk nie wyjechał */
}

.face.front { transform: translateZ(0.5px); } /* Lekko przed krawędzią */
.face.back  { transform: translateZ(-6.5px) rotateY(180deg); }

/* 5. GRAWERUNEK (Tekst wklęsły) */
.ring-engrave {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1px dashed rgba(184, 134, 11, 0.4); /* Ozdobny otok */
}

.txt-n, .txt-c {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 6px;
    color: #a07315; /* Ciemne złoto */
    letter-spacing: 1px;
    
    /* Efekt wyrycia (Inset Shadow) */
    text-shadow: 
        0 1px 0 rgba(255,255,255,0.5), 
        0 -1px 0 rgba(0,0,0,0.8);
}
.txt-n { top: 4px; }
.txt-c { bottom: 4px; }

.clover {
    font-size: 20px;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.5)) drop-shadow(0 -1px 1px rgba(0,0,0,0.5));
    margin-top: -1px;
}

/* 6. POŁYSK (SHINE) - Tylko na tarczy */
.glare {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 60%
    );
    animation: gold-shine 10s infinite linear; /* Błysk co 10s */
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes gold-shine {
    0% { transform: translate(-100px, -100px); opacity: 0; }
    20% { opacity: 1; }
    40% { transform: translate(100px, 100px); opacity: 0; }
    100% { opacity: 0; }
}

/* 7. SZUFLADKA (DRAWER) - Pozycjonowanie absolutne względem wrapper */
.nc-drawer {
    position: absolute;
    left: 30px; /* Startuje ze środka monety */
    top: 50%;
    transform: translateY(-50%) translateZ(-20px); /* Fizycznie pod spodem */
    
    height: 24px;
    background: linear-gradient(90deg, #111, #222);
    border: 1px solid #444;
    border-radius: 0 12px 12px 0;
    
    display: flex;
    align-items: center;
    padding-left: 20px; /* Margines na monetę */
    padding-right: 12px;
    white-space: nowrap;
    z-index: 1; /* Pod monetą */
    
    /* Animacja wyjazdu */
    width: 0;
    opacity: 0;
    overflow: hidden;
    animation: drawer-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

@keyframes drawer-pop {
    to { width: auto; min-width: 80px; opacity: 1; }
}

.lbl { font-size: 8px; color: #666; margin-right: 5px; font-weight: bold; }
.val { font-size: 11px; color: #ffd700; font-family: monospace; font-weight: bold; text-shadow: 0 0 5px rgba(255,215,0,0.4); }


/* ================= HERO CLEAN HUD ================= */

.hero-clean {
    position: relative;
}

.hero-hud {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    padding: 14px 50px;
    border-radius: 60px;
    background: rgba(15,15,20,0.65);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    color: #fff;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

.hero-hud .status-dot {
    font-size: 18px;
    margin-right: 8px;
}

.hero-hud.online .status-dot {
    color: #00ff88;
}

.hero-hud.offline .status-dot {
    color: #ff4444;
}

.hero-hud .players {
    color: #ffd700;
    font-weight: 700;
}


@keyframes onlinePulse {
    0%   { box-shadow: 0 0 0 rgba(0,255,120,0.0); }
    50%  { box-shadow: 0 0 30px rgba(0,255,120,0.6); }
    100% { box-shadow: 0 0 0 rgba(0,255,120,0.0); }
}

.hero-hud.online {
    animation: onlinePulse 2.5s infinite;
}


/* ===== EPIC HERO UPGRADE ===== */

/* 🔥 Złota aura z centrum */
.hero-clean{
    position:relative;
    overflow:hidden;
}
.hero-clean::before{
    content:"";
    position:relative;
    inset:-20%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,215,120,0.35), transparent 55%),
        radial-gradient(circle at 50% 60%, rgba(255,180,60,0.25), transparent 65%);
    filter:blur(60px);
    animation:heroAura 8s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}
@keyframes heroAura{
    0%{opacity:.6; transform:scale(1);}
    50%{opacity:1; transform:scale(1.05);}
    100%{opacity:.6; transform:scale(1);}
}

/* 💎 Mocny glow pod logo */
.hero-clean img{
    position:relative;
    z-index:2;
    filter:drop-shadow(0 0 40px rgba(255,215,120,0.8))
           drop-shadow(0 0 80px rgba(255,180,60,0.4));
}

/* ⚡ Shimmer na rates */
.hero-clean div:last-of-type{
    position:relative;
    display:inline-block;
}
.hero-clean div:last-of-type::after{
    content:"";
    position:relative;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform:skewX(-25deg);
    animation:rateShimmer 6s infinite;
}
@keyframes rateShimmer{
    0%{left:-120%;}
    100%{left:150%;}
}

/* 🛡️ HUD metal glass */
.hero-hud{
    background:linear-gradient(180deg, rgba(25,25,30,0.85), rgba(15,15,20,0.75));
    border:1px solid rgba(255,215,120,0.4);
    box-shadow:
        0 0 30px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(255,215,120,0.08);
}

/* 🌀 Slow pulse */
@keyframes hudPulse{
    0%{box-shadow:0 0 0 rgba(255,215,120,0);}
    50%{box-shadow:0 0 35px rgba(255,215,120,0.5);}
    100%{box-shadow:0 0 0 rgba(255,215,120,0);}
}
.hero-hud.online{
    animation:hudPulse 3.5s infinite;
}


/* ===== CINEMATIC DEPTH BOOST ===== */

/* 🌌 Delikatna winieta */
.hero-clean::after{
    content:"";
    position:relative;
    inset:0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.6) 100%);
    pointer-events:none;
    z-index:1;
}

/* ✨ Cząsteczki światła */
.hero-clean .light-particles{
    position:relative;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}
.hero-clean .light-particles span{
    position:relative;
    width:4px;
    height:4px;
    background:rgba(255,220,120,0.8);
    border-radius:50%;
    box-shadow:0 0 10px rgba(255,215,120,0.9);
    animation:floatParticle 12s linear infinite;
    opacity:0;
}
@keyframes floatParticle{
    0%{transform:translateY(40px) scale(0.5); opacity:0;}
    20%{opacity:1;}
    80%{opacity:1;}
    100%{transform:translateY(-600px) scale(1); opacity:0;}
}

/* 🔥 Mocniejszy fokus logo */
.hero-clean img{
    animation:logoBreath 6s ease-in-out infinite;
}
@keyframes logoBreath{
    0%{transform:scale(1);}
    50%{transform:scale(1.04);}
    100%{transform:scale(1);}
}

/* 🌟 Głębia tekstu rates */
.hero-clean div:last-of-type{
    text-shadow:
        0 0 15px rgba(255,215,120,0.6),
        0 0 30px rgba(255,180,60,0.4);
}



/* ================= HERO CINEMATIC BOOST ================= */

/* 🔥 GŁĘBOKA ZŁOTA AURA Z CENTRUM */
.hero-clean {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, rgba(212,175,55,0.35), transparent 60%),
        radial-gradient(circle at 50% 60%, rgba(255,215,120,0.15), transparent 70%);
}

/* ✨ Delikatne cząsteczki */
.hero-clean::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,215,120,0.8) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.08;
    pointer-events: auto !important; cursor: pointer !important;
    animation: heroParticles 40s linear infinite;
}

@keyframes heroParticles {
    from { background-position: 0 0; }
    to   { background-position: 0 1000px; }
}

/* 💎 MOCNY ZŁOTY GLOW POD LOGO */
.hero-clean img {
    filter:
        drop-shadow(0 0 25px rgba(255,215,120,0.6))
        drop-shadow(0 0 60px rgba(212,175,55,0.4));
}

/* ⚡ SHIMMER NA RATES BAR */
.hero-clean div:last-of-type {
    position: relative;
    overflow: hidden;
}

.hero-clean div:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );
    transform: skewX(-20deg);
    animation: heroShimmer 6s infinite;
}

@keyframes heroShimmer {
    0%   { left: -120%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}

/* 🛡️ HUD TAKTYCZNY */
.hero-hud {
    background: linear-gradient(180deg, rgba(25,25,30,0.8), rgba(15,15,20,0.8));
    border: 1px solid rgba(212,175,55,0.4);
    box-shadow:
        0 0 25px rgba(212,175,55,0.25),
        inset 0 0 15px rgba(255,255,255,0.05);
}

/* 🌀 SUBTELNY SLOW PULSE */
.hero-hud.online {
    animation: onlinePulse 3s infinite;
}



/* ================= HERO ULTRA REFINEMENT ================= */

/* 🌀 Subtelne unoszenie logo (slow float) */
.hero-clean img {
    animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}


/* 🌫 Ambient gold fog (miękka mgła głębi) */
.hero-clean::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,215,120,0.15), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(212,175,55,0.12), transparent 70%);
    filter: blur(80px);
    opacity: 0.6;
    pointer-events: auto !important; cursor: pointer !important;
}


/* ✨ Mikro-metaliczny shimmer HUD */
.hero-hud::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent
    );
    transform: skewX(-25deg);
    animation: hudShimmer 8s infinite;
}

@keyframes hudShimmer {
    0%   { left: -150%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}


/* 💎 Głębszy złoty tekst rates */
.hero-clean div:last-of-type {
    text-shadow:
        0 0 8px rgba(255,215,120,0.6),
        0 0 20px rgba(212,175,55,0.4);
}


/* 🔥 Delikatny vignette (cinematic focus) */
.hero-clean {
    box-shadow:
        inset 0 0 180px rgba(0,0,0,0.85);
}



/* ================= CINEMATIC HERO INTRO ================= */

.hero-clean {
    opacity: 0;
    transform: scale(1.04);
    animation: heroIntro 1.8s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes heroIntro {
    0% {
        opacity: 0;
        transform: scale(1.08);
        filter: blur(10px);
    }
    40% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Cinematic fade logo */
.hero-clean img {
    opacity: 0;
    animation: logoFadeIn 1.6s ease forwards;
    animation-delay: .4s;
}

@keyframes logoFadeIn {
    to { opacity: 1; }
}


/* HUD soft fade */
.hero-hud {
    opacity: 0;
    transform: translateY(-20px);
    animation: hudFadeIn 1.4s ease forwards;
    animation-delay: .6s;
}

@keyframes hudFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Rates bar fade */
.hero-clean div:last-of-type {
    opacity: 0;
    transform: translateY(20px);
    animation: ratesFade 1.6s ease forwards;
    animation-delay: .8s;
}

@keyframes ratesFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== FIX: SHIMMER ONLY INSIDE STATUS HUD ===== */

.hero-hud {
    position: relative;
    overflow: hidden !important;
}

.hero-hud::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: hudShimmer 4s infinite;
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes hudShimmer {
    0%   { left: -60%; }
    100% { left: 120%; }
}


/* ===== TUNE: SOFT SHIMMER (LESS INTENSE) ===== */

.hero-hud::after {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.07) 50%,
        transparent 100%
    ) !important;
    animation: hudShimmerSoft 8s infinite !important;
    opacity: 0.6;
}

@keyframes hudShimmerSoft {
    0%   { left: -80%; }
    100% { left: 140%; }
}


/* ===== SOFT SHIMMER – RATES BAR ONLY ===== */

.hero-clean > div:last-of-type {
    position: relative;
    overflow: hidden;
}

.hero-clean > div:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 215, 120, 0.12) 50%,
        transparent 100%
    );
    animation: ratesShimmerSoft 10s infinite;
    pointer-events: auto !important; cursor: pointer !important;
}

@keyframes ratesShimmerSoft {
    0%   { left: -120%; }
    100% { left: 160%; }
}


/* ===== BETA COUNTDOWN ===== */

.beta-countdown-wrapper{
    text-align:center;
    padding:70px 20px 90px;
}

.beta-live{
    color:#00ff88;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:20px;
    animation: betaPulse 3s infinite;
}

@keyframes betaPulse{
    0%{opacity:.6}
    50%{opacity:1}
    100%{opacity:.6}
}

.beta-timer-title{
    font-family:'Cinzel', serif;
    font-size:32px;
    color:#ffd700;
    margin-bottom:15px;
}

.beta-timer-desc{
    color:#ccc;
    margin-bottom:35px;
    font-size:18px;
}

.beta-countdown{
    display:flex;
    justify-content:center;
    gap:35px;
}

.beta-countdown div{
    background:rgba(20,20,25,.65);
    padding:20px 25px;
    border-radius:12px;
    border:1px solid rgba(255,215,0,.25);
    min-width:80px;
}

.beta-countdown span{
    display:block;
    font-size:32px;
    font-weight:700;
    color:#fff;
}

.beta-countdown label{
    font-size:12px;
    color:#ffd700;
    letter-spacing:2px;
}


/* ===== NOSTALGIE LOGIN MERGE ===== */
/* --- NOSTALGIE™ LOGIN SYSTEM V2 --- */
:root {
    --glass-bg: rgba(10, 10, 10, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gold-accent: #c5a059;
    --gold-glow: rgba(197, 160, 89, 0.25);
    --error-red: #ff4444;
    --input-bg: rgba(0, 0, 0, 0.6);
}

.nostalgie-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
    position: relative;
}

.nostalgie-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 400px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.n-header { text-align: center; margin-bottom: 30px; }
.n-title { font-size: 24px; font-weight: 200; letter-spacing: 4px; color: #fff; text-transform: uppercase; margin: 0; }
.n-subtitle { font-size: 10px; color: var(--gold-accent); letter-spacing: 2px; opacity: 0.8; margin-top: 5px; font-weight: 700; }

.n-group { position: relative; margin-bottom: 20px; }

.n-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
    box-sizing: border-box;
}

.n-input:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 15px var(--gold-glow);
}

    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #8d6e38 0%, #c5a059 50%, #8d6e38 100%);
    background-size: 200% auto;
    border: none;
    color: #000;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.5s;
    margin-top: 10px;
}

.n-alert {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid var(--error-red);
    color: #ffcccc;
    padding: 10px;
    font-size: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.n-footer { text-align: center; margin-top: 25px; font-size: 12px; color: #666; }
.n-link { color: var(--gold-accent); text-decoration: none; font-weight: bold; }

/* Dodatkowe wsparcie dla unifikacji ekosystemu */
.n-input, select.n-input, textarea.n-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-family: inherit;
    box-sizing: border-box;
}
select.n-input option {
    background: #1a1a1c;
    color: #fff;
}
.nostalgie-card.wide {
    max-width: 1100px;
}

/* LIVE CHECK UI */
.live-status-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: auto !important; cursor: pointer !important;
    animation: fadeInIcon 0.3s ease;
}
@keyframes fadeInIcon { from { opacity:0; transform: translateY(-50%) scale(0.8); } to { opacity:1; transform: translateY(-50%) scale(1); } }

/* UNIFIED MESSAGES SYSTEM */
.n-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    line-height: 1.4;
    animation: n-slideDown 0.4s ease;
}

.n-msg-error {
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

.n-msg-success {
    background: rgba(48, 209, 88, 0.1);
    border: 1px solid rgba(48, 209, 88, 0.3);
    color: #30d158;
}

.n-msg svg {
    flex-shrink: 0;
    width: 20px;
}

@keyframes n-slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== PANEL CLEANUP ===== */

.panel-muted { color:#888; font-size:0.9rem; }
.panel-pvp { color:#4f4; }
.panel-pk { color:#f44; }

.oracle-header { text-align:center; margin-bottom:30px; }
.oracle-title { font-family:'Cinzel'; font-size:2.5rem; color:#ffd700; margin:0; }
.oracle-sub { color:#888; text-transform:uppercase; letter-spacing:2px; }

.oracle-lock { font-size:60px; color:#ffd700; margin-bottom:20px; }

.oracle-msg { color:#aaa; max-width:500px; margin:auto; }

.oracle-blur { filter:blur(10px); opacity:0.3; text-align:center; }

.oracle-flex { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; }

.table-center { text-align:center; }
.table-right { text-align:right; }

.no-results { text-align:center; padding:40px; color:#666; display:none; }

.oracle-npc { color:#ffd700; font-weight:bold; }

.oracle-h3 { color:#fff; }
.th-center { text-align:center; }
.th-right { text-align:right; }
.hidden-file { display:none; }


/* =========================================================
   ===== NOSTALGIE™ CLEAN HERO SYSTEM (2026 RESET) =====
   ========================================================= */

.nostalgie-container{
    min-height:calc(100vh - 80px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 20px;
    position:relative;
}

.beta-badge{
    margin-bottom:35px;
    margin-bottom:25px;
    margin-top:15px;
    margin-bottom:20px;
    position:relative;
    margin-top:20px;
    font-size:0.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#e6c46a;
    opacity:.85;
}

.logo-wrapper{
    margin-bottom:35px;
    margin-bottom:20px;
    margin-bottom:30px;
}

.logo-img{
    width:520px;
    max-width:80%;
    transition:transform .4s ease, filter .4s ease;
}

.logo-img:hover{
    transform:scale(1.04);
    filter:drop-shadow(0 0 25px rgba(230,196,106,.5));
}

.grand-opening-text{
    margin-top:10px;
    margin-bottom:30px;
    margin-top:10px;
    font-size:1rem;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:20px;
    color:#aaa;
}

.countdown-container{
    margin-bottom:40px;
    display:flex;
    gap:25px;
    margin-bottom:50px;
    flex-wrap:wrap;
    justify-content:center;
}

.time-box{
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#111,#050505);
    border:1px solid rgba(230,196,106,.6);
    border-radius:14px;
    box-shadow:0 0 25px rgba(230,196,106,.25);
}

.time-val{
    font-size:2.4rem;
    font-weight:700;
    color:#e6c46a;
    letter-spacing:2px;
}

.time-label{
    font-size:.7rem;
    color:#aaa;
    text-transform:uppercase;
    letter-spacing:2px;
}

.glass-menu{
    display:flex;
    gap:20px;
    margin-top:20px;
    flex-wrap:wrap;
    justify-content:center;
}


.logo-wrapper{
    margin-bottom:35px;
    margin-bottom:20px;
    margin-top:-40px;
}


/* ===== CLEAN MAIN ACTIONS (HOME) ===== */

.main-actions{
    display:flex;
    gap:25px;
    justify-content:center;
    margin-top:40px;
    flex-wrap:wrap;
}

.main-btn{
    padding:16px 38px;
    font-size:0.9rem;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:12px;
    text-decoration:none;
    transition:0.3s ease;
}

.main-btn.primary{
    background:linear-gradient(135deg,#e6c46a,#b88c2a);
    color:#000;
    font-weight:700;
    box-shadow:0 0 25px rgba(230,196,106,.35);
}

.main-btn.primary:hover{
    transform:translateY(-3px);
    box-shadow:0 0 35px rgba(230,196,106,.6);
}

.main-btn.secondary{
    border:1px solid rgba(255,255,255,.2);
    color:#ddd;
}

.main-btn.secondary:hover{
    background:rgba(255,255,255,.05);
}



/* ===========================
   HERO CLEAN STABLE VERSION
=========================== */

.home-cinematic{
    min-height: calc(100vh - 90px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    background:#000;
}

.home-logo img{
    max-width:420px;
    width:100%;
    height:auto;
    margin-bottom:30px;
}

.home-badge{
    font-size:14px;
    letter-spacing:2px;
    color:#d4af37;
    margin-bottom:15px;
}

.home-opening{
    font-size:18px;
    letter-spacing:3px;
    color:#aaa;
    margin-bottom:35px;
}

.home-countdown{
    display:flex;
    gap:25px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.cd-box{
    width:110px;
    height:130px;
    border:1px solid rgba(212,175,55,0.3);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 0 25px rgba(212,175,55,0.08);
}

.cd-box span{
    font-size:42px;
    font-weight:700;
    color:#d4af37;
}

.cd-box small{
    font-size:11px;
    letter-spacing:2px;
    color:#888;
}

.home-actions{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.home-btn{
    padding:12px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    letter-spacing:1px;
    transition:0.3s ease;
}

.home-btn.primary{
    background:#d4af37;
    color:#000;
}

.home-btn.primary:hover{
    box-shadow:0 0 20px rgba(212,175,55,0.6);
}

.home-btn.secondary{
    border:1px solid #555;
    color:#fff;
}

.home-btn.secondary:hover{
    border-color:#d4af37;
    color:#d4af37;
}

.home-footer-text{
    margin-top:60px;
    font-size:12px;
    color:#555;
    letter-spacing:1px;
}

@media (max-width: 768px){
    .cd-box{
        width:80px;
        height:100px;
    }
    .cd-box span{
        font-size:28px;
    }
}



/* =========================
   PANEL – CHARACTERS GRID
========================= */

.chars-grid{
    max-width:1200px;
    margin:40px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    padding:0 20px;
}

.char-card{
    position:relative;
    background:linear-gradient(160deg, rgba(20,20,20,0.85) 0%, rgba(10,10,10,0.95) 100%);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:18px;
    padding:25px 20px 30px 20px;
    text-align:center;
    transition:all .35s cubic-bezier(.175,.885,.32,1.275);
    overflow:hidden;
}

.char-card:hover{
    transform:translateY(-8px) scale(1.02);
    border-color:rgba(212,175,55,0.4);
    box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

.avatar-wrapper{
    position:relative;
    display:inline-block;
    cursor:pointer;
}

.avatar-img{
    width:110px;
    height:110px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid rgba(212,175,55,0.4);
    transition:all .3s ease;
}

.char-card:hover .avatar-img{
    border-color:#d4af37;
    box-shadow:0 0 20px rgba(212,175,55,0.5);
}

.avatar-edit-icon{
    position:absolute;
    bottom:0;
    right:0;
    background:#111;
    border:1px solid #d4af37;
    border-radius:50%;
    padding:6px;
    font-size:12px;
    opacity:0;
    transition:.3s;
}

.avatar-wrapper:hover .avatar-edit-icon{
    opacity:1;
}

.char-name{
    font-family:'Cinzel', serif;
    font-size:1.3rem;
    margin-top:15px;
    letter-spacing:1px;
}

.panel-muted{
    color:#888;
    font-size:.85rem;
}

.panel-pvp{
    color:#4caf50;
}

.panel-pk{
    color:#e53935;
}

.status-badge{
    position:absolute;
    top:15px;
    right:15px;
    padding:6px 12px;
    font-size:.7rem;
    border-radius:20px;
    letter-spacing:1px;
    font-weight:600;
    backdrop-filter:blur(4px);
}

.status-badge.on{
    background:rgba(0,255,0,0.1);
    border:1px solid rgba(0,255,0,0.4);
    color:#7CFF7C;
    box-shadow:0 0 15px rgba(0,255,0,0.4);
}

.status-badge.off{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:#999;
}

/* subtle entrance animation */
.char-card{
    animation:fadeUp .6s ease forwards;
    opacity:0;
}

@keyframes fadeUp{
    from{ transform:translateY(20px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}



/* =========================
   PANEL – ORACLE UPGRADE
========================= */

.oracle-section{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.oracle-glass{
    position:relative;
    padding:60px 40px;
    border-radius:24px;
    background:
        radial-gradient(circle at top center, rgba(212,175,55,0.15), transparent 60%),
        linear-gradient(160deg, rgba(15,15,15,0.95) 0%, rgba(5,5,5,1) 100%);
    border:1px solid rgba(212,175,55,0.15);
    box-shadow:
        inset 0 0 40px rgba(212,175,55,0.05),
        0 25px 80px rgba(0,0,0,0.8);
    backdrop-filter:blur(18px);
    transition:all .4s ease;
}

.oracle-glass:hover{
    border-color:rgba(212,175,55,0.4);
    box-shadow:
        inset 0 0 60px rgba(212,175,55,0.1),
        0 35px 100px rgba(0,0,0,0.9);
}

.oracle-title{
    font-family:'Cinzel', serif;
    font-size:2.8rem;
    letter-spacing:3px;
    text-shadow:0 0 20px rgba(212,175,55,0.6);
}

.oracle-sub{
    margin-top:10px;
    font-size:.8rem;
    letter-spacing:3px;
    color:#aaa;
    text-transform:uppercase;
}

.oracle-locked{
    margin-top:40px;
}

.oracle-lock{
    font-size:70px;
    animation:slowPulse 3s infinite;
}

@keyframes slowPulse{
    0%{ text-shadow:0 0 10px rgba(212,175,55,0.4); }
    50%{ text-shadow:0 0 30px rgba(212,175,55,0.9); }
    100%{ text-shadow:0 0 10px rgba(212,175,55,0.4); }
}

.oracle-input{
    background:rgba(0,0,0,0.6);
    border:1px solid rgba(212,175,55,0.3);
    padding:12px 15px;
    border-radius:8px;
    color:#fff;
    transition:.3s;
}

.oracle-input:focus{
    border-color:#d4af37;
    box-shadow:0 0 15px rgba(212,175,55,0.6);
    outline:none;
}

.results-table{
    margin-top:40px;
    background:rgba(0,0,0,0.5);
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.05);
}

.results-table thead{
    background:rgba(212,175,55,0.1);
}

.results-table th{
    padding:15px;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:1px;
}

.results-table td{
    padding:12px 15px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.results-table tr:hover{
    background:rgba(212,175,55,0.05);
}


/* =========================
   ORACLE – DROP / SPOIL SWITCH UPGRADE
========================= */

.smart-toggle-wrapper{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:10px;
}

.toggle-label{
    font-family:'Cinzel', serif;
    font-size:0.9rem;
    letter-spacing:1px;
    opacity:0.4;
    transition:.3s ease;
}

.toggle-label.active{
    opacity:1;
    color:#ffd700;
    text-shadow:0 0 10px rgba(212,175,55,0.6);
}

.smart-switch{
    position:relative;
    display:inline-block;
    width:64px;
    height:32px;
}

.smart-switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    background:rgba(255,255,255,0.08);
    border-radius:50px;
    border:1px solid rgba(255,255,255,0.1);
    transition:.4s;
}

.slider:before{
    content:"";
    position:absolute;
    height:24px;
    width:24px;
    left:4px;
    top:3px;
    background:#ffd700;
    border-radius:50%;
    transition:.4s;
    box-shadow:0 0 12px rgba(212,175,55,0.8);
}

.smart-switch input:checked + .slider{
    background:rgba(212,175,55,0.2);
}

.smart-switch input:checked + .slider:before{
    transform:translateX(30px);
}


/* ===== SMART LEVEL CHECKBOX STYLE ===== */

.smart-level-wrapper{
    margin-top:12px;
    font-family:'Cinzel', serif;
    font-size:0.85rem;
    color:#aaa;
    letter-spacing:1px;
}

.smart-level-wrapper input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:#d4af37;
    cursor:pointer;
    margin-right:8px;
}

.smart-level-wrapper label{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
}

.smart-level-wrapper input[type="checkbox"]:checked + *{
    color:#ffd700;
}


/* ===============================
   RANKING – NOSTALGIE HEROES
================================ */

.hero-wrapper{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
    text-align:center;
}

.hero-wrapper h2{
    font-family:'Cinzel', serif;
    font-size:3rem;
    color:#ffd700;
    letter-spacing:4px;
    margin-bottom:5px;
    text-shadow:0 0 20px rgba(212,175,55,0.6);
}

.podium-container{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:30px;
    margin:50px 0;
}

.podium-card{
    width:220px;
    padding:25px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.6));
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    transition:.4s;
}

.podium-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

.podium-avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    margin:15px auto;
    border:3px solid rgba(212,175,55,0.6);
}

.podium-name{
    font-family:'Cinzel', serif;
    font-size:1.2rem;
    color:#fff;
    margin:10px 0;
}

.podium-rank{
    font-size:1.5rem;
    font-weight:bold;
    color:#ffd700;
}

.place-1{
    transform:scale(1.15);
    box-shadow:0 0 40px rgba(255,215,0,0.4);
}

.place-2{
    box-shadow:0 0 25px rgba(192,192,192,0.3);
}

.place-3{
    box-shadow:0 0 25px rgba(205,127,50,0.3);
}

.podium-stats{
    display:flex;
    justify-content:center;
    gap:15px;
    font-size:0.9rem;
    color:#ccc;
    margin-top:10px;
}

/* ===== TABLE ===== */

.ranking-table{
    width:100%;
    border-collapse:collapse;
    margin-top:40px;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(8px);
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.ranking-table thead{
    background:linear-gradient(90deg, #111, #1a1a1a);
}

.ranking-table th{
    padding:15px;
    font-family:'Cinzel', serif;
    font-size:0.85rem;
    letter-spacing:2px;
    color:#ffd700;
    text-transform:uppercase;
}

.ranking-table td{
    padding:14px;
    border-top:1px solid rgba(255,255,255,0.05);
    color:#ddd;
}

.ranking-table tbody tr{
    transition:.3s;
}

.ranking-table tbody tr:hover{
    background:rgba(255,215,0,0.05);
}

.rank-num{
    font-weight:bold;
    color:#ffd700;
}

.mini-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
    border:1px solid rgba(255,255,255,0.2);
}

.pvp-txt{
    color:#4caf50;
    font-weight:bold;
}

.pk-txt{
    color:#f44336;
    font-weight:bold;
}


/* ===== HEROES CINEMATIC BOOST ===== */

.place-1{
    transform:scale(1.2) translateY(-10px);
    position:relative;
    background:radial-gradient(circle at top, rgba(255,215,0,0.25), rgba(0,0,0,0.8));
    border:1px solid rgba(255,215,0,0.6);
}

.place-1::before{
    content:"";
    position:absolute;
    inset:-30px;
    background:radial-gradient(circle, rgba(255,215,0,0.15), transparent 70%);
    z-index:-1;
    filter:blur(40px);
}

.place-1 .podium-avatar{
    width:120px;
    height:120px;
    border:4px solid #ffd700;
    box-shadow:0 0 25px rgba(255,215,0,0.7);
}

.place-1 .podium-name{
    font-size:1.4rem;
    color:#ffd700;
}

.place-2 .podium-avatar{
    border-color:silver;
}

.place-3 .podium-avatar{
    border-color:#cd7f32;
}

.podium-card{
    backdrop-filter:blur(15px);
}


/* ===== ONLINE PULSE EFFECT ===== */

@keyframes onlinePulse {
    0%   { box-shadow:0 0 0 rgba(76,175,80,0.4); }
    50%  { box-shadow:0 0 12px rgba(76,175,80,0.8); }
    100% { box-shadow:0 0 0 rgba(76,175,80,0.4); }
}

.status-badge.on{
    background:rgba(76,175,80,0.15);
    border:1px solid rgba(76,175,80,0.5);
    color:#4caf50;
    animation:onlinePulse 2.5s infinite ease-in-out;
}

.status-badge.off{
    background:rgba(244,67,54,0.1);
    border:1px solid rgba(244,67,54,0.3);
    color:#f44336;
}


.oracle-location {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
    color: #aaa;
}

.oracle-location b {
    color: #ffd700;
}


/* =========================================
   ORACLE TABLE REFINEMENT
========================================= */

.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.results-table th {
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 14px 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,215,120,0.15);
}

.results-table td {
    padding: 18px 10px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,215,120,0.08);
}

/* Kolumny */
.results-table th:nth-child(1),
.results-table td:nth-child(1) {
    width: 42%;
}

.results-table th:nth-child(2),
.results-table td:nth-child(2) {
    width: 8%;
    text-align: center;
    font-weight: 600;
    color: #d4af37;
}

.results-table th:nth-child(3),
.results-table td:nth-child(3) {
    width: 25%;
}

.results-table th:nth-child(4),
.results-table td:nth-child(4),
.results-table th:nth-child(5),
.results-table td:nth-child(5) {
    width: 12%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Lokalizacja pod nazwą */
.oracle-location {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.65;
    line-height: 1.5;
}

/* Hover efekt */
.results-table tbody tr {
    transition: all 0.25s ease;
}


/* Szansa lekki akcent */
.results-table td:last-child {
    font-weight: 600;
    color: #ffd700;
}


/* ============================= */
/* ORACLE MODE STYLING          */
/* ============================= */

/* DROP (złoty) */
.results-table.mode-drop tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.08),
        rgba(212,175,55,0.02)
    );
}

/* DROP – szansa */
.results-table.mode-drop td:last-child {
    color: #ffd700;
}

/* SPOIL (niebieski) */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.12),
        rgba(0,140,255,0.04)
    );
}

/* SPOIL – szansa */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
}


/* ============================= */
/* ORACLE – TRYB KOLORÓW        */
/* ============================= */

/* DROP (złoty) */
.results-table.mode-drop tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.10),
        rgba(212,175,55,0.03)
    );
}

/* DROP – procent */
.results-table.mode-drop td:last-child {
    color: #ffd700;
}

/* SPOIL (niebieski) */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.15),
        rgba(0,140,255,0.05)
    );
}

/* SPOIL – procent */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
}


/* ===================================================== */
/* ORACLE – PEŁNE PRZEŁĄCZENIE ZŁOTO → NIEBIESKI (SPOIL) */
/* ===================================================== */

.results-table.mode-spoil {

    /* ogólny kolor tekstu */
    color: #cfe9ff;

}

/* Nagłówki */
.results-table.mode-spoil th {
    color: #4db8ff;
}

/* Nazwa potwora */
.results-table.mode-spoil .oracle-npc {
    color: #66c2ff;
}

/* Lokalizacja */
.results-table.mode-spoil .oracle-location {
    color: #7fd1ff;
    opacity: 0.9;
}

/* Szansa */
.results-table.mode-spoil td:last-child {
    color: #00bfff;
    font-weight: 600;
}

/* Hover */
.results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(0,140,255,0.18),
        rgba(0,140,255,0.05)
    );
}

/* Delikatne podświetlenie aktywnego wiersza */
.results-table.mode-spoil tbody tr {
    border-left: 3px solid rgba(0,140,255,0.35);
}

/* Usuwamy złoty glow jeśli gdzieś był */
.results-table.mode-spoil * {
    text-shadow: none;
    box-shadow: none;
}


/* ========================================= */
/* ORACLE TOGGLE – ZŁOTO (DROP) vs NIEBIESKI (SPOIL) */
/* ========================================= */

/* Domyślnie DROP (złoty aktywny) */
.toggle-label.active {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* Gdy tabela ma tryb SPOIL */
.results-table.mode-spoil ~ * .toggle-label.active,
.results-table.mode-spoil + * .toggle-label.active {
    color: #00bfff;
    text-shadow: 0 0 8px rgba(0,191,255,0.7);
}

/* Bezpieczniejsze wymuszenie (jeśli powyższe nie złapie struktury) */
.mode-spoil .toggle-label.active {
    color: #00bfff !important;
    text-shadow: 0 0 8px rgba(0,191,255,0.7) !important;
}

/* Checkbox glow przy SPOIL */
.mode-spoil input[type="checkbox"]:checked {
    accent-color: #00bfff;
    filter: drop-shadow(0 0 4px rgba(0,191,255,0.6));
}

/* Checkbox glow przy DROP */
input[type="checkbox"]:checked {
    accent-color: #ffd700;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}


/* ===========================
   ORACLE COLOR MODES
=========================== */

/* DROP (gold) */
.hero-wrapper.mode-drop .results-table th,
.hero-wrapper.mode-drop .oracle-npc,
.hero-wrapper.mode-drop .results-table td:last-child {
    color: #ffd700;
}

.hero-wrapper.mode-drop .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.12),
        rgba(212,175,55,0.03)
    );
}

/* SPOIL (blue) */
.hero-wrapper.mode-spoil .results-table th,
.hero-wrapper.mode-spoil .oracle-npc,
.hero-wrapper.mode-spoil .results-table td:last-child {
    color: #4da6ff;
}

.hero-wrapper.mode-spoil .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(77,166,255,0.12),
        rgba(77,166,255,0.03)
    );
}

/* Toggle slider color change */
.hero-wrapper.mode-spoil .smart-switch .slider {
    background-color: #4da6ff;
}

.hero-wrapper.mode-drop .smart-switch .slider {
    background-color: #d4af37;
}


/* =========================================
   FORCE ORACLE COLOR MODE (OVERRIDE)
========================================= */

/* GOLD MODE */
.hero-wrapper.mode-drop .results-table th,
.hero-wrapper.mode-drop .results-table td,
.hero-wrapper.mode-drop .oracle-npc {
    color: #ffd700 !important;
}

.hero-wrapper.mode-drop .oracle-location {
    color: rgba(255,215,0,0.7) !important;
}

/* BLUE MODE */
.hero-wrapper.mode-spoil .results-table th,
.hero-wrapper.mode-spoil .results-table td,
.hero-wrapper.mode-spoil .oracle-npc {
    color: #4da6ff !important;
}

.hero-wrapper.mode-spoil .oracle-location {
    color: rgba(77,166,255,0.7) !important;
}

/* Hover gold */
.hero-wrapper.mode-drop .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(212,175,55,0.15),
        rgba(212,175,55,0.04)
    ) !important;
}

/* Hover blue */
.hero-wrapper.mode-spoil .results-table tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(77,166,255,0.15),
        rgba(77,166,255,0.04)
    ) !important;
}

/* Toggle switch color */
.hero-wrapper.mode-spoil .smart-switch .slider {
    background-color: #4da6ff !important;
}

.hero-wrapper.mode-drop .smart-switch .slider {
    background-color: #d4af37 !important;
}


/* ========================= */
/* SPOIL FULL BLUE OVERRIDE */
/* ========================= */

#results-table.mode-spoil,
#results-table.mode-spoil th,
#results-table.mode-spoil td,
#results-table.mode-spoil .oracle-npc,
#results-table.mode-spoil .oracle-location {
    color: #57b8ff !important;
}

#results-table.mode-spoil td:last-child {
    color: #6ec6ff !important;
    font-weight: 600;
}

#results-table.mode-spoil tbody tr:hover {
    background: linear-gradient(
        90deg,
        rgba(87,184,255,0.12),
        rgba(87,184,255,0.03)
    ) !important;
}

/* Toggle kolor */
#results-table.mode-spoil ~ * .toggle-label.active {
    color: #57b8ff !important;
}


/* ===================================== */
/* SPOIL MODE – FULL SECTION BLUE THEME */
/* ===================================== */

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
    text-shadow: 0 0 15px rgba(87,184,255,0.4) !important;
}

.oracle-section.mode-spoil .oracle-sub {
    color: #8fd3ff !important;
}

.oracle-section.mode-spoil {
    background: linear-gradient(
        135deg,
        rgba(15,25,45,0.95),
        rgba(5,15,35,0.98)
    ) !important;
    box-shadow: 0 0 40px rgba(87,184,255,0.15) inset !important;
}

.oracle-section.mode-spoil .oracle-input {
    border-color: #57b8ff !important;
    box-shadow: 0 0 10px rgba(87,184,255,0.4) !important;
}

.oracle-section.mode-spoil .smart-switch .slider {
    background-color: #57b8ff !important;
}


/* ========================================= */
/* HARD OVERRIDE – SPOIL BLUE EVERYTHING    */
/* ========================================= */

#results-table.mode-spoil thead th {
    color: #57b8ff !important;
    border-bottom: 1px solid rgba(87,184,255,0.4) !important;
}

#results-table.mode-spoil tbody td {
    color: #6ec6ff !important;
}

#results-table.mode-spoil tbody td.panel-muted {
    color: #6ec6ff !important;
}

#results-table.mode-spoil .oracle-npc {
    color: #6ec6ff !important;
}

#results-table.mode-spoil .oracle-location {
    color: #6ec6ff !important;
}


/* ================================= */
/* ORACLE TITLE – MODE COLOR SWITCH */
/* ================================= */

.oracle-section.mode-drop .oracle-title {
    color: #ffd700 !important;
    text-shadow: 0 0 18px rgba(255,215,0,0.4) !important;
}

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
    text-shadow: 0 0 18px rgba(87,184,255,0.5) !important;
}


/* ===== SPOIL FORCE BLUE NPC NAME ===== */

.oracle-section.mode-spoil .oracle-npc {
    color: #57b8ff !important;
}

.oracle-section.mode-spoil .oracle-title {
    color: #57b8ff !important;
}


/* ===== SPOIL FORCE BLUE CHANCE COLUMN ===== */

.oracle-section.mode-spoil .results-table td:last-child {
    color: #6ec6ff !important;
}


/* ===== SPOIL FORCE BLUE LV COLUMN ===== */

.oracle-section.mode-spoil .results-table th:nth-child(2),
.oracle-section.mode-spoil .results-table td:nth-child(2) {
    color: #57b8ff !important;
}


/* ========================= */
/* DASHBOARD HERO SECTION  */
/* ========================= */

.dashboard-hero{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:30px 0 20px 0;
}

.dashboard-title{
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
    color:#ffd700;
    text-transform:none;
}

.dashboard-title .dash-pro{
    color:#57b8ff;
    font-weight:700;
    margin-left:8px;
}

.dashboard-user{
    font-size:20px;
    font-weight:600;
    letter-spacing:2px;
    color:#ffffff;
    text-transform:uppercase;
}


/* ========================= */
/* DASHBOARD USER FRAME     */
/* ========================= */

.dashboard-user{
    margin-top:5px;
    padding:8px 18px;
    border-radius:30px;
    display:inline-block;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:0.3s ease;
}

/* zwykły user */
.dashboard-user.normal-user{
    border:1px solid rgba(255,215,0,0.4);
    background:rgba(255,215,0,0.05);
    color:#ffd700;
}

/* premium */
.dashboard-user.premium-user{
    border:1px solid rgba(87,184,255,0.7);
    background:linear-gradient(
        135deg,
        rgba(255,215,0,0.12),
        rgba(87,184,255,0.15)
    );
    color:#ffffff;
    box-shadow:
        0 0 12px rgba(87,184,255,0.4),
        0 0 20px rgba(255,215,0,0.25);
}

/* delikatny hover premium */
.dashboard-user.premium-user:hover{
    box-shadow:
        0 0 18px rgba(87,184,255,0.6),
        0 0 28px rgba(255,215,0,0.35);
    transform:translateY(-1px);
}


/* ========================= */
/* PREMIUM ANIMATED GLOW    */
/* ========================= */

@keyframes premiumPulse {
    0% {
        box-shadow:
            0 0 10px rgba(87,184,255,0.4),
            0 0 20px rgba(255,215,0,0.25);
    }
    50% {
        box-shadow:
            0 0 18px rgba(87,184,255,0.7),
            0 0 35px rgba(255,215,0,0.45);
    }
    100% {
        box-shadow:
            0 0 10px rgba(87,184,255,0.4),
            0 0 20px rgba(255,215,0,0.25);
    }
}

.dashboard-user.premium-user{
    animation: premiumPulse 3.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* lekki shimmer przechodzący */
.dashboard-user.premium-user::after{
    content: "";
    position: absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.25) 50%,
        transparent 100%
    );
    animation: shimmerMove 4s infinite;
}

@keyframes shimmerMove{
    0% { left:-100%; }
    100% { left:120%; }
}


/* ========================= */
/* PREMIUM AVATAR RING      */
/* ========================= */

.char-card.premium-user .avatar-wrapper {
    position: relative;
}

.char-card.premium-user .avatar-wrapper::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(
        45deg,
        rgba(255,215,0,0.9),
        rgba(87,184,255,0.7),
        rgba(255,215,0,0.9)
    );
    z-index: 0;
    animation: premiumRingRotate 6s linear infinite;
}

.char-card.premium-user .avatar-img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

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


/* ========================= */
/* PANEL TOP POSITION FIX   */
/* ========================= */

.dashboard-header {
    margin-top: 20px !important;
}

.chars-grid {
    margin-top: 25px !important;
}


/* =========================================
   NOSTALGIE™ COIN HEADER FIX (2026-02-17)
   ========================================= */

/* Kontener całego licznika (Moneta + Tekst) */
.nc-coin-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important; /* Moneta po lewej, tekst po prawej (zależy od HTML, ale to zazwyczaj pomaga) */
    gap: 12px !important; /* Odstęp między monetą a cyframi */
    
    /* Wygląd Modern Glass */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important; /* Złota ramka */
    border-radius: 20px !important;
    padding: 5px 15px !important;
    height: 36px !important; /* Stała wysokość, żeby nie rozpychało headera */
    margin-top: 0 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    min-width: 120px !important; /* Minimalna szerokość dla estetyki */
}

/* Sama moneta - zmniejszona i opanowana */
.nc-coin {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important; /* Usuwa stare centrowanie */
    transform: none !important; /* Wyłącza dziwną rotację 3D, która zasłaniała tekst */
    background-size: contain !important;
    position: relative !important;
    flex-shrink: 0 !important; /* Nie zgniataj monety */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8)) !important; /* Złoty blask */
}

/* Jeśli moneta jest zbudowana z warstw (body), też ją resetujemy */
.nc-coin-body {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    animation: none !important; /* Wyłączamy latanie monety */
}

/* Tekst bilansu */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #ffd700 !important; /* Złoty tekst */
    font-weight: 600 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,1) !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Efekt hover - lekkie podświetlenie całości */
.nc-coin-wrapper:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    cursor: pointer;
}

/* ==================================================
   NOSTALGIE™ HEADER COIN FIX (CLEAN GLASS UI)
   ================================================== */

/* 1. Kontener - robimy z niego szklaną plakietkę */
.nc-coin-wrapper {
    display: inline-flex !important;       /* Układa elementy obok siebie */
    align-items: center !important;        /* Centruje w pionie */
    justify-content: center !important;
    gap: 10px !important;                  /* KLUCZOWE: Odstęp 10px między monetą a tekstem */
    
    /* Wygląd */
    background: rgba(0, 0, 0, 0.6) !important;     /* Ciemniejsze tło dla kontrastu */
    border: 1px solid rgba(255, 215, 0, 0.3) !important; /* Złota ramka */
    border-radius: 30px !important;        /* Zaokrąglone rogi */
    padding: 4px 15px !important;          /* Wewnętrzne odstępy */
    height: 38px !important;               /* Stała wysokość */
    min-width: 100px !important;
    margin-right: 15px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
}

/* 2. Moneta - prostujemy ją i zmniejszamy */
.nc-coin {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform: none !important;            /* Wyłączamy obrót 3D - moneta przodem */
    background-size: contain !important;
    flex-shrink: 0 !important;             /* Zapobiega zgniataniu monety */
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) !important; /* Złota poświata */
}

/* Reset wewnętrznych elementów monety, jeśli istnieją */
.nc-coin-body, .nc-coin-body::after, .nc-coin-body::before {
    animation: none !important;            /* Wyłączamy zbędne animacje w headerze */
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    background: none !important;           /* Jeśli to CSS-owa moneta, resetujemy tło */
}
/* Jeśli moneta jest obrazkiem w tle lub img */
.nc-coin img {
    width: 100% !important;
    height: 100% !important;
}

/* 3. Tekst Bilansu - stylizacja cyfr */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #ffd700 !important;             /* Złoty kolor */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Efekt najechania myszką */
.nc-coin-wrapper:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: #ffd700 !important;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* =================================================================
   NOSTALGIE™ COIN REBORN (Total Reset & New Design) - 2026-02-17
   ================================================================= */

/* 1. KONTENER (SZUFLADKA) */
.nc-coin-wrapper {
    /* Resetujemy stare pozycjonowanie */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Nowy wygląd "Szufladki" */
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    border-radius: 50px !important; /* Idealna pigułka */
    
    /* Wymiary i odstępy */
    padding: 3px 15px 3px 3px !important; /* Mniej po lewej bo tam jest moneta */
    height: 36px !important;
    min-width: 110px !important;
    margin-right: 20px !important;
    
    /* Reset efektów */
    transform: none !important;
    filter: none !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nc-coin-wrapper:hover {
    border-color: rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* 2. NOWA MONETA (CZYSTA GRAFIKA CSS) */
/* Ukrywamy stare, zepsute elementy 3D wewnątrz monety */
.nc-coin-body, .edge, .face {
    display: none !important; 
}

/* Tworzymy nową monetę na bazie głównego kontenera .nc-coin */
.nc-coin {
    /* Reset */
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
    
    /* Nowy wygląd - Złoty Krążek */
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    
    /* Złoty Gradient (efekt metalu) */
    background: radial-gradient(circle at 30% 30%, #fffacd, #ffd700, #b8860b) !important;
    border: 1px solid #8b6914 !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 5px rgba(0,0,0,0.5) !important;
    
    /* Pozycjonowanie */
    flex-shrink: 0 !important;
    margin-right: 12px !important; /* Odstęp od tekstu */
    position: relative !important;
}

/* Symbol dolara/waluty na monecie (opcjonalny detal dla realizmu) */
.nc-coin::after {
    content: 'N' !important; /* N jak Nostalgie */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #8b6914 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    font-family: serif !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* 3. TEKST BILANSU */
.nc-coin-wrapper span, 
.nc-coin-wrapper div {
    color: #fff !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    
    /* Upewniamy się, że tekst jest widoczny */
    display: inline-block !important;
    line-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kolor dla waluty (złoty akcent) */
.nc-coin-wrapper span::after {
    content: '' !important; /* Można tu dodać ' Coins' w CSS jeśli brakuje w HTML */
}

/* ==================================================
   NOSTALGIE™ HERO VISUAL UPGRADE (2026-02-17)
   ================================================== */

/* 1. NEON BETA BADGE */
.home-badge.neon-pulse {
    background: rgba(255, 60, 60, 0.15);
    border: 1px solid rgba(255, 60, 60, 0.6);
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 60, 60, 0.8);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
    animation: neonPulse 2s infinite alternate;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
}

@keyframes neonPulse {
    0% { opacity: 0.8; text-shadow: 0 0 10px rgba(255,60,60,0.8); }
    100% { opacity: 1; text-shadow: 0 0 20px rgba(255,60,60,1), 0 0 40px rgba(255,0,0,0.6); }
}

/* 2. SERVER LIVE HUD */
.server-live-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 50px;
    padding: 12px 40px;
    margin: 30px auto; /* Odstęp od daty i licznika */
    width: fit-content;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    z-index: 10;
}

/* Status Dot (Ping) */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.status-indicator.online { color: #00ff88; }
.status-indicator.offline { color: #ff4444; }

.ping-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: blinkStatus 1.5s infinite;
}

@keyframes blinkStatus {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Online Counter */
.online-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 0 25px;
}

.count-val {
    font-size: 1.4rem;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.count-label {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Beta Tag w HUD */
.server-live-status .beta-tag {
    color: #ffaa00;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 170, 0, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

/* 3. LOGO GLOW FX */
.home-logo img {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.25)); /* Delikatna złota poświata */
    transition: all 0.5s ease;
}

.home-logo:hover img {
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.5));
    transform: scale(1.02);
}

/* =======================================================
   NOSTALGIE™ CINEMATIC LOGO FX (Darkness -> Shine)
   ======================================================= */

/* 1. KONTENER LOGO - Obsługa połysku */
.home-logo {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Żeby błysk nie wyjechał poza logo */
    border-radius: 10px; /* Dopasowanie do kształtu */
}

/* 2. SAMO LOGO - Animacja wyłaniania z ciemności */
.home-logo img {
    opacity: 0; /* Startujemy z ukrycia */
    transform: scale(0.9);
    filter: brightness(0) blur(10px); /* Totalna ciemność i rozmycie */
    
    /* Wykonaj 'emergeFromDarkness' przez 3s, zatrzymaj w ostatniej klatce */
    animation: emergeFromDarkness 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes emergeFromDarkness {
    0% {
        opacity: 0;
        filter: brightness(0) blur(15px);
        transform: scale(0.85) translateY(10px);
    }
    60% {
        opacity: 0.8;
        filter: brightness(0.6) blur(2px); /* Półmrok */
    }
    85% {
        opacity: 1;
        filter: brightness(1.5) blur(0); /* BŁYSK (Flash) pod koniec */
        transform: scale(1.02);
        filter: drop-shadow(0 0 30px rgba(255,255,255,0.8));
    }
    100% {
        opacity: 1;
        filter: brightness(1) blur(0); /* Normalny stan */
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(212,175,55,0.3)); /* Złota poświata */
    }
}

/* 3. METALICZNY POŁYSK (SHINE) - Co 15 sekund */
.home-logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: -200%; /* Start poza ekranem z lewej */
    width: 150%;
    height: 100%;
    
    /* Efekt metalicznego światła */
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.8) 50%, /* Białe centrum błysku */
        rgba(255, 255, 255, 0.1) 60%,
        transparent 80%
    );
    
    transform: skewX(-20deg);
    pointer-events: auto !important; cursor: pointer !important; /* Żeby można było klikać w logo */
    
    /* Animacja pętli: 15s */
    animation: metalShineLoop 15s ease-in-out infinite;
    animation-delay: 3.5s; /* Czekamy aż skończy się intro (3s) + mała przerwa */
}

@keyframes metalShineLoop {
    0% {
        left: -200%;
        opacity: 0;
    }
    10% { /* Szybki przejazd (1.5s trwania błysku) */
        left: 200%;
        opacity: 1;
    }
    100% { /* Reszta czasu (13.5s) czekanie */
        left: 200%;
        opacity: 0;
    }
}

/* =======================================================
   NOSTALGIE™ TRUE LOGO FX (Shaped Shine)
   ======================================================= */

/* Kontener Logo */
.home-logo {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
}

/* Link jako kontener dla maski */
.home-logo a {
    display: block;
    position: relative;
    text-decoration: none;
    /* To sprawia, że błysk nie wychodzi poza obrys obrazka */
    -webkit-mask-image: url('../img/l2nos.png');
    mask-image: url('../img/l2nos.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 1. ANIMACJA STARTOWA (Ciemność -> Światło) - 3 sekundy */
.home-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    
    /* Start: Ciemność */
    filter: brightness(0);
    opacity: 0;
    
    /* Animacja wyłaniania */
    animation: revealLogo 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes revealLogo {
    0% {
        opacity: 0;
        filter: brightness(0) blur(5px);
        transform: scale(0.95);
    }
    40% {
        opacity: 0.6;
        filter: brightness(0.3); /* Lekki mrok */
    }
    80% {
        opacity: 1;
        filter: brightness(1.2); /* Lekki błysk pod koniec */
    }
    100% {
        opacity: 1;
        filter: brightness(1); /* Normalny stan */
        transform: scale(1);
    }
}

/* 2. METALICZNY BŁYSK (Shine) - Co 15 sekund */
/* Błysk jest nakładany na ::after linku, ale dzięki 'mask-image' wyżej
   będzie widoczny TYLKO na kształcie logo, a nie na prostokącie */
.home-logo a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    
    /* Ostry, metaliczny gradient */
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.95) 50%, /* Białe centrum błysku */
        rgba(255, 255, 255, 0.0) 70%,
        transparent 100%
    );
    
    /* Tryb mieszania dla lepszego efektu na kolorach logo */
    mix-blend-mode: overlay; 
    pointer-events: auto !important; cursor: pointer !important;
    transform: skewX(-25deg);
    
    /* Pętla 15 sekund, startuje po zakończeniu intro (3s) */
    animation: metalShineOnlyLogo 15s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes metalShineOnlyLogo {
    0% {
        left: -150%;
        opacity: 0;
    }
    5% { /* Szybki przelot (ok 0.7s) */
        opacity: 1;
    }
    10% {
        left: 150%;
        opacity: 0;
    }
    100% {
        left: 150%; /* Czekanie przez resztę czasu */
    }
}

/* Interakcja - przy najechaniu logo lekko się podświetla */
.home-logo a:hover img {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
    transition: filter 0.3s ease;
}

/* =============================================================
   NOSTALGIE™ HERO FINAL (Clean, Drop Animation, Real HUD)
   ============================================================= */

/* 1. UKŁAD I ODSTĘPY (Mniejsza przestrzeń od Headera) */
.home-cinematic.simple-hero {
    padding-top: 10px !important; /* Minimalny odstęp od góry */
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Usuwamy stare efekty z całego tła */
.home-cinematic::before, 
.home-cinematic::after {
    display: none !important;
    content: none !important;
}

/* 2. LOGO - ANIMACJA SPADANIA I WYŁANIANIA */
.home-logo-wrap {
    margin-bottom: 15px !important;
    position: relative !important;
    z-index: 10 !important;
}

.logo-link img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    
    /* Startowy stan animacji */
    opacity: 0 !important;
    filter: brightness(0) blur(5px) !important; /* Ciemność */
    transform: translateY(-80px) scale(0.9) !important; /* Logo wisi wysoko */
    
    /* Uruchomienie animacji: 2.5 sekundy, płynne wejście */
    animation: dropFromDarkness 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes dropFromDarkness {
    0% {
        opacity: 0;
        filter: brightness(0) blur(10px);
        transform: translateY(-80px) scale(0.9);
    }
    60% {
        opacity: 1;
        filter: brightness(0.5) blur(2px); /* Półmrok w locie */
    }
    100% {
        opacity: 1;
        filter: brightness(1) blur(0); /* Pełne światło na miejscu */
        transform: translateY(0) scale(1);
    }
}

/* 3. METALICZNY BŁYSK (Tylko na logo, co 15s) */
/* Używamy maskowania, żeby błysk nie wychodził poza kształt */
.logo-link {
    position: relative !important;
    -webkit-mask-image: url('../img/l2nos.png');
    mask-image: url('../img/l2nos.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.logo-link::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%) !important;
    transform: skewX(-25deg) !important;
    animation: simpleMetalShine 15s infinite !important;
    animation-delay: 3s !important; /* Start po opadnięciu */
    pointer-events: none !important;
}

@keyframes simpleMetalShine {
    0%, 100% { left: -150%; opacity: 0; }
    5% { opacity: 1; }
    10% { left: 150%; opacity: 0; } /* Szybki przelot */
}

/* 4. REAL HUD (Pasek statusu) */
.real-status-hud {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    padding: 8px 25px !important;
    margin: 15px 0 !important;
    backdrop-filter: blur(5px) !important;
}

.hud-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ccc !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.dot.on { background: #00ff88 !important; box-shadow: 0 0 8px #00ff88 !important; }
.dot.off { background: #ff4444 !important; }

.hud-sep { color: rgba(255,255,255,0.2) !important; }

.hud-item .value { color: #ffd700 !important; font-weight: bold !important; font-size: 1rem !important; }

/* 5. BETA TEXT */
.beta-status-text {
    color: #ffaa00 !important;
    letter-spacing: 3px !important;
    font-size: 0.9rem !important;
    margin-bottom: 5px !important;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.4) !important;
    font-weight: 700 !important;
}

/* =============================================================
   NOSTALGIE™ REPAIRED HERO (Visible Logo + Metal FX + Real HUD)
   ============================================================= */

/* 1. SEKCJA GŁÓWNA */
.home-cinematic.simple-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 20px !important; /* Mały odstęp od headera */
    position: relative !important;
    z-index: 1 !important;
}

/* 2. LOGO - MUSI BYĆ WIDOCZNE */
.home-logo-wrap {
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 10 !important;
    /* Gwarancja widoczności */
    opacity: 1 !important; 
    visibility: visible !important;
}

.logo-anim-box img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    
    /* Startowa pozycja animacji */
    transform: translateY(-100px); 
    opacity: 0;
    filter: brightness(0.2); /* Ciemne na start */
    
    /* Animacja wejścia: Spada i się rozjaśnia (2.5s) */
    animation: heroDropIn 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* Klatki kluczowe animacji wejścia */
@keyframes heroDropIn {
    0% {
        transform: translateY(-100px);
        opacity: 0;
        filter: brightness(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: brightness(1); /* Pełna widoczność */
    }
}

/* EFEKT METALU (Co 15s) - Używamy filtra zamiast maski (Bezpieczniej) */
.logo-anim-box img {
    /* Dodajemy drugą animację w pętli */
    animation: heroDropIn 2.5s forwards, metalPulse 15s infinite !important;
}

@keyframes metalPulse {
    0%, 20% {
        /* Stan normalny */
        filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0));
    }
    22% {
        /* BŁYSK (Flash) */
        filter: brightness(1.8) drop-shadow(0 0 20px rgba(255,215,0,0.6));
        transform: scale(1.02);
    }
    24% {
        /* Powrót */
        filter: brightness(1) drop-shadow(0 0 5px rgba(255,215,0,0.2));
        transform: scale(1);
    }
    100% {
        /* Czekanie */
        filter: brightness(1);
    }
}

/* 3. TEKST BETA */
.beta-status-text {
    font-size: 1rem !important;
    color: #ffd700 !important;
    letter-spacing: 3px !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(212,175,55,0.5) !important;
    margin-bottom: 5px !important;
    opacity: 0;
    animation: fadeInSimple 1s ease forwards 1s !important; /* Pojawia się po 1s */
}

/* 4. REAL HUD (Pasek Statusu) */
.real-status-hud {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: rgba(10, 10, 15, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 40px !important;
    padding: 10px 30px !important;
    margin: 20px 0 !important;
    backdrop-filter: blur(5px) !important;
    opacity: 0;
    animation: fadeInSimple 1s ease forwards 1.5s !important; /* Pojawia się po 1.5s */
}

.hud-col {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.status-dot {
    width: 10px !important; height: 10px !important;
    border-radius: 50% !important;
    display: block !important;
}
.status-dot.online { background: #00ff00 !important; box-shadow: 0 0 10px #00ff00 !important; }
.status-dot.offline { background: #ff0000 !important; box-shadow: 0 0 10px #ff0000 !important; }

.status-label {
    color: #888 !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

.status-val {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

.hud-sep {
    width: 1px !important;
    height: 20px !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Ogólny Fade In */
@keyframes fadeInSimple {
    to { opacity: 1; }
}


/* ========================================================
   NOSTALGIE™ UPDATE: ECONOMY HUD STYLES
   ======================================================== */

/* RATES HUD - Zmodernizowany */
.server-rates-hud {
    display: flex !important;
    flex-wrap: wrap !important; /* Pozwala na zawijanie przy małym ekranie */
    justify-content: center !important;
    gap: 15px !important;
    margin: 10px 0 25px 0 !important;
    background: rgba(20, 20, 25, 0.6) !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
}

.rate-item {
    color: #aaa !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.rate-item b {
    color: #ffd700 !important;
    font-weight: 700 !important;
}

/* Styl dla sekcji ekonomii (No Common, Craft) */
.rate-item.eco {
    color: #ddd !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.1) !important;
}

.rate-item.eco b {
    color: #ffaa00 !important; /* Bardziej pomarańczowy dla Craftu */
}

.rate-sep {
    color: rgba(255,255,255,0.1) !important;
    font-weight: 100 !important;
}

/* BETA TAG - ŻYWY */
.beta-live-indicator {
    font-size: 1.1rem !important;
    color: #ff4444 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    padding: 5px 20px !important;
    border: 1px solid rgba(255, 68, 68, 0.4) !important;
    background: rgba(50, 0, 0, 0.6) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 15px rgba(255,0,0,0.1) !important;
    animation: betaPulseDeep 2s infinite alternate !important;
}

@keyframes betaPulseDeep {
    0% { text-shadow: 0 0 5px rgba(255,68,68,0.5); border-color: rgba(255,68,68,0.3); }
    100% { text-shadow: 0 0 20px rgba(255,68,68,1); border-color: rgba(255,68,68,0.8); }
}

/* BLESSING INFO - SUBTELNE */
.beta-blessing-info {
    margin-top: 35px !important;
    padding: 20px !important;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
    max-width: 700px !important;
}

/* ========================================================
   NOSTALGIE™ COIN INTERACTION FIX (2026-02-17)
   ======================================================== */

/* Odblokowanie klikalności dla kont z zerowym bilansem */
.nc-coin-wrapper.inactive-poor {
    pointer-events: auto !important; /* Pozwala na kliknięcie */
    cursor: pointer !important;      /* Zmienia kursor na łapkę */
}

/* Opcjonalne: Delikatne rozjaśnienie przy najechaniu dla kont 0, 
   żeby gracz wiedział, że może tam kliknąć i doładować */
.nc-coin-wrapper.inactive-poor:hover {
    filter: grayscale(50%) brightness(1.1) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
}

/* NOSTALGIE™ COIN INTERACTION FIX - 2026-02-17 */
/* Szara moneta (0 coins) staje się klikalna i prowadzi do doładowania */
.nc-coin-wrapper.inactive-poor {
    pointer-events: auto !important; /* Przywrócenie klikalności */
    cursor: pointer !important;      /* Kursor łapki */
}

.nc-coin-wrapper.inactive-poor:hover {
    filter: grayscale(40%) brightness(1.2) !important; /* Subtelne podświetlenie przy najechaniu */
    border-color: rgba(255, 215, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

/* NOSTALGIE™ COIN REBIRTH - Ożywienie szarej monety */
.nc-coin-wrapper.inactive-poor:hover {
    filter: grayscale(30%) brightness(1.2) contrast(1.1) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

.nc-coin-wrapper.inactive-poor:active {
    transform: translateY(1px);
}

/* NOSTALGIE™ COIN REBIRTH - Ożywienie szarej monety */
.nc-coin-wrapper.inactive-poor:hover {
    filter: grayscale(30%) brightness(1.2) contrast(1.1) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

.nc-coin-wrapper.inactive-poor:active {
    transform: translateY(1px);
}

/* ========================================================
   NOSTALGIE™ UPDATE: PHILOSOPHY & LAYOUT (2026-02-18)
   ======================================================== */

/* 1. MINI BLESSING (Dyskretne info pod Beta Tagiem) */
.beta-blessing-mini {
    font-size: 0.8rem !important;
    color: #888 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
    max-width: 90% !important;
}

/* 2. GRAND OPENING DATE (Wyeksponowana) */
.home-opening.epic-date {
    font-size: 1.8rem !important; /* Większe */
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    color: #fff !important;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(212, 175, 55, 0.3) !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

/* 3. SEKCJA FILOZOFII (Na dole) */
.nostalgie-philosophy {
    margin-top: 50px !important;
    padding: 30px !important;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,12,0.8) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: left !important; /* Tekst czyta się lepiej wyrównany do lewej */
    max-width: 800px !important;
    color: #ccc !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    position: relative;
}

.philo-title {
    text-align: center !important;
    color: #d4af37 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.4rem !important;
    margin-bottom: 25px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
}

.nostalgie-philosophy p {
    margin-bottom: 20px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nostalgie-philosophy b {
    color: #fff !important;
}

.philo-highlight {
    text-align: center !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #e0e0e0 !important;
    margin: 30px 0 !important;
    padding: 15px !important;
    border-left: 3px solid #d4af37;
    border-right: 3px solid #d4af37;
    background: rgba(212, 175, 55, 0.05);
}

.philo-signature {
    text-align: center !important;
    margin-top: 40px !important;
    font-style: italic !important;
    color: #999 !important;
}

/* --- NOSTALGIE™ UPDATE: PHILOSOPHY & LAYOUT --- */

/* Dyskretne Blessing Info */
.beta-blessing-mini {
    font-size: 0.85rem !important;
    color: #999 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
    max-width: 800px !important;
    letter-spacing: 0.5px !important;
}
.beta-blessing-mini b { color: #ffd700 !important; }

/* Wyeksponowana Data */
.home-opening.epic-date {
    font-size: 2rem !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    background: linear-gradient(180deg, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    margin-bottom: 30px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* Sekcja Filozofii */
.nostalgie-philosophy {
    margin-top: 60px !important;
    padding: 40px !important;
    background: rgba(10, 10, 12, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-align: left !important;
    max-width: 900px !important;
    color: #ccc !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
}

.philo-title {
    text-align: center !important;
    color: #d4af37 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.6rem !important;
    margin-bottom: 30px !important;
    letter-spacing: 3px !important;
}

.nostalgie-philosophy p {
    margin-bottom: 25px !important;
}

.philo-highlight {
    text-align: center !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: #e0e0e0 !important;
    margin: 40px 0 !important;
    padding: 20px !important;
    border-left: 2px solid #d4af37;
    border-right: 2px solid #d4af37;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent);
}

.philo-signature {
    text-align: center !important;
    margin-top: 50px !important;
    font-style: italic !important;
    color: #888 !important;
}

/* --- NOSTALGIE™ ABOUT WORLD PAGE --- */

.about-world-container {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    background: radial-gradient(circle at top center, rgba(20,20,30,0.8), #090d16 80%);
    min-height: 80vh;
}

.about-card {
    background: rgba(15, 15, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 60px 40px;
    max-width: 800px;
    width: 100%;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    text-align: center;
    position: relative;
}

/* Dekoracyjna góra */
.about-card::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    box-shadow: 0 0 15px rgba(212,175,55,0.5);
}

.about-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #d4af37;
    margin: 0;
    letter-spacing: 5px;
    text-shadow: 0 0 20px rgba(212,175,55,0.4);
}

.about-subtitle {
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 50px;
    margin-top: 10px;
}

.about-content {
    font-family: 'Georgia', serif; /* Szeryfowy dla klimatu opowieści */
    color: #ccc;
    line-height: 1.8;
    font-size: 1.1rem;
}

.verse {
    margin-bottom: 25px;
    font-style: italic;
}

.verse.highlight {
    color: #fff;
    font-style: normal;
    font-weight: 600;
    font-size: 1.2rem;
    margin-top: 30px;
}

.verse.gold-glow {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(212,175,55,0.5);
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.verse.final-msg {
    margin-top: 50px;
    font-size: 1.3rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
    padding-bottom: 20px;
}

/* Złoty separator zamiast kresek */
.story-divider {
    height: 1px;
    width: 100px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin: 40px auto;
    opacity: 0.6;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-list li {
    color: #aaa;
    font-size: 1rem;
    letter-spacing: 1px;
}
.about-list li::before {
    content: "•";
    color: #d4af37;
    margin-right: 10px;
}

.about-action {
    margin-top: 60px;
}

/* Responsywność */
@media (max-width: 768px) {
    .about-title { font-size: 2rem; }
    .about-card { padding: 30px 20px; }
}

/* --- NOSTALGIE™ HEADER FIX --- */

/* 1. Sticky Header (Przyklejony) */
header, .navbar, .nostalgie-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: rgba(9, 13, 22, 0.95) !important; /* Mocne przyciemnienie */
    backdrop-filter: blur(15px) !important; /* Efekt szkła */
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* Złota linia */
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

/* 2. Odsunięcie treści strony od góry */
/* Żeby slider/logo nie wchodziło pod przyklejony header */
body {
    padding-top: 100px !important; 
}

/* KOREKTA: Jeśli Hero jest na górze, musi uwzględnić ten odstęp */
.home-cinematic, .simple-hero {
    margin-top: 20px !important; 
}

/* Przycisk Administratora (Widoczny i Groźny) */
.admin-alert {
    background: linear-gradient(135deg, #cc0000 0%, #800000 100%) !important;
    color: #fff !important;
    border: 1px solid #ff3333 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 5px 15px !important;
    border-radius: 4px !important;
    letter-spacing: 1px !important;
    margin-left: 15px !important;
    animation: adminPulse 2s infinite;
}

.admin-alert:hover {
    background: #ff0000 !important;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.9) !important;
    transform: scale(1.05);
}

@keyframes adminPulse {
    0% { box-shadow: 0 0 5px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 15px rgba(255,0,0,0.7); }
    100% { box-shadow: 0 0 5px rgba(255,0,0,0.3); }
}

/* --- ADMIN BUTTON RECOVERY --- */

/* Styl dla przycisku Admina - musi być widoczny na każdym tle */
.admin-neon-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #ff0000 0%, #b30000 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    padding: 8px 15px !important;
    border: 1px solid #ffaaaa !important;
    border-radius: 4px !important;
    margin-left: 15px !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7) !important;
    text-decoration: none !important;
    z-index: 10002 !important; /* Nad sticky headerem */
    position: relative !important;
    letter-spacing: 1px !important;
}

.admin-neon-btn:hover {
    background: #ff3333 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 1) !important;
    transform: translateY(-2px);
}

/* --- NOSTALGIE™ COMPACT MANIFESTO --- */

/* Motto pod tytułem */
.about-motto {
    font-size: 0.75rem !important;
    color: #aaffaa !important; /* Jasnozielony */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-top: -5px !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
    text-shadow: 0 0 10px rgba(170, 255, 170, 0.4) !important;
}

/* Karta Kompaktowa */
.about-card.compact-mode {
    max-width: 750px !important; /* Węższa */
    padding: 40px 30px !important;
}

/* Separator Złoty */
.about-separator-gold {
    width: 60px;
    height: 2px;
    background: #d4af37;
    margin: 0 auto 15px auto;
}

/* Grupowanie tekstu (Klucz do zwartości) */
.verse-group p {
    margin-bottom: 15px !important; /* Mniejszy odstęp między akapitami */
    line-height: 1.6 !important;
    color: #ccc !important;
}

.verse-group .highlight {
    color: #fff;
    font-weight: bold;
}

/* Grid dla sekcji "Kiedyś/Teraz" - oszczędza miejsce w pionie */
.verse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.grid-col {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.5;
}

.verse-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

/* Mały separator */
.story-divider-small {
    height: 1px;
    width: 40px;
    background: #d4af37;
    margin: 20px auto;
    opacity: 0.4;
}

/* Techniczna notka */
.tech-note {
    font-size: 0.9rem !important;
    color: #889 !important;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 4px;
    border-left: 2px solid #555;
}

/* Finał */
.gold-glow {
    color: #ffd700;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(212,175,55,0.4);
    display: block;
    margin-top: 10px;
}

.final-motto {
    font-style: italic;
    color: #fff;
    margin-bottom: 20px !important;
}

/* Przycisk */
.btn-compact {
    padding: 10px 30px !important;
    font-size: 0.9rem !important;
}

/* Responsywność */
@media (max-width: 600px) {
    .verse-grid { grid-template-columns: 1fr; }
}

/* --- MINI SETTINGS BUTTON (Obok Nicku) --- */
.btn-mini-pass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%; /* Okrągły przycisk */
    color: #d4af37;
    margin-left: 15px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.btn-mini-pass:hover {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transform: rotate(15deg) scale(1.1);
    color: #fff;
    border-color: #ffd700;
}

/* --- STYL STRONY ZMIANY HASŁA (Formularz) --- */
.password-card-wrap {
    max-width: 500px;
    margin: 80px auto;
}

/* --- PANEL: CHANGE PASSWORD BUTTON --- */
.btn-mini-pass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    color: #d4af37;
    margin-left: 12px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.btn-mini-pass:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
    transform: scale(1.1);
    color: #fff;
}

/* Styl dla formularza hasła */
.password-container {
    padding: 40px;
    max-width: 500px;
    margin: 60px auto;
}

/* --- FORCED VISIBILITY FIXES --- */

/* 1. Przycisk Admina w Headerze */
.admin-neon-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #ff0000 0%, #b30000 100%) !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    border: 1px solid #ff5555 !important;
    border-radius: 4px !important;
    margin-left: 20px !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5) !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    position: relative;
    z-index: 10005;
}
.admin-neon-btn:hover {
    background: #ff3333 !important;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.9) !important;
}

/* 2. Przycisk Zmiany Hasła (Kłódka) */
.btn-mini-pass {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important; 
    height: 28px !important;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 50% !important;
    color: #ffd700 !important;
    margin-left: 10px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
    cursor: pointer !important;
    vertical-align: middle !important;
}
.btn-mini-pass:hover {
    background: #d4af37 !important;
    color: #000 !important;
    transform: scale(1.1);
}

/* --- DASHBOARD COLORS FIX --- */
.n-title, .dashboard-title {
    color: #ffffff !important; /* Czysta biel dla wszystkich */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* --- PRO BADGE 3D METALIC --- */
.pro-badge-3d {
    display: inline-block;
    color: #ffffff !important;
    font-weight: 900;
    font-style: italic;
    background: linear-gradient(135deg, #333, #111);
    border: 1px solid #aaa; /* Srebrna ramka */
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 10px;
    position: relative;
    overflow: hidden;
    
    /* Efekt 3D (Statyczny) */
    box-shadow: 
        inset 1px 1px 0px rgba(255,255,255,0.3), /* Wewnętrzne światło */
        inset -1px -1px 0px rgba(0,0,0,0.8),    /* Wewnętrzny cień */
        0 4px 0 #555,                            /* Grubość 3D pod spodem */
        0 5px 10px rgba(0,0,0,0.5);              /* Cień rzucany na tło */
    
    transform: translateY(-2px); /* Lekkie uniesienie */
}

/* Animacja Połysku (Shine) */
.pro-badge-3d::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
    transform: rotate(30deg);
    animation: metalShine 6s infinite; /* Co 6 sekund błysk */
}

@keyframes metalShine {
    0% { left: -100%; }
    20% { left: 200%; } /* Szybki przejazd */
    100% { left: 200%; } /* Pauza */
}

/* --- ADMIN BUTTON FORCE VISIBILITY --- */

/* Styl dla admina w menu (jeśli zadziała) */
.nav-admin-link {
    color: #ff5555 !important;
    border: 1px solid #ff5555;
    padding: 5px 10px;
    margin-left: 15px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255,0,0,0.3);
}

/* --- CLEAN ADMIN BUTTONS (Header Fix) --- */

/* Animacja Czerwonego Oddechu */
@keyframes redBreath {
    0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); border-color: rgba(255, 0, 0, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
}

/* Przycisk Standardowy ADMIN */
.btn-header-admin {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-header-admin:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Przycisk PRO (Czerwony Oddech) */
.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 900; /* Gruby font */
    color: #ffcccc;     /* Lekko czerwonawy biały */
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(50, 0, 0, 0.3); /* Ciemnoczerwone tło */
    
    /* Podpięcie animacji */
    animation: redBreath 3s infinite ease-in-out;
}

.btn-header-pro:hover {
    background: #ff0000;
    color: #000;
    box-shadow: 0 0 30px rgba(255, 0, 0, 1);
    transform: scale(1.05);
}

/* --- RE-APPLY: ADMIN PRO STYLES --- */
@keyframes redBreath {
    0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); border-color: rgba(255, 0, 0, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
}

.btn-header-admin {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 10px;
    font-size: 0.7rem;
    font-weight: 900;
    color: #fff;
    background: rgba(100, 0, 0, 0.4);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    animation: redBreath 3s infinite ease-in-out;
}

.btn-header-pro:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1);
}

/* --- RE-APPLY: ADMIN PRO STYLES (RED BREATH) --- */
@keyframes redBreath {
    0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); border-color: rgba(255, 0, 0, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); border-color: rgba(255, 0, 0, 0.3); }
}

.btn-header-admin {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-header-admin:hover {
    color: #fff;
    border-color: #fff;
}

.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    margin-left: 10px;
    font-size: 0.7rem;
    font-weight: 900;
    color: #fff;
    background: rgba(100, 0, 0, 0.4);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    animation: redBreath 3s infinite ease-in-out;
}

.btn-header-pro:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1);
    color: #000;
}

/* --- HEADER ADMIN BUTTONS FIX --- */
.btn-header-admin {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    margin-right: 8px;
    letter-spacing: 0.5px;
}

.btn-header-admin:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}

.btn-header-pro {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    background: rgba(139, 0, 0, 0.3);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    animation: redBreath 3s infinite ease-in-out;
    letter-spacing: 0.5px;
}

.btn-header-pro:hover {
    background: #ff0000;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

/* Styl dla przycisku ADMIN (dawny PRO) */
.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff !important;
    background: rgba(100, 0, 0, 0.4);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: redBreath 3s infinite ease-in-out;
}

.btn-header-pro:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1);
    color: #000 !important;
}

/* Fix dla przycisku ADMIN */
.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff !important;
    background: rgba(100, 0, 0, 0.4);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    animation: redBreath 3s infinite ease-in-out;
    letter-spacing: 1px;
}

.btn-header-pro:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1);
    color: #000 !important;
}

/* Styl przycisku ADMIN (Red Breath) */
.btn-header-pro {
    display: inline-block;
    padding: 6px 15px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff !important;
    background: rgba(139, 0, 0, 0.4);
    border: 1px solid #ff0000;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    animation: redBreath 3s infinite ease-in-out;
    letter-spacing: 1px;
    margin-left: 10px;
}

.btn-header-pro:hover {
    background: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1);
    color: #000 !important;
}

/* Styl Linków Nawigacji */
.nav-item {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    text-transform: uppercase;
}

.nav-item:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.gold-link {
    color: #ffd700 !important;
}

.dashboard-hero{
    padding-left:25px;
}


.change-pass-link{
    color:#666;
    font-size:12px;
    text-decoration:none;
    transition:all .25s ease;
}
.change-pass-link:hover{
    color:#ff2e2e;
    text-shadow:0 0 8px rgba(255,40,40,.6);
}


/* --- PUBLIC BETA STATUS NOTE --- */
.beta-status-note {
    margin-top: 28px;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.55;
    color: #aaa;
    position: relative;
}

.beta-status-note::before {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    margin: 0 auto 12px auto;
    opacity: 0.6;
}


/* --- BETA STATUS BREATH EFFECT --- */
@keyframes betaBreath {
    0% {
        color: #9aa09a;
        text-shadow: 0 0 0px rgba(57,255,20,0);
    }
    50% {
        color: #b8ffb0;
        text-shadow: 0 0 8px rgba(57,255,20,0.4);
    }
    100% {
        color: #9aa09a;
        text-shadow: 0 0 0px rgba(57,255,20,0);
    }
}

.beta-status-note {
    animation: betaBreath 3.5s ease-in-out infinite;
}



/* ===== ADMIN PRO STATUS BORDER OVERRIDE ===== */

.status-badge {
    border-width: 2px !important;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ONLINE */
.status-badge.on {
    border: 2px solid #22c55e !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.4);
}

/* OFFLINE */
.status-badge.off {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 12px rgba(239,68,68,0.35);
}

/* BOOT / STARTING */
.status-badge.boot {
    border: 2px solid #facc15 !important;
    box-shadow: 0 0 12px rgba(250,204,21,0.4);
    animation: bootPulse 1.5s infinite;
}

@keyframes bootPulse {
    0% { box-shadow: 0 0 5px rgba(250,204,21,0.3); }
    50% { box-shadow: 0 0 18px rgba(250,204,21,0.8); }
    100% { box-shadow: 0 0 5px rgba(250,204,21,0.3); }
}



/* ===== ADMIN PRO LED SYSTEM ===== */

.led-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* OFF */
.led-off {
    background: #3f3f46;
    border-color: #52525b;
    box-shadow: none;
}

/* ONLINE */
.led-on {
    background: #22c55e;
    border-color: #16a34a;
    box-shadow: 0 0 12px rgba(34,197,94,0.8);
}

/* BOOT */
.led-boot {
    background: #facc15;
    border-color: #eab308;
    animation: ledBootPulse 1.2s infinite;
}

@keyframes ledBootPulse {
    0% { box-shadow: 0 0 5px rgba(250,204,21,0.4); }
    50% { box-shadow: 0 0 18px rgba(250,204,21,0.9); }
    100% { box-shadow: 0 0 5px rgba(250,204,21,0.4); }
}


/* ===== ADMIN PRO LED STATUS (CLEAN) ===== */

.led-on,
.led-off,
.led-boot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ONLINE - GREEN */
.led-on {
    background: #34c759;
    box-shadow: 0 0 8px #34c759, 0 0 15px rgba(52,199,89,0.6);
    border: 1px solid #34c759;
}

/* OFFLINE - RED */
.led-off {
    background: #ff3b30;
    box-shadow: 0 0 8px #ff3b30, 0 0 15px rgba(255,59,48,0.6);
    border: 1px solid #ff3b30;
}

/* BOOTING - ORANGE */
.led-boot {
    background: #ff9f0a;
    box-shadow: 0 0 8px #ff9f0a, 0 0 15px rgba(255,159,10,0.6);
    border: 1px solid #ff9f0a;
    animation: ledPulse 1s infinite alternate;
}

@keyframes ledPulse {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}


/* ===== ADMIN SERVICE FRAME SYNC ===== */

.apple-glass {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* GREEN - breathe */
.apple-glass:has(.led-on) {
    animation: ledPulse 2s infinite ease-in-out;
}

/* YELLOW - boot blink */
.apple-glass:has(.led-boot) {
    animation: ledBootPulse 1.2s infinite;
}

/* RED - static glow */
.apple-glass:has(.led-off) {
    animation: none;
    box-shadow: 0 0 20px rgba(255,59,48,0.6);
}


/* ===== ADMIN LED TUNING ===== */

/* YELLOW – wolniejsze mruganie */
.led-boot {
    animation: ledBootPulse 2s infinite !important;
}

.apple-glass:has(.led-boot) {
    animation: ledBootPulse 2s infinite !important;
}

/* GREEN – stałe mocne świecenie (bez oddychania) */
.led-on {
    animation: none !important;
    box-shadow: 0 0 18px rgba(52,199,89,0.9);
}

.apple-glass:has(.led-on) {
    animation: none !important;
    box-shadow: 0 0 28px rgba(52,199,89,0.8);
}


/* ===== FIX YELLOW LED ONLY ===== */

.led-boot {
    animation: ledBootPulse 2s infinite ease-in-out !important;
    box-shadow: 0 0 14px rgba(255,159,10,0.8) !important;
}


/* ===== CLEAN YELLOW BLINK ===== */

@keyframes adminYellowBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}

.led-indicator.led-boot {
    animation: adminYellowBlink 1.4s infinite !important;
}


/* ===== SHARP FAST YELLOW BLINK ===== */

@keyframes adminYellowBlinkSharp {
    0%   { opacity: 1; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    100% { opacity: 1; }
}

.led-indicator.led-boot {
    animation: adminYellowBlinkSharp 0.7s infinite !important;
}


/* ===== YELLOW SMOOTH BLINK x2 SPEED ===== */

@keyframes adminYellowBlinkSmooth {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}

.led-indicator.led-boot {
    animation: adminYellowBlinkSmooth 0.7s infinite ease-in-out !important;
}


/* ===== YELLOW SMOOTH BLINK EVEN FASTER ===== */

.led-indicator.led-boot {
    animation: adminYellowBlinkSmooth 0.45s infinite ease-in-out !important;
}


/* ===== PREMIUM STATUS FRAME ===== */

.status-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 130px;      /* stała szerokość */
    height: 34px;

    padding: 0 16px;
    border-radius: 999px;

    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

/* delikatny premium glow przy zielonym */
.status-frame:has(.led-on) {
    border-color: rgba(52,199,89,0.5);
    box-shadow: 0 0 18px rgba(52,199,89,0.25);
}

/* przy żółtym subtelny amber glow */
.status-frame:has(.led-boot) {
    border-color: rgba(255,159,10,0.6);
    box-shadow: 0 0 18px rgba(255,159,10,0.25);
}

/* przy czerwonym elegancki czerwony */
.status-frame:has(.led-off) {
    border-color: rgba(255,59,48,0.6);
    box-shadow: 0 0 18px rgba(255,59,48,0.25);
}



/* =========================================
}



/* =========================================
   COMMUNITY – ENGRAVED GOLD PLATES
========================================= */

.community-section {
    margin-top: 40px;
}

.community-buttons {
    display: flex;
    justify-content: center;
    gap: 22px;
}

/* metalowa płytka */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;
    min-height: 44px;

    background: linear-gradient(
        160deg,
        #1f232b 0%,
        #14181f 50%,
        #0f1217 100%
    );

    border-radius: 10px;
    border: 1px solid rgba(212,175,55,0.7);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.05),
        inset 0 -3px 6px rgba(0,0,0,0.6),
        0 6px 14px rgba(0,0,0,0.7);

    color: #d4af37;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;

    transition: all 0.25s ease;
}

/* grawerowane logo */
.cta-btn i {
    font-size: 16px;

    background: linear-gradient(
        145deg,
        #fff6cc 0%,
        #e6c76b 35%,
        #b8902a 55%,
        #8a6a15 75%,
        #f1d77a 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 1px 1px rgba(0,0,0,0.7),
        0 0 4px rgba(212,175,55,0.25);
}

/* grawerowany napis */
.cta-btn span {
    background: linear-gradient(
        145deg,
        #f7e6a3,
        #caa43c,
        #8a6a15
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 1px 1px rgba(0,0,0,0.6);
}

/* MOCNIEJSZY HOVER */
.cta-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -4px 8px rgba(0,0,0,0.8),
        0 10px 22px rgba(0,0,0,0.9),
        0 0 18px rgba(212,175,55,0.45);

    border-color: #f1d07a;
}

/* subtelny złoty glow przy hover */
.cta-btn:hover i,
.cta-btn:hover span {
    text-shadow:
        0 0 8px rgba(212,175,55,0.5),
        0 1px 1px rgba(0,0,0,0.7);
}