/* ============================================
 * flip-card.css · 3D 翻卡样式
 * ============================================ */

.flip-card {
  perspective: 800px;
  width: 100%;
  height: 240px;            /* 固定高度 */
  max-height: 240px;        /* 防止被内容撑高 */
  overflow: hidden;         /* 强制裁剪 */
  cursor: pointer;
  position: relative;
  transition: transform .25s, filter .25s;
}

.flip-card:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}

/* 联动高亮
 * 用户反馈: 多张联动卡一起出现时, 外 outline 边框导致视觉割裂。
 * 改方案: 去掉 outline + border-width 变化, 改用"非联动成员淡化"做对比,
 *         联动成员自身只做轻微 filter 提亮 + 正面边框微调色, 整体更柔和。
 */
.flip-card.is-chain-highlight {
  /* 联动时让卡轻微浮起感 - 用 filter 而不是 transform, 避免和 WAAPI 冲突 */
  filter: brightness(1.05) saturate(1.18);
  z-index: 5;
}
/* peer (非中心) 的卡片再稍亮一些 */
.flip-card.is-chain-hover {
  filter: brightness(1.08) saturate(1.25);
  z-index: 6;
}
/* 反向: 非联动卡做轻量化, 突出联动成员 */
.flip-card:not(.is-chain-highlight):not(.is-chain-hover):not(.is-hidden) {
  opacity: .42;
  filter: saturate(.4);
  transition: opacity .25s, filter .25s;
}
/* 联动总开关关闭时, 不再淡非联动卡 */
.card-grid.is-chain-disabled .flip-card:not(.is-chain-highlight):not(.is-chain-hover):not(.is-hidden) {
  opacity: 1;
  filter: none;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;                   /* 让两面在同一单元格叠加 */
  transition: transform .7s cubic-bezier(.4,.2,.2,1.4);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  grid-column: 1 / -1;
  grid-row: 1 / -1;               /* 两面都填满 inner */
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ── Front face: 极简图标 + 每卡自己 tier 色边框 (锚点之一) ── */
.flip-card-front {
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-elev) 100%);
  border: 2px solid var(--tier-color, var(--standard));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  padding: 16px 12px;
  gap: 12px;
}
/* 正面左上角产品标签 (全部产品模式下标识来源)
 * 形态: 胶囊药丸 + 产品色渐变 + 白色文字 + 头部小点 + 外发光阴影
 */
.flip-card-front .fc-product-tag {
  position: absolute;
  top: 9px; left: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  /* 产品色渐变 (亮 → 暗) */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--product-color, #64748b) 95%, white 5%),
    color-mix(in srgb, var(--product-color, #64748b) 75%, black 25%));
  color: #ffffff;
  /* 外发光 + 内部高光 */
  box-shadow:
    0 3px 10px color-mix(in srgb, var(--product-color, #64748b), transparent 60%),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .1);
  pointer-events: none;
  user-select: none;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  white-space: nowrap;
}
/* 头部小点 - 增强"芯片/品牌标"质感 */
.flip-card-front .fc-product-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 5px rgba(255, 255, 255, .7);
  flex-shrink: 0;
}
.flip-card-front::before {
  /* 顶部高光线条 */
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tier-color, var(--standard)), transparent);
  opacity: .6;
}
.flip-card-front .fc-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 16px var(--tier-color, var(--standard))90);
  transition: transform .3s;
  /* 让图标占满中间区域, 真正垂直居中 */
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  margin-top: auto;
}
.flip-card:hover .fc-icon { transform: scale(1.08); }
.flip-card-front .fc-meta {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  pointer-events: none;
  flex-shrink: 0;
  margin-top: auto;     /* 紧贴图标下方到底部 */
}
.flip-card-front .fc-tier-tag {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--tier-color, var(--standard));
  opacity: .75;
}
.flip-card-front .fc-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--tier-color, var(--standard));
  box-shadow: 0 0 6px var(--tier-color, var(--standard));
}

/* ── Back face: 套餐+家族+描述（用套餐色深渐变区分正面）── */
.flip-card-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,
      var(--tier-soft, rgba(59,130,246,0.35)),
      transparent 70%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--tier-color, var(--standard)) 14%, var(--panel-2)) 0%,
      color-mix(in srgb, var(--tier-color, var(--standard))  4%, var(--bg-elev)) 100%);
  border: 2px solid var(--tier-color, var(--standard));
  box-shadow:
    inset 0 0 40px color-mix(in srgb, var(--tier-color, var(--standard)) 12%, transparent),
    0 0 24px color-mix(in srgb, var(--tier-color, var(--standard)) 30%, transparent);
  padding: 10px 12px;
  display: flex; flex-direction: column;
  position: relative;
  gap: 6px;
}
/* 浏览器不支持 color-mix 时的兜底 */
@supports not (background: color-mix(in srgb, red, blue)) {
  .flip-card-back {
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, var(--tier-soft, rgba(59,130,246,0.35)), transparent 70%),
      linear-gradient(160deg, var(--panel-2) 0%, var(--bg-elev) 100%);
  }
}
.flip-card-back .fc-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-dim); font-size: 12px;
  background: transparent; transition: all .15s;
  user-select: none;
}
.flip-card-back .fc-close:hover {
  background: #1c2438; color: var(--text-bright);
}

.fc-back-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fc-back-icon {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: var(--tier-soft, var(--standard-soft));
  border: 1px solid var(--tier-color, var(--standard))40;
}
.fc-back-name {
  font-size: 13px; font-weight: 800; color: var(--text-bright);
  line-height: 1.25; flex: 1;
  word-break: break-word;
}

.fc-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  flex-shrink: 0;
}
.fc-tag {
  font-size: 9.5px; padding: 2px 6px; border-radius: 3px;
  font-weight: 600; letter-spacing: .5px;
}
.fc-tag.tier {
  background: var(--tier-soft, var(--standard-soft));
  color: var(--tier-color, var(--standard));
  border: 1px solid var(--tier-color, var(--standard))50;
}
.fc-tag.product {
  background: var(--bg-elev);
  /* color / border 来自内联 style */
}
.fc-tag.family {
  background: var(--bg-elev);
  color: var(--family-color, var(--text));
  border: 1px solid var(--family-color, var(--border-active))50;
}

.fc-desc {
  font-size: 11.5px; line-height: 1.5;
  color: var(--text);
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.fc-chain-count {
  margin-top: auto;          /* 推到底部 */
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 10px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.fc-chain-count .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--family-color, var(--standard));
}
.fc-chain-count b {
  color: var(--family-color, var(--standard)); font-weight: 700;
}

/* 翻开后, 强制堆叠层级高于其他卡 */
.flip-card.flipped { z-index: 4; }
.flip-card.flipped .fc-inner {
  box-shadow: 0 16px 40px rgba(0,0,0,.6),
              0 0 0 1px var(--tier-color, var(--standard))40;
}

/* ── 跑马灯边框（"新翻开"提示，15s）── */
.border-racetrack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  animation: rtFadeIn .3s ease-out forwards;
}
.flip-card:not(.is-new) .border-racetrack { display: none; }
@keyframes rtFadeIn {
  to { opacity: 1; }
}
.border-racetrack path.rt-track {
  fill: none;
  stroke: var(--tier-color, var(--standard));
  stroke-width: 1.2;
  stroke-opacity: 0.35;
}
.border-racetrack circle.rt-dot {
  fill: #fff;
  filter: drop-shadow(0 0 4px var(--tier-color, var(--standard)));
}

/* 联动高亮 (peer 状态: 除中心外的其它链成员)
 * 用户反馈: 外粗 outline 框太重, 整组都像被框在同一个"蓝框"里, 视觉割裂
 * 去掉 outline + outline-offset, 不再加任何外环描边
 * 仅留 filter 提亮 + z-index 抬高做联动信号
 * 翻面后给 .flip-card-back 描 family 色, 这样翻面时仍能看到联动关系
 */
.flip-card.is-chain-hover {
  z-index: 7;
}
.flip-card.is-chain-hover .flip-card-back {
  border-color: var(--family-color, var(--standard));
}

/* 隐藏过滤掉 (filter) */
.flip-card.is-hidden {
  display: none;
}

/* 进场动画 */
.flip-card.appear {
  opacity: 0;
  transform: translateY(8px) scale(.96);
  animation: cardAppear .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cardAppear {
  to { opacity: 1; transform: translateY(0) scale(1); }
}