/* Google Fontsからドット絵フォントを読み込み */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body {
    /* フォントをドット絵風に変更 */
    font-family: 'DotGothic16', Arial, sans-serif;
    text-align: center;
    /* 背景を少しリッチなグリッド模様に変更 */
    background-color: #f0f4f8;
    background-image: radial-gradient(#dfe6e9 1px, transparent 1px);
    background-size: 20px 20px;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background-color: #333;
    color: white;
    padding: 15px 0;
    /* ヘッダーにも少し影をつける */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.profile {
    margin: 20px;
    padding: 20px;
}

.profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* ドット絵っぽい太い枠線に変更 */
    border: 4px solid #333;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

/* プロフィール画像にカーソルを乗せた時の遊び心 */
.profile img:hover {
    transform: rotate(-5deg) scale(1.1);
}

.links {
    margin: 20px;
}

.links a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.2s;
    /* ボタンっぽい影 */
    box-shadow: 0 4px 0 #000;
}

.links a:hover {
    background-color: #555;
    transform: translateY(2px); /* 押したように沈む */
    box-shadow: 0 2px 0 #000; /* 影が減る */
}

/* 🎮 ゲーム紹介セクションのデザイン */
.game-section {
    margin: 40px auto; /* 中央揃えのためにauto追加 */
    max-width: 1000px; /* 幅が広がりすぎないように制限 */
    padding: 20px;
    /* 背景を透過させてグリッドを見せるか、白にするか */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game-section h2 {
    margin-bottom: 20px;
    border-bottom: 2px dashed #ccc; /* 点線の下線を追加 */
    padding-bottom: 10px;
    display: inline-block;
}

/* 🎮 カードを横に並べてスワイプできるようにする */
.game-container {
    display: flex;
    flex-wrap: nowrap; /* ★重要：折り返しを禁止して横一列にする */
    overflow-x: auto;  /* ★重要：横にはみ出したらスクロールさせる */
    justify-content: flex-start; /* 左詰めでスタート */
    gap: 30px; /* カード同士の間隔 */
    
    /* 見た目の調整 */
    padding: 20px 40px; /* 上下左右に余白（影が切れないように） */
    max-width: 100%; /* 画面幅いっぱいを使う */
    
    /* 📱 スマホアプリのような「ピタッ」と止まる気持ちいい挙動 (Scroll Snap) */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; /* iPhoneでの慣性スクロール */
}

/* スクロールバーを任天堂っぽくオシャレにする（Chrome/Safari用） */
.game-container::-webkit-scrollbar {
    height: 10px; /* バーの高さ */
}
.game-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.game-container::-webkit-scrollbar-thumb {
    background: #ccc; /* つまみの色 */
    border-radius: 10px;
}
.game-container::-webkit-scrollbar-thumb:hover {
    background: #e60012; /* ホバー時に任天堂レッドにする遊び心 */
}

/* ゲームカードの調整 */
.game-card {
    /* ★重要：カードが潰れないように幅を固定する */
    flex: 0 0 300px; /* 「幅300pxで固定、伸び縮みしない」という意味 */
    
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    
    /* アニメーション設定（さっきのまま） */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* ★重要：スクロールした時に、画面の中央でピタッと止まる設定 */
    scroll-snap-align: center; 
}

/* 以前のアニメーション用クラスなどはそのままでOK */
.game-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 10;
}
/* 画像サイズなども以前のまま維持 */
.game-card img {
    width: 100%;
    height: 180px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

/* JavaScriptでクラスがついた時に表示される状態 */
.game-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* マウスホバー時の動き */
.game-card:hover {
    transform: translateY(-10px) scale(1.02); /* 浮き上がる */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 10; /* 他の要素より手前に */
}

/* Google Play枠やTokaiMap枠が光る設定 */
.game-card[style*="3DDC84"]:hover {
    box-shadow: 0 0 20px rgba(61, 220, 132, 0.6) !important;
}
.game-card[style*="e74c3c"]:hover {
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.6) !important;
}

/* 画像設定 */
.game-card img {
    width: 100%;
    height: 180px; /* 高さを統一してレイアウト崩れ防止 */
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

/* フッター */
footer {
    margin-top: 40px;
    padding: 20px;
    background-color: #333;
    color: white;
    font-size: 0.9rem;
}