/* ================= 大屏展示页样式（4K / TV / 手机通用） ================= */
:root {
    --blur: 26px;                       /* 高斯模糊半径，由后端配置覆盖 */
    --ink: #ffffff;
    --amber: #ffc53d;
    --red: #ff4d4f;
    --green: #52e69b;
    --clock-font: "PingFang SC", "Microsoft YaHei", "Source Han Sans", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 14px; }                        /* 老内核回退 */
html { font-size: clamp(12px, 1.05vw, 28px); }   /* 4K 自动放大、手机自动缩小 */

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #05080f;
    font-family: var(--clock-font);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ---------- 背景层：模糊图铺满 + 压暗层（含暗角聚焦） ---------- */
/* 注意：不使用 inset 简写，兼容电视端老内核 */
.bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; }
.bg-img {
    position: absolute;
    top: -6vmax; right: -6vmax; bottom: -6vmax; left: -6vmax;   /* 外扩防止模糊露边 */
    background-size: cover;
    background-position: center;
    filter: blur(var(--blur));
    transform: scale(1.06);
    will-change: filter;
}
.bg-overlay {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background:
        radial-gradient(120% 95% at 50% 44%, rgba(2,8,20,0) 28%, rgba(2,8,20,.58) 100%),
        linear-gradient(180deg, rgba(2,8,20,.30), rgba(2,8,20,.52));
}

/* ---------- 页面切换 ---------- */
#stage { position: relative; z-index: 1; width: 100%; height: 100%; }
.page {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transform: scale(.985);
    transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.page.active { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }

/* ---------- 主页：海报（全屏铺满，无黑边） ---------- */
.poster-box {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.poster {
    width: 100%; height: 100%;
    object-fit: cover;                      /* 放大裁切铺满整屏，无黑边 */
    object-position: center top;            /* 顶部对齐：海报顶部（logo）始终完整，裁切只发生在底部 */
    display: block;
}
.main-title {
    margin-top: 2.2vh;
    font-size: 2.6vmin;                              /* 老内核回退 */
    font-size: clamp(16px, 2.6vmin, 64px);
    font-weight: 700; letter-spacing: .12em;
    text-shadow: 0 .2rem 1rem rgba(0,0,0,.6);
    text-align: center; padding: 0 4vw;
}

/* ---------- 计时器页 ---------- */
/* 标题组：主标题 + 副标题（与计时器卡片同宽，全部用 margin 间距，兼容老内核） */
.titles {
    margin-bottom: 4.2vmin;
    width: 88vw;                        /* 老内核回退 */
    width: min(88vw, 150vh);            /* 与 .clock-card 同宽 */
}
.titles.hide { display: none; }

/* 主标题锁：两侧渐隐装饰线（flex:1 自动撑满整行宽度） */
.timer-title {
    display: flex; align-items: center;
    width: 100%;
    font-size: 4.2vmin;                              /* 老内核回退 */
    font-size: clamp(18px, 4.2vmin, 88px);
    font-weight: 700; letter-spacing: .3em; text-indent: .3em;
    color: #fff9e8;                                  /* 暖米白，喜庆柔和 */
    /* 细蓝色描边（8 向 text-shadow 模拟外描边，兼容老内核）+ 柔和投影 */
    text-shadow:
        .035em 0 rgba(64,138,255,.6), -.035em 0 rgba(64,138,255,.6),
        0 .035em rgba(64,138,255,.6), 0 -.035em rgba(64,138,255,.6),
        .025em .025em rgba(64,138,255,.6), -.025em .025em rgba(64,138,255,.6),
        .025em -.025em rgba(64,138,255,.6), -.025em -.025em rgba(64,138,255,.6),
        0 0 1.6vmin rgba(96,156,255,.30),
        0 .25rem 1.4rem rgba(0,0,0,.65);
    white-space: nowrap;
}
.timer-title::before, .timer-title::after {
    content: ""; flex: 1 1 7vmin; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65));
}
.timer-title::before { margin-right: 3vmin; }        /* 用 margin 替代 gap，兼容老内核 */
.timer-title::after { transform: scaleX(-1); margin-left: 3vmin; }
.timer-title:empty { display: none; }

/* 副标题 */
.timer-subtitle {
    margin-top: 1.8vmin;
    font-size: 2.8vmin;                              /* 老内核回退 */
    font-size: clamp(14px, 2.8vmin, 58px);
    font-weight: 500; letter-spacing: .14em;
    text-align: center;
    color: #b9e4ff;                                  /* 浅青蓝，层级低于主标题 */
    text-shadow: 0 .2rem 1.1rem rgba(0,0,0,.7);
    width: 100%;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.timer-subtitle:empty { display: none; }

/* ---------- 玻璃拟态数字卡 ---------- */
.clock-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 88vw;                                     /* 老内核回退 */
    width: min(88vw, 150vh);
    padding: 4.6vmin 6vmin 0;
    border-radius: 3.2rem;
    background: linear-gradient(165deg, rgba(13,22,42,.40), rgba(8,14,28,.74));
    border: 1px solid rgba(255,255,255,.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 3rem 9rem rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: border-color .3s ease;
}
.clock-card::before {                       /* 顶部高光线 */
    content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

/* ---------- 倒计时数字 ---------- */
.clock {
    font-family: var(--clock-font);
    font-variant-numeric: tabular-nums;      /* 等宽数字：跳动不抖动 */
    font-weight: 900;
    font-size: 24vh;                         /* 老内核回退 */
    font-size: min(29vmin, 25vw);            /* 现代浏览器 */
    line-height: 1.04;
    letter-spacing: .02em;
    color: #f5f9ff;
    filter:
        drop-shadow(0 1.2vmin 3.2vmin rgba(0,0,0,.55))
        drop-shadow(0 0 4.5vmin rgba(96,156,255,.35));
    transition: color .3s ease, filter .3s ease;
    white-space: nowrap;
}
.clock .sep { opacity: .45; font-weight: 700; padding: 0 .05em; }
.clock.running .sep { animation: blink 1s steps(1, end) infinite; }  /* 运行中冒号呼吸 */
.clock .tenth {
    font-size: .38em; font-weight: 800; opacity: .88;
    margin-left: .06em;
}
.clock.warn {
    color: #ffc53d;                                  /* 老内核回退（不支持 CSS 变量） */
    color: var(--amber);
    filter:
        drop-shadow(0 1.2vmin 3.2vmin rgba(0,0,0,.5))
        drop-shadow(0 0 4.5vmin rgba(255,180,60,.45));
}
.clock.crit {
    color: #ff4d4f;                                  /* 老内核回退 */
    color: var(--red);
    filter:
        drop-shadow(0 1.2vmin 3.2vmin rgba(0,0,0,.5))
        drop-shadow(0 0 5vmin rgba(255,77,79,.55));
    animation: pulse 1s ease-in-out infinite;
}
.clock.zero {
    color: #ff4d4f;                                  /* 老内核回退 */
    color: var(--red);
    filter: drop-shadow(0 0 5vmin rgba(255,77,79,.6));
    animation: flash .5s steps(1, end) infinite;
}
@keyframes pulse { 50% { opacity: .55; } }
@keyframes flash { 50% { opacity: .25; } }
@keyframes blink { 50% { opacity: .12; } }

/* ---------- 状态胶囊 ---------- */
.status-pill {
    display: inline-flex; align-items: center;
    margin-top: 2.4vmin;
    padding: 1.1vmin 3.4vmin;
    border-radius: 99rem;
    font-size: 2.4vmin;                              /* 老内核回退 */
    font-size: clamp(13px, 2.4vmin, 46px);
    font-weight: 600; letter-spacing: .42em; text-indent: .42em;
    color: #ffe9b8;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
}
.status-pill i {
    width: 1.5vmin; height: 1.5vmin; min-width: 6px; min-height: 6px;
    border-radius: 50%;
    background: #ffc53d;                             /* 老内核回退（不支持 CSS 变量） */
    background: var(--amber);
    box-shadow: 0 0 1.4vmin #ffc53d;
    margin-right: 1.6vmin;                           /* 兼容不支持 gap 的老内核 */
}
.status-pill.state-running { color: #dfffee; }
.status-pill.state-running i {
    background: #52e69b; box-shadow: 0 0 1.6vmin #52e69b;
    animation: breathe 1.6s ease-in-out infinite;
}
.status-pill.state-paused { color: #ffe9b8; }
.status-pill.state-zero { color: #ffd6d6; }
.status-pill.state-zero i {
    background: #ff4d4f; box-shadow: 0 0 1.6vmin #ff4d4f;
    animation: flash .5s steps(1, end) infinite;
}
@keyframes breathe { 50% { opacity: .3; transform: scale(.8); } }

/* ---------- 进度条（数字卡内底部） ---------- */
.progress {
    position: relative;
    width: 100%; height: 1.4vmin; min-height: 4px;
    margin-top: 3vmin;
    background: rgba(255,255,255,.10);
    border-radius: 99px;
    overflow: hidden;
}
.progress-fill {
    height: 100%; width: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #37e6a0, #2fd0ff);
    box-shadow: 0 0 1.6vmin rgba(56,220,190,.55);
    transition: width .2s linear;
}
.progress-fill.warn  { background: linear-gradient(90deg, #ffc53d, #ff9f43); box-shadow: 0 0 1.6vmin rgba(255,170,60,.55); }
.progress-fill.crit  { background: linear-gradient(90deg, #ff4d4f, #ff7875); box-shadow: 0 0 1.6vmin rgba(255,80,80,.6); }

/* ---------- 角标 ---------- */
.page-tag {
    position: absolute; top: 2.4vmin; left: 2.4vmin;
    font-size: 1.7vmin;                              /* 老内核回退 */
    font-size: clamp(11px, 1.7vmin, 30px);
    font-weight: 600; letter-spacing: .3em; text-indent: .3em;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10rem;
    padding: .5vmin 1.6vmin;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ---------- Toast 反馈（遥控器操作提示） ---------- */
.toast {
    position: fixed; top: 5vmin; left: 50%;
    transform: translate(-50%, -160%);
    visibility: hidden; opacity: 0;      /* 非显示状态完全不可见，杜绝任何露出 */
    z-index: 50;
    background: rgba(8,14,26,.82);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 2.4vmin;                              /* 老内核回退 */
    font-size: clamp(14px, 2.4vmin, 44px);
    font-weight: 600; letter-spacing: .12em;
    padding: 1.4vmin 3.4vmin;
    border-radius: 10rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.45);
    transition: transform .22s ease, visibility 0s linear .22s, opacity .22s ease;
    pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; transition-delay: 0s; }

/* ---------- 底部按键提示 ---------- */
.hint {
    position: fixed; bottom: 3.4vmin; left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    font-size: 1.8vmin;                              /* 老内核回退 */
    font-size: clamp(11px, 1.8vmin, 32px);
    letter-spacing: .06em;
    color: rgba(255,255,255,.66);
    background: rgba(6,10,20,.5);
    border: 1px solid rgba(255,255,255,.12);
    padding: .9vmin 2.4vmin;
    border-radius: 10rem;
    transition: opacity .6s ease;
    white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis;
}
.hint.hide { opacity: 0; }

/* ---------- 触屏控制条（手机端） ---------- */
.touchbar {
    position: fixed; bottom: 9vmin; left: 50%; transform: translateX(-50%) translateY(180%);
    z-index: 45;
    display: flex;
    background: rgba(8,14,26,.86);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 2rem;
    padding: 1.6vmin 2.4vmin;
    visibility: hidden; opacity: 0;      /* 非显示状态完全不可见，矮视口也不露边 */
    transition: transform .25s ease, visibility 0s linear .25s, opacity .25s ease;
    max-width: 96vw;
}
.touchbar button { margin-left: 2vw; }               /* 用 margin 替代 flex gap，兼容老内核 */
.touchbar button:first-child { margin-left: 0; }
.touchbar.show { transform: translateX(-50%) translateY(0); visibility: visible; opacity: 1; transition-delay: 0s; }
.touchbar button {
    appearance: none; border: 0; cursor: pointer;
    font-family: inherit;
    font-size: 2vmin;                                /* 老内核回退 */
    font-size: clamp(12px, 2vmin, 34px);
    font-weight: 600; letter-spacing: .06em;
    color: #eaf2ff;
    background: rgba(255,255,255,.12);
    border-radius: 1.2rem;
    padding: 1.4vmin 2.6vmin;
    white-space: nowrap;
}
.touchbar button:active { background: rgba(255,255,255,.28); }

/* 竖屏手机：海报与计时自适应 */
@media (orientation: portrait) {
    .clock { font-size: 22vw; }                      /* 老内核回退 */
    .clock { font-size: min(26vmin, 24vw); }         /* 现代浏览器 */
    .clock-card { padding: 4vmin 5vmin 0; border-radius: 2.4rem; }
    .timer-title { letter-spacing: .18em; text-indent: .18em; }

    /* 手机端固定可读下限，避免控件过小 */
    .touchbar { bottom: 14vmin; padding: 10px 12px; flex-wrap: wrap; justify-content: center; }
    .touchbar button { font-size: 14px; padding: 10px 14px; border-radius: 10px; margin-left: 8px; }
    .touchbar button:first-child { margin-left: 0; }
    .toast { font-size: 14px; padding: 10px 22px; }
    .hint { font-size: 12px; bottom: 16px; }
    .page-tag { font-size: 11px; }
}