/* ============================================================
   specials.css — 스페셜 캔디(스트라이프/랩드/컬러폭탄) 비주얼
   style.css 위에 얹는 파일. index.html에서 pieces.css 다음에
   <link rel="stylesheet" href="specials.css"> 로 로드할 것.

   설계 (DESIGN_BRIEF 6번: 특수 피스도 테마 비주얼):
   1. 스트라이프(4매치) = 은은한 스트라이프 포장지 + 나비 리본, 반짝임
   2. 랩드(사각/L모양)  = 양끝이 꼬인 종이 포장지에 싸인 사탕, 은은한 흔들림
   3. 컬러폭탄(5매치)   = 무지개가 도는 마법 구슬(디스코볼), 더 화려하게
   애니메이션은 transform/opacity만 사용(GPU 가속, 저부하)
   ============================================================ */

/* ---------- 1) 스트라이프: 반짝이는 스트라이프 포장지 + 나비 리본 ---------- */
.special-stripeH .gem, .special-stripeV .gem {
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  box-shadow:
    inset 0 -6px 9px rgba(0,0,0,.28),
    inset 0 3px 5px rgba(255,255,255,.65),
    0 4px 0 rgba(43,26,74,.3),
    0 11px 15px rgba(0,0,0,.28);
  filter: saturate(1.06);
}

/* 스트라이프 포장지 (스트라이프 방향 = 터지는 줄 방향, 0deg=가로줄/90deg=세로줄) */
.special-stripeH .gem::before, .special-stripeV .gem::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    radial-gradient(70% 52% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.78) 0 12%, rgba(255,255,255,.3) 12% 24%, rgba(255,255,255,0) 24% 40%);
  animation: stripeShimmer 2.6s ease-in-out infinite;
}
.special-stripeV .gem::before {
  background:
    radial-gradient(70% 52% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.78) 0 12%, rgba(255,255,255,.3) 12% 24%, rgba(255,255,255,0) 24% 40%);
}

/* 리본 띠 + 중앙 나비 매듭 */
.special-stripeH .gem::after, .special-stripeV .gem::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 39%;
  height: 22%;
  bottom: auto;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff 0%, #ffd9ee 55%, #ffb0d6 100%),
    radial-gradient(52% 100% at 30% 50%, rgba(255,255,255,.95), rgba(255,255,255,.3) 60%, rgba(255,255,255,0) 74%),
    radial-gradient(52% 100% at 70% 50%, rgba(255,255,255,.95), rgba(255,255,255,.3) 60%, rgba(255,255,255,0) 74%),
    radial-gradient(20% 62% at 50% 50%, #ff7fc3 0 62%, rgba(255,255,255,0) 64%);
  box-shadow: 0 2px 3px rgba(43,26,74,.3), 0 0 7px rgba(255,255,255,.9), inset 0 1px 1px rgba(255,255,255,.95);
}

@keyframes stripeShimmer {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

/* ---------- 2) 랩드: 양끝이 꼬인 종이 포장지에 싸인 사탕 ---------- */
.special-wrapped .gem {
  inset: 4% 16%;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow:
    inset 0 -6px 9px rgba(0,0,0,.28),
    inset 0 4px 6px rgba(255,255,255,.7),
    0 4px 0 rgba(43,26,74,.3),
    0 11px 15px rgba(0,0,0,.28);
  animation: wrappedSway 3.6s ease-in-out infinite;
}

/* 좌/우 꼬인 종이 날개 (가운데 색캔디는 .cX .gem 배경이 유지됨) */
.special-wrapped .gem::before, .special-wrapped .gem::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 40%;
  background:
    repeating-linear-gradient(102deg, rgba(122,84,50,.14) 0 3px, rgba(255,255,255,0) 3px 10px),
    linear-gradient(180deg, #fff8ef 0%, #ffe9d6 55%, #ffd9bd 100%);
  border: 2px solid #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,.18);
}
.special-wrapped .gem::before {
  left: auto;
  right: 88%;
  clip-path: polygon(0% 0%, 100% 38%, 100% 62%, 0% 100%);
}
.special-wrapped .gem::after {
  right: auto;
  left: 88%;
  clip-path: polygon(100% 0%, 0% 38%, 0% 62%, 100% 100%);
}

@keyframes wrappedSway {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5%) rotate(4deg); }
}

/* ---------- 3) 컬러폭탄: 무지개가 도는 마법 구슬(디스코볼) ---------- */
.special-bomb .gem {
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background:
    radial-gradient(120% 85% at 50% 118%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%),
    radial-gradient(38% 30% at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    radial-gradient(120% 90% at 50% 42%, #8a5cff 0%, #4b2a8f 46%, #251345 78%);
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,.35),
    inset 0 4px 6px rgba(255,255,255,.45),
    0 4px 0 rgba(43,26,74,.32),
    0 11px 16px rgba(0,0,0,.3),
    0 0 14px rgba(167,111,255,.65);
  animation: bombGlow 1.5s ease-in-out infinite;
}

/* 도는 무지개 링 (mask로 중앙은 투명 → 구슬 표면이 살아보임) */
.special-bomb .gem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #ff3b7b, #ff8a1e, #ffd21f, #22c55e, #1e9aff, #a534e0, #ff3b7b);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 62%);
  mask: radial-gradient(circle, transparent 34%, #000 62%);
  animation: bombSpin 3s linear infinite;
}

/* 중앙 스파클 별 */
.special-bomb .gem::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(50% 0%, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0% 50%, 40% 38%);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.95));
  animation: bombSparkle 1.6s ease-in-out infinite;
}

@keyframes bombSpin { to { transform: rotate(360deg); } }
@keyframes bombGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes bombSparkle {
  0%, 100% { transform: translate(-50%, -50%) scale(.82) rotate(0deg); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.14) rotate(45deg); opacity: 1; }
}