/* AI Monster Mobile Fixes - Enhanced Font Size Optimizations */

/* Ultra-compact mobile optimizations for very small screens */
@media screen and (max-width: 480px) {
  /* Header optimizations */
  .main-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  .sub-title {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }

  .header {
    padding: 0.75rem !important;
  }

  .performance-indicator {
    flex-direction: column !important;
    text-align: center;
    padding: 0.5rem !important;
    gap: 0.5rem;
  }

  .performance-score {
    font-size: 1rem !important;
  }

  .performance-label {
    font-size: 0.6rem !important;
    letter-spacing: 1px;
  }

  /* Section optimizations */
  .section {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .section-title {
    font-size: 0.85rem !important;
    line-height: 1.1 !important;
  }

  .section-icon {
    font-size: 1.5rem !important;
  }

  /* Upgrade panel optimizations */
  .upgrade-panel {
    padding: 0.75rem !important;
  }

  .upgrade-title {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }

  .upgrade-reason {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .upgrade-priority {
    font-size: 0.6rem !important;
    padding: 0.25rem 0.5rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  /* Component item optimizations */
  .component-name {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .component-specs {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
  }

  .component-price {
    font-size: 0.8rem !important;
  }

  .component-image {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
  }

  /* Button optimizations */
  .got-button {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.65rem !important;
  }

  .component-actions {
    gap: 0.25rem !important;
  }

  .awd-link, .pricespy-link, .amazon-link {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }

  /* Spec item optimizations */
  .spec-item {
    padding: 0.75rem !important;
  }

  .spec-category {
    font-size: 0.7rem !important;
  }

  .spec-value {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .spec-performance {
    font-size: 0.65rem !important;
  }

  /* Impact lists */
  .impact-title {
    font-size: 0.7rem !important;
  }

  .impact-list li {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
  }

  /* Status items */
  .status-title {
    font-size: 1rem !important;
  }

  .status-label {
    font-size: 0.65rem !important;
  }

  .status-value {
    font-size: 0.8rem !important;
  }

  /* Dragon icons */
  .dragon-icon {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }

  .dragon-icon-large {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  .dragon-icon-small {
    width: 1rem !important;
    height: 1rem !important;
  }
}

/* Medium mobile screens */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .main-title {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  .sub-title {
    font-size: 0.85rem !important;
  }

  .section-title {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }

  .upgrade-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .upgrade-reason {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .component-name {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }

  .component-specs {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
  }

  .performance-score {
    font-size: 1.8rem !important;
  }

  .performance-label {
    font-size: 0.75rem !important;
  }
}

/* Samsung Galaxy Fold 5 - Cover Screen (Folded) */
@media screen and (max-width: 904px) and (min-height: 2000px) {
  .main-title {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  .sub-title {
    font-size: 0.8rem !important;
    text-align: center;
  }

  .header-content {
    flex-direction: column !important;
    text-align: center;
  }

  .performance-indicator {
    flex-direction: column !important;
    padding: 0.75rem !important;
  }

  .performance-score {
    font-size: 1.8rem !important;
  }

  .section-title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  .upgrade-title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }

  .upgrade-reason {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
  }

  .component-name {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .component-specs {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
  }

  .suggestion-item {
    flex-direction: column !important;
    text-align: center;
    padding: 0.75rem !important;
  }

  .component-actions {
    flex-direction: column !important;
    width: 100%;
    gap: 0.4rem !important;
  }

  .component-actions > * {
    width: 100% !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.6rem !important;
    text-align: center;
  }
}

/* Link button text wrapping prevention */
@media screen and (max-width: 768px) {
  .awd-link, .pricespy-link, .amazon-link {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .component-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100%;
  }

  .component-actions > * {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Improve readability with better contrast on mobile */
@media screen and (max-width: 768px) {
  .section {
    background: rgba(26, 26, 26, 0.9) !important;
  }

  .upgrade-panel {
    background: rgba(56, 56, 56, 0.85) !important;
  }

  .spec-item {
    background: rgba(0, 255, 65, 0.2) !important;
  }

  .machine-status {
    background: rgba(0, 255, 65, 0.3) !important;
  }

  .suggestion-item {
    background: rgba(0, 0, 0, 0.4) !important;
  }
}

/* Prevent horizontal scrolling on mobile */
@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .app-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .suggestion-item {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .component-info {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .component-name,
  .component-specs {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Better touch targets */
@media (hover: none) and (pointer: coarse) {
  .got-button,
  .awd-link,
  .pricespy-link,
  .amazon-link {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }
}

/* Notification styling for mobile */
@media screen and (max-width: 768px) {
  .notification {
    top: 0.5rem !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
    padding: 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }
}