/* =========================================================
   DMGC RANKING PAGE
   COMPLETE CLEAN CSS
   ========================================================= */

.dmgc-rank-page{
    max-width:none;
    width:100%;
    margin:0 auto;
    padding:32px 100px;
    color:#fff;
    background:#0d0e10;
    font-family:inherit;
    box-sizing:border-box;
}

.dmgc-rank-page *,
.dmgc-rank-page *::before,
.dmgc-rank-page *::after{
    box-sizing:border-box;
}


/* =========================================================
   HEADING
   ========================================================= */

.dmgc-rank-heading{
    border-bottom:1px solid #25272b;
    margin-bottom:22px;
}

.dmgc-rank-heading h1{
    font-size:32px;
    margin:0 0 16px;
    font-weight:800;
}

.dmgc-rank-tabs{
    display:flex;
    gap:28px;
}

.dmgc-rank-tabs a{
    color:#999;
    text-decoration:none;
    padding:12px 4px;
    border-bottom:2px solid transparent;
    font-weight:700;
}

.dmgc-rank-tabs a.active{
    color:#ffc400;
    border-color:#ffc400;
}


/* =========================================================
   SEARCH
   ========================================================= */

.dmgc-rank-search{
    display:flex;
    gap:10px;
    margin:22px 0;
    width:100%;
}

.dmgc-rank-search input{
    flex:1;
    max-width:560px;

    background:#17191d;

    border:1px solid #303238;
    border-radius:8px;

    color:#fff;

    padding:13px 15px;

    outline:none;
}

.dmgc-rank-search input:focus{
    border-color:#ffc400;
}

.dmgc-rank-search button{
    background:#ffc400;
    color:#111;

    border:0;
    border-radius:8px;

    padding:0 22px;

    font-weight:800;

    cursor:pointer;
}

.dmgc-rank-search a{
    align-self:center;
    color:#aaa;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.dmgc-rank-page h2{
    font-size:15px;

    color:#e5b400;

    margin:28px 0 14px;
}


/* =========================================================
   TOP 10 GRID
   FULL WIDTH
   ========================================================= */

.dmgc-top-grid{
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:16px !important;

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;
}


/* =========================================================
   TOP 10 PLAYER CARD
   PORTRAIT
   ========================================================= */

.dmgc-top-card{
    position:relative !important;

    width:100% !important;

    height:365px !important;

    min-height:365px !important;

    max-height:365px !important;

    padding:10px !important;

    margin:0 !important;

    box-sizing:border-box !important;

    background:#17191c !important;

    border:1px solid #2b2d31 !important;

    border-radius:12px !important;

    overflow:hidden !important;

    cursor:pointer !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.dmgc-top-card:hover{
    transform:translateY(-3px);

    border-color:#ffc400 !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}

.dmgc-top-card:focus-visible{
    outline:2px solid #ffc400;
    outline-offset:2px;
}


/* =========================================================
   RANK NUMBER
   ========================================================= */

.dmgc-top-card .rank-no{
    position:absolute !important;

    top:0 !important;
    right:0 !important;

    z-index:10 !important;

    background:#ffc400;

    color:#111;

    padding:8px 11px;

    border-radius:0 11px 0 8px;

    font-size:14px;

    font-weight:900;
}

.dmgc-top-card.rank-1{
    border-color:#ffc400 !important;
}

.dmgc-top-card.rank-2 .rank-no{
    background:#b9bec7;
}

.dmgc-top-card.rank-3 .rank-no{
    background:#b86620;
}


/* =========================================================
   PLAYER PHOTO
   PORTRAIT PHOTO BOX
   ========================================================= */

.dmgc-top-card .rank-photo{
    width:100% !important;

    height:285px !important;

    min-height:285px !important;

    max-height:285px !important;

    aspect-ratio:auto !important;

    padding:0 !important;

    margin:0 !important;

    background:#111 !important;

    border-radius:8px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:hidden !important;
}


/* PLAYER IMAGE */

.dmgc-top-card .rank-photo img{
    width:100% !important;

    height:100% !important;

    max-width:100% !important;

    max-height:100% !important;

    object-fit:contain !important;

    display:block !important;
}


/* DEFAULT ICON */

.dmgc-top-card .rank-photo span{
    font-size:52px;
}


/* =========================================================
   PLAYER NAME
   ========================================================= */

.dmgc-top-card h3{
    margin:8px 0 3px !important;

    padding:0 !important;

    height:18px !important;

    font-size:14px !important;

    line-height:18px !important;

    color:#fff !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}


/* =========================================================
   TEAM NAME
   ========================================================= */

.dmgc-top-card p{
    margin:0 !important;

    padding:0 !important;

    height:15px !important;

    font-size:11px !important;

    line-height:15px !important;

    color:#888 !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
}


/* =========================================================
   POINTS
   ========================================================= */

.dmgc-top-card strong{
    display:block !important;

    margin-top:4px !important;

    padding:0 !important;

    color:#ffc400 !important;

    font-size:12px !important;

    line-height:15px !important;
}


/* =========================================================
   RANKING TABLE
   ========================================================= */

.dmgc-rank-table-wrap{
    width:100%;

    overflow-x:auto;

    background:#17191b;

    border-radius:6px;
}

.dmgc-rank-table{
    width:100%;

    border-collapse:collapse;

    min-width:720px;
}

.dmgc-rank-table th{
    padding:13px 14px;

    background:#101113;

    color:#d8ae00;

    font-size:10px;

    text-align:left;

    white-space:nowrap;
}

.dmgc-rank-table td{
    padding:14px;

    border-bottom:1px solid #25272a;

    color:#999;

    font-size:13px;
}

.dmgc-rank-row{
    cursor:pointer;

    transition:background .15s ease;
}

.dmgc-rank-row:hover{
    background:#22252a !important;
}

.dmgc-rank-row:focus-visible{
    outline:2px solid #ffc400;
    outline-offset:2px;
}

.dmgc-rank-table tr:nth-child(even){
    background:#1b1d1f;
}

.dmgc-rank-table strong{
    display:block;
    color:#ddd;
}

.dmgc-rank-table small{
    display:block;

    color:#666;

    margin-top:3px;
}


/* =========================================================
   STATUS
   ========================================================= */

.status{
    display:inline-block;

    background:#d8f7e3;

    color:#1b6d3b;

    padding:4px 8px;

    border-radius:5px;

    font-size:10px;

    font-weight:700;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.dmgc-pagination{
    display:flex;

    gap:6px;

    justify-content:center;

    margin:22px 0;

    flex-wrap:wrap;
}

.dmgc-pagination a{
    min-width:34px;

    text-align:center;

    padding:8px 10px;

    border:1px solid #303238;

    border-radius:5px;

    color:#aaa;

    text-decoration:none;
}

.dmgc-pagination a.active{
    background:#ffc400;

    color:#111;

    border-color:#ffc400;
}


/* =========================================================
   DMGC RANKING POPUP - FIXED CENTER
   ========================================================= */

body.dmgc-ranking-modal-open{
    overflow:hidden !important;
}

/* Full screen overlay */
.dmgc-ranking-modal{
    position:fixed !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100vw !important;
    height:100vh !important;

    margin:0 !important;
    padding:20px !important;

    display:none !important;

    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    z-index:2147483647 !important;
}

/* OPEN */
.dmgc-ranking-modal.is-open{
    display:flex !important;
}

/* Dark background */
.dmgc-ranking-modal-overlay{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    background:rgba(0,0,0,.82) !important;

    backdrop-filter:blur(5px);

    z-index:1 !important;
}

/* =========================================================
   POPUP BOX
   ========================================================= */

.dmgc-ranking-modal-box{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    width:min(520px, calc(100vw - 40px)) !important;

    max-width:520px !important;

    max-height:calc(100vh - 40px) !important;

    margin:0 auto !important;

    padding:28px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    box-sizing:border-box !important;

    background:#17191d !important;

    border:1px solid #34373d !important;

    border-radius:18px !important;

    color:#fff !important;

    box-shadow:0 24px 80px rgba(0,0,0,.65) !important;

    z-index:2 !important;

    flex:none !important;
}

/* CLOSE BUTTON */

.dmgc-ranking-modal-close{
    position:absolute !important;

    top:10px !important;
    right:12px !important;

    width:40px !important;
    height:40px !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    background:transparent !important;

    color:#bbb !important;

    font-size:32px !important;

    line-height:40px !important;

    cursor:pointer !important;

    z-index:10 !important;
}


/* =========================================================
   POPUP PHOTO
   ========================================================= */

.dmgc-ranking-modal-top{
    position:relative !important;

    display:flex !important;

    justify-content:center !important;
    align-items:center !important;

    width:100% !important;

    margin:8px 0 18px !important;
}

.dmgc-ranking-modal-photo{
    width:180px !important;
    height:225px !important;

    max-width:100% !important;

    margin:0 auto !important;

    border-radius:12px !important;

    background:#101113 !important;

    border:2px solid #343942 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
}

.dmgc-ranking-modal-photo img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
}


/* =========================================================
   RANK BADGE
   ========================================================= */

.dmgc-ranking-modal-rank{
    position:absolute !important;

    left:50% !important;
    bottom:-14px !important;

    transform:translateX(-50%) !important;

    background:#ffc400 !important;

    color:#111 !important;

    border-radius:18px !important;

    padding:7px 18px !important;

    font-weight:900 !important;

    white-space:nowrap !important;

    z-index:5 !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.dmgc-ranking-modal-box h2{
    text-align:center !important;

    font-size:25px !important;

    margin:20px 0 5px !important;

    color:#ffc400 !important;
}

.dmgc-ranking-modal-box>p{
    text-align:center !important;

    color:#999 !important;

    margin:0 0 20px !important;
}


/* =========================================================
   STATS
   ========================================================= */

.dmgc-ranking-modal-stats{
    display:grid !important;

    grid-template-columns:repeat(3,1fr) !important;

    gap:10px !important;

    width:100% !important;

    margin-bottom:18px !important;
}

.dmgc-ranking-modal-stats>div{
    background:#101113 !important;

    border:1px solid #292c31 !important;

    border-radius:10px !important;

    padding:12px 6px !important;

    text-align:center !important;

    box-sizing:border-box !important;
}


/* =========================================================
   DETAILS
   ========================================================= */

.dmgc-ranking-modal-details{
    width:100% !important;

    border-top:1px solid #2a2d31 !important;
}

.dmgc-modal-detail-row{
    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    gap:20px !important;

    padding:13px 2px !important;

    border-bottom:1px solid #25272b !important;
}

.dmgc-modal-detail-row strong{
    text-align:right !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .dmgc-ranking-modal{
        padding:12px !important;
    }

    .dmgc-ranking-modal-box{
        width:calc(100vw - 24px) !important;

        max-width:none !important;

        max-height:calc(100vh - 24px) !important;

        padding:22px 16px !important;

        border-radius:15px !important;
    }

    .dmgc-ranking-modal-photo{
        width:145px !important;
        height:185px !important;
    }

    .dmgc-ranking-modal-stats{
        gap:6px !important;
    }

    .dmgc-ranking-modal-stats>div{
        padding:9px 4px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

    .dmgc-ranking-modal{
        padding:8px !important;
    }

    .dmgc-ranking-modal-box{
        width:calc(100vw - 16px) !important;

        max-height:calc(100vh - 16px) !important;

        padding:20px 13px !important;
    }

    .dmgc-ranking-modal-photo{
        width:125px !important;
        height:160px !important;
    }

    .dmgc-ranking-modal-box h2{
        font-size:21px !important;
    }

    .dmgc-ranking-modal-stats>div{
        padding:8px 3px !important;
    }
}


/* =========================================================
   FINAL POPUP POSITION FIX
   The modal is rendered outside .dmgc-rank-page.
   Elementor containers therefore cannot change its containing block.
   ========================================================= */

html body .dmgc-ranking-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    margin:0 !important;
    padding:20px !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    z-index:2147483647 !important;
}

html body .dmgc-ranking-modal.is-open{
    display:flex !important;
}

html body .dmgc-ranking-modal-overlay{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    background:rgba(0,0,0,.82) !important;
    z-index:1 !important;
}

html body .dmgc-ranking-modal-box{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:min(520px,calc(100vw - 40px)) !important;
    max-width:520px !important;
    height:auto !important;
    max-height:calc(100vh - 40px) !important;
    margin:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    z-index:2 !important;
}

html body .dmgc-ranking-modal-close{
    position:absolute !important;
}

@media(max-width:700px){
    html body .dmgc-ranking-modal{
        padding:12px !important;
    }
    html body .dmgc-ranking-modal-box{
        width:calc(100vw - 24px) !important;
        max-width:none !important;
        max-height:calc(100vh - 24px) !important;
    }
}

@media(max-width:480px){
    html body .dmgc-ranking-modal{
        padding:8px !important;
    }
    html body .dmgc-ranking-modal-box{
        width:calc(100vw - 16px) !important;
        max-height:calc(100vh - 16px) !important;
    }
}

/* =========================================================
   FINAL PLAYER CARD PORTRAIT SIZE
   ========================================================= */

.dmgc-rank-page .dmgc-top-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
}

.dmgc-rank-page .dmgc-top-card{
    width:100% !important;
    height:365px !important;
    min-height:365px !important;
    max-height:365px !important;
    overflow:hidden !important;
}

.dmgc-rank-page .dmgc-top-card .rank-photo{
    width:100% !important;
    height:285px !important;
    min-height:285px !important;
    max-height:285px !important;
    aspect-ratio:auto !important;
}

.dmgc-rank-page .dmgc-top-card .rank-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

@media(max-width:900px){
    .dmgc-rank-page .dmgc-top-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }
    .dmgc-rank-page .dmgc-top-card{
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;
    }
    .dmgc-rank-page .dmgc-top-card .rank-photo{
        height:220px !important;
        min-height:220px !important;
        max-height:220px !important;
    }
}

@media(max-width:700px){
    .dmgc-rank-page{
        padding:20px 12px !important;
    }
    .dmgc-rank-page .dmgc-top-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .dmgc-rank-page .dmgc-top-card{
        height:250px !important;
        min-height:250px !important;
        max-height:250px !important;
        padding:7px !important;
    }
    .dmgc-rank-page .dmgc-top-card .rank-photo{
        height:180px !important;
        min-height:180px !important;
        max-height:180px !important;
    }
}

@media(max-width:480px){
    .dmgc-rank-page{
        padding:16px 10px !important;
    }
    .dmgc-rank-page .dmgc-top-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }
    .dmgc-rank-page .dmgc-top-card{
        height:225px !important;
        min-height:225px !important;
        max-height:225px !important;
        padding:6px !important;
    }
    .dmgc-rank-page .dmgc-top-card .rank-photo{
        height:158px !important;
        min-height:158px !important;
        max-height:158px !important;
    }
}

/* =========================================================
   MODAL PORTAL - MUST BE DIRECT CHILD OF BODY
   ========================================================= */
body > .dmgc-ranking-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 2147483647 !important;
}

body > .dmgc-ranking-modal.is-open {
    display: flex !important;
}

body > .dmgc-ranking-modal .dmgc-ranking-modal-box {
    position: relative !important;
    margin: 0 !important;
    transform: none !important;
}

/* =========================================================
   POPUP STATS - FINAL MOBILE FIX
   GLOBAL POINTS / FINISHES / STATUS
   ========================================================= */

.dmgc-ranking-modal-stats{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    margin:0 0 20px !important;
}

.dmgc-ranking-modal-stats > div{
    min-width:0 !important;
    width:100% !important;
    padding:14px 8px !important;
    text-align:center !important;
    overflow:hidden !important;
}

/* Label */
.dmgc-ranking-modal-stats span{
    display:block !important;
    width:100% !important;
    margin:0 0 6px !important;
    font-size:11px !important;
    line-height:14px !important;
    font-weight:700 !important;
    white-space:normal !important;
}

/* Value */
.dmgc-ranking-modal-stats strong{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:20px !important;
    white-space:nowrap !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

    .dmgc-ranking-modal-stats{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .dmgc-ranking-modal-stats > div{
        padding:12px 5px !important;
    }

    .dmgc-ranking-modal-stats span{
        font-size:9px !important;
        line-height:12px !important;
        margin-bottom:5px !important;
    }

    .dmgc-ranking-modal-stats strong{
        font-size:14px !important;
        line-height:18px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .dmgc-ranking-modal-stats{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:6px !important;
    }

    .dmgc-ranking-modal-stats > div{
        padding:11px 3px !important;
    }

    .dmgc-ranking-modal-stats span{
        font-size:8px !important;
        line-height:11px !important;
    }

    .dmgc-ranking-modal-stats strong{
        font-size:13px !important;
        line-height:17px !important;
    }
}