#hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 200;
    flex-shrink: 0;
    position: fixed;
    top: 20px;
    left: 18px;
}
#hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {

    header {
        height: auto !important;
        width: auto !important;
        flex-direction: row !important;
        padding: 14px 18px 14px 66px !important; /* miejsce na hamburger po lewej */
        background: transparent !important;
        align-items: center !important;
    }

    .header-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .logo {
        width: 54px !important;
        height: 54px !important;
        opacity: 1 !important;
        animation: none !important;
    }

    #hamburger { display: flex !important; }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,.95);
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
        margin: 0 !important;
    }

    nav.open {
        opacity: 1;
        pointer-events: all;
    }

    nav ul {
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
    }

    nav ul li {
        opacity: 1 !important;
        animation: none !important;
        height: auto !important;
    }

    nav ul li a {
        font-size: 28px !important;
        font-weight: 700;
        letter-spacing: .1em;
        padding: 8px 20px !important;
    }

    #hamburger { display: flex; }

    .text-container {
        top: 30% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .center-text {
        font-size: min(38vw, 260px) !important;
        white-space: nowrap !important;
    }

    #title-gap { width: 0.9em !important; }

    .discord-button-container {
        top: auto !important;
        bottom: 22vh;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .character-img { height: 75vh !important; }

    .social-links-container {
        bottom: 14px !important;
        right: 14px !important;
        gap: 18px !important;
    }

    #visitor-counter {
        bottom: 14px !important;
        left: 14px !important;
    }

    .language-switcher-container {
        top: 14px !important;
        right: 14px !important;
        z-index: 300 !important;
    }

    .language-dropdown-menu {
        right: 0 !important;
        top: 55px !important;
        transform: none !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        padding: 8px !important;
        gap: 4px !important;
    }

    .subpage-main { padding-left: 20px !important; padding-right: 20px !important; padding-top: 100px !important; }
    .info-main    { padding: 100px 20px 60px 20px !important; }
    .products-main{ padding: 100px 20px 60px 20px !important; }
    .info-grid    { grid-template-columns: repeat(2, 1fr) !important; }
    .prod-grid    { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 600px) {

    .center-text { font-size: min(40vw, 180px) !important; }
    #title-gap   { width: 0.7em !important; }

    .discord-button { font-size: 15px !important; padding: 10px 20px !important; }

    .character-img { height: 65vh !important; }

    .social-links-container { gap: 14px !important; }
    .social-link { font-size: 22px !important; }

    #audio-toggle { width: 38px !important; height: 38px !important; font-size: 15px !important; }
    .language-switcher-button { width: 38px !important; height: 38px !important; font-size: 14px !important; }

    #enter-logo { width: 200px !important; height: 200px !important; }
    #enter-btn  { font-size: 16px !important; padding: 12px 36px !important; }

    .info-grid  { grid-template-columns: 1fr !important; }
    .info-cta   { flex-direction: column !important; align-items: flex-start !important; }
    .info-heading { font-size: clamp(28px, 8vw, 48px) !important; }

    .prod-grid  { grid-template-columns: 1fr !important; }
    .prod-payments-list { gap: 8px !important; }
}

@media (max-width: 380px) {
    .center-text { font-size: 36vw !important; }
    nav ul li a  { font-size: 22px !important; }
    .character-img { height: 55vh !important; }
}