/* Legacy owl components - deprecated in favor of modern share system */
/* Kept for backward compatibility but hidden by default */

.owl-sprite {
  width: 40px;
  height: 40px;
  background: url('/assets/images/owl-sprite.svg') 0 0 no-repeat;
  display: none; /* Hidden by default */
}

.owl-messenger {
  position: relative;
  margin: 1.5rem 0;
  display: none; /* Hidden by default */
}

.owl-button {
  background: #3a2e28;
  color: #f5eedc;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.owl-button:hover {
  transform: scale(1.05) rotate(-2deg);
}

.owl-status {
  min-height: 1.5rem;
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
}

/* Owl Sharing Modal Styles - High specificity to override conflicts */
#sharing-modal.parchment-scroll {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: none !important;
    place-items: center !important;
    z-index: 2000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    transform: none !important;
    padding: 0 !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#sharing-modal.parchment-scroll.active {
    display: grid !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#sharing-modal .incantation-box {
    background: #f5eedc !important;
    padding: 2rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
    border: 2px solid #3a2e28 !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

#sharing-modal.parchment-scroll.active .incantation-box {
    opacity: 1 !important;
    transform: scale(1) !important;
}

#sharing-modal .incantation-box h3 {
    color: #3a2e28;
    font-family: 'MedievalSharp', cursive;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.parchment-input {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid #3a2e28;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.parchment-input:focus {
    outline: none;
    border-color: var(--immortal-gold);
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.owl-sprite {
    margin: 1rem auto;
    animation: owlFlap 0.5s steps(3) infinite;
}

.owl-status {
    color: #3a2e28;
    font-family: 'MedievalSharp', cursive;
    font-size: 0.9rem;
}

/* Animation for owl flying */
@keyframes owlFly {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.owl-sprite.flying {
    animation: owlFly 2s ease-in-out infinite;
}