/* ====================================================== WC 2026 Hub v2.0 */

:root {
    --wc-fg:        #111111;
    --wc-fg-soft:   #444444;
    --wc-muted:     #777777;
    --wc-border:    #e3e3e3;
    --wc-bg:        #ffffff;
    --wc-bg-soft:   #f5f5f5;
    --wc-bg-soft2:  #fafafa;
    --wc-accent:    #cc0000;
    --wc-accent2:   #990000;
    --wc-live:      #cc0000;
    --wc-pos:       #137333;
    --wc-neg:       #c5221f;
    --wc-gold:      #e8a000;
    --wc-shadow:    0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);
    --wc-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05);
    --wc-radius:    10px;
    /* Font stack — Barlow loads via Google Fonts if available, else clean system stack */
    --wc-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --wc-font-cond: 'Arial Narrow', 'Arial Narrow Bold', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

.wc-hub {
    font-family: var(--wc-font);
    color: var(--wc-fg);
    max-width: 1120px;
    margin: 24px auto;
    background: var(--wc-bg);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
    box-shadow: var(--wc-shadow);
}

/* ======================================================== NAV TABS */
.wc-nav {
    display: flex;
    background: #0d0d0d;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wc-nav::-webkit-scrollbar { display: none; }

.wc-nav-link {
    flex: 1 0 auto;
    text-align: center;
    padding: 15px 22px;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-family: var(--wc-font-cond);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.wc-nav-link:hover  { color: #fff; background: rgba(255,255,255,.06); }
.wc-nav-link.is-active {
    color: #fff;
    border-bottom-color: var(--wc-accent);
    background: rgba(204,0,0,.12);
}

/* ======================================================== SECTION HEAD */
.wc-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 2px solid var(--wc-border);
}
.wc-section-head h2 {
    margin: 0;
    font-family: var(--wc-font-cond);
    font-size: 22px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
}
.wc-count {
    font-size: 11px; color: var(--wc-muted);
    text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
    background: var(--wc-bg-soft);
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--wc-border);
}

/* ======================================================== FLAGS */
.wc-flag {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; flex: 0 0 26px;
    border: 1px solid rgba(0,0,0,.08);
    background: #eee; vertical-align: middle;
}
.wc-flag-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 800; color: #fff;
    background: var(--wc-accent); border-radius: 50%;
}

/* ======================================================== BADGES */
.wc-badge {
    display: inline-flex; align-items: center;
    font-family: var(--wc-font-cond);
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
    color: #fff; letter-spacing: .5px; text-transform: uppercase;
}
.wc-badge-live { background: var(--wc-live); gap: 5px; }
.wc-badge-ft   { background: #555; }
.wc-badge-post { background: #b08a00; }
.wc-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    animation: wc-blink 1.2s ease-in-out infinite;
}
@keyframes wc-blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ======================================================== DATE STRIP */
.wc-date-strip {
    display: flex; gap: 8px;
    padding: 14px 20px;
    overflow-x: auto; scrollbar-width: none;
    background: var(--wc-bg-soft2);
    border-bottom: 1px solid var(--wc-border);
    -webkit-overflow-scrolling: touch;
}
.wc-date-strip::-webkit-scrollbar { display: none; }

.wc-date-pill {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 56px; padding: 8px 10px;
    background: var(--wc-bg); border: 1.5px solid var(--wc-border);
    border-radius: 8px; text-decoration: none; color: var(--wc-fg-soft);
    transition: all .15s; flex: 0 0 auto; cursor: pointer;
}
.wc-date-pill:hover { background: var(--wc-bg-soft); color: var(--wc-fg); border-color: #bbb; }
.wc-date-pill.is-current {
    background: var(--wc-accent); color: #fff;
    border-color: var(--wc-accent);
    box-shadow: 0 3px 10px rgba(204,0,0,.35);
    transform: translateY(-1px);
}
.wc-date-pill.is-today:not(.is-current) { border-color: var(--wc-gold); }
.wc-date-pill.is-today:not(.is-current) .wc-date-day { color: var(--wc-gold); }

.wc-date-dow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .75; }
.wc-date-day { font-family: var(--wc-font-cond); font-size: 21px; font-weight: 800; line-height: 1; margin: 2px 0; }
.wc-date-mon { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; opacity: .7; }

/* ======================================================== DAY SECTION */
.wc-day { border-top: 1px solid var(--wc-border); }
.wc-day-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 22px;
    background: linear-gradient(90deg, #f0f0f0, #f8f8f8);
    border-bottom: 1px solid var(--wc-border);
}
.wc-day-date {
    font-family: var(--wc-font-cond);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--wc-fg);
}
.wc-day-count {
    font-size: 11px; color: var(--wc-muted); font-weight: 600;
    background: #fff; border: 1px solid var(--wc-border);
    padding: 2px 8px; border-radius: 10px;
}

/* ======================================================== MATCH LIST */
.wc-match-list { list-style: none; margin: 0; padding: 0; }

.wc-match {
    display: grid;
    /* home | score | away | meta (time/venue/tv) */
    grid-template-columns: 1fr 90px 1fr 220px;
    align-items: center;
    gap: 0 12px;
    padding: 13px 22px;
    border-bottom: 1px solid var(--wc-border);
    transition: background .12s;
    position: relative;
}
.wc-match:last-child { border-bottom: none; }
.wc-match:hover { background: #fafafa; }
.wc-match.is-live { background: #fff8f8; }
.wc-match.is-live::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--wc-live);
}

.wc-team {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    text-decoration: none; color: var(--wc-fg);
    padding: 4px 6px; border-radius: 5px;
    transition: background .12s;
}
.wc-team:hover { background: rgba(0,0,0,.04); }
.wc-team-home { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.wc-team-away { justify-content: flex-start; }

.wc-team-name {
    font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px; transition: color .12s;
}
.wc-team:hover .wc-team-name { color: var(--wc-accent); }

/* Score / VS */
.wc-score {
    text-align: center;
    font-family: var(--wc-font-cond);
    font-size: 24px; font-weight: 800;
    color: var(--wc-fg);
    display: flex; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; padding: 6px 4px; border-radius: 6px;
    transition: background .12s; letter-spacing: -1px;
}
.wc-score:hover { background: rgba(0,0,0,.05); }
.wc-score-vs {
    font-family: var(--wc-font-cond);
    font-size: 14px; font-weight: 700; color: var(--wc-muted);
    border: 2px solid var(--wc-border);
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; letter-spacing: 0;
}
.wc-score-vs:hover { background: var(--wc-bg-soft); border-color: #aaa; }
.wc-s-sep { color: var(--wc-muted); font-weight: 400; font-size: 18px; }

/* Match meta column */
.wc-match-meta {
    display: flex; flex-direction: column; gap: 3px;
    text-align: right; font-size: 12px; color: var(--wc-muted);
    align-items: flex-end;
}
.wc-stage {
    font-family: var(--wc-font-cond);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--wc-fg-soft);
}
.wc-time {
    color: var(--wc-fg); font-weight: 700; font-size: 13px;
    font-family: var(--wc-font-cond); letter-spacing: .3px;
}
.wc-venue { font-size: 11px; color: var(--wc-muted); }
.wc-tv {
    font-size: 10px; font-weight: 700;
    color: #fff; background: #444;
    padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .3px;
}

/* ======================================================== GROUPS */
.wc-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px; padding: 20px;
}
.wc-group-card {
    border: 1px solid var(--wc-border); border-radius: var(--wc-radius);
    overflow: hidden; background: #fff;
    transition: box-shadow .15s, transform .15s;
}
.wc-group-card:hover { box-shadow: var(--wc-shadow); transform: translateY(-2px); }

.wc-group-head {
    display: flex; align-items: baseline; gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0d0d0d, #2a2a2a);
    color: #fff;
}
.wc-group-letter {
    font-family: var(--wc-font-cond);
    font-size: 28px; font-weight: 800; color: var(--wc-accent);
}
.wc-group-name { font-size: 12px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

.wc-group-teams { list-style: none; margin: 0; padding: 0; }
.wc-group-teams li a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-top: 1px solid var(--wc-border);
    color: var(--wc-fg); text-decoration: none;
    font-size: 13px; font-weight: 600;
    transition: background .12s, color .12s;
}
.wc-group-teams li:first-child a { border-top: none; }
.wc-group-teams li a:hover { background: var(--wc-bg-soft2); color: var(--wc-accent); }
.wc-gt-name { flex: 1; }
.wc-pts {
    font-family: var(--wc-font-cond); font-size: 12px; font-weight: 700;
    color: var(--wc-muted); background: var(--wc-bg-soft);
    padding: 2px 7px; border-radius: 4px; border: 1px solid var(--wc-border);
}

/* ======================================================== TEAMS */
.wc-teams-group-block { padding: 0 20px 10px; }
.wc-teams-group-label {
    font-family: var(--wc-font-cond);
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--wc-muted);
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--wc-border);
    margin-bottom: 12px;
}
.wc-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
}
.wc-team-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 10px 12px;
    border: 1px solid var(--wc-border); border-radius: var(--wc-radius);
    background: #fff; text-decoration: none; color: var(--wc-fg);
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative; overflow: hidden;
}
.wc-team-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--wc-border); transition: background .15s;
}
.wc-team-card:hover { transform: translateY(-3px); box-shadow: var(--wc-shadow); border-color: var(--wc-accent); }
.wc-team-card:hover::before { background: var(--wc-accent); }
.wc-team-card .wc-flag { width: 56px; height: 56px; margin-bottom: 10px; }
.wc-team-card-name { font-size: 13px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.wc-team-card-abbr { font-size: 11px; color: var(--wc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* ======================================================== SQUADS */
.wc-squad-list { padding: 8px 20px 20px; }
.wc-squad-row {
    display: grid; grid-template-columns: 30px 1fr 56px 24px;
    align-items: center; gap: 14px;
    padding: 13px 16px; border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius); margin-bottom: 8px;
    background: #fff; text-decoration: none; color: var(--wc-fg);
    transition: background .12s, transform .1s;
}
.wc-squad-row:hover { background: var(--wc-bg-soft2); transform: translateX(4px); }
.wc-squad-name { font-size: 14px; font-weight: 700; }
.wc-squad-abbr { font-size: 11px; color: var(--wc-muted); font-weight: 700; letter-spacing: .5px; text-align: right; }
.wc-squad-arrow { color: var(--wc-accent); font-size: 20px; font-weight: 800; text-align: right; }

/* ======================================================== POINTS TABLE */
.wc-standings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px; padding: 20px;
}
.wc-standings-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius); overflow: hidden;
    background: #fff; box-shadow: var(--wc-shadow-sm);
}
.wc-standings-table caption {
    background: linear-gradient(135deg, #0d0d0d, #2a2a2a);
    color: #fff; padding: 10px 14px;
    font-family: var(--wc-font-cond);
    font-weight: 800; text-align: left;
    font-size: 14px; text-transform: uppercase; letter-spacing: .8px;
}
.wc-st-group { display: inline-block; font-size: 20px; color: var(--wc-accent); margin-right: 6px; }
.wc-standings-table th,
.wc-standings-table td { padding: 9px 7px; text-align: center; border-top: 1px solid var(--wc-border); }
.wc-standings-table th {
    background: var(--wc-bg-soft); font-size: 10px; color: var(--wc-muted);
    text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.wc-standings-table td.wc-st-team { text-align: left; min-width: 120px; }
.wc-standings-table td.wc-st-team a {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--wc-fg); font-weight: 600;
    transition: color .12s;
}
.wc-standings-table td.wc-st-team a:hover { color: var(--wc-accent); }
.wc-st-rank { font-weight: 700; color: var(--wc-muted); width: 26px; }
.wc-st-pts { background: rgba(204,0,0,.04); }
.wc-st-pts strong { color: var(--wc-accent); font-family: var(--wc-font-cond); font-size: 15px; font-weight: 800; }
.wc-standings-table .pos { color: var(--wc-pos); font-weight: 700; }
.wc-standings-table .neg { color: var(--wc-neg); font-weight: 700; }
.wc-standings-table tr.wc-qualify td.wc-st-rank { color: var(--wc-pos); }

/* ======================================================== DETAIL - BACK LINK */
.wc-back {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 16px 22px 0;
    font-family: var(--wc-font-cond);
    font-size: 12px; color: var(--wc-muted);
    text-decoration: none; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    transition: color .12s;
}
.wc-back:hover { color: var(--wc-accent); }
.wc-back::before { content: '←'; margin-right: 2px; }

/* ======================================================== TEAM HERO */
.wc-team-hero {
    display: flex; align-items: center; gap: 20px;
    padding: 28px 22px;
    border-top: 4px solid var(--wc-accent);
    background: linear-gradient(135deg, #0d0d0d, #1e1e1e);
    color: #fff;
}
.wc-team-hero .wc-flag { width: 96px; height: 96px; flex: 0 0 96px; border-color: rgba(255,255,255,.2); }
.wc-team-hero-name { margin: 0 0 8px; font-family: var(--wc-font-cond); font-size: 32px; font-weight: 800; color: #fff; }
.wc-team-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.wc-team-hero-meta span { padding: 4px 12px; background: rgba(255,255,255,.12); border-radius: 20px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9); }
.wc-hero-pts { background: rgba(204,0,0,.5) !important; border-color: rgba(204,0,0,.6) !important; }

/* Stats bar under hero */
.wc-team-standing-bar {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg-soft2);
}
.wc-sb-cell {
    flex: 1; text-align: center;
    padding: 12px 6px;
    border-right: 1px solid var(--wc-border);
}
.wc-sb-cell:last-child { border-right: none; }
.wc-sb-val { font-family: var(--wc-font-cond); font-size: 20px; font-weight: 800; }
.wc-sb-key { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--wc-muted); font-weight: 600; margin-top: 2px; }

.wc-team-section { padding: 22px; border-top: 1px solid var(--wc-border); }
.wc-team-section h2 { margin: 0 0 16px; font-family: var(--wc-font-cond); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }

.wc-squad-pos {
    margin: 18px 0 10px; font-size: 11px; color: var(--wc-muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    display: flex; align-items: center; gap: 8px;
}
.wc-squad-pos::after { content: ''; flex: 1; height: 1px; background: var(--wc-border); }

.wc-squad-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 10px;
}
.wc-player {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: #fff;
    border: 1px solid var(--wc-border); border-radius: var(--wc-radius);
    transition: border-color .12s;
}
.wc-player:hover { border-color: #ccc; }
.wc-player-head {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; background: var(--wc-bg-soft);
    flex: 0 0 46px; border: 1px solid var(--wc-border);
}
.wc-player-head-fb {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--wc-font-cond); font-weight: 800; color: #fff; font-size: 18px;
    background: linear-gradient(135deg, var(--wc-accent), var(--wc-accent2));
    border: none;
}
.wc-player-body { min-width: 0; }
.wc-player-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.wc-player-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--wc-muted); }
.wc-player-num { color: var(--wc-accent); font-weight: 800; font-family: var(--wc-font-cond); font-size: 12px; }
.wc-player-pos { text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }

/* ======================================================== MATCH DETAIL HERO */
.wc-match-hero {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
    padding: 36px 22px 28px;
    background: linear-gradient(180deg, #0d0d0d, #1c1c1c);
    border-bottom: 1px solid var(--wc-border); color: #fff;
}
.wc-match-hero-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wc-match-hero-team-right { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.wc-match-hero-team .wc-flag { width: 70px; height: 70px; flex: 0 0 70px; border-color: rgba(255,255,255,.15); }
.wc-match-hero-team .wc-team-hero-name {
    font-family: var(--wc-font-cond); font-size: 22px; font-weight: 800;
    color: #fff; text-decoration: none; transition: color .12s;
}
.wc-match-hero-team .wc-team-hero-name:hover { color: #e87070; }

.wc-match-hero-score { text-align: center; }
.wc-hs-wrap { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wc-hs-num { font-family: var(--wc-font-cond); font-size: 56px; font-weight: 800; color: #fff; line-height: 1; }
.wc-hs-sep { font-family: var(--wc-font-cond); font-size: 40px; color: rgba(255,255,255,.3); font-weight: 400; }
.wc-hs-vs {
    font-family: var(--wc-font-cond); font-size: 28px; color: rgba(255,255,255,.5); font-weight: 700;
    border: 2px solid rgba(255,255,255,.2);
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.wc-match-hero-meta { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-top: 6px; }

.wc-match-info-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; padding: 22px;
}
.wc-info-card {
    background: #fff; border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius); padding: 16px;
    transition: box-shadow .12s;
}
.wc-info-card:hover { box-shadow: var(--wc-shadow-sm); }
.wc-info-label { font-family: var(--wc-font-cond); font-size: 10px; color: var(--wc-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-bottom: 5px; }
.wc-info-value { font-size: 16px; font-weight: 700; }
.wc-info-sub   { font-size: 12px; color: var(--wc-fg-soft); margin-top: 3px; }

/* ======================================================== EMPTY STATE */
.wc-empty {
    padding: 70px 20px; text-align: center; color: var(--wc-muted); font-size: 14px;
}
.wc-empty code { background: var(--wc-bg-soft); padding: 2px 6px; border-radius: 3px; font-size: 12px; color: var(--wc-fg); }

/* ======================================================== MOBILE */
@media (max-width: 820px) {
    .wc-nav-link { padding: 13px 12px; font-size: 13px; letter-spacing: .5px; }

    .wc-match {
        grid-template-columns: 1fr 80px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "home score away"
            "meta meta  meta";
        gap: 4px 8px;
        padding: 13px 16px;
    }
    .wc-team-home  { grid-area: home; }
    .wc-score      { grid-area: score; }
    .wc-team-away  { grid-area: away; }
    .wc-match-meta { grid-area: meta; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
    .wc-team-home  { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
    .wc-team-name  { font-size: 13px; max-width: 110px; }

    .wc-team-hero { flex-direction: column; align-items: flex-start; }
    .wc-team-hero .wc-flag { width: 76px; height: 76px; flex-basis: 76px; }
    .wc-team-hero-name { font-size: 26px; }

    .wc-match-hero { grid-template-columns: 1fr; text-align: center; }
    .wc-match-hero-team, .wc-match-hero-team-right { justify-content: center; flex-direction: row; text-align: center; }
    .wc-standings { grid-template-columns: 1fr; }
    .wc-team-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 500px) {
    .wc-match { grid-template-columns: 1fr 70px 1fr; }
    .wc-score { font-size: 20px; }
    .wc-team-name { max-width: 85px; font-size: 12px; }
    .wc-group-grid { grid-template-columns: 1fr 1fr; }
    .wc-squad-grid { grid-template-columns: 1fr; }
    .wc-sb-val { font-size: 16px; }
    .wc-sb-key { font-size: 9px; }
}