/* ===== 天天餵食打卡鐘 — Responsive (Bold Edition) ===== */

/* iPhone 6 Plus / iPhone 8 等 (414×736) */
@media (max-height: 740px) {
  body {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .header { padding: 6px 4px 10px; }
  .cat-avatar { width: 58px; height: 58px; }
  .clock { font-size: 62px; }
  .greeting { font-size: 15px; }
  .date-text { font-size: 12px; }
  .app { gap: 10px; }

  .meal-card { padding: 20px 20px 16px; border-radius: 18px; }
  .meal-top { margin-bottom: 12px; }
  .meal-name { font-size: 30px; }
  .meal-sub { font-size: 14px; }
  .meal-icon { font-size: 30px; }

  .feed-btn { padding: 22px 18px; font-size: 23px; min-height: 62px; }
  .feed-btn.readonly { padding: 18px 16px; font-size: 18px; min-height: auto; }
  .status-badge { width: 44px; height: 44px; font-size: 22px; }
  .fed-time { font-size: 20px; }
  .footer { font-size: 8px; padding-top: 2px; }

  .meal-card.is-hero .meal-name { font-size: 36px; }
  .meal-card.is-hero .meal-icon { font-size: 34px; }
  .meal-card.is-hero .feed-btn { font-size: 26px; padding: 24px 20px; min-height: 68px; }
}

/* 更小螢幕 (SE / 5s 等 ≤640px) */
@media (max-height: 640px) {
  body {
    padding: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .header { padding: 4px 4px 8px; gap: 10px; }
  .cat-avatar { width: 48px; height: 48px; }
  .clock { font-size: 48px; }
  .greeting { font-size: 14px; }
  .app { gap: 8px; }

  .meal-card { padding: 16px 16px 12px; border-radius: 16px; }
  .meal-top { margin-bottom: 8px; }
  .meal-name { font-size: 26px; }
  .meal-sub { font-size: 13px; }
  .meal-icon { font-size: 26px; }

  .feed-btn { padding: 18px 14px; font-size: 20px; min-height: 56px; }
  .feed-btn.readonly { padding: 14px 12px; font-size: 16px; }
  .status-badge { width: 38px; height: 38px; font-size: 18px; }
  .fed-time { font-size: 18px; }
  .footer { font-size: 7px; padding-top: 0; }

  .meal-card.is-hero { flex: 2; }
  .meal-card.is-hero .meal-name { font-size: 28px; }
  .meal-card.is-hero .feed-btn { padding: 18px 14px; font-size: 20px; min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}