@charset "UTF-8";

/**
 * 古戦場貢献度ランキング スタイルシート (style.css)
 * 
 * 本ファイルは「古戦場貢献度ランキング」ツール固有のカスタムスタイル定義です。
 * 基本レイアウトおよびユーティリティにはTailwind CSSを使用していますが、
 * Tailwindの標準クラスでは賄えないアニメーションやブラウザ固有のUI調整
 * （スクロールバー制御、モバイルでのタッチ操作性向上など）を本ファイルで集約管理しています。
 */

/* ==========================================================================
   アニメーション定義
   ========================================================================== */

/**
 * データ取得中を示すローディングスピナー用の回転キーフレームアニメーション。
 * 0度から360度へ連続回転させることで、非同期通信（API fetch）が進行中であることを
 * ユーザーへ視覚的に明示するために使用します。
 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/**
 * ローディングアイコン要素へ付与するクラス。
 * 1秒間で等速（linear）かつ無限ループ（infinite）で回転させ、
 * カクつきのない滑らかな処理中インジケータを実現します。
 */
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   UI・スクロールバー制御ユーティリティ
   ========================================================================== */

/* スクロールバー非表示用ユーティリティ */

/**
 * WebKit系ブラウザ（Chrome, Safari, Edge等）において、
 * 横スクロール可能な要素（ブックマークレット表示欄や日付タブなど）の
 * スクロールバー外観を非表示にする設定。
 * スクロール機能自体は維持したまま、コンパクトで洗練されたUIを保つ意図があります。
 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/**
 * IE / 旧Edge (-ms-) および Firefox (scrollbar-width) において、
 * スクロールバーを非表示にする設定。
 * クロスブラウザで一貫したスクロールバー非表示レイアウトを保証します。
 */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE / 旧Edge向け設定 */
  scrollbar-width: none;    /* Firefox向け設定 */
}

/* ==========================================================================
   モバイル・レスポンシブ操作性向上スタイル
   ========================================================================== */

/**
 * モバイル端末（特にiOS Safari）において、指による水平スワイプ操作を滑らかにするための設定。
 * -webkit-overflow-scrolling: touch を指定することで、タブボタングループの慣性スクロールを実現し、
 * 片手操作時のユーザー体験を向上させます。
 */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/**
 * モバイル端末でのタップ時の青いハイライト枠（タップフィードバック）を抑制し、
 * ネイティブアプリに近い快適な操作感を提供するための設定。
 */
.no-tap-highlight {
  -webkit-tap-highlight-color: transparent;
}