/* 3D CP rings — finger-worn perspective (fixed angle, not a spinner) */
.ap-cp-ring {
  --ring-metal: conic-gradient(
    from 215deg,
    #fff8dc 0deg,
    #ffd700 35deg,
    #c9a227 85deg,
    #ffeaa0 130deg,
    #b8860b 175deg,
    #fff3b0 220deg,
    #ffd700 265deg,
    #d4af37 310deg,
    #fff8dc 360deg
  );
  --ring-metal-edge: linear-gradient(180deg, #8b6914 0%, #5c4a0e 45%, #a67c00 100%);
  --ring-gem: linear-gradient(155deg, #ff8fab 0%, #e11d48 32%, #fb7185 52%, #881337 100%);
  --ring-gem-shine: rgba(255, 255, 255, 0.85);
  --ring-glow: rgba(244, 63, 94, 0.35);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap-cp-ring--sm { width: 36px; height: 36px; }
.ap-cp-ring--md { width: 56px; height: 56px; }
.ap-cp-ring--lg { width: 88px; height: 88px; }
.ap-cp-ring--xl { width: 140px; height: 140px; }

.ap-cp-ring-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 480px;
  perspective-origin: 50% 42%;
}

.ap-cp-ring-view {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Finger-worn view: tilted band + gem facing the viewer */
  transform: rotateX(58deg) rotateY(-26deg) rotateZ(0deg);
}

/* ── Band (torus seen from 3/4 angle) ── */
.ap-cp-ring-band-wrap {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 78%;
  height: 78%;
  margin-left: -39%;
  margin-top: -39%;
  transform-style: preserve-3d;
}

.ap-cp-ring-band {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-metal);
  -webkit-mask: radial-gradient(circle, transparent 51.5%, #000 52.5%, #000 100%);
  mask: radial-gradient(circle, transparent 51.5%, #000 52.5%, #000 100%);
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, 0.55),
    inset 0 -4px 10px rgba(0, 0, 0, 0.4),
    0 5px 14px rgba(0, 0, 0, 0.28);
  transform: translateZ(3px);
}

.ap-cp-ring-band-edge {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: var(--ring-metal-edge);
  -webkit-mask: radial-gradient(circle, transparent 49%, #000 50%, #000 93%, transparent 94%);
  mask: radial-gradient(circle, transparent 49%, #000 50%, #000 93%, transparent 94%);
  transform: translateZ(-5px) scale(0.98);
  opacity: 0.9;
  filter: brightness(0.85);
}

.ap-cp-ring-band-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  height: 54%;
  margin-left: -27%;
  margin-top: -27%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.28) 100%
  );
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45);
  transform: translateZ(-2px);
}

/* ── Setting + gem on top of band ── */
.ap-cp-ring-crown {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 44%;
  height: 44%;
  margin-left: -22%;
  transform-style: preserve-3d;
  transform: translateZ(14px) rotateX(-52deg);
}

.ap-cp-ring-prongs {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 88%, #d1d5db 0%, #9ca3af 38%, transparent 40%),
    linear-gradient(180deg, transparent 52%, rgba(212, 175, 55, 0.95) 52%, rgba(160, 120, 30, 0.98) 100%);
  clip-path: polygon(50% 0%, 61% 36%, 98% 40%, 67% 60%, 76% 98%, 50% 76%, 24% 98%, 33% 60%, 2% 40%, 39% 36%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.ap-cp-ring-gem {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 38%;
  height: 38%;
  margin-left: -19%;
  clip-path: polygon(50% 0%, 84% 26%, 70% 100%, 30% 100%, 16% 26%);
  background: var(--ring-gem);
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    0 0 12px var(--ring-glow);
  transform: translateZ(4px);
}

.ap-cp-ring-shine {
  position: absolute;
  left: 54%;
  top: 12%;
  width: 14%;
  height: 22%;
  transform: translateZ(6px) rotate(-22deg);
  background: linear-gradient(180deg, var(--ring-gem-shine), transparent);
  border-radius: 50%;
  filter: blur(0.4px);
  opacity: 0.82;
  pointer-events: none;
}

/* Preview (store): gentle glint only — no spin */
.ap-cp-ring--preview .ap-cp-ring-shine {
  animation: apCpGemGlint 3.5s ease-in-out infinite;
}

.ap-cp-ring--worn .ap-cp-ring-view,
.ap-cp-ring--worn .ap-cp-ring-band,
.ap-cp-ring--worn .ap-cp-ring-shine {
  animation: none !important;
}

/* ── Ring variants ── */
.ap-cp-ring--ruby {
  --ring-gem: linear-gradient(155deg, #fda4af 0%, #e11d48 35%, #fb7185 55%, #9f1239 100%);
  --ring-glow: rgba(244, 63, 94, 0.45);
}

.ap-cp-ring--wings {
  --ring-metal: conic-gradient(
    from 215deg,
    #fef9c3 0deg,
    #fde047 40deg,
    #ca8a04 90deg,
    #fef08a 140deg,
    #a16207 190deg,
    #fde047 250deg,
    #eab308 310deg,
    #fef9c3 360deg
  );
  --ring-gem: linear-gradient(155deg, #6ee7b7 0%, #10b981 38%, #34d399 58%, #047857 100%);
  --ring-glow: rgba(52, 211, 153, 0.4);
}

.ap-cp-ring--cp {
  --ring-gem: linear-gradient(155deg, #a5f3fc 0%, #22d3ee 35%, #06b6d4 58%, #0e7490 100%);
  --ring-glow: rgba(34, 211, 238, 0.45);
}

.ap-cp-ring--celeste {
  --ring-metal: conic-gradient(
    from 215deg,
    #f8fafc 0deg,
    #e2e8f0 60deg,
    #94a3b8 120deg,
    #cbd5e1 180deg,
    #64748b 240deg,
    #f1f5f9 300deg,
    #f8fafc 360deg
  );
  --ring-metal-edge: linear-gradient(180deg, #64748b 0%, #475569 50%, #94a3b8 100%);
  --ring-gem: linear-gradient(155deg, #c4b5fd 0%, #818cf8 38%, #6366f1 58%, #312e81 100%);
  --ring-glow: rgba(129, 140, 248, 0.45);
}

.ap-cp-ring--mystique {
  --ring-metal: conic-gradient(
    from 215deg,
    #fce7f3 0deg,
    #f472b6 50deg,
    #db2777 110deg,
    #fbcfe8 170deg,
    #be185d 230deg,
    #f472b6 290deg,
    #fce7f3 360deg
  );
  --ring-metal-edge: linear-gradient(180deg, #be185d 0%, #831843 50%, #db2777 100%);
  --ring-gem: linear-gradient(155deg, #f0abfc 0%, #d946ef 35%, #a855f7 58%, #581c87 100%);
  --ring-glow: rgba(217, 70, 239, 0.45);
}

.ap-cp-ring--aura {
  --ring-metal: conic-gradient(
    from 215deg,
    #dbeafe 0deg,
    #60a5fa 50deg,
    #2563eb 110deg,
    #93c5fd 170deg,
    #1d4ed8 230deg,
    #60a5fa 290deg,
    #dbeafe 360deg
  );
  --ring-metal-edge: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 50%, #2563eb 100%);
  --ring-gem: linear-gradient(155deg, #e0f2fe 0%, #38bdf8 32%, #0ea5e9 55%, #0369a1 100%);
  --ring-glow: rgba(56, 189, 248, 0.5);
}

.ap-cp-ring--aura .ap-cp-ring-gem {
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    0 0 14px var(--ring-glow),
    0 0 22px rgba(56, 189, 248, 0.25);
}

/* Style archetypes */
.ap-cp-ring--style-pearl {
  --ring-metal: conic-gradient(
    from 215deg,
    #ffffff 0deg,
    #f1f5f9 45deg,
    #cbd5e1 100deg,
    #e2e8f0 160deg,
    #94a3b8 220deg,
    #f8fafc 280deg,
    #ffffff 360deg
  );
  --ring-metal-edge: linear-gradient(180deg, #94a3b8 0%, #64748b 50%, #cbd5e1 100%);
  --ring-gem: radial-gradient(circle at 32% 28%, #fff 0%, #f8fafc 30%, #e2e8f0 62%, #cbd5e1 100%);
  --ring-glow: rgba(226, 232, 240, 0.5);
}

.ap-cp-ring--style-pearl .ap-cp-ring-gem {
  clip-path: circle(50% at 50% 50%);
  border-radius: 50%;
}

.ap-cp-ring--style-pearl .ap-cp-ring-prongs {
  clip-path: polygon(50% 0%, 60% 34%, 97% 34%, 67% 56%, 78% 92%, 50% 72%, 22% 92%, 33% 56%, 3% 34%, 40% 34%);
  opacity: 0.88;
}

.ap-cp-ring--style-gold {
  --ring-metal: conic-gradient(
    from 215deg,
    #fff7d6 0deg,
    #ffd700 40deg,
    #d4af37 95deg,
    #fff8dc 150deg,
    #b8860b 205deg,
    #ffd700 260deg,
    #fff7d6 360deg
  );
  --ring-gem: linear-gradient(155deg, #fda4af 0%, #f472b6 38%, #ec4899 58%, #be185d 100%);
  --ring-glow: rgba(244, 114, 182, 0.4);
}

.ap-cp-ring--style-gold .ap-cp-ring-band-wrap {
  width: 82%;
  height: 82%;
  margin-left: -41%;
  margin-top: -41%;
}

.ap-cp-ring--style-diamond .ap-cp-ring-gem {
  width: 42%;
  height: 42%;
  margin-left: -21%;
  clip-path: polygon(50% 0%, 82% 20%, 94% 54%, 74% 100%, 26% 100%, 6% 54%, 18% 20%);
}

.ap-cp-ring--style-diamond .ap-cp-ring-band::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 78%, rgba(251, 191, 36, 0.45) 0%, transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(251, 191, 36, 0.4) 0%, transparent 32%);
  -webkit-mask: radial-gradient(circle, transparent 51.5%, #000 52.5%, #000 100%);
  mask: radial-gradient(circle, transparent 51.5%, #000 52.5%, #000 100%);
  pointer-events: none;
}

@keyframes apCpGemGlint {
  0%, 100% { opacity: 0.65; transform: translateZ(6px) rotate(-22deg) scale(1); }
  50% { opacity: 1; transform: translateZ(6px) rotate(-18deg) scale(1.08); }
}

/* Love House center slot */
.lh-level-item .lh-level-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin: 0 auto 4px;
}

.lh-heart-gem {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  filter: drop-shadow(0 5px 14px rgba(236, 72, 153, 0.4));
}

.lh-heart-gem .ap-cp-ring {
  width: 64px;
  height: 64px;
}

.lh-modal-box .ring-art {
  font-size: 0;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.lh-ring-picker-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #fce7f3;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: #374151;
}

.lh-ring-picker-btn:active {
  background: #fdf2f8;
}

/* Store ring grid */
.social-store-item .img.cp-ring-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  background: radial-gradient(circle at 50% 40%, rgba(30, 20, 50, 0.95), rgba(10, 8, 20, 0.98));
  border-radius: 12px;
  font-size: 0;
}

.social-sheet .cp-ring-sheet-preview {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(40, 24, 60, 0.95), rgba(8, 6, 18, 0.98));
  border-radius: 16px;
  margin-bottom: 16px;
  font-size: 0;
}

/* Party room CP badge */
.party-cp-ring-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 6px;
  min-width: 44px;
}

.party-cp-ring-badge .ap-cp-ring--sm {
  width: 28px;
  height: 28px;
}

.party-cp-ring-badge .party-cp-label {
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .ap-cp-ring--preview .ap-cp-ring-shine {
    animation: none !important;
  }
}