/* ========================================= */
/* 🔥 付费解锁排行榜相关样式 (核心修改) */
/* ========================================= */

/* 提示词容器，用于定位遮罩 */
.prompt-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #111827; /* 底部背景 */
}

/* 🎨 2026-04-29：画廊角色名标签（替代丑陋的 monospace prompt 展示） */
.gallery-char-wrapper {
    background: transparent;
    padding: 10px 8px 12px;
    display: flex;
    justify-content: center;
    overflow: visible;
}
.gallery-char-label {
    display: inline-block;
    max-width: 100%;
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #f3f4f6;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.18));
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    user-select: none;
}
.gallery-char-label:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(168,85,247,0.35));
    border-color: rgba(168,85,247,0.7);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139,92,246,0.25);
}
.gallery-char-label:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(139,92,246,0.3);
}

/* 模糊特效 (未解锁时) */
.blur-secret {
    color: transparent; /* 文字透明 */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); /* 以此形成模糊块 */
    filter: blur(4px); /* 模糊滤镜 */
    user-select: none; /* 禁止选中 */
    pointer-events: none; /* 禁止鼠标点击交互 */
    opacity: 0.6;
    background: repeating-linear-gradient(
      45deg,
      #1f2937,
      #1f2937 10px,
      #374151 10px,
      #374151 20px
    ); /* 条纹背景，显得更神秘 */
}

/* 遮罩层：半透明黑底 + 居中按钮 */
.unlock-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 半透明遮罩 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    transition: background 0.2s;
}

.unlock-mask:hover {
    background: rgba(0, 0, 0, 0.6); /* 悬停变暗 */
}

/* 在 style.css 中找到 .unlock-btn-inner 并完全替换 */

.unlock-btn-inner {
    /* 🔥 核心修改：背景改为半透明黑色，不再是刺眼的纯黄 */
    background: rgba(0, 0, 0, 0.6); 
    
    /* 🔥 核心修改：边框和文字使用金色，保留高级感 */
    border: 1px solid var(--accent-char);
    color: var(--accent-char);
    
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px); /* 增加毛玻璃特效，更有质感 */
    transition: all 0.2s;
}

/* 🔥 新增：鼠标悬停时才变亮一点，作为交互反馈 */
.unlock-mask:hover .unlock-btn-inner {
    background: var(--accent-char);
    color: black;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.unlock-mask:hover .unlock-btn-inner {
    transform: scale(1.05);
}

/* 解锁后的文本区域 (移除模糊) */
.rank-prompt.unlocked {
    filter: none;
    color: #e5e7eb;
    text-shadow: none;
    opacity: 1;
    user-select: text; /* 允许复制 */
    pointer-events: auto;
    background: transparent;
    height: auto !important; /* 展开高度 */
    display: block; /* 取消行数限制 */
    -webkit-line-clamp: unset;
}

@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 15px; padding: 15px; text-align: center; }
    .user-info { flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
    .btn-small { flex: 1; min-width: 80px; }
    .main-container { flex-direction: column; }
    .card { min-height: 280px; }
}

/* 伪装域名标签：看起来像服务器节点或版本号 */
.server-id-tag {
    font-family: 'Consolas', 'Monaco', monospace; /* 代码字体 */
    font-size: 0.8rem;          /* 稍微调大一点点 */
    color: #9ca3af;             /* 浅灰色，在黑底上清晰可见 */
    background: rgba(31, 41, 55, 0.5); /* 半透明深底 */
    border: 1px solid #374151;  /* 加上边框，显得正式 */
    padding: 2px 8px;           /* 增加内边距 */
    border-radius: 4px;         /* 圆角 */
    margin-left: 8px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    cursor: text;               /* 鼠标放上去是文本选择状，暗示可复制 */
    transition: all 0.2s;
}

/* 鼠标悬停时稍微亮一点，增加交互感 */
.server-id-tag:hover {
    color: #e5e7eb;
    border-color: #6b7280;
    background: rgba(31, 41, 55, 0.8);
}

/* ========================================= */
/* 🖼️ 画廊优化 (竖屏适配 + 放大查看) */
/* ========================================= */

/* 1. 调整画廊卡片图片容器 */
/* 将原来的固定高度改为 9:16 比例，完美适配 810x1440 */
#galleryList .rank-card > div:first-child {
    width: 100%;
    height: auto !important; /* 覆盖原来的固定高度 */
    aspect-ratio: 9 / 16;    /* 锁定竖屏比例 */
    cursor: zoom-in;         /* 鼠标放上去显示放大镜 */
    overflow: hidden;
    position: relative;
}

#galleryList .rank-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满容器 */
    transition: transform 0.3s;
}

#galleryList .rank-card:hover img {
    transform: scale(1.05); /* 悬停微放大特效 */
}

/* 2. 图片放大灯箱 (Lightbox) */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10001;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.3s;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid #333;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    font-weight: bold;
    z-index: 2001;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: var(--danger);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2001;
    user-select: none;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px;
    border-radius: 20px;
    z-index: 2001;
}

/* ========================================= */
/* 🖼️ 画廊显示优化 (缩小尺寸 + 统一大小) */
/* ========================================= */

/* 1. 强制限制画廊卡片的宽度 */
/* 这里的 180px 是关键，调整它就能控制整体大小 */
#galleryList .rank-card {
    min-width: 180px !important;  /* 覆盖原本的 240px/280px */
    width: 180px !important;      /* 固定宽度，确保整齐 */
    flex: 0 0 auto;               /* 防止被挤压 */
    padding: 10px;                /* 稍微减小内边距，显得更紧凑 */
}

/* 2. 确保图片容器严格遵守 9:16 比例 */
#galleryList .rank-card > div:first-child {
    width: 100%;
    aspect-ratio: 9 / 16;         /* 锁定竖屏比例，图片绝对不会变形 */
    height: auto !important;      
    border-radius: 6px;           /* 给图片加个小圆角 */
    overflow: hidden;
    background: #000;             /* 图片加载前的背景色 */
}

/* 3. 优化文字区域，防止小卡片里文字换行太丑 */
#galleryList .rank-info {
    font-size: 0.75rem;           /* 字体稍微改小一点 */
    margin-bottom: 5px;
}

#galleryList .rank-card .unlock-btn-inner {
    padding: 4px 10px;            /* 按钮也稍微缩小一点 */
    font-size: 0.75rem;
}