/* style.css (完整版) */

/* 颜色变量 */
:root {
  --center-word-color: #ffffff;
  --phonetic-symbol-color: #ffffff;
  --center-translations-color: #ffffff;
  --falling-word-color: #ffffff;
  --falling-translations-color: #ffffff;
  --sentence-color: #ffffff;
  --sentence-translations-color: #ffffff;
  --highlighted-keyword-color: #FF4136;
  --inflection-reason-color: #A0E8A0;
  --error-color: #FF4136; /* 错误消息颜色 */
}

/* 基础样式 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* background-image: url('brain.svg'); 替换为你的文件名 */
    background-repeat: no-repeat;                 /* 防止平铺 */
    background-position: center;                  /* 图像居中 */
    background-size: 60%;                       /* 50%屏幕 */
    color: var(--center-word-color);
    font-family: Arial, sans-serif;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                 /* ★ 防止触摸滑动时选中文本 ★ */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
}

#video-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1; /* 确保在 Ticker 之下 */
}


.hidden {
    display: none !important;
}


/* 占位符文本的样式 */
input::placeholder {
    color: #999; /* 占位符颜色稍浅 */
    opacity: 1; /* 确保在 Firefox 中也完全可见 */
}

/* 按钮的通用样式 (如果需要更新) */
button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}


/* 滚动字幕样式 */
#word-ticker-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 997;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2em 0;
    box-sizing: border-box;
}


.ticker-track {
    width: fit-content;
    white-space: nowrap;
    will-change: transform;
    animation: scroll-left 60s linear infinite;
    position: relative; /* 激活 z-index */
    z-index: 1;         /* 将其设为图层 1 */
}
.ticker-track:nth-child(2n) {
    animation: scroll-left 80s linear infinite reverse;
}
.ticker-word {
    display: inline-block;
    padding: 10px 40px;
    margin: 0 20px;
    font-weight: 600;
    color: #fff;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    opacity: 0.7;
}
.ticker-word:hover {
    /* background-color: #007bff; */
    color: #fff;
    transform: scale(1.1);
    opacity: 1;
}
@keyframes scroll-left {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* 视频播放元素样式 */
#slideshow {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* ★ [核心修改] ★ */
    /* 1. 移除 background-image transition */
    /* 2. 添加 opacity transition (设置 1 秒淡入淡出) */
    /* transition: opacity 0.5s ease-in-out;  */
    
    position: absolute; /* 使 z-index 生效 */
    top: 0;
    left: 0;
    z-index: 2; 
    opacity: 0; 

    position: relative;
}

/* ★★★ 1. 通用滤镜 (前 7 张图) ★★★ */
/* 为每一张图片层添加伪元素滤镜 */
.image-stack-layer::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-shadow: none !important; 
    
    /* ★ [调整] ★ 
       1. ellipse at center: 椭圆形状
       2. transparent 50%: 中心 50% 区域完全透明（纯亮，无灰）
       3. #000000 100%: 边缘过渡到 100% 纯黑（更黑）
    */
    background: radial-gradient(
        ellipse at center, 
        transparent 40%,      
        #000000 80% 
    );

    z-index: 10;
}

/* ★★★ 2. 重口味滤镜 (最后 1 张图 - 强力定格版) ★★★ */
.image-stack-layer.layer-final::after {
    box-shadow: none !important;

    /* ★ [调整] ★ 
       中心区域缩小到 30%，边缘依然是纯黑，
       制造强烈的“谢幕”聚焦感。
    */
    background: radial-gradient(
        ellipse at center, 
        transparent 20%,      
        #000000 60% 
    );
}


#text-display {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    
    /* 1. [修改] 强制容器变宽 (来自你上个问题的修复) */
    width: 90%; 
    max-width: 90%;
    
    padding: 2em;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    z-index: 5;

    /* 2. [修改] 滚动条 (来自你上个问题的修复) */
    max-height: 90vh;
    overflow-y: auto; 

    scrollbar-width: none;
    -ms-overflow-style: none;

    /* 3. ★ [核心] 在父容器上设置“主”字体大小 ★ */
    /* 我们将它设置为随 4.5vmin 变化，最小 1em，最大 1.5em */
    font-size: clamp(1.0em, 4.5vmin, 1.5em);
}

#text-display.visible { opacity: 1; }

/* ★ [新增] 隐藏 Chrome, Safari, 和其他 WebKit 浏览器的滚动条 ★ */
#text-display::-webkit-scrollbar {
    display: none;
}

/* 4. ★ [核心] 所有子元素现在使用相对的 em 单位 ★ */
/* (它们会相对于上面 #text-display 设置的 1.0em~1.5em 变化) */

.word-display { 
    font-size: 2.2em; /* 2.2 倍的父字体 */
    font-weight: bold; color: var(--center-word-color); 
}
.phonetic-display { 
    font-size: 1.0em; /* 1.0 倍的父字体 */
    margin-top: 5px; color: var(--phonetic-symbol-color); 
}
.translations-display { 
    font-size: 1.1em; /* 1.1 倍的父字体 */
    margin-top: 1.5em; color: var(--center-translations-color); 
}
.sentence-display {
    font-size: 1.2em; /* ★ 原句：1.2 倍的父字体 */
    margin-bottom: 0.5em; 
    line-height: 1.3; 
    color: var(--sentence-color);
    text-align: center; 
    pointer-events: auto;
    font-weight: bold;
}

.inflection-reason { 
    margin-top: 1.5em; 
    font-size: 0.85em; /* 0.85 倍的父字体 */
    font-style: italic; color: var(--inflection-reason-color); opacity: 0.8; 
}

.highlighted-keyword { color: var(--highlighted-keyword-color); }

/* --- 掉落单词容器 --- */
#falling-words-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.word-group { 
    position: absolute; 
    padding: 10px; border-radius: 8px; text-align: center; opacity: 0; 
    animation: fadeIn 0.5s forwards; 
    width: auto; /* (让宽度自适应) */
}
.word-group .original { 
    font-size: clamp(1em, 2.5vw, 1.5em); /* 掉落单词响应式 */
    font-weight: bold; color: var(--falling-word-color); 
    white-space: nowrap; /* 防止单词换行 */
}
.word-group .translations { 
    font-size: clamp(0.7em, 1.8vw, 0.9em); /* 掉落翻译响应式 */
    color: var(--falling-translations-color); 
    white-space: nowrap; /* 防止单词换行 */
}
@keyframes fadeIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* 模态框通用样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 更暗的背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-overlay.hidden {
    display: none !important;
}
.modal-content {
    background: #282c34; /* 深灰色背景 */
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    color: #fff;
    /* ★★★ 响应式尺寸和滚动 ★★★ */
    
    /* 1. 响应式宽度 (替换 min-width) */
    width: 90%;           /* 宽度设置为视口的 90% */
    max-width: 500px;     /* 在大屏幕上，最大宽度不超过 500px */
    box-sizing: border-box; /* 确保 padding 包含在 width 内 */
    
    /* 2. (关键) 响应式高度 */
    max-height: 85vh;     /* 最大高度为视口高度的 85% */
    overflow-y: auto;     /* 如果内容超出 85vh，则在模态框 *内部* 显示垂直滚动条 */
    position: relative; 
    z-index: 1;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #61dafb; /* 亮蓝色标题 */
}


/* 表单元素通用样式 */
input[type="text"],
input[type="password"],
input[type="email"],
select#source-language,
select#primary-translation-language,
select#language-switcher,
select#source-language-menu, 
select#primary-translation-language-custom,
select#source-language-random,
select#primary-translation-language-random {
  display: block;
  width: 90%; /* 相对宽度 */
  max-width: 300px; /* 最大宽度 */
  padding: 12px 15px;
  margin: 15px auto;
  border-radius: 5px;
  border: 1px solid #555;
  background: #333;
  color: #fff;
  font-size: 1em;
  box-sizing: border-box; /* ★ 2. 添加 box-sizing 确保宽度正确 ★ */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* ★ 3. 添加过渡 ★ */
  margin: 8px auto 15px auto; /* ★ 减小上边距 (8px)，保持下边距 (15px) ★ */
}

/* ★★★ 设置模态框中的表单标签样式 ★★★ */
.form-label {
    display: block;
    width: 90%;
    max-width: 300px;
    margin: 15px auto 0 auto; /* 顶部外边距 */
    padding: 0 15px;
    box-sizing: border-box;
    text-align: left;
    font-weight: bold;
    color: #ccc;
    font-size: 0.9em;
}

/* ★ 调整下拉框和复选框的上边距 ★ */
select#source-language,
select#primary-translation-language,
.language-checkbox-container {
    margin-top: 8px; /* 减小上边距 */
}

/* ★ 添加模态框输入框的焦点样式 (深色主题) ★ */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select#source-language:focus {
    border-color: #61dafb; /* 亮蓝色边框 */
    box-shadow: 0 0 0 3px rgba(97, 218, 251, 0.25); /* 亮蓝色光晕 */
    outline: none; /* 移除默认的焦点轮廓 */
    background: #444; /* (可选) 焦点时背景稍亮 */
}

/* ★ 模态框输入框的占位符样式 (深色主题) ★ */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder {
    color: #888;
    opacity: 1;
}

/* ★ 模态框表单的 Label 样式 ★ */
.modal-content form label {
    display: block; /* 标签单独占一行 */
    width: 90%;
    max-width: 300px;
    margin: 15px auto 0 auto; /* 顶部有间距，底部无间距 (间距留给 input) */
    padding: 0 15px; /* 确保与输入框对齐 */
    box-sizing: border-box; /* 确保与输入框对齐 */
    
    text-align: left; /* 文本左对齐 */
    font-weight: bold;
    color: #ccc; /* 标签文本颜色 */
    font-size: 0.9em;
}


.language-checkbox-container {
  width: 90%;
  max-width: 300px;
  max-height: 150px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid #555;
  border-radius: 5px;
  background: #333;
  margin: 15px auto;
  padding: 10px 15px;
  text-align: left;
  box-sizing: border-box;
}
.language-checkbox-container label { display: block; padding: 5px 0; cursor: pointer; }
.language-checkbox-container label:hover { background-color: #444; }
.language-checkbox-container input { margin-right: 10px; accent-color: #61dafb; /* 勾选框颜色 */ }
/* ★★★ 用于“灰掉”被禁用语言选项的样式 ★★★ */
.language-checkbox-container label.disabled-label {
    color: #777; /* 文本颜色变灰 */
    cursor: not-allowed; /* 鼠标指针变为“禁止” */
    text-decoration: line-through; /* (可选) 添加删除线 */
}
/* 移除禁用选项的悬停效果 */
.language-checkbox-container label.disabled-label:hover {
    background-color: transparent; 
}

button[type="submit"] { /* 主按钮 */
    padding: 12px 25px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 1.1em;
    transition: background-color 0.2s ease;
}
button[type="submit"]:hover { background: #0056b3; }

/* 登录/注册 特定样式 */
.error-message {
    color: var(--error-color);
    margin-top: 15px;
    font-weight: bold;
    font-size: 0.9em;
}
.toggle-link { margin-top: 20px; font-size: 0.9em; color: #aaa; }
.toggle-link a { color: #61dafb; text-decoration: none; font-weight: bold; }
.toggle-link a:hover { text-decoration: underline; }

/* 退出按钮样式 */
.logout-button {
    margin-top: 25px;
    padding: 8px 15px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.logout-button:hover { background-color: #c82333; }

/*  共享的悬停显示逻辑*/
.hidden-until-hover {
    position: fixed; /* 必须是 fixed 才能全局显示 */
    z-index: 999;    /* 确保在 Ticker (997) 之上 */
    opacity: 0;      /* 初始隐藏 */
    pointer-events: none; /* 隐藏时不可点击 */
    /* 平滑过渡效果 */
    transition: opacity 0.4s ease-out, top 0.4s ease-out, bottom 0.4s ease-out;
}

/* ★ 鼠标悬停在页面主体时，显示所有隐藏元素 ★ */
body:hover .hidden-until-hover.hover-active {
    opacity: 1;
    pointer-events: auto;
}

body:hover #open-modal-bubble.hover-active {
    bottom: 70px; /* 可见位置 */
}
body:hover #global-loop-mode-container.hover-active {
    top: 50px; /* 可见位置 */
}

/* ★★★  #open-modal-bubble 样式 (使用新逻辑) ★★★ */
/* */
#open-modal-bubble {
    /* (保留所有旧的尺寸、颜色、阴影等样式) */
    position: fixed;
    bottom: -100px;
    left: 25px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); */
    
    /* ★ [修改] 只保留初始的 transform 状态 ★ */
    transform: translateY(100%); /* 初始向下移出视口 */
    /* (旧的 opacity, transition, pointer-events 已被 .hidden-until-hover 替代) */
}

/* A. 按钮的基础样式 (复制 #open-modal-bubble) */
#open-custom-mode-float-button {
    position: fixed;
    bottom: -100px; /* 初始隐藏 */
    left: 25px;     /* 与设置按钮(⚙️)左对齐 */
    width: 60px;
    height: 60px;
    background-color: transparent;
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 28px; /* 图标大小 */
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
    transform: translateY(100%); /* 匹配其他按钮的隐藏动画 */
}

/* B. 按钮激活时的位置 (在 70px 的设置按钮上方) */
/* (70px + 60px高 + 10px间距 = 140px) */
body:hover #open-custom-mode-float-button.hover-active {
    bottom: 140px; 
}

/* C. 按钮的悬停效果 (复制 #open-modal-bubble:hover) */
#open-custom-mode-float-button:hover {
    background-color: transparent;
    transform: translateY(100%) scale(1.1);
}

/* ★★★ 全屏按钮样式 ★★★ */
#fullscreen-button {
    position: fixed;
    right: 25px;  /* ★ 定位在右侧 */
    bottom: -100px; /* ★ 初始隐藏在底部 (与 bubble 相同) */
    
    width: 60px;
    height: 60px;
    background-color: transparent;
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 28px; /* 调整符号大小 */
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); */
}

/* ★ 鼠标悬停在 body 时，显示全屏按钮 ★ */
body:hover #fullscreen-button.hover-active {
    bottom: 10px; /* ★ 移动到可见位置 (与 bubble 相同) */
}

/* ★ 全屏按钮的悬停效果 ★ */
#fullscreen-button:hover {
    background-color: transparent; /* ★ [修改] */
    transform: scale(1.1); /* ★ 添加缩放反馈 */
}

/* ★★★ 继续播放按钮样式 ★★★ */
#resume-button {
    position: fixed;
    right: 25px; /* 与全屏按钮对齐 */
    /*
      全屏按钮(hover时): bottom: 70px
      全屏按钮高度: 60px
      间距: 10px
      总计: 70 + 60 + 10 = 140px
    */
    bottom: 130px; 
    
    /* (复制 #fullscreen-button 的外观样式) */
    width: 60px;
    height: 60px;
    background-color: transparent; /* 使用更醒目的背景 */
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 32px; /* 播放 (▶) 符号大小 */
    line-height: 62px; /* 微调垂直居中 */
    text-align: center;
    padding-left: 5px; /* 微调水平居中 */
    box-sizing: border-box;
    cursor: pointer;
    z-index: 998; /* 比 hover 按钮 (999) 低一点，但比 Ticker (997) 高 */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); */
    
    /* (它使用 .hidden 来显示/隐藏, 而不是 hover) */
    transition: opacity 0.3s ease, bottom 0.4s ease-out;
}

#resume-button:hover {
    background-color: transparent; /* ★ [修改] */
    transform: scale(1.1); /* ★  添加缩放反馈 */
}

/* (确保 .hidden 规则存在且有 !important) */
.hidden {
    display: none !important;
}


/* ★★★ 全局循环模式选择框样式 ★★★ */
#global-loop-mode-container {
    top: -100px;
    left: 25px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    border: 1px solid #444;
    transform: translateY(-100%); /* 初始向上移出视口 */
}
#global-loop-mode-container input {
    margin: 0 10px 0 0;
    width: auto;
    accent-color: #61dafb;
    flex-shrink: 0;
}
#global-loop-mode-container label {
    color: #ddd;
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

/* (可选) 鼠标直接悬停在气泡上时的效果 */
#open-modal-bubble:hover {
    background-color: transparent; /* ★ [修改] */
    transform: translateY(100%) scale(1.1);
}

/* 每一小段内部的“平滑增长”指示器 (这就是之前缺失的样式) */
.segment-progress-indicator {
    height: 100%; /* 占满父元素高度 */
    width: 0%; /* 初始宽度为 0 */
    background-color: #b5b5b5; /* 内部进度条的灰色 */
    border-radius: 0px;
    position: absolute; /* 绝对定位于父元素 (.progress-segment) 内部 */
    top: 0;
    left: 0;
    /* transition: width 0.1s linear; ★ 关键：平滑增长动画 ★ */
}

.progress-segment.completed .segment-progress-indicator {
    width: 100% !important; /* 强制填满 */
    /* (可选) 可以给已完成的填充条换个颜色 */
    /* background-color: rgba(255, 255, 255, 0.2); */ 
}

#segmented-progress-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px; /* 进度条高度 */
    background-color: transparent; /* 轨道背景 */
    z-index: 100;
    display: flex; /* 关键：让段落横向排列 */
    padding: 3px;
    box-sizing: border-box;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease-in-out;
}

#segmented-progress-container:not(.hidden) {
    opacity: 1; /* 不隐藏时可见 */
}

.progress-segment {
    /* ★ 移除 'flex-grow: 1'，让 'width' 属性生效 ★ */
    flex-grow: 0;
    flex-shrink: 0;
    
    height: 100%; /* 占满容器高度 */
    background-color: transparent; /* 未播放段落颜色 */
    margin: 0 ; /* 段落间距 */
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.3s ease-in-out; /* ★ [新增] 宽度变化动画 */
    position: relative; 
    overflow: hidden; 
}

.progress-segment:hover {
    background-color: rgba(130, 130, 130, 0.8); /* 悬停颜色 */
}

.progress-segment.completed {
    background-color: #b5b5b5; /* 已完成的颜色 (例如：灰色) */
    /* opacity: 0.7; (可选) 让完成的段落稍微暗一点 */
}

/* 当前播放段落的样式
.progress-segment.active {
    background-color: rgba(100, 100, 100, 0.6); 
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.6);
} */

/* ★ 可选：段落内部的播放进度指示器 ★ */
.progress-segment.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* JS会更新这个宽度 */
    /* background-color: rgba(255, 255, 255, 0.4); 半透明白色指示 */
    border-radius: 0;
    transition: width 0.1s linear; /* 平滑过渡 */
}


/* 确保 .hidden 规则适用于进度条容器 */
#segmented-progress-container.hidden {
    display: none !important;
}

/* 全屏加载器 (由 JS 添加/移除) */
#full-screen-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); /* 更暗 */
    z-index: 2000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: white;
}
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #fff;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px; /* 与文字间距 */
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#full-screen-loader p { font-size: 1.2em; }

.flag-icon {
    width: 1.2em; /* 控制旗帜大小 */
    height: auto;
    vertical-align: middle; /* 尝试垂直对齐 */
    margin-right: 0.5em; /* 和文字的间距 */
    /* object-fit: contain; */ /* SVG 通常不需要 */
}

/* 调整容器布局以优化对齐 */
.translation-item {
    display: inline-flex; /* 让图片和文字在 flex 容器中 */
    align-items: center;  /* 垂直居中对齐 */
    margin-right: 1.5em; /* 项之间的间距 */
    white-space: nowrap;
}

.sentence-translation {
    font-size: 0.8em;
    line-height: 1.6;
    color: var(--sentence-translations-color);
    margin-bottom: 0.5em; 
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}

.sentence-translation .flag-icon { vertical-align: middle; }

/* ★★★ 可点击句子单词样式 ★★★ */
.sentence-display.clickable .clickable-word {
    cursor: pointer !important; /* ★ 强制手型光标 ★ */
    display: inline-block;
    margin: 0 0.05em;
    padding: 0.1em 0.2em;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    /* ★ 强制接收鼠标事件 ★ */
    pointer-events: auto !important;
    /* ★ 确保它在视觉上不是透明的 ★ */
    opacity: 1 !important;
     /* ★ 添加一个明确的 z-index 试试 ★ */
     position: relative; /* z-index 需要 position */
     z-index: 11; /* 比 falling words (10) 高 */
}
/* ★ 强制 Hover 效果 ★ */
.sentence-display.clickable .clickable-word:hover {
    background-color: rgba(0, 123, 255, 0.9) !important; /* 更深的背景 */
    color: #fff !important; /* 强制白色 */
    border-bottom-style: solid !important;
}
/* ★ 强制高亮 Hover 效果 ★ */
.sentence-display.clickable .clickable-word.highlighted-keyword:hover {
    background-color: rgba(0, 123, 255, 0.9) !important;
    color: var(--highlighted-keyword-color) !important; /* 强制高亮色 */
}

/* 模态框头部样式，用于放置标题和关闭按钮 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #444; /* 分隔线 */
    padding-bottom: 10px;
    position: relative;
}
.modal-header h2 {
    margin: 0; /* 移除 h2 的默认外边距 */
    color: #61dafb;
    width: 100%;
    text-align: center;
}

/* ★★★ 选项卡导航条 ★★★ */
.modal-tabs {
    display: flex;
    justify-content: stretch; /* 均匀拉伸 */
    border-bottom: 1px solid #444; /* */
    margin-bottom: 20px;
}
.modal-tab-link {
    flex-grow: 1; /* 均分宽度 */
    padding: 12px 10px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #aaa;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px; /* 覆盖底部边框 */
}
.modal-tab-link:hover {
    color: #fff;
}
.modal-tab-link.active {
    color: #61dafb; /* 亮蓝色 */
    border-bottom-color: #61dafb;
}

/* ★★★ 选项卡内容面板 ★★★ */
.modal-tab-content {
    display: none; /* 默认隐藏所有面板 */
}
.modal-tab-content.active {
    display: block; /* 只显示激活的面板 */
    animation: fadeInContent 0.3s ease-out; /* (可选) 淡入效果 */
}
@keyframes fadeInContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* 关闭按钮 (X) */
.close-button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 2.5em; /* 增大 X */
    font-weight: 300;
    line-height: 1;
    padding: 0;
    margin: -10px -10px -10px 0; /* 调整位置 */
    cursor: pointer;
    transition: color 0.2s ease;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.close-button:hover {
    color: #fff;
}

.back-button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 2.5em; /* 匹配关闭按钮 */
    font-weight: 300;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    margin: -10px 0 -10px -10px;
    transition: color 0.2s ease;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.back-button:hover {
    color: #fff;
}

/* 单词本列表容器 */
#history-list-container {
    max-height: 60vh; /* 限制最大高度，使其可滚动 */
    overflow-y: auto;
    text-align: left;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 单词本中的每一项 */
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #3a3f4b; /* 列表项分隔线 */
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}
.history-item:hover {
    background-color: rgba(97, 218, 251, 0.1); /* 悬停时淡蓝色背景 */
}
.history-item:last-child {
    border-bottom: none; /* 最后一项没有分隔线 */
}

/* 单词本中的单词和语言 */
.history-word-details {
    display: flex;
    align-items: center;
    font-size: 1.1em;
}
.history-word-details .flag-icon {
    margin-right: 10px; /* 旗帜和单词的间距 */
    font-size: 1.5em; /* 增大旗帜 */
}
.history-word-text {
    font-weight: bold;
    color: #fff;
}
.history-word-translation {
    font-size: 0.8em;
    color: #aaa;
    margin-left: 8px;
    background: #333;
    padding: 2px 5px;
    border-radius: 3px;
}


/* 单词本中的观看次数 */
.history-view-count {
    font-size: 0.9em;
    color: #aaa;
    text-align: right;
}
.history-view-count strong {
    font-size: 1.2em;
    color: #61dafb; /* 突出显示次数 */
    margin-right: 4px;
}

/* ★  选项卡和切换按钮的包装器 ★ */
.history-tabs-header {
    display: flex;
    justify-content: space-between; /* 选项卡在左, 按钮在右 */
    align-items: center;
    border-bottom: 2px solid #444; /* */
    margin-bottom: 10px; /* */
}

/* ★ 3. 筛选器切换按钮 ★ */
.history-filter-button {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0; /* 防止按钮被压缩 */
}
.history-filter-button svg {
    width: 24px;
    height: 24px;
    pointer-events: none; /* 防止 svg 拦截点击 */
}
.history-filter-button:hover {
    background-color: #444;
    color: #fff;
}
/* 切换按钮的激活状态 */
.history-filter-button.active {
    background-color: #61dafb; /* 匹配激活的选项卡颜色 */
    color: #282c34; /* 深色图标 */
}

#history-language-tabs {
    display: flex;
    flex-wrap: wrap; /* */
    flex-grow: 1; /* ★ 占据所有可用空间 */
}

.history-lang-tab {
    padding: 10px 15px;
    cursor: pointer;
    color: #aaa;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* 关键：让活动选项卡的边框覆盖容器边框 */
    transition: color 0.2s ease, border-color 0.2s ease;
}
.history-lang-tab:hover {
    color: #fff;
}
/* 活动选项卡的样式 */
.history-lang-tab.active {
    color: #61dafb; /* 亮蓝色 (匹配 h2 标题) */
    border-bottom-color: #61dafb;
}




/* ★★★ 主要按钮样式 (用于升级) ★★★ */
.primary-button {
    width: 100%; /* 占满宽度 */
    padding: 12px 25px;
    border: none;
    background: #007bff; /* 醒目的蓝色 (与提交按钮相同) */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.primary-button:hover {
    background: #0056b3;
}

/* ★ 次要按钮样式 (用于“我的单词本”) ★ */
/* ★ 次要按钮样式 (用于“我的单词本”, "随机单词") ★ */
.secondary-button {
    background: #4a4a4a;
    color: #ddd;
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* margin-left: 10px; ★ 新增：给按钮之间加点间距 (第一个按钮除外) ★ */
}
/* (可选) 移除第一个次要按钮的左边距 */
#input-modal .modal-content form + .secondary-button {
    margin-left: 0;
}
.secondary-button:hover {
    background: #5a5a5a;
}

/* ★★★ 配额显示样式 ★★★ */
.quota-display {
    width: 90%;
    max-width: 300px; /* 与输入框保持一致 */
    margin: 20px auto 10px auto; /* 位于表单和升级按钮之间 */
    padding: 10px 15px;
    background: #3a3f4b; /* 稍亮的深色背景 */
    border: 1px solid #555;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95em;
    color: #ddd;
    box-sizing: border-box;
}
.quota-display .quota-premium {
    color: #28a745; /* 绿色 */
    font-weight: bold;
}
.quota-display .quota-free {
    color: #e0e0e0;
}
.quota-display .quota-free strong {
    color: #61dafb; /* 亮蓝色 */
    font-size: 1.1em;
}


/* ★ Echo Points 样式 (复用 .quota-display) ★ */
.points-display {
    width: 90%;
    max-width: 300px; /* 与输入框保持一致 */
    margin: 20px auto 10px auto;
    padding: 10px 15px;
    background: #3a3f4b; /* 稍亮的深色背景 */
    border: 1px solid #555;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95em;
    color: #ddd;
    box-sizing: border-box;
}

.points-display strong {
    color: #61dafb; /* 亮蓝色 (或您喜欢的任何高亮色) */
    font-size: 1.2em;
}

/* ★★★ 循环模式选择框样式 ★★★ */
.loop-mode-selector {
    margin-top: 15px;
    text-align: left;
    padding: 8px 12px;
    background: #333; /* 匹配输入框背景 */
    border: 1px solid #555; /* 匹配输入框边框 */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loop-mode-selector input {
    margin: 0 10px 0 0; /* 移除 input 默认的 margin */
    width: auto; /* 覆盖 input 默认的 90% 宽度 */
    accent-color: #61dafb; /* 勾选框颜色 */
    flex-shrink: 0;
}
.loop-mode-selector label {
    color: #ddd;
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1.2;
}


/* ★★★ 0-100% 文本样式 ★★★ */
#progress-percentage {
    position: fixed; /* 固定定位 */
    bottom: 0;       /* 位于底部 */
    left: var(--progress-percent, 0%);
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
    padding-right: 10px; /* 留出一点空隙 */
    white-space: nowrap; /* 确保文本不换行 */
    /* 确保它在进度条同一高度，但要考虑进度条高度 */
    height: 25px;    /* 匹配进度条容器的高度 */
    display: flex;
    align-items: center;

    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF; /* 白色文字 */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /* 轻微阴影，使其在亮色背景上可见 */
    z-index: 101; /* 确保在进度条 (100) 之上 */
    
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease-in-out;
}

/* 当它不隐藏时 (与进度条一起显示) */
#progress-percentage:not(.hidden) {
    opacity: 1;
}


/*原始动画 (仅用于掉落的单词) */
@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* 2. ★ 专用于中心元素的 keyframe ★ */
@keyframes scaleOutCentered {
    from {
        opacity: 1;
        /* ★ 关键：同时保持 居中 和 缩放 ★ */
        transform: translate(-50%, -50%) scale(1); 
    }
    to {
        opacity: 0;
        /* ★ 关键：同时保持 居中 和 缩放 ★ */
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* 掉落的单词使用旧的动画 */
.word-group.scaling-out {
    animation: scaleOut 0.5s ease-in forwards;
}

/* 中心文本 (text-display) 使用新的“居中”动画 */
#text-display.scaling-out {
    /* 动画将覆盖 的 transform, 
       所以我们必须使用包含 translate 的 keyframe
    */
    animation: scaleOutCentered 0.5s ease-in forwards;
}


/* ★★★ 输入框内嵌按钮样式 ★★★ */

/* 1. 容器：设置为相对定位，并保持原输入框的布局 */
.input-with-button {
    position: relative;
    width: 90%; /* 匹配旧的 input 宽度 */
    max-width: 300px; /* 匹配旧的 input 最大宽度 */
    margin: 8px auto 15px auto; /* ★ 顶部 8px, 底部 15px (同其他输入框) ★ */
}

/* 2. 输入框：宽度100%，右侧留出空间 */
/* (我们修改现有的 input[type="text"] 规则，使其更具体) */
.input-with-button input[type="text"] {
    width: 100%; /* 占满容器宽度 */
    padding-right: 50px; /* ★ 为右侧按钮留出空间 */
    
    /* ★ (覆盖) 重置 margin (因为容器在处理 margin) ★ */
    margin: 0; 
    /* (继承 .input-with-button 的 max-width) */
    max-width: none; 
    box-sizing: border-box; /* 确保 padding 在 100% 宽度内 */
}

/* 3. 按钮：绝对定位于右侧 */
.input-button {
    position: absolute;
    top: 50%; /* 垂直居中 */
    right: 5px; /* 距离右侧 5px */
    transform: translateY(-50%); /* 精确垂直居中 */
    
    /* (重置/设置按钮样式) */
    background: #555;
    color: white;
    border: none;
    border-radius: 5px;
    width: 40px; /* 固定宽度 */
    height: 35px; /* 高度 (略小于输入框) */
    font-size: 1.5em; /* 骰子图标大小 */
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 35px; /* 确保图标居中 */
    transition: background-color 0.2s ease;
}

.input-button:hover {
    background: #61dafb; /* 悬停时变亮 */
}

/* ★★★ 移动端响应式调整 ★★★ */
@media (max-width: 600px) {
    
    /* 缩小所有模态框的左右内边距 */
    .modal-content {
        padding: 25px 20px; /* */
        width: 95%; /* 在手机上可以更宽一点 */
    }

    /* 确保表单元素在模态框内 100% 宽度 */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select#source-language,
    select#primary-translation-language,
    .language-checkbox-container,
    .input-with-button {
        max-width: none; /* (移除桌面端的 300px 限制) */
        width: 100%;     /* (让它占满父容器的 100%) */
    }

    /* (可选) 缩小标题字体大小 */
    .modal-content h2 {
        font-size: 1.5em; /* */
    }
}


/* ★★★ 自动补全建议框样式 ★★★ */

/* 1. 验证消息 (用于 "不在单词库中") */
.validation-message {
    font-size: 0.85em;
    color: var(--error-color, #FF4136); /* */
    text-align: left;
    margin: 5px 0 0 0; /* 在输入框下方显示 */
    padding-left: 5px;
}
.validation-message.hidden {
    display: none;
}

/* 2. 建议框容器 */
.suggestions-container {
    position: absolute;
    top: 100%; /* 紧贴输入框下方 */
    left: 0;
    right: 0;
    z-index: 1001; /* 确保在其他模态框内容之上 */
    background: #3a3f4b; /* */
    border: 1px solid #555; /* */
    border-top: none; /* 移除顶部边框，使其与输入框融合 */
    border-radius: 0 0 6px 6px;
    max-height: 200px; /* 限制高度 */
    overflow-y: auto;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

/* 3. 建议项 */
.suggestion-item {
    padding: 10px 15px;
    color: #ddd;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #555;
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover {
    background-color: #61dafb; /* */
    color: #282c34; /* */
}
/* (用于高亮匹配的字母) */
.suggestion-item strong {
    color: #fff;
    background: none;
    font-weight: bold;
}
.suggestion-item:hover strong {
    color: #282c34;
}

/* 4. 确保 "生成视频" 按钮 在禁用时显示正确样式 */
button[type="submit"]:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
}


/* 单词本排序按钮容器 */
#wordbook-sort-controls {
    /* (它现在是可切换的) */
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    gap: 8px; /* */
    
    /* [新增] 添加面板样式 */
    margin: 0 5px 15px 5px; /* 上0, 左右5, 下15 */
    padding: 12px;
    background: #222; /* 比模态框背景稍暗 */
    border-radius: 8px;
    border: 1px solid #444;
}

.hidden {
    display: none !important; /* */
}

#wordbook-sort-controls span {
    color: #aaa;
    font-size: 0.9em;
    font-weight: bold;
}

/* 排序按钮样式 */
.sort-button {
    background: #4a4a4a; /* 次要按钮颜色 */
    color: #ddd;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sort-button:hover {
    background: #5a5a5a;
}

/* 排序按钮激活状态 */
.sort-button.active {
    background-color: #61dafb; /* 亮蓝色 (匹配选项卡) */
    color: #282c34; /* 深色文字 */
}

/* ★ 排序箭头样式 ★ */
.sort-button .sort-arrow {
    display: inline-block;
    width: 1.2em; /* 固定宽度，防止按钮在箭头出现/消失时跳动 */
    text-align: left;
    color: #61dafb; /* 匹配激活状态的颜色 */
    
    /* 默认隐藏箭头 */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ★ 只在激活的按钮上显示箭头 ★ */
.sort-button.active .sort-arrow {
    opacity: 1; /* */
}

/* ★ 筛选器标签和分隔符的样式 ★ */
#wordbook-sort-controls .sort-separator {
    color: #444;
    font-size: 1.2em;
    margin: 0 5px;
}

#wordbook-sort-controls label {
    color: #aaa;
    font-size: 0.9em;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
}

/* ★ 下拉筛选器样式 ★ */
.history-time-filter-select {
    /* (复用 .sort-button 的外观) */
    background: #4a4a4a;
    color: #ddd;
    border: none;
    padding: 5px 8px; /* 比按钮小一点 */
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    
    /* (确保它在暗色背景下可用) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* (添加一个自定义的下拉箭头) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23DDDDDD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.9%200-5-1.8-9.2-5.4-12.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: .65em auto;
    padding-right: 25px; /* 为箭头留出空间 */
}

.history-time-filter-select:hover {
    background: #5a5a5a; /* */
}

/* 单词本中的观看次数 */
.history-view-count {
    font-size: 0.9em;
    color: #aaa;
    text-align: right;
}
.history-view-count strong {
    font-size: 1.2em;
    color: #61dafb; /* 突出显示次数 */
    margin-right: 4px;
}

/* 单词本统计数据（次数和时间）的容器 */
.history-word-stats {
    text-align: right; /* 整体右对齐 */
    flex-shrink: 0; /* 防止在高分辨率下被压缩 */
    margin-left: 10px; /* 与左侧单词详情保持距离 */
}

/* 上次查看时间 */
.history-last-viewed {
    font-size: 0.8em;
    color: #888;
    margin-top: 4px; /* 在“次数”下方显示 */
}


/* ★★★ 测验模态框样式 ★★★ */

#quiz-word-display {
    font-size: clamp(2.5em, 8vw, 4em); /* 大字体 */
    font-weight: bold;
    color: #61dafb; /* 亮蓝色 */
    margin: 40px 0;
    text-align: center;
}

#quiz-options-container {
    display: flex;
    flex-direction: column; /* 垂直排列按钮 */
    gap: 15px; /* 按钮间距 */
    margin-top: 20px;
}

.quiz-option-button {
    width: 100%;
    padding: 18px 25px;
    border: 2px solid #555; /* 边框 */
    background: #333; /* 暗色背景 */
    color: #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.quiz-option-button:not(:disabled):hover {
    background: #444;
    border-color: #61dafb;
}

.quiz-option-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ★ 按钮点击时的状态 ★ */
.quiz-option-button.correct {
    background-color: #28a745; /* 绿色 */
    border-color: #28a745;
    color: white;
    transform: scale(1.02);
}
.quiz-option-button.incorrect {
    background-color: #dc3545; /* 红色 */
    border-color: #dc3545;
    color: white;
    opacity: 0.7; /* 非选中项变暗 */
}
.quiz-option-button.disabled-wrong {
    /* (用于在显示正确答案时，禁用其他错误选项) */
    opacity: 0.3;
}


/* ★ 测验状态消息 ("正确!" / "错误!") ★ */
#quiz-status-message {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}
#quiz-status-message.correct {
    color: #28a745; /* 绿色 */
    background-color: rgba(40, 167, 69, 0.1);
}
#quiz-status-message.incorrect {
    color: #dc3545; /* 红色 */
    background-color: rgba(220, 53, 69, 0.1);
}


/* ★★★ 填词游戏模态框 ★★★ */

#fill-progress-counter {
    text-align: right;
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 20px;
}

#fill-sentence-display {
    font-size: clamp(1.4em, 4vw, 2em); /* 比猜词游戏小一点 */
    color: #ddd;
    line-height: 2;
    margin: 30px 0;
    text-align: center;
}

/* ★ 新的“行内”答案格子 ★ */
.fill-slot-inline {
    display: inline-block;
    width: 30px; /* 略窄以适应句子 */
    height: 35px; /* 略矮 */
    border-bottom: 3px solid #61dafb; /* 蓝色下划线 */
    font-size: 1.0em; /* 匹配句子字体大小 */
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 35px;
    text-transform: uppercase;
    margin: 0 3px; /* 字母间距 */
    vertical-align: middle; /* 与文本底部对齐 */
    transition: transform 0.2s ease;
}

/* (当格子被填充时的动画) */
.fill-slot-inline.filled {
    transform: scale(1.1);
}

/* 填空输入框 */
#fill-answer-input {
    width: 100%;
    padding: 15px;
    border: 2px solid #555;
    background: #333;
    color: #fff;
    border-radius: 8px;
    font-size: 1.1em;
    text-align: center;
    box-sizing: border-box; /* 确保 padding 正确 */
}
#fill-answer-input:focus {
    border-color: #61dafb;
    outline: none;
}

/* 填空按钮容器 */
.fill-buttons-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
/* 填空提交按钮 */
#fill-submit-button {
    flex-grow: 2; /* 占 2/3 宽度 */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;
}
/* 填空跳过按钮 */
#fill-skip-button {
    flex-grow: 1; /* 占 1/3 宽度 */
    background-color: #555;
    color: #ddd;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;
}

/* 填空状态消息 ("正确!" / "错误!") */
#fill-status-message {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    border-radius: 5px;
}
#fill-status-message.correct {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}
#fill-status-message.incorrect {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}
#fill-status-message.skipped {
    color: #ffc107; /* 黄色 */
    background-color: rgba(255, 193, 7, 0.1);
}

/* ★ [新增] 字母库 ★ */
#fill-letter-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
    padding: 10px;
    background: #222;
    border-radius: 8px;
}

/* ★ [新增] 单个字母按钮 ★ */
.letter-button {
    width: 40px;
    height: 40px;
    background: #555;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}
.letter-button:hover:not(:disabled) {
    background: #61dafb;
    color: #222;
    transform: scale(1.1);
}
.letter-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ★ [修改] 填词按钮容器 (按钮平分) ★ */
.fill-buttons-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
#fill-skip-button,
#fill-clear-button {
    flex-grow: 1; /* 两个按钮平分宽度 */
    background-color: #555;
    color: #ddd;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

#fill-skip-button:hover,
#fill-clear-button:hover {
    background-color: #666;
}

/* ★ 移除旧的输入框和提交按钮 ★ */
#fill-answer-input, #fill-submit-button {
    display: none; 
}

/* ★★★ 视频关闭按钮 ★★★ */
#close-video-button {
    position: fixed;
    top: -100px; /* ★ 1. 初始隐藏在屏幕顶部 */
    right: 25px; /* ★ 2. 定位在右上角 */
    
    /* (复制 #fullscreen-button 的外观) */
    width: 60px; 
    height: 60px;
    background-color: transparent;
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 32px; /* 让 '×' 符号大一点 */
    font-weight: bold;
    line-height: 58px; /* 微调垂直居中 */
    text-align: center;
    cursor: pointer;
    z-index: 999; /* 与其他悬浮按钮保持同一层 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* (它依赖 .hidden-until-hover 的 transition) */
}

/* ★ 3. 定义它在 hover-active 时的可见位置 */
body:hover #close-video-button.hover-active {
    top: 25px; /* ★ 移动到屏幕内可见 */
}

#close-video-button:hover {
     background-color: transparent; /* ★ [修改] */
     transform: scale(1.1); /* ★ 添加缩放反馈 */
}

/* ★★★ 游戏选择 ★★★ */
/* 1. 父容器 (Flex 布局) */
#game-selection-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998; /* 高于 Ticker (997) */
    
    display: flex;
    gap: 6vw; /* ★ [修改] 间距也使用响应式 */

    /* ★ 默认横向并排 (row) ★ */
    flex-direction: row; 
    
    /* ... (hidden 样式保持不变) ... */
    transition: opacity 0.3s ease;
}
#game-selection-container.hidden {
    opacity: 0;
    pointer-events: none;
    display: flex; 
}


/* 2. 通用卡片样式 (.game-card) */
.game-card {
    /* 1. 使用视口宽度 (vw) 作为基础 */
    width: 22vw;
    /* 2. 防止在手机上太小 */
    min-width: 130px; 
    /* 3. 防止在 4K 屏上太大 */
    max-width: 220px; 

    aspect-ratio: 1 / 1; /* 保持正方形 */
    
    /* ... (其他卡片样式保持不变) ... */
    border: 3px solid rgba(224, 214, 123, 0.8); /* 80% 透明度的白色 */

    /* ★ 添加一个黑色的 "羽化" 阴影 ★ */
    /* 格式: [旧的装饰性阴影], [新的功能性阴影] */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 
                0 0 50px 45px #000; /* (0模糊, 40px扩散, 30px范围, 纯黑) */

    border-radius: 20px; 
    color: white;
    font-size: clamp(1.1em, 1.8vw, 1.5em);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease; /* ★ 修改：所有属性都平滑过渡 */
    display: flex;
    justify-content: center;
    /* ★ 1. [修改] 将文本对齐到 *底部* ★ */
    align-items: flex-end; 
    
    text-align: center;

    /* ★ 3. [修改] 设置按比例的内边距 ★ */
    padding-left: 15px;
    padding-right: 15px;
    
    /* ★ 4. [核心] 
       使用百分比设置底部内边距。
       (20% 是指 *父元素宽度* 的 20%，
       因为卡片是正方形，这相当于高度的 20%) 
    */
    padding-bottom: 1%; 

    box-sizing: border-box;
}


.game-card:hover {
    transform: scale(1.05);
    /* ★ 悬停时也保持阴影 ★ */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 
                0 0 50px 45px #000;
}

/* 3. & 4. ★ 为卡片添加背景图片 ★ */

#start-quiz-button {
    /* 1. 添加图片和黑色遮罩 (0.4 = 40% 黑) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('input_img.png');
    /* 2. 确保图片填满 */
    background-size: cover;
    background-position: center;
}

#start-quiz-button:hover {
    /* 悬停时，遮罩变亮 (0.1 = 10% 黑) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('input_img.png');
}

#open-output-mode-button {
    /* 1. 添加图片和黑色遮罩 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('output_img.png');
    /* 2. 确保图片填满 */
    background-size: cover;
    background-position: center;
}

#open-output-mode-button:hover {
    /* 悬停时，遮罩变亮 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('output_img.png');
}

/* 5. ★ [核心] 响应式布局 (基于 max-width) ★ */

/* ★ 仅在屏幕宽度小于 600px 时 (例如手机)，才改为垂直堆叠 */
@media (max-width: 600px) {
    #game-selection-container {
        flex-direction: column; /* 垂直堆叠 */
        gap: 20px; /* 竖排时间距可以小一点 */
        top: 40%;
    }

    .game-card {
        /* ★ 在手机上，让卡片宽度更可控 */
        width: 60vw; /* 视口宽度的 60% */
        max-width: 200px; /* 最大 200px */
    }
}


/* ★★★ “输入选择”模态框的按钮 ★★★ */
.modal-button-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 按钮间距 */
    margin-top: 20px;
}

.modal-full-button {
    width: 100%;
    padding: 20px 25px; /* 更大的按钮 */
    border: 2px solid #555;
    background: #333;
    color: #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em; /* 更大的字体 */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modal-full-button:hover {
    background: #444;
    border-color: #61dafb;
}


/* ★★★ [修复] 学习统计 (使用与设置按钮 相同的逻辑) ★★★ */
#learning-stats-container {
    position: fixed;
    top: -100px; /* ★ 1. [修改] 初始隐藏在屏幕*上方* */
    left: 20px;
    z-index: 998; 
    
    background: rgba(0, 0, 0, 0.5); 
    padding: 8px 15px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #444;
    color: #ccc;
    font-size: 0.9em;
    font-weight: bold;
    
    /* ★ 强制 3D 硬件加速 (空 Z 变换) ★ */
    transform: translateZ(0);
    will-change: transform, opacity, top;

    /* ★ 2. [修改] 监控 'top' 和 'opacity' */
    transition: opacity 0.4s ease-out, top 0.4s ease-out;
    
    /* ★ 3. [修改] 确保 .hidden-until-hover 基础样式生效 */
    opacity: 0;
    pointer-events: none;
}

/* ★ 4. [修改] 当激活时，将统计信息移回屏幕内 ★ */
body:hover #learning-stats-container.hover-active {
    top: 20px; /* ★ 移动到屏幕内可见 */
    opacity: 1;
    pointer-events: auto;
}


/* ★★★ 视频播放结束模态框 ★★★ */

/* 1. 覆盖 .modal-overlay (让它变暗，但允许点击) */
#post-video-overlay {
    background: rgba(0, 0, 0, 0.7); /* 半透明灰色 */
    z-index: 1001; /* 必须高于进度条 (101) 和视频 (10) */
}

/* 2. 按钮和文本的容器 */
.post-video-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 90%;
    max-width: 400px;
    
    /* 确保它在 .modal-content 之上 (用于点击) */
    position: relative; 
    z-index: 2; 
}

/* 3. 复用 .modal-full-button 样式 (已存在) */
/* (我们让 #play-next-button 也使用这个类) */
#play-next-button {
    background-color: #007bff; /* 蓝色 */
}
#play-next-button:hover {
    background-color: #0056b3;
}

/* 4. 倒计时文本 */
#post-video-timer {
    color: #ccc;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    text-shadow: 0 0 5px #000;
}


/* ★★★ [新增] 图片栈 (Step 8) ★★★ */
/* * 这是我们动态创建的图片层
 * 它被添加在 #slideshow 容器内部
 */
#slideshow .image-stack-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 样式
       (复制自 #slideshow)
     */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* * 过渡效果：
     * 我们将通过 JS 添加 .is-hidden 类
     * (这会触发 0.5 秒的淡出)
     */
    opacity: 1;
    transition: opacity 0.5s ease-in-out; 
}

/* * 当我们给一个图层添加 .is-hidden 类时，
 * 它会淡出，并变得不可点击
 */
#slideshow .image-stack-layer.is-hidden {
    opacity: 0;
    pointer-events: none; /* 让它不可交互 */
}

/* ★★★ 播放速度滑块样式 ★★★ */

/* 1. 容器 */
.playback-speed-container {
    margin: 20px auto 15px auto;
    width: 90%;
    max-width: 300px;
    box-sizing: border-box;
    text-align: left;
}

/* 2. 标签 (复用 .form-label) */
.playback-speed-container .form-label {
    width: 100%;
    max-width: none;
    margin: 0 0 10px 0;
    padding: 0;
}

/* 3. 滑块和值标签的包装器 */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 4. 滑块 (input[type="range"]) */
#playback-speed-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #444;
    border-radius: 5px;
    outline: none;
    transition: opacity .2s;
    cursor: pointer;
}

/* 5. 滑块的值 (1.0x) */
#playback-speed-value {
    font-size: 1.1em;
    font-weight: bold;
    color: #61dafb;
    width: 45px; /* 固定宽度防止抖动 */
    text-align: right;
    flex-shrink: 0;
}

/* --- 跨浏览器滑块拇指 (Thumb) 样式 --- */
#playback-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #61dafb;
    cursor: pointer;
}

#playback-speed-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #61dafb;
    cursor: pointer;
    border: none; /* 移除 Firefox 默认边框 */
}

/* ★ 隐藏所有目标的 WebKit (Chrome/Safari) 滚动条 ★ */
.modal-content::-webkit-scrollbar,
.language-checkbox-container::-webkit-scrollbar,
#history-list-container::-webkit-scrollbar {
    display: none;
}


/* --- 1. 菜单手风琴 (Accordion) --- */
.accordion-header {
    background-color: #3a3f4b;
    color: #ddd;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.accordion-header:hover { background-color: #4a4f5b; }
.accordion-header::after { content: '＋'; color: #61dafb; font-weight: bold; font-size: 1.2em; transition: transform 0.3s ease; }
.accordion-header.active::after { content: '−'; }
#subscription-settings-button::after { content: '→'; }
#subscription-settings-button.active::after { content: '→'; }

.accordion-content {
    background: #2c3038;
    border-radius: 0 0 5px 5px;
    padding: 15px 20px 20px 20px;
    margin-top: -5px;
    border: 1px solid #3a3f4b;
    border-top: none;
    overflow: hidden;
}
.accordion-content .form-label { margin-top: 5px; }
.accordion-content .playback-speed-container { margin-top: 10px; }


/* --- 2. PWA 安装提示条 --- */
#pwa-install-prompt {
    position: fixed;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: 998;
    background: #282c34;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px 50px 15px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    font-size: 0.9em;
    opacity: 0;
    transition: bottom 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
#pwa-install-prompt:not(.pwa-prompt-hidden) {
    bottom: 20px;
    opacity: 1;
    pointer-events: auto;
}
.pwa-share-icon { width: 1em; height: 1em; fill: #ccc; margin: 0 4px; vertical-align: middle; }
#pwa-prompt-close {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    background: none; border: none; color: #888;
    font-size: 2.5em; font-weight: 300; line-height: 1; padding: 0 5px;
    cursor: pointer; transition: color 0.2s ease;
}
#pwa-prompt-close:hover { color: #fff; }


/* --- 3. 贪吃蛇优化 (防抖动文本 & 十字键) --- */
/* 修复翻译文本抖动 */
#snake-translation-display {
    height: 60px; /* 绝对高度固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(14px, 4.5vw, 24px);
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0 15px;
}

/* 十字键控制器 */
#snake-mobile-controls {
    position: static; transform: none;
    margin-top: 15px; margin-bottom: 5px;
    width: 100%; display: flex; justify-content: center;
    z-index: 5; pointer-events: auto;
}
.d-pad-grid {
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 50px 50px;
    gap: 5px;
}
.d-pad-btn {
    width: 100%; height: 100%;
    border-radius: 10px; border: none;
    background: #444; color: #fff;
    font-size: 1.5em; cursor: pointer;
    box-shadow: 0 4px 0 #222;
    transition: transform 0.1s, box-shadow 0.1s;
    user-select: none; -webkit-user-select: none;
}
.d-pad-btn:active {
    transform: translateY(4px); box-shadow: 0 0 0 #222;
    background-color: #61dafb; color: #000;
}
#snake-up { grid-column: 2; grid-row: 1; }
#snake-left { grid-column: 1; grid-row: 2; }
#snake-down { grid-column: 2; grid-row: 2; }
#snake-right { grid-column: 3; grid-row: 2; }

/* 手机上限制贪吃蛇 Canvas 高度 */
@media (max-width: 600px) {
    #snake-canvas {
        max-height: 45vh;
        width: auto;
        max-width: 100%;
    }
}



/* --- 5. 贪吃蛇菜单修复 --- */
/* 1. 找回 .menu-btn (通用菜单按钮样式，贪吃蛇和五子棋选词都用它) */
.menu-btn {
    width: 100%;
    max-width: 280px;
    padding: 15px;
    background: #333;
    border: 2px solid #555;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto; /* 居中 */
}
.menu-btn:hover {
    background: #444;
    border-color: #61dafb;
    transform: translateY(-2px);
}
.menu-btn.loop-mode {
    border-color: #d7d875;
}

/* 2. 找回贪吃蛇的覆盖层样式 (snake-overlay-base) */
/* 之前误删了，导致它没有绝对定位，所以“空了一大块”且不遮挡 */
.snake-overlay-base {
    position: absolute; /* 关键：覆盖在画布上 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* 深黑背景，遮挡旧游戏 */
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.snake-overlay-base.hidden {
    display: none !important;
}

/* 3. 贪吃蛇菜单内容布局 */
.snake-menu-content {
    text-align: center;
    width: 100%;
}
.snake-menu-content h3 {
    color: #61dafb;
    margin-bottom: 30px;
    font-size: 1.8em;
}
.snake-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}



/* --- 4. 输出模式按钮背景图修复 --- */
#open-output-mode-button {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('output_img.png');
    background-size: cover;
    background-position: center;
    background-color: #333; 
}
#open-output-mode-button:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('output_img.png');
}
/* =========================================
   ★ 五子棋 (Gomoku) 完整样式模块 (最终版) ★
   ========================================= */

/* --- 1. 模态框容器 --- */
.gomoku-modal-content {
    width: 95vw;
    max-width: 600px;
    height: 90vh;        /* 固定高度 */
    max-height: 800px;
    
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;    /* 禁止外层滚动 */
    position: relative;
    background: #282c34; /* 确保背景色 */
}

/* --- 2. 游戏主区域 (垂直 Flex 布局) --- */
#gomoku-game-area {
    flex: 1;             /* 占满模态框剩余高度 */
    display: flex;
    flex-direction: column;
    gap: 8px;            /* 元素间距 */
    min-height: 0;       /* ★ 关键：允许 Flex 子项收缩 */
    width: 100%;
    position: relative;  /* 作为绝对定位覆盖层的锚点 */
    overflow: hidden;
}

/* --- 3. 顶部状态栏 --- */
.gomoku-status-bar {
    flex-shrink: 0;      /* 禁止压缩 */
    width: 100%;
    display: flex;
    justify-content: center; /* 居中对齐 */
    align-items: center;
    gap: 20px;
    position: relative;
    margin-bottom: 5px;
    font-size: 0.9em;
}

/* 左上角的查看列表按钮 */
#gomoku-view-list-btn {
    position: absolute;
    left: 0;
    font-size: 1.2em;
    padding: 5px 10px;
    background: #444;
    border: 1px solid #666;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

/* 玩家/AI 标签 */
.gomoku-player-info {
    padding: 4px 12px;
    border-radius: 15px;
    background: #333;
    color: #888;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s;
}
.gomoku-player-info.active { background: #61dafb; color: #000; box-shadow: 0 0 8px rgba(97, 218, 251, 0.5); }
#gomoku-ai-turn.active { background: #ff4757; color: #fff; box-shadow: 0 0 8px rgba(255, 71, 87, 0.5); }

/* 提示词区域 */
#gomoku-target-words {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
    color: #d7d875;
    font-size: 1em;
    min-height: 1.5em;
    white-space: normal;
    line-height: 1.2;
}

/* --- 4. 棋盘容器 (自适应) --- */
.gomoku-board-wrapper {
    flex: 1;             /* 抢占所有剩余高度 */
    width: 100%;
    min-height: 150px;   /* 最小高度保护 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: #eebb77;
    border: 4px solid #5d4037;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 棋盘网格 */
#gomoku-board {
    aspect-ratio: 1 / 1; /* 锁死正方形 */
    height: 100%;        /* 尝试撑满高度 */
    width: auto;         /* 宽度自适应 */
    max-width: 100%;     /* 但不超过父容器宽度 */
    
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    
    background-image: 
        linear-gradient(#5d4037 1px, transparent 1px),
        linear-gradient(90deg, #5d4037 1px, transparent 1px);
    background-size: calc(100% / 12) calc(100% / 12);
    background-position: center; 
}

/* 棋子 */
.gomoku-cell { position: relative; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 1; }
.gomoku-piece { 
    width: 85%; height: 85%; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 0.7em; font-weight: bold; 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
}
.gomoku-piece.player { background: #000; color: #fff; border: 1px solid #444; }
.gomoku-piece.ai { background: #fff; color: #000; border: 1px solid #ccc; }

/* --- 5. 底部键盘区 --- */
#gomoku-letter-picker {
    flex-shrink: 0;
    width: 100%;
    max-height: 40%;     /* 限制最大高度 */
    overflow-y: auto;
    
    background: rgba(0,0,0,0.2);
    padding: 10px 5px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    
    scrollbar-width: none; -ms-overflow-style: none;
}
#gomoku-letter-picker::-webkit-scrollbar { display: none; }

#gomoku-letters-container { display: flex; flex-direction: column; gap: 4px; }
.letter-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.letter-chip {
    padding: 8px 10px; background: #333; border: 1px solid #555;
    color: #fff; border-radius: 4px; cursor: pointer;
    font-weight: bold; font-size: 0.9em; user-select: none;
}
.letter-chip.selected { background: #61dafb; color: #000; border-color: #61dafb; }
.letter-chip:hover { background: #555; }


/* --- 6. 通用覆盖层 (开始菜单、结算面板等) --- */
.gomoku-overlay-base,
#gomoku-overlay, 
#gomoku-start-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* 深黑背景 */
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

/* 菜单内容 */
.gomoku-menu-content { width: 100%; text-align: center; color: #fff; }
.gomoku-menu-content h3 { color: #61dafb; margin-bottom: 20px; font-size: 1.5em; }

.gomoku-menu-buttons { 
    display: flex; flex-direction: column; gap: 15px; 
    align-items: center; width: 100%; padding: 0 20px; box-sizing: border-box; 
}

/* 菜单大按钮 */
.gomoku-menu-btn {
    width: 100%; max-width: 280px; padding: 15px;
    background: #333; border: 2px solid #555; border-radius: 10px;
    color: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    transition: all 0.2s; margin: 0 auto;
}
.gomoku-menu-btn:hover { background: #444; border-color: #61dafb; transform: translateY(-2px); }
.gomoku-menu-btn.loop-mode { border-color: #d7d875; }
.btn-title { font-size: 1.1em; font-weight: bold; margin-bottom: 4px; }
.btn-desc { font-size: 0.8em; color: #aaa; }

/* 结算面板 */
.gomoku-overlay-content { text-align: center; color: white; }
#gomoku-overlay-icon { font-size: 3em; margin-bottom: 10px; }
.gomoku-overlay-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
#gomoku-replay-btn, #gomoku-confirm-btn {
    padding: 10px 20px; border: none; border-radius: 5px;
    cursor: pointer; font-weight: bold; color: white; font-size: 1em;
}
#gomoku-replay-btn { background: #007bff; }
#gomoku-confirm-btn { background: #28a745; }


/* --- 7. 选词面板 (Selection Panel) - 核心修复 --- */
#gomoku-selection-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    background: #222;
    
    /* 布局：顶部对齐，垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    padding: 15px;
    box-sizing: border-box;
}

.selection-content {
    width: 100%;
    height: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 禁止内容溢出 */
}

.selection-counter { 
    flex-shrink: 0; 
    color: #61dafb; font-weight: bold; margin-bottom: 10px; text-align: center; 
}
.selection-content h3 { 
    flex-shrink: 0; text-align: center; margin-top: 0; 
}

/* 工具栏 (搜索框 + 筛选) */
.selection-tools {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}
.selection-search-compact {
    flex: 1; padding: 8px 10px; background: #333; border: 1px solid #555;
    color: #fff; border-radius: 5px; margin: 0;
    -webkit-appearance: none; appearance: none;
}
.selection-filter-select {
    width: 110px; background: #4a4a4a; color: #ddd; border: none;
    padding: 5px 10px; border-radius: 5px; font-size: 0.9em; font-weight: bold;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23DDDDDD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.9%200-5-1.8-9.2-5.4-12.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 8px top 50%; background-size: .65em auto; padding-right: 25px;
}
.selection-random-btn {
    width: 40px; flex-shrink: 0; background: #4a4a4a; color: #fff;
    border: none; border-radius: 5px; font-size: 1.2em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}

/* 候选词列表 (可滚动区域) */
.candidate-list {
    flex: 1;             /* 占据剩余所有高度 */
    overflow-y: auto;    /* 开启内部滚动 */
    min-height: 0;       /* 防止溢出 */
    
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    
    border: 1px solid #444;
    padding: 10px;
    border-radius: 5px;
    background: #1a1a1a;
    margin-bottom: 10px;
}
.candidate-chip {
    padding: 6px 12px; background: #333; border-radius: 15px;
    cursor: pointer; border: 1px solid #555; 
    color: #fff; /* 确保文字可见 */
    font-size: 0.9em;
}
.candidate-chip.selected { background: #61dafb; color: #000; border-color: #fff; }

/* 底部操作区 */
.selection-actions {
    flex-shrink: 0; /* 禁止被压缩 */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 复用 gomoku-menu-btn 样式，但微调宽度 */
#gomoku-selection-panel .gomoku-menu-btn {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin: 0;
    flex-direction: row; /* 文字水平居中 */
    justify-content: center;
}
#gomoku-start-game-btn { background-color: #007bff; border-color: #007bff; }
#gomoku-start-game-btn:disabled { background-color: #555; border-color: #555; color: #888; cursor: not-allowed; }


/* --- 8. 单词列表/倒计时面板 --- */
#gomoku-word-list-panel {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 25; background: rgba(0,0,0,0.95);
    display: flex; justify-content: center; align-items: center;
}
.word-list-content {
    width: 90%; max-width: 500px; max-height: 90%;
    display: flex; flex-direction: column;
    text-align: center;
}
#gomoku-countdown { color: #ff4757; font-size: 1.5em; }
.word-list-grid {
    flex: 1; display: flex; gap: 10px; overflow: hidden; margin-top: 15px;
}
.word-column {
    flex: 1; background: #222; padding: 10px; border-radius: 8px;
    display: flex; flex-direction: column; overflow: hidden;
}
.word-column h4 { color: #aaa; border-bottom: 1px solid #444; padding-bottom: 5px; margin-top: 0; flex-shrink: 0; }
.word-column ul {
    flex: 1; overflow-y: auto; padding: 0; margin: 0; list-style: none;
}
.word-column li { padding: 2px 0; color: #ccc; font-size: 0.9em; }