/* ============================================================
   menu.css —— 主菜单 / 角色选择 / 设置 / 键位 / 音乐 / toast
   ============================================================ */

/* ---- 主菜单 ---- */
#mainMenu {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 20;
}
.title {
    font-size: 72px; font-weight: 900; color: #fff;
    letter-spacing: 16px;
    text-shadow: 3px 3px 0 #c0392b, 6px 6px 0 rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}
.subtitle {
    font-size: 14px; color: #666; letter-spacing: 8px;
    margin-bottom: 60px;
}
.menuList { display: flex; flex-direction: column; gap: 14px; }
.menuBtn {
    width: 320px; height: 64px;
    background: transparent; border: 2px solid #fff;
    color: #fff; font-size: 22px; font-weight: bold;
    letter-spacing: 6px; cursor: pointer; font-family: inherit;
    transition: all 0.15s; position: relative;
}
.menuBtn::before {
    content: ''; position: absolute;
    top: 4px; left: 4px; right: -4px; bottom: -4px;
    border: 2px solid #c0392b; z-index: -1; transition: all 0.15s;
}
.menuBtn:hover { background: #c0392b; border-color: #c0392b; transform: translate(-2px, -2px); }
.menuBtn:hover::before { top: 6px; left: 6px; right: -6px; bottom: -6px; }
.menuBtn:active { transform: translate(2px, 2px); }
.footer {
    position: absolute; bottom: 20px;
    font-size: 12px; color: #444; letter-spacing: 2px;
}

/* ---- 角色选择 ---- */
#characterSelect {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 20; background: rgba(0, 0, 0, 0.92);
}
#characterSelect h2 {
    color: #fff; font-size: 32px; letter-spacing: 8px;
    margin-bottom: 40px; text-shadow: 2px 2px 0 #c0392b;
}
.charGrid {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px;
    scrollbar-gutter: stable;
}
.charGrid::-webkit-scrollbar {
    width: 6px;
}
.charGrid::-webkit-scrollbar-track {
    background: transparent;
}
.charGrid::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
.charGrid::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.charCard {
    width: 220px; height: 280px;
    background: #1a1a2e; border: 3px solid #fff;
    cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; position: relative;
}
.charCard::before {
    content: ''; position: absolute;
    top: 6px; left: 6px; right: -6px; bottom: -6px;
    border: 3px solid #c0392b; z-index: -1; transition: all 0.2s;
}
.charCard:hover { background: #2a1a1e; border-color: #c0392b; transform: translate(-3px, -3px); }
.charCard:hover::before { top: 10px; left: 10px; right: -10px; bottom: -10px; }
.charCard.selected { background: #2a1a1e; border-color: #c0392b; transform: translate(-3px, -3px); }
.charCard.selected::before { top: 10px; left: 10px; right: -10px; bottom: -10px; }

/* ★ 角色卡里的角色名（28px，大号）—— 会被 battle.css 里的 .charName 覆盖，
   但战斗 UI 里的角色名被 playerUI 作用域限定；这里保留原样 */
.charName { color: #fff; font-size: 28px; font-weight: bold; letter-spacing: 4px; }
.charTitle { color: #c0392b; font-size: 14px; letter-spacing: 3px; }
.charDesc { color: #888; font-size: 12px; letter-spacing: 1px; text-align: center; padding: 0 20px; }

/* ---- 通用按钮 ---- */
.backBtn {
    width: 180px; height: 48px;
    background: transparent; border: 2px solid #666;
    color: #aaa; font-size: 16px; letter-spacing: 4px;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.backBtn:hover { border-color: #fff; color: #fff; }
.saveBtn {
    width: 180px; height: 48px;
    background: transparent; border: 2px solid #c0392b;
    color: #c0392b; font-size: 16px; letter-spacing: 4px;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.saveBtn:hover { background: #c0392b; color: #fff; }
.charSelectBtns { display: flex; gap: 30px; margin-top: 10px; }

/* ---- 设置 / 多人模式 / 单人模式 / AI 难度面板 ---- */
#settingsPanel, #multiplayerPanel,
#singlePlayerPanel, #aiDifficultyPanel {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 20; background: rgba(0, 0, 0, 0.92);
}
.specialAiBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 160px;
    height: 52px;
    background: transparent;
    border: 2px solid #ff2020;
    color: #ff2020;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    box-shadow: 0 0 12px rgba(255, 32, 32, 0.6);
    z-index: 25;
}
.specialAiBtn:hover {
    background: #ff2020;
    color: #fff;
    box-shadow: 0 0 22px rgba(255, 32, 32, 0.95);
}
.specialAiBtn:active {
    transform: scale(0.96);
}
#settingsPanel h2, #multiplayerPanel h2,
#singlePlayerPanel h2, #aiDifficultyPanel h2 {
    color: #fff; font-size: 32px; letter-spacing: 8px;
    margin-bottom: 50px; text-shadow: 2px 2px 0 #c0392b;
}
.settingList { display: flex; flex-direction: column; gap: 16px; margin-bottom: 50px; }
.settingBtn {
    width: 320px; height: 60px;
    background: transparent; border: 2px solid #fff;
    color: #fff; font-size: 20px; font-weight: bold;
    letter-spacing: 4px; cursor: pointer; font-family: inherit;
    transition: all 0.15s; position: relative;
}
.settingBtn::before {
    content: ''; position: absolute;
    top: 4px; left: 4px; right: -4px; bottom: -4px;
    border: 2px solid #c0392b; z-index: -1; transition: all 0.15s;
}
.settingBtn:hover { background: #c0392b; border-color: #c0392b; transform: translate(-2px, -2px); }

/* ---- 音乐设置面板 ---- */
#musicPanel {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 21; background: rgba(0, 0, 0, 0.96);
    padding: 40px 0;
    box-sizing: border-box;
}
#musicPanel h2 {
    color: #fff; font-size: 32px; letter-spacing: 8px;
    margin-bottom: 30px;
    text-shadow: 2px 2px 0 #c0392b;
    flex-shrink: 0;
}
.musicList {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 30px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px;
    scrollbar-gutter: stable;
}
.musicList::-webkit-scrollbar {
    width: 6px;
}
.musicList::-webkit-scrollbar-track {
    background: transparent;
}
.musicList::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
.musicList::-webkit-scrollbar-thumb:hover {
    background: #666;
}
/* ⚠️ 原文里 .musicList 重复定义了一次，这里合并到上面，
   只保留有效值（gap: 16px; margin-bottom: 50px 被上一段的 30px 覆盖，不重复） */

.musicRow {
    display: flex; align-items: center; gap: 30px;
    min-width: 320px;
    padding: 14px 22px;
    background: #1a1a2e;
    border: 2px solid #444;
    border-radius: 6px;
}
.musicName {
    color: #fff; font-size: 18px;
    letter-spacing: 2px; flex: 1;
}
.musicToggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}
.musicToggle:hover {
    transform: scale(1.08);
}
.musicToggle.on {
    background: #4ade80;
    border-color: #4ade80;
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.9);
}

/* ---- 键位设置面板 ---- */
#keybindPanel {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center;
    justify-content: safe center;
    z-index: 21; background: rgba(0, 0, 0, 0.96);
    overflow-y: auto;
    padding: 40px 0;
    box-sizing: border-box;
}
#keybindPanel::-webkit-scrollbar {
    width: 6px;
}
#keybindPanel::-webkit-scrollbar-track {
    background: transparent;
}
#keybindPanel::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
#keybindPanel::-webkit-scrollbar-thumb:hover {
    background: #666;
}
#keybindPanel h2 {
    color: #fff; font-size: 32px; letter-spacing: 8px;
    margin-bottom: 24px; text-shadow: 2px 2px 0 #c0392b;
}
#keybindPlayerSelect { display: flex; gap: 40px; margin-bottom: 40px; }
#keybindCharSelect { display: none; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }

.keybindCard {
    width: 220px; height: 260px;
    background: #1a1a2e; border: 3px solid #fff;
    cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; position: relative;
}
.keybindCard::before {
    content: ''; position: absolute;
    top: 6px; left: 6px; right: -6px; bottom: -6px;
    border: 3px solid #c0392b; z-index: -1; transition: all 0.2s;
}
.keybindCard:hover { background: #2a1a1e; border-color: #c0392b; transform: translate(-3px, -3px); }
.keybindCard:hover::before { top: 10px; left: 10px; right: -10px; bottom: -10px; }
.keybindCardTitle { color: #c0392b; font-size: 18px; font-weight: bold; letter-spacing: 4px; }
.keybindCardChar { color: #fff; font-size: 32px; font-weight: bold; letter-spacing: 6px; }
.keybindCardHint { color: #666; font-size: 12px; letter-spacing: 1px; }

#keybindEdit { display: none; flex-direction: column; align-items: center; width: 100%; }
#keybindEditTitle { color: #fff; font-size: 22px; letter-spacing: 4px; margin-bottom: 20px; }
#keybindEditTitle .charNameHint { color: #c0392b; }
.keybindRow {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px 14px; justify-content: center;
    padding: 0 40px; margin-bottom: 14px;
    max-width: 1180px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.keybindRow::-webkit-scrollbar {
    width: 6px;
}
.keybindRow::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
.keybindItem { display: flex; align-items: center; gap: 6px; color: #ccc; font-size: 13px; }
.keybindInput {
    width: 74px; height: 32px;
    background: #1a1a1a; border: 2px solid #555;
    color: #fff; font-size: 13px; text-align: center;
    font-family: inherit; outline: none;
    transition: border-color 0.2s; border-radius: 4px;
}
.keybindInput:focus { border-color: #c0392b; background: #2a1a1e; }
.keybindBtns { display: flex; gap: 30px; margin: 16px 0 24px; }

/* ---- Toast ---- */
#toast {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #c0392b; color: #fff;
    padding: 30px 60px; font-size: 20px;
    letter-spacing: 4px; display: none; z-index: 100;
}