/* 配队公共组件样式（唯一来源）
   从 team-custom.css 抽出，供以下页面共用，保证配队的字段与样式全站一致：
     · gallery/team-builder.html（配队工具工具，原样使用）
     · gallery/teams.html（全队攻略列表）
     · gallery/team-detail.html（配队详情）
     · gallery/character-detail.html（角色详情的推荐配队）
   改动这里的规则会影响以上所有页面；页面级布局样式请放各自页面自己的 CSS。 */

/* ---------- 面板 ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding: 20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap: 12px;margin-bottom: 16px}
.panel-head h2{font-size:18px;font-weight:800;display:flex;align-items:center;gap: 8px}
.panel-head h2 small{font-size:12px;color:var(--text-dim);font-weight:500}

/* ---------- 配队预览卡（截图目标也是这一块） ----------
   2026-09-23：原先把深色渐变写死在 .team-card 上，导致列表页与角色详情页
   整屏都是深色块。当时改为「变量引用 + 浅色回退」，并把深皮肤 --tc-* 收窄到
   #shot-node 与 .preview-panel .team-card 两个容器，让分享图保持深色。

   2026-09-24：站点统一浅色后，这两个容器的深皮肤成了仅存的深色残留
   （配队预览 + 分享图都是深色），现把 --tc-* 定义整块删除。
   下面每条规则本来就写了浅色回退，变量未定义时自然落到回退：
     · 卡片底 → var(--card) 白、描边 → var(--line)、圆角 → var(--radius)
     · chip / tag / slot / 缩略图回退都是浅色调（rgba 蓝粉 8~10% 透明度）
     · 推荐指数标签落到 --warm-ink 暖色
   链式回退顺序不变：先找 --tc-*（现已无人定义），再找设计系统 token，最后兜底值，
   所以 design-system 被 Revert 时依然不会破版。 */

.team-card{width:100%;background:var(--tc-bg, var(--card));border:1px solid var(--tc-border, var(--line));border-radius:var(--tc-radius, var(--radius));padding: 24px;color:var(--txt);box-shadow:var(--tc-shadow, var(--sh-1, 0 1px 3px rgba(24,34,56,.08)))}
.team-card-head{display:flex;flex-direction:column;align-items:flex-start;gap: 8px}
.team-card-head h2{font-size:26px;font-weight:800;line-height:1.25}
.team-card-tags{display:flex;flex-wrap:wrap;gap: 8px}
.team-card-tags .tag{display:inline-block;padding: 3px 8px;border-radius:999px;font-size:12px;background:var(--tc-chip-bg, rgba(77,141,255,.08));color:var(--brand-ink);border:1px solid var(--tc-chip-line, rgba(77,141,255,.26));white-space:nowrap}
/* 推荐指数：标签行第一枚，暖色重一档，跟梯队/难度/环合那些蓝标签区分开 */
.team-card-tags .tag.tag-score{display:inline-flex;align-items:center;gap: 4px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--tc-score-bg, rgba(255,107,157,.10));color:var(--tc-score-ink, var(--warm-ink));border-color:var(--tc-score-line, rgba(190,24,93,.28))}
.team-card-tags .tag.tag-score i{font-style:normal;font-size:11px;line-height:1}
.team-card-meta{display:flex;flex-wrap:wrap;gap: 8px;margin-top: 12px}
.meta-chip{display:inline-flex;align-items:center;gap: 8px;padding: 4px 8px;border-radius:999px;background:var(--tc-tag-bg, rgba(255,107,157,.10));border:1px solid var(--tc-tag-line, rgba(190,24,93,.22));font-size:12px;color:var(--text-dim)}
.team-slots{display:grid;grid-template-columns:repeat(4,1fr);gap: 12px;margin: 20px 0}
.slot{position:relative;min-width:0;min-height:168px;background:var(--tc-slot-bg, rgba(30,41,59,.035));border:1px solid var(--line);border-radius:14px;transition:.18s}
.slot.active{border-color:var(--brand-ink);box-shadow:0 0 0 2px var(--tc-ring, rgba(77,141,255,.18))}
.slot-main{width:100%;height:100%;min-height:168px;background:none;border:0;color:var(--txt);cursor:pointer;padding: 12px;display:flex;flex-direction:column;align-items:center;gap: 8px;text-align:center;font-family:inherit}
.slot-main img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--tc-thumb-bg, transparent);flex-shrink:0}
.slot-name{font-size:15px;font-weight:800}
.slot-role{display:inline-block;padding: 2px 8px;border-radius:999px;font-size:11px;background:var(--tc-chip-bg, rgba(77,141,255,.08));color:var(--brand-ink);border:1px solid var(--tc-chip-line, rgba(77,141,255,.22))}
.slot-gear{display:flex;flex-direction:column;gap: 4px;margin-top: 8px;width:100%}
.slot-gear span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--text-dim);background:var(--tc-tag-bg, rgba(255,107,157,.08));border:1px solid var(--tc-tag-line, rgba(190,24,93,.20));border-radius:7px;padding: 3px 8px}
.slot-empty{color:var(--text-dim);font-size:13px;line-height:1.45;padding: 32px 8px}
.slot-empty b{display:block;font-size:22px;margin-bottom: 4px}
.slot-remove{position:absolute;top:7px;right:7px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(240,106,138,.18);color:#ff8aa8;font-size:16px;line-height:20px;cursor:pointer;padding: 0}
.slot-remove:hover{background:rgba(240,106,138,.34)}
.team-card-foot{margin-top: 2px;padding-top: 16px;border-top:1px dashed rgba(154,163,199,.35);text-align:center;font-size:12px;color:var(--text-dim)}

/* ---------- 选项 chip ---------- */
.chips{display:flex;flex-wrap:wrap;gap: var(--sp-2)}
.chip{padding: var(--sp-1) var(--sp-3);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-raised);color:var(--ink-muted);cursor:pointer;font-size:var(--fs-12);font-family:inherit;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--brand-ink)}
/* 选中：描边式，不填充（2026-09-23） */
.chip.on{background:var(--surface-raised);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand-ink);font-weight:700}
.stat-label{font-size:11px;color:var(--accent-2);font-weight:700;margin: 8px 0 4px}

/* ---------- 技能培养顺序 ---------- */
.skill-order-list{display:flex;flex-wrap:wrap;gap: 8px;margin-top: 8px;min-height:28px}
.skill-order-list .order-item{display:inline-flex;align-items:center;gap: var(--sp-1);padding: var(--sp-1) var(--sp-2);border-radius:var(--r-full);background:var(--brand-soft);border:1px solid rgba(77,141,255,.28);font-size:var(--fs-11);color:var(--brand-ink)}
.skill-order-list .order-item .order-num{display:inline-flex;min-width:16px;height:16px;align-items:center;justify-content:center;border-radius:var(--r-circle);background:var(--brand);color:var(--on-brand);font-weight:800;font-size:var(--fs-11)}
/* 可悬浮查看详情的标记：圆圈感叹号（技能顺序 / 觉醒 / 弧盘 / 空幕卡带 / 驱动块） */
.tip-ico{display:inline-flex;width:13px;height:13px;margin-left: 4px;align-items:center;justify-content:center;border-radius:50%;border:1px solid currentColor;font-size:9px;font-style:normal;font-weight:700;line-height:1;opacity:.75;vertical-align:1px}
.order-item:hover .tip-ico,.chip:hover .tip-ico{opacity:1}
.tip-wrap .tip-ico{flex:0 0 auto}
.tip-wrap:hover .tip-ico{opacity:1}

/* ---------- 悬浮详情气泡（2026-09-26）----------
   原来这些说明走的是原生 title：不能换行、字号行高也改不了，用户反馈「挤在一起看不行」。
   现在统一成自定义气泡：正文 13px / 行高 1.8、块间留白，宽度自适应但不超过 340px。
   气泡 pointer-events:none —— 悬停气泡时点击仍落在外层链接上，图鉴跳转不受影响。 */
.tip-wrap{position:relative;display:inline-flex;align-items:center}
.tip-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:90;display:none;width:max-content;max-width:340px;padding: 12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 32px rgba(24,34,56,.18);font-size:13px;line-height:1.8;color:var(--txt);text-align:left;white-space:normal;pointer-events:none}
.tip-wrap:hover .tip-pop{display:block}
/* 悬停整块也出气泡（用户要求：悬浮对应块就显示），不止悬停那个小而圆的感叹号 */
.order-item:hover .tip-pop,
.pick-item:hover .tip-pop{display:block}
.tip-pop .tip-title{display:block;font-size:13.5px;font-weight:800;color:var(--brand-ink);margin-bottom:6px;letter-spacing:.2px}
.tip-pop .tip-line{display:block;color:var(--ink-muted)}
.tip-pop .tip-line + .tip-line{margin-top:2px}

/* 图鉴块（弧盘 / 卡带 / 驱动块）右上角挂感叹号，气泡向右对齐，避免超出网格被裁 */
.pick-grid .pick-item{position:relative}
.pick-item .tip-wrap{position:absolute;top:6px;right:6px;z-index:5}
.pick-item .tip-pop{left:auto;right:0;top:calc(100% + 6px)}

/* ---------- 图鉴选项块（弧盘 / 卡带 / 驱动块） ---------- */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap: 8px;max-height:320px;overflow:auto;padding-right: 2px}
.pick-grid .pick-item{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding: 8px;color:var(--txt);cursor:pointer;transition:.15s;font-family:inherit;text-align:center;min-width:0}
a.pick-item{text-decoration:none}
.pick-grid .pick-item:hover{border-color:var(--brand-ink)}
.pick-grid .pick-item.on{border-color:var(--brand);background:var(--brand-softer);box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand-ink)}
.pick-grid .pick-item img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--surface-sunken);border:1px solid var(--line-subtle);border-radius:var(--r-md);padding: var(--sp-1)}
.pick-grid .pick-item .pick-name{display:block;margin-top: 4px;font-size:11px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-grid .pick-item .pick-meta{display:block;margin-top: 2px;font-size:10px;color:var(--text-dim)}
.pick-placeholder{display:flex;width:100%;aspect-ratio:1;align-items:center;justify-content:center;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink-faint);font-size:var(--fs-20)}
.pick-grid .pick-empty{grid-column:1 / -1;padding: 16px;text-align:center;color:var(--text-dim);font-size:12px}

/* ---------- 折叠配置块（配队详情里同样的组件，静态展示时直接 open） ---------- */
.config-details{border:1px solid var(--line);border-radius:12px;padding: 8px 12px;margin-bottom: 12px;background:var(--bg)}
.config-details:last-child{margin-bottom: 0}
.config-details summary{display:flex;align-items:center;justify-content:space-between;gap: 12px;cursor:pointer;font-size:12px;font-weight:700;color:var(--txt);list-style:none}
.config-details summary::-webkit-details-marker{display:none}
.config-details summary::after{content:'+';color:var(--text-dim);font-size:14px}
.config-details[open] summary::after{content:'−'}
.config-summary{font-size:11px;font-weight:500;color:var(--text-dim);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.config-empty{display:inline-flex;padding: 8px;border-radius:8px;background:var(--bg);border:1px dashed var(--line);color:var(--text-dim);font-size:11px}

/* ---------- 元素 / 稀有度配色 ---------- */
.el-咒{color:#f06a8a}
.el-灵{color:#4fd8e8}
.el-光{color:#ffe28a}
.el-暗{color:#9a7ab8}
.el-魂{color:#5ad0a0}
.el-相{color:#5b45c2}
.rarity-S{color:var(--gold)}
.rarity-A{color:#9aa3c7}

@media (max-width:640px){
  .team-slots{grid-template-columns:repeat(2,1fr)}
  .slot-main img{width:78px;height:78px}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}