/* ============================================================
 * 时序001 · 时光馆（story.css）
 * 全屏卡片滑动流 / 底部抽屉 / 光影效果（三级降级配合 story.js）
 * 主色：#F49E4C 暖橙  背景：#FFF8F0 奶油  文字：#5D3A1A 深棕
 * 窗口D：标签角标 / 标签筛选条 / 发布抽屉「参与活动拿大奖」样式在文件末尾
 * ============================================================ */

:root {
    --story-primary: #F49E4C;
    --story-primary-deep: #E8822E;
    --story-bg: #FFF8F0;
    --story-accent: #5D3A1A;
    --story-white: #FFFFFF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--story-bg); }

/* ============ 全屏卡片流（scroll-snap + dvh 兜底） ============ */
.story-flow {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.story-flow::-webkit-scrollbar { display: none; }

.story-card {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* iOS 地址栏高度兜底 */
    scroll-snap-align: start;
    scroll-snap-stop: auto; /* 动态注入卡片时 always 会卡死滚动（微信X5），改 auto */
    overflow: hidden;
    background: #FFF0DC;
}

/* ---------- 背景图（懒加载：data-src 就绪后切换） ---------- */
.story-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F7C992; /* 图片加载前暖橙兜底，不白屏 */
    opacity: 0;
    transition: opacity .6s ease;
}
.story-bg.is-loaded { opacity: 1; }

/* 半透明遮罩：保证白字可读 */
.story-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 12, 4, .18) 0%, rgba(20, 12, 4, .06) 40%, rgba(20, 12, 4, .55) 100%);
}

/* ---------- 文案区 ---------- */
.story-content {
    position: absolute;
    left: 32px;
    right: 88px;
    top: 22%;
    z-index: 2;
}
.story-text {
    margin: 0;
    color: var(--story-white);
    font-size: 26px;
    line-height: 1.65;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    word-break: break-word;
}
.story-author {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    letter-spacing: 1px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ---------- 右侧操作按钮（竖排） ---------- */
.story-actions {
    position: absolute;
    right: 16px;
    bottom: 22%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.sa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 0;
    background: rgba(0, 0, 0, .25);
    border-radius: 50%;
    color: #fff;
    width: 52px;
    height: 52px;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sa-btn:active { transform: scale(.92); }
.sa-num { font-size: 11px; color: rgba(255, 255, 255, .92); }
.sa-btn.is-liked svg { fill: #F49E4C; stroke: #F49E4C; animation: burst .45s ease; }

@keyframes burst {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---------- 光影粒子层（低端机关闭，见 story.js） ---------- */
.story-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.story-particles.is-paused { display: none; }

/* 光晕呼吸（中高端机） */
.story-card.has-glow .story-veil::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 38%;
    left: 15%;
    top: 8%;
    background: radial-gradient(ellipse at center, rgba(244, 158, 76, .28) 0%, rgba(244, 158, 76, 0) 70%);
    animation: breath 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes breath {
    0%, 100% { opacity: .45; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.08); }
}

/* ---------- 空态 ---------- */
.story-empty {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--story-accent);
    font-size: 18px;
    letter-spacing: 1px;
    background: linear-gradient(160deg, #FFF8F0, #FFF0DC);
}

/* ---------- 发布按钮 ---------- */
.story-publish {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--story-primary), var(--story-primary-deep));
    color: #fff;
    box-shadow: 0 6px 20px rgba(232, 130, 46, .4);
}
.story-publish:active { transform: scale(.92); }
.story-publish svg { display: block; }

/* ============ 时光卡片分享层 ============ */
.share-mask {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 16, 6, .72);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.share-mask.is-open { opacity: 1; pointer-events: auto; }
.share-box {
    width: min(86vw, 380px);
    background: #FFF8F0;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.share-img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    object-fit: cover;
    background: #F7B26D;
}
.share-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.share-actions button {
    flex: 1;
    height: 44px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.share-save { background: linear-gradient(135deg, var(--story-primary), var(--story-primary-deep)); color: #fff; }
.share-close { background: #F3E3D0; color: #5D3A1A; }
.share-hint {
    margin: 10px 0 2px;
    text-align: center;
    font-size: 12px;
    color: #8C8C8C;
}

/* ============ 底部抽屉（发布 / 回应共用） ============ */
.drawer-mask {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(30, 18, 8, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.drawer-mask.is-open { opacity: 1; pointer-events: auto; }

.story-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    max-height: 80vh;
    max-height: 80dvh;
    background: var(--story-bg);
    border-radius: 20px 20px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(102%);
    transition: transform .32s cubic-bezier(.22, .9, .36, 1);
    display: flex;
    flex-direction: column;
}
.story-drawer.is-open { transform: translateY(0); }
.drawer-bar {
    width: 44px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: #E8D8C2;
}
.drawer-title { margin: 0 0 14px; color: var(--story-accent); font-size: 18px; }

.drawer-field { margin-bottom: 12px; }
.drawer-field textarea {
    width: 100%;
    border: 1px solid #EAD9C6;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    color: var(--story-accent);
    background: #FFFDF9;
    resize: none;
    outline: none;
}
.drawer-field textarea:focus { border-color: var(--story-primary); }
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px dashed #E8B98A;
    border-radius: 10px;
    color: var(--story-accent);
    font-size: 14px;
    background: #FFFDF9;
}
.drawer-author { display: flex; align-items: center; gap: 8px; color: var(--story-accent); font-size: 14px; }
.drawer-author input {
    width: 110px;
    border: 1px solid #EAD9C6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--story-accent);
    background: #FFFDF9;
    outline: none;
}
.drawer-preview { margin-bottom: 12px; }
.drawer-preview img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #EAD9C6;
}
.drawer-tip { min-height: 18px; margin: 0 0 8px; color: #C77E2E; font-size: 13px; }
.drawer-submit {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--story-primary), var(--story-primary-deep));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
}
.drawer-submit:disabled { opacity: .6; }

/* ---------- 回应抽屉 ---------- */
.comment-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    min-height: 40px;
    max-height: 38vh;
}
.comment-list li {
    padding: 12px 4px;
    border-bottom: 1px dashed #EAD9C6;
}
.comment-list .cm-name { color: var(--story-primary-deep); font-size: 13px; }
.comment-list .cm-txt { color: var(--story-accent); font-size: 15px; line-height: 1.6; margin: 4px 0 2px; }
.comment-list .cm-time { color: #B99B7D; font-size: 11px; }
.comment-list .cm-empty { color: #B99B7D; text-align: center; padding: 18px 0; font-size: 14px; }

.comment-form { display: flex; gap: 10px; }
.comment-form input {
    flex: 1;
    border: 1px solid #EAD9C6;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 15px;
    background: #FFFDF9;
    color: var(--story-accent);
    outline: none;
}
.comment-form button {
    border: 0;
    border-radius: 999px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--story-primary), var(--story-primary-deep));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* ---------- 性能降级：低端机关闭动画与模糊 ---------- */
html.story-low .story-card.has-glow .story-veil::after { display: none; }
html.story-low .sa-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .35); }

/* ============================================================
 * 窗口D：时光标签角标 / 标签筛选条 / 发布抽屉「参与活动拿大奖」
 * 风格沿用卡片主色（暖橙 #F49E4C / 深棕 #5D3A1A）
 * ============================================================ */

/* ---------- 标签角标：署名下方胶囊排（点击 → /story.php?tag=XX） ---------- */
.story-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.story-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(244, 158, 76, .22);
    border: 1px solid rgba(255, 226, 186, .6);
    color: #FFF3E0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .5px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .2s, transform .2s;
}
.story-tag::before { content: "#"; opacity: .7; margin-right: 2px; }
.story-tag:active { transform: scale(.96); }
html.story-low .story-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .32); }

/* ---------- 标签筛选条：?tag=XX 时顶部浮条（含「查看全部」返回入口） ---------- */
.story-tagbar {
    position: fixed;
    left: 50%;
    top: calc(12px + env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 92vw;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(30, 18, 8, .72);
    border: 1px solid rgba(244, 158, 76, .35);
    color: #FFF3E0;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.story-tagbar-label { color: rgba(255, 243, 224, .6); }
.story-tagbar-name { color: #F49E4C; font-weight: 700; }
.story-tagbar-count { color: rgba(255, 243, 224, .7); }
.story-tagbar-all { color: #FFF3E0; text-decoration: none; border-bottom: 1px solid rgba(255, 243, 224, .5); }

/* ---------- 发布抽屉：参与活动拿大奖（卡片内活动单选列表；无进行中活动时该块不渲染） ---------- */
.drawer-act {
    padding: 12px 14px;
    border: 1px dashed #E8B98A;
    border-radius: 12px;
    background: #FFFDF7;
}
.drawer-act-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #5A3A1A;
}
.drawer-act-options {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 34vh;
    overflow-y: auto; /* 活动较多时可滚动，避免抽屉被撑高 */
}
.drawer-act-options li { margin: 0 0 6px; }
.drawer-act-options li:last-child { margin-bottom: 0; }
.drawer-act-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid #E8D5B5;
    border-radius: 10px;
    background: #FFFDF9;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.drawer-act-option input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #D9A94E;
}
.drawer-act-name {
    font-size: 14px;
    color: #5A3A1A;
    line-height: 1.5;
    word-break: break-word;
}
/* 选中态：两条规则必须分开写！
 * 若把 :has(...) 与 .is-selected 写在同一选择器列表里，不支持 :has() 的浏览器
 * 会判定整条规则无效 → 连 .is-selected 兜底样式一起被丢弃；拆开后老浏览器仍能靠 JS 加类生效。 */
.drawer-act-option:has(input:checked) {
    border-color: #D9A94E;
    background: linear-gradient(150deg, #FFF7E3, #FFEFC9);
}
.drawer-act-option.is-selected {
    border-color: #D9A94E;
    background: linear-gradient(150deg, #FFF7E3, #FFEFC9);
}
.drawer-act-tip {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #B08A5A;
}