/* ===== RSCRevived Dragonfire-inspired Highscores Layout =====
   Classic ranking table + skill selector. No Slayer; Runecrafting is included from highscores.php. */

.df-hs-shell{
    margin:24px 0 34px;
}

.df-hs-hero{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    padding:26px;
    border:1px solid rgba(148,177,224,.16);
    border-radius:30px;
    background:
        radial-gradient(circle at 10% 0%, rgba(244,211,122,.16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(75,145,235,.15), transparent 32%),
        linear-gradient(180deg, rgba(13,22,36,.96), rgba(5,9,16,.98));
    box-shadow:0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}

.df-hs-hero h1{
    margin:4px 0 7px;
    color:#fff;
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:.95;
}

.df-hs-hero p{
    margin:0;
    color:#b8c7e4;
    font-weight:900;
}

.df-hs-mode-tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
    max-width:680px;
}

.df-hs-mode-tabs a{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid rgba(148,177,224,.16);
    background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022));
    color:#eaf2ff;
    text-decoration:none;
    font-weight:1000;
}

.df-hs-mode-tabs a.active,
.df-hs-mode-tabs a:hover{
    color:#1b1202;
    border-color:rgba(244,211,122,.78);
    background:linear-gradient(180deg,#fff0a3,#b77b25);
}

.df-hs-layout{
    display:grid;
    grid-template-columns:285px minmax(0,1fr);
    gap:18px;
    margin-top:18px;
    align-items:start;
}

.df-hs-sidebar,
.df-hs-tools,
.df-hs-ranking-card,
.df-hs-profile,
.df-hs-daily{
    border:1px solid rgba(148,177,224,.14);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(14,22,35,.96),rgba(5,9,16,.98));
    box-shadow:0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.df-hs-sidebar{
    position:sticky;
    top:92px;
    overflow:hidden;
}

.df-hs-sidebar-title{
    padding:16px;
    border-bottom:1px solid rgba(148,177,224,.11);
    background:rgba(255,255,255,.025);
}

.df-hs-sidebar-title span,
.df-hs-tools span,
.df-hs-ranking-head span,
.df-hs-profile-head span{
    display:block;
    color:#f4d37a;
    font-size:.70rem;
    font-weight:1000;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.df-hs-sidebar-title strong,
.df-hs-tools strong,
.df-hs-ranking-head strong,
.df-hs-profile-head strong{
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:1.2rem;
}

.df-hs-skills{
    display:grid;
    grid-template-columns:1fr;
    max-height:680px;
    overflow:auto;
    padding:10px;
    gap:7px;
}

.df-hs-skills a{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.025);
    color:#dfeaff;
    text-decoration:none;
    font-weight:950;
}

.df-hs-skills a:hover,
.df-hs-skills a.active{
    border-color:rgba(244,211,122,.42);
    background:linear-gradient(180deg,rgba(244,211,122,.13),rgba(255,255,255,.035));
    color:#fff;
}

.df-hs-skills i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(75,145,235,.28),rgba(12,21,34,.92));
    border:1px solid rgba(148,177,224,.14);
    color:#f4d37a;
    font-style:normal;
    font-weight:1000;
    font-size:.78rem;
}

.df-hs-main{
    display:grid;
    gap:16px;
    min-width:0;
}

.df-hs-tools{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px;
}

.df-hs-tools small{
    display:block;
    margin-top:5px;
    color:#9eb0cc;
    font-weight:800;
}

.df-hs-search{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.df-hs-search input{
    min-width:220px;
    border-radius:14px;
    border:1px solid rgba(148,177,224,.18);
    background:#070c14;
    color:#fff;
    padding:12px 13px;
    font-weight:900;
}

.df-hs-daily{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    color:#dfeaff;
}

.df-hs-daily strong{
    color:#f4d37a;
}

.df-hs-profile{
    padding:18px;
}

.df-hs-profile-head,
.df-hs-ranking-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.df-hs-ranking-head{
    padding:18px 18px 0;
}

.df-hs-ranking-head small{
    color:#9eb0cc;
    font-weight:900;
}

.df-hs-profile-stats{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
}

.df-hs-profile-stats article{
    border:1px solid rgba(148,177,224,.11);
    border-radius:16px;
    background:rgba(255,255,255,.03);
    padding:12px;
}

.df-hs-profile-stats span{
    display:block;
    color:#9eb0cc;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.df-hs-profile-stats strong{
    display:block;
    margin-top:5px;
    color:#f4d37a;
    font-size:1.15rem;
}

.df-hs-ranking-card{
    overflow:hidden;
}

.df-hs-table-wrap{
    overflow:auto;
}

.df-hs-table{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
}

.df-hs-table th{
    padding:12px 16px;
    border-top:1px solid rgba(148,177,224,.10);
    border-bottom:1px solid rgba(148,177,224,.14);
    background:rgba(255,255,255,.035);
    color:#f4d37a;
    text-align:left;
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.df-hs-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(148,177,224,.095);
    color:#eaf2ff;
    font-weight:900;
    vertical-align:middle;
}

.df-hs-table tbody tr:hover td{
    background:rgba(244,211,122,.055);
}

.df-hs-table th:nth-child(1),
.df-hs-table td:nth-child(1){
    width:95px;
    text-align:center;
}

.df-hs-table th:nth-child(3),
.df-hs-table th:nth-child(4),
.df-hs-table td:nth-child(3),
.df-hs-table td:nth-child(4){
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.df-rank-number{
    color:#f4d37a!important;
    font-size:1.1rem;
}

.df-character-cell{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    min-width:0;
}

.df-character-cell strong{
    min-width:0;
}

.df-character-cell a{
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.df-character-cell a:hover{
    color:#f4d37a;
}

.df-mode-pill{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(148,177,224,.18);
    background:rgba(255,255,255,.045);
    color:#e8f2ff;
    font-weight:1000;
    font-size:.72rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.df-mode-pill.one-x{
    color:#1b1202;
    border-color:rgba(244,211,122,.78);
    background:linear-gradient(180deg,#fff0a3,#b77b25);
}

.df-mode-pill.regular{
    color:#e8f2ff;
    border-color:rgba(148,177,224,.18);
    background:rgba(255,255,255,.045);
}

.df-mode-pill.ironman{
    color:#0a1711;
    border-color:rgba(97,227,143,.72);
    background:linear-gradient(180deg,#b9ffd0,#36a962);
}

.df-mode-pill.ultimate-ironman{
    color:#170b02;
    border-color:rgba(255,166,74,.76);
    background:linear-gradient(180deg,#ffd09b,#cf6d25);
}

.df-mode-pill.hardcore-ironman{
    color:#fff4f4;
    border-color:rgba(244,76,90,.78);
    background:linear-gradient(180deg,#bd263d,#67131f);
}

.df-mode-pill.fallen-hardcore{
    color:#eef3ff;
    border-color:rgba(154,166,188,.66);
    background:linear-gradient(180deg,#4f5a70,#202a3d);
}

.df-mode-pill.pker{
    color:#fff7d6;
    border-color:rgba(255,105,105,.72);
    background:linear-gradient(180deg,#7d1d2e,#3f0c16);
}

.df-hs-profile-table{
    min-width:520px;
}

.df-hs-pager{
    padding:16px 18px;
    border-top:1px solid rgba(148,177,224,.10);
}

@media(max-width:1080px){
    .df-hs-layout{
        grid-template-columns:1fr;
    }
    .df-hs-sidebar{
        position:static;
    }
    .df-hs-skills{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:none;
    }
    .df-hs-profile-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:720px){
    .df-hs-hero,
    .df-hs-tools,
    .df-hs-profile-head,
    .df-hs-ranking-head,
    .df-hs-daily{
        align-items:flex-start;
        flex-direction:column;
    }
    .df-hs-search,
    .df-hs-search input,
    .df-hs-search button,
    .df-hs-search a{
        width:100%;
    }
    .df-hs-skills{
        grid-template-columns:1fr;
    }
    .df-hs-profile-stats{
        grid-template-columns:1fr 1fr;
    }
    .df-hs-table{
        min-width:640px;
    }
}
/* RSCRevived correction: remove the ugly letter-circle skill icons. */
.df-hs-skills a{
    grid-template-columns:1fr!important;
    padding:12px 14px!important;
}
.df-hs-skills i{
    display:none!important;
}
.df-hs-skills span{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* Remove the cheap yellow letter circles from the highscores skill menu. */
.df-hs-skills a{
    grid-template-columns:1fr!important;
    padding:12px 14px!important;
}
.df-hs-skills i{
    display:none!important;
}
.df-hs-skills span{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}