/* ==========================================================================
   1. 全体のベース（和紙 background）
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    background-color: #f7f3e9; /* メーナのページと同じ和紙の色 */
    color: #2b2b2b;
    font-family: "Hiragino Mincho ProN", serif;
    min-height: 100vh;
}

#menu-btn-check {
    display: none;
}

.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 100; /* メニューボタンは一番手前 */
    background-color: #2b2b2b; 
    border: 2px solid #800000;
    border-radius: 5px;
    cursor: pointer;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
    transition: all 0.3s;
}

.menu-btn span:before { bottom: 8px; }
.menu-btn span:after { top: 8px; }

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

.menu-content {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 95;
    background-color: #2b2b2b; 
    border-left: 3px solid #800000;
    transform: translateX(100%); 
    transition: transform 0.4s;
}

#menu-btn-check:checked ~ .menu-content {
    transform: translateX(0);
}

.menu-content ul {
    padding: 80px 0 0 0;
    margin: 0;
    list-style: none;
}

.menu-content ul li {
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 20px;
    position: relative;
    font-weight: bold;
}

.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #f1c40f; 
    border-right: solid 2px #f1c40f;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 22px;
}

.menu-content ul li a:hover {
    background-color: rgba(128, 0, 0, 0.3); 
    color: #f1c40f;
}

/* ==========================================================================
   2. レイアウト構造（ラフ案の再現）
   ========================================================================== */
.game-container {
    max-width: 900px;
    margin: 20px auto 60px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
}

/* --- 上段エリア --- */
.game-top-row {
    display: flex;
    gap: 25px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* ★ キャラ選択ボタン */
.char-select-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    border-radius: 8px !important;
    padding: 15px 10px 10px 10px !important;
    box-shadow: 4px 4px 0px #9c1c11 !important;

    /* ボタン全体の大きさ */
    width: 170px !important;  
    height: 200px !important; 
    
    box-sizing: border-box !important;
    transition: transform 0.1s !important;
}

.char-select-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #9c1c11 !important;
}

/* 中のキャラ画像の大きさ調整 */
.btn-char-container {
    width: 100% !important;
    height: 140px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important; /* ドット絵が他の要素に隠れないよう前面に */
}

#btnCharImg {
    width: auto !important;
    height: 100% !important; 
    max-width: 100% !important;
    object-fit: contain !important;
    image-rendering: pixelated !important; 
}

/* 下側の文字エリア */
.btn-text-wrapper {
    width: 100% !important;
    text-align: center !important;
    margin-top: 5px !important;
    z-index: 2 !important;
}

.btn-main-text {
    display: block !important;
    font-size: 16px !important; 
    color: #000000 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* 横長のゲーム名看板 */
.game-title-kanban {
    flex: 1; /* 残りの横幅をすべて使う */
    min-width: 300px;
    background: #800000; /* 豪華な赤看板 */
    border: 3px solid #2b2b2b;
    box-shadow: 12px 12px 0px #2b2b2b; /* 黒い太影 */
    padding: 25px 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.kanban-sub {
    color: #f1c40f; /* ゴールド */
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.game-main-name {
    font-size: 2.4rem;
    margin: 8px 0;
    color: #ffffff;
    font-weight: 900;
    text-shadow: 2px 2px 0px #2b2b2b;
}

.game-desc {
    margin: 5px 0 0 0;
    font-size: 0.95rem;
    color: #f7f3e9;
    line-height: 1.4;
}

/* ==========================================================================
   3. 下段エリア：難易度選択（3つのカード並び）
   ========================================================================== */
.difficulty-section {
    background: #fff;
    border: 3px solid #2b2b2b;
    box-shadow: 12px 12px 0px #800000; /* 全体を包む大きな赤影カード */
    padding: 35px 25px;
    box-sizing: border-box;
}

.section-title {
    font-size: 1.4rem;
    color: #800000;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 2px solid #2b2b2b;
    padding-bottom: 8px;
    display: inline-block;
}

/* 3つ並べるグリッド */
.difficulty-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* 木札ボタンの共通の型 */
.diff-card {
    flex: 1;
    min-width: 180px;
    background: #ffffff;
    border: 2px solid #2b2b2b;
    text-decoration: none;
    color: #2b2b2b;
    padding: 25px 15px;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.diff-eng {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.diff-jp {
    font-size: 2rem;
    margin: 0 0 10px 0;
    font-weight: 900;
}

.diff-note {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   参戦キャラクター紹介用のデザイン（木札風）
   ========================================================================== */
.game-chara-section {
    background: #fff;
    border: 3px solid #2b2b2b;
    box-shadow: 12px 12px 0px #800000; /* 全体を包む大きな赤影カード */
    padding: 35px 25px;
    box-sizing: border-box;
}

/* 4人を横並びにするグリッド */
.game-chara-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* スマホで自動折り返し */
}

/* 小さな木札風キャラクターカード */
.game-chara-card {
    flex: 1;
    min-width: 160px; /* スマホで2列を維持しやすいサイズ */
    background: #ffffff;
    border: 2px solid #2b2b2b;
    box-shadow: 5px 5px 0px #e67e22; /* ラーメンオレンジの影（レイヤー下） */
    padding: 20px 10px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* イラストを丸窓またはスクエアに収める枠 */
.mini-img-wrap {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background: #fafafa;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mini-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を崩さず枠に収める */
}

/* キャラクター名 */
.mini-name {
    font-size: 1.3rem;
    color: #800000;
    margin: 0 0 8px 0;
    font-weight: 900;
}

/* キャラの一言 */
.mini-word {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
    line-height: 1.4;
    font-style: italic; /* ちょっとセリフっぽく斜体に */
}

/* --- 辛さに合わせたそれぞれの影色（レイヤー下） --- */
.card-easy { box-shadow: 6px 6px 0px #f1c40f; }
.card-easy .diff-eng { color: #f1c40f; }
.card-easy:hover { box-shadow: none; transform: translate(6px, 6px); background: #fffdf5; }

.card-normal { box-shadow: 6px 6px 0px #e67e22; }
.card-normal .diff-eng { color: #e67e22; }
.card-normal:hover { box-shadow: none; transform: translate(6px, 6px); background: #fffaf5; }

.card-hard { box-shadow: 6px 6px 0px #800000; border-color: #800000; }
.card-hard .diff-eng { color: #800000; }
.card-hard:hover { box-shadow: none; transform: translate(6px, 6px); background: #fff5f5; }

/* --- フッター --- */
.shop-footer {
    text-align: center;
    padding: 30px 0;
    margin-top: 60px;
    border-top: 1px double #2b2b2b;
    font-size: 0.85rem;
    color: #666;
}

/* ==========================================================================
   追加：キャラ選択ボタンの横の「遊び方枠」用デザイン（難易度と全く同じ柄）
   ========================================================================== */
.char-info-blank-box {
    flex-grow: 1;
    background: #ffffff !important;
    border: 5px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 6px 6px 0px #800000 !important; 
    height: 200px !important; /* ボタンの高さと完全同期 */
    display: flex !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   5. スマホ・タブレット用のレスポンシブ大改修（ここを追加！）
   ========================================================================== */
@media (max-width: 768px) {
    .game-container {
        margin: 15px auto 40px auto;
        padding: 0 12px;
        gap: 25px;
    }

    /* ゲーム名看板のサイズ最適化 */
    .game-title-kanban {
        padding: 20px;
        min-width: 100%;
        box-shadow: 8px 8px 0px #2b2b2b;
    }

    .game-main-name {
        font-size: 1.8rem; /* スマホで文字が飛び出さない太さに */
    }

    /* 💡【超重要】キャラ選択と遊び方枠を包む親要素のスタイルをCSSから上書き！ */
    .game-container > div[style*="display: flex"] {
        flex-direction: column !important; /* 横並びから『縦並び』にスイッチ！ */
        padding: 0 !important;
        gap: 15px !important;
    }

    /* キャラ選択ボタンをスマホ横幅いっぱいに */
    .char-select-btn {
        width: 100% !important;
        height: 160px !important; /* 縦長になりすぎないスマートな高さに変更 */
        flex-direction: row !important; /* スマホでは左にキャラ、右に文字の横長ボタンにする */
        padding: 10px 20px !important;
    }

    .btn-char-container {
        width: 100px !important;
        height: 100% !important;
    }

    .btn-text-wrapper {
        flex-grow: 1;
        text-align: left !important;
        padding-left: 20px;
    }

    .btn-main-text {
        font-size: 1.3rem !important; /* スマホでも押しやすい大きさに */
    }

    /* 遊び方説明枠を縦並びに合わせて完全フィットさせる */
    .char-info-blank-box {
        width: 100% !important;
        height: auto !important; /* テキストが絶対にはみ出さないよう自動伸縮に */
        padding: 20px !important;
        box-shadow: 5px 5px 0px #800000 !important;
    }

    .char-info-blank-box h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .char-info-blank-box p {
        font-size: 0.85rem !important; /* スマホの画面幅で綺麗に収まる細字フォントサイズ */
        line-height: 1.5 !important;
    }

    /* 難易度選択エリアの調整 */
    .difficulty-section {
        padding: 25px 15px;
        box-shadow: 8px 8px 0px #800000;
    }

    .section-title {
        font-size: 1.15rem;
        margin-bottom: 20px;
    }

    .difficulty-grid {
        gap: 12px;
    }

    .diff-card {
        min-width: 100%; /* 縦に1列で綺麗に並ぶように調整 */
        padding: 15px;
    }

    .diff-jp {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }

    /* 障害物（具材）紹介エリアの調整 */
    .game-chara-section {
        padding: 25px 15px;
        box-shadow: 8px 8px 0px #800000;
    }

    .game-chara-grid {
        gap: 12px;
    }

    .game-chara-card {
        flex: calc(50% - 6px) !important; /* スマホ画面で綺麗に『2列×2行』に整列 */
        min-width: calc(50% - 6px);
        padding: 15px 8px;
    }

    .mini-img-wrap {
        width: 80px;
        height: 80px;
        margin-bottom: 8px;
    }

    .mini-name {
        font-size: 1.05rem;
    }

    .mini-word {
        font-size: 0.75rem;
    }
    .menu-btn {
        top: 15px;      /* ボタンの位置を少し上に上げて文字との被りを解消 */
        right: 15px;    /* ボタンの位置を少し右に寄せる */
        height: 44px;   /* 四角いボタンの大きさを 60px → 44px に縮小 */
        width: 44px;
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        height: 2px;    /* 線の太さを 3px → 2px に */
        width: 18px;    /* 線の長さを 25px → 18px に */
        border-radius: 2px;
    }

    .menu-btn span:before { bottom: 6px; } /* 三本線の上下のすき間を狭く */
    .menu-btn span:after { top: 6px; }
}

/* デバッグメニューリンクの装飾 */
.menu-content ul li a.debug-link {
    color: #ff4757;
    font-weight: bold;
}

.menu-content ul li a.debug-link::before {
    border-top: solid 2px #ff4757;
    border-right: solid 2px #ff4757;
}