/* 冒險者的星等（2026-10-02.1，js/stars.js 的 starsEl；第一次用到的時候插進 <head>）
   1～5 星：金色小星；6～10 星：大的紫色寶石星；11～15 星：紅黑色魔焰星（暗紅邊、黑色的心、外面一圈紅光在燒）；16～20 星：彩虹星（顏色一直流動）
   星星用 clip-path 剪成星形（不靠字型，每台手機都一樣）；外框、發光用外層的 drop-shadow（跟著星形走）
   「減少動態效果」：魔焰不閃、彩虹不流動 */
.stars-x { --st-g: 12px; --st-p: 16px; --st-c: 16px; --st-r: 17px;
  display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; line-height: 1; white-space: nowrap; flex: none; }
.stars-x.sz-sm { --st-g: 9px; --st-p: 12px; --st-c: 12px; --st-r: 13px; gap: 0; }
.stars-x.sz-lg { --st-g: 18px; --st-p: 24px; --st-c: 24px; --st-r: 26px; gap: 2px; }
.stars-x .st-i { display: block; flex: none; position: relative; overflow: hidden;
  clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 34%); }

/* 金星（1～5 星） */
.stars-x.st-gold { filter: drop-shadow(0 0 0.6px #5a3200) drop-shadow(0 1px 0 rgba(60, 30, 0, 0.55)); }
.stars-x.st-gold .st-i { width: var(--st-g); height: var(--st-g);
  background: linear-gradient(160deg, #fffbe0 6%, #ffe066 32%, #f0a818 62%, #c87808 82%, #ffd24a 100%); }

/* 紫星（6～10 星）：大一點、像寶石（左上一點白光、下面深紫），外面紫色的光 */
.stars-x.st-purple { filter: drop-shadow(0 0 0.7px #22063e) drop-shadow(0 0 3px rgba(186, 104, 255, 0.85)); }
.stars-x.st-purple .st-i { width: var(--st-p); height: var(--st-p);
  background: radial-gradient(circle at 40% 30%, #ffffff 0 7%, #f3d2ff 15%, #c27aff 34%, #8a2be2 58%, #4a0f8a 80%, #2a0650 100%); }
.stars-x.st-purple .st-i::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); }

/* 紅黑星（11～15 星）：黑色的心、暗紅到亮紅的邊，外面一圈在燒的紅光（會一閃一閃） */
.stars-x.st-crimson { filter: drop-shadow(0 0 0.8px #000) drop-shadow(0 0 3px rgba(255, 40, 20, 0.95)) drop-shadow(0 0 6px rgba(140, 0, 0, 0.7));
  animation: st-burn 1.6s ease-in-out infinite alternate; }
.stars-x.st-crimson .st-i { width: var(--st-c); height: var(--st-c);
  background: radial-gradient(circle at 50% 60%, #050000 0 11%, #3a0006 21%, #8a0a14 36%, #d4161c 54%, #ff4422 72%, #ff8a3a 88%, #ffd070 100%); }
.stars-x.st-crimson .st-i::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 120, 40, 0.75), transparent 70%); mix-blend-mode: screen;
  animation: st-flame 0.9s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -0.23s); }
@keyframes st-burn {
  0% { filter: drop-shadow(0 0 0.8px #000) drop-shadow(0 0 2px rgba(255, 40, 20, 0.8)) drop-shadow(0 0 5px rgba(140, 0, 0, 0.55)); }
  100% { filter: drop-shadow(0 0 0.8px #000) drop-shadow(0 0 4px rgba(255, 70, 30, 1)) drop-shadow(0 0 8px rgba(180, 0, 0, 0.85)); }
}
@keyframes st-flame { 0% { transform: translateY(8%) scaleY(0.85); opacity: 0.55; } 100% { transform: translateY(-6%) scaleY(1.1); opacity: 1; } }

/* 彩虹星（16～20 星）：七彩一直流動、白色的光掃過去 */
.stars-x.st-rainbow { filter: drop-shadow(0 0 0.8px rgba(40, 20, 60, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(200, 120, 255, 0.65)); }
.stars-x.st-rainbow .st-i { width: var(--st-r); height: var(--st-r);
  background: linear-gradient(115deg, #ff4d6a, #ffa64a, #ffeb4a, #5cff8a, #4ad8ff, #6a7cff, #d05cff, #ff4d6a, #ffa64a, #ffeb4a);
  background-size: 300% 300%; animation: st-flow 2.4s linear infinite; animation-delay: calc(var(--k, 0) * -0.35s); }
.stars-x.st-rainbow .st-i::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 28%); }
@keyframes st-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .stars-x.st-crimson, .stars-x.st-crimson .st-i::after, .stars-x.st-rainbow .st-i { animation: none !important; }
}

/* 神諭召喚券（英雄神殿） */
.oracle-ico { display: inline-flex; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(190, 120, 255, 0.7)); }
.oracle-ico svg { display: block; }
.oracle-amt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.oracle-amt b { font-weight: 800; }

/* ───────── 酒館的升星分頁（2026-10-02.1「合成」，js/tavern.js 的 starTab；深色面板裡） ───────── */
/* 冒險者資料舞台左上角的星星：手機上小一點、放不下就換行（不要壓到右邊的戰力） */
.hs2-stars { flex-wrap: wrap; max-width: calc(100% - 130px); row-gap: 3px; }
@media (max-width: 480px) { .hs2-stars .stars-x.sz-lg { --st-g: 15px; --st-p: 19px; --st-c: 19px; --st-r: 20px; } }
/* 20 格的階梯：金、紫、紅黑、彩虹四段，每段 5 顆；還沒到的暗暗的、到了的亮、現在這一顆有一圈光 */
.hs2-ladder.lad20 { gap: 4px 6px; }
.lad20 .lad-g { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid #3a302c; }
.lad20 .lad-g.on { border-color: #6a5a4e; }
.lad20 .lad-g.lg-purple.on { border-color: rgba(186, 104, 255, 0.6); }
.lad20 .lad-g.lg-crimson.on { border-color: rgba(255, 60, 40, 0.6); }
.lad20 .lad-g.lg-rainbow.on { border-color: transparent; background: linear-gradient(#120e0d, #120e0d) padding-box, linear-gradient(90deg, #ff4d6a, #ffeb4a, #5cff8a, #4ad8ff, #d05cff) border-box; }
.lad20 .lad-s { position: relative; }
.lad20 .lad-s.off { filter: grayscale(1) brightness(0.75) !important; opacity: 0.45; animation: none !important; }
.lad20 .lad-s.off .st-i, .lad20 .lad-s.off .st-i::after { animation: none !important; }
.lad20 .lad-s.now::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid #ffd86a; box-shadow: 0 0 8px rgba(255, 216, 106, 0.9); pointer-events: none; }
.lad20 .hs2-lad-arrow { opacity: 0.55; }
.lad20 .hs2-lad-arrow.on { opacity: 1; }

/* 合成配方：主角（現在的星 ➜ 下一星）、要的東西一條一條（✓／✗）、升了以後多什麼 */
.su-recipe { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: #120e0d; border: 1px solid #3e332e; position: relative; overflow: hidden; }
.su-recipe::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(var(--su-rgb, 186, 104, 255), 0.22), transparent 70%); }
.su-recipe.st-purple { --su-rgb: 186, 104, 255; }
.su-recipe.st-crimson { --su-rgb: 255, 50, 30; }
.su-recipe.st-rainbow { --su-rgb: 120, 220, 255; }
.su-main { position: relative; display: flex; align-items: center; gap: 10px; }
.su-pic { flex: none; width: 72px; height: 72px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 10px;
  background: radial-gradient(circle at 50% 60%, rgba(var(--su-rgb, 186, 104, 255), 0.35), transparent 70%), #1c1614; border: 1px solid #3e332e; }
.su-main-t { display: grid; gap: 4px; min-width: 0; }
.su-main-t > b { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-arrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-arrow > i { font-style: normal; color: #e8b54a; font-weight: 900; }
.su-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; position: relative; }
.su-row { display: grid; grid-template-columns: 26px 1fr auto 20px; align-items: center; gap: 2px 8px; padding: 6px 8px; border-radius: 8px; background: #1c1614; border: 1px solid #2e2522; }
.su-row.ok { border-color: rgba(122, 224, 122, 0.35); }
.su-row.no { border-color: rgba(255, 110, 90, 0.45); }
.su-ico { display: grid; place-items: center; font-size: 17px; }
.su-ico .ico { width: 18px; height: 18px; }
.su-lbl { font-size: 13px; color: var(--text-2); min-width: 0; }
.su-val { font-variant-numeric: tabular-nums; font-size: 14px; }
.su-chk { font-style: normal; font-weight: 900; text-align: center; }
.su-row.ok .su-chk { color: #7ae07a; }
.su-row.no .su-chk { color: #ff7a6a; }
.su-fod { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; }
.su-fd { display: inline-grid; justify-items: center; padding: 2px 4px 1px; border-radius: 6px; background: #120e0d; border: 1px solid #3a302c; }
.su-fd small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.su-swap { margin-left: auto; align-self: center; }
.su-gain { margin: 0; padding-left: 18px; display: grid; gap: 3px; position: relative; }
.su-tierup b { color: #ffe08a; }
.su-ready { color: #7ae07a; font-weight: 800; }
.btn.su-go-awaken { background: linear-gradient(#a8141c, #5a0008); border-color: #ff5a3a; color: #fff; box-shadow: 0 0 12px rgba(255, 60, 30, 0.5); }
.btn.su-go-deify { color: #1a0a20; border-color: #fff; background: linear-gradient(115deg, #ffb0c0, #ffe9a0, #b8ffcc, #b0ecff, #e0b8ff); box-shadow: 0 0 12px rgba(255, 255, 255, 0.55); }
.btn.su-go:disabled { filter: grayscale(0.7); opacity: 0.6; box-shadow: none; }
.su-max b { color: #ffe08a; }
.hs2-god { margin: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
  background: linear-gradient(#1c1614, #1c1614) padding-box, linear-gradient(90deg, #ff4d6a, #ffeb4a, #5cff8a, #4ad8ff, #d05cff) border-box; }
.su-five { padding: 10px 12px 4px; display: grid; gap: 8px; }
.su-five-n { margin-right: auto; font-weight: 800; }
.tc-b-lock { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.btn.tv3-lock-btn.on { border-color: #e8b54a; color: #ffe08a; }

/* ───────── 升星演出（js/stars.js 的 starUpFx）：整個畫面暗下來、主角發光、舊的星 → 一道光 → 新的星；換顏色那一步：舊的五顆往中間合成一顆 ───────── */
.su-fx { position: fixed; inset: 0; z-index: 9985; cursor: pointer; overflow: hidden; display: grid; place-items: center; --su-rgb: 255, 210, 74; }
.su-fx.t-purple { --su-rgb: 186, 104, 255; }
.su-fx.t-crimson { --su-rgb: 255, 50, 30; }
.su-fx.t-rainbow { --su-rgb: 255, 255, 255; }
.su-fx.out { animation: su-out 0.26s ease-in both; }
.su-fx-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(var(--su-rgb), 0.38), transparent 62%), rgba(10, 6, 18, 0.93); animation: su-in 0.25s ease-out both; }
.su-fx.t-crimson .su-fx-bg { background: radial-gradient(circle at 50% 45%, rgba(255, 50, 30, 0.42), transparent 60%), rgba(20, 0, 2, 0.95); }
.su-fx-rays { position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(var(--su-rgb), 0.34) 0 6deg, transparent 6deg 17deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 18%, transparent 42%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 18%, transparent 42%);
  animation: su-rays 3.6s linear 0.15s both; }
.su-fx.t-rainbow .su-fx-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 90, 120, 0.35) 0 5deg, transparent 5deg 11deg, rgba(255, 230, 90, 0.35) 11deg 16deg, transparent 16deg 22deg,
  rgba(90, 255, 150, 0.35) 22deg 27deg, transparent 27deg 33deg, rgba(90, 210, 255, 0.35) 33deg 38deg, transparent 38deg 44deg, rgba(200, 110, 255, 0.35) 44deg 49deg, transparent 49deg 55deg); }
.su-fx-col { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; margin-top: -6vh; }
.su-fx-pic { display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 0 14px rgba(var(--su-rgb), 0.95)); animation: su-pic 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.su-fx-stars { position: relative; display: grid; place-items: center; min-height: 30px; }
.su-fx-old, .su-fx-new { grid-area: 1 / 1; }
.su-fx-ring { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 3px solid rgba(var(--su-rgb), 0.95); box-shadow: 0 0 24px rgba(var(--su-rgb), 0.95), inset 0 0 18px rgba(var(--su-rgb), 0.7); animation: su-ring 0.8s ease-out 0.95s both; }
.su-fx-old { animation: su-hide 0.22s ease-in 0.9s both; }
.su-fx-new { opacity: 0; animation: su-show 0.2s ease-out 0.95s both; }
.su-fx-new .stars-x .st-i:last-child { animation: su-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.95s both; }
.su-fx.merge .su-fx-old .st-i { animation: su-merge 0.55s ease-in 0.35s both; }
.su-fx.merge .su-fx-new .stars-x .st-i:last-child { animation: su-bigpop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 0.95s both; }
/* 換顏色的那一步：新的那一顆特別大 */
.su-fx.merge .su-fx-new .stars-x { --st-p: 44px; --st-c: 44px; --st-r: 46px; }
.su-fx-txt { display: grid; justify-items: center; gap: 2px; color: #fff; opacity: 0; text-align: center;
  text-shadow: 0 0 10px rgba(var(--su-rgb), 1), 0 2px 0 rgba(0, 0, 0, 0.6); animation: su-txt 0.45s ease-out 1.15s both; }
.su-fx-txt b { font: 900 30px/1.2 var(--serif); letter-spacing: 3px; }
.su-fx-txt small { font-size: 13px; font-weight: 700; opacity: 0.92; }
.su-fx.t-rainbow .su-fx-txt b { background: linear-gradient(90deg, #ff6a8a, #ffd24a, #7affb0, #6ad8ff, #c08aff); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }
@keyframes su-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes su-rays { 0% { opacity: 0; transform: rotate(0deg) scale(0.7); } 15% { opacity: 1; } 100% { opacity: 0.85; transform: rotate(40deg) scale(1.05); } }
@keyframes su-ring { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(5); } }
@keyframes su-pic { from { opacity: 0; transform: translateY(20px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes su-hide { to { opacity: 0; } }
@keyframes su-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-pop { 0% { transform: scale(3.2) rotate(-40deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes su-bigpop { 0% { transform: scale(5) rotate(-90deg); opacity: 0; } 55% { opacity: 1; transform: scale(0.85) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes su-merge { 0% { transform: translateX(0) scale(1); opacity: 1; } 100% { transform: translateX(var(--dx, 0px)) scale(0.35); opacity: 0.2; } }
@keyframes su-txt { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .su-fx { display: none; } }

/* ───────── 11 星以上的卡片、資料舞台（2026-10-02.1，js/tavern.js）：紅黑星＝外面一圈暗紅的魔焰光；彩虹星＝一圈一直換顏色的彩虹光 ───────── */
.tcard.tc-crimson, .tcard.hero6.h6t5.tc-crimson { box-shadow: inset 0 0 0 7px rgba(28, 2, 2, 0.92), 0 0 0 2px #b0101a, 0 0 14px 3px rgba(255, 50, 20, 0.6), 0 2px 0 rgba(0, 0, 0, 0.3);
  animation: tc-burn 1.8s ease-in-out infinite alternate; }
@keyframes tc-burn {
  from { box-shadow: inset 0 0 0 7px rgba(28, 2, 2, 0.92), 0 0 0 2px #8a0a12, 0 0 9px 2px rgba(255, 50, 20, 0.45), 0 2px 0 rgba(0, 0, 0, 0.3); }
  to { box-shadow: inset 0 0 0 7px rgba(28, 2, 2, 0.92), 0 0 0 2px #ff3a1a, 0 0 18px 5px rgba(255, 80, 30, 0.75), 0 2px 0 rgba(0, 0, 0, 0.3); }
}
.tcard.tc-rainbow, .tcard.hero6.h6t5.tc-rainbow { animation: tc-rainbow 3s linear infinite; }
@keyframes tc-rainbow {
  0%, 100% { box-shadow: inset 0 0 0 7px rgba(28, 12, 2, 0.92), 0 0 0 2px #ff5a7a, 0 0 16px 4px rgba(255, 90, 122, 0.6); }
  20% { box-shadow: inset 0 0 0 7px rgba(28, 12, 2, 0.92), 0 0 0 2px #ffd24a, 0 0 16px 4px rgba(255, 210, 74, 0.6); }
  40% { box-shadow: inset 0 0 0 7px rgba(28, 12, 2, 0.92), 0 0 0 2px #6aff9a, 0 0 16px 4px rgba(106, 255, 154, 0.55); }
  60% { box-shadow: inset 0 0 0 7px rgba(28, 12, 2, 0.92), 0 0 0 2px #5ad8ff, 0 0 16px 4px rgba(90, 216, 255, 0.6); }
  80% { box-shadow: inset 0 0 0 7px rgba(28, 12, 2, 0.92), 0 0 0 2px #c07aff, 0 0 16px 4px rgba(192, 122, 255, 0.6); }
}
.hs2-stage.stg-crimson, .hs2-stage.stg-rainbow { isolation: isolate; } /* 光畫在舞台的底色上面、裝備格和角色下面 */
.hs2-stage.stg-crimson::after, .hs2-stage.stg-rainbow::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hs2-stage.stg-crimson::after { background: radial-gradient(ellipse 46% 36% at 50% 60%, rgba(255, 40, 20, 0.32), transparent 70%),
  radial-gradient(ellipse 120% 30% at 50% 100%, rgba(120, 0, 0, 0.45), transparent 70%); animation: stg-burn 2.2s ease-in-out infinite alternate; }
.hs2-stage.stg-rainbow::after { background: radial-gradient(circle at 50% 56%, transparent 0 30%, rgba(255, 255, 255, 0.0) 31%, transparent 46%),
  conic-gradient(from 0deg at 50% 56%, rgba(255, 90, 122, 0.18), rgba(255, 210, 74, 0.18), rgba(106, 255, 154, 0.18), rgba(90, 216, 255, 0.18), rgba(192, 122, 255, 0.18), rgba(255, 90, 122, 0.18));
  -webkit-mask: radial-gradient(circle at 50% 56%, transparent 0 22%, #000 32%, transparent 62%); mask: radial-gradient(circle at 50% 56%, transparent 0 22%, #000 32%, transparent 62%);
  animation: stg-spin 10s linear infinite; }
@keyframes stg-burn { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes stg-spin { to { filter: hue-rotate(360deg); } }
.news-stars { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tcard.tc-crimson, .tcard.tc-rainbow, .tcard.hero6.h6t5.tc-crimson, .tcard.hero6.h6t5.tc-rainbow, .hs2-stage.stg-crimson::after, .hs2-stage.stg-rainbow::after { animation: none !important; }
}