/* 天賦樹、技能樹（2026-10-01.6，使用者：「我希望天賦技能要夠帥 精緻的技能特效 爽度要爆表」）
   技能的像素小圖示（js/skill-icons.js 的 .sk-ico）：框照這一招是哪一種（青銅、銀、金；大招金框會呼吸發光；專屬技能彩虹框轉圈＋英雄自己的顏色）、
     框裡面的光照屬性（--skc）、技能書右下角一本小書（紅＝技能書、紫＝魔法書）
   📘 技能樹的卡片（.st-card）：等級寶石會發亮、冷卻轉盤（一圈分成幾格＝幾回合，一根光在轉）、已學會／可以學／鎖住（鎖住的圖示纏一條鐵鍊）、
     上下兩張用光線連起來（學會了就有一顆光點往下流）、「▶ 看特效」
   🌟 天賦樹的星座圖（.tt-sky）：一片星空、三支寶石之字形排開、光線連起來（解鎖了就亮、白色的能量在流）、選到的寶石外面一圈虛線在轉、說明卡（.tt-card）
   特效（.fx-burst）：加點、學會、升級時爆火花＋一圈光＋往上飄的字；減少動態效果的時候都不放、也不呼吸、不轉
   冒險者資料（.hs2-sheet）一直是深色：這裡的顏色都照深色寫；「▶ 看特效」的面板（.skfx-sheet）也是深色
   英雄的定位（.h6-role）：卡片上小小的圓角方塊「輔」（跟圓圓的類型標籤分得出來）、資料裡「💚 輔助」、英雄卡照定位篩選 */

@property --sk-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ───────── 技能圖示 ───────── */
.sk-ico { --skc: #cfd8e6; --fa: #d98a4a; --fb: #7a3e18; --fh: #ffd0a0; position: relative; display: inline-grid; flex: none; padding: 2px; border-radius: 9px; line-height: 0; vertical-align: middle;
  --doll-ol: #0e0806; background: linear-gradient(145deg, var(--fh), var(--fa) 28%, var(--fb) 62%, var(--fa) 86%, var(--fh));
  box-shadow: 0 0 0 1px #0b0605, 0 2px 0 rgba(0, 0, 0, 0.45); }
.sk-ico .sk-in { display: grid; place-items: center; padding: 3px; border-radius: 7px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--skc) 46%, #1d1411) 0%, color-mix(in srgb, var(--skc) 16%, #130d0b) 52%, #0b0706 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.sk-ico svg { display: block; image-rendering: pixelated; }
.sk-ico.sk-bare { padding: 0; background: none; box-shadow: none; }
.sk-ico.sk-bare .sk-in { padding: 0; background: none; box-shadow: none; }
/* 銀：10 級學會的職業技能、第 2 層的書 */
.sk-ico.fr-c2, .sk-ico.fr-b2 { --fa: #c4cedc; --fb: #5c6676; --fh: #ffffff; }
/* 金：第 3 層的書、大招（大招多一圈呼吸的光） */
.sk-ico.fr-b3, .sk-ico.fr-ult { --fa: #f2c250; --fb: #8a5a12; --fh: #fff6c0; }
.sk-ico.fr-ult { box-shadow: 0 0 0 1px #0b0605, 0 0 10px rgba(255, 200, 80, 0.55), 0 2px 0 rgba(0, 0, 0, 0.45); }
.sk-ico.fr-ult::after { content: ''; position: absolute; inset: -3px; border-radius: 11px; pointer-events: none; box-shadow: 0 0 12px 2px rgba(255, 210, 90, 0.55);
  animation: sk-breathe 2.4s ease-in-out infinite; }
/* 專屬技能：彩虹框轉圈＋英雄自己的顏色 */
.sk-ico.fr-hero { background: conic-gradient(from var(--sk-a), #ff5a6a, #ffc84a, #6ae07a, #5ac8ff, #a07aff, #ff5ad8, #ff5a6a);
  box-shadow: 0 0 0 1px #0b0605, 0 0 12px rgba(var(--h6-rgb, 255, 214, 110), 0.8); animation: sk-spin 4s linear infinite; }
.sk-ico.fr-hero .sk-in { background: radial-gradient(circle at 50% 42%, rgba(var(--h6-rgb, 255, 214, 110), 0.55) 0%, color-mix(in srgb, var(--skc) 16%, #130d0b) 55%, #0b0706 100%); }
/* 技能書右下角的小書 */
.sk-bk { --bkc: #c8482c; position: absolute; right: -4px; bottom: -4px; width: 12px; height: 10px; border-radius: 1px 3px 3px 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0 2px, transparent 2px), linear-gradient(180deg, transparent 0 4px, #f2c250 4px 5px, transparent 5px), var(--bkc);
  box-shadow: inset -2px 0 0 #f6eedc, 0 0 0 1px #140806, 0 1px 2px rgba(0, 0, 0, 0.6); }
.sk-bk.magic { --bkc: #6a52d8; }
@keyframes sk-spin { to { --sk-a: 360deg; } }
@keyframes sk-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ───────── 爆火花（加點、學會、升級） ───────── */
.fx-burst { position: absolute; left: 50%; top: 50%; z-index: 6; width: 0; height: 0; pointer-events: none; }
.fx-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--fc); opacity: 0;
  box-shadow: 0 0 12px var(--fc), inset 0 0 10px var(--fc); animation: fx-ring 0.6s ease-out forwards; }
.fx-ring.r2 { animation-delay: 0.14s; border-width: 3px; }
.fx-burst.big .fx-ring { left: -26px; top: -26px; width: 52px; height: 52px; }
.fx-sp { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 1px; background: #fff; opacity: 0;
  box-shadow: 0 0 6px 2px var(--fc); animation: fx-sp 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) var(--dl, 0ms) forwards; }
.fx-sp.s2 { left: -2px; top: -2px; width: 4px; height: 4px; background: var(--fc); box-shadow: 0 0 5px 1px var(--fc); }
.fx-up { position: absolute; left: 0; top: -18px; font-size: 14px; font-weight: 900; line-height: 1; color: #fff; white-space: nowrap; letter-spacing: 0.5px;
  text-shadow: 0 0 8px var(--fc), 0 0 2px #000, 0 1px 0 #000; animation: fx-up 1.2s ease-out forwards; }
@keyframes fx-ring { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes fx-sp { 0% { transform: translate(0, 0) rotate(45deg) scale(1.3); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(0.2); opacity: 0; } }
@keyframes fx-up { 0% { transform: translate(-50%, 8px) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, -4px) scale(1.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -30px) scale(1); opacity: 0; } }

/* ───────── 📘 技能樹：卡片 ───────── */
.st-chain { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.tv3-sk.st-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ico main side' 'foot foot foot';
  align-items: start; gap: 6px 10px; min-width: 0; padding: 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--skc) 28%, #3a302c); background: linear-gradient(160deg, color-mix(in srgb, var(--skc) 11%, #241b18), #1a1412 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 0 rgba(0, 0, 0, 0.35); list-style: none; }
.st-card .st-ico { grid-area: ico; position: relative; line-height: 0; }
.st-card .st-main { grid-area: main; display: grid; gap: 2px; min-width: 0; line-height: 1.45; }
.st-card .st-side { grid-area: side; display: grid; justify-items: center; gap: 6px; }
.st-card .st-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 7px; border-top: 1px dashed rgba(255, 255, 255, 0.09); }
.st-card .st-name { gap: 2px 7px; }
.st-card .st-name b { font-size: 15.5px; color: #fff4e0; letter-spacing: 0.5px; }
.st-card .skill-lv { padding: 0 6px; border-radius: 5px; font-size: 12px; font-weight: 900; line-height: 1.5; color: #1a1006; font-variant-numeric: tabular-nums;
  background: linear-gradient(color-mix(in srgb, var(--skc) 55%, #fff), var(--skc)); box-shadow: 0 0 0 1px #0b0605; }
.st-card .st-desc { color: var(--text-2); }
.st-card .st-meta { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--muted); }
.st-card .tv3-next { color: color-mix(in srgb, var(--skc) 45%, #fff); font-weight: 800; }
.st-card .tv3-next.done { color: #ffd86a; }
/* 等級寶石：亮的會發光（一顆一顆輪流呼吸） */
.st-card .tv3-pips { gap: 4px; padding: 0 3px; }
.st-card .tv3-pips i { width: 8px; height: 8px; border-radius: 2px; background: #2e2522; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.st-card .tv3-pips i.on { background: radial-gradient(circle at 35% 30%, #fff 0 18%, color-mix(in srgb, var(--skc) 70%, #fff) 35%, var(--skc) 75%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 6px var(--skc); animation: st-pip 2.6s ease-in-out infinite; }
.st-card .tv3-pips i.on:nth-child(2) { animation-delay: 0.25s; }
.st-card .tv3-pips i.on:nth-child(3) { animation-delay: 0.5s; }
.st-card .tv3-pips i.on:nth-child(4) { animation-delay: 0.75s; }
.st-card .tv3-pips i.on:nth-child(5) { animation-delay: 1s; }
@keyframes st-pip { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px 1px var(--skc); } }
/* 大招、滿級、專屬技能 */
.st-card.fr-ult.got { border-color: rgba(255, 200, 80, 0.45); background: linear-gradient(160deg, color-mix(in srgb, var(--skc) 10%, #2c2116), #1c1511 62%); }
.st-card.max { border-color: rgba(255, 214, 110, 0.75); box-shadow: inset 0 0 0 1px rgba(255, 214, 110, 0.3), 0 0 14px rgba(255, 200, 80, 0.18), 0 2px 0 rgba(0, 0, 0, 0.35); }
.st-card.fr-hero { border: 2px solid transparent; background: linear-gradient(160deg, #2a1f1c, #1a1412 65%) padding-box,
  conic-gradient(from var(--sk-a), #ff5a6a, #ffc84a, #6ae07a, #5ac8ff, #a07aff, #ff5ad8, #ff5a6a) border-box;
  box-shadow: 0 0 16px rgba(var(--h6-rgb, 255, 214, 110), 0.35), 0 2px 0 rgba(0, 0, 0, 0.35); animation: sk-spin 6s linear infinite; }
/* 鎖住：灰掉、圖示纏一條鐵鍊＋小鎖 */
.tv3-sk.st-card.lock { border-style: dashed; border-color: #3a302c; background: rgba(255, 255, 255, 0.015); }
.st-card.lock .st-ico .sk-ico { filter: grayscale(0.9) brightness(0.55); }
.st-card.lock .st-main, .st-card.lock .st-cd { opacity: 0.6; }
.st-card.lock .st-ico::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 7px; margin-top: -3px; border-radius: 3px; transform: rotate(-24deg);
  background: repeating-linear-gradient(90deg, #a8aeb8 0 5px, #5c626c 5px 6px, #20242a 6px 7px, transparent 7px 8px); box-shadow: 0 1px 0 #000; }
.st-lockico { position: absolute; right: -6px; top: -6px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1a1412;
  box-shadow: 0 0 0 1px #52453e; font-style: normal; font-size: 10px; line-height: 1; }
.st-lockico::before { content: '🔒'; }
/* 上下兩張的光線：鎖住＝暗暗的虛線；學會了＝亮起來，一顆光點往下流 */
.st-card.st-linked::before { content: ''; position: absolute; left: 31px; top: -21px; width: 4px; height: 20px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, #4a3e38 0 3px, transparent 3px 6px); }
.st-card.st-linked.flow::before { background: linear-gradient(180deg, color-mix(in srgb, var(--skc) 50%, #2a201c), var(--skc)); box-shadow: 0 0 8px color-mix(in srgb, var(--skc) 70%, transparent); }
.st-card.st-linked.flow::after { content: ''; position: absolute; left: 30px; top: -22px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 8px 2px var(--skc); animation: st-flow 1.5s linear infinite; }
@keyframes st-flow { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
/* 冷卻轉盤 */
.st-cd { --n: 3; position: relative; display: grid; place-content: center; justify-items: center; width: 46px; height: 46px; border-radius: 50%; line-height: 1;
  background: radial-gradient(circle, #1c1412 0 55%, #2a201c 56%); box-shadow: 0 0 0 1px #0b0605, inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.st-cd::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; opacity: 0.95;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--skc) 80%, #fff) 0 calc(360deg / var(--n) - 8deg), transparent calc(360deg / var(--n) - 8deg) calc(360deg / var(--n)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.st-cd::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 255, 255, 0.75) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: st-sweep calc(var(--n) * 0.9s) linear infinite; }
.st-cd b { position: relative; font-size: 16px; font-weight: 900; color: #fff; text-shadow: 0 0 6px var(--skc); }
.st-cd small { position: relative; margin-top: 1px; font-size: 9px; font-weight: 800; color: var(--muted); }
.st-cd.fast b { color: #8affc0; }
@keyframes st-sweep { to { transform: rotate(360deg); } }
/* 已學會／可以學／鎖住／書不夠 */
.st-state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.st-state i { font-style: normal; }
.st-state.got { background: rgba(62, 207, 131, 0.14); color: #6ae0a0; box-shadow: inset 0 0 0 1px rgba(62, 207, 131, 0.45); }
.st-state.can { background: rgba(255, 210, 74, 0.16); color: #ffd86a; box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.6), 0 0 10px rgba(255, 210, 74, 0.25); animation: st-can 1.6s ease-in-out infinite; }
.st-state.lock { background: rgba(255, 255, 255, 0.05); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-3); }
.st-state.need { background: rgba(120, 160, 255, 0.1); color: #9ab8ff; box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.35); }
@keyframes st-can { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.6), 0 0 6px rgba(255, 210, 74, 0.2); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 230, 140, 0.95), 0 0 14px rgba(255, 210, 74, 0.55); } }
/* ▶ 看特效 */
.st-fx { display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-left: auto; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--skc) 60%, #000); color: #fff; font: inherit; font-size: 12.5px; font-weight: 900; letter-spacing: 0.5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--skc) 36%, #2a201c), color-mix(in srgb, var(--skc) 14%, #1a1210));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px #0b0605; }
.st-fx i { font-style: normal; font-size: 10px; color: color-mix(in srgb, var(--skc) 55%, #fff); }
.st-fx:hover { filter: brightness(1.18); }
.st-fx:active { transform: translateY(1px); }
.st-fx:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 加點、學會、升級：卡片閃一圈光、圖示彈一下；重置：學會的閃一下；儲存：整條掃過一道金光 */
.st-card.pop { animation: st-pop 0.7s ease-out; }
.st-card.pop .st-ico .sk-ico { animation: st-bounce 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.st-card.reset .st-ico .sk-ico { animation: st-dim 0.5s ease-out; }
.st-chain.saved .st-card.got { animation: st-saved 0.9s ease-out; }
@keyframes st-pop { 0% { box-shadow: 0 0 0 0 var(--skc); } 30% { box-shadow: 0 0 0 2px var(--skc), 0 0 28px color-mix(in srgb, var(--skc) 70%, transparent); } 100% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); } }
@keyframes st-bounce { 0% { transform: scale(0.8); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes st-dim { 0% { filter: brightness(2); } 100% { filter: none; } }
@keyframes st-saved { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 110, 0); } 35% { box-shadow: 0 0 0 2px rgba(255, 214, 110, 0.9), 0 0 22px rgba(255, 214, 110, 0.45); } 100% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); } }
/* 專屬技能那一區 */
.st-unique { display: grid; gap: 8px; }
.tv3-sec-tag.uni { background: rgba(var(--h6-rgb, 255, 214, 110), 0.18); color: rgb(var(--h6-rgb, 255, 214, 110)); }
/* 📗 自主學習：三層，上下用光線連起來 */
.tv3-books .st-tier { position: relative; gap: 8px; padding: 10px; border-radius: 14px; border-color: #3a302c; background: linear-gradient(180deg, #211a17, #1a1412); }
.tv3-books .st-tier.got { border-color: rgba(70, 180, 120, 0.55); }
.tv3-books .st-tier + .st-tier { margin-top: 14px; }
.tv3-books .st-tier.st-linked::before { content: ''; position: absolute; left: 40px; top: -24px; width: 4px; height: 22px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, #4a3e38 0 3px, transparent 3px 6px); }
.tv3-books .st-tier.st-linked.flow::before { background: linear-gradient(180deg, #46b478, #8affc0); box-shadow: 0 0 8px rgba(110, 230, 160, 0.6); }
.tv3-books .st-tier.st-linked.flow::after { content: ''; position: absolute; left: 39px; top: -25px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 8px 2px #6ae0a0; animation: st-flow2 1.5s linear infinite; }
@keyframes st-flow2 { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
.st-tier .tv3-bt-head { align-items: center; }
.st-tier-gem { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 900; color: #1a1006; transform: rotate(0);
  box-shadow: 0 0 0 1px #0b0605, inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.st-tier-gem.t1 { background: linear-gradient(145deg, #ffd0a0, #d98a4a 40%, #7a3e18); }
.st-tier-gem.t2 { background: linear-gradient(145deg, #ffffff, #c4cedc 40%, #5c6676); }
.st-tier-gem.t3 { background: linear-gradient(145deg, #fff6c0, #f2c250 40%, #8a5a12); box-shadow: 0 0 0 1px #0b0605, 0 0 8px rgba(255, 210, 80, 0.55); }
.st-tier.lock .st-tier-gem { filter: grayscale(0.8) brightness(0.7); }
.tv3-bks.tv3-bks { gap: 10px; }
.tv3-bk.st-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.tv3-bk.st-card.on { border-color: rgba(70, 180, 120, 0.7); background: linear-gradient(160deg, color-mix(in srgb, #46b478 12%, #241b18), #1a1412 62%); box-shadow: inset 0 0 0 1px rgba(70, 180, 120, 0.3); }
.tv3-bk.st-card.can { border-color: rgba(255, 210, 74, 0.55); }
.tv3-bk.st-card.max { box-shadow: inset 0 0 0 1px rgba(70, 180, 120, 0.7), 0 0 12px rgba(70, 180, 120, 0.3); }
.tv3-bk.st-card .tv3-pips i.on { --skc: #46b478; }
.st-foot .tv3-bk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; grid-column: auto; }
.st-foot .tv3-bk-why { max-width: none; text-align: left; }
.st-card .skill-book-tag { margin-right: 0; }
.tv3-bk.st-card .skill-lv { background: linear-gradient(#a8f0c8, #46b478); }

/* ───────── 🌟 天賦樹：星座圖 ───────── */
.tt-pts.left b { color: #ffd86a; text-shadow: 0 0 8px rgba(255, 210, 74, 0.6); }
.tt-sky { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 10px 4px 6px; overflow: hidden; border-radius: 14px;
  border: 1px solid #2c2440; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 0 rgba(0, 0, 0, 0.4);
  background: radial-gradient(ellipse at 50% -10%, rgba(130, 96, 220, 0.32), transparent 62%), radial-gradient(ellipse at 15% 110%, rgba(60, 120, 230, 0.2), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(60, 200, 140, 0.12), transparent 50%), linear-gradient(180deg, #14101f, #0c0a14 60%, #110c12); }
.tt-sky.off { filter: grayscale(0.6) brightness(0.8); }
.tt-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.85; animation: tt-twinkle 3.6s ease-in-out infinite alternate;
  background-image: radial-gradient(1.2px 1.2px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 22% 46%, #cfd8ff, transparent), radial-gradient(1.4px 1.4px at 31% 82%, #fff, transparent),
    radial-gradient(1px 1px at 44% 24%, #ffe8b0, transparent), radial-gradient(1px 1px at 57% 63%, #fff, transparent), radial-gradient(1.3px 1.3px at 66% 9%, #d8e4ff, transparent),
    radial-gradient(1px 1px at 78% 38%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 74%, #ffe0f0, transparent), radial-gradient(1px 1px at 95% 20%, #fff, transparent),
    radial-gradient(1px 1px at 14% 66%, #fff, transparent), radial-gradient(1px 1px at 50% 92%, #cfe8ff, transparent), radial-gradient(1.2px 1.2px at 72% 54%, #fff, transparent); }
.tt-stars::after { content: ''; position: absolute; inset: 0; animation: tt-twinkle 2.7s ease-in-out infinite alternate-reverse;
  background-image: radial-gradient(1px 1px at 5% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 27% 12%, #fff, transparent), radial-gradient(1px 1px at 38% 58%, #ffe8b0, transparent),
    radial-gradient(1px 1px at 61% 36%, #fff, transparent), radial-gradient(1.3px 1.3px at 83% 90%, #fff, transparent), radial-gradient(1px 1px at 92% 52%, #d8e4ff, transparent); }
@keyframes tt-twinkle { from { opacity: 0.45; } to { opacity: 1; } }
.tt-br { --bc: #ff8a5a; position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.tt-br0 { --bc: #ff8a5a; }
.tt-br1 { --bc: #6aa8ff; }
.tt-br2 { --bc: #3ecf83; }
.tt-br-head { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 2px 2px 4px; color: #f6eee2; font-size: 14px; white-space: nowrap; }
.tt-br-head b { overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; text-shadow: 0 0 8px color-mix(in srgb, var(--bc) 60%, transparent); }
.tt-br-ico { font-size: 15px; line-height: 1; }
.tt-br-pts { flex: none; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11.5px; font-weight: 900; line-height: 18px; text-align: center;
  color: #120c0a; background: var(--bc); box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 60%, transparent); font-variant-numeric: tabular-nums; }
.tt-br:not(.on) .tt-br-pts { background: #2e2836; color: var(--muted); box-shadow: none; }
.tt-path { position: relative; height: 356px; }
.tt-lines { position: absolute; inset: 0; pointer-events: none; }
.tt-lines svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--bc) 70%, transparent)); }
.tt-ln { fill: none; stroke: #3a3450; stroke-width: 3; stroke-linecap: round; }
.tt-ln.lock { stroke: #3a3450; stroke-dasharray: 3 6; }
.tt-ln.on { stroke: color-mix(in srgb, var(--bc) 78%, #000); stroke-width: 4; }
.tt-flow { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 13; opacity: 0.9; animation: tt-flow 1.1s linear infinite; }
.tt-ln.ignite { animation: tt-ignite 1s ease-out; }
.tt-ln.drain { animation: tt-drain 0.6s ease-out; }
@keyframes tt-flow { to { stroke-dashoffset: -30; } }
@keyframes tt-ignite { 0% { stroke: #fff; stroke-width: 9; } 100% { stroke-width: 4; } }
@keyframes tt-drain { 0% { stroke: #fff; } 100% { } }
/* 寶石 */
.tt-node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 1; display: grid; justify-items: center; gap: 1px; width: 92px; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform: translate(-50%, -21px); -webkit-tap-highlight-color: transparent; }
.tt-gem { position: relative; display: grid; place-items: center; width: 42px; height: 42px; }
.tt-gem-in { position: absolute; inset: 7px; border-radius: 7px; transform: rotate(45deg); transition: transform 0.15s;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.22), transparent 45%), linear-gradient(135deg, #3a3048, #19141f);
  box-shadow: 0 0 0 2px #0b0806, 0 0 0 3px color-mix(in srgb, var(--bc) 50%, #2a2238), inset 0 0 6px rgba(0, 0, 0, 0.6); }
.tt-node:hover .tt-gem-in { transform: rotate(45deg) scale(1.08); }
.tt-node.on .tt-gem-in { background: radial-gradient(circle at 32% 26%, #fff 0 9%, color-mix(in srgb, var(--bc) 55%, #fff) 22%, var(--bc) 52%, color-mix(in srgb, var(--bc) 42%, #000) 100%);
  box-shadow: 0 0 0 2px #0b0806, 0 0 0 3px color-mix(in srgb, var(--bc) 65%, #fff), 0 0 14px 2px color-mix(in srgb, var(--bc) 80%, transparent); }
.tt-node.max .tt-gem-in { box-shadow: 0 0 0 2px #0b0806, 0 0 0 3px #fff6c0, 0 0 20px 5px var(--bc); animation: tt-max 2.2s ease-in-out infinite; }
.tt-node.max .tt-gem::after { content: '★'; position: absolute; right: -2px; top: -4px; font-size: 12px; color: #ffe58a; text-shadow: 0 0 6px #ffd24a, 0 1px 0 #000; }
.tt-gem-n { position: relative; font-size: 15px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
.tt-node:not(.on) .tt-gem-n { color: color-mix(in srgb, var(--bc) 60%, #fff); opacity: 0.8; }
.tt-node.lock .tt-gem-in { background: linear-gradient(135deg, #2a2630, #14111a); box-shadow: 0 0 0 2px #0b0806, 0 0 0 3px #3a3440; }
.tt-lock { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.tt-lock::before { content: '🔒'; position: relative; z-index: 1; font-size: 14px; filter: grayscale(0.4) brightness(0.9); }
.tt-lock::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; transform: rotate(-28deg); opacity: 0.85;
  background: repeating-linear-gradient(90deg, #8a909a 0 5px, #4a4f58 5px 6px, transparent 6px 8px); }
.tt-lbl { display: grid; justify-items: center; max-width: 100%; line-height: 1.2; }
.tt-lbl b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: #f6eee2; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.tt-lbl small { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-node.on .tt-lbl small { color: color-mix(in srgb, var(--bc) 70%, #fff); font-weight: 900; }
.tt-node.lock .tt-lbl { opacity: 0.62; }
.tt-node.sel .tt-gem::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.8); animation: tt-spin 7s linear infinite; }
.tt-node.sel .tt-lbl b { color: #fff; text-decoration: underline; text-decoration-color: var(--bc); text-underline-offset: 3px; }
.tt-node:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.tt-node.pop .tt-gem-in { animation: tt-pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tt-node.unlock .tt-gem-in { animation: tt-unlock 0.9s ease-out; }
.tt-node.dim .tt-gem-in, .tt-node.reset .tt-gem-in { animation: tt-dim 0.55s ease-out; }
@keyframes tt-max { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-pop { 0% { transform: rotate(45deg) scale(0.7); } 60% { transform: rotate(45deg) scale(1.32); } 100% { transform: rotate(45deg) scale(1); } }
@keyframes tt-unlock { 0% { transform: rotate(45deg) scale(1.4); filter: brightness(2.4); } 100% { transform: rotate(45deg) scale(1); filter: none; } }
@keyframes tt-dim { 0% { filter: brightness(2.2); transform: rotate(45deg) scale(1.15); } 100% { filter: none; transform: rotate(45deg) scale(1); } }
/* 儲存：整片星空掃過一道光；重置：閃一下 */
.tt-sky.saved::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 200, 0.28) 48%, rgba(255, 255, 255, 0.45) 50%, transparent 66%); animation: tt-sweep 1.1s ease-out forwards; }
.tt-sky.reset { animation: tt-flash 0.5s ease-out; }
@keyframes tt-sweep { to { transform: translateX(110%); } }
@keyframes tt-flash { 0% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 18px rgba(160, 130, 255, 0.5); } 100% { } }
/* 說明卡（顏色照那一支：.tt-br0～2 的 --bc） */
.tt-card { position: relative; display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bc) 45%, #3a302c); background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 14%, #231b18), #1a1412 70%);
  box-shadow: 0 0 0 1px #0b0605, 0 4px 14px rgba(0, 0, 0, 0.35); }
.tt-card.lock { border-style: dashed; }
.tt-card.pop { animation: tt-cardpop 0.6s ease-out; }
@keyframes tt-cardpop { 30% { box-shadow: 0 0 0 2px var(--bc), 0 0 22px color-mix(in srgb, var(--bc) 60%, transparent); } }
.tt-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-card-gem { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.tt-card-gem i { position: absolute; inset: 6px; border-radius: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #3a3048, #19141f);
  box-shadow: 0 0 0 2px #0b0806, 0 0 0 3px color-mix(in srgb, var(--bc) 50%, #2a2238); }
.tt-card-gem.on i { background: radial-gradient(circle at 32% 26%, #fff 0 9%, var(--bc) 52%, color-mix(in srgb, var(--bc) 42%, #000) 100%); box-shadow: 0 0 0 2px #0b0806, 0 0 12px var(--bc); }
.tt-card-gem b { position: relative; font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000; }
.tt-card-t { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.tt-card-t b { font-size: 16.5px; color: #fff4e0; letter-spacing: 1px; }
.tt-card .tv3-pips i.on { box-shadow: 0 0 6px var(--bc); }
.tt-card-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; margin: 0; }
.tt-card-lines > div { display: grid; gap: 1px; min-width: 0; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.tt-card-lines dt { color: var(--muted); font-size: 11.5px; }
.tt-card-lines dd { margin: 0; font-weight: 900; color: #f6eee2; }
.tt-card-lines dd.now { color: color-mix(in srgb, var(--bc) 70%, #fff); }
.tt-card-lines .need, .tt-card-lines .ok { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.tt-card-lines .need dd { color: var(--warn); }
.tt-card-lines .ok dd { color: #6ae0a0; }
.tt-card .tv3-step { justify-self: end; }
.tt-card .tv3-sb { width: 44px; height: 38px; font-size: 18px; }

/* ───────── ▶ 看特效的面板（一直是深色） ───────── */
.sheet.skfx-sheet { color-scheme: dark;
  --bg: #120e0d; --surface: #221b19; --surface-2: #1c1614; --surface-3: #2c2320; --field: #1a1412;
  --line: #2e2522; --line-2: #3a302c; --line-3: #52453e; --text: #f6eee2; --text-2: #d8cbbb; --muted: #b3a493;
  --gold: #e8b54a; --gold-ink: #f0c56a; --seal: #e8b54a; --seal-hover: #f5d38a; --seal-dark: #b8892c; --seal-ink: #16120a; --ring: #e8b54a;
  background: #1c1614; color: var(--text); border-color: #0b0605; }
.sheet.skfx-sheet .sheet-head { background: linear-gradient(#3a302c, #2a2220); border-bottom: 1px solid #120c0a; }
.sheet.skfx-sheet .sheet-title { color: #f6eee2; letter-spacing: 1px; }
.sheet.skfx-sheet .icon-btn { color: #e8dccb; }
.sheet.skfx-sheet .sheet-body, .sheet.skfx-sheet .sheet-foot { background: #1c1614; }
.sheet.skfx-sheet .sheet-foot { border-top: 1px solid #120c0a; }
.skfx { --skc: #cfd8e6; display: grid; gap: 10px; min-width: 0; }
.skfx-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.skfx-t { display: grid; gap: 4px; min-width: 0; }
.skfx-t > b { font-size: 21px; color: #fff4e0; letter-spacing: 1.5px; text-shadow: 0 0 10px color-mix(in srgb, var(--skc) 60%, transparent); }
.skfx-t p { margin: 0; color: var(--text-2); line-height: 1.5; }
.skfx-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.skfx-tags span { padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.7; white-space: nowrap;
  background: color-mix(in srgb, var(--skc) 18%, transparent); color: color-mix(in srgb, var(--skc) 50%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skc) 45%, transparent); }
.skfx-stage { position: relative; display: grid; place-items: center; min-height: 200px; overflow: hidden; border-radius: 12px; background: #0c0a10;
  box-shadow: inset 0 0 0 1px #2c2440, 0 0 0 1px #0b0605; }
.skfx-stage > * { width: 100%; max-width: 100%; }
.skfx-stage canvas { display: block; max-width: 100%; }
/* 戰鬥引擎的預覽（js/expedition-scene.js 的 skillPreview）：撐滿這一格 */
.skfx-stage.live { background: #0c0a10; }
.skfx-stage .bt-preview { max-width: none; box-shadow: none; border-radius: 0; }
.skfx-load { color: var(--muted); text-align: center; }
.skfx-note { margin: 0; }
/* 沒有戰鬥引擎的預覽時：CSS 做的示範 */
.skfx-fake { position: relative; height: 210px; overflow: hidden;
  background: radial-gradient(ellipse at 70% 110%, color-mix(in srgb, var(--skc) 28%, transparent), transparent 60%), linear-gradient(#1c1734, #0e0c18); }
.skfx-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; border-top: 2px solid #3a3450; background: repeating-linear-gradient(90deg, #2a2438 0 22px, #241f30 22px 44px); }
.skfx-hero { position: absolute; left: 10%; bottom: 32px; line-height: 0; --doll-ol: #05070a; }
.skfx-dummies { position: absolute; right: 7%; bottom: 36px; display: flex; gap: 12px; }
.skfx-dummy { position: relative; width: 18px; height: 40px; border-radius: 9px 9px 3px 3px; background: linear-gradient(90deg, #d8a86a, #8a5a30); box-shadow: 0 0 0 2px #1a0f08;
  animation: skfx-shake 1.8s ease-in-out infinite; }
.skfx-dummy::before { content: ''; position: absolute; left: 1px; top: -15px; width: 16px; height: 16px; border-radius: 50%; background: #e2bc86; box-shadow: 0 0 0 2px #1a0f08; }
.skfx-dummy::after { content: ''; position: absolute; left: 7px; bottom: -12px; width: 4px; height: 12px; background: #5a3820; }
.skfx-dummy.d1 { animation-delay: 0.05s; }
.skfx-dummy.d2 { animation-delay: 0.1s; }
.skfx-shot { position: absolute; left: 24%; bottom: 74px; line-height: 0; opacity: 0; filter: drop-shadow(0 0 6px var(--skc)) drop-shadow(0 0 2px #fff); animation: skfx-shot 1.8s cubic-bezier(0.5, 0, 0.75, 1) infinite; }
.skfx-boom { position: absolute; right: 16%; bottom: 60px; width: 0; height: 0; }
.skfx-boom i { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--skc); opacity: 0;
  box-shadow: 0 0 22px var(--skc), inset 0 0 22px var(--skc); animation: skfx-boom 1.8s ease-out infinite; }
.skfx-boom i + i { border: 0; background: radial-gradient(circle, #fff 0 12%, var(--skc) 35%, transparent 68%); animation-delay: 0.06s; }
@keyframes skfx-shot { 0% { left: 24%; opacity: 0; transform: scale(0.5); } 10% { opacity: 1; transform: scale(1); } 54% { left: 70%; opacity: 1; transform: scale(1.1) rotate(10deg); } 58%, 100% { left: 70%; opacity: 0; } }
@keyframes skfx-boom { 0%, 54% { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes skfx-shake { 0%, 57% { transform: none; } 61% { transform: translateX(5px) rotate(6deg); } 67% { transform: translateX(-3px) rotate(-4deg); } 74%, 100% { transform: none; } }

/* ───────── 英雄的定位（輸出、坦克、輔助、控場） ───────── */
.h6-role { --rc: #5ad08a; display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 4px; font-size: 9px; font-weight: 900; line-height: 1;
  color: #fff; white-space: nowrap; letter-spacing: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc) 50%, color-mix(in srgb, var(--rc) 60%, #000));
  box-shadow: 0 0 0 1px rgba(24, 10, 2, 0.9), 0 0 0 2px color-mix(in srgb, var(--rc) 45%, #ffe8a8), 0 0 5px color-mix(in srgb, var(--rc) 70%, transparent); }
.h6-role b { font-weight: 900; }
.h6-role i { font-style: normal; line-height: 1; }
.h6-role.full { display: inline-flex; align-items: center; gap: 4px; width: auto; height: 21px; padding: 0 9px 0 6px; border-radius: 6px; font-size: 12.5px;
  background: linear-gradient(color-mix(in srgb, var(--rc) 88%, #fff), color-mix(in srgb, var(--rc) 70%, #000)); box-shadow: 0 0 0 1px rgba(24, 10, 2, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.h6-role.full i { font-size: 12px; }
.hs2-stars .h6-role.full { height: 19px; font-size: 11.5px; padding: 0 8px 0 5px; }
.tcard.hero6 .tc-tl { gap: 3px; }
.tcard.hero6 .tc-tl .tc-title.long { font-size: 9.5px; letter-spacing: 0; }
.hs2-role { margin: -2px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; line-height: 1.7; color: var(--text-2);
  background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent); }
.hs2-role .h6-role { margin-right: 6px; vertical-align: 1px; }
.seg.h6-role-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin-top: 6px; }
.h6-role-seg .seg-btn { min-width: 0; padding: 6px 2px; font-size: 13px; white-space: nowrap; }
.h6-role-seg .seg-btn.on.rl-dps { box-shadow: inset 0 -3px 0 #ff7a5a; }
.h6-role-seg .seg-btn.on.rl-tank { box-shadow: inset 0 -3px 0 #6aa8ff; }
.h6-role-seg .seg-btn.on.rl-support { box-shadow: inset 0 -3px 0 #5ad08a; }
.h6-role-seg .seg-btn.on.rl-control { box-shadow: inset 0 -3px 0 #b07aff; }
.h6-role-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; line-height: 1.5;
  background: color-mix(in srgb, var(--rc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.h6-none { margin: 10px 0 0; }
/* 灌名英雄的專武（資料頁）：拿著了＝紅色的光、在物品欄＝金色、還沒有＝連到鐵匠鋪 */
.hs2-excl { margin: 0; padding: 6px 8px; border-radius: 8px; line-height: 1.6; background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line-3); }
.hs2-excl.have { border-style: solid; border-color: rgba(255, 210, 90, 0.45); background: rgba(255, 210, 90, 0.07); }
.hs2-excl.on { border-style: solid; border-color: rgba(255, 90, 100, 0.55); background: linear-gradient(90deg, rgba(255, 70, 90, 0.14), transparent); box-shadow: 0 0 10px rgba(255, 70, 90, 0.15); }
.hs2-excl b { color: #ffd0c0; }

/* ───────── 手機 ───────── */
@media (max-width: 460px) {
  .tv3-sk.st-card { gap: 6px 8px; padding: 9px 8px; }
  .st-card .st-name b { font-size: 15px; }
  .st-card.st-linked::before { left: 29px; }
  .st-card.st-linked.flow::after { left: 28px; }
  .h6-role-seg .seg-btn { font-size: 12px; letter-spacing: -0.02em; }
  .tt-path { height: 330px; }
  .tt-node { width: 76px; }
  .tt-lbl b { font-size: 12px; }
  .tt-br-head { font-size: 13px; gap: 3px; }
  .tt-card-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-card-lines > div { padding: 4px 6px; }
}
@media (max-width: 370px) {
  .tt-node { width: 66px; }
  .tt-lbl b { font-size: 11px; }
  .tt-br-ico { display: none; }
  .tt-card-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── 減少動態效果：不爆火花、不呼吸、不轉、光線不流動 ───────── */
@media (prefers-reduced-motion: reduce) {
  .fx-burst { display: none !important; }
  .sk-ico.fr-hero, .sk-ico.fr-ult::after, .st-card.fr-hero, .st-card .tv3-pips i.on, .st-card.st-linked.flow::after, .tv3-books .st-tier.st-linked.flow::after,
  .st-cd::after, .st-state.can, .st-card.pop, .st-card.pop .st-ico .sk-ico, .st-card.reset .st-ico .sk-ico, .st-chain.saved .st-card.got,
  .tt-stars, .tt-stars::after, .tt-flow, .tt-ln.ignite, .tt-ln.drain, .tt-node.max .tt-gem-in, .tt-node.sel .tt-gem::before, .tt-node.pop .tt-gem-in, .tt-node.unlock .tt-gem-in,
  .tt-node.dim .tt-gem-in, .tt-node.reset .tt-gem-in, .tt-sky.reset, .tt-card.pop, .skfx-dummy, .skfx-shot, .skfx-boom i { animation: none !important; }
  .st-card.st-linked.flow::after, .tv3-books .st-tier.st-linked.flow::after, .st-cd::after, .tt-flow, .tt-sky.saved::after { display: none; }
  .sk-ico.fr-ult::after { opacity: 0.7; }
  .skfx-shot { left: 50%; opacity: 1; }
  .skfx-boom i { opacity: 0.6; transform: scale(0.9); }
}

/* ───────── 2026-10-01.7 騎乘、新職業、召喚獸（js/tavern.js） ───────── */
/* 騎著坐騎的冒險者（js/ride-art.js 的 rideSvg）：卡片、舞台、資料頁的坐騎 */
.tc-pic > .ride-doll { position: relative; z-index: 1; margin-bottom: -2px; }
.hs2-hero.riding { padding-bottom: 2px; }
.hs2-hero .ride-doll { position: relative; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.tv-ride svg, .tv3-ridepic svg { display: block; image-rendering: pixelated; }
.tv3-ridepic { min-width: 72px; }
/* 新職業的顏色（卡片上的職業字） */
.tc-cls.ama { color: #ffcf5a; }
.tc-cls.monk { color: #ffa24a; }
/* 魔法師的召喚獸 */
.tv-summons { display: grid; gap: 8px; }
.tv-summon { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(100deg, rgba(160, 110, 255, 0.14), rgba(160, 110, 255, 0.03)); border: 1px solid rgba(170, 130, 255, 0.4); }
.tv-summon-pic { flex: none; display: grid; place-items: end center; min-width: 60px; line-height: 0; --doll-ol: #0b0806; }
.tv-summon-pic svg { display: block; image-rendering: pixelated; }
.tv-summon-t { display: grid; gap: 1px; min-width: 0; line-height: 1.45; }
.tv-summon-t b { font-size: 14.5px; color: #e8d8ff; }
.tv-summon-next { color: #c8a8ff; font-weight: 800; }
.tv-summon.compact { gap: 8px; margin-top: 4px; padding: 4px 8px; }
.tv-summon.compact .tv-summon-pic { min-width: 38px; }
.tv-summon.compact .tv-summon-t b { font-size: 13px; }
/* 英雄神殿連過來（#/tavern?t=cards）：🃏 英雄卡閃一下 */
.h6-card.h6-hl { animation: h6-hl 1.6s ease-out; }
@keyframes h6-hl { 0%, 30% { box-shadow: 0 0 0 3px #e8b54a, 0 0 22px rgba(232, 181, 74, 0.6); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .h6-card.h6-hl { animation: none; } }