/* custom.css — 最小限のカスタムスタイル (TailwindCSS CDN 補完) */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Vue FOUC 防止: マウント完了まで非表示 */
[v-cloak] { display: none !important; }

/* SSE ライブフィードのスクロール */
.live-feed { max-height: 500px; overflow-y: auto; }
.live-feed::-webkit-scrollbar { width: 6px; }
.live-feed::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }

/* stream-detail ランキングスクロール */
.ranking-scroll { overflow-y: auto; }
.ranking-scroll::-webkit-scrollbar { width: 6px; }
.ranking-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.ranking-scroll::-webkit-scrollbar-track { background: transparent; }

/* ギフト通知アニメーション */
@keyframes gift-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.gift-notify { animation: gift-pop 0.3s ease-out; }

/* バトルプログレスバー */
.battle-bar { transition: width 0.5s ease; }

/* ステータスバッジ */
.badge-live { animation: pulse-live 2s infinite; }
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ブランドロゴ — TikTok風 ピンク×シアン グラデーション */
.brand-logo {
  background: linear-gradient(135deg, #00f2ea 0%, #ff0050 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ナビゲーション アクティブ */
.nav-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; }

/* モバイルナビ ドロップダウン */
@media (max-width: 767px) {
  #nav-menu:not(.hidden) {
    position: absolute; top: 3.5rem; left: 0; right: 0;
    background: #1f2937; border-bottom: 1px solid #374151;
    padding: 0.5rem 0; z-index: 50;
  }
}

/* Toast 通知 */
.toast-container {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 1.25rem; border-radius: 0.5rem;
  font-size: 0.875rem; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: toast-in 0.3s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.toast-out {
  opacity: 0; transform: translateX(1rem);
}
.toast-success { background: #16a34a; }
.toast-error   { background: #dc2626; }
.toast-info    { background: #2563eb; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}