/* 首页样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'SimSun', serif;
  background-color: #f8f0d8; /* 淡金色背景 */
  color: #8B4513; /* 深棕色文字 */
  overflow-x: hidden;
  touch-action: manipulation;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* 定义全局颜色变量 */
:root {
  --primary-gold: #D4AF37; /* 主要金色 */
  --light-gold: #F9E076; /* 浅金色 */
  --dark-gold: #B8860B; /* 深金色 */
  --accent-gold: #FFD700; /* 强调金色 */
  --sacred-white: #FFF8E7; /* 神圣白色 */
  --sacred-brown: #8B4513; /* 神圣棕色 */
  --sacred-red: #A52A2A; /* 神圣红色 */
  --sacred-green: #2E8B57; /* 神圣绿色 */
}

.home-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('../../img/UI/index.png') no-repeat center/cover;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
  /* 添加金色渐变叠加层 */
  box-shadow: inset 0 0 200px rgba(218, 165, 32, 0.4);
}

/* 添加神圣光芒效果 */
.home-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 223, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 30%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* 确保内容在光芒效果之上 */
.status-header, .dice-arena, .world-info {
  position: relative;
  z-index: 2;
}

.status-header {
  height: auto;
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  text-align: center;
  position: relative;
}

/* 标题容器 */
.title-container {
  position: relative;
  margin-bottom: 15px;
  padding: 5px 30px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.1); /* 轻微的暗色背景，增强文字对比度 */
  border: 2px solid rgba(230, 195, 92, 0.3); /* 与标题同色系的边框 */
  box-shadow: 0 0 15px rgba(230, 195, 92, 0.3); /* 柔和的金色光晕 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 标题装饰 */
.title-decoration {
  font-size: 2rem;
  margin: 0 15px;
  opacity: 1;
  color: #E6C35C; /* 古典金色，与标题相同 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 与标题相同的阴影 */
  animation: spin 8s linear infinite; /* 减慢旋转速度，更加庄重 */
}

.title-decoration.left {
  animation-direction: normal;
}

.title-decoration.right {
  animation-direction: reverse;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.game-title {
  font-size: 3.2rem;
  font-weight: bold;
  color: #E6C35C; /* 古典金色，更符合中国传统审美 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 清晰的阴影，增强可读性 */
  letter-spacing: 4px;
  padding: 15px 25px;
  border-radius: 10px;
  position: relative;
  font-family: "楷体", "KaiTi", serif;
  margin-bottom: 20px;
  line-height: 1.3;
  transform: scale(1.05);
  white-space: nowrap; /* 防止文字换行 */
}

.game-title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(230, 195, 92, 0.8), transparent);
  box-shadow: 0 0 8px rgba(230, 195, 92, 0.5); /* 柔和的金色光晕 */
}

/* 因果系统样式 */
.karma-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 500px;
  position: relative;
  margin-top: 5px;
}

/* 刻度样式 */
.karma-scale {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  padding: 0 2px;
  position: relative;
}

.scale-mark {
  font-size: 11px;
  color: var(--sacred-brown);
  position: relative;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.3);
}

.scale-mark.negative {
  color: var(--sacred-red);
}

.scale-mark.positive {
  color: var(--sacred-green);
}

.scale-mark.center {
  font-weight: bold;
  color: var(--primary-gold);
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.scale-mark::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4px;
  background-color: currentColor;
}

/* 因果条样式 */
.karma-bar {
  width: 100%;
  height: 16px;
  background-color: rgba(255, 248, 220, 0.3);
  border-radius: 8px;
  overflow: hidden; /* 修改为hidden，防止溢出 */
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 215, 0, 0.3);
  border: 1px solid var(--primary-gold);
}

.karma-meter {
  height: 100%;
  width: 50%;
  background: linear-gradient(to right, var(--sacred-red), var(--sacred-green));
  transition: width 0.5s ease;
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

/* 为正值和负值添加不同的圆角 */
.karma-meter.positive {
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, var(--primary-gold), var(--sacred-green));
  box-shadow: 0 0 5px var(--sacred-green);
}

.karma-meter.negative {
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to left, var(--primary-gold), var(--sacred-red));
  box-shadow: 0 0 5px var(--sacred-red);
}

.karma-center-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: var(--primary-gold);
  z-index: 2;
  pointer-events: none; /* 确保不会干扰鼠标事件 */
  box-shadow: 0 0 3px var(--accent-gold);
}

.karma-label {
  margin-top: 5px;
  font-size: 14px;
  color: var(--sacred-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.3);
}

#karma-value {
  font-weight: bold;
  margin-left: 5px;
  min-width: 30px;
  text-align: center;
  background: -webkit-linear-gradient(var(--dark-gold), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

/* 正负值颜色 */
#karma-value.positive {
  background: -webkit-linear-gradient(var(--primary-gold), var(--sacred-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#karma-value.negative {
  background: -webkit-linear-gradient(var(--primary-gold), var(--sacred-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 按钮容器 */
.buttons-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
  width: 100%;
}

/* 重生按钮 */
.rebirth-btn {
  padding: 12px 30px;
  background: linear-gradient(to bottom, var(--accent-gold), var(--dark-gold));
  color: var(--sacred-brown);
  border: 3px solid var(--primary-gold);
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.5);
  letter-spacing: 2px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  animation: pulse-attention 2s infinite;
}

/* 天道系统按钮 */
.tiandao-btn {
  padding: 12px 30px;
  background: linear-gradient(to bottom, #4682B4, #1E4D7B);
  color: white;
  border: 3px solid #4682B4;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(70, 130, 180, 0.5);
  letter-spacing: 2px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

.tiandao-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 25px rgba(70, 130, 180, 0.7);
  background: linear-gradient(to bottom, #5F9EA0, #4682B4);
}

@keyframes pulse-attention {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.3);
  }
}

.rebirth-btn:hover:not(.locked) {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 215, 0, 0.7);
  background: linear-gradient(to bottom, var(--light-gold), var(--primary-gold));
}

.rebirth-btn.locked {
  background: linear-gradient(to bottom, #AAA, #777);
  cursor: not-allowed;
  position: relative;
  padding-left: 50px; /* 为锁图标留出空间 */
  border: 3px solid #999;
  animation: none;
  color: #555;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rebirth-btn.locked::before {
  content: "🔒";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.rebirth-btn.unlocking {
  animation: unlock-animation 2s forwards;
}

@keyframes unlock-animation {
  0% {
    background: linear-gradient(to bottom, #AAA, #777);
    padding-left: 50px; /* 保持与锁定状态相同的左内边距 */
    border-color: #999;
    color: #555;
  }
  40% {
    background: linear-gradient(to bottom, #FFCC00, #FFA500);
    transform: scale(1.1);
    padding-left: 50px;
    border-color: var(--primary-gold);
    color: var(--sacred-brown);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
  }
  60% {
    background: linear-gradient(to bottom, #FFCC00, #FFA500);
    transform: scale(1.1);
    padding-left: 30px; /* 过渡到无锁状态的内边距 */
    border-color: var(--primary-gold);
    color: var(--sacred-brown);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
  100% {
    background: linear-gradient(to bottom, var(--accent-gold), var(--dark-gold));
    transform: scale(1);
    padding-left: 30px;
    border-color: var(--primary-gold);
    color: var(--sacred-brown);
    animation: pulse-attention 2s infinite;
  }
}

/* 确保解锁后的按钮样式正确 */
.rebirth-btn.unlocking::before {
  animation: lock-fade-out 1s forwards;
}

@keyframes lock-fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 因果粒子 */
.karma-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: particle-rise 1.5s ease-out forwards;
  opacity: 0.8;
}

@keyframes particle-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-30px) scale(0);
    opacity: 0;
  }
}

.dice-arena {
  flex: 1;
  min-height: 40vh;
  display: flex;
  flex-direction: column; /* 改为列布局，使元素垂直排列 */
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 0;
  z-index: 2;
  overflow: visible;
}

.world-info {
  height: auto;
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* 口令面板 */
.secret-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 248, 220, 0.95);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.5);
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  border: 2px solid var(--primary-gold);
  min-width: 280px;
}

.secret-panel.active {
  display: flex;
  animation: panel-appear 0.3s forwards;
}

.secret-panel.closing {
  animation: panel-disappear 0.3s forwards;
}

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

/* 面板标题栏 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--primary-gold);
}

.panel-header span {
  font-size: 18px;
  font-weight: bold;
  color: var(--sacred-brown);
  text-shadow: 0 0 2px rgba(255, 215, 0, 0.3);
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--sacred-brown);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s;
}

.close-button:hover {
  color: var(--sacred-red);
}

/* 口令输入框 */
#secret-code {
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid var(--primary-gold);
  border-radius: 5px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--sacred-brown);
  text-align: center;
  letter-spacing: 2px;
}

#secret-code:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 验证按钮 */
#verify-button {
  padding: 10px 20px;
  background: linear-gradient(to bottom, var(--accent-gold), var(--dark-gold));
  color: var(--sacred-brown);
  border: 2px solid var(--primary-gold);
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 100px;
  text-align: center;
}

#verify-button:hover {
  background: linear-gradient(to bottom, var(--light-gold), var(--primary-gold));
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 世界卡片 */
.world-card {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(255, 248, 220, 0.7);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  border: 1px solid rgba(218, 165, 32, 0.3);
  max-width: 500px;
  width: 90%;
}

.world-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 248, 220, 0.9);
}

.world-card.highlight {
  animation: card-highlight 1s;
}

@keyframes card-highlight {
  0% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
}

.world-icon {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 各个世界的图标颜色 */
.world-icon-maritime {
  background-color: #1E90FF; /* 道奇蓝 - 海洋色调 */
  border: 2px solid #0066CC;
}

.world-icon-cultivation {
  background-color: #9370DB; /* 中等紫色 - 仙侠色调 */
  border: 2px solid #7B68EE;
}

.world-icon-dynasty {
  background-color: #CD5C5C; /* 印度红 - 王朝色调 */
  border: 2px solid #B22222;
}

.world-icon-apocalypse {
  background-color: #8B4513; /* 马鞍棕色 - 末日色调 */
  border: 2px solid #654321;
}

.world-icon-supernatural {
  background-color: #2F4F4F; /* 深石板灰 - 灵异色调 */
  border: 2px solid #1A2F2F;
}

.world-details {
  flex: 1;
}

.world-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--sacred-brown);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.world-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 10px;
  font-weight: normal;
}

.world-status-available {
  background-color: var(--sacred-green);
  color: white;
}

.world-status-coming-soon {
  background-color: #999;
  color: white;
}

.world-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 消息提示 - 固定在骰子正下方 */
.message-container {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 20px auto 10px auto; /* 上右下左 - 上边距20px，下边距10px，左右居中 */
  z-index: 5; /* 确保不会覆盖骰子和其他交互元素 */
  pointer-events: none; /* 允许点击穿透 */
  order: 2; /* 确保在骰子之后显示 */
  align-self: center; /* 确保水平居中 */
}

/* 骰子容器样式调整 */
.dice-container {
  margin-bottom: 20px; /* 增加底部边距，与消息容器保持距离 */
}

.message {
  position: relative;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.3);
  z-index: 5; /* 降低z-index，确保不会覆盖骰子 */
  pointer-events: none; /* 允许点击穿透 */
  margin: 0 auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-left: 4px solid transparent;
  max-width: 100%; /* 确保不会超出容器 */
  word-wrap: break-word; /* 允许长单词换行 */
  white-space: normal; /* 允许文本换行 */
  flex-wrap: wrap; /* 允许flex项目换行 */
}

.message.show {
  opacity: 1;
  animation: message-glow 2s infinite alternate, message-appear 0.5s forwards;
}

/* 消息类型样式 */
.message.info {
  border-left-color: #3498db;
}

.message.success {
  border-left-color: #2ecc71;
  background-color: rgba(46, 139, 87, 0.85);
}

.message.error {
  border-left-color: #e74c3c;
  background-color: rgba(165, 42, 42, 0.85);
}

@keyframes message-glow {
  from {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.3);
  }
  to {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.6);
  }
}

@keyframes message-appear {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .message-container {
    width: 90%;
    margin: 15px auto 5px auto; /* 调整边距 - 上边距15px，下边距5px */
  }

  .message {
    padding: 10px 15px;
    font-size: 14px;
    min-width: 0; /* 确保flex项目可以缩小 */
  }

  /* 确保倒计时不会导致文本溢出 */
  .countdown {
    margin-left: 8px;
    min-width: 24px;
    font-size: 12px;
  }

  /* 调整骰子容器在移动端的边距 */
  .dice-container {
    margin-bottom: 15px;
  }

  .world-card {
    padding: 8px;
    margin-bottom: 5px;
  }

  .world-icon {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }

  .world-name {
    font-size: 13px;
  }

  .world-description {
    font-size: 11px;
  }

  .dice-container {
    transform: scale(0.8);
  }

  /* 调整按钮在移动端的样式 */
  .buttons-container {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .rebirth-btn, .tiandao-btn {
    font-size: 16px;
    padding: 10px 20px;
    min-width: 120px;
  }
}

/* 超小屏幕设备 */
@media (max-width: 360px) {
  .message-container {
    width: 95%;
    margin: 10px auto 3px auto; /* 调整边距 - 上边距10px，下边距3px */
  }

  .message {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3; /* 减小行高 */
  }

  /* 更小的倒计时 */
  .countdown {
    margin-left: 5px;
    min-width: 20px;
    font-size: 10px;
    padding: 1px 5px;
  }

  /* 调整骰子容器在超小屏幕上的边距 */
  .dice-container {
    margin-bottom: 10px;
  }

  .game-title {
    font-size: 1.2rem; /* 更小的字体大小 */
    letter-spacing: 0; /* 移除字母间距 */
    padding: 5px 8px; /* 进一步减小内边距 */
  }

  .title-decoration {
    font-size: 0.8rem; /* 更小的装饰图标 */
    margin: 0 2px; /* 进一步减小边距 */
  }

  .title-container {
    padding: 2px 3px; /* 进一步减小容器内边距 */
  }

  /* 超小屏幕上按钮更小 */
  .rebirth-btn, .tiandao-btn {
    font-size: 14px;
    padding: 8px 15px;
    min-width: 100px;
    letter-spacing: 1px;
  }
}

/* 倒计时样式 */
.countdown {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  min-width: 28px;
  text-align: center;
  background-color: rgba(255, 215, 0, 0.5);
  border-radius: 5px;
  padding: 2px 8px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
  pointer-events: none; /* 允许点击穿透 */
  flex-shrink: 0; /* 防止倒计时被压缩 */
}