:root {
    --bg: #0B0E12;
    --card: #111621;
    --txt: #EAF0FF;
    --muted: #AAB4CC;
    --stroke: rgba(255,255,255,.08);
    --r: 18px;
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.hero, .badgeCal, .card {
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: 16px;
    margin: 14px 12px;
}

/* HERO */
.heroTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.heroBrand {
    padding-left: 10px;
}

.heroBrand__txt {
    font-family: "Black Ops One",system-ui,sans-serif;
    font-size: 44px;
    color: #FF5F19;
    line-height: .92;
    letter-spacing: 1px;
    font-weight: 400;
}

.heroBallWrap {
    width: 132px;
    height: 132px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gpBtn {
    margin-top: 14px;
    width: 100%;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    color: var(--txt);
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
}

.heroInfoBox {
    margin-top: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.03);
    border-radius: var(--r);
    padding: 14px 14px;
}

.heroBlurb__t {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 6px;
    padding-left: 10px;
}

.heroBlurb__p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
    padding-left: 10px;
}

.heroInfoGrid {
    margin-top: 12px;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.heroInfoCard {
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    padding: 10px 12px;
}

.heroInfoCard__k {
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 4px;
}

.heroInfoCard__p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

/* BADGES TOP */
.badgeCal__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.badgeCal__k {
    color: var(--muted);
    font-size: 12px;
}

.badgeCal__t {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
}

.badgeCal__score {
    text-align: right;
    z-index: 3 !important;
    line-height: 1;
    color: #eb6029;
    margin-top:20px !important;
}

.badgeCal__scoreNum {
    font-size: 35px;
    font-weight: 300;
    font-family: "Black Ops One" !important;
    margin-right: 20px !important;
    TEXT-ALIGN: center;
}

.badgeCal__scoreLbl {
    color: var(--muted);
    font-size: 35px;
    margin-top: 2px;
    font-family: "Black Ops One" !important;
    color: #eb6029;
    margin-right: 20px !important;
}

/* Progression récente */
.recentGrid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin: 8px 0 12px;
}

.recentCard {
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.05);
    padding: 10px 12px;
}

.recentTop {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

.recentIco {
    font-size: 14px;
    opacity: .95;
}

.recentVal {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
}

.recentMeta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
}

.recentDelta {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.18);
    color: var(--txt);
    font-weight: 900;
}

    .recentDelta.is-pos {
        border-color: rgba(110,231,255,.28);
        background: rgba(110,231,255,.10);
    }

    .recentDelta.is-neg {
        border-color: rgba(255,90,90,.28);
        background: rgba(255,90,90,.10);
    }

@media(min-width:520px) {
    .recentGrid {
        grid-template-columns: repeat(4,1fr);
    }
}

/* ✅ Heatmap compacte (moins de hauteur) */
.badgeCal__grid {
    display: grid;
    grid-template-columns: repeat(14,1fr);
    gap: 8px;
    margin: 10px 0 0;
}

.badgeCal__grid--compact {
    gap: 6px;
    margin-top: 6px;
}

.badgeDot {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
}

.badgeCal__grid--compact .badgeDot {
    border-radius: 7px;
    border-color: rgba(255,255,255,.06);
}

.badgeDot[data-lvl="0"] {
    opacity: .25;
}

.badgeDot[data-lvl="1"] {
    opacity: .45;
}

.badgeDot[data-lvl="2"] {
    opacity: .65;
}

.badgeDot[data-lvl="3"] {
    opacity: .85;
}

.badgeDot[data-lvl="4"] {
    opacity: 1;
}

/* STATS CARD */
.cardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cardT {
    font-size: 18px;
    font-weight: 900;
}

.cardSub {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 4px;
}

/* Tabs filtre (Perso/Pronostics/GM) */
.gpTabs {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

    .gpTabs::-webkit-scrollbar {
        height: 6px;
    }

    .gpTabs::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.10);
        border-radius: 999px;
    }

.gpTab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.05);
    color: var(--txt);
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
}

.gpTabIco {
    font-size: 14px;
}

.gpTab.is-active {
    border-color: rgba(110,231,255,.45);
    background: rgba(110,231,255,.12);
    box-shadow: 0 0 0 3px rgba(110,231,255,.10);
}

.chartHost {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.12);
}