* { box-sizing: border-box; }
body {
  font-family: 'Marcellus', 'Cormorant Garamond', serif;
  background: linear-gradient(180deg, #1E0A2E 0%, #2D1248 50%, #1E0A2E 100%);
  min-height: 100vh;
}
.font-script { font-family: 'Great Vibes', cursive; }
.font-elegant { font-family: 'Cormorant Garamond', serif; }
.font-jp { font-family: 'Noto Sans JP', sans-serif; }

.fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.pulse-glow {
  animation: pulseGlow 2.5s infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.3); }
  50% { box-shadow: 0 0 40px rgba(147, 51, 234, 0.6); }
}

.choice-btn {
  transition: all 0.2s ease;
  border: 1px solid rgba(212, 168, 83, 0.3);
  background: rgba(30, 10, 46, 0.6);
  backdrop-filter: blur(8px);
}
.choice-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 168, 83, 0.7);
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3);
}

.progress-bar { transition: width 0.4s ease; }

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite alternate;
}
@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.glass-card {
  background: rgba(30, 10, 46, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 168, 83, 0.2);
}

#canvas-container canvas {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* SEO content sections */
.seo-section {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.seo-section h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #D4A853;
  margin-bottom: 0.75rem;
}

.seo-section p,
.seo-section dd {
  font-family: 'Noto Sans JP', sans-serif;
  color: #d8b4fe;
  font-size: 0.875rem;
  line-height: 1.75;
}

.seo-section a {
  color: #C084FC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seo-section a:hover {
  color: #D4A853;
}

.faq-item dt {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #e9d5ff;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.faq-item dd {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
}
.faq-item:last-child dd {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Inter-page nav */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.page-nav a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.75rem;
  color: #c4b5fd;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: 9999px;
  transition: all 0.2s;
  text-decoration: none;
}
.page-nav a:hover {
  border-color: rgba(212, 168, 83, 0.6);
  color: #D4A853;
}