/* 背景画像用のユーティリティクラス */

/* 基本的な背景画像設定 - カバー（画像全体が表示領域を覆う） */
.bg-img-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 背景画像設定 - コンテイン（画像全体が見える） */
.bg-img-contain {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 背景画像設定 - 中央配置、原寸表示 */
.bg-img-center {
    background-position: center center;
    background-repeat: no-repeat;
}

/* 背景画像設定 - 上部中央配置 */
.bg-img-top {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* 背景画像設定 - 下部中央配置 */
.bg-img-bottom {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* アプリケーションカード用の背景画像クラス */
.app-card-bg {
    background-size: contain;
    background-position: center center;

    background-repeat: no-repeat;
    background-color: #f5f5f5; /* フォールバック色 */
}.app-card-bg--new {
    background-size: cover;
    background-position: center center;

    background-repeat: no-repeat;
    background-color: #f5f5f5; /* フォールバック色 */
}

/* アプリケーションカード用 - オブジェクトフィット風 */
.app-card-bg-fit {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #e0e0e0; /* フォールバック色 */
}

/* ホバー時のエフェクト付き背景画像 */
.app-card-bg-hover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
    transition: transform 0.3s ease;
}

.app-card-bg-hover:hover {
    transform: scale(1.05);
}

/* 背景画像にオーバーレイ効果 */
.bg-img-overlay {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-img-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* 暗いオーバーレイ */
    pointer-events: none;
}

/* グラデーションオーバーレイ付き背景画像 */
.bg-img-gradient-overlay {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-img-gradient-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* モバイルでは画像を少し縮小 */
    .app-card-bg-mobile {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

/* 使用例：
   HTMLで以下のように使用します：
   <div class="app-card-bg h-48" style="background-image: url('img/game-thumbnail.jpg');"></div>
   
   または、特定の画像用クラスを作成：
*/

/* 個別のアプリ画像用クラス（例） */
.bg-pixel-fighter {
    /*background-image: url('');*/
}

.bg-chronos-shift {
    /*background-image: url('');*/
}

/* 画像が読み込まれるまでのプレースホルダー */
.bg-loading {
    background-color: #e0e0e0;
    background-image: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}