/* 英雄神殿（#/hall，js/hall.js；2026-10-02.1）：召喚祭壇、神諭召喚的演出、怎麼拿券、機率、英雄圖鑑、英魂換卡
   祭壇是夜晚的神殿（淺色、夜間主題都一樣是深色的舞台）；其他是一般的卡片（跟著主題）
   「減少動態效果」：祭壇不動、抽的時候不放光柱、卡片直接翻開 */
.hall-page { display: grid; gap: 12px; }

/* ───────── 召喚祭壇 ───────── */
.hl-altar { padding: 0; overflow: hidden; display: grid; gap: 0; }
.hl-stage { position: relative; height: 210px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(ellipse 60% 70% at 50% 92%, rgba(186, 104, 255, 0.45), transparent 70%), linear-gradient(#0c0820 0%, #1e1240 55%, #2c1850 78%, #120a24 100%); }
.hl-sky { position: absolute; inset: 0;
  background: radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 8%, #d8d0ff, transparent 60%), radial-gradient(1.5px 1.5px at 44% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 63% 12%, #fff6c8, transparent 60%), radial-gradient(1px 1px at 78% 26%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 88% 9%, #e8e0ff, transparent 60%),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent 60%), radial-gradient(1px 1px at 94% 44%, #fff, transparent 60%), radial-gradient(1px 1px at 36% 36%, #cfc8ff, transparent 60%);
  animation: hl-twinkle 4s ease-in-out infinite alternate; }
.hl-moon { position: absolute; right: 9%; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe6, #f0e2a8 60%, #c8b070);
  box-shadow: 0 0 18px rgba(255, 240, 180, 0.7); }
.hl-moon::after { content: ''; position: absolute; left: 7px; top: -2px; width: 22px; height: 22px; border-radius: 50%; background: #170f34; }
.hl-roof { position: absolute; left: 8%; right: 8%; top: 22px; height: 26px; background: linear-gradient(#e8dcc0, #b8a27a 70%, #8a7452);
  clip-path: polygon(50% 0, 100% 78%, 100% 100%, 0 100%, 0 78%); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25); }
.hl-col { position: absolute; top: 48px; bottom: 34px; width: 26px; background: linear-gradient(90deg, #8a7a62, #f2e8d2 35%, #fffaf0 50%, #d8ccb0 68%, #7a6a52);
  box-shadow: 0 0 0 2px rgba(20, 10, 30, 0.35); }
.hl-col::before, .hl-col::after { content: ''; position: absolute; left: -5px; right: -5px; height: 8px; background: linear-gradient(#f6eedc, #b8a682); border-radius: 2px; }
.hl-col::before { top: 0; }
.hl-col::after { bottom: 0; }
.hl-col.l { left: 12%; }
.hl-col.r { right: 12%; }
.hl-circle { position: absolute; left: 50%; bottom: -66px; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%;
  border: 2px solid rgba(214, 160, 255, 0.85); box-shadow: 0 0 18px rgba(186, 104, 255, 0.8), inset 0 0 14px rgba(186, 104, 255, 0.6);
  background: radial-gradient(circle, transparent 0 52%, rgba(230, 200, 255, 0.55) 53% 54%, transparent 55% 64%, rgba(230, 200, 255, 0.4) 65% 66%, transparent 67%),
    repeating-conic-gradient(from 0deg, rgba(230, 200, 255, 0.35) 0 4deg, transparent 4deg 22deg);
  transform: perspective(500px) rotateX(76deg); animation: hl-spin 18s linear infinite; }
.hl-base { position: absolute; left: 50%; bottom: 26px; width: 92px; height: 30px; margin-left: -46px; background: linear-gradient(#efe4ca, #b49e78 60%, #7a6448);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.hl-crystal { position: absolute; left: 50%; bottom: 66px; width: 54px; height: 54px; margin-left: -27px; display: grid; place-items: center; animation: hl-bob 3.2s ease-in-out infinite; }
.hl-crystal i { position: absolute; inset: 6px; transform: rotate(45deg); border-radius: 6px;
  background: linear-gradient(135deg, #ffffff 0%, #e8c8ff 18%, #a050ff 52%, #4a1690 100%); box-shadow: 0 0 22px rgba(196, 120, 255, 0.95), 0 0 46px rgba(150, 80, 255, 0.6); }
.hl-crystal b { position: relative; display: grid; place-items: center; }
.hl-motes { position: absolute; inset: 0; pointer-events: none; }
.hl-motes i { position: absolute; left: var(--x); bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #f0d8ff; box-shadow: 0 0 6px #c890ff;
  animation: hl-mote var(--t, 6s) linear infinite; animation-delay: var(--d, 0s); opacity: 0; }
.hl-sign { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); padding: 1px 10px; font: 900 13px/1.6 var(--serif); letter-spacing: 3px; color: #3a1c04;
  background: linear-gradient(#fff2b8, #e0a83a); border-radius: 3px; box-shadow: 0 0 0 1px #5a3408, 0 0 10px rgba(255, 200, 90, 0.5); white-space: nowrap; }
@keyframes hl-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes hl-spin { from { transform: perspective(500px) rotateX(76deg) rotate(0deg); } to { transform: perspective(500px) rotateX(76deg) rotate(360deg); } }
@keyframes hl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hl-mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-200px); opacity: 0; } }

.hl-wallet { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px 4px; }
.hl-tk { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 12px; background: linear-gradient(#2a1450, #160a2e); color: #f3e8ff;
  border: 1px solid #6a3ab0; box-shadow: 0 0 12px rgba(150, 80, 255, 0.35); }
.hl-tk small { display: block; font-size: 11px; color: #d8c0ff; font-weight: 700; }
.hl-tk-n { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hl-pt { display: grid; gap: 3px; min-width: 0; }
.hl-pt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hl-pt-head small { font-weight: 800; color: var(--muted); }
.hl-pt-head b { font-variant-numeric: tabular-nums; }
.hl-pt-bar { height: 12px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); overflow: hidden; }
.hl-pt-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7a3ad0, #c890ff, #ffd86a); transition: width 0.4s; }
.hl-pt.full .hl-pt-bar span { background: linear-gradient(90deg, #ff6a8a, #ffd24a, #7affb0, #6ad8ff, #c08aff); }
.hl-pt-note { color: var(--muted); }
.hl-pt.full .hl-pt-note { color: var(--gold-ink); font-weight: 800; }
.hl-login, .hl-hint { margin: 6px 14px 0; }
.hl-login { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hl-btns { padding: 10px 14px 0; }
.hl-draw.one { background: linear-gradient(#5a2a9a, #3a1468); border-color: #2a0a50; color: #fff; }
.hl-draw.ten { background: linear-gradient(#ffcf5a, #e08a1a); border-color: #8a4a04; color: #2a1404; }
.hl-draw .wb-sub { display: inline-flex; align-items: center; gap: 2px; }
.hl-btns2 { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 4px; }
.hl-btns2 .btn { flex: 1 1 200px; justify-content: center; }
.hl-buy small { font-weight: 600; opacity: 0.8; margin-left: 2px; }
.hl-pick.btn-primary { background: linear-gradient(115deg, #ff7a9a, #ffd24a 35%, #7affb0 60%, #6ad8ff 80%, #c08aff); color: #1a0a20; border-color: #fff; box-shadow: 0 0 12px rgba(255, 220, 140, 0.6); }
.hl-n { padding: 4px 14px 12px; }

/* ───────── 怎麼拿券、機率 ───────── */
.hl-two { display: grid; gap: 12px; }
@media (min-width: 900px) { .hl-two { grid-template-columns: 1fr 1fr; align-items: start; } }
.hl-src-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.hl-src-list li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: start; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.hl-src-ico { font-size: 18px; line-height: 1.4; text-align: center; }
.hl-src-list .link { white-space: nowrap; margin-left: 6px; }
.hl-odds-t { width: 100%; }
.hl-odds-t td { vertical-align: top; }
.hl-odds-note { display: block; color: var(--muted); font-weight: 400; }
.hl-odds-p { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-odds-t tr.r-rainbow .hl-odds-name { background: linear-gradient(90deg, #d0305a, #c88a00, #1a9a5a, #1a7ad0, #8a3ad0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-odds-t tr.r-purple b { color: #8a3ad0; }
.hl-odds-t tr.r-gold b { color: var(--gold-ink); }
:root[data-theme="night"] .hl-odds-t tr.r-rainbow .hl-odds-name { background: linear-gradient(90deg, #ff7a9a, #ffd24a, #7affb0, #6ad8ff, #c890ff); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="night"] .hl-odds-t tr.r-purple b { color: #c890ff; }
.hl-rules { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; color: var(--text-2); }

/* ───────── 英雄圖鑑 ───────── */
.hl-segs { display: grid; gap: 6px; margin: 4px 0 10px; }
.hl-codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
@media (max-width: 420px) { .hl-codex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
.hl-cx { position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; padding: 22px 4px 6px; border-radius: 10px; cursor: pointer; font: inherit; color: #f6eee2; min-width: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 42%, rgba(var(--h6-rgb), 0.38), transparent 72%), linear-gradient(#2a2036, #17121f);
  border: 2px solid rgba(var(--h6-rgb), 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); transition: transform 0.15s; }
.hl-cx:hover { transform: translateY(-2px); }
.hl-cx:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.hl-cx.own { border-color: #e8b54a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px rgba(var(--h6-rgb), 0.45); }
.hl-cx.own.t-crimson { border-color: #ff4a2a; box-shadow: inset 0 0 0 1px #000, 0 0 12px rgba(255, 50, 30, 0.6); }
.hl-cx.own.t-rainbow { border-color: transparent; background: radial-gradient(ellipse 80% 55% at 50% 42%, rgba(var(--h6-rgb), 0.45), transparent 72%) padding-box, linear-gradient(#2a2036, #17121f) padding-box,
  linear-gradient(115deg, #ff4d6a, #ffeb4a, #5cff8a, #4ad8ff, #d05cff) border-box; }
.hl-cx.dark { background: linear-gradient(#24202a, #141118); border-color: #3a3440; color: #a89eb4; }
.hl-cx.dark .hl-cx-pic { filter: brightness(0.18) grayscale(1) contrast(1.4); }
.hl-cx.dark .hl-cx-badges { opacity: 0.55; }
.hl-cx-pic { height: 74px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hl-cx-badges { position: absolute; left: 4px; top: 4px; display: flex; gap: 2px; }
.hl-cx-stars { display: flex; justify-content: center; min-height: 14px; margin: 1px 0 1px; max-width: 100%; }
.hl-cx-lock { position: absolute; right: 6px; top: 4px; font-size: 13px; opacity: 0.7; }
.hl-cx-tl { font-size: 10.5px; font-weight: 700; color: #ffd98a; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cx.dark .hl-cx-tl { color: #8a7e96; }
.hl-cx-nm { font-size: 14px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cx-sub { font-size: 10.5px; opacity: 0.85; }
.hl-cx-cards { position: absolute; right: 4px; top: 4px; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; line-height: 1.6; }
.hl-cx.dark .hl-cx-cards { top: 24px; }

/* 一位英雄的詳細 */
.hl-info { display: grid; gap: 8px; }
.hl-info-stage { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 8px 8px; border-radius: 12px;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(var(--h6-rgb), 0.5), transparent 72%), var(--hc-bg, linear-gradient(#2a2036, #17121f)); }
.hl-info-stage.dark .hl-info-pic { filter: brightness(0.25) grayscale(0.8); }
.hl-info-pic { min-height: 120px; display: flex; align-items: flex-end; }
.hl-info-none { font-size: 12px; font-weight: 800; color: #f6eee2; padding: 1px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); }
.hl-info-stars { padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); }
.hl-info-desc { font-size: 14px; }
.hl-info-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hl-info-skill { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.hl-info-skill p { margin: 2px 0 0; }
.hl-info-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.hl-info-mine { margin: 0; color: var(--muted); }
.hl-pick { display: grid; gap: 10px; }

/* 英魂換卡 */
.hl-soul-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.hl-soul-sel { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 8px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--field); color: var(--text); font: inherit; }

/* ───────── 抽的演出：光柱打到祭壇、卡片飛出來、一張一張翻開 ───────── */
.hl-fx { position: fixed; inset: 0; z-index: 9970; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; overflow: hidden; color: #fff;
  padding: max(16px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom)); --rc: 120, 190, 255; }
.hl-fx.r-gold { --rc: 255, 210, 74; }
.hl-fx.r-purple { --rc: 186, 104, 255; }
.hl-fx.r-crimson { --rc: 255, 50, 30; }
.hl-fx.r-rainbow { --rc: 255, 240, 255; }
.hl-fx.out { animation: hl-out 0.24s ease-in both; }
.hl-fx-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(var(--rc), 0.22), transparent 62%), rgba(8, 5, 18, 0.95); }
.hl-fx.r-crimson .hl-fx-bg { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 40, 20, 0.3), transparent 62%), rgba(14, 0, 2, 0.96); }
.hl-fx.in .hl-fx-bg { opacity: 1; }
.hl-fx-pillar { position: absolute; left: 50%; top: 0; width: 170px; margin-left: -85px; height: 60%; transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--rc), 0.5) 28%, #ffffff 50%, rgba(var(--rc), 0.5) 72%, transparent); filter: blur(3px); mix-blend-mode: screen; }
.hl-fx-pillar i { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; background: linear-gradient(90deg, transparent, #fff, transparent); filter: blur(2px); }
.hl-fx-pillar i + i { width: 300px; margin-left: -150px; opacity: 0.25; background: linear-gradient(90deg, transparent, rgba(var(--rc), 0.9), transparent); }
.hl-fx.r-rainbow .hl-fx-pillar { background: linear-gradient(90deg, transparent, rgba(255, 90, 120, 0.6) 18%, rgba(255, 230, 90, 0.7) 34%, #fff 50%, rgba(90, 220, 255, 0.7) 66%, rgba(200, 110, 255, 0.6) 82%, transparent); }
.hl-fx.r-crimson .hl-fx-pillar { background: linear-gradient(90deg, transparent, rgba(40, 0, 0, 0.85) 22%, rgba(255, 50, 30, 0.9) 42%, #ffd0a0 50%, rgba(255, 50, 30, 0.9) 58%, rgba(40, 0, 0, 0.85) 78%, transparent); mix-blend-mode: normal; }
.hl-fx.in .hl-fx-pillar { animation: hl-pillar 1.5s ease-out forwards; }
.hl-fx-ring { position: absolute; left: 50%; top: 58%; width: 300px; height: 72px; margin: -36px 0 0 -150px; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 3px solid rgba(var(--rc), 0.9); box-shadow: 0 0 30px rgba(var(--rc), 0.85), inset 0 0 22px rgba(var(--rc), 0.6); }
.hl-fx.in .hl-fx-ring { animation: hl-ring 1.4s ease-out 0.5s forwards; }
@keyframes hl-pillar { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0.3; } }
@keyframes hl-ring { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0.35; transform: scale(1.15); } }
@keyframes hl-out { to { opacity: 0; } }

.hl-fx-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(600px, 96vw); align-self: center; }
.hl-fx.one .hl-fx-cards { grid-template-columns: minmax(0, 1fr); width: 176px; }
@media (max-width: 520px) { .hl-fx.ten .hl-fx-cards { gap: 5px; } }
.hl-card { perspective: 700px; aspect-ratio: 3 / 4.3; opacity: 0; transform: translateY(-38vh) scale(0.25); transition: transform 0.5s cubic-bezier(0.2, 1.25, 0.4, 1), opacity 0.25s; --cc: 120, 190, 255; }
.hl-card.r-gold { --cc: 255, 210, 74; }
.hl-card.r-purple { --cc: 186, 104, 255; }
.hl-card.r-crimson { --cc: 255, 50, 30; }
.hl-card.r-rainbow { --cc: 255, 255, 255; }
.hl-card.in { opacity: 1; transform: none; }
.hl-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s ease; }
.hl-card.open .hl-card-in { transform: rotateY(180deg); }
.hl-card-back, .hl-card-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 9px; overflow: hidden; }
.hl-card-back { display: grid; place-items: center; border: 2px solid rgba(var(--cc), 0.75);
  background: radial-gradient(circle at 50% 50%, rgba(var(--cc), 0.35), transparent 60%), repeating-linear-gradient(45deg, #2a1450 0 6px, #1e0e3c 6px 12px);
  box-shadow: 0 0 12px rgba(var(--cc), 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.35); }
.hl-card.r-blue .hl-card-back { border-color: rgba(200, 180, 255, 0.5); box-shadow: 0 0 6px rgba(160, 140, 255, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.35); }
.hl-card.r-rainbow .hl-card-back { border-color: transparent; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 60%) padding-box,
  repeating-linear-gradient(45deg, #2a1450 0 6px, #1e0e3c 6px 12px) padding-box, linear-gradient(115deg, #ff4d6a, #ffeb4a, #5cff8a, #4ad8ff, #d05cff) border-box; }
.hl-card-eye { display: grid; place-items: center; filter: drop-shadow(0 0 6px rgba(var(--cc), 0.9)); }
.hl-card.tease .hl-card-back { animation: hl-tease 0.18s ease-in-out infinite alternate; box-shadow: 0 0 22px rgba(var(--cc), 1), 0 0 44px rgba(var(--cc), 0.7); }
@keyframes hl-tease { from { transform: translateX(-2px) rotate(-1.5deg); } to { transform: translateX(2px) rotate(1.5deg); } }
.hl-card-front { transform: rotateY(180deg); display: grid; justify-items: center; align-content: center; gap: 1px; padding: 6px 3px; text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(var(--cc), 0.42), transparent 72%), linear-gradient(#2a2036, #120e1a);
  border: 2px solid rgba(var(--cc), 0.9); box-shadow: 0 0 14px rgba(var(--cc), 0.7); }
.hl-card.r-blue .hl-card-front { background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(120, 190, 255, 0.3), transparent 72%), linear-gradient(#1a2236, #0e121e); }
.hl-card.r-crimson .hl-card-front { background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 50, 30, 0.45), transparent 72%), linear-gradient(#2a0608, #0a0002); }
.hl-card.r-rainbow .hl-card-front { border-color: transparent; background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, 0.35), transparent 72%) padding-box,
  linear-gradient(#2a2036, #120e1a) padding-box, linear-gradient(115deg, #ff4d6a, #ffeb4a, #5cff8a, #4ad8ff, #d05cff) border-box; box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); }
.hl-card.open.r-rainbow .hl-card-front, .hl-card.open.r-crimson .hl-card-front { animation: hl-glow 1.6s ease-in-out 0.5s infinite alternate; }
@keyframes hl-glow { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.hl-cf-tag { font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 3px; background: rgba(var(--cc), 0.9); color: #140a1e; white-space: nowrap; max-width: 100%; overflow: hidden; }
.hl-card.r-blue .hl-cf-tag { background: #8ac4ff; }
.hl-card.r-rainbow .hl-cf-tag { background: linear-gradient(90deg, #ff9ab0, #ffe38a, #9affc0, #9ae4ff, #d8a8ff); }
.hl-cf-pic { min-height: 46%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; max-width: 100%; }
.hl-cf-pic .soul-ico { transform: scale(2); margin: 14px 0 10px; }
.hl-cf-tl { font-size: 9.5px; font-weight: 700; color: #ffd98a; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cf-nm { font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-cf-note { font-size: 9.5px; opacity: 0.85; line-height: 1.25; }
.hl-fx.one .hl-cf-tag { font-size: 12px; }
.hl-fx.one .hl-cf-nm { font-size: 18px; }
.hl-fx.one .hl-cf-tl { font-size: 12px; }
.hl-fx.one .hl-cf-note { font-size: 12px; }
.hl-fx.one .hl-cf-pic svg { transform: scale(1.4); transform-origin: bottom center; }
@media (max-width: 520px) {
  .hl-fx.ten .hl-cf-tl, .hl-fx.ten .hl-cf-note { display: none; }
  .hl-fx.ten .hl-cf-nm { font-size: 11px; }
  .hl-fx.ten .hl-cf-tag { font-size: 9px; padding: 0 3px; }
  .hl-fx.ten .hl-cf-pic svg { max-width: 100%; height: auto; }
}
.hl-fx-sum { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; padding-top: 12px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.hl-fx.done .hl-fx-sum { opacity: 1; transform: none; pointer-events: auto; }
.hl-fx-sumt { margin: 0; text-align: center; font-size: 14px; display: grid; gap: 4px; max-width: 92vw; text-shadow: 0 1px 2px #000; }
.hl-sum-hero { font-size: 16px; color: #ffe08a; }
.hl-fx-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hl-fx-foot .btn { min-width: 120px; justify-content: center; }
.hl-fx-skip { position: absolute; z-index: 3; right: 12px; top: max(12px, env(safe-area-inset-top)); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.45); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .hl-sky, .hl-circle, .hl-crystal, .hl-motes i, .hl-card.tease .hl-card-back, .hl-card.open .hl-card-front { animation: none !important; }
  .hl-motes { display: none; }
  .hl-card, .hl-card-in, .hl-fx-sum, .hl-fx-bg { transition: none !important; }
}