/* characters.css —— 人物页（前缀 ch-）。P3 / P5 式：斜切、代表色（--c）、每个页签一个场景、每个转场各想一套。只动 transform / opacity（狐狸揭幕用 clip-path）。 */
.ch { position: relative; min-height: calc(100svh - 72px); margin-top: 72px; background: #0b0a0a; color: #f1e8dc; overflow: hidden; }

/* ---------------------------------------------------------------- 阵列：双色调特写 */
.ch-roster { display: flex; flex-direction: column; min-height: calc(100svh - 72px); padding: clamp(24px, 4vh, 48px) clamp(16px, 4vw, 64px) 28px; box-sizing: border-box; }
.ch-r-head p { margin: 0; font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(241, 232, 220, .5); }
.ch-r-head h1 { margin: 6px 0 0; font-family: var(--serif); font-weight: 900; font-size: clamp(44px, 6vw, 84px); letter-spacing: .18em; line-height: 1; transform: skewX(-8deg); transform-origin: left; }
.ch-r-head em { display: block; margin-top: 8px; font-family: var(--display-latin); font-style: italic; font-size: 20px; letter-spacing: .12em; color: rgba(241, 232, 220, .45); }
.ch-r-row { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(4px, .6vw, 10px); margin: clamp(18px, 3vh, 36px) 0 0 2vw; min-height: 400px; }
.ch-card { position: relative; padding: 0; border: 0; background: #0b0a0a; cursor: pointer; overflow: hidden; transform: skewX(-8deg); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.ch-card:nth-child(odd) { margin-top: 26px; } .ch-card:nth-child(even) { margin-bottom: 26px; }
/* 作者 2026-10-28：特写不要盖任何半透明色块 / 降透明度，直接看双色调原色；色块只在悬停时从底下升起一条 */
.ch-card-slab { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1; background: var(--c); transform-origin: bottom; transform: scaleY(0); transition: transform .3s cubic-bezier(.7, 0, .3, 1); }
.ch-card-img { position: absolute; inset: 0 -34%; display: block; transform: skewX(8deg); }
.ch-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.ch-card-tx { position: absolute; z-index: 2; left: 10%; right: 4%; bottom: 12px; display: flex; flex-direction: column; text-align: left; transform: skewX(8deg); }
.ch-card-tx b { font-family: var(--display-latin); font-weight: 700; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; color: var(--c); text-shadow: 0 0 8px #0b0a0a; }
.ch-card-tx strong { align-self: flex-start; margin-top: 2px; padding: 0 6px; font-family: var(--serif); font-weight: 900; font-size: clamp(16px, 1.7vw, 25px); letter-spacing: .06em; color: #f1e8dc; background: #0b0a0a; line-height: 1.3; }
.ch-card-tx i { margin-top: 3px; font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: #f1e8dc; text-shadow: 0 0 6px #0b0a0a; }
.ch-card-lock { position: absolute; z-index: 2; top: 12px; left: 18%; padding: 2px 8px; font-family: var(--serif); font-size: 11px; letter-spacing: .3em; color: #f1e8dc; background: rgba(11, 10, 10, .8); transform: skewX(8deg); }
.ch-card:hover, .ch-card:focus-visible { transform: skewX(-8deg) translateY(-14px) scale(1.04); z-index: 2; }
.ch-card:hover .ch-card-slab, .ch-card:focus-visible .ch-card-slab { transform: none; }
.ch-card:hover .ch-card-img img, .ch-card:focus-visible .ch-card-img img { transform: scale(1.08); }
.ch-card:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.ch-r-hint { margin: 14px 0 0; font-family: var(--serif); font-size: 13.5px; letter-spacing: .2em; color: rgba(241, 232, 220, .45); }
.ch-wipe { position: fixed; inset: 0 -30%; z-index: 60; background: var(--c); pointer-events: none; }

/* ---------------------------------------------------------------- 个人页外壳 */
.ch-pro { position: relative; height: calc(100svh - 72px); min-height: 620px; overflow: hidden; background: #0b0a0a; }
.ch-scene { position: absolute; inset: 0; }
.ch-sc { position: absolute; inset: 0; overflow: hidden; }
.ch-sc.is-dragged { box-shadow: -30px 0 40px rgba(0, 0, 0, .55); }

.ch-bar { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: 16px clamp(16px, 3vw, 40px); pointer-events: none; }
.ch-bar > * { pointer-events: auto; }
.ch-back { padding: 6px 14px; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: inherit; background: none; border: 1px solid currentColor; cursor: pointer; transform: skewX(-10deg); opacity: .8; }
.ch-menu { display: flex; gap: 2px; margin-left: auto; }
.ch-menu button { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 5px 16px 6px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; transform: skewX(-12deg); }
.ch-menu button b { font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .14em; line-height: 1.2; }
.ch-menu button i { font-style: normal; font-family: var(--display-latin); font-size: 11px; letter-spacing: .2em; opacity: .55; }
.ch-menu button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.7, 0, .3, 1); }
.ch-menu button.is-on::before { transform: none; }
.ch-menu button.is-on { color: #0b0a0a; }
.ch-menu button:disabled { opacity: .3; cursor: default; }
.ch-pro .ch-bar { color: #f1e8dc; transition: color .3s; }
.ch-pro[data-scene="sheet"] .ch-bar { color: #1a1615; }

.ch-word { position: absolute; margin: 0; font-family: var(--display-latin); font-weight: 700; font-style: italic; line-height: .8; white-space: nowrap; pointer-events: none; }
.ch-fox, .ch-prop, .ch-coin { position: absolute; max-width: none; pointer-events: none; }

/* 怀表（场景里的小件 + 倒带转场的大件共用） */
.ch-watch { position: absolute; aspect-ratio: 590 / 840; pointer-events: none; }
.ch-watch > img { position: absolute; max-width: none; }
.ch-watch > img:first-child { inset: 0; width: 100%; height: 100%; }
.ch-watch-m, .ch-watch-h { left: 50%; bottom: 48.5%; translate: -50% 0; transform-origin: 50% 96%; }
.ch-watch-m { height: 17%; } .ch-watch-h { height: 12%; }

/* 放大镜光标：能点开看大图的地方 */
.ch-pro { --zoomcur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='13' cy='13' r='9' fill='rgba(255,255,255,.25)' stroke='%23d0703a' stroke-width='3'/%3E%3Cpath d='M20 20l9 9' stroke='%231a1615' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 13 13; }
.ch-s figure, .ch-f figure { cursor: var(--zoomcur), zoom-in; }

/* ---------------------------------------------------------------- 档案 file：全屏特写 + 贴在周围的资料（作者 2026-10-28 第三版） */
.ch-f { background: #0b0a0a; }
.ch-f-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%; }
.ch-f-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 10, .78), rgba(11, 10, 10, .05) 30%, rgba(11, 10, 10, .05) 70%, rgba(11, 10, 10, .78)); pointer-events: none; }
.ch-f .ch-word { left: 50%; bottom: -3%; translate: -50% 0; font-size: 17vw; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 236, 224, .16); }
.ch-f-ui { position: absolute; inset: 0; pointer-events: none; }
.ch-f-ui > * { pointer-events: auto; }
.ch-f-name { position: absolute; left: 3%; top: 84px; margin: 0; padding: 6px 22px 8px; background: #f1e8dc; color: #0b0a0a; font-family: var(--serif); font-weight: 900; font-size: clamp(34px, 4vw, 58px); letter-spacing: .08em; line-height: 1.1; rotate: -4deg; box-shadow: 10px 10px 0 var(--c); }
.ch-f-name em { display: block; font-family: var(--display-latin); font-style: italic; font-weight: 500; font-size: 18px; letter-spacing: .15em; }
.ch-f-tape { position: absolute; left: 5%; top: 230px; margin: 0; padding: 6px 30px; background: #0b0a0a; color: var(--c); font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .35em; rotate: 3deg; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.ch-f-stamp { position: absolute; right: 4%; top: 80px; width: clamp(150px, 13vw, 200px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid var(--c); border-radius: 50%; outline: 2px solid var(--c); outline-offset: 5px; color: var(--c); rotate: 12deg; text-align: center; background: rgba(11, 10, 10, .55); }
.ch-f-stamp b { font-family: var(--display-latin); font-weight: 700; font-size: clamp(54px, 5vw, 76px); line-height: .9; }
.ch-f-stamp span { font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: .3em; }
.ch-f-stamp i { font-style: normal; font-family: var(--display-latin); font-size: 11px; letter-spacing: .14em; opacity: .8; }
.ch-f-lead { position: absolute; left: 3%; top: 270px; width: min(23%, 320px); margin: 0; padding: 14px 18px; background: #f1e8dc; color: #1a1412; font-family: var(--serif); font-size: 15.5px; line-height: 1.8; rotate: -2deg; box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.ch-f-lead::before { content: ''; position: absolute; left: 40%; top: -10px; width: 70px; height: 20px; background: rgba(241, 232, 220, .55); rotate: -3deg; }
.ch-f-tags { position: absolute; right: 14%; bottom: 5%; display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ch-f-tags li { padding: 5px 14px; background: var(--c); color: #0b0a0a; font-family: var(--serif); font-weight: 900; font-size: 15px; letter-spacing: .15em; rotate: var(--r); box-shadow: 3px 4px 0 #0b0a0a; }
.ch-f-intro { position: absolute; right: 3%; top: 300px; width: min(24%, 330px); padding: 12px 16px 14px; background: rgba(11, 10, 10, .86); border-left: 4px solid var(--c); rotate: 1.5deg; }
.ch-f-intro p { margin: 6px 0 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.75; color: rgba(241, 232, 220, .88); }
.ch-f-card { position: absolute; left: 3%; bottom: 3%; width: min(23%, 320px); margin: 0; padding: 12px 18px 10px; background: #efe6d2 repeating-linear-gradient(transparent 0 27px, rgba(44, 90, 140, .18) 27px 28px); color: #1a1412; rotate: -2deg; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.ch-f-card-h { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid #a33; font-family: var(--serif); font-weight: 900; font-size: 12.5px; letter-spacing: .25em; color: #a33; }
.ch-f-card div { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; line-height: 28px; }
.ch-f-card dt { font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: #8a5a3a; }
.ch-f-card dd { margin: 0; font-family: var(--serif); font-size: 13.5px; }
.ch-f-fox { right: 4%; bottom: 3%; height: 18%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.ch-ghost { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%; pointer-events: none; }

/* ---------------------------------------------------------------- 设定稿 sheet：人物在正中，标注向两边放射（冷调：米白纸 + 蓝铅笔线） */
.ch-s { color: #1a1615; background: #ece6da; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(44, 90, 140, .4) transparent; }
.ch-s-hero { position: relative; height: 100%; min-height: 600px; background: linear-gradient(rgba(44, 90, 140, .08) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(44, 90, 140, .08) 1px, transparent 1px) 0 0 / 28px 100%; }
.ch-s .ch-word { left: 50%; top: 66px; translate: -50% 0; font-size: 15vw; color: transparent; -webkit-text-stroke: 1.5px rgba(44, 90, 140, .28); }
.ch-s-title { position: absolute; left: 3%; top: 76px; display: flex; flex-direction: column; }
.ch-s-title h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 40px; letter-spacing: .25em; color: #1a1615; }
.ch-s-title span { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: #2c5a8c; }
.ch-s-pin { position: absolute; left: 20%; top: 84px; width: 13%; margin: 0; aspect-ratio: 16 / 9; padding: 5px 5px 18px; background: #fff; box-shadow: 0 6px 14px rgba(26, 22, 21, .3); rotate: -4deg; }
.ch-s-pin img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.ch-s-pin::after { content: ''; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.ch-s-looks { position: absolute; right: 3%; top: 132px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.ch-s-looks button { display: flex; flex-direction: column; align-items: flex-end; padding: 5px 14px; font-family: var(--serif); color: #2c5a8c; background: rgba(255, 255, 255, .6); border: 1px solid rgba(44, 90, 140, .35); cursor: pointer; }
.ch-s-looks button b { font-size: 14px; letter-spacing: .12em; }
.ch-s-looks button i { font-style: normal; font-size: 11px; letter-spacing: .15em; opacity: .7; }
.ch-s-looks button.is-on { background: #2c5a8c; color: #fff; }
.ch-s-figure { position: absolute; left: 50%; bottom: 0; height: 88%; translate: -50% 0; }
.ch-s-actor { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(8px 6px 0 rgba(44, 90, 140, .18)); }
.ch-s-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(236, 230, 218, .85), 0 0 0 4px var(--c); }
.ch-s-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ch-s-lines path { filter: drop-shadow(0 0 1.5px #ece6da); }
.ch-s-lines path { fill: none; stroke: var(--c); stroke-width: .9; }
.ch-s-col { position: absolute; top: 210px; bottom: 50px; width: 24%; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.ch-s-col.is-l { left: 3%; top: 268px; }
.ch-s-col.is-r { right: 3%; top: 268px; }
.ch-co { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; margin: 0; padding: 8px 10px; background: #f6efe0 repeating-linear-gradient(transparent 0 21px, rgba(176, 60, 40, .16) 21px 22px); border-left: 3px solid var(--c); box-shadow: 0 4px 10px rgba(26, 22, 21, .14); cursor: var(--zoomcur), zoom-in; }
.ch-co:nth-child(odd) { rotate: -.6deg; } .ch-co:nth-child(even) { rotate: .5deg; }
.ch-s-col.is-r .ch-co { grid-template-columns: 1fr 84px; }
.ch-s-col.is-r .ch-co i { order: 2; }
.ch-co i { display: block; width: 84px; max-height: 84px; background-repeat: no-repeat; background-color: #1a1615; }
.ch-co figcaption { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.65; color: #3a2a20; }
.ch-co figcaption b { display: block; margin-bottom: 3px; font-style: normal; font-weight: 900; font-size: 14px; letter-spacing: .12em; color: #1a1615; }
.ch-co figcaption b em { margin-right: 8px; font-family: var(--display-latin); font-style: italic; font-weight: 600; color: var(--c); letter-spacing: .05em; }
.ch-s-col.is-r .ch-co figcaption { text-align: right; }
.ch-s-nocall { position: absolute; right: 6%; top: 50%; font-family: var(--serif); letter-spacing: .2em; color: #2c5a8c; }
.ch-s-down { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; margin: 0; padding: 4px 12px; font-family: var(--serif); font-size: 12.5px; letter-spacing: .3em; color: #2c5a8c; background: rgba(236, 230, 218, .9); }
.ch-s-more { position: relative; padding: 40px 5% 70px; background: #ece6da; }
.ch-s figure { cursor: zoom-in; }
.ch-s-more figure { margin: 0; }
.ch-s-more figcaption { margin-top: 4px; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: #2c5a8c; }
.ch-s-turn { max-width: 1100px; margin: 0 auto !important; }
.ch-s-turn img { display: block; width: 100%; background: #fff; box-shadow: 0 6px 16px rgba(26, 22, 21, .18); }
.ch-s-expr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.ch-s-expr img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.ch-s-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; margin-top: 20px; }
.ch-s-pal { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 14px; margin: 0; padding: 0; list-style: none; font-family: var(--serif); font-size: 12.5px; letter-spacing: .08em; }
.ch-s-pal li { display: flex; align-items: center; gap: 6px; }
.ch-s-pal i { width: 22px; height: 22px; transform: skewX(-12deg); outline: 1px solid rgba(26, 22, 21, .3); }
.ch-s-notes { margin: 0; padding: 0 0 0 16px; font-family: var(--serif); font-size: 13.5px; line-height: 1.8; }
.ch-s-quill { position: absolute; right: 4%; bottom: 10px; height: 110px; rotate: 60deg; max-width: none; pointer-events: none; }
.ch-s-fox { right: 14%; bottom: 0; height: 90px; }

/* ---------------------------------------------------------------- 日常 daily：整页代表色 + 巨大的黑色剪影脱下大衣（作者 2026-10-28） */
.ch-d { background: var(--c); }
.ch-d::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 70%, rgba(255, 220, 180, .25), transparent 60%), linear-gradient(115deg, transparent 62%, rgba(11, 10, 10, .9) 62.2%); pointer-events: none; }
.ch-d .ch-word { left: 2%; top: 70px; font-size: 12vw; color: transparent; -webkit-text-stroke: 2px rgba(11, 10, 10, .28); }
.ch-d-big { position: absolute; left: 6%; bottom: 0; width: 50%; height: 100%; overflow: hidden; }
.ch-d-sil { position: absolute; left: 50%; bottom: -105%; height: 210%; aspect-ratio: 1024 / 1536; translate: -50% 0; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.ch-d-cap { position: absolute; left: 8%; bottom: 7%; margin: 0; padding: 6px 18px; background: #0b0a0a; color: var(--c); font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: .3em; transform: skewX(-10deg); }
.ch-d-replay { position: absolute; left: 8%; bottom: 3%; padding: 0; border: 0; background: none; font-family: var(--serif); font-size: 12.5px; letter-spacing: .25em; color: rgba(11, 10, 10, .7); cursor: pointer; text-decoration: underline; }
.ch-d.is-pre .ch-d-late, .ch-d.is-pre .ch-d-replay { opacity: 0; pointer-events: none; }
.ch-d-album { position: absolute; right: 4%; top: 96px; bottom: 3%; width: min(36%, 520px); display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.ch-d-photo { flex: none; margin: 0; padding: 10px 10px 30px; background: #f3ead8; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); rotate: 2.5deg; cursor: zoom-in; }
.ch-d-photo img { display: block; width: 100%; max-height: 42vh; object-fit: cover; }
.ch-d-photo.is-blank { cursor: default; }
.ch-d-photo.is-blank span { display: grid; place-items: center; height: 30vh; font-family: var(--serif); letter-spacing: .3em; color: rgba(42, 29, 21, .4); background: repeating-linear-gradient(135deg, rgba(42, 29, 21, .05) 0 8px, transparent 8px 16px); }
.ch-d-card { margin-left: -8%; padding: 14px 18px; background: #f3ead8; color: #2a1d15; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); rotate: -1.5deg; overflow-y: auto; min-height: 0; }
.ch-d-card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: .2em; color: #b0502a; }
.ch-d-card p { margin: 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.85; }
.ch-d-card cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; opacity: .6; }
.ch-d-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-family: var(--display-latin); font-size: 18px; color: #f1e8dc; }
.ch-d-pager button { width: 36px; height: 36px; border: 0; background: #0b0a0a; color: var(--c); font-size: 14px; cursor: pointer; transform: skewX(-10deg); }
.ch-d-fox { right: 41%; bottom: 3%; height: 15%; animation: chBreathe 3.2s ease-in-out infinite; transform-origin: bottom; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
@keyframes chBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035, 1.05); } }
.ch-pro[data-scene="daily"] .ch-bar { color: #0b0a0a; }

/* ---------------------------------------------------------------- 法则 law：两秒剪辑台（放映幕 + 剪影胶片 + 胶片盘 + 剪辑笔记） */
.ch-l { background: #0f0b0a radial-gradient(ellipse at 34% 40%, rgba(208, 112, 58, .16), transparent 60%); color: #f1e8dc; }
.ch-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }
.ch-l .ch-word { left: 2%; bottom: -3%; font-size: 15vw; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 232, 220, .09); }
.ch-l-title { position: absolute; left: 3%; top: 84px; display: flex; align-items: baseline; gap: 14px; }
.ch-l-title h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 40px; letter-spacing: .3em; }
.ch-l-title span { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(241, 232, 220, .55); }
.ch-l-screen { position: absolute; left: 3%; top: 150px; width: 61%; height: calc(100% - 150px - 196px); }
.ch-l-frame { position: relative; height: 100%; background: var(--c); overflow: hidden; box-shadow: 0 0 0 10px #0b0a0a, 0 20px 50px rgba(0, 0, 0, .6); transition: background-color .15s; }
.ch-l-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 55%, rgba(0, 0, 0, .45)); pointer-events: none; z-index: 1; }
.ch-l-frame.is-rw { background: #8f2a20; }
.ch-l-sil { position: absolute; inset: 4% 6% 0; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.ch-l-tc { position: absolute; z-index: 2; left: 16px; top: 12px; font-family: var(--display-latin); font-size: 22px; letter-spacing: .1em; color: #0b0a0a; }
.ch-l-rw { position: absolute; z-index: 2; right: 18px; top: 12px; font-style: normal; font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: .3em; color: #f1e8dc; opacity: 0; }
.ch-l-frame.is-rw .ch-l-rw { opacity: 1; animation: chBlink .5s steps(2) infinite; }
@keyframes chBlink { 50% { opacity: .2; } }
.ch-l-cap { position: absolute; z-index: 2; left: 50%; bottom: 14px; translate: -50% 0; padding: 4px 16px; background: #0b0a0a; font-family: var(--serif); font-size: 15px; letter-spacing: .15em; white-space: nowrap; }
.ch-l-reelbar { position: absolute; left: 3%; bottom: 26px; width: 61%; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.ch-l-play { grid-row: 1; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--c); color: #0b0a0a; font-size: 20px; cursor: pointer; }
.ch-l-strip { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 14px 8px; background: #0b0a0a; }
.ch-l-strip::before, .ch-l-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(232, 220, 198, .5) 8px 15px); }
.ch-l-strip::before { top: 4px; } .ch-l-strip::after { bottom: 4px; }
.ch-l-cell { position: relative; aspect-ratio: 3 / 2; background: var(--c); cursor: pointer; outline: 2px solid transparent; }
.ch-l-cell i { position: absolute; inset: 6% 4% 0; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.ch-l-cell.is-rw { background: #8f2a20; }
.ch-l-cell.is-on { outline-color: #f1e8dc; }
.ch-l-cell.is-locked { background: #2a2321; cursor: default; } .ch-l-cell.is-locked i { opacity: 0; }
.ch-l-hold { grid-column: 2; position: relative; margin-top: 8px; height: 44px; overflow: hidden; border: 2px solid rgba(224, 112, 95, .35); background: #1a1110; color: rgba(241, 232, 220, .35); font-family: var(--serif); cursor: not-allowed; user-select: none; touch-action: none; }
.ch-l-hold b { position: relative; z-index: 1; font-weight: 900; font-size: 17px; letter-spacing: .4em; }
.ch-l-hold-bar { position: absolute; inset: 0; background: #b8322a; transform: scaleX(0); transform-origin: right; }
.ch-l-hold.is-ready { border-color: #e0705f; color: #f1e8dc; cursor: pointer; animation: chPulse 1.2s ease-in-out infinite; }
.ch-l-hold.is-ready:active { animation: none; }
.ch-l-hold.is-done { border-color: var(--c); color: #0b0a0a; animation: none; cursor: default; }
.ch-l-hold.is-done .ch-l-hold-bar { background: var(--c); }
@keyframes chPulse { 50% { box-shadow: 0 0 18px rgba(224, 112, 95, .7); } }
.ch-l-frame.is-holding .ch-l-sil { filter: blur(.6px); }
.ch-l-frame.is-holding::after { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 6px); animation: chScan .25s linear infinite; pointer-events: none; }
@keyframes chScan { to { background-position: 0 6px; } }
.ch-l-ruler { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 4px 0 0; font-family: var(--display-latin); font-size: 13px; letter-spacing: .1em; color: rgba(241, 232, 220, .6); }
.ch-l-ruler span:nth-child(2) { color: #e0705f; }
.ch-l-side { position: absolute; right: 3%; top: 150px; bottom: 20px; width: 30%; display: flex; flex-direction: column; gap: 10px; }
.ch-l-reels { display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; }
.ch-l-reel { margin: 0; text-align: center; }
.ch-l-reel img { display: block; margin: 0 auto 6px; width: calc(34px + var(--v) * 16px); max-width: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.ch-l-reel.is-empty img { width: 70px; opacity: .25; filter: grayscale(1); }
.ch-l-reel figcaption { font-family: var(--serif); font-size: 12.5px; color: var(--c); letter-spacing: .05em; }
.ch-l-reel figcaption b { display: block; font-weight: 900; font-size: 16px; letter-spacing: .25em; color: #f1e8dc; }
.ch-l-reelnote { margin: 0; text-align: center; font-family: var(--serif); font-size: 12px; letter-spacing: .1em; color: rgba(241, 232, 220, .5); }
.ch-l-notes { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.ch-l-note { padding: 10px 14px; background: #efe6d2; color: #1a1412; rotate: var(--r); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); border-top: 4px solid var(--c); }
.ch-l-note b { font-family: var(--serif); font-weight: 900; font-size: 14px; letter-spacing: .15em; color: #8a3a20; }
.ch-l-note p { margin: 4px 0 0; font-family: var(--serif); font-size: 13px; line-height: 1.7; }

/* 转场：胶片剪接 */
.ch-cutfx { position: absolute; inset: 0; z-index: 8; background: #0b0a0a; overflow: hidden; pointer-events: none; }
.ch-cutfx-strip { position: absolute; left: 0; top: 50%; display: flex; gap: 16px; align-items: center; padding: 0 16px; background: #050404; }
.ch-cutfx-strip::before, .ch-cutfx-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(232, 220, 198, .55) 14px 26px); }
.ch-cutfx-strip::before { top: 8px; } .ch-cutfx-strip::after { bottom: 8px; }
.ch-cutfx-cell { position: relative; flex: none; overflow: hidden; background: #111; }
.ch-cutfx-copy { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ch-cutfx-line { position: absolute; top: 18%; bottom: 18%; width: 3px; background: #e0302a; box-shadow: 0 0 12px #e0302a; transform-origin: 50% 0; opacity: 0; }

/* ---------------------------------------------------------------- 关系 ties：P5 协力者式对峙 */
.ch-t { background: #0b0a0a; }
.ch-t-stage { position: absolute; inset: 0 0 150px; overflow: hidden; }
.ch-t-scene { position: absolute; inset: 0; background: var(--sc); overflow: hidden; }
.ch-t-rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .1) 0 6deg, transparent 6deg 14deg); animation: chSpin 40s linear infinite; }
@keyframes chSpin { to { rotate: 360deg; } }
.ch-t-dots { position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, .22) 1.4px, transparent 1.6px) 0 0 / 11px 11px; -webkit-mask: linear-gradient(115deg, transparent 30%, #000 75%); mask: linear-gradient(115deg, transparent 30%, #000 75%); }
.ch-t-me, .ch-t-them { position: absolute; bottom: 0; overflow: hidden; background: #0b0a0a; }
.ch-t-me { left: -4%; width: 36%; height: 92%; clip-path: polygon(0 6%, 100% 0, 82% 100%, 0 100%); box-shadow: inset 0 0 0 0 #000; }
.ch-t-them { right: -3%; width: 42%; height: 104%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.ch-t-me img, .ch-t-them img { position: absolute; bottom: 0; height: 100%; max-width: none; }
.ch-t-me img { left: 0; }
.ch-t-them img { right: 0; transform: scaleX(-1); }
.ch-t-me::after, .ch-t-them::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ch-t-them::after { box-shadow: inset 8px 0 0 #f1e8dc; clip-path: inherit; }
.ch-t-no { position: absolute; right: 37%; top: 16%; font-family: var(--display-latin); font-weight: 700; font-size: 30vh; line-height: .85; color: rgba(11, 10, 10, .22); }
.ch-t-head { position: absolute; left: 35%; top: 96px; max-width: 30%; }
.ch-t-head span { display: inline-block; padding: 2px 10px; background: #0b0a0a; color: var(--sc); font-family: var(--serif); font-size: 12.5px; letter-spacing: .2em; transform: skewX(-12deg); }
.ch-t-head h3 { margin: 6px 0 0; font-family: var(--serif); font-weight: 900; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: .06em; color: #0b0a0a; line-height: 1.15; }
.ch-t-head em { font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .25em; color: rgba(11, 10, 10, .7); }
.ch-t-word { position: absolute; left: 29%; top: 33%; max-width: 42%; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 2px; rotate: -6deg; }
.ch-rs { display: inline-block; padding: 2px 8px; font-style: normal; font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.15; rotate: var(--rr); translate: 0 var(--ry); box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); }
.ch-rs.is-w { background: #f6efe2; color: #0b0a0a; }
.ch-rs.is-b { background: #0b0a0a; color: #f6efe2; }
.ch-rs.is-c { background: #0b0a0a; color: var(--sc); font-size: clamp(36px, 4vw, 62px); }
.ch-t-say { position: absolute; margin: 0; padding: 16px 22px 18px; width: min(30%, 420px); font-family: var(--serif); font-size: 15px; line-height: 1.8; }
.ch-t-say cite { display: block; margin-bottom: 4px; font-style: normal; font-weight: 900; font-size: 13px; letter-spacing: .3em; }
.ch-t-say.is-me { left: 24%; bottom: 7%; background: #f6efe2; color: #1a1412; clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 93%); rotate: -2deg; }
.ch-t-say.is-me cite { color: #c0502a; }
.ch-t-say.is-me::before { content: ''; position: absolute; left: -26px; bottom: 30%; border: 16px solid transparent; border-right-color: #f6efe2; }
.ch-t-say.is-them { left: 45%; top: 55%; background: #0b0a0a; color: #f1e8dc; clip-path: polygon(0 4%, 97% 0, 100% 96%, 4% 100%); rotate: 1.5deg; }
.ch-t-say.is-them cite { color: var(--sc); }
.ch-t-circles { position: absolute; left: 0; right: 0; bottom: 112px; height: 38px; display: flex; gap: 4px; padding: 0 2vw; background: #0b0a0a; align-items: flex-end; z-index: 1; }
.ch-t-circles button { display: flex; align-items: baseline; gap: 8px; padding: 6px 20px; border: 0; background: #1b1716; color: rgba(241, 232, 220, .6); font-family: var(--serif); cursor: pointer; transform: skewX(-12deg); }
.ch-t-circles button b { font-weight: 900; font-size: 15px; letter-spacing: .2em; }
.ch-t-circles button i { font-style: normal; font-family: var(--display-latin); font-size: 11px; letter-spacing: .2em; }
.ch-t-circles button.is-on { background: #f1e8dc; color: #0b0a0a; }
.ch-t-bar { perspective: 600px; }
.ch-t-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 112px; display: flex; gap: 6px; align-items: stretch; padding: 10px 2vw 12px; background: #0b0a0a; box-sizing: border-box; }
.ch-t-tab { position: relative; flex: 1; padding: 0; border: 0; overflow: hidden; background: #1b1716; cursor: pointer; transform: skewX(-12deg); transition: flex .25s cubic-bezier(.2, .8, .2, 1); }
.ch-t-tab img { position: absolute; left: 50%; top: -30%; height: 180%; translate: -50% 0; transform: skewX(12deg); filter: grayscale(.6) brightness(.6); transition: filter .2s; }
.ch-t-tab b { position: absolute; left: 10px; top: 4px; font-family: var(--display-latin); font-weight: 700; font-size: 22px; color: var(--sc); transform: skewX(12deg); }
.ch-t-tab span { position: absolute; right: 10px; bottom: 6px; padding: 0 6px; background: #0b0a0a; font-family: var(--serif); font-weight: 900; font-size: 14px; letter-spacing: .1em; color: #f1e8dc; transform: skewX(12deg); }
.ch-t-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--sc); transform: scaleX(0); transition: transform .2s; }
.ch-t-tab:hover img, .ch-t-tab.is-on img { filter: none; }
.ch-t-tab.is-on { flex: 1.6; }
.ch-t-tab.is-on::after, .ch-t-tab:hover::after { transform: none; }
.ch-pro[data-scene="ties"] .ch-bar { color: #f1e8dc; background: linear-gradient(rgba(11, 10, 10, .85), rgba(11, 10, 10, 0)); padding-bottom: 28px; }
/* 进场：七色斜条 */
.ch-callin { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; background: #0b0a0a; }
.ch-callin i { position: absolute; top: -4%; bottom: -4%; background: var(--sc); overflow: hidden; transform-origin: 0 50%; box-shadow: 0 0 0 4px #0b0a0a; }
.ch-callin img { position: absolute; left: 50%; top: 8%; height: 80%; translate: -50% 0; max-width: none; transform: skewX(12deg); }
.ch-callin b { position: absolute; left: 12%; bottom: 6%; font-family: var(--display-latin); font-weight: 700; font-size: 9vh; color: #0b0a0a; transform: skewX(12deg); }

/* ---------------------------------------------------------------- 履历 road：胶片 */
.ch-r { background: #1a0f0e; }
.ch-r .ch-word { right: 2%; top: 70px; font-size: 12vw; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 232, 220, .1); }
.ch-r-title { position: absolute; left: 3%; top: 84px; }
.ch-r-title h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 40px; letter-spacing: .3em; color: #f1e8dc; }
.ch-r-title span { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(241, 232, 220, .55); }
.ch-r-strip { position: absolute; left: 0; right: 0; top: 30%; height: 46%; overflow: hidden; background: #0b0a0a; border-top: 18px solid #0b0a0a; border-bottom: 18px solid #0b0a0a; box-shadow: 0 -10px 0 -4px #0b0a0a; }
.ch-r-strip::before, .ch-r-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 14px, #e8dcc6 14px 26px, transparent 26px 40px); opacity: .55; }
.ch-r-strip::before { top: -14px; } .ch-r-strip::after { bottom: -14px; }
.ch-r-track { display: flex; gap: 14px; height: 100%; padding: 0 3vw; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.ch-r-frame { position: relative; flex: none; width: clamp(240px, 22vw, 320px); padding: 18px 20px; box-sizing: border-box; background: linear-gradient(160deg, #2a1c1a, #1b1312); border: 1px solid rgba(208, 112, 58, .25); }
.ch-r-no { display: block; font-family: var(--display-latin); font-weight: 700; font-size: 54px; line-height: 1; color: var(--c); }
.ch-r-frame h3 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .08em; color: #f1e8dc; }
.ch-r-frame p { margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.85; color: rgba(241, 232, 220, .82); }
.ch-r-look { position: absolute; left: 20px; bottom: 14px; font-style: normal; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: rgba(241, 232, 220, .45); }
.ch-r-stamp { position: absolute; right: 14px; top: 16px; padding: 4px 10px; border: 3px solid #b8322a; color: #b8322a; font-style: normal; font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .3em; rotate: 12deg; opacity: .85; }
.ch-r-walk { position: absolute; left: 3vw; right: 3vw; bottom: 2%; height: 18%; border-bottom: 1px dashed rgba(241, 232, 220, .25); }
.ch-r-walker { position: absolute; left: 0; bottom: 0; height: 100%; aspect-ratio: 2 / 3; background: var(--c); -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.ch-r-walker.is-step { translate: 0 -4px; }

/* ---------------------------------------------------------------- 新转场 */
.ch-chg { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.ch-chg-bg { position: absolute; inset: -5% -20%; background: radial-gradient(ellipse at 50% 60%, #4a2a18, #1a110c 70%); }
.ch-chg-fig { position: absolute; left: 50%; bottom: 0; height: 92%; max-width: none; translate: -50% 0; transform-origin: 50% 100%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.ch-flip { position: absolute; z-index: 8; left: 50%; top: 50%; width: 46vh; max-width: none; pointer-events: none; filter: drop-shadow(0 0 30px rgba(230, 194, 122, .6)); }
.ch-film { position: absolute; z-index: 8; left: -10%; right: -10%; top: 50%; height: 40%; overflow: hidden; background: #0b0a0a; border-top: 16px solid #0b0a0a; border-bottom: 16px solid #0b0a0a; pointer-events: none; }
.ch-film > div { display: flex; gap: 12px; height: 100%; width: max-content; }
.ch-film b { display: grid; place-items: center; width: 22vw; height: 100%; background: linear-gradient(160deg, #2a1c1a, #1b1312); font-family: var(--display-latin); font-size: 12vh; color: var(--c); }

/* ---------------------------------------------------------------- 转场的道具 */
.ch-veil { position: absolute; inset: 0; z-index: 7; background: radial-gradient(circle at 50% 50%, rgba(11, 10, 10, .78), rgba(11, 10, 10, .96)); pointer-events: none; }
.ch-big-watch { left: 50%; top: 50%; z-index: 8; height: 78%; }
.ch-pull { position: absolute; z-index: 8; left: 0; bottom: 0; height: 82%; aspect-ratio: 1536 / 1024; background: #f1e8dc; -webkit-mask: no-repeat left bottom / contain; mask: no-repeat left bottom / contain; pointer-events: none; filter: drop-shadow(3px 0 0 #0b0a0a) drop-shadow(-3px 0 0 #0b0a0a) drop-shadow(0 3px 0 #0b0a0a); }
.ch-runfox { position: absolute; z-index: 8; left: 0; bottom: 4%; height: 15%; max-width: none; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.ch-yawn { position: absolute; z-index: 7; right: 2%; bottom: 0; height: 38%; aspect-ratio: 2 / 3; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; transform-origin: bottom; pointer-events: none; }

/* 放大看图 */
.ch-zoom { position: fixed; inset: 0; z-index: 70; background: rgba(8, 7, 7, .72); cursor: zoom-out; }
.ch-zoom-card { position: fixed; left: 50%; top: 50%; translate: -50% -50%; max-width: min(78vw, 1100px); max-height: 78vh; padding: 10px 10px 12px; background: #f3ead8; box-shadow: 14px 14px 0 var(--c, #d0703a), 0 30px 60px rgba(0, 0, 0, .6); rotate: -1.5deg; }
.ch-zoom-piece { display: block; background-repeat: no-repeat; background-color: #1a1615; }
.ch-zoom-card img { display: block; max-width: 100%; max-height: calc(78vh - 44px); }
.ch-zoom-card p { max-width: 36em; margin: 8px 4px 0; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: #3a2a20; }

/* ---------------------------------------------------------------- 窄屏：场景改成上图下文 */
@media (max-width: 900px) {
  .ch-r-row { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, 34vh); margin-left: 3vw; }
  .ch-card:nth-child(odd), .ch-card:nth-child(even) { margin: 0; }
  .ch-pro { height: auto; min-height: calc(100svh - 72px); }
  .ch-scene, .ch-sc { position: relative; inset: auto; }
  .ch-sc { min-height: calc(100svh - 72px); padding-top: 120px; }
  .ch-bar { flex-wrap: wrap; }
  .ch-menu { margin-left: 0; flex-wrap: wrap; }
  .ch-d-actor { position: relative; display: block; left: auto; right: auto; bottom: auto; height: 60svh; margin: 0 auto; rotate: none; }
  .ch-f-bg { position: relative; height: 70svh; }
  .ch-f-ui { position: relative; inset: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
  .ch-f-ui > * { position: relative !important; inset: auto !important; width: auto !important; rotate: none !important; }
  .ch-s-hero { height: auto; }
  .ch-s-figure { position: relative; left: auto; translate: none; height: 70svh; margin: 0 auto; }
  .ch-s-col { position: relative; inset: auto !important; width: auto; margin: 12px 16px; }
  .ch-s-lines, .ch-s-dot, .ch-s-pin { display: none; }
  .ch-s-title, .ch-s-looks { position: relative; inset: auto; margin: 0 16px 10px; }
  .ch-d-notes { position: relative; inset: auto; width: auto; margin: 16px; overflow: visible; }
  .ch-d-photo { position: relative; left: auto; top: auto; width: auto; margin: 0 16px 16px; }
  .ch-s-expr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-s-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ch-card, .ch-card-slab, .ch-card-img img, .ch-menu button::before { transition: none; } .ch-d-fox { animation: none; } }
.ch-cutfx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ch-cutfx-cell b { position: absolute; z-index: 2; left: 8px; top: 6px; font-family: var(--display-latin); font-size: 15px; color: #f1e8dc; text-shadow: 0 0 4px #000; }
.ch-cutfx-cell.is-cut::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(176, 40, 30, .35); box-shadow: inset 0 0 0 3px #e0302a; }

/* 修道院那一圈：对话框是信纸（作者 2026-10-28：每个圈子一点小差异） */
.ch-t-scene.is-letter .ch-t-say { clip-path: none; background: #f4ead2 repeating-linear-gradient(transparent 0 26px, rgba(120, 90, 50, .22) 26px 27px); color: #3a2a18; font-style: italic; border-radius: 2px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.ch-t-scene.is-letter .ch-t-say::before { content: ''; position: absolute; left: 50%; top: -10px; width: 80px; height: 20px; translate: -50% 0; border: 0; background: rgba(241, 232, 220, .6); rotate: -3deg; }
.ch-t-scene.is-letter .ch-t-say cite { font-style: normal; color: #8a5a2a; }
.ch-t-scene.is-letter .ch-t-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 240, 200, .14) 0 6deg, transparent 6deg 14deg); }
.ch-t-tab { max-width: 240px; }

/* ---------------------------------------------------------------- 蕾奥娜（2026-10-28）：慢镜头法则页、雷霆冲刺与落雷转场 */
.ch-l.is-slow .ch-l-frame { background: var(--c); }
.ch-l.is-slow .ch-l-frame.is-rw { background: #2a2350; }
.ch-l.is-slow .ch-l-frame.is-rw .ch-l-sil { background: #f1e8dc; }
.ch-l.is-slow .ch-l-rw { opacity: 1; animation: none; color: #0b0a0a; }
.ch-l.is-slow .ch-l-frame.is-rw .ch-l-rw { color: var(--c); }
.ch-l-foe { position: absolute; inset: 4% 6% 0; background: #2a2026; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; opacity: .85; }
.ch-l-streak { position: absolute; left: 0; right: 0; top: 52%; height: 4px; background: #f6f0ff; box-shadow: 0 0 18px #fff, 0 0 40px var(--c); transform-origin: left; opacity: 0; }
.ch-l-white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ch-sprint, .ch-strike { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.ch-sp-run { position: absolute; left: 0; top: 13%; width: 88%; height: 78%; background: #09080f; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; transform-origin: 50% 85%; }
.ch-sp-charge { position: absolute; left: 0; top: 13%; width: 88%; height: 78%; background: no-repeat center / contain; opacity: 0; transform-origin: 50% 85%; }
.ch-sp-bolt { position: absolute; inset: 16% -3% 5%; background: no-repeat center / contain; opacity: 0; }
.ch-sp-streak { position: absolute; left: -25%; right: -25%; top: 50%; height: 2px; background: #e1d7ff; box-shadow: 0 0 15px var(--c), 0 4px 0 rgba(165, 150, 255, .3); rotate: -7deg; opacity: 0; }
.ch-sp-flash, .ch-st-flash { position: absolute; inset: 0; background: #f4f0ff; opacity: 0; }
.ch-st-bolt { position: absolute; left: 50%; top: 50%; width: 140vh; height: 26vh; margin: -13vh 0 0 -70vh; background: no-repeat center / contain; transform-origin: center; filter: drop-shadow(0 0 20px var(--c)); }
.ch-l.is-slow .ch-l-screen { height: calc(100% - 150px - 250px); }
.ch-l.is-slow .ch-l-sil, .ch-l.is-slow .ch-l-foe { inset: 6% 18% 0; transition: translate .25s cubic-bezier(.2, 1, .3, 1); }
.ch-l.is-slow .ch-l-foe { translate: 16% 0; }
.ch-l.is-slow .ch-l-frame.is-rw .ch-l-tc { color: #f1e8dc; }
.ch-d-snap { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(246, 240, 255, .75), rgba(165, 150, 255, .25) 55%, transparent 75%); }
.ch-d-snap i { position: absolute; top: 0; height: 100%; width: 40%; translate: -50% 0; background: no-repeat center / contain; rotate: 90deg; scale: 2.2 1; filter: drop-shadow(0 0 16px var(--c)); }
/* 法则慢镜头：她按真实身高缩到和士兵同比例（脚底对齐）；字幕抬高一点；右栏笔记紧凑，盘子缩小，放得下全部条目 */
.ch-l.is-slow .ch-l-sil { scale: .74; transform-origin: 50% 100%; }
.ch-l.is-slow .ch-l-cap { bottom: 34px; }
.ch-l.is-slow .ch-l-reel img { width: calc(26px + var(--v) * 11px); margin-bottom: 4px; }
.ch-l.is-slow .ch-l-reel figcaption b { font-size: 14px; }
.ch-l.is-slow .ch-l-notes { gap: 7px; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); padding-bottom: 30px; }
.ch-l.is-slow .ch-l-note { padding: 7px 12px; }
.ch-l.is-slow .ch-l-note p { font-size: 12.5px; line-height: 1.6; margin-top: 2px; }
.ch-l.is-slow .ch-l-reelnote { display: none; }
/* 声音开关（右下角）：三根小音柱，关掉时压扁 */
.ch-sound { position: fixed; right: 18px; bottom: 16px; z-index: 50; display: flex; align-items: flex-end; gap: 3px; padding: 8px 12px; background: rgba(11, 10, 10, .72); border: 1px solid rgba(241, 232, 220, .3); color: #f1e8dc; cursor: pointer; transform: skewX(-10deg); font-family: var(--serif); font-size: 12px; letter-spacing: .2em; }
.ch-sound i { width: 3px; height: 12px; background: currentColor; transform-origin: bottom; animation: chEq .9s ease-in-out infinite alternate; }
.ch-sound i:nth-child(2) { animation-delay: -.3s; } .ch-sound i:nth-child(3) { animation-delay: -.6s; }
.ch-sound span { margin-left: 6px; }
.ch-sound.is-off { opacity: .55; } .ch-sound.is-off i { animation: none; transform: scaleY(.2); }
@keyframes chEq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ch-sound i { animation: none; } }

/* ---------------------------------------------------------------- 人物页开场（2026-10-29）：门 → 维拉走来 → 「……想窥探我们的隐私？」→ 一枪打碎屏幕 */
html.is-intro { overflow: hidden; }
.ch.is-hold { visibility: hidden; }
.ch-intro { --c: #d0703a; position: fixed; inset: 0; z-index: 200; overflow: hidden; color: #f1e8dc; }
.ch-intro.is-open { pointer-events: none; }
.ch-in-stage, .ch-in-shard { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #e08a52, var(--c) 45%, #7a3418 100%); }
.ch-in-stage::after, .ch-in-shard::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(11, 10, 10, .22) 1.2px, transparent 1.6px) 0 0 / 7px 7px; pointer-events: none; }
.ch-in-sil { position: absolute; left: 50%; bottom: 0; height: 94vh; aspect-ratio: 1024 / 1536; transform: translateX(-50%) scale(.5); transform-origin: 50% 100%; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.ch-intro:not(.is-run) .ch-in-sil { opacity: 0; }
.ch-in-line { position: absolute; left: 5vw; bottom: 12vh; z-index: 2; margin: 0; rotate: -4deg; display: flex; gap: .2em; white-space: nowrap; font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 5.4vw, 76px); }
.ch-in-line span { opacity: 0; padding: .04em .2em; background: #0b0a0a; color: #f1e8dc; box-shadow: .12em .12em 0 #f1e8dc; }
.ch-in-line span:nth-child(2) { background: #f1e8dc; color: #0b0a0a; box-shadow: .12em .12em 0 #0b0a0a; }
.ch-in-line span:nth-child(3) { color: var(--c); }
.ch-in-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ch-in-crack path { stroke: #fff; stroke-dasharray: 1; }
.ch-in-crack .is-shadow path { stroke: rgba(11, 10, 10, .55); }
.ch-in-crack circle { fill: #0b0a0a; stroke: #fff; stroke-width: 2; }
.ch-in-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.ch-in-gate { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 18px; background: rgba(11, 10, 10, .78); }
.ch-in-go { display: grid; gap: 8px; padding: 22px 48px; color: #0b0a0a; background: #f1e8dc; border: 0; cursor: pointer; transform: skewX(-10deg); box-shadow: 10px 10px 0 var(--c); font-family: var(--serif); transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s; }
.ch-in-go b { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; letter-spacing: .3em; }
.ch-in-go i { font-style: normal; font-size: 13px; letter-spacing: .25em; color: #5a4636; }
.ch-in-go:hover, .ch-in-go:focus-visible { transform: skewX(-10deg) scale(1.04); box-shadow: 14px 14px 0 var(--c); outline: none; }
.ch-in-gate p { margin: 0; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(241, 232, 220, .6); }
.ch-in-skip { position: absolute; right: 22px; top: 18px; z-index: 6; padding: 6px 14px; color: #f1e8dc; background: rgba(11, 10, 10, .5); border: 1px solid rgba(241, 232, 220, .4); font-family: var(--serif); font-size: 13px; letter-spacing: .2em; cursor: pointer; transform: skewX(-10deg); }
.ch-r-replay { margin-left: 14px; padding: 2px 10px; color: inherit; background: none; border: 1px solid currentColor; font: inherit; cursor: pointer; opacity: .7; transform: skewX(-10deg); }
.ch-r-replay:hover { opacity: 1; }
.ch-in-aim { position: absolute; max-width: none; opacity: 0; pointer-events: none; }
.ch-in-aim.is-on { opacity: 1; }

/* ---------------------------------------------------------------- 卢西安（2026-10-29）：七剑胶片、直剑雨、骑枪钻洞、愈创剑绕身 */
.ch-l.is-arsenal .ch-l-sil { inset: 8% 40% 0 6%; -webkit-mask-position: left bottom; mask-position: left bottom; scale: 1; translate: none; }
.ch-l.is-arsenal .ch-l-frame { transition: background-color .4s; }
.ch-l.is-arsenal .ch-l-frame.is-real { background: #241a1f; }
.ch-l.is-arsenal .ch-l-frame.is-real .ch-l-sil { background: #e9e6e1; }
.ch-l.is-arsenal .ch-l-frame.is-real .ch-l-tc { color: #e9e6e1; }
.ch-l.is-arsenal .ch-l-rw { opacity: 1; animation: none; color: #0b0a0a; }
.ch-l.is-arsenal .ch-l-frame.is-real .ch-l-rw { color: #c0475a; }
.ch-l-swords { position: absolute; inset: 0; pointer-events: none; }
.ch-l-swords > img { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); max-width: none; }
.ch-l.is-arsenal .ch-l-cell { position: relative; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.ch-l.is-arsenal .ch-l-cell img { position: absolute; left: 50%; top: 50%; height: 170%; max-width: none; translate: -50% -50%; rotate: 62deg; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.ch-l.is-arsenal .ch-l-cell b { position: absolute; left: 6px; top: 4px; font-family: var(--serif); font-size: 13px; color: #f1e8dc; text-shadow: 0 1px 2px #000; }
.ch-l.is-arsenal .ch-l-cell.is-sealed:not(.is-open) img { filter: grayscale(1) brightness(.35); }
.ch-l.is-arsenal .ch-l-cell .ch-l-chain { -webkit-mask: none; mask: none; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(168, 141, 96, .75) 10px 13px, transparent 13px 20px), repeating-linear-gradient(-45deg, transparent 0 10px, rgba(168, 141, 96, .75) 10px 13px, transparent 13px 20px); transition: opacity .35s; }
.ch-l-cell.is-open .ch-l-chain { opacity: 0; }
.ch-l-mode { display: flex; gap: 6px; grid-column: 2; }
.ch-l-mode button { flex: 1; padding: 9px 12px; color: #f1e8dc; background: #1a1517; border: 1px solid rgba(241, 232, 220, .25); font-family: var(--serif); font-size: 14px; letter-spacing: .15em; cursor: pointer; transform: skewX(-10deg); }
.ch-l-mode button.is-on { background: var(--c); color: #0b0a0a; border-color: var(--c); }
.ch-l-mode button[data-mode="real"].is-on { background: #c0475a; border-color: #c0475a; color: #f1e8dc; }
.ch-l-special { padding: 14px 16px; background: #efe6d2; color: #1a1412; border-top: 4px solid var(--c); }
.ch-l-special b { display: block; font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: .1em; }
.ch-l-special p { margin: 6px 0 0; font-family: var(--serif); font-size: 13px; line-height: 1.7; }
.ch-rain, .ch-lance { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.ch-lance img { position: absolute; left: 50%; top: 50%; height: 120vh; max-width: none; transform-origin: center; filter: drop-shadow(0 0 30px rgba(95, 143, 184, .6)); }
.ch-lance i { position: absolute; left: 50%; top: 50%; width: 40vh; height: 40vh; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(241, 232, 220, .7) 22%, transparent 30% 45%, rgba(95, 143, 184, .8) 48%, transparent 56% 70%, rgba(241, 232, 220, .6) 73%, transparent 80%); -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%, #000 60%, transparent 62%); mask: radial-gradient(circle, transparent 40%, #000 42%, #000 60%, transparent 62%); }
/* 日常：第五剑的影子，浮在他身侧 */
.ch-d-orbit { position: absolute; left: 62%; bottom: 8%; height: 58%; aspect-ratio: 1024 / 1536; background: #0b0a0a; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; pointer-events: none; transform-origin: 50% 80%; }
/* 设定稿底部：心象七剑 */
.ch-s-arsenal-h { margin: 44px 0 14px; font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .2em; color: #1a1615; }
.ch-s-arsenal-h em { margin-left: 14px; font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: .15em; color: #2c5a8c; }
.ch-s-arsenal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ch-s-weapon { position: relative; display: flex; flex-direction: column; padding: 10px 10px 14px; background: #f6f1e6; border-top: 4px solid var(--c); box-shadow: 0 6px 14px rgba(26, 22, 21, .12); }
.ch-s-weapon.is-lock { border-top-color: #8a2f3a; }
.ch-s-weapon figure { height: 300px; display: grid; place-items: center; cursor: zoom-in; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(44, 90, 140, .08) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(44, 90, 140, .08) 23px 24px); }
.ch-s-weapon figure img { display: block; width: 100%; height: 280px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.ch-s-weapon:hover figure img { transform: translateY(-6px) scale(1.04); }
.ch-s-weapon > b { position: absolute; left: 10px; top: 12px; font-family: var(--serif); font-size: 22px; color: #2c5a8c; }
.ch-s-weapon.is-lock > b { color: #8a2f3a; }
.ch-s-weapon h4 { margin: 10px 0 6px; font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: .12em; color: #1a1615; }
.ch-s-weapon dl { margin: 0; font-family: var(--serif); font-size: 12.5px; line-height: 1.65; color: #3a302a; }
.ch-s-weapon dt { margin-top: 6px; font-size: 11px; letter-spacing: .25em; color: #2c5a8c; }
.ch-s-weapon.is-lock dt:nth-of-type(3) { color: #8a2f3a; }
.ch-s-weapon dd { margin: 0; }
@media (max-width: 1100px) { .ch-s-arsenal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 法则转场：业火一斩 */
@property --burn { syntax: '<length>'; inherits: false; initial-value: 0px; }
.ch-hell { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; --ang: -32deg; }
.ch-hell-blade { position: absolute; left: 50%; top: 104%; height: 150vh; aspect-ratio: 1024 / 1536; background: #050405; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; transform-origin: 50% 100%; opacity: 0; }
.ch-hell-cut { position: absolute; left: -20%; right: -20%; top: 50%; height: 10px; margin-top: -5px; background: linear-gradient(#ffe3c2, #fff 40%, #ff6a3a); box-shadow: 0 0 22px #ff4a1e, 0 0 60px #8a1a10; transform-origin: center; opacity: 0; }
.ch-hell.is-burn .ch-hell-cut { background: #050405; box-shadow: 0 0 18px #b3241a, 0 0 50px #2a0806; height: 22px; margin-top: -11px; transition: background .2s, height .2s; }
.ch-hell-ember { position: absolute; inset: 0; background: radial-gradient(circle, #ff7a3a 1.2px, transparent 2px) 0 0 / 37px 41px, radial-gradient(circle, #c0331f 1px, transparent 1.8px) 13px 9px / 53px 47px; opacity: 0; animation: chEmber 1.2s linear infinite; }
@keyframes chEmber { to { background-position: 30px -120px, 0 -90px; } }
/* 卢西安法则 v2：专属动画（全剪影） */
.ch-a-foe { position: absolute; right: -8%; bottom: 0; height: 100%; aspect-ratio: 1536 / 1024; background: #0b0a0a; -webkit-mask: no-repeat center bottom / contain; mask: no-repeat center bottom / contain; }
.ch-l-frame.is-real .ch-a-foe { background: #e9e6e1; }
.ch-a-dome { position: absolute; left: 76%; top: 50%; width: 40%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(200, 225, 255, .08) 55%, rgba(200, 225, 255, .35) 68%, rgba(235, 245, 255, .85) 70%, transparent 72%); }
.ch-a-dome::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 255, 255, .5) 9%, transparent 10% 30%, rgba(255, 255, 255, .4) 31%, transparent 32% 61%, rgba(255, 255, 255, .5) 62%, transparent 63%); -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 50%, #000 52%, #000 70%, transparent 71%); opacity: 0; transition: opacity .1s; }
.ch-a-dome.is-hit::after { opacity: 1; }
.ch-a-lance { position: absolute; left: 40%; top: 44%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.ch-a-lance img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: none; translate: -50% -50%; filter: brightness(0); transform: rotate(90deg); }
.ch-l-frame.is-real .ch-a-lance img { filter: brightness(0) invert(.92); }
.ch-a-wind { position: absolute; inset: 38% 0; opacity: 0; background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(255, 255, 255, .55) 14px 16px, transparent 16px 30px); -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent); }
.ch-a-lance.is-spin .ch-a-wind { opacity: 1; animation: chWind .12s linear infinite; }
@keyframes chWind { to { background-position: 30px 0; } }
.ch-a-shards { position: absolute; left: 70%; top: 50%; }
.ch-a-shards b { position: absolute; width: 18px; height: 28px; background: rgba(235, 245, 255, .9); clip-path: polygon(50% 0, 100% 70%, 20% 100%); transform: rotate(var(--a)) translateY(0) scale(var(--s)); opacity: 0; }
.ch-a-shards.is-go b { animation: chShard .6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes chShard { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(var(--s)); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(200deg) scale(var(--s)); } }
/* 剑雨（剪影齐射） */
.ch-rain i { position: absolute; left: 0; width: var(--l); height: calc(var(--l) * .22); margin-top: calc(var(--l) * -.11); }
.ch-rain i::before { content: ''; position: absolute; right: 40%; top: 50%; width: 140%; height: 2px; background: linear-gradient(90deg, transparent, rgba(95, 143, 184, .55)); }
.ch-rain img { position: absolute; left: 50%; top: 50%; height: var(--l); width: auto; max-width: none; translate: -50% -50%; rotate: 90deg; filter: brightness(0) drop-shadow(0 0 1.5px rgba(150, 190, 230, .9)); }
/* 法则：选中的剑浮在右栏 */
.ch-l-blade { display: grid; grid-template-columns: 34% 1fr; gap: 12px; padding: 12px 14px; background: #efe6d2; color: #1a1412; border-top: 4px solid var(--c); }
.ch-l-blade.is-lock { border-top-color: #8a2f3a; }
.ch-l-blade figure { margin: 0; height: 190px; display: grid; place-items: center; }
.ch-l-blade img { height: 190px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); animation: chFloat 3s ease-in-out infinite; }
@keyframes chFloat { 50% { translate: 0 -8px; rotate: 2deg; } }
.ch-l-blade b { display: block; font-family: var(--serif); font-weight: 900; font-size: 17px; letter-spacing: .12em; }
.ch-l-blade dl { margin: 6px 0 0; font-family: var(--serif); font-size: 12.5px; line-height: 1.6; }
.ch-l-blade dt { margin-top: 4px; font-size: 11px; letter-spacing: .25em; color: #2c5a8c; }
.ch-l-blade.is-lock dt:nth-of-type(3) { color: #8a2f3a; }
.ch-l-blade dd { margin: 0; }
.ch-l.is-arsenal .ch-l-reelbar { grid-template-columns: 1fr; }
.ch-l.is-arsenal .ch-l-mode { grid-column: 1; }
.ch-l.is-arsenal .ch-l-frame { cursor: grab; touch-action: none; }
.ch-l.is-arsenal .ch-l-cap { top: auto; bottom: 12px; left: auto; right: 16px; translate: none; max-width: 62%; white-space: normal; font-size: 14px; }
/* 骑枪蓄力条 */
.ch-a-meter { position: absolute; left: 30%; top: 64%; width: 20%; height: 6px; background: rgba(11, 10, 10, .35); }
.ch-a-meter b { position: absolute; inset: 0; background: #f1e8dc; transform-origin: left; transform: scaleX(0); }
.ch-a-meter.is-full b { background: #fff; box-shadow: 0 0 10px #fff; }
/* 业火 v3：生成的天照黑焰火墙 */
@property --h { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --y { syntax: '<length>'; inherits: false; initial-value: 0px; }
.ch-hell-line { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 0; }
.ch-hell-line .ch-hell-cut { position: absolute; left: 0; right: 0; top: -5px; height: 10px; margin: 0; }
.ch-hell-wall { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; transform-origin: 50% 100%; transform: translateY(var(--y)) scaleY(var(--h)); }
.ch-hell-wall.is-down { bottom: auto; top: 0; transform-origin: 50% 0; }
.ch-hell-wall.is-down i { transform: scaleY(-1); }
.ch-hell-wall i { position: absolute; inset: 0; background: url(../img/ch-hellfire-wall-1.webp) repeat-x left bottom / auto 100%; filter: drop-shadow(0 0 14px rgba(120, 10, 30, .55)); }
.ch-hell-wall i + i { background-image: url(../img/ch-hellfire-wall-2.webp); background-position: 380px bottom; opacity: 0; }
.ch-hell-wall.is-alt i:first-child { opacity: 0; } .ch-hell-wall.is-alt i + i { opacity: 1; }
/* 法则 v2：其余六剑 */
.ch-a-sw { position: absolute; left: 40%; top: 46%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.ch-a-sw img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: none; translate: -50% -50%; filter: brightness(0); }
.ch-l-frame.is-real .ch-a-sw img { filter: brightness(0) invert(.92); }
.ch-a-sw.is-h img { rotate: 90deg; }
.ch-a-sw.is-sabre { left: 32%; top: 40%; width: 34%; opacity: 0; transform-origin: 50% 85%; }
.ch-a-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ch-a-trail path { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: .6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 3px; }
.ch-a-wave { position: absolute; left: 36%; top: 48%; width: 16%; aspect-ratio: 1 / 2; translate: -50% -50%; rotate: var(--ang, 0deg); opacity: 0; border-radius: 50%; box-shadow: inset -14px 0 0 -4px rgba(255, 255, 255, .95), 6px 0 24px rgba(220, 235, 255, .7); }
.ch-a-cut { position: absolute; left: 80%; top: 50%; width: 30%; height: 4px; background: #fff; box-shadow: 0 0 14px #fff; opacity: 0; }
.ch-a-sw.is-shield { left: 44%; top: 50%; width: 46%; opacity: 0; }
.ch-a-sw.is-shield.is-up { opacity: 1; }
.ch-a-orb { position: absolute; left: 78%; top: 44%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, rgba(205, 180, 255, .95) 30%, rgba(140, 90, 230, .55) 52%, transparent 70%); box-shadow: 0 0 40px rgba(180, 140, 255, .7); transform: translate(-50%, -50%) scale(0); }
.ch-a-foe.is-ally { right: -14%; }
.ch-a-wound { position: absolute; left: 70%; top: 66%; width: 9%; height: 4px; rotate: -18deg; background: #a3122a; box-shadow: 0 0 8px #e0213f; }
.ch-a-sw.is-mend { left: 64%; top: 62%; width: 22%; transform: translate(-50%, -50%) rotate(-18deg); opacity: 0; transition: opacity .2s; }
.ch-a-sw.is-mend.is-on { opacity: 1; }
.ch-a-sw.is-mend img { rotate: 90deg; filter: brightness(0) drop-shadow(0 0 6px rgba(255, 236, 200, .95)); }
.ch-a-stitch { position: absolute; left: 70%; top: 66%; width: 9%; height: 10px; margin-top: -3px; rotate: -18deg; }
.ch-a-stitch b { position: absolute; top: 0; width: 2px; height: 10px; background: #fff3dc; rotate: 30deg; opacity: 0; transition: opacity .15s; box-shadow: 0 0 6px #ffe7b8; }
.ch-a-stitch b.is-on { opacity: 1; }
.ch-a-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 74% 62%, rgba(255, 240, 210, .9), transparent 50%); opacity: 0; pointer-events: none; }
.ch-a-sw.is-hell { left: 62%; top: 46%; width: 60%; opacity: 0; transform-origin: 50% 90%; }
.ch-a-flames { position: absolute; right: 8%; bottom: 0; width: 34%; height: 80%; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ch-a-flames.is-on { opacity: 1; }
.ch-a-flames i { position: absolute; bottom: 0; width: 40%; height: 100%; background: url(../img/ch-hellfire-tongue-1.webp) no-repeat center bottom / contain; }
.ch-a-flames i:nth-child(1) { left: 0; height: 80%; } .ch-a-flames i:nth-child(2) { left: 30%; } .ch-a-flames i:nth-child(3) { left: 60%; height: 70%; }
.ch-a-flames.is-alt i { background-image: url(../img/ch-hellfire-tongue-2.webp); }
.ch-a-sw.is-void { left: 58%; top: 44%; width: 62%; opacity: 0; transform-origin: 50% 90%; }
.ch-a-sw.is-void img { filter: brightness(0) invert(1) opacity(.55) drop-shadow(0 0 10px #fff); }
.ch-a-veil { position: absolute; inset: 0; background: rgba(240, 240, 250, .6); opacity: 0; pointer-events: none; }
/* 业火 v4：一片一片点燃 */
.ch-hell-char b { position: absolute; width: 290px; height: 250px; margin: -125px 0 0 -145px; will-change: transform, opacity; border-radius: 50%; background: radial-gradient(closest-side, #060405 55%, rgba(30, 6, 12, .9) 72%, transparent); opacity: 0; }
.ch-hf { position: absolute; width: 120px; height: 190px; margin: -170px 0 0 -60px; transform: rotate(var(--r)) scale(var(--s)) scaleX(var(--f)); transform-origin: 50% 90%; opacity: 0; will-change: transform, opacity; }
.ch-hf b { position: absolute; inset: 0; background: url(../img/ch-hellfire-tongue-1.webp) no-repeat center bottom / contain; animation: chFlick .24s steps(1) infinite; animation-delay: var(--d); }
.ch-hf b + b { background-image: url(../img/ch-hellfire-tongue-2.webp); animation-name: chFlick2; }
@keyframes chFlick { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chFlick2 { 0% { opacity: 0; } 50% { opacity: 1; } }
.ch-hf.is-line { width: 150px; height: 240px; margin: -215px 0 0 -75px; }
.ch-hell > .ch-hell-cut { left: -20%; right: -20%; width: auto; }
.ch-hell-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 法则 · 七剑（作者 2026-10-30）：胶片区同别人；右栏整栏一把大剑；笔记往下滚 */
.ch-l.is-arsenal { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.ch-l.is-arsenal .ch-l-side { display: block; }
.ch-l.is-arsenal .ch-l-blade { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; }
.ch-l.is-arsenal .ch-l-blade figure { flex: 1; min-height: 0; height: auto; display: grid; place-items: center; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(44, 90, 140, .08) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(44, 90, 140, .08) 23px 24px); }
.ch-l.is-arsenal .ch-l-blade img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.ch-l.is-arsenal .ch-l-blade b { font-size: 20px; }
.ch-l.is-arsenal .ch-l-blade dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 8px; }
.ch-l.is-arsenal .ch-l-blade dt { margin: 0; padding-top: 2px; }
.ch-l-below { position: absolute; top: 100%; left: 3%; right: 3%; padding: 34px 0 70px; }
.ch-l-below .ch-l-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
.ch-l.is-arsenal .ch-l-down { position: absolute; right: 3%; bottom: 2px; margin: 0; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(241, 232, 220, .5); }
.ch-a-again { position: absolute; right: 16px; bottom: 16px; z-index: 5; padding: 8px 18px; color: #0b0a0a; background: #f1e8dc; border: 0; font-family: var(--serif); font-size: 14px; letter-spacing: .25em; cursor: pointer; transform: skewX(-10deg); box-shadow: 4px 4px 0 rgba(11, 10, 10, .6); }
.ch-a-again:hover { background: #fff; }
@media (max-width: 900px) { .ch-l-below .ch-l-notes { grid-template-columns: 1fr; } }
.ch-l.is-arsenal .ch-l-blade figure { position: relative; display: block; }
.ch-l.is-arsenal .ch-l-blade figure img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: contain; }
/* 卢西安禁忌王牌 */
.ch-l.is-arsenal .ch-l-cell.is-forbid { outline: 2px solid #8a2f3a; outline-offset: -2px; }
.ch-l.is-arsenal .ch-l-cell.is-forbid img { height: 100%; rotate: 0deg; }
.ch-l.is-arsenal .ch-l-cell.is-forbid b { color: #ff9aa6; }
.ch-a-foe.is-crowd { right: auto; aspect-ratio: 1536 / 1024; }
.ch-a-ring { position: absolute; inset: 0; pointer-events: none; }
.ch-a-ring i { position: absolute; width: 50px; height: 84px; margin: -76px 0 0 -25px; transform: scale(var(--s)); transform-origin: 50% 90%; background: url(../img/ch-hellfire-tongue-1.webp) no-repeat center bottom / contain; animation: chRingFlick .3s steps(1) infinite; }
.ch-a-ring i:nth-child(2n) { background-image: url(../img/ch-hellfire-tongue-2.webp); animation-delay: -.15s; }
@keyframes chRingFlick { 50% { background-image: url(../img/ch-hellfire-tongue-2.webp); } }
.ch-a-ring i:nth-child(2n) { animation-name: chRingFlick2; } @keyframes chRingFlick2 { 50% { background-image: url(../img/ch-hellfire-tongue-1.webp); } }
.ch-a-ringline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ch-a-ringline path { fill: none; stroke: #070405; stroke-width: 9px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #c0331f) drop-shadow(0 0 12px rgba(160, 20, 35, .7)); }
.ch-a-crack { position: absolute; left: 28%; bottom: 4%; width: 44%; height: 10px; transform: translateX(-50%); background: radial-gradient(ellipse, #ff5a3a, #5a0a10 45%, transparent 70%); box-shadow: 0 0 30px #c0331f; opacity: 0; }
.ch-a-hound { position: absolute; left: -6%; bottom: -6%; width: 78%; opacity: 0; pointer-events: none; }
.ch-a-hound img { display: block; width: 100%; filter: drop-shadow(0 0 30px rgba(120, 10, 20, .7)); }
.ch-a-breath { position: absolute; left: 44%; right: 0; top: 18%; bottom: 0; opacity: 0; background: url(../img/ch-hellfire-wall-1.webp) repeat-x left bottom / auto 100%; transform: rotate(-90deg) scaleX(.9); transform-origin: 50% 50%; pointer-events: none; }
.ch-a-breath { transform: none; background: radial-gradient(ellipse at 0% 40%, rgba(5, 3, 4, .95) 0 40%, rgba(70, 8, 18, .8) 60%, transparent 80%); -webkit-mask: url(../img/ch-hellfire-wall-2.webp) repeat-x left center / auto 100%; mask: url(../img/ch-hellfire-wall-2.webp) repeat-x left center / auto 100%; }
.ch-a-wrap { position: absolute; inset: 8% 50% 0 6%; opacity: 0; pointer-events: none; }
.ch-a-wrap.is-on { opacity: 1; }
.ch-a-flare { position: absolute; inset: -6% -20% 0; background: url(../img/ch-hellfire-tongue-1.webp) no-repeat 30% bottom / auto 100%, url(../img/ch-hellfire-tongue-2.webp) no-repeat 70% bottom / auto 90%; transform-origin: 50% 100%; opacity: .85; animation: chFlickBg .24s steps(1) infinite; }
@keyframes chFlickBg { 50% { background-position: 70% bottom, 30% bottom; } }
.ch-a-slash { position: absolute; left: 24%; top: 46%; width: 30%; height: 5px; background: #fff; box-shadow: 0 0 14px #fff; opacity: 0; }
.ch-s-engrave { max-width: 760px; margin: 0 auto 30px !important; display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; cursor: zoom-in; }
.ch-s-engrave img { display: block; width: 100%; box-shadow: 0 6px 16px rgba(26, 22, 21, .18); }
.ch-s-engrave figcaption { grid-column: 2; align-self: end; font-size: 18px !important; font-weight: 900; letter-spacing: .2em !important; }
.ch-s-engrave p { grid-column: 2; margin: 0; align-self: start; font-family: var(--serif); font-size: 14px; line-height: 1.9; color: #3a302a; }
.ch-s-engrave img { grid-row: 1 / 3; }
/* 九格一行；画面里的光标是一把小剑 */
.ch-l.is-arsenal .ch-l-strip { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.ch-l.is-arsenal .ch-l-frame { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%23f1e8dc' stroke-width='1' fill='%230b0a0a'%3E%3Cpath d='M3 3 L21 19 L19 21 Z'/%3E%3Cpath d='M17 23 L23 17 L25 19 L19 25 Z' fill='%23a88d60'/%3E%3Cpath d='M22 22 L28 28' stroke='%23a88d60' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") 3 3, crosshair; }
.ch-l.is-arsenal .ch-l-frame, .ch-l.is-arsenal .ch-l-frame * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
/* 三头犬：以头为准——头顶贴着画面上缘下来一点，身体往下溢出去 */
.ch-a-hound { left: -10%; top: 5%; bottom: auto; width: auto; height: 122%; }
.ch-a-hound img { width: auto; height: 100%; }
/* 三头犬从画圈处升起；头顶固定在画面上方 6%，高度 90%，三个头一定看得见 */
.ch-a-hound { left: 50%; top: 6%; height: 90%; transform: translate(-50%, 0); }
.ch-a-crack { transform-origin: center; }
/* 画圈的火：火边更亮，暗底上看得清 */
.ch-a-ring i { filter: drop-shadow(0 0 3px #e0402a) drop-shadow(0 0 8px rgba(200, 40, 40, .7)); }
.ch-a-ringline path { stroke-width: 11px; filter: drop-shadow(0 0 3px #ff5a3a) drop-shadow(0 0 14px rgba(200, 30, 40, .9)); }