/* 基本設定 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロール禁止 */
    font-family: 'MedievalSharp', cursive; /* Google Fontsで読み込んだフォント */
    color: #f5deb3; /* 文字色を明るい茶色系に */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 文字の影 */
    background-color: #6a4f31; /* 背景画像の読み込み失敗時や、背景画像の余白の色 */
    
    /* 背景画像設定 */
    background-image: url('../img/background-map.png');
    background-size: cover; /* 画面全体を覆うように拡大縮小 */
    background-position: center; /* 中央を基準に配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
    background-attachment: fixed; /* スクロールしても背景は固定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* 画面の高さに合わせる */
}

a {
    text-decoration: none;
    color: inherit; /* 親要素の文字色を継承 */
}

/* ヘッダーアイコン */
.header-icons {
    position: absolute; /* 絶対配置 */
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px; /* アイコン間のスペース */
    z-index: 10; /* 他の要素より手前に表示 */
}

#username_display {
    font-size: 1.1em;
    color: #d2b48c;
}

.ui-icon {
    width: 40px; /* アイコンのサイズ */
    height: 40px;
    object-fit: contain; /* アスペクト比を維持して収める */
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7)); /* アイコンの影 */
    transition: transform 0.2s ease-in-out; /* ホバーアニメーション */
}

.ui-icon:hover {
    transform: scale(1.1); /* ホバーで拡大 */
}

/* メインコンテンツ */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
    width: 90%; /* コンテンツの最大幅 */
    max-width: 960px; /* PCでの最大幅 */
    margin-top: 80px; /* ヘッダーアイコンとの被りを避ける */
    flex-grow: 1; /* 残りのスペースを埋める */
}

.main-logo {
    width: 150px; /* メインロゴのサイズ */
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7));
}

.game-title {
    font-size: 3.5em; /* LocusLore の文字サイズ */
    margin: 10px 0;
    color: #f5deb3;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
}

.tagline {
    font-size: 1.2em; /* サブタイトル */
    margin-bottom: 40px;
    color: #d2b48c; /* 少し異なる色合い */
}

/* ナビゲーション */
.navigation-container {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    max-width: 700px; /* ナビゲーションバナーの最大幅 */
    margin-bottom: 50px;
}

.nav-banner {
    width: 100%;
    height: auto;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.7));
}

.nav-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 5%; /* バナーの端との余白 */
    /* 親要素の幅に合わせる */
    box-sizing: border-box;
}

.nav-button-text {
    flex: 1; /* 均等にスペースを分配 */
    font-size: 0.9em; /* ボタンテキストのサイズ */
    font-weight: bold;
    color: #3b2f21; /* バナーに合う暗い文字色 */
    white-space: nowrap; /* テキストの折り返し防止 */
    transition: color 0.2s ease-in-out;
}

.nav-button-text:hover {
    color: #8b0000; /* ホバー時の色 */
    text-shadow: 0 0 5px #f5deb3;
}

/* 「Today's Legends」セクション */
.section-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #f5deb3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.preview-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* アイコン間のスペース */
    flex-wrap: wrap; /* 小画面で折り返す */
    max-width: 600px; /* アイコン群の最大幅 */
    width: 70%;
    margin: 0 auto; /* 中央寄せ */
}

.preview-icon {
    /* アイコンを均等に配置 */
    flex: 1 1 80px; /* 基本サイズを80pxに設定 */
    max-width: 80px; /* プレビューアイコンのサイズを変更する */
    max-height: 80px;
    border-radius: 50%; /* 円形にする */
    border: 3px solid #d2b48c; /* 枠線 */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
    object-fit: cover; /* はみ出し部分をカットして表示 */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.preview-icon:hover {
    transform: scale(1.05);
    border-color: #8b0000; /* ホバーで枠線の色変更 */
}

.footer {
    background-color: #3b2f21; /* フッターの背景色 */
    color: #d2b48c; /* フッターの文字色 */
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* =================================================== */
/* レスポンシブデザイン (タブレット以上) */
/* =================================================== */
@media (min-width: 768px) {
    .main-logo {
        width: 180px; /* ロゴを少し大きく */
    }

    .game-title {
        font-size: 4.5em;
    }

    .tagline {
        font-size: 1.5em;
    }

    .nav-button-text {
        font-size: 1.1em; /* ボタンテキストのサイズ */
    }

    .section-title {
        font-size: 2.5em;
    }

    .preview-icon {
        width: 150px; /* プレビューアイコンを少し大きく */
        height: 150px;
    }
}

/* =================================================== */
/* レスポンシブデザイン (PCサイズ以上) */
/* =================================================== */
@media (min-width: 1024px) {
    .main-logo {
        width: 200px; /* ロゴをさらに大きく */
    }

    .game-title {
        font-size: 5.5em;
    }

    .tagline {
        font-size: 1.8em;
    }

    .nav-button-text {
        font-size: 1.2em;
    }

    .section-title {
        font-size: 3em;
    }

    .preview-icon {
        width: 180px; /* プレビューアイコンをさらに大きく */
        height: 180px;
    }
}