/* [claude code] 2026-10-19 v0.6 英靈收集的版面:名冊 / 詳情 / 編成 / 英靈塔 / 召喚演出 / 機率公示 / 召喚紀錄 / 背包。
   顏色一律用 theme.css 的變數;稀有度用框的顏色 + 角落的「★N」字(不只靠顏色)。 */
.col { display: flex; flex-direction: column; gap: 8px; }
.bar-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-row > button { flex: 1; min-width: 0; }
.note.warn { color: var(--danger); }
.note.empty { padding: 16px 0; text-align: center; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 12px; text-align: center; font-size: 13px; color: var(--mute); }
html[data-ui-skin] button.back { align-self: flex-start; padding: 8px; }
.up { color: var(--up); }
.power { font-size: 15px; color: var(--gold-ink); }
h3.sub { margin: 4px 0 0; font-size: 15px; }

/* 篩選 / 頁籤 */
.chips { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
html[data-ui-skin] .chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 12px; border-radius: 999px; background: var(--surface); }
html[data-ui-skin] .chip[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.seg.tabs { flex-wrap: nowrap; }
html[data-ui-skin] .seg.tabs button { flex: 1; min-width: 0; }
html[data-ui-skin] .seg.tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }

/* 陣營 / 稀有度 / 星級 */
.fac-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--mute); }
.fac-qinglong { background: var(--fac-qinglong); }
.fac-baihu { background: var(--fac-baihu); }
.fac-zhuque { background: var(--fac-zhuque); }
.fac-xuanwu { background: var(--fac-xuanwu); }
.fac-xian { background: var(--fac-xian); }
.fac-mo { background: var(--fac-mo); }
.tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 11px; white-space: nowrap; }
.rar { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--rar-3); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 18px; }
.rar.r4 { background: var(--rar-4); }
.rar.r5 { background: var(--rar-5); color: var(--gold-ink); }
.pips { font-size: 11px; letter-spacing: 1px; color: var(--gold-ink); }

/* 英靈卡 */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
html[data-ui-skin] .sp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 4px 4px 8px; border: 2px solid var(--rar-3); border-radius: 14px; background: var(--surface); text-align: center; }
html[data-ui-skin] .sp-card.r4 { border-color: var(--rar-4); }
html[data-ui-skin] .sp-card.r5 { border-color: var(--rar-5); }
html[data-ui-skin] .sp-card.picked { box-shadow: 0 0 0 3px var(--accent); }
.sp-card .rar { position: absolute; top: 4px; left: 4px; }
.sp-art { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.sp-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.3; }
.sp-grid.small .sp-card b { font-size: 11px; }
.sp-card small { font-size: 11px; color: var(--mute); }
.sp-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mute); }
.sp-badge { position: absolute; top: 4px; right: 4px; padding: 0 6px; border-radius: 999px; background: var(--up); color: var(--ink); font-size: 11px; line-height: 18px; }
.row-art { width: 44px; height: 44px; object-fit: contain; flex: none; }
.row .count { font-size: 15px; white-space: nowrap; }
.row > div > small { display: block; }
.log-row { padding: 8px 12px; }
.row.picked { border-color: var(--accent); }

/* 詳情 */
.sp-head { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 2px solid var(--rar-3); border-radius: 14px; background: var(--surface-2); }
.sp-head.r4 { border-color: var(--rar-4); }
.sp-head.r5 { border-color: var(--rar-5); }
.sp-big { width: min(56vw, 240px); aspect-ratio: 1; object-fit: contain; }
html[data-ui-skin] .sp-head .arrow { min-width: 44px; padding: 0; font-size: 28px; }
.sp-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-title { font-size: 15px; color: var(--gold-ink); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px; background: var(--surface-2); }
.stat small { font-size: 11px; color: var(--mute); }
.stat b { font-size: 15px; }
.feed { display: flex; flex-direction: column; gap: 4px; }
.skill { display: flex; align-items: flex-start; gap: 8px; }
.skill > div { flex: 1; min-width: 0; }
.skill b { font-size: 13px; }
.diffs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.diff { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; }
.diff small { font-size: 11px; color: var(--mute); }
.eq-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html[data-ui-skin] .eq-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px; background: var(--surface-2); text-align: left; }
html[data-ui-skin] .eq-slot.picked { border-color: var(--accent); }
.eq-slot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.eq-slot small { font-size: 11px; color: var(--mute); }
.eq-pick { display: flex; flex-direction: column; gap: 4px; }
.bond { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px dashed var(--border); }
.members { display: flex; flex-wrap: wrap; gap: 4px; }
.member { padding: 0 8px; border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.member.missing { opacity: .55; }
.quote { font-size: 15px; color: var(--accent-deep); }

/* 編成 */
.tm-field { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: var(--surface-2); }
.tm-row { display: grid; grid-template-columns: minmax(0, 40px) repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px; }
.tm-label { font-size: 13px; color: var(--mute); text-align: center; }
.tm-row.target .tm-label { color: var(--accent); font-weight: 700; }
html[data-ui-skin] .tm-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 76px; padding: 4px; border: 2px dashed var(--border); border-radius: 14px; background: var(--surface); }
html[data-ui-skin] .tm-slot.filled { border-style: solid; border-color: var(--accent); }
html[data-ui-skin] .tm-slot[aria-pressed="true"] { border-color: var(--accent); }
.tm-slot span { font-size: 20px; color: var(--mute); }
.tm-art { width: 48px; height: 48px; object-fit: contain; }
.tm-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.tm-bonus p { font-size: 13px; }
.tm-bonus p.note { font-size: 11px; }
.tm-bonus p.on { color: var(--accent-deep); }

/* 英靈塔 */
.feat { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.feat-card { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 88px; padding: 4px; border: 2px solid var(--rar-5); border-radius: 14px; background: var(--surface); scroll-snap-align: start; }
.feat-card small { font-size: 11px; }
.gacha-pity { font-size: 15px; font-weight: 700; color: var(--gold-ink); }
.bar.gold i { background: var(--gold); }
.gacha-buy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-ui-skin] .gacha-buy button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; }
.gacha-buy b { font-size: 15px; }
.gacha-buy small { font-size: 11px; }
.first-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* 召喚演出(蓋在面板上;返回鍵先關它) */
.reveal { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; overflow-y: auto; background: var(--reveal-bg); color: var(--ink); }
.reveal[hidden] { display: none; }
.summon-fx { display: flex; flex-direction: column; align-items: center; width: 100%; height: 60%; }
.beam { flex: 1; width: 96px; border-radius: 999px; background: linear-gradient(to top, var(--beam-3), transparent); transform-origin: bottom; animation: beam .9s ease-out both; }
.circle-tilt { width: 220px; height: 220px; margin-top: -110px; transform: scaleY(.35); }
.circle { width: 100%; height: 100%; border: 3px dashed var(--beam-3); border-radius: 999px; animation: spin 2.4s linear infinite; }
.reveal.r4 .circle { border-color: var(--beam-4); }
.reveal.r5 .circle { border-color: var(--beam-5); }
html[data-ui-skin] .reveal button.flat { border-color: var(--hud-line); background: var(--hud-soft); color: var(--ink); }
.reveal.r4 .beam { background: linear-gradient(to top, var(--beam-4), transparent); }
.reveal.r5 .beam { background: linear-gradient(to top, var(--beam-5), transparent); }
.reveal-hint { font-size: 15px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.rv-grid.n1 { grid-template-columns: minmax(0, 160px); justify-content: center; }
.rv-grid.n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; aspect-ratio: 3 / 4; padding: 4px; border: 2px solid var(--rar-3); border-radius: 14px; background: var(--surface); color: var(--text); text-align: center; animation: rv-flip .35s ease-out both; }
.rv-card.r4 { border-color: var(--rar-4); }
.rv-card.r5 { border-color: var(--rar-5); box-shadow: 0 0 12px var(--beam-5); }
html[data-ui-skin] .rv-card.back { min-height: 0; border-color: var(--gold); background: var(--card-back); animation: none; }
.rv-card .rar { position: absolute; top: 4px; left: 4px; }
.rv-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rv-grid.n10 .rv-card b { font-size: 11px; }
.rv-card small { font-size: 11px; color: var(--mute); }
.rv-card small.new { color: var(--up); font-weight: 700; }
.rv-card small.pity, .log-row small.pity { color: var(--gold-ink); }
.log-row small.new { color: var(--up); }
.rv-quote { min-height: 24px; font-size: 15px; text-align: center; }
.reveal .btn-row { width: 100%; }
@keyframes beam { from { transform: scaleY(.1); opacity: 0; } 60% { opacity: 1; } to { transform: scaleY(1); opacity: .9; } }
@keyframes rv-flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beam, .rv-card, .circle { animation: none; } }

/* 機率公示 */
table.rates { width: 100%; border-collapse: collapse; font-size: 13px; }
.rates th, .rates td { padding: 8px; border-bottom: 1px solid var(--border); text-align: center; }
ul.rules { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; font-size: 13px; }
.rates-names { font-size: 13px; }

/* [claude code] 2026-10-19 v0.8 召喚師 / 門派 / 雜貨商:符一列 · 天劫框 · 門派路線 */
.tal-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--border); }
.tal-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tal-row b { font-size: 13px; }
.tal-row small { font-size: 11px; color: var(--mute); }
.tal-row small.ok { color: var(--accent); }
.tal-row small.lock { color: var(--mute); }
.box.trib { border-color: var(--gold); }
.sect-route { font-size: 15px; color: var(--accent-deep); }