/* ===== 贡嘎金雕卡 3D 展示组件 ===== */
.gg-card3d {
  --gg-gold: #d4af37;
  --gg-gold-light: #f9e59e;
  --gg-card-w: min(94vw, 380px);
  --gg-card-h: calc(var(--gg-card-w) * 0.628);
  --gg-radius: 16px;
  position: relative;
  width: var(--gg-card-w);
  height: var(--gg-card-h);
  margin: 0 auto;
  perspective: 1200px;
  transform-style: preserve-3d;
  user-select: none;
}

.gg-card3d__wrap {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .1s ease-out;
  cursor: grab;
}
.gg-card3d__wrap.grabbing { cursor: grabbing; }

.gg-card3d__card {
  width: 100%;
  height: 100%;
  border-radius: var(--gg-radius);
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 24px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.18) inset;
  overflow: hidden;
  background: #0a0d14;
}

.gg-card3d__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.04) 55%, rgba(255,255,255,0) 70%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  animation: gg-card3d-sheen 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gg-card3d-sheen {
  0% { transform: translateX(-120%) skewX(-22deg); }
  55%, 100% { transform: translateX(120%) skewX(-22deg); }
}

.gg-card3d__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0a0d14;
}

.gg-card3d__rim {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(249,229,158,.32);
  border-radius: calc(var(--gg-radius) - 6px);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(212,175,55,.1) inset;
}

.gg-card3d__chip {
  position: absolute;
  top: 18px; left: 20px;
  width: 40px; height: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, #e8c866 0%, #b8912b 50%, #e8c866 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.2) inset;
  pointer-events: none;
}
.gg-card3d__chip::before {
  content: "";
  position: absolute;
  inset: 3px 2px;
  border: 1px solid rgba(138,110,24,.55);
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(138,110,24,.35) 6px 7px);
}

.gg-card3d__logo {
  position: absolute;
  top: 16px; right: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}

/* gg-card3d__title and __subtitle removed - card image already contains text */

.gg-card3d__lifelong {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 11px;
  color: rgba(255,255,255,.8);
  letter-spacing: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.gg-card3d__no {
  position: absolute;
  bottom: 16px; right: 18px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-card3d__holder {
  position: absolute;
  bottom: 16px; left: 18px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-card3d__holo {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, rgba(212,175,55,0) 0deg, rgba(212,175,55,.12) 60deg, rgba(138,110,24,.08) 120deg, rgba(212,175,55,0) 180deg, rgba(212,175,55,.12) 240deg, rgba(138,110,24,.08) 300deg, rgba(212,175,55,0) 360deg);
  mix-blend-mode: color-dodge;
  opacity: .45;
  pointer-events: none;
}

@media (min-width: 821px) {
  .gg-card3d {
    --gg-card-w: min(720px, 80vw);
    --gg-card-h: calc(var(--gg-card-w) * 0.628);
    --gg-radius: 22px;
  }
  .gg-card3d__title { font-size: 28px; left: 26px; letter-spacing: 10px; }
  .gg-card3d__subtitle { left: 62px; font-size: 12px; letter-spacing: 6px; }
  .gg-card3d__no { font-size: 15px; }
  .gg-card3d__holder { font-size: 14px; }
}