/* 世界盃晉級預測頁 */
.cup-hero { padding-bottom: clamp(20px, 4vw, 36px); }

.groups {
  display: grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px) 20px;
}

.group-card {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  padding: 18px clamp(16px, 2vw, 22px);
}
.group-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}

.adv-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
}
.adv-row:last-child { margin-bottom: 0; }
.adv-team {
  width: 116px; flex-shrink: 0; font-family: var(--display); font-weight: 600;
  font-size: 14px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-in .adv-team { color: var(--text); }              /* 前 2 名(穩出線)較亮 */
.adv-track {
  flex: 1; height: 9px; background: #161c14; border-radius: 6px; overflow: hidden;
}
.adv-track i {
  display: block; height: 100%; border-radius: 6px;
  background: #2f3a30;                                  /* 預設灰 */
}
.adv-in .adv-track i {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(94, 243, 140, 0.35);
}
.adv-pct { width: 40px; text-align: right; flex-shrink: 0; font-size: 12.5px; color: var(--accent); }
.adv-in .adv-pct { font-weight: 700; }
.adv-sub { width: 74px; text-align: right; flex-shrink: 0; font-size: 10.5px; color: var(--dim); }

@media (max-width: 460px) {
  .adv-sub { display: none; }
  .adv-team { width: 92px; }
}

/* 頁籤:晉級預測 / 奪冠機率 */
.cup-tabs {
  display: flex; width: fit-content; gap: 2px; margin: 0 auto clamp(22px, 3vw, 32px);
  padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0, 0, 0, 0.22);
}
.cup-tab {
  appearance: none; border: none; background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  padding: 8px 22px; border-radius: 8px; cursor: pointer; transition: color 0.2s, background 0.2s;
}
.cup-tab:hover { color: var(--text); }
.cup-tab.on { background: var(--accent); color: #06210f; font-weight: 700; }
.tab-panel[hidden] { display: none; } /* 蓋過 .groups 的 display:grid,確保切換真的隱藏 */

/* 奪冠機率區 */
.champ-section { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px) 40px; }
.champ-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; text-align: center; }

.champ-pending {
  border: 1px dashed var(--line); border-radius: 14px; padding: 28px;
  text-align: center; color: var(--dim); font-size: 14px;
  background: rgba(255, 255, 255, 0.012);
}

.champ-list {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  padding: 8px clamp(14px, 2vw, 22px);
}
.champ-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.champ-row:last-child { border-bottom: none; }
.champ-team { width: 140px; flex-shrink: 0; font-family: var(--display); font-weight: 600; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-track { flex: 1; height: 10px; background: #161c14; border-radius: 6px; overflow: hidden; }
.champ-track i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 12px rgba(94, 243, 140, 0.35); }
.champ-pct { width: 52px; text-align: right; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--accent); }
.champ-rsub { width: 150px; text-align: right; flex-shrink: 0; font-size: 11px; color: var(--dim); }

@media (max-width: 520px) {
  .champ-rsub { display: none; }
  .champ-team { width: 100px; }
}

/* ── 對戰樹(bracket)── */
.bk-title { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin: 4px 0 14px; text-align: center; }
.bk-scroll { overflow-x: auto; padding-bottom: 10px; }
.bk-tree { display: flex; gap: 14px; min-width: max-content; align-items: stretch; }
.bk-col { display: flex; flex-direction: column; min-width: 118px; }
.bk-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-align: center; padding: 2px 0 8px; }
.bk-cells { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.bk-tie { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.bk-team, .bk-slot { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; font-size: 12px; }
.bk-team + .bk-team { border-top: 1px solid var(--line-soft); }
.bk-slot { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.bk-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-p { color: var(--accent); flex-shrink: 0; font-size: 11px; }
.bk-team.win .bk-name { color: var(--accent); font-weight: 700; }
.bk-team.lose { opacity: 0.4; }
.bk-champion .bk-slot { border-color: var(--gold); box-shadow: 0 0 14px rgba(232, 196, 95, 0.25); }
.bk-champion .bk-name, .bk-champion .bk-p { color: var(--gold); font-weight: 700; }