/* AI Monster - Ultra Compact Mobile Optimizations */
/* This file provides dramatic font size reductions for mobile viewing */

/* Base mobile optimizations - applies to all mobile devices */
@media screen and (max-width: 768px) {
  /* Dramatically reduce all font sizes */
  .main-title {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.25rem !important;
  }

  .sub-title {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-top: 0.25rem !important;
  }

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

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

  .upgrade-title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }

  .upgrade-reason {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }

  .upgrade-priority {
    font-size: 0.55rem !important;
    padding: 0.2rem 0.4rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }

  /* Component information */
  .component-name {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.15rem !important;
  }

  .component-specs {
    font-size: 0.55rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

  .component-price {
    font-size: 0.7rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Performance indicators */
  .performance-score {
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }

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

  /* Spec items */
  .spec-category {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
  }

  .spec-value {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

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

  /* Status elements */
  .status-title {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  .status-label {
    font-size: 0.6rem !important;
    margin-bottom: 0.25rem !important;
  }

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

  /* Impact lists */
  .impact-title {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
  }

  .impact-list li {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.15rem !important;
    padding-left: 1rem !important;
  }

  /* Progress text */
  .progress-text {
    font-size: 0.6rem !important;
    margin-top: 0.25rem !important;
  }

  /* Buttons */
  .got-button {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.6rem !important;
    border-radius: 15px !important;
  }

  .awd-link, .pricespy-link, .amazon-link {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.55rem !important;
    border-radius: 6px !important;
    line-height: 1.1 !important;
  }

  /* Reduce padding and margins everywhere */
  .header {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .section {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .upgrade-panel {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .spec-item {
    padding: 0.6rem !important;
  }

  .machine-status {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .suggestion-item {
    padding: 0.6rem !important;
    margin-bottom: 0.5rem !important;
  }

  .performance-indicator {
    padding: 0.6rem !important;
    gap: 0.5rem !important;
  }

  /* Reduce gaps between grid items */
  .current-specs,
  .upgrade-grid {
    gap: 0.75rem !important;
    margin-top: 1rem !important;
  }

  .status-grid {
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }

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

  /* Section headers */
  .section-header {
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Reduce icon sizes */
  .component-image {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.2rem !important;
  }

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

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

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

/* Extra small screens (phones in portrait) */
@media screen and (max-width: 480px) {
  /* Even smaller fonts for very small screens */
  .main-title {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
  }

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

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

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

  .upgrade-reason {
    font-size: 0.6rem !important;
    line-height: 1.25 !important;
  }

  .component-name {
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
  }

  .component-specs {
    font-size: 0.5rem !important;
    line-height: 1.15 !important;
  }

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

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

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

  .got-button {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.55rem !important;
  }

  .awd-link, .pricespy-link, .amazon-link {
    padding: 0.2rem 0.35rem !important;
    font-size: 0.5rem !important;
  }

  /* Make everything even more compact */
  .header {
    padding: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .section {
    padding: 0.6rem !important;
    margin-bottom: 0.75rem !important;
  }

  .upgrade-panel {
    padding: 0.6rem !important;
  }

  .spec-item {
    padding: 0.5rem !important;
  }

  .machine-status {
    padding: 0.6rem !important;
  }

  .suggestion-item {
    padding: 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }

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

  .current-specs,
  .upgrade-grid {
    gap: 0.5rem !important;
  }

  .status-grid {
    gap: 0.4rem !important;
  }

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

  .section-header {
    gap: 0.4rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.4rem !important;
  }
}

/* Samsung Galaxy Fold - Cover Screen (very narrow) */
@media screen and (max-width: 420px) {
  /* Extreme compactness for fold cover screen */
  .main-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

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

  .section-title {
    font-size: 0.75rem !important;
  }

  .upgrade-title {
    font-size: 0.65rem !important;
  }

  .upgrade-reason {
    font-size: 0.55rem !important;
    line-height: 1.2 !important;
  }

  .component-name {
    font-size: 0.55rem !important;
  }

  .component-specs {
    font-size: 0.45rem !important;
  }

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

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

  .got-button {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.5rem !important;
  }

  .awd-link, .pricespy-link, .amazon-link {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.45rem !important;
  }

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

  /* Ultra-compact spacing */
  .header,
  .section,
  .upgrade-panel,
  .machine-status {
    padding: 0.5rem !important;
    margin-bottom: 0.6rem !important;
  }

  .suggestion-item {
    padding: 0.4rem !important;
    margin-bottom: 0.3rem !important;
  }

  .spec-item {
    padding: 0.4rem !important;
  }

  .current-specs,
  .upgrade-grid,
  .status-grid {
    gap: 0.4rem !important;
  }

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

  .section-header {
    gap: 0.3rem !important;
    margin-bottom: 0.6rem !important;
    padding-bottom: 0.3rem !important;
  }
}

/* Landscape orientation - even more compact */
@media screen and (orientation: landscape) and (max-height: 600px) {
  /* Make everything smaller in landscape */
  .main-title {
    font-size: 1rem !important;
  }

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

  .section-title {
    font-size: 0.8rem !important;
  }

  .header {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .section {
    padding: 0.6rem !important;
    margin-bottom: 0.6rem !important;
  }

  .performance-indicator {
    flex-direction: row !important;
    padding: 0.5rem !important;
  }

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

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

/* Fix component actions layout on mobile */
@media screen and (max-width: 768px) {
  .suggestion-item {
    flex-direction: column !important;
    text-align: center;
  }

  .component-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .component-actions > * {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ensure text doesn't overflow */
@media screen and (max-width: 768px) {
  .component-name,
  .component-specs,
  .upgrade-reason,
  .upgrade-title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden !important;
  }

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

  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Better readability with higher contrast backgrounds on mobile */
@media screen and (max-width: 768px) {
  .section {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(5px) !important;
  }

  .upgrade-panel {
    background: rgba(56, 56, 56, 0.9) !important;
    backdrop-filter: blur(5px) !important;
  }

  .spec-item {
    background: rgba(0, 255, 65, 0.25) !important;
    backdrop-filter: blur(3px) !important;
  }

  .machine-status {
    background: rgba(0, 255, 65, 0.35) !important;
    backdrop-filter: blur(5px) !important;
  }

  .suggestion-item {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(3px) !important;
  }
}

/* Make all text more readable on mobile */
@media screen and (max-width: 768px) {
  * {
    text-shadow: none !important;
  }

  .main-title {
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5) !important;
  }

  .section-title {
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5) !important;
  }

  .upgrade-title {
    text-shadow: 0 0 3px rgba(0, 255, 65, 0.5) !important;
  }

  /* Override inline styles for mobile compactness */
  div[style*="padding: 1.5rem"] {
    padding: 0.75rem !important;
  }

  div[style*="gap: 2rem"] {
    gap: 1rem !important;
  }

  div[style*="margin-bottom: 1rem"] {
    margin-bottom: 0.5rem !important;
  }

  h3[style*="margin-bottom: 1rem"] {
    margin-bottom: 0.5rem !important;
    font-size: 0.85rem !important;
  }

  h4[style*="margin-bottom"] {
    font-size: 0.8rem !important;
    margin-bottom: 0.4rem !important;
  }

  /* Make inline text smaller */
  li[style*="margin-bottom: 0.5rem"] {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }

  strong {
    font-size: 0.65rem !important;
  }

  small {
    font-size: 0.55rem !important;
  }

  /* Reduce grid template columns minimum */
  div[style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="minmax(250px"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
}