/**
 * pages.css — 页面专用样式补充
 * (League/Team/Player/H2H/Transfers/Odds/Venues/Schedule 等)
 */

/* ── 通用页面元素 ── */
.ag-page-title {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
  padding: var(--ag-space-6) 0 var(--ag-space-4);
  color: var(--ag-text-primary);
}
.ag-page-subtitle {
  font-size: var(--ag-font-md);
  color: var(--ag-text-secondary);
  margin-top: calc(-1 * var(--ag-space-2));
  margin-bottom: var(--ag-space-6);
}
.ag-section-heading {
  font-size: var(--ag-font-lg);
  font-weight: var(--ag-weight-semibold);
  color: var(--ag-text-primary);
  padding: var(--ag-space-3) 0;
  display: flex; align-items: center; gap: var(--ag-space-2);
}
.ag-section-heading-row {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-4) 0;
}
.ag-text-muted { color: var(--ag-text-tertiary); }
.ag-text-xs    { font-size: var(--ag-font-xs); }
.ag-hidden     { display: none !important; }

.ag-fixture-stack {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  overflow: hidden;
}

/* ── League Detail Hero ── */
.ag-league-detail-hero {
  padding: var(--ag-space-6) 0;
}
.ag-league-detail-hero__info {
  display: flex; align-items: center; gap: var(--ag-space-4);
}
.ag-league-detail-hero__logo { object-fit: contain; }
.ag-league-detail-hero__name {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
}
.ag-league-detail-hero__meta {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  margin-top: var(--ag-space-1);
}
.ag-league-detail-hero__divider { color: var(--ag-text-tertiary); }

/* ── Team Hero ── */
.ag-team-hero {
  display: flex; align-items: center; gap: var(--ag-space-6);
  padding: var(--ag-space-6) 0;
}
.ag-team-hero__logo { object-fit: contain; }
.ag-team-hero__name {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
}
.ag-team-hero__meta {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  margin-top: var(--ag-space-1);
}
.ag-team-hero__divider { color: var(--ag-text-tertiary); }

/* ── Squad Grid ── */
.ag-squad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ag-space-3);
  margin-bottom: var(--ag-space-6);
}
.ag-squad-card {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-3) var(--ag-space-4);
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-md);
  transition: all var(--ag-transition-fast);
}
.ag-squad-card:hover {
  border-color: var(--ag-accent);
  background: var(--ag-bg-hover);
}
.ag-squad-card__photo img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.ag-squad-card__placeholder {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ag-bg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--ag-weight-bold);
  color: var(--ag-text-secondary);
}
.ag-squad-card__name {
  font-weight: var(--ag-weight-medium);
  color: var(--ag-text-primary);
  display: block;
}
.ag-squad-card__detail {
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
}
.ag-squad-card__info { flex: 1; min-width: 0; }
.ag-squad-card__stats {
  display: flex; gap: var(--ag-space-2);
  flex-shrink: 0;
}
.ag-squad-card__stat {
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
}
.ag-squad-card__stat--rating {
  padding: 2px 6px;
  background: var(--ag-accent);
  color: #fff;
  border-radius: var(--ag-radius-sm);
  font-weight: var(--ag-weight-bold);
}

/* ── Player Hero ── */
.ag-player-hero {
  display: flex; align-items: center; gap: var(--ag-space-6);
  padding: var(--ag-space-6) 0;
}
.ag-player-hero__photo {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--ag-border);
}
.ag-player-hero__placeholder {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--ag-bg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ag-font-xl);
  font-weight: var(--ag-weight-bold);
  color: var(--ag-text-secondary);
}
.ag-player-hero__name {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
}
.ag-player-hero__team {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-primary);
  margin-top: var(--ag-space-1);
}
.ag-player-hero__details {
  display: flex; gap: var(--ag-space-2);
  margin-top: var(--ag-space-2);
  flex-wrap: wrap;
}
.ag-player-hero__tag {
  padding: 2px 10px;
  background: var(--ag-bg-tertiary);
  border-radius: var(--ag-radius-full);
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
}
.ag-player-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ag-space-3);
  margin-bottom: var(--ag-space-6);
}

/* ── Stat Tiles ── */
.ag-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ag-space-3);
}
.ag-stat-tile {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-md);
  padding: var(--ag-space-4);
  text-align: center;
}
.ag-stat-tile--accent { border-color: var(--ag-accent); }
.ag-stat-tile__value {
  display: block;
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
  font-family: var(--ag-font-mono);
  color: var(--ag-text-primary);
}
.ag-stat-tile__label {
  display: block;
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
  margin-top: var(--ag-space-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ag-stat-tile__sub {
  display: block;
  font-size: var(--ag-font-xs);
  color: var(--ag-text-tertiary);
  margin-top: var(--ag-space-1);
}

/* ── Transfer Row / Card ── */
.ag-transfer-list, .ag-transfer-feed {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  overflow: hidden;
}
.ag-transfer-row {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-3) var(--ag-space-4);
  border-bottom: 1px solid var(--ag-border-light);
  font-size: var(--ag-font-sm);
}
.ag-transfer-row:last-child { border-bottom: none; }
.ag-transfer-row__direction {
  font-size: var(--ag-font-xs);
  font-weight: var(--ag-weight-bold);
  padding: 2px 6px;
  border-radius: var(--ag-radius-sm);
}
.ag-transfer-row__direction--in  { background: rgba(34,197,94,0.15); color: var(--ag-win); }
.ag-transfer-row__direction--out { background: rgba(239,68,68,0.15); color: var(--ag-loss); }
.ag-transfer-row__player { font-weight: var(--ag-weight-medium); flex: 1; }
.ag-transfer-row__club {
  display: flex; align-items: center; gap: var(--ag-space-1);
  color: var(--ag-text-secondary);
}
.ag-transfer-row__type {
  font-size: var(--ag-font-xs); color: var(--ag-text-tertiary);
  padding: 2px 6px; background: var(--ag-bg-tertiary); border-radius: var(--ag-radius-sm);
}
.ag-transfer-row__fee { font-weight: var(--ag-weight-semibold); color: var(--ag-accent); min-width: 80px; text-align: right; }
.ag-transfer-row__date { font-size: var(--ag-font-xs); color: var(--ag-text-tertiary); }

.ag-transfer-card {
  display: flex; align-items: center; gap: var(--ag-space-4);
  padding: var(--ag-space-4);
  border-bottom: 1px solid var(--ag-border-light);
}
.ag-transfer-card:last-child { border-bottom: none; }
.ag-transfer-card__player {
  display: flex; align-items: center; gap: var(--ag-space-3); flex: 1;
}
.ag-transfer-card__avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.ag-transfer-card__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--ag-bg-tertiary);
  font-weight: var(--ag-weight-bold);
  color: var(--ag-text-secondary);
}
.ag-transfer-card__name {
  font-weight: var(--ag-weight-medium);
  color: var(--ag-text-primary);
  display: block;
}
.ag-transfer-card__type {
  font-size: var(--ag-font-xs);
  color: var(--ag-text-tertiary);
  display: block;
}
.ag-transfer-card__flow {
  display: flex; align-items: center; gap: var(--ag-space-2);
  flex: 1;
}
.ag-transfer-card__club {
  display: flex; align-items: center; gap: var(--ag-space-1);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-primary);
}
.ag-transfer-card__arrow { color: var(--ag-text-tertiary); font-size: var(--ag-font-lg); }
.ag-transfer-card__fee {
  font-weight: var(--ag-weight-semibold);
  color: var(--ag-accent);
  font-size: var(--ag-font-sm);
  min-width: 80px; text-align: right;
}
.ag-transfer-card__fee--free { color: var(--ag-text-tertiary); }

/* ── H2H Hero ── */
.ag-h2h-hero {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ag-space-10);
  padding: var(--ag-space-8) 0;
}
.ag-h2h-hero__team {
  display: flex; flex-direction: column; align-items: center; gap: var(--ag-space-2);
  text-align: center;
}
.ag-h2h-hero__team a { font-weight: var(--ag-weight-semibold); color: var(--ag-text-primary); }
.ag-h2h-hero__vs { text-align: center; }
.ag-h2h-hero__record {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
  font-family: var(--ag-font-mono);
  display: block;
}
.ag-h2h-hero__label {
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
}
.ag-h2h-stats {
  max-width: 600px;
  margin: 0 auto var(--ag-space-8);
}
.ag-h2h-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ag-space-4);
}

/* ── Odds Table ── */
.ag-odds-hero {
  padding: var(--ag-space-4) 0;
}
.ag-odds-hero__back {
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  display: inline-block;
  margin-bottom: var(--ag-space-3);
}
.ag-odds-hero__match {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ag-space-3);
  font-weight: var(--ag-weight-semibold);
}
.ag-odds-hero__vs {
  font-family: var(--ag-font-mono);
  font-weight: var(--ag-weight-bold);
  font-size: var(--ag-font-xl);
}
.ag-odds-table__bookie { font-weight: var(--ag-weight-medium); }
.ag-odds-table__val {
  font-family: var(--ag-font-mono);
  text-align: center;
}
.ag-odds-trend { font-size: var(--ag-font-xs); margin-left: var(--ag-space-1); }
.ag-odds-trend--up   { color: var(--ag-win); }
.ag-odds-trend--down { color: var(--ag-loss); }

/* ── League Picker ── */
.ag-league-picker {
  display: flex; flex-wrap: wrap; gap: var(--ag-space-2);
  padding: var(--ag-space-3) 0;
  border-bottom: 1px solid var(--ag-border);
  margin-bottom: var(--ag-space-4);
}
.ag-league-picker__item {
  display: flex; align-items: center; gap: var(--ag-space-2);
  padding: var(--ag-space-2) var(--ag-space-3);
  border-radius: var(--ag-radius-md);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  transition: all var(--ag-transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
}
.ag-league-picker__item:hover { background: var(--ag-bg-hover); color: var(--ag-text-primary); }
.ag-league-picker__item.active {
  background: var(--ag-accent);
  color: #fff;
  border-color: var(--ag-accent);
}

/* ── Leagues Grid ── */
.ag-leagues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ag-space-4);
}
.ag-leagues-country__list {
  padding: var(--ag-space-2);
}

/* ── Schedule ── */
.ag-schedule-day-header {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-3) 0;
}
.ag-schedule-day-header__title {
  font-size: var(--ag-font-lg);
  font-weight: var(--ag-weight-bold);
}
.ag-schedule-day-header__date {
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
}
.ag-schedule-filters {
  display: flex; flex-wrap: wrap; gap: var(--ag-space-2);
  padding: var(--ag-space-3) 0;
  margin-bottom: var(--ag-space-4);
}
.ag-wc-schedule-match__stage {
  display: block;
  padding: var(--ag-space-1) var(--ag-space-4);
  font-size: var(--ag-font-xs);
  color: var(--ag-text-secondary);
  background: var(--ag-bg-tertiary);
}

/* ── Venues Grid ── */
.ag-venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ag-space-4);
}
.ag-venue-card {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  padding: var(--ag-space-4);
  transition: border-color var(--ag-transition-fast);
}
.ag-venue-card:hover { border-color: var(--ag-accent); }
.ag-venue-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ag-space-2);
}
.ag-venue-card__name {
  font-weight: var(--ag-weight-semibold);
  font-size: var(--ag-font-md);
}
.ag-venue-card__detail {
  display: flex; justify-content: space-between;
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
}

/* ── WC Group Nav ── */
.ag-wc-group-nav {
  display: flex; gap: var(--ag-space-2);
  padding: var(--ag-space-3) 0;
  flex-wrap: wrap;
}
.ag-wc-group-nav__item {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ag-radius-md);
  font-weight: var(--ag-weight-bold);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  transition: all var(--ag-transition-fast);
}
.ag-wc-group-nav__item:hover { border-color: var(--ag-worldcup); color: var(--ag-worldcup); }
.ag-wc-group-nav__item.active { background: var(--ag-worldcup); color: #fff; border-color: var(--ag-worldcup); }

/* ── WC Titles ── */
.ag-wc-titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ag-space-3);
}
.ag-wc-title-card {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-md);
  padding: var(--ag-space-4);
  text-align: center;
}
.ag-wc-title-card__count {
  display: block;
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
  color: var(--ag-worldcup);
  font-family: var(--ag-font-mono);
}
.ag-wc-title-card__name {
  display: block;
  font-size: var(--ag-font-sm);
  color: var(--ag-text-primary);
  margin-top: var(--ag-space-1);
}

/* ── Favorites ── */
.ag-favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ag-space-3);
}
.ag-fav-card {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-3) var(--ag-space-4);
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-md);
  transition: border-color var(--ag-transition-fast);
  position: relative;
}
.ag-fav-card:hover { border-color: var(--ag-accent); }
.ag-fav-card__remove {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ag-text-tertiary);
  transition: all var(--ag-transition-fast);
  opacity: 0;
}
.ag-fav-card:hover .ag-fav-card__remove { opacity: 1; }
.ag-fav-card__remove:hover { background: rgba(239,68,68,0.15); color: var(--ag-loss); }

/* ── Commentary ── */
.ag-commentary {
  padding: var(--ag-space-4);
}
.ag-commentary__body {
  font-size: var(--ag-font-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-text-primary);
}
.ag-commentary__body p { margin-bottom: var(--ag-space-3); }
.ag-commentary__footer {
  margin-top: var(--ag-space-3);
  padding-top: var(--ag-space-2);
  border-top: 1px solid var(--ag-border-light);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ag-player-highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .ag-h2h-hero { gap: var(--ag-space-4); flex-wrap: wrap; }
  .ag-h2h-form-grid { grid-template-columns: 1fr; }
  .ag-transfer-card { flex-wrap: wrap; }
  .ag-transfer-card__flow { order: 3; width: 100%; }
  .ag-venues-grid { grid-template-columns: 1fr; }
  .ag-schedule-filters { overflow-x: auto; flex-wrap: nowrap; }
}

@media (max-width: 480px) {
  .ag-squad-grid { grid-template-columns: 1fr; }
  .ag-player-hero { flex-direction: column; text-align: center; }
  .ag-player-hero__details { justify-content: center; }
  .ag-transfer-row { flex-wrap: wrap; }
}

/* ── 404 Page ── */
.ag-404 {
  text-align: center;
  padding: var(--ag-space-16) var(--ag-space-4);
}
.ag-404__icon { margin-bottom: var(--ag-space-6); opacity: 0.6; }
.ag-404__title {
  font-size: var(--ag-font-2xl);
  font-weight: var(--ag-weight-bold);
  margin-bottom: var(--ag-space-2);
}
.ag-404__text {
  font-size: var(--ag-font-md);
  color: var(--ag-text-secondary);
  margin-bottom: var(--ag-space-6);
}
.ag-404__actions {
  display: flex; gap: var(--ag-space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Card & League Link ── */
.ag-card {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  overflow: hidden;
}
.ag-card__header {
  display: flex; align-items: center;
  padding: var(--ag-space-3) var(--ag-space-4);
  font-weight: var(--ag-weight-semibold);
  border-bottom: 1px solid var(--ag-border-light);
  background: var(--ag-bg-tertiary);
  font-size: var(--ag-font-sm);
}
.ag-league-link {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-2) var(--ag-space-3);
  border-radius: var(--ag-radius-sm);
  transition: background var(--ag-transition-fast);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-primary);
}
.ag-league-link:hover { background: var(--ag-bg-hover); }