/* ===== THEME VARIABLES ===== */
:root {
    --bg-body: #0a0e1a;
    --text-main: #e0e6f0;
    --bg-header: linear-gradient(135deg, #1a1f3a 0%, #0d1025 100%);
    --border-header: #2a3060;
    --text-sub: #8892b0;
    --bg-input: #1a1f3a;
    --border-input: #3a4070;
    --bg-controls: #111630;
    --border-controls: #1e2550;
    --bg-card: #12162e;
    --border-card: #1e2550;
    --bg-card-header: #1a2050;
    --text-card-header: #6070a0;
    --bg-hover: #1a2050;
    --border-hover: #3a4080;
    --gold: #f0c040;
    --gold-dark: #e0a020;
    --btn-primary-bg: #1a2a6c;
    --btn-primary-hover: #2a3a8c;
    --tab-active-bg: #1a2a6c;
    --tab-hover-bg: #1a2050;
    --bg-table-head: #1a2050;
    --bg-table-stripe: rgba(255,255,255,0.02);
    --bg-table-hover: rgba(255,255,255,0.05);
    --bg-modal: rgba(0,0,0,0.8);
    --bg-modal-content: #0d1025;
    --border-modal: #2a3060;
    --bg-toggle: #0d1025;
    --bg-login: linear-gradient(135deg,#0a0e1a 0%,#1a1f3a 100%);
    --bg-login-card: #12162e;
    --border-login: #2a3060;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-rgb: 59,130,246;
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
}
[data-theme="light"] {
    --bg-body: #f0f2f5;
    --text-main: #1a1a2e;
    --bg-header: linear-gradient(135deg, #ffffff 0%, #e8eaf0 100%);
    --border-header: #c0c8d8;
    --text-sub: #5a6580;
    --bg-input: #ffffff;
    --border-input: #b0b8c8;
    --bg-controls: #e8ecf2;
    --border-controls: #c8d0e0;
    --bg-card: #ffffff;
    --border-card: #d0d8e8;
    --bg-card-header: #e8ecf4;
    --text-card-header: #5060a0;
    --bg-hover: #e0e4f0;
    --border-hover: #8090c0;
    --gold: #c89000;
    --gold-dark: #a07000;
    --btn-primary-bg: #2a5adc;
    --btn-primary-hover: #1a4acc;
    --tab-active-bg: #2a5adc;
    --tab-hover-bg: #dde4f0;
    --bg-table-head: #e0e6f4;
    --bg-table-stripe: rgba(0,0,0,0.02);
    --bg-table-hover: rgba(0,0,0,0.05);
    --bg-modal: rgba(0,0,0,0.5);
    --bg-modal-content: #ffffff;
    --border-modal: #c0c8d8;
    --bg-toggle: #e0e4f0;
    --bg-login: linear-gradient(135deg,#e8ecf4 0%,#f0f2f5 100%);
    --bg-login-card: #ffffff;
    --border-login: #c0c8d8;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-rgb: 37,99,235;
    --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    background: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    line-height: 1.5;
}

/* ===== HEADER ===== */
header {
    background: var(--bg-header);
    border-bottom: 2px solid var(--border-header);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 2rem; }
.header-title h1 {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.header-title p { font-size: 0.8rem; color: var(--text-sub); }
#langSelect {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-input);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}
#langSelect:hover { border-color: var(--gold); }

.header-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    padding: 3px 4px;
}
.header-toggles #langSelect {
    border: none;
    background: transparent;
    padding: 4px 8px;
    border-radius: 5px;
}
.header-toggles #langSelect:hover { background: var(--bg-hover); }
.header-toggles .theme-toggle {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    border: none;
    background: transparent;
}
.header-toggles .theme-toggle:hover {
    background: var(--bg-hover);
    border-radius: 5px;
}

/* ===== CONTROLS BAR ===== */
.controls-bar {
    background: var(--bg-controls);
    border-bottom: 1px solid var(--border-controls);
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.sim-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
    border: none;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, #d4a017, #b8860b); color: #000; }
.btn-accent { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }
.btn-secondary { background: var(--bg-card-header); color: var(--text-main); }
.btn-danger { background: #3d1520; color: #ff6b6b; }
.btn-icon { font-size: 0.9rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.sim-status {
    font-size: 0.82rem;
    color: var(--text-sub);
    display: flex;
    gap: 10px;
    align-items: center;
}
#simProgress { color: var(--gold); font-weight: 600; }

/* ===== RANKING STATUS ===== */
.ranking-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-card-header);
    margin-left: auto;
}
.ranking-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.ranking-dot-ok { background: #2ecc71; }
.ranking-dot-default { background: #e67e22; }
.btn-outline-sm {
    background: none;
    border: 1px solid var(--border-card);
    color: var(--text-sub);
    padding: 2px 8px;
    font-size: 0.72rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-outline-sm:hover { background: var(--bg-hover); color: var(--text-main); }

.btn-accent-sm {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn-accent-sm:hover { background: var(--accent-hover); transform: scale(1.05); }
.btn-accent-sm:disabled { background: var(--text-sub); cursor: default; transform: none; }

.btn-scout {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-left: 10px;
    vertical-align: middle;
    animation: scout-pulse 2s ease-in-out 3;
}
.btn-scout:hover { background: var(--accent-hover); transform: scale(1.05); }
@keyframes scout-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 59,130,246), 0.5); }
    50% { box-shadow: 0 0 12px 4px rgba(var(--accent-rgb, 59,130,246), 0.3); }
}

/* ===== TABS ===== */
.tabs {
    display: flex;
    background: var(--bg-controls);
    border-bottom: 2px solid var(--border-controls);
    padding: 0 24px;
    overflow-x: auto;
}
.tab {
    background: none;
    border: none;
    color: var(--text-card-header);
    padding: 12px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.tab:hover { color: var(--text-main); }
.tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ===== VIEWS ===== */
main { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

/* ===== GROUPS VIEW ===== */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 16px;
}
.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.group-card:hover { border-color: var(--border-hover); }
.group-header {
    background: var(--bg-card-header);
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-card);
}
.group-header .group-letter {
    color: var(--gold);
    font-size: 1.1rem;
}
.group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.group-table th {
    padding: 6px 8px;
    text-align: center;
    color: var(--text-card-header);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-card);
}
.group-table th:first-child, .group-table td:first-child {
    text-align: left;
    padding-left: 12px;
}
.group-table td {
    padding: 7px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-card);
}
.group-table tr:last-child td { border-bottom: none; }
.group-table tr.qualified { background: rgba(46, 204, 113, 0.08); }
.group-table tr.third-possible { background: rgba(241, 196, 15, 0.06); }
.group-table tr.eliminated { opacity: 0.5; }
.team-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}
.team-flag { font-size: 1.1rem; }
.flag-sm {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.flag-lg {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.team-name-short { white-space: nowrap; }
.pts-cell { font-weight: 700; color: var(--gold); }
.group-matches { padding: 8px 12px; }
.group-match {
    display: grid;
    grid-template-columns: 80px 1fr 50px 1fr 110px;
    align-items: center;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-card);
    font-size: 0.76rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    gap: 0;
}
.group-match:hover { background: var(--bg-hover); }
.group-match:last-child { border-bottom: none; }
.gm-meta { color: var(--text-card-header); font-size: 0.7rem; white-space: nowrap; }
.gm-home { text-align: right; font-weight: 500; white-space: nowrap; padding-right: 4px; }
.gm-away { text-align: left; font-weight: 500; white-space: nowrap; padding-left: 4px; }
.gm-venue { color: var(--text-sub); font-size: 0.65rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; }
.match-score {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    font-size: 0.85rem;
    width: 100%;
}
.match-score.pending { color: var(--text-sub); font-weight: 400; font-size: 0.75rem; }
.sc-h { min-width: 16px; text-align: right; }
.sc-d { min-width: 10px; text-align: center; }
.sc-a { min-width: 16px; text-align: left; }
.btn-sim-group {
    margin: 8px 12px 12px;
    width: calc(100% - 24px);
    justify-content: center;
    font-size: 0.75rem;
    padding: 6px;
}

/* ===== SCHEDULE VIEW ===== */
.schedule-day { margin-bottom: 20px; }
.schedule-date {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 8px;
}
.schedule-match {
    display: grid;
    grid-template-columns: 160px 1fr 50px 1fr 130px;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
    gap: 6px;
}
.schedule-match:hover { background: var(--bg-hover); }
.sch-meta { color: var(--text-card-header); font-size: 0.72rem; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.sch-home { text-align: right; font-weight: 500; white-space: nowrap; }
.sch-away { text-align: left; font-weight: 500; white-space: nowrap; }
.sch-venue { color: var(--text-sub); font-size: 0.68rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    gap: 0;
}
.schedule-score .sc-h { min-width: 16px; text-align: right; }
.schedule-score .sc-d { min-width: 10px; text-align: center; }
.schedule-score .sc-a { min-width: 16px; text-align: left; }
.schedule-score.pending { color: var(--text-sub); font-weight: 400; font-size: 0.75rem; }
.schedule-group-tag {
    background: var(--bg-card-header);
    color: var(--text-sub);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}

/* ===== KNOCKOUT VIEW ===== */
.knockout-container { overflow-x: auto; padding: 10px 0; }
.knockout-round { margin-bottom: 24px; }
.knockout-round-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 12px;
}
.knockout-matches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.knockout-match {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.knockout-match:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.knockout-match-header {
    background: var(--bg-card-header);
    padding: 5px 12px;
    font-size: 0.7rem;
    color: var(--text-card-header);
    display: flex;
    justify-content: space-between;
}
.knockout-match-body { padding: 8px 12px; }
.knockout-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.82rem;
}
.knockout-team.winner { color: #2ecc71; font-weight: 700; }
.knockout-team.loser { opacity: 0.5; }
.knockout-team-info { display: flex; align-items: center; gap: 6px; }
.knockout-team-score { font-weight: 700; min-width: 20px; text-align: right; }
.knockout-detail {
    font-size: 0.68rem;
    color: var(--text-sub);
    text-align: center;
    padding: 2px 0 4px;
}
.knockout-pen { color: #e74c3c; font-weight: 600; }
.knockout-aet { color: #f39c12; }
.knockout-tbd {
    color: var(--text-sub);
    font-style: italic;
    padding: 10px 12px;
    text-align: center;
    font-size: 0.8rem;
}

/* ===== KO VIEW TOGGLE ===== */
.ko-toggle-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--bg-toggle);
    border-radius: 8px;
    width: fit-content;
}
.ko-toggle {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-sub);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ko-toggle:hover { color: var(--text-main); }
.ko-toggle.active {
    background: var(--btn-primary-bg);
    color: var(--gold);
}

/* ===== BRACKET VIEW ===== */
.brk-container {
    padding-bottom: 12px;
}
.brk-scroll {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.brk-side {
    display: flex;
    flex: 1;
    min-width: 0;
}
.brk-left { flex-direction: row; }
.brk-right { flex-direction: row; }
.brk-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    flex-shrink: 0;
    gap: 24px;
    padding-top: 40px;
}
.brk-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 0;
    flex: 1;
    padding: 0 2px;
    min-height: 500px;
}
.brk-col-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    padding: 6px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.brk-third {
    min-height: auto !important;
}
.brk-match {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 6px;
    margin: 4px 0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.72rem;
    overflow: hidden;
}
.brk-match:hover {
    border-color: var(--border-hover);
    transform: scale(1.02);
}
.brk-match.played {
    border-color: var(--border-hover);
}
.brk-team {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-card);
}
.brk-team:last-of-type {
    border-bottom: none;
}
.brk-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brk-score {
    font-weight: 700;
    min-width: 16px;
    text-align: right;
}
.brk-w {
    color: #2ecc71;
    font-weight: 600;
}
.brk-l {
    opacity: 0.45;
}
.brk-tbd {
    color: var(--text-sub);
    font-style: italic;
}
.brk-extra {
    text-align: center;
    font-size: 0.62rem;
    color: #e74c3c;
    padding: 2px 0;
    font-weight: 600;
}

/* ===== ESPN BRACKET VIEW ===== */
.espn-bracket {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding: 16px 0;
    -webkit-overflow-scrolling: touch;
}
.espn-half {
    flex: 1;
    min-width: 0;
}
.espn-half-left .espn-rounds { flex-direction: row; }
.espn-half-right .espn-rounds { flex-direction: row; }
.espn-rounds {
    display: flex;
    align-items: stretch;
}
.espn-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    padding: 0 0 8px;
}
.espn-final-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    flex-shrink: 0;
    gap: 20px;
    padding: 30px 8px 0;
}
.espn-round {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0 1px;
}
.espn-round-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    text-align: center;
    padding: 4px 0 8px;
    white-space: nowrap;
}
.espn-round-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 4px;
    position: relative;
}

/* ---- Match box ---- */
.espn-match {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
    min-width: 0;
}
.espn-match:hover {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(240,192,64,0.15);
    transform: scale(1.03);
    z-index: 2;
}
.espn-match.espn-played {
    border-color: var(--border-hover);
}

/* ---- Team row ---- */
.espn-team {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    font-size: 0.72rem;
    line-height: 1.3;
}
.espn-team-top {
    border-bottom: 1px solid var(--border-card);
}
.espn-flag { flex-shrink: 0; }
.espn-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
}
.espn-score {
    font-weight: 800;
    min-width: 14px;
    text-align: right;
    font-size: 0.75rem;
}
.espn-w {
    background: rgba(46,204,113,0.1);
}
.espn-w .espn-name { color: #2ecc71; font-weight: 700; }
.espn-w .espn-score { color: #2ecc71; }
.espn-l {
    opacity: 0.45;
}
.espn-tbd {
    opacity: 0.3;
    font-style: italic;
}
.espn-extra {
    text-align: center;
    font-size: 0.58rem;
    color: #e74c3c;
    padding: 1px 0;
    font-weight: 700;
    background: rgba(231,76,60,0.06);
}

/* ---- Connector lines (CSS pseudo-elements) ---- */
/* Left side: connectors go RIGHT from matches to the next round */
.espn-half-left .espn-r32 .espn-match,
.espn-half-left .espn-r16 .espn-match,
.espn-half-left .espn-qf .espn-match,
.espn-half-left .espn-sf .espn-match {
    position: relative;
}
/* Right connector stub from each match */
.espn-half-left .espn-r32 .espn-match::after,
.espn-half-left .espn-r16 .espn-match::after,
.espn-half-left .espn-qf .espn-match::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--border-hover);
}
/* Left connector stub into each match (from previous round) */
.espn-half-left .espn-r16 .espn-match::before,
.espn-half-left .espn-qf .espn-match::before,
.espn-half-left .espn-sf .espn-match::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--border-hover);
}

/* Right side: connectors go LEFT (mirrored) */
.espn-half-right .espn-r32 .espn-match::before,
.espn-half-right .espn-r16 .espn-match::before,
.espn-half-right .espn-qf .espn-match::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--border-hover);
}
.espn-half-right .espn-r16 .espn-match::after,
.espn-half-right .espn-qf .espn-match::after,
.espn-half-right .espn-sf .espn-match::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--border-hover);
}

/* Vertical merge lines between pairs of matches */
.espn-half-left .espn-r32 .espn-round-matches,
.espn-half-left .espn-r16 .espn-round-matches,
.espn-half-left .espn-qf .espn-round-matches {
    padding-right: 8px;
}
.espn-half-left .espn-r16 .espn-round-matches,
.espn-half-left .espn-qf .espn-round-matches,
.espn-half-left .espn-sf .espn-round-matches {
    padding-left: 8px;
}
.espn-half-right .espn-r32 .espn-round-matches,
.espn-half-right .espn-r16 .espn-round-matches,
.espn-half-right .espn-qf .espn-round-matches {
    padding-left: 8px;
}
.espn-half-right .espn-r16 .espn-round-matches,
.espn-half-right .espn-qf .espn-round-matches,
.espn-half-right .espn-sf .espn-round-matches {
    padding-right: 8px;
}

/* Final column styling */
.espn-final-round .espn-match {
    border-color: var(--gold-dark);
    box-shadow: 0 0 12px rgba(240,192,64,0.1);
}
.espn-final-round .espn-round-header {
    font-size: 0.8rem;
    color: var(--gold);
}
.espn-third-round {
    opacity: 0.8;
}

/* Responsive ESPN */
@media (max-width: 900px) {
    .espn-bracket { font-size: 0.7rem; }
    .espn-match { min-width: 90px; }
    .espn-final-col { min-width: 130px; }
}
@media (max-width: 600px) {
    /* Portrait mobile : on garde le layout horizontal avec scroll natif
       (plus lisible qu'un empilement vertical écrasé). Min-widths = lisibilité. */
    .espn-bracket { font-size: 0.65rem; padding: 8px 0; }
    .espn-half { min-width: 520px; flex-shrink: 0; }
    .espn-match { min-width: 95px; }
    .espn-round { min-width: 100px; flex-shrink: 0; }
    .espn-round-header { white-space: normal; line-height: 1.1; }
    .espn-final-col { min-width: 110px; padding: 20px 6px 0; gap: 14px; flex-shrink: 0; }

    /* Vue Bracket (.brk-*) : scroll horizontal natif quand le bracket déborde */
    .brk-scroll  { font-size: 0.7rem; }
    .brk-side    { min-width: 420px; flex-shrink: 0; }
    .brk-col     { min-width: 85px;  flex-shrink: 0; }
    .brk-col-title { white-space: normal; line-height: 1.15; }
    .brk-center  { min-width: 110px; flex-shrink: 0; gap: 14px; }
}
/* Vue Bracket en mode preview mobile (bouton 📱 sur PC) */
.mobile-preview .brk-scroll  { font-size: 0.7rem; }
.mobile-preview .brk-side    { min-width: 420px; flex-shrink: 0; }
.mobile-preview .brk-col     { min-width: 85px;  flex-shrink: 0; }
.mobile-preview .brk-col-title { white-space: normal; line-height: 1.15; }
.mobile-preview .brk-center  { min-width: 110px; flex-shrink: 0; gap: 14px; }
/* Même vue bracket dans le mode preview mobile (bouton 📱 sur PC) */
.mobile-preview .espn-bracket { font-size: 0.65rem; padding: 8px 0; }
.mobile-preview .espn-half { min-width: 520px; flex-shrink: 0; }
.mobile-preview .espn-match { min-width: 95px; }
.mobile-preview .espn-round { min-width: 100px; flex-shrink: 0; }
.mobile-preview .espn-round-header { white-space: normal; line-height: 1.1; }
.mobile-preview .espn-final-col { min-width: 110px; padding: 20px 6px 0; gap: 14px; flex-shrink: 0; }

/* ===== RANKINGS VIEW ===== */
.rankings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.ranking-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    overflow: hidden;
}
.ranking-title {
    background: var(--bg-card-header);
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-card);
}
.ranking-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ranking-table th {
    padding: 8px 10px;
    text-align: left;
    color: var(--text-card-header);
    font-size: 0.72rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-card);
}
.ranking-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-card);
}
.ranking-table tr:hover { background: var(--bg-hover); }
.rank-num { color: var(--gold); font-weight: 700; width: 30px; }
.elo-change-pos { color: #2ecc71; font-size: 0.72rem; }
.elo-change-neg { color: #e74c3c; font-size: 0.72rem; }
.elo-val { font-weight: 600; }

/* ===== TEAMS VIEW ===== */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 14px;
    transition: border-color 0.2s;
}
.team-card:hover { border-color: var(--border-hover); }
.team-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.team-card-flag { font-size: 2rem; display: flex; align-items: center; }
.team-card-flag .flag-lg { width: 40px; height: 28px; }
.team-card-name { font-weight: 700; font-size: 0.95rem; }
.team-card-details { font-size: 0.76rem; color: var(--text-sub); }
.team-card-details div { padding: 2px 0; }
.team-card-detail-label { color: var(--text-card-header); display: inline-block; min-width: 100px; }
.team-card-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}
.tag-host { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.tag-debut { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }
.tag-holder { background: rgba(241, 196, 15, 0.15); color: #f1c40f; }

/* ===== TEAM SQUAD ===== */
.team-card-conf { font-size: 0.75rem; color: var(--text-card-header); }
.team-squad { margin-top: 8px; font-size: 0.72rem; color: var(--text-sub); }
.team-squad-title { font-weight: 600; color: var(--gold); margin-bottom: 3px; }
.team-squad-title-subs { font-weight: 600; color: var(--text-sub); margin-top: 4px; margin-bottom: 3px; }
.team-squad-player {
    display: inline-block;
    background: var(--bg-card-header);
    padding: 1px 6px;
    border-radius: 3px;
    margin: 1px;
}
.team-squad-player-sub {
    display: inline-block;
    background: var(--bg-hover);
    padding: 1px 6px;
    border-radius: 3px;
    margin: 1px;
}
.team-squad-rating { color: var(--gold); }
.team-squad-rating-sub { color: var(--text-card-header); }

/* ===== CHAMPION BOX ===== */
.champion-box {
    text-align: center;
    padding: 30px;
    margin-top: 10px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px solid var(--gold);
    animation: championReveal 0.8s ease-out;
}
@keyframes championReveal {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    50% { transform: scale(1.03) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.champion-flag { font-size: 3rem; animation: championPulse 2s ease-in-out infinite; }
@keyframes championPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.champion-title { font-size: 1.5rem; font-weight: 900; color: var(--gold); }
.champion-name { font-size: 1.3rem; font-weight: 700; margin: 6px 0; }
.champion-sub { color: var(--text-sub); font-size: 0.85rem; margin-top: 12px; }

/* ===== MODE SELECT OVERLAY ===== */
.mode-select-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: flex-start;          /* pas centrer verticalement, sinon le haut est tronqué sur petit écran */
    z-index: 9000;
    overflow-y: auto;                 /* scroll vertical autorisé */
    padding: 20px 0;                  /* marge haut/bas pour respirer */
    -webkit-overflow-scrolling: touch;
}
.mode-select-overlay.app-hidden { display: none; }
.mode-select-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    box-shadow: var(--shadow-card);
    margin: auto;                     /* centre horizontal + tassement vertical sans clipping */
    max-width: 100%;
}
@media (max-width: 640px) {
    .mode-select-card { padding: 20px 16px; }
    .mode-select-card h2 { font-size: 1.35rem; }
}
.mode-select-card h2 {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f0c040, #e0a020);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}
.mode-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 32px;
    border-radius: 14px;
    border: 2px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    width: 200px;
}
.btn-mode:hover {
    border-color: #f0c040;
    background: rgba(240,192,64,0.08);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(240,192,64,0.15);
}
.mode-icon { font-size: 2.5rem; }
.mode-label { font-size: 1.2rem; font-weight: 700; }
.mode-desc { font-size: 0.78rem; color: var(--text-sub); line-height: 1.4; }

.btn-mode-bettor { border-color: rgba(46,204,113,0.4); }
.btn-mode-bettor:hover {
    border-color: #2ecc71;
    background: rgba(46,204,113,0.08);
    box-shadow: 0 8px 24px rgba(46,204,113,0.15);
}

.bettor-group-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.bettor-group-name { font-weight: 700; font-size: 1rem; }
.bettor-group-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.mode-lang-bar { margin: 8px 0 16px; }
.mode-lang-bar select {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
}

/* ===== TEAM PICKER ===== */
.team-picker-modal { max-width: 860px !important; width: 92vw !important; overflow-x: hidden; }
.team-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 16px;
}
.team-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.15s;
    min-width: 0;
    overflow: hidden;
}
.team-pick-btn:hover {
    border-color: #f0c040;
    background: rgba(240,192,64,0.1);
}
.team-pick-btn .pick-flag { width: 40px; height: 28px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.team-pick-btn .pick-name { white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; text-align: center; line-height: 1.15; }

/* Mobile portrait : 4 colonnes pour que les noms tiennent en entier */
@media (max-width: 600px) {
    .team-picker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .team-pick-btn { font-size: 0.72rem; padding: 10px 4px; }
    .team-pick-btn .pick-flag { width: 34px; height: 24px; }
}
.mobile-preview .team-picker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mobile-preview .team-pick-btn { font-size: 0.72rem; padding: 10px 4px; }
.mobile-preview .team-pick-btn .pick-flag { width: 34px; height: 24px; }

/* ===== PLAYER MODE BANNER ===== */
.player-team-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(240,192,64,0.15), rgba(240,192,64,0.05));
    border: 1px solid rgba(240,192,64,0.3);
    border-radius: 8px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 10px;
}
.player-team-banner .ptb-flag { font-size: 1.1rem; }

/* ===== XI PICKER ===== */
.xi-picker-modal { max-width: 750px !important; width: 92vw !important; }
.xi-picker-header { text-align: center; margin-bottom: 12px; }
.xi-picker-opponent { color: var(--text-sub); font-size: 0.9rem; margin-top: 4px; }
.xi-phase-label { color: #e8c64a; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 6px; }
.xi-picker-body {
    display: flex;
    gap: 16px;
}
.xi-picker-col {
    flex: 1;
    min-width: 0;
}

/* Mobile portrait : empile titulaires/remplaçants verticalement pour lisibilité */
@media (max-width: 600px) {
    .xi-picker-body { flex-direction: column; gap: 20px; }
    .xi-player-list { max-height: 40vh; }
    .xi-player-name { white-space: normal; overflow: visible; text-overflow: unset; font-size: .82rem; }
    .xi-player-card { padding: 8px 10px; }
}
.mobile-preview .xi-picker-body { flex-direction: column; gap: 20px; }
.mobile-preview .xi-player-list { max-height: 40vh; }
.mobile-preview .xi-player-name { white-space: normal; overflow: visible; text-overflow: unset; }
.xi-col-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-card);
}
.xi-col-title span { color: var(--text-sub); font-weight: 400; font-size: 0.8rem; }
.xi-player-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 52vh;
    overflow-y: auto;
}
.xi-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.82rem;
}
.xi-player-card:hover {
    border-color: #f0c040;
    background: rgba(240,192,64,0.08);
}
.xi-player-card.xi-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.xi-player-card.xi-unavailable.xi-removable {
    opacity: 0.6;
    cursor: pointer;
    border: 1px dashed #e74c3c;
}
.xi-warn-label {
    text-align: center; font-size: 0.85rem; font-weight: 700;
    color: #e74c3c; padding: 6px; margin-bottom: 6px;
    background: rgba(231,76,60,0.08); border-radius: 6px;
    display: none;
}
.xi-unavail-reason {
    font-size: 0.65rem;
    color: #e74c3c;
    margin-left: 4px;
    font-weight: 700;
    font-style: italic;
    text-decoration: none;
    display: inline-block;
}
.xi-player-pos {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 30px;
    text-align: center;
    color: #fff;
}
.xi-player-pos.pos-G { background: #e67e22; }
.xi-player-pos.pos-D { background: #3498db; }
.xi-player-pos.pos-M { background: #2ecc71; }
.xi-player-pos.pos-F { background: #e74c3c; }
.xi-player-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xi-player-rating {
    font-weight: 800;
    font-size: 0.85rem;
    min-width: 28px;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}
.xi-base-rating { font-weight: 400; font-size: 0.65rem; color: var(--text-sub); }
.xi-player-stam {
    font-weight: 700;
    font-size: 0.7rem;
    min-width: 36px;
    text-align: center;
    padding: 2px 5px;
    border-radius: 4px;
}
.xi-player-stam.stam-green { background: #27ae60; color: #fff; }
.xi-player-stam.stam-yellow { background: #f39c12; color: #fff; }
.xi-player-stam.stam-orange { background: #e67e22; color: #fff; }
.xi-player-stam.stam-red { background: #e74c3c; color: #fff; }
.xi-endurance {
    font-weight: 600;
    font-size: 0.65rem;
    min-width: 32px;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: var(--text-sub);
}
.xi-endurance.end-high { color: #2ecc71; }
.xi-endurance.end-mid { color: #f1c40f; }
.xi-endurance.end-low { color: #e74c3c; }
.xi-player-card .xi-arrow {
    font-size: 0.7rem;
    color: var(--text-sub);
}
.xi-picker-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-top: 10px;
}
.xi-picker-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.xi-warn { color: #e74c3c; font-weight: 700; }

/* ===== ELIMINATION DIALOG ===== */
.elim-dialog-modal { max-width: 420px !important; text-align: center; }
.elim-msg { color: var(--text-sub); margin: 16px 0; line-height: 1.5; font-size: 0.95rem; }
.elim-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* ===== CONFETTI ===== */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    top: -10px;
    opacity: 0;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.3); }
}

/* ===== MATCH CARD ANIMATION ===== */
.knockout-match, .brk-match, .espn-match {
    animation: cardFadeIn 0.3s ease-out both;
}
.knockout-match:nth-child(1) { animation-delay: 0s; }
.knockout-match:nth-child(2) { animation-delay: 0.05s; }
.knockout-match:nth-child(3) { animation-delay: 0.1s; }
.knockout-match:nth-child(4) { animation-delay: 0.15s; }
.knockout-match:nth-child(5) { animation-delay: 0.2s; }
.knockout-match:nth-child(6) { animation-delay: 0.25s; }
.knockout-match:nth-child(7) { animation-delay: 0.3s; }
.knockout-match:nth-child(8) { animation-delay: 0.35s; }
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== GROUP CARD ANIMATION ===== */
.group-card {
    animation: cardFadeIn 0.3s ease-out both;
}
.group-card:nth-child(1) { animation-delay: 0s; }
.group-card:nth-child(2) { animation-delay: 0.04s; }
.group-card:nth-child(3) { animation-delay: 0.08s; }
.group-card:nth-child(4) { animation-delay: 0.12s; }
.group-card:nth-child(5) { animation-delay: 0.16s; }
.group-card:nth-child(6) { animation-delay: 0.2s; }
.group-card:nth-child(7) { animation-delay: 0.24s; }
.group-card:nth-child(8) { animation-delay: 0.28s; }
.group-card:nth-child(9) { animation-delay: 0.32s; }
.group-card:nth-child(10) { animation-delay: 0.36s; }
.group-card:nth-child(11) { animation-delay: 0.4s; }
.group-card:nth-child(12) { animation-delay: 0.44s; }

/* ===== MISC THEME-AWARE ===== */
.text-conf { color: var(--text-card-header); }
.text-group-letter { color: var(--gold); font-weight: 700; }
.card-events-sep { margin-top: 8px; border-top: 1px solid var(--border-card); padding-top: 8px; }
.text-info-msg { text-align: center; color: var(--text-sub); padding: 40px; }

/* ===== MODAL ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.modal.hidden { display: none; }
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-modal);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-card-header);
    font-size: 1.5rem;
    cursor: pointer;
}
.modal-close:hover { color: var(--text-main); }
.modal-match-header { text-align: center; margin-bottom: 16px; }
.modal-match-date { color: var(--text-card-header); font-size: 0.8rem; }
.modal-match-venue { color: var(--text-card-header); font-size: 0.75rem; }
.modal-match-round { color: var(--gold); font-weight: 600; font-size: 0.85rem; }
.modal-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 16px 0;
}
.modal-team {
    text-align: center;
    flex: 1;
}
.modal-team-flag { font-size: 3rem; display: flex; justify-content: center; }
.modal-team-flag .flag-lg { width: 72px; height: 50px; }
.modal-team-name { font-weight: 700; font-size: 1rem; margin-top: 4px; }
.modal-team-coach { font-size: 0.7rem; color: var(--text-sub); margin-top: 2px; }
.coach-stars { font-size: 0.7rem; letter-spacing: -1px; }
.team-formation-badge { display:inline-block; background:var(--gold); color:#000; font-weight:700; font-size:0.75rem; padding:1px 7px; border-radius:8px; letter-spacing:0.5px; }
.modal-score {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gold);
    min-width: 80px;
    text-align: center;
}
.modal-score.pending { color: var(--text-sub); font-size: 1.2rem; font-weight: 400; }
.modal-extra-info {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-top: 4px;
}
.modal-events {
    margin-top: 16px;
    font-size: 0.78rem;
}
.modal-event {
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-event-min { color: var(--text-card-header); min-width: 35px; }
.modal-event-type { min-width: 20px; }

/* ===== MATCH COMMENTARY ===== */
.modal-stats {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--bg-card-header);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}
.modal-stats h3 {
    color: var(--gold);
    margin: 0 0 14px 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.stat-val {
    min-width: 32px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-main);
}
.stat-val-a { text-align: right; }
.stat-val-b { text-align: left; }
.stat-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stat-label {
    font-size: 0.68rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.stat-bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.stat-bar-a {
    background: var(--gold);
    height: 100%;
    border-radius: 3px 0 0 3px;
    transition: width 0.4s;
}
.stat-bar-b {
    background: rgba(255,255,255,0.15);
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.4s;
}
[data-theme="light"] .stat-bar-b { background: rgba(0,0,0,0.12); }
[data-theme="light"] .btn-danger { background: #e74c3c; color: #fff; }
[data-theme="light"] .pred-score-input { background: #fff; border-color: #bbb; color: #1a1a2e; }
[data-theme="light"] .pred-score-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,152,219,.18); }

/* Player match ratings */
.lu-match-rating {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    min-width: 22px;
    text-align: center;
}
.lu-mr-excellent { background: #1b5e20; color: #a5d6a7; }
.lu-mr-good { background: #2e7d32; color: #c8e6c9; }
.lu-mr-average { background: #4e342e; color: #d7ccc8; }
.lu-mr-poor { background: #b71c1c; color: #ffcdd2; }
.lu-icons {
    font-size: 0.65rem;
    margin-left: 2px;
}

.modal-commentary {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--bg-card-header);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}
.modal-commentary h3 {
    color: var(--gold);
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.modal-commentary p {
    margin: 6px 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-main);
}
.modal-commentary .comm-goal {
    color: var(--text-main);
    font-weight: 700;
    display: block;
    padding: 3px 0;
}
.modal-commentary .comm-card {
    color: #f5c518;
    display: block;
    font-size: 0.80rem;
}
.modal-commentary .comm-red {
    color: #e74c3c;
    font-weight: 600;
    display: block;
    padding: 2px 0;
}
.modal-commentary .comm-sub {
    color: var(--text-sub);
    display: block;
    font-size: 0.78rem;
    font-style: italic;
}
.modal-commentary .comm-injury {
    color: #e74c3c;
    display: block;
    font-size: 0.80rem;
    font-weight: 500;
    padding: 2px 0;
}
.modal-commentary .comm-nearmiss {
    color: #f39c12;
    display: block;
    font-size: 0.82rem;
    font-style: italic;
    padding: 2px 0;
}
.modal-commentary .comm-pen-goal {
    color: #2ecc71;
    display: block;
    font-size: 0.85rem;
    padding: 1px 0;
}
.modal-commentary .comm-pen-miss {
    color: #e67e22;
    display: block;
    font-size: 0.85rem;
    padding: 1px 0;
}
.modal-commentary .comm-pen-final {
    color: #f5c518;
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 6px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== MODAL LINEUPS ===== */
.modal-lineups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
    border-top: 1px solid var(--border-card);
    padding-top: 14px;
}
.modal-lineup-col {
    font-size: 0.76rem;
}
.modal-lineup-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    text-align: center;
    font-size: 0.82rem;
}
.modal-lineup-section {
    margin-bottom: 8px;
}
.modal-lineup-label {
    font-weight: 600;
    color: var(--text-card-header);
    margin-bottom: 3px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lu-player {
    display: block;
    padding: 2px 0;
    color: var(--text-main);
}
.lu-pos {
    display: inline-block;
    width: 30px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 3px;
    text-align: center;
    padding: 1px 3px;
    margin-right: 4px;
}
.lu-pos-G { background: #2d6a4f; color: #b7e4c7; }
.lu-pos-D { background: #1b3a6b; color: #a0c4ff; }
.lu-pos-M { background: #5a3e1b; color: #ffd97d; }
.lu-pos-F { background: #6b1b2a; color: #ffb3c1; }
.lu-rating {
    color: var(--text-card-header);
    font-size: 0.68rem;
    margin-left: 2px;
}
.lu-sub {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-sub);
    font-size: 0.74rem;
}
.lu-sub-min { color: var(--text-card-header); min-width: 28px; }
.lu-sub-in { color: #2ecc71; }
.lu-sub-out { color: #e74c3c; }

/* ===== FOOTER ===== */
footer {
    text-align: center;
    padding: 20px;
    color: var(--text-sub);
    font-size: 0.72rem;
    border-top: 1px solid var(--border-card);
    margin-top: 40px;
}
.footer-contact-link { color: var(--gold, #f0c040); text-decoration: underline; font-weight: 600; }
.footer-contact-link:hover { color: #ffd976; }
.footer-links a { white-space: nowrap; }
.footer-leetchi-link { color: var(--gold, #f0c040); text-decoration: none; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,215,0,.08); transition: background .15s; }
.footer-leetchi-link:hover { background: rgba(255,215,0,.18); }
.footer-thanks-link { color: var(--text-primary); text-decoration: none; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.06); transition: background .15s; }
.footer-thanks-link:hover { background: rgba(255,255,255,.14); }

/* Tooltip custom (remplace title="" natif) */
.cycy-tooltip {
    position: fixed;
    z-index: 11000;
    background: rgba(18, 22, 46, 0.97);
    color: #e0e6f0;
    border: 1px solid rgba(240, 192, 64, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-line;
    max-width: 380px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
}
.cycy-tooltip.visible { opacity: 1; transform: translateY(0); }

/* Flash de changement de rang (animation 1.2s) */
@keyframes rankUp   { 0%{background:rgba(46,204,113,.4);} 100%{background:transparent;} }
@keyframes rankDown { 0%{background:rgba(231,76,60,.4);} 100%{background:transparent;} }
.rank-flash-up   { animation: rankUp   1.2s ease-out; }
.rank-flash-down { animation: rankDown 1.2s ease-out; }

/* Daily tops sur accueil Bettor */
.bettor-tops-header { margin: 18px 0 12px; font-weight: 700; color: var(--gold); font-size: 1rem; text-align: center; }
.bettor-tops-section { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.tops-section-title { margin: 0 0 8px; color: var(--gold); font-size: .95rem; font-weight: 700; border-bottom: 1px solid var(--border-card); padding-bottom: 6px; }
.tops-hero { background: rgba(240,192,64,.12); border-left: 3px solid var(--gold); padding: 6px 10px; margin: 6px 0 10px; font-weight: 600; border-radius: 4px; }
.tops-line { margin: 4px 0; font-size: .9rem; line-height: 1.5; }
.tops-line.tops-empty { color: var(--text-muted); font-style: italic; font-size: .85rem; }
.email-status { font-size: .72rem; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.email-status-confirmed { background: rgba(46,204,113,.15); color: #2ecc71; border: 1px solid rgba(46,204,113,.4); }
.email-status-pending   { background: rgba(241,196,15,.15); color: #f1c40f; border: 1px solid rgba(241,196,15,.4); }
.email-status-expired   { background: rgba(231,76,60,.15);  color: #e74c3c; border: 1px solid rgba(231,76,60,.4); }
.bettor-invite-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: rgba(52,152,219,.12);
  border: 1px solid rgba(52,152,219,.4);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: .92rem;
}
.bettor-invite-banner button { margin-left: auto; }
.bettor-invite-banner button + button { margin-left: 4px; }
.tops-player { cursor: pointer; color: var(--text-main); padding: 2px 4px; border-radius: 4px; transition: background .15s; display: inline-flex; align-items: center; gap: 4px; }
.tops-player:hover { background: rgba(240,192,64,.15); }
.tops-player strong { color: var(--gold); }
.bettor-tops-empty { text-align: center; color: var(--text-secondary); font-size: .85rem; padding: 12px; background: var(--bg-card); border: 1px dashed var(--border-card); border-radius: 8px; margin: 18px 0; }

/* Bandeau "Pas d'email" sur accueil Bettor */
.bettor-no-email { background: rgba(243,156,18,.12); border: 1px solid rgba(243,156,18,.4); color: #f39c12; padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bettor-no-email-link { color: #f39c12; text-decoration: underline; font-weight: 600; cursor: pointer; }
.bettor-no-email-link:hover { color: #ffb84d; }

/* Avatar dans modale profil joueur */
.player-modal-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold, #f0c040); box-shadow: 0 2px 8px rgba(0,0,0,.3); flex-shrink: 0; }
.player-avatar-zoom { cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
.player-avatar-zoom:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(240,192,64,.4); }
.player-modal-extra { font-size: .78rem; color: var(--text-secondary, #aab); margin-top: 2px; }

/* Bloc "Pronostic vainqueur CDM" */
.champion-pick-box { background: linear-gradient(135deg, rgba(240,192,64,.15), rgba(240,192,64,.05)); border: 1px solid rgba(240,192,64,.4); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }

/* Badges dans modale profil */
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.badge-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 10px; padding: 10px; text-align: center; transition: transform 0.15s; }
.badge-card.unlocked { border-color: #f0c040; box-shadow: 0 0 8px rgba(240,192,64,.2); }
.badge-card.locked { opacity: .4; filter: grayscale(1); }
.badge-card:hover { transform: translateY(-2px); }
.badge-icon { font-size: 2rem; line-height: 1; }
.badge-label { font-size: .72rem; color: var(--text-main); margin-top: 4px; line-height: 1.2; }
.badge-progress { font-size: .7rem; color: var(--text-sub, #aab); margin-top: 4px; }

/* ===== DROPDOWN MENU (for group/round selection) ===== */
.dropdown-menu {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 200;
    min-width: 160px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.dropdown-item {
    padding: 8px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-main);
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== ANIMATIONS ===== */
.flash { animation: flash 0.6s; }
@keyframes flash {
    0%, 100% { background: transparent; }
    50% { background: rgba(240, 192, 64, 0.15); }
}
.goal-flash { animation: goalFlash 0.8s; }
@keyframes goalFlash {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #2ecc71; }
    100% { transform: scale(1); }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .rankings-container { grid-template-columns: 1fr; }
    header { padding: 10px 16px; }
    main { padding: 16px; }
    .groups-grid { grid-template-columns: 1fr; }
    .group-match { grid-template-columns: 80px 1fr 44px 1fr 90px; }
    .knockout-matches { grid-template-columns: 1fr; }
    .modal-lineups { grid-template-columns: 1fr; }
    .modal-stats { flex-direction: column; }
    .mc-table { font-size: 0.78rem; }
    .mc-table th, .mc-table td { padding: 5px 4px; }
}

/* ===== MOBILE PREVIEW MODE ===== */
.mobile-preview #appMain {
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    border-left: 2px solid var(--border-card);
    border-right: 2px solid var(--border-card);
    min-height: 100vh;
}
.mobile-preview .login-card { max-width: 90%; }
/* Force mobile styles in preview mode */
.mobile-preview .rankings-container { grid-template-columns: 1fr !important; }
.mobile-preview .groups-grid { grid-template-columns: 1fr !important; }
.mobile-preview .knockout-matches { grid-template-columns: 1fr !important; }
.mobile-preview .modal-lineups { grid-template-columns: 1fr !important; }
.mobile-preview header { padding: 8px 10px; gap: 6px; }
.mobile-preview .logo { font-size: 1.4rem; }
.mobile-preview .header-left { gap: 8px; }
.mobile-preview .header-title h1 { font-size: 1rem; }
.mobile-preview .header-title p { font-size: 0.7rem; }
.mobile-preview #langSelect { padding: 4px 6px; font-size: 0.75rem; }
.mobile-preview .controls-bar { padding: 8px 10px; gap: 6px; }
.mobile-preview .sim-controls { gap: 4px; }
.mobile-preview .btn { padding: 6px 10px; font-size: 0.72rem; gap: 4px; }
.mobile-preview .tabs { padding: 0 6px; }
.mobile-preview .tab { padding: 10px 12px; font-size: 0.75rem; }
.mobile-preview main { padding: 10px; }
.mobile-preview .group-match { grid-template-columns: 60px 1fr 38px 1fr; font-size: 0.75rem; }
.mobile-preview .gm-venue { display: none; }
.mobile-preview .schedule-match { grid-template-columns: 80px 1fr 42px 1fr; font-size: 0.78rem; }
.mobile-preview .sch-venue { display: none; }
.mobile-preview .modal-content { padding: 16px 12px; width: 95%; }
.mobile-preview .mc-table { font-size: 0.7rem; }
.mobile-preview .mc-table th, .mobile-preview .mc-table td { padding: 4px 3px; }
.mobile-preview .history-table { font-size: 0.75rem; }
.mobile-preview .ranking-table { font-size: 0.78rem; }
.mobile-preview .group-table { font-size: 0.78rem; }
.mobile-preview footer { font-size: 0.7rem; padding: 10px; }

/* ===== APP HIDDEN ===== */
.app-hidden { display: none !important; }

/* ===== BANDEAU INVITATION GROUPE (login screen) ===== */
.join-invite-block {
    background: linear-gradient(135deg, #ffd700, #f0a500);
    color: #1a1a2e;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: .88rem;
    text-align: center;
    line-height: 1.5;
}
.join-invite-block .join-invite-group {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
}
.join-invite-block .join-invite-sub {
    font-size: .78rem;
    opacity: .8;
}

/* ===== LOGIN SCREEN ===== */
.login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-body);
}
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 40px 36px;
    width: 380px;
    max-width: 90vw;
    text-align: center;
    box-shadow: var(--shadow-card);
}
.login-logo { font-size: 3.5rem; margin-bottom: 8px; }
.login-card h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 2px;
}
.login-subtitle {
    color: var(--text-card-header);
    font-size: 0.85rem;
    margin-bottom: 24px;
}
.login-lang-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
/* ===== TOASTS ===== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: auto;
    max-width: 320px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.toast-success { background: #27ae60; }
.toast.toast-error   { background: #e74c3c; }
.toast.toast-info    { background: #2980b9; }

.google-signin-wrap {
    margin-top: 8px;
}
.google-signin-host {
    display: flex;
    justify-content: center;
    min-height: 44px;
}
.google-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.google-divider::before,
.google-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-card);
}
.google-custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.google-custom-btn:hover:not(:disabled) {
    background: var(--bg-hover, rgba(255,255,255,0.07));
    border-color: #4285F4;
}
.google-custom-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.login-lang-bar select {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}
.theme-toggle-login {
    background: transparent;
    border: 1px solid var(--border-card);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-card);
}
.login-tab {
    flex: 1;
    padding: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-sub);
    transition: all 0.2s;
}
.login-tab.active {
    background: var(--bg-card-header);
    color: var(--gold);
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-form input {
    padding: 12px 14px;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.login-form input:focus {
    outline: none;
    border-color: var(--gold);
}
.login-btn {
    margin-top: 4px;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 700;
}
.login-error {
    color: #e74c3c;
    font-size: 0.78rem;
    min-height: 18px;
}
.forgot-link {
    color: var(--gold);
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.forgot-link:hover { opacity: 1; text-decoration: underline; }
.forgot-title {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.pw-rules {
    color: var(--text-sub);
    font-size: 0.72rem;
    margin: -4px 0 0 0;
    text-align: left;
}

/* ===== ADMIN MODAL ===== */
.admin-modal {
    max-width: 600px;
    width: 90vw;
}
.admin-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 16px;
}
.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    gap: 10px;
}
.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.admin-user-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-main);
}
.admin-user-meta {
    font-size: 0.72rem;
    color: var(--text-sub);
}
.admin-user-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--gold);
    color: #111;
    white-space: nowrap;
}
.admin-user-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.admin-user-actions button {
    padding: 5px 10px;
    font-size: 0.72rem;
    border-radius: 6px;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.admin-user-actions button:hover {
    background: var(--bg-card-header);
}
.admin-user-actions .btn-danger {
    border-color: #e74c3c;
    color: #e74c3c;
}
.admin-user-actions .btn-danger:hover {
    background: #e74c3c;
    color: #fff;
}

/* ===== USER BAR ===== */
.user-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    position: relative;
    z-index: 100;
}

/* --- Trigger button --- */
.user-menu-wrap { position: relative; }
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.user-menu-trigger:hover { background: var(--bg-hover); border-color: var(--gold); }
.user-menu-caret { font-size: 0.65rem; opacity: 0.7; transition: transform 0.2s; }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

/* --- Dropdown panel --- */
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    padding: 6px;
    z-index: 200;
    animation: fadeInDown .15s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.user-menu-item:hover { background: var(--bg-hover); }
.user-menu-separator {
    height: 1px;
    background: var(--border-card);
    margin: 4px 6px;
}
.user-menu-danger { color: #e74c3c; }
.user-menu-danger:hover { background: rgba(231,76,60,.12); }
/* Switcher comptes liés en haut du menu utilisateur */
.user-menu-linked-switch {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border-card);
  padding: 4px 0; margin-bottom: 4px;
  background: rgba(240,192,64,.06);
}
.user-menu-linked-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 14px;
  font-size: .88rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .15s;
}
.user-menu-linked-item:hover:not(:disabled) { background: rgba(240,192,64,.15); }
.user-menu-linked-item.is-current {
  font-weight: 700;
  color: #f0c040;
  cursor: default;
}

.user-display {
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold);
}

/* ===== HISTORY TABLE ===== */
.history-list { overflow-x: auto; margin-bottom: 20px; }
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.history-table th {
    background: var(--bg-card-header);
    color: var(--gold);
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid var(--border-card);
    white-space: nowrap;
}
.history-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-card);
    white-space: nowrap;
}
.history-table tr:hover td { background: rgba(240, 192, 64, 0.05); }
.history-table-pts td:nth-child(3) { color: var(--gold); font-size: 0.85rem; }
.history-table .top3 td { background: rgba(240, 192, 64, 0.08); }
.history-table .top3 td:first-child { font-weight: 700; color: var(--gold); }

.history-pts-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: var(--text-card-header);
}
.history-pts-info span {
    background: var(--bg-card);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-card);
}

.btn-del-sim {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.btn-del-sim:hover { opacity: 1; }
.btn-sm { font-size: 0.78rem; padding: 6px 14px; }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-input);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.theme-toggle:hover {
    border-color: var(--gold);
    background: var(--bg-hover);
}

@media (max-width: 600px) {
    header { padding: 8px 10px; gap: 6px; }
    .logo { font-size: 1.4rem; }
    .header-left { gap: 8px; }
    .header-title h1 { font-size: 1rem; }
    .header-title p { font-size: 0.7rem; }
    .header-right { gap: 4px; }
    #langSelect { padding: 4px 6px; font-size: 0.75rem; }
    .controls-bar { padding: 8px 10px; gap: 6px; }
    .sim-controls { gap: 4px; }
    .btn { padding: 6px 10px; font-size: 0.72rem; gap: 4px; }
    .btn-icon { font-size: 0.78rem; }
    .sim-status { font-size: 0.72rem; }
    .tabs { padding: 0 6px; gap: 0; -webkit-overflow-scrolling: touch; }
    .tab { padding: 10px 12px; font-size: 0.75rem; }
    main { padding: 10px; }
    .group-match { grid-template-columns: 60px 1fr 38px 1fr; font-size: 0.75rem; }
    .gm-meta { font-size: 0.68rem; }
    .gm-venue { display: none; }
    .schedule-match { grid-template-columns: 80px 1fr 42px 1fr; font-size: 0.78rem; }
    .sch-venue { display: none; }
    .modal-content { padding: 16px 12px; width: 95%; max-height: 90vh; border-radius: 8px; }
    .modal-lineups { grid-template-columns: 1fr; gap: 12px; }
    .lu-player { font-size: 0.72rem; }
    .modal-stats-container { font-size: 0.78rem; }
    .mc-controls { gap: 6px; }
    .mc-info-box { font-size: 0.82rem; padding: 10px 12px; }
    .mc-n-help { font-size: 0.78rem; padding: 6px 10px; }
    .mc-table { font-size: 0.7rem; }
    .mc-table th, .mc-table td { padding: 4px 3px; }
    .mc-bar-cell { min-width: 60px; }
    .history-table { font-size: 0.75rem; }
    .history-table th, .history-table td { padding: 5px 4px; }
    .ranking-table { font-size: 0.78rem; }
    .ranking-table th, .ranking-table td { padding: 5px 4px; }
    .group-table { font-size: 0.78rem; }
    .group-table th, .group-table td { padding: 4px 3px; }
    footer { font-size: 0.7rem; padding: 10px; }
}

/* ===== MONTE CARLO ===== */
.mc-info-box {
    background: rgba(240, 192, 64, 0.06);
    border: 1px solid rgba(240, 192, 64, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    line-height: 1.5;
    color: var(--text-main);
    font-size: 0.9rem;
}
.mc-info-box p { margin: 0; }
.mc-n-help {
    background: rgba(100, 140, 220, 0.08);
    border: 1px solid rgba(100, 140, 220, 0.2);
    border-radius: 6px;
    padding: 8px 14px;
    margin: 10px 0 16px;
    font-size: 0.83rem;
    color: var(--text-sub);
    line-height: 1.4;
}
.mc-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mc-controls label {
    color: var(--gold);
    font-weight: 600;
}
.mc-controls select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
}
.mc-progress {
    color: var(--text-sub);
    font-size: 0.85rem;
    margin-left: 8px;
}
.mc-table-wrap {
    overflow-x: auto;
}
.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mc-table th {
    background: var(--bg-card-header);
    color: var(--gold);
    padding: 8px 6px;
    text-align: center;
    border-bottom: 2px solid var(--border-card);
    white-space: nowrap;
}
.mc-table th:nth-child(2) { text-align: left; }
.mc-table td {
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-card);
}
.mc-table td:nth-child(2) { text-align: left; white-space: nowrap; }
.mc-table tr:hover { background: var(--bg-hover); }
.mc-top3 { background: rgba(240, 192, 64, 0.08); }
.mc-top3 td:first-child { color: var(--gold); font-weight: 700; }
.mc-top10 { background: rgba(240, 192, 64, 0.03); }
.mc-bar-cell {
    position: relative;
    min-width: 80px;
    text-align: left;
}
.mc-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(240,192,64,0.3), rgba(240,192,64,0.08));
    border-radius: 3px;
    z-index: 0;
}
.mc-bar-cell span {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: var(--gold);
    padding-left: 4px;
}

/* ===== LIVE SIM MODAL ===== */
.live-sim-modal { max-width: 680px; }
.live-header { text-align: center; margin-bottom: 8px; }
.live-header .live-round { color: var(--gold); font-weight: 600; font-size: 0.85rem; }
.live-header .live-date { color: var(--text-sub); font-size: 0.8rem; }
.live-score-display {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 12px 0; font-size: 1.1rem;
}
.live-score-display .live-team { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.live-score-display .live-goals {
    font-size: 2rem; font-weight: 900; color: var(--gold);
    min-width: 30px; text-align: center;
}
.live-speed-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px 0; font-size: 0.85rem; color: var(--text-sub);
}
.live-speed-btn {
    background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-input);
    border-radius: 6px; padding: 4px 12px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.live-speed-btn.active { background: var(--btn-primary-bg); color: #fff; border-color: var(--btn-primary-bg); }
.live-speed-btn:hover { background: var(--btn-primary-hover); color: #fff; }
.live-pause-btn {
    background: #e67e22; color: #fff; border: 1px solid #e67e22;
    border-radius: 6px; padding: 4px 14px; cursor: pointer; font-weight: 700; font-size: 1rem;
    margin-left: 8px; transition: background 0.2s;
}
.live-pause-btn:hover { background: #d35400; }
.live-pause-btn.hidden { display: none; }
.live-ticker {
    max-height: 260px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border-card);
    border-radius: 8px; padding: 8px; margin: 12px 0; background: var(--bg-card);
    font-size: 0.85rem; word-wrap: break-word; overflow-wrap: break-word;
}
.live-ticker-event {
    padding: 4px 6px; border-bottom: 1px solid var(--border-card);
    animation: tickerIn 0.3s ease-out;
    word-wrap: break-word; overflow-wrap: break-word;
}
.live-ticker-event:last-child { border-bottom: none; }
.live-ticker-event .tick-min { color: var(--gold); font-weight: 700; margin-right: 6px; }
.live-ticker-ht { color: var(--gold); font-weight: 700; text-align: center; padding: 6px; }
@keyframes tickerIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.live-minute-bar {
    display: flex; align-items: center; gap: 8px; margin: 8px 0;
}
.live-minute-track {
    flex: 1; height: 6px; background: var(--border-card); border-radius: 3px; overflow: hidden;
}
.live-minute-fill {
    height: 100%; background: var(--gold); transition: width 0.3s;
}
.live-minute-label { font-size: 0.8rem; color: var(--text-sub); min-width: 40px; text-align: right; }
.live-stats-mini {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 0.8rem;
    padding: 6px; background: var(--bg-card); border-radius: 6px; margin: 6px 0;
}
.live-stats-mini span { display: flex; justify-content: space-between; }
.live-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ===== SCOUTING MODAL ===== */
.scouting-modal { max-width: 560px; }
.scouting-title { color: var(--gold); font-size: 1.1rem; margin-bottom: 12px; text-align: center; }
.scouting-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
}
.scouting-box {
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: 8px; padding: 10px; text-align: center;
}
.scouting-box .scout-label { color: var(--text-sub); font-size: 0.8rem; margin-bottom: 2px; }
.scouting-box .scout-value { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.scouting-players {
    margin: 12px 0;
}
.scouting-player-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
    border-bottom: 1px solid var(--border-card);
}
.scouting-player-row:last-child { border-bottom: none; }
.scouting-player-row .sp-pos { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.scouting-player-row .sp-name { flex: 1; }
.scouting-player-row .sp-rating { color: var(--gold); font-weight: 700; }
.scouting-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* ===== HALF-TIME / IN-MATCH SUBS MODAL ===== */
.halftime-modal { max-width: 560px; }
.halftime-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.ht-sub-panel { margin: 10px 0; }
.ht-sub-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid var(--border-card);
}
.ht-sub-row:last-child { border-bottom: none; }
.ht-sub-row select {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-input); border-radius: 6px;
    padding: 4px 8px; font-size: 0.85rem;
}
.ht-sub-add {
    background: var(--bg-input); border: 1px dashed var(--border-input);
    border-radius: 6px; padding: 6px 14px; cursor: pointer;
    color: var(--text-sub); font-size: 0.85rem; margin-top: 6px;
}
.ht-sub-add:hover { color: var(--gold); border-color: var(--gold); }

/* ===== ACHIEVEMENTS MODAL ===== */
.achievements-modal { max-width: 640px; }
.achievements-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; margin: 12px 0;
}
.achievement-card {
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: 10px; padding: 12px 8px; text-align: center;
    transition: transform 0.2s;
}
.achievement-card.unlocked {
    border-color: var(--gold); background: rgba(240,192,64,0.06);
}
.achievement-card.locked { opacity: 0.45; filter: grayscale(0.6); }
.achievement-card:hover { transform: translateY(-2px); }
.achievement-icon { font-size: 2rem; margin-bottom: 4px; }
.achievement-name { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
.achievement-desc { font-size: 0.75rem; color: var(--text-sub); }

/* ===== PRESS CONFERENCE MODAL ===== */
.press-modal { max-width: 520px; }
.press-question {
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: 8px; padding: 12px; margin: 10px 0;
}
.press-question-text {
    font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.press-question-text::before { content: "🎤"; }
.press-intro {
    background: rgba(240,192,64,.1);
    border-left: 3px solid var(--gold, #f0c040);
    padding: 10px 14px;
    margin: 8px 0 14px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-main);
    border-radius: 0 6px 6px 0;
}

/* Mini-jeu tirs au but tactique */
.pen-shooter { text-align: center; font-size: 1.05rem; margin-bottom: 12px; }
.pen-hint { text-align: center; font-size: .82rem; color: var(--text-sub, #aab); margin: 8px 0 6px; }
.pen-zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.pen-zone-btn { padding: 14px 8px; background: var(--bg-input); border: 2px solid var(--border-card); border-radius: 8px; color: var(--text-main); cursor: pointer; font-size: .85rem; font-weight: 600; transition: all .15s; }
.pen-zone-btn:hover { border-color: var(--gold, #f0c040); }
.pen-zone-btn.selected { background: rgba(240,192,64,.25); border-color: var(--gold, #f0c040); color: #fff; }
.pen-pow-row, .pen-esprit-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.pen-pow-btn, .pen-esp-btn { padding: 8px 14px; background: var(--bg-input); border: 1px solid var(--border-card); border-radius: 20px; color: var(--text-main); cursor: pointer; font-size: .82rem; transition: all .15s; flex: 1; min-width: 80px; }
.pen-pow-btn.selected, .pen-esp-btn.selected { background: rgba(240,192,64,.2); border-color: var(--gold, #f0c040); font-weight: 700; }
.pen-result { text-align: center; font-size: 2.2rem; font-weight: 800; padding: 22px 12px; border-radius: 10px; margin: 10px 0; }
.pen-result-goal { background: rgba(46,204,113,.2); color: #2ecc71; animation: penPulse .8s; }
.pen-result-saved { background: rgba(52,152,219,.2); color: #3498db; }
.pen-result-missed { background: rgba(231,76,60,.2); color: #e74c3c; }
.pen-score { text-align: center; font-size: 1.3rem; margin: 14px 0; color: var(--gold, #f0c040); }
@keyframes penPulse { 0%{transform:scale(.85);opacity:0;} 50%{transform:scale(1.1);} 100%{transform:scale(1);opacity:1;} }
.press-answers { display: flex; flex-direction: column; gap: 6px; }
.press-answer-btn {
    background: var(--bg-input); border: 1px solid var(--border-input);
    border-radius: 6px; padding: 8px 12px; cursor: pointer;
    color: var(--text-main); text-align: left; font-size: 0.85rem;
    transition: border-color 0.2s;
}
.press-answer-btn:hover { border-color: var(--gold); color: var(--gold); }
.press-answer-btn.selected { border-color: var(--gold); background: rgba(240,192,64,0.1); color: var(--gold); }
.press-submit { display: flex; justify-content: center; margin-top: 12px; }

/* ===== MOTM (Man of the Match) ===== */
.motm-banner {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    background: linear-gradient(135deg, rgba(240,192,64,0.15), rgba(240,192,64,0.04));
    border: 1px solid var(--gold); border-radius: 10px;
    padding: 12px 16px; margin: 12px 0;
}
.motm-star { font-size: 2rem; }
.motm-info { text-align: left; }
.motm-label { font-size: 0.75rem; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.motm-name { font-size: 1.1rem; font-weight: 800; }
.motm-rating-badge { font-size: 1.3rem; font-weight: 900; color: var(--gold); }

/* ===== TOP SCORERS LIVE PANEL ===== */
.top-scorers-modal { max-width: 420px; }
.top-scorers-list { margin: 8px 0; }
.ts-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
    border-bottom: 1px solid var(--border-card);
}
.ts-row:last-child { border-bottom: none; }
.ts-rank { color: var(--gold); font-weight: 700; min-width: 24px; text-align: center; }
.ts-flag { width: 20px; }
.ts-name { flex: 1; }
.ts-goals { font-weight: 700; color: var(--gold); min-width: 24px; text-align: center; }

/* ===== NARRATION / DRAMATIC TEXT ===== */
.narration-box {
    background: rgba(240,192,64,0.06); border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 10px 0;
    font-style: italic; color: var(--text-main); font-size: 0.9rem;
    animation: narrateIn 0.5s ease;
}
@keyframes narrateIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

/* ===== FORMATION PICKER ===== */
.formation-bar {
    display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap;
}
.formation-btn {
    background: var(--bg-input); border: 1px solid var(--border-input);
    border-radius: 6px; padding: 4px 10px; cursor: pointer;
    color: var(--text-main); font-size: 0.85rem; font-weight: 600;
}
.formation-btn.active { background: var(--btn-primary-bg); color: #fff; border-color: var(--btn-primary-bg); }
.formation-btn:hover { border-color: var(--gold); }

/* ===== TACTICAL PANEL ===== */
.tactical-panel { margin: 10px 0; }
.tactic-row {
    display: flex; align-items: center; gap: 10px; margin: 6px 0;
}
.tactic-label { min-width: 80px; font-size: 0.85rem; color: var(--text-sub); }
.tactic-slider { flex: 1; accent-color: var(--gold); }
.tactic-value { min-width: 40px; text-align: center; font-weight: 600; font-size: 0.85rem; color: var(--gold); }

/* ===== SET-PIECE TAKERS ===== */
.setpiece-panel { margin: 8px 0; }
.setpiece-row {
    display: flex; align-items: center; gap: 8px; margin: 4px 0;
}
.setpiece-row label { min-width: 100px; font-size: 0.85rem; color: var(--text-sub); }
.setpiece-row select {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-input); border-radius: 6px;
    padding: 4px 8px; font-size: 0.85rem; flex: 1;
}

/* ===== GOAL FLASH ANIMATION ===== */
@keyframes goalFlash {
    0% { transform: scale(1); color: var(--gold); }
    30% { transform: scale(1.8); color: #2ecc71; text-shadow: 0 0 20px rgba(46,204,113,0.8); }
    60% { transform: scale(1.2); color: #f1c40f; text-shadow: 0 0 15px rgba(241,196,15,0.6); }
    100% { transform: scale(1); color: var(--gold); text-shadow: none; }
}
.goal-flash { animation: goalFlash 1.2s ease-out; }
@keyframes scoreShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.score-shake { animation: scoreShake 0.5s ease; }
.ticker-goal { background: rgba(46,204,113,0.08); border-left: 3px solid #2ecc71; font-weight: 600; }
.ticker-red { background: rgba(231,76,60,0.08); border-left: 3px solid #e74c3c; }
.ticker-nearmiss { background: rgba(241,196,15,0.08); border-left: 3px solid #f1c40f; font-style: italic; }
.ticker-pen-scored { color: #2ecc71; font-weight: 600; }
.ticker-pen-missed { color: #e74c3c; font-weight: 600; }
.pen-final-score { font-size: 0.8rem; color: var(--text-sub); text-align: center; width: 100%; margin-top: 4px; }
.pen-running-score { font-size: 0.95rem; color: #e8c64a; text-align: center; width: 100%; margin-top: 6px; font-weight: 600; letter-spacing: 0.5px; }

/* ===== EVENT PAUSE PANEL ===== */
.event-pause-panel {
    background: var(--bg-card); border: 2px solid var(--gold);
    border-radius: 10px; padding: 14px; margin: 8px 0;
    animation: pauseIn 0.3s ease;
}
@keyframes pauseIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.event-pause-header {
    text-align: center; font-size: 1.2rem; font-weight: 900;
    padding: 8px; border-radius: 6px; margin-bottom: 8px;
}
.event-pause-header.ep-goal { background: rgba(46,204,113,0.15); color: #2ecc71; }
.event-pause-header.ep-card { background: rgba(231,76,60,0.15); color: #e74c3c; }
.event-pause-header.ep-yellow { background: rgba(241,196,15,0.18); color: #f1c40f; }
.event-pause-header.ep-pause { background: rgba(230,126,34,0.18); color: #e67e22; }
.event-pause-header.ep-injury { background: rgba(231,76,60,0.12); color: #ff8b7a; }
.event-pause-detail { text-align: center; font-size: 0.95rem; margin-bottom: 10px; color: var(--text-main); }
.ep-section { margin: 10px 0; padding: 8px; background: var(--bg-main); border-radius: 6px; }
.ep-section-title { font-weight: 700; font-size: 0.85rem; color: var(--gold); margin-bottom: 6px; }
.ep-sub-row {
    display: flex; align-items: center; gap: 6px; margin: 6px 0;
}
.ep-sub-row select {
    background: var(--bg-input); color: var(--text-main);
    border: 1px solid var(--border-input); border-radius: 6px;
    padding: 4px 6px; font-size: 0.8rem; flex: 1;
}
.ep-sub-done { font-size: 0.82rem; color: var(--text-sub); padding: 2px 0; }
.ep-resume { width: 100%; margin-top: 10px; font-size: 1rem; }

/* ===== HALF-TIME FATIGUE DISPLAY ===== */
.ht-xi-fatigue { margin: 10px 0; }
.ht-xi-title { font-weight: 700; font-size: 0.85rem; color: var(--gold); margin-bottom: 6px; }
.ht-xi-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 4px;
    border-bottom: 1px solid var(--border-card); font-size: 0.82rem;
}
.ht-xi-row:last-child { border-bottom: none; }
.ht-xi-row.ht-xi-subbed { opacity: 0.4; text-decoration: line-through; }
.ht-xi-row.ht-xi-off { opacity: 0.3; text-decoration: line-through; pointer-events: none; background: rgba(231,76,60,0.08); }
.ht-xi-name { flex: 1; }
.ht-xi-rat { color: var(--gold); font-weight: 700; min-width: 24px; text-align: center; }
.ht-xi-stam { min-width: 50px; text-align: right; font-weight: 600; }
.ht-xi-stam.stam-ok { color: #2ecc71; }
.ht-xi-stam.stam-med { color: #f39c12; }
.ht-xi-stam.stam-low { color: #e74c3c; }
.ht-tactics { margin: 8px 0; padding: 8px; background: var(--bg-main); border-radius: 6px; }

/* ===== SCOUTING ENHANCEMENTS ===== */
.scout-path { margin: 10px 0; }
.scout-path-title { font-weight: 700; font-size: 0.85rem; color: var(--gold); margin-bottom: 6px; }
.scout-path-row { font-size: 0.82rem; padding: 3px 0; border-bottom: 1px solid var(--border-card); }
.scout-path-row:last-child { border-bottom: none; }
.scout-coach-warn {
    background: rgba(241,196,15,0.1); border: 1px solid var(--gold);
    border-radius: 8px; padding: 10px; margin: 8px 0;
    text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--gold);
}

/* ===== PENALTY ORDER PICKER ===== */
.pen-order-hint {
    text-align: center; font-size: 0.8rem; color: var(--text-sub);
    margin-bottom: 8px; font-style: italic;
}
.pen-order-list { margin: 8px 0; }
.pen-order-row {
    display: flex; align-items: center; gap: 6px; padding: 5px 4px;
    border-bottom: 1px solid var(--border-card); font-size: 0.85rem;
}
.pen-order-row:last-child { border-bottom: none; }
.pen-order-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gold); color: #1a1a2e; font-weight: 900;
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.pen-order-name { flex: 1; font-weight: 600; }
.pen-order-rat { color: var(--gold); font-weight: 700; min-width: 24px; }
.pen-order-btns { display: flex; gap: 2px; }
.pen-mv { width: 28px; height: 24px; font-size: 0.7rem; padding: 0; }

/* ===== GROUPES ===== */
.grp-section { margin-bottom: 28px; }
.grp-section h3 { color: var(--gold); font-size: 1rem; margin: 0 0 12px; }
.grp-section h4 { font-size: .85rem; opacity: .7; margin: 10px 0 6px; }

.grp-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px;
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: 10px; margin-bottom: 8px;
}
.grp-card.grp-invite  { border-color: #3498db; }
.grp-card.grp-pending { border-color: #f39c12; opacity: .85; }

.grp-card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.grp-card-info strong { font-size: .95rem; }
.grp-meta  { font-size: .78rem; color: var(--text-secondary); }
.grp-desc  { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-actions { display: flex; gap: 6px; flex-shrink: 0; }

.grp-badge-manager { background: #f39c12; color: #000; font-size: .7rem; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.grp-badge-member  { background: #2ecc71; color: #000; font-size: .7rem; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.grp-pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 10px;
  background: #e74c3c; color: #fff;
  font-size: .75rem; font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(231,76,60,.4);
  animation: pendingPulse 2s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(231,76,60,.4); }
  50%      { box-shadow: 0 2px 10px rgba(231,76,60,.7); }
}

.notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #e74c3c; color: #fff; font-size: .65rem; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    margin-left: 6px; vertical-align: middle; line-height: 1;
}

.grp-member-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); gap: 8px;
}
.grp-members-wrap { max-height: 70vh; overflow-y: auto; }

/* ---- Bettor Home ---- */
.bettor-home { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 24px; max-width: 640px; margin: 0 auto; }
.bettor-home-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bettor-home-trophy { font-size: 4rem; line-height: 1; }
.bettor-home-title { font-size: 1.6rem; font-weight: 700; color: var(--accent); margin: 0; }
.bettor-home-group { font-size: 1rem; color: var(--text-secondary); margin: 0; }
.bettor-home-group strong { color: var(--text-primary); font-size: 1.05rem; }
.bettor-home-group-sel { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 6px; padding: 4px 8px; color: var(--text-primary); font-size: 1rem; font-weight: 600; margin-left: 4px; cursor: pointer; }
.bettor-home-test-phase { background: rgba(243,156,18,.12); border-left: 4px solid #f39c12; padding: 10px 14px; border-radius: 6px; font-size: .95rem; color: var(--text-primary); margin-bottom: 14px; text-align: left; }
.bettor-home-msg { background: rgba(255,255,255,.06); border-radius: 12px; padding: 20px 24px; text-align: center; font-size: .98rem; line-height: 1.7; color: var(--text-secondary); }
.bettor-home-admin-msg { white-space: pre-wrap; text-align: left; margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-primary); }
.admin-site-msg { background: rgba(255,255,255,.04); border: 1px solid var(--border-card); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.admin-site-msg > summary { cursor: pointer; font-weight: 600; padding: 4px 0; user-select: none; }
.admin-site-msg[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--border-card); padding-bottom: 8px; }
.bettor-home-coming-soon { display: flex; align-items: center; gap: 10px; background: rgba(39,174,96,.12); border: 1px solid rgba(39,174,96,.3); border-radius: 10px; padding: 14px 20px; font-size: .9rem; color: #27ae60; }
.bettor-home-soon-icon { font-size: 1.3rem; }

/* ================================================================
   MODE-BASED VISIBILITY (driven by body class set by applyModeUI)
   ================================================================ */

/* --- MODE SIMULATEUR --- */
/* Les boutons joueur sont cachés via JS (app-hidden). Monte Carlo et bettorHome visibles selon applyModeUI. */
body.mode-sim #btnSimToMyMatch,
body.mode-sim #btnPrepareMatch,
body.mode-sim #btnAchievements,
body.mode-sim #btnTopScorersLive { display: none !important; }

/* --- MODE JOUEUR --- */
body.mode-player #btnSimAll,
body.mode-player #btnSimMatchday,
body.mode-player #btnSimGroup,
body.mode-player #btnSimRound { display: none !important; }
body.mode-player .tab[data-tab="montecarlo"] { display: none !important; }
body.mode-player .tab[data-tab="bettorHome"] { display: none !important; }

/* --- MODE PARIEUR --- */
/* Masque toute la barre de contrôles (boutons sim + classement FIFA) */
body.mode-bettor .sim-controls { display: none !important; }
body.mode-bettor .ranking-status { display: none !important; }
/* Masque uniquement Historique et Monte-Carlo */
body.mode-bettor .tab[data-tab="history"],
body.mode-bettor .tab[data-tab="montecarlo"] { display: none !important; }
/* S'assure que les onglets Accueil / Pronostics / Règlement sont visibles */
body.mode-bettor .tab[data-tab="bettorHome"],
body.mode-bettor .tab[data-tab="bettorPreds"],
body.mode-bettor .tab[data-tab="bettorRules"] { display: inline-flex !important; }

/* ---- Bettor Rules ---- */
.bettor-rules { max-width: 720px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 28px; }
.bettor-rules-title { font-size: 1.4rem; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.bettor-rules-section { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 20px 24px; }
.bettor-rules-section-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 10px; }
.bettor-rules-body p { margin: 0 0 10px; color: var(--text-secondary); line-height: 1.65; font-size: .93rem; }
.bettor-rules-body h4 { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin: 18px 0 8px; }
.bettor-rules-body ol { padding-left: 20px; color: var(--text-secondary); font-size: .93rem; line-height: 1.8; margin: 0; }
.rules-formula { background: rgba(var(--accent-rgb,52,152,219),.12); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 16px; font-family: monospace; font-size: .9rem; color: var(--text-primary); margin: 10px 0; }
.rules-example { background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px 14px; font-size: .88rem; color: var(--text-secondary); line-height: 1.7; margin: 8px 0; }
.rules-note { color: #f39c12 !important; font-size: .87rem !important; font-style: italic; }
.rules-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .88rem; }
.rules-table th { background: rgba(255,255,255,.07); color: var(--text-primary); font-weight: 600; padding: 8px 12px; text-align: left; }
.rules-table td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text-secondary); }
.rules-table tr:last-child td { border-bottom: none; }
.rules-table td:last-child { font-weight: 700; color: var(--accent); }

/* ---- Bettor Predictions ---- */
.bettor-preds { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.bettor-preds-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.bettor-preds-linked-switch {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(240,192,64,.08);
  border: 1px solid rgba(240,192,64,.3);
  border-radius: 8px;
  flex-wrap: wrap;
}
.bettor-preds-linked-switch select {
  background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; color: var(--text-primary);
  padding: 5px 10px; font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.bettor-preds-title { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin: 0; }
.bettor-preds-filter { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.bettor-preds-filter select { background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: var(--text-primary); padding: 6px 10px; font-size: .88rem; cursor: pointer; }
.bettor-preds-phase { margin-bottom: 28px; }
.bettor-preds-phase-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 10px; padding: 4px 0 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pred-match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; margin-bottom: 8px; transition: border-color .2s; }
.pred-match-row:hover { border-color: rgba(255,255,255,.14); }
.pred-match-row.locked { opacity: .6; pointer-events: none; }
.pred-match-row.finished { border-color: rgba(39,174,96,.2); }
.pred-match-row.live { border-color: rgba(231,76,60,.25); }
.pred-comp-badge { font-size: .65rem; font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb,52,152,219),.12); border: 1px solid rgba(var(--accent-rgb,52,152,219),.25); border-radius: 4px; padding: 1px 6px; margin-bottom: 3px; display: block; text-align: center; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; align-self: center; }
.pred-team { display: flex; align-items: center; gap: 8px; font-size: .93rem; font-weight: 600; color: var(--text-primary); }
.pred-team.away { flex-direction: row-reverse; }
.pred-team-flag { font-size: 1.1rem; }
.pred-team-flag-img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.rank-flag-img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.15); margin-right: 2px; }
/* Forcer le rendu sombre sur toutes les combobox (normal + focus + options ouvertes) */
select, select:focus, select:hover, select:active {
  background-color: var(--bg-input, #1a1f3a);
  color: var(--text-main, #e0e6f0);
  color-scheme: dark;
}
select option { background-color: var(--bg-card, #12162e); color: var(--text-main, #e0e6f0); }
select option:checked, select option:hover { background-color: var(--bg-card-header, #1e2550); color: #fff; }
.bettor-no-group-banner { background: rgba(243,156,18,.15); border: 1px solid rgba(243,156,18,.4); color: #f39c12; padding: 8px 14px; border-radius: 8px; margin-bottom: 12px; font-size: .88rem; }
/* Lien cagnotte communautaire (Leetchi) — discret sous les boutons de mode */
.bmc-link { display: inline-block; margin-top: 20px; padding: 8px 14px; font-size: 0.82rem; color: #333; background: linear-gradient(135deg, #ffd700, #ffaa00); border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.bmc-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255,180,0,0.4); color: #000; }
/* Lien Remerciements — encore plus discret, à droite */
.thanks-link { display: inline-block; margin-top: 20px; margin-left: 10px; padding: 8px 14px; font-size: 0.82rem; color: var(--text-primary); background: rgba(255,255,255,.06); border: 1px solid var(--border-card); border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform 0.15s, background 0.15s; }
.thanks-link:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); }
/* Modale Remerciements — z-index > 9000 pour passer au-dessus de mode-select-overlay */
#thanksModal { z-index: 9500; }
.thanks-modal { max-width: 520px; width: 92vw; padding: 24px 28px; }
.thanks-modal .thanks-title { margin: 0 0 18px; font-size: 1.4rem; text-align: center; }
.thanks-modal .thanks-body { font-size: 1rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 18px; }
.thanks-modal .thanks-body em { color: var(--gold, #ffd700); font-style: italic; }
.thanks-modal .thanks-body strong { color: var(--gold, #ffd700); }
.thanks-modal .thanks-close-btn { display: block; margin: 16px auto 0; min-width: 120px; }
/* Bandeau "Installer l'appli" — visible uniquement en mode téléphone */
.install-app-banner { display: none; margin: 0 0 18px; text-align: center; }
.install-app-link { background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.4); color: #f0c040; padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.install-app-link:hover { background: rgba(240,192,64,0.2); }
@media (max-width: 768px) { .install-app-banner:not(.app-hidden) { display: block; } }
.mobile-preview .install-app-banner:not(.app-hidden) { display: block; }
.bettor-no-group-link { color: #f39c12; text-decoration: underline; cursor: pointer; font-weight: 600; }
.bettor-no-group-link:hover { color: #ffb84d; }
.pred-team-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; vertical-align: middle; }
.pred-team-name { font-size: .88rem; }
.pred-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.pred-date { font-size: .72rem; color: var(--text-muted); text-align: center; white-space: nowrap; }
.pred-score-inputs { display: flex; align-items: center; gap: 6px; }
.pred-score-input { width: 38px; height: 38px; text-align: center; font-size: 1.1rem; font-weight: 700; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); border-radius: 8px; color: var(--text-primary); outline: none; transition: border-color .15s; -moz-appearance: textfield; }
.pred-score-input::-webkit-outer-spin-button,
.pred-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pred-score-input:focus { border-color: var(--accent); }
.pred-score-sep { font-size: 1.1rem; font-weight: 700; color: var(--text-muted); }
.pred-score-stepper { display: flex; align-items: center; gap: 4px; }
/* Mode "saisie clavier seulement" : on cache les boutons +/- */
.bettor-preds.no-steppers .pred-score-btn { display: none; }
.bettor-preds.no-steppers .pred-score-stepper { gap: 0; }
/* Toggle pour activer/désactiver les boutons +/- */
.pred-steppers-toggle {
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pred-steppers-toggle:hover { background: rgba(240,192,64,.12); border-color: #f0c040; }
.pred-score-btn {
  width: 28px; height: 38px;
  border-radius: 8px;
  border: 1.5px solid rgba(240,192,64,.45);
  background: rgba(240,192,64,.12);
  color: #f0c040;                            /* doré pour bien se distinguer */
  font-size: 1.15rem; font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pred-score-btn:hover { background: rgba(240,192,64,.25); border-color: #f0c040; color: #ffd770; }
.pred-score-btn:active { transform: scale(.94); background: rgba(240,192,64,.4); color: #1a1a2e; }
[data-theme="light"] .pred-score-btn { background: #fff5d8; border-color: #d9a13a; color: #b27a16; }
[data-theme="light"] .pred-score-btn:hover { background: #ffe8a3; color: #8a5d10; }
@media (max-width: 640px) {
  .pred-score-btn { width: 32px; height: 40px; font-size: 1.25rem; }
  .pred-score-input { width: 42px; height: 40px; font-size: 1.15rem; }
  /* Sur mobile portrait : stack vertical pour éviter le chevauchement
     entre nom d'équipe et boutons +/- (ex: "Toulouse" qui passait par-dessus). */
  .pred-match-row { grid-template-columns: 1fr; gap: 6px; }
  .pred-team { justify-content: center; }
  .pred-team.away { flex-direction: row; }
  .pred-team-name { font-size: .95rem; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pred-center { order: 2; }     /* score au milieu */
  .pred-team:first-child { order: 1; }
  .pred-team.away         { order: 3; }
}
/* Tablette (641-1024px) : taille intermédiaire, layout grid conservé mais plus aéré */
@media (min-width: 641px) and (max-width: 1024px) {
  .pred-score-btn { width: 32px; height: 40px; font-size: 1.25rem; }
  .pred-score-input { width: 42px; height: 40px; font-size: 1.15rem; }
  .pred-steppers-toggle { padding: 8px 14px; font-size: 1rem; min-width: 44px; min-height: 44px; }
}
/* Toggle pred steppers : taille tactile (≥44×44 sur mobile/tablette) */
@media (max-width: 1024px) {
  .pred-steppers-toggle { min-height: 44px; min-width: 44px; }
}
.pred-saved-badge { font-size: .68rem; color: #2ecc71; font-weight: 600; height: 14px; }
.pred-status-badge { font-size: .72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pred-status-live { background: rgba(231,76,60,.18); color: #e74c3c; }
.pred-status-finished { background: rgba(39,174,96,.15); color: #27ae60; }
.pred-status-pending { background: rgba(243,156,18,.18); color: #f39c12; font-weight: 700; }
.mr-score.pending { color: #f39c12; }
.pred-final-score { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.pred-points-badge { font-size: .75rem; color: #f39c12; font-weight: 700; }
.pred-match-info { font-size: .7rem; color: var(--text-muted); }
.bettor-preds-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); }
/* Matchs tab — results table */
.bettor-matches-table-wrap { overflow-x: auto; margin-top: 12px; }
.bettor-matches-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bettor-matches-table thead tr { border-bottom: 2px solid rgba(255,255,255,.12); }
.bettor-matches-table thead th { padding: 8px 10px; text-align: center; color: var(--text-muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; cursor: default; }
.bettor-matches-table thead th[title] { cursor: help; }
.bettor-matches-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
.bettor-matches-table tbody tr:hover { background: rgba(255,255,255,.04); }
.bettor-match-result-row.live { border-left: 3px solid rgba(231,76,60,.5); }
.bettor-match-result-row.finished { border-left: 3px solid rgba(39,174,96,.25); }
/* Colonnes — vertical-align: top sur toutes : score / prono / pts partent du même niveau */
.bettor-matches-table td { vertical-align: top; padding-top: 12px; }
.bettor-matches-table .col-match { padding: 12px 12px 10px; width: 40%; }
.bettor-matches-table .col-score { padding: 12px 10px 10px; text-align: center; white-space: nowrap; }
.bettor-matches-table .col-pred  { padding: 12px 10px 10px; text-align: center; white-space: nowrap; }
.bettor-matches-table .col-pts   { padding: 12px 10px 10px; text-align: center; white-space: nowrap; font-weight: 600; color: var(--text-muted); }
.col-pts.pts-positive { color: #f39c12; }
.col-pts.pts-zero { color: var(--text-muted); opacity: .6; }
/* Cellule match : team1 vs team2 sur 1 ligne, date en sous-titre */
.mr-team { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.mr-vs   { color: var(--text-muted); font-size: .8rem; margin: 0 2px; }
.mr-date { display: block; font-size: .65rem; color: var(--text-muted); margin-top: 3px; }
/* Cellule score : score sur 1 ligne, badge dessous (style Pronostics) */
.bettor-matches-table .col-score .mr-score { display: block; margin-bottom: 5px; }
.bettor-matches-table .col-score .pred-status-badge { display: inline-block; }
/* Scores */
.mr-score { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.mr-score.live { color: #e74c3c; }
.mr-score.finished { color: var(--text-primary); }
.mr-score.pred { color: var(--text-muted); }
.mr-no-pred { color: var(--text-muted); opacity: .5; }
.col-hint { font-size: .68rem; opacity: .55; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.blink { animation: blink 1.4s ease-in-out infinite; }
/* Admin matches panel */
.admin-matches-section { margin-top: 24px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; }
.admin-matches-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; }
.admin-match-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-match-filters select { background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: var(--text-primary); padding: 6px 10px; font-size: .84rem; cursor: pointer; }
.admin-match-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.admin-match-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.admin-match-label { font-size: .82rem; color: var(--text-muted); }
.admin-match-teams { font-size: .93rem; font-weight: 700; color: var(--text-primary); }
.admin-match-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-match-input { width: 50px; height: 32px; text-align: center; font-size: .9rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: var(--text-primary); outline: none; -moz-appearance: textfield; }
.admin-match-input::-webkit-outer-spin-button,
.admin-match-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.admin-match-team-input { width: 70px; height: 32px; text-align: center; font-size: .82rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: var(--text-primary); outline: none; padding: 0 4px; }

/* ============================================================
   MATCH MANAGEMENT MODAL
   ============================================================ */
.mm-modal { max-width: 740px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.mm-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 0; }
.mm-tab { background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--text-secondary); font-size: .88rem; font-weight: 600; padding: 8px 16px; cursor: pointer; border-radius: 6px 6px 0 0; transition: color .15s, border-color .15s, background .15s; }
.mm-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.04); }
.mm-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(255,255,255,.04); }
.mm-content { flex: 1; overflow-y: auto; padding: 16px 0 4px; }
/* Cards */
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mm-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mm-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-card-label { font-size: .88rem; color: var(--text-primary); font-weight: 600; flex: 1; min-width: 0; }
.mm-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-field-lbl { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.mm-sep { font-size: 1rem; color: var(--text-muted); font-weight: 700; }
/* Inputs */
.mm-input { width: 48px; height: 34px; text-align: center; font-size: .95rem; font-weight: 700; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); border-radius: 7px; color: var(--text-primary); outline: none; -moz-appearance: textfield; }
.mm-input:focus { border-color: var(--accent); }
.mm-input::-webkit-outer-spin-button, .mm-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mm-input-sm { width: 60px !important; }
.mm-text-input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: var(--text-primary); font-size: .88rem; padding: 6px 10px; outline: none; width: 100%; box-sizing: border-box; }
.mm-text-input:focus { border-color: var(--accent); }
.mm-select { background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: var(--text-primary); padding: 6px 10px; font-size: .88rem; cursor: pointer; width: 100%; }
/* Form layout */
.mm-form { display: flex; flex-direction: column; gap: 10px; }
.mm-form-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 8px; }
.mm-lbl { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.mm-optional { font-size: .75rem; font-weight: 400; color: var(--text-muted); opacity: .7; }
.mm-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.mm-status { font-size: .82rem; font-weight: 600; }
/* Edit grid */
.mm-edit-card .mm-edit-grid { display: grid; grid-template-columns: 100px 1fr 100px 1fr; gap: 6px 10px; align-items: center; }
/* Badges */
.mm-badge { font-size: .72rem; padding: 2px 7px; border-radius: 8px; font-weight: 700; white-space: nowrap; }
.mm-badge-live { background: rgba(231,76,60,.18); color: #e74c3c; }
.mm-badge-done { background: rgba(39,174,96,.15); color: #27ae60; }
.mm-badge-sched { background: rgba(149,165,166,.12); color: #95a5a6; }
/* Misc */
.mm-empty { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: .9rem; }
.mm-error { color: #e74c3c; font-size: .88rem; }
.mm-delete-btn { margin-left: auto; }
.mm-team-grid { grid-template-columns: 60px 1fr 60px 1fr !important; }
@media (max-width: 520px) {
  .mm-form-row { grid-template-columns: 1fr; }
  .mm-team-grid { grid-template-columns: 60px 1fr !important; }
  .mm-edit-card .mm-edit-grid { grid-template-columns: 80px 1fr; }
}

/* ---- WC2026 sub-tabs (bettor mode) — pills style ---- */
.wc-subtabs-nav {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  overflow-x: auto;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-controls);
  flex-wrap: wrap;
}
.wc-subtab {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  color: var(--text-muted);
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 20px;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  outline: none;
}
.wc-subtab:hover {
  background: rgba(255,255,255,.12);
  color: var(--text-main);
  border-color: rgba(255,255,255,.25);
}
.wc-subtab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(52,152,219,.35);
}
#wc2026ContentView { padding-top: 4px; }

/* ---- Classement des Parieurs ---- */
.bettor-rank-page { padding: 20px; max-width: 960px; margin: 0 auto; }
.bettor-rank-table { width: 100%; }
.bettor-rank-me { background: rgba(52,152,219,.12); font-weight: 700; }
.bettor-rank-me td { border-left: 3px solid var(--accent); }
.bettor-rank-me-badge { font-size: .68rem; background: var(--accent); color: #fff; border-radius: 8px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
[data-theme="light"] .bettor-rank-me { background: rgba(52,152,219,.10); }

/* Titre + bouton live sur la même ligne */
.rank-title-row { display: flex; align-items: center; gap: 12px; }

/* Label "Voir :" */
.rank-select-label { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }

/* Colonnes */
.rank-center { text-align: center; }
.rank-pts-bold { font-weight: 700; color: var(--gold); }
.rank-flag { font-size: 1.1em; }

/* Progression */
.rank-prog-up { color: #2ecc71; font-weight: 700; }
.rank-prog-down { color: #e74c3c; font-weight: 700; }
.rank-prog-neutral { color: var(--text-muted); }

/* Paris en cours */
.rank-live-score { color: #f39c12; font-weight: 600; cursor: default; }
.rank-no-live { color: var(--text-muted); }

/* Bouton Classement live */
.btn-rank-live {
  font-size: .78rem; padding: 3px 10px; border-radius: 12px;
  background: rgba(231,76,60,.15); color: #e74c3c;
  border: 1px solid rgba(231,76,60,.4); cursor: pointer;
  transition: background .2s;
}
.btn-rank-live:hover { background: rgba(231,76,60,.25); }
.btn-rank-live-active { background: rgba(231,76,60,.85); color: #fff; border-color: #e74c3c; }

/* Clignotement du bouton live quand matchs en cours */
@keyframes rank-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.btn-rank-live:not(.btn-rank-live-active) { animation: rank-live-blink 1.4s ease-in-out infinite; }

/* Tooltips sur les en-têtes de colonnes */
.rank-th-tip { cursor: help; position: relative; z-index: 1; overflow: visible; }
.rank-th-tip:hover { z-index: 300; }
.bettor-rank-table th { overflow: hidden; }
.bettor-rank-table th.rank-th-tip { overflow: visible; }
.rank-th-tip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.92);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: .78rem;
  white-space: normal;
  max-width: 260px;
  text-align: center;
  text-transform: none;
  z-index: 200;
  pointer-events: none;
  font-weight: 400;
}

/* Tooltips sur les cellules (paris en cours) */
[data-tooltip].rank-live-score { cursor: help; position: relative; }
[data-tooltip].rank-live-score:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.88);
  color: #fff;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: .73rem;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
}

/* Responsive : scroll horizontal sur mobile pour accéder à toutes les colonnes */
.bettor-rank-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bettor-rank-scroll::-webkit-scrollbar { height: 6px; }
.bettor-rank-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
@media (max-width: 640px) {
  .bettor-rank-table { min-width: 680px; }   /* force le dépassement pour activer le scroll */
}

/* ===== Badge compétition dans les cartes admin ===== */
.mm-comp-badge {
  font-size: .7rem;
  background: rgba(52,152,219,.2);
  color: #3498db;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: auto;
  white-space: nowrap;
}

/* ===== Modale joueur — onglets + header ===== */
.player-modal-header {
  text-align: center;
  margin-bottom: 14px;
}
.player-modal-name {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.player-modal-stats {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold, #f0c040);
}
.player-modal-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.player-tab {
  padding: 6px 20px;
  border: none;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.player-tab:hover {
  background: rgba(255,255,255,.12);
  color: var(--text-main);
}
.player-tab.active {
  background: var(--accent, #f0c040);
  color: #1a1a2e;
  font-weight: 700;
}

/* ===== Classement — ligne joueur cliquable ===== */
.bettor-rank-table tbody tr {
  transition: background .15s;
}
.bettor-rank-table tbody tr:hover {
  background: rgba(240,192,64,.08);
}
.rank-player-cell {
  cursor: pointer;
}
.rank-player-cell:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--gold, #f0c040);
  text-underline-offset: 2px;
}

/* ===== Score en attente de validation admin ===== */
.pred-score-pending {
  color: #f0a030 !important;
  cursor: help;
}

/* ===== ADVISOR — Bouton & Modale ===== */
.advisor-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .2s, transform .2s;
  z-index: 5;
}
.advisor-btn:hover {
  opacity: 1;
  transform: scale(1.3);
}
.pred-match-row { position: relative; }

.advisor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease;
}
.advisor-card {
  background: var(--bg-card, #1e2a38);
  color: var(--text-main, #eee);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  position: relative;
  text-align: center;
  animation: advisorFadeIn .2s ease;
}
@keyframes advisorFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.advisor-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(0,0,0,.3);
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  opacity: .8;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.advisor-close:hover { opacity: 1; background: rgba(231,76,60,.7); }
.advisor-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.advisor-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent, #f0c040);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.advisor-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #f0c040);
}
.advisor-match-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
}
.advisor-team {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #ccc);
  max-width: 120px;
  text-align: center;
}
.advisor-score {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  white-space: nowrap;
}
.advisor-comment {
  font-size: 15px;
  line-height: 1.5;
  margin: 14px 0;
  font-style: italic;
  color: var(--text-main, #ccc);
  padding: 0 8px;
}
.advisor-odds {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 8px;
}
.advisor-updated {
  font-size: 11px;
  color: var(--text-muted, #666);
  margin-top: 10px;
}

/* Maintenance banner (affiché quand mode maintenance actif) */
.maintenance-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10500; background: #f39c12; color: #000; text-align: center; padding: 10px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
body.has-maintenance-banner { padding-top: 42px; }