/* ==========================================================================
   FarmVerse 2.0 - Responsive & Mobile Layout Styles
   ========================================================================== */

@media (max-width: 768px) {
  .top-header {
    padding: 6px 10px;
    height: 56px;
  }

  .avatar-badge {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
  }

  .player-name {
    font-size: 0.85rem;
  }

  .xp-bar-bg {
    width: 80px;
  }

  .header-resources {
    gap: 6px;
  }

  .resource-chip {
    padding: 3px 8px;
    font-size: 0.78rem;
  }

  .storage-chip {
    padding: 3px 6px;
    font-size: 0.7rem;
  }

  .storage-bar-bg {
    width: 50px;
  }

  .day-cycle-widget {
    padding: 2px 6px;
  }

  .day-cycle-text {
    font-size: 0.72rem;
  }

  .day-cycle-bar-bg {
    width: 60px;
  }

  .active-boosts-container {
    display: none; /* Hide badges on tiny screens */
  }

  /* Left sidebar on mobile */
  .left-sidebar {
    top: 62px;
    left: 6px;
    padding: 4px 3px;
    gap: 4px;
    border-radius: 12px;
  }

  .sidebar-btn {
    min-width: 42px;
    padding: 4px 2px;
  }

  .sidebar-icon {
    font-size: 1.15rem;
  }

  .sidebar-label {
    font-size: 0.58rem;
  }

  /* World canvas for mobile */
  .world-canvas {
    grid-template-columns: repeat(2, 310px);
    width: 700px;
    margin-left: -350px;
    margin-top: -850px;
    gap: 20px;
  }

  .field-island {
    width: 310px;
    height: 330px;
    padding: 8px;
  }

  .field-5x5-grid {
    width: 275px;
    height: 275px;
  }

  .modal-window {
    max-height: 92vh;
    padding: 4px;
  }

  .crop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}