@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --primary: #007AFF;
        --secondary: #5856D6;
    }
}

@layer components {
    .btn-primary {
        @apply bg-primary hover:bg-primary/90;
    }
}

/* 在style.css中添加以下样式 */
body {
    /* 移除原有的白色背景 */
    background-color: transparent !important;
    /* 设置背景图片，使用半透明效果 */
    background-image: url('./img/bgh_1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* 添加半透明遮罩，使文字更易读 */
    position: relative;
}

/* 添加半透明遮罩层 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* 70%不透明度的白色遮罩 */
    z-index: -1;
}

/* 如果需要轮播背景图片，可以添加以下动画 */
@keyframes backgroundSlide {
    0% { background-image: url('./img/bgh_1.png'); }
    20% { background-image: url('./img/bgh_2.png'); }
    40% { background-image: url('./img/bgh_3.png'); }
    60% { background-image: url('./img/bgh_4.png'); }
    80% { background-image: url('./img/bgh_5.png'); }
    100% { background-image: url('./img/bgh_1.png'); }
}

/* 应用动画（可选） */
body {
    animation: backgroundSlide 30s infinite;
}

/* 调整卡片背景透明度，增强层次感 */
.bg-white {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.glass-nav {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.hero-section {
    background-size: cover;
    background-position: center;
}

.feature-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.team-member:hover .member-info {
    opacity: 1;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* 加载圈样式 */
.loader-circle {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* 确保弹窗滚动正常 */
#help-modal .overflow-y-auto {
    scrollbar-width: thin;
}

/* 指令hover效果增强 */
.copy-command {
    transition: background-color 0.2s;
}
.copy-command:hover {
    background-color: #f0f0f0;
}

/* 渐变色文字基础样式 */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度（横向滚动条时生效） */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道基础颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #06b6d4, #22d3ee); /* 渐变色，从橙红到浅橙 */
  border-radius: 4px; /* 滑块圆角 */
}

/* 滚动条滑块 hover 效果 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #0ea5e9, #38bdf8); /* hover 时更深的渐变色 */
}

/* 全局艺术字体应用 */
* {
  /* 优先使用艺术字体，无则 fallback 到系统默认字体 */
  font-family: 'ZCOOL KuaiLe', "Microsoft YaHei", Arial, sans-serif !important;
  /* 若选方案2，替换为：font-family: 'Ma Shan Zheng', "Microsoft YaHei", Arial, sans-serif !important; */
}

/* 可选：微调部分元素字体大小（艺术字体可能默认偏大） */
body {
  font-size: 16px; /* 基础正文字号，根据需求调整 */
}

/* 标题字体大小适配（避免艺术字体标题过大） */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* 全局艺术字体 */
* {
    font-family: 'ZCOOL KuaiLe', "Microsoft YaHei", Arial, sans-serif !important;
}

/* 恢复 Font Awesome 图标字体 */
.fab, .fa, .fas, .far, .fal {
    font-family: "Font Awesome 6 Brands" !important;
}

/* 如果还用到了 solid/regular 等类型 */
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}
.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400;
}

    /* 新增：图片悬停放大效果样式 */
    .hover-zoom {
        overflow: hidden;
        position: relative;
    }
    .hover-zoom img {
        transition: transform 0.5s ease;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hover-zoom:hover img {
        transform: scale(1.08); /* 放大8% */
    }

/* 基础响应式调整 */
@media (max-width: 768px) {
    /* 导航栏调整 */
    .glass-nav {
        padding: 0 1rem;
    }

    .md\\:flex {
        display: none; /* 隐藏桌面导航 */
    }

    /* 移动端菜单按钮 */
    .mobile-menu-btn {
        display: block;
        font-size: 1.5rem;
        color: var(--primary);
    }

    /* 英雄区域 */
    .hero-section h1 {
        font-size: 3rem;
    }

    .hero-section p {
        font-size: 1.2rem;
    }

    /* 特色区域 */
    #features h2 {
        font-size: 2.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    /* 服务器IP区域 */
    #ip .flex-col {
        flex-direction: column;
        gap: 1rem;
    }

    #ip-text, #ip-text-secondary {
        font-size: 1.5rem;
    }

    /* 规则和团队区域 */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* FAQ区域 */
    .bg-white.p-6 {
        padding: 1.5rem;
    }

    /* 页脚 */
    .grid-cols-4 {
        grid-template-columns: 1fr 1fr;
    }
}

/* 手机端小屏幕适配 */
@media (max-width: 480px) {
    /* 英雄区域 */
    .hero-section h1 {
        font-size: 2.2rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    /* 按钮调整 */
    .!rounded-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    /* 玩家信息弹窗 */
    #player-info-modal .max-w-md {
        max-width: 90%;
        padding: 1rem;
    }

    /* 指令帮助弹窗 */
    #help-modal .max-w-2xl {
        max-width: 95%;
        max-height: 70vh;
    }

    /* 音乐控制组件 */
    .music-control {
        bottom: 3rem;
        right: 1rem;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .music-control span {
        display: none; /* 小屏幕隐藏歌曲名 */
    }

    /* 轮播指示器 */
    .carousel-indicator {
        width: 2.5px;
        height: 2.5px;
    }
}

/* 平板横屏适配 */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
        min-height: auto;
    }
}

/* 通用触摸友好设计 */
@media (hover: none) {
    /* 增大触摸目标 */
    button, a, .copy-command {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 移除hover效果，添加active效果 */
    .copy-command:active {
        background-color: #e0e0e0;
    }
}

#color-palette > div:hover {
    transform: scale(1.1);
}
#color-palette > div.ring-primary {
    box-shadow: 0 0 0 2px #3b82f6;
}

/* 颜色选择器容器样式 */
#start-color, #end-color {
    border: 1px solid #d1d5db; /* 统一边框宽度和颜色 */
    border-right: none; /* 移除右侧边框，避免和方块重叠 */
    border-radius: 0.375rem 0 0 0.375rem; /* 只保留左侧圆角 */
    padding: 0.5rem; /* 统一内边距 */
    box-sizing: border-box;
}

/* 颜色方块样式 */
#start-color-swatch, #end-color-swatch {
    width: 2.5rem; /* 固定宽度 */
    height: auto; /* 高度随输入框自动匹配 */
    min-height: 2.5rem; /* 确保最小高度 */
    border: 1px solid #d1d5db; /* 和输入框同边框 */
    border-left: none; /* 移除左侧边框 */
    border-radius: 0 0.375rem 0.375rem 0; /* 只保留右侧圆角 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 聚焦时的样式（可选） */
#start-color:focus, #end-color:focus {
    outline: none;
    ring: 2px solid #3b82f6; /* 聚焦时的高亮效果 */
    ring-offset: 0;
}

#color-gradient {
    background: linear-gradient(to right,
        rgba(255, 0, 0, 1),
        rgba(255, 255, 0, 1),
        rgba(0, 255, 0, 1),
        rgba(0, 255, 255, 1),
        rgba(0, 0, 255, 1),
        rgba(255, 0, 255, 1),
        rgba(255, 0, 0, 1)
    );
    /* 叠加白色到黑色的渐变，实现亮度调节 */
    background-image:
        linear-gradient(to top, rgba(0,0,0,1), transparent),
        linear-gradient(to right,
            rgba(255, 0, 0, 1),
            rgba(255, 255, 0, 1),
            rgba(0, 255, 0, 1),
            rgba(0, 255, 255, 1),
            rgba(0, 0, 255, 1),
            rgba(255, 0, 255, 1),
            rgba(255, 0, 0, 1)
        );
}

#color-palette > div {
    width: 2rem; /* 颜色块宽度 */
    height: 2rem; /* 颜色块高度 */
    border-radius: 4px;
    cursor: pointer;
}