/* 
 * Filename: Game-UI-Dark-Theme.css
 * Author: CSS Expert
 * Description: A dark, game-dashboard-inspired theme for code blocks.
*/

/* --- 主容器和根元素 --- */

/* [S1] 为整个代码块pre元素添加边框、圆角和阴影，营造卡片感 */
.markdown-body pre {
  border: 1px solid #444;
  border-radius: 10px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* 确保子元素的圆角生效 */
  background: transparent !important; /* 清除pre本身的背景，让子元素div接管 */
}

/* [S2] 针对带语言标识的代码块主容器 */
.markdown-body pre > div {
  border-radius: 10px !important;
}

/* --- 头部栏 --- */

/* [S3] 美化头部栏，使用深灰色背景和更柔和的底边框 */
.markdown-body pre > div > div.flex.justify-between.h-8 {
  background: #2c3034 !important;
  border-bottom: 1px solid #444 !important;
}

/* [S4] 美化语言标签，使其更具UI感 */
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
  color: #a0a0a0 !important;
  font-weight: 600;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 8px; /* 增加一点左边距 */
}

/* --- 复制按钮 (关键适配) --- */

/* [R3] 适配深色背景下的复制按钮SVG图标颜色 */
.markdown-body pre svg.lucide-copy {
  color: #a0a0a0 !important; /* 默认图标颜色 */
  transition: color 0.2s ease, transform 0.2s ease !important; /* 平滑过渡 */
}

/* [R3] 适配深色背景下的复制按钮SVG图标Hover颜色 */
.markdown-body pre div.group[data-tooltip-id^="copy-tooltip"]:hover > svg {
  color: #ffffff !important; /* Hover时变为白色 */
  transform: scale(1.15) !important; /* 覆盖原有的scale-110，效果更明显 */
}


/* --- 代码内容区 --- */

/* [S9, R4] 美化代码内容区域，覆盖内联样式，设置深色背景和亮色文字 */
.markdown-body pre > div > div[node] {
  background: #1e1e1e !important;
  color: #d4d4d4 !important; /* 默认代码文本颜色 */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* --- 无语言标识的纯代码块 --- */

/* [S12] 为无语言标签的纯代码块应用相同的主题 */
.markdown-body pre > code[node] {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1em !important;
}


/* --- 语法高亮 (可选增强) --- */
/* 美化HTML标签和属性，让您的游戏面板源码更清晰 */

.markdown-body pre code .token.comment {
  color: #6a9955 !important; /* 注释 - 绿色 */
}
.markdown-body pre code .token.punctuation {
  color: #d4d4d4 !important; /* 标点 - 默认亮灰色 */
}
.markdown-body pre code .token.tag,
.markdown-body pre code .token.tag .token.punctuation {
  color: #569cd6 !important; /* 标签 - 蓝色 */
}
.markdown-body pre code .token.attr-name {
  color: #9cdcfe !important; /* 属性名 - 天蓝色 */
}
.markdown-body pre code .token.attr-value,
.markdown-body pre code .token.attr-value .token.punctuation {
  color: #ce9178 !important; /* 属性值 - 橙色 */
}
.markdown-body pre code .token.string {
    color: #ce9178 !important; /* 字符串 - 橙色 */
}

/* --- 滚动条美化 --- */
.markdown-body pre > div > div[node]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.markdown-body pre > div > div[node]::-webkit-scrollbar-track {
  background: #2c3034;
}
.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}
.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb:hover {
  background: #777;
}