/* ========== Ssanggab Pocha Fortune Section ========== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=DM+Serif+Text:ital@0;1&family=Nanum+Pen+Script&family=Noto+Serif+KR:wght@400;500;700&family=Patrick+Hand&family=Gamja+Flower&family=EB+Garamond:wght@400;500;700&family=Nanum+Myeongjo:wght@400;700;800&family=Sacramento&family=Yeon+Sung&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');

:root {
  /* Ssanggab Colors - matching Soju Dreams palette */
  --ssanggab-lavender: #C3B6FF;
  --ssanggab-peach: #FFD6A5;
  --ssanggab-bg-dark: #22212B;
  --ssanggab-paper: rgba(43, 40, 51, 0.85);
  --ssanggab-stamp-red: #DC143C;
  --ssanggab-text-light: #FFF6E3;
  --ssanggab-neon-glow: rgba(195, 182, 255, 0.4);
}

/* Header block */
.ssanggab-header-block {
  margin: 80px auto 30px;
  width: min(1200px, calc(100% - 40px));
  text-align: center;
}

.ssanggab-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.5rem;
  color: var(--ssanggab-lavender);
  margin: 0 0 15px;
  text-shadow: 0 0 15px var(--ssanggab-neon-glow);
  animation: glow-lavender 3s ease-in-out infinite;
}

.ssanggab-tagline {
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.1rem;
  color: var(--ssanggab-peach);
  margin: 0;
  text-shadow: 0 2px 4px rgba(52, 30, 30, 0.3);
  font-style: italic;
}

/* Main section */
.ssanggab-section {
  margin: 20px auto 100px;
  width: min(1000px, calc(100% - 40px));
  padding: 40px 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

/* Vintage leaflet background */
.ssanggab-board {
  position: relative;
  background:
    /* Vignette effect (bar lighting) */
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%),
    /* Subtle warm overlay */
    radial-gradient(ellipse at 30% 20%, rgba(255, 214, 165, 0.02) 0%, transparent 50%),
    /* Main plum/mauve gradient with transparency */
    linear-gradient(135deg, rgba(59, 42, 52, 0.7) 0%, rgba(45, 31, 40, 0.7) 50%, rgba(26, 17, 22, 0.75) 100%);
  border: 2px solid rgba(255, 214, 165, 0.6);
  border-radius: 8px;
  padding: 40px;
  box-shadow:
    /* Outer shadow for depth */
    0 8px 24px rgba(0, 0, 0, 0.6),
    /* Soft peach glow */
    0 0 40px rgba(255, 214, 165, 0.12),
    /* Lavender neon glow */
    0 0 60px rgba(195, 182, 255, 0.08),
    /* Inner highlight */
    inset 0 1px 0 rgba(255, 214, 165, 0.15),
    /* Inner glow */
    inset 0 0 60px rgba(195, 182, 255, 0.03),
    /* Sparkle specs around border (matches animation start) */
    -5px -5px 0 1px rgba(255, 214, 165, 0.4),
    98% 5% 0 1px rgba(195, 182, 255, 0.6),
    75% 98% 0 1px rgba(255, 214, 165, 0.5),
    5% 95% 0 1px rgba(195, 182, 255, 0.4);
  min-height: 500px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
}

/* Paper texture overlay */
.ssanggab-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../assets/paper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: 8px;
  mix-blend-mode: overlay;
  opacity: 0.3;
  z-index: 1;
}

/* Subtle aged overlay */
.ssanggab-board::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Random aged spots */
    radial-gradient(circle at 15% 25%, rgba(139, 90, 60, 0.05) 0%, transparent 8%),
    radial-gradient(circle at 85% 15%, rgba(139, 90, 60, 0.04) 0%, transparent 10%),
    radial-gradient(circle at 70% 85%, rgba(139, 90, 60, 0.04) 0%, transparent 12%);
  pointer-events: none;
  border-radius: 8px;
  mix-blend-mode: multiply;
  opacity: 0.4;
  z-index: 2;
}

/* Stamp seal */
.ssanggab-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Gamja Flower', serif;
  font-size: 1.1rem;
  color: var(--ssanggab-stamp-red);
  border: 3px solid var(--ssanggab-stamp-red);
  border-radius: 50%;
  padding: 15px;
  transform: rotate(15deg);
  opacity: 0.7;
  text-shadow: 0 2px 4px rgba(220, 20, 60, 0.3);
  box-shadow: 0 4px 8px rgba(220, 20, 60, 0.3);
  z-index: 10;
}

/* Zodiac/Fortune views - layer above textures */
.ssanggab-zodiac-view,
.ssanggab-fortune-view {
  position: relative;
  z-index: 5;
}

/* Board transition animations - only when transitioning */
.ssanggab-board.transitioning-out {
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssanggab-board.transitioning-in {
  animation: board-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes board-fade-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Leaflet header */
.ssanggab-leaflet-header {
  text-align: center;
  margin-bottom: 40px;
}

.ssanggab-leaflet-title {
  font-family: 'Nanum Pen Script', serif;
  font-size: 3.8rem;
  color: var(--ssanggab-lavender);
  margin: 0 0 10px;
  text-shadow: 0 0 10px var(--ssanggab-neon-glow);
}

.ssanggab-leaflet-subtitle {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.5rem;
  color: var(--ssanggab-peach);
  margin: 0;
}

/* Zodiac grid */
.ssanggab-zodiac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 auto;
  max-width: 600px;
}

.ssanggab-zodiac-btn {
  background: linear-gradient(135deg, rgba(195, 182, 255, 0.08), rgba(195, 182, 255, 0.05)),
              rgba(34, 33, 43, 0.7);
  border: 2px solid var(--ssanggab-lavender);
  border-radius: 12px;
  padding: 20px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.ssanggab-zodiac-btn:hover {
  background: rgba(195, 182, 255, 0.15);
  border-color: var(--ssanggab-peach);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--ssanggab-neon-glow);
}

.ssanggab-zodiac-btn:active {
  transform: translateY(-1px);
}

/* Elegant selection animation */
.ssanggab-zodiac-btn.clicked {
  animation: elegant-select 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes elegant-select {
  0% {
    box-shadow: 0 8px 20px var(--ssanggab-neon-glow);
  }
  40% {
    box-shadow:
      0 0 25px rgba(195, 182, 255, 0.6),
      0 0 45px rgba(255, 214, 165, 0.4),
      inset 0 0 20px rgba(195, 182, 255, 0.15);
  }
  100% {
    box-shadow:
      0 0 30px rgba(195, 182, 255, 0.5),
      0 0 50px rgba(255, 214, 165, 0.3);
  }
}

/* Paper tab indicator for selected */
.ssanggab-zodiac-btn.selected::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent var(--ssanggab-peach) transparent transparent;
}

.zodiac-icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(195, 182, 255, 0.3));
}

.zodiac-name {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.3rem;
  color: var(--ssanggab-text-light);
  text-align: center;
  line-height: 1;
}

.zodiac-name small {
  font-size: 1.05rem;
  color: var(--ssanggab-peach);
  opacity: 0.8;
}

/* Fortune view (initially hidden) */
.ssanggab-fortune-view {
  transition: opacity 0.3s ease;
}

.ssanggab-fortune-view.hidden {
  display: none;
}

/* Floating light particles - like fireflies */
.float-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  animation: float-up 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.float-particle.lavender {
  background: var(--ssanggab-lavender);
  box-shadow: 0 0 8px rgba(195, 182, 255, 0.8), 0 0 16px rgba(195, 182, 255, 0.4);
}

.float-particle.peach {
  background: var(--ssanggab-peach);
  box-shadow: 0 0 8px rgba(255, 214, 165, 0.8), 0 0 16px rgba(255, 214, 165, 0.4);
}

.float-particle.glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, var(--ssanggab-lavender) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(195, 182, 255, 0.4);
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--float-y)) translateX(var(--float-x)) scale(1.2);
  }
}

/* Border explosion sparks - magical disappearing effect */
.border-explosion-spark {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: explode-fade 1.2s ease-out forwards;
}

.border-explosion-spark.lavender {
  background: #C3B6FF;
  box-shadow:
    0 0 8px #C3B6FF,
    0 0 16px rgba(195, 182, 255, 0.9),
    0 0 24px rgba(195, 182, 255, 0.6);
}

.border-explosion-spark.peach {
  background: #FFD6A5;
  box-shadow:
    0 0 8px #FFD6A5,
    0 0 16px rgba(255, 214, 165, 0.9),
    0 0 24px rgba(255, 214, 165, 0.6);
}

.border-explosion-spark.lilac {
  background: #DCD2FF;
  box-shadow:
    0 0 8px #DCD2FF,
    0 0 16px rgba(220, 210, 255, 0.9),
    0 0 24px rgba(220, 210, 255, 0.6);
}

.border-explosion-spark.amber {
  background: #FFB98C;
  box-shadow:
    0 0 8px #FFB98C,
    0 0 16px rgba(255, 185, 140, 0.9),
    0 0 24px rgba(255, 185, 140, 0.6);
}

.border-explosion-spark.blush {
  background: #FFD2A0;
  box-shadow:
    0 0 8px #FFD2A0,
    0 0 16px rgba(255, 210, 160, 0.9),
    0 0 24px rgba(255, 210, 160, 0.6);
}

.border-explosion-spark.rosegold {
  background: #FFCBA4;
  box-shadow:
    0 0 8px #FFCBA4,
    0 0 16px rgba(255, 203, 164, 0.9),
    0 0 24px rgba(255, 203, 164, 0.6);
}

.border-explosion-spark.white {
  background: #ffffff;
  box-shadow:
    0 0 10px #ffffff,
    0 0 20px rgba(255, 255, 255, 0.95),
    0 0 30px rgba(255, 255, 255, 0.7);
}

@keyframes explode-fade {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--explode-x), var(--explode-y)) scale(1.5);
  }
}

.ssanggab-fortune-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

/* Rarity indicator */
.fortune-rarity {
  text-align: center;
  margin-bottom: 15px;
  font-family: 'Nanum Pen Script', serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fortune-rarity.rarity-1 {
  color: var(--ssanggab-peach);
}

.fortune-rarity.rarity-2 {
  color: var(--ssanggab-lavender);
  text-shadow: 0 0 8px rgba(195, 182, 255, 0.5);
}

.fortune-rarity.rarity-3 {
  background: linear-gradient(90deg,
    var(--ssanggab-lavender),
    var(--ssanggab-peach),
    var(--ssanggab-lavender)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 214, 165, 0.6));
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Fortune title */
.fortune-title {
  font-family: 'Nanum Pen Script', serif;
  font-size: 3.2rem;
  color: var(--ssanggab-lavender);
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.5;
  text-shadow: 0 0 10px var(--ssanggab-neon-glow);
}

/* Fortune text */
.fortune-text {
  font-family: 'Handlee', serif;
  font-size: 1.35rem;
  color: var(--ssanggab-text-light);
  line-height: 1.6;
  text-align: center;
  margin: 0 0 30px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border-left: 3px solid var(--ssanggab-peach);
  position: relative;
}

/* Writing sparkle effect */
.writing-sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  background: #ffffff;
  box-shadow:
    0 0 8px #ffffff,
    0 0 16px #ffffff,
    0 0 24px rgba(255, 255, 255, 1),
    0 0 36px rgba(255, 255, 255, 1),
    0 0 48px rgba(255, 255, 255, 0.95),
    0 0 60px rgba(255, 255, 255, 0.9),
    0 0 80px rgba(255, 255, 255, 0.8),
    0 0 100px rgba(255, 255, 255, 0.6);
  animation: writing-spark-fade 1.4s ease-out forwards;
}

@keyframes writing-spark-fade {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  30% {
    opacity: 1;
    transform: scale(1.2) translateY(-5px);
  }
  70% {
    opacity: 0.8;
    transform: scale(1.5) translateY(-15px);
  }
  100% {
    opacity: 0;
    transform: scale(2) translateY(-25px);
  }
}

/* Fortune details (Soju Mix + Anju) */
.fortune-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
}

.fortune-pairing {
  background: rgba(195, 182, 255, 0.08);
  border: 2px solid var(--ssanggab-lavender);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.pairing-label {
  display: block;
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.05rem;
  color: var(--ssanggab-peach);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.pairing-value {
  display: block;
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.30rem;
  color: var(--ssanggab-lavender);
  font-weight: 600;
}

/* Tiny ritual */
.fortune-ritual {
  background: linear-gradient(135deg, rgba(255, 214, 165, 0.1), rgba(195, 182, 255, 0.1));
  border: 2px dashed var(--ssanggab-peach);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  text-align: center;
}

.ritual-label {
  display: block;
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.05rem;
  color: var(--ssanggab-peach);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.ritual-text {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.30rem;
  color: var(--ssanggab-text-light);
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

/* Tone */
.fortune-tone {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.tone-en,
.tone-kr {
  font-family: 'Nanum Pen Script', serif;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
}

.tone-en {
  color: var(--ssanggab-lavender);
  border: 1px solid var(--ssanggab-lavender);
}

.tone-kr {
  color: var(--ssanggab-peach);
  border: 1px solid var(--ssanggab-peach);
}

/* Fortune disclaimer */
.fortune-disclaimer {
  font-family: 'Nanum Pen Script', serif;
  font-size: 0.95rem;
  color: rgba(255, 246, 227, 0.6);
  text-align: center;
  font-style: italic;
  margin: 0 0 25px;
  line-height: 1.4;
}

/* Fortune action buttons */
.fortune-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.fortune-btn {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.05rem;
  padding: 12px 24px;
  background: rgba(195, 182, 255, 0.15);
  border: 2px solid var(--ssanggab-lavender);
  border-radius: 8px;
  color: var(--ssanggab-lavender);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: lowercase;
}

.fortune-btn:hover {
  background: rgba(195, 182, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--ssanggab-neon-glow);
}

.fortune-btn-back {
  background: rgba(255, 214, 165, 0.15);
  border-color: var(--ssanggab-peach);
  color: var(--ssanggab-peach);
}

.fortune-btn-back:hover {
  background: rgba(255, 214, 165, 0.25);
  box-shadow: 0 4px 12px rgba(255, 214, 165, 0.4);
}

/* Bottom credits */
.ssanggab-credits {
  margin-top: 50px;
  text-align: center;
  padding: 25px 20px 0;
  border-top: 2px dashed rgba(195, 182, 255, 0.3);
  position: relative;
  z-index: 5;
}

.credit-main {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.15rem;
  color: var(--ssanggab-lavender);
  margin: 0 0 5px;
}

.credit-sub {
  font-family: 'Nanum Pen Script', serif;
  font-size: 0.90rem;
  color: var(--ssanggab-peach);
  margin: 0 0 15px;
  opacity: 0.8;
}

.credit-tiny {
  font-family: 'Nanum Pen Script', serif;
  font-size: 0.80rem;
  color: rgba(255, 246, 227, 0.5);
  margin: 0;
  font-style: italic;
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto;
}

/* Rare fortune holographic effect */
.ssanggab-fortune-view.rare-fortune {
  position: relative;
}

.ssanggab-fortune-view.rare-fortune::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(195, 182, 255, 0.1) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: holo-shine 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 8px;
}

@keyframes holo-shine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Sparkle particles for rare fortunes */
.sparkle-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ssanggab-lavender);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle-float 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--ssanggab-lavender);
}

@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-30px) scale(1.2); opacity: 0.8; }
  90% { opacity: 1; }
}

/* Magical shimmer border effect - but not during transitions */
.ssanggab-board:not(.transitioning-out):not(.transitioning-in) {
  animation: border-shimmer 8s ease-in-out infinite;
}

@keyframes border-shimmer {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(255, 214, 165, 0.12),
      0 0 60px rgba(195, 182, 255, 0.08),
      inset 0 1px 0 rgba(255, 214, 165, 0.15),
      inset 0 0 60px rgba(195, 182, 255, 0.03),
      /* Sparkle specs around border */
      -5px -5px 0 1px rgba(255, 214, 165, 0.4),
      98% 5% 0 1px rgba(195, 182, 255, 0.6),
      75% 98% 0 1px rgba(255, 214, 165, 0.5),
      5% 95% 0 1px rgba(195, 182, 255, 0.4);
  }
  50% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.6),
      0 0 45px rgba(255, 214, 165, 0.18),
      0 0 70px rgba(195, 182, 255, 0.12),
      inset 0 1px 0 rgba(255, 214, 165, 0.2),
      inset 0 0 60px rgba(195, 182, 255, 0.05),
      /* Sparkle specs shift positions */
      10% 8% 0 1px rgba(195, 182, 255, 0.7),
      95% 15% 0 1px rgba(255, 214, 165, 0.6),
      80% 92% 0 1px rgba(195, 182, 255, 0.5),
      8% 88% 0 1px rgba(255, 214, 165, 0.7);
  }
}

@keyframes fairy-dust-float {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Flying spark particles - crackling energy effect */
.border-spark {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
}

.border-spark.lavender {
  background: #C3B6FF;
  box-shadow: 0 0 6px #C3B6FF, 0 0 12px rgba(195, 182, 255, 0.9), 0 0 20px rgba(195, 182, 255, 0.5);
}

.border-spark.peach {
  background: #FFD6A5;
  box-shadow: 0 0 6px #FFD6A5, 0 0 12px rgba(255, 214, 165, 0.9), 0 0 20px rgba(255, 214, 165, 0.5);
}

.border-spark.lilac {
  background: #DCD2FF;
  box-shadow: 0 0 6px #DCD2FF, 0 0 12px rgba(220, 210, 255, 0.9), 0 0 20px rgba(220, 210, 255, 0.5);
}

.border-spark.blush {
  background: #B48C82;
  box-shadow: 0 0 6px #B48C82, 0 0 12px rgba(180, 140, 130, 0.9), 0 0 20px rgba(180, 140, 130, 0.5);
}

.border-spark.amber {
  background: #FFB98C;
  box-shadow: 0 0 6px #FFB98C, 0 0 12px rgba(255, 185, 140, 0.9), 0 0 20px rgba(255, 185, 140, 0.5);
}

.border-spark.rosegold {
  background: #FFD2A0;
  box-shadow: 0 0 6px #FFD2A0, 0 0 12px rgba(255, 210, 160, 0.9), 0 0 20px rgba(255, 210, 160, 0.5);
}

/* Spark flight animations */
@keyframes spark-fly-top {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--dy) - 60px)) scale(1.5) rotate(360deg);
  }
}

@keyframes spark-fly-right {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) + 60px), var(--dy)) scale(1.5) rotate(360deg);
  }
}

@keyframes spark-fly-bottom {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(1.5) rotate(360deg);
  }
}

@keyframes spark-fly-left {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) - 60px), var(--dy)) scale(1.5) rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ssanggab-zodiac-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .ssanggab-board {
    padding: 30px 20px;
  }

  .fortune-details {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .fortune-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fortune-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ssanggab-zodiac-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ssanggab-header {
    font-size: 1.2rem;
  }

  .fortune-title {
    font-size: 1.2rem;
  }
}

/* ========== Toast Notification Styles ========== */
.ssanggab-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(195, 182, 255, 0.95);
  color: var(--ssanggab-bg-dark);
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(195, 182, 255, 0.4),
              0 0 20px rgba(195, 182, 255, 0.3);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.ssanggab-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ssanggab-toast-error {
  background: rgba(220, 53, 69, 0.95);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4),
              0 0 20px rgba(220, 53, 69, 0.3);
}

/* Mobile responsiveness for toast */
@media (max-width: 768px) {
  .ssanggab-toast {
    bottom: 20px;
    padding: 14px 24px;
    font-size: 0.9rem;
    max-width: 90%;
  }
}

/* ========== Loading View Styles ========== */
.ssanggab-loading-view {
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.ssanggab-loading-view.hidden {
  display: none;
}

.ssanggab-loading-content {
  text-align: center;
}

.loading-sparkles {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}

.sparkle-dot {
  width: 12px;
  height: 12px;
  background: var(--ssanggab-lavender);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--ssanggab-neon-glow);
  animation: sparkle-pulse 1.4s ease-in-out infinite;
}

.sparkle-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.sparkle-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sparkle-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

.loading-text {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.3rem;
  color: var(--ssanggab-lavender);
  margin: 0;
  animation: text-fade 2s ease-in-out infinite;
}

@keyframes text-fade {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Disabled zodiac buttons during loading */
.zodiac-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.zodiac-btn:disabled:hover {
  background: transparent;
  box-shadow: none;
  transform: none !important;
}

/* ========== Error Message Styles ========== */
.ssanggab-error {
  background: rgba(220, 53, 69, 0.1);
  border: 2px solid rgba(220, 53, 69, 0.4);
  border-radius: 8px;
  padding: 24px;
  margin: 20px;
  text-align: center;
}

.ssanggab-error-title {
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.2rem;
  color: #dc3545;
  margin: 0 0 12px 0;
}

.ssanggab-error-message {
  font-family: 'Nanum Pen Script', serif;
  font-size: 1.1rem;
  color: var(--ssanggab-text);
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.ssanggab-error-retry {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.9rem;
  padding: 10px 20px;
  background: rgba(195, 182, 255, 0.15);
  border: 2px solid var(--ssanggab-lavender);
  color: var(--ssanggab-lavender);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.ssanggab-error-retry:hover {
  background: rgba(195, 182, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--ssanggab-neon-glow);
}