/* bracket.css — 共享竞猜树样式 */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --bg:#0a0a0f;--bg2:#12121a;
    --accent:#00d4ff;--accent2:#0099cc;
    --text:#f0f0f0;--text2:#a0a0b0;
    --grid:rgba(0,212,255,0.08);
    --card:rgba(18,18,26,0.85);
    --sel:#00b894;
    --gold:#ffd700;
    --connect-line:1px solid rgba(255,255,255,.2);
}
body{
    font-family:'Segoe UI',-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
}
a {
    color: var(--accent);
    transition: color .3s ease;
    text-decoration: none;
}
a:hover {
    color: var(--accent2);
}

.grid-bg{
    position:fixed;top:0;left:0;
    width:100%;height:100%;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:50px 50px;
    z-index:-1;opacity:.3;
}
.container{
    max-width:100%;
    margin:0 auto;
    padding:1rem;
}
header{
    text-align:center;
    padding:1rem 0;
}
.logo{
    font-size:1.8rem;
    font-weight:700;
    background:linear-gradient(90deg,var(--accent),#9d4edd);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:2px;
}
.subtitle{
    color:var(--text2);
    font-size:.9rem;
    margin-top:.3rem;
}
.spinner{
    width:36px;height:36px;
    border:3px solid rgba(255,255,255,.1);border-top-color:#ff9800;border-radius:50%;
    animation:spin .8s linear infinite;margin-bottom:12px;}

@keyframes spin{to{transform:rotate(360deg);}}

/* 滚动条 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--accent2);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.track-list::-webkit-scrollbar {
    width: 6px;
}

/* 竞猜树 */
.bracket-wp{
    position:relative;
    overflow-x:auto;overflow-y:visible;
    padding:10px 0 20px;
}
.bracket-mob{
    display:flex;flex-direction:row;
    justify-content:flex-start;align-items:flex-start;
    gap:4px;padding:5px 0;
    min-width:0;overflow-x:auto;
}

.bracket-desk{display:none}
.bc-grid{display:flex;gap:2rem}
.bc-half{display:flex;gap:2rem}

.desk-cen{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:1rem;height:fit-content;
    align-self:center;
    transform: translateY(40%);
}

.rcol{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;flex-shrink:0}
.bracket-mob .rcol:nth-of-type(2) {gap:118px;}
.bracket-mob .rcol:nth-of-type(3) {gap:325px;}
.bracket-mob .rcol:nth-of-type(4) {gap:732px;}
.bracket-mob .bc-grid {align-items:center;}
.bracket-mob .cbox {position:relative;margin-top:-1rem;}

/* 移动端连接线 */
/* 赛后线 */
.bracket-mob .bm::after {
    content:'';
    position:absolute;
    bottom:14px;
    top:32px;
    right:-0.6rem;
    width:0.5rem;
    border:var(--connect-line);
    border-left:none;
}

/* 赛前线 */
.bracket-mob .rcol:nth-of-type(n+2) .bm .mt::before {
    content:'';
    position:absolute;
    top: 0px;
    left: -1.5rem;
    width: 1rem;
    border-top: var(--connect-line);
}

.bracket-mob .rcol:nth-of-type(n+2) .bm .mt::after {
    content:'';
    position:absolute;
    bottom: -16px;
    left:-1.5rem;
    width: 1rem;
    border-bottom: var(--connect-line);
}
.bracket-mob .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(1)::before {
    content:'';
    position:absolute;
    bottom:48px;
    top:0px;
    left:-0.5rem;  
    width:0.5rem;
    border:var(--connect-line);
    border-top:none;
    border-right:none;
}

.bracket-mob .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(2)::before {
    content:'';
    position:absolute;
    bottom:-16px;
    top:66px;
    left:-0.5rem;
    width:0.5rem;
    border:var(--connect-line);
    border-bottom:none;
    border-right:none;
}

.bracket-mob .rcol:nth-of-type(3) .bm .tb:nth-of-type(1)::before,
.bracket-mob .rcol:nth-of-type(3) .bm .mt::before {
    top:-50px;
}
.bracket-mob .rcol:nth-of-type(4) .bm .tb:nth-of-type(1)::before,
.bracket-mob .rcol:nth-of-type(4) .bm .mt::before {
    top:-154px;
}
.bracket-mob .rcol:nth-of-type(5) .bm .tb:nth-of-type(1)::before,
.bracket-mob .rcol:nth-of-type(5) .bm .mt::before {
    top:-360px;
}

.bracket-mob .rcol:nth-of-type(3) .bm .tb:nth-of-type(2)::before,
.bracket-mob .rcol:nth-of-type(3) .bm .mt::after {
    bottom:-72px;
}
.bracket-mob .rcol:nth-of-type(4) .bm .tb:nth-of-type(2)::before,
.bracket-mob .rcol:nth-of-type(4) .bm .mt::after {
    bottom:-174px;
}
.bracket-mob .rcol:nth-of-type(5) .bm .tb:nth-of-type(2)::before,
.bracket-mob .rcol:nth-of-type(5) .bm .mt::after {
    bottom:-380px;
}

.bracket-mob .cbox::before {
    content:'';
    position:absolute;
    bottom:44px;
    left:-1.5rem;
    width:1.5rem;
    border-bottom:var(--connect-line);
}

.rl{text-align:center;font-size:.9rem;font-weight:600;color:var(--accent);margin-bottom:4px;letter-spacing:1px;text-transform:uppercase;width:140px;}
.rf{text-align:center;color:var(--gold);font-weight:600;width:288px;}
.stages {
    position:sticky;
    display:flex;
    justify-content:space-between;
    margin-bottom:1rem;
    gap:2rem;
}

/* 比赛区块 */
.bm {
    position:relative;
}
.desk-cen .fm {
    display:flex;
    gap: 0.5rem;
}

/* 桌面端连接线 */
/* 赛后线 */
.upper .bm::after,
.lower .bm::after {
    content:'';
    position:absolute;
    bottom:16px;
    top:34px;    
    width:0.5rem;
    border:var(--connect-line);
}
.upper .bm::after {    
    right:-0.6rem;
    border-left:none;
}
.lower .bm::after {
    left:-0.6rem;
    border-right:none;
}

/* 16强连接线 */
.upper .rcol:nth-of-type(n+2) .bm .mt::before,
.lower .rcol:nth-last-of-type(n+2) .bm .mt::before {
    content:'';
    position:absolute;
    top: 0px;
    width: 1rem;
    border-top: var(--connect-line);
}
.upper .rcol:nth-of-type(n+2) .bm .mt::before,
.upper .rcol:nth-of-type(n+2) .bm .mt::after{
    left:-1.5rem;
}
.lower .rcol:nth-last-of-type(n+2) .bm .mt::before,
.lower .rcol:nth-last-of-type(n+2) .bm .mt::after {
    right:-1.5rem;
}

.upper .rcol:nth-of-type(n+2) .bm .mt::after,
.lower .rcol:nth-last-of-type(n+2) .bm .mt::after {
    content:'';
    position:absolute;
    bottom: -16px;
    width: 1rem;
    border-bottom: var(--connect-line);
}

.upper .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(1)::before,
.lower .rcol:nth-last-of-type(n+2) .bm .tb:nth-of-type(1)::before {
    content:'';
    position:absolute;
    bottom:56px;
    top:0px;  
    width:0.5rem;
    border:var(--connect-line);
    border-top:none;
}

.upper .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(2)::before,
.lower .rcol:nth-last-of-type(n+2) .bm .tb:nth-of-type(2)::before {
    content:'';
    position:absolute;
    bottom:-16px;
    top:78px;
    width:0.5rem;
    border:var(--connect-line);
    border-bottom:none;
}

.upper .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(1)::before,
.upper .rcol:nth-of-type(n+2) .bm .tb:nth-of-type(2)::before {     
    left:-0.5rem;
    border-right:none;
}
.lower .rcol:nth-last-of-type(n+2) .bm .tb:nth-of-type(1)::before,
.lower .rcol:nth-last-of-type(n+2) .bm .tb:nth-of-type(2)::before {
    right:-0.5rem;
    border-left:none;
}

/* 8强连接线 */
.upper .rcol:nth-of-type(3) .bm .mt::before,
.upper .rcol:nth-of-type(3) .bm .tb:nth-of-type(1)::before,
.lower .rcol:nth-last-of-type(3) .bm .mt::before,
.lower .rcol:nth-last-of-type(3) .bm .tb:nth-of-type(1)::before {
    top: -54px;
}
.upper .rcol:nth-of-type(3) .bm .mt::after,
.upper .rcol:nth-of-type(3) .bm .tb:nth-of-type(2)::before,
.lower .rcol:nth-last-of-type(3) .bm .mt::after,
.lower .rcol:nth-last-of-type(3) .bm .tb:nth-of-type(2)::before {
    bottom: -73px;
}

/* 4强连接线 */
.upper .rcol:nth-of-type(4) .bm .mt::before,
.upper .rcol:nth-of-type(4) .bm .tb:nth-of-type(1)::before,
.lower .rcol:nth-last-of-type(4) .bm .mt::before,
.lower .rcol:nth-last-of-type(4) .bm .tb:nth-of-type(1)::before {
    top: -162px;
}
.upper .rcol:nth-of-type(4) .bm .mt::after,
.upper .rcol:nth-of-type(4) .bm .tb:nth-of-type(2)::before,
.lower .rcol:nth-last-of-type(4) .bm .mt::after,
.lower .rcol:nth-last-of-type(4) .bm .tb:nth-of-type(2)::before {
    bottom: -181px;
}

/* 决赛连接线 */
.desk-cen .fm .tb:nth-of-type(1)::before {
    content:'';
    position:absolute;
    bottom:16px;
    width:1.5rem;
    left:-1.4rem;
    border-bottom:var(--connect-line);
}

.desk-cen .fm .tb:nth-of-type(2)::after {
    content:'';
    position:absolute;
    bottom:16px;
    width:1.5rem;
    right:-1.4rem;
    border-bottom:var(--connect-line);
}

.desk-cen .fm::before {
    content:'';
    position:absolute;
    bottom:-1rem;
    right:70px;
    left:70px;    
    height:1rem;
    border:var(--connect-line);
    border-top:none;
}
.desk-cen .fm::after {
    content:'';
    position:absolute;
    bottom:-3rem;
    right:50%;
    height:2rem;
    border-left:var(--connect-line);
}


/* 队伍按钮 */
.tb{display:flex;align-items:center;gap:6px;width:140px;padding:5px 8px;border-radius:0;background:var(--card);border:1px solid rgba(255,255,255,.3);font-size:1rem;color:var(--text);user-select:none}
.tb+.tb{margin-top:.5rem}
.desk-cen .tb{margin: 0}
.tb.sel{background:rgba(0,184,148,.15);border-color:var(--sel);border-left:3px solid var(--sel);font-weight:600}
.tb.autopick{background:rgba(255,215,0,.08)!important;border-color:rgba(255,215,0,.4)!important;border-left:3px solid var(--gold)!important;opacity:1!important}
.tb.autopick .nm{color:var(--gold)!important}
.tb.autopick::after{content:'';margin-left:auto;font-size:.65rem;color:var(--gold)}
.tb.lk{opacity:.6;cursor:not-allowed;border-color:rgba(255,255,255,.05)}
.tb.em{opacity:.8;cursor:default;justify-content:center;color:#555;}
.tb .fl{font-size:1rem;line-height:1} img.emoji{width:1.1em;height:1.1em;vertical-align:bottom;} .cbox img.emoji{width:1.2em;height:1.2em;}
.tb .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt{font-size:.8rem;color:var(--text2);margin-bottom:2px;margin-left:2px}
.live-tag{animation:pulse 1s infinite}
.elapsed{font-size:.65rem;color:#ff6b35;margin-left:4px;background:rgba(255,107,53,.15);padding:0 4px;border-radius:3px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* 状态点 */
.sd{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px}
.sd.up{background:var(--accent)}
.sd.lv{background:#ff6b6b;animation:pulse 1s infinite}
.sd.fn{background:#555}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 冠军框 */
.cbox{width:150px;background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,165,0,.08));border:2px solid rgba(255,215,0,.3);border-radius:8px;padding:12px 8px;text-align:center;margin-top:2rem}
.cbox .ti{font-size:2rem}
.cbox .cn{font-size:1.2rem;font-weight:700;color:var(--gold);margin-top:4px}
.cbox .ce{color:#555;font-size:.76rem;margin-top:4px}

/* 比分/正确/错误 */
.scr{color:var(--gold);font-weight:700;font-size:.9rem;margin-left:auto}
.tb.correct{background:rgba(0,230,118,.3)!important;border-color:#00e676!important;border-left:3px solid #00e676!important;opacity:1!important}
.tb.correct .nm{color:#00e676!important;font-weight:700}
.tb.wrong{background:rgba(255,23,68,.3)!important;border-color:#ff1744!important;border-left:3px solid #ff1744!important;opacity:1!important}
.tb.wrong .nm{color:#ff1744!important;text-decoration:line-through}

/* 统计栏 */
.stats-row{display:flex;justify-content:center;gap:20px;padding:.6rem 0;font-size:.85rem;flex-wrap:wrap}
.stats-row .stat-item{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:6px 16px;display:flex;align-items:center;gap:8px}
.stats-row .stat-item .label{color:var(--text2)}
.stats-row .stat-item .value{color:var(--accent);font-weight:600}
.stats-row .stat-item .value.correct{color:#00e676}
.stats-row .stat-item .value.wrong{color:#ff1744}
.stats-row .stat-item .value.rate{color:var(--gold)}

/* 被淘汰球队标记 */
.tb.eliminated{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.12)!important;border-left:3px solid #ff9800!important;opacity:.7!important}
.tb.eliminated .nm{color:#aaa!important}
.tb.sel-elim{background:rgba(255,152,0,.2)!important;border-color:#ff9800!important;border-left:3px solid #ff9800!important;opacity:1!important}
.tb.sel-elim .nm{color:#ff9800!important}
.elim-tag{font-size:.7rem;margin-left:2px}
.bm-elim-row{display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 8px;margin-top:3px;background:rgba(255,152,0,.08);border-radius:6px;font-size:.78rem;color:var(--text2)}
.bm-elim-row .elim-team{color:#ff9800;text-decoration:line-through}
.bm-elim-row .elim-label{color:#888;font-size:.7rem}

/* 淘汰替换：划掉旧队+显示正确晋级队 */
.tb .strikethrough{display:none;align-items:center;gap:4px;opacity:.5;text-decoration:line-through}
.tb:hover .strikethrough{display:inline-flex}
.tb:hover .actual-replace{display:none}
.tb .strikethrough .nm{color:#aaa!important}
.tb .actual-replace{display:inline-flex;align-items:center;gap:4px;font-weight:600;opacity:1!important}
.tb .actual-replace .nm{color:var(--accent)!important}
/* actualTm 在当前比赛也被淘汰 */
.tb .strike-actual{opacity:.6}
.tb .strike-actual .nm{color:#aaa!important;}

/* 响应式 */
@media(min-width:1025px) {
    .bracket-mob { display:none }
    .bracket-desk { display:block; justify-items:center; }
}

@media(max-width:1024px) {
    .bracket-desk { display:none }
    .match-link{text-decoration:none;cursor:pointer}.match-link:hover{text-decoration:underline;color:#64b5f6}
.bracket-mob { display:flex;flex-direction:column; }
    .tb { width:130px; font-size:.76rem }
    .cbox,.rl { width:130px }
    .tb-xs { width:120px; padding:4px 6px; font-size:.72rem
}

@media(max-width:768px){.bc-half{gap:1rem}}

@media(max-width:600px) {
    .tb { padding:4px 6px; font-size:.72rem }
}
@media(max-width:480px){
    .tb{
        width:130px;
        padding:4px 7px;
        font-size:.76rem}
    .mt{font-size:.7rem}
    .cbox{width:130px;padding:8px}
    .cbox .cn{font-size:1rem}
}