/* =========================================================
   champions.css — FINALISSIMA LEAGUE CHAT (v=10)
   التصميم العام + توقيع الأدمن
========================================================= */

/* =========================================================
   1) WRAPPER
========================================================= */

.champions-wrapper{
    width:100%;
    padding:0 4px 20px;
    direction:rtl;
    font-family:inherit;
    background:#FAF6F0;
}

/* =========================================================
   2) ADMIN ACTIONS
========================================================= */

.champ-admin-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin:20px auto 24px;
    padding:0 16px;
    flex-wrap:wrap;
    direction:rtl;
}

.champ-admin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 36px;
    border-radius:50px;
    font-size:14px;
    font-weight:900;
    letter-spacing:1.2px;
    cursor:pointer;
    font-family:'Cairo', 'Tajawal', sans-serif;
    transition:all .3s ease;
    border:2px solid #D4B77A;
    position:relative;
    overflow:hidden;
    min-width:180px;
}

.champ-admin-btn::before{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
    animation:champBtnShine 3s ease-in-out infinite;
}

@keyframes champBtnShine{
    0%{left:-100%;}
    50%, 100%{left:100%;}
}

.champ-admin-start{
    background:linear-gradient(135deg, #8B1A2F 0%, #6B0F1F 100%);
    color:#FAF6F0;
    box-shadow:
        0 6px 24px rgba(139,26,47,.5),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.champ-admin-start:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(139,26,47,.7);
}

.champ-admin-reset{
    background:linear-gradient(135deg, #D4B77A 0%, #8B7340 100%);
    color:#1A1A1A;
    box-shadow:
        0 6px 24px rgba(212,183,122,.5),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.champ-admin-reset:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 32px rgba(212,183,122,.7);
}

.champ-admin-btn:active{
    transform:translateY(0) scale(.98);
}

.champ-admin-btn i{
    font-size:18px;
}

.champ-admin-footer{
    display:flex;
    justify-content:center;
    margin:26px auto 0;
    padding:0 16px;
}

.champ-admin-btn-small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 22px;
    background:linear-gradient(135deg, #FAF6F0 0%, #FFFFFF 100%);
    color:#8B1A2F;
    border:2px solid #D4B77A;
    border-radius:50px;
    font-size:12px;
    font-weight:900;
    letter-spacing:0.8px;
    cursor:pointer;
    font-family:'Cairo', 'Tajawal', sans-serif;
    transition:all .3s ease;
}

.champ-admin-btn-small:hover{
    background:#FAF6F0;
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(212,183,122,.3);
}

.champ-admin-btn-small i{
    font-size:16px;
}

/* ⭐ توقيع الأدمن — 10% شفافية + 5s للدخول */
.champ-admin-signature{
    display:block;
    margin:18px auto 4px;
    padding:6px 14px;
    font-size:10px;
    font-weight:400;
    color:#8B1A2F;
    opacity:0.1;
    letter-spacing:0.6px;
    text-align:center;
    cursor:default;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .3s ease;
    width:fit-content;
    border-radius:8px;
}

.champ-admin-signature:active{
    opacity:0.25;
}

/* =========================================================
   3) STATUS TEXT
========================================================= */

.champions-status-text{
    margin-top:14px;
    font-size:13px;
    font-weight:800;
    color:#8B1A2F;
    letter-spacing:0.4px;
    text-align:center;
}

.champions-status-text strong{
    color:#D4B77A;
    font-weight:900;
}

.champions-status-text i{
    font-size:16px;
    color:#D4B77A;
    vertical-align:middle;
    margin-inline-end:4px;
}

/* =========================================================
   4) 2 TABS
========================================================= */

.champ-view-tabs{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin:16px 0 20px;
    padding:0 8px;
    flex-wrap:wrap;
    direction:rtl;
}

.champ-view-btn{
    flex:1 1 0;
    min-width:120px;
    max-width:200px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 18px;
    background:#FFFFFF;
    color:#8B1A2F;
    border:2px solid #E5D4A5;
    border-radius:14px;
    font-size:13px;
    font-weight:900;
    letter-spacing:0.6px;
    cursor:pointer;
    font-family:'Cairo', 'Tajawal', sans-serif;
    transition:all .25s ease;
    position:relative;
    overflow:hidden;
}

.champ-view-btn:hover{
    background:#FAF6F0;
    border-color:#D4B77A;
    transform:translateY(-1px);
}

.champ-view-btn:active{
    transform:translateY(0) scale(.97);
}

.champ-view-btn.active{
    background:linear-gradient(135deg, #8B1A2F 0%, #6B0F1F 100%);
    color:#D4B77A;
    border-color:#D4B77A;
    box-shadow:0 4px 14px rgba(139,26,47,.35);
}

.champ-view-btn i{
    font-size:17px;
    color:currentColor;
}

.champ-view-btn.active i{
    color:#D4B77A;
}

.champ-view-panel{
    animation:champPanelFade .3s ease;
}

@keyframes champPanelFade{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
}

/* =========================================================
   5) GROUPS SECTION
========================================================= */

.champions-groups-section{
    margin-top:8px;
}

.champions-section-title{
    font-size:16px;
    font-weight:900;
    color:#8B1A2F;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:2px solid #D4B77A;
    display:flex;
    align-items:center;
    gap:10px;
}

.champions-section-title i{
    font-size:20px;
    color:#D4B77A;
}

.champions-groups-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:14px;
}

.champions-group-card{
    background:#fff;
    border:2px solid #E5D4A5;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(139,26,47,.08);
}

.champions-group-card-header{
    background:linear-gradient(135deg, #8B1A2F 0%, #6B0F1F 100%);
    color:#fff;
    font-size:14px;
    font-weight:900;
    letter-spacing:2px;
    padding:10px 14px;
    text-align:center;
    text-transform:uppercase;
    border-bottom:2px solid #D4B77A;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.champions-group-card-header i{
    font-size:18px;
    color:#D4B77A;
}

.champions-group-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.champions-group-table th{
    background:#FAF6F0;
    color:#6B0F1F;
    font-weight:900;
    padding:8px 6px;
    border-bottom:1px solid #E5D4A5;
    font-size:10px;
    letter-spacing:0.5px;
    text-transform:uppercase;
}

.champions-group-table td{
    padding:7px 6px;
    text-align:center;
    font-weight:800;
    color:#333;
    border-bottom:1px solid #F3F4F6;
    font-size:11px;
}

.champions-group-table tr:last-child td{
    border-bottom:none;
}

.champions-group-table tr.qualified{
    background:linear-gradient(90deg,
        rgba(212,183,122,.25) 0%,
        rgba(212,183,122,.08) 50%,
        #fff 100%);
}

.champions-group-table tr.eliminated{
    background:linear-gradient(90deg,
        rgba(139,26,47,.15) 0%,
        rgba(139,26,47,.04) 50%,
        #fff 100%);
}

.champions-group-table .team-cell-mini{
    display:flex;
    align-items:center;
    gap:5px;
    text-align:right;
    padding-right:6px;
}

.champions-group-table .team-cell-mini img{
    width:18px;
    height:18px;
    object-fit:contain;
    flex-shrink:0;
}

.champions-group-table .team-cell-mini span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =========================================================
   6) MATCHES
========================================================= */

.champions-round-section{
    margin-top:8px;
}

.champ-round-label{
    font-size:13px;
    font-weight:900;
    color:#8B1A2F;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:10px 14px;
    margin:16px 0 8px;
    background:linear-gradient(90deg, #FAF6F0 0%, transparent 100%);
    border-right:4px solid #D4B77A;
    border-radius:8px 0 0 8px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.champions-match-row{
    display:grid;
    grid-template-columns:1fr 70px 1fr;
    gap:8px;
    align-items:center;
    padding:10px 12px;
    background:#fff;
    border:1.5px solid #E5D4A5;
    border-radius:12px;
    margin-bottom:8px;
    transition:all .2s ease;
}

.champions-match-row:hover{
    border-color:#D4B77A;
    box-shadow:0 4px 14px rgba(212,183,122,.2);
}

.champions-match-team{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:800;
    color:#333;
    overflow:hidden;
}

.champions-match-team.home{
    justify-content:flex-end;
    text-align:right;
}

.champions-match-team.away{
    justify-content:flex-start;
    text-align:left;
}

.champions-match-team img{
    width:24px;
    height:24px;
    object-fit:contain;
    flex-shrink:0;
}

.champions-match-team span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.champions-match-score{
    text-align:center;
    font-size:14px;
    font-weight:900;
    color:#8B1A2F;
    padding:4px 6px;
    background:#FAF6F0;
    border-radius:8px;
    border:1px solid #E5D4A5;
    letter-spacing:1px;
}

.champions-match-score.pending{
    color:#9CA3AF;
    font-size:11px;
    letter-spacing:0.5px;
}

/* =========================================================
   7) KNOCKOUT BRACKET
========================================================= */

.champions-bracket{
    display:flex;
    gap:16px;
    justify-content:center;
    align-items:center;
    margin-top:22px;
    overflow-x:auto;
    padding:16px 8px 24px;
    -webkit-overflow-scrolling:touch;
}

.champions-bracket-round{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:180px;
}

.champions-bracket-round-label{
    font-size:11px;
    font-weight:900;
    color:#D4B77A;
    letter-spacing:2px;
    text-align:center;
    text-transform:uppercase;
    padding:6px;
    background:linear-gradient(135deg, #8B1A2F 0%, #6B0F1F 100%);
    border-radius:8px;
    border:1px solid #D4B77A;
    margin-bottom:6px;
}

.champions-bracket-match{
    background:#fff;
    border:1.5px solid #E5D4A5;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(139,26,47,.08);
}

.champions-bracket-team{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:6px 10px;
    font-size:11px;
    font-weight:800;
    color:#333;
    border-bottom:1px solid #F3F4F6;
}

.champions-bracket-team:last-child{
    border-bottom:none;
}

.champions-bracket-team.winner{
    background:linear-gradient(90deg,
        rgba(212,183,122,.3) 0%,
        rgba(212,183,122,.05) 100%);
    color:#4A0A15;
}

.champions-bracket-team img{
    width:18px;
    height:18px;
    object-fit:contain;
    flex-shrink:0;
}

.champions-bracket-team-name{
    flex:1;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.champions-bracket-score{
    font-weight:900;
    color:#8B1A2F;
    font-size:12px;
    min-width:30px;
    text-align:center;
}

/* =========================================================
   8) CHAMPION CARD
========================================================= */

.champ-champion-card{
    margin-top:24px;
    padding:28px 20px;
    background:linear-gradient(135deg,
        rgba(139,26,47,.15) 0%,
        rgba(212,183,122,.2) 50%,
        rgba(139,26,47,.15) 100%);
    border:3px solid #D4B77A;
    border-radius:20px;
    text-align:center;
    box-shadow:
        0 10px 40px rgba(212,183,122,.4),
        inset 0 0 30px rgba(212,183,122,.1);
    position:relative;
    overflow:hidden;
    animation:champCardIn .8s ease;
}

@keyframes champCardIn{
    from{opacity:0;transform:scale(.94) translateY(12px);}
    to{opacity:1;transform:scale(1) translateY(0);}
}

.champ-champion-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 18px;
    background:linear-gradient(135deg, #D4B77A 0%, #8B7340 100%);
    color:#1A1A1A;
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    border-radius:50px;
    margin-bottom:16px;
    box-shadow:0 4px 14px rgba(212,183,122,.5);
}

.champ-champion-label i{
    font-size:16px;
}

.champ-champion-logo{
    width:100px;
    height:100px;
    object-fit:contain;
    margin:8px 0;
    filter:drop-shadow(0 6px 20px rgba(212,183,122,.6));
    animation:champChampFloat 3s ease-in-out infinite;
}

@keyframes champChampFloat{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}

.champ-champion-name{
    font-size:26px;
    font-weight:900;
    color:#8B1A2F;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-top:8px;
    text-shadow:
        0 0 20px rgba(212,183,122,.6),
        0 2px 6px rgba(0,0,0,.15);
}

/* =========================================================
   9) EMPTY / LOADING
========================================================= */

.champions-empty{
    text-align:center;
    padding:50px 24px;
    background:linear-gradient(135deg, #FAF6F0 0%, #F5E6D3 100%);
    border:2px dashed #D4B77A;
    border-radius:16px;
    color:#6B0F1F;
    font-size:14px;
    font-weight:800;
    letter-spacing:0.5px;
    margin-top:20px;
}

.champions-empty i{
    display:block;
    font-size:56px;
    color:#D4B77A;
    margin-bottom:14px;
    animation:champEmptyPulse 2s ease-in-out infinite;
}

@keyframes champEmptyPulse{
    0%, 100%{transform:scale(1);opacity:0.9;}
    50%{transform:scale(1.05);opacity:1;}
}

/* =========================================================
   10) MOBILE
========================================================= */

@media(max-width:768px){

    .champ-admin-btn{
        padding:13px 28px;
        font-size:13px;
        min-width:160px;
    }

    .champ-view-tabs{
        gap:6px;
        margin:14px 0 16px;
    }

    .champ-view-btn{
        min-width:100px;
        padding:11px 14px;
        font-size:12px;
        gap:6px;
    }

    .champ-view-btn i{
        font-size:15px;
    }

    .champions-groups-grid{
        grid-template-columns:1fr;
    }

    .champions-match-row{
        grid-template-columns:1fr 60px 1fr;
        padding:9px 10px;
    }

    .champions-match-team{
        font-size:11px;
    }

    .champions-match-team img{
        width:20px;
        height:20px;
    }

    .champions-bracket{
        gap:12px;
    }

    .champions-bracket-round{
        min-width:150px;
    }

    .champions-section-title{
        font-size:14px;
    }

    .champ-round-label{
        font-size:12px;
        padding:9px 12px;
    }

    .champ-champion-card{
        padding:22px 16px;
        margin-top:20px;
    }

    .champ-champion-logo{
        width:85px;
        height:85px;
    }

    .champ-champion-name{
        font-size:22px;
        letter-spacing:2px;
    }

    .champ-champion-label{
        font-size:11px;
        letter-spacing:2px;
        padding:5px 16px;
    }

    .champ-admin-btn-small{
        padding:10px 18px;
        font-size:11px;
    }

    .champ-admin-signature{
        font-size:9px;
    }
}

@media(max-width:480px){

    .champ-admin-actions{
        flex-direction:column;
        gap:10px;
    }

    .champ-admin-btn{
        width:100%;
        max-width:none;
    }

    .champ-view-btn span{
        display:none;
    }

    .champ-view-btn{
        min-width:0;
        flex:1 1 0;
        padding:12px 14px;
    }

    .champ-view-btn i{
        font-size:20px;
    }

    .champ-view-tabs{
        gap:8px;
    }

    .champ-round-label{
        font-size:11px;
        padding:8px 10px;
    }

    .champions-match-row{
        grid-template-columns:1fr 55px 1fr;
        padding:8px;
    }

    .champions-match-team{
        font-size:10px;
    }

    .champions-match-team img{
        width:18px;
        height:18px;
    }

    .champions-match-score{
        font-size:12px;
        padding:3px 5px;
    }

    .champ-champion-card{
        padding:18px 12px;
    }

    .champ-champion-logo{
        width:70px;
        height:70px;
    }

    .champ-champion-name{
        font-size:18px;
        letter-spacing:1.5px;
    }

    .champions-empty i{
        font-size:48px;
    }

    .champions-empty{
        padding:40px 18px;
    }
}

/* =========================================================
   11) REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){
    .champions-empty i,
    .champ-champion-logo,
    .champ-admin-btn::before,
    .champ-admin-signature{
        animation:none !important;
        transition:none !important;
    }
}

/* =========================================================
   12) منع حفظ الصور
========================================================= */

.champions-group-table .team-cell-mini img,
.champions-match-team img,
.champions-bracket-team img,
.champ-champion-logo{
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    user-select:none;
    pointer-events:none;
}
/* =========================================================
   13) SETTINGS — زر أدمن Champions
========================================================= */

.settings-item.settings-champ-admin{
    background:linear-gradient(135deg, #8B1A2F 0%, #6B0F1F 100%);
    border:2px solid #D4B77A;
    color:#D4B77A;
}

.settings-item.settings-champ-admin .si-icon i{
    color:#D4B77A;
}

.settings-item.settings-champ-admin .si-label{
    color:#D4B77A;
    font-weight:900;
    letter-spacing:0.5px;
}

.settings-item.settings-champ-admin:hover{
    background:linear-gradient(135deg, #A02038 0%, #7B1024 100%);
    border-color:#F5E6D3;
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(212,183,122,.4);
}

.settings-item.settings-champ-admin.settings-champ-logout{
    background:linear-gradient(135deg, #FAF6F0 0%, #FFFFFF 100%);
    border-color:#8B1A2F;
    color:#8B1A2F;
}

.settings-item.settings-champ-admin.settings-champ-logout .si-icon i,
.settings-item.settings-champ-admin.settings-champ-logout .si-label{
    color:#8B1A2F;
}

.settings-item.settings-champ-admin.settings-champ-logout:hover{
    background:#FAF6F0;
    border-color:#6B0F1F;
}