/* ========================================
   GameCalc - Responsive Design Enhancements
   ======================================== */

/* Tablet Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
  /* Calculator Layout */
  .calculator-layout {
    grid-template-columns: 280px 1fr;
  }
  
  .selection-panel {
    top: 70px;
    max-height: calc(100vh - 90px);
  }
  
  /* Grid Adjustments */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Platform Cards */
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .calculators-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Breakpoint (max 768px) */
@media (max-width: 768px) {
  /* Typography Scaling */
  html {
    font-size: 14px;
  }
  
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  
  /* Spacing Adjustments */
  .section {
    padding: var(--spacing-lg) 0;
  }
  
  .container,
  .container-fluid {
    padding: 0 var(--spacing-md);
  }
  
  /* Hero Section */
  .hero {
    padding: var(--spacing-lg) 0;
  }
  
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  /* Calculator Layout - Stack on Mobile */
  .calculator-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .selection-panel {
    position: static;
    max-height: none;
    border-radius: var(--radius-md);
  }
  
  /* Steps Container - Vertical on Mobile */
  .steps-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }
  
  .step {
    justify-content: flex-start;
    padding: var(--spacing-sm);
  }
  
  /* Category Tabs - Scrollable */
  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .category-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .category-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Items Grid - Smaller on Mobile */
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: var(--spacing-xs);
    max-height: 400px;
  }
  
  .item-button {
    padding: var(--spacing-xs);
  }
  
  .item-image {
    width: 40px;
    height: 40px;
  }
  
  .item-name {
    font-size: 0.7rem;
  }
  
  /* Modifiers Grid - Smaller Buttons */
  .modifiers-grid {
    gap: var(--spacing-xs);
  }
  
  .modifier-button {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
  
  /* Input Group - Stack on Mobile */
  .input-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  /* Result Box */
  .result-box {
    padding: var(--spacing-lg);
  }
  
  .result-value {
    font-size: 1.75rem;
  }
  
  /* Action Buttons - Stack on Mobile */
  .action-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .action-buttons .btn {
    width: 100%;
  }
  
  /* Grids - Single Column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  /* Platform/Calculator Grids */
  .platforms-grid,
  .calculators-grid {
    grid-template-columns: 1fr;
  }
  
  /* Features Grid */
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  
  /* Cards */
  .card {
    padding: var(--spacing-md);
  }
  
  /* Footer */
  .footer-links {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
  }
  
  /* Navigation - Mobile Menu Already Handled in common.css */
  .navbar-container {
    padding: 0 var(--spacing-sm);
  }
  
  /* Breadcrumb - Wrap on Mobile */
  .breadcrumb-list {
    font-size: 0.85rem;
  }
  
  /* Formula Display */
  .formula-display {
    font-size: 0.8rem;
    padding: var(--spacing-sm);
  }
  
  /* Modal Adjustments */
  #petModal > div {
    margin: 20px auto;
    padding: var(--spacing-lg);
  }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
  /* Further Typography Scaling */
  html {
    font-size: 13px;
  }
  
  /* Spacing */
  .container,
  .container-fluid {
    padding: 0 var(--spacing-sm);
  }
  
  /* Hero */
  .hero-title {
    font-size: 1.5rem;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
  }
  
  /* Buttons */
  .btn {
    padding: 8px 14px;
    font-size: 0.9rem;
  }
  
  .btn-sm {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
  
  /* Calculator Panel */
  .calculator-panel {
    padding: var(--spacing-md);
  }
  
  .calculator-section {
    margin-bottom: var(--spacing-lg);
  }
  
  /* Result Value */
  .result-value {
    font-size: 1.5rem;
  }
  
  /* Stats Grid - Single Column */
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Items Grid - Even Smaller */
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
  
  .item-image {
    width: 32px;
    height: 32px;
  }
  
  .item-name {
    font-size: 0.65rem;
  }
}

/* Landscape Mobile Optimization */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    padding: var(--spacing-md) 0;
  }
  
  .selection-panel {
    max-height: calc(100vh - 80px);
  }
  
  .steps-container {
    padding: var(--spacing-sm);
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn,
  .modifier-button,
  .category-tab,
  .item-button {
    min-height: 44px; /* iOS recommendation */
  }
  
  /* Remove hover effects on touch */
  .btn:hover,
  .modifier-button:hover,
  .category-tab:hover,
  .item-button:hover {
    transform: none;
  }
  
  /* Active states for touch feedback */
  .btn:active {
    transform: scale(0.98);
  }
  
  .modifier-button:active,
  .item-button:active {
    transform: scale(0.95);
  }
}

/* Print Styles */
@media print {
  .navbar,
  .breadcrumb,
  .footer,
  .action-buttons,
  .navbar-toggle {
    display: none;
  }
  
  .calculator-layout {
    display: block;
  }
  
  .selection-panel {
    display: none;
  }
  
  .result-box {
    border: 2px solid #000;
    background: #fff;
    color: #000;
  }
  
  body {
    background: #fff;
    color: #000;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .btn,
  .card,
  .modifier-button {
    border-width: 2px;
  }
  
  .result-box {
    border-width: 3px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .step,
  .btn,
  .card {
    transition: none;
  }
}

/* Dark Mode Override (if system preference) */
@media (prefers-color-scheme: dark) {
  /* Already using dark theme, but ensure consistency */
  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}

/* Specific Component Responsive Fixes */

/* Calculator Panel Header */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .section-header .btn {
    width: 100%;
  }
}

/* Pet Ability Grid */
@media (max-width: 768px) {
  #petGrid {
    grid-template-columns: 1fr;
  }
}

/* Age List Display */
@media (max-width: 768px) {
  #ageListBox {
    font-size: 0.8rem;
  }
}

/* Owl/Kiwi/Eagle Input Grids */
@media (max-width: 768px) {
  #owlInputs,
  #kiwiInputs,
  #eagleInputs {
    grid-template-columns: 1fr !important;
  }
}

/* Platform Cards - Better spacing on mobile */
@media (max-width: 768px) {
  .platform-card,
  .calculator-card {
    padding: var(--spacing-lg);
  }
  
  .platform-icon {
    font-size: 2.5rem;
  }
}

/* Improved Scrollbar Styling */
@media (min-width: 769px) {
  /* Custom scrollbar for webkit browsers */
  .items-grid::-webkit-scrollbar,
  .modifiers-grid::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .items-grid::-webkit-scrollbar-track,
  .modifiers-grid::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
  }
  
  .items-grid::-webkit-scrollbar-thumb,
  .modifiers-grid::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: var(--radius-sm);
  }
  
  .items-grid::-webkit-scrollbar-thumb:hover,
  .modifiers-grid::-webkit-scrollbar-thumb:hover {
    background: #a5e87e;
  }
}

/* Safe Area Insets for Notched Devices */
@supports (padding: max(0px)) {
  .navbar,
  .footer {
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }
  
  .navbar {
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
  }
  
  .footer {
    padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
  }
}