﻿
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'Microsoft YaHei',sans-serif;background:#0a0a15;color:#e0e0e0;min-height:100vh;cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12' fill='%23ffffff' stroke='%23111' stroke-width='1.6'/%3E%3Cpolygon points='14,7 19,11 17,17 11,17 9,11' fill='%23111'/%3E%3Cpath d='M14,7 L14,2 M19,11 L24,9 M17,17 L21,22 M11,17 L7,22 M9,11 L4,9' stroke='%23111' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 14 14, auto}
.header{background:linear-gradient(135deg,#0d1b2a 0%,#1b2838 50%,#0d1b2a 100%);padding:20px 30px;text-align:center;border-bottom:3px solid #c9a227}
.header h1{font-size:1.8em;color:#fff;margin-bottom:5px}
.header h1 span{color:#c9a227}
.header p{color:#888;font-size:0.9em}
.nav{display:flex;justify-content:center;gap:8px;padding:12px 20px;background:#0d0d1a;border-bottom:1px solid #222;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav-btn{padding:10px 22px;border-radius:25px;border:1px solid #333;background:transparent;color:#aaa;cursor:pointer;font-size:0.9em;transition:all .3s}
.nav-btn.active{background:linear-gradient(135deg,#c9a227,#d4af37);color:#000;border-color:#c9a227;font-weight:bold}
.nav-btn:hover{border-color:#c9a227;color:#fff}
.nav-groups{display:flex;justify-content:center;gap:8px;padding:10px 16px;background:linear-gradient(180deg,#0d0d1a,#080812);border-bottom:1px solid #2a2a3e;flex-wrap:wrap}
.nav-group-btn{padding:8px 20px;border-radius:22px;border:1px solid #3a3a55;background:rgba(255,255,255,0.04);color:#bbb;cursor:pointer;font-size:0.9em;font-weight:500;transition:all .2s;white-space:nowrap;letter-spacing:0.3px}
.nav-group-btn.active{border-color:#c9a227;background:linear-gradient(135deg,#c9a227,#e0b830);color:#000;font-weight:bold;box-shadow:0 2px 12px rgba(201,162,39,0.4)}
.nav-group-btn:hover:not(.active){border-color:#c9a227;color:#fff;background:rgba(201,162,39,0.08)}
.ng-count{display:inline-block;background:rgba(255,255,255,0.12);border-radius:9px;padding:0 6px;font-size:0.78em;margin-left:4px;vertical-align:middle;line-height:1.6}
.nav-group-btn.active .ng-count{background:rgba(0,0,0,0.2);color:#000}
.news-filter-btn{padding:5px 14px;border-radius:16px;border:1px solid #3a3a55;background:transparent;color:#888;cursor:pointer;font-size:0.8em;transition:all .2s}
.news-filter-btn.active{border-color:#c9a227;background:rgba(201,162,39,0.15);color:#c9a227;font-weight:bold}
.news-filter-btn:hover:not(.active){border-color:#555;color:#bbb}
.article-card{background:#111827;border-radius:10px;padding:14px 16px;margin-bottom:10px;border:1px solid #1f2937;cursor:pointer;transition:border-color .2s}
.article-card:hover{border-color:#c9a227}
.article-type-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:0.72em;font-weight:bold;margin-right:6px;vertical-align:middle}
.container{max-width:1200px;margin:0 auto;padding:20px}
.section{display:none}
.section.active{display:block;animation:tabFadeIn 0.25s ease}
@keyframes tabFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 4px rgba(201,162,39,0.3)}50%{box-shadow:0 0 12px rgba(201,162,39,0.6),0 0 24px rgba(201,162,39,0.2)}}
/* 移动端底部导航 */
@media(max-width:768px){
  .header{font-size:0.82em;padding:8px 10px;flex-wrap:wrap}
  #headerInfoBar{gap:4px!important;font-size:0.9em}
  .container{padding:10px 8px 70px}
  .card{padding:14px 12px}
}
.mnav-item:active{transform:scale(0.9);opacity:0.7}
.card{background:#111827;border-radius:12px;padding:20px;margin-bottom:15px;border:1px solid #1f2937;overflow:hidden}
.card:hover{border-color:#c9a227}

/* 倒计时 */
.cd-block{display:inline-flex;flex-direction:column;align-items:center;background:rgba(201,162,39,0.1);border:1px solid rgba(201,162,39,0.25);border-radius:8px;padding:4px 10px;min-width:48px}
.cd-num{font-size:1.6em;font-weight:bold;color:#f1c40f;line-height:1.2;font-variant-numeric:tabular-nums}
.cd-label{font-size:0.62em;color:#888;margin-top:1px;text-transform:uppercase}
.cd-sep{color:#c9a22766;font-size:1.4em;font-weight:bold;line-height:1}
.cd-sec{color:#e74c3c}
@keyframes cdPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.cd-sec{animation:cdPulse 1s ease-in-out infinite}
/* 浮动抽奖按钮 */
#floatSpinBtn{position:fixed;bottom:80px;right:16px;z-index:9990;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e74c3c,#c0392b);border:2px solid rgba(255,255,255,0.2);color:#fff;font-size:1.3em;cursor:pointer;box-shadow:0 4px 20px rgba(231,76,60,0.5);display:flex;align-items:center;justify-content:center;transition:transform 0.2s;animation:floatBounce 2s ease-in-out infinite}
#floatSpinBtn:hover{transform:scale(1.1)}
#floatSpinBtn .float-badge{position:absolute;top:-4px;right:-4px;background:#f1c40f;color:#000;font-size:0.38em;font-weight:bold;padding:2px 5px;border-radius:8px;white-space:nowrap}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 浮动签到按钮 */
#floatCheckinBtn{position:fixed;bottom:180px;right:16px;z-index:9990;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c9a227,#f5d76e);border:2px solid rgba(255,255,255,0.3);color:#1a1a2e;font-size:1.3em;cursor:pointer;box-shadow:0 0 24px rgba(201,162,39,0.6),0 0 48px rgba(201,162,39,0.2);display:none;align-items:center;justify-content:center;transition:transform 0.2s;animation:checkinFloat 1.5s ease-in-out infinite}
#floatCheckinBtn:hover{transform:scale(1.15)}
#floatCheckinBtn .float-badge{position:absolute;top:-6px;right:-8px;background:#e74c3c;color:#fff;font-size:0.35em;font-weight:bold;padding:2px 6px;border-radius:8px;white-space:nowrap;animation:cdPulse 1s infinite}
@keyframes checkinFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}
@keyframes checkinGlow{0%,100%{box-shadow:0 0 24px rgba(201,162,39,0.6)}50%{box-shadow:0 0 40px rgba(201,162,39,0.9),0 0 80px rgba(245,215,110,0.3)}}
/* 签到成功闪光 */
@keyframes checkinFlash{0%{opacity:0.8}100%{opacity:0}}
/* 体彩悬浮按钮动效 */
@keyframes lotFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.05)}}
#lotteryPanel{animation:lotPanelIn 0.25s ease-out}
@keyframes lotPanelIn{from{opacity:0;transform:translateY(20px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
/* 广告条动效 */
@keyframes adShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.ad-bar{background:linear-gradient(90deg,#0a1628,#132a4a,#0a1628,#132a4a);background-size:200% 100%;animation:adShimmer 6s ease-in-out infinite;border:1px solid rgba(52,152,219,0.35);border-radius:8px;padding:10px 16px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;font-size:0.84em}

/* 预测排名 */
.pred-item{display:flex;align-items:center;padding:14px 18px;background:#111827;border-radius:10px;margin-bottom:8px;border:1px solid #1f2937;cursor:pointer;transition:all .2s}
.pred-item:hover{border-color:#c9a227;transform:translateX(4px)}
.pred-rank{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.95em;flex-shrink:0}
.pred-rank-wrap{display:flex;flex-direction:column;align-items:center;margin-right:12px;gap:2px}
.trend-up{font-size:0.6em;color:#27ae60;font-weight:bold;line-height:1}
.trend-dn{font-size:0.6em;color:#e74c3c;font-weight:bold;line-height:1}
.trend-eq{font-size:0.6em;color:#333;line-height:1}
.r1{background:#c9a227;color:#000}.r2{background:#aaa;color:#000}.r3{background:#cd7f32;color:#000}.rn{background:#1f2937;color:#888}
.pred-info{flex:1;min-width:0}
.pred-name{font-size:1.05em;font-weight:600}
.pred-meta{font-size:0.8em;color:#666;margin-top:2px}
.pred-bar-wrap{width:200px;margin:0 15px}
.pred-bar{height:8px;border-radius:4px;background:#1f2937}
.pred-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#c9a227,#f0d060);transition:width .5s}
.pred-prob{font-size:1.1em;font-weight:bold;color:#c9a227;min-width:60px;text-align:right}
.pred-form{margin-top:4px;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.form-pill{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:0.62em;font-weight:bold;color:#000;flex-shrink:0}
.form-pill.W{background:#27ae60}.form-pill.D{background:#f39c12}.form-pill.L{background:#e74c3c;color:#fff}
.vote-pct-bar{margin-top:3px}

/* 球队卡片 */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.team-card{background:#111827;border-radius:10px;padding:15px;text-align:center;cursor:pointer;border:1px solid #1f2937;transition:all .2s}
.team-card:hover{border-color:#c9a227;transform:translateY(-3px)}
.team-flag{font-size:2.5em;margin-bottom:8px}
.team-name{font-weight:600;font-size:1em}
.team-rank-badge{display:inline-block;background:#1f2937;padding:2px 10px;border-radius:10px;font-size:0.75em;color:#888;margin-top:5px}
.team-stars{color:#c9a227;font-size:0.85em;margin-top:4px}

/* 对比 */
.compare-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.compare-team{flex:1;min-width:280px}
.compare-vs{display:flex;align-items:center;justify-content:center;font-size:2em;color:#c9a227;padding:20px;font-weight:bold}
.radar-wrap{text-align:center;margin:20px 0}
.match-prob{display:flex;gap:5px;height:40px;border-radius:8px;overflow:hidden;margin:15px 0}
.prob-bar{display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.85em;transition:width .5s}
.select-team{width:100%;padding:10px;border-radius:8px;background:#1f2937;border:1px solid #333;color:#fff;font-size:1em;cursor:pointer}
.select-team option{background:#111827}

/* 投票 */
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:15px 0}
.vote-btn{padding:12px;border-radius:10px;border:2px solid #1f2937;background:transparent;color:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:0.9em}
.vote-btn:hover{border-color:#c9a227}
.vote-btn.selected{border-color:#c9a227;background:rgba(201,162,39,0.15)}
.vote-btn.prev-voted{border-color:rgba(201,162,39,0.6);background:rgba(201,162,39,0.07)}
.consensus-bar{display:flex;align-items:center;gap:8px;font-size:0.8em;margin:3px 0}
.consensus-fill{height:5px;border-radius:3px;transition:width .6s ease}
/* 联赛筛选按钮 */
.conf-btn{padding:5px 13px;border-radius:16px;border:1px solid #333;background:transparent;color:#888;cursor:pointer;font-size:0.8em;transition:all .2s;white-space:nowrap}
.conf-btn:hover{border-color:#c9a227;color:#ddd}
.conf-btn.active{border-color:#c9a227;background:rgba(201,162,39,0.15);color:#c9a227;font-weight:bold}
.vote-result{display:flex;align-items:center;margin-bottom:8px;font-size:0.95em}
.vote-result .vr-name{width:100px;text-align:right;margin-right:10px}
.vote-result .vr-bar{flex:1;height:28px;background:#1f2937;border-radius:6px;overflow:hidden;position:relative}
.vote-result .vr-fill{height:100%;background:linear-gradient(90deg,#c9a227,#f0d060);border-radius:6px;transition:width .5s;display:flex;align-items:center;padding-left:8px;font-size:0.8em;color:#000;font-weight:bold;white-space:nowrap}
.vote-result .vr-count{width:60px;text-align:left;margin-left:8px;color:#888}

/* 详情 */
.detail-header{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.detail-flag{font-size:4em}
.detail-ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.rating-item{background:#0d1b2a;border-radius:8px;padding:12px;text-align:center}
.rating-item .rl{font-size:0.8em;color:#888}
.rating-item .rv{font-size:1.5em;font-weight:bold;color:#c9a227}
.player-row{display:flex;align-items:center;padding:10px 15px;border-bottom:1px solid #1f2937}
.player-row:last-child{border-bottom:none}
.player-pos{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7em;font-weight:bold;margin-right:12px}
.pos-FW{background:#e74c3c;color:#fff}.pos-MF{background:#27ae60;color:#fff}.pos-DF{background:#3498db;color:#fff}.pos-GK{background:#f39c12;color:#000}
.player-name{flex:1;font-weight:500}
.player-club{color:#888;font-size:0.85em;flex:1}
.player-rating{background:#1f2937;padding:3px 10px;border-radius:10px;font-weight:bold;font-size:0.85em}
.player-injured{color:#e74c3c;font-size:0.85em;margin-left:8px}
.tag{display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.75em;margin:2px}
.tag-str{background:rgba(39,174,96,0.2);color:#27ae60;border:1px solid rgba(39,174,96,0.3)}
.tag-weak{background:rgba(231,76,60,0.2);color:#e74c3c;border:1px solid rgba(231,76,60,0.3)}

.btn{padding:10px 24px;border-radius:8px;border:none;cursor:pointer;font-size:0.95em;transition:all .2s}
.btn-gold{background:linear-gradient(135deg,#c9a227,#d4af37);color:#000;font-weight:bold}
.btn-gold:hover{background:linear-gradient(135deg,#d4af37,#e8c547)}
.btn-ghost{background:transparent;border:1px solid #333;color:#aaa}
.btn-ghost:hover{border-color:#c9a227;color:#c9a227}
.back-btn{margin-bottom:15px}
input,textarea{background:#1f2937;border:1px solid #333;color:#fff;padding:10px;border-radius:8px;font-size:0.9em;width:100%}
textarea{resize:vertical;min-height:60px}

.filter-bar{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}
.filter-btn{padding:6px 14px;border-radius:15px;border:1px solid #333;background:transparent;color:#aaa;cursor:pointer;font-size:0.8em}
.filter-btn.active{background:#c9a227;color:#000;border-color:#c9a227}
.empty{text-align:center;padding:40px;color:#555}
html{scrollbar-color:#555 #0a0a15;scrollbar-width:auto}
/* 手机端适配 */
@media(max-width:768px){
  .pred-bar-wrap{width:120px}
  .header{padding:14px 16px}
  .container{padding:12px}
}
@media(max-width:640px){
  /* Header */
  .header{padding:12px 14px}
  .header h1{font-size:1.25em}
  .header p{font-size:0.78em}
  /* 导航：横向滚动，不换行 */
  .nav{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding:8px 10px;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative}
  .nav::-webkit-scrollbar{display:none}
  .nav::after{content:'';position:sticky;right:0;top:0;width:32px;height:100%;background:linear-gradient(to right,transparent,#0d0d1a);pointer-events:none;flex-shrink:0}
  .nav-btn{font-size:0.75em;padding:7px 12px;white-space:nowrap;flex-shrink:0;touch-action:manipulation}
  /* 容器 */
  .container{padding:8px}
  .card{padding:12px}
  /* 预测列表 */
  .pred-bar-wrap{display:none}
  .pred-item{padding:10px 12px}
  .pred-rank{width:28px;height:28px;font-size:0.8em;margin-right:10px}
  .pred-prob{font-size:1em;min-width:48px}
  /* 球队网格 */
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  /* 对比 */
  .compare-wrap{flex-direction:column}
  .compare-team{min-width:100%}
  .compare-vs{font-size:1.3em;padding:8px}
  /* 球队详情 */
  .detail-header{flex-direction:column;text-align:center;gap:8px}
  .detail-flag{font-size:3em}
  .detail-ratings{grid-template-columns:repeat(2,1fr)}
  /* 投票 */
  .vote-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  /* 球员列表 */
  .player-club{display:none}
  .player-row{padding:6px 8px;font-size:0.85em}
  /* 倒计时 */
  .cd-block{min-width:40px;padding:3px 8px}
  .cd-num{font-size:1.3em}
  .cd-label{font-size:0.58em}
  .cd-sep{font-size:1.1em}
  /* 广告条 */
  .ad-bar{font-size:0.76em;padding:8px 12px;gap:8px}
  /* 浮动签到按钮 */
  #floatCheckinBtn{width:44px;height:44px;font-size:1.2em;bottom:190px;right:12px}
  #floatCheckinBtn .float-badge{font-size:0.33em}
  /* 浮动抽奖按钮 */
  #floatSpinBtn{width:44px;height:44px;font-size:1.2em;bottom:75px;right:12px}
  #floatSpinBtn .float-badge{font-size:0.36em}
  /* 滚动提示 */
  #worldClock{gap:8px}
  /* 表格横向滚动 */
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
  /* 淘汰赛：单列 */
  #knockoutResult .card div[style*="grid-template-columns:1fr 1fr"],
  #knockoutResult .card div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  /* 战术：教练五维数据 5列→3列 */
  #tacticsResult div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr)!important}
  /* 冠军之路：MC 4列→2列 */
  #championPathResult div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* 回测指标：3列保持，但字号缩小 */
  #backtestResult div[style*="grid-template-columns:repeat(3,1fr)"] div{padding:8px 4px!important}
  /* PK/对比：历史交锋4列→2列 */
  #compareResult div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* 赛程：右侧时间区域允许换行 */
  #scheduleList .card div[style*="text-align:right"]{min-width:90px!important}
  /* 球场：单列 */
  #venuesList{grid-template-columns:1fr!important}
  /* 世界时钟：防止溢出 */
  #worldClock{gap:8px!important;font-size:0.8em!important}
  /* 分级球队卡片：等宽收缩 */
  #tiersList .card div[style*="display:flex;flex-wrap:wrap"]{gap:6px!important}
}
@media(max-width:480px){
  .nav-groups{gap:4px;padding:6px 10px}
  .nav-group-btn{padding:4px 12px;font-size:0.76em}
}
@media(max-width:380px){
  .header h1{font-size:1.1em}
  .nav-btn{font-size:0.7em;padding:6px 10px}
  .nav-group-btn{padding:3px 9px;font-size:0.7em}
  .cd-block{min-width:36px;padding:2px 6px}
  .cd-num{font-size:1.1em}
  #floatCheckinBtn{width:40px;height:40px;font-size:1.1em;bottom:175px;right:8px}
  #floatCheckinBtn .float-badge{font-size:0.3em}
  #floatSpinBtn{width:40px;height:40px;font-size:1.1em;bottom:70px;right:8px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .detail-ratings{grid-template-columns:repeat(2,1fr)}
  #tacticsResult div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
/* Toast 通知 */
#toastContainer{position:fixed;top:20px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:#1e2a3a;color:#e0e0e0;padding:10px 16px;border-radius:10px;font-size:0.88em;box-shadow:0 4px 16px rgba(0,0,0,0.4);opacity:0;transform:translateX(40px);transition:opacity .25s,transform .25s;pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:300px;border-left:3px solid #555;position:relative;overflow:hidden}
.toast.show{opacity:1;transform:translateX(0)}
.toast.success{border-left-color:#27ae60;background:#0d1f15}
.toast.error{border-left-color:#e74c3c;background:#1f0d0d}
.toast.warn{border-left-color:#f39c12;background:#1f1a0d}
.toast-progress{position:absolute;bottom:0;left:0;height:2px;background:currentColor;opacity:.4;width:100%;animation:toastProg 3s linear forwards}
@keyframes toastProg{from{width:100%}to{width:0%}}
/* 全局搜索 */
#globalSearch{position:relative;margin-top:12px;display:inline-block;width:100%;max-width:360px}
#searchInput{width:100%;padding:9px 38px 9px 16px;border-radius:22px;border:1px solid #333;background:rgba(13,13,26,0.9);color:#fff;font-size:0.88em;outline:none;box-sizing:border-box;transition:border-color .2s}
#searchInput:focus{border-color:#c9a227;box-shadow:0 0 0 2px rgba(201,162,39,0.15)}
#searchInput::placeholder{color:#555}
#searchIcon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#555;pointer-events:none;font-size:0.9em}
#searchDropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#1a1a2e;border:1px solid #2a2a3e;border-radius:12px;max-height:280px;overflow-y:auto;z-index:600;display:none;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
#searchDropdown.show{display:block}
.search-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid #1f2937;font-size:0.88em;transition:background .15s}
.search-item:hover{background:rgba(201,162,39,0.1)}
.search-item:last-child{border-bottom:none;border-radius:0 0 12px 12px}
.search-divider{padding:4px 14px;font-size:0.75em;color:#555;background:#111;letter-spacing:.05em;border-bottom:1px solid #1f2937}
.search-item.player-item{background:rgba(52,152,219,0.03)}
.search-item.player-item:hover{background:rgba(52,152,219,0.1)}
.pos-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:0.75em;font-weight:bold;flex-shrink:0}
.pos-GK{background:rgba(243,156,18,0.2);color:#f39c12}
.pos-DF{background:rgba(52,152,219,0.2);color:#3498db}
.pos-MF{background:rgba(39,174,96,0.2);color:#27ae60}
.pos-FW{background:rgba(231,76,60,0.2);color:#e74c3c}
/* 球员详情 Modal */
#playerModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:9997;justify-content:center;align-items:center;padding:16px}
#playerModal.show{display:flex}
#playerModalBox{background:#1a1a2e;border-radius:16px;border:1px solid #2a2a3e;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 60px rgba(0,0,0,0.7);animation:fadeSlideUp .25s ease}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* 今日比赛 Banner */
#todayBanner{display:none;border-radius:10px;padding:10px 16px;margin-bottom:12px;border:1px solid rgba(39,174,96,0.5);background:linear-gradient(135deg,rgba(39,174,96,0.08),rgba(0,0,0,0));animation:todayPulse 2.5s ease-in-out infinite}
@keyframes todayPulse{0%,100%{border-color:rgba(39,174,96,0.4)}50%{border-color:rgba(39,174,96,0.9)}}
/* 连续签到 streak */
.streak-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(243,156,18,0.15),rgba(0,0,0,0));border:1px solid rgba(243,156,18,0.4);border-radius:16px;padding:3px 10px;font-size:0.8em;color:#f39c12;margin-left:8px;cursor:default}
.points-badge{display:inline-block;background:rgba(201,162,39,0.18);border:1px solid rgba(201,162,39,0.35);border-radius:6px;padding:0px 4px;font-size:0.68em;color:#c9a227;margin-left:3px;vertical-align:middle;line-height:1.5}
.nav-btn.active .points-badge,.nav-group-btn.active .points-badge{background:rgba(0,0,0,0.25);border-color:rgba(0,0,0,0.3);color:#1a1a2e;font-weight:bold}
.live-btn{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;color:#fff;font-weight:bold;font-size:0.9em;text-decoration:none;transition:opacity 0.15s,transform 0.15s}
.live-btn:hover{opacity:0.85;transform:translateY(-1px)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes navGlow{0%,100%{box-shadow:0 0 4px rgba(201,162,39,0.3),0 0 8px rgba(201,162,39,0.1);border-color:rgba(201,162,39,0.4)}50%{box-shadow:0 0 12px rgba(201,162,39,0.6),0 0 24px rgba(201,162,39,0.25);border-color:rgba(201,162,39,0.8)}}
.nav-glow{animation:navGlow 2s ease-in-out infinite}
.nav-glow.active{animation:none}
/* 分享卡片模态 */
#shareCardModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9998;justify-content:center;align-items:center;padding:20px}
#shareCardModal.show{display:flex}
#shareCardWrap{background:#0d1117;border-radius:16px;padding:20px;border:1px solid #333;max-width:420px;width:100%;max-height:90vh;overflow-y:auto}
#shareCanvas{border-radius:10px;display:block;margin:0 auto;max-width:100%}
/* 日历视图 */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:10px}
.cal-head{text-align:center;font-size:0.7em;color:#555;padding:4px 0;font-weight:bold}
.cal-day{min-height:44px;border-radius:6px;padding:3px;border:1px solid #1f2937;background:#0d0d1a;font-size:0.7em}
.cal-day.has-match{background:#0d1b2a;border-color:#2a4a6e;cursor:pointer}
.cal-day.has-match:hover{border-color:#3498db}
.cal-day.today{border-color:#27ae60!important;background:rgba(39,174,96,0.08)!important}
.cal-date{color:#555;font-size:0.75em;margin-bottom:2px}
.cal-match{font-size:0.65em;color:#aaa;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 竞猜 */
.guess-card{background:#0d1b2a;border:1px solid #1f3a5f;border-radius:10px;padding:12px;margin-bottom:8px}
.guess-btn{padding:5px 12px;border-radius:8px;border:1px solid #333;background:transparent;color:#888;cursor:pointer;font-size:0.8em;transition:all .2s}
.guess-btn.picked{background:rgba(52,152,219,0.2);border-color:#3498db;color:#3498db;font-weight:bold}
.guess-btn.correct{background:rgba(39,174,96,0.2);border-color:#27ae60;color:#27ae60}
.guess-btn.wrong{background:rgba(231,76,60,0.1);border-color:#e74c3c;color:#e74c3c}
/* 我的页 */
.my-section{background:#0d0d1a;border-radius:12px;padding:16px;margin-bottom:14px;border:1px solid #1f2937}
.my-section h3{color:#c9a227;margin-bottom:10px;font-size:0.95em}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.stat-box{background:#0a0a15;border-radius:10px;padding:12px 8px;text-align:center;border:1px solid #1f2937}
.stat-num{font-size:1.6em;font-weight:bold;color:#c9a227}
.stat-lbl{font-size:0.72em;color:#888;margin-top:3px}
/* ===== Skeleton 加载屏 ===== */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,#1a1a2e 25%,#252535 50%,#1a1a2e 75%);background-size:800px 100%;animation:shimmer 1.4s infinite;border-radius:6px}
.skel-card{background:#0d0d1a;border:1px solid #1f2937;border-radius:12px;padding:16px;margin-bottom:10px}
.skel-line{height:14px;margin:6px 0}
.skel-line.w-80{width:80%}.skel-line.w-60{width:60%}.skel-line.w-40{width:40%}
.skel-circle{width:40px;height:40px;border-radius:50%}
/* ===== 小游戏 ===== */
.game-sel-btn:hover{border-color:#c9a227!important;background:#1a2744!important}
.game-sel-btn.active{border-color:#c9a227!important;background:rgba(201,162,39,0.12)!important}
.game-opt-btn{display:block;width:100%;padding:12px 16px;margin-bottom:8px;background:#1f2937;border:2px solid #2a3a50;border-radius:10px;color:#ccc;font-size:0.92em;cursor:pointer;text-align:left;transition:all .2s}
.game-opt-btn:hover{border-color:#c9a227;background:#1a2744}
.game-opt-btn.correct{border-color:#27ae60!important;background:rgba(39,174,96,0.15)!important;color:#27ae60!important}
.game-opt-btn.wrong{border-color:#e74c3c!important;background:rgba(231,76,60,0.15)!important;color:#e74c3c!important}
.game-timer-bar{height:4px;background:#c9a227;border-radius:2px;transition:width 0.3s linear}
/* ===== 养螃蟹 ===== */
@keyframes crabBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes crabWiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes crabSleep{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes bubblePop{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(0.5)}}
@keyframes crabEat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes expGain{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-25px)}}
.crab-avatar{display:inline-block;font-size:4em;line-height:1;animation:crabBob 2s ease-in-out infinite;cursor:pointer;user-select:none;transition:transform 0.2s}
.crab-avatar:hover{animation:crabWiggle 0.4s ease-in-out}
.crab-avatar.sleeping{animation:crabSleep 2s ease-in-out infinite}
.crab-avatar.eating{animation:crabEat 0.5s ease-in-out}
.crab-stat-bar{height:6px;border-radius:3px;background:#1a1a2e;overflow:hidden;flex:1}
.crab-stat-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.crab-action-btn{padding:8px 14px;border-radius:10px;border:1px solid #333;background:#1a1a2e;color:#ccc;cursor:pointer;font-size:0.82em;transition:all .2s;display:flex;align-items:center;gap:4px}
.crab-action-btn:hover{border-color:#c9a227;background:rgba(201,162,39,0.1);color:#c9a227}
.crab-action-btn:disabled{opacity:0.4;cursor:not-allowed}
.crab-exp-popup{position:absolute;color:#c9a227;font-weight:bold;font-size:0.88em;pointer-events:none;animation:expGain 1s ease-out forwards}
.crab-accessory{position:absolute;font-size:1.5em;pointer-events:none;transition:all 0.3s}
/* 浮动螃蟹宠物 */
@keyframes eggRock{0%,100%{transform:rotate(0deg)}20%{transform:rotate(8deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}
@keyframes eggBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes crabCrawl{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes crabBubble{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:0.8;transform:translateY(-12px) scale(1.1)}100%{opacity:0;transform:translateY(-24px) scale(0.6)}}
#floatCrabPet{position:fixed;z-index:9990;cursor:grab;user-select:none;transition:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5))}
#floatCrabPet:active{cursor:grabbing}
#floatCrabPet .fc-emoji{font-size:2.2em;line-height:1;display:block;transition:transform 0.3s}
#floatCrabPet.stage-egg .fc-emoji{animation:eggRock 3s ease-in-out infinite,eggBounce 2s ease-in-out infinite}
#floatCrabPet.stage-baby .fc-emoji{animation:eggBounce 1.5s ease-in-out infinite}
#floatCrabPet.stage-crab .fc-emoji{animation:crabCrawl 1.2s ease-in-out infinite}
#floatCrabPet .fc-bubble{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:0.65em;white-space:nowrap;background:rgba(0,0,0,0.75);color:#f5d76e;padding:2px 8px;border-radius:10px;pointer-events:none;animation:crabBubble 3s ease-out forwards}
#floatCrabPet .fc-bar{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:36px;height:3px;border-radius:2px;background:#1a1a2e;overflow:hidden}
#floatCrabPet .fc-bar-fill{height:100%;border-radius:2px;background:#c9a227}
#floatCrabPet .fc-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111827;border:1px solid #c9a227;border-radius:10px;padding:6px;display:none;white-space:nowrap;font-size:0.75em;min-width:100px}
#floatCrabPet .fc-menu.show{display:block}
#floatCrabPet .fc-menu-item{display:block;padding:5px 10px;color:#ccc;cursor:pointer;border-radius:6px;text-align:center}
#floatCrabPet .fc-menu-item:hover{background:rgba(201,162,39,0.15);color:#c9a227}

/* ===== 卡片入场动画 ===== */
@keyframes cardSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card{animation:cardSlideIn 0.3s ease-out}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:box-shadow 0.3s,border-color 0.3s}
/* 按钮点击反馈 */
.btn:active,.nav-btn:active,.nav-group-btn:active,.vote-btn:active,.guess-btn:active,.conf-btn:active{transform:scale(0.95);transition:transform 0.1s}
/* 平滑滚动 */
html{scroll-behavior:smooth}
/* 选中文字颜色 */
::selection{background:rgba(201,162,39,0.3);color:#fff}
/* 链接过渡 */
a{transition:color 0.2s}
/* 图片懒加载占位 */
img[loading="lazy"]{opacity:0;transition:opacity 0.3s}
img[loading="lazy"].loaded,img[loading="lazy"][complete]{opacity:1}
/* 输入框聚焦效果 */
input:focus,textarea:focus,select:focus{border-color:#c9a227!important;box-shadow:0 0 0 2px rgba(201,162,39,0.15);outline:none}
/* 手机端：战绩公示/情报中心/串关适配 */
@media(max-width:640px){
  /* 战绩公示4列→2列 */
  #aiTrackRecord div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* 情报中心卡片内边距 */
  #intelPicksList .card{padding:12px 10px}
  /* 串关方案：防溢出 */
  #parlayPicks div[style*="display:flex;justify-content:space-between"]{flex-wrap:wrap;gap:4px}
  /* 专家面板3列→2列 */
  #expertCenter div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:380px){
  /* 极小屏：战绩公示进一步缩小 */
  #aiTrackRecord div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:4px!important}
  #aiTrackRecord div[style*="grid-template-columns:repeat(4,1fr)"]>div{padding:6px 4px!important}
  /* 串关卡片内边距 */
  #parlayPicks{font-size:0.95em}
}
/* 触摸设备优化 */
@media(hover:none){
  .card:hover{box-shadow:none;border-color:#1f2937}
  .pred-item:hover{transform:none}
  .team-card:hover{transform:none}
}
