/* platform/responsive.css — アニメーションと画面幅ごとの調整(promoの後に読む) (旧 core.css から分割・見た目の変更なし) */

/* ─── Pulse animation for live elements ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  display: inline-block;
}

/* ─── Responsive: tablet and up ─── */
@media (min-width: 480px) {
  body { background: var(--bg-outer); }
  .platform-wrapper {
    max-width: 440px;
    margin: 0 auto;
    background: var(--bg-base);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
  }
  .bottom-nav { max-width: 440px; left: 50%; transform: translateX(-50%); }
  .toast-container { max-width: 440px; }
  .pwa-install-banner { left: 50%; right: auto; width: calc(100% - 24px); transform: translateX(-50%); }
}

/* PWA home guide and compact invitation */
.pwa-home-cta { margin-top: 12px; }
.pwa-guide-title { margin: 0; font-size: 1rem; }
.pwa-guide-copy { color: var(--text-secondary); font-size: .8rem; margin: 8px 0 12px; }
.pwa-guide { margin-top: 12px; font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
.pwa-guide summary { cursor: pointer; color: var(--accent); padding: 8px 0; }
.pwa-guide h3 { margin: 12px 0 4px; font-size: .85rem; color: var(--text-primary); }
.pwa-guide ol { padding-left: 22px; margin: 4px 0 12px; }
.pwa-guide li { margin: 5px 0; }
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner { grid-template-columns: auto 1fr; }
.pwa-install-actions { grid-column: 2; justify-content: flex-end; }
.pwa-install-btn, .pwa-install-close { min-height: 44px; cursor: pointer; }
.pwa-install-close { width: 44px; }

.pwa-install-banner { max-height: 65vh; max-height: 65dvh; overflow-y: auto; align-items: start; }
.pwa-install-device { margin-top: 10px; color: var(--accent); font-size: .75rem; font-weight: 700; }
.pwa-install-steps { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.pwa-install-steps li + li { margin-top: 6px; }
.pwa-install-actions { flex-wrap: wrap; }
.pwa-install-guide-btn { min-height: 44px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .75rem; text-decoration: underline; cursor: pointer; }
