/* ============================================================================
   mobile.css - poprawki widoku mobilnego
   Ladowany JAKO OSTATNI, po responsive.css.

   Dlaczego osobny plik, a nie dopiski w responsive.css:
   czesc regul musi bic SPECYFICZNOSCIA, nie kolejnoscia. Reguly w rodzaju
   ".container.no-right .content { width: 1400px !important }" (0,3,0) wygrywaly
   z ".content { width: 100% !important }" (0,1,0) z responsive.css - kolejnosc
   ladowania tego nie zmienia, bo specyficznosc jest wazniejsza. Tutaj selektory
   sa dobrane tak, zeby dorownac albo przebic tamte.

   Zakres: <=1024px (telefony i tablety w pionie).
   ========================================================================= */

@media (max-width: 1024px) {

    /* --------------------------------------------------------------------
       1. ZERO PRZEWIJANIA W POZIOMIE
       Layout desktopowy jest zbudowany na sztywnych 1400px. Na telefonie
       kazdy taki kontener wypycha strone poza ekran.
       -------------------------------------------------------------------- */
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .wrapper,
    .home-container,
    .home-hero,
    .home-hero-inner,
    .home-footer,
    .home-stats-strip,
    .home-sidebar,
    .top-panel .top-panel-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Trap specyficznosci opisany w naglowku pliku */
    .container .content,
    .container.public-page .content,
    .container.no-right .content,
    .container.guides-fullwidth .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .container.public-page .content::before,
    .container.public-page .content::after,
    .container.no-right .content::before,
    .container.no-right .content::after {
        display: none !important;
    }

    /* Media nie rozpycha layoutu */
    img,
    video,
    iframe,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tabele przewijaja sie wewnatrz siebie, a nie razem ze strona */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Dlugie nicki, linki i hexy nie rozrywaja kontenera */
    p, li, td, th, dd, figcaption,
    .news-content, .home-hero-news-excerpt, .faq-grid .faq-item {
        overflow-wrap: anywhere;
    }

    /* Siatki inline-style z widokow skladaja sie do jednej kolumny */
    .mobile-grid,
    .faq-grid,
    .dl-columns {
        grid-template-columns: 1fr !important;
    }

    /* --------------------------------------------------------------------
       2. ELEMENTY POZYCJONOWANE POD DESKTOP
       #online-counters ma "left: calc(50% - 660px)", a Server Time
       "right: 430px" - na ekranie 390px laduja poza widokiem. Zamiast je
       chowac, wracaja do normalnego przeplywu: status serwera i licznik
       online to informacje, ktorych gracz szuka najczesciej.
       -------------------------------------------------------------------- */
    #online-counters {
        position: static !important;
        left: auto !important;
        top: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 8px auto 4px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    #online-counters .online-counter-item {
        width: 165px !important;
    }

    #timer_div_title {
        position: static !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        text-align: center !important;
        margin: 2px 0 6px 0 !important;
        font-size: 12px !important;
    }

    /* --------------------------------------------------------------------
       3. TARGETY DOTYKOWE - minimum 44px (Apple HIG / WCAG 2.2)
       responsive.css mial 40px; 44px to dolna granica, ponizej ktorej
       rosnie liczba chybionych dotkniec.
       -------------------------------------------------------------------- */
    a.button,
    button,
    .button,
    input[type="submit"],
    input[type="button"],
    .mb-topbar-action,
    .mb-drawer a,
    .menu li a,
    .shot-open,
    .pagination a,
    .pagination span {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Pola formularzy: 44px wysokosci i 16px fontu.
       Ponizej 16px iOS Safari automatycznie przybliza strone przy focusie. */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Odstep miedzy sasiadujacymi targetami - bez tego palec trafia w oba */
    .menu li + li,
    .pagination a + a {
        margin-top: 6px !important;
    }

    /* --------------------------------------------------------------------
       4. CZYTELNOSC
       W theme.css siedzi kilkadziesiat rozmiarow 7-13px. Na telefonie
       tekst ponizej 12px jest praktycznie nieczytelny.
       -------------------------------------------------------------------- */
    body,
    p,
    li,
    td,
    .news-content,
    .home-hero-news-excerpt {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .faq-grid .faq-item .faq-a,
    .home-hero-news-excerpt {
        font-size: 13.5px !important;
    }
    small,
    .text-xs,
    figcaption {
        font-size: 12px !important;
    }

    /* Naglowki: wyrazna hierarchia zamiast jednej wielkosci */
    h1 { font-size: 1.45rem !important; line-height: 1.25 !important; }
    h2 { font-size: 1.2rem  !important; line-height: 1.3  !important; }
    h3 { font-size: 1.05rem !important; line-height: 1.35 !important; }

    /* --------------------------------------------------------------------
       5. DROBIAZGI DOTYKOWE
       -------------------------------------------------------------------- */
    /* Domyslna szara poswiata przy dotknieciu psuje ciemny motyw */
    a, button, .button, [role="button"] {
        -webkit-tap-highlight-color: rgba(201, 161, 92, 0.25);
    }

    /* Zapas na pasek gestow iPhone'a */
    .home-footer,
    .site-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Lightbox zrzutow: przycisk zamykania w zasiegu kciuka i wiekszy */
    .shot-lightbox .shot-lightbox-close {
        top: auto !important;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 28px !important;
    }
    .shot-lightbox img {
        max-height: 74vh !important;
    }
    .shot-lightbox-caption {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 16px !important;
    }
}

/* Uzytkownicy z wylaczonymi animacjami w systemie */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}