@media (min-width: 560px) {
    .main-content { padding: 18px; }
    .quick-actions { grid-template-columns: repeat(3, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .status-grid { grid-template-columns: 1fr 1fr; }
    .shop-top { grid-template-columns: 1fr 1.2fr; align-items: end; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 820px) {
    .topbar { padding: 16px 24px; }
    .menu-toggle { display: none; }
    .mobile-nav {
        display: flex;
        justify-content: center;
        padding: 10px 18px;
    }
    .mobile-nav a { min-width: 94px; }
    .hero-art { min-height: 470px; background-position: center center; }
    .quick-actions, .feature-grid, .status-grid { gap: 16px; }
}

@media (max-width: 380px) {
    .brand img { width: 66vw; }
    .hero-art { min-height: 330px; }
    .season-label { font-size: 2.35rem; }
    .feature-card { grid-template-columns: 48px 1fr 16px; padding: 13px; }
    .feature-icon { width: 46px; height: 46px; font-size: 1.35rem; }
    .feature-card strong { font-size: 1.05rem; }
    .online-row strong, .players-count { font-size: 1.65rem; }
}

@media (max-width: 430px) {
    .footer-links {
        gap: 10px;
        font-size: .78rem;
    }
    .legal-panel {
        line-height: 1.55;
    }
}

@media (max-width: 430px) {
    .qr-frame {
        width: min(220px, 100%);
        padding: 10px;
    }
    .download-card-head {
        gap: 10px;
    }
    .download-icon {
        width: 46px;
        height: 46px;
        font-size: 1.35rem;
    }
}



@media (max-width: 430px) {
    .offline-card {
        padding-left: 14px;
        padding-right: 14px;
    }
    .offline-rune {
        width: 68px;
        height: 68px;
        font-size: 1.8rem;
    }
    .offline-status {
        width: 100%;
        justify-content: center;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    .checkbox-row {
        font-size: .86rem;
    }
    .register-warning-box {
        padding: 11px;
    }
}

@media (max-width: 420px) {
    .discord-header-btn {
        padding: 9px 10px;
    }

    .discord-text {
        display: none;
    }

    .discord-header-icon {
        width: 23px;
        height: 23px;
    }
}

/* ver13: mobile hero auto-fit so banner image/video is not cropped */
@media (max-width: 768px) {
    .hero-art {
        min-height: 0;
        aspect-ratio: 16 / 9;
        background-color: #050303;
    }

    .hero-image {
        background-size: contain;
        background-position: center center;
        background-color: #050303;
    }

    .hero-video {
        object-fit: contain;
        object-position: center center;
        background: #050303;
    }

    .hero-content {
        padding: 52px 12px 12px;
    }

    .season-label {
        font-size: clamp(1.8rem, 11vw, 3.3rem);
    }

    .hero-content h1 {
        font-size: .72rem;
        letter-spacing: .14em;
    }

    .hero-content p {
        font-size: .75rem;
    }
}

/* ver23: bigger hero placeholder/tagline text on mobile */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: clamp(1.05rem, 5vw, 1.55rem) !important;
        line-height: 1.15 !important;
        letter-spacing: .09em !important;
    }
}