/* 名人K线 H5 —— 紫夜金声（与企业K线馆的暗红行情风区分）
 * 默认铺满手机整个可视区（无上下黑边）；
 * 需要严格 9:16 画框时在地址后加 ?rec=916（上下留边、中间即抖音标准比例）。 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
    --up: #ff5f7e;      /* 涨·绯红（好事） */
    --down: #34d399;    /* 跌·翡翠（低谷） */
    --gold: #e9c26a;
    --violet: #9b7cf5;
    --violet-deep: #6d4fd8;
    --ink: #eee9f7;
    --dim: #7b7292;
    --panel: #16112a;
    --line: #2b2246;
    --w916: 100%;       /* 默认满屏宽 */
    --h916: 100dvh;
}
html {
    height: 100%; background: #060410; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    width: var(--w916);
    height: 100vh; height: 100dvh; height: var(--vhpx, 100dvh);
    overflow: hidden;
    background: #0a0714;
    -webkit-font-smoothing: antialiased;
}
/* 录屏用 9:16 画框（地址加 ?rec=916） */
body.rec916 {
    --w916: min(100vw, calc(100vh * 9 / 16));
    --h916: calc(var(--w916) * 16 / 9);
    width: var(--w916); height: var(--h916); max-height: 100vh;
}
/* 电脑宽屏预览时按 9:16 居中显示（手机不受影响） */
@media (min-width: 720px) {
    body {
        --w916: min(100vw, calc(100vh * 9 / 16));
        --h916: calc(var(--w916) * 16 / 9);
        width: var(--w916); height: var(--h916);
    }
}

#app { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden;
    background: radial-gradient(120% 55% at 50% 0%, #1c1436 0%, #0a0714 58%); }

/* ============ 顶部信息 ============ */
.kv-top { padding: 12px 14px 8px; background: linear-gradient(180deg, #1b1338 0%, rgba(10, 7, 20, .2) 100%); flex: none; }
.subj-row { display: flex; align-items: center; gap: 10px; }
.badge {
    width: 46px; height: 46px; flex: none;
    background: linear-gradient(180deg, #a98bff 0%, #6d4fd8 100%);
    color: #fff; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    box-shadow: 0 0 22px rgba(155, 124, 245, .45);
}
.subj-meta { flex: 1; min-width: 0; }
.subj-name { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.subj-sub { font-size: 11px; color: var(--dim); margin-top: 2px; letter-spacing: .5px; }
/* 右上角：名人一句话核心介绍 */
.subj-intro {
    flex: none; max-width: 42%; margin-left: 6px; padding: 4px 8px 4px 9px;
    text-align: right; font-size: 9.5px; line-height: 1.5; letter-spacing: .2px;
    color: #e4cf9c; background: rgba(233, 194, 106, .07);
    border-right: 2px solid rgba(233, 194, 106, .5); border-radius: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kv-mid { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.year-big { font-size: 52px; font-weight: 800; letter-spacing: 2px; line-height: 1; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff 0%, #b9a7ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.age-line { font-size: 13px; color: #b0a6c9; margin-top: 5px; }
.age-line b { color: var(--gold); font-weight: 700; }
.kv-right { text-align: right; }
.price-big {
    font-size: 40px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--up);
    text-shadow: 0 0 22px rgba(255, 95, 126, .45);
    transition: color .2s, text-shadow .2s;
}
.price-big.down { color: var(--down); text-shadow: 0 0 22px rgba(52, 211, 153, .45); }
.chg-line { font-size: 13px; margin-top: 6px; color: var(--up); font-variant-numeric: tabular-nums; }
.chg-line.down { color: var(--down); }
.chg-line b { font-weight: 600; margin-left: 6px; }

.kv-stat { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--dim); }
.kv-stat b { color: #d6cdea; font-variant-numeric: tabular-nums; }

/* ============ 图表区 ============ */
.chart-panel { position: relative; background: rgba(22, 17, 42, .82); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex: none; }
.chart-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px 3px; font-size: 11px; color: var(--dim); }
.chart-title { color: #a99fc2; letter-spacing: .5px; }
.legend .dot { display: inline-block; width: 8px; height: 2px; margin: 0 4px 2px 10px; vertical-align: middle; }
.legend .ma5 { background: var(--gold); }
.legend .ma20 { background: #8f86a8; }
.chart-wrap { position: relative; height: 25vh; margin: 0 6px; }
#plineCanvas { width: 100%; height: 100%; display: block; }
.phase-bar { display: flex; height: 26px; margin: 0 6px 8px; gap: 2px; flex: none; }
.phase-bar span {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; color: #6b6187; background: #1e1737; border-radius: 3px;
    white-space: nowrap; overflow: hidden;
}
.phase-bar span.cur { background: #4b32a8; color: #f0e9ff; font-weight: 600; }
.phase-bar span.past { color: #9a90b5; }

/* ============ 经历记（内部滚动） ============ */
.event-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 16px; }
.ep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ep-role { font-size: 12px; color: var(--dim); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ep-cap { flex: none; }
.ep-role b { color: var(--ink); font-size: 15px; white-space: nowrap; }
.ep-role em { font-style: normal; font-size: 10.5px; color: #6b6187; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tip { flex: none; font-size: 9.5px; color: #615877; border: 1px solid #2d2448; border-radius: 3px; padding: 2px 6px; }
.ep-cap2 { font-size: 12.5px; font-weight: 700; color: #d6cdea; margin: 10px 0 6px; letter-spacing: 1px; flex: none; }
.ep-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ep-list::-webkit-scrollbar { display: none; }
.ep-list li {
    display: flex; gap: 10px; padding: 7px 8px 7px 10px;
    border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
    opacity: .38; transition: opacity .25s, background .25s;
}
.ep-list li.shown { opacity: .62; }
.ep-list li.cur { opacity: 1; background: #1d1538; border-left-color: var(--up); }
.ep-list li.cur.down { border-left-color: var(--down); }
.ep-year { flex: none; width: 46px; font-size: 13px; font-weight: 700; color: var(--up); font-variant-numeric: tabular-nums; padding-top: 1px; }
li.down .ep-year { color: var(--down); }
.ep-body { min-width: 0; }
.ep-title { font-size: 14px; font-weight: 600; color: #e7e1f5; }
.ep-desc { font-size: 11.5px; color: #9a90b5; margin-top: 3px; line-height: 1.5; }
.ep-kw { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ep-kw i { font-style: normal; font-size: 10px; color: #9d92b8; background: #231a40; border-radius: 3px; padding: 1px 5px; }

/* ============ 大事闪现层 ============ */
.flash-layer {
    position: absolute; inset: 0;
    z-index: 40; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(8, 5, 18, .74); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .18s;
}
.flash-layer.show { opacity: 1; }
.flash-year { font-size: 15px; color: #b0a6c9; letter-spacing: 3px; margin-bottom: 10px; }
.flash-text {
    font-size: 40px; font-weight: 900; letter-spacing: 4px; text-align: center; line-height: 1.25;
    color: var(--up); padding: 0 24px;
    text-shadow: 0 0 34px rgba(255, 95, 126, .5);
    transform: scale(.7); transition: transform .22s cubic-bezier(.2, 1.4, .4, 1);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flash-layer.show .flash-text { transform: scale(1); }
.flash-text.down { color: var(--down); text-shadow: 0 0 34px rgba(52, 211, 153, .5); }

/* ============ 开场层 ============ */
.start-layer {
    position: absolute; inset: 0;
    z-index: 60;
    background: radial-gradient(120% 80% at 50% 30%, #1d1540 0%, #07050f 72%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    transition: opacity .4s;
}
.start-layer.hide { opacity: 0; pointer-events: none; }
.start-logo {
    width: 76px; height: 76px; border-radius: 18px;
    background: linear-gradient(180deg, #b79dff 0%, #6d4fd8 100%);
    color: #fff; font-size: 40px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 52px rgba(155, 124, 245, .55);
}
.start-name { font-size: 21px; font-weight: 800; letter-spacing: 2px; }
.start-sub { font-size: 11.5px; color: var(--dim); letter-spacing: 1px; }
.start-btn {
    margin-top: 18px; width: 210px; height: 52px;
    background: linear-gradient(180deg, #a98bff 0%, #6d4fd8 100%);
    color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 6px;
    border: none; border-radius: 26px; cursor: pointer;
    box-shadow: 0 8px 30px rgba(109, 79, 216, .5);
}
.start-btn:active { transform: scale(.97); }
/* 点击开盘后的 1.5 秒等待：按钮变"开盘中…"并呼吸发光 */
.start-layer.arming .start-btn { pointer-events: none; animation: btnPulse 1s ease infinite; }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(109, 79, 216, .5); }
    50%      { box-shadow: 0 8px 44px rgba(233, 194, 106, .6); transform: scale(1.035); }
}
.start-tip { font-size: 10px; color: #615877; letter-spacing: 1px; }
/* 开场标语：两行两种颜色 */
.start-slogan { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 24px; text-align: center; }
.start-slogan span { font-size: 21px; font-weight: 800; letter-spacing: 5px; line-height: 1.2; }
.start-slogan .s1 { color: #a99fc2; }
.start-slogan .s2 { color: var(--gold); text-shadow: 0 0 20px rgba(233, 194, 106, .4); }

/* ============ 人生开盘 ============ */
.open-layer {
    position: absolute; inset: 0;
    z-index: 50; pointer-events: none;
    background: rgba(8, 5, 18, .93);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
}
.open-layer.show { opacity: 1; visibility: visible; }
.open-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.open-head b { color: var(--ink); }
.open-head span { color: #6b6187; font-size: 10.5px; }
.open-head i { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.open-cap { margin-top: 30px; font-size: 14px; color: #9a90b5; letter-spacing: 6px; }
.open-price {
    font-size: 74px; font-weight: 900; color: var(--up); letter-spacing: 2px;
    text-shadow: 0 0 40px rgba(255, 95, 126, .5); font-variant-numeric: tabular-nums;
    margin-top: 8px;
}
.open-stamp {
    position: absolute; z-index: 2;
    top: 20%; left: 0; right: 0; margin: 0 auto; width: max-content;
    font-size: 42px; font-weight: 900; letter-spacing: 8px; color: #ff4d8d;
    border: 5px solid #ff4d8d; border-radius: 8px; padding: 6px 18px;
    transform: rotate(-14deg) scale(2.4); opacity: 0;
    text-shadow: 0 0 24px rgba(255, 77, 141, .6);
    box-shadow: 0 0 30px rgba(255, 77, 141, .28), inset 0 0 24px rgba(255, 77, 141, .18);
}
.open-layer.stamped .open-stamp { animation: stampIn .38s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stampIn { to { transform: rotate(-14deg) scale(1); opacity: .96; } }
.open-bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; margin-top: 36px; }
.open-bars i { width: 9px; border-radius: 2px 2px 0 0; }

/* ============ 终局全景（覆盖在图表区内） ============ */
.end-layer {
    position: absolute; inset: 0; z-index: 30;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 8px 14px 10px; pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 6, 20, .92) 0%, rgba(9, 6, 20, .18) 34%, rgba(9, 6, 20, .18) 58%, rgba(9, 6, 20, .92) 100%);
    opacity: 0; visibility: hidden; transition: opacity .5s;
}
.end-layer.show { opacity: 1; visibility: visible; }
.end-layer.show .end-foot { pointer-events: auto; }
.end-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.end-title { font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #e7e1f5; white-space: nowrap; }
.end-range { font-size: 9.5px; color: var(--dim); letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-line { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .5px; font-variant-numeric: tabular-nums; text-align: center; }
.end-credit {
    display: block; margin: 8px auto 0;
    color: #9a90b5; font-size: 11.5px; letter-spacing: 2px; text-align: center;
}

/* ============ 终局名牌浮层（K线走完后的大名字幕） ============ */
.name-card {
    position: absolute; inset: 0; z-index: 45;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(58% 34% at 50% 50%, rgba(24, 16, 52, .58) 0%, rgba(7, 5, 16, .84) 78%);
    -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 1.15s ease;   /* 慢慢消失 */
}
.name-card.show { opacity: 1; visibility: visible; }
.nc-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.nc-glow {
    position: absolute; left: 50%; top: 50%;
    width: 78vw; height: 78vw; max-width: 430px; max-height: 430px;
    transform: translate(-50%, -50%) scale(.55); border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 194, 106, .24) 0%, rgba(155, 124, 245, .16) 42%, transparent 70%);
    opacity: 0;
}
.name-card.show .nc-glow { animation: ncGlow 2.2s ease-out .08s forwards; }
@keyframes ncGlow {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    42%  { opacity: 1; }
    100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
}
/* 艺术家名字：艺术字（衬线/楷体 + 金色到紫罗兰渐变 + 扫光） */
.nc-name { font-family: "STKaiti", "Kaiti SC", "KaiTi", "Songti SC", "STSong", "Noto Serif SC", serif; font-weight: 900; line-height: 1.04; text-align: center; white-space: nowrap; }
.nc-name-in {
    display: block; font-size: clamp(58px, 23vw, 126px); letter-spacing: .06em;
    background: linear-gradient(100deg, #f6e5b8 0%, #fffdf6 16%, #e9c26a 32%, #b98cf0 56%, #f6e5b8 78%, #fffdf6 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 20px rgba(233, 194, 106, .5)) drop-shadow(0 0 52px rgba(155, 124, 245, .55));
    opacity: 0; transform: scale(1.42);
}
.name-card.show .nc-name-in {
    animation: ncNameIn .95s cubic-bezier(.16, 1, .3, 1) forwards,
               ncShine 3.4s linear .95s infinite;
}
@keyframes ncNameIn { to { opacity: 1; transform: scale(1); } }
@keyframes ncShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
/* 下行：“K线图”，字号更小、字距拉开 */
.nc-sub { display: flex; align-items: center; gap: 12px; margin-top: 16px; opacity: 0; transform: translateY(10px); }
.name-card.show .nc-sub { animation: ncSubIn .7s cubic-bezier(.2, .9, .3, 1) .36s forwards; }
@keyframes ncSubIn { to { opacity: 1; transform: translateY(0); } }
.nc-sub span { font-size: clamp(13px, 4.4vw, 19px); font-weight: 700; letter-spacing: .5em; padding-left: .5em; color: #dcc99c; }
.nc-sub i { display: block; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 194, 106, .8)); }
.nc-sub i:last-child { background: linear-gradient(270deg, transparent, rgba(233, 194, 106, .8)); }

/* 开场层"更多名人"入口 */
.start-more { font-size: 11px; color: #6b6187; letter-spacing: 1px; text-decoration: none; border-bottom: 1px solid #342a55; padding-bottom: 1px; }
.start-more:active { color: #9a90b5; }