/**
 * 魔兽世界任务风格主题样式
 * 基于魔兽世界任务界面的设计风格
 */

/* 导入魔兽世界中世纪风格字体 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=MedievalSharp&family=Uncial+Antiqua&display=swap');

/* 魔兽世界任务风格颜色变量 */
:root {
  /* 背景色 - 深色主题 */
  --wow-bg-dark: #1a0f0a;
  --wow-bg-darker: #0f0805;
  --wow-parchment: #d4c4a8;
  --wow-parchment-dark: #b89d78;
  --wow-parchment-light: #e8ddc8;

  /* 金色/古铜色配色 */
  --wow-gold: #d4af37;
  --wow-gold-light: #f4e4bc;
  --wow-gold-dark: #b8941f;
  --wow-bronze: #cd7f32;
  --wow-bronze-dark: #8b5a2b;

  /* 文字颜色 */
  --wow-text-dark: #2c1810;
  --wow-text-light: #f4e4bc;
  --wow-text-gold: #d4af37;

  /* 边框和装饰 */
  --wow-border-gold: #d4af37;
  --wow-border-gold-dark: #b8941f;
  --wow-shadow: rgba(0, 0, 0, 0.8);
}

/* 全局背景 - 深色羊皮纸纹理 */
body {
  background: var(--wow-bg-dark) !important;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(205, 127, 50, 0.08) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(212, 175, 55, 0.05) 3px,
      rgba(212, 175, 55, 0.05) 6px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(139, 90, 43, 0.03) 2px,
      rgba(139, 90, 43, 0.03) 4px
    ) !important;
  background-attachment: fixed !important;
  color: var(--wow-text-light) !important;
  font-family: 'Cinzel', serif !important;
  min-height: 100vh !important;
}

/* 优化页面背景 - 添加更丰富的纹理 */
#page {
  background: transparent !important;
  position: relative !important;
}

#page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(205, 127, 50, 0.08) 0%, transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(212, 175, 55, 0.02) 1px,
      rgba(212, 175, 55, 0.02) 2px
    );
  pointer-events: none;
  z-index: 0;
}

#page > * {
  position: relative;
  /*z-index: 1;*/
}

.home-2 .tf-about{
  margin-top: 20px;
}

/* 羊皮纸卡片样式 */
.wow-quest-card {
  background: var(--wow-parchment) !important;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(184, 157, 120, 0.1) 0%, transparent 70%) !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
  border: 3px solid var(--wow-border-gold) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.3),
    inset 0 0 30px rgba(212, 175, 55, 0.1),
    0 4px 15px var(--wow-shadow) !important;
  color: var(--wow-text-dark) !important;
  padding: 30px !important;
  position: relative !important;
}

.wow-quest-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, var(--wow-gold), var(--wow-bronze), var(--wow-gold));
  border-radius: 8px;
  z-index: -1;
  opacity: 0.6;
}

/* 头部样式 */
.header {
  background: rgba(26, 15, 10, 0.95) !important;
  border-bottom: 2px solid var(--wow-border-gold) !important;
  box-shadow: 0 4px 20px var(--wow-shadow) !important;
  backdrop-filter: blur(10px);
}

.header .menu a {
  color: var(--wow-text-light) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
}

.header .menu a:hover,
.header .menu .current-menu-item a {
  color: var(--wow-gold) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
}

/* 标题样式 - 任务标题风格 */
h1.heading, h2.heading, h3.heading {
  font-family: 'Uncial Antiqua', cursive !important;
  color: var(--wow-gold) !important;
  text-shadow:
    2px 2px 4px var(--wow-shadow),
    0 0 20px rgba(212, 175, 55, 0.5) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

h2.heading {
  font-size: 3.5rem !important;
}

/* 副标题 */
.sub-heading {
  color: var(--wow-text-light) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.2rem !important;
  line-height: 1.8 !important;
}

/* 按钮样式 - 任务按钮 */
.tf-button {
  background: linear-gradient(135deg, var(--wow-gold), var(--wow-gold-dark)) !important;
  border: 2px solid transparent !important;
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.tf-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.tf-button:hover::before {
  left: 100%;
}

.tf-button:hover {
  background: linear-gradient(135deg, var(--wow-gold-light), var(--wow-gold)) !important;
  box-shadow:
    0 6px 20px rgba(212, 175, 55, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

.tf-button:active {
  transform: translateY(0) !important;
}

/* 商品卡片样式 */
.tf-product {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.2),
    inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.tf-product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wow-gold), var(--wow-bronze), var(--wow-gold));
  z-index: 1;
}

.tf-product:hover {
  border-color: var(--wow-gold-light) !important;
  box-shadow:
    0 8px 25px rgba(212, 175, 55, 0.4),
    inset 0 0 30px rgba(212, 175, 55, 0.1) !important;
  transform: translateY(-5px) !important;
}

.tf-product .image {
  border-bottom: 2px solid var(--wow-border-gold) !important;
  position: relative !important;
}

.tf-product .name {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  padding: 15px !important;
}

.tf-product .name a {
  color: var(--wow-text-dark) !important;
  transition: color 0.3s ease !important;
}

.tf-product .name a:hover {
  color: var(--wow-gold-dark) !important;
}

.tf-product.active {
  border-color: var(--wow-gold-light) !important;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.6),
    inset 0 0 40px rgba(212, 175, 55, 0.15) !important;
}

/* 步骤卡片样式 */
.tf-work, .tf-step {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 30px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.2),
    inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.tf-work:hover, .tf-step:hover {
  border-color: var(--wow-gold-light) !important;
  box-shadow:
    0 8px 25px rgba(212, 175, 55, 0.4),
    inset 0 0 30px rgba(212, 175, 55, 0.1) !important;
  transform: translateY(-5px) !important;
}

.tf-work.active, .tf-step.active {
  border-color: var(--wow-gold-light) !important;
  background: linear-gradient(135deg, var(--wow-parchment-light), var(--wow-parchment)) !important;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.5),
    inset 0 0 40px rgba(212, 175, 55, 0.1) !important;
}

.tf-work .step, .tf-step .sub-number {
  color: var(--wow-gold-dark) !important;
  font-family: 'Uncial Antiqua', cursive !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
}

.tf-work .title, .tf-step h3 {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
}

.tf-work .title a {
  color: var(--wow-text-dark) !important;
  transition: color 0.3s ease !important;
}

.tf-work .title a:hover {
  color: var(--wow-gold-dark) !important;
}

/* 关于区域样式 */
.tf-about {
  background: transparent !important;
  position: relative !important;
}

.tf-about .tf-heading {
  color: var(--wow-text-light) !important;
}

.tf-about .sub-heading {
  color: var(--wow-text-light) !important;
  opacity: 0.9 !important;
}

/* 计数器样式 */
.tf-counter {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.2),
    inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
}

.tf-counter h6 {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
}

.tf-counter .content {
  color: var(--wow-gold-dark) !important;
  font-family: 'Uncial Antiqua', cursive !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
}

/* 详情页样式 */
.tf-item-detail {
  background: transparent !important;
}

.tf-item-detail-inner {
  background: var(--wow-parchment) !important;
  border: 3px solid var(--wow-border-gold) !important;
  border-radius: 8px !important;
  padding: 40px !important;
  box-shadow:
    0 4px 20px rgba(212, 175, 55, 0.3),
    inset 0 0 30px rgba(212, 175, 55, 0.1) !important;
}

.tf-item-detail-inner .title {
  color: var(--wow-text-dark) !important;
  font-family: 'Uncial Antiqua', cursive !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.tf-item-detail-inner .des {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  line-height: 1.8 !important;
  opacity: 0.9 !important;
}

.infor-item-box {
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid var(--wow-border-gold) !important;
  border-radius: 4px !important;
  padding: 15px !important;
  margin-bottom: 10px !important;
}

.infor-item-box .category {
  color: var(--wow-gold-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
}

.infor-item-box .name {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 500 !important;
}

.price {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin: 20px 0 !important;
}

.price .heading {
  color: var(--wow-gold-dark) !important;
  margin-right: 10px !important;
}

/* FAQ样式 */
.tf-flat-accordion2 .flat-toggle2 {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  margin-bottom: 15px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.2),
    inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
}

.tf-flat-accordion2 .toggle-title {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  padding: 20px !important;
}

.tf-flat-accordion2 .toggle-content {
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  padding: 0 20px 20px 20px !important;
  line-height: 1.8 !important;
}

/* 页面标题区域 */
.tf-page-title {
  background: linear-gradient(135deg, rgba(26, 15, 10, 0.9), rgba(15, 8, 5, 0.9)) !important;
  border-bottom: 3px solid var(--wow-border-gold) !important;
  padding: 60px 0 !important;
  position: relative !important;
}

.tf-page-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(212, 175, 55, 0.05) 2px,
      rgba(212, 175, 55, 0.05) 4px
    );
  opacity: 0.5;
}

.page-title-heading {
  color: var(--wow-gold) !important;
  font-family: 'Uncial Antiqua', cursive !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  text-shadow:
    2px 2px 4px var(--wow-shadow),
    0 0 20px rgba(212, 175, 55, 0.5) !important;
  position: relative !important;
  z-index: 1 !important;
}

.breadcrumbs {
  position: relative !important;
  z-index: 1 !important;
}

.breadcrumbs li {
  color: var(--wow-text-light) !important;
  font-family: 'Cinzel', serif !important;
}

.breadcrumbs li a {
  color: var(--wow-gold-light) !important;
  transition: color 0.3s ease !important;
}

.breadcrumbs li a:hover {
  color: var(--wow-gold) !important;
}

/* 滑块区域 */
/*.tf-slider {*/
/*  background: linear-gradient(135deg, rgba(26, 15, 10, 0.95), rgba(15, 8, 5, 0.95)) !important;*/
/*  position: relative !important;*/
/*  padding: 100px 0 !important;*/
/*}*/

/*.tf-slider::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  background-image: */
/*    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 70%),*/
/*    repeating-linear-gradient(*/
/*      45deg,*/
/*      transparent,*/
/*      transparent 5px,*/
/*      rgba(212, 175, 55, 0.03) 5px,*/
/*      rgba(212, 175, 55, 0.03) 10px*/
/*    );*/
/*  opacity: 0.6;*/
/*}*/

/*.tf-slider-item .heading {*/
/*  color: var(--wow-gold) !important;*/
/*  font-family: 'Uncial Antiqua', cursive !important;*/
/*  font-size: 4rem !important;*/
/*  font-weight: 700 !important;*/
/*  text-shadow: */
/*    3px 3px 6px var(--wow-shadow),*/
/*    0 0 30px rgba(212, 175, 55, 0.6) !important;*/
/*  position: relative !important;*/
/*  z-index: 1 !important;*/
/*}*/

/*.tf-slider-item .sub-heading {*/
/*  color: var(--wow-text-light) !important;*/
/*  font-family: 'Cinzel', serif !important;*/
/*  font-size: 1.3rem !important;*/
/*  position: relative !important;*/
/*  z-index: 1 !important;*/
/*}*/

/* 图标装饰 */
.tf-work .image img,
.tf-step .step-title::before {
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)) !important;
}

/* 滚动到顶部按钮 */
#scroll-top {
  background: linear-gradient(135deg, var(--wow-gold), var(--wow-gold-dark)) !important;
  border: 2px solid transparent !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.4),
    inset 0 0 20px rgba(212, 175, 55, 0.1) !important;
}

#scroll-top:hover {
  background: linear-gradient(135deg, var(--wow-gold-light), var(--wow-gold)) !important;
  box-shadow:
    0 6px 20px rgba(212, 175, 55, 0.6),
    inset 0 0 30px rgba(212, 175, 55, 0.15) !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  h2.heading {
    font-size: 2.5rem !important;
  }

  .tf-slider-item .heading {
    font-size: 2.5rem !important;
  }

  .page-title-heading {
    font-size: 2rem !important;
  }
}

/* RainbowKit连接按钮样式 - 已还原为默认样式 */
/* 顶部右上角的钱包连接按钮使用RainbowKit默认样式 */

/* 确保头部右上角的 ConnectButton 使用默认样式 */
.header-right [class*="rk"],
.header-right [class*="RainbowKit"],
.header-right [class*="ConnectButton"],
.header-right button[data-testid],
.header-right [data-testid] button {
  /* 移除所有自定义样式，使用RainbowKit默认样式 */
  background: unset !important;
  border: unset !important;
  color: unset !important;
  font-family: unset !important;
  font-weight: unset !important;
  border-radius: unset !important;
  box-shadow: unset !important;
  transition: unset !important;
  text-transform: unset !important;
  letter-spacing: unset !important;
  padding: unset !important;
  transform: unset !important;
}

.header-right [class*="rk"]:hover,
.header-right [class*="RainbowKit"]:hover,
.header-right [class*="ConnectButton"]:hover,
.header-right button[data-testid]:hover,
.header-right [data-testid] button:hover {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
  transform: unset !important;
}

/* 钱包地址和网络信息文字 - 保持RainbowKit默认样式 */
/* 已移除自定义颜色，使用RainbowKit默认样式 */

/* RainbowKit 模态框样式 - 透明效果 */
[class*="rk-modal"],
[class*="rk-connect-modal"],
[class*="rk-account-modal"],
[class*="rk-chain-modal"],
div[class*="rk-modal"],
[class*="rk-dialog"],
[class*="rk-menu"],
[class*="rk-dropdown"] {
  background: rgba(26, 15, 10, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* 模态框内容 - 浅黑色背景 */
[class*="rk-modal-content"],
[class*="rk-dialog"],
div[class*="rk-modal"] > div,
[class*="rk-modal"] [class*="rk-dialog"],
[class*="rk-chain-modal"] > div,
[class*="rk-chain-modal"] [class*="rk-dialog"] {
  background: #2a2a2a !important;
  background-image: none !important;
  border: 3px solid var(--wow-border-gold) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.4),
    inset 0 0 40px rgba(212, 175, 55, 0.1),
    0 8px 32px var(--wow-shadow) !important;
  color: var(--wow-text-light) !important;
  padding: 30px !important;
  position: relative !important;
}

/* 模态框标题 */
[class*="rk-modal"] h1,
[class*="rk-modal"] h2,
[class*="rk-modal"] h3,
[class*="rk-modal"] [class*="title"],
[class*="rk-chain-modal"] h1,
[class*="rk-chain-modal"] h2,
[class*="rk-chain-modal"] h3,
[class*="rk-chain-modal"] [class*="title"] {
  color: var(--wow-gold) !important;
  font-family: 'Uncial Antiqua', cursive !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 模态框文本 */
[class*="rk-modal"] p,
[class*="rk-modal"] span,
[class*="rk-modal"] div,
[class*="rk-chain-modal"] p,
[class*="rk-chain-modal"] span,
[class*="rk-chain-modal"] div {
  color: var(--wow-text-light) !important;
  font-family: 'Cinzel', serif !important;
}

/* 钱包地址显示 - 已还原为默认样式 */

/* 钱包选项按钮 - 移除深色背景 */
[class*="rk-option"],
[class*="rk-wallet-option"],
[class*="rk-wallet-option"] button,
button[class*="rk-option"],
[class*="rk-chain-option"],
[class*="rk-chain-option"] button,
button[class*="rk-chain-option"],
div[class*="rk-chain-option"],
[class*="rk-chain"] button,
[class*="rk-chain"] div {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  color: var(--wow-text-light) !important;
  font-family: 'Cinzel', serif !important;
  padding: 15px 20px !important;
  margin-bottom: 10px !important;
  transition: all 0.3s ease !important;
  box-shadow:
    0 2px 8px rgba(212, 175, 55, 0.2) !important;
}

[class*="rk-option"]:hover,
[class*="rk-wallet-option"]:hover,
button[class*="rk-option"]:hover,
[class*="rk-chain-option"]:hover,
button[class*="rk-chain-option"]:hover {
  background: rgba(212, 175, 55, 0.1) !important;
  background-color: rgba(212, 175, 55, 0.1) !important;
  border-color: var(--wow-gold-light) !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* 网络选项按钮内的文字和图标 */
[class*="rk-chain-option"] *,
[class*="rk-chain"] *,
[class*="rk-option"] * {
  background: transparent !important;
  background-color: transparent !important;
}

/* 已连接的网络状态 */
[class*="rk-chain-option"][class*="connected"],
[class*="rk-chain"][class*="connected"],
[class*="rk-chain-option"][class*="active"] {
  border-color: var(--wow-gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
}

/* 连接/断开按钮 - 仅应用于模态框内的按钮，不影响顶部按钮 */
/* 模态框内的连接/断开按钮保持魔兽世界风格 */
[class*="rk-disconnect-button"] {
  background: linear-gradient(135deg, var(--wow-bronze-dark), var(--wow-bronze)) !important;
  border: 2px solid transparent !important;
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
}

/* 断开连接按钮特殊样式 */
[class*="disconnect"],
button[class*="disconnect"] {
  background: linear-gradient(135deg, var(--wow-bronze-dark), var(--wow-bronze)) !important;
  border-color: var(--wow-bronze-dark) !important;
}

[class*="disconnect"]:hover {
  background: linear-gradient(135deg, var(--wow-bronze), var(--wow-bronze-dark)) !important;
  box-shadow:
    0 6px 20px rgba(205, 127, 50, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 复制地址按钮 */
[class*="copy"],
button[class*="copy"] {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  color: var(--wow-text-dark) !important;
}

[class*="copy"]:hover {
  background: var(--wow-parchment-light) !important;
  border-color: var(--wow-gold-light) !important;
}

/* 网络选择器 */
[class*="rk-chain"],
[class*="rk-network"],
select[class*="rk"] {
  background: var(--wow-parchment) !important;
  border: 2px solid transparent !important;
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

/* 余额显示 */
[class*="rk-balance"],
[class*="balance"],
span[class*="balance"] {
  color: var(--wow-gold-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
}

/* 头像/图标 */
[class*="rk-avatar"],
img[class*="rk-avatar"],
[class*="avatar"] {
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

/* 关闭按钮 */
[class*="rk-close"],
button[class*="rk-close"],
[class*="close"] {
  color: var(--wow-text-dark) !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transition: all 0.3s ease !important;
}

[class*="rk-close"]:hover,
button[class*="rk-close"]:hover {
  background: var(--wow-gold) !important;
  color: var(--wow-text-dark) !important;
  border-color: var(--wow-gold-light) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5) !important;
}

/* 通用RainbowKit样式覆盖 - 针对所有可能的类名 */
div[role="dialog"],
div[class*="Dialog"],
div[class*="dialog"],
div[class*="Modal"],
div[class*="modal"] {
  background: rgba(26, 15, 10, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* RainbowKit 连接模式下的所有按钮 - 已还原为默认样式 */
/* 顶部右上角的连接按钮使用RainbowKit默认样式 */

/* 账户信息显示区域 - 已还原为默认样式 */

/* 网络徽章 */
div[class*="rk-chain-badge"],
span[class*="rk-chain"],
[class*="chain-badge"] {
  background: var(--wow-parchment) !important;
  border: 1px solid var(--wow-border-gold) !important;
  border-radius: 4px !important;
  color: var(--wow-text-dark) !important;
  font-family: 'Cinzel', serif !important;
  padding: 4px 8px !important;
  font-size: 0.9rem !important;
}

/* 下拉菜单 - 透明效果 */
div[class*="rk-dropdown"],
div[class*="rk-menu"],
ul[class*="rk-menu"],
[class*="rk-account-menu"],
[class*="rk-chain-menu"] {
  background: rgba(26, 15, 10, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
}

ul[class*="rk-menu"] li,
div[class*="rk-menu"] li {
  background: transparent !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding: 10px !important;
  transition: all 0.3s ease !important;
}

ul[class*="rk-menu"] li:hover,
div[class*="rk-menu"] li:hover {
  background: var(--wow-parchment-light) !important;
  border-color: var(--wow-gold-light) !important;
}

ul[class*="rk-menu"] li button,
div[class*="rk-menu"] li button,
[class*="rk-menu"] *,
[class*="rk-dropdown"] * {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  width: 100% !important;
  text-align: left !important;
  padding: 10px !important;
  box-shadow: none !important;
}

ul[class*="rk-menu"] li button:hover,
div[class*="rk-menu"] li button:hover,
[class*="rk-menu"] *:hover {
  background: transparent !important;
  transform: none !important;
  color: var(--wow-gold-light) !important;
}

/* 确保所有文本颜色正确 */
div[class*="rk"] *,
div[class*="RainbowKit"] * {
  color: inherit !important;
}

/* 钱包连接模态框的特定样式 */
div[class*="rk-modal"] > div > div,
div[class*="rk-dialog"] > div,
[class*="rk-chain-modal"] > div > div {
  background: #2a2a2a !important;
  border: 3px solid var(--wow-border-gold) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.4),
    inset 0 0 40px rgba(212, 175, 55, 0.1) !important;
}

/* 网络切换模态框特定样式 */
[class*="rk-chain-modal"],
[class*="rk-modal"][class*="chain"] {
  background: rgba(26, 15, 10, 0.6) !important;
}

[class*="rk-chain-modal"] > div,
[class*="rk-chain-modal"] [class*="rk-dialog"] {
  background: #2a2a2a !important;
  background-image: none !important;
}

/* 移除所有网络选项按钮的背景色 */
[class*="rk-chain-option"],
[class*="rk-chain"] [role="button"],
[class*="rk-chain"] button,
div[class*="rk-chain-option"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid transparent !important;
}

[class*="rk-chain-option"] > *,
[class*="rk-chain"] [role="button"] > * {
  background: transparent !important;
  background-color: transparent !important;
}

/* 额外的网络选项样式覆盖 - 确保所有变体都被覆盖 */
div[class*="ChainOption"],
button[class*="ChainOption"],
div[class*="chain-option"],
button[class*="chain-option"],
div[role="button"][class*="chain"],
div[role="button"][class*="Chain"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  color: var(--wow-text-light) !important;
  padding: 15px 20px !important;
  margin-bottom: 10px !important;
}

div[class*="ChainOption"]:hover,
button[class*="ChainOption"]:hover {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: var(--wow-gold-light) !important;
}

/* 确保网络选项内部的所有元素都是透明背景 */
div[class*="ChainOption"] *,
button[class*="ChainOption"] *,
div[class*="chain-option"] *,
[class*="rk-chain-option"] *,
[class*="rk-chain"] [role="button"] * {
  background: transparent !important;
  background-color: transparent !important;
}

/* 网络选项的文字容器 */
div[class*="ChainOption"] > div,
div[class*="chain-option"] > div,
[class*="rk-chain"] > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* 优化背景渐变对比度 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at top left, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(205, 127, 50, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

/* Logo样式 */
#logo_header,
.main-logo img {
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)) !important;
  transition: filter 0.3s ease !important;
}

#logo_header:hover,
.main-logo img:hover {
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8)) !important;
}

/* 商品图片边框装饰 */
.tf-product .image img {
  border: 2px solid transparent !important;
  border-radius: 4px !important;
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.2),
    inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
}

.tf-item-detail-image img {
  border: 3px solid var(--wow-border-gold) !important;
  border-radius: 8px !important;
  box-shadow:
    0 8px 25px rgba(212, 175, 55, 0.4),
    inset 0 0 30px rgba(212, 175, 55, 0.1) !important;
}

/* 修复部分背景透明问题 */
.tf-section {
  background: transparent !important;
}

.section-work {
  background: transparent !important;
}

.tf-collection {
  background: transparent !important;
}

/* 预加载动画 */
.preload {
  background: var(--wow-bg-dark) !important;
}

.preload-logo {
  border-color: var(--wow-gold) !important;
}

/* 增强文本可读性 */
p, .sub-heading, .des {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 链接样式 */
a {
  transition: all 0.3s ease !important;
}

a:hover {
  color: var(--wow-gold) !important;
}

/* 确保所有文本在羊皮纸背景上清晰可见 */
.wow-quest-card p,
.wow-quest-card .sub-heading,
.tf-item-detail-inner p,
.tf-item-detail-inner .des {
  color: var(--wow-text-dark) !important;
  text-shadow: none !important;
}

/* 滑动条样式 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--wow-gold) !important;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5)) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--wow-gold-light) !important;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)) !important;
}