.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.hanji-texture {
  background-color: #fbf9f5;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm76-26c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-11 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-33-53c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-3-4c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM46 9c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z' fill='%23171818' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Gender buttons */
.gender-btn.selected {
  border-color: #775a19;
  background-color: #fbf9f5;
  color: #775a19;
}
.gender-btn:not(.selected) {
  border-color: transparent;
  background-color: #f5f3ef;
  color: #444748;
}

/* Zodiac buttons */
.zodiac-btn.selected {
  border-color: #775a19;
  background-color: rgba(254, 212, 136, 0.2);
}
.zodiac-btn.selected .zodiac-emoji {
  opacity: 1;
}

/* Toast */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #ba1a1a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-family: Manrope, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#toast.show {
  opacity: 1;
}

/* Modal */
#result-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(23, 24, 24, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
#result-modal.open {
  display: flex;
}
#result-modal .modal-box {
  background: #fbf9f5;
  border-radius: 1rem;
  padding: 3rem;
  max-width: 560px;
  width: 90%;
  position: relative;
  animation: slideUp 0.4s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading Spinner Overlay ─────────────────────────────────────────────── */
@keyframes subtle-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.animate-subtle-rotate        { animation: subtle-rotate 20s linear infinite; }
.animate-subtle-rotate-slow   { animation: subtle-rotate 10s linear infinite; }
.animate-subtle-rotate-reverse{ animation: subtle-rotate 15s linear infinite reverse; }
.animate-pulse-soft           { animation: pulse-soft 4s ease-in-out infinite; }
.animate-float                { animation: float 6s ease-in-out infinite; }

.grain-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
}

#loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #171818;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
#loading-overlay.open {
  display: flex;
}
#loading-overlay.closing {
  animation: fadeOut 0.4s ease forwards;
}