/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* MMORPG风格背景 */
body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  transition: background-image 0.5s ease;
  font-family: 'Cinzel', serif, 'Noto Sans SC', sans-serif;
  color: #e0d3b6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* 中世纪风格内容容器 */
.content-wrapper {
  background: rgba(20, 15, 10, 0.85);
  border: 2px solid #8b5a2b;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(139, 69, 19, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.7);
  padding: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  position: relative;
  overflow: hidden;
}

/* 添加中世纪装饰边框 */
.content-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="%238b5a2b" stroke-width="2" stroke-dasharray="10,5"/></svg>');
  pointer-events: none;
  opacity: 0.3;
}

/* MMORPG标题样式 */
h1, h2, h3, h4 {
  font-family: 'MedievalSharp', cursive;
  color: #d4af37;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* 按钮样式 - MMORPG金属质感 */
button, .btn {
  background: linear-gradient(to bottom, #8b5a2b, #5d4037);
  border: 1px solid #d4af37;
  color: #ffd700;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* 添加金属铆钉效果 */
button::before, .btn::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 3px;
  pointer-events: none;
}

button:hover, .btn:hover {
  background: linear-gradient(to bottom, #a0522d, #6d4c41);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 215, 0, 0.5);
  color: #fffacd;
}

/* 方框样式 - 中世纪卷轴效果 */
.card, .form-group, .notice-list {
  background: rgba(25, 20, 15, 0.8);
  border: 1px solid #5d4037;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  padding: 15px;
  position: relative;
  background-image:
    linear-gradient(rgba(139, 69, 19, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 69, 19, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 添加卷轴边缘效果 */
.card::before, .card::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  background: linear-gradient(to right, #8b5a2b, #5d4037, #8b5a2b);
  left: 0;
}

.card::before {
  top: 0;
  border-radius: 6px 6px 0 0;
}

.card::after {
  bottom: 0;
  border-radius: 0 0 6px 6px;
}

/* 导航栏样式 */
.navbar {
  background: rgba(30, 15, 5, 0.9);
  border-bottom: 2px solid #d4af37;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

/* 输入框样式 */
input, textarea, select {
  background: rgba(40, 25, 15, 0.7);
  border: 1px solid #8b5a2b;
  color: #e0d3b6;
  padding: 8px 12px;
  border-radius: 4px;
}


/* 页脚样式 */
footer {
  background: rgba(20, 10, 5, 0.9);
  border-top: 2px solid #8b5a2b;
  padding: 1rem;
  text-align: center;
  color: #b0a294;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .content-wrapper {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 1.8rem;
  }
}

/* 添加中世纪图标装饰 */
.icon-decor {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.icon-decor.tl { top: 10px; left: 10px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5a2b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }
.icon-decor.tr { top: 10px; right: 10px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5a2b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }
.icon-decor.bl { bottom: 10px; left: 10px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5a2b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }
.icon-decor.br { bottom: 10px; right: 10px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5a2b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }