/* 命之座 / 元素 / 职业专精 —— 星图面板与通用徽章。--ec 元素主色，--eg 元素高光 */

/* ---------- 通用徽章 ---------- */
.cst-el { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; font-size: 11px; line-height: 16px; white-space: nowrap; vertical-align: middle;
  color: var(--ec, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--ec, #fff) 26%, transparent), color-mix(in srgb, var(--ec, #fff) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, #fff) 55%, transparent); text-shadow: 0 1px 0 var(--ink, #000); }
.cst-el img { width: 14px; height: 14px; image-rendering: pixelated; }
.cst-c { display: inline-block; min-width: 22px; padding: 0 5px; font-size: 11px; line-height: 16px; text-align: center; vertical-align: middle; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ec, #b48cff) 70%, #000), color-mix(in srgb, var(--ec, #b48cff) 35%, #000));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, #b48cff) 85%, #fff), 0 0 6px color-mix(in srgb, var(--ec, #b48cff) 45%, transparent); text-shadow: 0 1px 0 #000; }
.cst-c.max { color: #2a1a00; background: linear-gradient(180deg, #fff2a0, #ffb84a); box-shadow: inset 0 0 0 1px #fff, 0 0 10px rgba(255,216,74,.6); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn.cst-open { --c: color-mix(in srgb, var(--ec, #b48cff) 45%, #1a1430); --hi: color-mix(in srgb, var(--ec, #b48cff) 70%, #fff); --lo: color-mix(in srgb, var(--ec, #b48cff) 30%, #000); }
.cst-wline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--text, #efe8ff); }
.cst-wline img { width: 16px; height: 16px; image-rendering: pixelated; }
.cst-ms { padding: 0 6px; font-size: 11px; line-height: 16px; color: #ffb0b8; background: rgba(255,90,106,.14); box-shadow: inset 0 0 0 1px rgba(255,90,106,.45); }
.cst-ms.on { color: #0a2a12; background: linear-gradient(180deg, #a8ffb8, #5ae07a); box-shadow: inset 0 0 0 1px #d8ffe0, 0 0 8px rgba(125,255,138,.45); }
.cst-wdesc { font-size: 12px; color: #a8ffb8; }

/* ---------- 面板布局 ---------- */
.win-body.cst-body { display: flex; flex-direction: column; gap: 10px; overflow: hidden; --ec: #b48cff; --eg: #e0d0ff; }
.cst-roster { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.cst-chip { position: relative; flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px 2px; cursor: pointer; font-size: 10px; color: var(--muted, #9a90c0);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -2px 0 color-mix(in srgb, var(--rc) 70%, transparent); transition: transform .15s, box-shadow .15s; }
.cst-chip img { width: 36px; height: 36px; image-rendering: pixelated; }
.cst-chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 60%, transparent), inset 0 -2px 0 var(--rc); }
.cst-chip.on { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 34%, transparent), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 2px var(--ec), 0 0 10px color-mix(in srgb, var(--ec) 45%, transparent); }
.cst-chip.lock img { filter: grayscale(1) brightness(.6); } .cst-chip.lock { opacity: .62; }
.cst-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: var(--ec); box-shadow: 0 0 4px var(--ec), 0 0 0 1px #000; transform: rotate(45deg); }

.cst-main { flex: 1; min-height: 0; display: flex; gap: 14px; }
.cst-chart { position: relative; flex: none; width: min(46%, 470px); align-self: flex-start; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ec) 20%, #120c28) 0%, #0b0719 58%, #05030c 100%);
  box-shadow: inset 0 0 0 1px #07040f, inset 0 0 0 2px color-mix(in srgb, var(--ec) 45%, #3a2d63), inset 0 0 60px rgba(0,0,0,.65), 0 0 24px color-mix(in srgb, var(--ec) 18%, transparent); }
.cst-chart::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--ec) 22%, transparent), transparent 55%); mix-blend-mode: screen; }
.cst-portrait { position: absolute; left: 50%; top: 52%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .13;
  background: linear-gradient(180deg, var(--eg), var(--ec) 70%); mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; animation: cstFloat 6s ease-in-out infinite; }
@keyframes cstFloat { 50% { transform: translate(-50%, -52%); } }
.cst-svgwrap, .cst-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-svg .bg circle { fill: #fff; }
.cst-svg .bg .tw { animation: cstTw 4s ease-in-out infinite; }
@keyframes cstTw { 50% { opacity: .1; } }
.cst-svg .astro { transform-origin: 50px 50px; animation: cstSpin 120s linear infinite; fill: none; }
.cst-svg .astro circle { stroke: color-mix(in srgb, var(--ec) 35%, transparent); stroke-width: .25; }
.cst-svg .astro .tick { stroke-width: 1.2; stroke-dasharray: .25 2.05; stroke: color-mix(in srgb, var(--ec) 45%, transparent); }
.cst-svg .astro .thin { stroke-dasharray: 1 1.6; stroke: rgba(255,255,255,.08); }
@keyframes cstSpin { to { transform: rotate(360deg); } }
.cst-svg .ln { stroke: rgba(160,150,210,.22); stroke-width: .35; stroke-dasharray: 1 1.2; }
.cst-svg .ln.on { stroke: var(--ec); stroke-width: .6; stroke-dasharray: none; filter: drop-shadow(0 0 1.2px var(--ec)); stroke-linecap: round; animation: cstLine .9s ease-out backwards; }
@keyframes cstLine { from { opacity: 0; } }
.cst-svg .st { cursor: pointer; }
.cst-svg .st .hit { fill: transparent; }
.cst-svg .st .core { fill: #3a3258; stroke: #6a6090; stroke-width: .25; transition: transform .2s; transform-box: fill-box; transform-origin: center; }
.cst-svg .st text { font: 2.6px var(--px, sans-serif); fill: #6a6090; text-anchor: middle; }
.cst-svg .st.on .core { fill: var(--ec); stroke: #fff; stroke-width: .3; animation: cstPulse 2.8s ease-in-out infinite; animation-delay: var(--d); }
.cst-svg .st.on .dot { fill: #fff; }
.cst-svg .st.on .halo { fill: url(#cstHalo); animation: cstHalo 2.8s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
.cst-svg .st.on text { fill: var(--eg); }
.cst-svg .st.ms.on text { fill: #ffe680; }
.cst-svg .st.next .core { fill: #5a4a8a; stroke: var(--ec); stroke-width: .3; }
.cst-svg .st.next .ring { fill: none; stroke: var(--ec); stroke-width: .3; stroke-dasharray: 1 .8; transform-box: fill-box; transform-origin: center; animation: cstSpin 6s linear infinite, cstFade 1.6s ease-in-out infinite; }
.cst-svg .st.next text { fill: var(--ec); }
.cst-svg .st:hover .core { transform: scale(1.35); }
.cst-svg .st.flash .core { animation: cstFlash 1.4s ease-out 2, cstPulse 2.8s ease-in-out 2.8s infinite; }
@keyframes cstPulse { 50% { filter: brightness(1.45); } }
@keyframes cstHalo { 50% { transform: scale(1.25); opacity: .7; } }
@keyframes cstFade { 50% { opacity: .35; } }
@keyframes cstFlash { 0% { transform: scale(3); filter: brightness(3); } 100% { transform: scale(1); } }
.cst-ctitle { position: absolute; left: 12px; top: 10px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-shadow: 0 2px 0 #000; }
.cst-ctitle b { font-weight: normal; font-size: 18px; color: #fff; letter-spacing: .1em; }
.cst-ctitle span { font-size: 12px; color: var(--eg); opacity: .9; }
.cst-clevel { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: baseline; gap: 4px; pointer-events: none; text-shadow: 0 2px 0 #000; color: var(--muted, #9a90c0); }
.cst-clevel b { font-weight: normal; font-size: 30px; color: var(--ec); filter: drop-shadow(0 0 8px var(--ec)); }

.cst-side { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.cst-side .card { padding: 10px 12px; }
.cst-head { background: linear-gradient(120deg, color-mix(in srgb, var(--ec) 22%, transparent), rgba(16,11,32,.6) 60%) !important; }
.cst-hname { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cst-hname b { font-weight: normal; font-size: 20px; color: #fff; }
.cst-cls { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.cst-cls img { width: 14px; height: 14px; image-rendering: pixelated; }
.cst-pips { display: flex; gap: 6px; margin: 8px 0 6px; }
.cst-pips i { width: 12px; height: 12px; transform: rotate(45deg); background: #241c42; box-shadow: inset 0 0 0 1px #4a3c78; }
.cst-pips i.ms { width: 14px; height: 14px; }
.cst-pips i.on { background: var(--ec); box-shadow: inset 0 0 0 1px #fff, 0 0 8px var(--ec); }
.cst-res { font-size: 12px; color: var(--eg); }
.cst-warn { margin-top: 6px; font-size: 12px; color: #ffb0b8; }
.cst-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cst-sub { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cst-sub b { font-weight: normal; font-size: 15px; }
.cst-sub img { width: 20px; height: 20px; image-rendering: pixelated; }
.cst-txt { font-size: 12px; line-height: 1.6; color: var(--muted, #9a90c0); }
.cst-kv { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; line-height: 1.5; }
.cst-kv > span { flex: none; color: var(--dim, #6a6090); }
.cst-kv > b { font-weight: normal; color: var(--text, #efe8ff); }
.cst-elcard { box-shadow: inset 0 0 0 1px #07040f, inset 0 0 0 2px color-mix(in srgb, var(--ec) 40%, #3a2d63) !important; }
.cst-mscard.on { box-shadow: inset 0 0 0 1px #07040f, inset 0 0 0 2px rgba(125,255,138,.55), 0 0 12px rgba(125,255,138,.12) !important; }

.cst-list { display: flex; flex-direction: column; gap: 5px; }
.cst-node { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; opacity: .58;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: opacity .2s, background .2s, box-shadow .2s; }
.cst-node.on { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 20%, transparent), rgba(255,255,255,.01) 75%); box-shadow: inset 3px 0 0 var(--ec), inset 0 0 0 1px color-mix(in srgb, var(--ec) 30%, transparent); }
.cst-node.next { opacity: .9; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 55%, transparent); }
.cst-node.hot, .cst-node:hover { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 28%, transparent), rgba(255,255,255,.02)); }
.cst-node.ping, .cst-node.flash { animation: cstPing 1.2s ease-out; }
@keyframes cstPing { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 18px var(--ec); } }
.cst-nlv { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 12px; color: #8a80b0; background: #1a1430; box-shadow: inset 0 0 0 1px #3a2d63; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cst-node.on .cst-nlv { color: #fff; background: radial-gradient(circle, var(--eg), var(--ec) 70%); text-shadow: 0 1px 0 #000; }
.cst-node.ms .cst-nlv { width: 34px; height: 34px; }
.cst-nname { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #fff; }
.cst-node.on .cst-nname { color: var(--eg); }
.cst-tag { padding: 0 5px; font-size: 10px; line-height: 15px; color: #2a1a00; background: linear-gradient(180deg, #fff2a0, #ffb84a); }
.cst-tag.nx { color: #fff; background: color-mix(in srgb, var(--ec) 55%, #1a1430); box-shadow: inset 0 0 0 1px var(--ec); }
.cst-lock { font-size: 10px; color: var(--dim, #6a6090); }
.cst-neff { margin-top: 2px; font-size: 12px; color: var(--text, #efe8ff); line-height: 1.5; }
.cst-nfl { margin-top: 1px; font-size: 11px; color: var(--dim, #6a6090); font-style: italic; }
.cst-how .cst-txt { color: var(--text, #efe8ff); }

@media (max-width: 760px), (pointer: coarse) {
  .win-body.cst-body { overflow: auto; }
  .cst-main { flex-direction: column; min-height: auto; }
  .cst-chart { width: 100%; max-width: 440px; align-self: center; }
  .cst-side { overflow: visible; padding-right: 0; }
  .cst-two { grid-template-columns: 1fr; }
}

/* 角色列表在左侧栏：竖排，上下滑动 */
.win-rail .cst-roster { flex-direction: column; gap: 5px; overflow: visible; padding: 0; }
.win-rail .cst-chip { width: auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; font-size: 11px; min-height: 46px; }
.win-rail .cst-chip:hover { transform: translateX(2px); }
.win-rail .cst-chip img { width: 36px; height: 36px; flex: none; }
.win-rail .cst-ci { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; line-height: 1.2; }
.win-rail .cst-nm { font-size: 13px; font-weight: normal; color: var(--text, #efe8ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
.win-rail .cst-chip.lock .cst-nm { color: var(--dim, #6a6090); }
.win-rail .cst-chip.on .cst-nm { color: #fff; }
.cst-chip:not(.win-rail *) .cst-nm { display: none; }
@media (max-width: 760px) {
  .win-rail .cst-chip { flex-direction: column; padding: 4px 2px; gap: 1px; }
  .win-rail .cst-nm { display: none; }
  .win-rail .cst-ci { align-items: center; }
}