/* ============================================
   SPODIC - Responsive / Media Queries
   ============================================ */

@media (max-width: 768px) {
  .settings-panel {
    width: calc(100% - 32px);
    right: 16px;
    left: 16px;
    bottom: 100px;
    max-height: calc(100vh - 140px);
  }

  .keyboard-hints {
    display: none;
  }

  .reading-list-panel {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    bottom: 100px;
    max-height: calc(100vh - 140px);
  }
}

@media (max-width: 480px) {
  :root {
    --rsvp-font-size: clamp(2rem, 15vw, 4rem);
  }

  .rsvp-display {
    padding: 0 1.5rem;
  }

  .settings-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 80px;
    border-radius: 16px;
  }

  .theme-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .reading-list-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 80px;
    border-radius: 16px;
  }
}

@media (max-width: 600px) {
  .text-overlay {
    height: calc(100vh - 80px);
    border-radius: 20px 20px 0 0;
  }
  
  .overlay-header {
    padding: 12px 16px;
  }
  
  .search-wrapper {
    max-width: none;
  }
  
  .overlay-content {
    padding: 16px 20px 100px;
  }
  
  .text-container {
    font-size: 16px;
  }
}