@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;
    }

    .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;
    }
}


/* ver28: keep countdown centered and draggable on mobile */
@media (max-width: 768px) {
    .floating-countdown {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 20px) !important;
        cursor: move;
        touch-action: none;
    }
    .floating-countdown.is-positioned {
        transform: none !important;
    }
}

@media (max-width: 760px) {
    .gcash-panel {
        padding: 16px;
    }

    .gcash-layout {
        display: block;
    }

    .gcash-qr-box {
        margin-bottom: 22px;
    }

    .gcash-qr-frame img {
        max-width: 260px;
    }

    .gcash-form .form-group {
        margin-bottom: 14px;
    }

    .gcash-form .form-group input {
        min-height: 48px;
    }
}

@media (max-width: 760px) {
    .paypal-packages {
        grid-template-columns: 1fr;
    }

    .paypal-package-main {
        padding: 18px 14px;
    }
}

@media (max-width: 520px) {
    .topup-method-tabs {
        grid-template-columns: 1fr;
    }

    .topup-method-tab {
        min-height: 46px;
    }
}

@media (max-width: 760px) {
    .account-dashboard {
        padding: 18px;
    }

    .account-top {
        display: grid;
        gap: 14px;
    }

    .account-top h2 {
        font-size: 24px;
    }

    .game-status-badge {
        width: 100%;
        box-sizing: border-box;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .ecoins-card {
        padding-right: 16px;
        flex-wrap: wrap;
    }

    .mini-topup-btn {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 4px;
    }

    .account-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .unstuck-panel {
        padding: 18px;
    }

    .unstuck-info {
        display: block;
        text-align: center;
    }

    .unstuck-icon {
        margin: 0 auto 14px;
    }
}

@media (max-width: 819px) {
    .desktop-nav-shell {
        display: none !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    .mobile-nav {
        display: none;
    }

    .mobile-nav.is-open,
    .mobile-nav.open,
    .mobile-nav.active,
    body.menu-open .mobile-nav {
        display: block;
    }
}

@media (min-width: 901px) {
    .menu-toggle {
        display: none;
    }
}


/* ================================
   Mobile Menu Final Fix
================================ */
@media (max-width: 900px) {
    .desktop-nav-shell {
        display: none !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    .mobile-nav {
        display: none !important;
        padding: 16px 18px 18px !important;
        background: rgba(5, 3, 3, 0.96);
        border-top: 1px solid rgba(255, 120, 35, 0.22);
        border-bottom: 1px solid rgba(255, 120, 35, 0.22);
    }

    .mobile-nav.is-open {
        display: block !important;
    }

    .mobile-nav-title {
        display: block !important;
        width: 100% !important;
        margin: 12px 0 8px !important;
        padding: 0 0 7px !important;

        color: #ffd28a;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;

        border-bottom: 1px solid rgba(255, 170, 80, 0.26);
    }

    .mobile-nav a {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        box-sizing: border-box;
        margin: 0 0 10px !important;
        padding: 13px 14px !important;

        line-height: 1.2 !important;
        white-space: nowrap;

        border-radius: 13px;
        border: 1px solid rgba(255, 190, 100, 0.30);

        color: #f1e5d2;
        text-decoration: none;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;

        background:
            linear-gradient(180deg, rgba(18, 14, 12, 0.95), rgba(8, 6, 5, 0.95));
    }

    .mobile-nav a:hover,
    .mobile-nav a:active {
        color: #ffd28a;
        border-color: rgba(255, 200, 110, 0.60);
    }
}