/* general-manager.css — Styles spécifiques à la page General Manager */

/* ═══════════════════════════════════════════════════════════════════════ */
/* HERO (cohérent avec /defis) — titre orange + sous-titre + bouton info  */
/* ═══════════════════════════════════════════════════════════════════════ */
.gmHero {
    margin: .35rem 0 1rem;
    padding: 1rem 1.05rem 1.1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.20);
}

.gmHeroHead { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .9rem; }

.gmHeroTitle {
    margin: 0;
    font-family: "Black Ops One", "Antonio", system-ui, sans-serif;
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--pumpkin, #FF5F19);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* Sous-titre + bulle info centrés (titre pleine largeur centré au-dessus) */
.gmHeroSubtitleRow {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.gmHeroSubtitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .92rem;
    color: rgba(255,255,255,.65);
    font-style: italic;
    letter-spacing: 0.01em;
    text-align: center;
    min-width: 0;
}

.gmInfoBtn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-size: .78rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.gmInfoBtn:hover { background: rgba(235,96,41,.18); border-color: rgba(235,96,41,.45); color:#fff; }

.gmHeroWallet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .55rem .8rem;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
}

.gmHeroWalletItem {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.gmHeroWalletIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 0;
}
.gmHeroWalletIcon svg { display: block; }
.gmHeroWalletVal {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1.25rem;
    color: var(--pumpkin, #FF5F19);
    line-height: 1;
}
.gmHeroWalletLbl {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.gmHeroWalletNote {
    flex: 1;
    min-width: 200px;
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    line-height: 1.4;
    text-align: right;
}
@media (max-width: 480px) {
    .gmHeroWalletNote { text-align: left; flex-basis: 100%; }
}

.gmHeroSeason {
    margin-top: .65rem;
    padding: .5rem .8rem;
    background: rgba(255, 95, 25, 0.10);
    border: 1px solid rgba(255, 95, 25, 0.25);
    border-radius: 10px;
    font-size: .82rem;
    color: rgba(255, 211, 110, 0.95);
    line-height: 1.4;
}
.gmHeroSeason strong {
    color: #fff;
    font-weight: 700;
}
.gmHeroSeason.is-ended {
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.40);
    color: rgba(255, 200, 200, 0.95);
}

.gmChampSeasonEnded {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin: 0 0 .85rem;
    padding: .9rem 1rem;
    background: rgba(244, 67, 54, 0.10);
    border: 1px solid rgba(244, 67, 54, 0.35);
    border-radius: 12px;
}
.gmChampSeasonEndedIcon {
    font-size: 1.4rem;
    line-height: 1;
}
.gmChampSeasonEndedBody {
    flex: 1;
}
.gmChampSeasonEndedTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: .2rem;
}
.gmChampSeasonEndedText {
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.4;
}


/* ===== Subtitle ===== */
.gmSubtitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .9rem;
    color: var(--muted, rgba(255,255,255,.55));
    margin-bottom: .85rem;
}

/* ===== Wallet bar ===== */
.gmWallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: .6rem .75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.gmWalletItem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    flex: 1;
    min-width: 0;
}

.gmWalletIcon { font-size: 1rem; }

.gmWalletValue {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--pumpkin, #FF5F19);
    white-space: nowrap;
}

.gmWalletLabel {
    font-size: .68rem;
    color: var(--muted, rgba(255,255,255,.5));
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.gmWalletDivider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

/* Compact wallet (global — jetons only) */
.gmWallet--compact {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    justify-content: flex-start;
}
.gmWallet--compact .gmWalletItem { flex: 0 0 auto; }
.gmWalletNote {
    flex: 1 1 100%;
    font-size: .68rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .2px;
    padding-top: .15rem;
}

/* Per-championship wallet */
.gmWallet--champ {
    background: rgba(255,95,25,.12);
    border-color: rgba(255,95,25,.3);
    justify-content: center;
    gap: 1.5rem;
    margin-top: .5rem;
}

/* ===== Championship sub-page hero (redesign — titre pleine largeur en haut) ===== */
.gmChampHero {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 0 .85rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
    margin-bottom: .85rem;
}

.gmChampHeroName {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: clamp(1.25rem, 5.5vw, 1.7rem);
    color: var(--pumpkin, #FF5F19);
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Wrap autorisé sur 2 lignes si le nom du championnat dépasse la largeur dispo. */
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    cursor: default;
}

.gmChampHeroMeta {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .3px;
}

.gmChampHeroWallet {
    display: flex;
    gap: .45rem;
    margin-top: .15rem;
    flex-wrap: wrap;
}

.gmChampHeroChip {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: .25rem .6rem;
}

.gmChampHeroChipIcon { font-size: .95rem; }

.gmChampHeroChipVal {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .9rem;
    color: #fff;
}

.gmChampHeroChipLbl {
    font-size: .6rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .3px;
}

/* ===== Invitation row ===== */
.gmChampInviteRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: rgba(255,95,25,.08);
    border: 1px solid rgba(255,95,25,.22);
    border-radius: 12px;
    padding: .55rem .75rem;
    margin-bottom: .85rem;
}

.gmChampInviteLeft {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.gmChampInviteLbl {
    font-size: .6rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.gmChampInviteCode {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1.05rem;
    color: var(--pumpkin, #FF5F19);
    letter-spacing: .5px;
}

.gmChampInviteActions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

.gmChampInviteBtn {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .65rem;
    font-size: .8rem;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    touch-action: manipulation;
}

.gmChampInviteBtn--share {
    background: rgba(255,95,25,.18);
    border-color: rgba(255,95,25,.35);
    font-weight: 700;
}

.gmChampInviteBtn:active { opacity: .72; }

/* ===== Competition players grid ===== */
.gmCompSection {
    margin-bottom: 1.25rem;
}

.gmCompGrid {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .6rem;
}

.gmCompCard {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: .5rem .7rem;
    transition: background .15s;
}

.gmCompCard.is-in-team {
    background: rgba(255,95,25,.1);
    border-color: rgba(255,95,25,.3);
}

.gmCompAvatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    background: rgba(255,255,255,.10);
    animation: gmAvatarIn .35s ease;
}

.gmCompInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.gmCompName {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmCompClub {
    font-size: .68rem;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmCompValue {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .9rem;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
}

.gmCompValue.is-up   { color: #4ade80; }
.gmCompValue.is-down { color: #f87171; }

.gmCompValueUnit { font-size: .8rem; }

.gmCompMeBadge {
    font-size: .58rem;
    font-family: system-ui, sans-serif;
    background: rgba(255,95,25,.22);
    color: var(--pumpkin, #FF5F19);
    border-radius: 6px;
    padding: .1rem .35rem;
    margin-left: .3rem;
    vertical-align: middle;
}

.gmCompPending {
    color: rgba(255,255,255,.28);
    font-style: italic;
}

/* ===== Sticky footer retour ===== */
.gmChampSubFooter {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, transparent, var(--bg, #121212) 35%);
    margin-top: 1rem;
    z-index: 10;
}

.gmChampSubFooterBack {
    width: 100%;
    padding: .75rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    touch-action: manipulation;
}

.gmChampSubFooterBack:active { background: rgba(255,255,255,.14); }

/* ── Quitter championnat (action discrète) ──────────────────────────────── */
.gmChampLeaveRow {
    display: flex;
    justify-content: center;
    margin: .6rem 0 1.2rem;
}
.gmChampLeaveBtn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.38);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    padding: .35rem .6rem;
    letter-spacing: .02em;
}
.gmChampLeaveBtn:hover { color: rgba(244,67,54,.85); }

.gmChampLeaveConfirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
    font-size: .8rem;
    color: rgba(255,255,255,.75);
    background: rgba(244,67,54,.08);
    border: 1px solid rgba(244,67,54,.30);
    border-radius: 10px;
    padding: .55rem .8rem;
}
.gmChampLeaveCancel,
.gmChampLeaveConfirmBtn {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.gmChampLeaveCancel {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
}
.gmChampLeaveConfirmBtn {
    background: rgba(244,67,54,.85);
    color: #fff;
}
.gmChampLeaveConfirmBtn:disabled { opacity: .5; cursor: not-allowed; }

/* Championship sub-page header (kept for dream team header) */
.gmChampSubHeader {
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.gmChampSubBack {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}
.gmChampSubBack:active { background: rgba(255,255,255,.18); }

.gmChampSubBackArrow {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1;
}

/* ===== Code d'invitation + partage ===== */
.gmChampCodeShare {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: .55rem .75rem;
    margin-bottom: .75rem;
}
.gmChampCodeInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}
.gmChampCodeLabel {
    font-size: .62rem;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.gmChampCodeValue {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: .18em;
    color: var(--pumpkin, #FF5F19);
}
.gmChampCodeActions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.gmChampShareBtn {
    padding: .4rem .7rem;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    touch-action: manipulation;
}
.gmChampShareBtn--share {
    background: rgba(255,95,25,.18);
    border-color: rgba(255,95,25,.35);
    color: var(--pumpkin, #FF5F19);
    font-weight: 700;
}
.gmChampShareBtn:active { opacity: .75; }
.gmChampCopyToast {
    font-size: .78rem;
    color: var(--pumpkin, #FF5F19);
    margin: -.4rem 0 .5rem;
    padding: 0 .2rem;
}

/* ===== Championship section ===== */
.gmChampSection {
    margin-bottom: 1.25rem;
}

/* ===== Blocs englobants (cohérence avec /defis + /pronostics) ============== */
.gmBlock {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    border-radius: 20px;
    border: 1px solid var(--gp-border, rgba(255,255,255,0.12));
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(0,0,0,.28));
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.gmBlock::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(260px 180px at 18% 8%, rgba(110,231,255,.10), transparent 60%),
        radial-gradient(220px 160px at 100% 0%, rgba(235,96,41,.08), transparent 60%);
}
.gmBlock > * { position: relative; z-index: 1; }

.gmBlockTitle {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1;
    color: var(--gp-orange, #FF5F19);
    letter-spacing: .04em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* ===== Icônes Lucide partagées (sobres, blanches) ======================== */
.gmIco {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* SVG Lucide noir par défaut → on inverse en blanc semi-transparent */
    filter: invert(1) opacity(.85);
    display: inline-block;
    vertical-align: middle;
}
.gmIco--lg {
    width: 22px;
    height: 22px;
}

/* ── Checkbox "Championnat de mon équipe" ───────────────────────────────── */
.gmCheckboxRow {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .6rem 0 .25rem;
    cursor: pointer;
    font-size: .88rem;
    color: rgba(255,255,255,.85);
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 600;
}
.gmCheckboxRow input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background .15s, border-color .15s;
}
.gmCheckboxRow input[type="checkbox"]:checked {
    background: var(--pumpkin, #FF5F19);
    border-color: var(--pumpkin, #FF5F19);
}
.gmCheckboxRow input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    text-align: center;
    line-height: 15px;
}
.gmHintText {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    line-height: 1.4;
    margin: 0 0 .35rem .15rem;
    font-style: italic;
}

/* ── Gate "Complète ton profil" avant de pouvoir créer/rejoindre ────────── */
.gmProfileGate {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    border-radius: 14px;
    background: rgba(255, 95, 25, 0.10);
    border: 1px solid rgba(255, 95, 25, 0.30);
}
.gmProfileGateIco {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 95, 25, 0.18);
}
.gmProfileGateBody {
    flex: 1 1 auto;
    min-width: 0;
}
.gmProfileGateTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    letter-spacing: .02em;
    margin-bottom: .15rem;
}
.gmProfileGateText {
    font-size: .78rem;
    color: rgba(255,255,255,.65);
    line-height: 1.35;
}
.gmProfileGateBtn {
    flex-shrink: 0;
    padding: .55rem .9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 95, 25, 0.55);
    background: linear-gradient(145deg, rgba(255,95,25,.28), rgba(255,95,25,.12));
    color: #fff;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    cursor: pointer;
    white-space: nowrap;
}
.gmProfileGateBtn:active { transform: scale(.97); }
@media (max-width: 480px) {
    .gmProfileGate { flex-wrap: wrap; }
    .gmProfileGateBtn { width: 100%; margin-top: .35rem; }
}
.gmActionBtn--primary .gmIco {
    /* dans le bouton primary (orange teint), on garde blanc plein */
    filter: invert(1) opacity(1);
}

/* ===== Boutons actions (style badgeRow Defis) ============================= */
.gmChampActions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: .25rem;
}

.gmActionBtn {
    width: 100%;
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    box-shadow: 0 3px 12px rgba(0,0,0,.22);
    border-radius: 16px;
    padding: 12px 14px;
    color: #fff;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    text-align: left;
    transition: background .15s, border-color .15s, transform .1s;
    touch-action: manipulation;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.gmActionBtn:active { transform: scale(.985); }
.gmActionBtn:disabled { opacity: .45; cursor: not-allowed; }

.gmActionBtnIco {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    font-size: 18px;
    line-height: 1;
}
.gmActionBtnLbl {
    flex: 1 1 auto;
    min-width: 0;
}

.gmActionBtn--primary {
    border-color: rgba(255,95,25,.45);
    background: linear-gradient(145deg, rgba(255,95,25,.22), rgba(255,95,25,.08));
}
.gmActionBtn--primary .gmActionBtnIco {
    background: rgba(255,95,25,.30);
    color: #fff;
}
.gmActionBtn--secondary {
    /* déjà bon — base neutre */
}

.gmChampActionsOld {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gmChampBtn {
    flex: 1;
    min-width: 130px;
    padding: .65rem .65rem;
    border-radius: 10px;
    border: none;
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .72rem;
    letter-spacing: .4px;
    cursor: pointer;
    transition: opacity .15s;
    line-height: 1.3;
}

.gmChampBtn:active { opacity: .75; }

.gmChampBtn--primary {
    background: var(--pumpkin, #FF5F19);
    color: #fff;
}

.gmChampBtn--secondary {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
}

.gmSectionTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .65rem;
    letter-spacing: .3px;
}

/* ===== Championship carousel ===== */
.gmChampCards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.gmChampCarousel {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.gmChampCarousel::-webkit-scrollbar { display: none; }
.gmChampCarousel .gmChampCard {
    min-width: 80vw;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ── Carte championnat (cohérent avec badgeRow defis) ── */
.gmChampCard {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .1s;
}
.gmChampCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 140px at 90% -10%, rgba(255,95,25,.10), transparent 65%);
    pointer-events: none;
}
.gmChampCard:active { transform: scale(.99); }

.gmChampCardBody {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

.gmChampCardName {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: .4px;
    line-height: 1.15;
}

.gmChampCardStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.gmChampCardStat {
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.gmChampCardStatLabel {
    font-size: .65rem;
    color: rgba(255,255,255,.50);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
}

.gmChampCardStatValue {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* ── Wallet pulses/jokers (2 KPI tiles avec gros chiffres lisibles) ── */
.gmChampCardWallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-top: .25rem;
}
.gmChampCardWalletItem {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.06);
}
.gmChampCardWalletIco {
    font-size: 1rem;
    line-height: 1;
}
.gmChampCardWalletVal {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pumpkin, #FF5F19);
    line-height: 1;
}
.gmChampCardWalletLbl {
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    margin-left: auto;
}

/* ── Bouton "Entrer" fixé en bas de la carte, pleine largeur ── */
.gmChampCardCta {
    width: 100%;
    background: linear-gradient(145deg, rgba(255,95,25,.20), rgba(255,95,25,.08));
    border-top: 1px solid rgba(255,255,255,.10);
    color: #fff;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: .75rem .9rem;
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .35px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
    z-index: 1;
    text-align: center;
}
.gmChampCardCta:hover  { background: linear-gradient(145deg, rgba(255,95,25,.28), rgba(255,95,25,.12)); }
.gmChampCardCta:active { background: linear-gradient(145deg, rgba(255,95,25,.35), rgba(255,95,25,.18)); }

.gmChampCard.is-active {
    border-color: rgba(255,95,25,.55);
    box-shadow: 0 0 0 1px rgba(255,95,25,.30), 0 4px 14px rgba(255,95,25,.20);
}
.gmChampCard.is-active .gmChampCardCta {
    background: linear-gradient(145deg, rgba(255,95,25,.35), rgba(255,95,25,.18));
}

/* ===== Friends list ===== */
.gmFriendsList {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}

.gmFriendRow {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .45rem .65rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .15s, border-color .15s;
}

.gmFriendRow:active { background: rgba(255,255,255,.1); }

.gmFriendRow.is-added {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.1);
}

.gmFriendInfo {
    flex: 1;
    overflow: hidden;
}

.gmFriendName {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmFriendMeta {
    font-size: .7rem;
    color: var(--muted, rgba(255,255,255,.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmFriendRight {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.gmFriendScore {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .78rem;
    color: var(--pumpkin, #FF5F19);
}

.gmFriendToggle {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pumpkin, #FF5F19);
    width: 18px;
    text-align: center;
}

/* ===== Same-club badge ===== */
.gmSameClubBadge {
    font-size: .82rem;
    margin-left: .15rem;
}

/* ===== Validation info ===== */
.gmValidateInfo {
    font-size: .75rem;
    color: var(--muted, rgba(255,255,255,.5));
    margin-top: .2rem;
}

/* ===== Joker section ===== */
.gmJokerSection {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.gmJokerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.gmJokerBudget {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .78rem;
    color: var(--pumpkin, #FF5F19);
    font-weight: 700;
}

.gmJokerTabs {
    display: flex;
    gap: .4rem;
    margin-bottom: .75rem;
}

.gmJokerTab {
    flex: 1;
    padding: .45rem .3rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.20);
    color: rgba(255,255,255,.65);
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.gmJokerTab.is-active {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.15);
    color: var(--pumpkin, #FF5F19);
}

.gmJokerGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.gmJokerCard {
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: .85rem .65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    cursor: pointer;
    width: 100%;
    transition: background .15s, border-color .15s, transform .1s;
}

.gmJokerCard:active { transform: scale(.97); }

.gmJokerCard.is-selected {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.14);
    box-shadow: 0 0 0 2px rgba(255,95,25,.20);
}

.gmJokerCardIcon {
    font-size: 1.6rem;
    line-height: 1;
}

.gmJokerCardName {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: .82rem;
    color: rgba(255,255,255,.95);
    letter-spacing: .25px;
}

.gmJokerCardDesc {
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    line-height: 1.35;
}

/* ===== Compact role buttons in team chip (fix mobile overflow) ===== */
.gmChipActions {
    display: flex;
    gap: .2rem;
    margin-left: auto;
    flex-shrink: 0;
}

.gmRoleBtn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.25);
    color: rgba(255,255,255,.65);
    font-weight: 900;
    font-size: .7rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, border-color .12s, color .12s;
    flex-shrink: 0;
}

.gmRoleBtn.is-captain {
    border-color: rgba(255,185,0,.70);
    background: rgba(255,185,0,.18);
    color: #FFB900;
}

.gmRoleBtn.is-starter {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.95);
}

.gmRoleBtn.is-sixth {
    border-color: rgba(110,231,255,.55);
    background: rgba(110,231,255,.12);
    color: rgba(110,231,255,.90);
}

.gmRoleBtn.is-remove {
    border-color: rgba(231,76,60,.40);
    background: rgba(231,76,60,.10);
    color: rgba(231,76,60,.85);
}

/* ===== Filter chips ===== */
.gmFilters {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .5rem;
}

.gmFilterRow {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.gmFilterLabel {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(255,255,255,.40);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    width: 28px;
}

.gmFilterChips {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    flex: 1;
}

.gmFilterChips::-webkit-scrollbar { display: none; }

.gmFilterChip {
    flex-shrink: 0;
    padding: .28rem .65rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.70);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.gmFilterChip.is-active {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.16);
    color: var(--pumpkin, #FF5F19);
}

.gmFilterClear {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: .1rem;
    transition: color .15s;
}
.gmFilterClear:hover { color: rgba(255,255,255,.70); }

/* ===== Budget bar ===== */
.gmBudget {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: .6rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .3rem;
}

.gmBudgetRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gmBudgetLabel {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .78rem;
    color: rgba(255,255,255,.80);
}

.gmBudgetLeft {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: .82rem;
    color: var(--pumpkin, #FF5F19);
}

.gmBudgetLeft.is-danger { color: #e74c3c; }

.gmBudgetTrack {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.gmBudgetFill {
    height: 100%;
    background: var(--pumpkin, #FF5F19);
    border-radius: 999px;
    transition: width .3s ease, background .3s ease;
}

.gmBudgetFill.is-danger { background: #e74c3c; }

.gmBudgetFormula {
    font-size: .62rem;
    color: rgba(255,255,255,.35);
    font-weight: 600;
    line-height: 1.3;
    font-style: italic;
}

/* ===== Friend row enhancements ===== */
.gmFriendRow.is-blocked {
    opacity: .45;
    cursor: not-allowed;
}

/* Score + cost row below player name */
.gmFriendScoreRow {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: 3px;
    flex-wrap: wrap;
}

.gmFriendScoreBadge {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .78rem;
    color: #FFB900;
    background: rgba(255,185,0,.12);
    border: 1px solid rgba(255,185,0,.25);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}

.gmFriendCostBadge {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .75rem;
    color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.10);
    border: 1px solid rgba(255,95,25,.22);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}

.gmFriendCostBadge.is-blocked {
    color: #e74c3c;
    background: rgba(231,76,60,.10);
    border-color: rgba(231,76,60,.25);
}

.gmFriendCostBadge.is-up {
    color: #4CAF50;
    background: rgba(76,175,80,.10);
    border-color: rgba(76,175,80,.28);
}

.gmFriendCostBadge.is-down {
    color: #EF5350;
    background: rgba(239,83,80,.10);
    border-color: rgba(239,83,80,.28);
}

/* ===== Validation hint ===== */
.gmValidHint {
    font-size: .78rem;
    color: rgba(255,255,255,.75);
    background: rgba(255,185,0,.08);
    border: 1px solid rgba(255,185,0,.22);
    border-radius: 10px;
    padding: .45rem .65rem;
    line-height: 1.4;
    margin-bottom: .25rem;
}

.gmValidHint.is-error {
    color: #e74c3c;
    background: rgba(231,76,60,.08);
    border-color: rgba(231,76,60,.25);
}

/* ===== Team budget recap ===== */
.gmTeamBudget {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .5rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .5rem;
}

.gmTeamBudgetRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    color: rgba(255,255,255,.60);
    font-weight: 700;
}

/* ===== Dream Team button ===== */
.gmDreamTeamBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem;
    border-radius: 14px;
    border: 2px solid var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.10);
    color: var(--pumpkin, #FF5F19);
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: .5px;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: background .15s;
}
.gmDreamTeamBtn:active { background: rgba(255,95,25,.22); }

/* ===== Dream Team slide panel ===== */
.gmDreamPanel {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg, #0f1117);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
.gmDreamPanel.is-open {
    transform: translateX(0);
}

.gmDreamHeader {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1rem .5rem;
}

.gmDreamBack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.gmDreamBack:active { background: rgba(255,255,255,.15); }

.gmDreamLogo {
    height: 36px;
    width: auto;
}

.gmDreamBody {
    padding: .5rem 1rem 1rem;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.gmDreamTitleRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.gmDreamTitle {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 2rem;
    color: var(--pumpkin, #FF5F19);
    line-height: 1.05;
    text-transform: uppercase;
}

.gmDreamCoins {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}
.gmDreamCoin {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.gmDreamProgress {
    margin-bottom: 1rem;
}
.gmDreamProgressLabel {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    font-style: italic;
    margin-bottom: .3rem;
    text-align: center;
}
.gmDreamProgressTrack {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
    margin-bottom: .2rem;
}
.gmDreamProgressFill {
    height: 100%;
    background: var(--pumpkin, #FF5F19);
    border-radius: 999px;
    transition: width .4s ease;
}
.gmDreamProgressFrac {
    font-size: .68rem;
    color: rgba(255,255,255,.40);
    text-align: right;
}

/* ===== Player 2x3 grid (2 cols × 3 rows) ===== */
.gmDreamGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
    margin-bottom: 1.25rem;
}

.gmDreamSlot {
    background: rgba(255,255,255,.05);
    border: 1.5px dashed rgba(255,255,255,.18);
    border-radius: 16px;
    padding: .85rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 110px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
}
.gmDreamSlot:active { background: rgba(255,255,255,.10); }
.gmDreamSlot.is-filled {
    border-style: solid;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
}
.gmDreamSlot.is-active {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.08);
}

.gmDreamSlotPlus {
    font-size: 1.6rem;
    color: rgba(255,255,255,.35);
    line-height: 1;
}
.gmDreamSlotLabel {
    font-size: .68rem;
    color: rgba(255,255,255,.40);
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .3px;
}

.gmDreamAvatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
    background: rgba(255,255,255,.10);
    animation: gmAvatarIn .35s ease;
}

/* Fade-in partagé — toutes les photos GM */
@keyframes gmAvatarIn {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
.gmDreamPlayerName {
    font-size: .80rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    /* Wrap autorisé sur 2 lignes max pour les noms longs (mobile/tablette).
       Ellipsis si dépasse 2 lignes — meilleur que la coupure brutale sur 1 ligne. */
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 4px;
}
.gmDreamPlayerMeta {
    font-size: .68rem;
    color: rgba(255,255,255,.50);
    text-align: center;
}
.gmDreamJokerBadge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: .75rem;
    background: rgba(0,0,0,.5);
    border-radius: 6px;
    padding: 1px 3px;
}
.gmDreamRoleBadge {
    font-size: .6rem;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255,95,25,.20);
    color: var(--pumpkin, #FF5F19);
    letter-spacing: .3px;
}
.gmDreamRoleBadge.is-captain {
    background: rgba(255,185,0,.22);
    color: #FFB900;
}
.gmDreamRoleBadge.is-sixth {
    background: rgba(52,152,219,.20);
    color: #3498db;
}

/* ===== Joker cost badge on card ===== */
.gmJokerCostBadge {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    color: #FFB900;
    background: rgba(255,185,0,.12);
    border: 1px solid rgba(255,185,0,.28);
    border-radius: 6px;
    padding: 1px 7px;
}

/* ===== Dream team joker panel ===== */
.gmDreamJokerPanel {
    background: rgba(155,89,182,.08);
    border: 1px solid rgba(155,89,182,.20);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.gmDreamJokerPanel--empty {
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.12);
}

.gmDreamJokerPanelTitle {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #C39BD3;
    margin-bottom: 8px;
}

.gmDreamJokerList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gmDreamJokerItem {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.08);
}

.gmDreamJokerItem--atk { border-color: rgba(255,95,25,.25); }
.gmDreamJokerItem--def { border-color: rgba(52,152,219,.25); }
.gmDreamJokerItem--bonus { border-color: rgba(76,175,80,.25); }

.gmDreamJokerItemIcon { font-size: 18px; flex-shrink: 0; }

.gmDreamJokerItemInfo { flex: 1; min-width: 0; }

.gmDreamJokerItemName {
    font-size: 11px;
    font-weight: 900;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmDreamJokerItemDesc {
    font-size: 9px;
    color: rgba(255,255,255,.40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmDreamJokerItemCost {
    font-size: 10px;
    font-weight: 900;
    color: #FFB900;
    flex-shrink: 0;
}

.gmDreamJokerRemove {
    background: none;
    border: none;
    color: rgba(255,255,255,.35);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
}

.gmDreamJokerRemove:hover { color: #EF5350; }

/* Cost badge in filled dream slot */
.gmDreamCostBadge {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.15);
    border: 1px solid rgba(255,95,25,.28);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    margin-top: 1px;
}

.gmDreamCostBadge.is-up {
    color: #4CAF50;
    background: rgba(76,175,80,.12);
    border-color: rgba(76,175,80,.30);
}

.gmDreamCostBadge.is-down {
    color: #EF5350;
    background: rgba(239,83,80,.12);
    border-color: rgba(239,83,80,.30);
}

/* ===== Slot expand panel (role + joker + type) ===== */
.gmSlotExpand {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: .75rem;
    margin-bottom: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.gmSlotExpandHeader {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .1rem;
}

.gmSlotExpandTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
}

/* Prochain match du joueur dans le slot expand */
.gmSlotMatchDate {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(110,231,255,.85);
    background: rgba(110,231,255,.07);
    border: 1px solid rgba(110,231,255,.18);
    border-radius: 7px;
    padding: 2px 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.gmSlotMatchVs {
    opacity: .65;
    font-weight: 600;
    font-size: .68rem;
}
.gmSlotMatchDate--loading {
    color: rgba(255,255,255,.30);
    background: transparent;
    border-color: transparent;
}
.gmSlotMatchDate--none {
    color: rgba(255,255,255,.45);
    background: transparent;
    border-color: transparent;
    font-style: italic;
}
.gmSlotTypeRow {
    display: flex;
    gap: .35rem;
}
.gmSlotTypeBtn {
    flex: 1;
    padding: .3rem .2rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.20);
    color: rgba(255,255,255,.60);
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    font-family: "Antonio", system-ui, sans-serif;
}
.gmSlotTypeBtn.is-atk { border-color: rgba(231,76,60,.6); background: rgba(231,76,60,.15); color: #e74c3c; }
.gmSlotTypeBtn.is-def { border-color: rgba(52,152,219,.6); background: rgba(52,152,219,.15); color: #3498db; }
.gmSlotTypeBtn.is-uti { border-color: rgba(255,185,0,.6); background: rgba(255,185,0,.15); color: #FFB900; }

.gmSlotJokerRow {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
.gmSlotJokerBtn {
    padding: .3rem .55rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(0,0,0,.20);
    color: rgba(255,255,255,.65);
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: "Antonio", system-ui, sans-serif;
    transition: background .12s, border-color .12s;
}
.gmSlotJokerBtn.is-selected {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.18);
    color: var(--pumpkin, #FF5F19);
}
.gmSlotJokerBtn:disabled {
    opacity: .28;
    cursor: not-allowed;
}

/* ===== Footer fixe Dream Team ===== */
.gmDreamFooter {
    position: sticky;
    bottom: 0;
    background: var(--bg, #0f1117);
    border-top: 1px solid rgba(255,255,255,.10);
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex-shrink: 0;
}

/* Budget bar dans le footer */
.gmDreamBudgetBar {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.gmDreamBudgetRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}
.gmDreamBudgetLabel {
    font-size: .72rem;
    color: rgba(255,255,255,.50);
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
}
.gmDreamBudgetLeft {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}
/* Vert (OK pour valider) : pulses restants ≥ 0 — fond léger + texte vert vif */
.gmDreamBudgetLeft.is-pos {
    color: #22c55e;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.30);
}
/* Rouge (impossible de valider) : pulses négatifs — fond rouge + texte rouge */
.gmDreamBudgetLeft.is-danger {
    color: #ef4444;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.35);
}
.gmDreamBudgetTrack {
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}
.gmDreamBudgetFill {
    height: 100%;
    background: var(--pumpkin, #FF5F19);
    border-radius: 999px;
    transition: width .3s ease;
}
.gmDreamBudgetFill.is-danger { background: #e74c3c; }

/* Date prochain match sous le nom dans la grille */
.gmDreamSlotDate {
    font-size: .55rem;
    color: rgba(110,231,255,.7);
    background: rgba(110,231,255,.07);
    border-radius: 4px;
    padding: 1px 4px;
    margin: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Badge 🔒 sur les slots validés */
.gmDreamLockedBadge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: .7rem;
    line-height: 1;
    opacity: .6;
}

/* Bannière "Équipe validée" dans le footer */
.gmDreamValidatedBanner {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,95,25,.10);
    border: 1px solid rgba(255,95,25,.28);
    border-radius: 12px;
    padding: .55rem .75rem;
}
.gmDreamValidatedIcon { font-size: 1.25rem; flex-shrink: 0; }
.gmDreamValidatedText { flex: 1; min-width: 0; }
.gmDreamValidatedTitle {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .78rem;
    color: var(--pumpkin, #FF5F19);
    letter-spacing: .3px;
}
.gmDreamValidatedMatch {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gmDreamEditBtn {
    padding: .35rem .65rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
}
.gmDreamEditBtn:active { opacity: .7; }

/* Score estimé */
.gmDreamScoreEstimate {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    margin-top: .2rem;
    padding-top: .2rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.gmDreamScoreEstimate strong { color: #4ade80; }
.gmDreamScoreMatch { color: rgba(255,255,255,.35); margin-left: .3rem; }

/* Bouton Brouillon */
.gmDreamSaveDraftBtn {
    padding: .65rem .85rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
    touch-action: manipulation;
}
.gmDreamSaveDraftBtn:disabled { opacity: .35; cursor: not-allowed; }
.gmDreamSaveDraftBtn:not(:disabled):active { background: rgba(255,255,255,.12); }

/* Note slot validé */
.gmSlotValidatedNote {
    font-size: .68rem;
    color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.10);
    border-radius: 7px;
    padding: .25rem .5rem;
    margin-bottom: .35rem;
    text-align: center;
}
/* Row role badge en mode validé (lecture seule) */
.gmSlotRoleBadgeRow {
    margin-top: .35rem;
    display: flex;
    justify-content: center;
}

/* Ligne boutons footer */
.gmDreamFooterBtns {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

/* Bouton Retour (secondaire) */
.gmDreamCloseBtn {
    padding: .65rem .9rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.gmDreamCloseBtn:hover { background: rgba(255,255,255,.10); }

/* Bouton Valider (primary) */
.gmDreamValidateBtn {
    flex: 1;
    padding: .75rem .6rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.45);
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .78rem;
    letter-spacing: .3px;
    cursor: not-allowed;
    transition: background .2s, border-color .2s, color .2s;
    text-align: center;
}
.gmDreamValidateBtn.is-ready {
    background: var(--pumpkin, #FF5F19);
    border-color: var(--pumpkin, #FF5F19);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,95,25,.35);
}
.gmDreamValidateBtn.is-ready:active { opacity: .85; }

/* ===== Filtres dans le picker dream team ===== */
.gmDreamFilterRow {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .3rem;
}
.gmDreamFilterChip {
    padding: .28rem .6rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.60);
    font-size: .68rem;
    font-weight: 700;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.gmDreamFilterChip.is-active {
    border-color: var(--pumpkin, #FF5F19);
    background: rgba(255,95,25,.15);
    color: var(--pumpkin, #FF5F19);
}

/* ===== Classement dans Dream Team ===== */
.gmDreamClassement {
    margin-top: .5rem;
}
.gmDreamClassementTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    font-style: italic;
    margin-bottom: .5rem;
}
.gmDreamRankRow {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .82rem;
}
.gmDreamRankPos {
    width: 22px;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
}
.gmDreamRankPos.is-first { color: #FFB900; }
.gmDreamRankName {
    flex: 1;
    color: rgba(255,255,255,.80);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gmDreamRankPts {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    font-size: .78rem;
}

/* ===== Inline player picker — fixed bottom sheet overlay ===== */
.gmPickerPanel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 1rem .85rem;
    margin-top: .75rem;
}
.gmPickerPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.gmPickerTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--pumpkin, #FF5F19);
    margin-bottom: .75rem;
}
.gmPickerClose {
    position: absolute;
    top: .85rem;
    right: .85rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

/* ===== Classement GM ===== */
.gmRankingSection {
    margin-bottom: 1.5rem;
}

.gmRankingList {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.gmRankingRow {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: .55rem .75rem;
    transition: background .15s;
}

.gmRankingRow.is-me {
    background: rgba(255,95,25,.12);
    border-color: rgba(255,95,25,.35);
}

.gmRankingPos {
    width: 28px;
    flex-shrink: 0;
    text-align: center;
}

.gmRankingMedal {
    font-size: 1.25rem;
    line-height: 1;
}

.gmRankingNum {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .95rem;
    color: rgba(255,255,255,.4);
}

.gmRankingInfo {
    flex: 1;
    min-width: 0;
}

.gmRankingName {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.gmRankingMeBadge {
    font-size: .62rem;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    background: var(--pumpkin, #FF5F19);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: .02em;
}

.gmRankingClub {
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmRankingScore {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.gmRankingScoreVal {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1.05rem;
    color: var(--pumpkin, #FF5F19);
}

.gmRankingScoreLbl {
    font-size: .62rem;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Empty state */
.gmRankingEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 14px;
    text-align: center;
}

.gmRankingEmptyIcon {
    font-size: 2.5rem;
    opacity: .35;
}

.gmRankingEmptyTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
}

.gmRankingEmptyText {
    font-size: .8rem;
    color: rgba(255,255,255,.35);
    line-height: 1.5;
}

/* =========================
   SNACKBAR
   ========================= */
.gmSnackbar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 35, 0.96);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    padding: .7rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 95, 25, .4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    z-index: 9999;
    white-space: nowrap;
    animation: gmSnackIn .2s ease;
    pointer-events: none;
}

@keyframes gmSnackIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================
   JOKERS INLINE (dans création équipe)
   ========================= */
.gmInlineJokers {
    margin-top: 1rem;
    padding: .75rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.gmInlineJokersHeader {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}

.gmInlineJokersTitle {
    font-weight: 700;
    font-size: .88rem;
}

.gmInlineJokersSub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
}

/* =========================
   PER-PLAYER JOKER PICKER
   ========================= */
.gmChipJokerPicker {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem .75rem;
    margin-top: .2rem;
    background: rgba(255, 95, 25, .07);
    border: 1px dashed rgba(255, 95, 25, .3);
    border-radius: 10px;
}

.gmChipJokerPickerLabel {
    width: 100%;
    font-size: .68rem;
    color: rgba(255, 255, 255, .4);
    margin-bottom: .15rem;
}

/* joker button with active indicator */
.gmRoleBtn.is-captain {
    background: rgba(255, 95, 25, .25);
    color: var(--pumpkin, #FF5F19);
    border-color: var(--pumpkin, #FF5F19);
}

/* =========================
   CHAMPIONSHIP EMPTY STATE
   ========================= */
.gmChampEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.5rem 1rem;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
    text-align: center;
    margin-top: .5rem;
}

.gmChampEmptyIcon {
    font-size: 2rem;
    opacity: .3;
}

.gmChampEmptyTitle {
    font-weight: 700;
    font-size: .9rem;
    color: rgba(255,255,255,.5);
}

.gmChampEmptyText {
    font-size: .78rem;
    color: rgba(255,255,255,.3);
    line-height: 1.5;
}

/* ==========================================================
   POLISH — page container, responsiveness & touch UX
   ========================================================== */

/* Page wrapper : padding safe-area + conteneur max-width */
.gmPage {
    padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 80px);
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* Sub-page header unified */
.headerRow {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}

/* Dream Team body : fill remaining space + safe scroll */
.gmDreamBody {
    padding-bottom: 1rem;
}

/* Ensure all interactive elements meet 44px min touch target */
.gmChampBtn,
.gmDreamTeamBtn,
.gmDreamValidateBtn,
.gmDreamCloseBtn,
.gmChampCardCta {
    min-height: 44px;
}

.gmRoleBtn {
    min-width: 32px;
    min-height: 32px;
}

/* Info/form boxes */
.gmInfoBox {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.gmInfoBoxTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    letter-spacing: .2px;
}

.gmInfoBoxText {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
}

/* Select / text input fields */
.gmSelect {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, background .15s;
}
.gmSelect:focus {
    border-color: rgba(255,95,25,.55);
    background: rgba(255,255,255,.10);
}

/* Field wrapper */
.gmField {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Section separator */
.gmSectionTitle {
    font-size: 1rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Small action button */
.gmPickBtnSmall {
    padding: .45rem .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.75);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.gmPickBtnSmall:active { background: rgba(255,255,255,.15); }
.gmPickBtnSmall.is-on {
    background: rgba(255,95,25,.18);
    border-color: rgba(255,95,25,.45);
    color: var(--pumpkin, #FF5F19);
}

/* Snackbar position tweak for safe area */
.gmSnackbar {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* Responsive: small phones */
@media (max-width: 360px) {
    .gmDreamGrid {
        gap: .45rem;
    }
    .gmDreamSlot {
        min-height: 90px;
        padding: .6rem .3rem;
    }
    .gmChampCardStats {
        gap: .8rem;
    }
    .gmDreamTitle {
        font-size: 1.6rem;
    }
}

/* ===== Role chip buttons (full-label) ===== */
.gmRoleChips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
}
.gmRoleChip {
    padding: .4rem .75rem;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.70);
    font-size: .78rem;
    font-weight: 700;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.gmRoleChip.is-captain { border-color: rgba(255,185,0,.70); background: rgba(255,185,0,.18); color: #FFB900; }
.gmRoleChip.is-starter { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; }
.gmRoleChip.is-sixth   { border-color: rgba(110,231,255,.55); background: rgba(110,231,255,.12); color: #6EE7FF; }
.gmRoleChip.is-remove  { border-color: rgba(231,76,60,.40); background: rgba(231,76,60,.10); color: rgba(231,76,60,.85); }
.gmRoleChipMult { opacity: .55; font-size: .72rem; margin-left: .2rem; }

/* ===== Ancienne UI : boutons rôle C/T/6 ===== */
.gmPickBtnRow {
    display: flex;
    gap: .4rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
.gmPickBtn {
    padding: .3rem .7rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    font-weight: 700;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    min-width: 34px;
    text-align: center;
}
.gmPickBtn.is-active { border-color: var(--pumpkin, #FF5F19); background: rgba(255,95,25,.18); color: var(--pumpkin, #FF5F19); }

/* Légende des rôles */
.gmRoleLegend {
    font-size: .65rem;
    color: rgba(255,255,255,.35);
    text-align: center;
    margin-top: .15rem;
    letter-spacing: .03em;
}

/* Bouton retirer le joueur */
/* Conteneur des deux actions slot */
.gmSlotActions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .6rem;
}

/* Bouton "Changer de joueur" */
.gmReplacePlayerBtn {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1.5px solid rgba(99,102,241,.55);
    background: rgba(99,102,241,.14);
    color: rgba(199,201,255,1);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.gmReplacePlayerBtn:active { background: rgba(99,102,241,.25); }

/* Bouton "Libérer ce slot" */
.gmRemovePlayerBtn {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1.5px solid rgba(231,76,60,.55);
    background: rgba(231,76,60,.12);
    color: rgba(244,118,105,1);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.gmRemovePlayerBtn:active { background: rgba(231,76,60,.22); }

/* Texte descriptif sous le label des boutons d'action */
.gmSlotActionHint {
    font-size: .68rem;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    opacity: .65;
}

/* Overlay modal picker */
.gmPickerOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.60);
    display: flex;
    align-items: flex-end;
    animation: gmFadeIn .15s ease;
}
.gmPickerModal {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: #1a1a2e;
    border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 16px 16px 0 0;
    padding: 1rem .9rem 2rem;
    animation: gmSlideUp .2s ease;
}
@keyframes gmFadeIn  { from { opacity: 0 }  to { opacity: 1 } }
@keyframes gmSlideUp { from { transform: translateY(40px) } to { transform: translateY(0) } }

/* Badge état dream team */
.gmTeamStatusBadge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 20px;
    letter-spacing: .02em;
}
.gmTeamStatusBadge.is-saving  { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.35); }
.gmTeamStatusBadge.is-dirty   { background: rgba(239,68,68,.12);  color: #f87171; border: 1px solid rgba(239,68,68,.35); }
.gmTeamStatusBadge.is-locked  { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.35); }
.gmTeamStatusBadge.is-saved   { background: rgba(34,197,94,.12);  color: #86efac; border: 1px solid rgba(34,197,94,.30); }
.gmTeamStatusBadge.is-empty   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.12); }

/* ════════════════════════════════════════════════════════════════
   Classement cliquable → détail des notes des joueurs d'un manager
   ════════════════════════════════════════════════════════════════ */
.gmRankingRow.is-clickable {
    cursor: pointer;
}
.gmRankingRow.is-clickable:active {
    background: rgba(255,255,255,.10);
    transform: scale(.995);
}
.gmRankingChevron {
    flex-shrink: 0;
    margin-left: .15rem;
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255,255,255,.30);
    line-height: 1;
}

/* Modale détail manager */
.gmMgrDetailEmpty {
    text-align: center;
    padding: 1.4rem 1rem;
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(255,255,255,.55);
}

.gmMgrDetailNav {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}
.gmMgrDetailNavLbl {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
}

.gmMgrDetailMatch {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    background: rgba(255,95,25,.10);
    border: 1px solid rgba(255,95,25,.22);
    margin-bottom: .65rem;
}
.gmMgrDetailMatchTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gmMgrDetailMatchScore {
    font-size: .78rem;
    font-weight: 800;
    color: var(--pumpkin, #FF5F19);
    white-space: nowrap;
}

.gmMgrDetailList {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.gmMgrDetailRow {
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.gmMgrDetailRow.is-open { border-color: rgba(255,95,25,.35); }
.gmMgrDetailRowHead {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto 16px;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}
.gmMgrDetailRowHead:active { background: rgba(255,255,255,.04); }
.gmMgrDetailChevron { font-size: .7rem; color: rgba(255,255,255,.4); text-align: center; }

.gmMgrPlayerDetail {
    padding: .15rem .7rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .1rem;
}
.gmMgrPlayerDetailRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: rgba(255,255,255,.7);
}
.gmMgrPlayerDetailRow b { color: rgba(255,255,255,.95); }
.gmMgrPlayerDetailRow.is-bonus b { color: #4ade80; }

/* Toggle Général / Journée du classement */
.gmRankTabs {
    display: flex;
    gap: .4rem;
    margin: .2rem 0 .7rem;
}
.gmRankTab {
    flex: 1 1 0;
    padding: .45rem .6rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.6);
    font-family: "Antonio", system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background .15s, color .15s, border-color .15s;
}
.gmRankTab.is-active {
    background: rgba(255,95,25,.18);
    border-color: rgba(255,95,25,.5);
    color: #FF5F19;
}
.gmMgrRoleBadge {
    text-align: center;
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .62rem;
    padding: .2rem .1rem;
    border-radius: 7px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.14);
}
.gmMgrRoleBadge.is-captain { background: rgba(255,185,0,.18);  color: #FFB900; border-color: rgba(255,185,0,.45); }
.gmMgrRoleBadge.is-sixth   { background: rgba(110,231,255,.14); color: #6EE7FF; border-color: rgba(110,231,255,.40); }

.gmMgrDetailName {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gmMgrBoostBadge {
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 800;
    padding: .1rem .35rem;
    border-radius: 6px;
    background: rgba(34,197,94,.16);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.35);
}
.gmMgrDetailNote {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    white-space: nowrap;
    font-family: "Antonio", system-ui, sans-serif;
}
.gmMgrNoteBase { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.95); }
.gmMgrNoteMult { font-size: .72rem; color: rgba(255,255,255,.45); }
.gmMgrNoteEq   { font-size: 1rem; font-weight: 700; color: var(--pumpkin, #FF5F19); }

.gmMgrDetailBonus {
    margin-top: .65rem;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    text-align: center;
}

/* Résumé coût pulses au-dessus des jokers */
.gmDreamCostSummary {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin: .9rem 0 .2rem;
}
.gmDreamCostSummaryItem {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .4rem;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
}
.gmDreamCostSummaryItem.is-pos {
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.28);
}
.gmDreamCostSummaryItem.is-danger {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.35);
}
.gmDreamCostSummaryItem.is-locked {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.32);
}
.gmDreamCostSummaryItem.is-locked .gmDreamCostSummaryVal { color: #a5b4fc; }

.gmDreamCostWarn {
    margin: .35rem 0 .2rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.30);
    color: #fca5a5;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
}
.gmDreamCostSummaryVal {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1;
    color: rgba(255,255,255,.96);
}
.gmDreamCostSummaryItem.is-pos .gmDreamCostSummaryVal    { color: #4ade80; }
.gmDreamCostSummaryItem.is-danger .gmDreamCostSummaryVal { color: #f87171; }
.gmDreamCostSummaryLbl {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(255,255,255,.45);
    text-align: center;
}

/* Slots réservés : 5 = Capitaine, 6 = 6e homme */
.gmDreamSlot.is-resv-cap:not(.is-filled) {
    border-color: rgba(255,185,0,.50);
    background: rgba(255,185,0,.06);
}
.gmDreamSlot.is-resv-sixth:not(.is-filled) {
    border-color: rgba(110,231,255,.45);
    background: rgba(110,231,255,.06);
}
.gmDreamSlotLabel--cap   { color: #FFB900; font-weight: 800; }
.gmDreamSlotLabel--sixth { color: #6EE7FF; font-weight: 800; }

/* Rôle auto (slot-expand) : affichage lecture seule (plus de boutons C/T/6) */
.gmSlotRoleAuto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
}
.gmSlotRoleAutoHint {
    font-size: .65rem;
    color: rgba(255,255,255,.42);
    text-align: center;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* ── Mini-graph "évolution du coût" dans le slot expandé ─────────────────── */
.gmSlotValueChart {
    margin: 12px 0 10px;
    padding: 10px 12px;
    background: rgba(255,95,25,.05);
    border: 1px solid rgba(255,95,25,.18);
    border-radius: 10px;
}
.gmSlotValueChartLabel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(255,95,25,.85);
    margin-bottom: 6px;
}
.gmSlotValueChartDelta {
    font-family: "Antonio", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: none;
}
.gmSlotValueChartSvg {
    width: 100%;
    height: 80px;
    display: block;
    /* Les labels (valeur + axe X) sont directement dans le SVG, plus de légende externe. */
}

/* Bouton retour en bas de dream team */
.gmDreamBackFooter {
    margin-top: 1.5rem;
    padding-bottom: 1rem;
    text-align: center;
}
.gmDreamBackBtn {
    background: none;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    padding: .5rem 1.2rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.gmDreamBackBtn:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }

/* Bouton retirer le joker */
.gmSlotJokerRemove {
    padding: .28rem .55rem;
    border-radius: 8px;
    border: 1px solid rgba(231,76,60,.40);
    background: rgba(231,76,60,.08);
    color: rgba(231,76,60,.85);
    font-size: .72rem;
    font-family: "Antonio", system-ui, sans-serif;
    cursor: pointer;
    transition: background .12s;
}
.gmSlotJokerRemove:active { background: rgba(231,76,60,.20); }

/* ===== Slot number in empty dream slot ===== */
.gmDreamSlotNum {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin-bottom: .1rem;
}

/* ===== Validation checklist above validate button ===== */
.gmValidateChecklist {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .5rem;
    font-size: .75rem;
    font-family: "Antonio", system-ui, sans-serif;
}
.gmCheckOk { color: #4CAF50; }
.gmCheckKo { color: rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* JOKER DU JOUR — panneau exclusivité par championnat / journée            */
/* ═══════════════════════════════════════════════════════════════════════ */

.gmJokerPanel {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem 1.1rem;
    background: linear-gradient(160deg, rgba(255, 95, 25, 0.08), rgba(255, 95, 25, 0.02));
    border: 1px solid rgba(255, 95, 25, 0.25);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}

.gmJokerPanelHeader {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 95, 25, 0.18);
}

.gmJokerPanelTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    color: #FF5F19;
    letter-spacing: 0.02em;
}

.gmJokerPanelSubtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    align-items: center;
}

.gmJokerExclusiveBadge {
    background: rgba(255, 211, 110, 0.15);
    border: 1px solid rgba(255, 211, 110, 0.35);
    color: #FFD36E;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gmJokerLoadingState {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* BANNER auto-unlock après match — informe l'user de la plus-value        */
/* ═══════════════════════════════════════════════════════════════════════ */
.gmAutoUnlockBanner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, rgba(255, 211, 110, 0.12), rgba(255, 165, 0, 0.06));
    border: 1px solid rgba(255, 211, 110, 0.40);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.15);
}
.gmAutoUnlockIcon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    /* Animation infinite retirée (v4.45) : trop intrusive visuellement. */
}
.gmAutoUnlockContent {
    flex: 1;
    min-width: 0;
}
.gmAutoUnlockTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: #FFD36E;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.gmAutoUnlockDesc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.45;
}
.gmAutoUnlockDesc b {
    color: #FFD36E;
}
@keyframes gmAutoUnlockPulse {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50%      { transform: rotate(-15deg) scale(1.08); }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ACTION BAR sticky championnat — Retour + CTA principale                 */
/* Toujours visible peu importe slot sélectionné / picker ouvert.          */
/* ═══════════════════════════════════════════════════════════════════════ */
.gmDreamActionBar {
    position: sticky;
    top: 60px; /* sous la topbar */
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin: 0 -0.5rem 0.85rem;
    background: linear-gradient(180deg, rgba(11, 15, 20, 0.95), rgba(11, 15, 20, 0.85));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 95, 25, 0.18);
    border-radius: 0;
}
.gmDreamActionBack {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.gmDreamActionBack:hover {
    background: rgba(255, 95, 25, 0.10);
    border-color: rgba(255, 95, 25, 0.35);
    transform: translateX(-2px);
}
.gmDreamActionCta {
    appearance: none;
    border: none;
    cursor: pointer;
    flex: 1;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.gmDreamActionCta.is-ready {
    background: linear-gradient(135deg, #FF5F19, #E04800);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 95, 25, 0.35);
    /* Pulse infinite retirée (v4.45) : trop intrusive. */
}
.gmDreamActionCta.is-ready:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(255, 95, 25, 0.50);
}
.gmDreamActionCta.is-pending {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    cursor: not-allowed;
}
.gmDreamActionCta.is-locked {
    background: rgba(255, 211, 110, 0.12);
    border: 1px solid rgba(255, 211, 110, 0.40);
    color: #FFD36E;
}
.gmDreamActionCta.is-locked:hover {
    background: rgba(255, 211, 110, 0.20);
}
@keyframes gmCtaPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(255, 95, 25, 0.35); }
    50%      { box-shadow: 0 8px 26px rgba(255, 95, 25, 0.55); }
}

/* ── Sections jokers (BONUS / ATK / DEF) ───────────────────────────────── */
.gmJokerSection {
    margin-bottom: 1rem;
}
.gmJokerSection:last-child {
    margin-bottom: 0;
}
.gmJokerSectionHeader {
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(255, 95, 25, 0.55);
    border-radius: 0 8px 8px 0;
}
.gmJokerSectionTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.92rem;
    color: #fff;
    letter-spacing: 0.03em;
}
.gmJokerSectionSub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
}

/* ── Badge Booster sur la carte du meilleur joueur ─────────────────────── */
.gmDreamBoosterBadge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #FFD36E, #FF9933);
    color: #1a0e00;
    font-weight: 900;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(255, 153, 51, 0.40);
    animation: gmBoosterPulse 1.6s ease-in-out infinite;
}
@keyframes gmBoosterPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* ═══ Carrousel des cartes joker (scroll-snap horizontal) ═══ */
.gmJokerCardsGrid {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,95,25,.5) transparent;
}
.gmJokerCardsGrid::-webkit-scrollbar { height: 5px; }
.gmJokerCardsGrid::-webkit-scrollbar-thumb { background: rgba(255,95,25,.5); border-radius: 99px; }
.gmJokerCardsGrid > .gmJokerCard {
    flex: 0 0 80%;
    max-width: 240px;
    scroll-snap-align: start;
}
@media (min-width: 620px) {
    .gmJokerCardsGrid > .gmJokerCard { flex-basis: 230px; }
}

/* Tag type explicite sur chaque carte */
.gmJokerCardType {
    align-self: center;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 99px;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}
.gmJokerCardType--bonus { background: rgba(110,231,255,.16); color: #6EE7FF; border: 1px solid rgba(110,231,255,.35); }
.gmJokerCardType--atk   { background: rgba(239,68,68,.16);  color: #fca5a5; border: 1px solid rgba(239,68,68,.35); }
.gmJokerCardType--def   { background: rgba(76,175,80,.16);  color: #86efac; border: 1px solid rgba(76,175,80,.35); }

.gmJokerCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.9rem 0.8rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.gmJokerCard:not(.is-locked):not(.is-disabled):not(.is-mine):hover {
    background: rgba(255, 95, 25, 0.06);
    border-color: rgba(255, 95, 25, 0.40);
    transform: translateY(-1px);
}

.gmJokerCard.is-mine {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.40);
}

.gmJokerCard.is-locked {
    background: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.06);
    opacity: 0.65;
    filter: grayscale(40%);
}

.gmJokerCard.is-disabled {
    opacity: 0.45;
    filter: grayscale(60%);
}

.gmJokerCardIcon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.gmJokerCardName {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
}

.gmJokerCardDesc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.gmJokerCardTiming {
    font-size: 0.65rem;
    color: rgba(255, 211, 110, 0.75);
    margin-bottom: 0.7rem;
}

.gmJokerCardBtn {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    transition: opacity 0.15s ease, transform 0.1s ease;
    margin-top: auto;
}

.gmJokerCardBtn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.gmJokerCardBtn.is-primary {
    background: linear-gradient(135deg, #FF5F19, #E04800);
    color: #fff;
    box-shadow: 0 3px 10px rgba(255, 95, 25, 0.30);
}

.gmJokerCardBtn.is-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(255, 95, 25, 0.45);
}

.gmJokerCardBtn.is-replay {
    background: rgba(110, 231, 255, 0.15);
    border: 1px solid rgba(110, 231, 255, 0.40);
    color: #6EE7FF;
}

.gmJokerCardBtn.is-replay:hover:not(:disabled) {
    background: rgba(110, 231, 255, 0.25);
}

.gmJokerCardBtn.is-cancel {
    margin-top: .35rem;
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.40);
    color: rgba(231, 76, 60, 0.95);
}
.gmJokerCardBtn.is-cancel:hover:not(:disabled) {
    background: rgba(231, 76, 60, 0.22);
}

.gmJokerCardStatus {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: auto;
    line-height: 1.35;
}

.gmJokerCardStatus.is-mine {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.40);
    color: #81C784;
}

.gmJokerCardStatus.is-locked {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

.gmJokerCardStatus.is-disabled {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.40);
}

.gmJokerCardHint {
    margin-top: 0.4rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.40);
    font-style: italic;
}

.gmJokerError {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: rgba(244, 67, 54, 0.10);
    border: 1px solid rgba(244, 67, 54, 0.35);
    border-radius: 10px;
    color: #EF9A9A;
    font-size: 0.78rem;
}

/* ═══ Modal "choisir un manager à espionner" ═══ */
.gmEspionTargetList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.gmEspionTargetCard {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    text-align: left;
}

.gmEspionTargetCard:hover:not(:disabled) {
    background: rgba(255, 95, 25, 0.10);
    border-color: rgba(255, 95, 25, 0.50);
    transform: translateX(2px);
}

.gmEspionTargetCard:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.gmEspionTargetAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.10);
    flex-shrink: 0;
}

.gmEspionTargetInfo { flex: 1; min-width: 0; }

.gmEspionTargetPseudo {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 900;
    font-size: 0.92rem;
    color: #fff;
}

.gmEspionTargetMeta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.50);
    margin-top: 2px;
}

.gmEspionTargetArrow {
    font-size: 1.2rem;
    color: #FF5F19;
    font-weight: 900;
}

/* ═══ Modal "Compo espionnée" ═══ */
.gmSpiedMatchTitle {
    padding: 0.55rem 0.8rem;
    background: rgba(110, 231, 255, 0.08);
    border-radius: 10px;
    color: #6EE7FF;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.gmSpiedEmpty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    font-style: italic;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.gmSpiedRolesList {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 0.85rem;
}

.gmSpiedRoleRow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.gmSpiedRoleBadge {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
}

.gmSpiedRoleBadge.is-captain {
    background: linear-gradient(135deg, #FF5F19, #E04800);
    color: #fff;
}

.gmSpiedRoleBadge.is-sixth {
    background: rgba(255, 211, 110, 0.20);
    color: #FFD36E;
    border: 1px solid rgba(255, 211, 110, 0.40);
}

.gmSpiedPlayerUid {
    font-family: monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}

.gmSpiedJokersUsedSection {
    padding: 0.7rem 0.85rem;
    background: rgba(255, 211, 110, 0.06);
    border: 1px solid rgba(255, 211, 110, 0.20);
    border-radius: 10px;
    margin-bottom: 0.85rem;
}

.gmSpiedJokersUsedLabel {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FFD36E;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.gmSpiedJokersUsedList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gmSpiedJokerChip {
    padding: 3px 10px;
    background: rgba(255, 211, 110, 0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #FFD36E;
}

.gmSpiedFooter {
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.40);
    font-style: italic;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}

/* ===== Section "Dernier match scoré" — propre, top scorers ============== */
.gmLastMatchSection {
    margin-bottom: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    padding: .85rem 1rem 1rem;
}

.gmLastMatchSection .gmSectionTitle {
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .05em;
    margin-bottom: .55rem;
}

.gmLastMatchMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .65rem;
}
.gmLastMatchTitle {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    letter-spacing: .02em;
}
.gmLastMatchDate {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .02em;
}

.gmLastMatchScores {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .25rem;
}

.gmLastMatchRow {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.05);
    transition: background .15s;
}
.gmLastMatchRow.is-me {
    background: rgba(255,95,25,.10);
    border-color: rgba(255,95,25,.30);
}

.gmLastMatchRank {
    font-family: "Black Ops One", system-ui, sans-serif;
    font-size: .95rem;
    color: rgba(255,255,255,.50);
    text-align: center;
    line-height: 1;
}
.gmLastMatchRow.is-me .gmLastMatchRank {
    color: var(--pumpkin, #FF5F19);
}

.gmLastMatchPseudo {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmLastMatchPts {
    font-family: "Antonio", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--pumpkin, #FF5F19);
    line-height: 1;
    white-space: nowrap;
}
.gmLastMatchPtsUnit {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-weight: 700;
    margin-left: .15rem;
}