/* Desktop Layout Expansion - Bypasses Tailwind CSS 4 Processing */
/* Tailwind CSS 4 doesn't generate responsive arbitrary values, so we use external CSS */

/* xl breakpoint: 1280px+ */
@media (min-width: 1280px) {
  .page-container-desktop {
    max-width: none !important;
  }
  .main-flex-desktop {
    max-width: 1600px !important;
  }
  .center-panel-desktop {
    max-width: 600px !important;
  }
  .hints-panel-desktop {
    width: 340px !important;
  }
  .game-panel-desktop {
    max-width: 600px !important;
    gap: 0.75rem !important; /* 12px */
  }
  /* Larger letter font on tiles */
  .game-panel-desktop [data-testid="tile"] {
    font-size: 2rem !important; /* 32px */
  }
}

/* 2xl breakpoint: 1536px+ */
@media (min-width: 1536px) {
  .main-flex-desktop {
    max-width: none !important;
  }
  .center-panel-desktop {
    max-width: 700px !important;
  }
  .hints-panel-desktop {
    width: 380px !important;
  }
  .game-panel-desktop {
    max-width: 700px !important;
    gap: 1rem !important; /* 16px */
  }
  /* Larger letter font on tiles */
  .game-panel-desktop [data-testid="tile"] {
    font-size: 2.25rem !important; /* 36px */
  }
}

/* 3xl breakpoint: 1920px+ for very large screens */
@media (min-width: 1920px) {
  .center-panel-desktop {
    max-width: 800px !important;
  }
  .hints-panel-desktop {
    width: 420px !important;
  }
  .game-panel-desktop {
    max-width: 800px !important;
    gap: 1.25rem !important; /* 20px */
  }
  /* Even larger letter font */
  .game-panel-desktop [data-testid="tile"] {
    font-size: 2.5rem !important; /* 40px */
  }
}