/* Custom CSS styles for Monster Makeup 3D website */
/* 网站的自定义 CSS 样式表 */

/* 可以在这里添加 Tailwind 无法直接实现的复杂或独特的自定义样式 */

/* 引入 Google Font (Poppins - 一个比较活泼的示例字体) */
/* 注意：如果网络环境无法访问 Google Fonts，需要下载字体文件并在本地引入 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* 全局应用字体和基础样式 */
body {
    font-family: 'Poppins', sans-serif; /* 应用活泼字体 Poppins，如果加载失败则使用系统默认的无衬线字体 */
    background-color: #111827; /* 默认深灰色背景 (对应 Tailwind bg-gray-900) */
    color: #f3f4f6; /* 默认浅灰色文字 (对应 Tailwind text-gray-100 或 text-white) */
    line-height: 1.6; /* 设置合适的行高，提高可读性 */
}

/* Logo 运动风格样式 */
.logo {
    font-weight: 700; /* 字体加粗 (对应 Tailwind font-bold) */
    letter-spacing: 1px; /* 增加字符间距，使其更醒目 */
    text-shadow: 1px 1px 3px rgba(45, 255, 196, 0.3); /* 添加绿色文字阴影，增加动感和立体感 */
    /* color: #34d399; */ /* 文字颜色由 Tailwind class (text-green-400) 控制 */
}

/* 游戏 Iframe 容器样式 */
#game-container {
    position: relative; /* 设置相对定位，用于内部绝对定位的全屏按钮 */
    width: 100%; /* 宽度占满父容器 */
    /* height: 80vh; */ /* 使用 aspect-ratio 保持宽高比，更适合游戏 */
    aspect-ratio: 16 / 9; /* 保持 16:9 的宽高比 */
    overflow: hidden; /* 隐藏任何溢出容器的内容 */
    background-color: #000; /* 在 iframe 加载完成前显示黑色背景 */
    border-radius: 8px; /* 添加圆角，使其看起来更柔和 (可选) */
    box-shadow: 0 4px 12px rgba(0, 255, 150, 0.1); /* 添加微弱的绿色外发光效果 (可选) */
}

/* 游戏 Iframe 本身样式 */
#game-iframe {
    display: block; /* 设为块级元素，消除可能的底部空白 */
    width: 100%; /* 宽度占满容器 */
    height: 100%; /* 高度占满容器 */
    border: none; /* 移除 iframe 的默认边框 */
}

/* 全屏按钮样式 */
#fullscreen-btn {
    position: absolute; /* 绝对定位，相对于 #game-container */
    bottom: 15px; /* 距离容器底部 15px */
    right: 15px; /* 距离容器右侧 15px */
    z-index: 10; /* 设置层叠顺序，确保按钮显示在 iframe 之上 */
    /* 基础样式由 Tailwind class 控制: bg-green-500, hover:bg-green-600, text-white, font-bold, py-2, px-4, rounded */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 添加背景色和缩放的过渡效果 */
}

#fullscreen-btn:hover {
    /* background-color: #059669; */ /* 悬停背景色由 Tailwind 控制 */
    transform: scale(1.05); /* 鼠标悬停时轻微放大 */
}

#fullscreen-btn:active {
    transform: scale(0.98); /* 鼠标点击时轻微缩小 */
}


/* 语言切换内容的默认隐藏 (主要由 JS 控制显示/隐藏) */
/* [data-lang] {
   display: none; 
} */

/* Tailwind Typography 插件的暗色模式 (prose-invert) 颜色覆盖 */
/* 用于确保在深色背景下，Tailwind Typography 生成的元素颜色正确 */
.prose-invert {
  /* 覆盖 Typography 插件的 CSS 变量 */
  --tw-prose-body: theme('colors.gray.300'); /* 正文文字颜色 (浅灰) */
  --tw-prose-headings: theme('colors.white'); /* 标题文字颜色 (白色) */
  --tw-prose-lead: theme('colors.gray.400'); /* 引导段落颜色 */
  --tw-prose-links: theme('colors.green.400'); /* 链接颜色 (亮绿) */
  --tw-prose-bold: theme('colors.white'); /* 粗体文字颜色 (白色) */
  --tw-prose-counters: theme('colors.gray.400'); /* 列表计数器颜色 */
  --tw-prose-bullets: theme('colors.green.500'); /* 列表项目符号颜色 (改为绿色) */
  --tw-prose-hr: theme('colors.gray.700'); /* 水平分割线颜色 */
  --tw-prose-quotes: theme('colors.gray.100'); /* 引用文字颜色 */
  --tw-prose-quote-borders: theme('colors.green.500'); /* 引用块左边框颜色 (亮绿) */
  --tw-prose-captions: theme('colors.gray.400'); /* 图片/表格标题颜色 */
  --tw-prose-code: theme('colors.green.300'); /* 内联代码颜色 (淡绿) */
  --tw-prose-pre-code: theme('colors.gray.300'); /* 代码块内文字颜色 */
  --tw-prose-pre-bg: theme('colors.gray.800'); /* 代码块背景颜色 (深灰) */
  --tw-prose-th-borders: theme('colors.gray.600'); /* 表格头部边框颜色 */
  --tw-prose-td-borders: theme('colors.gray.700'); /* 表格单元格边框颜色 */
}

/* 单独设置 prose-invert 内链接的样式 */
.prose-invert a {
    color: var(--tw-prose-links); /* 使用上面定义的链接颜色变量 */
    text-decoration: none; /* 默认移除下划线 */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* 添加颜色和下划线的过渡效果 */
}

.prose-invert a:hover {
    color: theme('colors.green.300'); /* 鼠标悬停时链接颜色变浅 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 评论引用块 (blockquote) 的特定样式 */
.prose-invert blockquote {
    border-left-color: var(--tw-prose-quote-borders); /* 确保左边框颜色是绿色 */
    color: var(--tw-prose-quotes); /* 引用文字颜色 */
    font-style: italic; /* 斜体显示 */
    margin-left: 0; /* 移除 prose 可能添加的左外边距 */
    margin-right: 0; /* 移除 prose 可能添加的右外边距 */
    padding-left: 1em; /* 设置合适的左内边距 */
}

.prose-invert blockquote footer {
    font-style: normal; /* 引用块内的署名部分恢复正常字体 */
    color: theme('colors.gray.400'); /* 署名颜色 */
    font-size: 0.875em; /* 署名文字稍小 */
    margin-top: 0.5em; /* 与引用内容之间添加一点间距 */
}

/* 页脚 (Footer) 样式 */
footer {
    /* 背景色和文字颜色由 Tailwind class 控制: bg-gray-800, text-gray-400 */
    font-size: 0.875rem; /* 设置页脚字体大小 (对应 Tailwind text-sm) */
    text-align: center; /* 文本居中 */
    padding: 1.5rem 1rem; /* 设置上下和左右内边距 */
    margin-top: 2rem; /* 与主体内容保持一定间距 */
}

/* 页脚内的链接样式 */
footer a {
    color: theme('colors.gray.400'); /* 默认链接颜色 */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

footer a:hover {
    color: theme('colors.green.400'); /* 鼠标悬停时颜色变为亮绿色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 响应式设计：针对小屏幕设备 (例如宽度小于 768px 的手机) */
@media (max-width: 768px) {
    /* 调整游戏容器的宽高比，可能 4:3 在移动端更合适 */
    #game-container {
        aspect-ratio: 4 / 3; 
    }

    /* 调整文章区域的字体大小，使其在小屏幕上更易读 */
    .prose {
        font-size: 0.95rem; /* 略微减小字体大小 */
    }

    /* 调整 Header 内元素的布局或大小 (如果需要) */
    header {
        /* 例如，可以在小屏幕上让 logo 和语言选择器堆叠 */
        /* flex-direction: column; */
        /* align-items: flex-start; */
    }

    /* 调整页脚内边距 */
    footer {
        padding: 1rem 0.5rem;
    }
}