:root {
    --gold: #f0c239; 
    --gold-light: #fff5c2;
    --gold-deep: #3e2723;
    --glass-bg: rgba(255, 255, 255, 0.2);
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --font-scale: 1.0;
}

* { 
    -webkit-user-select: none; user-select: none; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: auto; user-select: auto; }

body {
    background-color: #1a1a1a;
    margin: 0; padding: 0;
    height: 100vh; height: 100dvh; width: 100vw;
    overflow: hidden;
    display: flex; flex-direction: column;
    color: #fff;
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
    touch-action: manipulation;
}

/* 背景图层 - 离线优化，若无bg.jpg则显示深色背景 */
body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #222; 
    background-image: url('bg.jpg');
    background-size: cover; background-position: center;
    filter: brightness(0.4); z-index: -1;
}

/* --- 顶部区域 --- */
.top-section {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
    padding-top: calc(var(--safe-top) - 10px); 
    width: 100%; z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

.mode-switch {
    width: 96%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; 
}

.mode-btn {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #ddd; padding: 12px 0; /* 加大触控区域 */
    border-radius: 8px;
    font-size: 1.2rem; text-align: center; font-weight: bold;
    transition: background 0.1s, transform 0.1s;
    text-shadow: none;
}
.mode-btn:active { transform: scale(0.98); background: rgba(255,255,255,0.2); }
.mode-btn.active {
    background: var(--gold-deep); color: var(--gold); border: 1px solid var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold); 
}

.merit-container {
    display: flex; width: 96%; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.12); padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
    z-index: 25;
}
.merit-item { 
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    justify-content: center; align-items: center; 
    border-right: 1px solid rgba(255,255,255,0.15); 
    cursor: pointer; padding: 5px 0;
}
.merit-item:nth-last-child(2) { border-right: none; }
.merit-item:active { background: rgba(255,255,255,0.1); }

.merit-label { 
    font-size: 0.9rem; color: #ccc; 
    text-shadow: 1px 1px 0 #000;
    margin-bottom: -2px; font-weight: bold; white-space: nowrap;
}
.merit-value { 
    font-size: 1.8rem; color: var(--gold); font-weight: bold; 
    font-family: Arial, sans-serif; 
    text-shadow: 2px 2px 0 #000;
    line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.diary-btn { 
    font-size: 1rem; background: var(--gold-deep); color: var(--gold); 
    width: 50px; height: 50px; line-height: 1.1; padding: 0; 
    border-radius: 8px; border: 2px solid var(--gold); margin-left: 8px; 
    cursor: pointer; font-weight: bold; flex-shrink: 0;
    text-shadow: 1px 1px 0 #000; box-shadow: 0 2px 0 rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: transform 0.1s;
}
.diary-btn:active { transform: translateY(2px); box-shadow: none; background: #222; }

/* --- 中间舞台 --- */
.stage {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    position: relative; width: 100%; overflow: hidden; padding-top: 0; min-height: 0;
}

/* 经文容器 */
#lyrics-container {
    position: absolute; top: 8vh; left: 0; z-index: 150;
    width: 100%; text-align: center; display: none; 
    flex-direction: column; 
    pointer-events: auto; 
    height: 18vh; 
    overflow-y: auto; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}
#lyrics-container::-webkit-scrollbar { display: none; }

.lyric-line { 
    display: flex; align-items: center; justify-content: center;
    text-shadow: 1px 1px 0 #000; 
    white-space: pre-wrap; 
    transition: all 0.4s ease-out; width: 100%; margin: 6px 0;
    opacity: 0.5; transform: scale(0.9); cursor: pointer;
    min-height: 4vh; color: rgba(240, 194, 57, 0.7);
}
.lyric-line.active {
    opacity: 1; transform: scale(1); 
    color: var(--gold); font-weight: bold;
    text-shadow: 2px 2px 0 #000;
    margin: 12px 0;
}

/* 进度条与计数器 */
#sutra-progress-wrapper {
    position: absolute; 
    bottom: 2vh; 
    left: 10%; width: 80%;
    display: none; align-items: center; justify-content: center;
    flex-direction: column; z-index: 140;
    pointer-events: none; 
}
.progress-bar-bg {
    width: 100%; height: 4px; background: rgba(255,255,255,0.2);
    border-radius: 2px; overflow: hidden; margin-bottom: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.progress-bar-fill {
    height: 100%; width: 0%; background: var(--gold);
    transition: width 0.3s ease; box-shadow: none;
}
.sutra-counter {
    font-size: 0.9rem; color: rgba(240, 194, 57, 0.9);
    font-family: Arial, sans-serif; font-weight: bold;
    display: flex; align-items: center; gap: 6px;
    text-shadow: 1px 1px 0 #000;
}
.sutra-counter span:first-child {
    font-size: 0.85rem; color: #ddd; opacity: 0.9;
}

/* 统一的右侧悬浮按钮样式 (重读经文 & 语音播报) */
.floating-btn {
    position: absolute; right: 10px;
    width: auto; height: 36px; padding: 0 14px; border-radius: 18px; /* 加大尺寸 */
    background: rgba(255,255,255,0.15); border: 1px solid rgba(240, 194, 57, 0.3);
    color: var(--gold); font-size: 0.85rem; display: flex; 
    justify-content: center; align-items: center; cursor: pointer;
    z-index: 151; font-weight: bold;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
    transition: all 0.1s;
    text-shadow: 1px 1px 0 #000;
}
.floating-btn:active { transform: translateY(2px); box-shadow: none; background: rgba(240, 194, 57, 0.2); }
.floating-btn.off { filter: grayscale(1); opacity: 0.7; }

/* 按钮特定位置 */
#speech-toggle-btn { top: 7vh; z-index: 160; }
#reset-sutra-btn { top: 13vh; display: none; } 

/* 主界面回向输入框 */
#stage-dedication-wrapper {
    position: absolute; top: 1vh; width: 80%; left: 10%;
    z-index: 152; display: none; 
    text-align: center;
}
.stage-dedication-input {
    width: 100%; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(240, 194, 57, 0.3);
    border-radius: 15px; padding: 8px 12px;
    color: var(--gold); font-size: 1rem;
    text-align: center; font-family: inherit;
    outline: none;
    text-shadow: 1px 1px 0 #000;
}
.stage-dedication-input::placeholder { color: rgba(240, 194, 57, 0.4); font-size: 0.9rem; text-shadow: none; }
.stage-dedication-input:focus { background: rgba(0,0,0,0.5); border-color: var(--gold); }

ruby { ruby-position: over; }
rt { 
    font-family: Arial, sans-serif; 
    font-size: 0.6em; /* 略微调大拼音 */
    color: rgba(240, 194, 57, 0.9); 
    font-weight: normal; text-align: center; line-height: 1.2; 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* 木鱼容器 */
.muyu-wrapper {
    position: relative; width: 80vw; height: 80vw;
    max-height: 55vh; max-width: 55vh; aspect-ratio: 1/1;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; margin: 0; margin-top: 25vh; 
    transition: all 0.1s ease; will-change: transform;
    transform: translateZ(0); z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

/* 波纹动画 */
.ripple {
    position: absolute; 
    border-radius: 50%;
    border: 2px solid rgba(240, 194, 57, 0.6);
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0; pointer-events: none; 
    z-index: 500; 
    box-shadow: none;
}
@keyframes ripple-effect {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 0px; }
}

/* 功德金光粒子 - 性能优化版 */
.golden-particle {
    position: absolute;
    width: 6px; height: 6px; /* 减小粒子尺寸 */
    background: radial-gradient(circle, #fff 0%, var(--gold) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 400;
    opacity: 0;
    will-change: transform, opacity; /* 提示浏览器优化 */
}
@keyframes particle-fade-up {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.muyu-img { 
    width: 100%; height: 100%; object-fit: contain; 
    pointer-events: none; 
    z-index: 100;
}

.stick-img {
    position: absolute; width: 70%; height: 70%; object-fit: contain;
    top: -15%; right: -20%; pointer-events: none; transform-origin: 90% 90%; 
    will-change: transform; z-index: 101;
}
.stick-img.knocking { animation: strike-motion 0.1s forwards; }
@keyframes strike-motion { 0% { transform: rotate(0deg); } 30% { transform: rotate(-45deg); } 100% { transform: rotate(0deg); } }
.muyu-wrapper.active .muyu-img { transform: scale(0.97) translateY(2px); }

/* --- 底部区域 --- */
.bottom-section {
    flex: 0 0 auto; width: 100%; padding-bottom: max(15px, var(--safe-bottom));
    padding-top: 8px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    display: flex; flex-direction: column; align-items: center; z-index: 30;
}

.tips { 
    color: #ddd; font-size: 1.2rem; margin-bottom: 8px; letter-spacing: 2px;
    text-shadow: 1px 1px 0 #000; font-weight: bold;
}

.controls { 
    display: flex; flex-direction: row; justify-content: space-between;
    gap: 10px; width: 96%; max-width: 600px; padding: 0 5px; box-sizing: border-box;
}

.btn {
    flex: 1; background: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 14px 0; /* 加大按钮 */
    border-radius: 8px; font-size: 1rem; cursor: pointer; text-align: center;
    font-weight: bold; 
    text-shadow: 1px 1px 0 #000; 
    transition: background 0.1s, transform 0.1s;
    display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-sizing: border-box;
}
.btn.visible { display: block; }
.btn:active { background: rgba(255,255,255,0.3); transform: scale(0.98); }
.btn.active { background: var(--gold-deep); color: var(--gold); border-color: var(--gold); }
.btn.stop-style { background: #5c1818; border-color: #d32f2f; color: #ffcccc; }

/* 浮动文字 */
.float-text {
    position: absolute; color: var(--gold); pointer-events: none; 
    animation: floatFade 1.0s ease-out forwards; /* 缩短动画时间优化性能 */
    white-space: nowrap; z-index: 200; 
    text-shadow: 1px 1px 0 #000; 
    font-family: "Kaiti SC", serif; font-weight: bold;
    will-change: transform, opacity; 
}
@keyframes floatFade {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    20% { opacity: 1; transform: translate(-50%, -60px) scale(1.1); } 
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); } 
}

/* 弹窗 */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 300;
    justify-content: center; align-items: center; 
}
.card {
    background: #2b1d1a; padding: 30px; border-radius: 12px; border: 2px solid var(--gold);
    text-align: center; width: 85%; max-width: 360px;
    box-shadow: 0 5px 0 rgba(0,0,0,0.8);
}
.card-text { color: var(--gold); font-size: 1.8rem; line-height: 1.8; margin-bottom: 25px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.card-btn { background: var(--gold); color: #2b0505; padding: 12px 35px; border-radius: 8px; font-size: 1.4rem; border: none; font-weight: bold; cursor: pointer; }

/* 日记本 */
.diary-box { 
    background: #fdf5e6; color: #333; width: 92%; border-radius: 12px; 
    padding: 20px; max-width: 400px; max-height: 85vh; overflow-y: auto;
    box-sizing: border-box;
}

.diary-header {
    margin-bottom: 20px;
}

.stats-overview { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.stat-card {
    background: rgba(212, 175, 55, 0.15); border-radius: 8px; padding: 8px;
    text-align: center; border: 1px solid #d4af37;
}
.stat-card h4 { margin: 0; font-size: 0.8rem; color: #5d4037; opacity: 0.8; }
.stat-card .val { font-size: 1.2rem; font-weight: bold; color: #3e2723; margin-top: 5px; }

/* 隐藏区域 */
.hidden-details {
    display: none;
}
.hidden-details.show {
    display: block;
    animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-container {
    margin: 15px 0; padding: 10px; background: #fff; border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.chart-title { font-size: 0.9rem; font-weight: bold; color: #5d4037; margin-bottom: 10px; }

.bar-chart {
    display: flex; justify-content: space-between; align-items: stretch;
    height: 140px; 
    padding-bottom: 5px; border-bottom: 1px solid #ddd;
    padding-top: 15px; 
    box-sizing: border-box;
}
.bar-group { 
    display: flex; flex-direction: column; align-items: center; flex: 1; 
    position: relative; justify-content: flex-end;
    height: 100%;
}
.bar-value {
    font-size: 0.7rem; color: #8d6e63; margin-bottom: 2px; font-weight: bold;
    font-family: Arial, sans-serif;
}
.bar {
    width: 12px; background: #d4af37; border-radius: 3px 3px 0 0;
    transition: height 0.5s ease;
}
.bar-label { font-size: 0.7rem; color: #888; margin-top: 4px; }

.diary-stat { 
    text-align: center; padding: 15px; background: #e6c278; color: #3e2723; 
    border-radius: 8px; margin-bottom: 15px; font-weight: bold; font-size: 1.6rem; border: 2px solid #d4af37;
}
.font-control { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; align-items: center; }
.font-btn { padding: 5px 15px; border: 1px solid #8d6e63; border-radius: 20px; background: transparent; color: #5d4037; font-weight: bold; cursor: pointer; }
.font-btn.active { background: #5d4037; color: #fff; }

/* 查看更多按钮 - 优化尺寸与溢出 */
.view-more-btn {
    display: block; 
    width: auto;
    min-width: 60%;
    max-width: 90%;
    padding: 10px 15px; 
    margin: 10px auto;
    background: #fff; border: 1px dashed #d4af37; border-radius: 20px;
    color: #5d4037; font-weight: bold; text-align: center; font-size: 0.95rem;
    cursor: pointer;
    box-sizing: border-box;
    white-space: normal; /* 允许换行以适应长文本 */
    line-height: 1.2;
}
.view-more-btn:active { background: #fdf5e6; }

.cal-header-row {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; 
    margin-bottom: 6px; text-align: center; font-weight: bold; color: #8d6e63;
}
.cal-header-cell { font-size: 1rem; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { 
    aspect-ratio: 1; display: flex; justify-content: center; align-items: center; 
    border: 1px solid #d0d0d0; border-radius: 4px; font-size: 1.3rem; 
    position: relative; color: #333; font-weight: bold;
}
.cal-num { position: relative; z-index: 1; }
.cal-stamp { 
    position: absolute; width: 80%; height: 80%; 
    border: 2px solid #d32f2f; border-radius: 50%; 
    color: #d32f2f; display: flex; justify-content: center; align-items: center; 
    font-size: 1rem; font-weight: bold; background: rgba(211, 47, 47, 0.05); 
    z-index: 2; 
}

/* 预设标签弹窗 */
.picker-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
    width: 100%; margin-bottom: 20px;
}
.picker-tag {
    background: #e6c278; color: #3e2723; padding: 15px 5px;
    border-radius: 8px; font-size: 1.1rem; font-weight: bold;
    text-align: center; border: 2px solid #d4af37; cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
.picker-tag:active { transform: scale(0.95); background: #f0c239; box-shadow: none; transform: translateY(3px); }
.picker-tag.manual {
    background: #5d4037; color: #fff; border-color: #8d6e63; grid-column: span 2;
}