:root {
        --bg: #030303;
        --sidebar-bg: rgba(10, 10, 10, 0.98);
        --card-bg: #111111;
        --overlay-bg: rgba(0, 0, 0, 0.98);
        --accent: #00f2ff;
        --accent-social: #ff5e00;
        --text: #ffffff;
        --danger: #ff4d4d;
        --sidebar-width: 330px;
        --card-width: 310px;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        font-family: "Segoe UI", system-ui, sans-serif;
        background: var(--bg);
        color: var(--text);
        margin: 0;
        display: flex;
        height: 100vh;
        overflow: hidden;
        width: 100vw;
        background-image: radial-gradient(
          circle at 50% -20%,
          #1a1a1a 0%,
          #030303 100%
        );
      }

      .password-container {
        position: relative;
        width: 100%;
      }
      .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #666;
        transition: 0.3s;
        z-index: 10;
        padding: 5px; /* łatwiejsze klikanie */
      }
      .password-toggle:hover {
        color: var(--accent);
      }

      /* SIDEBAR & SCROLL FIX */
      #app-container {
        display: none;
        width: 100%;
        height: 100%;
        flex-direction: row;
        opacity: 0;
        transition: opacity 1s ease 0.3s;
      }
      #app-container.visible {
        opacity: 1;
      }
      #sidebar {
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        background: var(--sidebar-bg);
        border-right: 1px solid #1a1a1a;
        display: flex;
        flex-direction: column;
        transition: 0.5s;
        z-index: 1000;
        backdrop-filter: blur(20px);
        height: 100vh;
        overflow: hidden;
      }
      #sidebar.hidden {
        margin-left: calc(var(--sidebar-width) * -1);
      }

      .sidebar-top {
        padding: 10px 15px;
        overflow-y: auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .sidebar-top::-webkit-scrollbar {
        display: none;
      }
      .sidebar-bottom {
        padding: 15px 20px;
        border-top: 1px solid #1a1a1a;
        background: #070707;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      #toggleBtn {
        position: fixed;
        left: 15px;
        top: 15px;
        z-index: 1010;
        background: var(--accent);
        color: #000;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 0 15px var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .logo-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40px;
        margin-bottom: 0px;
      }

      .new-cyber-logo {
        animation: float-original 4s ease-in-out infinite alternate;
      }
      @keyframes float-original {
        0% {
          transform: translateY(0px) scale(1);
          filter: drop-shadow(0 0 5px var(--accent));
        }
        100% {
          transform: translateY(-4px) scale(1.02);
          filter: drop-shadow(0 0 15px var(--accent-social));
        }
      }

      /* PRAWY PANEL - SIEĆ OPERACYJNA */
      #sidebar-right {
        /* upewnijmy się, że wraca płynnie na swoje miejsce */
        transform: translateX(0);
        opacity: 1;
        /* reszta Twoich styli dla sidebar-right bez zmian... */
        width: 330px;
        min-width: 330px;
        background: var(--sidebar-bg);
        overflow-y: auto;
        border-left: 1px solid #1a1a1a;
        display: flex;
        flex-direction: column;
        transition: 0.5s;
        z-index: 1000;
        backdrop-filter: blur(20px);
        height: 100vh;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 20px 20px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.8);
      }
      #sidebar-right.hidden {
        margin-right: -330px;
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
      }

      #toggleRightBtn {
        position: fixed;
        right: 15px;
        top: 15px;
        z-index: 1010;
        background: transparent;
        border: 1px solid var(--accent-social);
        color: var(--accent-social);
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        box-shadow: 0 0 10px rgba(255, 94, 0, 0.1);
      }
      #toggleRightBtn:hover {
        background: var(--accent-social);
        color: #000;
        box-shadow: 0 0 15px var(--accent-social);
      }

      .section-title {
        font-size: 0.65rem;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 15px 20px 5px;
        font-weight: 900;
      }

      .friend-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #111;
        cursor: pointer;
        transition: 0.3s;
      }
      .friend-item:hover {
        background: rgba(255, 94, 0, 0.05);
        border-left: 3px solid var(--accent-social);
        padding-left: 17px;
      }

      .friend-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #0a0a0a;
        border: 1px solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: var(--accent);
        position: relative;
        font-size: 1.2rem;
      }
      .status-dot {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #444;
        border: 2px solid #000;
      }
      .status-dot.online {
        background: #39ff14;
        box-shadow: 0 0 8px #39ff14;
      }

      .friend-info {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .friend-name {
        font-size: 0.85rem;
        font-weight: bold;
        color: #ccc;
      }
      .friend-status-text {
        font-size: 0.55rem;
        color: #666;
        text-transform: uppercase;
      }
      .friend-item:hover .friend-name {
        color: var(--accent-social);
      }

      /* --- STYLIZACJA OBRAZKA LOGO --- */
      .custom-image-logo {
        width: 85%; /* Obrazek zajmie 85% szerokości paska, zostawiając ładne marginesy */
        max-width: 260px;
        border-radius: 16px; /* Zaokrąglone rogi */
        border: 2px solid rgba(0, 242, 255, 0.3); /* Delikatna ramka */
        box-shadow: 0 0 20px rgba(0, 242, 255, 0.15); /* Subtelna neonowa poświata */
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Płynna, sprężysta animacja */
        z-index: 2;
        position: relative;
        cursor: pointer;
      }

      .custom-image-logo:hover {
        transform: scale(1.05) translateY(-5px); /* Unosi się i powiększa po najechaniu */
        box-shadow: 0 10px 30px rgba(255, 94, 0, 0.3); /* Cień zmienia kolor na różowy */
        border-color: var(--accent-social);
      }

      /* SZKŁO I GŁĘBIA W PASKU BOCZNYM */
      #sidebar {
        /* Dodajemy efekt siatki (grid) w tle paska bocznego */
        background-color: var(--sidebar-bg);
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 20px 20px;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.8);
        border-right: 1px solid rgba(0, 242, 255, 0.1);
      }

      /* USERNAME BADGE */
      .user-id-badge {
        font-size: 0.65rem;
        color: var(--accent);
        text-align: center;
        margin-bottom: 10px;
        font-weight: 900;
        background: rgba(0, 242, 255, 0.05);
        padding: 6px 18px;
        border-radius: 6px;
        border: 1px solid var(--accent);
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
      }
      .user-id-badge:hover {
        background: var(--accent);
        color: #000;
        box-shadow: 0 0 20px var(--accent);
        transform: scale(1.05);
      }

      .color-picker {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-bottom: 5px;
      }
      .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: 0.2s;
      }
      .dot:hover {
        transform: scale(1.2);
      }

      #stats-panel {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid #222;
        border-radius: 10px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-around;
        margin-bottom: 5px;
      }
      .stat-item {
        text-align: center;
        min-width: 60px;
      }
      .stat-val {
        display: block;
        font-size: 1rem;
        font-weight: 900;
        color: var(--accent);
      }
      .stat-lbl {
        font-size: 0.55rem;
        color: #555;
        text-transform: uppercase;
        font-weight: bold;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px;
        position: relative;
        width: 100%;
      }
      label {
        font-size: 0.6rem;
        color: var(--accent);
        text-transform: uppercase;
        font-weight: bold;
        opacity: 0.7;
      }
      input,
      select,
      textarea {
        background: #000;
        border: 1px solid #222;
        color: white;
        padding: 8px;
        border-radius: 6px;
        outline: none;
        font-size: 0.85rem;
        font-family: inherit;
        width: 100%;
      }
      textarea {
        resize: none;
        height: 40px;
        min-height: 40px;
      }

      input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
        opacity: 0.6;
        transition: 0.3s;
      }
      input[type="date"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
        transform: scale(1.2);
      }

      .add-btn {
        background: var(--accent);
        color: #000;
        border: none;
        padding: 12px;
        border-radius: 6px;
        font-weight: 900;
        cursor: pointer;
        text-transform: uppercase;
        transition: 0.3s;
        animation: pulse-neon 3s infinite;
        margin-top: 5px;
        width: 100%;
      }
      .add-btn:hover {
        background: #fff;
        transform: scale(1.02);
      }
      @keyframes pulse-neon {
        0% {
          box-shadow: 0 0 5px var(--accent);
        }
        50% {
          box-shadow: 0 0 15px var(--accent);
        }
        100% {
          box-shadow: 0 0 5px var(--accent);
        }
      }

      /* Stylizacja scrollbara wewnątrz okna zmian */
      #changelog-content::-webkit-scrollbar {
        width: 4px;
      }
      #changelog-content::-webkit-scrollbar-thumb {
        background: var(--accent-social);
        border-radius: 10px;
      }

      /* MAIN */
      #main {
        flex: 1;
        padding: 0 40px 40px 40px; /* Zmieniono z 40px na 0 z góry */
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
        position: relative;
      }

      /* SOCIAL BANNER */
      #social-banner {
        display: none;
        width: 100%;
        max-width: 1000px;
        background: rgba(255, 94, 0, 0.1);
        border: 1px solid var(--accent-social);
        border-radius: 12px;
        padding: 15px 25px;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(10px);
      }
      #social-banner h3 {
        margin: 0;
        color: var(--accent-social);
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .disconnect-btn {
        background: transparent;
        border: 2px solid var(--accent-social);
        color: var(--accent-social);
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: bold;
        transition: 0.3s;
      }
      .disconnect-btn:hover {
        background: var(--accent-social);
        color: #000;
      }

      .toolbar {
        display: flex;
        width: 100%;
        max-width: 1000px;
        gap: 15px;
        margin-bottom: 15px;
        align-items: stretch;
      }
      .search-container {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid #222;
        border-radius: 30px;
        overflow: hidden;
      }
      .search-container i {
        position: absolute;
        left: 20px;
        color: #666;
      }
      .search-container input {
        background: transparent;
        border: none;
        padding: 0 20px 0 45px;
        height: 48px;
        outline: none;
        border-radius: 0;
      }

      /* PRZYCISKI WYSZUKIWANIA */
      .search-action-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: var(--accent);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        z-index: 10;
      }
      .search-action-btn:hover {
        background: rgba(0, 242, 255, 0.1);
      }
      .search-action-btn.pink-btn {
        color: var(--accent-social);
      }
      .search-action-btn.pink-btn:hover {
        background: rgba(255, 94, 0, 0.1);
      }

      /* Nadpisanie Twoich starych stylów, żeby ikonka w przycisku nie uciekła na lewo */
      .search-action-btn i {
        position: relative !important;
        left: auto !important;
      }

      /* Wypychamy tekst w inputach, żeby nie wjeżdżał pod nasz nowy przycisk */
      .search-container input {
        padding-right: 50px !important;
      }
      .sort-btn-main {
        background: #0a0a0a;
        border: 1px solid #222;
        color: var(--accent);
        height: 48px;
        padding: 0 20px;
        border-radius: 30px;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: bold;
      }

      .filter-area {
        display: flex;
        gap: 6px;
        margin-bottom: 30px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 1000px;
      }
      .f-btn {
        background: #111;
        border: 1px solid #222;
        color: #666;
        padding: 6px 12px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 0.7rem;
        transition: 0.3s;
      }
      .f-btn.active {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(0, 242, 255, 0.05);
      }

      /* CARDS */
      .grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fill, var(--card-width));
        gap: 25px;
        justify-content: center;
      }
      .card {
        background: var(--card-bg);
        border-radius: 20px;
        overflow: hidden;
        transition:
          transform 0.4s,
          box-shadow 0.4s,
          border-color 0.4s;
        height: 350px;
        display: flex;
        flex-direction: column;
        border: 1px solid #1a1a1a;
        position: relative;
        cursor: pointer;

        /* --- ANTI-LAG V2: Bezpieczne wymuszenie GPU --- */
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden; /* Zapobiega "znikaniu" obrazków */
      }
      .card:hover {
        /* Używamy translate3d zamiast translateY, żeby GPU nie oddawało kontroli przy animacji */
        transform: translate3d(0, -12px, 0);
        border-color: var(--accent);
        box-shadow: 0 15px 40px rgba(0, 242, 255, 0.2);
      }
      .card.perfect {
        border: 2px solid var(--accent);
        animation: perfect-glow 2s infinite;
      }
      @keyframes perfect-glow {
        0% {
          box-shadow: 0 0 5px var(--accent);
        }
        50% {
          box-shadow: 0 0 25px var(--accent);
        }
        100% {
          box-shadow: 0 0 5px var(--accent);
        }
      }

      .img-container {
        height: 160px;
        width: 100%;
        background: #000;
        position: relative;
        overflow: hidden;
        border-radius: 19px 19px 0 0; /* górne rogi zaokrąglone, dolne ostre */
      }
      .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s;
      }
.rating-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        background: rgba(0, 0, 0, 0.85);
        min-width: 36px;
        height: 32px;
        padding: 0 10px;
        border-radius: 16px;
        color: var(--accent);
        font-weight: 900;
        border: 2px solid var(--accent);
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        z-index: 5;
      }
      .rating-badge .fa-star {
        font-size: 0.75rem;
      }
      .card-content {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
      }
      .plat-tag {
        font-size: 0.65rem;
        color: var(--accent);
        text-transform: uppercase;
        font-weight: 900;
        margin-bottom: 4px;
      }
      .game-title {
        font-weight: 900;
        font-size: 1.2rem;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .card-times {
        display: flex;
        flex-wrap: wrap; /* Pozwala elementom przejść do nowej linii, gdy brakuje miejsca */
        gap: 4px;
        margin-top: 10px;
        align-items: center;
      }

      .heart-btn {
        transition:
          transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
          color 0.3s,
          filter 0.3s;
      }
      .heart-btn:hover {
        transform: scale(1.3);
      }

      .time-box {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid #222;
        padding: 4px 6px;
        border-radius: 6px;
        font-size: 0.6rem; /* Delikatnie mniejszy font na start */
        color: #888;
        white-space: nowrap; /* BLOKUJE ROZRYWANIE: Liczba i 'h' zawsze będą razem */
        display: flex;
        align-items: center;
      }
      .time-box b {
        color: var(--accent);
      }
      .time-box b {
        color: var(--accent);
        padding: 2px 6px; /* Zwiększa obszar klikalny */
        border-radius: 4px;
        transition: 0.2s;
        cursor: text;
        display: inline-block; /* Ważne, żeby padding działał poprawnie */
        min-width: 20px; /* Łatwiej trafić w 0 lub 1 */
        text-align: center;
      }

      .time-box b:hover {
        background: rgba(0, 242, 255, 0.15); /* Delikatne podświetlenie */
      }

      .time-box b:focus {
        background: rgba(255, 255, 255, 0.1);
        outline: 1px solid var(--accent);
        color: #fff;
      }
      .card-controls-panel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        border-top: 1px solid #222;
        padding-top: 10px;
      }
      .card-action-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        border-top: 1px solid #222;
        padding-top: 10px;
      }
      .card-action-bar .card-controls-panel {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
        margin-left: auto;
        gap: 8px;
      }
      .card-action-bar .friends-with-game {
        margin-top: 0;
      }
      .quick-actions-group {
        display: flex;
        gap: 5px;
      }
      .quick-btn {
        background: rgba(0, 242, 255, 0.1);
        color: var(--accent);
        border: 1px solid var(--accent);
        padding: 5px 10px;
        border-radius: 6px;
        font-weight: 900;
        font-size: 0.7rem;
        cursor: pointer;
        transition: 0.3s;
      }
      .quick-btn:hover {
        background: var(--accent);
        color: #000;
        transform: scale(1.05);
      }
      .del-btn {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 0.7rem;
        font-weight: bold;
        transition: 0.3s;
      }
      .del-btn:hover {
        color: var(--danger);
      }

      /* STOPKA GŁÓWNA */
      .main-footer {
        width: 100%;
        text-align: center;
        margin-top: auto; /* Wypycha stopkę na sam dół */
        padding-top: 40px;
        padding-bottom: 20px;
        color: #444;
        font-size: 0.65rem;
        letter-spacing: 2px;
        font-weight: 900;
        text-transform: uppercase;
      }
      .main-footer span {
        color: var(--accent);
      }

      /* LIGHTBOX */
      #lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-bg);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 3000;
      }
      #lightboxContent {
        background: #000;
        border: 1px solid var(--accent);
        width: 90%;
        max-width: 850px;
        border-radius: 24px;
        overflow: hidden;
        max-height: 90vh;
        overflow-y: auto;
      }
      .lb-header {
        height: 350px;
        position: relative;
      }
      .lb-header img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .lb-close {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid var(--accent);
        color: var(--accent);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
      }
      .lb-rating-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.8);
        padding: 10px 20px;
        border-radius: 30px;
        color: var(--accent);
        border: 3px solid var(--accent);
        font-weight: 900;
        font-size: 1.5rem;
      }
      .lb-body {
        padding: 30px;
      }
      .lb-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        border-top: 1px solid #222;
        padding-top: 20px;
        margin-top: 20px;
        font-size: 0.9rem;
      }
      .lb-detail-item b {
        display: block;
        color: var(--accent);
        text-transform: uppercase;
        font-size: 0.7rem;
        margin-bottom: 5px;
      }
      #lbNoteEdit {
        width: 100%;
        background: #0a0a0a;
        border: 1px solid #222;
        color: #ccc;
        padding: 10px;
        border-radius: 6px;
        font-size: 0.9rem;
        min-height: 80px;
        box-sizing: border-box;
        outline: none;
      }
      .save-note-btn {
        background: var(--accent);
        color: #000;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: bold;
        cursor: pointer;
        margin-top: 10px;
        transition: 0.3s;
      }

      /* STYLOWANIE DŁUGIEGO OPISU GIER */
      #lbDesc {
        display: block; /* Wymuszamy układ blokowy */
        max-height: 160px; /* Maksymalna wysokość pudełka z tekstem */
        overflow-y: auto; /* Włącza przewijanie w dół, gdy tekst jest za długi */
        padding-right: 15px; /* Robi miejsce na pasek przewijania */
        margin-top: 8px;
        line-height: 1.6;
        color: #aaa;
      }

      /* Neonowy pasek przewijania (Scrollbar) tylko dla opisu */
      #lbDesc::-webkit-scrollbar {
        width: 6px;
      }
      #lbDesc::-webkit-scrollbar-track {
        background: #111;
        border-radius: 4px;
      }
      #lbDesc::-webkit-scrollbar-thumb {
        background: var(--accent); /* Używa Twojego neonowego koloru! */
        border-radius: 4px;
      }
      #lbDesc::-webkit-scrollbar-thumb:hover {
        background: #fff;
      }

      /* CUSTOM MODAL */
      #custom-modal,
      #rating-modal,
      #delete-modal,
      #disconnect-modal,
      #logout-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-bg);
        backdrop-filter: blur(15px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 3000;
      }
      .modal-box {
        background: var(--sidebar-bg);
        padding: 30px;
        border-radius: 20px;
        border: 1px solid var(--accent);
        width: 90%;
        max-width: 380px;
        text-align: center;
        box-shadow: 0 0 40px rgba(0, 242, 255, 0.15);
      }
      .modal-box h3 {
        color: var(--accent);
        font-weight: 900;
        letter-spacing: 2px;
        margin-top: 0;
      }
      .modal-box input {
        width: 100%;
        background: #000;
        border: 1px solid #222;
        color: white;
        padding: 12px;
        border-radius: 8px;
        outline: none;
        margin-bottom: 15px;
        font-size: 1rem;
        text-align: center;
      }
      .modal-error {
        color: var(--danger);
        font-size: 0.7rem;
        margin-bottom: 10px;
        display: none;
        font-weight: bold;
      }

      .report-section {
        padding: 10px;
        border: 1px solid #222;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
      }
      .report-btn {
        width: 100%;
        background: transparent;
        border: 1px solid var(--accent-social);
        color: var(--accent-social);
        padding: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: bold;
        transition: 0.3s;
        margin-top: 8px;
      }
      .report-btn:hover {
        background: var(--accent-social);
        color: #000;
      }
      .logout-btn {
        color: var(--danger);
        font-size: 0.65rem;
        cursor: pointer;
        text-align: center;
        margin-top: 5px;
        font-weight: bold;
        text-transform: uppercase;
        opacity: 0.5;
      }
      .logout-btn:hover {
        opacity: 1;
      }

      #autocomplete-list {
        position: absolute;
        top: 55px;
        left: 0;
        right: 0;
        background: #151515;
        border: 1px solid var(--accent);
        z-index: 999;
        max-height: 200px;
        overflow-y: auto;
        display: none;
        border-radius: 6px;
      }
      .autocomplete-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        cursor: pointer;
        font-size: 0.8rem;
        border-bottom: 1px solid #222;
      }
      .autocomplete-item:hover {
        background: #222;
      }
      canvas {
        display: none;
      }

      /* NAPRAWA STRZAŁKI W LIŚCIE SORTOWANIA */
      select.sort-btn-main {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; /* Wyłącza domyślną, brzydką strzałkę systemu */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 14px;
        padding-right: 40px !important; /* Robi miejsce na nową ikonę */
        transition: 0.3s;
      }

      select.sort-btn-main:hover,
      select.sort-btn-main:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
      }

      /* Kolorowanie samej listy po rozwinięciu */
      select.sort-btn-main option {
        background: #0a0a0a;
        color: #ffffff;
        font-weight: bold;
      }

      #navbar {
        width: 100%;
        max-width: 1000px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 25px;
        background: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 16px 16px;
        margin-bottom: 30px;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }
      .nav-title {
        font-size: 1.2rem;
        font-weight: 900;
        color: #fff;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .nav-title span {
        color: var(--accent);
      }
      .nav-actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .nav-btn {
        background: #0a0a0a;
        border: 1px solid #333;
        color: #aaa;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
      }
      .nav-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
        transform: translateY(-2px);
      }
      .nav-btn.active-nav {
        border-color: var(--accent) !important;
        color: var(--accent) !important;
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.2) !important;
        transform: translateY(-2px);
      }
      /* 🔥 UKRYWAMY IKONKĘ NAVBARA NA PC */
      #nav-support-btn {
        display: none;
      }

      /* SYSTEM POWIADOMIEŃ (TOAST) */
      #toast-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 9999;
        pointer-events: none; /* Żeby nie blokowały klikania pod spodem */
      }
      .toast {
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        border-left: 4px solid var(--accent);
        color: #fff;
        padding: 15px 25px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 0.85rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        transform: translateX(120%);
        transition:
          transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
          opacity 0.3s;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .toast.show {
        transform: translateX(0);
      }
      .toast.hide {
        opacity: 0;
        transform: translateX(100px);
      }
      .toast.error {
        border-color: var(--danger);
      }
      .toast.success {
        border-color: #39ff14;
      }
      .toast.error i {
        color: var(--danger);
      }
      .toast.success i {
        color: #39ff14;
      }

/* ===== MOBILE: SIDEBAR + NAVBAR + MAIN (główne) ===== */
      @media (max-width: 768px) {
        #app-container {
          flex-direction: column;
          height: auto;
          overflow: visible;
        }

        .nav-actions {
          margin-right: 36px !important; /* Wykorzystujemy wolną lukę z prawej strony! */
          gap: 5px !important; /* Ściaśniamy kółka */
        }

        .nav-btn {
          width: 35px !important;
          height: 35px !important;
          font-size: 0.85rem !important;
        }
        /* 🔥 WŁĄCZAMY IKONKĘ W NAVBARZE NA TELEFONIE */
        #nav-support-btn {
          display: flex !important;
        }

        /* 🔥 WYWALAMY WIELKI PRZYCISK ROZDZIELAJĄCY SEKCJE */
        #sidebar-support-container {
          display: none !important;
        }

        /* Mniejszy tekst TERMINAL na telefonach */
        .nav-title span[data-i18n="nav_terminal"] {
          font-size: 0.95rem !important;
          letter-spacing: 1px !important;
        }

        /* 2. Doprecowujemy pozycję pomarańczowego przycisku, żeby idealnie siedział w linii z navbarem */
        /* JEDEN WPIS, BY WSZYSTKIM RZĄDZIĆ */
        #toggleRightBtn {
          position: fixed !important;
          top: 12px !important;
          right: 10px !important;
          z-index: 2200 !important; /* Wyżej niż panel boczny (2100) */

          width: 40px !important;
          height: 40px !important;

          background: rgba(10, 10, 10, 0.8) !important;
          backdrop-filter: blur(5px);
          border: 1px solid var(--accent-social) !important;
          color: var(--accent-social) !important;
          border-radius: 10px;

          display: flex !important; /* Zapewnia widoczność na mobile */
          align-items: center;
          justify-content: center;
          transition: 0.3s;
        }

        #sidebar {
          width: 100vw;
          min-width: 100vw;
          height: auto;
          border-right: none;
          border-bottom: 2px solid #222;
          position: relative;
          margin-left: 0 !important;
          display: flex;
          flex-direction: column;
        }

        .sidebar-top {
          overflow: visible; /* Pozwalamy elementom się rozrosnąć */
          height: auto;
          padding: 15px;
          gap: 15px;
        }

        .sidebar-bottom {
          position: relative;
          border-top: 1px solid #222;
          padding: 20px;
        }

        #main {
          padding: 20px 10px;
          width: 100vw;
          height: auto;
          overflow: visible;
        }

        .grid {
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 10px;
          padding-bottom: 100px;
          justify-content: center;
        }

        .card {
          height: 280px; /* Nieco niższe dla lepszego dopasowania */
          min-height: auto;
        }

        .game-title {
          font-size: 0.9rem;
        } /* Mniejszy tekst tytułu */
.rating-badge {
          min-width: 28px;
          height: 24px;
          padding: 0 8px;
          border-radius: 12px;
          font-size: 0.7rem;
          gap: 4px;
          top: 3px;
          right: 3px;
        }
        .rating-badge .fa-star {
          font-size: 0.58rem;
        }
        .img-container {
          height: 110px;
        }

        .toolbar {
          flex-direction: column;
          gap: 8px;
          margin-top: 15px;
        }
        #toggleBtn {
          display: none;
        }

        /* PRAWY PANEL MOBILNY - EFEKT NAKŁADKI (OVERLAY) */
        #sidebar-right {
          position: fixed; /* Zmieniłem z absolute na fixed */
          top: 0;
          right: 0;
          width: 100vw;
          min-width: 100vw;
          height: 100vh;
          z-index: 1005; /* Będzie nad stroną, ale pod przyciskiem zamykania (1010) */
          border-left: none;
          margin-right: 0 !important; /* Ignorujemy desktopowy margines */
          transform: translateX(0); /* Gdy otwarty, jest na swoim miejscu */
          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          box-shadow: -10px 0 30px rgba(0, 0, 0, 0.9);
        }

        /* Nowa reguła chowania panelu tylko dla mobile */
        #sidebar-right.hidden {
          margin-right: 0 !important;
          transform: translateX(
            100%
          ); /* Gładko wyjeżdża całkowicie poza prawy ekran */
        }

        /* Naprawa formularza - pola pod sobą */
        #add-game-form div[style*="display:flex"] {
          flex-direction: column !important;
          gap: 10px !important;
        }

        /* WYŁĄCZENIE TRYBU KINOWEGO NA TELEFONACH */
        .trailer-layer {
          display: none !important;
        }
        .card-times {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          gap: 4px;
          margin-top: 8px;
        }
        .time-box {
          padding: 4px 6px;
          font-size: 0.55rem;
          justify-content: center;
          min-height: 22px;
        }
        /* Data zajmuje całą szerokość pod boxami czasu */
        .time-box:last-child {
          grid-column: 1 / -1;
          background: transparent !important;
          border: none !important;
          padding: 4px 0 0 0 !important;
          justify-content: flex-start !important;
          opacity: 0.7;
        }
        .card-content {
          padding: 10px;
          display: flex;
          flex-direction: column;
        }

        /* --- PROTOKÓŁ ZWIJANIA FORMULARZA NA MOBILE --- */
        #add-game-panel #add-game-form {
          display: none !important; /* Domyślnie chowamy na telefonie */
        }
        #add-game-panel.mobile-open #add-game-form {
          display: flex !important; /* Pokazujemy po kliknięciu */
        }
        #add-game-chevron {
          display: inline-block !important; /* Pokazujemy strzałkę tylko na mobile */
        }
        #add-game-panel.mobile-open #add-game-chevron {
          transform: rotate(
            180deg
          ); /* Obracamy strzałkę gdy formularz jest otwarty */
        }
        /* Korekta linii przerywanej, żeby nie wisiała w powietrze gdy zamknięte */
        #add-game-panel .action-panel-title {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }
        #add-game-panel.mobile-open .action-panel-title {
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px dashed #333;
        }
      }

      /* EFEKTY NAYEK (HOVER) DLA KARTY */
      .img-container {
        cursor: pointer;
      }
      .view-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-weight: 900;
        font-size: 1.1rem;
        letter-spacing: 2px;
        opacity: 0;
        transition: opacity 0.3s ease; /* Usunąłem transition: all dla płynności */
        pointer-events: none;
        z-index: 2;
        /* USUNIĘTO backdrop-filter stąd! */
      }

      /* Kiedy najeżdżasz na tytuł... */
      .game-title {
        transition: color 0.2s;
      }

      .hidden-element {
        display: none !important;
      }

      /* ANIMACJA DZWONECZKA SIECIOWEGO */
      @keyframes ring-alert {
        0%,
        100% {
          transform: rotate(0deg);
        }
        15% {
          transform: rotate(20deg);
        }
        30% {
          transform: rotate(-15deg);
        }
        45% {
          transform: rotate(10deg);
        }
        60% {
          transform: rotate(-5deg);
        }
        75% {
          transform: rotate(0deg);
        }
      }

      /* --- WIDGETY FORMULARZA (BETA) --- */
      /* Przełącznik Statusu */
      .status-toggle {
        display: flex;
        gap: 3px;
        background: #000;
        border: 1px solid #222;
        border-radius: 6px;
        padding: 4px;
      }
      .status-option {
        flex: 1;
        text-align: center;
        font-size: 0.52rem; /* Zmniejszony z 0.65rem, aby pomieścić polskie znaki */
        font-weight: 900;
        padding: 8px 2px;
        cursor: pointer;
        border-radius: 4px;
        color: #555;
        transition: 0.3s;
        white-space: nowrap; /* Blokuje łamanie tekstu do nowej linii */
        letter-spacing: -0.2px; /* Lekko zagęszczone litery, aby "oszczędzić" miejsce */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }

      /* Specjalna poprawka dla ikon w tych przyciskach */
      .status-option i {
        font-size: 0.7rem;
      }
      .status-option:hover {
        color: #fff;
      }
      .status-option.active[data-val="playing"] {
        background: rgba(57, 255, 20, 0.1);
        color: #39ff14;
        border: 1px solid #39ff14;
      }
      .status-option.active[data-val="finished"] {
        background: rgba(255, 94, 0, 0.1);
        color: var(--accent-social);
        border: 1px solid var(--accent-social);
      }

      .status-option.active[data-val="wishlist"] {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid #ffffff;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Delikatna biała poświata */
      }

      /* Siatka Platform - TWARDE WYRÓWNANIE (GRID) */
      .platform-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* Dokładnie 5 równych kolumn! */
        gap: 5px;
        width: 100%;
      }
      .plat-btn {
        background: #000;
        border: 1px solid #333;
        color: #666;
        border-radius: 6px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1.1rem;
      }
      .plat-btn.text-plat {
        font-size: 0.65rem; /* Mniejszy tekst, by ładnie wszedł w równy kwadrat */
        font-weight: 900;
        letter-spacing: 0.1px;
      }
      .plat-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(0, 242, 255, 0.05);
      }
      .plat-btn.active {
        border-color: var(--accent);
        background: rgba(0, 242, 255, 0.15);
        color: var(--accent);
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
      }

      /* Skala Ocen 1-10 */
      .rating-scale {
        display: flex;
        gap: 3px;
        justify-content: space-between;
        width: 100%;
      }
      .rate-btn {
        flex: 1;
        background: #000;
        border: 1px solid #222;
        color: #666;
        text-align: center;
        padding: 6px 0;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: bold;
        transition: 0.3s;
      }
      .rate-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .rate-btn.active {
        background: var(--accent);
        color: #000;
        box-shadow: 0 0 10px var(--accent);
        border-color: var(--accent);
      }

      /* --- RAMKA FORMULARZA (ACTION PANEL) --- */
      .action-panel {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid #222;
        border-radius: 10px;
        padding: 15px;
        margin-top: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }
      .action-panel-title {
        font-size: 0.7rem;
        color: var(--accent);
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #333;
      }

      /* --- TRYB KINOWY (AUTO-PLAY TRAILERY) --- */
      /* --- TRYB KINOWY (AUTO-PLAY TRAILERY) --- */
      .trailer-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0; /* STARTUJE NIEWIDZIALNY */
        transition: opacity 0.8s ease; /* Płynne, kinowe przenikanie */
        overflow: hidden;
        pointer-events: none; /* Zabezpiecza kliknięcia */
      }
      .trailer-layer iframe {
        width: 100%;
        height: 100%;
        border: none;
        pointer-events: none;
        transform: scale(
          1.8
        ); /* Wypycha cały interfejs YT poza widoczną ramkę! */
      }

      /* --- PRZYCISK WSPARCIA TECHNICZNEGO --- */
      .support-btn {
        width: 100%;
        background: rgba(
          255,
          94,
          0,
          0.05
        ); /* Delikatne tło w kolorze accent-social */
        border: 1px solid var(--accent-social);
        color: var(--accent-social);
        padding: 12px;
        border-radius: 10px;
        font-weight: 900;
        cursor: pointer;
        text-transform: uppercase;
        transition: 0.3s;
        margin-top: 10px; /* Odstęp od panelu "Dodaj Grę" */
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 0.75rem;
        letter-spacing: 1px;
      }
      .support-btn:hover {
        background: var(--accent-social);
        color: #000;
        box-shadow: 0 0 15px var(--accent-social);
      }

      /* --- WIDOCZNOŚĆ PÓŁ FORMULARZA ZALEŻNA OD STATUSU --- */
      .conditional-fields {
        transition:
          max-height 0.4s ease,
          opacity 0.4s ease,
          margin 0.4s ease;
        max-height: 500px;
        opacity: 1;
        overflow: hidden;
      }

      .conditional-fields.hidden-fields {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        border: none;
        pointer-events: none;
      }

      /* --- PRZEŁĄCZNIK JĘZYKÓW (FLAGI) --- */
      .lang-switch-container {
        display: flex;
        gap: 2px;
        background: #0a0a0a;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 4px;
        align-items: center;
      }
      .lang-flag {
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 2px 8px; /* <-- Mniejsze odstępy wewnątrz przycisku */
        border-radius: 15px;
        font-size: 0.65rem; /* <-- Delikatnie mniejszy tekst */
        font-weight: bold;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 4px; /* <-- Flaga jest bliżej tekstu */
      }
      /* --- NOWA REGUŁA: ZABEZPIECZENIE KLIKNIĘĆ --- */
      .lang-flag img {
        pointer-events: none;
      }
      .lang-flag:hover {
        color: #fff;
      }
      .lang-flag.active {
        background: rgba(0, 242, 255, 0.1);
        color: var(--accent);
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
      }

      /* STYLIZACJA PRZYCISKU WISHLIST - EFEKT PIGUŁKI */
      #nav-wishlist-btn {
        width: auto !important; /* Pozwalamy mu się rozciągnąć pod tekst */
        min-width: 42px; /* Ale nie może być mniejszy niż dzwonek */
        height: 42px;
        padding: 0 15px !important; /* Większy margines wewnątrz dla lepszych proporcji */
        border-radius: 12px !important; /* Zmieniamy na delikatny prostokąt z zaokrąglonymi rogami */
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative !important;
        gap: 8px;
        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: rgba(255, 255, 255, 0.05); /* Subtelne tło */
      }

      /* Poprawka dla samego napisu wewnątrz */
      #nav-wishlist-btn span {
        font-size: 0.6rem !important;
        font-weight: 900;
        letter-spacing: 1px;
        line-height: 1; /* Zapobiega wypychaniu pigułki w pionie */
      }

/* ===== MOBILE: GRID + WISHLIST + SIDEBAR-RIGHT ===== */
      @media (max-width: 768px) {
        body {
          overflow-y: auto !important;
          overflow-x: hidden !important;
          height: auto;
        }

        /* Pasek boczny na całą szerokość */
        #sidebar {
          width: 100% !important;
          min-width: 100% !important;
          height: auto;
          border-right: none;
          border-bottom: 2px solid #222;
          position: relative;
          margin-left: 0 !important;
          display: flex;
          flex-direction: column;
        }

        /* Główny kontener treści */
        #main {
          padding: 0 10px 20px 10px !important;
          width: 100%;
          height: auto;
          overflow: visible;
        }

        /* --- OPTYMALIZACJA NAVBARA (PC + MOBILE) --- */
        #navbar {
          padding: 10px 15px !important;
          border-radius: 0;
          width: 100%;
          max-width: 100%;
          height: 65px; /* Stała wysokość dla 2 linii tekstu */
          display: flex !important;
          align-items: center;
          justify-content: space-between;
        }

        .nav-actions {
          margin-right: 50px; /* Miejsce dla przycisku znajomych (ToggleRightBtn) */
        }

        .nav-title span[data-i18n="nav_terminal"] {
          font-size: 0.9rem !important; /* Mniejszy napis TERMINAL */
        }

        #nav-terminal-mode {
          font-size: 0.5rem !important;
          margin-left: 22px !important; /* Wcięcie wyrównujące tekst pod ikoną serwera */
        }

        /* --- PRZYCISK WISHLIST (STYL PIGUŁKI) --- */
        #nav-wishlist-btn {
          width: auto !important;
          min-width: 42px;
          height: 42px;
          padding: 0 8px !important;
          border-radius: 12px !important;
          display: flex !important;
          align-items: center;
          justify-content: center;
          position: relative !important;
          gap: 4px;
          transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          background: rgba(255, 255, 255, 0.05);
        }

        .version-badge {
          font-size: 0.45rem !important;
          padding: 2px 4px !important;
        }

        .changelog-box {
          max-width: 450px;
          width: 95%;
          height: auto; /* Okno będzie tak wysokie jak treść */
          max-height: 80vh; /* Ale nie wyjdzie poza ekran */
          display: flex;
          flex-direction: column;
          text-align: left;
          border: 1px solid var(--accent-social);
          background: var(--sidebar-bg);
          padding: 25px;
          border-radius: 24px;
          overflow: hidden;
          box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
        }

        #nav-wishlist-btn span {
          font-size: 0.6rem !important;
          font-weight: 900;
          letter-spacing: 1px;
          line-height: 1;
        }

        /* --- SIATKA KAFELKÓW (adaptywna - min 160px, max ile się zmieści) --- */
        .grid,
        #wishlist-drawer .grid {
          grid-template-columns: repeat(
            auto-fill,
            minmax(160px, 1fr)
          ) !important;
          gap: 10px !important;
          padding-bottom: 80px;
          justify-content: center;
        }

        .card {
          height: 280px;
        }

        .game-title {
          font-size: 0.9rem;
        }

        /* --- WYSUWANY PANEL WISHLISTY NA TELEFONIE --- */
        #wishlist-drawer {
          width: calc(100% - 20px);
          height: 85vh;
          padding: 15px;
          border-radius: 24px 24px 0 0;
          left: 50%;
          transform: translateX(-50%);
        }

        #wishlist-drawer.open {
          bottom: 0;
        }

        /* Automatyczna wysokość kafelków w Wishliście, żeby przyciski "Graj" i "Usuń" się zmieściły */
        #wishlist-drawer .card {
          height: auto !important;
          min-height: 240px;
          padding-bottom: 10px;
        }

        /* Mniejszy obrazek w Wishliście robi miejsce dla paska Hype */
        #wishlist-drawer .img-container {
          height: 100px !important;
        }

        #wishlist-drawer .game-title {
          font-size: 0.8rem !important;
        }

        /* --- PRAWY PANEL ZNAJOMYCH (OVERLAY) --- */
        #sidebar-right {
          position: fixed;
          top: 0;
          right: 0;
          width: 100% !important;
          min-width: 100% !important;
          height: 100vh;
          z-index: 2100;
          transform: translateX(0);
          transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #sidebar-right.hidden {
          transform: translateX(100%);
          margin-right: 0 !important;
        }

        /* --- PRZYCISK ZNAJOMYCH (Zawsze widoczny, nie koliduje z wylogowaniem) --- */
        #toggleRightBtn {
          position: fixed !important;
          top: 12px !important;
          right: 10px !important;
          z-index: 2200 !important; /* Wyżej niż z-index:2100 prawego panelu! */

          width: 40px !important;
          height: 40px !important;

          background: rgba(10, 10, 10, 0.8) !important;
          backdrop-filter: blur(5px);
          border: 1px solid var(--accent-social) !important;
          color: var(--accent-social) !important;
          border-radius: 10px;

          display: flex !important;
          align-items: center;
          justify-content: center;
          transition: 0.3s;
        }

        /* Wyłączenie autoodtwarzania na słabych łączach (oszczędza baterię i transfer) */
        .trailer-layer {
          display: none !important;
        }

        .nav-title {
          min-width: 0 !important;
        }
        .nav-title div {
          gap: 5px !important; /* Zbliża v1.28 do Terminala */
        }
        .nav-title i.fa-server {
          font-size: 0.85rem !important;
        }
        .nav-title span[data-i18n="nav_terminal"] {
          font-size: 0.9rem !important; /* Mniejszy font */
          letter-spacing: 1px !important; /* Mniejszy rozstaw liter */
        }

        /* --- ZMIANY DLA BARDZO MAŁYCH TELEFONÓW (<480px) --- */
        @media (max-width: 480px) {
          #nav-wishlist-btn span {
            display: none; /* Ukrywamy napis WISHLIST, zostaje tylko gwiazdka */
          }

          #nav-wishlist-btn {
            width: 42px !important;
            padding: 0 !important;
            justify-content: center; /* Przywracamy kółko, gdy brakuje miejsca */
          }

          .nav-title {
            font-size: 1rem;
          }

          .grid,
          #wishlist-drawer .grid {
            gap: 8px !important; /* Mniejsze odstępy między kafelkami */
          }
        }
      }

      #nav-wishlist-btn:hover {
        border-color: #f1c40f;
        color: #f1c40f;
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.3);
        transform: scale(1.05);
      }

      /* WYSUWANY PANEL - LEWITUJĄCY HUD */
      #wishlist-drawer {
        position: fixed;
        bottom: -100%;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 1200px;
        height: 75vh;
        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(25px);
        border: 1px solid var(--accent);
        border-radius: 24px; /* Pełne zaokrąglenie */
        z-index: 2000;
        transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        padding: 30px;
        overflow-y: auto;
        box-shadow:
          0 15px 50px rgba(0, 0, 0, 0.9),
          0 0 20px rgba(0, 242, 255, 0.1);
      }

      /* Magia lewitacji - zatrzymuje się 20px nad dolną krawędzią */
      #wishlist-drawer.open {
        bottom: 20px;
      }

      /* CYBER-SUWAK HYPE */
      input[type="range"].cyber-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        background: #1a1a1a;
        border-radius: 10px;
        outline: none;
        border: 1px solid #333;
        cursor: pointer;
      }

      input[type="range"].cyber-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
        border: 2px solid #000;
        transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      input[type="range"].cyber-slider::-webkit-slider-thumb:hover {
        transform: scale(1.3);
      }

      /* Kafelki Wishlist */
      .card.wishlist-item {
        border-color: #333;
        filter: grayscale(0.7);
      }

      .card.wishlist-item:hover {
        filter: grayscale(0);
        border-color: var(--accent);
      }

      /* Pasek Hype */
      .hype-container {
        margin-top: 10px;
        background: #111;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #222;
      }

      .hype-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent), #ff00ff);
        box-shadow: 0 0 10px var(--accent);
        transition: 1s ease-out;
      }

.countdown-badge {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, var(--accent) 35%, transparent);
        color: #000;
        font-size: 0.55rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-align: center;
        text-transform: uppercase;
        padding: 16px 6px 4px;
        z-index: 5;
      }

      #wishlist-drawer .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        border-bottom: 1px dashed #333;
        padding-bottom: 15px;

        position: sticky;
        top: -30px;
        padding-top: 30px;
        background: rgba(10, 10, 10, 0.98);
        z-index: 100;
      }

      #wishlist-drawer .drawer-header h2 {
        margin: 0;
        color: var(--accent);
        letter-spacing: 3px;
        font-weight: 900;
      }

      .close-drawer {
        background: none;
        border: 1px solid #333;
        color: #666;
        font-size: 2rem;
        cursor: pointer;
        line-height: 1;
        padding: 0 15px;
        border-radius: 8px;
        transition: 0.3s;
      }

      .close-drawer:hover {
        color: var(--danger);
        border-color: var(--danger);
      }

      /* --- CYBERPUNKOWE PASKI PRZEWIJANIA (GLOBALNE) --- */

      /* Wsparcie dla przeglądarek opartych na silniku Chromium (Chrome, Edge, Opera, Safari) */
      ::-webkit-scrollbar {
        width: 8px; /* Szerokość pionowego suwaka */
        height: 8px; /* Wysokość poziomego suwaka (na wszelki wypadek) */
      }

      /* "Tor", po którym jeździ suwak */
      ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
      }

      /* Główny uchwyt suwaka */
      ::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 10px;
        border: 2px solid transparent; /* Dodaje niewidzialną ramkę, żeby suwak wydawał się smuklejszy */
        background-clip: padding-box;
      }

      /* Efekt po najechaniu na suwak */
      ::-webkit-scrollbar-thumb:hover {
        background: #fff;
        border: 0;
      }

      /* --- LEWITUJĄCY SUWAK TYLKO DLA WISHLISTY --- */
      #wishlist-drawer::-webkit-scrollbar {
        width: 6px;
      }

      /* "Tor" suwaka - ukrywamy tło i skracamy pasek od góry i dołu */
      #wishlist-drawer::-webkit-scrollbar-track {
        background: transparent;
        margin-top: 80px; /* Odsuwa suwak od górnej krawędzi (robi miejsce na tytuł okna) */
        margin-bottom: 40px; /* Odsuwa suwak od dolnej krawędzi */
      }

      /* Uchwyt suwaka - przyciemniony w stanie spoczynku */
      #wishlist-drawer::-webkit-scrollbar-thumb {
        background: #333; /* Ciemnoszary, przygaszony kolor */
        border-radius: 10px;
        border: none;
      }

      /* Magia po najechaniu - suwak budzi się do życia */
      #wishlist-drawer::-webkit-scrollbar-thumb:hover {
        background: var(--accent); /* Przejmuje obecny kolor neonu! */
      }

      /* Gdy sidebar-right NIE ma klasy .hidden (czyli jest otwarty), zmień ikonę w przycisku obok */
      #sidebar-right:not(.hidden) ~ #toggleRightBtn i::before {
        content: "\f00d"; /* Kod ikony 'times' (X) z FontAwesome */
      }

      /* 1. Podświetlanie numeru wersji v1.28 */
      .version-badge {
        display: inline-block !important;
        cursor: pointer;
        background: rgba(0, 242, 255, 0.1) !important;
        border: 1px solid var(--accent) !important;
        color: var(--accent) !important;
        font-size: 0.5rem !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-weight: 900 !important;
        transition: all 0.3s ease !important;
        vertical-align: middle;
      }
      .version-badge:hover {
        background: var(--accent) !important;
        color: #000 !important;
        box-shadow: 0 0 15px var(--accent) !important;
        transform: translateY(-1px);
      }

      /* 2. Zgrabny Modal (Changelog) */
      .changelog-box {
        max-width: 450px;
        width: 95%;
        height: auto;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        text-align: left;
        border: 1px solid var(--accent-social);
        background: var(--sidebar-bg);
        padding: 25px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(20px);
      }

      /* 3. Podświetlanie przycisku CLOSE */
      .btn-close-modal {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid #444 !important;
        color: #666 !important;
        width: 100%;
        margin-top: 15px !important;
        padding: 12px !important;
        font-weight: 900 !important;
        transition: 0.3s !important;
        cursor: pointer;
        border-radius: 8px;
        animation: none !important;
      }
      .btn-close-modal:hover {
        background: var(--accent-social) !important;
        color: #000 !important;
        border-color: var(--accent-social) !important;
        box-shadow: 0 0 15px var(--accent-social) !important;
      }

      /* 4. Suwak w oknie Changelog */
      #changelog-content::-webkit-scrollbar {
        width: 4px;
      }
      #changelog-content::-webkit-scrollbar-thumb {
        background: var(--accent-social);
        border-radius: 10px;
      }

      /* =========================================
         TARCZA OCHRONNA NAVBARA V4 (KOMPUTER + MOBILE)
         ========================================= */

      /* 1. ZASADY DLA KOMPUTERÓW (Brak pięter) */
      #navbar {
        gap: 10px !important;
        flex-wrap: nowrap !important;
      }
      .nav-actions {
        flex: 0 0 auto !important;
      }

/* ===== MOBILE: NAVBAR DETAIL FIXES ===== */
      @media (max-width: 768px) {
        #navbar {
          height: auto !important;
          min-height: 65px !important;
          flex-wrap: wrap !important; /* Pozwolenie na zrzucenie ikon niżej */
          padding: 12px 15px !important;
        }

        .nav-title {
          flex: 1 1 180px !important;
          min-width: 0 !important;
        }

        .nav-title > div {
          white-space: nowrap !important;
          flex-wrap: nowrap !important;
        }

        .nav-title span[data-i18n="nav_terminal"] {
          font-size: 0.95rem !important;
          letter-spacing: 1px !important;
        }

        .nav-actions {
          flex: 1 1 100% !important; /* Zmusza ikony do utworzenia pełnego nowego rzędu */
          justify-content: center !important; /* CENTROWANIE IKON */
          margin-right: 0 !important; /* Usuwamy stary margines */
          margin-top: 8px !important; /* Odstęp od napisu Terminal */
          gap: 15px !important; /* Wygodny odstęp między kółkami dla palca */
        }

        .nav-btn {
          width: 36px !important;
          height: 36px !important;
          font-size: 0.85rem !important;
        }

        /* Wishlista wraca do formy kółka na mobile */
        #nav-wishlist-btn {
          width: 36px !important;
          padding: 0 !important;
          justify-content: center !important;
        }

        #nav-wishlist-btn span[data-i18n="status_wishlist"] {
          display: none !important;
        }
      }

/* ===== MOBILE: NAVBAR STICKY-TOP FIX ===== */
      @media (max-width: 768px) {
        #app-container {
          padding-top: 110px !important; /* Wypycha całą resztę apki w dół, robiąc miejsce dla Navbara */
        }

        #navbar {
          position: fixed !important; /* Wyciągamy Navbar ze środka strony */
          top: 0 !important; /* Przyklejamy do sufitu */
          left: 0 !important;
          width: 100% !important; /* Rozciągamy na pełną szerokość */
          z-index: 2000 !important; /* Zapewniamy mu moc bycia "na wierzchu", ale pod oknem znajomych (2100) */
          margin: 0 !important; /* Kasujemy marginesy, żeby idealnie przylegał */
          box-sizing: border-box !important;
        }
      }

      /* --- SYSTEM DM (GamerLog Pro Style - OVERLAY V2) --- */
      #messages-view {
        position: absolute; /* ZMIANA: Dzięki absolute okno trzyma się kontenera #main, a nie całego ekranu */
        top: 85px;
        left: 0;
        width: 100%; /* ZMIANA: Dopasowuje się do szerokości #main, omijając Sidebar */
        height: calc(100% - 85px);
        z-index: 1500;

        /* ZMIANA: Tło tylko delikatnie przyciemnia, USUNIĘTO backdrop-filter stąd */
        background: rgba(0, 0, 0, 0.5);

        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 20px;

        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      #messages-view.open {
        opacity: 1;
        pointer-events: all;
      }

      .dm-wrapper {
        width: 100%;
        max-width: 1000px; /* Ta sama szerokość co Navbar, będą idealnie w linii! */
        height: 80vh;

        /* ZMIANA: EFEKT SZKŁA WJEŻDŻA TUTAJ */
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);

        /* MAGIA AKCENTU: Automatyczny kolor obramowania i neonowa poświata */
        border: 1px solid var(--accent);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.9),
          0 0 20px rgba(0, 242, 255, 0.15); /* Zmieniłem cień neonu na subtelniejszy (0.15) żeby lepiej grał ze szkłem */
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        position: relative;

        transform: translateY(-40px);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      #messages-view.open .dm-wrapper {
        transform: translateY(0);
      }

      /* LEWA KOLUMNA - LISTA */
      .dm-inbox {
        width: 320px;
        background: rgba(0, 0, 0, 0.4);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        z-index: 2;
      }
      .dm-inbox-header {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .dm-inbox-header h2 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 2px;
        color: var(--accent);
      }
      .dm-inbox-list {
        flex: 1;
        overflow-y: auto;
      }

      /* ELEMENT LISTY INBOX */
      .inbox-item {
        display: flex;
        padding: 15px;
        border-bottom: 1px solid #1a1a1a;
        cursor: pointer;
        transition: background 0.2s;
      }
      .inbox-item:hover {
        background: #1c1c1c;
      }
      .inbox-item.active {
        background: #222;
        border-left: 3px solid var(--accent);
      }

      /* AVATARY I STATUSY */
      .avatar-container {
        position: relative;
        width: 48px;
        height: 48px;
        margin-right: 12px;
        flex-shrink: 0;
      }
      .avatar-container img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        background: #222;
      }
      .avatar-container-small {
        position: relative;
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
      .avatar-container-small img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
      .status-dot {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #141414;
      }
      .status-dot.online {
        background: #00ff66;
        box-shadow: 0 0 8px #00ff66;
      }
      .status-dot.offline {
        background: #555;
      }

      /* INFO W INBOXIE */
      .inbox-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
      }
      .inbox-item-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
      }
      .inbox-name {
        font-weight: bold;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
      }
      .inbox-time {
        font-size: 0.75rem;
        color: #666;
      }
      .inbox-item-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .inbox-snippet {
        font-size: 0.85rem;
        color: #aaa;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 5px;
      }

      /* PRAWA KOLUMNA - CZAT ROOM */
      .dm-chat-room {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: transparent;
        height: 100%;
      }
      .dm-room-header {
        padding: 15px 20px;
        background: rgba(5, 5, 5, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: space-between; /* To rozrzuci awatar na lewo, a strzałkę na prawo! */
      }

      .dm-back-btn {
        display: none;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid var(--accent);
        color: var(--accent);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        margin-right: 45px; /* Robi idealne miejsce na czerwony guzik "X", który "wisi" w prawym rogu */
      }
      .dm-back-btn:hover {
        background: var(--accent);
        color: #000;
      }
      .dm-header-user {
        display: flex;
        align-items: center;
      }
      .dm-header-user h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: bold;
        color: #fff;
      }

      /* OKNO WIADOMOŚCI */
      .dm-messages-body {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .dm-system-notice {
        text-align: center;
        color: #555;
        font-size: 0.9rem;
        margin-top: 40px;
        font-style: italic;
      }

      /* CHMURKI WIADOMOŚCI */
      .msg-bubble {
        max-width: 70%;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 0.95rem;
        line-height: 1.4;
        word-wrap: break-word;
      }
      .msg-bubble.me {
        align-self: flex-end;
        background: rgba(0, 242, 255, 0.1);
        color: white;
        border: 1px solid var(--accent);
        border-bottom-right-radius: 2px;
      }
      .msg-bubble.them {
        align-self: flex-start;
        background: #1a1a1a;
        color: #eee;
        border: 1px solid #333;
        border-bottom-left-radius: 2px;
      }
      .msg-meta {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.4);
        text-align: right;
        margin-top: 4px;
        display: block;
      }
      .msg-bubble.them .msg-meta {
        color: #666;
      }

      /* DOLNY PANEL WPISYWANIA */
      .dm-input-area {
        padding: 15px 20px;
        background: rgba(5, 5, 5, 0.8);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        gap: 10px;
      }
      .dm-input-area input {
        flex: 1;
        background: #000;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 12px;
        color: white;
        font-size: 1rem;
        transition: border-color 0.2s;
        outline: none;
      }
      .dm-input-area input:focus {
        border-color: var(--accent);
      }
      .dm-input-area button {
        background: var(--accent);
        color: black;
        border: none;
        border-radius: 8px;
        padding: 0 20px;
        font-weight: bold;
        cursor: pointer;
        font-size: 1rem;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
        transition: 0.1s;
      }
      .dm-input-area button:disabled,
      .dm-input-area input:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
      }

      /* ===== MOBILE: DM/MESSAGES VIEW ===== */
      @media (max-width: 768px) {
        #messages-view {
          position: fixed !important;
          top: 110px !important; /* Zaczyna się idealnie POD wyższym navbarem */
          left: 0 !important;
          width: 100vw !important;
          height: calc(
            100vh - 110px
          ) !important; /* Dociąga okno do samej podłogi */
          padding: 10px !important;
          z-index: 1500 !important; /* Mniejszy z-index niż Navbar (2000), żeby wjechać pod niego */
          background: rgba(0, 0, 0, 0.85);
        }
        .dm-wrapper {
          height: 100%;
          margin-top: 0;
          box-shadow: none;
          border-radius: 12px;
        }
        .dm-inbox {
          width: 100%;
        }
        .dm-chat-room {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 5;
          background: #090909;
          border-radius: 12px;
        }
        .dm-room-hidden-mobile {
          display: none !important;
        }
        .dm-back-btn {
          display: flex;
        }
      }
      /* --- KONIEC STYLI CZATU --- */

/* ===== MOBILE: FILTER AREA SCROLL ===== */
      @media (max-width: 768px) {
        .filter-area {
          flex-wrap: nowrap !important; /* Zabrania zjeżdżania do nowej linii */
          overflow-x: auto !important; /* Włącza gładkie przewijanie poziome */
          justify-content: flex-start !important; /* Ustawia od lewej krawędzi, by naturalnie się przewijało */
          padding-bottom: 10px !important; /* Daje oddech na dole */
          padding-left: 5px; /* Minimalny margines boczny */

          /* Ukrywanie brzydkiego paska przewijania (Android/iOS) */
          scrollbar-width: none;
          -ms-overflow-style: none;
          -webkit-mask-image: linear-gradient(
            to right,
            black 85%,
            transparent 100%
          );
          mask-image: linear-gradient(to right, black 85%, transparent 100%);
        }

        .filter-area::-webkit-scrollbar {
          display: none; /* Ukrywanie paska w Safari / Chrome */
        }

        .f-btn {
          flex-shrink: 0 !important; /* ZABRANIA ZGNIATANIA GUZIKÓW - to jest klucz! */
          white-space: nowrap !important; /* Utrzymuje tekst (np. "Nintendo Switch") w jednej linii */
        }
      }

      /* ===================== SPLASH BOOT SEQUENCE ===================== */
      #splash {
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        transition:
          opacity 1.4s ease,
          visibility 1.4s;
      }
      #splash.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 1.4s ease,
          visibility 0s linear 1.4s;
      }
      #splash::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(0, 242, 255, 0.02) 2px,
          rgba(0, 242, 255, 0.02) 4px
        );
        pointer-events: none;
      }
      .splash-inner {
        width: 100%;
        max-width: 720px;
        position: relative;
        z-index: 2;
      }
      .splash-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #111;
      }
      .splash-logo-img {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid rgba(0, 242, 255, 0.4);
        box-shadow: 0 0 25px rgba(0, 242, 255, 0.3);
        object-fit: cover;
        flex-shrink: 0;
      }
      .splash-logo-img.fallback {
        background: linear-gradient(135deg, #00f2ff, #ff5e00);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.5rem;
        color: #000;
        letter-spacing: -1px;
      }
      .splash-title-block .splash-title {
        font-size: 1.1rem;
        font-weight: 900;
        letter-spacing: 4px;
        color: var(--accent);
        text-shadow: 0 0 12px rgba(0, 242, 255, 0.5);
      }
      .splash-title-block .splash-title span {
        color: var(--accent-social);
      }
      .splash-title-block .splash-sub {
        font-size: 0.6rem;
        letter-spacing: 3px;
        color: #555;
        text-transform: uppercase;
        font-weight: 900;
        margin-top: 4px;
      }
      .boot-log {
        font-family: "Courier New", Consolas, monospace;
        font-size: 0.85rem;
        line-height: 1.7;
        min-height: 280px;
      }
      .boot-line {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .boot-tag {
        font-weight: 900;
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-left: 8px;
        color: #555;
        font-family: "Courier New", Consolas, monospace;
      }
      .tag-pop {
        animation: tagPop 0.25s ease;
      }
      @keyframes tagPop {
        0% {
          opacity: 0;
          transform: translateX(-4px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      .boot-text {
        color: #aaa;
        flex: 1;
        min-width: 0;
      }
      .boot-text.typing::after {
        content: "▊";
        color: var(--accent);
        animation: splashBlink 0.8s step-end infinite;
        margin-left: 2px;
      }
      .boot-text .hl {
        color: #fff;
        font-weight: 600;
      }
      .boot-text .dim {
        color: #555;
      }
      .splash-progress {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #111;
      }
      .splash-bar-wrap {
        width: 100%;
        height: 2px;
        background: #111;
        border-radius: 2px;
        overflow: hidden;
        margin-bottom: 10px;
      }
      .splash-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent), var(--accent-social));
        box-shadow: 0 0 10px var(--accent);
        transition: width 0.3s ease;
      }
      .splash-status-line {
        display: flex;
        justify-content: space-between;
        font-family: "Courier New", monospace;
        font-size: 0.7rem;
        color: #555;
      }
      .splash-status-line .blinker {
        color: var(--accent);
        animation: splashBlink 1s step-end infinite;
      }
      @keyframes splashBlink {
        50% {
          opacity: 0;
        }
      }
      .splash-skip {
        position: fixed;
        bottom: 24px;
        right: 24px;
        font-family: "Courier New", monospace;
        font-size: 0.75rem;
        color: var(--accent);
        background: rgba(0, 242, 255, 0.05);
        border: 1px solid rgba(0, 242, 255, 0.4);
        padding: 8px 18px;
        border-radius: 6px;
        cursor: pointer;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 900;
        transition: 0.3s;
        z-index: 100000;
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.15);
      }
      .splash-skip:hover {
        color: #000;
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 25px rgba(0, 242, 255, 0.5);
      }

.friends-with-game {
        display: flex;
        margin-top: 8px;
        padding-left: 4px;
        pointer-events: auto;
        cursor: pointer;
        transition: transform 0.2s;
      }
      .friends-with-game:hover {
        transform: scale(1.1);
      }
      .friend-mini-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #39ff14;
        background: #000;
        overflow: hidden;
        margin-left: -8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 900;
        color: #fff;
      }
      .friend-mini-avatar:first-child {
        margin-left: 0;
      }
      .friend-mini-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .friend-mini-more {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(0, 242, 255, 0.15);
        border: 2px solid var(--accent);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 900;
        margin-left: -8px;
      }

      /* ===== MOBILE: TIME EDIT MODAL ===== */
      @media (max-width: 768px) {
        .friends-with-game {
          bottom: 6px;
          right: 6px;
        }
        .friend-mini-avatar,
        .friend-mini-more {
          width: 24px;
          height: 24px;
          border-width: 2px;
          margin-left: -7px;
          font-size: 0.6rem;
        }
      }

      /* Modal listy znajomych grających */
      #friends-game-modal .friend-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-bottom: 1px solid #222;
        cursor: pointer;
        transition: background 0.2s;
      }
      #friends-game-modal .friend-row:hover {
        background: rgba(0, 242, 255, 0.05);
      }
      #friends-game-modal .friend-row-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        background: #000;
      }
      #friends-game-modal .friend-row-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      #friends-game-modal .friend-row-info {
        flex: 1;
        min-width: 0;
      }
      #friends-game-modal .friend-row-nick {
        color: #fff;
        font-weight: 900;
        font-size: 0.85rem;
      }
      #friends-game-modal .friend-row-status {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 900;
        margin-top: 2px;
      }
      @keyframes ytLoadingBar {
        0% {
          width: 0%;
        }
        100% {
          width: 100%;
        }
      }

      .time-preset-btn {
        background: rgba(0, 242, 255, 0.08);
        border: 1px solid rgba(0, 242, 255, 0.3);
        color: var(--accent);
        padding: 8px 4px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.2s;
      }
      .time-preset-btn:hover,
      .time-preset-btn:active {
        background: var(--accent);
        color: #000;
        transform: scale(1.05);
      }

/* ===== MOBILE: TIME BOX MOBILE BEHAVIOR ===== */
      @media (max-width: 768px) {
        .time-box b[contenteditable="true"] {
          pointer-events: none;
          user-select: none;
        }
        .time-box {
          cursor: pointer;
          position: relative;
        }
        .time-box:active {
          background: rgba(0, 242, 255, 0.1) !important;
          transform: scale(0.97);
        }
      }

/* ===== MOBILE: TIME EDIT MODAL POSITIONING ===== */
      @media (max-width: 768px) {
        #time-edit-modal {
          align-items: flex-start !important;
          padding-top: 30px;
        }
        #time-edit-modal .changelog-box {
          max-width: 92% !important;
          margin: 0 auto;
          padding: 18px !important;
        }
        #time-edit-modal-title {
          font-size: 0.8rem !important;
        }
        #time-edit-modal-game {
          font-size: 0.65rem !important;
        }
        #time-edit-input {
          padding: 10px !important;
          font-size: 1.2rem !important;
        }
        .time-preset-btn {
          padding: 6px 2px !important;
          font-size: 0.65rem !important;
        }
      }

/* ===== MOBILE: CARD OPTIONS BAR ===== */
      @media (max-width: 768px) {
        .card-options-bar {
          bottom: 48px;
          width: 220px;
          left: 6px;
        }
        .card-options-bar.align-right {
          left: auto;
          right: 6px;
        }
        .card-options-bar.open {
          max-height: 180px;
          padding: 6px;
        }
        .card-option-row {
          padding: 7px 9px;
          gap: 7px;
          margin-bottom: 4px;
        }
        .card-option-row i {
          width: 14px;
          font-size: 0.7rem;
        }
        .card-option-row .opt-text {
          font-size: 0.6rem;
          letter-spacing: 0;
          line-height: 1.15;
          white-space: normal;
          word-break: break-word;
        }
        .card-option-row .opt-value {
          font-size: 0.55rem;
        }
        .card-option-row .opt-arrow {
          font-size: 0.6rem;
        }
      }

/* ===== DESKTOP HOVER (PC z myszą) ===== */
      @media (hover: hover) and (pointer: fine) {
        .card:hover {
          transform: translate3d(0, -12px, 0);
          border-color: var(--accent);
          box-shadow: 0 15px 40px rgba(0, 242, 255, 0.2);
        }
      }

      .card-edit-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: rgba(0, 242, 255, 0.05);
        border: 1px solid rgba(0, 242, 255, 0.2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
        width: 100%;
        color: #aaa;
        font-family: inherit;
        font-size: 0.8rem;
      }
      .card-edit-option:hover {
        background: rgba(0, 242, 255, 0.12);
        border-color: var(--accent);
        color: #fff;
        transform: translateX(3px);
      }
      .card-edit-option i {
        width: 24px;
        text-align: center;
        font-size: 1rem;
        color: var(--accent);
      }
      .card-edit-option .opt-label {
        flex: 1;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 0.7rem;
      }
      .card-edit-option .opt-desc {
        display: block;
        font-size: 0.62rem;
        color: #666;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        margin-top: 2px;
      }
      .card-edit-option.danger {
        border-color: rgba(255, 94, 0, 0.2);
        background: rgba(255, 94, 0, 0.05);
      }
      .card-edit-option.danger i {
        color: var(--accent-social);
      }
      .card-edit-option.danger:hover {
        background: rgba(255, 94, 0, 0.12);
        border-color: var(--accent-social);
      }

      /* Kontener stack-a - glassmorphism showcase */
      .achievement-stack {
        position: absolute;
        bottom: 4px;
        left: 4px;
        display: flex;
        gap: 4px;
        z-index: 10;

        /* Glass effect */
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 22px;
        padding: 4px 6px;
        box-shadow:
          0 4px 12px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      .achievement-stack .achievement-badge {
        position: static;
        top: auto;
        left: auto;
      }

      /* Achievement badge - świecące kółko z logo platformy */
      .achievement-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 4;
        padding: 0;
        overflow: hidden;
      }

      /* Pulsujące świecenie - 3 warstwy glow dla efektu neonu */
      @keyframes achievementPulse {
        0%,
        100% {
          box-shadow:
            0 0 8px var(--ach-color) inset,
            0 0 12px var(--ach-color),
            0 0 24px var(--ach-color),
            0 0 40px var(--ach-color);
        }
        50% {
          box-shadow:
            0 0 10px var(--ach-color) inset,
            0 0 18px var(--ach-color),
            0 0 35px var(--ach-color),
            0 0 55px var(--ach-color);
        }
      }

      .achievement-badge.steam {
        --ach-color: rgba(85, 153, 255, 0.95);
        border: 2px solid #5599ff;
        animation: achievementPulse 2.5s ease-in-out infinite;
        background: radial-gradient(
          circle at 30% 30%,
          #6db0ff 0%,
          #2266bb 60%,
          #0d2d5c 100%
        );
      }

      .achievement-badge.xbox {
        --ach-color: rgba(108, 202, 90, 0.95);
        border: 2px solid #6cca5a;
        animation: achievementPulse 2.5s ease-in-out infinite;
        background: radial-gradient(
          circle at 30% 30%,
          #8de875 0%,
          #3a8a26 60%,
          #1a4a0a 100%
        );
      }

      .achievement-badge.playstation {
        --ach-color: rgba(184, 189, 200, 1);
        border: 2px solid #d8dce8;
        animation: achievementPulse 2.5s ease-in-out infinite;
        background: radial-gradient(
          circle at 30% 30%,
          #ffffff 0%,
          #a8b0c0 50%,
          #5a6070 100%
        );
      }

      /* Zębatka edycji na kafelku */
      .edit-cog-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #555;
        font-size: 0.85rem;
        padding: 0;
        border-radius: 50%;
        transition:
          color 0.2s,
          background 0.2s;
      }

/* ===== DESKTOP HOVER (PC z myszą) ===== */
      @media (hover: hover) and (pointer: fine) {
        .edit-cog-btn:hover {
          color: var(--accent);
          background: rgba(0, 242, 255, 0.1);
        }
        .edit-cog-btn:hover i {
          transform: rotate(90deg);
        }
        .edit-cog-btn:active {
          color: var(--accent);
          background: rgba(0, 242, 255, 0.15);
          transform: scale(0.9);
        }
      }
      .edit-cog-btn i {
        transition: transform 0.4s ease;
      }
      /* Rozwijany pasek opcji w kafelku - wysuwa się W GÓRĘ nad zębatką */
      .card-options-bar {
        position: absolute;
        bottom: 55px;
        left: 8px;
        right: 8px;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.95),
          rgba(10, 10, 15, 0.98)
        );
        border: 1px solid rgba(0, 242, 255, 0.3);
        border-radius: 8px;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          padding 0.35s ease,
          opacity 0.25s ease;
        z-index: 15;
        backdrop-filter: blur(8px);
        opacity: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
      }
      .card-options-bar.align-right {
        left: auto;
        right: 8px; /* gdy blisko prawej krawędzi ekranu */
      }
      .card-options-bar.open {
        max-height: 200px;
        padding: 8px;
        opacity: 1;
      }
      .card-option-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: rgba(0, 242, 255, 0.04);
        border: 1px solid rgba(0, 242, 255, 0.15);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 6px;
        color: #ccc;
      }
      .card-option-row:last-child {
        margin-bottom: 0;
      }
      .card-option-row:hover {
        background: rgba(0, 242, 255, 0.12);
        border-color: var(--accent);
        color: #fff;
        transform: translateX(2px);
      }
      .card-option-row i {
        width: 18px;
        text-align: center;
        font-size: 0.85rem;
        color: var(--accent);
      }
      .card-option-row .opt-text {
        flex: 1;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      .card-option-row .opt-value {
        font-size: 0.65rem;
        color: var(--accent);
        font-weight: 900;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .card-option-row .opt-arrow {
        color: #444;
        font-size: 0.7rem;
      }

      /* Karta z otwartym paskiem - subtle highlight */
      .card.options-open {
        box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
        overflow: visible;
        z-index: 100;
      }

/* ===== MOBILE: ACHIEVEMENT BADGE SIZING ===== */
      @media (max-width: 768px) {
        .achievement-badge {
          width: 20px; /* było 32px - zmniejszone o ~40% */
          height: 20px;
          top: 8px;
          left: 8px;
        }
        .achievement-badge i {
          font-size: 10px !important;
        }
        .achievement-stack {
          bottom: 3px;
          left: 3px;
          gap: 2px;
          top: auto;
          padding: 3px 4px;
          border-radius: 15px;
        }
      }

/* ===== DESKTOP HOVER (PC z myszą) ===== */
      @media (hover: hover) and (pointer: fine) {
        .card-img-zoom {
          transition:
            transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
            filter 0.4s ease;
        }
        .card:hover .card-img-zoom {
          transform: scale(1.08);
          filter: brightness(1.1) saturate(1.15);
        }
      }

/* Trophy filter - osobny rząd pod platformami */
.trophy-filter-box {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: -15px 0 25px 0;
}

.f-btn-trophy {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid #333;
  color: #555;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 1rem;
  position: relative;
}

.f-btn-trophy i {
  transition: all 0.4s;
}

.f-btn-trophy:hover {
  border-color: #ffd966;
  color: #ffd966;
  transform: translateY(-2px);
}

/* Stan AKTYWNY - świecący trofeum w gradient platform */
.f-btn-trophy.active {
  background: radial-gradient(circle at 30% 30%, #ffd966 0%, #d4a017 60%, #8b6914 100%);
  border-color: #ffd966;
  color: #fff;
  box-shadow: 
    0 0 20px rgba(255, 215, 102, 0.7),
    0 0 35px rgba(255, 215, 102, 0.4),
    inset 0 0 8px rgba(255, 215, 102, 0.6);
}

.f-btn-trophy.active i {
  color: #fff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffd966);
  transform: scale(1.1);
}


@media (max-width: 768px) {
  .trophy-filter-box {
    margin: -10px 0 20px 0;
  }
  .f-btn-trophy {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid #333;
    color: #555;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  .f-btn-trophy.active {
    background: radial-gradient(circle at 30% 30%, #ffd966 0%, #d4a017 60%, #8b6914 100%);
    border-color: #ffd966;
    color: #fff;
    box-shadow: 
      0 0 20px rgba(255, 215, 102, 0.7),
      0 0 35px rgba(255, 215, 102, 0.4),
      inset 0 0 8px rgba(255, 215, 102, 0.6);
  }
  .f-btn-trophy.active i {
    color: #fff;
    filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffd966);
  }
}

/* ===== NAVBAR - Pigułka języka ===== */
.nav-lang-pill {
  display: flex !important;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* ===== Modal palety kolorów ===== */
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  transition: 0.3s;
  border: 1px solid transparent;
}
.color-swatch:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #222;
  transform: translateY(-3px);
}
.color-swatch.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}
.color-swatch-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #333;
  transition: 0.3s;
  position: relative;
}
.color-swatch:hover .color-swatch-circle,
.color-swatch.active .color-swatch-circle {
  border-color: #fff;
  transform: scale(1.05);
}
.color-swatch.active .color-swatch-circle::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
.color-swatch-name {
  font-size: 0.65rem;
  color: #888;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.color-swatch.active .color-swatch-name {
  color: var(--accent);
}

/* Mini przycisk powrotu obok nicka znajomego */
.nav-home-inline {
  background: rgba(255, 94, 0, 0.1);
  border: 1px solid var(--accent-social);
  color: var(--accent-social);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  transition: 0.3s;
  padding: 0;
  flex-shrink: 0;
}
.nav-home-inline:hover {
  background: rgba(255, 94, 0, 0.25);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 10px var(--accent-social);
  transform: scale(1.1);
}
.nav-home-inline.hidden-element {
  display: none !important;
}

/* ===== MOBILE BOTTOM SHEET ===== */
.mobile-menu-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 85vh;
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid var(--accent);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8), 0 -2px 20px rgba(0, 242, 255, 0.2);
  z-index: 5600;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  padding-bottom: 30px;
}
.mobile-menu-sheet.open {
  transform: translateY(0);
}
.mobile-menu-handle {
  width: 50px;
  height: 4px;
  background: #444;
  border-radius: 2px;
  margin: 12px auto 8px auto;
}
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 25px 18px 25px;
  border-bottom: 1px dashed #222;
}
.mobile-menu-header h3 {
  color: var(--accent);
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 3px;
  font-weight: 900;
}
.mobile-menu-close {
  background: transparent;
  border: 1px solid #333;
  color: #888;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.2s;
}
.mobile-menu-close:hover, .mobile-menu-close:active {
  border-color: var(--danger);
  color: var(--danger);
}
.mobile-menu-content {
  padding: 20px 25px 10px 25px;
}
.mobile-menu-section {
  margin-bottom: 22px;
}
.mobile-menu-section:last-child {
  margin-bottom: 0;
}
.mobile-menu-section-title {
  color: #666;
  font-size: 0.6rem;
  letter-spacing: 2px;
  font-weight: 900;
  margin-bottom: 12px;
}
.mobile-menu-item {
  width: 100%;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid #222;
  color: #ddd;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: 0.2s;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-item i {
  width: 20px;
  font-size: 0.95rem;
}
.mobile-menu-item:active {
  background: rgba(0, 242, 255, 0.08);
  border-color: var(--accent);
  transform: scale(0.98);
}
.mobile-menu-item-danger {
  border-color: rgba(255, 77, 77, 0.3);
  color: var(--danger);
}
.mobile-menu-item-danger:active {
  background: rgba(255, 77, 77, 0.1);
  border-color: var(--danger);
}

/* Mini kropki kolorów w bottom sheet */
.mobile-color-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #333;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.mobile-color-dot:active {
  transform: scale(0.95);
}
.mobile-color-dot.active {
  border-color: #fff;
  transform: scale(1.1);
}
.mobile-color-dot.active::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* ===== NAVBAR - widoczność elementów mobile vs desktop ===== */
@media (max-width: 768px) {
  /* Pokaż zębatkę na mobile */
  .nav-mobile-menu-btn {
    display: flex !important;
  }
  
  /* Ukryj na mobile elementy ktore są w bottom sheet */
  #nav-palette-btn,
  #nav-chat-btn,
  #nav-bell-btn,
  #nav-support-btn,
  .nav-actions > button[onclick*="logout"] {
    display: none !important;
  }
  
  /* Wishlist i język ZOSTAJĄ widoczne */
}

/* Mobile: mniejsza pigułka jezyka */
@media (max-width: 768px) {
  .nav-lang-pill .lang-flag {
    padding: 3px 6px;
    font-size: 0.6rem;
    gap: 3px;
  }
  .nav-lang-pill .lang-flag img {
    width: 12px !important;
  }
  .nav-lang-pill .lang-flag span {
    font-size: 0.4rem !important;
    padding: 1px 2px !important;
  }
}

/* ===== DRUGI WIERSZ NAVBARA - PC ONLY ===== */
.navbar-row-2 {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 16px 25px 4px 25px;
  margin-top: 12px;
  position: relative;
  background: transparent;
}
.navbar-row-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.4;
}

/* Wyszukiwarka w drugim wierszu navbara - dedykowane style */
.navbar-row-2 .navbar-search-container {
  flex: 1;
  max-width: 500px;
  display: flex !important;
  align-items: center;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid #222;
  border-radius: 25px;
  padding: 0 14px;
  height: 38px;
  transition: 0.3s;
  box-sizing: border-box;
}
.navbar-row-2 .navbar-search-container:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.2);
}
.navbar-row-2 .navbar-search-container > i {
  color: #555;
  font-size: 0.8rem;
  margin-right: 10px;
  flex-shrink: 0;
}
.navbar-row-2 .navbar-search-container > input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  height: 100% !important;
  padding: 0 !important;
  font-family: inherit !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  width: auto !important;
  min-width: 0;
}
.navbar-row-2 .navbar-search-container > input::placeholder {
  color: #444;
  letter-spacing: 1px;
}

/* Przycisk dropdown w navbarze */
.nav-dropdown-btn {
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid #2a2a2a;
  color: #ccc;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
  font-family: inherit;
  text-transform: uppercase;
}
.nav-dropdown-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 242, 255, 0.06);
}
.nav-dropdown-btn i:first-child {
  color: var(--accent);
}
.nav-dropdown-btn.active {
  border-color: var(--accent);
  background: rgba(0, 242, 255, 0.1);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

/* Dropdown menu (popup) */
.nav-dropdown-menu {
  position: fixed;
  background: rgba(10, 10, 10, 0.98);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 0;
  z-index: 5500;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 242, 255, 0.2);
  backdrop-filter: blur(15px);
}
.nav-dropdown-header {
  padding: 8px 16px 12px 16px;
  color: var(--accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  font-weight: 900;
  border-bottom: 1px dashed #222;
  margin-bottom: 4px;
}
.nav-dropdown-item {
  padding: 10px 16px;
  color: #aaa;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.2s;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.nav-dropdown-item i {
  color: #555;
  width: 14px;
  font-size: 0.8rem;
  transition: 0.2s;
}
.nav-dropdown-item:hover {
  background: rgba(0, 242, 255, 0.08);
  color: #fff;
  padding-left: 20px;
}
.nav-dropdown-item:hover i {
  color: var(--accent);
}
.nav-dropdown-item.active {
  background: rgba(0, 242, 255, 0.12);
  color: var(--accent);
  font-weight: 900;
}
.nav-dropdown-item.active i {
  color: var(--accent);
}
.nav-dropdown-item .item-count {
  margin-left: auto;
  color: #555;
  font-size: 0.7rem;
  font-weight: 700;
}
.nav-dropdown-item.active .item-count {
  color: var(--accent);
}

/* Trophy box w drugim wierszu */
.navbar-row-2 .trophy-filter-box {
  margin: 0;
}

/* PC ONLY / MOBILE ONLY */
.pc-only { display: flex; }
.mobile-only { display: none; }

@media (max-width: 768px) {
  .pc-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .toolbar.mobile-only { display: flex !important; }
  .filter-area.mobile-only { display: flex !important; }
  .trophy-filter-box.mobile-only { display: flex !important; }
  .navbar-row-2 { display: none !important; }
}

/* WYMUSZENIE 2-wierszowego layoutu navbara (PC) */
@media (min-width: 769px) {
  #navbar {
    flex-wrap: wrap !important;
  }
  #navbar > .navbar-row-2 {
    flex-basis: 100% !important;
    order: 99;
  }
}

/* ===== SORT SELECT w navbar-row-2 ===== */
.nav-sort-select {
  background: rgba(10, 10, 10, 0.8) !important;
  border: 1px solid #2a2a2a !important;
  color: #ccc !important;
  height: 38px !important;
  padding: 0 36px 0 16px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  width: auto !important;
  max-width: 230px !important;
  outline: none !important;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  transition: 0.3s;
}
.nav-sort-select:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: rgba(0, 242, 255, 0.06) !important;
}
.nav-sort-select option {
  background: #0a0a0a;
  color: #fff;
  font-weight: 700;
  padding: 8px;
}

/* Trophy filter box w navbar (PC) - bez margin */
.trophy-filter-box-nav-inline {
  display: flex;
  align-items: center;
  margin: 0;
}
.trophy-filter-box-nav-inline .f-btn-trophy {
  width: 38px;
  height: 38px;
  font-size: 0.85rem;
}

/* ============================================================
   v141 - LIST VIEW (mobile only)
   Zamienia pionowe karty 2-kolumnowe w listę pojedynczych wierszy.
   Tylko CSS - struktura HTML i wszystkie funkcje JS bez zmian.
   ============================================================ */
/* Domyślnie (PC): ikony mobilne ukryte → przyciski mają napisy */
.mobile-only-icon { display: none; }

@media (max-width: 768px) {

  /* Mobile: pokaż ikony, ukryj napisy w przyciskach */
  .pc-only-icon { display: none; }
  .mobile-only-icon { display: inline-block; }
  .btn-label { display: none; }
  .quick-btn, .del-btn { min-width: 40px; padding: 6px 10px !important; }

  /* Siatka kart: 2 kolumny → 1 kolumna, mniejszy gap */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Karta: pionowa (280px wys.) → pozioma (wiersz) */
.card {
    height: auto !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    align-items: stretch;
    border: 1px solid #2e2e2e !important;
    background: #141414 !important;
  }

.img-container {
    width: 96px !important;
    height: auto !important;
    min-height: 96px !important;
    align-self: stretch !important;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Obszar treści: brak paddingu (karta już je daje), gęstszy układ */
  .card-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* pozwala tytułowi się skracać */
  }

  /* Tytuł: max 2 linie, mniejszy */
  .game-title {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* Tag platformy */
  .plat-tag {
    font-size: 0.65rem !important;
    margin-bottom: 0 !important;
  }

  /* F:/T:/Data w jednej linii, kompaktowo */
  .card-times {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin-top: 2px !important;
    flex-wrap: wrap;
  }
  .time-box {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
    min-height: auto !important;
  }
  .time-box:last-child {
    flex-basis: 100% !important;
    padding: 2px 0 0 0 !important;
    font-size: 0.6rem !important;
  }

  /* Pasek przycisków na dole karty */
  .card-controls-panel {
    margin-top: auto !important;
    padding-top: 4px !important;
  }

  /* Trofea na miniaturce - mniejsze bo thumb jest mały */
  .achievement-stack {
    bottom: 2px !important;
    left: 2px !important;
    padding: 2px 3px !important;
    border-radius: 12px !important;
    gap: 2px !important;
  }
  .achievement-badge {
    width: 16px !important;
    height: 16px !important;
  }
  .achievement-badge i {
    font-size: 8px !important;
  }

}
/* ============================================================
   v141 - end of list view block
   ============================================================ */

   /* ====== WISHLIST jako lista (mobile) ====== */
@media (max-width: 768px) {
  #wishlist-drawer .grid { grid-template-columns: 1fr !important; }
  #wishlist-drawer .card { min-height: auto !important; }
  #wishlist-drawer .img-container {
    height: auto !important;
    min-height: 96px !important;
    align-self: stretch !important;
  }
}
/* Znajomi w pasku akcji wishlisty (PC i mobile) */
.card-controls-panel .friends-with-game {
  margin-top: 0;
  align-self: center;
}

/* ====== WISHLIST: szerszy card + zgrupowane przyciski (mobile) ====== */
@media (max-width: 768px) {
  /* Punkt 1: mniej paddingu drawera = szerszy card */
  #wishlist-drawer { padding: 16px 10px !important; }

  /* Punkt 2: znajomi z lewej, PLAY+zębatka+kosz zgrupowane z prawej */
  .card.wishlist-item .card-controls-panel { justify-content: flex-start !important; gap: 6px !important; }
  .card.wishlist-item .quick-btn { margin-left: auto !important; }
  .card.wishlist-item .edit-cog-btn { margin-left: 0 !important; margin-right: 0 !important; }

  /* Punkt 2: wszystkie 3 przyciski równe, małe, kwadratowe */
  .card.wishlist-item .quick-btn,
  .card.wishlist-item .edit-cog-btn,
  .card.wishlist-item .del-btn {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Pasek opcji (zębatka) — otwiera się przy zębatce w widoku listy (mobile) */
@media (max-width: 768px) {
  .card-options-bar {
    left: auto !important;
    right: 6px !important;
    width: auto !important;
    min-width: 180px;
    max-width: calc(100% - 12px) !important;
    bottom: 46px !important;
  }
  .card-options-bar.open {
    max-height: 150px !important;
    padding: 5px !important;
  }
  .card-option-row {
    padding: 5px 8px !important;
    margin-bottom: 3px !important;
    font-size: 0.62rem !important;
  }
}
/* ===== NAVBAR MOBILE - ujednolicenie (v1.41) ===== */
@media (max-width: 768px) {
  .nav-title { flex: 0 1 auto !important; min-width: 0 !important; }
  .nav-actions {
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 43px !important;
    margin-top: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .nav-btn { width: 40px !important; height: 40px !important; font-size: 0.95rem !important; }
  #nav-wishlist-btn { width: 40px !important; }
  .nav-lang-pill {
    height: 40px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    padding: 0 4px !important;
    gap: 2px !important;
    align-items: center !important;
  }
  .nav-lang-pill .lang-flag { padding: 6px 5px !important; gap: 0 !important; font-size: 0 !important; }
  .nav-lang-pill .lang-flag img { width: 18px !important; }
  .nav-lang-pill .lang-flag span { display: none !important; }
  #toggleRightBtn { border-radius: 50% !important; }
  .nav-lang-pill        { order: 1 !important; }
  #nav-wishlist-btn     { order: 2 !important; }
  .nav-mobile-menu-btn  { order: 3 !important; }
  #nav-version-badge { display: inline-block !important; font-size: 0.42rem !important; padding: 1px 4px !important; }
}
body:has(#sidebar-right:not(.hidden)) #toggleRightBtn i::before { content: "\f00d"; }

/* === PALETA KOLORÓW v1.43 - mniejsze kropki + bloom glow === */
.mobile-color-dot {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.07) !important;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.3s, border-color 0.25s;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35) inset,
    0 0 9px var(--dot-color, rgba(255,255,255,0.05)) !important;
}
.mobile-color-dot:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 16px var(--dot-color) !important;
}
.mobile-color-dot.active {
  border-color: rgba(255,255,255,0.7) !important;
  transform: scale(1.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 14px var(--dot-color),
    0 0 26px var(--dot-color) !important;
}
.mobile-color-dot.active::after { font-size: 0.8rem !important; }
.mobile-menu-section--theme-bottom .mobile-menu-section-title {
  opacity: 0.55;
  font-size: 0.55rem !important;
  margin-bottom: 10px !important;
}
.mobile-menu-section--theme-bottom #mobile-color-grid {
  gap: 10px !important;
  padding: 4px 0 2px !important;
}

/* ===== FILTER FUNNEL v1.44 ===== */
@media (max-width: 768px) {
  .toolbar.mobile-only {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .toolbar .search-container { flex: 1 1 auto !important; min-width: 0; }
}
.filter-funnel-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #222;
  background: rgba(0,0,0,0.5);
  color: #ccc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.2s;
  font-size: 1rem;
}
.filter-funnel-btn:active { transform: scale(0.95); }
.filter-funnel-btn.has-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.25);
}
.filter-active-dot {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #050505;
  box-shadow: 0 0 8px var(--accent);
}
.filter-funnel-btn.has-active .filter-active-dot { display: block; }
#filter-sheet #filterArea {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow: visible !important;
  width: 100%;
}
#filter-sheet #filterArea .f-btn {
  width: 100%;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem !important;
  padding: 10px 12px !important;
}
#filter-sheet #sortSelect.sort-btn-main {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}
#filter-sheet .mobile-menu-section { margin-bottom: 18px; }

/* === FILTER SHEET v1.45 - trofea jako pełny rząd + ładny reset === */
.f-btn-trophy--row {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  background: rgba(20,20,20,0.6) !important;
  border: 1px solid #222 !important;
  color: #ddd !important;
}
.f-btn-trophy--row > span.trophy-label { flex: 1; text-align: left; color: #ddd; }
.f-btn-trophy--row .trophy-pill {
  font-size: 0.55rem;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #333;
  color: #666;
  font-weight: 900;
}
.f-btn-trophy--row i { color: #777; font-size: 1.1rem; transition: 0.3s; }
.f-btn-trophy--row.active {
  background: rgba(255,215,102,0.05) !important;
  border-color: #ffd966 !important;
  box-shadow:
    0 0 14px rgba(255,215,102,0.25),
    inset 0 0 12px rgba(255,215,102,0.05) !important;
}
.f-btn-trophy--row.active i {
  color: #ffd966 !important;
  filter: drop-shadow(0 0 6px #ffd966) drop-shadow(0 0 10px rgba(255,215,102,0.4));
}
.f-btn-trophy--row.active .trophy-label { color: #fff; }
.f-btn-trophy--row.active .trophy-pill {
  background: rgba(255,215,102,0.18);
  border-color: #ffd966;
  color: #ffd966;
  text-shadow: 0 0 6px rgba(255,215,102,0.7);
}

.filter-reset-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed #333;
  color: #777;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.25s;
  font-family: inherit;
}
.filter-reset-btn::before { content: ">>"; color: #444; font-weight: 900; letter-spacing: -1px; transition: 0.25s; }
.filter-reset-btn::after  { content: "<<"; color: #444; font-weight: 900; letter-spacing: -1px; transition: 0.25s; }
.filter-reset-btn:hover, .filter-reset-btn:active {
  border-style: solid;
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255,77,77,0.06);
  box-shadow: 0 0 16px rgba(255,77,77,0.15);
}
.filter-reset-btn:hover::before, .filter-reset-btn:active::before,
.filter-reset-btn:hover::after,  .filter-reset-btn:active::after { color: var(--danger); }
.filter-reset-btn i { font-size: 0.85rem; }

/* === NAVBAR 2-ROW MOBILE v1.46 === */
.nav-row-2-mobile { display: none; }
@media (max-width: 768px) {
  /* navbar zostaje przyklejony do góry, ale teraz w 2 rzędach */
  #navbar {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 10px 12px 12px !important;
    row-gap: 10px !important;
  }
/* przycisk znajomych siedzi w prawym górnym rogu (position:fixed), więc nav-actions musi się od niego odsunąć */
  .nav-actions { margin-right: 50px !important; }
  /* drugi rząd: wyszukiwarka + lejek (full-width, własny rząd) */
  .nav-row-2-mobile {
    display: flex !important;
    flex-basis: 100% !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: stretch !important;
    order: 99;
  }
  .nav-row-2-mobile .search-container {
    flex: 1 1 auto !important;
    min-width: 0;
    height: 44px !important;
  }
  .nav-row-2-mobile .search-container input { height: 44px !important; }
  .nav-row-2-mobile #filter-funnel-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
}