/* =========================================================
   DIYU 地獄 — WERSJA MOBILNA
   TYLKO TELEFONY I MAŁE TABLETY
========================================================= */

@media (max-width: 768px) {


    /* =====================================================
       GLOBALNE USTAWIENIA
    ===================================================== */

    html,
    body {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;

    }


    /* =========================================================
       MOBILNY HERO, MENU I WYSZUKIWARKA
    ===================================================== */

    .hero {
        position: relative;
        width: 100%;
        height: 220px;
        min-height: 220px;

        display: block;

        /* Większy banner — celowo lekko przycięty, bez pustej czerni. */
        background-position: 30% top;
        background-size: cover;
        background-repeat: no-repeat;
    }



    /* =====================================================
       OGÓLNA WIELKOŚĆ TEKSTÓW
    ===================================================== */

    h1 {

        font-size: 26px;

    }


    h2 {

        font-size: 22px;

    }


    p {

        font-size: 16px;

    }


    /* =====================================================
       KATEGORIE / FILTRY
    ===================================================== */

    .categories {

        gap: 8px;

        padding:

            25px
            12px;

    }


    .categories button {

        padding:

            9px
            12px;

        font-size: 12px;

    }


    /* =====================================================
       SEKCJE
    ===================================================== */

    .series {

        padding:

            20px
            12px;

    }


    .series h2 {

        font-size: 24px;

        margin-bottom: 20px;

    }


    /* =====================================================
       SIATKA SERII
    ===================================================== */

    .series-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 12px;

        padding: 8px;

    }


    .series-card {

        min-width: 0;

        border-radius: 4px;

    }


    .series-card img {

        width: 100%;

        height: auto;

        aspect-ratio: 2 / 3;

        object-fit: cover;

    }


    .series-info {

        padding:

            8px
            7px
            10px;

    }


    .series-info h3,
    .series-title {

        font-size: 16px;

        line-height: 1.15;

        margin:

            0
            0
            5px;

        word-break: break-word;

    }


    .series-info p {

        font-size: 12px;

        line-height: 1.3;

    }


    .adult-warning {

        top: 6px;

        right: 6px;

        padding:

            4px
            7px;

        font-size: 12px;

    }


    /* Na telefonie nie ma hovera,
       więc opis nie może psuć układu */

    .series-description {

        display: none;

    }


    /* =====================================================
       NAGŁÓWKI SEKCJI NA STRONIE GŁÓWNEJ
    ===================================================== */

    .latest-section {

        padding:

            35px
            10px
            40px;

    }


    .latest-section h2,
    .series-section > h2,
    .random-series-section > h2 {

        font-size: 19px;

        letter-spacing: 2px;

        gap: 8px;

        margin-bottom: 22px;

    }


    .latest-section h2::before,
    .latest-section h2::after,
    .series-section > h2::before,
    .series-section > h2::after,
    .random-series-section > h2::before,
    .random-series-section > h2::after {

        width: 25px;

        flex-shrink: 1;

    }


    /* =====================================================
       OSTATNIO DODANE
    ===================================================== */

    .latest-wrapper {

        width: 100%;

        gap: 6px;

    }


    .latest-list {

        gap: 10px;

    }


    .latest-list .latest-card {

        flex-basis: 145px;

        width: 145px;

        min-width: 145px;

    }


    .latest-list .latest-card > img {

        width: 100%;

        height: auto;

        aspect-ratio: 2 / 3;

        object-fit: cover;

    }


    .latest-list .latest-info {

        padding: 8px;

    }


    .latest-list .latest-info h3 {

        font-size: 13px;

        line-height: 1.2;

    }


    .latest-list .latest-info p,
    .latest-list .latest-info span {

        font-size: 11px;

    }


    .latest-arrow {

        flex: 0 0 24px;

        width: 24px;

        height: 45px;

        font-size: 30px;

    }


    /* =====================================================
       LOSOWE SERIE
    ===================================================== */

    .random-series-section {

        padding:

            25px
            12px
            45px;

    }


    .random-series-list {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 12px;

    }


    .random-series-list .series-info h3 {

        font-size: 16px;

    }


    /* =====================================================
       PRZEJŚCIE DO SPISU TŁUMACZEŃ
    ===================================================== */

    .translations-link-section {

        width: calc(
            100% - 24px
        );

        margin:

            30px
            auto
            40px;

        padding:

            25px
            18px;

    }


    .translations-link-section h2 {

        font-size: 20px;

        letter-spacing: 2px;

    }


    .translations-link-section p {

        font-size: 15px;

        line-height: 1.5;

    }


    /* =====================================================
       STRONA KONKRETNEJ SERII
    ===================================================== */

    .series-header {

        padding:

            20px
            16px;

    }


    .back-button {

        font-size: 16px;

    }


    .series-page {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        padding:

            15px
            16px
            35px;

    }


    .cover-box {

        width: min(
            230px,
            75vw
        );

        flex-shrink: 0;

    }


    .cover-box .series-cover,
    .series-cover {

        width: 100%;

        height: auto;

        aspect-ratio: 2 / 3;

        object-fit: cover;

    }


    .series-details {

        width: 100%;

        min-width: 0;

        text-align: center;

    }


    .series-details h1 {

        font-size: 25px;

        line-height: 1.2;

        margin-bottom: 15px;

    }


    .series-details h2 {

        font-size: 20px;

        margin-top: 25px;

    }


    .series-details p {

        font-size: 16px;

        line-height: 1.5;

    }


    /* =====================================================
       LISTA ROZDZIAŁÓW
    ===================================================== */

    .chapters-heading h2 {

        font-size: 21px;

    }


    .chapters-list {

        grid-template-columns: 1fr;

        gap: 7px;

        margin-top: 20px;

    }


    .chapters-list .chapter-item {

        min-height: 46px;

        padding:

            10px
            12px;

    }


    .chapter-number {

        font-size: 14px;

    }


    .chapter-title {

        font-size: 14px;

        line-height: 1.25;

    }


    /* =====================================================
       CZYTNIK — GÓRNY PANEL
    ===================================================== */

    .reader-header {

        min-height: auto;

        padding:

            10px
            12px;

        gap: 10px;

        align-items: center;

    }


    .reader-header-left {

        flex: 1;

        min-width: 0;

    }


    .reader-series-title {

        display: block;

        font-size: 17px;

        line-height: 1.15;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }


    .reader-current-chapter {

        font-size: 13px;

        line-height: 1.2;

    }


    .chapter-selector {

        flex-shrink: 0;

    }


    .chapter-selector select {

        min-width: 78px;

        max-width: 100px;

        padding:

            7px
            24px
            7px
            8px;

        font-size: 12px;

    }


    .chapter-selector::after {

        right: 8px;

        font-size: 16px;

    }


    /* =====================================================
       OBRAZKI CZYTNIKA
    ===================================================== */

    .reader-images {

        width: 100%;

    }


    .reader-images img {

        width: 100%;

        max-width: 100%;

        height: auto;

    }


    /* =====================================================
       PRZYCISKI CZYTNIKA
    ===================================================== */

    .chapter-buttons {

        width: calc(
            100% - 24px
        );

        margin:

            28px
            auto
            40px;

        gap: 10px;

    }


    .chapter-buttons a {

        flex: 1;

        min-width: 0;

        padding:

            12px
            8px;

        font-size: 12px;

        line-height: 1.25;

        text-align: center;

    }


    /* =====================================================
       PRZYCISKI PRZEWIJANIA
    ===================================================== */

    .reader-scroll {

        right: 10px;

        bottom: 18px;

        gap: 0;

    }


    .reader-scroll button {

        width: 28px;

        height: 34px;

        font-size: 42px;

    }


    /* =====================================================
       ZESPÓŁ
    ===================================================== */

    .team-section {

        width: calc(
            100% - 24px
        );

        margin:

            35px
            auto;

    }


    .team-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .team-card {

        width: 100%;

    }


    .team-title {

        font-size: 25px;

    }


    .team-divider {

        gap: 10px;

    }


    .team-divider p {

        font-size: 15px;

        letter-spacing: 1px;

        white-space: normal;

        text-align: center;

    }


    .team-description {

        font-size: 15px;

        line-height: 1.5;

    }


    /* =====================================================
       WSPARCIE / POZOSTAŁE KARTY
    ===================================================== */

    .support-main {

        padding:

            40px
            12px;

    }


    .support-card {

        width: 100%;

        padding:

            35px
            20px;

    }


    .support-card h1 {

        font-size: 24px;

        letter-spacing: 2px;

    }


    .support-text {

        font-size: 16px;

        line-height: 1.5;

    }


    /* =====================================================
       STOPKA
    ===================================================== */

    footer {

        padding:

            25px
            15px;

        font-size: 14px;

    }


    /* =====================================================
       FINALNE DOPASOWANIE STRONY GŁÓWNEJ
    ===================================================== */

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
    }

    .latest-section {
        padding: 28px 8px 32px;
    }

    .random-series-section {
        padding: 22px 12px 36px;
    }

    .latest-section h2,
    .series-section > h2,
    .random-series-section > h2 {
        font-size: 17px;
        letter-spacing: 1.5px;
        gap: 6px;
        margin-bottom: 18px;
        white-space: nowrap;
    }

    .latest-section h2::before,
    .latest-section h2::after,
    .series-section > h2::before,
    .series-section > h2::after,
    .random-series-section > h2::before,
    .random-series-section > h2::after {
        width: 22px;
        flex: 0 1 22px;
    }

    .latest-list {
        gap: 8px;
    }

    .latest-list .latest-card {
        flex: 0 0 130px;
        width: 130px;
        min-width: 130px;
    }

    .latest-list .latest-info {
        padding: 7px;
    }

    .latest-list .latest-info h3 {
        font-size: 12px;
    }

    .latest-list .latest-info p,
    .latest-list .latest-info span {
        font-size: 10px;
    }

    .latest-arrow {
        flex: 0 0 22px;
        width: 22px;
        font-size: 25px;
    }

    .random-series-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin: 0 auto;
    }

    .random-series-card {
        min-width: 0;
        aspect-ratio: 2 / 3;
    }

    .random-series-overlay {
        display: none;
    }

    .adult-warning {
        font-size: 11px;
        padding: 4px 7px;
    }

    /* Sekcja widoczna na screenie jako „CHCESZ WIĘCEJ?” */
    .more-translations {
        width: min(100% - 32px, 650px);
        margin: 0 auto 42px;
        padding: 18px 10px 0;
        text-align: center;
    }

    .more-translations h3 {
        margin: 0 0 10px;
        font-size: 25px;
        line-height: 1.25;
        letter-spacing: 1px;
    }

    .more-translations p {
        max-width: 320px;
        margin: 0 auto 18px;
        font-size: 18px;
        line-height: 1.35;
    }

    .more-translations a {
        padding: 10px 22px;
        font-size: 15px;
    }

    .translations-link-section h2 {
        font-size: 19px;
    }

    .translations-link-section p {
        font-size: 15px;
    }

}

/* =========================================================
   MNIEJSZE ODSTĘPY MIĘDZY SEKCJAMI NA TELEFONIE
========================================================= */

/* OSTATNIO DODANE */

.latest-section {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
}


/* LOSOWE SERIE */

.random-series-section {
    padding-top: 18px !important;
    padding-bottom: 25px !important;
}


/* Odstęp pod kartami */

.latest-wrapper {
    margin-bottom: 0 !important;
}


/* Jeśli została jakaś dekoracja po OSTATNIO DODANE */

.latest-section::after {
    display: none !important;
}


/* Główny separator między sekcjami */

.home-divider {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}


/* Ozdobna gwiazdka w separatorze */

.home-divider span {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


/* Nagłówki sekcji */

.latest-section h2,
.series-section > h2,
.random-series-section > h2 {
    margin-bottom: 14px !important;
}


/* Zmniejszenie pustych odstępów wokół ozdobników */

.section-divider {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* =========================================================
   DIYU 地獄 — FINALNE DOPASOWANIE MOBILE
   ZMIANY USTALONE NA PODSTAWIE SCREENÓW
   Desktop pozostaje bez zmian.
========================================================= */

@media (max-width: 768px) {

    /* CHCESZ WIĘCEJ? — mniejszy opis */
    .more-translations p {
        font-size: 16px !important;
        line-height: 1.45;
    }

    /* SPIS TYTUŁÓW — pusty komunikat na środku */
    .series-empty {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* KARTA KONKRETNEJ SERII — zwarta wersja mobilna */
    .series-page {
        width: calc(100% - 24px);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 20px 14px 28px;
    }

    .cover-box {
        width: 165px;
        max-width: 165px;
        margin: 0 auto;
    }

    .cover-box .series-cover,
    .series-cover {
        width: 165px;
        height: auto;
        aspect-ratio: 2 / 3;
        object-fit: cover;
    }

    .series-details {
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .series-details h1 {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .series-details h2 {
        font-size: 18px;
        line-height: 1.25;
        margin-top: 20px;
        padding-bottom: 7px;
    }

    .series-details p {
        font-size: 14px;
        line-height: 1.45;
    }

    .chapters-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        margin-top: 12px;
    }

    .chapters-list .chapter-item {
        min-height: 40px;
        padding: 7px 8px;
    }

    .chapter-number {
        min-width: 25px;
        margin-right: 6px;
        font-size: 11px;
    }

    .chapter-title {
        font-size: 12px;
        line-height: 1.2;
    }

    /* CZYTNIK — mniejszy tytuł i nazwa rozdziału */
    .reader-header {
        min-height: 58px;
        padding: 7px 10px;
        gap: 8px;
    }

    .reader-series-title {
        font-size: 15px;
        line-height: 1.1;
    }

    .reader-current-chapter {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.15;
    }

    /* Sama gwiazdka jako przycisk listy rozdziałów */
    .chapter-selector {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .chapter-selector select {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 34px;
        padding: 0;
        font-size: 0;
        color: transparent;
        background: rgba(18, 12, 12, 0.95);
        border: 1px solid rgba(139, 94, 52, 0.7);
        border-radius: 3px;
        cursor: pointer;
    }

    .chapter-selector select option {
        color: #d4af37;
        background: #120c0c;
        font-size: 11px !important;
        line-height: 1.15;
    }
    
.chapter-selector::after {
    display: none !important;
    content: none !important;
}

    /* CZYTNIK — małe przyciski; Następny po prawej */
    .chapter-buttons {
        width: calc(100% - 24px);
        margin: 22px auto 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }

    .chapter-buttons a {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 7px;
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }

    .chapter-buttons a:last-child {
        flex: 0 0 50%;
        width: 50%;
        margin-left: auto;
    }

    /* ZESPÓŁ — 4 osoby w jednym rzędzie */
    .team-section {
        width: calc(100% - 16px);
        margin: 28px auto;
    }

    .team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .team-card {
        width: 100%;
        min-width: 0;
    }

    .team-image {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .team-info {
        padding: 7px 3px 8px;
    }

    .team-info h2 {
        font-size: 11px;
        line-height: 1.15;
        margin-bottom: 3px;
        letter-spacing: 0;
        word-break: break-word;
    }

    .team-role {
        margin-bottom: 4px;
        font-size: 8px;
        line-height: 1.1;
        letter-spacing: 0.4px;
    }

    .team-description {
        font-size: 8px;
        line-height: 1.25;
    }

    .team-title {
        font-size: 21px;
    }

    /* WSPARCIE + DISCORD — około 30% mniejsze */
    .support-main {
        padding: 28px 10px;
    }

    .support-card {
        width: 72%;
        max-width: 500px;
        padding: 25px 16px;
    }

    .support-card::before,
    .support-card::after {
        font-size: 17px;
    }

    .support-card::before {
        top: 10px;
        left: 12px;
    }

    .support-card::after {
        bottom: 10px;
        right: 12px;
    }

    .support-ornament {
        margin-bottom: 7px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .support-card h1 {
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: 2px;
    }

    .support-symbol {
        width: 84px;
        height: 84px;
        margin: 20px auto 14px;
    }

    .support-card h2 {
        margin: 14px 0 10px;
        font-size: 19px;
    }

    .support-text {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.45;
    }

    .support-button {
        margin-top: 18px;
        padding: 11px 24px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .support-bottom-ornament {
        margin-top: 22px;
        font-size: 11px;
    }

    .discord-symbol {
        font-size: 22px;
    }

}

/* =========================================================
   DIYU — KOREKTY PO SCREENACH
========================================================= */

@media (max-width: 768px) {

    /* 1. SPIS — komunikat naprawdę na środku */
    .series-empty {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        display: block !important;
        width: 100% !important;
        max-width: 260px !important;
        margin: 18px auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /* 2. ZESPÓŁ — 3 karty w jednym rzędzie */
    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .team-card {
        min-width: 0 !important;
    }

    .team-info {
        padding: 7px 4px 8px !important;
    }

    .team-info h2 {
        font-size: 10px !important;
        line-height: 1.1 !important;
        margin-bottom: 3px !important;
        letter-spacing: 0 !important;
    }

    .team-role {
        font-size: 7.5px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.2px !important;
        margin-bottom: 4px !important;
    }

    .team-description {
        font-size: 7.5px !important;
        line-height: 1.22 !important;
    }

    /* 3–4. WSPARCIE / DISCORD — szersza karta, mniejszy tekst */
    .support-card {
        width: 84% !important;
        max-width: 600px !important;
        padding: 30px 22px !important;
    }

    .support-card h1 {
        font-size: 22px !important;
        line-height: 1.15 !important;
    }

    .support-card h2 {
        font-size: 18px !important;
    }

    .support-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .support-button {
        font-size: 13px !important;
        padding: 10px 22px !important;
    }

    .support-symbol {
        width: 82px !important;
        height: 82px !important;
    }

    /* 5–6. STRONA SERII — CSS ma być bezpieczny, gdy jest poprawnie
       załadowany; nie pozwalamy na poziome rozszerzanie strony. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .series-page {
        width: calc(100% - 24px) !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Informacje o serii mają zaczynać się od lewej krawędzi. */
    .series-details {
        text-align: left !important;
    }

    /* 8. PRZYCISKI — mniejsze, z bezpiecznym odstępem */
    .chapter-buttons {
        width: calc(100% - 28px) !important;
        margin: 24px auto 32px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .chapter-buttons a,
    .chapter-buttons a:last-child {
        flex: 0 0 37% !important;
        width: 37% !important;
        max-width: 37% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 6px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .chapter-buttons a:first-child {
        margin-right: auto !important;
    }

    .chapter-buttons a:last-child {
        margin-left: auto !important;
    }
}

@media (max-width: 768px) {

    /* =====================================================
       CZYTNIK — LISTA ROZDZIAŁÓW
       ===================================================== */

    .chapter-selector {
        position: relative;
    }

    .chapter-selector select {
        /*
         * Select pozostaje klikalny,
         * ale jego obszar jest przesunięty w lewo.
         */
        position: absolute !important;

        top: 0 !important;
        right: 30px !important;

        width: 210px !important;
        height: 36px !important;

        opacity: 0.01 !important;

        z-index: 20 !important;
    }


    /*
     * Gwiazdka zostaje na swoim miejscu
     */
    .chapter-selector::after {
        right: 0 !important;

        width: 32px !important;
        height: 32px !important;

        font-size: 24px !important;

        z-index: 21 !important;
    }


    /*
     * Sam przycisk/select wizualnie nie robi
     * dodatkowego prostokąta.
     */
    .chapter-selector {
        background: transparent !important;
        border: none !important;
    }


    /* =====================================================
       LISTA ROZWIJANA
       ===================================================== */

    .chapter-selector select option {
        font-size: 11px !important;
    }

}

@media (max-width: 768px) {

    .chapter-selector {
        position: relative !important;
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        overflow: visible !important;
    }

    .chapter-selector select {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;

        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        height: 34px !important;

        padding: 0 !important;

        opacity: 0 !important;

        background: transparent !important;

        border: 0 !important;

        z-index: 10 !important;

        cursor: pointer !important;
    }

    .chapter-selector::after {
        content: "⚝" !important;

        position: absolute !important;

        top: 50% !important;
        right: 0 !important;

        width: 34px !important;
        height: 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        transform: translateY(-50%) !important;

        color: #d4af37 !important;

        font-size: 25px !important;

        pointer-events: none !important;

        z-index: 11 !important;
    }
}

/* =========================================================
   LOGOWANIE CZYTELNIKA — MOBILE
   Ta sama wersja co PC, tylko pomniejszona
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------
       CAŁA STRONA
       ----------------------------------------- */

    .reader-login-page {
        min-height: 100vh;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 18px;
    }


    /* -----------------------------------------
       GŁÓWNY PANEL
       ----------------------------------------- */

    .reader-login-box {
        width: 100%;
        max-width: 340px;

        padding: 38px 26px;

        background:
            linear-gradient(
                145deg,
                #1a0b0b,
                #100606
            );

        border: 1px solid #8b0000;

        box-shadow:
            0 0 25px rgba(0, 0, 0, 0.8),
            0 0 35px rgba(139, 0, 0, 0.12);
    }


    /* -----------------------------------------
       DEKORACYJNA LINIA Z GÓRY
       ----------------------------------------- */

    .reader-login-box::before {
        height: 75px;
    }


    /* -----------------------------------------
       TYTUŁ
       ----------------------------------------- */

    .reader-login-title {

        margin: 0;

        font-size: 24px;

        line-height: 1.25;

        letter-spacing: 2.5px;

        text-align: center;
    }


    /* -----------------------------------------
       OPIS
       ----------------------------------------- */

    .reader-login-text {

        margin-top: 10px;

        font-size: 14px;

        line-height: 1.45;

        text-align: center;

        opacity: 0.85;
    }


    /* -----------------------------------------
       LINIA POD OPISEM
       ----------------------------------------- */

    .reader-login-text::after {

        width: 90%;

        margin:
            22px auto;
    }


    /* -----------------------------------------
       FORMULARZ
       ----------------------------------------- */

    #reader-login-form {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 14px;
    }


    /* -----------------------------------------
       POLE HASŁA
       ----------------------------------------- */

    #reader-password {

        width: 100%;

        height: 42px;

        padding:
            0 42px 0 12px;

        font-size: 15px;

        text-align: center;
    }


    /* -----------------------------------------
       PRZYCISK
       ----------------------------------------- */

    #reader-login-form button[type="submit"] {

        width: 100%;

        height: 42px;

        margin-top: 0;

        padding: 8px 12px;

        font-size: 11px;

        letter-spacing: 2px;
    }


    /* -----------------------------------------
       KOMUNIKAT BŁĘDU
       ----------------------------------------- */

    .reader-login-message {

        font-size: 13px;

        margin-top: 8px;
    }

}

/* =========================================================
   DIYU 地獄 — MENU MOBILE
   2 + 3, zwarte odstępy, bez ramek
   ========================================================= */

@media (max-width: 768px) {

    .menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 12px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 7px 8px !important;

        background: rgba(5, 4, 4, 0.68) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.18) !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
    }

    .menu-links {
        position: relative !important;

        width: min(305px, calc(100vw - 30px)) !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        /* 12 małych kolumn pozwala niezależnie ustawić 2 + 3 */
        grid-template-columns: repeat(12, 1fr) !important;
        grid-template-rows: auto auto !important;

        column-gap: 0 !important;
        row-gap: 7px !important;

        align-items: center !important;
    }

    /* =========================
       RZĄD 1 — 2 elementy
       ========================= */

    .menu-links a:nth-child(1) {
        grid-column: 1 / span 6 !important;
        grid-row: 1 !important;

        justify-self: center !important;
        transform: translateX(7px) !important;
    }

    .menu-links a:nth-child(2) {
        grid-column: 7 / span 6 !important;
        grid-row: 1 !important;

        justify-self: center !important;
        transform: translateX(-7px) !important;
    }

    /* =========================
       RZĄD 2 — 3 elementy
       ========================= */

    .menu-links a:nth-child(3) {
        grid-column: 2 / span 3 !important;
        grid-row: 2 !important;

        justify-self: center !important;
        transform: none !important;
    }

    .menu-links a:nth-child(4) {
        grid-column: 5 / span 4 !important;
        grid-row: 2 !important;

        justify-self: center !important;
        transform: none !important;
    }

    .menu-links a:nth-child(5) {
        grid-column: 9 / span 3 !important;
        grid-row: 2 !important;

        justify-self: center !important;
        transform: none !important;
    }

    .menu-links a {
        position: relative !important;

        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 2px 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        color: #d6b54c !important;
        font-size: 11px !important;
        line-height: 1.2 !important;

        text-align: center !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .menu-links a:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #fff1d0 !important;
    }

    /* =========================
       GWIAZDKI
       ========================= */

    .menu-links a::before,
    .menu-links a::after,
    .menu-links::before,
    .menu-links::after {
        content: none !important;
    }

    .menu-links a:nth-child(1)::before,
    .menu-links a:nth-child(3)::before {
        content: "⚝" !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        left: -13px !important;

        color: #d4af37 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    .menu-links a:nth-child(1)::after,
    .menu-links a:nth-child(2)::after,
    .menu-links a:nth-child(3)::after,
    .menu-links a:nth-child(4)::after,
    .menu-links a:nth-child(5)::after {
        content: "⚝" !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        right: -13px !important;

        color: #d4af37 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }
}



/* =========================================================
   DIYU — WYSZUKIWARKA MOBILE
   JEDNA, STABILNA WERSJA
========================================================= */

@media (max-width: 768px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .search-box {
        position: sticky !important;
        top: 12px !important;
        width: calc(100vw - 24px) !important;
        height: 42px !important;
        margin: 12px !important;
        padding: 0 !important;
        z-index: 2147483647 !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
        float: none !important;
    }

    .search-box input {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 42px !important;
        width: calc(100% - 42px) !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .search-box button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
        transform: none !important;
    }

}

/* =========================
   TYTUŁY SERII — TELEFON
   ========================= */

@media (max-width: 600px) {

    .series-title {
        min-height: 62px;
        padding: 6px 8px;
        font-size: 14px;
        line-height: 1.1;
    }

    .series-title--medium {
        font-size: 12px;
    }

    .series-title--long {
        font-size: 12px;
    }

    .series-title--very-long {
        font-size: 12px;
    }

}

/* =========================
   LOSOWE SERIE — TELEFON
   ========================= */

@media (max-width: 600px) {

    .random-series-list {
        grid-template-columns: repeat(2, 140px);
        justify-content: center;
        gap: 15px;
    }

}

/* =========================
   OSTRZEŻENIE 18+
   ========================= */

   @media (max-width: 600px) {

    .adult-warning-box {
        padding: 28px 22px;
    }

    .adult-warning-box h2 {
        font-size: 23px;
    }

    .adult-warning-box p {
        font-size: 17px;
    }

    .adult-warning-buttons {
        flex-direction: column;
    }

    .adult-warning-buttons button {
        width: 100%;
    }

}