/* ════════════════════════════════════════════════════════════════
   COUPE DU MONDE 2026 — STYLE.CSS
   Palette FIFA : Rouge #c8102e · Bleu #003087 · Or #ffd700
════════════════════════════════════════════════════════════════ */
:root{
    --red:#c8102e; --blue:#003087; --gold:#ffd700; --gold2:#ffb300;
    --dark:#0a0e1a; --dark2:#12182b; --dark3:#1e2a45;
    --green:#00a651; --green2:#00c96a;
    --gray:#8892a4; --light:#f0f4ff;
    --font:'Segoe UI',system-ui,sans-serif;
    --tr:all .35s cubic-bezier(.4,0,.2,1);
    --radius:18px; --shadow:0 8px 32px rgba(0,0,0,.25);
    --glass:rgba(255,255,255,.06);
    --glass-border:rgba(255,255,255,.12);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--dark);min-height:100vh;color:#1a1a2e;overflow-x:hidden;}
.hidden{display:none!important;}

/* ══ CANVAS ══ */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ══ DRAPEAUX FLOTTANTS GLOBAUX ══ */
.floating-flags-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.ff-item{
    position:absolute;bottom:-80px;
    font-size:1.8rem;opacity:0;
    animation:ffRise linear infinite;
    user-select:none;pointer-events:none;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@keyframes ffRise{
    0%  {transform:translateY(0) rotate(0deg) scale(.8);opacity:0;}
    5%  {opacity:.45;}
    50% {transform:translateY(-55vh) rotate(180deg) scale(1.1);opacity:.35;}
    95% {opacity:.25;}
    100%{transform:translateY(-110vh) rotate(360deg) scale(.9);opacity:0;}
}

/* ══ LOGIN ══ */
#loginScreen{
    position:relative;z-index:10;
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}

/* Ticker drapeaux en haut de l'écran de login */
.login-flags-ticker{
    position:fixed;top:0;left:0;right:0;z-index:20;
    background:rgba(10,14,26,.85);
    backdrop-filter:blur(6px);
    overflow:hidden;height:44px;
    border-bottom:2px solid rgba(255,215,0,.15);
}
.login-flags-ticker .ticker-inner{
    display:inline-flex;gap:22px;align-items:center;
    height:44px;white-space:nowrap;
    animation:tickerScroll 35s linear infinite;
}
.login-flags-ticker .ticker-inner span{font-size:1.6rem;cursor:default;transition:transform .2s;}
.login-flags-ticker .ticker-inner span:hover{transform:scale(1.5) rotate(12deg);}

/* Header ticker */
.header-flags-ticker{
    overflow:hidden;height:36px;
    background:rgba(0,0,0,.3);
    border-bottom:1px solid rgba(255,215,0,.1);
}
.header-flags-ticker .ticker-inner{
    display:inline-flex;gap:18px;align-items:center;
    height:36px;white-space:nowrap;
    animation:tickerScroll 30s linear infinite;
}
.header-flags-ticker .ticker-inner span{font-size:1.4rem;cursor:default;transition:transform .2s;}
.header-flags-ticker .ticker-inner span:hover{transform:scale(1.4) rotate(10deg);}

@keyframes tickerScroll{
    0%  {transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* Login box */
.login-box{
    position:relative;z-index:15;
    background:rgba(255,255,255,.97);
    border-radius:28px;padding:0 0 32px;
    max-width:460px;width:100%;
    box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);
    animation:loginBoxIn .7s cubic-bezier(.175,.885,.32,1.275) both;
    overflow:hidden;margin-top:50px;
}
@keyframes loginBoxIn{from{opacity:0;transform:scale(.85) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}

.login-top-bar{
    height:6px;
    background:linear-gradient(90deg,var(--red),var(--gold),var(--blue),var(--green),var(--red));
    background-size:300% 100%;
    animation:rainbowShift 4s linear infinite;
}
@keyframes rainbowShift{0%{background-position:0%}100%{background-position:300%}}

/* Trophée */
.login-trophy-zone{position:relative;text-align:center;padding:28px 0 8px;}
.login-trophy{font-size:70px;display:inline-block;position:relative;z-index:2;
    animation:trophyFloat 3s ease-in-out infinite;
    filter:drop-shadow(0 8px 20px rgba(255,215,0,.5));}
@keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.trophy-glow{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,215,0,.4),transparent 70%);
    animation:glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(255,215,0,.25);
    top:50%;left:50%;transform:translate(-50%,-50%);animation:ringExp 3s ease-out infinite;}
.r1{width:80px;height:80px;animation-delay:0s}
.r2{width:120px;height:120px;animation-delay:1s}
.r3{width:160px;height:160px;animation-delay:2s}
@keyframes ringExp{0%{opacity:.6;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

/* Titre */
.login-title-block{text-align:center;padding:4px 36px 16px;}
.login-title-block h1{font-size:20px;font-weight:900;color:var(--dark);letter-spacing:3px;}
.login-year{display:flex;justify-content:center;gap:4px;margin:6px 0 6px;}
.login-year span{
    font-size:34px;font-weight:900;
    background:linear-gradient(135deg,var(--red),var(--gold),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:yearPop .6s cubic-bezier(.175,.885,.32,1.275) both;
}
.login-year span:nth-child(1){animation-delay:.1s}
.login-year span:nth-child(2){animation-delay:.2s}
.login-year span:nth-child(3){animation-delay:.3s}
.login-year span:nth-child(4){animation-delay:.4s}
@keyframes yearPop{from{opacity:0;transform:scale(0) rotateY(90deg)}to{opacity:1;transform:scale(1) rotateY(0)}}
.login-sub{font-size:12px;color:var(--gray);font-weight:600;letter-spacing:1px;}

/* Bandeau drapeaux dans la login box */
.login-flags-strip{
    display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
    padding:8px 20px 12px;overflow:hidden;max-height:56px;
}
.lf-item{
    font-size:1.5rem;display:inline-block;cursor:default;
    animation:lfBounce ease-in-out infinite;
    transition:transform .2s;
}
.lf-item:hover{animation:none!important;transform:scale(1.6) rotate(15deg)!important;}
@keyframes lfBounce{
    0%,100%{transform:translateY(0) rotate(-4deg)}
    50%    {transform:translateY(-7px) rotate(4deg)}
}

/* Formulaire */
.login-form{padding:0 36px;display:flex;flex-direction:column;gap:13px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label{font-size:11px;font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:5px;}
.lbl-icon{font-size:13px;}
.select-wrap,.input-wrap{position:relative;}
.select-wrap select,.input-wrap input{
    width:100%;padding:12px 38px 12px 14px;
    border:2px solid #e5e9f0;border-radius:11px;
    font-size:14px;font-family:var(--font);
    background:#f8faff;color:var(--dark);transition:var(--tr);appearance:none;
}
.select-wrap select:focus,.input-wrap input:focus{
    outline:none;border-color:var(--blue);background:white;
    box-shadow:0 0 0 4px rgba(0,48,135,.1);transform:translateY(-1px);
}
.sel-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gray);pointer-events:none;}
.inp-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;}

.btn-login{
    position:relative;padding:14px;
    background:linear-gradient(135deg,var(--blue) 0%,#1a4db5 50%,var(--blue) 100%);
    background-size:200% 100%;
    color:white;border:none;border-radius:13px;font-size:14px;font-weight:900;
    cursor:pointer;overflow:hidden;transition:var(--tr);
    box-shadow:0 4px 20px rgba(0,48,135,.4);letter-spacing:1.5px;margin-top:4px;
    display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-login:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(0,48,135,.5);background-position:100% 0;}
.btn-login:active{transform:translateY(0);}
.btn-shine{
    position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    animation:btnShine 3s ease-in-out infinite;
}
@keyframes btnShine{0%,100%{left:-100%}50%{left:200%}}
.btn-admin{background:linear-gradient(135deg,var(--red),#e91e42,var(--red));box-shadow:0 4px 20px rgba(200,16,46,.4);}
.btn-admin:hover{box-shadow:0 10px 35px rgba(200,16,46,.5);}

.login-error{
    display:flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#fff0f3,#ffe4e9);
    color:var(--red);padding:11px 14px;border-radius:10px;
    font-weight:700;font-size:13px;border-left:4px solid var(--red);
    animation:shakeErr .4s ease;
}
@keyframes shakeErr{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.admin-zone{margin:14px 36px 0;padding:18px;background:#fff8f0;border:2px solid rgba(200,16,46,.2);border-radius:13px;animation:slideDown .3s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.admin-zone-title{font-size:13px;font-weight:800;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:8px;}

.login-footer{text-align:center;padding:16px 36px 0;color:var(--gray);font-size:12px;display:flex;flex-direction:column;gap:8px;}
.login-footer a{color:var(--blue);cursor:pointer;font-weight:700;font-size:12px;text-decoration:none;}
.login-footer a:hover{color:var(--red);}

/* ══ APP ══ */
#mainApp{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;}

#mainHeader{
    background:linear-gradient(135deg,var(--dark),var(--dark2),var(--dark3));
    position:sticky;top:0;z-index:100;
    box-shadow:0 4px 30px rgba(0,0,0,.5);
}
.header-bg{position:absolute;inset:0;
    background:radial-gradient(ellipse at 20% 50%,rgba(200,16,46,.07),transparent 50%),
               radial-gradient(ellipse at 80% 50%,rgba(0,48,135,.09),transparent 50%);
    animation:hBgShift 8s ease-in-out infinite alternate;pointer-events:none;}
@keyframes hBgShift{from{opacity:.7}to{opacity:1}}

.header-main{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 24px;gap:12px;flex-wrap:wrap;position:relative;
}
.header-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.h-trophy{font-size:32px;animation:hTrophy 6s ease-in-out infinite;
    filter:drop-shadow(0 0 10px rgba(255,215,0,.6));}
@keyframes hTrophy{0%,85%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-15deg) scale(1.1)}95%{transform:rotate(15deg) scale(1.1)}}
.h-titles{display:flex;flex-direction:column;}
.h-title{
    font-size:14px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
    background:linear-gradient(90deg,#fff,var(--gold),#fff);
    background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:titleShimmer 4s linear infinite;
}
@keyframes titleShimmer{0%{background-position:0%}100%{background-position:200%}}
.h-sub{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:1px;font-weight:600;}

.badge-admin{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--dark);
    padding:5px 14px;border-radius:20px;font-weight:900;font-size:11px;
    box-shadow:0 0 15px rgba(255,215,0,.4);animation:badgePulse 2.5s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{box-shadow:0 0 15px rgba(255,215,0,.4)}50%{box-shadow:0 0 25px rgba(255,215,0,.7)}}
.badge-player{background:rgba(255,255,255,.12);color:white;padding:5px 14px;border-radius:20px;
    font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:6px;}
.badge-avatar-flag{font-size:16px;animation:flagWiggle 3s ease-in-out infinite;}
@keyframes flagWiggle{0%,90%,100%{transform:rotate(0)}95%{transform:rotate(360deg) scale(1.2)}}

.save-status{display:none;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:10px;font-weight:700;backdrop-filter:blur(4px);}
.save-status.visible{display:flex;animation:fadeInBadge .3s ease;}
@keyframes fadeInBadge{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.save-status.saving{background:rgba(255,193,7,.3);color:#ffd54f;}
.save-status.saved {background:rgba(0,166,81,.3); color:#69f0ae;}
.save-status.error {background:rgba(200,16,46,.3);color:#ff8a80;}

.btn-hdr{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:white;
    border-radius:9px;padding:7px 11px;font-size:15px;cursor:pointer;transition:var(--tr);}
.btn-hdr:hover{background:rgba(255,255,255,.2);transform:scale(1.1);}
.btn-logout-hdr{background:rgba(200,16,46,.2);border:1px solid rgba(200,16,46,.4);
    color:rgba(255,255,255,.9);padding:7px 16px;border-radius:9px;
    font-size:12px;font-weight:700;cursor:pointer;transition:var(--tr);}
.btn-logout-hdr:hover{background:rgba(200,16,46,.4);transform:translateY(-2px);}

/* Navigation */
.main-nav{display:flex;padding:0 12px;border-top:1px solid rgba(255,255,255,.07);
    overflow-x:auto;scrollbar-width:none;position:relative;}
.main-nav::-webkit-scrollbar{display:none;}
.nav-tab{display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:10px 16px;background:none;border:none;
    color:rgba(255,255,255,.4);cursor:pointer;font-family:var(--font);
    font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    transition:var(--tr);position:relative;white-space:nowrap;flex-shrink:0;}
.nav-tab::after{
    content:'';position:absolute;bottom:0;left:50%;
    width:0;height:3px;
    background:linear-gradient(90deg,var(--red),var(--gold));
    border-radius:3px 3px 0 0;
    transform:translateX(-50%);transition:width .35s cubic-bezier(.4,0,.2,1);
}
.nav-tab.active{color:white;}
.nav-tab.active::after{width:80%;}
.nav-tab:hover{color:rgba(255,255,255,.8);}
.ni{font-size:18px;}.nl{font-size:10px;}

/* Contenu */
.main-content{flex:1;background:#f0f4ff;}
.tab-pane{display:none;padding:24px;animation:paneIn .3s ease both;}
.tab-pane.active{display:block;}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Filtres */
.pane-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:20px;padding:14px 20px;background:white;border-radius:14px;
    box-shadow:0 2px 14px rgba(0,48,135,.07);flex-wrap:wrap;border:1px solid rgba(0,48,135,.07);}
.filter-row{display:flex;align-items:center;gap:10px;}
.filter-lbl{font-size:12px;font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
.select-wrap.sm select{padding:7px 30px 7px 12px;font-size:12px;border-radius:9px;}
.pane-info{font-weight:700;font-size:12px;}
.info-admin{background:rgba(255,193,7,.15);color:#856404;padding:6px 14px;border-radius:20px;border:1px solid rgba(255,193,7,.3);}
.info-player{background:rgba(0,48,135,.1);color:var(--blue);padding:6px 14px;border-radius:20px;border:1px solid rgba(0,48,135,.15);}

/* Séparateurs */
.day-separator{display:flex;align-items:center;gap:12px;margin:24px 0 14px;
    padding:12px 20px;background:linear-gradient(135deg,var(--dark),var(--dark3));
    border-radius:12px;color:white;box-shadow:0 4px 18px rgba(0,0,0,.2);
    position:relative;overflow:hidden;transition:transform .2s;cursor:default;}
.day-separator::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--red),var(--gold));border-radius:12px 0 0 12px;}
.day-separator:hover{transform:translateX(4px);}
.day-separator.group-sep::before{background:linear-gradient(180deg,var(--blue),var(--gold));}
.day-icon{font-size:20px;}.day-label{font-size:15px;font-weight:800;letter-spacing:.5px;display:flex;flex-direction:column;gap:2px;}
.day-label-sub{font-size:10px;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:.3px;text-transform:none;}
.day-count{margin-left:auto;background:rgba(255,255,255,.15);padding:3px 12px;
    border-radius:20px;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,.15);}

/* Déroulement (récap horaire d'une journée/groupe) */
.deroulement-box{background:linear-gradient(135deg,#f8faff,#eef3ff);
    border:1px solid rgba(0,48,135,.1);border-radius:14px;
    padding:14px 18px;margin-bottom:18px;animation:sectionIn .4s ease both;}
.dr-title{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.5px;
    text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dr-hint{font-size:10px;font-weight:600;color:var(--gray);text-transform:none;letter-spacing:0;}
.dr-list{display:flex;flex-direction:column;gap:6px;}
.dr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:12px;color:var(--dark);padding:8px 12px;background:white;
    border-radius:8px;border:1px solid rgba(0,48,135,.06);transition:var(--tr);cursor:pointer;}
.dr-row:hover{transform:translateX(3px);box-shadow:0 3px 12px rgba(0,48,135,.12);border-color:rgba(0,48,135,.18);background:#f8faff;}
.dr-row:active{transform:translateX(1px) scale(.99);}
.dr-date{font-weight:700;color:var(--gold2);font-size:11px;white-space:nowrap;}
.dr-time{font-weight:800;color:var(--blue);min-width:54px;}
.dr-teams{font-weight:700;flex:1;}
.dr-vs{color:var(--gray);font-weight:400;font-size:10px;margin:0 2px;}
.dr-score{color:var(--green);font-weight:900;margin:0 4px;}
.dr-stadium{color:var(--gray);font-size:11px;}
.dr-arrow{color:var(--blue);font-size:14px;font-weight:900;opacity:.5;transition:var(--tr);}
.dr-row:hover .dr-arrow{opacity:1;transform:translateX(3px);}

/* Mon pronostic dans le déroulement */
.dr-mybet{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;
    padding:4px 10px;border-radius:14px;white-space:nowrap;
    background:linear-gradient(135deg,#eff6ff,#e6f0ff);color:var(--blue);
    border:1px solid rgba(0,48,135,.15);}
.dr-mybet-locked{background:linear-gradient(135deg,#fff3e0,#ffe8cc);color:#b35900;border-color:rgba(255,143,0,.25);}
.dr-mybet-empty{background:#f5f5f5;color:var(--gray);border:1px dashed #ccc;font-weight:600;}
.dr-mybet-done{background:linear-gradient(135deg,#e8f5e9,#d4f0d6);color:#2e7d32;border-color:rgba(0,166,81,.25);}
.dr-pts{font-size:10px!important;padding:3px 9px!important;}

/* Cartes match */
.match-card{background:white;border-radius:20px;padding:22px;margin-bottom:16px;
    box-shadow:0 4px 20px rgba(0,48,135,.09),0 1px 4px rgba(0,0,0,.04);
    border:1px solid rgba(0,48,135,.08);
    transition:var(--tr);position:relative;overflow:hidden;}
.match-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--blue),var(--gold),var(--red));
    transform:scaleX(0);transform-origin:left;transition:transform .4s ease;border-radius:20px 20px 0 0;}
.match-card::after{content:'';position:absolute;top:0;right:0;width:120px;height:120px;
    background:radial-gradient(circle,rgba(0,48,135,.04),transparent 70%);
    pointer-events:none;border-radius:0 20px 0 0;}
.match-card:hover{box-shadow:0 14px 44px rgba(0,48,135,.16);transform:translateY(-4px);}
.match-card:hover::before{transform:scaleX(1);}
.match-card.is-finished{border-color:rgba(0,166,81,.2);background:linear-gradient(135deg,#f0fff8,white);}
.match-card.is-finished::before{background:linear-gradient(90deg,var(--green),var(--green2));transform:scaleX(1);}
.playoff-card{border-left:4px solid var(--gold);background:linear-gradient(135deg,#fffdf0,white);}
.playoff-card::before{background:linear-gradient(90deg,var(--gold),var(--red));}

.match-header{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap;}
.group-badge{background:linear-gradient(135deg,var(--blue),#1a4db5);color:white;
    padding:4px 12px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap;}
.playoff-badge{background:linear-gradient(135deg,var(--red),#e91e42);}
.match-date,.match-time{color:var(--gray);font-size:11px;font-weight:600;}
.match-stadium{color:#bbb;font-size:10px;font-style:italic;}
.badge-finished{margin-left:auto;padding:4px 10px;border-radius:10px;font-size:10px;font-weight:700;
    background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#2e7d32;}
.badge-open{margin-left:auto;padding:4px 10px;border-radius:10px;font-size:10px;font-weight:700;
    background:linear-gradient(135deg,#fff8e1,#ffecb3);color:#e65100;}

.match-teams{display:flex;align-items:center;justify-content:space-around;gap:10px;
    margin:14px 0;padding:16px;background:linear-gradient(135deg,#f8faff,#f0f4ff);
    border-radius:12px;border:1px solid rgba(0,48,135,.06);}
.team-name{flex:1;text-align:center;font-size:15px;font-weight:800;color:var(--dark);
    display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .25s;cursor:default;}
.team-name:hover{transform:scale(1.08);}
.team-flag-big{font-size:38px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
    transition:transform .3s;}
.team-name:hover .team-flag-big{transform:rotate(8deg) scale(1.15);}
.team-flag{font-size:17px;}
.versus{font-size:10px;font-weight:900;color:white;background:linear-gradient(135deg,var(--dark),var(--dark3));
    padding:9px 14px;border-radius:10px;flex-shrink:0;letter-spacing:2px;box-shadow:0 3px 10px rgba(0,0,0,.2);}

/* Affichage "Mexique 1 - 0 Afrique du Sud" avec score dans les drapeaux */
.team-result{flex-direction:row;align-items:center;justify-content:center;gap:8px!important;flex:1;}
.team-result .team-name-txt{font-size:13px;font-weight:800;}
.team-score-badge{display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;height:30px;padding:0 8px;border-radius:8px;
    background:linear-gradient(135deg,var(--green),var(--green2));color:white;
    font-size:16px;font-weight:900;box-shadow:0 2px 8px rgba(0,166,81,.3);
    animation:ptsIn .4s cubic-bezier(.175,.885,.32,1.275) both;}
.versus-final{background:linear-gradient(135deg,var(--green),var(--green2));
    box-shadow:0 3px 10px rgba(0,166,81,.3);font-size:16px;padding:9px 12px;}

/* Highlight quand on clique depuis le déroulement */
@keyframes matchHighlightPulse{
    0%,100%{box-shadow:0 14px 44px rgba(255,215,0,.0);}
    50%{box-shadow:0 0 0 6px rgba(255,215,0,.35),0 14px 44px rgba(255,215,0,.3);}
}
.match-highlight{animation:matchHighlightPulse 1s ease-in-out 2;border-color:var(--gold)!important;}

.official-result{display:flex;align-items:center;justify-content:center;padding:13px 18px;
    margin:12px 0;background:linear-gradient(135deg,var(--green),var(--green2));
    color:white;border-radius:11px;font-size:15px;font-weight:700;gap:9px;flex-wrap:wrap;
    box-shadow:0 4px 18px rgba(0,166,81,.3);animation:resultIn .5s cubic-bezier(.175,.885,.32,1.275);}
@keyframes resultIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.admin-box{background:linear-gradient(135deg,#fffbf0,#fff9e6);
    border:2px solid rgba(255,215,0,.4);border-radius:12px;padding:16px;margin:12px 0;}
.admin-box-title{display:flex;align-items:center;gap:7px;font-weight:800;color:#856404;font-size:12px;margin-bottom:12px;}
.admin-score-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.admin-team{font-weight:700;color:var(--dark);font-size:12px;max-width:120px;text-align:center;}
.admin-dash{font-size:18px;font-weight:800;color:#ccc;}
.playoff-teams-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.team-edit-input{flex:1;max-width:190px;padding:9px 12px;border:2px solid rgba(255,193,7,.5);
    border-radius:9px;font-size:13px;font-weight:700;text-align:center;background:white;transition:var(--tr);}
.team-edit-input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(255,193,7,.2);}

.bets-table{margin-top:16px;border:1px solid #e8ecf4;border-radius:12px;overflow:hidden;}
.bets-header{padding:10px 16px;background:linear-gradient(135deg,var(--dark),var(--dark3));
    color:white;font-weight:800;font-size:12px;letter-spacing:.5px;}
.bet-row{display:flex;align-items:center;gap:9px;padding:10px 14px;
    border-bottom:1px solid #f5f7fc;background:white;transition:all .22s;flex-wrap:wrap;}
.bet-row:last-child{border-bottom:none;}
.bet-row:hover{background:#f8faff;transform:translateX(3px);}
.bet-row-me{background:linear-gradient(135deg,#eff6ff,#f5f0ff)!important;border-left:4px solid var(--blue);}
.bet-row-me:hover{background:linear-gradient(135deg,#e3f0ff,#ede5ff)!important;}
.bet-player{display:flex;align-items:center;gap:7px;min-width:140px;}
.bet-player strong{font-size:12px;color:var(--dark);font-weight:700;}
.bet-player-flag{font-size:18px;animation:bpFlag 4s ease-in-out infinite;}
@keyframes bpFlag{0%,90%,100%{transform:rotate(0)}95%{transform:rotate(360deg) scale(1.2)}}
.dot-me{color:var(--blue);font-size:13px;animation:dotBounce 1.5s ease-in-out infinite;}
@keyframes dotBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.tag-me{background:linear-gradient(135deg,var(--blue),#1a4db5);color:white;
    padding:2px 9px;border-radius:9px;font-size:10px;font-weight:800;}
.lock-icon{font-size:12px;}
.bet-score-zone{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap;}
.score-input{width:54px;padding:7px;text-align:center;border:2px solid #e0e6f0;
    border-radius:9px;font-size:17px;font-weight:900;transition:var(--tr);background:white;color:var(--dark);}
.score-input:hover{border-color:#aab;transform:scale(1.05);}
.my-input{border-color:var(--blue)!important;background:#eff6ff!important;}
.admin-input{border-color:var(--gold2)!important;background:#fffbf0!important;}
.my-input:focus{outline:none;box-shadow:0 0 0 4px rgba(0,48,135,.12);transform:scale(1.08);}
.admin-input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,193,7,.2);transform:scale(1.08);}
.bet-sep{font-size:15px;font-weight:900;color:#ccc;}
.readonly-score{font-size:14px;font-weight:800;color:var(--dark);padding:6px 14px;
    background:linear-gradient(135deg,#f0f4ff,#f8faff);border-radius:9px;border:2px solid #e0e6f0;}
.no-bet{font-size:12px;color:#bbb;font-style:italic;}
.no-teams-msg{text-align:center;padding:36px;color:#aaa;font-style:italic;font-size:13px;}

.btn-validate{padding:6px 13px;background:linear-gradient(135deg,var(--green),var(--green2));
    color:white;border:none;border-radius:8px;cursor:pointer;font-size:10px;font-weight:800;
    transition:var(--tr);white-space:nowrap;box-shadow:0 2px 8px rgba(0,166,81,.3);}
.btn-validate:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,166,81,.4);}
.btn-icon{background:#eff6ff;border:2px solid var(--blue);color:var(--blue);
    border-radius:8px;padding:5px 9px;cursor:pointer;font-size:13px;transition:var(--tr);}
.btn-icon:hover{background:var(--blue);color:white;transform:scale(1.15) rotate(-5deg);}
.btn-icon-red{background:#fff0f3;border:2px solid var(--red);color:var(--red);
    border-radius:8px;padding:5px 9px;cursor:pointer;font-size:13px;transition:var(--tr);}
.btn-icon-red:hover{background:var(--red);color:white;transform:scale(1.15) rotate(5deg);}
.bet-pts{margin-left:auto;}

/* Points */
.pts-badge{display:inline-flex;align-items:center;justify-content:center;
    padding:4px 12px;border-radius:20px;font-weight:800;font-size:11px;color:white;
    white-space:nowrap;animation:ptsIn .4s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes ptsIn{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.pts5{background:linear-gradient(135deg,#00a651,#00c96a);box-shadow:0 2px 8px rgba(0,166,81,.4);}
.pts3{background:linear-gradient(135deg,#003087,#1a4db5);box-shadow:0 2px 8px rgba(0,48,135,.4);}
.pts1{background:linear-gradient(135deg,#ff8f00,#ffa726);color:#000;box-shadow:0 2px 8px rgba(255,143,0,.4);}
.pts0{background:linear-gradient(135deg,#c8102e,#e91e42);box-shadow:0 2px 8px rgba(200,16,46,.4);}

/* Classement */
.ranking-hero{background:linear-gradient(135deg,var(--dark),var(--dark3));border-radius:18px;
    padding:26px;margin-bottom:22px;text-align:center;position:relative;overflow:hidden;}
.ranking-hero::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 30% 50%,rgba(255,215,0,.07),transparent 60%),
               radial-gradient(ellipse at 70% 50%,rgba(200,16,46,.07),transparent 60%);}
.rk-trophy{font-size:46px;display:inline-block;position:relative;
    animation:rkTrophy 4s ease-in-out infinite;
    filter:drop-shadow(0 0 14px rgba(255,215,0,.6));}
@keyframes rkTrophy{0%,90%,100%{transform:rotateY(0)}45%{transform:rotateY(360deg)}}
.ranking-hero h2{font-size:24px;font-weight:900;
    background:linear-gradient(135deg,white,var(--gold));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    letter-spacing:2px;margin-top:8px;}

.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{border-radius:16px;padding:20px;text-align:center;color:white;
    position:relative;overflow:hidden;transition:var(--tr);cursor:default;
    animation:statIn .5s cubic-bezier(.175,.885,.32,1.275) both;}
.stat-card:nth-child(1){background:linear-gradient(135deg,#003087,#1a4db5);box-shadow:0 5px 20px rgba(0,48,135,.3);animation-delay:.05s}
.stat-card:nth-child(2){background:linear-gradient(135deg,#c8102e,#e91e42);box-shadow:0 5px 20px rgba(200,16,46,.3);animation-delay:.1s}
.stat-card:nth-child(3){background:linear-gradient(135deg,#00a651,#00c96a);box-shadow:0 5px 20px rgba(0,166,81,.3);animation-delay:.15s}
.stat-card:nth-child(4){background:linear-gradient(135deg,#ff8f00,#ffb300);box-shadow:0 5px 20px rgba(255,143,0,.3);animation-delay:.2s;color:#1a1a1a}
@keyframes statIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.stat-card::before{content:'';position:absolute;top:-25px;right:-25px;width:90px;height:90px;
    border-radius:50%;background:rgba(255,255,255,.07);transition:transform .4s;}
.stat-card:hover{transform:translateY(-6px) scale(1.02);}
.stat-card:hover::before{transform:scale(2.5);}
.stat-icon{font-size:30px;margin-bottom:7px;}
.stat-label{font-size:11px;opacity:.8;margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.stat-value{font-size:30px;font-weight:900;}
.stat-value span{font-size:15px;opacity:.6;font-weight:600;}
.stat-value.leader{font-size:17px;line-height:1.3;}

.rank-table{width:100%;border-collapse:collapse;border-radius:18px;overflow:hidden;box-shadow:0 6px 28px rgba(0,48,135,.12);background:white;}
.rank-table th{background:linear-gradient(135deg,var(--dark),var(--dark3));color:white;
    padding:14px 14px;text-align:left;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
.rank-table td{padding:13px 14px;border-bottom:1px solid #f0f4ff;font-size:13px;transition:all .2s;}
.rank-table tr{animation:rowIn .4s ease both;transition:var(--tr);}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.rank-table tr:hover td{background:#f8faff;}
.rank-table tr:hover{transform:translateX(3px);}
.rank-me td{background:linear-gradient(135deg,#eff6ff,#f5f0ff)!important;font-weight:700;}
.rank-table tbody tr:first-child td{background:linear-gradient(135deg,#fffbf0,#fff8e6);}
.rank-pos{font-size:18px;text-align:center;width:45px;}
.rank-total{font-size:18px;font-weight:900;color:var(--blue);}

/* Points */
.pts-badge{display:inline-flex;align-items:center;justify-content:center;
    padding:4px 12px;border-radius:20px;font-weight:800;font-size:11px;color:white;
    white-space:nowrap;animation:ptsIn .4s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes ptsIn{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.pts5{background:linear-gradient(135deg,#00a651,#00c96a);box-shadow:0 2px 8px rgba(0,166,81,.4);}
.pts3{background:linear-gradient(135deg,#003087,#1a4db5);box-shadow:0 2px 8px rgba(0,48,135,.4);}
.pts1{background:linear-gradient(135deg,#ff8f00,#ffa726);color:#000;box-shadow:0 2px 8px rgba(255,143,0,.4);}
.pts0{background:linear-gradient(135deg,#c8102e,#e91e42);box-shadow:0 2px 8px rgba(200,16,46,.4);}
.pts10{background:linear-gradient(135deg,#c8920a,var(--gold));color:#1a1200;
    box-shadow:0 3px 12px rgba(255,215,0,.5);font-size:12px;padding:5px 14px;
    animation:pts10Glow 2s ease-in-out infinite;}
@keyframes pts10Glow{0%,100%{box-shadow:0 3px 12px rgba(255,215,0,.4)}50%{box-shadow:0 5px 22px rgba(255,215,0,.8)}}

.ranking-rules{margin-top:22px;background:white;border-radius:18px;padding:24px;box-shadow:0 4px 18px rgba(0,48,135,.08);}
.ranking-rules-title{font-weight:900;font-size:14px;color:var(--dark);margin-bottom:14px;}
.ranking-rules-grid{display:grid;gap:9px;}
.ranking-rule-item{display:flex;align-items:center;gap:14px;padding:11px 14px;
    background:#f8faff;border-radius:9px;border-left:4px solid var(--blue);
    font-size:13px;color:var(--dark);transition:var(--tr);}
.ranking-rule-item:hover{transform:translateX(5px);background:#f0f4ff;}

/* ══ CHAMPION DU MONDE ══ */
.champion-hero{
    background:linear-gradient(135deg,#0d1a35,#1a2a50,#0d1a35);
    border-radius:22px;padding:34px 32px;margin-bottom:26px;
    display:flex;align-items:center;gap:22px;position:relative;overflow:hidden;
}
.champion-hero-bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 10% 50%,rgba(255,215,0,.12),transparent 50%),
        radial-gradient(ellipse at 90% 50%,rgba(200,16,46,.1),transparent 50%);
    animation:chBgShift 6s ease-in-out infinite alternate;
}
@keyframes chBgShift{from{opacity:.7}to{opacity:1}}
.champion-trophy-anim{
    font-size:62px;position:relative;z-index:2;flex-shrink:0;
    animation:champTrophy 3s ease-in-out infinite;
    filter:drop-shadow(0 0 20px rgba(255,215,0,.7));
}
@keyframes champTrophy{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.12) rotate(5deg)}}
.champion-hero-text{position:relative;z-index:2;}
.champion-hero-text h2{
    font-size:24px;font-weight:900;color:white;letter-spacing:2px;
    background:linear-gradient(90deg,white,var(--gold),white);
    background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:titleShimmer 3s linear infinite;
}
.champion-hero-text p{font-size:13px;color:rgba(255,255,255,.65);margin-top:6px;}
.pts-gold{
    background:linear-gradient(90deg,var(--gold),var(--gold2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-size:15px;font-weight:900;
}

.champion-result-banner{
    display:flex;align-items:center;gap:20px;
    background:linear-gradient(135deg,#fffbf0,#fff8e1);
    border:3px solid var(--gold);border-radius:20px;padding:22px 28px;
    margin-bottom:24px;box-shadow:0 8px 32px rgba(255,215,0,.22);
    animation:champBannerIn .6s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes champBannerIn{from{opacity:0;transform:scale(.9) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.champion-result-icon{font-size:56px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));animation:champFlag 3s ease-in-out infinite;}
@keyframes champFlag{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}
.champion-result-label{font-size:11px;font-weight:800;color:var(--gold2);text-transform:uppercase;letter-spacing:1px;}
.champion-result-country{font-size:28px;font-weight:900;color:var(--dark);margin-top:3px;}

.champion-bets-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.champion-bet-card{
    background:white;border-radius:18px;padding:20px;
    border:2px solid rgba(0,48,135,.08);
    box-shadow:0 3px 16px rgba(0,48,135,.07);
    transition:var(--tr);animation:sectionIn .4s ease both;
}
.champion-bet-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,48,135,.13);}
.champ-card-me{border-color:var(--blue)!important;background:linear-gradient(135deg,#eff6ff,white)!important;}
.champ-card-win{
    border-color:var(--gold)!important;
    background:linear-gradient(135deg,#fffbf0,white)!important;
    box-shadow:0 8px 32px rgba(255,215,0,.22)!important;
}
.champ-card-player{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid #f0f4ff;}
.champ-player-avatar{font-size:26px;animation:bpFlag 4s ease-in-out infinite;}
.champ-player-name{font-size:14px;font-weight:800;color:var(--dark);}
.champ-card-bet{display:flex;flex-direction:column;gap:8px;}
.champ-select{
    width:100%;padding:10px 36px 10px 14px;
    border:2px solid #e5e9f0;border-radius:12px;
    font-size:13px;font-family:var(--font);font-weight:700;
    background:#f8faff;color:var(--dark);transition:var(--tr);appearance:none;cursor:pointer;
}
.champ-select:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 4px rgba(0,48,135,.1);}
.champ-select-wrap{display:flex;align-items:center;gap:8px;flex:1;}
.champ-readonly-bet{
    font-size:15px;font-weight:800;color:var(--dark);
    padding:10px 16px;background:linear-gradient(135deg,#f0f4ff,#f8faff);
    border-radius:12px;border:2px solid #e0e6f0;
}
.champ-card-pts{margin-top:12px;display:flex;justify-content:center;}
.champion-admin-zone{padding:4px 0;}
.champion-admin-select{display:flex;flex-direction:column;gap:8px;max-width:360px;}

.avatar-hero{
    background:linear-gradient(135deg,var(--dark),var(--dark3));
    border-radius:18px;padding:24px 28px;margin-bottom:24px;
    display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;
}
.avatar-hero::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 20% 50%,rgba(255,215,0,.08),transparent 60%);}
.avatar-hero-icon{font-size:46px;filter:drop-shadow(0 0 14px rgba(255,215,0,.5));
    animation:heroIcon 3s ease-in-out infinite;position:relative;}
@keyframes heroIcon{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.1) rotate(5deg)}}
.avatar-hero-text h2{font-size:20px;font-weight:900;color:white;letter-spacing:1px;position:relative;}
.avatar-hero-text p{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px;position:relative;}

/* Carte avatar joueur */
.avatar-player-card{
    background:white;border-radius:18px;padding:24px;margin-bottom:20px;
    box-shadow:0 2px 14px rgba(0,48,135,.08);border:1px solid rgba(0,48,135,.07);
    animation:sectionIn .4s ease both;transition:var(--tr);
}
.avatar-player-card:hover{box-shadow:0 8px 28px rgba(0,48,135,.12);transform:translateY(-2px);}

.avatar-card-top{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding-bottom:18px;border-bottom:2px solid #f0f4ff;flex-wrap:wrap;}
.avatar-preview-big{
    width:68px;height:68px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:36px;flex-shrink:0;cursor:pointer;
    background:linear-gradient(135deg,var(--dark),var(--dark3));
    border:3px solid transparent;transition:var(--tr);
    box-shadow:0 4px 14px rgba(0,0,0,.2);
    animation:avatarIdle 3s ease-in-out infinite;
}
.avatar-preview-big:hover{transform:scale(1.12) rotate(8deg);border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(255,215,0,.25),0 4px 14px rgba(0,0,0,.2);}
@keyframes avatarIdle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.avatar-preview-big.selected-anim{animation:avatarSel .5s cubic-bezier(.175,.885,.32,1.275);}
@keyframes avatarSel{0%{transform:scale(.8) rotate(-10deg)}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}

.avatar-player-info{flex:1;}
.avatar-player-name{font-size:18px;font-weight:900;color:var(--dark);}
.avatar-current-info{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--gray);}
.avatar-current-flag{font-size:20px;}
.avatar-saved-badge{
    padding:5px 14px;background:linear-gradient(135deg,var(--green),var(--green2));
    color:white;border-radius:20px;font-size:11px;font-weight:800;
    opacity:0;transition:opacity .3s;pointer-events:none;
}
.avatar-saved-badge.show{opacity:1;animation:badgeIn .4s cubic-bezier(.175,.885,.32,1.275);}
@keyframes badgeIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* Recherche + catégories */
.avatar-search{position:relative;margin-bottom:10px;}
.avatar-search input{
    width:100%;padding:9px 14px 9px 36px;border:2px solid #e0e6f0;border-radius:11px;
    font-size:13px;font-family:var(--font);background:#f8faff;transition:var(--tr);
}
.avatar-search input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 4px rgba(0,48,135,.1);}
.avatar-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;}

.avatar-cats{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.acat{
    padding:4px 12px;border:2px solid #e0e6f0;border-radius:20px;
    font-size:11px;font-weight:700;color:var(--gray);cursor:pointer;transition:var(--tr);
    background:white;white-space:nowrap;
}
.acat:hover{border-color:var(--blue);color:var(--blue);}
.acat.active{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 2px 8px rgba(0,48,135,.25);}

/* Grille de drapeaux */
.avatar-flag-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;
    max-height:240px;overflow-y:auto;padding:12px;
    background:#f8faff;border-radius:12px;border:2px solid #e8ecf4;
    scrollbar-width:thin;scrollbar-color:var(--blue) #f0f4ff;
}
.avatar-flag-grid::-webkit-scrollbar{width:5px;}
.avatar-flag-grid::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px;}
.avatar-flag-grid::-webkit-scrollbar-track{background:#f0f4ff;}

.fg-opt{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 3px;border-radius:10px;cursor:pointer;
    transition:var(--tr);border:2px solid transparent;
    background:white;box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.fg-opt:hover{transform:scale(1.15) translateY(-2px);border-color:var(--blue);
    box-shadow:0 4px 12px rgba(0,48,135,.15);z-index:2;position:relative;}
.fg-opt.selected{border-color:var(--gold);background:linear-gradient(135deg,#fffbf0,#fff8e6);
    box-shadow:0 0 0 3px rgba(255,215,0,.3);transform:scale(1.1);}
.fg-opt.hidden{display:none;}
.fg-emoji{font-size:22px;line-height:1;}
.fg-name{font-size:8px;color:var(--gray);font-weight:600;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48px;}

.avatar-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;gap:10px;}
.avatar-selected-preview{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray);font-weight:600;}
.asprv-emoji{font-size:28px;transition:transform .3s;}
.asprv-emoji:hover{transform:scale(1.3) rotate(8deg);}

.btn-save-avatar{
    padding:10px 20px;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:var(--dark);border:none;border-radius:11px;font-size:12px;font-weight:900;
    cursor:pointer;transition:var(--tr);
    box-shadow:0 4px 14px rgba(255,193,7,.35);letter-spacing:.5px;
    display:flex;align-items:center;gap:7px;
}
.btn-save-avatar:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,193,7,.5);}
.btn-save-avatar:active{transform:translateY(0);}

/* Admin flags grid */
.admin-flags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:4px;}
.admin-flag-card{
    background:#f8faff;border-radius:12px;padding:16px;
    border:2px solid #e8ecf4;transition:var(--tr);
}
.admin-flag-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,48,135,.1);}
.afc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.afc-avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,var(--dark),var(--dark3));
    display:flex;align-items:center;justify-content:center;
    font-size:24px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2);
    transition:var(--tr);cursor:pointer;
}
.afc-avatar:hover{transform:scale(1.15) rotate(6deg);}
.afc-name{font-weight:800;font-size:14px;color:var(--dark);}
.afc-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;
    max-height:150px;overflow-y:auto;padding:8px;
    background:white;border-radius:9px;border:1px solid #e8ecf4;
    scrollbar-width:thin;scrollbar-color:var(--blue) #f0f4ff;
}
.afc-grid::-webkit-scrollbar{width:4px;}
.afc-grid::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px;}
.afc-opt{
    display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:5px 2px;border-radius:7px;cursor:pointer;
    transition:var(--tr);border:2px solid transparent;background:#f8faff;
}
.afc-opt:hover{transform:scale(1.15);border-color:var(--blue);}
.afc-opt.selected{border-color:var(--gold);background:linear-gradient(135deg,#fffbf0,#fff8e6);}
.afc-opt.hidden{display:none;}
.afc-emoji{font-size:18px;}
.afc-save-btn{
    margin-top:10px;width:100%;padding:8px;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:var(--dark);border:none;border-radius:9px;font-size:11px;font-weight:900;
    cursor:pointer;transition:var(--tr);letter-spacing:.5px;
}
.afc-save-btn:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(255,193,7,.4);}

/* Setup */
.setup-hero{background:linear-gradient(135deg,var(--dark),var(--dark3));color:white;
    border-radius:16px;padding:20px 26px;margin-bottom:22px;font-size:18px;font-weight:900;
    letter-spacing:1px;display:flex;align-items:center;gap:11px;}
.setup-card{background:white;border-radius:16px;padding:24px;margin-bottom:18px;
    box-shadow:0 2px 14px rgba(0,48,135,.07);border:1px solid rgba(0,48,135,.06);
    animation:sectionIn .4s ease both;}
@keyframes sectionIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.setup-card:nth-child(2){animation-delay:.05s}.setup-card:nth-child(3){animation-delay:.1s}
.setup-card:nth-child(4){animation-delay:.15s}.setup-card:nth-child(5){animation-delay:.2s}
.setup-card:nth-child(6){animation-delay:.25s}
.scard-header{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:900;color:var(--dark);margin-bottom:16px;}
.setup-info{color:var(--gray);font-size:12px;margin-bottom:16px;}

.btn-add-player{margin-left:auto;padding:8px 16px;background:linear-gradient(135deg,var(--green),var(--green2));
    color:white;border:none;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;transition:var(--tr);}
.btn-add-player:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,166,81,.35);}

.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:8px;}
.player-setup-card{display:flex;gap:10px;align-items:flex-start;background:#f8faff;
    padding:14px;border-radius:12px;border:2px solid #e8ecf4;transition:var(--tr);}
.player-setup-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,48,135,.1);}
.player-setup-num{
    width:30px;height:30px;background:linear-gradient(135deg,var(--blue),#1a4db5);
    color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:13px;flex-shrink:0;margin-top:20px;
    box-shadow:0 2px 6px rgba(0,48,135,.3);
}
.player-setup-fields{flex:1;display:flex;flex-direction:column;gap:9px;}
.btn-delete-player{background:#fff0f3;border:2px solid var(--red);color:var(--red);
    border-radius:8px;padding:5px 9px;cursor:pointer;font-size:13px;transition:var(--tr);flex-shrink:0;align-self:center;}
.btn-delete-player:hover{background:var(--red);color:white;transform:scale(1.15) rotate(5deg);}
.player-add-zone{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px;
    border-radius:12px;border:2px dashed var(--green);color:var(--green);cursor:pointer;
    font-weight:800;font-size:13px;transition:var(--tr);background:white;}
.player-add-zone:hover{background:#f0fff8;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,166,81,.15);}
.add-player-plus{font-size:20px;font-weight:900;}

.admin-creds{display:flex;flex-direction:column;gap:12px;max-width:400px;}
.setup-input{width:100%;padding:11px 14px;border:2px solid #e0e6f0;border-radius:11px;
    font-size:13px;font-family:var(--font);transition:var(--tr);background:#f8faff;}
.setup-input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 4px rgba(0,48,135,.1);}

.unlock-grid{display:flex;flex-direction:column;gap:10px;}
.btn-unlock{padding:13px 20px;background:linear-gradient(135deg,#17a2b8,#0097a7);
    color:white;border:none;border-radius:11px;font-size:13px;font-weight:800;
    cursor:pointer;transition:var(--tr);text-align:left;letter-spacing:.3px;}
.btn-unlock:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(23,162,184,.35);}
.btn-unlock-danger{background:linear-gradient(135deg,var(--red),#e91e42);}
.btn-unlock-danger:hover{box-shadow:0 6px 20px rgba(200,16,46,.35);}

.rules-list{display:flex;flex-direction:column;gap:9px;}
.rule-row{display:flex;align-items:center;gap:14px;padding:11px 14px;
    background:#f8faff;border-radius:9px;border-left:4px solid var(--blue);
    font-size:13px;color:var(--dark);font-weight:600;transition:var(--tr);}
.rule-row:hover{transform:translateX(5px);background:#f0f4ff;}

/* Boutons généraux */
.btn-primary{padding:11px 20px;background:linear-gradient(135deg,var(--blue),#1a4db5);
    color:white;border:none;border-radius:11px;font-size:13px;font-weight:800;
    cursor:pointer;transition:var(--tr);box-shadow:0 4px 14px rgba(0,48,135,.3);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,48,135,.4);}
.btn-secondary{padding:11px 20px;background:linear-gradient(135deg,#546e7a,#455a64);
    color:white;border:none;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.2);}
.btn-danger{padding:11px 20px;background:linear-gradient(135deg,var(--red),#e91e42);
    color:white;border:none;border-radius:11px;font-size:13px;font-weight:800;
    cursor:pointer;transition:var(--tr);box-shadow:0 4px 14px rgba(200,16,46,.3);}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(200,16,46,.4);}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);
    display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;
    animation:modalBg .25s ease;backdrop-filter:blur(6px);}
@keyframes modalBg{from{opacity:0}to{opacity:1}}
.modal-box{background:white;border-radius:22px;padding:38px 34px;
    max-width:380px;width:100%;text-align:center;
    box-shadow:0 40px 80px rgba(0,0,0,.4);
    animation:modalPop .4s cubic-bezier(.175,.885,.32,1.275);
    position:relative;overflow:hidden;}
.modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,var(--red),var(--gold),var(--blue));
    animation:rainbowShift 3s linear infinite;}
@keyframes modalPop{from{opacity:0;transform:scale(.7) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-icon{font-size:50px;display:block;margin-bottom:14px;
    animation:modalIconPop .5s .15s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes modalIconPop{from{opacity:0;transform:scale(.3) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.modal-box h3{font-size:19px;color:var(--dark);margin-bottom:9px;font-weight:900;}
.modal-box p{font-size:13px;color:var(--gray);margin-bottom:26px;line-height:1.6;}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* Toasts */
#toastContainer{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.toast{padding:12px 20px;border-radius:12px;font-weight:800;font-size:13px;color:white;
    box-shadow:0 6px 24px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;
    max-width:300px;animation:toastIn .4s cubic-bezier(.175,.885,.32,1.275) both;
    border:1px solid rgba(255,255,255,.2);}
.toast.removing{animation:toastOut .3s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(70px) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(70px)}}
.toast-success{background:linear-gradient(135deg,var(--green),var(--green2));}
.toast-lock   {background:linear-gradient(135deg,var(--red),#e91e42);}
.toast-info   {background:linear-gradient(135deg,var(--blue),#1a4db5);}
.toast-warn   {background:linear-gradient(135deg,#ff8f00,#ffb300);color:#1a1a1a;}

/* ══ CHAT GLOBAL ══ */
.chat-fab{
    position:fixed;bottom:24px;right:24px;z-index:9998;
    width:60px;height:60px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),#1a4db5);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 24px rgba(0,48,135,.4);cursor:pointer;
    transition:var(--tr);animation:chatFabPulse 3s ease-in-out infinite;
}
.chat-fab:hover{transform:scale(1.1) rotate(8deg);box-shadow:0 10px 32px rgba(0,48,135,.5);}
@keyframes chatFabPulse{0%,100%{box-shadow:0 6px 24px rgba(0,48,135,.4)}50%{box-shadow:0 6px 30px rgba(0,48,135,.65)}}
.chat-fab-icon{font-size:26px;}
.chat-unread{
    position:absolute;top:-4px;right:-4px;
    background:linear-gradient(135deg,var(--red),#e91e42);color:white;
    font-size:11px;font-weight:900;min-width:22px;height:22px;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:2px solid white;box-shadow:0 2px 8px rgba(200,16,46,.5);
    animation:ptsIn .3s cubic-bezier(.175,.885,.32,1.275) both;
}

.chat-panel{
    position:fixed;bottom:24px;right:24px;z-index:9999;
    width:360px;max-width:calc(100vw - 32px);
    height:520px;max-height:calc(100vh - 100px);
    background:white;border-radius:20px;
    box-shadow:0 16px 50px rgba(0,0,0,.25);
    display:flex;flex-direction:column;overflow:hidden;
    animation:chatPanelIn .35s cubic-bezier(.175,.885,.32,1.275);
    border:1px solid rgba(0,48,135,.08);
}
@keyframes chatPanelIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.chat-panel-header{
    background:linear-gradient(135deg,var(--dark),var(--dark3));
    color:white;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
    position:relative;overflow:hidden;flex-shrink:0;
}
.chat-panel-header::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 80% 0%,rgba(255,215,0,.12),transparent 60%);}
.chat-header-left{display:flex;align-items:center;gap:10px;position:relative;z-index:1;}
.chat-header-icon{font-size:24px;}
.chat-header-title{font-size:14px;font-weight:800;}
.chat-header-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;}
.chat-close-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;
    font-size:12px;display:flex;align-items:center;justify-content:center;
    transition:var(--tr);position:relative;z-index:1;}
.chat-close-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.1) rotate(90deg);}

.chat-messages{
    flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
    background:linear-gradient(135deg,#f8faff,#fdfdfd);
}
.chat-empty{text-align:center;color:var(--gray);font-size:13px;padding:30px 10px;}
.chat-msg{display:flex;gap:8px;align-items:flex-start;animation:chatMsgIn .3s ease both;}
@keyframes chatMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg-avatar{font-size:22px;flex-shrink:0;line-height:1;margin-top:2px;}
.chat-msg-body{
    background:white;border-radius:12px;padding:8px 12px;
    box-shadow:0 1px 4px rgba(0,48,135,.08);max-width:75%;
    border:1px solid rgba(0,48,135,.06);
}
.chat-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.chat-msg-name{font-size:11px;font-weight:800;color:var(--blue);}
.chat-msg-time{font-size:10px;color:var(--gray);}
.chat-msg-text{font-size:13px;color:var(--dark);line-height:1.4;word-break:break-word;white-space:pre-wrap;}
.chat-msg-me{flex-direction:row-reverse;}
.chat-msg-me .chat-msg-body{background:linear-gradient(135deg,var(--blue),#1a4db5);}
.chat-msg-me .chat-msg-name{color:rgba(255,255,255,.85);}
.chat-msg-me .chat-msg-time{color:rgba(255,255,255,.6);}
.chat-msg-me .chat-msg-text{color:white;}
.chat-msg-admin .chat-msg-body{border:2px solid var(--gold);background:linear-gradient(135deg,#fffbf0,white);}
.chat-msg-admin .chat-msg-name{color:var(--gold2);}
.chat-msg-admin .chat-msg-name::before{content:'👑 ';}

.chat-input-row{
    display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f0f4ff;
    background:white;flex-shrink:0;
}
.chat-input-row input{
    flex:1;padding:10px 14px;border:2px solid #e5e9f0;border-radius:24px;
    font-size:13px;font-family:var(--font);background:#f8faff;color:var(--dark);
    transition:var(--tr);
}
.chat-input-row input:focus{outline:none;border-color:var(--blue);background:white;
    box-shadow:0 0 0 4px rgba(0,48,135,.08);}
.chat-send-btn{
    width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--blue),#1a4db5);color:white;font-size:17px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:var(--tr);box-shadow:0 2px 10px rgba(0,48,135,.3);
}
.chat-send-btn:hover{transform:scale(1.08) rotate(-8deg);}
.chat-send-btn:active{transform:scale(.95);}

@media(max-width:480px){
    .chat-panel{width:calc(100vw - 24px);right:12px;bottom:12px;height:70vh;}
    .chat-fab{right:14px;bottom:14px;}
}

/* ══ HERO GÉNÉRIQUES (Aujourd'hui / Stats / Mur / Défis) ══ */
.today-hero,.stats-hero,.wall-hero,.challenges-hero{
    background:linear-gradient(135deg,#0d1a35,#1a2a50,#0d1a35);
    border-radius:22px;padding:30px 32px;margin-bottom:22px;
    display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;
}
.today-hero-bg,.stats-hero-bg,.wall-hero-bg,.challenges-hero-bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 10% 50%,rgba(0,166,81,.12),transparent 50%),
        radial-gradient(ellipse at 90% 50%,rgba(0,48,135,.18),transparent 50%);
    animation:chBgShift 6s ease-in-out infinite alternate;
}
.today-hero-icon,.stats-hero-icon,.wall-hero-icon,.challenges-hero-icon{
    font-size:50px;position:relative;z-index:2;flex-shrink:0;
    animation:champTrophy 3s ease-in-out infinite;
    filter:drop-shadow(0 0 16px rgba(255,255,255,.35));
}
.today-hero-text,.stats-hero-text,.wall-hero-text,.challenges-hero-text{position:relative;z-index:2;}
.today-hero-text h2,.stats-hero-text h2,.wall-hero-text h2,.challenges-hero-text h2{
    font-size:21px;font-weight:900;color:white;letter-spacing:1px;
}
.today-hero-text p,.stats-hero-text p,.wall-hero-text p,.challenges-hero-text p{
    font-size:12.5px;color:rgba(255,255,255,.6);margin-top:5px;
}
.today-hint{color:rgba(255,215,0,.85)!important;font-weight:700;}

/* ══ ONGLET STATS ══ */
.stats-player-select{display:flex;flex-direction:column;gap:6px;max-width:320px;margin-bottom:20px;}
.stats-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
.stat-card-big{
    background:white;border-radius:16px;padding:20px;text-align:center;
    box-shadow:0 4px 18px rgba(0,48,135,.08);border:1px solid rgba(0,48,135,.06);
    transition:var(--tr);animation:statIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}
.stat-card-big:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,48,135,.14);}
.scb-icon{font-size:28px;margin-bottom:6px;}
.scb-value{font-size:26px;font-weight:900;color:var(--blue);}
.scb-label{font-size:11px;font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.scb-sub{font-size:11px;color:var(--gray);margin-top:3px;}

.stats-breakdown,.badges-section,.evolution-section{
    background:white;border-radius:18px;padding:22px;margin-bottom:20px;
    box-shadow:0 4px 18px rgba(0,48,135,.08);
}
.sbd-title{font-weight:900;font-size:14px;color:var(--dark);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.sbd-bars{display:flex;flex-direction:column;gap:12px;}
.sbd-row{display:flex;align-items:center;gap:12px;font-size:12px;}
.sbd-label{min-width:170px;font-weight:700;color:var(--dark);}
.sbd-bar-track{flex:1;height:12px;background:#f0f4ff;border-radius:8px;overflow:hidden;}
.sbd-bar{height:100%;border-radius:8px;transition:width 1s cubic-bezier(.4,0,.2,1);animation:sbdBarIn 1s ease both;}
@keyframes sbdBarIn{from{width:0!important}}
.sbd-bar-exact{background:linear-gradient(90deg,var(--green),var(--green2));}
.sbd-bar-winner{background:linear-gradient(90deg,var(--blue),#1a4db5);}
.sbd-bar-wrong{background:linear-gradient(90deg,var(--red),#e91e42);}
.sbd-count{min-width:28px;text-align:right;font-weight:900;color:var(--dark);}

/* Badges */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.badge-card{
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:linear-gradient(135deg,#fffbf0,#fff8e6);
    border:2px solid rgba(255,215,0,.3);border-radius:14px;
    transition:var(--tr);animation:ptsIn .4s cubic-bezier(.175,.885,.32,1.275) both;
}
.badge-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px rgba(255,215,0,.25);}
.badge-icon{font-size:30px;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.1));}
.badge-name{font-size:13px;font-weight:900;color:var(--dark);}
.badge-desc{font-size:11px;color:var(--gray);margin-top:2px;}

/* Évolution (graphique SVG) */
.evo-chart-wrap{width:100%;overflow-x:auto;}
.evo-svg{width:100%;min-width:500px;height:auto;display:block;}
.evo-grid{stroke:#eef1f8;stroke-width:1;}
.evo-axis-label{font-size:10px;fill:var(--gray);font-family:var(--font);}
.evo-line{fill:none;stroke-width:2.5;opacity:.85;transition:opacity .2s;}
.evo-line:hover{opacity:1;stroke-width:3.5;}
.evo-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.evo-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:var(--dark);background:#f8faff;padding:5px 12px;border-radius:20px;border:1px solid rgba(0,48,135,.08);}
.evo-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* ══ MINI-CLASSEMENTS PAR PHASE ══ */
.phase-rankings{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px;}
.phase-rank-card{
    background:white;border-radius:16px;padding:18px;
    box-shadow:0 4px 16px rgba(0,48,135,.07);border:1px solid rgba(0,48,135,.06);
}
.phase-rank-title{font-weight:900;font-size:13px;color:var(--blue);margin-bottom:12px;}
.phase-rank-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;border-bottom:1px solid #f5f8ff;}
.phase-rank-row:last-child{border-bottom:none;}
.phase-rank-pos{font-size:16px;width:24px;text-align:center;}
.phase-rank-avatar{font-size:16px;}
.phase-rank-name{flex:1;font-weight:700;color:var(--dark);}
.phase-rank-pts{font-weight:900;color:var(--blue);}

/* ══ MUR DES PRONOSTICS ══ */
.wall-match-block{
    background:white;border-radius:18px;padding:18px 20px;margin-bottom:16px;
    box-shadow:0 4px 16px rgba(0,48,135,.07);border:1px solid rgba(0,48,135,.06);
    animation:sectionIn .4s ease both;
}
.wall-match-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
    margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid #f0f4ff;}
.wall-match-teams{font-weight:800;font-size:14px;color:var(--dark);}
.wall-match-time{font-size:12px;font-weight:800;color:var(--blue);background:#eff6ff;padding:4px 10px;border-radius:14px;}
.wall-bets-grid{display:flex;flex-wrap:wrap;gap:8px;}
.wall-bet-chip{
    display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;
    font-size:12px;font-weight:700;border:1px solid transparent;transition:var(--tr);
}
.wall-bet-chip:hover{transform:translateY(-2px);}
.wall-bet-pending{background:linear-gradient(135deg,#eff6ff,#e6f0ff);color:var(--blue);border-color:rgba(0,48,135,.12);}
.wall-bet-locked{background:linear-gradient(135deg,#e8f5e9,#d4f0d6);color:#2e7d32;border-color:rgba(0,166,81,.2);}
.wall-bet-empty{background:#f5f5f5;color:var(--gray);border:1px dashed #ccc;font-weight:600;}
.wall-bet-score{font-weight:900;}
.wall-bet-lock,.wall-bet-lock-empty{font-size:10px;}

/* ══ ONGLET DÉFIS ══ */
.challenge-create-card{
    background:white;border-radius:18px;padding:22px;margin-bottom:20px;
    box-shadow:0 4px 18px rgba(0,48,135,.08);
}
.challenge-form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;}
.challenges-list{display:flex;flex-direction:column;gap:14px;}
.challenge-card{
    background:white;border-radius:16px;padding:18px 20px;
    box-shadow:0 4px 16px rgba(0,48,135,.07);border:2px solid rgba(0,48,135,.06);
    transition:var(--tr);animation:sectionIn .4s ease both;
}
.challenge-card.challenge-done{border-color:rgba(255,215,0,.35);background:linear-gradient(135deg,#fffbf0,white);}
.challenge-card.challenge-refused{opacity:.6;}
.challenge-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.challenge-vs{font-weight:800;font-size:13px;color:var(--dark);}
.challenge-match-info{font-size:12px;color:var(--gray);margin-bottom:10px;}
.challenge-status{font-size:12px;font-weight:700;padding:8px 14px;border-radius:10px;display:inline-block;}
.challenge-status-pending{background:#fff3e0;color:#b35900;}
.challenge-status-accepted{background:#e8f5e9;color:#2e7d32;margin-bottom:10px;display:block;}
.challenge-status-refused{background:#fdecea;color:var(--red);}
.challenge-actions{display:flex;gap:8px;}
.challenge-scores{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.challenge-score-row{display:flex;align-items:center;justify-content:space-between;
    font-size:12px;font-weight:700;color:var(--dark);background:#f8faff;padding:8px 12px;border-radius:10px;}
.challenge-score-val{display:flex;align-items:center;gap:8px;font-weight:900;}
.challenge-result{margin-top:10px;font-weight:900;font-size:13px;text-align:center;padding:10px;border-radius:10px;}
.challenge-result.challenge-win{background:linear-gradient(135deg,#fffbf0,#fff3d0);color:var(--gold2);border:2px solid var(--gold);}
.challenge-result.challenge-draw{background:#f0f4ff;color:var(--blue);}

/* ══ RÉACTIONS CHAT ══ */
.chat-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.chat-reaction-chip{
    display:inline-flex;align-items:center;gap:3px;font-size:11px;
    background:#f0f4ff;border:1px solid rgba(0,48,135,.12);border-radius:12px;
    padding:2px 8px;cursor:pointer;transition:var(--tr);
}
.chat-reaction-chip:hover{transform:scale(1.08);}
.chat-reaction-mine{background:linear-gradient(135deg,#eff6ff,#e0ecff);border-color:var(--blue);}
.chat-reaction-count{font-weight:800;font-size:10px;color:var(--blue);}
.chat-reaction-trigger{
    font-size:11px;color:var(--gray);cursor:pointer;margin-top:4px;
    display:inline-block;opacity:.5;transition:var(--tr);user-select:none;
}
.chat-reaction-trigger:hover{opacity:1;}
.chat-reaction-picker{
    display:none;gap:4px;margin-top:6px;background:white;border:1px solid #eef1f8;
    border-radius:10px;padding:5px 8px;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.chat-reaction-picker.show{display:flex;}
.chat-reaction-opt{font-size:15px;cursor:pointer;transition:transform .15s;}
.chat-reaction-opt:hover{transform:scale(1.3);}
.chat-msg-me .chat-reaction-trigger{color:rgba(255,255,255,.7);}

/* ══ CONFETTIS ══ */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:99998;overflow:hidden;}
.confetti-piece{
    position:absolute;top:-10px;
    animation:confettiFall linear forwards;
}
.confetti-emoji{font-size:20px;background:none!important;}
@keyframes confettiFall{
    0%{transform:translateY(-10px) rotate(0deg);opacity:1;}
    100%{transform:translateY(105vh) rotate(var(--rot));opacity:.3;}
}

/* Responsive */
@media(max-width:768px){
    .tab-pane{padding:14px;}
    .team-flag-big{font-size:30px;}.team-name{font-size:13px;}
    .ni{font-size:16px;}.nl{display:none;}
    .header-main{padding:10px 14px;}.h-trophy{font-size:26px;}.h-title{font-size:11px;}
    .bet-player{min-width:auto;width:100%;}.bet-pts{margin-left:0;}
    .admin-team{max-width:80px;font-size:11px;}
    .day-separator{flex-wrap:wrap;gap:6px;}
    .challenge-form{grid-template-columns:1fr;}
    .today-hero,.stats-hero,.wall-hero,.challenges-hero{padding:20px;gap:14px;}
    .today-hero-icon,.stats-hero-icon,.wall-hero-icon,.challenges-hero-icon{font-size:36px;}
    .today-hero-text h2,.stats-hero-text h2,.wall-hero-text h2,.challenges-hero-text h2{font-size:17px;}
}
@media(max-width:480px){
    .login-box{border-radius:20px;}
    .login-form,.login-footer,.admin-zone{padding-left:20px;padding-right:20px;}
    .login-title-block{padding-left:20px;padding-right:20px;}
    .login-trophy{font-size:52px;}.login-year span{font-size:28px;}
    .stats-summary{grid-template-columns:repeat(2,1fr);}
    .score-input{width:48px;font-size:15px;}
    #toastContainer{right:10px;bottom:10px;}
}