/*
 * WP Family Tree - Scene Styles
 * (Zongci, Memorial Hall, Zongci Exterior - Common and Specific)
 */

/* --- Common Zongci, Memorial Hall, Zongci Exterior Styles --- */
.wpft-zongci-container { /* Base for all scenes */
    position: relative;
    padding-left: 15px;
    padding-right: 80px; /* Space for floating actions */
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: calc(var(--wpft-admin-bar-height, 0px) + 120px + 20px); /* Space for danmaku & admin bar */
}
.wpft-zongci-danmaku-area { position: fixed; top: calc(var(--wpft-admin-bar-height, 0px)); left: 0; width: 100%; height: 120px; overflow: hidden; background-color: transparent; z-index: 10002; pointer-events: none; box-sizing: border-box; }
.wpft-danmaku-track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; white-space: nowrap; }
.wpft-danmaku-item { display: inline-flex; align-items: center; padding: 5px 15px; margin: 2px 10px; background-color: #303030ad; color:#24ff00; border-radius: 15px; font-size: 1.0em; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: absolute; white-space: nowrap; max-width: 300px; opacity: 0; will-change: transform; pointer-events: auto; }
.wpft-danmaku-item img.wpft-danmaku-avatar { width: 24px; height: 24px; border-radius: 50%; margin-right: 8px; border: 1px solid #eee; }
.wpft-danmaku-item .wpft-danmaku-author { font-weight: bold; margin-right: 5px; color: #24ff00; }
.wpft-zongci-container h2 { margin-top: 0; margin-bottom: 20px; position: relative; z-index: 1; }

/* Scene Search Controls (Popup Style) */
.wpft-zongci-search-controls,
.wpft-memorial-search-controls-wrapper {
    display: none;
    position: fixed;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10016;
    width: auto;
    min-width: 320px;
    flex-direction: column;
    gap: 10px;
}
.wpft-zongci-search-controls.active,
.wpft-memorial-search-controls-wrapper.active {
    display: flex !important;
    animation: wpftPopupFadeInScale 0.2s ease-out;
}
@keyframes wpftPopupFadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.wpft-zongci-search-select { /* Used by scene popups */
    min-width: 200px;
    width: 100% !important;
    height: 36px;
    box-sizing: border-box;
}
.wpft-zongci-search-controls .select2-container--default .select2-selection--single {
    height: 36px; border: 1px solid #ced4da; border-radius: 3px;
}
.wpft-zongci-search-controls .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px; padding-left: 10px;
}
.wpft-zongci-search-controls .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.wpft-zongci-search-button { /* Used by scene popups */
    width: 100%;
    height: 36px; line-height: 34px; padding: 0 15px !important;
    box-sizing: border-box;
}
.wpft-zongci-search-controls .select2-container { /* Override general .select2-container for popup */
    width: 100% !important;
    flex-grow: 0;
}

/* Common Offering Log Scroll */
.wpft-zongci-offering-log-scroll {
    position: fixed;
    bottom: 80%; /* Adjusted by responsive CSS */
    left: 0px;   /* Adjusted by responsive CSS */
    width: 260px;
    height: 120px;
    background-color: #ffffff54;
    padding: 8px;
    box-sizing: border-box;
    display: block !important;
    z-index: 10003;
    overflow: hidden;
}
.wpft-offering-log-list { list-style: none; padding: 0; margin: 0; position: relative; width: 100%; }
.wpft-offering-log-item { display: flex; align-items: center; padding: 3px 0; font-size: 0.75em; color: #333; border-bottom: 1px dotted #e0e0e0; line-height: 1.4; box-sizing: border-box; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpft-offering-log-item:last-child { border-bottom: none; }
.wpft-offering-log-item img.wpft-log-avatar { width: 18px; height: 18px; border-radius: 50%; margin-right: 5px; }
.wpft-offering-log-item .wpft-log-user { font-weight: 500; color: #005a87; margin-right: 4px; }
.wpft-offering-log-item .wpft-log-action { margin-right: 4px; }
.wpft-offering-log-item .wpft-log-offering-name { color: #c75c54; font-weight: 500; margin-right: 4px; }
.wpft-offering-log-item img.wpft-log-offering-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; }

/* Common Floating Actions */
.wpft-zongci-floating-actions {
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 10005;
    display: flex;
    flex-direction: column; /* 确保按钮垂直排列 */
    gap: 10px; /* 按钮之间的间距 */
}
/* 确保登录/用户中心按钮的特定类名（如果需要微调） */
.wpft-floating-action-button.wpft-fab-login,
.wpft-floating-action-button.wpft-fab-user {
    /* 如果需要，可以在这里添加特定于这两个按钮的样式 */
    /* 例如，如果它们的图标大小与其他按钮不同 */
}

/* 确保头像在按钮内正确显示 */
.wpft-floating-action-button .wpft-fab-icon img {
    width: 28px; /* 根据您的 wpft-floating-action-button 大小调整 */
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* 响应式调整 (与您现有的保持一致) */
@media screen and (max-width: 768px) {
    .wpft-zongci-floating-actions {
        right: 10px;
    }
    /* 其他 .wpft-floating-action-button 的响应式调整也应适用 */
}
body.admin-bar .wpft-zongci-floating-actions { top: calc(50% + (var(--wpft-admin-bar-height, 0px) / 2)); }
.wpft-floating-action-button { background-color:transparent; color: #03c8d4; border: 1px solid transparent; border-radius: 50%; width: 60px; height: 60px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s ease; text-decoration: none; font-size: 1.1em; line-height: 1.2; }
.wpft-floating-action-button:hover { background-color: #f0f0f0; color: #333; box-shadow: 0 4px 8px rgba(0,0,0,0.25); }
.wpft-floating-action-button .wpft-fab-icon { font-size: 1.4em; margin-bottom: 2px; }
.wpft-floating-action-button .wpft-fab-icon i { vertical-align: middle; }
.wpft-action-toggle-music.playing .wpft-fab-icon i::before { content: "\f028"; }
.wpft-action-toggle-music.paused .wpft-fab-icon i::before { content: "\f026"; }

/* Common Global Offerings Display (Bottom Bar) */
.wpft-zongci-global-offerings-display {
    position: fixed;
    bottom: var(--wpft-admin-bar-height, 0px);
    left: 0;
    width: 100%;
    background-color: transparent;
    padding: 18px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;
    z-index: 10001;
    min-height: 60px;
    max-height: 200vh; /* Effectively allows content to determine height up to a very large value */
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease-in-out;
}
body.wpft-modal-open .wpft-zongci-global-offerings-display {
    z-index: 9999; /* Lower than modals when modal is open */
}
.wpft-zongci-global-offerings-display .wpft-global-offering-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}
.wpft-zongci-global-offerings-display .wpft-global-offering-item img {
    max-width: 100%;
    max-height: 100%;
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.wpft-zongci-global-offerings-display .wpft-global-offering-item .count-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #d9534f;
    color: white;
    border-radius: 10px;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid #fff;
}
.wpft-zongci-global-offerings-display .wpft-loading-message,
.wpft-memorial-hall-offerings-display .wpft-loading-message,
.wpft-zongci-exterior-offerings-on-table .wpft-loading-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
}
.wpft-zongci-global-offerings-display .wpft-global-offering-item .offering-name-text { font-size: 0.85em; margin-bottom: 0; display: none; }

/* Common Purchasable Offerings Panel */
.wpft-zongci-purchasable-offerings-panel {
    display: none;
    position: fixed;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 10015;
    max-width: 550px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.wpft-zongci-purchasable-offerings-panel.active { display: flex !important; }
.wpft-purchasable-panel-header {position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-bottom: 1px solid #eee; background-color: #f8f8f8; flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.wpft-panel-header-title-group { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 200px; }
.wpft-purchasable-panel-header h4 { margin: 0; font-size: 1.1em; }
.wpft-panel-user-balance { font-size: 0.9em; color: #555; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.wpft-panel-user-balance .wpft-user-coins-display { font-weight: bold; color: #155724; }
.wpft-panel-user-balance .wpft-charge-button { padding: 2px 6px; font-size: 0.9em; line-height: 1.2; vertical-align: middle; }
.wpft-close-purchasable-panel { background: none; border: none; font-size: 1.8em; line-height: 1; color: #aaa; cursor: pointer; padding: 0 5px; font-weight: bold; flex-shrink: 0; }
.wpft-close-purchasable-panel:hover { color: #555; }
.wpft-purchasable-panel-body { padding: 15px;  -webkit-overflow-scrolling: touch; }
.wpft-offering-categories {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 15px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    gap: 8px;
}
.wpft-offering-category-tab {
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 15px;
    background-color: #f9f9f9;
    transition: all 0.2s ease;
}
.wpft-offering-category-tab div {
    padding: 5px 12px;
    font-size: 0.85em;
    color: #555;
    text-align: center;
    white-space: nowrap;
}
.wpft-offering-category-tab:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
}
.wpft-offering-category-tab.active {
    background-color: #0073aa;
    border-color: #006799;
}
.wpft-offering-category-tab.active div {
    color: #fff;
    font-weight: bold;
}
.wpft-purchasable-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.wpft-offering-card { border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px; text-align: center; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease-in-out; display: none; }
.wpft-offering-card:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.1); }
.wpft-offering-card-image { width: 100%; height: 90px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.wpft-offering-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wpft-offering-card-name { font-size: 0.9em; color: #333; margin-bottom: 5px; font-weight: 500; min-height: 2.4em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wpft-offering-card-price { font-size: 0.95em; color: #d9534f; font-weight: bold; margin-bottom: 8px; }
.wpft-offering-card-purchase-button { background-color: #e9f7ef; border: 1px solid #c3e6cb; color: #155724; padding: 6px 12px; font-size: 0.9em; border-radius: 3px; cursor: pointer; width: 100%; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease; }
.wpft-offering-card-purchase-button:hover { background-color: #d4edda; border-color: #b1dfbb; }
.wpft-offering-card-purchase-button.wpft-offering-loading { opacity: 0.7; cursor: wait; }
.wpft-purchasable-panel-footer-content { padding-top: 15px; border-top: 1px solid #eee; margin-top: 15px; }
.wpft-purchasable-panel-footer-content h5 { margin-top: 0; margin-bottom: 8px; font-size: 0.95em; }
.wpft-zongci-full-offering-log { font-size: 0.85em; }
.wpft-zongci-full-offering-log .log-entry { padding: 3px 0; border-bottom: 1px dotted #f0f0f0; display: flex; flex-wrap: wrap; gap: 5px; }
.wpft-zongci-full-offering-log .log-entry:last-child { border-bottom: none; }
.wpft-zongci-full-offering-log .log-user { font-weight: bold; }
.wpft-zongci-full-offering-log .log-time { color: #777; font-size:0.9em; }
.wpft-zongci-full-offering-log .log-offering { color: #d9534f; }

/* --- Zongci Interior Specific (Tablets) --- */
.wpft-zongci-container:not(.wpft-zongci-exterior-container):not(.wpft-memorial-hall-container) { /* Target only Zongci Interior */
    padding-bottom: calc(150px + 20px); /* Space for bottom global offerings display + padding */
}
.wpft-zongci-list { margin-top: 20px; position: relative; z-index: 1; }
.wpft-zongci-generation-row { display: flex; align-items: flex-start; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed #e0e0e0; }
.wpft-zongci-generation-row:last-child { margin-bottom: 0; border-bottom: none; }
.wpft-zongci-generation-label { flex: 0 0 60px; padding-top: 10px; font-size: 1.1em; font-weight: bold; color: #666; text-align: center; margin-right: 20px; }
.wpft-zongci-generation-tablets { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 15px; }
.wpft-zongci-group { display: flex; align-items: flex-end; gap: 10px;padding: 5px; background-color:transparent; width: auto; margin-bottom: 0; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.wpft-zongci-group--focused { background-color: #fffadf !important; box-shadow: 0 0 8px rgba(255, 193, 7, 0.6); border-color: #ffc107; }
.wpft-zongci-main-item { flex: 0 0 120px; text-align: center; border: none; padding: 0; background-color: transparent; box-shadow: none; }
a.wpft-paiwei-link { position: relative; display: inline-block; text-decoration: none; color: inherit; line-height: 0; }
img.wpft-paiwei-image { display: block; object-fit: contain; margin: 0 auto; }
.wpft-zongci-main-item img.wpft-paiwei-image { width: 110px; height: 250px; }
.wpft-zongci-spouse-item img.wpft-paiwei-image { width: 90px; height: 230px; }
.wpft-paiwei-text-overlay { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: 25%; height: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-orientation: upright; font-family: 'KaiTi', 'STKaiti', '楷体', serif; font-weight: bold; text-align: center; pointer-events: none; box-sizing: border-box; overflow: hidden; letter-spacing: 2px; }
.wpft-paiwei-text-overlay .char { display: block; line-height: 1.1; }
.wpft-zongci-main-item .wpft-paiwei-text-overlay { font-size: 13px; color: #B8860B; }
.wpft-zongci-spouse-item .wpft-paiwei-text-overlay { font-size: 13px; color: #B8860B; top: 15%; height: 65%; width: 30%; }
.wpft-zongci-main-item .wpft-zongci-item-name, .wpft-zongci-spouse-item .wpft-zongci-item-name { display: none; }
.wpft-zongci-spouse-item { flex: 0 0 100px; text-align: center; border: none; padding: 0; background-color: transparent; box-shadow: none; height: auto; display: flex; flex-direction: column; justify-content: flex-end; }
.wpft-zongci-spouse-item a.wpft-paiwei-link { display: flex; flex-direction: column; align-items: center; }
.wpft-zongci-spouse-type-indicator { font-size: 0.7em; color: #666; margin-top: 5px; display: none !important;  text-align: center; position: relative; z-index: 1; line-height: normal; }
.wpft-ancestor-tablet-container { text-align: center; margin-bottom: 40px; padding-top: 20px; border-bottom: 2px solid #c0a16b; padding-bottom: 30px; }
.wpft-ancestor-tablet { display: inline-block; border: none !important; padding: 0 !important; background-color: transparent !important; box-shadow: none !important; }
img.wpft-ancestor-paiwei-image { max-width: 180px; height: auto; border: none; box-shadow: none; }
.wpft-ancestor-paiwei-text-overlay { top: 28%; width: 18%; height: 45%; left: 50%; font-size: 22px; color: #4a2a00; letter-spacing: 4px; text-shadow: none; font-family: 'LiSu', '隶书', 'SimLi', serif; }
.wpft-ancestor-paiwei-text-overlay .char { line-height: 1.2; }

/* --- Zongci Exterior & Memorial Hall Common Background --- */
.wpft-zongci-exterior-full-bg,
.wpft-memorial-hall-full-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #222; /* Fallback color */
}

/* --- Zongci Exterior Specific Styles --- */
.wpft-zongci-exterior-container { /* Specifics for exterior scene */
    padding-bottom: 0;
    background-color: transparent !important;
}
.wpft-zongci-exterior-image-wrapper {
    width: 100%; max-width: 1024px; /* Example max width */
    padding-top: 60%; /* Aspect ratio for the background image area */
    position: relative; margin: 0 auto 20px auto; z-index: 1;
    padding-bottom: calc(150px + 20px); /* Space for bottom global offerings display */
    background-color: transparent; /* Ensure container itself is transparent */
}
.wpft-zongci-exterior-offerings-on-table {
    position: absolute;
    top: 65%; /* Adjust as needed based on your image */
    left: 30%; /* Adjust as needed */
    width: 40%; /* Adjust as needed */
    height: 15%; /* Adjust as needed */
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
    gap: 5px; padding: 5px; box-sizing: border-box;
    pointer-events: auto; z-index: 2;
}
.wpft-zongci-exterior-offerings-on-table .wpft-placed-offering-item,
.wpft-memorial-hall-offerings-display .wpft-placed-offering-item { /* Common style for placed items */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.8em;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    position: relative;
    padding: 2px 3px;
    min-width: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    width: 50px; /* Example size */
    height: 60px; /* Example size */
    margin: 2px;
}
.wpft-zongci-exterior-offerings-on-table .wpft-placed-offering-item img,
.wpft-memorial-hall-offerings-display .wpft-placed-offering-item img {
    width: 80%;
    max-height: 40px;
    object-fit: contain;
    margin-bottom: 1px;
}
.wpft-zongci-exterior-offerings-on-table .wpft-placed-offering-item .count-badge,
.wpft-memorial-hall-offerings-display .wpft-placed-offering-item .count-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background-color: #d9534f;
    color: white;
    border-radius: 50%;
    font-size: 0.8em;
    line-height: 1.2;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    box-sizing: border-box;
    font-weight: bold;
    text-align: center;
    border: 1px solid white;
}
.wpft-zongci-exterior-offerings-on-table .wpft-placed-offering-item.visible,
.wpft-memorial-hall-offerings-display .wpft-placed-offering-item.visible {
    opacity: 1;
}

/* --- Memorial Hall Specific Styles --- */
.wpft-memorial-hall-container {
    position: absolute; /* Changed for full-page layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    min-height: 0; /* Override general .wpft-zongci-container min-height */
    background-color: transparent !important;
    padding-bottom: 50px !important; /* Keep some space for bottom elements if any */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align tombstone and offerings to bottom */
    z-index: auto; /* Lower than overlays */
  }
.wpft-memorial-hall-tombstone-area {
    width: 100%;
    max-width: 600px; /* Max width for the tombstone */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* Push to bottom */
    position: relative;
    z-index: 100; /* Above offerings on table if they overlap */
    text-align: center; /* Center the image container if it's inline-block */
}
.wpft-tombstone-image-container {
    position: relative;
    display: inline-block; /* To allow centering via text-align on parent */
    max-width: 100%; /* --- 新增/修改: 确保容器不超过父级 --- */
    line-height: 0; /* Remove space below image */
}
.wpft-tombstone-base-image {
    max-width: 100%;
    display: block;
    min-height: 450px; /* Ensure it has some height */
    vertical-align: bottom; /* Align to bottom if container has extra space */
}
.wpft-tombstone-inscription {
    position: absolute;
    /* --- 新增/修改开始: 精确定位碑文区域 --- */
    top: 10.5%;
    left: 27.5%;
    width: 45%;
    height: 58%;
    /* --- 新增/修改结束 --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align avatars to top */
    box-sizing: border-box;
}
.wpft-tombstone-avatars-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15%; /* Space between avatars if two */
    width: 60%; /* Relative to inscription area */
    margin-bottom: 2%; /* Space below avatars */
    padding-top: 10%; /* Push avatars down a bit from top of inscription area */
    flex-shrink: 0; /* Don't shrink avatar container */
    transition: gap 0.3s ease;
}
.wpft-tombstone-avatar-item {
    flex-shrink: 0;
}
.wpft-tombstone-avatar-item img {
    width: clamp(28px, 6vmin, 38px); /* Responsive avatar size */
    height: clamp(28px, 6vmin, 38px);
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #4a4a4a; /* Darker border for better visibility on light tombstones */
    background-color: #ccc; /* Fallback if image fails */
    transition: width 0.3s ease, height 0.3s ease;
}
.wpft-tombstone-inscription-content {
    display: flex;
    flex-direction: row;
    width: 70%;
    flex-grow: 1; /* Take remaining space in inscription area */
    align-items: stretch; /* Make columns same height (if parent is flex and has height) */
    justify-content: center;
    max-height: 75%; /* Limit vertical space for text blocks */
    padding: 10px 1%; /* Padding within text area */
    box-sizing: border-box;
    gap: 0.5%; /* --- 新增/修改: 统一的列间距 --- */
}
.wpft-tombstone-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align text to top of column */
    font-family: 'KaiTi', 'STKaiti', '楷体', serif;
    color: #E0E0E0; /* Light color for dark tombstone */
    box-sizing: border-box;
    padding: 0; /* --- 新增/修改: 移除内边距，使用gap --- */
    flex: 1 1 0; /* Allow columns to grow and shrink evenly */
}
.wpft-tombstone-textblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.4; /* Spacing between characters in a column */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); /* Slight shadow for readability */
}
.wpft-tombstone-textblock.date-block {
    margin-top: 0em; /* Space above date blocks */
}
.wpft-tombstone-column .char {
    display: block;
    font-size: clamp(0.8em, 2vmin, 1.0em); /* Responsive char size */
    transition: font-size 0.3s ease;
}
.wpft-tombstone-column .memorial-title,
.wpft-tombstone-column .surname { /* If you use separate surname spans */
    font-size: clamp(0.9em, 2.3vmin, 1.2em); /* Larger for titles/surnames */
    font-weight: bold;
}
.wpft-tombstone-column .given-name {}
.wpft-tombstone-column .central-phrase-char { /* For "之墓" if styled this way */
    font-size: clamp(1.1em, 3.2vmin, 1.8em);
    font-weight: bold;
    line-height: 1.1;
    margin-top: 0.2em; /* Space above "之墓" */
}
.wpft-tombstone-column .date-prefix {
    font-size: clamp(0.75em, 1.9vmin, 0.95em);
    font-weight: bold;
    margin-bottom: 0.3em;
}
.wpft-tombstone-textblock.date-block .char {
    font-size: clamp(0.6em, 1.5vmin, 0.75em); /* Smaller for date digits */
    line-height: 1.3;
}
.wpft-tombstone-inscription-content.multi-person {
    justify-content: center; /* Center all columns */
}
.wpft-tombstone-inscription-content.multi-person .wpft-tombstone-column {
    /* Flexbox will handle the width distribution */
}
.wpft-tombstone-inscription-content.multi-person .wpft-tombstone-central-phrase-col {
    flex-grow: 0; /* Don't let the "之墓" column grow */
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Push "之墓" to bottom */
}
.wpft-tombstone-central-phrase-block {
    width: 100%;
    text-align: center;
    font-family: 'KaiTi', 'STKaiti', '楷体', serif;
    color: #E0E0E0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Don't shrink this block */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wpft-tombstone-inscription-content.multi-person .wpft-tombstone-central-phrase-col .wpft-tombstone-central-phrase-block {
    padding-bottom: 4em; /* Push "之墓" further down for two people */
}
.wpft-tombstone-central-phrase-block .char { /* For "之墓" chars specifically */
    display: block;
    font-size: clamp(1.2em, 3.5vmin, 2.0em);
    font-weight: bold;
    line-height: 1.1;
}
.wpft-tombstone-inscription-content.single-person {
    justify-content: center;
    gap: 3%;
    max-height: 100%; /* Allow it to use full height of inscription area */
}
.wpft-tombstone-inscription-content.single-person .single-name-col {
    flex-basis: 36%;
    text-align: center; /* Center "之墓" within its block */
    }
.wpft-tombstone-inscription-content.single-person .single-birth-col,
.wpft-tombstone-inscription-content.single-person .single-death-col {
    flex-basis: 30%;
    justify-content: flex-start; /* Align date text to top */
}
.wpft-memorial-hall-offerings-display {
    position: absolute;
    bottom: 5%; /* Position above bottom edge */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 500px; /* Max width for the offering table area */
    height: auto;
    min-height: 80px; /* Minimum height for the table */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* Align items to bottom of their row */
    justify-content: center;
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
    z-index: 10001; /* Above background, below other modals */
}

/* --- 新增/修改开始: 多人纪念堂的自适应样式 --- */
.person-count-3 .wpft-tombstone-avatar-item img { width: clamp(24px, 4.5vmin, 32px); height: clamp(24px, 4.5vmin, 32px); }
.person-count-3.wpft-tombstone-avatars-container { gap: 10%; }
.person-count-3 .wpft-tombstone-column .char { font-size: clamp(0.6em, 1.6vmin, 0.85em); }
.person-count-3 .wpft-tombstone-column .memorial-title { font-size: clamp(0.7em, 1.9vmin, 1em); }
.person-count-3 .wpft-tombstone-column .central-phrase-block .char { font-size: clamp(1em, 2.8vmin, 1.6em); }

.person-count-4 .wpft-tombstone-avatar-item img { width: clamp(20px, 4vmin, 28px); height: clamp(20px, 4vmin, 28px); }
.person-count-4.wpft-tombstone-avatars-container { gap: 6%; }
.person-count-4 .wpft-tombstone-column .char { font-size: clamp(0.5em, 1.4vmin, 0.75em); }
.person-count-4 .wpft-tombstone-column .memorial-title { font-size: clamp(0.6em, 1.6vmin, 0.9em); }
.person-count-4 .wpft-tombstone-column .central-phrase-block .char { font-size: clamp(0.9em, 2.5vmin, 1.5em); }

/* Catch-all for 5 or more */
[class*="person-count-"]:not(.person-count-1):not(.person-count-2):not(.person-count-3):not(.person-count-4) .wpft-tombstone-avatar-item img { width: clamp(18px, 3.5vmin, 24px); height: clamp(18px, 3.5vmin, 24px); }
[class*="person-count-"]:not(.person-count-1):not(.person-count-2):not(.person-count-3):not(.person-count-4).wpft-tombstone-avatars-container { gap: 4%; }
[class*="person-count-"]:not(.person-count-1):not(.person-count-2):not(.person-count-3):not(.person-count-4) .wpft-tombstone-column .char { font-size: clamp(0.4em, 1.2vmin, 0.65em); }
[class*="person-count-"]:not(.person-count-1):not(.person-count-2):not(.person-count-3):not(.person-count-4) .wpft-tombstone-column .memorial-title { font-size: clamp(0.5em, 1.4vmin, 0.8em); }
[class*="person-count-"]:not(.person-count-1):not(.person-count-2):not(.person-count-3):not(.person-count-4) .wpft-tombstone-column .central-phrase-block .char { font-size: clamp(0.8em, 2.2vmin, 1.4em); }
/* --- 新增/修改结束 --- */


/* --- Fullscreen Body Classes for Scenes --- */
body.wpft-memorial-fullscreen-active,
body.wpft-zongci-exterior-active {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.wpft-memorial-fullscreen-active .main,
body.wpft-memorial-fullscreen-active .content-wrap,
body.wpft-memorial-fullscreen-active .content,
body.wpft-memorial-fullscreen-active .single-content,
body.wpft-memorial-fullscreen-active .article-content,
body.wpft-memorial-fullscreen-active #primary,
body.wpft-memorial-fullscreen-active #content,
body.wpft-memorial-fullscreen-active #page,
body.wpft-memorial-fullscreen-active .site-content,
body.wpft-memorial-fullscreen-active .site-main,
body.wpft-zongci-exterior-active .main,
body.wpft-zongci-exterior-active .content-wrap,
body.wpft-zongci-exterior-active .content,
body.wpft-zongci-exterior-active .single-content,
body.wpft-zongci-exterior-active .article-content,
body.wpft-zongci-exterior-active #primary,
body.wpft-zongci-exterior-active #content,
body.wpft-zongci-exterior-active #page,
body.wpft-zongci-exterior-active .site-content,
body.wpft-zongci-exterior-active .site-main
{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important; /* Ensure full viewport height */
    position: relative !important; /* Or static, depending on theme */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center content horizontally */
    justify-content: center !important; /* Center content vertically if desired */
}
body.wpft-zongci-exterior-active .site-content,
body.wpft-zongci-exterior-active .site-main {
    height: 100% !important; /* Ensure main content area takes full height */
}
body.wpft-memorial-fullscreen-active .article-content > div:first-child, /* Assuming plugin content is first div */
body.wpft-zongci-exterior-active .article-content > div:first-child
{
     flex-grow: 1; /* Allow plugin container to take available space */
     display: flex;
     flex-direction: column;
     position: relative; /* For absolute positioning of children like danmaku */
}
/* Zongci Exterior specific container adjustments for fullscreen */
.wpft-zongci-exterior-container {
    width: 100%;
    height: 100vh; /* Full viewport height */
    padding: 0; /* Reset padding from .wpft-zongci-container */
    box-sizing: border-box;
    background-color: transparent !important;
    min-height: 0 !important; /* Override general .wpft-zongci-container */
    overflow-y: auto; /* Allow scrolling if content overflows (e.g., logs) */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to top for exterior */
    z-index: 1; /* Above background, below overlays */
    padding-top: var(--wpft-admin-bar-height, 0px); /* Account for admin bar */
}
@media screen and (max-width: 992px) {
    .wpft-zongci-exterior-container {
        padding-top: var(--wpft-admin-bar-height, 0px); /* Ensure admin bar space */
    }
}
.wpft-zongci-exterior-image-wrapper { /* Adjust wrapper within fullscreen */
    width: 100%;
    max-width: 1024px; /* Or other max as desired */
    padding-top: 60%; /* Maintain aspect ratio */
    position: relative; /* For absolute positioning of offerings table */
    margin: 20px auto; /* Center and provide some margin */
    padding-bottom: 20px; /* Space below image area if needed */
    background-color: transparent;
    z-index: 1;
    flex-shrink: 0; /* Don't shrink this area */
}

/* Hide original comments section when modal is used */
#wpft-comments-original-location,
.wpft-comments-original-wrapper,
#comments, /* Common WordPress comments wrapper ID */
.comments-area /* Common WordPress comments wrapper class */
{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* --- Responsive Adjustments for Scenes --- */
@media screen and (min-width: 993px) {
    .wpft-zongci-container:not(.wpft-zongci-exterior-container):not(.wpft-memorial-hall-container) { /* Only Zongci Interior */
        padding-left: calc(260px + 20px); /* Space for fixed offering log */
    }
    .wpft-zongci-offering-log-scroll {
        left: 10px; /* Position log on the left for wider screens */
    }
}

@media screen and (max-width: 992px) {
    .wpft-zongci-container { /* Base for all scenes */
        padding-left: 15px;
        padding-right: 70px; /* Less space for smaller floating actions */
        padding-top: calc(var(--wpft-admin-bar-height, 0px) + 90px + 20px); /* Less space for danmaku */
    }
    .wpft-zongci-exterior-container .wpft-zongci-exterior-image-wrapper {
         padding-bottom: 30px; /* Less padding at bottom */
    }
    .wpft-zongci-offering-log-scroll {
        width: 250px !important;
        height: 100px !important;
        bottom: 70%; /* Adjust position */
        left: 10px !important;
    }
    .wpft-zongci-danmaku-area { height: 90px; }
    .wpft-zongci-generation-row { flex-direction: column; align-items: center; } /* For Zongci Interior */
    .wpft-zongci-generation-label { margin-bottom: 15px; margin-right: 0; flex-basis: auto; } /* For Zongci Interior */
    .wpft-zongci-generation-tablets { justify-content: center; } /* For Zongci Interior */

    .wpft-zongci-global-offerings-display { height: auto; max-height: 200vh; gap: 8px 10px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item { width: 55px; height: 55px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item img { width: 60px; height: 60px; }
}

@media screen and (max-width: 768px) {
    .wpft-zongci-floating-actions { right: 10px; }
    .wpft-floating-action-button { width: 60px; height: 60px; }
    .wpft-floating-action-button .wpft-fab-icon { font-size: 1.2em; }
    .wpft-floating-action-button .wpft-fab-text { font-size: 1.2em; } /* Slightly larger text for small buttons */
    .wpft-zongci-container { padding-right: 65px; padding-left: 10px; }
    .wpft-zongci-search-controls { min-width: 280px; } /* Ensure popup search is usable */
    .wpft-zongci-exterior-container .wpft-zongci-exterior-image-wrapper {
        padding-bottom: 50px;
    }
    .wpft-zongci-offering-log-scroll {
        width: 280px !important; 
        height: 80px !important;
        bottom: 70%;
        left:0px!important;
        padding: 5px; }
    
    .wpft-offering-log-item { font-size: 0.7em; }
    .wpft-offering-log-item img.wpft-log-avatar { width: 16px; height: 16px; }
    .wpft-offering-log-item img.wpft-log-offering-icon { width: 12px; height: 12px; }
    .wpft-zongci-exterior-image-wrapper { max-width: 100%; padding-top: 150%; } /* More vertical for mobile exterior */

    .wpft-zongci-global-offerings-display { height: auto; max-height: 200vh; gap: 5px 8px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item { width: 50px; height: 50px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item img { width: 60px; height: 60px; }

    .wpft-purchasable-items-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .wpft-offering-card-image { height: 70px; }
    .wpft-offering-card-name { font-size: 0.85em; }
    .wpft-offering-card-price { font-size: 0.9em; }
    .wpft-offering-card-purchase-button { font-size: 0.85em; padding: 5px 10px; }

    .popup-menu { width: calc(100% - 40px); }
    .menu-list a { padding: 8px 12px; font-size: 0.9em; }

    /* Memorial Hall Tombstone Responsive for smaller screens */
    .wpft-tombstone-inscription {
        top: 20%; height: 60%; /* Maintain relative position */
    }
    .wpft-tombstone-avatar-item img { width: clamp(25px, 8vmin, 40px); height: clamp(25px, 8vmin, 40px); }
    .wpft-tombstone-column .char { font-size: clamp(0.6em, 2.5vmin, 1em); line-height: 1.4; }
    .wpft-tombstone-column .memorial-title, .wpft-tombstone-column .surname { font-size: clamp(0.8em, 3vmin, 1.3em); }
    .wpft-tombstone-column .date-block .char { font-size: clamp(0.4em, 1.6vmin, 0.7em); line-height: 1.3;}
    .wpft-tombstone-column .central-phrase .char { font-size: clamp(0.9em, 3.5vmin, 1.8em); }

    .wpft-memorial-hall-offerings-display {
        width: 90%; /* Wider offering table on smaller screens */
        bottom: 3%;
    }
}

@media screen and (max-width: 480px) {
    .wpft-zongci-global-offerings-display { height: auto; max-height: 200vh; gap: 5px; padding: 18px 10px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item { width: 45px; height: 45px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item img { width: 60px; height: 60px; }
    .wpft-zongci-global-offerings-display .wpft-global-offering-item .count-badge { min-width: 12px; height: 12px; font-size: 0.7em; top: -2px; right: -2px; }

    .wpft-floating-action-button { width: 60px; height: 60px; }
    .wpft-floating-action-button .wpft-fab-icon { font-size: 1.1em; }
    .wpft-floating-action-button .wpft-fab-text { font-size: 1.2em; line-height: 1; margin-top: 1px; }
    .wpft-zongci-container { padding-right: 55px; padding-left: 5px; padding-top: calc(var(--wpft-admin-bar-height, 0px) + 60px + 20px); }
    .wpft-zongci-exterior-container .wpft-zongci-exterior-image-wrapper {
        padding-bottom: calc(80px + 10px); /* Space for global offerings at bottom */
    }
    .wpft-zongci-danmaku-area { height: 60px; }
    .wpft-danmaku-item { padding: 3px 10px; font-size: 0.8em; }
    .wpft-danmaku-item img.wpft-danmaku-avatar { width: 18px; height: 18px; }
    .wpft-zongci-search-controls { min-width: 250px; width: calc(100% - 20px); left: 10px !important; right: 10px !important; padding: 10px; }
    .wpft-zongci-exterior-offerings-on-table .wpft-placed-offering-item { max-width: 15%; /* Adjust for very small screens */ }

    .wpft-zongci-offering-log-scroll {
        bottom: 70%; /* Above global offerings */
        width: 180px !important;
        height: 70px !important;
    }

    .wpft-purchasable-items-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .wpft-offering-card-image { height: 60px; }
    .popup-menu { width: calc(100% - 20px); }
    .menu-list a { padding: 8px 12px; font-size: 0.9em; }

    /* Memorial Hall Tombstone Responsive for very small screens */
    .wpft-tombstone-inscription {
        top: 18%; height: 60%;
    }
    .wpft-tombstone-avatar-item img { width: clamp(20px, 7vmin, 35px); height: clamp(20px, 7vmin, 35px); }
    .wpft-tombstone-column .char { font-size: clamp(0.5em, 2.2vmin, 0.9em); line-height: 1.3; }
    .wpft-tombstone-column .memorial-title, .wpft-tombstone-column .surname { font-size: clamp(0.7em, 2.8vmin, 1.1em); }
    .wpft-tombstone-column .date-block .char { font-size: clamp(0.35em, 1.5vmin, 0.6em); line-height: 1.2; }
    .wpft-tombstone-column .central-phrase .char { font-size: clamp(0.8em, 3vmin, 1.6em); }
    .wpft-memorial-hall-offerings-display {
        width: 90%;
        bottom: 2%;
    }
}

/* --- Starry Sky Background Styles --- */

/* 1. The main canvas for our stars */
#dynamic-star-sky {
    position: fixed; /* 固定在视窗上，不随页面滚动 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    z-index: -1; /* 确保它在所有内容的后面 */
}

/* 2. Styles for the larger, starburst stars (generated by JS) */
.star {
    position: absolute;
    background-color: #ffffff;
    border-radius: 50%;
    /* Central glow effect */
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
    /* Animation for the whole star unit (core + rays) */
    animation-name: star-shimmer;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 3. Starburst effect using pseudo-elements as sharp rays */
.star::before,
.star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1px;
}

/* Horizontal Ray */
.star::before {
    width: 1000%; /* Make ray very long */
    height: 1px; /* Make ray very thin */
    margin-left: -500%; /* Center it */
    margin-top: -0.5px; /* Center it */
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0)
    );
}

/* Vertical Ray */
.star::after {
    width: 1px; /* Make ray very thin */
    height: 1000%; /* Make ray very long */
    margin-left: -0.5px; /* Center it */
    margin-top: -500%; /* Center it */
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0)
    );
}

/* 4. NEW: Styles for the large circular stars */
.star-large-circle {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.4); /* Softer, wider glow */
    animation-name: pulse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 5. Animation Keyframes */
@keyframes star-shimmer {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 6. Styles for the box-shadow generated stars (star dust and small stars) */
#stars-small, #stars-medium, #stars-tiny {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    border-radius: 50%;
}
/* Twinkle animation for star dust */
@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

#stars-tiny {
    animation: twinkle 12s infinite;
}
#stars-small {
    animation: twinkle 9s infinite;
}
#stars-medium {
    animation: twinkle 6s infinite;
}