/* ================= 基础与变量 ================= */
:root { --bg: #1e1e1e; --accent: #f1c40f; --text: #ecf0f1; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); padding-top: 60px; min-height: 100vh; }

/* ================= 通用顶栏 ================= */
.top-bar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: #2c3e50; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); z-index: 1000; }
.app-title { font-weight: bold; font-size: 18px; color: var(--accent); cursor: pointer; }
.user-wallet { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 10px; }

/* ================= 按钮升级版 (取自 texas.html) ================= */
.btn { 
    padding: 14px 30px; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; 
    font-size: 15px; letter-spacing: 0.5px; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
    margin: 0 4px; position: relative; overflow: hidden; color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn:active { transform: scale(0.96) translateY(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* ================= 1. 全局黑客帝国风定制滚动条 ================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(241, 196, 15, 0.6); }
/* 兼容 Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2); }

/* ================= 2. 模态窗通用 (防滚动+绝对定位版) ================= */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }

.modal-content { 
    background: #1e1e1e; border-radius: 12px; border: 1px solid #444; 
    width: 90%; max-width: 650px; max-height: 85vh; 
    /* 🚨 核心魔法：外层变成 Flex 容器，且自身绝对不准滚动 */
    display: flex; flex-direction: column; overflow: hidden; 
    position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.9); 
}

/* 🚨 专门容纳长内容的滚动区 */
.modal-body {
    overflow-y: auto;
    padding: 20px;
    flex-grow: 1; /* 撑满剩余空间 */
}

/* 🚨 永远钉在右上角的关闭按钮 */
.modal-close { 
    position: absolute; top: 12px; right: 12px; z-index: 100;
    cursor: pointer; color: #aaa; font-size: 22px; line-height: 1; 
    background: rgba(0,0,0,0.6); width: 32px; height: 32px; 
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%; border: 1px solid #444; transition: all 0.2s;
}
.modal-close:hover { color: #fff; background: #e74c3c; border-color: #c0392b; transform: scale(1.1); }

/* ================= 表格与战绩卡片 ================= */
.rank-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; text-align: center; }
.rank-table th { border-bottom: 2px solid #555; padding: 12px 8px; color: var(--accent); }
.rank-table td { border-bottom: 1px solid #333; padding: 12px 8px; transition: background 0.2s; }

/* 1. 找到你原来的这行代码，在 background 后面加上 !important */
.rank-table tr:hover td { background: rgba(241, 196, 15, 0.1) !important; cursor: pointer; }

/* 2. 在 CSS 文件的末尾追加人机列的专属背景 */
.rank-table td.pve-col {
    background: rgba(155, 89, 182, 0.05);
}

.history-card { background: #252525; border: 1px solid #3a3a3a; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.history-header { display: flex; justify-content: space-between; font-size: 12px; color: #888; border-bottom: 1px dashed #444; padding-bottom: 8px; margin-bottom: 12px; }
.history-board { display: flex; gap: 5px; margin-bottom: 12px; justify-content: center; transform: scale(0.9); }
.history-player { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; border-bottom: 1px solid #2a2a2a; padding-bottom: 4px; align-items: center;}
.history-actions { font-size: 11px; color: #aaa; width: 50%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 基础输入框 */
input, textarea { width: 100%; padding: 12px; border-radius: 8px; border: none; background: #444; color: white; font-size: 16px; margin-bottom: 15px; box-sizing: border-box; }
input[type="number"] { width: 80px; text-align: center; margin-bottom: 0; } 

.rank-table th[onclick]:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ================= 金融大厦专属样式 ================= */
.bank-nav-item {
    padding: 10px 20px; /* 🚨 将原来的 15px 缩小到 10px，大幅压缩每个按钮的高度 */
    color: #aaa;
    cursor: pointer;
    font-size: 13.5px;  /* 🚨 字体稍微缩小半号，显得更加精致 */
    font-weight: bold;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px; /* 可选：给每个选项之间加一点点极其微小的间距，避免太挤 */
}
.bank-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.bank-nav-item.active {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border-left: 3px solid #3498db;
}
.bank-stat-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid #333;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* 🚨 滚动条美化：适配暗黑风金融中心 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #444; 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #666; 
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

/* 1. 扫光动效：让按钮像有激光扫过一样 */
    @keyframes btnShine {
        0% { left: -100%; transition-property: left; }
        11.5%, 100% { left: 100%; transition-property: left; }
    }
    .shine-effect {
        position: relative;
        overflow: hidden;
    }
    .shine-effect::after {
        content: "";
        position: absolute;
        top: 0; left: -100%; width: 50%; height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        animation: btnShine 3s infinite;
        z-index: 1;
    }

    /* 2. 呼吸发光：营造金钱的诱惑感 */
    @keyframes goldPulse {
        0% { box-shadow: 0 0 5px rgba(241, 196, 15, 0.2); }
        50% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.8); }
        100% { box-shadow: 0 0 5px rgba(241, 196, 15, 0.2); }
    }

    /* 3. 徽章弹跳：疯狂吸引眼球 */
    @keyframes badgeBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-3px) scale(1.1); }
    }

    /* 4. 跑马灯滚动：制造全服热度的假象（或真象） */
    @keyframes marqueeScroll {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
        }

    /* 喇叭图标闪烁动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 🍎 iPhone 风格的小红点 */
.ios-red-dot {
    position: absolute;
    background: #ff3b30; /* 苹果经典红 */
    border: 1.5px solid #151515; /* 增加暗色描边，防止和背景糊在一起 */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.6);
    display: none; /* 默认隐藏，靠 JS 控制 */
    z-index: 20;
    pointer-events: none; /* 穿透点击 */
}

/* 红点呼吸灯特效（针对特别紧急的事件） */
@keyframes urgentPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
.ios-red-dot.urgent {
    animation: urgentPulse 1.5s infinite;
}

/* 💬 气泡弹窗动效 */
@keyframes toastPopUp {
    0% { opacity: 0; transform: translateY(15px) translateX(-50%) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); }
}