/* ══════════════════════════════════════════════════════════
   时间感知面板 · 贴底抽屉 · 杂志留白风
   ──────────────────────────────────────────────────────────
   关键修复：从「居中浮窗」改为「贴底抽屉」(bottom:0 + translateY)。
   居中浮窗在 iOS 键盘弹起时会被布局视口整体上推顶歪；贴底抽屉锚定
   屏幕底边，键盘弹起也不会被顶飞。
   配色全部走 --tp-* 令牌，夜间只在 dark-mode.css 覆盖令牌值（不硬编码）。
   全程无毛玻璃（backdrop-filter:none），与 回响/星汇/琳琅 同规矩。
   ══════════════════════════════════════════════════════════ */

/* ── 令牌：日间（中性杂志留白，1:1 对齐美化文件）── */
#time-popup-mask,
#time-popup {
    --tp-mask-bg: rgba(0, 0, 0, 0.3);
    --tp-bg: #ffffff;
    --tp-text-title: #000000;
    --tp-text-main: #111111;
    --tp-text-sub: #999999;
    --tp-border: #e0e0e0;
    --tp-accent: #000000;
    --tp-accent-text: #ffffff;
    --tp-hover: rgba(0, 0, 0, 0.03);
}

/* ══════ 遮罩（无毛玻璃）══════ */
#time-popup-mask {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: var(--tp-mask-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 99999 !important;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
}
#time-popup-mask.show { opacity: 1; pointer-events: auto; }

/* ══════ 弹窗主体（贴底抽屉）══════ */
#time-popup {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important;
    top: auto !important; right: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    background: var(--tp-bg);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 32px 32px 0 0;
    /* 内边距对齐美化文件 36/24/48，底部再加 home indicator 安全区 */
    padding: 36px 24px calc(env(safe-area-inset-bottom, 0px) + 48px);
    z-index: 100000 !important;
    margin: 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.06);
    opacity: 1; /* 抽屉靠 transform 收起，不用 opacity */
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#time-popup.show { transform: translateY(0); }

/* ══════ 标题 ══════ */
.time-popup-title {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--tp-text-sub);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin: 0 0 32px 0;
    padding: 0;
}
.time-popup-title::after { display: none; }

/* ══════ 模式切换按钮（居中下划点导航）══════ */
.time-mode-btns {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
}
.time-mode-btns button {
    flex: none;
    padding: 4px 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tp-text-sub);
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease;
}
.time-mode-btns button.active {
    background: transparent;
    color: var(--tp-text-title);
    font-weight: 700;
    box-shadow: none;
}
.time-mode-btns button.active::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--tp-accent);
}

/* ══════ 输入区容器 ══════
   核心：容器本身常驻 flex（让确认按钮永远在）；
   只在非剧情模式隐藏「选择器行 + 流速区」，确认按钮保留。 */
#fiction-time-inputs {
    display: flex !important;
    flex-direction: column;
}
#fiction-time-inputs:not(.show) .fiction-inputs-row,
#fiction-time-inputs:not(.show) #fiction-flow-speed {
    display: none !important;
}
#fiction-time-inputs.show .fiction-inputs-row,
#fiction-time-inputs.show #fiction-flow-speed {
    animation: tpFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tpFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════ 剧情时间：大号衬线排版 ══════ */
.fiction-inputs-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}
.custom-select {
    flex: none !important;
    position: relative;
}

.select-display {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    font-family: "Georgia", "Times New Roman", "Songti SC", serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--tp-text-title);
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s, color 0.2s;
}
.select-display:active { transform: none; }
div.select-display:hover { opacity: 0.55; }
.select-display.open {
    background: transparent;
    box-shadow: none;
    font-style: italic;
    color: var(--tp-accent);
}
.select-display::after { display: none !important; }

#cs-hour .select-display,
#cs-minute .select-display {
    font-size: 64px;
    letter-spacing: -2px;
}
/* 时:分之间的大号细体冒号（对齐美化文件 14 : 30） */
.time-colon {
    font-family: "Georgia", "Times New Roman", "Songti SC", serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    color: var(--tp-text-title);
    margin: 0 -4px;
    align-self: center;
}

/* 年份手填框（type=number）：同款衬线，无边框 */
input.select-display,
#fiction-year {
    width: 84px;
    text-align: center;
    outline: none;
    border: none !important;
    background: transparent !important;
    -moz-appearance: textfield;
    font-family: "Georgia", "Times New Roman", "Songti SC", serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    color: var(--tp-text-title) !important;
    line-height: 1;
    letter-spacing: -1px;
    padding: 0 !important;
    box-sizing: border-box;
}
input.select-display::-webkit-inner-spin-button,
input.select-display::-webkit-outer-spin-button,
#fiction-year::-webkit-inner-spin-button,
#fiction-year::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
input.select-display:focus,
#fiction-year:focus {
    color: var(--tp-accent) !important;
    font-style: italic;
    box-shadow: none !important;
    background: transparent !important;
}

/* ══════ 下拉列表（往上弹的悬浮卡）══════ */
.select-dropdown {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 120px;
    max-height: 200px !important;
    overflow-y: auto !important;
    background: var(--tp-bg);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 0;
    z-index: 320;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--tp-border) transparent;
}
.select-dropdown.open {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.select-dropdown::-webkit-scrollbar { width: 4px; }
.select-dropdown::-webkit-scrollbar-track { background: transparent; }
.select-dropdown::-webkit-scrollbar-thumb {
    background: var(--tp-border); border-radius: 2px;
}
.select-option {
    padding: 12px 0;
    text-align: center;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 16px;
    color: var(--tp-text-main);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.select-option:hover { background: var(--tp-hover); }
.select-option:active { transform: none; }
.select-option.selected {
    color: var(--tp-accent);
    font-weight: 700;
    font-style: italic;
    background: transparent;
}

/* ══════ 字体权威覆盖 ══════
   实测(DevTools)：面板数字被全局规则继承/压成了 Nunito sans-serif，我的裸类规则
   (.select-display 等，特异性 0,0,1,0) 在级联里输了。这里用 #time-popup 提特异性
   (1,0,1,0) + !important 把衬线栈钉死，杜绝被任何全局 sans-serif 规则盖掉。 */
#time-popup .select-display,
#time-popup .time-colon,
#time-popup .select-option,
#time-popup #fiction-year,
#time-popup input.select-display {
    font-family: "Georgia", "Times New Roman", "Songti SC", serif !important;
}

/* ══════ 时间流速区 ══════ */
#fiction-flow-speed {
    background: transparent;
    padding: 0;
    margin-top: 40px !important;
}
.flow-speed-title {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--tp-text-sub);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 0 20px 0;
}
.flow-speed-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.flow-speed-btn {
    background: transparent;
    border: 1px solid var(--tp-border);
    color: var(--tp-text-main);
    padding: 8px 20px;
    border-radius: 40px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.flow-speed-btn:active { transform: scale(0.96); }
.flow-speed-btn.active {
    background: var(--tp-accent);
    color: var(--tp-accent-text);
    border-color: var(--tp-accent);
}

/* ══════ 确认按钮（常驻 · 动态文案 · 居中胶囊）══════ */
#fiction-time-inputs > button {
    display: block;
    width: fit-content;
    min-width: 180px;
    margin: 48px auto 0;
    padding: 16px 32px;
    background: var(--tp-accent);
    color: var(--tp-accent-text);
    border: none;
    border-radius: 100px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}
#fiction-time-inputs > button:active { transform: scale(0.96); }

/* ══════ 底部提示 ══════ */
#time-mode-hint {
    text-align: center;
    font-size: 12px;
    color: var(--tp-text-sub);
    line-height: 1.5;
    margin-top: 24px;
    letter-spacing: 1px;
}
#time-mode-hint:empty { display: none; }