/* ============================================================
   HOME RANKINGS  —  MMORPG styled Top 10 leaderboard widget
   Consumes the same fragments the cron job pushes:
   rankings/season1/top_*.html   (no backend changes needed)
   ============================================================ */

.hr-section {
    position: relative;
    padding: 90px 0 100px;
    background:
        radial-gradient(1200px 400px at 50% -10%, rgba(209, 155, 37, .10), transparent 60%),
        linear-gradient(180deg, #0b0c0e 0%, #0e0f11 100%);
    overflow: hidden;
}
.hr-section::before,
.hr-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(209, 155, 37, .45), transparent);
}
.hr-section::before { top: 0; }
.hr-section::after  { bottom: 0; }

/* ---- header ---- */
.hr-header {
    text-align: center;
    margin-bottom: 42px;
}
.hr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.hr-eyebrow-line {
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color, #d19b25));
}
.hr-eyebrow-line:last-child {
    background: linear-gradient(90deg, var(--secondary-color, #d19b25), transparent);
}
.hr-eyebrow-text {
    font-family: "Oxanium", sans-serif;
    letter-spacing: .32em;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-color, #d19b25);
    text-transform: uppercase;
}
.hr-title {
    font-family: "Oxanium", sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 12px;
    text-shadow: 0 2px 30px rgba(209, 155, 37, .18);
}
.hr-subtitle {
    max-width: 620px;
    margin: 0 auto;
    color: #9c9c9c;
    font-size: 15px;
}

/* ---- server switch (Aurora / Old) ---- */
.hr-servers {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}
.hr-srv-group {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}
.hr-srv {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #b0b0b0;
    font-family: "Oxanium", sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .18s ease;
}
.hr-srv:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.hr-srv.active {
    color: #1a140a;
    background: linear-gradient(180deg, #e6c04a, var(--primary-color, #b8721e));
    box-shadow: 0 6px 18px rgba(184, 114, 30, .3);
}
.hr-srv-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #37d67a;
    box-shadow: 0 0 8px rgba(55, 214, 122, .8);
    flex: 0 0 auto;
}
.hr-srv-dot.old { background: #8f8f8f; box-shadow: none; }
.hr-srv.active .hr-srv-dot { background: #1a140a; box-shadow: none; }

/* ---- tabs ---- */
.hr-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
}
.hr-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    color: #b9b9b9;
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .18s ease;
}
.hr-tab i { font-size: 14px; opacity: .8; }
.hr-tab:hover {
    color: #fff;
    border-color: rgba(209, 155, 37, .5);
    background: rgba(209, 155, 37, .07);
}
.hr-tab.active {
    color: #1a140a;
    background: linear-gradient(180deg, #e6c04a, var(--primary-color, #b8721e));
    border-color: var(--secondary-color, #d19b25);
    box-shadow: 0 6px 22px rgba(184, 114, 30, .35);
}
.hr-tab.active i { opacity: 1; }

/* ---- the ornate frame ---- */
.hr-frame {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 3px;
    background: linear-gradient(160deg, rgba(209, 155, 37, .55), rgba(209, 155, 37, .08) 40%, rgba(209, 155, 37, .08) 60%, rgba(209, 155, 37, .55));
    border-radius: 10px;
}
.hr-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.hr-inner {
    position: relative;
    background:
        radial-gradient(600px 200px at 50% 0%, rgba(209, 155, 37, .10), transparent 70%),
        #0e0f11;
    border-radius: 8px;
    overflow: hidden;
}
/* corner ornaments */
.hr-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--secondary-color, #d19b25);
    opacity: .8;
    z-index: 3;
}
.hr-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.hr-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.hr-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.hr-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ---- table ---- */
.hr-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: "Oxanium", Helvetica, Arial, sans-serif;
    color: #c7c7c7;
}
.hr-tbl thead th {
    padding: 16px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--secondary-color, #d19b25);
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(209, 155, 37, .35);
    text-align: center;
    white-space: nowrap;
}
.hr-tbl thead th:nth-child(2) { text-align: left; }
.hr-tbl tbody td {
    padding: 13px 14px;
    font-size: 14.5px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    vertical-align: middle;
}
.hr-tbl tbody td:nth-child(2) { text-align: left; font-weight: 600; color: #eaeaea; }
.hr-tbl tbody tr { transition: background .15s ease; }
.hr-tbl tbody tr:last-child td { border-bottom: 0; }
.hr-tbl tbody tr:hover { background: rgba(209, 155, 37, .06); }
.hr-tbl img { vertical-align: middle; }

/* rank cell + medals */
.hr-rank {
    font-weight: 800;
    color: #8f8f8f;
    width: 60px;
}
.hr-rank .hr-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: #1a140a;
}
.hr-top1 .hr-medal { background: linear-gradient(180deg, #ffe08a, #f3b52d); box-shadow: 0 0 14px rgba(243, 181, 45, .5); }
.hr-top2 .hr-medal { background: linear-gradient(180deg, #eaeaea, #b7b7b7); box-shadow: 0 0 12px rgba(200, 200, 200, .35); }
.hr-top3 .hr-medal { background: linear-gradient(180deg, #e6a562, #b46a29); box-shadow: 0 0 12px rgba(180, 106, 41, .4); }
.hr-tbl tbody tr.hr-top1 { background: rgba(243, 181, 45, .06); }

/* value column emphasis (last col) */
.hr-tbl tbody td:last-child { color: #fff; font-weight: 700; }

/* states */
.hr-state {
    padding: 60px 20px;
    text-align: center;
    color: #8f8f8f;
    font-family: "Oxanium", sans-serif;
}
.hr-state i { font-size: 26px; color: var(--secondary-color, #d19b25); margin-bottom: 12px; display: block; }
.hr-spinner {
    width: 30px; height: 30px;
    margin: 0 auto 14px;
    border: 3px solid rgba(209, 155, 37, .25);
    border-top-color: var(--secondary-color, #d19b25);
    border-radius: 50%;
    animation: hr-spin .8s linear infinite;
}
@keyframes hr-spin { to { transform: rotate(360deg); } }

/* footer / CTA */
.hr-foot {
    text-align: center;
    margin-top: 30px;
}
.hr-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    border: 1px solid rgba(209, 155, 37, .5);
    border-radius: 6px;
    transition: all .18s ease;
}
.hr-view-all:hover {
    background: rgba(209, 155, 37, .12);
    border-color: var(--secondary-color, #d19b25);
    color: #fff;
    gap: 14px;
}

/* ---- responsive ---- */
@media (max-width: 767px) {
    .hr-section { padding: 60px 0 70px; }
    .hr-title { font-size: 30px; }
    .hr-tab { padding: 10px 14px; font-size: 11px; }
    .hr-tab span.hr-tab-label { display: none; }
    .hr-srv { padding: 9px 14px; font-size: 11px; }
    .hr-tbl thead th, .hr-tbl tbody td { padding: 11px 8px; font-size: 13px; }
    /* hide the Ally / secondary column on narrow screens for the 5-col tables */
    .hr-tbl.hr-cols5 th:nth-child(4),
    .hr-tbl.hr-cols5 td:nth-child(4) { display: none; }
}