/* Responsive Design */

@media (max-width: 768px) {
  .card {
    padding: 1.5rem;
  }

  .card-number {
    font-size: 1.4rem;
  }

  .spending-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .spending-item {
    padding: 1rem;
    font-size: 1rem;
  }

  .spending-logo {
    max-width: 60px;
    max-height: 45px;
  }

  /* Cursor Follower - Removed */

  .message-section {
    padding: 2rem 1.5rem;
    margin: 2rem 1rem;
    transform: rotate(-0.3deg);
    aspect-ratio: 210 / 297; /* Maintain DIN A4 aspect ratio on mobile */
    max-width: 100%;
    overflow-y: auto;
    font-size: clamp(
      0.9rem,
      2vw + 0.5rem,
      1.1rem
    ); /* Dynamic base font-size on mobile - em values will scale proportionally */
  }

  .envelope-container {
    padding: 0;
    margin: 0 auto;
    min-height: 350px;
  }

  .envelope {
    max-width: 100%;
  }

  .envelope-front {
    transform: rotate(-0.5deg);
  }

  .envelope-front.shaking {
    animation: envelopeShake 0.5s ease-in-out infinite;
  }

  .envelope-back {
    transform: translate(-50%, -50%) rotate(0.5deg) rotateY(-90deg);
  }

  .envelope-stamp {
    width: 70px;
    height: 70px;
    font-size: 2.8rem;
    top: 6%;
    right: 6%;
  }

  .envelope-receiver .address-name {
    font-size: 2rem;
  }

  .envelope-sender .address-name {
    font-size: 1.7rem;
  }

  .envelope-receiver .address-label,
  .envelope-sender .address-label {
    font-size: 1rem;
  }

  /* Font sizes are now relative to .message-section base font-size using em units */
  /* No need to override - they will scale automatically with the base font-size */

  .styled-popup {
    font-size: 1.2rem;
    padding: 1.5rem 2rem;
  }

  .scroll-slip-message {
    font-size: 1.2rem;
    padding: 1.5rem 2rem;
  }

  .snow-message {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
  }
}