body {
    /* ✨ 新增：海报背景与暗色滤镜 */
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: rgba(15, 23, 42, 0.85); /* 叠加深蓝色半透明遮罩 */
    background-blend-mode: overlay;
    
    color: #e9c46a;
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
}
.hidden { display: none !important; }

/* 通用按钮 */
button {
    background-color: #780000; color: white;
    border: none; padding: 10px 15px; margin: 5px;
    border-radius: 5px; cursor: pointer;
    font-size: 16px; font-weight: bold;
}
button:hover { filter: brightness(1.2); }
.small-txt { font-size: 12px; font-weight: normal; color: #ddd;}

/* 难度按钮特殊颜色 */
.btn-easy { background-color: #2a9d8f; padding: 15px 30px; margin: 10px;}
.btn-medium { background-color: #e76f51; padding: 15px 30px; margin: 10px;}
.btn-hard { background-color: #9d0208; padding: 15px 30px; margin: 10px;}

/* --- 顶部控制台极限压缩 --- */
.game-header { margin-bottom: 5px; }
h1 { margin: 5px 0; font-size: 24px; }
#current-lesson-title { margin: 5px 0; font-size: 16px; }

/* ✨ 全新：魔法风格控制台按钮与面板 */
.controls { display: flex; justify-content: center; gap: 15px; margin-top: 5px; flex-wrap: wrap; }

.magic-badge {
    font-size: 15px; font-weight: bold;
    padding: 6px 12px; border-radius: 8px;
    border: 2px solid #e9c46a; /* 霍格沃茨金色边框 */
    box-shadow: 0 0 10px rgba(233, 196, 106, 0.4); /* 金色微光 */
    color: white; text-shadow: 1px 1px 2px black;
}
.score-badge { background: linear-gradient(135deg, #2b1055, #4cc9f0); /* 星空魔法紫蓝 */ }
.time-badge { background: linear-gradient(135deg, #780000, #c1121f); /* 危机倒计时深红 */ }

.magic-btn {
    background: linear-gradient(135deg, #1a5e32, #2a9d8f); /* 斯莱特林/魔药绿 */
    color: #e9c46a; border: 2px solid #e9c46a; 
    padding: 6px 15px; margin: 0; border-radius: 8px; 
    cursor: pointer; font-size: 15px; font-weight: bold;
    box-shadow: 0 0 10px rgba(26, 94, 50, 0.8);
    transition: all 0.2s;
}
.magic-btn:hover {
    filter: brightness(1.2); transform: scale(1.05);
    box-shadow: 0 0 15px rgba(233, 196, 106, 0.8); /* 悬浮时金光变亮 */
}

/* --- 画板与卡片极限压缩 (一屏流) --- */
#game-board {
    display: grid;
    /* 缩小每一列的最小宽度，让一行塞下更多卡片 */
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 6px; /* 间距缩小 */
    max-width: 1000px; /* 放宽一点限制 */
    margin: 0 auto 10px auto;
}

.card {
    min-height: 55px; /* 高度大幅减小，防滚动核心 */
    display: flex; justify-content: center; align-items: center;
    padding: 4px; cursor: pointer; border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.1s, opacity 0.4s ease; 
}
.card.en-card { background-color: rgba(233, 196, 106, 0.95); color: #1a1a2e; font-size: 14px; font-weight: bold; }
/* 释义文字极度压缩 */
.card.def-card { background-color: rgba(69, 123, 157, 0.95); color: white; font-size: 10.5px; line-height: 1.2; }
.card.matched { opacity: 0 !important; visibility: hidden; cursor: default; }

/* ✨ 游戏结束弹窗 & 错题表格 */
#game-over-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: rgba(22, 33, 62, 0.95); border: 3px solid #e9c46a;
    padding: 30px; border-radius: 15px; z-index: 100;
    width: 90%; max-width: 800px; /* 加宽以容纳表格 */
    box-shadow: 0 0 40px rgba(0,0,0,0.9); text-align: center;
}
.table-container { max-height: 300px; overflow-y: auto; margin-top: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); }
#unmatched-table { width: 100%; border-collapse: collapse; text-align: left; background: rgba(0,0,0,0.4); }
#unmatched-table th, #unmatched-table td { border: 1px solid rgba(255,255,255,0.1); padding: 10px; font-size: 14px; color: #eee; }
#unmatched-table th { background: rgba(0,0,0,0.6); color: #e9c46a; position: sticky; top: 0; }
#unmatched-table td:first-child { color: #e9c46a; font-weight: bold; font-size: 16px;}