/* ============================================================
   麻将胡了 - 响应式样式表 hz-responsive.css
   ============================================================ */

/* ---- xl: >= 1280px (Desktop) ---- */
@media (min-width: 1280px) {
    .hz-hero h1 {
        font-size: 2.5rem;
    }
}

/* ---- lg: 1024px - 1279px ---- */
@media (max-width: 1279px) {
    .hz-hero h1 {
        font-size: 2rem;
    }
    
    .hz-nav-links li a {
        font-size: 0.78rem;
        padding: 8px 8px;
    }
    
    .hz-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- md: 768px - 1023px (Tablet) ---- */
@media (max-width: 1023px) {
    .hz-hero h1 {
        font-size: 1.5rem;
    }
    
    .hz-hero-stats {
        gap: 24px;
    }
    
    .hz-hero-stat-num {
        font-size: 1.2rem;
    }
    
    .hz-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hz-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hz-announcements {
        grid-template-columns: 1fr;
    }
    
    .hz-announce-main {
        grid-row: auto;
    }
    
    .hz-partners-section {
        grid-template-columns: 1fr;
    }
    
    .hz-rank-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hz-app-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hz-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--hz-color-bg);
        flex-direction: column;
        padding: 20px;
        border-bottom: 4px solid var(--hz-color-accent);
        gap: 0;
    }
    
    .hz-nav-links.hz-nav-open {
        display: flex;
    }
    
    .hz-nav-links li a {
        padding: 12px 16px;
        display: block;
        border-bottom: 1px solid var(--hz-color-primary);
    }
    
    .hz-hamburger {
        display: flex;
    }
    
    .hz-navbar-inner {
        flex-wrap: wrap;
    }
    
    .hz-nav-cta-desktop {
        display: none;
    }
}

/* ---- sm: 640px - 767px (Phone Landscape) ---- */
@media (max-width: 767px) {
    .hz-hero h1 {
        font-size: 1.2rem;
    }
    
    .hz-hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hz-hero-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    .hz-hero-btns {
        flex-direction: column;
        align-items: center;
    }
    
    .hz-grid-2,
    .hz-grid-3,
    .hz-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .hz-section {
        padding: 48px 0;
    }
    
    .hz-footer-grid {
        grid-template-columns: 1fr;
    }
    
    .hz-music-box {
        flex-direction: column;
    }
    
    .hz-cassette-img {
        width: 200px;
    }
    
    .hz-rank-list {
        grid-template-columns: 1fr;
    }
    
    .hz-app-features {
        grid-template-columns: 1fr;
    }
    
    .hz-download-btns {
        flex-direction: column;
        align-items: center;
    }
    
    .hz-announcements {
        grid-template-columns: 1fr;
    }
    
    .hz-leaderboard {
        overflow-x: auto;
    }
}

/* ---- xs: < 640px (Phone Portrait) ---- */
@media (max-width: 639px) {
    .hz-hero h1 {
        font-size: 1rem;
    }
    
    .hz-hero-badge {
        font-size: 0.45rem;
    }
    
    .hz-hero-stat-num {
        font-size: 1rem;
    }
    
    .hz-section-header h2 {
        font-size: 0.85rem;
    }
    
    .hz-container {
        padding: 0 12px;
    }
    
    .hz-hall-scroll {
        animation-duration: 20s;
    }
    
    .hz-player-card {
        width: 130px;
    }
    
    .hz-match-area {
        padding: 32px 16px;
    }
    
    .hz-btn-match {
        font-size: 0.75rem;
        padding: 16px 40px;
    }
    
    .hz-breadcrumb-list {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
}