/* ================================================================
   WOG SPA Polish — Phase 5 打磨：動畫、手勢、Skeleton、PWA、錯誤邊界
   v3.77 (2026-05-27)
   ================================================================ */

/* ─────────── 強化頁面切換動畫 ─────────── */
.spa-panel {
  animation: spa-panel-enter 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes spa-panel-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* 手勢左右滑切換的方向動畫（由 JS 加上類別觸發） */
.spa-panel.spa-panel-from-right { animation: spa-panel-from-right 0.28s ease-out; }
.spa-panel.spa-panel-from-left  { animation: spa-panel-from-left  0.28s ease-out; }
@keyframes spa-panel-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes spa-panel-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ─────────── nav-tab 點擊回饋升級 ─────────── */
.nav-tab {
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.nav-tab:active {
  transform: scale(0.92);
  opacity: 0.75;
}
.nav-tab.active::before {
  animation: nav-indicator-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes nav-indicator-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─────────── Skeleton UI 骨架屏 helpers ─────────── */
/* 基底 .skeleton 在 spa-base.css 已定義（shimmer animation）；
   下方 helper classes 繼承 base shimmer 樣式，提供常見 size 變體 */
.skeleton-block,
.skeleton-card {
  background: linear-gradient(90deg, var(--c-surface2) 25%, var(--c-surface3) 50%, var(--c-surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  display: block;
}
.skeleton-block { width: 100%; height: 14px; margin-bottom: 8px; }
.skeleton-block--lg   { height: 32px; margin-bottom: 12px; }
.skeleton-block--xl   { height: 80px; margin-bottom: 14px; }
.skeleton-block--w70  { width: 70%; }
.skeleton-block--w50  { width: 50%; }
.skeleton-block--w30  { width: 30%; }

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.skeleton-card { height: 70px; border-radius: var(--r-md, 8px); }

.skeleton-frame { padding: 14px; }

/* ─────────── PWA 安裝 banner ─────────── */
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom) + 12px);
  /* z-index 在 toast (100) 之上但 modal overlay (50) 與 error panel (10000) 之間 */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #2a1f0d, #3a2c12);
  border: 1px solid var(--c-gold-dim, #8b6914);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: pwa-banner-slide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pwa-banner-slide {
  from { opacity: 0; transform: translateY(120%); }
  to   { opacity: 1; transform: translateY(0);    }
}
.pwa-banner-text {
  flex: 1;
  min-width: 0;
}
.pwa-banner-title {
  font-size: 0.92em;
  font-weight: 600;
  color: var(--c-gold, #e0b94f);
  margin-bottom: 2px;
}
.pwa-banner-sub {
  font-size: 0.72em;
  color: var(--c-text-faint, #888);
}
.pwa-banner-install {
  padding: 8px 16px;
  background: linear-gradient(90deg, #e0b94f, #c89530);
  color: #1a1308;
  border: none;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.pwa-banner-install:active { transform: scale(0.94); }
.pwa-banner-close {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--c-text-faint);
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
}

/* ─────────── 錯誤邊界面板 ─────────── */
.pwa-error-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 5, 10, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pwa-error-fade 0.25s ease-out;
}
@keyframes pwa-error-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pwa-error-card {
  max-width: 420px;
  width: 100%;
  padding: 24px 20px;
  background: linear-gradient(180deg, #1a1410, #0e0a0b);
  border: 1px solid #5a2020;
  border-radius: var(--r-md, 8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: pwa-error-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pwa-error-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}
.pwa-error-icon {
  font-size: 3em;
  color: #ff6b6b;
  filter: drop-shadow(0 0 16px rgba(255, 107, 107, 0.4));
  margin-bottom: 10px;
}
.pwa-error-title {
  font-size: 1.1em;
  font-weight: 700;
  color: #ff6b6b;
  margin-bottom: 12px;
}
.pwa-error-msg {
  font-size: 0.85em;
  color: var(--c-text-dim, #c0bba8);
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-sm, 6px);
  margin-bottom: 16px;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  font-family: ui-monospace, monospace;
}
.pwa-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.pwa-error-btn {
  padding: 10px 20px;
  background: var(--c-surface3, #2a2530);
  color: var(--c-text);
  border: 1px solid var(--c-border, #3a3540);
  border-radius: 6px;
  font-size: 0.9em;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.pwa-error-btn:active { transform: scale(0.94); }
.pwa-error-btn--primary {
  background: linear-gradient(90deg, #e0b94f, #c89530);
  color: #1a1308;
  border-color: transparent;
  font-weight: 700;
}
.pwa-error-hint {
  margin-top: 14px;
  font-size: 0.7em;
  color: var(--c-text-faint, #888);
}

/* ─────────── 手勢視覺提示（可選） ─────────── */
#spa-content.spa-gesture-active {
  transition: none;
}