/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap');

/* --- Zmienne Kolorów dla GastroŁyk --- */
:root {
    --gastro-primary: #34495E; /* Głęboki Grafitowo-Niebieski */
    --gastro-accent: #E74C3C; /* Soczysty Koral */
    --gastro-bg-light: #ECF0F1; /* Bardzo jasne tło */
    --gastro-bg-panel: #FFFFFF; /* Tło paneli (np. popupy, karty) */
    --gastro-text-dark: #2C3E50; /* Ciemny tekst */
    --gastro-text-medium: #95A5A6; /* Średni szary tekst */
    --gastro-text-light: #ECF0F1; /* Bardzo jasny tekst (na ciemnym tle) */
    --gastro-success: #2ECC71;
    --gastro-danger: #E74C3C;
    --gastro-font-heading: 'Montserrat', sans-serif;
    --gastro-font-body: 'Roboto', sans-serif;
    --gastro-border-radius: 8px;
}

/* --- Globalne style body i reset --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Kontrolujemy overflow na poziomie .page */
}

#map {
    position: absolute; /* Użyjemy absolute, żeby mapa wypełniła całą przestrzeń rodzica */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Domyślne height: 500px w Map.razor powinno zostać USUNIĘTE! */
}

body {
    font-family: var(--gastro-font-body);
    color: var(--gastro-text-dark);
    background-color: #000;
    height: 100vh;
    overflow: hidden; /* Zapobiega globalnemu scrollowaniu */
}

/* Przesuwa przyciski +/- mapy w dół, żeby nie właziły na wiszące kapsuły surowców */
.leaflet-top {
    top: 95px !important;
}

/* Opcjonalnie: ukrywa to małe białe logo "Leaflet" w prawym dolnym rogu */
.leaflet-control-attribution {
    display: none !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gastro-font-heading);
    font-weight: 600;
    color: var(--gastro-text-dark);
}

/* --- Globalne style dla przycisków --- */
.btn {
    border-radius: var(--gastro-border-radius);
    font-weight: 500;
    font-family: var(--gastro-font-heading);
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--gastro-primary);
    border-color: var(--gastro-primary);
    color: white;
}

.btn-warning {
    background-color: var(--gastro-accent);
    border-color: var(--gastro-accent);
    color: white;
}

.btn-outline-light {
    color: white;
    border-color: rgba(255,255,255,0.5);
}

    .btn-outline-light:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
        border-color: white;
    }


.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.form-control:focus,
 .form-select:focus {
     border-color: var(--gastro-primary);
     box-shadow: 0 0 0 0.25rem rgba(52, 73, 94, 0.25);
    
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxwYXRoIGQ9Im0yOC41NDEgMjEuNzA5YTIuNzk4IDIuNzk4IDAgMCAxLTMuNjg0IDQuMDU5bC0xOS4zNzEtMTIuNTcyYTIuNzk4IDIuNzk4IDAgMCAxIDEuNDgyLTYuMTI3bDE5LjM3MSAxMi41NzJ6TTI4LjU0MSAyMS43MDliYTIuNzk4IDIuNzk4IDAgMCAxLTUuNDk5LTIuMTMzbDE5LjM3MS0xMi41NzJhMi43OTggMi43OTggMCAwIDEgMy4xNDIgNS40MTlMMjguNTQxIDIxLjcwOXpNMjcuNzE1IDI5LjcwNGExLjcxNyAxLjcxNyAwIDAgMS0yLjQyOSAwbC0xMi41NzItMTkuMzcxYTEuNzE3IDEuNzE3IDAgMCAxIDIuNDI5LTIuNDI5bDEyLjU3MiAxOS4zNzF6TTI4LjU0MSAyMS43MDlBMS43MTcgMS43MTcgMCAwIDEgMjUuMjM4IDI0LjlpLTIuNDI5LTIuNDI5YTEuNzE3IDEuNzE3IDAgMCAxIDIuNDI5LTIuNDI5bDIuNDI5IDIuNDI5aC0yLjQyOXoiIGlkPSJkZWZzMCIgLz48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgZmlsbD0iI0Q5NjgyMiIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMjguNTQxIDIxLjcwOUwzMS42NTIgMTAuOTU0IDE0Ljk4NiA1LjE1M2wyLjM4MyA5LjI1NHYtLjAyNGwyLjM4MyA5LjI1NEwyOC41NDEgMjEuNzA5eiIgZmlsbD0iI0M0NzkzMyIgLz48cGF0aCBkPSJNMjcuNzE1IDI5LjcwNEwzMS42NTIgMTAuOTU0IDE0Ljk4NiA1LjE1M2wtMi4zODMgOS4yNTRWMTAuOTVMMjUuMjM4IDI0LjkiIGZpbGw9IiNDQTQ1MjUiIC8+PHBhdGggZmlsbD0iI0JGNDcyMyIgZD0iTTE0Ljk4NiA1LjE1M2wxMi41NzIgMTkuNTUxbC0yLjM4My05LjI1NHYtLjAyNEwxNC45ODYgNS4xNTN6IiAvPjxwYXRoIGQ9Ik0xNC45ODYgNS4xNTNMMjUuMjM4IDI0LjlsLTIuMzg0LTYuMTI3TDE0Ljk4NiA1LjE1M3oiIGZpbGw9IiNCQTQyMkYiIC8+PHBhdGggZmlsbD0iI0ExMzgyMyIgZD0iTTEyLjYwMyAxNC4zOUwxNC45ODYgNS4xNTNsMi4zODQgOS4yNTQsMy43NjIgMTAuOTU0TDIuOTU4IDIxLjcwOUwyOC41NDEgMjEuNzA5bC0yLjM4NC05LjI1NHYtLjAyNEwxMi42MDMgMTQuMzl6IiAvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
    animation: pulse 1.5s infinite ease-in-out;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
 
    }

        .loading-progress circle:last-child {
            stroke: var(--gastro-primary);
            stroke-dasharray: calc(3.14159 * 2 * 40%);
            stroke-dashoffset: 0;
            animation: loading-progress 1s linear infinite;
        }

.loading-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.5rem;
    stroke: var(--gastro-primary);
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes loading-progress {
    0% {
        stroke-dashoffset: calc(3.14159 * 2 * 40%);
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* --- NeonFights SPECIFIC OVERRIDES --- */

 /* Ostateczna poprawka dla linków w NavMenu - wyższa specyficzność */
 .sidebar .nav-item a.nav-link {
     color: var(--gastro-text-light) !important;
    
}


 .sidebar .nav-item a.nav-link:hover {
     color: white !important;
    
}


 .sidebar .nav-item a.nav-link.active {
   color: white !important;
    
}


/* Ostateczna poprawka dla linków w BottomNav - wyższa specyficzność */
 .bottom-nav a.nav-item {
     color: rgba(255, 255, 255, 0.7) !important;
     text-decoration: none !important;
    
}


 .bottom-nav a.nav-item.active {
     color: white !important;
    
}


.loading-progress-text::before {
    content: "Ładowanie..."; /* Używamy kodu CSS dla litery "Ł" */
}

/* --- FORM STYLES --- */
 .styled-link {
     color: var(--gastro-primary);
     text-decoration: none;
     font-weight: 500;
    
}

/* PWA/wwwroot/css/app.css - dodaj na końcu pliku */

   
    /* Lepszy styl dla klastrów na mapie - Wersja 2.2 (Ujednolicona paleta niebieska) */
#map .marker-cluster-small {
    background-color: rgba(52, 73, 94, 0.6); /* Kolor --gastro-primary z przezroczystością */
}

    #map .marker-cluster-small div {
        background-color: rgba(52, 73, 94, 0.9);
    }

#map .marker-cluster-medium {
    background-color: rgba(44, 62, 80, 0.6); /* Ciemniejszy odcień --gastro-primary */
}

    #map .marker-cluster-medium div {
        background-color: rgba(44, 62, 80, 0.9);
    }

#map .marker-cluster-large {
    background-color: rgba(30, 40, 50, 0.6); /* Jeszcze ciemniejszy odcień */
}

    #map .marker-cluster-large div {
        background-color: rgba(30, 40, 50, 0.9);
    }

/* Wspólne style dla wszystkich klastrów (bez zmian) */
#map .marker-cluster {
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    color: white;
    font-weight: bold;
    text-align: center;
}

    #map .marker-cluster div {
        width: 30px;
        height: 30px;
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 50%;
        font-size: 12px;
        line-height: 30px;
    }

/* Nowe, responsywne style dla panelu podglądu v2 */
.place-preview-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50vh;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.place-preview-panel.visible {
    transform: translateY(0);
}

.place-preview-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

    .place-preview-panel .panel-header h5 {
        margin: 0;
        font-size: 1.1rem;
    }

.place-preview-panel .panel-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1; /* Pozwala zawartości rosnąć */
}

.place-preview-panel .panel-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
    flex-shrink: 0; /* Stopka się nie kurczy */
}

/* Style dla dużych ekranów (komputer) - wysuwany z lewej */
@media (min-width: 768px) {
    .place-preview-panel {
        top: 0;
        left: 0;
        width: 380px;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border-right: 1px solid #ddd;
        transform: translateX(-100%);
    }

        .place-preview-panel.visible {
            transform: translateX(0);
        }
}

.place-preview-panel .panel-section {
    margin-bottom: 1.25rem;
}

    .place-preview-panel .panel-section h6 {
        font-weight: bold;
        color: #6c757d;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

/* Style dla panelu filtrów i jego tła */
.filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    transform: translateX(100%); /* Domyślnie schowany po prawej */
    transition: transform 0.3s ease-in-out;
    z-index: 1040; /* Ważne, żeby był na wierzchu */
    display: flex;
    flex-direction: column;
}

    .filter-panel.visible {
        transform: translateX(0); /* Wsuwa się, gdy ma klasę .visible */
    }

.filter-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1039; /* Tuż pod panelem */
    pointer-events: none; /* Domyślnie nieklikalne */
}

    .filter-panel-overlay.visible {
        opacity: 1;
        pointer-events: auto; /* Staje się klikalne, aby zamknąć panel */
    }

.filter-panel .filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

    .filter-panel .filter-panel-header h4 {
        margin: 0;
    }

.filter-panel .filter-panel-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}


/* --- NOWE, KOMPLEKSOWE STYLE DLA DYMKÓW NA MAPIE --- */

/* --- NOWE, KOMPLEKSOWE STYLE DLA DYMKÓW NA MAPIE v2 --- */

.price-badge-marker {
    position: relative; /* Kontener dla dymka i kropki */
    width: 0;
    height: 0;
}

    .price-badge-marker .location-dot {
        /* To jest nasza kropka - precyzyjny wskaźnik */
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
        /* Pozycjonowanie kropki względem punktu na mapie */
        position: absolute;
        left: -6px; /* Przesunięcie o połowę szerokości w lewo */
        top: -6px; /* Przesunięcie o połowę wysokości w górę */
    }

    .price-badge-marker .price-badge {
        /* To jest nasz dymek z informacjami */
        position: absolute;
        bottom: 12px; /* Unosimy go nad kropkę */
        left: 50%;
        transform: translateX(-50%); /* centrujemy go horyzontalnie */
        display: flex;
        align-items: flex-start;
        background-color: var(--gastro-bg-panel) !important;
        border: 1px solid #a9a9a9;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        padding: 8px;
        min-width: 200px;
        white-space: nowrap;
    }

        /* "Ogonek" dymka wskazujący na kropkę */
        .price-badge-marker .price-badge::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid white;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
        }

        .price-badge-marker .price-badge.closing-soon::after {
            border-top-color: #fffbe6;
        }

        .price-badge-marker .price-badge.closing-very-soon::after {
            border-top-color: #fff5f5;
        }

    /* Style wewnętrznych elementów dymka (pozostają głównie bez zmian) */
    .price-badge-marker .badge-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .price-badge-marker .badge-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .price-badge-marker .badge-products {
        width: 100%;
    }

    .price-badge-marker .badge-product-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .price-badge-marker .badge-product-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

        .price-badge-marker .badge-product-item:last-child {
            border-bottom: none;
        }

    .price-badge-marker .product-name {
        color: #374151; /* Gray-700 */
        font-weight: 450;
        font-size: 12.5px;
        letter-spacing: -0.01em;
        flex: 1;
    }

    .price-badge-marker .product-price {
        color: #111827; /* Gray-900 */
        font-weight: 600;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
        margin-left: 12px;
    }

  

    .price-badge-marker .badge-rating {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid #eee;
        width: 100%;
        font-size: 13px;
        color: #6c757d;
    }

    .price-badge-marker .badge-star {
        color: #ffc107;
        font-size: 16px;
        margin-right: 3px;
    }

    .price-badge-marker .rating-value {
        font-weight: bold;
        color: #495057;
        margin-right: 5px;
    }
.page {
    /* Zakładając, że to jest kontener, w którym jest Map.razor */
    position: relative;
    height: 100%; /* Ważne, by rozciągnąć go na całą wysokość widoku */
    display: flex;
    flex-direction: column;
}

.map-controls {
    position: fixed; /* Pozycja stała */
    top: 10px;
    left: 10px; /* Przypięcie do lewej krawędzi */
    right: 10px; /* Przypięcie do prawej krawędzi */

    z-index: 1050;
    display: flex;
    justify-content: space-between; /* To rozrzuci Dzwonek i Filtry na boki */
    align-items: center;
    background-color: rgba(200, 200, 200, 0.9); /* Szare tło */
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    /* Dodatkowy styl dla kontenerów wewnątrz .map-controls (zakładam, że filtry i dzwonek są w osobnych kontenerach) */
    .map-controls > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.search-bar-container {
    position: relative;
    flex-grow: 1;
}

.suggestion-box {
    position: absolute;
    width: 100%;
    margin-top: 2px;
    max-height: 300px;
    overflow-y: auto;
}

.locate-btn {
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.bi-crosshair {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-crosshair' viewBox='0 0 16 16'%3e%3cpath d='M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018V.5Zm-6.48 7A6 6 0 0 1 7.5 2.02v5.48a.5.5 0 0 0 1 0V2.02a6 6 0 0 1 5.48 5.48h-5.48a.5.5 0 0 0 0 1h5.48A6 6 0 0 1 8.5 13.98v-5.48a.5.5 0 0 0-1 0v5.48A6 6 0 0 1 2.02 8.5h5.48a.5.5 0 0 0 0-1H2.02Z'/%3e%3c/svg%3e");
    width: 1.2em;
    height: 1.2em;
}

/* --- Style dla markera lokalizacji użytkownika --- */
.user-location-marker .pulsating-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0d6efd;
    border: 3px solid #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* --- Style dla markera wyniku wyszukiwania --- */
.search-result-marker .pulsating-dot-search {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #198754; /* Kolor zielony (success) */
    border: 3px solid #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    animation: pulse-search 1.5s infinite;
}

@keyframes pulse-search {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 12px rgba(25, 135, 84, 0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

/* Style dla dymków "Wkrótce zamykane" */
.price-badge.closing-soon {
    background-color: #fffbe6; /* Jasnożółte tło */
    border-color: #ffc107; /* Żółta ramka */
}

.price-badge.closing-very-soon {
    background-color: #fff5f5; /* Jasnoczerwone tło */
    border-color: #dc3545; /* Czerwona ramka */
}

/* Style dla tekstu ostrzeżenia w dymku */
.badge-status-warning {
    font-size: 10px;
    font-weight: bold;
    color: #856404; /* Ciemnożółty */
    margin-top: 4px;
    text-align: center;
}

.badge-status-danger {
    font-size: 10px;
    font-weight: bold;
    color: #721c24; /* Ciemnoczerwony */
    margin-top: 4px;
    text-align: center;
}

.delivery-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.form-check-label .filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: text-bottom;
}

/* --- NOWE STYLE DLA UJEDNOLICONYCH ZNACZNIKÓW --- */

/* Kropka lokalizacyjna - baza dla wszystkich znaczników */
.location-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Prosty znacznik (tylko kropka) */
.simple-marker .location-dot {
    position: absolute;
    left: -6px;
    top: -6px;
}

/* Znacznik ładowania (kręcące się kółko wokół kropki) */
.loading-marker .location-dot::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Znacznik kategorii (ikona nad kropką) */
.category-marker {
    position: relative;
}

    .category-marker .category-icon-wrapper {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 32px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid;
    }

    .category-marker .category-icon {
        width: 22px;
        height: 22px;
    }

    .category-marker .location-dot {
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }

/* Znacznik z dymkiem (dymek nad kropką) */
.price-badge-marker .price-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #a9a9a9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    padding: 8px;
    min-width: 200px;
    white-space: nowrap;
}

    .price-badge-marker .price-badge::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid white;
    }

.price-badge-marker .badge-content {
    /* style dla zawartości dymka */
}

.price-badge-marker .badge-product-item {
    display: flex;
    justify-content: space-between;
}

.price-badge-marker .product-name {
    font-size: 13px;
    margin-right: 15px;
}

.price-badge-marker .product-price {
    font-weight: bold;
    font-size: 13px;
}

.price-badge-marker .location-dot {
    position: absolute;
    left: -6px;
    top: -6px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* --- OSTATECZNE STYLE DYMKÓW (v6) --- */

.gastro-popup-marker {
    position: relative;
    width: 24px;
    height: 24px;
}

    .gastro-popup-marker .location-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        z-index: 10;
    }

    .gastro-popup-marker .gastro-popup {
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        width: 240px;
        background-color: var(--gastro-bg-panel);
        border: 1px solid #e0e0e0;
        border-radius: var(--gastro-border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-family: var(--gastro-font-body);
        cursor: pointer;
    }

        .gastro-popup-marker .gastro-popup::after,
        .gastro-popup-marker .gastro-popup::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

        .gastro-popup-marker .gastro-popup::after {
            border-top: 10px solid white;
            z-index: 1;
        }

        .gastro-popup-marker .gastro-popup::before {
            border-top: 11px solid #e0e0e0;
            margin-top: -1px;
        }

.gastro-popup .popup-header {
    background-color: var(--gastro-bg-panel);
    padding: 8px 12px;
    border-bottom: 1px solid var(--gastro-bg-light);
}

.gastro-popup .popup-title {
    display: flex;
    align-items: center;
}

.gastro-popup .popup-category-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
}

.gastro-popup .popup-title-text {
    font-family: var(--gastro-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gastro-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gastro-popup .popup-header-rating {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--gastro-text-medium);
    margin-top: 6px;
}

.gastro-popup .star-icon {
    color: #ffc107;
    font-size: 0.9rem;
    margin-right: 1px;
}

.gastro-popup .rating-value {
    font-weight: bold;
    color: var(--gastro-text-dark);
    margin-left: 8px;
    margin-right: 4px;
}

.gastro-popup .no-rating {
    font-style: italic;
    font-size: 0.8rem;
}


.gastro-popup .popup-content {
    padding: 8px 12px;
}

.gastro-popup .popup-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 4px 0;
    border-bottom: 1px solid var(--gastro-bg-light);
}

    .gastro-popup .popup-product-item:last-child {
        border-bottom: none;
    }


.gastro-popup .product-name {
    color: var(--gastro-text-dark);
    flex-grow: 1;
}

.gastro-popup .product-price {
    color: var(--gastro-text-dark);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 1rem;
}

.gastro-popup .popup-status {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 4px;
    margin-top: 8px;
    border-radius: 4px;
}

.gastro-popup .popup-status-warning {
    color: #664d03;
    background-color: #fff3cd;
}

.gastro-popup .popup-status-danger {
    color: #842029;
    background-color: #f8d7da;
}

.gastro-popup .popup-footer {
    padding: 8px;
    border-top: 1px solid var(--gastro-bg-light);
    background-color: #f8f9fa;
    border-bottom-left-radius: calc(var(--gastro-border-radius) - 1px);
    border-bottom-right-radius: calc(var(--gastro-border-radius) - 1px);
}

.gastro-popup .popup-details-btn {
    width: 100%;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background-color: var(--gastro-primary);
    border-radius: 6px;
    text-align: center;
    transition: background-color 0.2s ease;
}

.gastro-popup:hover .popup-details-btn {
    background-color: #2c3e50;
}

/* Style dla znaczników na szlaku */
/* Poprawione style dla ikony przystanku */
.trail-stop-icon {
    position: relative; /* Konieczne do pozycjonowania absolutnego elementu wewnątrz */
    background-color: var(--gastro-primary);
    color: white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-size: 14px;
}

    .trail-stop-icon span {
        position: absolute;
        top: 50%;
        left: 50%;
        /* Ta kombinacja transformacji idealnie centruje obrócony element */
        transform: translate(-50%, -50%);
        font-weight: bold;
        line-height: 1; /* Zapobiega problemom z wysokością linii tekstu */
    }

/* Nowe, ulepszone style dla przycisku wyjścia */
.exit-trail-button {
    background-color: var(--gastro-accent) !important; /* Używamy koloru akcentu, !important nadpisuje styl .btn-map-overlay */
    color: white !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
}

    .exit-trail-button:hover {
        background-color: #c82333 !important; /* Ciemniejszy odcień akcentu */
    }





    /* AIM */

.aim-game-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

    .aim-game-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

.aim-game-container {
    background-color: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.game-area-wrapper {
    position: relative;
    padding: 1rem;
}

.game-score, .game-timer {
    position: absolute;
    top: -0.5rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: white;
}

.game-score {
    left: 0;
    background-color: var(--gastro-primary);
}

.game-timer {
    right: 0;
    background-color: var(--gastro-accent);
}

.game-board {
    width: 300px;
    height: 300px;
    margin: 2rem auto 0;
    border: 5px solid #34495E;
    border-radius: 50%;
    position: relative;
    background-color: #ecf0f1;
    overflow: hidden; /* Ikony nie będą wychodzić poza planszę */
}

.target-zone-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 3px dashed var(--gastro-accent);
    border-radius: 50%;
    transition: transform 0.1s ease;
}

.game-board:active .target-zone-center {
    transform: translate(-50%, -50%) scale(0.9);
}

.game-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 1.5s cubic-bezier(0.5, 0, 1, 1);
    transform: translate(-50%, -50%);
}

    .game-icon.hit {
        animation: hit-animation 0.3s ease-out forwards;
    }

@keyframes hit-animation {
    0% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* --- Lepsza Walidacja Formularzy w Blazor --- */
/* Ta reguła ukrywa domyślne, agresywne podświetlanie błędów przez przeglądarkę. */
.form-control:invalid,
.form-select:invalid {
    box-shadow: none;
}

/* A te reguły pokazują nasze niestandardowe, czerwone podświetlenie
   TYLKO WTEDY, gdy pole ma klasę .modified (dodaną przez Blazor po interakcji)
   I JEDNOCZEŚNIE ma status :invalid. */

.form-control.modified:invalid,
.form-select.modified:invalid {
    border-color: #dc3545; /* Czerwony kolor błędu z Bootstrapa */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Czerwona poświata */
}

/* Styl dla "odznaki" wydarzenia na ikonce kategorii */
.marker-event-badge {
    position: absolute;
    top: -10px; /* ZMIANA: Lekko wyżej */
    right: -10px; /* ZMIANA: Lekko w prawo */
    width: 22px; /* ZMIANA: Większy rozmiar */
    height: 22px; /* ZMIANA: Większy rozmiar */
    background-color: var(--gastro-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* ZMIANA: Większa ikonka */
    line-height: 1;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Upewniamy się, że wrapper ikony jest spozycjonowany */
.category-icon-wrapper {
    position: relative;
}


/* Resetuje domyślny niebieski kolor linku dla niestandardowych komponentów */
.card-link {
    color: inherit; /* Dziedziczy kolor tekstu z rodzica */
    text-decoration: none; /* Usuwa podkreślenie */
}

    .card-link:hover {
        color: inherit; /* Zapobiega zmianie koloru po najechaniu */
    }

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1040; /* Niżej niż modal, ale wyżej niż reszta strony */
}

.comment-item.helpful-answer > .comment-layout > .comment-main-content > .comment-frame {
    background-color: #e6f7ec;
    border-left: 3px solid #28a745;
}

.action-button.helpful-button {
    color: #28a745; /* Zielony kolor dla przycisku "Pomógł" */
}

.helpful-badge {
    font-size: 0.85rem;
    font-weight: 500;
    color: #218838; /* Ciemniejszy zielony, pasujący do ramki */
    margin-bottom: 8px;
    padding: 4px 0;
}

    .helpful-badge .fas {
        margin-right: 5px;
    }

.question-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d6efd;
    /* Usuwamy 'margin-left', bo jest już nad nickiem */
    /* Usuwamy 'padding' i 'background-color', aby był czystszy */
}

    .question-badge .fas {
        margin-right: 3px;
        font-size: 0.7rem;
    }

.upcoming-events-widget {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px 12px;
    max-width: 300px;
    max-height: 150px; /* Ogranicz wysokość */
    overflow-y: auto; /* Dodaj scroll, jeśli jest za dużo */
}

    .upcoming-events-widget h5 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .upcoming-events-widget .list-unstyled li {
        font-size: 0.9rem;
        line-height: 1.3;
    }

/* --- Nowy Panel Wydarzeń (Modal) --- */
/* Pojedynczy klikalny element listy */
.event-item {
    /* Rozwiązanie problemu nr 1: Dodajemy więcej pionowego odstępu i wyraźniejszą linię */
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #eee; /* Trochę ciemniejszy separator */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .event-item:last-child {
        border-bottom: none;
    }

    .event-item:hover {
        background-color: #f8f9fa;
    }

.event-item-title {
    font-size: 1.05rem; /* Trochę większy tekst */
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem; /* Większy odstęp pod tytułem */
}

/* Kontener na szczegóły (lokalizacja, data) */
.event-item-details {
    display: flex;
    flex-direction: column; /* Ustawiamy pionowo! */
    gap: 0.35rem; /* Mały odstęp MIĘDZY adresem a datą */
    font-size: 0.9rem;
    color: #495057;
}

/* Pojedynczy element szczegółów (ikona + tekst) */
.event-detail-item {
    display: flex;
    align-items: center;
}

    .event-detail-item .bi {
        font-size: 0.9rem;
        color: #6c757d; /* text-muted */
        /* Wyrównujemy ikony i tekst: */
        width: 24px;
        text-align: center;
        flex-shrink: 0; /* Zapobiegaj kurczeniu się ikony */
        /* Odstęp między ikoną a jej tekstem */
        margin-right: 0.4rem;
    }

.events-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1040; /* Poniżej modala, powyżej reszty */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.events-modal {
    position: fixed;
    z-index: 1051; /* Na samym wierzchu */
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.events-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.events-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.1rem;
}

.events-modal-content {
    padding: 1rem;
    overflow-y: auto;
}

/* === STYLIZACJA MOBILNA (Domyślna: szuflada z dołu) === */
@media (max-width: 767.98px) {
    .events-modal {
        left: 0;
        right: 0;
        bottom: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        max-height: 60vh; /* Maksymalnie 60% ekranu */
        transform: translateY(100%); /* Domyślnie schowany */
    }

        .events-modal.is-open {
            transform: translateY(0);
        }

    .events-modal-content {
        max-height: calc(60vh - 70px); /* Wysokość panelu - header */
    }

    /* Pokaż tło na mobilu */
    .events-modal.is-open + .events-modal-backdrop,
    .events-modal-backdrop.is-open { /* Dodałem .is-open na backdropie na wszelki wypadek */
        opacity: 1;
        pointer-events: auto;
    }
}

/* === STYLIZACJA DESKTOP (Panel z prawej) === */
@media (min-width: 768px) {
    .events-modal {
        top: 0;
        right: 0;
        bottom: 0;
        width: 400px; /* Szerokość jak panel filtrów */
        border-left: 1px solid #dee2e6;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transform: translateX(100%); /* Domyślnie schowany */
    }

        .events-modal.is-open {
            transform: translateX(0);
        }

    .events-modal-content {
        max-height: calc(100vh - 70px); /* Cała wysokość - header */
    }

    .events-modal-backdrop {
        background-color: transparent; /* <-- PRZYWRÓCONE */
    }

        /* Musimy też dodać regułę 'is-open' dla desktopu */
        .events-modal-backdrop.is-open {
            pointer-events: auto; /* <-- DODANE */
        }
}

/* Klasa bazowa (usuwa domyślne tło Leaflet) */
.event-marker-icon {
    border: none !important;
    background: transparent !important;
}

/* Właściwy styl naszego kółka */
.event-marker-circle {
    color: white; /* Kolor ikony biletu w środku */
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Rozmiar ikony biletu */
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Klasa bazowa (usuwa domyślne tło Leaflet) */
.event-cluster-icon {
    background: transparent !important;
    border: none !important;
}

/* Właściwy styl naszego kółka klastra */
.event-cluster-marker {
    width: 40px;
    height: 40px;
    /* Używamy Twojego koloru akcentu z przezroczystością */
    background-color: rgba(231, 76, 60, 0.8);
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.filter-panel-wrapper.ranking-mode {
    position: fixed !important; /* Wymuszenie */
    bottom: -100vh;
    left: 0;
    width: 100%;
    height: 75vh;
    background: white;
    z-index: 99999 !important; /* Musi być wyższy niż cokolwiek innego */
    transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-top: 4px solid #ff5722;
    box-shadow: 0 -15px 35px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    visibility: hidden; /* Ukryty, gdy nieaktywny */
}

    .filter-panel-wrapper.ranking-mode.is-open {
        bottom: 0 !important;
        visibility: visible;
    }

.filter-panel-wrapper-floating-btn {
    position: fixed;
    bottom: 80px; /* Nad dolnym menu */
    right: 20px;
    z-index: 1000;
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.filter-panel-wrapper-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.rank-number {
    font-weight: bold;
    width: 30px;
    color: #ff5722;
}

.rank-info {
    flex-grow: 1;
}

.rank-price {
    font-weight: bold;
    color: #28a745;
    font-size: 1.1rem;
}


/* ==========================================
   RESPONSYWNOŚĆ — NEONFIGHTS
   ========================================== */

/* Małe telefony (do 380px) */
@media (max-width: 380px) {
    .cyber-resource-bar {
        gap: 4px !important;
        padding: 0 4px !important;
        font-size: 0.7rem !important;
    }
    .cyber-resource-bar span {
        font-size: 0.65rem !important;
    }
    .command-panel {
        bottom: 10px !important;
        left: 5px !important;
        right: 5px !important;
    }
}

/* Telefony (do 576px) */
@media (max-width: 576px) {
    .cyber-resource-bar {
        height: 40px !important;
        gap: 6px !important;
    }
    .cyber-resource-bar span {
        font-size: 0.7rem !important;
    }
    /* Avatar mniejszy na mobile */
    .cyber-resource-bar > div:first-child {
        width: 44px !important;
        height: 44px !important;
    }
    /* Overlaye na pełną szerokość */
    [style*="max-width: 500px"] {
        max-width: 100% !important;
        padding: 10px !important;
    }
    /* Dolny panel */
    .command-panel {
        max-height: 40vh !important;
        border-radius: 10px !important;
    }
    /* Grid budynków — 2 kolumny na małych ekranach */
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Tablety (576-768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .cyber-resource-bar {
        height: 42px !important;
    }
}

/* Landscape na telefonie */
@media (max-height: 500px) and (orientation: landscape) {
    .command-panel {
        max-height: 35vh !important;
    }
    .cyber-resource-bar {
        height: 36px !important;
    }
}

/* ==========================================
   ANIMACJE — NEONFIGHTS
   ========================================== */

/* Smooth fade-in dla overlayów */
[style*="position: fixed"][style*="inset: 0"] {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pulse na czerwonych kropkach (powiadomienia) */
[style*="background: #ff0055"][style*="border-radius: 50%"] {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Smooth slide-up dla dolnego panelu */
.command-panel {
    transition: max-height 0.3s ease, transform 0.2s ease;
}

/* Progress bar smooth */
.progress-bar {
    transition: width 1s linear !important;
}

/* Hover na przyciskach (desktop) */
@media (hover: hover) {
    .btn:hover {
        transform: translateY(-1px);
        transition: transform 0.15s ease;
    }
    .btn:active {
        transform: translateY(0);
    }
}

/* Toast notification slide-in */
[style*="position-fixed bottom-0 start-50"] {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Glow effect na neonowych elementach */
@keyframes neonGlow {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 15px currentColor, 0 0 30px currentColor; }
}

/* Badge counter bounce */
.badge.bg-danger {
    animation: badgeBounce 0.5s ease;
}

@keyframes badgeBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ===================================================
   CYBERPUNK MAP & HUD TRANSFORMATION (NEONFIGHTS)
   =================================================== */

/* Ciemne kafelki mapy - kontrast i klimat sci-fi (100% free OSM bez API keys) */
.leaflet-container {
    background-color: #050b14 !important;
}

.leaflet-tile-pane {
    transition: filter 0.8s ease;
    filter: invert(100%) hue-rotate(180deg) brightness(88%) contrast(115%) saturate(0.45);
}

/* Marker pozycji gracza - Cyber Crosshair & Ping */
.cyber-user-wrapper {
    background: transparent !important;
    border: none !important;
}

.cyber-user-marker {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-user-ping {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #00f0ff;
    animation: cyberPing 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    pointer-events: none;
}

.cyber-user-ring {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 240, 255, 0.8);
    animation: cyberRotate 8s linear infinite;
}

.cyber-user-core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
    border: 2px solid #ffffff;
}

@keyframes cyberPing {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes cyberRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Okrąg radaru */
.cyber-radar-pulse {
    stroke-dasharray: 8 6;
    animation: radarDash 20s linear infinite;
}

@keyframes radarDash {
    to { stroke-dashoffset: -100; }
}

/* Znaczniki Skrzynek (Kontenerów) na mapie */
.cyber-chest-marker {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.cyber-chest-marker:hover {
    transform: scale(1.22);
}

.cyber-chest-common {
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7));
}

.cyber-chest-rare {
    filter: drop-shadow(0 0 10px rgba(255, 0, 85, 0.8));
}

.cyber-chest-epic {
    filter: drop-shadow(0 0 12px rgba(255, 170, 0, 0.9));
}

.cyber-chest-legendary {
    filter: drop-shadow(0 0 14px rgba(176, 38, 255, 0.95));
}

/* Znaczniki Kryjówek (Hideouts) */
.cyber-hideout-wrapper {
    background: transparent !important;
    border: none !important;
}

.cyber-hideout-marker {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cyber-hideout-marker:hover {
    transform: scale(1.18);
}

.cyber-skull-pulse {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 85, 0.4) 0%, rgba(255, 0, 85, 0) 70%);
    animation: skullPulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

.cyber-skull-icon {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 0 8px #ff0055) drop-shadow(0 0 15px #ff0055);
    z-index: 2;
}

.cyber-skull-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 0, 85, 0.9)) drop-shadow(0 0 16px rgba(255, 0, 85, 0.6));
    z-index: 2;
    transition: transform 0.2s ease;
}

.cyber-hideout-lvl {
    position: absolute;
    bottom: -3px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ff0055;
    background: rgba(10, 5, 18, 0.95);
    border: 1px solid #ff0055;
    border-radius: 4px;
    padding: 0 4px;
    line-height: 1.2;
    box-shadow: 0 0 6px rgba(255, 0, 85, 0.5);
    z-index: 3;
}

@keyframes skullPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.2; }
}

/* FAB Locate Button - Cyber Radar Style */
.fab-locate-btn {
    background: linear-gradient(135deg, rgba(8, 20, 38, 0.95), rgba(15, 30, 60, 0.95)) !important;
    border: 1.5px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.35) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.fab-locate-btn:hover {
    background: #00f0ff !important;
    color: #020b18 !important;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.75) !important;
    transform: scale(1.08);
}

/* ===================================================
   CYBER PLAYER MENU (HUD DRAWER)
   =================================================== */

.cyber-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(2, 6, 14, 0.65);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.cyber-player-menu {
    position: fixed;
    top: 52px;
    left: 10px;
    z-index: 1002;
    width: 290px;
    max-width: calc(100vw - 20px);
    background: linear-gradient(180deg, rgba(8, 18, 36, 0.97) 0%, rgba(5, 12, 24, 0.98) 100%);
    border: 1.5px solid #00f0ff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 240, 255, 0.25);
    backdrop-filter: blur(12px);
    animation: menuSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cyber-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.cyber-menu-badge {
    font-size: 0.65rem;
    font-family: monospace;
    color: #00f0ff;
    letter-spacing: 1px;
    background: rgba(0, 240, 255, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.cyber-menu-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.cyber-menu-close {
    background: transparent;
    border: none;
    color: #8892b0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.cyber-menu-close:hover {
    color: #ff0055;
    background: rgba(255, 0, 85, 0.15);
}

.cyber-menu-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #64748b;
    margin-bottom: 6px;
}

.cyber-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cyber-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 28, 52, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 8px;
    padding: 7px 10px;
    color: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

.cyber-menu-item:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

.cyber-menu-icon {
    font-size: 1rem;
    line-height: 1;
}

.cyber-menu-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyber-highlight-purple {
    border-color: rgba(224, 64, 251, 0.35);
}
.cyber-highlight-purple:hover {
    border-color: #e040fb;
    color: #e040fb;
    box-shadow: 0 0 12px rgba(224, 64, 251, 0.3);
}

.cyber-highlight-pink {
    border-color: rgba(255, 0, 85, 0.35);
}
.cyber-highlight-pink:hover {
    border-color: #ff0055;
    color: #ff0055;
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.3);
}

.cyber-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    border-color: #334155 !important;
}

.cyber-pulse-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0055;
    box-shadow: 0 0 8px #ff0055;
    position: absolute;
    top: 6px;
    right: 6px;
    animation: badgePulse 1.2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.cyber-menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
    margin: 10px 0 8px 0;
}

.cyber-menu-mini-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748b;
}

.cyber-lang-chip {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-lang-chip:hover {
    border-color: #00f0ff;
    color: #00f0ff;
}

.cyber-lang-chip.active {
    background: #00f0ff;
    border-color: #00f0ff;
    color: #020617;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.cyber-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 0, 85, 0.08);
    border: 1px solid rgba(255, 0, 85, 0.35);
    border-radius: 8px;
    color: #ff3366;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.cyber-logout-btn:hover {
    background: #ff0055;
    border-color: #ff0055;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(255, 0, 85, 0.5);
    transform: translateY(-1px);
}

/* ===================================================
   CYBERPUNK HUD & TACTICAL DOCK (VAULT PANIC STYLE)
   =================================================== */

/* ===================================================
   TOP RESOURCE BAR & CEILING-ANCHORED 2D ASSETS
   Mobile-First 2-Tier HUD Console + Desktop Expansion
   =================================================== */

/* Top Console Bar (Mobile-First: 2-Tier Grid HUD) */
.cyber-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 44px auto;
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
    padding: 0;
    gap: 0;
}

/* Ceiling console header background on mobile (z-index 10 sits ON TOP of resources) */
.cyber-top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(180deg, rgba(2, 6, 14, 0.98) 0%, rgba(6, 14, 28, 0.98) 100%);
    border-bottom: 2px solid rgba(0, 240, 255, 0.4);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.98);
    z-index: 10;
    pointer-events: auto;
}

/* Comic Vault Panic Avatar Frame (Hero Portrait) */
.cyber-avatar-frame-wrap {
    grid-column: 1;
    grid-row: 1;
    z-index: 12;
    align-self: center;
    margin-left: 10px;
    margin-top: 0;
    margin-right: 0;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cyber-avatar-frame {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #060e1e;
    border: 2px solid #060b14; /* Bold comic outline */
    box-shadow: 0 0 0 1.5px #00f0ff, 0 2px 8px rgba(0, 240, 255, 0.45);
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.cyber-avatar-frame:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 1.5px #ffffff, 0 0 16px rgba(0, 240, 255, 0.8);
}

.cyber-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060e1e;
}

.cyber-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cyber-avatar-lvl-tag {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    font-weight: 900;
    color: #ffaa00;
    background: #060b14;
    border: 1.5px solid #ffaa00;
    border-radius: 4px;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    letter-spacing: 0.5px;
    line-height: 1.2;
    z-index: 10;
}

/* Resources Container - Row 2: 4-Column Grid across full phone width (POD BELKĄ: z-index 1) */
.cyber-resources-scroll {
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 1; /* Pod belką konsoli na telefonie */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 4px;
    overflow-x: visible;
    pointer-events: none;
    height: auto;
    margin-bottom: 0;
}

/* The Stalactite: emerging directly out from under the ceiling console */
.cyber-res-stalactite,
.cyber-res-floating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    margin-top: -6px; /* Delikatne przesunięcie w dół: pełniejsza widoczność grafik */
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-res-stalactite:hover,
.cyber-res-floating-item:hover {
    transform: translateY(4px) scale(1.04);
}

/* 2D Stalactite Art Images */
.cyber-stalactite-art,
.cyber-res-art {
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 10px currentColor);
    transition: transform 0.25s ease;
}

.cyber-res-stalactite:hover .cyber-stalactite-art,
.cyber-res-floating-item:hover .cyber-res-art {
    transform: scale(1.06) rotate(-2deg);
}

/* The tactile number plate docked at the base */
.cyber-stalactite-plate,
.cyber-res-plate {
    margin-top: -8px;
    padding: 2px 6px;
    background: rgba(3, 8, 16, 0.97);
    border: 1.5px solid currentColor;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 900;
    font-size: 0.72rem;
    font-family: 'Montserrat', sans-serif, monospace;
    z-index: 2;
    backdrop-filter: blur(4px);
    width: 86%;
    max-width: 80px;
}

.cyber-stalactite-plate-val,
.cyber-res-plate-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.cyber-stalactite-plate-sub,
.cyber-res-plate-sub {
    font-size: 0.6rem;
    color: #00ffcc;
    opacity: 0.95;
}

/* Specific heights and colors for the 4 stalactites (Mobile) */
.cyber-res-stalactite.credits,
.cyber-res-floating-item.credits {
    color: #ffaa00;
    margin-left: 0;
}
.cyber-res-stalactite.credits .cyber-stalactite-art,
.cyber-res-floating-item.credits .cyber-res-art {
    height: 68px;
    width: auto;
}

.cyber-res-stalactite.data-cores,
.cyber-res-floating-item.data-cores {
    color: #00f0ff;
}
.cyber-res-stalactite.data-cores .cyber-stalactite-art,
.cyber-res-floating-item.data-cores .cyber-res-art {
    height: 72px;
    width: auto;
}

.cyber-res-stalactite.gems,
.cyber-res-floating-item.gems {
    color: #e040fb;
    margin-top: -24px; /* Schowany czubek pod belką, przesunięty w dół */
}
.cyber-res-stalactite.gems .cyber-stalactite-art,
.cyber-res-floating-item.gems .cyber-res-art {
    height: 96px;
    width: auto;
}

.cyber-res-stalactite.energy,
.cyber-res-floating-item.energy {
    color: #39ff14;
    margin-top: -22px; /* Schowany korek pod belką, przesunięty w dół */
}
.cyber-res-stalactite.energy .cyber-stalactite-art,
.cyber-res-floating-item.energy .cyber-res-art {
    height: 96px;
    width: auto;
}

/* =========================================
   TOP RIGHT UTILITIES: BRAND, BACKPACK, BELL
   ========================================= */
.cyber-top-right-group {
    grid-column: 3;
    grid-row: 1;
    z-index: 11;
    align-self: center;
    margin-right: 10px;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    flex-shrink: 0;
}

/* Cyber Brand Badge */
.cyber-top-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

.cyber-top-bar > .cyber-top-right-group .cyber-top-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-right: 0;
    padding: 0;
    background: transparent;
    border: none;
    pointer-events: none;
}

.cyber-brand-title {
    font-size: 0.78rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
.cyber-brand-title .brand-pink {
    color: #ff0055;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
}
.cyber-brand-sub {
    font-size: 0.48rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.8px;
    margin-top: 2px;
}

/* Utility Action Buttons (Backpack & Bell) */
.cyber-utility-btn,
.cyber-action-circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(14, 28, 54, 0.95), rgba(6, 14, 28, 0.98));
    border: 1.5px solid rgba(0, 240, 255, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #00f0ff;
    font-size: 0.95rem;
    position: relative;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
}

.cyber-utility-btn:hover,
.cyber-action-circle-btn:hover {
    transform: scale(1.08) translateY(-2px);
    border-color: #00f0ff;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 240, 255, 0.5);
}

.cyber-utility-btn.bell-btn {
    border-color: rgba(255, 170, 0, 0.5);
    color: #ffaa00;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.cyber-utility-btn.bell-btn:hover {
    border-color: #ffaa00;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 170, 0, 0.55);
}

.cyber-utility-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff0055;
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 900;
    padding: 0 4px;
    border-radius: 6px;
    border: 1px solid #ffffff;
    box-shadow: 0 0 6px #ff0055;
    line-height: 1.1;
    z-index: 3;
}

/* =========================================
   DESKTOP EXPANSION (>= 768px: SINGLE-ROW HUD)
   ========================================= */
@media (min-width: 768px) {
    .cyber-top-bar {
        display: flex;
        align-items: flex-start;
        height: 52px;
        padding: 0 20px;
        gap: 16px;
        background: linear-gradient(180deg, rgba(3, 8, 18, 0.98) 0%, rgba(6, 14, 28, 0.92) 100%);
        border-bottom: 2px solid rgba(0, 240, 255, 0.35);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
        pointer-events: auto;
    }
    .cyber-top-bar::before {
        display: none;
    }

    .cyber-avatar-frame-wrap {
        margin: 12px 14px 0 0; /* Całe obramowanie w kadrze, z bezpiecznym marginesem od góry */
        display: block;
        align-self: flex-start;
    }
    .cyber-avatar-frame {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        border: 3.5px solid #060b14;
        box-shadow: 0 0 0 2px #00f0ff, 0 8px 26px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 240, 255, 0.55);
    }
    .cyber-avatar-inner {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #060e1e;
    }
    .cyber-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cyber-avatar-lvl-tag {
        font-size: 0.72rem;
        padding: 2px 8px;
        position: absolute;
        bottom: -7px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 2px;
        z-index: 10;
    }

    .cyber-resources-scroll {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        flex-grow: 1;
        height: 190px;
        padding: 0 12px 24px 32px;
        margin-bottom: -142px;
        pointer-events: auto;
        position: relative;
        z-index: 2; /* Na komputerze nad belką */
    }
    .cyber-res-stalactite,
    .cyber-res-floating-item {
        flex-shrink: 0;
        margin-top: -50px; /* Przesunięcie wyżej, zajmuje ten sam obszar mapy */
    }
    .cyber-res-stalactite:hover,
    .cyber-res-floating-item:hover {
        transform: translateY(6px) scale(1.05);
    }
    .cyber-res-stalactite.credits,
    .cyber-res-floating-item.credits {
        margin-left: 8px;
    }
    .cyber-res-stalactite.credits .cyber-stalactite-art,
    .cyber-res-floating-item.credits .cyber-res-art {
        height: 132px; /* Powiększone z 110px */
    }
    .cyber-res-stalactite.data-cores .cyber-stalactite-art,
    .cyber-res-floating-item.data-cores .cyber-res-art {
        height: 140px; /* Powiększone z 118px */
    }
    .cyber-res-stalactite.gems,
    .cyber-res-floating-item.gems {
        margin-top: -92px; /* Przesunięte w górę, w głąb konsoli */
    }
    .cyber-res-stalactite.gems .cyber-stalactite-art,
    .cyber-res-floating-item.gems .cyber-res-art {
        height: 192px; /* Powiększone z 162px */
    }
    .cyber-res-stalactite.energy,
    .cyber-res-floating-item.energy {
        margin-top: -88px; /* Przesunięte w górę, w głąb konsoli */
    }
    .cyber-res-stalactite.energy .cyber-stalactite-art,
    .cyber-res-floating-item.energy .cyber-res-art {
        height: 192px; /* Powiększone z 162px */
    }
    .cyber-stalactite-plate,
    .cyber-res-plate {
        margin-top: -12px;
        padding: 2px 11px;
        font-size: 0.88rem;
        border-radius: 13px;
        border-width: 2px;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.95), 0 0 10px currentColor;
        width: auto;
        max-width: none;
    }
    .cyber-stalactite-plate-sub,
    .cyber-res-plate-sub {
        font-size: 0.7rem;
    }

    .cyber-top-right-group {
        margin: 4px 0 0 0;
        gap: 8px;
    }
    .cyber-top-brand {
        display: flex;
    }
    .cyber-top-bar > .cyber-top-right-group .cyber-top-brand {
        position: static;
        transform: none;
        align-items: flex-end;
        padding: 3px 10px;
        border-radius: 8px;
        background: rgba(0, 240, 255, 0.06);
        border: 1px solid rgba(0, 240, 255, 0.25);
        margin-right: 4px;
        pointer-events: auto;
    }
    .cyber-brand-title {
        font-size: 0.8rem;
    }
    .cyber-brand-sub {
        font-size: 0.52rem;
        letter-spacing: 1px;
    }
    .cyber-utility-btn,
    .cyber-action-circle-btn {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
        border-radius: 13px;
        border-width: 2px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 240, 255, 0.2);
    }
    .cyber-utility-btn.bell-btn {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 170, 0, 0.25);
    }
    .cyber-utility-badge {
        font-size: 0.65rem;
        padding: 1px 5px;
        border-radius: 8px;
        border-width: 1.5px;
        box-shadow: 0 0 8px #ff0055;
    }
}

/* =========================================
   RIGHT SIDE TACTICAL DOCK (CZAT + GPS)
   Unified vertical pod cluster on the right
   ========================================= */
.cyber-side-dock {
    position: fixed;
    right: 12px;
    bottom: 125px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .cyber-side-dock {
        right: 20px;
        bottom: 140px;
        gap: 12px;
    }
}

.cyber-chat-dock-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cyber-dock-action-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 22, 44, 0.96) 0%, rgba(4, 12, 26, 0.99) 100%);
    border: 2px solid #00f0ff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 240, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #00f0ff;
    position: relative;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
    user-select: none;
}

.cyber-dock-action-btn:hover {
    transform: scale(1.08) translateY(-2px);
    border-color: #ffffff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 240, 255, 0.7);
    color: #ffffff;
}

.cyber-dock-action-btn.active {
    background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%);
    color: #030814;
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
}

.cyber-dock-action-btn.active .cyber-dock-btn-tag {
    color: #030814;
}

.cyber-dock-action-btn.locating {
    border-color: #ffaa00;
    box-shadow: 0 0 16px rgba(255, 170, 0, 0.6);
}

.cyber-dock-btn-icon,
.cyber-locate-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.cyber-dock-btn-tag {
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #00ffcc;
    margin-top: 1px;
    line-height: 1;
}

.cyber-comms-pulse {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #00ffcc;
    border: 2px solid #060b14;
    box-shadow: 0 0 8px #00ffcc;
}

/* =========================================
   TACTICAL CYBER COMMS (CHAT WIDGET)
   ========================================= */
.cyber-chat-mobile-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .cyber-chat-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(3, 8, 18, 0.75);
        backdrop-filter: blur(4px);
        z-index: 3499;
    }
}

.cyber-chat-window {
    position: absolute;
    right: 58px;
    bottom: 0;
    width: 360px;
    height: 500px;
    max-width: calc(100vw - 76px);
    max-height: 75vh;
    background: linear-gradient(175deg, rgba(8, 20, 42, 0.98) 0%, rgba(4, 10, 22, 0.99) 100%);
    border: 2.5px solid #00f0ff;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 240, 255, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(14px);
    z-index: 3500;
}

.cyber-chat-header {
    background: rgba(4, 14, 30, 0.98);
    border-bottom: 2px solid rgba(0, 240, 255, 0.35);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cyber-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cyber-chat-hdr-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #00f0ff;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.cyber-chat-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cyber-chat-status-pill.status-online {
    background: rgba(0, 255, 136, 0.12);
    border-color: #00ff88;
    color: #00ff88;
}

.cyber-chat-status-pill.status-offline {
    background: rgba(255, 0, 85, 0.12);
    border-color: #ff0055;
    color: #ff0055;
}

.cyber-chat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.cyber-chat-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-chat-close-btn:hover {
    background: #ff0055;
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 0 10px #ff0055;
    transform: scale(1.05);
}

/* Tabs Bar */
.cyber-chat-tabs-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(3, 8, 18, 0.85);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}

.cyber-chat-tab-btn {
    flex: 1;
    background: rgba(6, 16, 32, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 6px 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.cyber-chat-tab-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.cyber-chat-tab-btn.tab-global.active {
    background: #00f0ff;
    color: #030814;
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    font-weight: 900;
}

.cyber-chat-tab-btn.tab-offtopic.active {
    background: #ffaa00;
    color: #030814;
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.6);
    font-weight: 900;
}

.cyber-chat-tab-btn.tab-clan.active {
    background: #00ff88;
    color: #030814;
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    font-weight: 900;
}

/* Chat Body & Bubbles */
.cyber-chat-body {
    flex-grow: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 8px;
    margin: auto 0;
    padding: 30px 15px;
}

.cyber-chat-empty-icon {
    font-size: 2.2rem;
    color: rgba(0, 240, 255, 0.3);
}

.cyber-chat-bubble {
    background: rgba(10, 22, 44, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-left: 3.5px solid #00f0ff;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease;
}

.cyber-chat-bubble.is-clan {
    border-left-color: #00ff88;
    background: rgba(8, 28, 22, 0.8);
}

.cyber-chat-bubble.is-offtopic {
    border-left-color: #ffaa00;
    background: rgba(28, 22, 8, 0.8);
}

.cyber-chat-bubble.is-system {
    border-left-color: #ff0055;
    background: rgba(255, 0, 85, 0.1);
    border-color: rgba(255, 0, 85, 0.35);
}

.cyber-chat-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cyber-chat-author {
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-chat-author:hover {
    text-decoration: underline;
    filter: brightness(1.2);
}

.author-global { color: #00f0ff; text-shadow: 0 0 6px rgba(0, 240, 255, 0.3); }
.author-clan { color: #00ff88; text-shadow: 0 0 6px rgba(0, 255, 136, 0.3); }
.author-offtopic { color: #ffaa00; text-shadow: 0 0 6px rgba(255, 170, 0, 0.3); }

.cyber-chat-time {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
}

.cyber-chat-msg-text {
    font-size: 0.82rem;
    color: #f1f5f9;
    word-break: break-word;
    line-height: 1.35;
}

.cyber-chat-sys-content {
    font-size: 0.78rem;
    color: #ffaa00;
    font-weight: 700;
    line-height: 1.3;
}

/* Chat Footer & Input */
.cyber-chat-footer {
    padding: 10px 12px;
    background: rgba(3, 8, 18, 0.98);
    border-top: 1.5px solid rgba(0, 240, 255, 0.25);
}

.cyber-chat-input-row {
    display: flex;
    gap: 8px;
}

.cyber-chat-input {
    flex-grow: 1;
    background: #060e1e;
    border: 2px solid rgba(0, 240, 255, 0.35);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    outline: none;
    transition: all 0.2s ease;
}

.cyber-chat-input:focus {
    border-color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
    background: #08142a;
}

.cyber-chat-send-btn {
    background: linear-gradient(135deg, #00f0ff 0%, #00b4d8 100%);
    border: 2px solid #ffffff;
    color: #030814;
    font-size: 0.9rem;
    border-radius: 10px;
    padding: 0 14px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 3px 10px rgba(0, 240, 255, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-chat-send-btn:hover:not(:disabled) {
    background: #ffffff;
    box-shadow: 0 0 16px #00f0ff;
    transform: translateY(-2px);
}

.cyber-chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.cyber-chat-status-err {
    font-size: 0.68rem;
    color: #ff0055;
    font-weight: 800;
    text-align: center;
    margin-top: 6px;
}

@media (max-width: 480px) {
    .cyber-chat-window {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 65px;
        width: auto;
        max-width: none;
        height: calc(100vh - 160px);
        max-height: 480px;
    }
}


/* =========================================
   BOTTOM-RIGHT: SINGLE MAP LOCATE RADAR BUTTON
   ========================================= */
/* =========================================
   LEAFLET MAP ZOOM CONTROLS (+ / -)
   Cyberpunk Comic Restyle + Mobile Cleanup
   ========================================= */
.leaflet-control-zoom {
    border: 2px solid rgba(0, 240, 255, 0.45) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 240, 255, 0.25) !important;
    margin-top: 70px !important; /* Bezpieczny odstęp pod belką konsoli */
    margin-left: 16px !important;
    background: transparent !important;
}

.leaflet-control-zoom a {
    background: linear-gradient(135deg, rgba(14, 28, 54, 0.95), rgba(6, 14, 28, 0.98)) !important;
    color: #00f0ff !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-bottom: 1px solid rgba(0, 240, 255, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
    background: #00f0ff !important;
    color: #060b14 !important;
    box-shadow: 0 0 16px #00f0ff !important;
}

/* Na telefonach: chowamy przyciski +/- po lewej stronie, aby nie przeszkadzały (gesty pinch-to-zoom) */
@media (max-width: 767px) {
    .leaflet-control-zoom {
        display: none !important;
    }
}

/* Locate button in cyber-side-dock inherits .cyber-dock-action-btn */
.cyber-dock-locate-btn {
    /* Clean unified action dock button */
}

/* =========================================
   TACTICAL ACTION WINGS: RADAR PvP & ARENA
   ========================================= */
.cyber-bottom-action-wings {
    position: absolute;
    bottom: 74px;
    left: 10px;
    right: 10px;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 998;
}

.cyber-tactical-pod-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(6, 18, 36, 0.96) 0%, rgba(3, 10, 22, 0.98) 100%);
    border: 2px solid #00f0ff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 240, 255, 0.35);
    backdrop-filter: blur(8px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, border-color 0.2s ease;
    color: #ffffff;
    font-family: inherit;
    outline: none;
}

.cyber-tactical-pod-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 240, 255, 0.6);
}

.cyber-tactical-pod-btn.radar-pvp {
    border-color: #00f0ff;
}

.cyber-pod-art-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 240, 255, 0.12);
    border: 1.5px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.cyber-pod-art-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.cyber-pod-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cyber-pod-tag {
    font-size: 0.58rem;
    font-weight: 800;
    color: #00ffcc;
    letter-spacing: 1px;
    line-height: 1;
}

.cyber-pod-title {
    font-size: 0.86rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Arena pod variant */
.cyber-tactical-pod-btn.arena {
    border-color: #ff3344;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 51, 68, 0.4);
}

.cyber-tactical-pod-btn.arena:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 51, 68, 0.7);
}

.cyber-tactical-pod-btn.arena .cyber-pod-art-wrap {
    background: rgba(255, 51, 68, 0.15);
    border-color: rgba(255, 51, 68, 0.5);
}

.cyber-tactical-pod-btn.arena .cyber-pod-tag {
    color: #ffaa00;
}

.cyber-pod-badge-pulse {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff0055;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px #ff0055;
    animation: cyberPulseBadge 1.2s infinite;
}

@keyframes cyberPulseBadge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* Desktop Scaling for Action Wings (>= 768px) */
@media (min-width: 768px) {
    .cyber-bottom-action-wings {
        bottom: 84px;
        left: 24px;
        right: 24px;
        max-width: 950px;
    }
    .cyber-tactical-pod-btn {
        padding: 8px 18px 8px 10px;
        border-radius: 18px;
        border-width: 2.5px;
        gap: 12px;
    }
    .cyber-pod-art-wrap {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }
    .cyber-pod-art-img {
        width: 40px;
        height: 40px;
    }
    .cyber-pod-tag {
        font-size: 0.65rem;
        letter-spacing: 1.2px;
    }
    .cyber-pod-title {
        font-size: 1.05rem;
        letter-spacing: 0.8px;
    }
}

/* =========================================
   BOTTOM COMMAND DOCK & STANDALONE TACTICAL BUTTONS
   (Bez wielkiej obramówki - osobne przyciski!)
   ========================================= */
.cyber-dock {
    position: absolute;
    z-index: 1000;
    bottom: 12px;
    left: 10px;
    right: 10px;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease;
    pointer-events: none;
    color: #ffffff;
}

/* Kiedy szuflada dowodzenia jest otwarta */
.cyber-dock.is-open {
    background: linear-gradient(180deg, rgba(8, 20, 42, 0.98) 0%, rgba(4, 12, 26, 0.99) 100%);
    border: 2px solid #00f0ff;
    box-shadow: 0 -8px 30px rgba(0, 240, 255, 0.25), 0 8px 32px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(14px);
    pointer-events: auto;
    overflow: hidden;
}

.cyber-dock-nav {
    display: flex;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    flex-shrink: 0;
    pointer-events: auto;
}

.cyber-dock.is-open .cyber-dock-nav {
    padding: 8px 10px;
    background: rgba(10, 24, 48, 0.75);
    border-bottom: 1.5px solid rgba(0, 240, 255, 0.3);
}

/* Każdy przycisk to samodzielna, wolnostojąca taktyczna kapsuła z własną obwódką i poświatą */
.cyber-dock-tab {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    cursor: pointer;
    border: 2px solid rgba(0, 240, 255, 0.35);
    background: linear-gradient(180deg, rgba(10, 22, 46, 0.95) 0%, rgba(5, 12, 26, 0.98) 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 240, 255, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    outline: none;
}

.cyber-dock-tab:hover {
    color: #ffffff;
    border-color: #00f0ff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 240, 255, 0.45);
}

.cyber-dock-tab-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));
    transition: transform 0.2s ease;
}

.cyber-dock-tab:hover .cyber-dock-tab-icon {
    transform: scale(1.12);
}

/* Baza - akcent cyjanowy */
.cyber-dock-tab.tab-base {
    border-color: rgba(0, 240, 255, 0.4);
}
.cyber-dock-tab.active-base {
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.25) 0%, rgba(4, 16, 36, 0.98) 100%);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.55), 0 6px 20px rgba(0, 0, 0, 0.9);
}

/* Armia - akcent różowo-czerwony */
.cyber-dock-tab.tab-army {
    border-color: rgba(255, 0, 85, 0.45);
    color: #ff3366;
}
.cyber-dock-tab.tab-army:hover {
    border-color: #ff0055;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 0, 85, 0.45);
    color: #ffffff;
}
.cyber-dock-tab.active-army {
    background: linear-gradient(180deg, rgba(255, 0, 85, 0.25) 0%, rgba(36, 6, 16, 0.98) 100%);
    border-color: #ff0055;
    color: #ff3366;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.55), 0 6px 20px rgba(0, 0, 0, 0.9);
}

/* Ops - akcent bursztynowy */
.cyber-dock-tab.tab-ops {
    border-color: rgba(255, 170, 0, 0.45);
    color: #ffaa00;
}
.cyber-dock-tab.tab-ops:hover {
    border-color: #ffaa00;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 170, 0, 0.45);
    color: #ffffff;
}
.cyber-dock-tab.active-ops {
    background: linear-gradient(180deg, rgba(255, 170, 0, 0.25) 0%, rgba(36, 24, 6, 0.98) 100%);
    border-color: #ffaa00;
    color: #ffaa00;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.9);
}

.cyber-ops-badge {
    background: #ff0055;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 8px #ff0055;
    line-height: 1.1;
    animation: badgePulse 1.4s infinite;
}

.cyber-ops-badge.army-badge {
    background: #00bbff;
    border-color: #00f0ff;
    color: #050b14;
    box-shadow: 0 0 8px #00f0ff;
    animation: none;
}

/* Desktop Dock Scaling (>= 768px) */
@media (min-width: 768px) {
    .cyber-dock {
        bottom: 14px;
        left: 24px;
        right: 24px;
        max-width: 950px;
        border-radius: 18px;
    }
    .cyber-dock-nav {
        gap: 12px;
    }
    .cyber-dock.is-open .cyber-dock-nav {
        padding: 8px 12px;
    }
    .cyber-dock-tab {
        height: 52px;
        font-size: 0.98rem;
        gap: 10px;
        border-radius: 16px;
    }
    .cyber-dock-tab-icon {
        width: 32px;
        height: 32px;
    }
    .cyber-ops-badge {
        font-size: 0.75rem;
        padding: 2px 8px;
    }
}

.cyber-dock-collapse-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 1rem;
    padding: 0 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-dock-collapse-btn:hover {
    color: #ff0055;
    border-color: #ff0055;
    background: rgba(255, 0, 85, 0.2);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.4);
}

.cyber-dock-body {
    overflow-y: auto;
    flex-grow: 1;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #00f0ff transparent;
}

/* Dual Hero Command Grid (HQ & Skarbiec) */
.cyber-hero-command-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

@media (max-width: 600px) {
    .cyber-hero-command-grid {
        grid-template-columns: 1fr;
    }
}

.cyber-hero-command-card {
    background: linear-gradient(135deg, rgba(8, 24, 48, 0.95) 0%, rgba(4, 14, 30, 0.98) 100%);
    border: 1.5px solid #00f0ff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 18px rgba(0, 240, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.cyber-hero-command-card.vault {
    background: linear-gradient(135deg, rgba(32, 24, 6, 0.95) 0%, rgba(14, 10, 2, 0.98) 100%);
    border-color: #ffaa00;
    box-shadow: 0 4px 18px rgba(255, 170, 0, 0.2);
}

.cyber-army-power-banner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(16, 26, 48, 0.9) 0%, rgba(8, 14, 28, 0.95) 100%);
    border: 1.5px solid rgba(255, 68, 68, 0.35);
    border-radius: 12px;
    margin-bottom: 12px;
}

/* HQ Banner inside Base Tab */
.cyber-hq-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.12) 0%, rgba(0, 240, 255, 0.02) 100%);
    border: 1px solid rgba(0, 240, 255, 0.35);
}

.cyber-hq-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

/* Chunky Tactical Building Cards (Vault Panic Card Aesthetic) */
.cyber-building-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .cyber-building-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cyber-building-card {
    background: linear-gradient(145deg, rgba(14, 28, 54, 0.85) 0%, rgba(6, 15, 30, 0.95) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    border-radius: 10px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-building-card:hover {
    border-color: #00f0ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 240, 255, 0.2);
}

.cyber-building-card.featured-vault {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(145deg, rgba(36, 28, 4, 0.85) 0%, rgba(14, 11, 2, 0.95) 100%);
    border: 1.5px solid rgba(255, 170, 0, 0.45);
    box-shadow: 0 4px 16px rgba(255, 170, 0, 0.15);
}

.cyber-building-card.featured-vault:hover {
    border-color: #ffaa00;
    box-shadow: 0 6px 22px rgba(255, 170, 0, 0.3);
}

.cyber-building-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #e2e8f0;
    margin-top: 4px;
}

.cyber-building-lvl {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.cyber-btn-upgrade {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 6px;
    color: #00f0ff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: auto;
}

.cyber-btn-upgrade:hover:not(:disabled) {
    background: #00f0ff;
    color: #020814;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    transform: translateY(-1px);
}

.cyber-btn-upgrade:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #334155;
    color: #64748b;
    background: rgba(15, 23, 42, 0.5);
}

.cyber-btn-gold {
    background: rgba(255, 170, 0, 0.15);
    border-color: rgba(255, 170, 0, 0.5);
    color: #ffaa00;
}
.cyber-btn-gold:hover:not(:disabled) {
    background: #ffaa00;
    color: #000000;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

.cyber-btn-claim {
    background: #10b981;
    border: 1.5px solid #34d399;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.cyber-btn-claim:hover:not(:disabled) {
    background: #059669;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
    transform: translateY(-1px);
}

/* ===================================================
   VAULT PANIC STYLE - SPACIOUS TACTICAL CARDS
   =================================================== */

.cyber-hq-banner-tactical {
    background: linear-gradient(135deg, rgba(8, 24, 48, 0.95) 0%, rgba(4, 14, 30, 0.98) 100%);
    border: 1.5px solid #00f0ff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 4px 18px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(0, 240, 255, 0.05);
}

.cyber-hq-title-main {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.cyber-hq-subtitle {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.cyber-card-art-pod {
    width: 78px;
    height: 78px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.18) 0%, rgba(4, 12, 24, 0.7) 80%);
    border: 2px solid rgba(0, 240, 255, 0.4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.cyber-card-art-pod.vault-pod {
    border-color: rgba(255, 170, 0, 0.6);
    background: radial-gradient(circle, rgba(255, 170, 0, 0.25) 0%, rgba(20, 14, 4, 0.7) 80%);
}

.cyber-card-art-pod.hq-pod {
    width: 86px;
    height: 86px;
    border-color: #00f0ff;
}

.cyber-building-img {
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85));
    transition: transform 0.2s ease;
}

.cyber-tactical-card:hover .cyber-building-img,
.cyber-hq-banner-tactical:hover .cyber-building-img {
    transform: scale(1.08);
}

.cyber-tactical-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 580px) {
    .cyber-tactical-grid-2col {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .cyber-card-art-pod {
        width: 66px;
        height: 66px;
    }
    .cyber-building-img {
        max-width: 60px;
        max-height: 60px;
    }
    .cyber-tactical-card {
        padding: 8px 10px;
    }
}

.cyber-tactical-card {
    background: linear-gradient(145deg, rgba(14, 26, 48, 0.95) 0%, rgba(7, 14, 28, 0.98) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.3);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s ease;
}

.cyber-tactical-card:hover {
    transform: translateY(-2px);
    border-color: #00f0ff;
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.25);
}

.cyber-tactical-card.featured-vault {
    background: linear-gradient(145deg, rgba(32, 24, 6, 0.95) 0%, rgba(14, 10, 2, 0.98) 100%);
    border-color: rgba(255, 170, 0, 0.5);
    box-shadow: 0 4px 18px rgba(255, 170, 0, 0.15);
}

.cyber-tactical-card.featured-vault:hover {
    border-color: #ffaa00;
    box-shadow: 0 6px 24px rgba(255, 170, 0, 0.3);
}

.cyber-card-name {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.cyber-card-lvl-pill {
    font-size: 0.65rem;
    font-weight: 800;
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid rgba(0, 240, 255, 0.4);
    color: #00f0ff;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.cyber-card-lvl-pill.hq-pill {
    background: rgba(255, 170, 0, 0.2);
    border-color: #ffaa00;
    color: #ffaa00;
}

.cyber-card-stat {
    font-size: 0.72rem;
    color: #94a3b8;
}

.cyber-btn-card-action {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    cursor: pointer;
    border: 1.5px solid rgba(0, 240, 255, 0.5);
    background: rgba(0, 240, 255, 0.12);
    color: #00f0ff;
    transition: all 0.15s ease;
}

.cyber-btn-card-action:hover:not(:disabled) {
    background: #00f0ff;
    color: #020814;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
    transform: translateY(-1px);
}

.cyber-btn-card-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #334155;
    color: #64748b;
    background: rgba(15, 23, 42, 0.4);
}

.cyber-btn-action-gold {
    background: rgba(255, 170, 0, 0.16);
    border-color: #ffaa00;
    color: #ffaa00;
}

.cyber-btn-action-gold:hover:not(:disabled) {
    background: #ffaa00;
    color: #050505;
    box-shadow: 0 0 16px rgba(255, 170, 0, 0.7);
}

.cyber-btn-action-green {
    background: #10b981;
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.cyber-btn-action-green:hover:not(:disabled) {
    background: #059669;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
}

.cyber-btn-action-red {
    background: rgba(255, 0, 85, 0.16);
    border-color: #ff0055;
    color: #ff3366;
}

.cyber-btn-action-red:hover:not(:disabled) {
    background: #ff0055;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.6);
}

.cyber-btn-coin {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.cyber-menu-hero-banner {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(4, 14, 28, 0.6) 100%);
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
}

.cyber-menu-avatar-pod {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #00f0ff;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
    flex-shrink: 0;
}

.cyber-menu-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cyber-menu-hero-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

/* Tactical Unit Cards & Army Layout */
.cyber-unit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 24, 42, 0.85) 0%, rgba(8, 14, 24, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.cyber-unit-card:hover {
    border-color: rgba(0, 240, 255, 0.4);
    transform: translateY(-1px);
}

.cyber-unit-card-raider {
    border-color: rgba(255, 68, 68, 0.35);
}
.cyber-unit-card-guard {
    border-color: rgba(68, 170, 255, 0.35);
}
.cyber-unit-card-swarm {
    border-color: rgba(255, 170, 0, 0.35);
}
.cyber-unit-card-crawler {
    border-color: rgba(0, 255, 204, 0.35);
}

.cyber-unit-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8));
}

.cyber-unit-pod {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-unit-thumb-lg {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.85));
}

.cyber-army-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 8px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(16, 26, 46, 0.9) 0%, rgba(8, 14, 26, 0.95) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    min-width: 46%;
    flex: 1 1 46%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.2s ease;
}

.cyber-army-stat-box:hover {
    transform: translateY(-2px);
}


.cyber-menu-hero-sub {
    font-size: 0.62rem;
    font-weight: 700;
    color: #00f0ff;
    letter-spacing: 0.5px;
}



/* ====================================================
   PVP RADAR & ARENA LOBBY (VAULT PANIC 2D COMIC STYLE)
   ==================================================== */

.cyber-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 14, 0.88);
    backdrop-filter: blur(8px);
    z-index: 2500;
    animation: cyberFadeIn 0.2s ease-out;
}

.cyber-modal-container {
    position: fixed;
    inset: 0;
    z-index: 2501;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    overflow-y: auto;
}

.cyber-tactical-window {
    pointer-events: auto;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(12, 26, 48, 0.98) 0%, rgba(4, 10, 22, 0.99) 100%);
    border: 3px solid #00f0ff;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
    overflow: hidden;
    position: relative;
    animation: cyberCardPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-radar-window {
    border-color: #00f0ff;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
}

.cyber-attack-window {
    border-color: #ff0055;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 0, 85, 0.35);
    max-width: 490px;
}

.cyber-arena-window {
    border-color: #ffaa00;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 170, 0, 0.35);
    max-width: 620px;
}

/* Modal Headers */
.cyber-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(3, 10, 24, 0.95);
    border-bottom: 2px solid rgba(0, 240, 255, 0.3);
}

.header-attack {
    border-bottom-color: rgba(255, 0, 85, 0.4);
}

.header-arena {
    border-bottom-color: rgba(255, 170, 0, 0.4);
}

.cyber-window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.4);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #00f0ff;
}

.badge-attack {
    background: rgba(255, 0, 85, 0.15);
    border-color: #ff0055;
    color: #ff3366;
}

.badge-arena {
    background: rgba(255, 170, 0, 0.15);
    border-color: #ffaa00;
    color: #ffaa00;
}

.cyber-window-badge-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.cyber-window-close {
    background: rgba(255, 0, 85, 0.12);
    border: 1.5px solid rgba(255, 0, 85, 0.4);
    color: #ff3366;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.cyber-window-close:hover {
    background: #ff0055;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.6);
    transform: scale(1.08);
}

/* =========================================
   PVP RADAR INTERNALS
   ========================================= */
.cyber-radar-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px 12px 18px;
}

.cyber-radar-dish-pod {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, rgba(4, 12, 26, 0.8) 80%);
    border: 2px solid #00f0ff;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.cyber-radar-hero-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
    transition: transform 0.3s ease;
}

.cyber-radar-hero-img.is-pulsing {
    animation: radarArtPulse 1s infinite alternate;
}

@keyframes radarArtPulse {
    from { transform: scale(0.95); filter: drop-shadow(0 0 6px #00f0ff); }
    to { transform: scale(1.08); filter: drop-shadow(0 0 16px #00f0ff); }
}

.cyber-radar-sweep-beam {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(0, 240, 255, 0.4) 360deg);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.cyber-radar-sweep-beam.active-sweep {
    opacity: 1;
    animation: radarBeamSpin 1.4s linear infinite;
}

@keyframes radarBeamSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cyber-radar-hero-info {
    flex-grow: 1;
}

.cyber-window-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.cyber-radar-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.cyber-stat-pill {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.pill-cyan {
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.4);
    color: #00f0ff;
}

.pill-amber {
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.4);
    color: #ffaa00;
}

/* Radar Scan CTA */
.cyber-radar-scan-box {
    padding: 0 18px 14px 18px;
}

.cyber-btn-scan-main {
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(0, 150, 255, 0.35) 100%);
    border: 2px solid #00f0ff;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 240, 255, 0.3), inset 0 0 12px rgba(0, 240, 255, 0.15);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-scan-main:hover:not(:disabled) {
    background: #00f0ff;
    color: #030814;
    box-shadow: 0 6px 25px rgba(0, 240, 255, 0.8);
    transform: translateY(-2px);
}

.cyber-btn-scan-main:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #334155;
    background: rgba(15, 23, 42, 0.4);
}

.cyber-btn-scan-main.is-scanning {
    animation: scanButtonPulse 1.2s infinite alternate;
}

@keyframes scanButtonPulse {
    from { box-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }
    to { box-shadow: 0 0 25px rgba(0, 240, 255, 0.9); }
}

.cyber-radar-warning-energy {
    font-size: 0.72rem;
    color: #ffaa00;
    text-align: center;
    margin-top: 6px;
    font-weight: 700;
}

/* Radar Scroll Body & Target Cards */
.cyber-radar-body-scroll,
.cyber-arena-body-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-radar-targets-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-target-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 28, 52, 0.85) 0%, rgba(6, 14, 28, 0.95) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: all 0.15s ease;
}

.cyber-target-card:hover {
    border-color: #00f0ff;
    box-shadow: 0 6px 18px rgba(0, 240, 255, 0.25);
    transform: translateX(2px);
}

.cyber-target-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-target-avatar-pod {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #060e1e;
    border: 2px solid #060b14;
    box-shadow: 0 0 0 1.5px #00f0ff;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.cyber-target-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cyber-target-hq-tag {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 0.52rem;
    font-weight: 900;
    color: #ffaa00;
    background: #060b14;
    border: 1px solid #ffaa00;
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1.1;
}

.cyber-target-info {
    display: flex;
    flex-direction: column;
}

.cyber-target-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.cyber-target-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.cyber-faction-badge {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.faction-raiders {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.5);
    color: #ff6666;
}

.faction-corp {
    background: rgba(0, 150, 255, 0.2);
    border: 1px solid rgba(0, 150, 255, 0.5);
    color: #38bdf8;
}

.faction-none {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #94a3b8;
}

.cyber-target-id {
    font-size: 0.65rem;
    color: #64748b;
    font-family: monospace;
}

.cyber-target-card-actions {
    display: flex;
    gap: 8px;
}

.cyber-target-btn {
    border: 1.5px solid;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-target-btn.btn-scout {
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.5);
    color: #00f0ff;
}

.cyber-target-btn.btn-scout:hover {
    background: #00f0ff;
    color: #030814;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.7);
    transform: scale(1.06);
}

.cyber-target-btn.btn-attack {
    background: rgba(255, 0, 85, 0.15);
    border-color: #ff0055;
    color: #ff3366;
}

.cyber-target-btn.btn-attack:hover {
    background: #ff0055;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(255, 0, 85, 0.8);
    transform: scale(1.06);
}

/* Radar Empty State */
.cyber-radar-empty-state,
.cyber-arena-empty-state {
    padding: 30px 20px;
    text-align: center;
    border: 1.5px dashed rgba(0, 240, 255, 0.3);
    border-radius: 14px;
    background: rgba(4, 12, 24, 0.6);
}

.cyber-empty-icon-radar,
.cyber-arena-empty-icon {
    font-size: 2.2rem;
    color: #00f0ff;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.cyber-arena-empty-icon {
    color: #ffaa00;
    filter: drop-shadow(0 0 10px rgba(255, 170, 0, 0.5));
}

.cyber-empty-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
}

.cyber-empty-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.35;
}

/* Scout Subpanel */
.cyber-scout-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cyber-scout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cyber-btn-back {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-btn-back:hover {
    background: rgba(148, 163, 184, 0.25);
    color: #ffffff;
}

.cyber-scout-target-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: #00f0ff;
}

.cyber-scout-config-box,
.cyber-scout-active-box {
    background: linear-gradient(135deg, rgba(10, 24, 46, 0.9) 0%, rgba(5, 12, 24, 0.95) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.4);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cyber-scout-active-box {
    align-items: center;
    text-align: center;
    padding: 24px 16px;
}

.cyber-scout-unit-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-scout-unit-pod {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-scout-crawler-art {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.cyber-scout-unit-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
}

.cyber-scout-unit-available {
    font-size: 0.72rem;
    color: #94a3b8;
}

.cyber-scout-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cyber-scout-slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #cbd5e1;
}

.cyber-scout-count {
    color: #00f0ff;
    font-weight: 900;
}

.cyber-scout-active-title {
    font-size: 0.95rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 0.8px;
    margin-top: 8px;
}

.cyber-scout-active-desc {
    font-size: 0.75rem;
    color: #94a3b8;
}

.cyber-scout-timer-pill {
    margin-top: 8px;
    background: rgba(0, 240, 255, 0.15);
    border: 1.5px solid #00f0ff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.cyber-btn-action-cyan {
    background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%);
    border: none;
    border-radius: 10px;
    color: #030814;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 240, 255, 0.5);
    transition: all 0.15s ease;
}

.cyber-btn-action-cyan:hover:not(:disabled) {
    background: #ffffff;
    color: #0066cc;
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.8);
    transform: translateY(-1px);
}

.cyber-btn-action-cyan:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cyber-scout-result-terminal {
    background: #02060e;
    border: 1.5px solid rgba(0, 255, 136, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
}

.cyber-terminal-bar {
    background: rgba(4, 18, 14, 0.95);
    padding: 4px 10px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cyber-term-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-red { background: #ff3366; }
.dot-amber { background: #ffaa00; }
.dot-green { background: #00ff88; }

.cyber-term-title {
    font-size: 0.62rem;
    font-family: monospace;
    font-weight: 800;
    color: #00ff88;
    margin-left: 6px;
}

.cyber-terminal-content {
    padding: 10px 12px;
    font-size: 0.78rem;
    font-family: monospace;
    color: #f1f5f9;
    line-height: 1.4;
}

/* =========================================
   DRONE RESEARCH MATRIX & RADAR TABS
   ========================================= */
.cyber-radar-nav-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(2, 6, 16, 0.95);
    border-bottom: 1.5px solid rgba(0, 240, 255, 0.2);
}

.cyber-radar-nav-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cyber-radar-nav-tab.active {
    background: rgba(0, 240, 255, 0.14);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.cyber-radar-nav-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.cyber-drone-research-container {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cyber-drone-research-intro {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(14, 28, 52, 0.4) 100%);
    border: 1px dashed rgba(0, 240, 255, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-drone-research-intro-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
    flex-shrink: 0;
}

.cyber-drone-intro-title {
    font-size: 0.82rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 0.6px;
}

.cyber-drone-intro-desc {
    font-size: 0.70rem;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.35;
}

.cyber-drone-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 600px) {
    .cyber-drone-tech-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.cyber-drone-tech-card {
    background: linear-gradient(145deg, rgba(8, 20, 40, 0.9) 0%, rgba(4, 10, 20, 0.95) 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.cyber-drone-tech-card:hover {
    border-color: #00f0ff;
    box-shadow: 0 4px 16px rgba(0, 240, 255, 0.2);
    transform: translateY(-1px);
}

.cyber-drone-tech-card.maxed {
    border-color: rgba(255, 170, 0, 0.35);
}

.cyber-drone-tech-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.cyber-drone-tech-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cyber-drone-tech-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #00f0ff;
    flex-shrink: 0;
}

.cyber-drone-tech-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: #f8fafc;
    letter-spacing: 0.3px;
}

.cyber-drone-tech-subtitle {
    font-size: 0.67rem;
    color: #94a3b8;
    font-weight: 500;
}

.cyber-drone-tech-level-pill {
    font-size: 0.68rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid #00f0ff;
    color: #00f0ff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.cyber-drone-tech-level-pill.is-max {
    background: rgba(255, 170, 0, 0.15);
    border-color: #ffaa00;
    color: #ffaa00;
}

.cyber-drone-tech-stat-box {
    background: rgba(2, 6, 14, 0.6);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 3px solid #00f0ff;
}

.cyber-drone-tech-current {
    color: #38bdf8;
    font-weight: 600;
}

.cyber-drone-tech-next {
    color: #4ade80;
    font-size: 0.69rem;
}

.cyber-drone-tech-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.cyber-drone-tech-costs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.70rem;
    font-weight: 800;
}

.cyber-drone-cost-credits {
    color: #ffaa00;
}

.cyber-drone-cost-datacores {
    color: #00f0ff;
}

.cyber-drone-btn-upgrade {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(0, 150, 255, 0.35) 100%);
    border: 1px solid #00f0ff;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cyber-drone-btn-upgrade:hover:not(:disabled) {
    background: #00f0ff;
    color: #020612;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    transform: scale(1.03);
}

.cyber-drone-btn-upgrade:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(148, 163, 184, 0.3);
}

/* =========================================
   AIRDROP MARKER & MODAL WINDOW
   ========================================= */
.cyber-airdrop-wrapper {
    background: transparent;
    border: none;
}

.cyber-airdrop-marker {
    position: relative;
    width: 46px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-airdrop-marker:hover {
    transform: scale(1.15) translateY(-3px);
}

.cyber-airdrop-pulse {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    top: 0;
    left: 1px;
    animation: airdropPulse 1.8s infinite ease-out;
    pointer-events: none;
}

@keyframes airdropPulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

.cyber-airdrop-pod {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}

.cyber-airdrop-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
    animation: airdropFloat 2.4s infinite ease-in-out;
}

@keyframes airdropFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.cyber-airdrop-timer-pill {
    position: absolute;
    bottom: -6px;
    background: rgba(4, 10, 22, 0.95);
    border: 1px solid #00f0ff;
    border-radius: 10px;
    padding: 1px 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 900;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.cyber-airdrop-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ffcc;
    animation: airdropBlink 1s infinite alternate;
}

@keyframes airdropBlink {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* Rarity Themes */
.airdrop-common .cyber-airdrop-pod {
    background: radial-gradient(circle, rgba(148, 163, 184, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #94a3b8;
}
.airdrop-common .cyber-airdrop-pulse { border: 2px solid #94a3b8; }
.airdrop-common .cyber-airdrop-timer-pill { border-color: #94a3b8; }

.airdrop-rare .cyber-airdrop-pod {
    background: radial-gradient(circle, rgba(0, 240, 255, 0.4) 0%, rgba(6, 18, 38, 0.95) 100%);
    border: 2px solid #00f0ff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
}
.airdrop-rare .cyber-airdrop-pulse { border: 2px solid #00f0ff; }
.airdrop-rare .cyber-airdrop-timer-pill { border-color: #00f0ff; color: #00f0ff; }

.airdrop-epic .cyber-airdrop-pod {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(20, 8, 38, 0.95) 100%);
    border: 2px solid #a855f7;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
}
.airdrop-epic .cyber-airdrop-pulse { border: 2px solid #a855f7; }
.airdrop-epic .cyber-airdrop-timer-pill { border-color: #a855f7; color: #d8b4fe; }

.airdrop-legendary .cyber-airdrop-pod {
    background: radial-gradient(circle, rgba(255, 170, 0, 0.5) 0%, rgba(35, 18, 4, 0.95) 100%);
    border: 2px solid #ffaa00;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.8);
}
.airdrop-legendary .cyber-airdrop-pulse { border: 2px solid #ffaa00; }
.airdrop-legendary .cyber-airdrop-timer-pill { border-color: #ffaa00; color: #ffaa00; }

/* Modal Window */
.cyber-airdrop-window {
    border-color: #00ffcc;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 255, 204, 0.35);
    max-width: 520px;
}
.header-airdrop {
    border-bottom-color: rgba(0, 255, 204, 0.4);
}
.badge-airdrop {
    background: rgba(0, 255, 204, 0.15);
    border-color: #00ffcc;
    color: #00ffcc;
}

/* =========================================
   ATTACK DEPLOYMENT WINDOW
   ========================================= */
.cyber-attack-target-banner {
    padding: 12px 18px;
    background: rgba(255, 0, 85, 0.1);
    border-bottom: 1.5px solid rgba(255, 0, 85, 0.3);
}

.cyber-attack-target-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ff3366;
    letter-spacing: 0.5px;
}

.cyber-attack-target-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.cyber-attack-units-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
}

.cyber-unit-picker-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 26, 44, 0.9) 0%, rgba(6, 12, 22, 0.95) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.unit-raider { border-color: rgba(255, 68, 68, 0.4); }
.unit-guard { border-color: rgba(0, 150, 255, 0.4); }
.unit-swarm { border-color: rgba(255, 170, 0, 0.4); }

.cyber-unit-picker-art {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-unit-picker-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.cyber-unit-picker-body {
    flex-grow: 1;
}

.cyber-unit-picker-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cyber-unit-picker-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
}

.cyber-unit-picker-badge {
    font-size: 0.72rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 4px;
}

.count-raiders { color: #ff6666; background: rgba(255, 68, 68, 0.15); }
.count-guards { color: #38bdf8; background: rgba(0, 150, 255, 0.15); }
.count-swarm { color: #ffaa00; background: rgba(255, 170, 0, 0.15); }

/* Tactical Sliders */
.cyber-tactical-slider {
    width: 100%;
    accent-color: #00f0ff;
    cursor: pointer;
}

.slider-red { accent-color: #ff0055; }
.slider-blue { accent-color: #00a8ff; }
.slider-amber { accent-color: #ffaa00; }

.cyber-attack-summary-box {
    margin: 0 18px 14px 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(4, 10, 22, 0.9);
    border: 1.5px solid rgba(255, 0, 85, 0.35);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.cyber-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.cyber-summary-label {
    font-size: 0.62rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

.cyber-summary-val {
    font-size: 1.05rem;
    font-weight: 900;
    margin-top: 2px;
}

.val-atk { color: #ff3366; text-shadow: 0 0 8px rgba(255, 0, 85, 0.6); }
.val-cargo { color: #ffaa00; text-shadow: 0 0 8px rgba(255, 170, 0, 0.6); }
.val-time { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.6); }

.cyber-btn-launch-attack {
    margin: 0 18px 18px 18px;
    background: linear-gradient(135deg, #ff0055 0%, #cc0044 100%);
    border: 2px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 0, 85, 0.6);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-launch-attack:hover:not(:disabled) {
    background: #ffffff;
    color: #cc0044;
    box-shadow: 0 8px 26px rgba(255, 0, 85, 0.9);
    transform: translateY(-2px);
}

.cyber-btn-launch-attack:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(40, 10, 20, 0.5);
    border-color: #552233;
    color: #885566;
    box-shadow: none;
}

/* =========================================
   KRWAWE IGRZYSKA (SYNAPSE ARENA)
   ========================================= */
.cyber-arena-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 12px 18px;
}

.cyber-arena-skull-pod {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 170, 0, 0.25) 0%, rgba(20, 10, 2, 0.8) 80%);
    border: 2px solid #ffaa00;
    box-shadow: 0 0 18px rgba(255, 170, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-arena-skull-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85));
}

.cyber-arena-hero-info {
    flex-grow: 1;
}

.cyber-arena-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffaa00;
    text-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
    line-height: 1.2;
}

.cyber-arena-status-bar {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.cyber-ticket-pod,
.cyber-elo-pod {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cyber-status-sub {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.cyber-ticket-indicators {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cyber-ticket-slot {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.cyber-ticket-slot.is-filled {
    background: rgba(0, 240, 255, 0.2);
    border: 1.5px solid #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.cyber-ticket-slot.is-empty {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: #475569;
}

.cyber-ticket-text {
    font-size: 0.72rem;
    font-weight: 900;
    color: #00f0ff;
    margin-left: 4px;
}

.cyber-elo-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 170, 0, 0.15);
    border: 1.5px solid #ffaa00;
    border-radius: 6px;
    padding: 1px 8px;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

.cyber-elo-val {
    font-size: 0.88rem;
    font-weight: 900;
    color: #ffaa00;
}

.cyber-elo-tag {
    font-size: 0.58rem;
    font-weight: 900;
    color: #cbd5e1;
}

/* Arena Tabs */
.cyber-arena-tabs {
    display: flex;
    gap: 8px;
    padding: 0 18px 12px 18px;
    border-bottom: 1.5px solid rgba(255, 170, 0, 0.25);
    margin-bottom: 12px;
}

.cyber-arena-tab {
    flex: 1;
    background: rgba(16, 28, 48, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.cyber-arena-tab:hover {
    border-color: rgba(255, 170, 0, 0.5);
    color: #ffffff;
}

.cyber-arena-tab.active {
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.25) 0%, rgba(30, 20, 2, 0.9) 100%);
    border-color: #ffaa00;
    color: #ffaa00;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.4);
}

.cyber-alert-mini-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0055;
    box-shadow: 0 0 8px #ff0055;
    animation: cyberDotPulse 1.2s infinite alternate;
}

.cyber-arena-section-title {
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin: 4px 0 6px 0;
}

/* Incoming Hack Alert Card */
.cyber-hack-alert-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(48, 8, 20, 0.95) 0%, rgba(20, 4, 10, 0.98) 100%);
    border: 2px solid #ff0055;
    box-shadow: 0 4px 18px rgba(255, 0, 85, 0.4);
    animation: alertBorderPulse 1.4s infinite alternate;
    margin-bottom: 12px;
}

@keyframes alertBorderPulse {
    from { box-shadow: 0 0 10px rgba(255, 0, 85, 0.4); }
    to { box-shadow: 0 0 24px rgba(255, 0, 85, 0.85); }
}

.cyber-hack-hacker-name {
    font-size: 0.92rem;
    font-weight: 900;
    color: #ffffff;
}

.cyber-hacker-prefix {
    color: #ff0055;
    font-weight: 800;
    font-size: 0.72rem;
    margin-right: 4px;
}

.cyber-hack-expire-time {
    font-size: 0.7rem;
    color: #ff6688;
    margin-top: 2px;
}

.cyber-btn-defend-now {
    background: #ff0055;
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.7);
    transition: all 0.15s ease;
}

.cyber-btn-defend-now:hover {
    background: #ffffff;
    color: #cc0044;
    box-shadow: 0 0 22px rgba(255, 0, 85, 0.95);
    transform: scale(1.06);
}

/* Arena Opponent Cards */
.cyber-arena-opponents-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-opponent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 26, 46, 0.85) 0%, rgba(8, 14, 26, 0.95) 100%);
    border: 1.5px solid rgba(255, 170, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
}

.cyber-opponent-card:hover {
    border-color: #ffaa00;
    box-shadow: 0 6px 18px rgba(255, 170, 0, 0.25);
    transform: translateX(2px);
}

.cyber-opponent-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-opponent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #060e1e;
    border: 2px solid #060b14;
    box-shadow: 0 0 0 1.5px #ffaa00;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.cyber-opponent-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cyber-opponent-hq-tag {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 0.52rem;
    font-weight: 900;
    color: #00f0ff;
    background: #060b14;
    border: 1px solid #00f0ff;
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1.1;
}

.cyber-opponent-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
}

.cyber-opponent-elo {
    font-size: 0.72rem;
    color: #cbd5e1;
    margin-top: 2px;
}

.cyber-opponent-elo strong {
    color: #ffaa00;
}

.cyber-btn-arena-challenge {
    background: linear-gradient(135deg, #ffaa00 0%, #e67e00 100%);
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: #050505;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 7px 14px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(255, 170, 0, 0.45);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-arena-challenge:hover:not(:disabled) {
    background: #ffffff;
    color: #e67e00;
    box-shadow: 0 5px 20px rgba(255, 170, 0, 0.8);
    transform: scale(1.06);
}

.cyber-btn-arena-challenge:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #334155;
    border-color: #64748b;
    color: #94a3b8;
    box-shadow: none;
}

.cyber-btn-arena-refresh {
    background: rgba(255, 170, 0, 0.1);
    border: 1.5px solid rgba(255, 170, 0, 0.4);
    border-radius: 8px;
    color: #ffaa00;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-btn-arena-refresh:hover {
    background: #ffaa00;
    color: #050505;
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.6);
}

/* Arena History Cards */
.cyber-arena-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-history-unseen-card {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid #ffaa00;
    background: rgba(20, 14, 2, 0.9);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cyber-unseen-blur-layer {
    filter: blur(5px);
    opacity: 0.25;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.cyber-unseen-mock {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    margin-top: 4px;
}

.cyber-unseen-action-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-btn-decrypt-match {
    background: #ffaa00;
    border: 2px solid #ffffff;
    border-radius: 10px;
    color: #050505;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 10px 18px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 170, 0, 0.7);
    transition: all 0.15s ease;
}

.cyber-btn-decrypt-match:hover {
    background: #ffffff;
    color: #cc7700;
    box-shadow: 0 6px 25px rgba(255, 170, 0, 0.95);
    transform: scale(1.05);
}

.cyber-history-card {
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 24, 42, 0.9) 0%, rgba(6, 12, 22, 0.95) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.cyber-history-card.is-victory {
    border-color: rgba(0, 255, 136, 0.5);
}

.cyber-history-card.is-defeat {
    border-color: rgba(255, 68, 68, 0.5);
}

.cyber-history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
}

.cyber-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cyber-history-mode-badge {
    font-size: 0.62rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
}

.mode-attack { background: rgba(255, 170, 0, 0.2); color: #ffaa00; border: 1px solid #ffaa00; }
.mode-defense { background: rgba(255, 0, 85, 0.2); color: #ff3366; border: 1px solid #ff0055; }

.cyber-history-opponent {
    font-size: 0.82rem;
    color: #ffffff;
}

.cyber-history-result {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cyber-badge-walkover {
    font-size: 0.62rem;
    font-weight: 800;
    background: #334155;
    color: #cbd5e1;
    padding: 2px 6px;
    border-radius: 4px;
}

.cyber-outcome-badge {
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.outcome-win { background: #00ff88; color: #030814; }
.outcome-loss { background: #ff3366; color: #ffffff; }

.cyber-history-rounds-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.cyber-round-pill {
    padding: 4px 2px;
    border-radius: 6px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid;
}

.round-won {
    border-color: #00ff88;
    color: #00ff88;
}

.round-lost {
    border-color: #ff4444;
    color: #ff4444;
}

.cyber-round-num {
    font-size: 0.58rem;
    font-weight: 800;
    opacity: 0.8;
}

.cyber-round-score {
    font-size: 0.75rem;
    font-weight: 900;
}

.cyber-round-enemy {
    font-size: 0.58rem;
    color: #94a3b8;
}

.cyber-history-walkover-note {
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
    padding: 4px;
}

/* Arena Ranking Table */
.cyber-ranking-wrap {
    width: 100%;
}

.cyber-ranking-table-card {
    background: rgba(6, 14, 28, 0.85);
    border: 1.5px solid rgba(255, 170, 0, 0.35);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.cyber-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.cyber-ranking-table thead th {
    background: rgba(20, 14, 2, 0.95);
    color: #ffaa00;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: 0.65rem;
    padding: 10px 12px;
    border-bottom: 2px solid #ffaa00;
    text-align: center;
}

.cyber-ranking-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    text-align: center;
}

.cyber-ranking-table tbody tr:hover {
    background: rgba(255, 170, 0, 0.08);
}

.cyber-ranking-table tbody tr.is-podium {
    background: rgba(255, 170, 0, 0.12);
}

.cyber-rank-col {
    font-weight: 900;
    font-size: 0.88rem;
}

.cyber-medal {
    font-size: 1.1rem;
}

.cyber-alias-col {
    text-align: left !important;
    font-weight: 800;
    color: #00f0ff;
}

.cyber-rating-col {
    text-align: right !important;
    color: #ffaa00;
}

.cyber-rating-col strong {
    font-size: 0.88rem;
}

.elo-unit {
    font-size: 0.62rem;
    color: #94a3b8;
}

.cyber-ranking-loading {
    padding: 24px !important;
    text-align: center;
    color: #94a3b8;
}

@media (max-width: 480px) {
    .cyber-tactical-window {
        padding: 0;
        max-height: 94vh;
    }
    .cyber-radar-hero,
    .cyber-arena-hero {
        padding: 12px 14px 10px 14px;
        gap: 12px;
    }
    .cyber-radar-dish-pod,
    .cyber-arena-skull-pod {
        width: 52px;
        height: 52px;
    }
    .cyber-radar-hero-img,
    .cyber-arena-skull-img {
        width: 38px;
        height: 38px;
    }
    .cyber-window-title,
    .cyber-arena-title {
        font-size: 1.05rem;
    }
    .cyber-radar-body-scroll,
    .cyber-arena-body-scroll {
        padding: 0 14px 14px 14px;
    }
    .cyber-target-card-actions {
        flex-direction: column;
        gap: 4px;
    }
    .cyber-target-btn {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
    .cyber-arena-tabs {
        padding: 0 14px 10px 14px;
        gap: 4px;
    }
    .cyber-arena-tab {
        font-size: 0.65rem;
        padding: 6px 4px;
    }
    .cyber-ranking-table {
        font-size: 0.7rem;
    }
    .cyber-ranking-table thead th {
        padding: 6px 4px;
        font-size: 0.58rem;
    }
    .cyber-ranking-table tbody td {
        padding: 6px 4px;
    }
    .cyber-ranking-table-card {
        overflow-x: auto;
    }
    .cyber-history-rounds-grid {
        gap: 3px;
    }
    .cyber-round-pill {
        padding: 4px 2px;
    }
    .cyber-round-score {
        font-size: 0.72rem;
    }
}


/* =========================================
   TACTICAL OPERATIVE PROFILE (PROFIL NETRUNNERA)
   ========================================= */
.cyber-profile-window {
    max-width: 620px;
    border-color: #00f0ff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
}

.header-profile {
    border-bottom: 2px solid rgba(0, 240, 255, 0.35);
}

.badge-profile {
    background: rgba(0, 240, 255, 0.12);
    border-color: #00f0ff;
    color: #00f0ff;
}

/* Hero Pod in Profile */
.cyber-profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 14px 20px;
    background: linear-gradient(135deg, rgba(6, 16, 32, 0.95) 0%, rgba(3, 8, 18, 0.98) 100%);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}

.cyber-profile-avatar-pod {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #081426;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-profile-avatar-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.cyber-profile-hq-tag {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #ffaa00;
    color: #030814;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.cyber-profile-hero-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cyber-profile-username {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.cyber-profile-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cyber-status-tag-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid #00ff88;
    color: #00ff88;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.6px;
}

.cyber-clan-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid #00f0ff;
    color: #00f0ff;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.6px;
}

/* Profile 4 Tabs */
.cyber-profile-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 20px 8px 20px;
    background: rgba(3, 8, 18, 0.85);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.cyber-profile-tab {
    flex: 1;
    min-width: 100px;
    background: rgba(6, 16, 32, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 8px 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cyber-profile-tab:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.cyber-profile-tab.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 168, 255, 0.15) 100%);
    border-color: #00f0ff;
    color: #00f0ff;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.cyber-profile-body-scroll {
    max-height: 460px;
    overflow-y: auto;
    padding: 16px 20px 20px 20px;
}

/* TAB 1: DAILY LOGIN STREAK & CAPSULES */
.cyber-daily-tab-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cyber-daily-streak-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.12) 0%, rgba(20, 12, 2, 0.9) 100%);
    border: 2px solid rgba(255, 170, 0, 0.45);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.cyber-streak-flame {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px #ffaa00);
}

.cyber-streak-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cyber-streak-label {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffaa00;
    text-transform: uppercase;
}

.cyber-streak-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.cyber-daily-capsules-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.cyber-daily-day-pod {
    background: rgba(6, 14, 28, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-daily-day-pod.is-claimed {
    opacity: 0.5;
    filter: grayscale(80%);
    border-color: rgba(255, 255, 255, 0.08);
}

.cyber-daily-day-pod.is-current {
    background: linear-gradient(145deg, rgba(255, 170, 0, 0.22) 0%, rgba(20, 14, 4, 0.95) 100%);
    border: 2px solid #ffaa00;
    box-shadow: 0 0 16px rgba(255, 170, 0, 0.5);
    transform: scale(1.04);
}

.cyber-daily-day-pod.is-locked {
    opacity: 0.6;
}

.cyber-day-label {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.cyber-daily-day-pod.is-current .cyber-day-label {
    color: #ffaa00;
}

.cyber-day-icon {
    font-size: 1.5rem;
    margin: 4px 0;
}

.cyber-day-status {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.status-check { color: #00ff88; }
.status-ready { color: #ffaa00; font-weight: 900; text-shadow: 0 0 6px #ffaa00; }
.status-lock { color: #64748b; font-size: 0.72rem; }

.cyber-btn-claim-daily {
    background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%);
    border: 2px solid #ffffff;
    color: #030814;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 12px 20px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 170, 0, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-claim-daily:hover {
    background: #ffffff;
    box-shadow: 0 0 25px #ffaa00;
    transform: translateY(-2px);
}

.cyber-daily-msg-success {
    background: rgba(0, 255, 136, 0.12);
    border: 1.5px solid #00ff88;
    color: #00ff88;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 10px;
    text-align: center;
}

.cyber-daily-msg-wait {
    background: rgba(6, 14, 28, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    text-align: center;
}

/* TAB 2: QUESTS */
.cyber-quests-tab-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cyber-quest-summary-card {
    background: rgba(6, 14, 28, 0.9);
    border: 1.5px solid rgba(255, 170, 0, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-quest-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cyber-quest-badge {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #ffaa00;
    text-transform: uppercase;
}

.cyber-quest-counter {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
}

.cyber-quest-progress-track {
    width: 100%;
    height: 8px;
    background: #040914;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.cyber-quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffaa00, #ff0055);
    box-shadow: 0 0 10px #ffaa00;
    transition: width 0.3s ease;
}

.cyber-quest-active-card {
    background: rgba(6, 14, 28, 0.95);
    border: 2px solid #00f0ff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-quest-active-card.is-ready {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.cyber-quest-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cyber-quest-status-icon {
    font-size: 1.4rem;
}

.cyber-quest-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.cyber-quest-desc {
    font-size: 0.82rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.4;
}

.cyber-quest-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(224, 64, 251, 0.12);
    border: 1px solid #e040fb;
    border-radius: 8px;
    padding: 4px 10px;
    align-self: flex-start;
}

.cyber-reward-lbl {
    font-size: 0.68rem;
    color: #e040fb;
    font-weight: 800;
}

.cyber-reward-val {
    font-size: 0.82rem;
    color: #ffffff;
    font-weight: 900;
}

.cyber-btn-claim-quest {
    background: linear-gradient(135deg, #00ff88 0%, #00b862 100%);
    border: 2px solid #ffffff;
    color: #030814;
    font-size: 0.9rem;
    font-weight: 900;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 255, 136, 0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-claim-quest:hover {
    background: #ffffff;
    box-shadow: 0 0 20px #00ff88;
    transform: translateY(-2px);
}

.cyber-quest-in-progress-note {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

.cyber-quest-all-done-card {
    text-align: center;
    padding: 30px 15px;
    background: rgba(6, 14, 28, 0.9);
    border: 2px solid #00ff88;
    border-radius: 12px;
}

.cyber-all-done-icon { font-size: 2.8rem; margin-bottom: 8px; }
.cyber-all-done-title { font-size: 1.2rem; font-weight: 900; color: #00ff88; margin-bottom: 4px; }
.cyber-all-done-desc { font-size: 0.82rem; color: #94a3b8; }

/* TAB 3: STATS GRID */
.cyber-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cyber-stat-card {
    background: rgba(6, 14, 28, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.cyber-stat-card.card-cyan { border-left: 3.5px solid #00f0ff; }
.cyber-stat-card.card-green { border-left: 3.5px solid #00ff88; }
.cyber-stat-card.card-amber { border-left: 3.5px solid #ffaa00; }
.cyber-stat-card.card-purple { border-left: 3.5px solid #e040fb; }
.cyber-stat-card.card-red { border-left: 3.5px solid #ff0055; }

.cyber-stat-icon {
    font-size: 1.4rem;
    color: #94a3b8;
    width: 32px;
    text-align: center;
}

.cyber-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cyber-stat-label {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #94a3b8;
    text-transform: uppercase;
}

.cyber-stat-value {
    font-size: 1.05rem;
    font-weight: 900;
}

.cyber-sub-stat {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
}

.text-cyan { color: #00f0ff; }
.text-green { color: #00ff88; }
.text-amber { color: #ffaa00; }
.text-purple { color: #e040fb; }
.text-red { color: #ff0055; }

/* TAB 4: ACHIEVEMENTS */
.cyber-achievements-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-achievement-card {
    background: rgba(6, 14, 28, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.cyber-achievement-card.is-unlocked {
    border-color: rgba(0, 255, 136, 0.45);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(6, 14, 28, 0.95) 100%);
}

.cyber-achievement-card.is-locked {
    opacity: 0.55;
    filter: grayscale(80%);
}

.cyber-ach-icon-pod {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #081426;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.cyber-achievement-card.is-unlocked .cyber-ach-icon-pod {
    border-color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.cyber-ach-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cyber-ach-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cyber-ach-title {
    font-size: 0.95rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.cyber-ach-status-unlocked {
    font-size: 0.65rem;
    font-weight: 900;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.12);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid #00ff88;
}

.cyber-ach-status-locked {
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 6px;
}

.cyber-ach-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.3;
}

.cyber-ach-reward {
    font-size: 0.72rem;
    color: #ffaa00;
    font-weight: 800;
}

/* =========================================
   TARGET NETRUNNER PROFILE MODAL (WYWIAD)
   ========================================= */
.cyber-target-profile-window {
    max-width: 400px;
    border-color: #00f0ff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 240, 255, 0.35);
}

.badge-target-profile {
    background: rgba(0, 240, 255, 0.12);
    border-color: #00f0ff;
    color: #00f0ff;
}

.cyber-target-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(6, 16, 32, 0.95);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}

.cyber-target-profile-avatar-pod {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #081426;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-target-profile-avatar-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.cyber-target-profile-hq-tag {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #ffaa00;
    color: #030814;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 5px;
    border: 1.5px solid #ffffff;
}

.cyber-target-profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cyber-target-profile-name {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.cyber-target-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cyber-target-clan-chip {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid #00ff88;
    padding: 1px 6px;
    border-radius: 6px;
}

.cyber-target-clan-none {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
}

.cyber-target-stats-row {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(3, 8, 18, 0.85);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}

.cyber-target-stat-pod {
    flex: 1;
    background: rgba(6, 14, 28, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cyber-target-stat-lbl {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #94a3b8;
    text-transform: uppercase;
}

.cyber-target-stat-val {
    font-size: 0.95rem;
    font-weight: 900;
}

.cyber-target-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px 20px 18px;
}

.cyber-btn-target-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cyber-btn-target-action:hover {
    transform: translateY(-2px);
    background: #ffffff;
}

.btn-target-scout {
    background: linear-gradient(135deg, #00f0ff 0%, #00a8ff 100%);
    color: #030814;
    box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35);
}
.btn-target-scout:hover { color: #00a8ff; box-shadow: 0 0 16px #00f0ff; }

.btn-target-attack {
    background: linear-gradient(135deg, #ff0055 0%, #cc0044 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 0, 85, 0.35);
}
.btn-target-attack:hover { color: #ff0055; box-shadow: 0 0 16px #ff0055; }

.btn-target-arena {
    background: linear-gradient(135deg, #ffaa00 0%, #e69500 100%);
    color: #030814;
    box-shadow: 0 4px 14px rgba(255, 170, 0, 0.35);
}
.btn-target-arena:hover { color: #ffaa00; box-shadow: 0 0 16px #ffaa00; }

.btn-target-share {
    background: rgba(14, 28, 54, 0.95);
    border-color: rgba(0, 240, 255, 0.4);
    color: #00f0ff;
}
.btn-target-share:hover { color: #030814; background: #00f0ff; }

/* Responsive adjustments for Profile */
@media (max-width: 480px) {
    .cyber-profile-window {
        max-height: 94vh;
    }
    .cyber-profile-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px 12px;
    }
    .cyber-profile-tab {
        font-size: 0.68rem;
        padding: 6px 4px;
        min-width: 0;
        text-align: center;
    }
    .cyber-daily-capsules-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
    }
    .cyber-daily-day-pod {
        min-height: 70px;
        padding: 5px 1px;
    }
    .cyber-daily-day-pod.is-current {
        transform: none;
    }
    .cyber-day-label {
        font-size: 0.52rem;
    }
    .cyber-day-icon {
        font-size: 1.15rem;
        margin: 2px 0;
    }
    .cyber-day-status {
        font-size: 0.48rem;
    }
    .cyber-profile-stats-grid {
        grid-template-columns: 1fr;
    }
    .cyber-profile-body-scroll {
        padding: 12px 14px 16px 14px;
    }
}

/* =========================================
   1. DZIENNIK BOJOWY (BATTLE REPORTS)
   ========================================= */
.cyber-reports-window {
    max-width: 580px;
    border-color: #00f0ff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
}

.cyber-reports-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(0, 240, 255, 0.3);
    position: relative;
}

.cyber-reports-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #00f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
    flex-shrink: 0;
}

.cyber-reports-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-reports-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00f0ff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-reports-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.cyber-reports-body {
    padding: 16px;
    max-height: 72vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00f0ff rgba(3, 8, 20, 0.6);
}

.cyber-reports-empty {
    text-align: center;
    padding: 36px 16px;
    background: rgba(3, 8, 20, 0.6);
    border: 2px dashed rgba(0, 240, 255, 0.3);
    border-radius: 14px;
}

.cyber-reports-empty .cyber-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.8;
}

.cyber-reports-empty .cyber-empty-title {
    font-size: 1rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 1px;
}

.cyber-reports-empty .cyber-empty-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

.cyber-reports-loading {
    text-align: center;
    padding: 40px 16px;
}

.cyber-loading-text {
    margin-top: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #00f0ff;
    letter-spacing: 1.5px;
}

.cyber-reports-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-report-card {
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-left-width: 5px;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.cyber-report-card:hover {
    transform: translateY(-2px);
}

.cyber-report-card.type-scout {
    border-left-color: #00f0ff;
}

.cyber-report-card.type-defense {
    border-left-color: #00ff88;
}

.cyber-report-card.type-assault {
    border-left-color: #ff0055;
}

.cyber-report-card.outcome-win {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 255, 136, 0.05);
}

.cyber-report-card.outcome-defeat {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 0, 85, 0.05);
}

.cyber-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-report-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #e2e8f0;
}

.cyber-report-outcome-badge {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.cyber-report-outcome-badge.is-victory {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
    color: #00ff88;
}

.cyber-report-outcome-badge.is-defeat {
    background: rgba(255, 0, 85, 0.15);
    border-color: #ff0055;
    color: #ff0055;
}

.cyber-report-time {
    font-size: 0.68rem;
    color: #64748b;
    font-family: monospace;
}

.cyber-report-desc {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.45;
    margin-bottom: 8px;
}

.cyber-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.cyber-report-loot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 800;
}

.cyber-report-loot.loot-positive {
    color: #ffaa00;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

.cyber-report-loot.loot-negative {
    color: #ff0055;
}

.cyber-report-wounded {
    font-size: 0.72rem;
    color: #ffaa00;
    font-weight: 700;
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
}

/* =========================================
   2. GLOBALNY RANKING (LEADERBOARD)
   ========================================= */
.cyber-leaderboard-window {
    max-width: 600px;
    border-color: #ffd700;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 215, 0, 0.35);
}

.cyber-leaderboard-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(255, 215, 0, 0.35);
    position: relative;
}

.cyber-leaderboard-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
    flex-shrink: 0;
}

.cyber-leaderboard-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-leaderboard-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffd700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-leaderboard-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-leaderboard-body {
    padding: 16px;
    max-height: 72vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ffd700 rgba(3, 8, 20, 0.6);
}

.cyber-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-leaderboard-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.cyber-leaderboard-card:hover {
    transform: translateX(3px);
    border-color: #00f0ff;
}

.cyber-leaderboard-card.rank-gold {
    border: 2px solid #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(4, 10, 22, 0.95) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.25);
}

.cyber-leaderboard-card.rank-silver {
    border: 2px solid #cbd5e1;
    background: linear-gradient(135deg, rgba(203, 213, 225, 0.1) 0%, rgba(4, 10, 22, 0.95) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(203, 213, 225, 0.2);
}

.cyber-leaderboard-card.rank-bronze {
    border: 2px solid #cd7f32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(4, 10, 22, 0.95) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(205, 127, 50, 0.2);
}

.cyber-leaderboard-card.is-current-user {
    border-color: #00f0ff;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.cyber-lb-rank-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #030814;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rank-gold .cyber-lb-rank-badge {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}

.rank-silver .cyber-lb-rank-badge {
    border-color: #cbd5e1;
    background: rgba(203, 213, 225, 0.15);
}

.rank-bronze .cyber-lb-rank-badge {
    border-color: #cd7f32;
    background: rgba(205, 127, 50, 0.15);
}

.cyber-lb-rank-num {
    font-size: 1.1rem;
    font-weight: 900;
    color: #94a3b8;
}

.rank-gold .cyber-lb-rank-num { color: #ffd700; }
.rank-silver .cyber-lb-rank-num { color: #cbd5e1; }
.rank-bronze .cyber-lb-rank-num { color: #cd7f32; }

.cyber-lb-player-info {
    flex-grow: 1;
    min-width: 0;
}

.cyber-lb-player-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cyber-lb-username {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyber-lb-me-tag {
    font-size: 0.58rem;
    font-weight: 900;
    background: #00f0ff;
    color: #030814;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cyber-lb-hq-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #00f0ff;
    margin-top: 1px;
}

.cyber-lb-score-pod {
    text-align: right;
    flex-shrink: 0;
}

.cyber-lb-score-val {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffaa00;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

.cyber-lb-score-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 1px;
}

/* =========================================
   3. DAILY OPS (CHALLENGES PANEL)
   ========================================= */
.cyber-dailyops-window {
    max-width: 560px;
    border-color: #ffaa00;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 170, 0, 0.35);
}

.cyber-dailyops-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(255, 170, 0, 0.35);
    position: relative;
}

.cyber-dailyops-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #ffaa00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(255, 170, 0, 0.45);
    flex-shrink: 0;
}

.cyber-dailyops-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-dailyops-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffaa00;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-dailyops-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-dailyops-body {
    padding: 16px;
    max-height: 72vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ffaa00 rgba(3, 8, 20, 0.6);
}

.cyber-dailyops-progress-card {
    background: linear-gradient(135deg, rgba(14, 28, 54, 0.9) 0%, rgba(4, 10, 22, 0.95) 100%);
    border: 2px solid rgba(255, 170, 0, 0.3);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.cyber-dailyops-points-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cyber-dailyops-points-val {
    font-size: 1rem;
    font-weight: 900;
    color: #ffaa00;
    letter-spacing: 0.5px;
}

.cyber-dailyops-reset-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-dailyops-bar-track {
    width: 100%;
    height: 10px;
    background: #030814;
    border-radius: 8px;
    border: 1px solid rgba(255, 170, 0, 0.4);
    overflow: hidden;
    position: relative;
}

.cyber-dailyops-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffaa00 0%, #ff5500 100%);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.7);
    transition: width 0.4s ease;
}

.cyber-dailyops-tiers-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.cyber-dailyops-tier-pod {
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
    transition: all 0.2s ease;
}

.cyber-dailyops-tier-pod.is-done {
    border-color: #00ff88;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(4, 10, 22, 0.95) 100%);
}

.cyber-dailyops-tier-pod.is-ready {
    border-color: #ffaa00;
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15) 0%, rgba(4, 10, 22, 0.95) 100%);
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.35);
    animation: cyberPulseGlow 2s infinite;
}

.cyber-dailyops-tier-pts {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
}

.is-done .cyber-dailyops-tier-pts { color: #00ff88; }
.is-ready .cyber-dailyops-tier-pts { color: #ffaa00; }

.cyber-dailyops-tier-reward {
    font-size: 0.68rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 4px 0;
}

.cyber-dailyops-tier-btn {
    font-size: 0.68rem;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 8px;
    border: 2px solid #030814;
    background: linear-gradient(135deg, #ffaa00 0%, #ff6600 100%);
    color: #030814;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 170, 0, 0.4);
}

.cyber-dailyops-tier-btn:hover {
    transform: scale(1.05);
}

.cyber-dailyops-badge-done {
    font-size: 0.65rem;
    font-weight: 900;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid #00ff88;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
}

.cyber-dailyops-badge-locked {
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
}

.cyber-dailyops-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyber-dailyops-task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.cyber-dailyops-task-card.is-done {
    border-color: rgba(0, 255, 136, 0.4);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.05) 0%, rgba(3, 8, 20, 0.98) 100%);
}

.cyber-dailyops-task-info {
    flex-grow: 1;
    min-width: 0;
}

.cyber-dailyops-task-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.is-done .cyber-dailyops-task-name {
    color: #00ff88;
}

.cyber-dailyops-task-bar-track {
    width: 100%;
    height: 6px;
    background: #030814;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-top: 6px;
}

.cyber-dailyops-task-bar-fill {
    height: 100%;
    background: #ffaa00;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.is-done .cyber-dailyops-task-bar-fill {
    background: #00ff88;
}

.cyber-dailyops-task-score {
    text-align: right;
    flex-shrink: 0;
}

.cyber-dailyops-task-progress-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

.cyber-dailyops-task-pts {
    font-size: 0.8rem;
    font-weight: 900;
    color: #ffaa00;
}

/* =========================================
   4. FOCUS LINK MINIGAME
   ========================================= */
.cyber-focus-window {
    max-width: 520px;
    border-color: #ff0055;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 0, 85, 0.45);
}

.cyber-focus-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(255, 0, 85, 0.35);
    position: relative;
}

.cyber-focus-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #ff0055;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(255, 0, 85, 0.5);
    flex-shrink: 0;
}

.cyber-focus-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-focus-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ff0055;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-focus-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-focus-body {
    padding: 24px 20px;
    text-align: center;
}

.cyber-focus-instructions {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
    margin-bottom: 24px;
    background: rgba(3, 8, 20, 0.6);
    border: 1px solid rgba(255, 0, 85, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
}

.cyber-focus-gauge-wrapper {
    position: relative;
    width: 100%;
    height: 48px;
    background: #030814;
    border: 2px solid #ff0055;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: inset 0 0 20px #000, 0 0 15px rgba(255, 0, 85, 0.2);
}

.cyber-focus-sweetspot {
    position: absolute;
    top: 0;
    left: 46.5%;
    width: 7%;
    height: 100%;
    background: rgba(0, 255, 204, 0.25);
    border-left: 2px solid #00ffcc;
    border-right: 2px solid #00ffcc;
    box-shadow: 0 0 16px rgba(0, 255, 204, 0.8);
}

.cyber-focus-needle {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 52px;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0 0 15px #fff, 0 0 30px #ff0055;
    transform: translateX(-50%);
    transition: none;
}

.cyber-focus-btn-stop {
    width: 100%;
    padding: 14px;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(180deg, #ff1a66 0%, #cc0044 100%);
    border: 2px solid #030814;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(255, 0, 85, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    cursor: crosshair;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cyber-focus-btn-stop:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 85, 0.8);
}

.cyber-focus-btn-stop:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(255, 0, 85, 0.5);
}

.cyber-focus-result-box {
    padding: 14px;
    margin-top: 14px;
    border-radius: 12px;
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid rgba(255, 0, 85, 0.4);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cyber-focus-btn-finish {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: transparent;
    color: #94a3b8;
    border: 2px solid #64748b;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cyber-focus-btn-finish:hover {
    color: #ffffff;
    border-color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
}

/* =========================================
   5. GLOBALNA SIEĆ (GRID NODES & MINIGAME)
   ========================================= */
.cyber-grid-window {
    max-width: 780px;
    border-color: #00ff88;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 255, 136, 0.35);
}

.cyber-grid-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(0, 255, 136, 0.35);
    position: relative;
}

.cyber-grid-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #00ff88;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.45);
    flex-shrink: 0;
}

.cyber-grid-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-grid-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00ff88;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-grid-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-grid-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00ff88;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cyber-grid-refresh-btn:hover:not(:disabled) {
    background: #00ff88;
    color: #030814;
}

.cyber-grid-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cyber-grid-body {
    padding: 16px;
    max-height: 74vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff88 rgba(3, 8, 20, 0.6);
}

.cyber-grid-desc-pill {
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    background: rgba(3, 8, 20, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 16px;
}

.cyber-grid-nodes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cyber-grid-node-card {
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(0, 255, 136, 0.35);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cyber-grid-node-card:hover {
    transform: translateY(-2px);
    border-color: #00ff88;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 255, 136, 0.2);
}

.cyber-grid-node-card.is-locked {
    border-color: rgba(255, 0, 85, 0.35);
    opacity: 0.75;
    filter: grayscale(40%);
}

.cyber-grid-node-card.is-locked:hover {
    border-color: #ff0055;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 0, 85, 0.2);
}

.cyber-grid-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(0, 255, 136, 0.1);
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.is-locked .cyber-grid-node-header {
    background: rgba(255, 0, 85, 0.1);
    border-bottom-color: rgba(255, 0, 85, 0.3);
}

.cyber-grid-node-name {
    font-size: 0.9rem;
    font-weight: 900;
    color: #00ff88;
    display: flex;
    align-items: center;
    gap: 6px;
}

.is-locked .cyber-grid-node-name {
    color: #ff0055;
}

.cyber-grid-node-timer {
    font-size: 0.68rem;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(3, 8, 20, 0.7);
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cyber-grid-node-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cyber-grid-node-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.78rem;
}

.cyber-grid-node-stat-label {
    color: #94a3b8;
}

.cyber-grid-node-stat-val {
    font-weight: 800;
    color: #ffaa00;
}

.cyber-grid-node-rankings-box {
    margin: 10px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(3, 8, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cyber-grid-node-rankings-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 6px;
}

.cyber-grid-ranking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 3px 4px;
    border-radius: 4px;
}

.cyber-grid-ranking-row.is-me {
    background: rgba(0, 255, 136, 0.12);
    border-left: 2px solid #00ff88;
}

.cyber-grid-node-btn {
    margin-top: auto;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cyber-grid-node-btn.btn-hack {
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
    color: #030814;
    border: 2px solid #030814;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.35);
}

.cyber-grid-node-btn.btn-hack:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 255, 136, 0.5);
}

.cyber-grid-node-btn.btn-locked {
    background: rgba(255, 0, 85, 0.1);
    color: #ff0055;
    border: 2px solid rgba(255, 0, 85, 0.3);
    cursor: not-allowed;
}

/* Matryca Minigra (Matrix Overload) */
.cyber-gridgame-window {
    max-width: 440px;
    border-color: #00ffcc;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 255, 204, 0.45);
    text-align: center;
}

.cyber-gridgame-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(3, 8, 20, 0.8);
    border: 1px solid rgba(0, 255, 204, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.cyber-gridgame-hud-stat {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
}

.cyber-gridgame-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    user-select: none;
}

.cyber-gridgame-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: crosshair;
    transition: all 0.1s ease;
    border: 2px solid #1e293b;
    background: #070e1b;
}

.cyber-gridgame-cell.is-active {
    background: rgba(0, 255, 204, 0.85);
    border-color: #00ffcc;
    box-shadow: 0 0 16px #00ffcc;
}

.cyber-gridgame-cell.is-trap {
    background: rgba(255, 0, 85, 0.85);
    border-color: #ff0055;
    box-shadow: 0 0 16px #ff0055;
}

/* =========================================
   6. KLAN / SYNDYKAT (CLAN PANEL)
   ========================================= */
.cyber-clan-window {
    max-width: 620px;
    border-color: #00f0ff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
}

.cyber-clan-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(0, 240, 255, 0.35);
    position: relative;
}

.cyber-clan-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #00f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
    flex-shrink: 0;
}

.cyber-clan-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-clan-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00f0ff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-clan-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-clan-body {
    padding: 16px;
    max-height: 74vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00f0ff rgba(3, 8, 20, 0.6);
}

.cyber-clan-header-card {
    background: linear-gradient(135deg, rgba(14, 28, 54, 0.9) 0%, rgba(4, 10, 22, 0.95) 100%);
    border: 2px solid rgba(0, 240, 255, 0.35);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.cyber-clan-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 0.5px;
}

.cyber-clan-desc-text {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 6px 0;
}

.cyber-clan-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cyber-clan-meta-pill {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(3, 8, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.cyber-clan-tabs-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    background: rgba(3, 8, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
}

.cyber-clan-tab-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-clan-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.cyber-clan-tab-btn.is-active {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* Responsive adjustments for the 6 screens */
@media (max-width: 480px) {
    .cyber-reports-window,
    .cyber-leaderboard-window,
    .cyber-dailyops-window,
    .cyber-focus-window,
    .cyber-grid-window,
    .cyber-clan-window {
        max-height: 94vh;
    }
    .cyber-reports-hero,
    .cyber-leaderboard-hero,
    .cyber-dailyops-hero,
    .cyber-focus-hero,
    .cyber-grid-hero,
    .cyber-clan-hero {
        padding: 12px 14px;
        gap: 10px;
    }
    .cyber-reports-hero-pod,
    .cyber-leaderboard-hero-pod,
    .cyber-dailyops-hero-pod,
    .cyber-focus-hero-pod,
    .cyber-grid-hero-pod,
    .cyber-clan-hero-pod {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .cyber-reports-title,
    .cyber-leaderboard-title,
    .cyber-dailyops-title,
    .cyber-focus-title,
    .cyber-grid-title,
    .cyber-clan-title {
        font-size: 1.1rem;
    }
    .cyber-grid-nodes-grid {
        grid-template-columns: 1fr;
    }
    .cyber-clan-tabs-bar {
        gap: 4px;
        padding: 4px;
    }
    .cyber-clan-tab-btn {
        padding: 6px 2px;
        font-size: 0.8rem;
    }
}

/* =========================================
   7. TURNIEJE & DRABINKA (TOURNAMENTS & BRACKET)
   ========================================= */
.cyber-tournament-window {
    max-width: 620px;
    border-color: #e040fb;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(224, 64, 251, 0.35);
}

.cyber-tournament-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(224, 64, 251, 0.15) 0%, rgba(4, 10, 22, 0.8) 100%);
    border-bottom: 2px solid rgba(224, 64, 251, 0.35);
    position: relative;
}

.cyber-tournament-hero-pod {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #030814;
    border: 2px solid #e040fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 16px rgba(224, 64, 251, 0.45);
    flex-shrink: 0;
}

.cyber-tournament-hero-meta {
    flex-grow: 1;
    min-width: 0;
}

.cyber-tournament-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #e040fb;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cyber-tournament-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.cyber-tournament-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    background: rgba(3, 8, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
}

.cyber-tournament-tab-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cyber-tournament-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.cyber-tournament-tab-btn.is-active {
    background: rgba(224, 64, 251, 0.15);
    border-color: #e040fb;
    color: #e040fb;
    box-shadow: 0 0 10px rgba(224, 64, 251, 0.3);
}

.cyber-tournament-card {
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.95) 0%, rgba(3, 8, 20, 0.98) 100%);
    border: 2px solid rgba(224, 64, 251, 0.35);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cyber-tournament-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(224, 64, 251, 0.2);
}

.cyber-tournament-card.tier-500 {
    border-color: #ffaa00;
}

.cyber-tournament-card.tier-500:hover {
    border-color: #ffd700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.25);
}

.cyber-tournament-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cyber-tournament-card-title {
    font-size: 1.05rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cyber-tournament-ban-box {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 0, 85, 0.08);
    border: 1px dashed rgba(255, 0, 85, 0.3);
}

.cyber-tournament-ban-btn {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(3, 8, 20, 0.8);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-tournament-ban-btn.is-banned {
    background: #ff0055;
    border-color: #ff0055;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.5);
}

/* Drabinka Turniejowa (Bracket) */
.cyber-bracket-window {
    max-width: 640px;
    border-color: #e040fb;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(224, 64, 251, 0.35);
}

.cyber-bracket-winner-pod {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(4, 10, 22, 0.95) 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.25);
}

.cyber-bracket-round-block {
    margin-bottom: 16px;
}

.cyber-bracket-round-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.cyber-bracket-match-card {
    background: rgba(8, 18, 36, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cyber-bracket-match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding: 2px 0;
}

.cyber-bracket-match-row.is-winner {
    color: #00ff88 !important;
    font-weight: 800;
}

/* Turniej BO5 Minigra */
.cyber-bo5-window {
    max-width: 440px;
    border-color: #ffaa00;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 170, 0, 0.45);
    text-align: center;
}

.cyber-bo5-scores-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cyber-bo5-score-pod {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #030814;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
    color: #94a3b8;
}

.cyber-bo5-score-pod.is-win {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.cyber-bo5-score-pod.is-mid {
    border-color: #ffaa00;
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
}

.cyber-bo5-score-pod.is-loss {
    border-color: #ff0055;
    background: rgba(255, 0, 85, 0.2);
    color: #ff0055;
}

/* =========================================
   8. MINIGRA SKRZYNEK (CHEST SAFE-CRACKER)
   ========================================= */
.cyber-chestgame-window {
    max-width: 440px;
    border-color: #e040fb;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 40px rgba(224, 64, 251, 0.45);
    text-align: center;
}

.cyber-chestgame-lives-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.cyber-chestgame-heart {
    font-size: 1.3rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cyber-chestgame-heart.is-alive {
    color: #ff0055;
    filter: drop-shadow(0 0 6px #ff0055);
}

.cyber-chestgame-heart.is-lost {
    color: #334155;
    opacity: 0.4;
}

.cyber-chestgame-rings-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cyber-chestgame-ring-pod {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    background: #030814;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #64748b;
    transition: all 0.2s ease;
}

.cyber-chestgame-ring-pod.is-completed {
    border-color: #00ffcc;
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.15);
    box-shadow: 0 0 12px rgba(0, 255, 204, 0.4);
}

.cyber-chestgame-ring-pod.is-active {
    border-color: #e040fb;
    color: #e040fb;
    box-shadow: 0 0 12px rgba(224, 64, 251, 0.4);
    animation: cyberPulseGlow 1.5s infinite;
}

.cyber-chestgame-svg-wrap {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}

.cyber-chestgame-center-meta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
}

/* =========================================
   9. MINIGRA FLAPPY FIREWALL
   ========================================= */
.cyber-flappy-window {
    max-width: 420px;
    border-color: #00ffcc;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 255, 204, 0.45);
    text-align: center;
}

.cyber-flappy-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(3, 8, 20, 0.85);
    border: 1px solid rgba(0, 255, 204, 0.25);
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.cyber-flappy-arena {
    position: relative;
    width: 270px;
    height: 380px;
    background: #040914;
    border: 2px solid rgba(0, 255, 204, 0.4);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: inset 0 0 20px #000, 0 0 16px rgba(0, 255, 204, 0.2);
}

/* ====================================================
   CYBERPUNK HUD TOAST SYSTEM (NEON TRANSFERS & NOTIFICATIONS)
   ==================================================== */
.cyber-toast-container {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 440px;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.cyber-toast {
    pointer-events: auto;
    width: 100%;
    background: linear-gradient(135deg, rgba(8, 20, 38, 0.96) 0%, rgba(4, 10, 22, 0.98) 100%);
    border: 2px solid #00f0ff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 240, 255, 0.35);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    padding: 10px 14px;
    position: relative;
    overflow: hidden;
    animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #f1f5f9;
}

.cyber-toast.cyber-toast-success {
    border-color: #00ffcc;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 255, 204, 0.35);
}

.cyber-toast.cyber-toast-warning {
    border-color: #ffaa00;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 170, 0, 0.35);
}

.cyber-toast.cyber-toast-error {
    border-color: #ff0055;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 0, 85, 0.35);
}

.cyber-toast-icon-pod {
    font-size: 1.3rem;
    line-height: 1;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cyber-toast-content {
    flex-grow: 1;
    min-width: 0;
}

.cyber-toast-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.cyber-toast-tag {
    font-size: 0.65rem;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
}

.cyber-toast-title {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #00f0ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cyber-toast-success .cyber-toast-title { color: #00ffcc; }
.cyber-toast-warning .cyber-toast-title { color: #ffaa00; }
.cyber-toast-error .cyber-toast-title { color: #ff0055; }

.cyber-toast-body {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #cbd5e1;
    word-break: break-word;
}

.cyber-toast-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 8px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.cyber-toast-close:hover {
    color: #ff0055;
}

.cyber-toast-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #00f0ff;
    width: 100%;
    animation: toastTimer linear forwards;
}
.cyber-toast-success .cyber-toast-timer-bar { background: #00ffcc; }
.cyber-toast-warning .cyber-toast-timer-bar { background: #ffaa00; }
.cyber-toast-error .cyber-toast-timer-bar { background: #ff0055; }

.cyber-toast:hover .cyber-toast-timer-bar,
.cyber-toast-container:hover .cyber-toast-timer-bar {
    animation-play-state: paused !important;
}

@keyframes toastTimer {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes toastSlideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =========================================
   10. LOOT MODAL & CHEST DECODING OVERLAY
   ========================================= */
.cyber-loot-window {
    max-width: 440px;
    margin: 0 auto;
    border-color: #ffaa00;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 170, 0, 0.45);
    text-align: center;
}

.cyber-loot-window.is-error {
    border-color: #ff0055;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 0, 85, 0.45);
}

.cyber-loot-body {
    padding: 20px;
}

.cyber-loot-icon-pod {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #030814;
    border: 3px solid #ffaa00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 16px auto;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.5);
}

.is-error .cyber-loot-icon-pod {
    border-color: #ff0055;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.5);
}

.cyber-loot-card {
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid rgba(255, 170, 0, 0.3);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f1f5f9;
}

.is-error .cyber-loot-card {
    border-color: rgba(255, 0, 85, 0.3);
}

.cyber-chest-decode-overlay {
    position: fixed;
    inset: 0;
    z-index: 5500;
    background: rgba(2, 6, 16, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-chest-decode-card {
    background: linear-gradient(135deg, rgba(8, 18, 36, 0.98) 0%, rgba(3, 8, 20, 0.99) 100%);
    border: 3px solid #00f0ff;
    border-radius: 20px;
    padding: 28px 32px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.4);
    position: relative;
    overflow: hidden;
}

.cyber-chest-decode-card::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 4px;
    background: #00f0ff;
    box-shadow: 0 0 15px #00f0ff, 0 0 30px #00f0ff;
    animation: cyberScanline 1.8s infinite ease-in-out;
}

@keyframes cyberScanline {
    0% { top: -10%; }
    50% { top: 110%; }
    100% { top: -10%; }
}

/* =========================================
   11. BATTLE REPORT MODAL NOTIFICATION
   ========================================= */
.cyber-battlereport-window {
    max-width: 520px;
    border-color: #00f0ff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 240, 255, 0.35);
}

.cyber-battlereport-window.is-victory {
    border-color: #00ff88;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 255, 136, 0.35);
}

.cyber-battlereport-window.is-defeat {
    border-color: #ff0055;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 0, 85, 0.35);
}

/* =========================================
   12. TACTICAL OUTLINE BUTTONS
   ========================================= */
.cyber-btn-outline-gold {
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid #ffaa00;
    color: #ffaa00;
    font-weight: 800;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cyber-btn-outline-gold:hover {
    background: rgba(255, 170, 0, 0.15);
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.4);
}

.cyber-btn-outline-cyan {
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid #00f0ff;
    color: #00f0ff;
    font-weight: 800;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cyber-btn-outline-cyan:hover {
    background: rgba(0, 240, 255, 0.15);
    color: #ffffff;
    border-color: #00ffff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

.cyber-btn-outline-pink {
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid #ff0055;
    color: #ff0055;
    font-weight: 800;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cyber-btn-outline-pink:hover {
    background: rgba(255, 0, 85, 0.15);
    color: #ffffff;
    border-color: #ff0055;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.4);
}

.cyber-btn-outline-green {
    background: rgba(3, 8, 20, 0.85);
    border: 2px solid #00ff88;
    color: #00ff88;
    font-weight: 800;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cyber-btn-outline-green:hover {
    background: rgba(0, 255, 136, 0.15);
    color: #ffffff;
    border-color: #00ff88;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.4);
}

/* ==========================================================================
   TERRITORY NODES / POSTERUNKI KONTROLI MAPY (VAULT PANIC COMIC STYLE)
   ========================================================================== */

/* Leaflet DivIcon wrapper */
.cyber-territory-wrapper {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.cyber-territory-marker {
    width: 46px;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    pointer-events: auto !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 350;
}

.cyber-territory-marker:hover {
    transform: scale(1.15) !important;
    z-index: 9999 !important;
}

.cyber-territory-pod {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    background: #0d1527;
    border: 2.5px solid #ff0055;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 0 12px rgba(255,0,85,0.5);
    position: relative;
    z-index: 2;
}

.cyber-territory-marker.syndicate .cyber-territory-pod {
    background: linear-gradient(135deg, #1c030d, #2d0016);
    border-color: #ff0055;
    box-shadow: 0 4px 14px rgba(0,0,0,0.8), 0 0 14px rgba(255, 0, 85, 0.6);
}

.cyber-territory-marker.owned-player .cyber-territory-pod {
    background: linear-gradient(135deg, #021a16, #003328);
    border-color: #00ffaa;
    box-shadow: 0 4px 14px rgba(0,0,0,0.8), 0 0 16px rgba(0, 255, 170, 0.7);
}

.cyber-territory-marker.owned-clan .cyber-territory-pod {
    background: linear-gradient(135deg, #0a0e29, #131b4d);
    border-color: #00f0ff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.8), 0 0 16px rgba(0, 240, 255, 0.7);
}

.cyber-territory-marker.owned-enemy .cyber-territory-pod {
    background: linear-gradient(135deg, #24001d, #3d0032);
    border-color: #ff00b7;
    box-shadow: 0 4px 14px rgba(0,0,0,0.8), 0 0 16px rgba(255, 0, 183, 0.7);
}

.cyber-territory-res {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

.cyber-territory-lvl {
    font-size: 0.72rem;
    font-weight: 900;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cyber-territory-tag {
    margin-top: 2px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #000;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.cyber-territory-marker.owned-player .cyber-territory-tag {
    color: #00ffaa;
    border-color: #00ffaa;
}

.cyber-territory-marker.syndicate .cyber-territory-tag {
    color: #ff4466;
    border-color: #ff0055;
}

.cyber-territory-marker.owned-clan .cyber-territory-tag {
    color: #00f0ff;
    border-color: #00f0ff;
}

.cyber-territory-marker.owned-enemy .cyber-territory-tag {
    color: #ff00b7;
    border-color: #ff00b7;
}

/* Pulsing radar ring */
.cyber-territory-pulse {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: territoryPulse 2.4s ease-out infinite;
}

.cyber-territory-marker.syndicate .cyber-territory-pulse {
    border: 2px solid rgba(255, 0, 85, 0.5);
}
.cyber-territory-marker.owned-player .cyber-territory-pulse {
    border: 2px solid rgba(0, 255, 170, 0.6);
}
.cyber-territory-marker.owned-clan .cyber-territory-pulse {
    border: 2px solid rgba(0, 240, 255, 0.6);
}

@keyframes territoryPulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Active ICE Shield ring */
.cyber-territory-shield-ring {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2.5px dashed #00f0ff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6), inset 0 0 10px rgba(0, 240, 255, 0.3);
    animation: shieldSpin 6s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes shieldSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bouncing Loot Badge for Player */
.cyber-territory-loot-badge {
    position: absolute;
    top: -15px;
    right: -12px;
    background: linear-gradient(135deg, #ffd700, #ff8800);
    color: #000;
    font-size: 0.70rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.95);
    animation: bounceLoot 1.2s ease-in-out infinite alternate;
    z-index: 30;
    pointer-events: none;
    letter-spacing: 0.5px;
}

@keyframes bounceLoot {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

/* ==========================================================================
   TERRITORY MODAL WINDOW (COMIC VAULT PANIC)
   ========================================================================== */

.cyber-territory-window {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 15%, #141f36 0%, #080d19 100%);
    border: 3px solid #00f0ff;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 14px 40px rgba(0,0,0,0.9), 0 0 30px rgba(0,240,255,0.3);
    color: #fff;
    overflow: hidden;
    position: relative;
    animation: territoryModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cyber-territory-window.is-hostile {
    border-color: #ff0055;
    box-shadow: 0 14px 40px rgba(0,0,0,0.9), 0 0 30px rgba(255,0,85,0.35);
}

@keyframes territoryModalPop {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cyber-territory-header {
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.15) 0%, rgba(8, 13, 25, 0.8) 100%);
    border-bottom: 2px solid rgba(0, 240, 255, 0.3);
    padding: 14px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cyber-territory-window.is-hostile .cyber-territory-header {
    background: linear-gradient(180deg, rgba(255, 0, 85, 0.18) 0%, rgba(8, 13, 25, 0.8) 100%);
    border-bottom-color: rgba(255, 0, 85, 0.3);
}

.cyber-territory-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cyber-territory-title-row h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cyber-territory-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cyber-territory-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.cyber-territory-pill.pill-lvl {
    background: #ffd700;
    color: #000;
    border-color: #fff;
}

.cyber-territory-pill.pill-res {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #00f0ff;
}

.cyber-territory-pill.pill-owner {
    background: rgba(255, 0, 85, 0.15);
    border-color: #ff0055;
    color: #ff4466;
}

.cyber-territory-pill.pill-shield {
    background: rgba(0, 240, 255, 0.2);
    border-color: #00f0ff;
    color: #00f0ff;
    animation: shieldPulseGlow 2s infinite;
}

@keyframes shieldPulseGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(0,240,255,0.4); }
    50% { box-shadow: 0 0 16px rgba(0,240,255,0.8); }
}

.cyber-territory-content {
    padding: 16px 18px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-grow: 1;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .cyber-territory-window {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 14px;
    }
    .cyber-territory-header {
        padding: 10px 14px;
        gap: 6px;
    }
    .cyber-territory-title-row h3 {
        font-size: 1.05rem;
    }
    .cyber-territory-content {
        padding: 12px 14px 18px 14px;
        gap: 10px;
    }
    .cyber-territory-intel-grid {
        gap: 6px;
    }
    .cyber-territory-intel-box {
        padding: 6px 8px;
    }
    .cyber-territory-intel-val {
        font-size: 0.95rem;
    }
    .cyber-squad-slider-group {
        padding: 10px 12px;
        gap: 8px;
    }
    .btn-comic-action {
        padding: 11px 16px;
        font-size: 0.88rem;
    }
}

/* Harvest Card (Player Owned) */
.cyber-territory-harvest-card {
    background: linear-gradient(135deg, rgba(0, 255, 170, 0.1) 0%, rgba(2, 26, 22, 0.7) 100%);
    border: 2px solid #00ffaa;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 0 15px rgba(0, 255, 170, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.cyber-territory-harvest-yield {
    font-size: 0.82rem;
    font-weight: 700;
    color: #a7f3d0;
    letter-spacing: 0.5px;
}

.cyber-territory-harvest-loot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cyber-territory-harvest-amount {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    line-height: 1;
}

.cyber-territory-harvest-resname {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
}

/* Garrison Status Card */
.cyber-territory-garrison-card {
    background: rgba(10, 18, 35, 0.8);
    border: 2px solid rgba(0, 240, 255, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-territory-garrison-title {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
}

.cyber-territory-units-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cyber-territory-unit-slot {
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cyber-territory-unit-slot .unit-icon {
    font-size: 1.25rem;
}

.cyber-territory-unit-slot .unit-count {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
}

.cyber-territory-unit-slot .unit-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

/* Tactical Intel Grid (Hostile Node) */
.cyber-territory-intel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cyber-territory-intel-box {
    background: rgba(12, 20, 38, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cyber-territory-intel-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.cyber-territory-intel-val {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
}

/* Sliders for Attack / Reinforce */
.cyber-squad-slider-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(5, 10, 22, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
}

.cyber-squad-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 800;
}

.cyber-squad-slider-header .max-badge-btn {
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid #00f0ff;
    color: #00f0ff;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cyber-squad-slider-header .max-badge-btn:hover {
    background: #00f0ff;
    color: #000;
}

/* Buttons */
.btn-comic-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    border: 2.5px solid #000;
    box-shadow: 0 6px 0 #000, 0 8px 18px rgba(0,0,0,0.6);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-comic-action:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #000, 0 10px 22px rgba(0,0,0,0.7);
}

.btn-comic-action:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,0.5);
}

.btn-comic-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: 0 4px 0 #000;
}

.btn-comic-action.btn-harvest {
    background: linear-gradient(180deg, #00ffaa 0%, #00b377 100%);
    color: #002b1d;
    border-color: #00ffaa;
}

.btn-comic-action.btn-attack {
    background: linear-gradient(180deg, #ff0055 0%, #cc0044 100%);
    color: #fff;
    border-color: #ff3377;
}

.btn-comic-action.btn-reinforce {
    background: linear-gradient(180deg, #00f0ff 0%, #0099cc 100%);
    color: #002233;
    border-color: #33f3ff;
}

/* Close Comic Button */
.btn-close-comic {
    background: #182238;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-close-comic:hover {
    background: #ff0055;
    border-color: #ff0055;
    color: #fff;
    transform: rotate(90deg);
}

/* ==========================================================================
   CYBER-FOG & SONAR RADAR STYLES (Vault Panic / Cyberpunk Military HUD)
   ========================================================================== */
.cyber-fog-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 450;
}

/* Sonar blip marker in fog */
.cyber-territory-marker.in-fog-sonar {
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6)) contrast(1.1);
    opacity: 0.82;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cyber-territory-marker.in-fog-sonar:hover {
    opacity: 1;
    transform: scale(1.15) !important;
    z-index: 9999 !important;
}

.cyber-sonar-blip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(5, 12, 26, 0.95), rgba(12, 22, 45, 0.95));
    border: 2px dashed #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
    animation: sonarBorderPulse 2s ease-in-out infinite;
}

.cyber-territory-marker.in-fog-sonar.syndicate .cyber-sonar-blip {
    border-color: #ff0055;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}

.cyber-territory-marker.in-fog-sonar.owned-player .cyber-sonar-blip {
    border-color: #00ffaa;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.4);
}

.cyber-territory-marker.in-fog-sonar.owned-clan .cyber-sonar-blip {
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.cyber-sonar-icon {
    font-size: 0.9rem;
    display: inline-block;
    animation: sonarSpin 4s linear infinite;
}

.cyber-sonar-res {
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.cyber-sonar-dist {
    margin-top: 2px;
    padding: 1px 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #00f0ff;
    background: rgba(3, 8, 18, 0.92);
    border: 1px solid rgba(0, 240, 255, 0.5);
    border-radius: 4px;
    white-space: nowrap;
    text-shadow: 0 0 4px #00f0ff;
}

.cyber-sonar-ping {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 240, 255, 0.6);
    pointer-events: none;
    animation: sonarPingAnimation 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes sonarPingAnimation {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes sonarBorderPulse {
    0%, 100% { border-color: #00f0ff; }
    50% { border-color: rgba(0, 240, 255, 0.3); }
}

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

/* Hideout marker in fog */
.cyber-hideout-marker.in-fog-hideout {
    opacity: 0.55;
    filter: grayscale(0.5) drop-shadow(0 0 6px rgba(255, 0, 85, 0.5));
}

.cyber-hideout-marker.in-fog-hideout:hover {
    opacity: 0.9;
}

/* Modal notice when clicking a node in the fog */
.cyber-fog-modal-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(0, 240, 255, 0.08);
    border: 1.5px dashed #00f0ff;
    margin-bottom: 14px;
    color: #e0f8ff;
    font-size: 0.85rem;
    line-height: 1.35;
}

.cyber-fog-modal-notice .sonar-notice-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    animation: sonarNoticePulse 1.8s ease-in-out infinite;
}

@keyframes sonarNoticePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #00f0ff); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 10px #00f0ff); }
}

/* Hideout Sonar Blip (Crimson) */
.cyber-territory-marker.in-fog-sonar.hideout-sonar .cyber-sonar-blip {
    border-color: #ff0055;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.55);
    background: linear-gradient(135deg, rgba(30, 5, 15, 0.95), rgba(45, 10, 25, 0.95));
}
.cyber-territory-marker.in-fog-sonar.hideout-sonar .cyber-sonar-dist {
    color: #ff0055;
    border-color: rgba(255, 0, 85, 0.6);
    text-shadow: 0 0 4px #ff0055;
}
.cyber-sonar-ping.ping-crimson {
    border-color: rgba(255, 0, 85, 0.7);
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
}
.cyber-hideout-fog-tag {
    font-size: 0.72rem;
    font-weight: 900;
    color: #ff0055;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(255, 0, 85, 0.6);
}

/* Chest Sonar Blip (Amber/Gold) */
.cyber-territory-marker.in-fog-sonar.chest-sonar .cyber-sonar-blip {
    border-color: #ffaa00;
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.55);
    background: linear-gradient(135deg, rgba(28, 20, 5, 0.95), rgba(45, 32, 10, 0.95));
    padding: 3px 6px;
    border-radius: 12px;
    justify-content: center;
}
.cyber-territory-marker.in-fog-sonar.chest-sonar .cyber-sonar-dist {
    color: #ffaa00;
    border-color: rgba(255, 170, 0, 0.6);
    text-shadow: 0 0 4px #ffaa00;
}
.cyber-sonar-ping.ping-amber {
    border-color: rgba(255, 170, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
}
.cyber-chest-fog-tag {
    font-size: 0.68rem;
    font-weight: 900;
    color: #ffaa00;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(255, 170, 0, 0.6);
}

/* Tactical Intel Notice Tiers */
.cyber-fog-modal-notice.notice-mid {
    background: rgba(255, 170, 0, 0.08);
    border-color: #ffaa00;
}
.cyber-fog-modal-notice.notice-mid .sonar-notice-icon {
    filter: drop-shadow(0 0 8px #ffaa00);
}
.cyber-fog-modal-notice.notice-deep {
    background: rgba(255, 0, 85, 0.09);
    border-color: #ff0055;
}
.cyber-fog-modal-notice.notice-deep .sonar-notice-icon {
    filter: drop-shadow(0 0 8px #ff0055);
}

/* =========================================================
   LIVE CYBER WEATHER ENGINE & ATMOSPHERIC TELEMETRY MODAL
   ========================================================= */
.cyber-dock-weather-btn {
    border-color: #00f0ff;
}

.cyber-weather-dock-icon {
    font-size: 1.28rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    transition: transform 0.2s ease;
}

.cyber-dock-weather-btn:hover .cyber-weather-dock-icon {
    transform: scale(1.15);
}

.cyber-weather-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: cyberFadeIn 0.2s ease-out;
}

.cyber-weather-card {
    background: linear-gradient(180deg, #0e172a 0%, #060b14 100%);
    border: 2.5px solid #00f0ff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 26px rgba(0, 240, 255, 0.45);
    border-radius: 18px;
    width: 100%;
    max-width: 410px;
    padding: 20px;
    color: #ffffff;
    position: relative;
    box-sizing: border-box;
}

.cyber-weather-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.25);
}

.cyber-weather-hero-icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px #00f0ff);
}

.cyber-weather-title {
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.cyber-weather-sub {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
}

.cyber-weather-condition-banner {
    background: rgba(0, 240, 255, 0.08);
    border: 1.5px dashed rgba(0, 240, 255, 0.45);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cyber-cond-badge {
    font-size: 0.68rem;
    font-weight: 900;
    color: #00f0ff;
    letter-spacing: 1px;
    background: rgba(0, 240, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

.cyber-cond-text {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.cyber-weather-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.cyber-weather-metric-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cyber-weather-metric-item .metric-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.cyber-weather-metric-item .metric-label {
    font-size: 0.62rem;
    font-weight: 900;
    color: #64748b;
    letter-spacing: 0.8px;
}

.cyber-weather-metric-item .metric-value {
    font-size: 1.05rem;
    font-weight: 900;
    color: #38bdf8;
    letter-spacing: 0.5px;
}

.cyber-weather-sim-section {
    background: rgba(8, 14, 26, 0.95);
    border: 1.5px solid rgba(255, 170, 0, 0.4);
    border-radius: 12px;
    padding: 12px;
}

.cyber-weather-sim-header {
    font-size: 0.72rem;
    font-weight: 900;
    color: #ffaa00;
    letter-spacing: 1px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cyber-weather-sim-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cyber-sim-btn {
    background: #0f172a;
    border: 1.5px solid #334155;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.70rem;
    font-weight: 900;
    padding: 7px 3px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 0 #000;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyber-sim-btn:hover {
    border-color: #00f0ff;
    color: #00f0ff;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #000, 0 0 8px rgba(0, 240, 255, 0.3);
}

.cyber-sim-btn.active,
.cyber-sim-btn.active-live {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(0, 153, 204, 0.35) 100%);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* =========================================================
   CYBER MARCH TRAJECTORY & SQUAD DEPLOYMENT
   ========================================================= */
.cyber-march-line {
    stroke-dasharray: 8, 8;
    animation: cyberMarchDash 0.8s linear infinite;
    pointer-events: none;
}
.cyber-march-line.attack {
    filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.7));
}
.cyber-march-line.scout {
    filter: drop-shadow(0 0 6px rgba(0, 255, 204, 0.8));
}
.cyber-march-line.return {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
}

@keyframes cyberMarchDash {
    from {
        stroke-dashoffset: 16;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.cyber-march-wrapper {
    background: transparent !important;
    border: none !important;
}

.cyber-march-marker {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.cyber-march-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    animation: cyberMarchPulse 1.4s ease-out infinite;
    pointer-events: none;
}
.cyber-march-marker.attack .cyber-march-pulse {
    border: 2px solid #ff0055;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
}
.cyber-march-marker.scout .cyber-march-pulse {
    border: 2px solid #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
}
.cyber-march-marker.return .cyber-march-pulse {
    border: 2px solid #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

@keyframes cyberMarchPulse {
    0% { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.cyber-march-pod {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(0,0,0,0.8);
}
.cyber-march-marker.attack .cyber-march-pod {
    background: linear-gradient(135deg, #1f0712 0%, #3d0a20 100%);
    border: 2px solid #ff0055;
}
.cyber-march-marker.scout .cyber-march-pod {
    background: linear-gradient(135deg, #041a18 0%, #0a332e 100%);
    border: 2px solid #00ffcc;
}
.cyber-march-marker.return .cyber-march-pod {
    background: linear-gradient(135deg, #05192d 0%, #0c3b69 100%);
    border: 2px solid #38bdf8;
}

.cyber-march-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.cyber-march-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #000;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 6px;
    border: 1px solid currentColor;
}
.cyber-march-marker.attack .cyber-march-count {
    color: #ff3366;
    border-color: #ff0055;
}
.cyber-march-marker.scout .cyber-march-count {
    color: #00ffcc;
    border-color: #00ffcc;
}
.cyber-march-marker.return .cyber-march-count {
    color: #38bdf8;
    border-color: #38bdf8;
}

.cyber-march-badge {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 14, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    z-index: 3;
}
.cyber-march-marker.attack .cyber-march-badge {
    border-color: #ff0055;
    color: #ffaa00;
}
.cyber-march-marker.scout .cyber-march-badge {
    border-color: #00ffcc;
    color: #00ffcc;
}
.cyber-march-marker.return .cyber-march-badge {
    border-color: #38bdf8;
    color: #38bdf8;
}

/* Weather Tactical Notice in Modals */
.cyber-weather-tactical-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid #00f0ff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
    margin-bottom: 10px;
}
.cyber-weather-tactical-pill.rain {
    border-color: #00f0ff;
    color: #00f0ff;
}
.cyber-weather-tactical-pill.wind {
    border-color: #ffaa00;
    color: #ffaa00;
}
.cyber-weather-tactical-pill.fog {
    border-color: #b388ff;
    color: #d1b3ff;
}

/* Tactical Mode Switcher & Scout Console */
.cyber-tactical-mode-switch {
    display: flex;
    gap: 8px;
    background: rgba(10, 16, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
}
.cyber-mode-btn {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cyber-mode-btn.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}
.cyber-scout-aperture-box {
    background: rgba(0, 255, 204, 0.06);
    border: 1px dashed rgba(0, 255, 204, 0.4);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.cyber-scout-aperture-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #00ffcc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cyber-scout-aperture-desc {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* ========================================================
   PAMIĘĆ ZWIADU (SCOUT FOG MEMORY BADGES & PULSE)
   ======================================================== */
.cyber-recon-badge {
    position: absolute;
    top: -15px;
    left: -12px;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Rajdhani', monospace, sans-serif;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 25;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.cyber-recon-badge.active {
    background: rgba(3, 16, 26, 0.92);
    border: 1px solid #00ffcc;
    color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.55);
}
.cyber-recon-badge.fading {
    background: rgba(30, 16, 4, 0.92);
    border: 1px solid #ffaa00;
    color: #ffaa00;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.55);
    animation: cyberPulseFading 1.2s infinite alternate ease-in-out;
}
@keyframes cyberPulseFading {
    0% { transform: scale(0.94); opacity: 0.8; }
    100% { transform: scale(1.06); opacity: 1; }
}

.cyber-territory-wrapper.in-scout-memory .cyber-territory-marker.is-scouted-zone {
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.45);
}
.cyber-territory-wrapper.in-scout-memory .cyber-territory-marker.is-fading-scout {
    box-shadow: 0 0 18px rgba(255, 170, 0, 0.45);
}

/* Przełącznik Dźwięku w HUD */
.cyber-sound-toggle-btn {
    background: rgba(8, 18, 36, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.35);
    color: #00f0ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
}
.cyber-sound-toggle-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    transform: translateY(-1px);
}
.cyber-sound-toggle-btn.is-muted {
    border-color: rgba(148, 163, 184, 0.3);
    color: #64748b;
}

/* SATCOM LIGHTHOUSE TOWER */
.cyber-territory-marker.satcom-relay .cyber-territory-pod {
    background: linear-gradient(135deg, #021a1e, #033a38);
    border-color: #00ffcc;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 255, 204, 0.7);
}
.cyber-territory-marker.satcom-active .cyber-territory-pod {
    background: linear-gradient(135deg, #002c28, #005a48);
    border-color: #00ffaa;
    box-shadow: 0 0 22px rgba(0, 255, 170, 0.85);
    animation: cyberPulseLighthouse 2s infinite alternate ease-in-out;
}
@keyframes cyberPulseLighthouse {
    from { box-shadow: 0 0 14px rgba(0, 255, 170, 0.6); transform: scale(1); }
    to { box-shadow: 0 0 28px rgba(0, 255, 204, 0.95); transform: scale(1.05); }
}
.cyber-territory-res.res-satcom {
    font-size: 1.35rem;
    filter: drop-shadow(0 0 6px #00ffcc);
}