/* Competition Hub Page — Data-rich version */
.competition-hub-page{
  min-height:100vh;
  padding:0 0 64px;
}
.chub-root{
  max-width:1000px;
  margin:0 auto;
  padding:24px 16px;
}
@media(min-width:768px){.chub-root{padding:32px 24px}}

/* Loading */
.chub-loading{
  text-align:center;
  padding:80px 0;
  color:rgba(255,255,255,0.5);
}

/* Not Found */
.chub-not-found{
  text-align:center;
  padding:80px 0;
}
.chub-not-found h1{font-size:22px;color:var(--white);margin:0 0 12px}
.chub-not-found p{color:rgba(255,255,255,0.5);margin:0 0 20px}
.chub-back{
  font-size:14px;
  font-weight:700;
  color:var(--teal);
  text-decoration:none;
}

/* Header */
.chub-header{
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.chub-header-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.chub-header-text{
  flex:1;
  min-width:0;
}
.chub-logo{
  width:56px;
  height:56px;
  border-radius:10px;
  flex-shrink:0;
}
img.chub-logo{
  object-fit:contain;
  background:#fff;
  padding:7px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.chub-logo--ph{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,194,203,0.12);
  color:var(--teal);
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;
  font-weight:800;
}
.chub-header-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.chub-badge{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:4px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.5);
}
.chub-badge--active{background:rgba(0,194,203,0.12);color:var(--teal)}
.chub-badge--tracking{background:rgba(34,197,94,0.12);color:#22c55e}
.chub-badge--limited_tracking{background:rgba(139,92,246,0.10);color:#8b5cf6}
.chub-badge--sync_pending{background:rgba(251,146,60,0.10);color:#fb923c}
.chub-badge--tracking_soon{background:rgba(255,193,7,0.10);color:#ffc107}
.chub-type{
  font-size:11px;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.chub-season{
  font-size:11px;
  color:rgba(255,255,255,0.35);
}
.chub-title{
  font-size:28px;
  font-weight:800;
  color:var(--white);
  margin:0 0 6px;
}
@media(min-width:768px){.chub-title{font-size:34px}}
.chub-region{
  font-size:14px;
  color:rgba(255,255,255,0.5);
  margin:0;
}

/* Tabs */
.chub-tabs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0 0 12px;
  margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.chub-tabs::-webkit-scrollbar{display:none}
.chub-tab{
  flex-shrink:0;
  font-family:Inter,system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.chub-tab:hover{color:var(--white);background:rgba(255,255,255,0.04)}
.chub-tab.is-active{
  color:var(--white);
  background:rgba(0,194,203,0.10);
}

/* Section */
.chub-section{margin-bottom:32px}
.chub-section[hidden]{display:none}
.chub-sec-title{
  font-size:18px;
  font-weight:700;
  color:var(--white);
  margin:0 0 12px;
}

/* Empty state */
.chub-empty-state{
  padding:32px 20px;
  text-align:center;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
}
.chub-empty{
  font-size:14px;
  color:rgba(255,255,255,0.45);
  margin:0;
}
.chub-empty code{
  font-size:12px;
  color:var(--teal);
}

/* ========== Overview Grid ========== */
.chub-overview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.chub-ov-card{
  padding:16px;
  border-radius:8px;
  background:var(--fa-card, rgba(255,255,255,0.025));
  border:1px solid var(--fa-card-border, rgba(255,255,255,0.07));
}
.chub-ov-card--wide{grid-column:1/-1}
.chub-ov-card-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:rgba(255,255,255,0.45);
  margin:0 0 8px;
}
.chub-ov-value{
  font-size:16px;
  font-weight:700;
  color:var(--white);
  margin:0 0 4px;
}
.chub-ov-sub{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin:0 0 2px;
}

/* ========== Standings Table ========== */
.chub-table-wrap{
  overflow-x:auto;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.07);
}
.chub-standings-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  white-space:nowrap;
}
.chub-standings-table thead{
  position:sticky;
  top:0;
  z-index:2;
}
.chub-standings-table th{
  text-align:left;
  padding:10px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fa-muted, rgba(255,255,255,0.5));
  background:var(--fa-table-header, rgba(10,22,40,0.95));
  border-bottom:1px solid var(--fa-border, rgba(255,255,255,0.08));
}
.chub-standings-table td{
  padding:9px 8px;
  border-bottom:1px solid var(--fa-table-border, rgba(255,255,255,0.04));
  color:var(--fa-text-secondary, rgba(255,255,255,0.85));
}
.chub-standings-table tr:hover td{
  background:var(--fa-table-row-hover, rgba(0,194,203,0.03));
}
.chub-standings-table td strong{
  color:var(--fa-text, var(--white));
}
.chub-col-rank{
  width:32px;
  text-align:center;
  color:rgba(255,255,255,0.5);
  font-weight:600;
}
.chub-col-team{
  min-width:120px;
  font-weight:600;
  color:var(--white);
}
.chub-col-form{
  min-width:90px;
}
@media(max-width:600px){
  .chub-standings-table th:nth-child(n+7),
  .chub-standings-table td:nth-child(n+7){display:none}
  .chub-col-form{display:none}
}

/* ========== Form Pills ========== */
.chub-form-pills{
  display:flex;
  gap:3px;
}
.chub-form-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:3px;
  font-size:9px;
  font-weight:700;
  color:#fff;
}
.chub-form-pill--w{background:#22c55e}
.chub-form-pill--d{background:#6b7280}
.chub-form-pill--l{background:#ef4444}

/* ========== Classification Legend ========== */
.chub-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  padding:10px 0;
}
.chub-legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:rgba(255,255,255,0.6);
}
.chub-legend-dot{
  width:8px;
  height:8px;
  border-radius:2px;
  flex-shrink:0;
}

/* ========== Teams Grid (Rich) ========== */
.chub-team-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media(min-width:580px){.chub-team-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.chub-team-grid{grid-template-columns:repeat(4,1fr)}}

.chub-team-grid--rich{
  grid-template-columns:1fr;
  gap:6px;
}
@media(min-width:580px){.chub-team-grid--rich{grid-template-columns:repeat(2,1fr)}}

.chub-team-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px;
  border-radius:8px;
  background:var(--fa-card, rgba(255,255,255,0.03));
  border:1px solid var(--fa-card-border, rgba(255,255,255,0.07));
  text-decoration:none;
  color:inherit;
  transition:border-color .15s,background .15s;
}
a.chub-team-card:hover,a.chub-team-card:focus-visible{
  border-color:rgba(0,194,203,0.3);
  background:rgba(0,194,203,0.04);
}
.chub-team-card--rich{
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:10px 14px;
}
.chub-tc-rank{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  flex-shrink:0;
}
.chub-tc-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.chub-tc-stats{
  font-size:11px;
  color:rgba(255,255,255,0.45);
}
.chub-tc-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.chub-tc-flag{
  width:24px;
  height:17px;
  border-radius:2px;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.chub-tc-form{
  flex-shrink:0;
}
.chub-team-name{font-size:14px;font-weight:700;color:var(--white)}
.chub-team-city{font-size:11px;color:rgba(255,255,255,0.45)}

/* ========== Stats Grid ========== */
.chub-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;
}
.chub-stat-card{
  padding:14px 16px;
  border-radius:8px;
  background:var(--fa-card, rgba(255,255,255,0.025));
  border:1px solid var(--fa-card-border, rgba(255,255,255,0.07));
}
.chub-stat-title{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:rgba(255,255,255,0.4);
  margin:0 0 6px;
}
.chub-stat-value{
  font-size:15px;
  font-weight:700;
  color:var(--white);
  margin:0 0 3px;
}
.chub-stat-sub{
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin:0;
}

/* ========== Matches List ========== */
.chub-match-group-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:rgba(255,255,255,0.5);
  margin:16px 0 8px;
}
.chub-match-group-title:first-child{margin-top:0}
.chub-match-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chub-match-item{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:8px;
  background:var(--fa-card, rgba(255,255,255,0.03));
  border:1px solid var(--fa-border-subtle, rgba(255,255,255,0.06));
  text-decoration:none;
  color:inherit;
  transition:border-color .15s;
}
.chub-match-item:hover{border-color:rgba(0,194,203,0.25)}
.chub-match-item--live{
  border-color:rgba(239,68,68,0.3);
  background:rgba(239,68,68,0.03);
}
.chub-match-team{
  font-size:13px;
  font-weight:600;
  color:var(--white);
}
.chub-match-team--away{text-align:right}
.chub-match-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.chub-match-score{
  font-size:14px;
  font-weight:700;
  color:var(--teal);
  text-align:center;
  min-width:40px;
}
.chub-match-live{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  color:#ef4444;
  letter-spacing:.04em;
}
.chub-match-ft{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
.chub-match-time{
  font-size:10px;
  color:rgba(255,255,255,0.4);
}

/* Overview description */
.chub-ov-about{
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.chub-ov-desc{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,0.65);
  margin:0;
}

/* Overview featured teams */
.chub-ov-teams-section{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.chub-ov-teams-title{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* Fan Takes CTA */
.chub-fan-takes-cta{
  text-align:center;
  padding:32px 20px;
  background:rgba(0,194,203,0.03);
  border:1px solid rgba(0,194,203,0.1);
  border-radius:10px;
}
.chub-fan-cta-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
}
.chub-fan-cta-text{
  font-size:13px;
  color:rgba(255,255,255,0.5);
  margin:0 0 16px;
  line-height:1.5;
}
.chub-fan-cta-btn{
  display:inline-block;
  padding:8px 20px;
  font-size:13px;
  font-weight:700;
  color:#0A1628;
  background:var(--teal, #00C2CB);
  border-radius:6px;
  text-decoration:none;
  transition:opacity .15s;
}
.chub-fan-cta-btn:hover{ opacity:0.85; }