/* ================= CSS 变量与基础公共样式 ================= */
:root {
    --bg-dark: #121315; --bg-panel: #1a1a1b; --text-main: #ffffff; --text-muted: #b2bec3;
    --border-line: rgba(255,255,255,0.05); --blue-team: #00a8ff; --blue-glow: rgba(0, 168, 255, 0.4);
    --red-team: #ff4757; --red-glow: rgba(255, 71, 87, 0.4); --gold: #f1c40f; --gold-glow: rgba(241, 196, 15, 0.5);
    --silver: #bdc3c7; --bronze: #cd7f32; --point-up: #55efc4; --point-down: #ff7675;
    --shadow-color: rgba(0,0,0,0.5); --modal-bg: linear-gradient(145deg, #1a1a1b, #121315);
    --title-frame-bg: linear-gradient(180deg, rgba(0, 168, 255, 0.05) 0%, rgba(0,0,0,0.6) 100%);
    --title-gradient: linear-gradient(to right, #9cd2ff, #e3e1ff);
    --title-shadow: drop-shadow(0 0 15px rgba(116, 185, 255, 0.6));
    --strip-hover: #222325;
}
body.theme-cute {
    --bg-dark: #fff5f7; --bg-panel: #ffffff; --text-main: #2d3436; --text-muted: #636e72;
    --border-line: rgba(0,0,0,0.08); --blue-team: #74b9ff; --blue-glow: rgba(116, 185, 255, 0.4);
    --red-team: #ff7675; --red-glow: rgba(255, 118, 117, 0.4); --gold: #f39c12; --gold-glow: rgba(243, 156, 18, 0.3);
    --shadow-color: rgba(255, 105, 180, 0.15); --modal-bg: linear-gradient(145deg, #ffffff, #fdfbfb);
    --title-frame-bg: linear-gradient(180deg, rgba(255, 192, 203, 0.2) 0%, rgba(255,255,255,0.9) 100%);
    --title-gradient: linear-gradient(to right, #ff9a9e, #fecfef);
    --title-shadow: drop-shadow(0 0 15px rgba(255, 154, 158, 0.6));
    --strip-hover: #fff0f5;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--blue-team); border-radius: 10px; }

body {
    background-color: var(--bg-dark); color: var(--text-main); 
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    margin: 0; padding-bottom: 60px; min-height: 100vh; overflow-x: hidden;
    background-attachment: fixed; transition: background-color 0.5s, color 0.5s;
}

.lazy-img { opacity: 0; transition: opacity 0.5s ease-in-out; }
.lazy-img.loaded { opacity: 1; }

.action-btns { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; gap: 10px; align-items: center; }
.theme-switcher, .admin-btn {
    background: var(--bg-panel); color: var(--text-main); border: 2px solid var(--gold);
    padding: 8px 15px; border-radius: 20px; font-weight: bold; font-size: 13px;
    cursor: pointer; box-shadow: 0 4px 15px var(--gold-glow); transition: 0.3s; text-decoration: none; display:inline-block;
}
.admin-btn { border-color: var(--blue-team); box-shadow: 0 4px 15px var(--blue-glow); }
.theme-switcher:hover, .admin-btn:hover { transform: scale(1.05); }

/* ================= 语音与悬浮面板公共样式 ================= */
.audio-btn { cursor: pointer; font-size: 18px; transition: transform 0.2s, filter 0.2s; display: inline-block; vertical-align: middle; position: relative; z-index: 50; }
.audio-btn:hover { transform: scale(1.25); filter: drop-shadow(0 0 5px #2ecc71); }
.admin-audio-item { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; border: 1px solid var(--border-line); transition: 0.2s; }
.admin-audio-item:hover { background: rgba(0,0,0,0.4); border-color: #2ecc71; }
.audio-float-panel {
    position: fixed; z-index: 100000; background: var(--modal-bg);
    border: 2px solid #2ecc71; border-radius: 12px; width: 300px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(46, 204, 113, 0.2); 
    padding: 15px; display: none; flex-direction: column;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    transform: translateY(10px); pointer-events: none;
}
.audio-float-panel.show { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
.af-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border-line); padding-bottom: 10px; margin-bottom: 15px; }
.af-title { font-size: 16px; font-weight: 900; color: #2ecc71; margin: 0; display: flex; align-items: center; gap: 8px; }
.af-close { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; line-height: 1; padding: 0; transition: 0.2s; }
.af-close:hover { color: var(--red-team); transform: scale(1.1); }
.af-list { max-height: 350px; overflow-y: auto; padding-right: 5px; }
.af-list::-webkit-scrollbar { width: 4px; }
.af-list::-webkit-scrollbar-track { background: transparent; }
.af-list::-webkit-scrollbar-thumb { background: #2ecc71; border-radius: 4px; }
.audio-bubble { background: linear-gradient(90deg, #2ecc71, #27ae60); color: white; padding: 12px 20px; border-radius: 25px; cursor: pointer; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3); transition: 0.3s; font-weight: bold; border: 1px solid rgba(255,255,255,0.2); }
.audio-bubble:hover { transform: translateX(5px); box-shadow: 0 6px 15px rgba(46, 204, 113, 0.5); filter: brightness(1.1); }
.audio-playing { background: linear-gradient(90deg, #f1c40f, #f39c12) !important; color: #000 !important; box-shadow: 0 0 15px rgba(241, 196, 15, 0.6) !important; animation: pulse-audio 1s infinite alternate; border-color: #fff; }
@keyframes pulse-audio { from { transform: scale(1); } to { transform: scale(1.02); } }

/* ================= 弹窗与表单公共样式 ================= */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content { background: var(--modal-bg); border: 2px solid var(--blue-team); border-radius: 12px; padding: 30px; width: 450px; max-width: 90%; position: relative; box-shadow: 0 10px 40px var(--shadow-color); color: var(--text-main); max-height: 90vh; overflow-y: auto; }
.modal-large { width: 800px; border-color: var(--gold); box-shadow: 0 0 30px var(--gold-glow); }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; color: var(--text-muted); text-decoration: none; font-weight: bold; cursor: pointer; border: none; background: transparent; transition:0.2s; }
.modal-close:hover { color: var(--red-team); transform: scale(1.1); }
.modal-header h3 { text-align: center; color: var(--gold); font-size: 22px; margin: 0 0 20px; font-family: 'Zcool KuaiLe', cursive; border-bottom: 1px dashed var(--border-line); padding-bottom: 15px; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: bold;}
.form-control { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-line); background: rgba(0,0,0,0.2); color: var(--text-main); box-sizing: border-box; }
.btn-submit { background: var(--blue-team); color: #fff; border: none; padding: 10px; width: 100%; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px; transition:0.2s;}
.btn-submit:hover { filter: brightness(1.2); }
.inline-btn { font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid; cursor: pointer; font-weight: bold; transition: 0.2s; background: transparent; }
.btn-free { color: var(--blue-team); border-color: var(--blue-team); } .btn-free:hover, .btn-free.active { background: var(--blue-team); color: #fff; }
.btn-sub { color: var(--gold); border-color: var(--gold); } .btn-sub:hover, .btn-sub.active { background: var(--gold); color: #000; }
.btn-out { color: var(--text-muted); border-color: var(--text-muted); } .btn-out:hover { background: var(--red-team); color: #fff; border-color: var(--red-team); }

/* ================= 选手印象面板公共样式 ================= */
.player-info-panel {
    position: fixed; z-index: 100000; background: var(--modal-bg);
    border: 2px solid var(--blue-team); border-radius: 12px; width: 340px;
    box-shadow: 0 10px 40px var(--shadow-color); padding: 15px;
    display: none; flex-direction: column; gap: 12px;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    transform: translateY(10px); pointer-events: none;
}
.player-info-panel.show { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
body.theme-cute .player-info-panel { border-color: #fd79a8; }
.pip-header { font-size: 18px; font-weight: 900; color: var(--gold); border-bottom: 1px dashed var(--border-line); padding-bottom: 8px; text-align: center; letter-spacing: 1px; }
.pip-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pip-stat-box { background: rgba(0,0,0,0.2); padding: 8px 4px; border-radius: 8px; text-align: center; border: 1px solid var(--border-line); }
body.theme-cute .pip-stat-box { background: rgba(253, 121, 168, 0.05); border-color: rgba(253, 121, 168, 0.2); }
.pip-stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.pip-stat-val { font-size: 16px; font-weight: 900; color: var(--text-main); }
.pip-divider { text-align: center; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; }
.pip-divider::before, .pip-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-line); margin: 0 10px; }
.pip-cloud-canvas { position: relative; width: 100%; height: 200px; background: rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; border: 1px inset var(--border-line); }
body.theme-cute .pip-cloud-canvas { background: rgba(255,182,193,0.1); }
.pip-tag-item { position: absolute; font-weight: bold; cursor: pointer; transition: transform 0.2s; white-space: normal; word-break: break-all; max-width: 260px; text-align: center; line-height: 1.15; user-select: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
body.theme-cute .pip-tag-item { text-shadow: 0 1px 2px rgba(255,255,255,0.8); }
.pip-tag-item:hover { filter: brightness(1.2); transform: scale(1.15) !important; z-index: 1000 !important; }
.pip-tag-count { font-size: 0.7em; opacity: 0.8; margin-left: 2px; font-weight: normal; }
.pip-input-area { display: flex; gap: 8px; }
.pip-tag-input { flex: 1; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--border-line); background: rgba(0,0,0,0.2); color: var(--text-main); font-size: 12px; outline: none; transition: 0.3s; }
.pip-tag-input:focus { border-color: var(--blue-team); box-shadow: 0 0 10px var(--blue-glow); }
body.theme-cute .pip-tag-input:focus { border-color: #fd79a8; box-shadow: 0 0 10px rgba(253,121,168,0.4); }
.pip-tag-submit { padding: 6px 18px; border-radius: 20px; background: var(--blue-team); color: #fff; border: none; font-size: 13px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.pip-tag-submit:hover { filter: brightness(1.2); box-shadow: 0 0 10px var(--blue-glow); }
body.theme-cute .pip-tag-submit { background: #fd79a8; }
body.theme-cute .pip-tag-submit:hover { box-shadow: 0 0 10px rgba(253,121,168,0.4); }
.gongde-plus { position: fixed; color: var(--gold); font-weight: 900; font-size: 18px; pointer-events: none; animation: floatUpGold 1s forwards; z-index: 100001; text-shadow: 0 0 8px rgba(241,196,15,0.8); }
@keyframes floatUpGold { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-40px) scale(1.3); opacity: 0; } }
/* ================= 🌟 拖拽闪烁优化插件 ================= */

/* 给图片包装盒增加深色底色，防止图片加载时由于透明度导致的白闪 */
.bc-img-wrap, .card-img-wrap { 
    background: #2a2a2e !important; 
    position: relative; 
}

/* 缩短图片渐显时间，从 0.5s 改为 0.2s，让肉眼几乎察觉不到刷新 */
.lazy-img { 
    opacity: 0; 
    transition: opacity 0.2s ease-in-out !important; 
}

.lazy-img.loaded { 
    opacity: 1 !important; 
}


/* ==========================================
   🌟 全新 15 档评级（含 UR 与带 + 级）色彩霓虹兼容样式
   ========================================== */

/* 1. 排行榜小徽章底色方案 (.grade-*) */
.grade-ur { background: linear-gradient(135deg, #ff007f, #7000ff); color: #fff; box-shadow: 0 0 8px #ff007f; border: 1px solid rgba(255,255,255,0.4); }
.grade-ssr { background: linear-gradient(135deg, #ff9ff3, #feca57); color: #000; box-shadow: 0 0 8px #ff9ff3; border: 1px solid rgba(255,255,255,0.4); }
.grade-sr_plus { background: linear-gradient(135deg, #f9ca24, #f1c40f); color: #000; box-shadow: 0 0 8px #f9ca24; border: 1px solid rgba(255,255,255,0.2); }
.grade-sr { background: linear-gradient(135deg, #f9ca24, #f6e58d); color: #5c3a00; }
.grade-s_plus { background: linear-gradient(135deg, #ff7675, #d63031); color: #fff; box-shadow: 0 0 8px #ff7675; border: 1px solid rgba(255,255,255,0.2); }
.grade-s { background: linear-gradient(135deg, #d63031, #ff7675); color: #fff; }
.grade-a_plus { background: linear-gradient(135deg, #74b9ff, #0984e3); color: #fff; box-shadow: 0 0 8px #74b9ff; border: 1px solid rgba(255,255,255,0.2); }
.grade-a { background: linear-gradient(135deg, #0984e3, #74b9ff); color: #fff; }
.grade-b_plus { background: linear-gradient(135deg, #55efc4, #00b894); color: #000; box-shadow: 0 0 8px #55efc4; border: 1px solid rgba(255,255,255,0.2); }
.grade-b { background: linear-gradient(135deg, #00b894, #55efc4); color: #000; }
.grade-c_plus { background: linear-gradient(135deg, #fab1a0, #e17055); color: #000; box-shadow: 0 0 8px #fab1a0; border: 1px solid rgba(255,255,255,0.2); }
.grade-c { background: linear-gradient(135deg, #d35400, #e17055); color: #fff; }
.grade-d_plus { background: linear-gradient(135deg, #b2bec3, #636e72); color: #000; box-shadow: 0 0 8px #b2bec3; }
.grade-d { background: #636e72; color: #dfe6e9; }
.grade-e { background: #2d3436; color: #636e72; border-color: rgba(255,255,255,0.1); }

/* 2. 选马池小卡片边框发光方案 (.tier-*) */
.tier-ur { border-color: rgba(255, 0, 127, 0.7) !important; box-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important; }
.tier-ssr { border-color: rgba(255, 159, 243, 0.5) !important; }
.tier-sr_plus, .tier-sr { border-color: rgba(249, 202, 36, 0.4) !important; }
.tier-s_plus, .tier-s { border-color: rgba(214, 48, 49, 0.3) !important; }
.tier-a_plus, .tier-a { border-color: rgba(9, 132, 227, 0.3) !important; }
.tier-b_plus, .tier-b { border-color: rgba(0, 184, 148, 0.3) !important; }
.tier-c_plus, .tier-c { border-color: rgba(211, 84, 0, 0.3) !important; }
.tier-d_plus, .tier-d { border-color: rgba(99, 110, 114, 0.3) !important; }
.tier-e { border-color: rgba(45, 52, 54, 0.3) !important; }

/* 3. 卡片左上角评级文字发光方案 (.tier-txt-*) */
.tier-txt-ur { color: #ff007f !important; text-shadow: 0 0 5px rgba(255, 0, 127, 0.8), 0 0 10px rgba(255, 0, 127, 0.5) !important; }
.tier-txt-ssr { color: #ff9ff3 !important; text-shadow: 0 0 5px rgba(255, 159, 243, 0.8) !important; }
.tier-txt-sr_plus, .tier-txt-sr { color: #f9ca24 !important; text-shadow: 0 0 5px rgba(249, 202, 36, 0.8) !important; }
.tier-txt-s_plus, .tier-txt-s { color: #ff7675 !important; text-shadow: 0 0 3px rgba(255, 118, 117, 0.8) !important; }
.tier-txt-a_plus, .tier-txt-a { color: #74b9ff !important; text-shadow: 0 0 3px rgba(116, 185, 255, 0.8) !important; }
.tier-txt-b_plus, .tier-txt-b { color: #55efc4 !important; text-shadow: 0 0 3px rgba(85, 239, 196, 0.8) !important; }
.tier-txt-c_plus, .tier-txt-c { color: #fab1a0 !important; text-shadow: 0 0 3px rgba(250, 177, 160, 0.8) !important; }
.tier-txt-d_plus, .tier-txt-d { color: #b2bec3 !important; }
.tier-txt-e { color: #636e72 !important; }

/* ==========================================
   🌟 选马池卡片名字方块 (.bc-name) 评级背景色补全
   ========================================== */

/* UR 级 - 极光紫红流光 */
.tier-ur:not(.card-female) .bc-name { 
    background: linear-gradient(90deg, #ff007f, #7000ff, #ff007f) !important; 
    background-size: 200% 100% !important; 
    animation: srShine 2.5s linear infinite !important; 
    color: #fff !important; 
    text-shadow: 0 0 3px rgba(255,255,255,0.8) !important;
}

/* SSR 级 - 梦幻粉金 */
.tier-ssr:not(.card-female) .bc-name { 
    background: linear-gradient(90deg, #ff9ff3, #feca57, #ff9ff3) !important; 
    background-size: 200% 100% !important; 
    animation: srShine 2.5s linear infinite !important; 
    color: #000 !important; 
    text-shadow: 0 0 2px rgba(255,255,255,0.8) !important;
}

/* SR+ 级 与 SR 级 - 金色闪耀金属流光 */
.tier-sr_plus:not(.card-female) .bc-name,
.tier-sr:not(.card-female) .bc-name { 
    background: linear-gradient(90deg, #f9ca24, #ffebb3, #ffffff, #ffebb3, #f9ca24) !important; 
    background-size: 200% 100% !important; 
    animation: srShine 2.5s linear infinite !important; 
    color: #5c3a00 !important; 
    text-shadow: 0 0 3px rgba(255,255,255,0.8) !important;
}

/* S+ 级 与 S 级 - 烈焰红 */
.tier-s_plus:not(.card-female) .bc-name,
.tier-s:not(.card-female) .bc-name { 
    background: linear-gradient(135deg, #d63031, #ff7675) !important; 
    color: #fff !important;
}

/* A+ 级 与 A 级 - 赛博蓝 */
.tier-a_plus:not(.card-female) .bc-name,
.tier-a:not(.card-female) .bc-name { 
    background: linear-gradient(135deg, #0984e3, #74b9ff) !important; 
    color: #fff !important;
}

/* B+ 级 与 B 级 - 翡翠绿 */
.tier-b_plus:not(.card-female) .bc-name,
.tier-b:not(.card-female) .bc-name { 
    background: linear-gradient(135deg, #00b894, #55efc4) !important; 
    color: #000 !important;
}

/* C+ 级 与 C 级 - 熔岩橙 */
.tier-c_plus:not(.card-female) .bc-name,
.tier-c:not(.card-female) .bc-name { 
    background: linear-gradient(135deg, #d35400, #e17055) !important; 
    color: #fff !important;
}

/* D+ 级 与 D 级 - 坚毅灰 */
.tier-d_plus:not(.card-female) .bc-name,
.tier-d:not(.card-female) .bc-name { 
    background: #636e72 !important; 
    color: #fff !important;
}

/* E 级 - 暗黑深灰 */
.tier-e:not(.card-female) .bc-name { 
    background: #2d3436 !important; 
    color: #888 !important;
}