/* ==========================================================================
   [CSS-3] 卡片体系
   华丽金色系卡背纹样、3D 翻转结构（rotateY）、卡面容器、
   tips 槽位、1/3/5 星卡面质感分级
   ========================================================================== */

/* ==========================================================================
   卡片列：卡 + tips 槽，五列一行
   ========================================================================== */
.card-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(6px, 1.8vw, 20px);
  width: 100%;
  max-width: 920px;
}

.gacha-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(58px, 15.5vw, 132px);
  perspective: 900px;
  /* 点击"抽卡"前保持隐藏；入场由 .card-row.is-entering 触发（依次入场） */
  opacity: 0;
}

/* 卡背依次入场（--i 逐张 stagger，apple 缓动干净上浮） */
.card-row.is-entering .gacha-card {
  animation: card-enter 0.8s var(--ease-apple) forwards;
  animation-delay: calc(0.15s * var(--i));
}

/* Rev.7：入场落定后（stage.js 切换 is-entering → is-entered）
   整排卡片错拍呼吸浮动；opacity 由本类常驻承载（脱离入场动画 forwards） */
.card-row.is-entered .gacha-card {
  opacity: 1;
  animation: card-idle 4.2s ease-in-out calc(0.4s * var(--i)) infinite;
}

/* 5星演出窗口内：聚光脉动覆盖待机浮动（更高优先级） */
.card-row.is-entered .gacha-card.is-cinematic {
  animation: card-spotlight 1.5s ease-in-out infinite;
}

.gacha-card.is-cinematic {
  z-index: 6;
}

/* ==========================================================================
   3D 翻转结构
   ========================================================================== */
.card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  /* Rev.7：翻转角（--flip）与悬停倾斜（--tiltX/--tiltY）变量合成，
     同一 transform 属性过渡，翻转动画与 3D 视差互不破坏 */
  transform: rotateX(var(--tiltX, 0deg)) rotateY(calc(var(--flip, 0deg) + var(--tiltY, 0deg)));
  transition: transform var(--dur-flip) var(--ease-apple);
  will-change: transform;
}

.gacha-card.is-flipped .card-inner {
  --flip: 180deg;
}

/* 悬停倾斜期间：压缩过渡时长，让卡片紧随鼠标（翻转仍走原时长） */
.gacha-card.is-tilt .card-inner {
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: clamp(8px, 1.6vw, 14px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   卡背：统一的华丽金色系纹样（全 CSS 渐变绘制，无图片）
   ========================================================================== */
.card-back {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.4), transparent 58%),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.14) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.14) 0 2px, transparent 2px 9px),
    linear-gradient(150deg, #E9DAA9 0%, #D8C48C 52%, #C9B478 100%);
  border: 1.5px solid rgba(168, 132, 43, 0.75);
  box-shadow:
    0 10px 24px rgba(160, 138, 92, 0.4),
    0 2px 5px rgba(122, 91, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 卡背内层描边框（双层边框的精致感） */
.card-back::before {
  content: "";
  position: absolute;
  inset: clamp(4px, 0.9vw, 7px);
  border-radius: inherit;
  border: 1px solid rgba(255, 248, 220, 0.65);
  box-shadow: inset 0 0 0 1px rgba(168, 132, 43, 0.35);
  pointer-events: none;
}

/* Rev.7：卡背全息流光——斜向光带循环扫过（几何同 shine-sweep：
   -200% 起点全在卡外、420% 终点全离场），逐卡错拍 */
.card-back::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 252, 235, 0.6), transparent);
  transform: translateX(-200%) skewX(-18deg);
  will-change: transform;
  pointer-events: none;
  animation: back-sheen 3.8s linear calc(0.55s * var(--i)) infinite;
}

/* 卡背中央徽记：金色圆环 + 星芒 */
.card-back-emblem {
  position: relative;
  width: 34%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 2.6vw, 20px);
  color: #FFF6D8;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 246, 216, 0.9);
  box-shadow:
    0 0 12px rgba(212, 175, 55, 0.55),
    inset 0 0 10px rgba(212, 175, 55, 0.5);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent 72%);
  text-shadow: 0 0 8px rgba(255, 246, 216, 0.9);
}

.card-back-emblem::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 246, 216, 0.55);
}

/* ==========================================================================
   卡面：星级质感分级
   ========================================================================== */
.card-front {
  transform: rotateY(180deg);
  padding: 6% 7%;
  gap: 5%;
}

/* —— 1星：素雅白金 —— */
.card-front.rarity-1 {
  background:
    radial-gradient(circle at 50% 0%, rgba(250, 237, 196, 0.9), transparent 62%),
    linear-gradient(170deg, #FFFEF8 0%, #FDF6E0 100%);
  border: 1.5px solid rgba(201, 183, 140, 0.9);
  box-shadow:
    0 8px 20px rgba(160, 138, 92, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}

/* —— 3星：鎏金流光 —— */
.card-front.rarity-3 {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 252, 235, 0.95), transparent 55%),
    linear-gradient(162deg, #F7E7B5 0%, #EBCB74 48%, #D4AF37 100%);
  border: 1.5px solid rgba(168, 132, 43, 0.9);
  box-shadow:
    0 10px 26px rgba(196, 154, 49, 0.5),
    0 0 18px rgba(240, 212, 124, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 16px rgba(255, 248, 214, 0.55);
}

/* 3星流光扫过层（will-change 提升为独立合成层，transform 动画零重绘）
   ⚠️ 基础位 translateX(-200%)：skewX(-18°) 使带的顶右角比中线前伸 ~0.32 卡宽，
   -200% × 34% 带宽 = -0.68 卡宽 → 顶右角 -0.02 卡宽，完全在卡外 */
.card-front.rarity-3::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-200%) skewX(-18deg);
  will-change: transform;
  pointer-events: none;
}

.gacha-card.is-flipped .card-front.rarity-3::before {
  /* Rev.5：无限循环（横穿 + 卡外休止），节奏与缓动在 keyframes 内分段定义 */
  animation: shine-sweep 2.8s linear 0.35s infinite;
}

/* —— 5星：白金圣光（Rev.6 重设计）
   旧版渐变含 #8A6914 深橄榄暗带：流动时暗褐色扫过卡面显得怪，
   且整体比 3星亮金更暗，档次倒挂无法突出。
   新版全部亮色系：亮金 → 炽白 shimmer 流动，亮度层级
   1星素雅白 < 3星鎏金 < 5星炽白圣光；保持原版 background-position 动画方案。 —— */
.card-front.rarity-5 {
  background: linear-gradient(115deg,
    #EBCB74 0%, #FFF9DC 26%, #FFFDF4 50%,
    #FFF9DC 74%, #EBCB74 100%);
  background-size: 280% 280%;
  animation: gold-flow 3.4s linear infinite;
  border: 2px solid #F5D77E;
  box-shadow:
    0 14px 34px rgba(150, 112, 24, 0.55),
    0 0 26px rgba(240, 212, 124, 0.8),
    0 0 48px rgba(255, 246, 216, 0.45),
    inset 0 0 20px rgba(255, 248, 214, 0.7);
}

/* 5星边框呼吸辉光（叠加在流光之上） */
.gacha-card.is-flipped .card-front.rarity-5 {
  box-shadow:
    0 14px 34px rgba(150, 112, 24, 0.55),
    0 0 26px rgba(240, 212, 124, 0.8),
    0 0 52px rgba(240, 212, 124, 0.5),
    inset 0 0 20px rgba(255, 248, 214, 0.7);
}

/* ==========================================================================
   卡面内容：星级行 + 名称（翻转落定后内容淡入上浮）
   ========================================================================== */
/* 卡面内容淡入选择器（含盲盒徽记） */
.card-front .card-stars,
.card-front .card-name,
.card-front .card-mystery {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s var(--ease-apple) 0.3s,
    transform 0.5s var(--ease-apple) 0.3s;
}

.gacha-card.is-flipped .card-front .card-stars,
.gacha-card.is-flipped .card-front .card-name,
.gacha-card.is-flipped .card-front .card-mystery {
  opacity: 1;
  transform: none;
}

/* —— 惊喜盲盒专属：神秘问号徽记 —— */
.card-mystery {
  width: 24%;
  aspect-ratio: 1;
  margin-bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(11px, 2.5vw, 16px);
  color: #FFF6D8;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, rgba(139, 105, 20, 0.92) 78%);
  border: 1px solid rgba(255, 246, 216, 0.9);
  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.6),
    inset 0 0 8px rgba(255, 248, 214, 0.5);
  text-shadow: 0 0 6px rgba(255, 246, 216, 0.9);
}

.card-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.5vw, 4px);
  margin-bottom: 4%;
}

.card-stars svg {
  width: clamp(10px, 2.5vw, 16px);
  height: clamp(10px, 2.5vw, 16px);
  display: block;
}

.rarity-1 .card-stars svg { fill: #C9B78C; }
.rarity-3 .card-stars svg { fill: #B8860B; filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.8)); }
/* Rev.6：白金亮面上改用深金星星（原 #FFF6D8 奶白在炽白卡面上不显），
   白色 drop-shadow 提供立体描边感 */
.rarity-5 .card-stars svg { fill: #A8842B; filter: drop-shadow(0 0 1px rgba(255, 253, 244, 0.95)); }

.card-name {
  font-weight: 700;
  font-size: clamp(11px, 2.7vw, 16px);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}

.rarity-1 .card-name {
  color: var(--c-text-strong);
}

.rarity-3 .card-name {
  color: #6B4E10;
  text-shadow: 0 1px 0 rgba(255, 248, 214, 0.8);
}

/* Rev.6：白金亮面上奶白字不可读——翻转为深金棕字 + 白描边，
   与 3星排版语言一致但保留 serif 华丽感 */
.rarity-5 .card-name {
  color: #6B4E10;
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(255, 253, 244, 0.9);
}

/* —— "Happy Birthday Mom!" 专属：祝福语大字排版 —— */
.card-name--birthday {
  font-family: var(--font-serif);
  font-size: clamp(11px, 2.5vw, 15px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-gold);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
}

/* ==========================================================================
   tips 槽位：固定高度防布局跳动，翻开后淡入
   ========================================================================== */
.card-tip {
  width: 100%;
  margin-top: clamp(6px, 1.2vh, 12px);
  min-height: 4.6em;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s var(--ease-apple) 0.42s,
    transform 0.6s var(--ease-apple) 0.42s;
}

.gacha-card.is-flipped .card-tip {
  opacity: 1;
  transform: none;
}

.card-tip.is-empty {
  min-height: 0;
}

/* ==========================================================================
   惊喜线索图片：惊喜盲盒专属，缩略图占 tips 槽位上方，
   点击打开全屏放大镜（lightbox）。翻牌后与文字 tips 同节奏淡入。
   ========================================================================== */
.card-clue {
  display: block;
  width: 100%;
  margin-top: clamp(6px, 1.2vh, 12px);
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s var(--ease-apple) 0.42s,
    transform 0.6s var(--ease-apple) 0.42s;
}

.gacha-card.is-flipped .card-clue {
  opacity: 1;
  transform: none;
}

.card-clue:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: clamp(6px, 1.2vw, 10px);
}

.card-clue img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(6px, 1.2vw, 10px);
  border: 1.5px solid rgba(201, 183, 140, 0.9);
  box-shadow: 0 4px 12px rgba(160, 138, 92, 0.3);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (min-width: 768px) {
  .card-tip {
    font-size: 13px;
    min-height: 3.9em;
  }
}

@media (max-width: 374px) {
  .card-row {
    gap: 4px;
  }

  .gacha-card {
    width: 17vw;
  }
}