/* 禁止滚动 */
body.no-scroll {
    overflow: hidden;
}

.markdown-body .word {
    display: inline-block;
    margin-bottom: .1em;
}

code.word {
    background-color: #eaeef2;
    cursor: default;
}

.markdown-body {
    margin-top: 40px;
}

.markdown-body span.word.can-play {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #91A3B0;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;

}

/*.markdown-body span.word.can-play.multi-pron {*/
/*    text-decoration-color: #7CB9E8;*/
/*    text-decoration-style: solid;*/
/*}*/

.markdown-body code.word.new-word.can-play.multi-pron {
    border-bottom: solid 2px #7CB9E8;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.markdown-body .word.new-word.can-play {
    cursor: pointer;
    background-color: #f3eee8;
}

audio {
    display: none;
}

#continuous-play-btn {
    position: fixed; /* 使用 fixed 位置固定元素 */
    right: 10px; /* 距离顶部 10 像素 */
    bottom: 10px; /* 距离左侧 10 像素 */
    z-index: 1000; /* 设置较高的z-index确保链接在最上层 */
    /*background-color: #f0f0f0; !* 背景颜色 *!*/
    /*color: white; !* 文字颜色 *!*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* 阴影效果 *!*/
    padding: 6px 12px; /* 内边距 */
    text-decoration: none; /* 去掉下划线 */
    border-radius: 50%; /* 圆形 */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 24px; /* 字体大小 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
    background-color: #303F9F; /* 更改背景颜色以表示活跃状态 */
    color: #FFFFFF; /* 保持文字颜色为白色 */
    box-shadow: 0 0 15px rgba(48, 63, 159, 0.5); /* 增加更明显的阴影以突出按钮 */
}

#continuous-play-btn {
    display: none; /* 默认隐藏 */
}

code.word.new-word.can-play.highlight {
    background-color: #EFBBCC;
}

.word.can-play.highlight {
    background-color: #F0E68C;
}

#navigation-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

#current-file-display {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#current-file-display span:nth-child(odd) {
    text-transform: lowercase;
    color: #2F4F4F;
    font-size: 100%;
    font-style: italic;
    margin-right: 8px;
}

#current-file-display span:nth-child(even) {
    color: #00008B;
    font-size: 100%;
    font-weight: bold;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin-right: 8px;
}

#prev-button, #next-button {
    flex: 0 0 auto;
    padding: 2px 6px;
    white-space: nowrap;
    color: midnightblue;
    background-color: #f8f8f8;
    border: 0;
    border-radius: 4px;
    text-align: center;
}

.phonetic-show #prev-button, .phonetic-show #next-button {
    display: none;
}

#prev-button:hover, #next-button:hover {
    background-color: #e2e2e2;
    color: #000;
}

#prev-button {
    margin-right: 5px;
}

#next-button {
    margin-right: 20px;
    margin-left: 5px;
}

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

#definition-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 75vh;
    z-index: 1000; /* 确保在最上层 */
    display: none; /* 默认不显示，通过JavaScript控制显示 */
    border-radius: 8px 8px 0 0; /* 只对上方两个角应用圆角 */
}

#definition-container {
    background-color: #f9f9f9;
    border: none; /* 移除边框，已在tool-bar中设置 */
    padding: 10px;
    width: 100%; /* 调整宽度为100% */
    overflow-y: auto; /* 超过部分可滚动 */
    max-height: calc(75vh - 40px); /* 减去tool-bar的高度 */
    box-sizing: border-box; /* 包括padding在内的宽度计算 */
}

#definition-popup .tool-bar {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中所有子元素 */
    justify-content: space-between; /* 子元素分布 */
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    padding: 5px 8px;
    border-radius: 8px 8px 0 0;
}

#definition-popup #popup-word-display {
    flex-grow: 1; /* 允许标题占据多余空间 */
    text-align: left; /* 标题对齐到左侧 */
    font-weight: bold;
    padding: 5px 15px 5px 5px;
}


#definition-popup #popup-word-display.new-word::before {
    content: "\2605 "; /* Unicode for black star */
    color: #D32F2F;
    margin-right: 0.5em; /* 右侧留出一点距离 */
}

#definition-popup .tool-bar button {
    color: #007BFF;
    background-color: #eee;
    cursor: pointer;
    border: none;
    padding: 5px 15px 5px 0;
    -webkit-appearance: none; /* 移除iOS默认样式 */
    -moz-appearance: none; /* 移除Firefox默认样式 */
    appearance: none; /* 标准化属性，移除默认样式 */
    outline: none; /* 移除焦点时的轮廓 */
    font-family: Arial, sans-serif; /* 指定字体 */
    font-size: 12px; /* 设置字体大小 */
    text-align: center; /* 文本居中 */
}

#definition-popup .tool-bar button:not(:last-child) {
    margin-right: 10px; /* 为按钮之间添加一些右边距，增加分隔感 */
    border-right: 1px solid #ccc;
}

#definition-popup .tool-bar button:last-child {
    padding-right: 5px;
}

#definition-popup .tool-bar button.active {
    color: #D32F2F;
}

#definition-container div {
    margin-bottom: 10px;
}

#definition-container span {
    padding: 2px 4px; /* 轻微的内边距增加视觉舒适度 */
}

#definition-container .form {
    font-weight: bold;
    color: #1A237E; /* 深蓝色 */
    font-size: 18px;
}

#definition-container .phonetic {
    display: inline-block;
    color: black;
    font-family: "Source Sans Pro", sans-serif;;
    font-size: 16px;
}

.phonetic > span:first-child {
    margin-right: 4px;
}

.phonetic > span:last-child {
    color: #56004f;
    font-family: 'Charis SIL', 'Doulos SIL', 'Arial Unicode MS', 'Lucida Sans Unicode', 'Segoe UI', sans-serif;
    font-weight: lighter;
}

.phonetic.active > span:first-child {
    font-weight: bold;
}

.phonetic.active > span:last-child {
    font-weight: normal;
}

#definition-container .pos {
    font-style: italic;
    color: #388E3C; /* 深绿色 */
}

#definition-container .explanation {
    color: #303F9F; /* 中度蓝色 */
    display: block; /* 使其成为块级元素，从新行开始 */
    margin-top: 5px; /* 与上方元素留有一定间隔 */
}

#definition-container .explanation .container {
    width: 100%; /* 或者根据需要设置特定宽度 */
}

#definition-container .explanation .container .entry {
    display: flex;
    align-items: flex-start; /* 确保文本对齐 */
    margin-bottom: 5px; /* 词条间距 */
    font-family: Helvetica, "Lucida Grande", Lucida, Verdana, sans-serif;
}

#definition-container .explanation .container .order {
    font-weight: bold; /* 突出显示序号 */
}

#definition-container .explanation .container .explain {
    flex: 1; /* 占据剩余空间 */
    text-align: left;
    color: black; /* 圆括号内文本颜色 */
    font-weight: lighter;
    font-family: Helvetica, "Lucida Grande", Lucida, Verdana, sans-serif;
}

#definition-container .explanation .container .brackets {
    color: darkred; /* 中括号内文本颜色 */
    font-weight: lighter;
}

#definition-container .top-tails {
    display: block; /* 使其成为块级元素，从新行开始 */
    margin-top: 5px; /* 与上方元素留有一定间隔 */
    flex: 1; /* 占据剩余空间 */
    text-align: left;
    color: black; /* 圆括号内文本颜色 */
    font-weight: lighter;
    font-family: Helvetica, "Lucida Grande", Lucida, Verdana, sans-serif;
}

#definition-container .top-tails .brackets {
    color: darkred; /* 中括号内文本颜色 */
    font-weight: lighter;
}

#definition-container .explanation .container .cn {
    color: #303F9F; /* 中度蓝色 */
    font-weight: normal;
}