/* Mobile and tablet stability + responsive fixes */

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

body {
    min-height: 100vh;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* iOS and Android performance: avoid fixed attachment jank */
@media (max-width: 1024px), (hover: none) {
    body {
        background-attachment: scroll !important;
        background-position: center top !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    header {
        top: 12px !important;
    }

    main {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }

    .other-statuses .other.statuses,
    .other-statuses .statuses {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phone */
@media (max-width: 700px) {
    main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .main-sect {
        font-size: 44px;
    }

    .main-sect h1,
    .music h1,
    .island .upper h1,
    .faq-title,
    .license-title,
    .subscription-title {
        font-size: 32px !important;
        line-height: 1.15 !important;
        text-align: center;
    }

    .hero-title {
        max-width: 360px !important;
    }

    .main-sect p,
    .music p,
    .server-events p,
    .faq-answer,
    .license-section p,
    .license-section li {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .main-sect > div[style*="display: flex; gap"] {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px !important;
    }

    .hero-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px !important;
    }

    .hero-badge {
        width: 100%;
        justify-content: center;
        text-align: center;
        line-height: 1.35;
        padding: 14px 16px;
    }

    .main-sect > div[style*="display: flex; gap"] .hero-button {
        width: 100%;
    }

    .stats {
        flex-wrap: wrap;
        gap: 14px;
    }

    .stats > div {
        flex: 1 1 140px;
    }

    .stats h2 {
        font-size: 34px;
        margin-bottom: 8px;
    }

    .other-statuses .other.statuses,
    .other-statuses .statuses {
        grid-template-columns: 1fr !important;
    }

    .music-stack,
    .highlight.music,
    .mod-stack {
        width: 100% !important;
        max-width: 100% !important;
    }

    .music-stack {
        height: auto;
        min-height: 260px;
    }

    .highlight.music {
        position: static !important;
        transform: none !important;
        padding: 20px;
    }

    .music-bg,
    .music-front,
    .mod-bg,
    .mod-front {
        transform: none !important;
    }

    .highlight.mod {
        position: static;
        margin-bottom: 12px;
    }

    .form-container {
        width: 100%;
        max-width: 100%;
        padding: 24px 16px !important;
        border-radius: 24px;
    }

    .input-wrapper,
    .submit-btn {
        width: 100% !important;
    }

    .faq-item,
    .license-container,
    .admin-card,
    .box,
    .subscription-card {
        border-radius: 16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .upper-info {
        gap: 10px;
        padding: 14px !important;
    }

    .upper-info img {
        width: 54px !important;
        height: 54px !important;
    }

    .text .name {
        font-size: 18px !important;
    }

    .text .uid {
        font-size: 14px !important;
    }

    .buttons {
        flex-direction: column;
        gap: 10px;
    }

    .buttons button {
        width: 100%;
    }

    .footer {
        margin-top: 56px;
    }

    .footer-content {
        padding: 16px !important;
        gap: 16px !important;
    }

    .footer-section h3 {
        font-size: 16px !important;
        margin-bottom: 10px;
    }

    .footer-section p,
    .footer-section ul li a {
        font-size: 14px !important;
    }
}

/* Safe fallback: never let preloader freeze mobile users */
@media (max-width: 1024px), (hover: none) {
    #preloader {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}