/* ============================================
   开元棋牌 - 响应式样式表 (ky-responsive.css)
   断点：xs(<640) sm(640-767) md(768-1023) lg(1024-1279) xl(>=1280)
   ============================================ */

/* --- xl: Desktop (>=1280px) - Default styles --- */

/* --- lg: Small Laptop (1024-1279px) --- */
@media (max-width: 1279px) {
  .ky-container {
    max-width: 1024px;
  }
  .ky-hero h1 {
    font-size: 3rem;
  }
  .ky-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 30px;
  }
}

/* --- md: Tablet (768-1023px) --- */
@media (max-width: 1023px) {
  .ky-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ky-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ky-hero h1 {
    font-size: 2.5rem;
  }
  .ky-hero-stats {
    gap: 30px;
  }
  .ky-hero-stat-number {
    font-size: 1.8rem;
  }
  .ky-vip-layout {
    grid-template-columns: 1fr;
  }
  .ky-article-layout {
    grid-template-columns: 1fr;
  }
  .ky-app-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ky-app-image {
    order: -1;
  }
  .ky-app-buttons {
    justify-content: center;
  }
  .ky-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ky-page-hero h1 {
    font-size: 2rem;
  }
  .ky-app-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .ky-odds-match {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .ky-section-title {
    font-size: 1.8rem;
  }
}

/* --- sm: Phone Landscape (640-767px) --- */
@media (max-width: 767px) {
  .ky-nav-links {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: rgba(26,26,26,0.98);
    flex-direction: column;
    padding: 20px;
    gap: 0;
    border-top: 1px solid rgba(200,164,100,0.2);
  }
  .ky-nav-links.ky-nav-open {
    display: flex;
  }
  .ky-nav-links li {
    width: 100%;
  }
  .ky-nav-links li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(200,164,100,0.08);
  }
  .ky-hamburger {
    display: flex;
  }
  .ky-hero {
    min-height: 600px;
  }
  .ky-hero h1 {
    font-size: 2rem;
  }
  .ky-hero-subtitle {
    font-size: 0.95rem;
  }
  .ky-hero-stats {
    gap: 20px;
  }
  .ky-hero-stat-number {
    font-size: 1.5rem;
  }
  .ky-grid-4,
  .ky-grid-3,
  .ky-grid-2 {
    grid-template-columns: 1fr;
  }
  .ky-section {
    padding: 50px 0;
  }
  .ky-section-title {
    font-size: 1.5rem;
  }
  .ky-leaderboard-header,
  .ky-leaderboard-row {
    grid-template-columns: 40px 1fr 1fr 1fr;
    font-size: 0.8rem;
    padding: 10px 12px;
  }
  .ky-footer-grid {
    grid-template-columns: 1fr;
  }
  .ky-page-hero {
    height: 300px;
  }
  .ky-page-hero h1 {
    font-size: 1.6rem;
  }
  .ky-app-features {
    grid-template-columns: 1fr;
  }
  .ky-cert-grid {
    gap: 20px;
  }
  .ky-cert-item img {
    width: 70px;
    height: 70px;
  }
  .ky-payment-item {
    width: 80px;
    height: 50px;
    font-size: 0.65rem;
  }
  .ky-bonus-amount {
    font-size: 1.4rem;
  }
}

/* --- xs: Phone Portrait (<640px) --- */
@media (max-width: 639px) {
  html {
    font-size: 14px;
  }
  .ky-hero h1 {
    font-size: 1.7rem;
  }
  .ky-hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .ky-btn-primary,
  .ky-btn-outline {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  .ky-hero-stats {
    flex-direction: column;
    gap: 16px;
  }
  .ky-odds-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ky-breadcrumb-list {
    font-size: 0.75rem;
    flex-wrap: wrap;
  }
}