/* responsive.css - 响应式设计 */

/* 平板设备 */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1.2fr 1.2fr 0.8fr 1.2fr 0.8fr 0.8fr;
        padding: 0.8rem 1rem;
    }
    
    .nav-links {
        gap: 0.8rem;
    }
    
    .nav-links a {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* 手机设备 */
@media (max-width: 768px) {
    .cyber-nav {
        flex-direction: column;
        padding: 0.5rem 1rem;
    }
    
    .logo {
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .hero-section {
        padding: 2rem 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .latest-data {
        padding: 0 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr 1fr;
        padding: 0.8rem;
    }
    
    /* 隐藏表头，改为卡片式显示 */
    .table-header {
        display: none;
    }
    
    .table-row {
        margin-bottom: 0.5rem;
        border-radius: 8px;
        border: 1px solid rgba(11, 255, 251, 0.2);
    }
    
    .table-row > div {
        padding: 0.3rem 0;
    }
    
    .table-row > div:nth-child(1)::before {
        content: "期号: ";
        opacity: 0.7;
    }
    
    .table-row > div:nth-child(2)::before {
        content: "号码: ";
        opacity: 0.7;
    }
    
    .table-row > div:nth-child(3)::before {
        content: "总和: ";
        opacity: 0.7;
    }
    
    .table-row > div:nth-child(4)::before {
        content: "时间: ";
        opacity: 0.7;
    }
    
    .table-row > div:nth-child(5)::before {
        content: "大小: ";
        opacity: 0.7;
    }
    
    .table-row > div:nth-child(6)::before {
        content: "单双: ";
        opacity: 0.7;
    }
    
    .number-ball {
        width: 25px;
        height: 25px;
        font-size: 0.9rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cyber-modal {
        width: 95%;
        padding: 1.5rem;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .cyber-btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* 小屏幕手机 */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.6rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .cyber-card {
        padding: 1rem;
    }
    
    .table-row {
        grid-template-columns: 1fr;
    }
    
    .numbers {
        justify-content: center;
    }
}

/* 横屏模式 */
@media (max-height: 600px) and (orientation: landscape) {
    .cyber-header {
        position: static;
    }
    
    .hero-section {
        padding: 1.5rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
}