/**
 * fixes.css - 紧急CSS修复
 * 
 * 这个文件包含关键的样式修复，确保UI元素正确显示
 * 由于游戏开发期间的CSS冲突，这些修复是必要的
 */

/* 确保介绍屏幕可见并正确定位 */
.intro-wrapper,
.intro-screen {
  left: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10 !important;
  position: fixed !important;
}

/* 确保SVG背景覆盖整个屏幕并正确定位 */
.intro-screen > svg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important; /* 确保在内容层下方 */
}

/* 加载动画样式 */
.loading-text-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  background-color: #fff !important;
  color: #4332A5 !important; 
  overflow: hidden !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important; /* 确保与标题一致使用单行显示 */
  letter-spacing: -0.05em !important; /* 与最终标题保持一致的字母间距 */
}

header {
  position: relative !important;
  overflow: visible !important; /* 避免裁剪 */
  width: 100% !important;
  margin: 0 auto !important;
}

/* 调整标题样式以适应更长的名称 */
.intro-screen header h1, 
.about-screen h1 {
  font-size: calc(24px + 5vw) !important; /* 稍微调整字体大小 */
  margin-bottom: 10px !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important; /* 防止单词分割 */
  white-space: nowrap !important; /* 强制单行显示 */
  line-height: 1.1 !important;
  letter-spacing: -0.05em !important; /* 进一步减少字母间距 */
}

/* 确保所有屏幕使用相同的基础样式 */
.choose-mode-screen,
.open-room-screen,
.join-room-screen,
.about-screen,
.game-over-screen {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: -100% !important; /* 默认隐藏 */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 活动屏幕应该可见 */
.active-screen {
  left: 0 !important;
  z-index: 20 !important;
}

/* 统一z-index层次 - 与AppSetup.js中的Z_INDEX_CONFIG一致 */
canvas.webgl { z-index: 1 !important; } /* 游戏Canvas */
.intro-screen { z-index: 10 !important; } /* 介绍屏幕 */
.choose-mode-screen { z-index: 20 !important; } /* 模式选择屏幕 */
.open-room-screen, .join-room-screen { z-index: 30 !important; } /* 房间管理屏幕 */
.about-screen { z-index: 40 !important; } /* 关于屏幕 */
.rotate-phone-screen { z-index: 50 !important; } /* 旋转手机提示 */
.game-over-screen { z-index: 60 !important; } /* 游戏结束屏幕 */
.mute.ui, .mute-button { z-index: 100 !important; } /* 系统UI按钮 */

/* 确保内容容器居中 */
.intro-screen .inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 98% !important; /* 进一步增加宽度 */
  max-width: 1000px !important; /* 大幅增加最大宽度以容纳单行标题 */
  text-align: center !important;
  z-index: 5 !important; /* 确保内容在SVG背景上层 */
}

.choose-mode-screen .inner,
.open-room-screen .inner,
.join-room-screen .inner,
.about-screen .inner,
.game-over-screen .inner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 600px !important;
  text-align: center !important;
  z-index: 5 !important;
}

/* 确保按钮可见 */
button.btn {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* 确保动画容器可见 */
.animation-container,
.animation-wrapper {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 隐藏元素的通用类 */
.hidden {
  display: none !important;
}

/* 修复声音控制按钮显示问题 */
.mute.ui, .mute-button {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important; /* 确保始终显示在最上层 */
  padding: 10px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.mute img.unmuted {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

.mute img.muted.hidden {
  display: none !important;
}

/* 确保表单元素可见 */
.join-room-screen input,
.join-room-screen button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 确保剪贴板按钮可见并优化样式 */
#copy-room-code {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  height: 36px !important;
  padding: 0 18px !important;
  margin: 10px auto 15px !important;
  cursor: pointer !important;
}

/* 复制按钮内部图标样式 */
#copy-room-code svg {
  width: 14px !important;
  height: 14px !important;
  margin-right: 5px !important;
}

/* 复制按钮内部文本样式 */
#copy-room-code span {
  font-size: 13px !important;
  font-weight: normal !important;
  text-transform: none !important;
}

/* 复制按钮悬停效果 */
#copy-room-code:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 修复房间代码显示 */
.room-code-container {
  opacity: 1 !important;
  visibility: visible !important;
}