/* 02 出招(2026-10-07 起):上 出招頻譜 / 下左 我方 + 敵方 / 下右 這一招;排招在浮窗(簡易 / 完整)。舊版樣式在 rotation.css(#/rotation-old) */

.vw-kbd { margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 9.5px; opacity: .6; }

/* ── 版面:左 我方 + 敵方(寬)/ 右 這一招(詳情面板) ── */
.vw-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 上:出招頻譜(正式版時間軸,當作排完招的結果;點片段 = 看那一招) */
.vw-tl { flex: 0 0 auto; border-bottom: 1px solid var(--line2); background: linear-gradient(180deg, rgba(6, 7, 10, .2), rgba(6, 7, 10, .6)); animation: colIn 360ms var(--ease) backwards; }
.vw-tl .tl { padding: 8px 20px 10px; }
.vw-tl .tl-body { margin-top: 6px; }
.vw-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(480px, 38vw, 600px); }
.half { display: flex; flex-direction: column; min-height: 0; min-width: 0; contain: strict; animation: colIn 360ms var(--ease) backwards; }
.half-h { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px; }
.half-h.sub { height: auto; padding: 14px 4px 2px; }
.half-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.us .half-b { display: flex; flex-direction: column; gap: 6px; padding: 2px 16px 24px 20px; }
.mvp { position: relative; border-left: 1px solid var(--line2); background: linear-gradient(180deg, color-mix(in oklab, var(--c) 8%, transparent), transparent 280px), color-mix(in oklab, var(--s1) 92%, transparent); animation-delay: 60ms; }
.mvp::before { content: ''; position: absolute; left: -1px; top: 0; width: 1px; height: 180px; background: linear-gradient(var(--c), transparent); }
.none { font-size: 12px; color: var(--dim); padding: 4px 0; }

/* ── 聲道列(一位角色一列)── */
.ch { position: relative; flex-shrink: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 88px; border: 1px solid var(--line); border-radius: var(--r3); background: color-mix(in oklab, var(--s1) 88%, transparent); overflow: hidden; contain: layout style; transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.ch.on { border-color: color-mix(in oklab, var(--c) 42%, transparent); background: linear-gradient(90deg, color-mix(in oklab, var(--c) 11%, transparent), transparent 46%), var(--s1); box-shadow: inset 2px 0 0 var(--c), 0 18px 40px -28px var(--c); }
.ch-id { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px 14px; border-right: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.ch-por { position: absolute; z-index: -1; right: -34px; top: -14px; width: 150px; max-width: none; pointer-events: none; opacity: .22; filter: grayscale(.85) contrast(1.05); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); transition: opacity var(--t3) var(--ease), filter var(--t3) var(--ease), transform var(--t4) var(--ease); }
.ch-por.por-glyph { font-size: 110px; width: auto; right: -6px; top: -20px; }
.ch.on .ch-por { opacity: .95; filter: none; transform: scale(1.04); }
.ch-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-nm > b { font-size: 15.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.25; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.ch-st { font-size: 11px; color: var(--fg2); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.ch .lbl .air { display: inline-flex; align-items: center; gap: 5px; color: var(--c); font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; }
.ch .lbl .air i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: airPulse 1.8s var(--ease) infinite; }
@keyframes airPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.ch-res { margin-top: auto; display: flex; flex-direction: column; gap: 3px; width: 112px; }
.mt { display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px; align-items: center; gap: 6px; font-size: 10.5px; color: var(--dim); }
.mt-b { display: block; height: 3px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.mt-b > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: color-mix(in oklab, var(--c) 75%, #fff); transition: width var(--t3) var(--ease); }
.mt b { font-size: 10.5px; font-weight: 500; color: var(--fg2); text-align: right; }
.mt b.hot { color: var(--c); }
.ch-body { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 10px; min-width: 0; }
.ch-ctr { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-ctr > span { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r1); background: var(--s2); border: 1px solid var(--line); font-size: 11.5px; }
.ch-ctr em { font-style: normal; color: var(--dim); }
.ch-ctr b { font-weight: 600; font-size: 11.5px; }
.ch-ctr .ch-perm { border-style: dashed; cursor: help; }
.ch.bus { min-height: 0; background: transparent; border-style: dashed; }
.ch-id.sm { flex-direction: row; align-items: center; gap: 10px; }
.ch-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r2); background: var(--s3); border: 1px solid var(--line2); color: var(--fg2); flex-shrink: 0; }
.ch-ico svg { width: 15px; height: 15px; }

/* 敵方 */
.ch.foe { border-color: color-mix(in oklab, var(--danger) 22%, transparent); background: linear-gradient(90deg, color-mix(in oklab, var(--danger) 7%, transparent), transparent 40%), color-mix(in oklab, var(--s1) 88%, transparent); }
.foe-por { position: absolute; z-index: -1; right: -12px; top: -8px; width: 112px; height: 112px; opacity: .45; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.foe-por img { width: 100%; height: 100%; object-fit: contain; }
.tn { margin-top: auto; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tn-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--fg2); }
.tn-h b { font-size: 11px; }
.tn-b { display: block; height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.tn-b > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--sig); transition: width var(--t3) var(--ease); }
.tn.det .tn-h span, .tn.det .tn-h b { color: var(--warn); font-weight: 600; }
.tn.det .tn-b > i { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
.fxs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.fx { padding: 7px 10px 8px; border-radius: var(--r2); border: 1px solid color-mix(in oklab, var(--e) 26%, transparent); background: color-mix(in oklab, var(--e) 6%, var(--s2)); }
.fx-h { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.fx-h b { font-weight: 600; }
.fx-h .num { font-size: 20px; font-weight: 700; line-height: 1; color: var(--e); }
.fx-h .mono { font-size: 10.5px; }
.fx-pips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-top: 7px; }
.fx-pips i { height: 5px; border-radius: 1px; background: var(--line2); transition: background var(--t2) var(--ease); }
.fx-pips i.on { background: var(--e); box-shadow: 0 0 6px -1px var(--e); }

/* ── BUFF 晶片 ─────────────────────────── */
.bcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 4px 6px; }
.bc { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto 38px; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 5px; border-radius: var(--r2); background: var(--s2); border: 1px solid var(--line); font-size: 12px; color: var(--fg); overflow: hidden; cursor: default; transition: border-color var(--t1), background var(--t1); }
.bc:hover { border-color: var(--line3); background: var(--s3); }
.bc::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 0 2px 2px 0; background: var(--o); }
.bc-ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: var(--s4); margin-left: 3px; }
.bc-ic img { width: 100%; height: 100%; object-fit: contain; }
.bc-ic > i { width: 6px; height: 6px; border-radius: 50%; background: var(--o); }
.bc-nm { min-width: 0; }
.bc-st { font-size: 10.5px; color: var(--fg2); }
.bc-tg { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; border-radius: var(--r1); background: color-mix(in oklab, var(--o) 12%, transparent); font: 600 10.5px var(--f-mono); color: var(--fg); white-space: nowrap; }
.bc-tg em { font: 500 10px var(--f-ui); font-style: normal; color: var(--fg2); }
.bc-s { font-size: 10.5px; color: var(--dim); text-align: right; }
.bc-t { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p) * 100%); background: color-mix(in oklab, var(--o) 80%, transparent); transition: width var(--t3) var(--ease); }
.bc.soon .bc-s { color: var(--warn); }
.bc.soon .bc-t { background: var(--warn); }
.bc.perm .bc-s { font-family: var(--f-ui); font-size: 10.5px; }
.bc.new { border-color: color-mix(in oklab, var(--up) 45%, transparent); }
.bc.new::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--up); box-shadow: 0 0 6px var(--up); }
.bc.gone { opacity: .55; }
.bc.gone .bc-nm { text-decoration: line-through; text-decoration-color: var(--down); }
.bc.gone .bc-s { color: var(--down); font-family: var(--f-ui); }
.bc.off { border-style: dashed; opacity: .6; }

/* ── 右:這一招 ───────────────────────── */
.mvp-nav { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); }
.mvp-nav b { color: var(--fg); font-weight: 600; }
.mvp-b { display: flex; flex-direction: column; gap: 20px; padding: 8px 24px 96px 24px; }
.mvp-hd { display: flex; align-items: center; gap: 14px; }
.mvp-nm { display: block; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.mvp-note { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); line-height: 1.5; }
.mvp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.mvp-meta .mono { font-size: 11px; margin-left: 4px; }
.mvp-dmg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mvp-exp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mvp-exp .num { font: 800 64px/.86 var(--f-num); letter-spacing: .005em; color: var(--fg); text-shadow: 0 0 48px color-mix(in oklab, var(--c) 40%, transparent); white-space: nowrap; }
.mvp-kv { display: grid; grid-template-columns: auto auto; gap: 10px 22px; padding-bottom: 4px; }
.mvp-kv > div { display: flex; flex-direction: column; gap: 3px; }
.mvp-kv .lbl { font-size: 9px; }
.mvp-kv b { font-size: 13px; font-weight: 500; }
.sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sec-h .mono { font-size: 10.5px; }

.rv-chain { display: flex; flex-direction: column; }
.cz { display: grid; grid-template-columns: 70px minmax(0, 1fr) 66px; align-items: center; column-gap: 12px; row-gap: 5px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cz-k { font-size: 12.5px; font-weight: 600; color: var(--fg2); }
.cz-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cz-bar > i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 3px; transition: width var(--t3) var(--ease); }
.cz.gain .cz-bar > i { background: linear-gradient(90deg, color-mix(in oklab, var(--up) 45%, transparent), var(--up)); }
.cz.loss .cz-bar > i { background: linear-gradient(90deg, color-mix(in oklab, var(--down) 45%, transparent), var(--down)); }
.cz-x { font-size: 13.5px; font-weight: 600; text-align: right; }
.cz.gain .cz-x { color: var(--up); }
.cz.loss .cz-x { color: var(--down); }
.cz-f { grid-column: 2 / 4; font-size: 11px; }
.cz.base .cz-f { grid-column: 2; font-size: 11.5px; color: var(--fg2); }
.cz.base .cz-k { color: var(--fg); }
.cz-who { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; }
.cw { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 6px; border-radius: var(--r1); background: var(--s2); border: 1px solid var(--line); font-size: 11.5px; color: var(--fg2); white-space: nowrap; cursor: default; }
.cw:hover { border-color: var(--line3); color: var(--fg); }
.cw > i { width: 6px; height: 6px; border-radius: 50%; background: var(--o); flex-shrink: 0; }
.cw small { font-size: 10px; color: var(--dim); }
.cw b { font-weight: 600; font-size: 11px; color: var(--fg); }
.cz-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-size: 12px; color: var(--dim); }
.cz-sum b { font-size: 15px; font-weight: 600; color: var(--fg); }

.hit-t > div { display: grid; grid-template-columns: 20px 64px 62px minmax(0, 1fr) 82px; align-items: center; gap: 10px; height: 26px; font-size: 12px; border-bottom: 1px solid var(--line); }
.hit-t .mono { font-size: 11px; }
.hit-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.hit-bar > i { display: block; height: 100%; width: calc(var(--w) * 100%); background: color-mix(in oklab, var(--c) 70%, transparent); }
.hit-t b { text-align: right; font-weight: 500; }
.fx-l { display: flex; flex-wrap: wrap; gap: 6px; }
.fxd { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: var(--r2); border: 1px solid color-mix(in oklab, var(--e, var(--fg2)) 40%, transparent); background: color-mix(in oklab, var(--e, var(--fg2)) 8%, transparent); color: var(--e, var(--fg2)); font-size: 12px; font-weight: 500; }
.fxd.gone { opacity: .55; }
.fxd.ev { --e: var(--fg2); }
.fxd b { font-size: 11.5px; color: var(--fg); }
.after .bcs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ── 排招浮窗 ─────────────────────────── */
.fw { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: 560px; height: 430px; min-width: 420px; min-height: 280px; max-width: calc(100vw - 16px); max-height: calc(100vh - 72px); resize: both; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r3); background: color-mix(in oklab, var(--s2) 97%, transparent); border: 1px solid var(--line3); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 60px -30px var(--sig); animation: fwIn 420ms var(--ease) backwards; }
@keyframes fwIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.fw-bar { flex: 0 0 34px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--line2); background: linear-gradient(180deg, var(--s4), var(--s3)); cursor: grab; user-select: none; touch-action: none; }
.fw-bar:active { cursor: grabbing; }
.fw-bar > svg { width: 14px; height: 14px; color: var(--dim); }
.fw-bar .lbl { color: var(--sig); }
.fw-in { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(210px, 46%) minmax(0, 1fr); }
.fw-seq { overflow-y: auto; padding: 6px 4px 8px 6px; border-right: 1px solid var(--line); }
.fs { position: relative; border-radius: var(--r2); }
.fs::before { content: ''; position: absolute; left: 30px; right: 8px; bottom: 3px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 55%, transparent) calc(var(--w, 0) * 100%), transparent 0); pointer-events: none; opacity: .7; }
.fs-nm { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 6px 0 2px; font-size: 12px; border-radius: var(--r2); }
.fs-nm:hover { background: var(--s3); }
.fs-n { font-size: 10px; color: var(--faint); text-align: right; }
.fs-d { font-size: 10.5px; color: var(--fg2); }
.fs.ev .fs-nm { color: var(--dim); font-size: 11.5px; }
.fs.ev svg { width: 11px; height: 11px; margin: 0 auto; color: var(--faint); }
.fs.ev::before { display: none; }
.fs.on .fs-nm { background: var(--sig-a); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sig) 45%, transparent); }
.fs.on .fs-n { color: var(--sig); }
.fs.on::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 2px; border-radius: 1px; background: var(--sig); box-shadow: 0 0 10px var(--sig); z-index: 1; }
.fs-a { position: absolute; right: 2px; top: 3px; display: none; gap: 1px; padding: 0 2px; border-radius: var(--r1); background: var(--s4); box-shadow: -8px 0 8px var(--s3); }
.fs:hover .fs-a { display: flex; }
.fs-end { padding: 10px 6px 4px; font-size: 10px; color: var(--faint); text-align: center; letter-spacing: .04em; }
.fw-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.fw-ins { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 7px; }
.fw-ins b.mono { font-size: 12px; color: var(--sig); }
.fw-tabs { padding: 0 10px 6px; }
.fw-who { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px; }
.fw-c { display: flex; flex-shrink: 0; padding: 2px; border-radius: 50%; opacity: .45; transition: opacity var(--t1), box-shadow var(--t2) var(--ease); }
.fw-c:hover { opacity: .8; }
.fw-c.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--c); }
.fw-q { flex: 1 1 auto; height: 30px; margin-left: 4px; }
.fw-q input { font-size: 12px; }
.fw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 12px; }
.fw-g { margin-bottom: 8px; }
.fw-gh { display: flex; justify-content: space-between; padding: 6px 6px 3px; }
.fw-body .mv { width: 100%; }
.fw-rm { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 38px 12px; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 8px 0 4px; border-radius: var(--r2); font-size: 12px; text-align: left; transition: background var(--t1); }
.fw-rm:hover { background: var(--s3); }
.fw-rm small { font-size: 10.5px; color: var(--dim); }
.fw-rm .mono { font-size: 10.5px; color: var(--fg2); text-align: right; }
.fw-rm svg { width: 12px; height: 12px; color: transparent; transition: color var(--t1); }
.fw-rm:hover svg { color: var(--danger); }
.fw-rm .bc-ic { margin: 0; }
.fw-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.fw-pill, .fw-pipnote { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--rp); background: var(--s3); border: 1px solid var(--line3); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .9); font-size: 12.5px; animation: fwIn 320ms var(--ease) backwards; }
.fw-pill svg, .fw-pipnote svg { width: 15px; height: 15px; color: var(--sig); }
.fw-pill kbd { font-size: 10px; color: var(--dim); border: 1px solid var(--line2); border-radius: 3px; padding: 0 4px; }
.fw-pill:hover { border-color: var(--sig); }

/* 彈出成獨立視窗時 */
.pip-body { margin: 0; background: var(--bg); overflow: hidden; }
.pip-root, .fw-in.pip { height: 100vh; }

/* 窄螢幕:上下疊 */
@media (max-width: 1100px) {
  .vw-main { overflow-y: auto; }
  .vw-split { grid-template-columns: 1fr; }
  .half { contain: none; }
  .half-b { overflow: visible; }
  .mvp { border-left: 0; border-top: 1px solid var(--line2); }
}
@media (max-width: 760px) {
  .ch { grid-template-columns: 1fr; }
  .ch-id { border-right: 0; border-bottom: 1px solid var(--line); }
  .fw { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; height: 60vh; resize: none; }
  .fw-in { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .fw-seq { border-right: 0; border-bottom: 1px solid var(--line); }
}

.vw-wide { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mvp-a, .mvp-c { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mvp-c:empty { display: none; }

/* ── 出招頻譜:混合刻度縮放(view-timeline.js)── */
.tlz-ctl { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.tlz-rail { position: relative; display: flex; align-items: center; width: 132px; height: 22px; }
.tlz-rail input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 1; }
.tlz-rail input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sig) 0 var(--v), var(--line2) var(--v) 100%); }
.tlz-rail input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line2); }
.tlz-rail input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sig); }
.tlz-rail input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 3px var(--sig-a), 0 0 10px var(--sig); transition: transform var(--t1) var(--ease); }
.tlz-rail input:hover::-webkit-slider-thumb { transform: scale(1.15); }
.tlz-rail input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 3px var(--sig-a), 0 0 10px var(--sig); }
/* 中點刻痕 = 每招等寬(再往右是整條拉寬) */
.tlz-mid { position: absolute; left: calc(50% - 1px); top: 5px; bottom: 5px; width: 2px; border-radius: 1px; background: var(--line3); pointer-events: none; z-index: 2; }
.tlz-txt { min-width: 84px; font-size: 10.5px; color: var(--fg2); text-align: left; white-space: nowrap; }
/* 位置改變時平滑移動(片段本來就有 left / width 轉場) */
.tlz .wave i { transition: left var(--t3) var(--ease); }
.tlz .tl-rt span { transition: left var(--t3) var(--ease); }
.tlz .tl-rt span.maj { color: var(--fg2); }
.tlz .tl-rt span.maj i { height: 10px; background: var(--fg2); }
.tlz .tl-ph { transition: left var(--t3) var(--ease); }
.tlz .tl-rt span.end { transform: translateX(-100%); padding: 0 4px 4px 0; }
.tlz .tl-rt span.end i { left: auto; right: 0; }
.tlz .clip-tx.ico-only { justify-content: center; padding: 4px 0; }
/* 軌道 32px(.short)時正式版會藏起片段文字;這裡縮小一號照樣顯示,短招放大後才看得到名字 / 圖示 */
.tlz.short .clip-tx { display: flex; padding: 2px 5px; font-size: 10.5px; gap: 4px; }
.tlz.short .clip-tx.ico-only { padding: 2px 0; }
.tlz.short .clip-ico { width: 13px; height: 13px; }
.tlz .tl-rt span.hid { color: transparent; }

/* ── 排招浮窗:簡易版 / 完整版(view-editor.js)── */
.fw-bar .seg { margin-left: 6px; }
.ed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ed > .fw-in { flex: 1 1 auto; min-height: 0; }
.ed.pip { height: 100vh; }
.fw-in.full { grid-template-columns: minmax(300px, 1.1fr) minmax(250px, 1fr) minmax(290px, 1fr); }
.ed-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.ed-col:last-child { border-right: 0; }
.ed-h { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.ed-h .mono { font-size: 10.5px; }
.ed-h.ed-tabs { padding: 0 8px; }
.ed-h.ed-tabs .seg { flex: 1 1 auto; }
.ed-none { font-size: 11.5px; color: var(--dim); padding: 2px 6px 6px; }
.fw-in.full .fw-seq { border-right: 0; flex: 1 1 auto; }
.fw-in.full .fw-body { padding-top: 6px; }

/* 序列列:一列 = 握把 · 編號 · 頭像 · 名稱 · 標記 · 傷害;選中時下面展開編輯列 */
.fs-row { position: relative; display: flex; align-items: center; }
.fs-row::before { content: ''; position: absolute; left: 30px; right: 8px; bottom: 3px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 55%, transparent) calc(var(--w, 0) * 100%), transparent 0); pointer-events: none; opacity: .7; }
.fs::before { display: none; }
.fs.ev .fs-row::before { display: none; }
.fs-nm { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 6px; }
.fs-nm .trunc { flex: 1 1 auto; }
.fs-n { flex-shrink: 0; width: 20px; }
.fs-g { display: grid; place-items: center; flex-shrink: 0; width: 14px; height: 28px; color: var(--faint); cursor: grab; touch-action: none; }
.fs-g:hover { color: var(--fg2); }
.fs-g svg { width: 12px; height: 12px; }
.dragging, .dragging * { cursor: grabbing !important; user-select: none; }
.fs-b { flex-shrink: 0; padding: 0 4px; border-radius: var(--r1); border: 1px solid var(--line2); font-size: 9.5px; line-height: 15px; color: var(--fg2); }
.fs-b.sig { color: var(--sig); border-color: color-mix(in oklab, var(--sig) 40%, transparent); }
.fs-bad { display: grid; place-items: center; flex-shrink: 0; color: var(--warn); }
.fs-bad svg { width: 12px; height: 12px; }
.fs.bad .fs-bad { color: var(--danger); }
.fs.bad .fs-nm { box-shadow: inset 2px 0 0 var(--danger); }
.fw-seq .fs-row { cursor: grab; user-select: none; }
/* 被拖的那一列跟著游標走;放開後的位置用亮線標出 */
.fs.lift { position: relative; z-index: 6; transform: translateY(var(--dy, 0)); border-radius: var(--r2); background: var(--s4); box-shadow: 0 0 0 1px var(--sig), 0 14px 30px -10px rgba(0, 0, 0, .9); cursor: grabbing; }
.fs.lift .fs-ed { display: none; }
/* 其他列讓位:平滑滑開(拖曳時才有,放開後立刻回到排好的位置) */
.fs.shift { transform: translateY(var(--sh, 0)); transition: transform 170ms var(--ease); }
.fs-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 2px 6px 18px; padding: 7px 8px; border-radius: var(--r2); background: var(--s3); border: 1px solid color-mix(in oklab, var(--sig) 25%, transparent); animation: fadeIn 200ms var(--ease) backwards; }
.fs-ed .clk { width: 128px; }
.fs-ed .clk input { width: 100%; min-width: 0; background: none; border: 0; padding: 0 8px; font: 500 12px var(--f-mono); }
.fs-ed .clk .lab { display: flex; align-items: center; padding: 0 0 0 8px; font-size: 11px; color: var(--dim); }
.fs-evt { font-size: 11.5px; }
.fs-real { font-size: 10.5px; }
.fs-al { flex-basis: 100%; padding: 6px 9px; font-size: 11.5px; }

/* 招式盤 */
.pal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.fw-c.wide { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; padding: 3px 8px 3px 3px; border-radius: var(--r2); font-size: 12px; }
.fw-c.wide.on { box-shadow: inset 0 0 0 1px var(--c); background: color-mix(in oklab, var(--c) 12%, transparent); }
.pal-st { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; }
.pal-st .fw-q { margin-left: 0; }
.pal-mode { display: flex; align-items: center; height: 30px; padding: 0 9px; border-radius: var(--r2); border: 1px dashed var(--line2); font-size: 11px; color: var(--fg2); white-space: nowrap; cursor: help; }

/* 資源列 */
.rr { margin-bottom: 6px; padding: 8px 9px 6px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--s2); }
.rr.on { border-color: color-mix(in oklab, var(--c) 45%, transparent); background: linear-gradient(90deg, color-mix(in oklab, var(--c) 8%, transparent), transparent 60%), var(--s2); }
.rr-h { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 12.5px; }
.rr-h b { font-weight: 600; }
.rr-on { font: 500 9.5px var(--f-mono); letter-spacing: .1em; color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); border-radius: var(--r1); padding: 0 5px; }
.rr-l { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 28px; font-size: 11.5px; }
.rr-k { color: var(--fg2); }
.rr-b { display: block; height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.rr-b > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: color-mix(in oklab, var(--c) 80%, #fff); }
.rr-l > b.mono { font-size: 11px; font-weight: 500; text-align: right; min-width: 34px; }
.rr-l > b.mono small { color: var(--dim); font-size: 9.5px; }
.rr-max { font-size: 10.5px; color: var(--dim); min-width: 34px; }
.rr-l .nf { justify-self: start; }

/* 情境 */
.scn-en { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--s2); text-align: left; transition: border-color var(--t1), background var(--t1); }
.scn-en:hover { border-color: var(--sig); background: var(--s3); }
.scn-en.none { border-style: dashed; }
.scn-en b { display: block; font-size: 13px; font-weight: 600; }
.scn-en small { display: block; font-size: 11px; color: var(--dim); }
.scn-en > svg { width: 14px; height: 14px; color: var(--dim); }
.scn-g { margin-bottom: 4px; }
.scn-gt { display: block; padding: 6px 6px 2px; font-size: 11px; color: var(--dim); }
.scn .chk { padding: 6px 8px; }
.scn-b { font-size: 10.5px; align-self: center; }

/* 頂欄:情境狀態鈕 */
.vw-scene { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 6px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--s2); text-align: left; transition: border-color var(--t1), background var(--t1); }
.vw-scene:hover { border-color: var(--sig); background: var(--s3); }
.vw-sc-t { display: flex; flex-direction: column; min-width: 0; max-width: 130px; line-height: 1.2; }
.vw-sc-t b { font-size: 12px; font-weight: 600; }
.vw-sc-t small { font-size: 9.5px; color: var(--dim); }
.vw-sc-n { display: flex; align-items: center; gap: 3px; padding-left: 8px; border-left: 1px solid var(--line2); height: 20px; color: var(--dim); }
.vw-sc-n svg { width: 14px; height: 14px; }
.vw-sc-n.on { color: var(--sig); }
.vw-sc-n b { font-size: 11px; }
/* 序列清單是 offsetTop 的基準(拖曳排序、選中列捲進畫面都用它) */
.fw-seq { position: relative; }

/* ── 正式版外殼 ── */
.rv { height: 100%; }
.rv-al { flex: 0 0 auto; margin: 10px 20px 0; }
.rv-empty { flex: 1 1 auto; }
.rv-empty .btn { margin-top: 6px; }

/* 時間軸與下方之間的分隔線:上下拖曳調整角色軌高度,雙擊收合 */
.rv-splitter { position: relative; flex: 0 0 9px; margin-top: -5px; cursor: ns-resize; touch-action: none; z-index: 3; }
.rv-splitter > i { position: absolute; left: 50%; top: 3px; width: 40px; height: 3px; margin-left: -20px; border-radius: 2px; background: var(--line3); opacity: 0; transition: opacity var(--t2), background var(--t2), width var(--t2) var(--ease), margin var(--t2) var(--ease); }
.rv-splitter:hover > i, .rv-splitter:focus-visible > i { opacity: 1; }
.rv-splitter:active > i { background: var(--sig); width: 64px; margin-left: -32px; opacity: 1; }

/* BUFF 晶片:可以移除的,hover 才出現紅色 ×(平常看起來一樣,不增加雜訊) */
button.bc { text-align: left; font: inherit; cursor: pointer; }
.bc-x { position: absolute; right: 3px; top: 50%; width: 12px; height: 12px; margin-top: -6px; padding: 1px; border-radius: 50%; background: var(--s4); color: var(--danger); opacity: 0; transition: opacity var(--t1) var(--ease); pointer-events: none; }
.bc.rmv:hover, .bc.rmv:focus-visible { border-color: color-mix(in oklab, var(--danger) 50%, transparent); }
.bc.rmv:hover .bc-x, .bc.rmv:focus-visible .bc-x { opacity: 1; }
.cw.rmv { cursor: pointer; font: inherit; }
.cw.rmv > svg { width: 10px; height: 10px; margin-right: -2px; color: var(--danger); opacity: 0; transition: opacity var(--t1) var(--ease); }
.cw.rmv:hover, .cw.rmv:focus-visible { border-color: color-mix(in oklab, var(--danger) 50%, transparent); color: var(--fg); }
.cw.rmv:hover > svg, .cw.rmv:focus-visible > svg { opacity: 1; }

/* 即時面板:收在角色列底部,預設收起 */
.ch-live { margin-top: -2px; }
.ch-live .disc { font-size: 11px; padding: 2px 0; }
.ch-live .mem-panel { margin-top: 6px; }
.ch-live .ro-rows { margin-top: 8px; }
.ch-live .ro-r, .ch-live .ro-tr, .ch-live .ro-th { font-size: 11.5px; }

/* 狀態變化(這一招讓誰多了 / 少了什麼) */
.chg-g { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.chg-g:last-child { border-bottom: 0; }
.chg-t { font-size: 11.5px; color: var(--fg2); padding-top: 3px; }
.chg .sec-h { cursor: help; }

/* 完整版序列「狀態變化」:每列底下一行 */
.fs-df { display: flex; flex-direction: column; gap: 1px; padding: 0 8px 5px 46px; font-size: 11px; line-height: 1.45; }
.fs-df .plus { color: var(--up); }
.fs-df .enemy { color: var(--danger); }
.fs-df .minus { color: var(--dim); }

/* 時間軸角色軌:名字旁標輸出佔比(取代頂欄的佔比條) */
.tlz .lane-hd { gap: 6px; padding-right: 6px; }
.tlz .lane-hd .trunc { flex: 1 1 auto; }
.lane-sh { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--c); }
/* 頂欄情境鈕:只留敵人頭像 + 設定數 */
.vw-scene { padding: 0 8px 0 6px; gap: 6px; }
.tlz .lane-hd, .tlz .tl-rh { width: 112px; }

/* 窄螢幕(< 1100):上下疊,整頁捲動(兩塊不再各自捲動) */
@media (max-width: 1100px) {
  .rv { overflow-y: auto; }
  .rv .vw-split { flex: none; display: block; }
  .rv .half { contain: none; height: auto; min-height: 0; }
}
/* 頂欄放不下時先藏情境鈕(排招視窗完整版的「情境」頁一樣能調) */
@media (max-width: 1200px) { .vw-scene { display: none; } }

/* ── 預設出招(rotation-presets.js)── */
.ed-tabs .ed-at { flex-shrink: 0; font-size: 10px; margin-left: 4px; }
.pre-hd { display: flex; align-items: center; gap: 6px; padding: 6px 6px 8px; }
.pre-save { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.pre-save .fld { flex: 1 1 auto; min-width: 0; }
.pc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin-bottom: 4px; padding: 7px 6px 7px 8px; border-radius: var(--r2); background: var(--s2); border: 1px solid var(--line); transition: border-color var(--t1), background var(--t1); }
.pc:hover { border-color: var(--line3); background: var(--s3); }
.pc.off { opacity: .55; background: transparent; border-style: dashed; }
.pc-av { display: flex; }
.pc-av .av + .av { margin-left: -7px; box-shadow: 0 0 0 2px var(--s2), 0 0 0 3px var(--c); }
.pc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pc-t b { font-size: 12.5px; font-weight: 600; }
.pc-t small { font-size: 10.5px; color: var(--dim); }
.pc-a { display: flex; gap: 2px; }
.pre-sug { display: flex; flex-direction: column; gap: 6px; width: min(460px, 92%); margin-top: 18px; text-align: left; }
.pre-sug .lbl { margin-bottom: 2px; }
.pre-sug .pc { grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 10px; }
/* 排招視窗裡比較窄:卡片兩行(上 頭像 + 完整名稱,下 步數 + 按鈕),名字不被擠掉 */
.fw .pc { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'av t' 'av a'; row-gap: 4px; align-items: start; }
.fw .pc-av { grid-area: av; padding-top: 1px; }
.fw .pc-t { grid-area: t; }
.fw .pc-t b { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fw .pc-a { grid-area: a; justify-self: end; align-items: center; }
.fw .pc.off .pc-a:empty { display: none; }