/* Responsywność (ładowany po base/menu/battle/shop..., przed modals/hud). */

/* Węższe okna: mniej zbędnych odstępów. */
@media (max-width: 760px) {
    body {
        padding: 0.6rem;
    }

    .main {
        padding: 0.75rem;
        border-radius: 0.75rem;
        box-shadow: 0.3rem 0.3rem 0 var(--main-shadow);
    }

    #titleheader {
        font-size: 2rem;
    }

    #battle-screen,
    #shop-screen,
    #inventory-screen,
    #skin-screen {
        padding: 0.65rem;
    }

    .battle-header,
    .shop-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .battle-header h2,
    .shop-header h2 {
        font-size: 1.5rem;
    }

    .inventory-layout {
        grid-template-columns: 1fr;
    }

    .inventory-current,
    .inventory-owned,
    .inventory-magic,
    .inventory-ad {
        grid-column: 1;
        grid-row: auto;
    }

    .skin-layout {
        grid-template-columns: 1fr;
    }

    /* Filtry jako poziomy pasek chipów nad siatką. */
    .skin-filters {
        flex-direction: row;
        gap: 0.4rem;
        padding: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .skin-filters h3 {
        display: none;
    }

    .skin-filter {
        flex: 0 0 auto;
        align-items: center;
        white-space: nowrap;
    }

    /* Podgląd skina jako okno po kliknięciu karty. */
    .skin-details {
        position: fixed;
        z-index: 20;
        top: 50%;
        right: 0.75rem;
        left: 0.75rem;
        display: none;
        box-sizing: border-box;
        max-width: 26rem;
        max-height: calc(100dvh - 1.5rem);
        margin: 0 auto;
        overflow-y: auto;
        transform: translateY(-50%);
    }

    .skin-layout.skin-modal-open .skin-details {
        display: block;
    }

    .skin-backdrop {
        position: fixed;
        inset: 0;
        z-index: 19;
        background: rgba(0, 0, 0, 0.65);
    }

    .skin-layout.skin-modal-open .skin-backdrop {
        display: block;
    }

    .skin-details-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: block;
    }

    .skin-variants img {
        height: 11rem;
    }

    .shop-items {
        max-height: 18rem;
    }

    /* Podgląd przedmiotu jako okno po kliknięciu karty. */
    .shop-details {
        position: fixed;
        z-index: 20;
        top: 50%;
        right: 0.75rem;
        left: 0.75rem;
        display: none;
        box-sizing: border-box;
        max-width: 26rem;
        max-height: calc(100dvh - 1.5rem);
        margin: 0 auto;
        overflow-y: auto;
        transform: translateY(-50%);
    }

    .shop-store-layout.shop-modal-open .shop-details {
        display: block;
    }

    .shop-backdrop {
        position: fixed;
        inset: 0;
        z-index: 19;
        background: rgba(0, 0, 0, 0.65);
    }

    .shop-store-layout.shop-modal-open .shop-backdrop {
        display: block;
    }

    /* Przycisk zamknięcia stoi w nagłówku obok ikony i jest wyśrodkowany względem niej. */
    .shop-details-close {
        flex: none;
        display: block;
    }

    /* Mniej sztywnej wysokości grafik walki, żeby zmieściły się na ekranie telefonu. */
    .battle-model,
    .enemy-silhouette {
        height: 11rem;
    }

    .battle-model img {
        max-height: 11rem;
    }

    #battle-player-stats,
    .shop-items,
    .shop-list,
    .skin-list {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 520px) {
    body {
        padding: 0.4rem;
    }

    #titleheader {
        font-size: 1.75rem;
    }

    #titleedition {
        margin-bottom: 0.9rem;
        font-size: 0.85rem;
    }

    .battle-actions,
    .inventory-actions {
        grid-template-columns: 1fr;
    }

    .stat-line {
        gap: 0.5rem;
    }

    .combatant h3 {
        min-height: 0;
    }

    .shop-items {
        max-height: 16rem;
    }

    .skin-list {
        max-height: 24rem;
    }

    .shop-list-filtered .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-list:not(.shop-list-filtered) .shop-card {
        flex-basis: 15rem;
    }

    .skin-list-filtered .skin-grid {
        grid-template-columns: 1fr 1fr;
    }

    .skin-list:not(.skin-list-filtered) .skin-card {
        flex-basis: 8.5rem;
    }

    .skin-preview {
        height: 8rem;
    }

    .battle-model,
    .enemy-silhouette {
        height: 9.5rem;
    }

    .battle-model img {
        max-height: 9.5rem;
    }

    .site-footer {
        font-size: 0.8rem;
    }
}