/* ── Tablet ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .game-container {
    grid-template-columns: 1fr 260px;
  }
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 680px) {
  .container {
    padding: 16px 14px 40px;
  }

  .header {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }

  .theme-input-section {
    margin-bottom: 28px;
  }

  .theme-input-section > label {
    font-size: 1.25rem;
  }

  /* Stack input and button vertically on small screens */
  .input-container {
    flex-direction: column;
    padding: 10px;
    gap: 8px;
    border-radius: var(--radius-md);
  }

  input[type="text"]#theme-input {
    font-size: 16px; /* prevent iOS zoom */
    padding: 6px 4px;
  }

  #generate-btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-sm);
  }

  /* Single column layout */
  .game-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "grid"
      "ctrl"
      "clues";
  }

  .clues-panel {
    max-height: 360px;
  }

  .game-controls {
    justify-content: flex-start;
  }

  #new-puzzle-btn {
    margin-left: 0;
  }
}

/* ── Small phones ─────────────────────────────────────── */
@media (max-width: 400px) {
  .header h1  { font-size: 1rem; }
  .header p   { display: none; }
}

/* ── Landscape short screens ──────────────────────────── */
@media (orientation: landscape) and (max-height: 560px) {
  .container {
    padding: 12px 16px 24px;
  }

  .header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .game-container {
    grid-template-columns: 1fr 260px;
    grid-template-areas:
      "grid  clues"
      "ctrl  clues";
  }

  .clues-panel {
    max-height: calc(100dvh - 120px);
  }
}