/* 观音灵签 - 自定义样式 */

body {
  font-family: 'KaiTi', '楷体', serif;
  background: linear-gradient(135deg, #FDF8F1 0%, #F4E1C4 100%);
}

.ancient-border {
  border: 2px solid #D4A574;
  box-shadow: inset 0 0 20px rgba(212, 165, 116, 0.1);
}

.bamboo-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B5A2B' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 动画 */
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes spin-fall {
  0% { transform: translateY(-200px) rotate(0deg); }
  100% { transform: translateY(0) rotate(720deg); }
}

@keyframes pulse {
  50% { opacity: 1; }
}

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

@keyframes rise-up {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.shake-animation {
  animation: shake 0.3s ease-in-out 3;
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.pulse {
  animation: pulse 2s infinite;
}

.golden-glow {
  animation: golden-glow 1s ease-in-out infinite;
}

.rise-up {
  animation: rise-up 0.6s ease-out forwards;
}

/* 按钮样式 */
.seal-button {
  background: linear-gradient(135deg, #C9302C 0%, #A52A2A 100%);
  border: 3px solid #8B4513;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.seal-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.seal-button:active {
  transform: translateY(1px);
}

/* 页面样式 */
.page {
  display: none;
  min-height: 100vh;
}

.page.active {
  display: block;
}

/* 导航样式 */
.nav-item {
  transition: all 0.3s ease;
}

.nav-item.active {
  color: #8B5A2B;
}

/* 滚动条样式 */
.scroll-style {
  scrollbar-width: thin;
  scrollbar-color: #8B5A2B #FDF8F1;
}

.scroll-style::-webkit-scrollbar {
  width: 6px;
}

.scroll-style::-webkit-scrollbar-track {
  background: #FDF8F1;
}

.scroll-style::-webkit-scrollbar-thumb {
  background: #8B5A2B;
  border-radius: 3px;
}

/* 音效开关样式 */
.toggle-switch {
  transition: background-color 0.3s ease;
}

.toggle-switch-active {
  background-color: #D4B28C !important;
}

.toggle-switch-switch {
  transition: transform 0.3s ease;
}

/* 手势摇签提示 */
.shake-hint {
  animation: pulse 2s infinite;
}

/* 响应式字体大小 */
.font-size-small {
  font-size: 16px !important;
}

.font-size-medium {
  font-size: 18px !important;
}

.font-size-large {
  font-size: 20px !important;
}