/* mobile.css — 360px-and-up support, tablet/desktop widening */

@media (max-width: 360px) {
  .row-3 { grid-template-columns: 1fr 1fr; }
  .row-3 > :last-child { grid-column: span 2; }
  .card { margin: 10px; padding: 14px; }
  .app-header { padding: 22px 16px 28px; }
}

@media (min-width: 600px) {
  .app-shell {
    max-width: 640px;
    box-shadow: 0 0 40px rgba(20,24,50,0.08);
    min-height: 100vh;
  }
}

@media (min-width: 900px) {
  body {
    background: linear-gradient(180deg, #f2ecdd, #e7ddc4);
  }
  .app-shell {
    max-width: 720px;
    margin: 24px auto;
    border-radius: 24px;
    overflow: hidden;
    min-height: calc(100vh - 48px);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}