/* Mundial 26 Hub — minimal custom CSS on top of Tailwind CDN */
:root {
    --bg: #121212;
    --surface: #1A1A1A;
    --border: #2E2E2E;
    --text: #FFFFFF;
    --muted: #D1D4D1;
    --mex: #3CAC3B;
    --can: #E61D25;
    --usa: #2A398D;
}
html, body { background: var(--bg); color: var(--text); }
body {
    font-family: 'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Oswald', sans-serif; letter-spacing: -0.01em; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }

.card-flat { background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s; }
.card-flat:hover { transform: translateY(-2px); }

.live-dot {
    width: 8px; height: 8px; border-radius: 9999px; background: var(--can);
    box-shadow: 0 0 0 0 rgba(230,29,37,.6);
    animation: pulse 1.4s infinite ease-out;
    display: inline-block;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(230,29,37,.6); }
    70%  { box-shadow: 0 0 0 12px rgba(230,29,37,0); }
    100% { box-shadow: 0 0 0 0 rgba(230,29,37,0); }
}
.bg-mex { background: var(--mex); }
.bg-can { background: var(--can); }
.bg-usa { background: var(--usa); }
.text-mex { color: var(--mex); }
.text-can { color: var(--can); }
.text-usa { color: var(--usa); }
.border-edge { border-color: var(--border); }