/* ─── WC2026 Quiniela — Frontend Styles ─────────────────────────── */

:root {
    --wc2026-primary:    #1a1f3c;
    --wc2026-accent:     #e63946;
    --wc2026-gold:       #ffd700;
    --wc2026-green:      #2ec27e;
    --wc2026-blue:       #3a86ff;
    --wc2026-light-bg:   #f8f9ff;
    --wc2026-border:     #e0e4f0;
    --wc2026-text:       #1a1f3c;
    --wc2026-muted:      #6c757d;
    --wc2026-radius:     10px;
    --wc2026-shadow:     0 2px 12px rgba(0,0,0,0.08);
}

/* ── General ─────────────────────────────────────── */
.wc2026-all-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    margin: 24px 0;
}

/* ── Group Table ─────────────────────────────────── */
.wc2026-group-table {
    background: #fff;
    border-radius: var(--wc2026-radius);
    box-shadow: var(--wc2026-shadow);
    overflow: hidden;
    border: 1px solid var(--wc2026-border);
}

.wc2026-group-title {
    background: var(--wc2026-primary);
    color: #fff;
    margin: 0;
    padding: 12px 16px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc2026-group-badge {
    background: var(--wc2026-accent);
    color: #fff;
    border-radius: 6px;
    padding: 2px 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.wc2026-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wc2026-standings-table thead tr {
    background: var(--wc2026-light-bg);
    border-bottom: 2px solid var(--wc2026-border);
}

.wc2026-standings-table th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--wc2026-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wc2026-standings-table th.team { text-align: left; }

.wc2026-standings-table td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid var(--wc2026-border);
}

.wc2026-standings-table td.team {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc2026-standings-table .flag { font-size: 18px; }
.wc2026-standings-table td.pts { font-weight: 700; color: var(--wc2026-primary); }

.wc2026-qualifies { background: rgba(46,194,126,0.08); }
.wc2026-qualifies td.pts { color: var(--wc2026-green) !important; }
.wc2026-maybe     { background: rgba(255,215,0,0.07); }

.wc2026-legend {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--wc2026-muted);
    margin: 0;
    border-top: 1px solid var(--wc2026-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wc2026-legend .dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.wc2026-legend .dot.qualifies { background: var(--wc2026-green); }
.wc2026-legend .dot.maybe     { background: var(--wc2026-gold); }

/* ── Login Wall ──────────────────────────────────── */
.wc2026-login-wall {
    background: var(--wc2026-light-bg);
    border: 2px dashed var(--wc2026-border);
    border-radius: var(--wc2026-radius);
    padding: 40px;
    text-align: center;
    font-size: 16px;
}

/* ── Quiniela Form ───────────────────────────────── */
.wc2026-quiniela-form {
    max-width: 720px;
    margin: 0 auto;
}

.wc2026-q-title {
    font-size: 20px;
    color: var(--wc2026-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wc2026-accent);
}

.wc2026-q-group h4 {
    background: var(--wc2026-primary);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    margin: 20px 0 0 0;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Match card */
.wc2026-match-card {
    background: #fff;
    border: 1px solid var(--wc2026-border);
    border-radius: var(--wc2026-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--wc2026-shadow);
    transition: border-color 0.2s;
}

.wc2026-match-card.open     { border-left: 4px solid var(--wc2026-green); }
.wc2026-match-card.locked   { border-left: 4px solid #ccc; opacity: 0.85; }
.wc2026-match-card.finished { border-left: 4px solid var(--wc2026-blue); }
.wc2026-match-card.predicted { border-left: 4px solid var(--wc2026-accent); }

.wc2026-match-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--wc2026-muted);
}

.wc2026-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.wc2026-badge.open     { background: rgba(46,194,126,0.15); color: #1a8a56; }
.wc2026-badge.locked   { background: #f0f0f0; color: #888; }
.wc2026-badge.finished { background: rgba(58,134,255,0.15); color: var(--wc2026-blue); }

.wc2026-pts-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
}
.wc2026-pts-badge.exact  { background: var(--wc2026-gold); color: #333; }
.wc2026-pts-badge.winner { background: rgba(46,194,126,0.2); color: #1a8a56; }
.wc2026-pts-badge.miss   { background: #fdecea; color: #c62828; }

.wc2026-match-teams {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wc2026-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
}

.wc2026-team.away {
    flex-direction: row-reverse;
    text-align: right;
}

.wc2026-team .flag { font-size: 22px; }

.wc2026-score-inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 130px;
}

.wc2026-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wc2026-score-input {
    width: 52px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    padding: 6px;
    border: 2px solid var(--wc2026-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.wc2026-score-input:focus { border-color: var(--wc2026-accent); }

.wc2026-score-input.separator { font-size: 18px; color: var(--wc2026-muted); }

.wc2026-save-btn {
    background: var(--wc2026-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}
.wc2026-save-btn:hover { background: #c0232f; }

.wc2026-feedback {
    font-size: 11px;
    font-weight: 600;
    min-height: 16px;
}
.wc2026-feedback.success { color: var(--wc2026-green); }
.wc2026-feedback.error   { color: var(--wc2026-accent); }

.wc2026-real-score {
    text-align: center;
}
.wc2026-real-score .real {
    font-size: 22px;
    font-weight: 700;
    color: var(--wc2026-primary);
}
.wc2026-real-score .pred-label,
.wc2026-locked-score .pred-label {
    display: block;
    font-size: 11px;
    color: var(--wc2026-muted);
}
.wc2026-locked-score .pred-display {
    font-size: 20px;
    font-weight: 700;
    color: #888;
}
.wc2026-locked-score .no-pred {
    font-size: 12px;
    color: var(--wc2026-muted);
    font-style: italic;
}

/* ── Leaderboard ─────────────────────────────────── */
.wc2026-leaderboard {
    max-width: 750px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--wc2026-radius);
    box-shadow: var(--wc2026-shadow);
    overflow: hidden;
    border: 1px solid var(--wc2026-border);
}

.wc2026-lb-title {
    background: var(--wc2026-primary);
    color: #fff;
    margin: 0;
    padding: 16px 20px;
    font-size: 17px;
}

.wc2026-lb-table {
    width: 100%;
    border-collapse: collapse;
}

.wc2026-lb-table thead tr {
    background: var(--wc2026-light-bg);
    border-bottom: 2px solid var(--wc2026-border);
}

.wc2026-lb-table th, .wc2026-lb-table td {
    padding: 12px 14px;
    text-align: center;
    border-bottom: 1px solid var(--wc2026-border);
    font-size: 13px;
}

.wc2026-lb-table th { font-size: 11px; color: var(--wc2026-muted); text-transform: uppercase; }

.wc2026-participant {
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wc2026-participant img { border-radius: 50%; }

.wc2026-rank { font-size: 18px; font-weight: 700; }
.wc2026-pts  { font-size: 18px; font-weight: 700; color: var(--wc2026-accent); }

.wc2026-lb-current { background: rgba(230,57,70,0.06); }
.wc2026-lb-current td { font-weight: 600; }
.wc2026-you { font-size: 11px; color: var(--wc2026-accent); margin-left: 4px; }

.wc2026-scoring-legend {
    padding: 10px 20px;
    font-size: 12px;
    color: var(--wc2026-muted);
    border-top: 1px solid var(--wc2026-border);
    margin: 0;
}

/* ── My Stats ────────────────────────────────────── */
.wc2026-my-stats {
    margin: 24px 0;
}
.wc2026-my-stats h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--wc2026-primary);
}

.wc2026-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}

.wc2026-stat-card {
    background: #fff;
    border: 1px solid var(--wc2026-border);
    border-radius: var(--wc2026-radius);
    padding: 20px 14px;
    text-align: center;
    box-shadow: var(--wc2026-shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc2026-stat-card.gold  { border-top: 4px solid var(--wc2026-gold); }
.wc2026-stat-card.green { border-top: 4px solid var(--wc2026-green); }
.wc2026-stat-card.blue  { border-top: 4px solid var(--wc2026-blue); }
.wc2026-stat-card.red   { border-top: 4px solid var(--wc2026-accent); }

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--wc2026-primary);
    line-height: 1;
}
.stat-label {
    font-size: 11px;
    color: var(--wc2026-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Bracket ─────────────────────────────────────── */
.wc2026-bracket { margin: 24px 0; }

.wc2026-bracket-title {
    font-size: 20px;
    color: var(--wc2026-primary);
    margin-bottom: 24px;
    border-bottom: 3px solid var(--wc2026-accent);
    padding-bottom: 10px;
}

.wc2026-bracket-phase h4 {
    background: var(--wc2026-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    margin: 0 0 0 0;
}

.wc2026-bracket-matches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--wc2026-light-bg);
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--wc2026-border);
    border-top: none;
    margin-bottom: 20px;
}

.wc2026-bracket-match {
    background: #fff;
    border: 1px solid var(--wc2026-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--wc2026-shadow);
}

.wc2026-bracket-match.finished {
    border-left: 4px solid var(--wc2026-blue);
}

.wc2026-bm-team {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    border-bottom: 1px solid var(--wc2026-border);
}

.wc2026-bm-team .name { flex: 1; font-size: 13px; font-weight: 500; }
.wc2026-bm-team .score {
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}
.wc2026-bm-team.winner { background: rgba(46,194,126,0.1); font-weight: 700; }
.wc2026-bm-vs {
    text-align: center;
    font-size: 10px;
    color: var(--wc2026-muted);
    padding: 2px;
    background: var(--wc2026-light-bg);
}
.wc2026-bm-extra {
    text-align: center;
    padding: 4px;
    font-size: 11px;
    color: var(--wc2026-muted);
    background: #fffbea;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .wc2026-all-groups { grid-template-columns: 1fr; }
    .wc2026-team .name { font-size: 12px; }
    .wc2026-match-teams { gap: 6px; }
    .wc2026-stats-grid { grid-template-columns: repeat(3, 1fr); }
}