/* カード全体のスタイル */
.game-card {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 画像とテキストの隙間 */
    cursor: pointer;

    padding-bottom: 1rem;

    scroll-snap-align: start;

    transition: transform 0.2s ease;
}

.game-card
.game-card img {
    -webkit-user-drag: none;
}

.game-card:hover {
    transform: translateY(-4px);
}

/* サムネイル画像（1枚目の縦長比率 3:4） */
.game-card .thumbnail-wrapper {
    width: 100%;
    overflow: hidden;
    background-color: #1f1f23; /* 読み込み前のプレースホルダー色 */

    aspect-ratio: 3/4;

    border: 2px solid #2beaff;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 52%, rgba(214, 53, 232, 0.28), transparent 58%),
        linear-gradient(135deg, rgba(43, 234, 255, 0.16), rgba(219, 40, 231, 0.2));
    box-shadow:
        0 0 12px rgba(43, 234, 255, 0.28),
        0 0 12px rgba(219, 40, 231, 0.2),
        inset 0 0 12px rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.2s ease;
}

.game-card:hover .thumbnail-wrapper {
    box-shadow:
        0 0 16px rgba(43, 234, 255, 0.6),  /* 青ネオンを強く */
        0 0 18px rgba(219, 40, 231, 0.5),  /* 紫ネオンを強く */
        inset 0 0 12px rgba(255, 255, 255, 0.08); /* インセットを少し明るく */
}

.game-card .thumbnail-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* ホバー時の画像ズームエフェクト */
.game-card:hover .thumbnail-wrapper img {
    transform: scale(1.05);
}

/* テキストエリア */
.game-card .card-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* タイトル（2枚目のような白の太字） */
.game-card .title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #efeff1;
    /* 1行で省略（...）する設定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}