@charset "utf-8";
/* 页面基础 */
body {
    font-family: "PingFang SC", "Helvetica", "Arial", sans-serif;
    background-color: #f6f7f9;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* 容器左右分栏 */
.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
    gap: 20px;
}

/* 左侧主内容 */
.left-column {
    flex: 3;
    min-width: 300px;
}


/* 文章标题 */
.article-header h1 {
    font-size: 28px;
    color: #3e5f58; /* 深绿色 */
    margin-bottom: 5px;
}

.article-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
}



/* 句子模块 */
.sentences-section h2,
.interactive-game h2,
.downloads h2,
.ai-analysis h2,
.vocab-tips h2 {
    font-size: 22px;
    color: #386fa4; /* 深蓝色 */
    border-bottom: 2px solid #a9cce3;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.sentence-block {
    background-color: #f0f8ff; /* 浅蓝色 */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.sentence-en {
    font-weight: bold;
    color: #1c3d5a;
}

.sentence-cn {
    margin-top: 5px;
    color: #4a636f;
}

.sentence-tags span {
    display: inline-block;
    background-color: #d7f0e8; /* 淡绿色 */
    color: #3e5f58;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 12px;
}

/* 按钮样式 */
button, .btn-check {
    display: inline-block;
    padding: 8px 14px;
    background-color: #a1cfff; /* 柔和蓝 */
    color: #1c3d5a;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

button:hover, .btn-check:hover {
    background-color: #78b4f3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 互动小游戏 */
.interactive-game {
    background: linear-gradient(135deg, #f9f1f0, #fce8e6); /* 粉橙渐变 */
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.word {
    background-color: #d9e8ff; /* 淡蓝 */
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s all ease;
}

.word:hover {
    background-color: #a1cfff;
    transform: translateY(-2px);
}

.sentence-target {
    min-height: 50px;
    border: 2px dashed #78b4f3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c3d5a;
    margin-top: 10px;
    background-color: #f0f8ff;
}

/* 下载模块 */
.downloads {
    background-color: #fff6e6; /* 淡橙色 */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.downloads ul {
    list-style: none;
    padding: 0;
}

.downloads li {
    margin-bottom: 8px;
}

.downloads a {
    text-decoration: none;
    color: #a85c3d;
    background-color: #fce8d6;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}

.downloads a:hover {
    background-color: #f9d9b3;
}

/* AI解析 & 词汇小贴士 */
.ai-analysis {
    background-color: #e7e6f9; /* 淡紫色 */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vocab-tips {
    background-color: #f0fdf5; /* 淡绿 */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


/* 右侧侧边栏 */
.right-column {
    flex: 1;
    min-width: 200px;
}

/* 右侧侧边栏 */
.right-column h3 {
    font-size: 18px;
    color: #386fa4; /* 深蓝 */
    border-bottom: 1px solid #a9cce3;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 右侧通用模块 */
.right-column .qrcode,
.right-column .related-sentences,
.right-column .quotes-section {
    padding: 15px 18px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* 二维码模块 */
.right-column .qrcode {
    background-color: #f0f8ff; /* 浅蓝 */
}
.right-column .qrcode h3 {
    color: #1c3d5a; /* 深蓝，和背景呼应 */
    border-bottom: 2px solid #a1cfff;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 推荐句子模块 */
.right-column .related-sentences {
    background-color: #fff4e6; /* 浅橙 */
}
.right-column .related-sentences h3 {
    color: #a85c3d; /* 深橙/棕色 */
    border-bottom: 2px solid #fce8d6;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 相关文章引用模块 */
.right-column .quotes-section {
    background-color: #f0fdf5; /* 浅绿 */
}
.right-column .quotes-section h3 {
    color: #3e5f58; /* 深绿 */
    border-bottom: 2px solid #d7f0e8;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 右侧引用文本 */
.right-column blockquote {
    font-style: italic;
    border-left: 3px solid rgba(0,0,0,0.1);
    padding-left: 10px;
    color: #5a5d7a;
    margin: 8px 0;
}

.qrcode, .related-sentences, .quotes-section {
    background-color: #fff8f0; /* 柔和米色 */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.related-block {
    padding: 6px 10px;
    background-color: #d7f0e8; /* 淡绿 */
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.3s all ease;
}

.related-block:hover {
    background-color: #a5d4c7;
}

/* 引用 */
blockquote {
    font-style: italic;
    border-left: 3px solid #a1cfff;
    padding-left: 10px;
    color: #5a5d7a;
    margin: 8px 0;
}

/* 句子模块 */
.sentences-section h2 {
    font-size: 22px;
    color: #1c3d5a; /* 深蓝，和浅蓝背景呼应 */
    border-bottom: 2px solid #a9cce3; /* 浅蓝呼应 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* 互动小游戏 */
.interactive-game h2 {
    font-size: 22px;
    color: #d46a4c; /* 暖橙色呼应粉橙渐变 */
    border-bottom: 2px solid #f9c5b8; /* 淡橙边框 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* 下载模块 */
.downloads h2 {
    font-size: 22px;
    color: #a85c3d; /* 棕橙色呼应背景 */
    border-bottom: 2px solid #fce8d6; /* 边框浅色 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* AI解析 */
.ai-analysis h2 {
    font-size: 22px;
    color: #5d4da8; /* 深紫色 */
    border-bottom: 2px solid #cfcaf4; /* 边框淡紫 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* 词汇小贴士 */
.vocab-tips h2 {
    font-size: 22px;
    color: #3e7a5e; /* 深绿 */
    border-bottom: 2px solid #cfece0; /* 边框淡绿 */
    padding-bottom: 5px;
    margin-bottom: 15px;
}


/* 响应式 M端 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .right-column {
        min-width: auto;
    }
}
.main-sentence {
    background-color: #e0f0ff; /* 更明亮的浅蓝 */
    padding: 30px 25px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    margin: 25px 0 30px 0;
    text-align: center; /* 居中显示 */
}

.main-sentence .sentence-en {
    font-size: 36px;
    font-weight: 700;
    color: #0b3d91; /* 深蓝色 */
    margin-bottom: 12px;
}

.main-sentence .sentence-cn {
    font-size: 22px;
    font-weight: 500;
    color: #3a4f63;
}

.original-article {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 英文文章 & 中文文章通用框 */
.article-block {
    background-color: #fff8f0; /* 柔和米色 */
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 模块标题 */
.article-block h2 {
    font-size: 20px;
    color: #a85c3d; /* 暖色系标题 */
    border-bottom: 2px solid #fce8d6;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* 文章内容 */
.article-block p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}
.article-content {
    background-color: #e9f6f2;
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.article-content h2 {
    font-size: 20px;
    color: #3e5f58; /* 与背景搭配的深绿色 */
    border-bottom: 2px solid #b8ded2; /* 柔和浅绿下划 */
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.article-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}
/* =========================
   手机端适配
========================= */
@media (max-width: 768px) {

    body {
        font-size: 16px;
        line-height: 1.8;
    }

    /* 整体容器 */
    .container {
        display: block;
        padding: 0 12px;
        gap: 0;
    }

    /* 左右栏改成单列 */
    .left-column,
    .right-column {
        width: 100%;
        min-width: 100%;
        flex: none;
    }

    /* 主标题 */
    .article-header h1 {
        font-size: 24px;
        line-height: 1.4;
    }

    .article-meta {
        font-size: 13px;
    }

    /* 顶部主句 */
    .main-sentence {
        padding: 22px 16px;
        margin: 18px 0 22px;
        border-radius: 12px;
    }

    .main-sentence .sentence-en {
        font-size: 28px;
        line-height: 1.5;
        word-break: break-word;
    }

    .main-sentence .sentence-cn {
        font-size: 18px;
        line-height: 1.7;
    }

    /* 所有模块 */
    .sentence-block,
    .interactive-game,
    .downloads,
    .ai-analysis,
    .vocab-tips,
    .article-block,
    .article-content,
    .qrcode,
    .related-sentences,
    .quotes-section {
        padding: 14px;
        border-radius: 10px;
    }

    /* 模块标题 */
    .sentences-section h2,
    .interactive-game h2,
    .downloads h2,
    .ai-analysis h2,
    .vocab-tips h2,
    .article-block h2,
    .article-content h2,
    .right-column h3 {
        font-size: 19px;
        line-height: 1.5;
    }

    /* 英文句子 */
    .sentence-en {
        font-size: 18px;
        line-height: 1.8;
        word-break: break-word;
    }

    /* 中文句子 */
    .sentence-cn {
        font-size: 15px;
        line-height: 1.8;
    }

    /* 标签 */
    .sentence-tags span {
        font-size: 12px;
        margin-bottom: 5px;
    }

    /* 单词区域 */
    .word-bank {
        gap: 6px;
    }

    .word {
        font-size: 14px;
        padding: 6px 8px;
    }

    /* 拖拽区域 */
    .sentence-target {
        min-height: 46px;
        font-size: 14px;
        padding: 10px;
        text-align: center;
    }

    /* 按钮 */
    button,
    .btn-check {
        font-size: 15px;
        padding: 12px;
        margin-top: 12px;
    }

    /* 下载链接 */
    .downloads a {
        display: inline-block;
        margin-bottom: 8px;
    }

    /* 右侧二维码 */
    .qrcode img {
        max-width: 160px !important;
        display: block;
        margin: 0 auto;
    }

    /* 推荐句子 */
    .related-block {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 引用 */
    blockquote {
        font-size: 14px;
        line-height: 1.8;
    }

    /* 段落 */
    .article-block p,
    .article-content p {
        font-size: 15px;
        line-height: 1.9;
    }

}
.word.used {
    opacity: 0.4;
    pointer-events: none;
    transform: scale(0.95);
}

.selected-word {
    display: inline-block;
    margin-right: 3px;
    font-weight: bold;
    color: #1c3d5a;
}

.btn-reset {
    background-color: #ffd8a8;
    color: #8a5a00;
    margin-left: 8px;
}

.btn-reset:hover {
    background-color: #ffc078;
}
.speak-btn {
    background-color: #d9e8ff;
    color: #1c3d5a;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: 0.3s;
}

.speak-btn:hover {
    background-color: #a1cfff;
}
.speak-btn {
    background-color: #d9e8ff;
    color: #1c3d5a;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.speak-btn:hover {
    background-color: #a1cfff;
}

/* 播放中的按钮 */
.speak-btn.playing {
    background-color: #b8e6c1;
    color: #256b3f;
}

/* 图标动画 */
.speak-btn.playing .speak-icon {
    animation: speaking 0.8s infinite;
}

@keyframes speaking {

    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.7;
    }

}

/* 句子操作区 */
.sentence-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* 朗读按钮 */
.speak-sentence-btn {
    background-color: #d9e8ff;
    color: #1c3d5a;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* hover */
.speak-sentence-btn:hover {
    background-color: #a1cfff;
}

/* 播放中 */
.speak-sentence-btn.playing {
    background-color: #b8e6c1;
    color: #256b3f;
}

/* 图标动画 */
.speak-sentence-btn.playing .icon {
    animation: speaking 0.8s infinite;
}

/* 动画 */
@keyframes speaking {

    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.7;
    }

}



/* 控制区域 */
.main-controls {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

/* 播放按钮 */
.main-speak-btn {
    background-color: #ffffff;
    color: #0b3d91;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.main-speak-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0,0,0,0.15);
}

/* 播放中 */
.main-speak-btn.playing {
    background-color: #d7f5df;
    color: #256b3f;
}

/* 图标动画 */
.main-speak-btn.playing .icon {
    animation: speaking 0.8s infinite;
}

.voice-mini-switch {
    position: absolute;
    right: 0;
    bottom: 0;

    display: flex;

    align-items: center;   /* 关键 */

    justify-content: center;

    background-color: rgba(11, 61, 145, 0.18);

    border-radius: 999px;

    padding: 4px;

    min-height: 30px;   /* 给高度 */

    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
}

.voice-mini-btn {
    border: none;

    background: transparent;

    color: #eaf4ff;

    padding: 6px 14px;  /* 上下padding统一 */

    min-width: 58px;

    white-space: nowrap;

    line-height: 1;  /* 防止文字偏移 */

    display: flex;   /* 真正居中 */

    align-items: center;

    justify-content: center;

    font-size: 12px;

    border-radius: 999px;

    cursor: pointer;

    transition: 0.3s;
}
.voice-mini-btn {
    border: none;

    background: transparent;

    color: #eaf4ff;

    padding: 4px 14px;

    min-width: 52px;   /* 关键 */

    white-space: nowrap; /* 不换行 */


    font-size: 12px;

    border-radius: 999px;

    cursor: pointer;

    transition: 0.3s;
}

.voice-mini-btn.active {

    background-color: #ffffff;

    color: #0b3d91;

    font-weight: 700;

    box-shadow: 0 2px 6px rgba(0,0,0,0.12);

    transform: translateY(-1px);
}

.voice-mini-btn,
.main-speak-btn,
.speak-sentence-btn {
    margin-top: 0;
}

.toggle-sentence-btn {

    margin-top: 14px;

    background-color: rgba(255,255,255,0.25);

    color: #0b3d91;

    border: 1px solid rgba(255,255,255,0.35);

    padding: 8px 16px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 14px;

    transition: 0.3s;

    backdrop-filter: blur(6px);
}

.toggle-sentence-btn:hover {

    background-color: rgba(255,255,255,0.35);

    transform: translateY(-1px);
}

.main-sentence.hidden-en .sentence-en {

    filter: blur(10px);

    user-select: none;

    opacity: 0.25;

    transition: 0.3s;
}


/* =========================
   句子游戏整体
========================= */
.interactive-game {

    background: linear-gradient(135deg, #fff4ea, #ffe9dd);

    padding: 22px;

    border-radius: 18px;

    margin: 25px 0;

    box-shadow: 0 8px 22px rgba(0,0,0,0.08);

    position: relative;

    overflow: hidden;
}

/* 标题 */
.interactive-game h2 {

    font-size: 24px;

    color: #d46a4c;

    border-bottom: 2px solid #ffcdbf;

    padding-bottom: 8px;

    margin-bottom: 14px;
}

/* 提示文字 */
.game-tip {

    color: #9a6a5b;

    font-size: 15px;

    margin-bottom: 18px;

    transition: 0.3s;
}

/* 隐藏提示 */
.game-tip.hide {

    opacity: 0;

    transform: translateY(-5px);

    height: 0;

    overflow: hidden;

    margin: 0;
}

/* =========================
   拼句区域
========================= */
.sentence-target {

    min-height: 80px;

    background-color: #ffffff;

    border: 2px dashed #ffb79e;

    border-radius: 14px;

    padding: 14px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin-bottom: 22px;

    transition: 0.3s;

    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
}

/* 默认提示 */
.placeholder {

    color: #c29a8b;

    font-size: 14px;
}

/* =========================
   单词池
========================= */
.word-bank {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

/* 单词按钮 */
.word-btn {

    background: linear-gradient(135deg, #dcefff, #c7e4ff);

    color: #17436d;

    border: none;

    padding: 10px 16px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;

    transition: 0.22s ease;

    box-shadow: 0 3px 8px rgba(0,0,0,0.08);

    user-select: none;
}

/* hover */
.word-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
}

/* 点击动画 */
.word-btn.active {

    transform: scale(1.08);

    background: linear-gradient(135deg, #9fd1ff, #7bbcff);
}

/* =========================
   答案区单词
========================= */
.answer-word {

    background: linear-gradient(135deg, #dff8e7, #c9f1d5);

    color: #236344;

    border-radius: 999px;

    padding: 10px 16px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.22s;

    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.answer-word:hover {

    transform: translateY(-2px);
}

/* =========================
   按钮区域
========================= */
.game-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

/* 检查按钮 */
.btn-check {

    background: linear-gradient(135deg, #7fd89d, #57c67c);

    color: #fff;

    border: none;

    padding: 11px 18px;

    border-radius: 12px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;
    text-decoration: none;
    transition: 0.25s;
}

.btn-check:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(0,0,0,0.15);
}


/* 重置按钮 */
.btn-reset {

    background: linear-gradient(135deg, #ffd8c9, #ffc0aa);

    color: #9b4c31;

    border: none;

    padding: 11px 18px;

    border-radius: 12px;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;

    transition: 0.25s;
}

.btn-reset:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(0,0,0,0.15);
}

/* =========================
   结果提示
========================= */
.game-result {

    margin-top: 18px;

    font-size: 16px;

    font-weight: 700;

    min-height: 24px;

    transition: 0.3s;
}

/* 正确 */
.game-result.success {

    color: #1f9d55;
}

/* 错误 */
.game-result.error {

    color: #e63946;
}

/* =========================
   错误抖动动画
========================= */
.shake {

    animation: shake 0.35s;
}

@keyframes shake {

    0% { transform: translateX(0); }

    25% { transform: translateX(-4px); }

    50% { transform: translateX(4px); }

    75% { transform: translateX(-4px); }

    100% { transform: translateX(0); }
}

/* =========================
   正确闪光
========================= */
.success-flash {

    animation: successFlash 0.5s;
}

@keyframes successFlash {

    0% {

        box-shadow: 0 0 0 rgba(0,0,0,0);
    }

    50% {

        box-shadow: 0 0 18px rgba(92, 201, 123, 0.6);
    }

    100% {

        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
}

/* =========================
   手机端适配
========================= */
@media (max-width: 768px) {

    .interactive-game {

        padding: 18px;
    }

    .interactive-game h2 {

        font-size: 21px;
    }

    .word-btn,
    .answer-word {

        font-size: 14px;

        padding: 9px 14px;
    }

    .btn-check,
    .btn-reset {

        width: 100%;
        margin-left: 0px;
        justify-content: center;
    }

    .game-actions {

        flex-direction: column;
    }

    .sentence-target {

        min-height: 70px;
    }
}

.answer-word.wrong {

    background: linear-gradient(
            135deg,
            #ffb3b3,
            #ff8f8f
    );

    color: #ffffff;

    box-shadow:
            0 3px 8px rgba(255, 80, 80, 0.25);

    transform: translateY(-1px);

}

/* 下一句按钮 */
.btn-next-sentence {

    display: none;

    align-items: center;

    justify-content: center;

    padding: 10px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    color: #ffffff;

    background: linear-gradient(
            135deg,
            #67c587,
            #45b36b
    );

    box-shadow:
            0 4px 12px rgba(69, 179, 107, 0.25);

    transition: all 0.25s ease;

    animation: nextPulse 1.8s infinite;

}

/* hover */
.btn-next-sentence:hover {

    transform: translateY(-2px);

    box-shadow:
            0 6px 16px rgba(69, 179, 107, 0.35);

}

/* 正确后显示 */
.btn-next-sentence.show {

    display: inline-flex;

}

/* 呼吸动画 */
@keyframes nextPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.03);

    }

    100% {

        transform: scale(1);

    }

}

/* 中文提示 */
.game-translation {

    background: rgba(255,255,255,0.45);

    border-radius: 12px;

    padding: 12px 14px;

    margin-bottom: 14px;

    border-left: 4px solid #f3b27a;

}

/* 小标题 */
.game-translation .label {

    display: inline-block;

    font-size: 13px;

    color: #c77732;

    background: #fff3e8;

    padding: 3px 8px;

    border-radius: 999px;

    margin-bottom: 8px;

    font-weight: 600;

}

/* 中文内容 */
.translation-text {

    font-size: 16px;

    line-height: 1.7;

    color: #5a4b42;

}

.sentence-actions .speak-sentence-btn {

    padding: 11px 18px !important;

    border-radius: 12px !important;

    margin-top: 8px; !important;
}

@media (max-width: 768px) {

    .main-speak-btn,
    .toggle-sentence-btn {
        width: 40% !important;
    }

}

@media (max-width: 768px) {

    .voice-mini-switch {
        position: static !important;
        display: flex;
        justify-content: flex-end;

        width: fit-content;
        margin-left: auto;

        margin-top: 16px;   /* ⭐关键：往下移 */
        padding: 4px 6px;

        border-radius: 10px;
    }

    .voice-mini-btn {
        border: none;
        background: transparent;

        color: #eaf4ff;     /* ⭐和PC一致 */
        font-size: 12px;

        padding: 6px 14px;
        min-width: 58px;

        white-space: nowrap;
        line-height: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 999px;
        cursor: pointer;
        transition: 0.3s;
    }


}

@media (max-width: 768px) {

    .word-bank {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
    }

    .word-btn,
    .answer-word {
        width: auto !important;        /* ⭐关键 */
        display: inline-flex !important; /* ⭐关键 */
        margin: 0;                      /* ⭐去掉换行影响 */
        flex: 0 0 auto;                 /* ⭐防止被拉伸 */
    }

}

@media (max-width: 768px) {

    .sentence-actions {
        display: flex;
        gap: 10px;
    }

    .speak-sentence-btn,
    .btn-check {
        width: 40% !important;
        flex: 0 0 40%;

        padding: 8px 10px;   /* ⭐变矮关键 */
        font-size: 13px;

        margin-top: 0 !important;

        display: flex;
        justify-content: center;
        align-items: center;

        border-radius: 8px;  /* ⭐稍微收一点圆角 */
        line-height: 1;
        text-decoration: none;
    }

}
.qr-code {
    width: 150px;
    height: 150px;
    background: #eee;
    display: block;
    margin: 0 auto 20px;
    border-radius: 12px;
    text-align: center;
    line-height: 150px;
    color: #999;
}

.related-block {
    padding: 6px 10px;
    background-color: #d7f0e8;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.3s all ease;
}

/* a 标签样式 */
.related-block a {
    color: inherit;
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right-column blockquote a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.right-column blockquote a:hover {
    color: #2d5bff;
}



/* =========================
   整体操作栏
========================= */
.game-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* 左侧按钮组 */
.game-main-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 右侧分享 */
.share-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}






/* =========================
   手机端
========================= */
@media (max-width: 768px) {

    .game-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .game-main-actions {
        width: 100%;
        justify-content: center;
    }

    .share-actions {
        justify-content: center;
        margin-left: 0;
    }

}


/* 操作栏整体 */
.game-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 分享按钮组推到最右边 */
.share-actions {
    margin-left: auto;

    display: flex;
    gap: 8px;

    align-items: center;
}

.share-btn {
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    border: none;
    cursor: pointer;

    transition: 0.25s ease;

    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

/* QQ */
.share-qq {
    background: #e8f2ff;
    color: #2563eb;
}

/* 微信 */
.share-wechat {
    background: #eaf9ee;
    color: #1f9d55;
}

.share-btn,
.share-btn:link,
.share-btn:visited,
.share-btn:hover,
.share-btn:active {

    text-decoration: none;
}

.share-qq,
.share-qq:link,
.share-qq:visited {

    background: #e8f2ff;
    color: #2563eb;
}

.share-wechat,
.share-wechat:link,
.share-wechat:visited {

    background: #eaf9ee;
    color: #1f9d55;
}


/* 微信二维码区域 */
.wechat-share-box {

    display: none;

    margin-top: 14px;

    padding: 18px;

    background: #ffffff;

    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

    border: 1px solid #eef3f8;

    text-align: center;
}

/* 标题 */
.wechat-share-title {

    font-size: 15px;
    font-weight: 700;

    color: #1f3b57;

    margin-bottom: 14px;
}

/* 二维码 */
#share-qrcode {

    display: flex;
    justify-content: center;
}

/* 二维码内部 */
#share-qrcode img {

    border-radius: 14px;
    padding: 8px;

    background: #fff;
}

.article-meta a {

    color: #888;

    text-decoration: none;

    transition: 0.25s ease;
}

.article-meta a:hover {

    color: #4f8cff;
}

.sidebar-box ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.sidebar-box ul li {
    margin-bottom: 10px;
}

.sidebar-box ul li a {
    text-decoration: none;
    color: #666;
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.sidebar-box ul li a:hover {
    background: #f0f8ff;
    color: #007bff;
}

.tags a {
    color: inherit;
    text-decoration: none;
}

.tags a:hover {
    color: inherit;
    text-decoration: none;
}

.current-sentence-highlight {

    background: linear-gradient(
            transparent 65%,
            rgba(255, 196, 87, 0.45) 65%
    );

    color: #c96a00;

    font-weight: 700;

    padding: 0 2px;

    border-radius: 3px;

}