/* ===== Responsive Breakpoints ===== */

/* Small phones (< 480px) */
@media (max-width: 479px) {
  .header {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .header__title {
    font-size: var(--font-size-lg);
  }

  .header__counter {
    font-size: var(--font-size-sm);
    order: 3;
    width: 100%;
    text-align: center;
  }

  .game-container {
    padding: var(--space-sm);
  }

  .card {
    padding: var(--space-md);
  }

  .btn--fab {
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
  }

  .price-control__value {
    font-size: var(--font-size-base);
    min-width: 50px;
  }

  .stat__label {
    font-size: var(--font-size-xs);
  }

  .stat__value {
    font-size: var(--font-size-sm);
  }

  .project-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .project-item .btn {
    width: 100%;
  }

  .factory-visual {
    height: 70px;
  }

  .toast-container {
    right: var(--space-sm);
    left: var(--space-sm);
  }

  .toast {
    font-size: var(--font-size-xs);
  }
}

/* Tablets (480-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .game-container {
    padding: var(--space-md);
  }

  .header__counter {
    font-size: var(--font-size-base);
  }

  .factory-visual {
    height: 80px;
  }
}

/* All mobile (< 768px) */
@media (max-width: 767px) {
  /* Stack charts horizontally on mobile */
  .stage-one .col-right,
  .stage-two .col-right,
  .stage-three .col-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .chart-container {
    padding: var(--space-sm);
  }

  .chart-container canvas {
    height: 60px;
  }

  /* Smaller card padding */
  .card__title {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-sm);
  }

  .divider {
    margin: var(--space-sm) 0;
  }

  .projects-list {
    max-height: 200px;
  }

  /* Save buttons smaller */
  #header-actions .btn {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Message log shorter */
  .message-log {
    max-height: 80px;
    padding: var(--space-sm);
  }

  .message-log__entry {
    font-size: var(--font-size-xs);
  }

  /* Price controls touch-friendly */
  .price-control__btn {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-lg);
  }

  /* Milestone tracker compact */
  .milestone-tracker {
    padding: var(--space-sm);
  }

  .milestone-tracker__title {
    font-size: var(--font-size-xs);
  }
}

/* Tablet landscape (768-1199px) - refine 2-col layout */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Charts go in a row below main content on tablet */
  .stage-one .col-right,
  .stage-two .col-right,
  .stage-three .col-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
  }

  .factory-visual {
    height: 90px;
  }
}

/* Large screens (1400px+) - wider game area */
@media (min-width: 1400px) {
  .game-container {
    max-width: 1600px;
  }

  .stage-one,
  .stage-two,
  .stage-three {
    gap: var(--space-xl);
  }
}

/* Touch device hover fix */
@media (hover: none) {
  .btn--primary:hover:not(:disabled) {
    background: var(--accent-blue);
  }

  .btn--secondary:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--border);
  }

  .project-item:hover {
    border-color: var(--border-light);
    background: var(--bg-secondary);
  }

  .price-control__btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border);
  }

  .card:has(button):hover {
    border-color: var(--border);
    box-shadow: none;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .stage-transition {
    display: none !important;
  }
}