/* ==========================================================================
   Home page - hero, stats, community and ranking sections
   ========================================================================== */

.hm-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 18px 60px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   SECTION HEADINGS
   -------------------------------------------------------------------------- */
.hm-section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 26px;
    text-align: center;
}

.hm-section-head .hm-all { margin: 0; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hm-hero { text-align: center; margin-bottom: 10px; }

.hm-hero h1 {
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 18px rgba(255,31,54,.45), 0 4px 14px rgba(0,0,0,.9);
}
.hm-hero h1 em {
    font-style: normal;
    color: var(--op-accent, #f3e5ab);
}

.hm-hero .hm-tagline {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255,77,77,.35);
    background: rgba(255,77,77,.08);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ff4d4d;
}

.hm-desc {
    max-width: 880px;
    margin: 20px auto 0;
    padding: 20px 26px;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.85;
    color: #e2e8f0;
    text-align: center;
    background: linear-gradient(135deg, rgba(20,15,10,.78), rgba(40,30,15,.62));
    border: 1px solid rgba(255,215,0,.28);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.6);
    text-shadow: 1px 1px 4px #000;
}
.hm-desc b { color: #ffd700; font-weight: 900; }

/* --------------------------------------------------------------------------
   DRAGON
   -------------------------------------------------------------------------- */
.hm-dragon {
    position: relative;
    height: 300px;
    margin: -70px 0 -10px;
    pointer-events: none;
}
.hm-dragon img {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-height: 260px;
    filter: drop-shadow(0 0 12px rgba(255,200,0,.4)) drop-shadow(0 0 22px rgba(255,69,0,.3));
    animation: hmSparks 3s ease-in-out infinite alternate;
}
@keyframes hmSparks {
    0%   { transform: translateX(-50%) translateY(0);     filter: drop-shadow(0 0 10px rgba(255,200,0,.4)) drop-shadow(0 0 16px rgba(255,69,0,.3)); }
    50%  { transform: translateX(-50%) translateY(-9px);  filter: drop-shadow(0 0 22px rgba(255,215,0,.85)) drop-shadow(0 0 36px rgba(255,140,0,.7)); }
    100% { transform: translateX(-50%) translateY(0);     filter: drop-shadow(0 0 10px rgba(255,200,0,.4)) drop-shadow(0 0 16px rgba(255,69,0,.3)); }
}

/* --------------------------------------------------------------------------
   STATS
   -------------------------------------------------------------------------- */
.hm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 30px 0 8px;
}
.hm-stat {
    position: relative;
    text-align: center;
    padding: 20px 12px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(18,13,13,.8), rgba(6,5,5,.9));
    border: 1px solid rgba(243,229,171,.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.5);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    overflow: hidden;
}
.hm-stat::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 25%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--op-accent-2, #dfb76c), transparent);
    opacity: .8;
}
.hm-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(243,229,171,.5);
    box-shadow: 0 16px 34px rgba(0,0,0,.6);
}
.hm-stat .n {
    display: block;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--op-accent, #f3e5ab);
    text-shadow: 0 0 16px rgba(243,229,171,.35);
}
.hm-stat .l {
    display: block;
    margin-top: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

/* --------------------------------------------------------------------------
   TWO COLUMNS
   -------------------------------------------------------------------------- */
.hm-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    margin-top: 30px;
}

.hm-box {
    position: relative;
    border-radius: 18px;
    padding: 24px 22px;
    background: linear-gradient(155deg, rgba(18,14,12,.8), rgba(6,5,5,.9));
    border: 1px solid rgba(243,229,171,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.hm-box h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--op-accent-2, #dfb76c);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(243,229,171,.16);
}
.hm-box h3 i { color: var(--op-accent-2, #dfb76c); }

/* CLIENT DOWNLOAD BUTTON */
.hm-client {
    display: block;
    text-align: center;
    padding: 26px 20px;
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(30,20,10,.9), rgba(10,8,6,.95));
    border: 1px solid rgba(255,215,0,.4);
    text-decoration: none !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hm-client:hover {
    transform: translateY(-4px);
    border-color: #ffd700;
    box-shadow: 0 16px 38px rgba(255,215,0,.22);
}
.hm-client i { font-size: 34px; color: var(--op-accent, #f3e5ab); display: block; margin-bottom: 12px; }
.hm-client b {
    display: block;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--op-accent, #f3e5ab);
}
.hm-client span {
    display: block;
    margin-top: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
}

/* IMAGE DOWNLOAD BUTTON — keeps the footprint of the old text button */
.hm-client.hm-client-art {
    padding: 14px 20px;
}
.hm-client.hm-client-art img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 84px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
    transition: transform .28s ease;
}
.hm-client.hm-client-art:hover img { transform: scale(1.04); }
.hm-client.hm-client-art b { margin-top: 10px; }
.hm-client.hm-client-art span { margin-top: 4px; }

/* FEATURE LIST */
.hm-list { list-style: none; padding: 0; margin: 0; }
.hm-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #d9d2c4;
    border-bottom: 1px solid rgba(255,255,255,.045);
}
.hm-list li:last-child { border-bottom: none; }
.hm-list li i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    color: var(--op-success, #26de81);
    font-size: 12px;
}

/* SOCIAL BUTTONS */
.hm-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}
.hm-social a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 30px;
    font-family: 'Cinzel Decorative', 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hm-social a:hover { transform: translateY(-3px); }
.hm-social a.discord { background: linear-gradient(135deg, #5865f2, #404eed); box-shadow: 0 8px 24px rgba(88,101,242,.32); }
.hm-social a.facebook { background: linear-gradient(135deg, #4267b2, #29487d); box-shadow: 0 8px 24px rgba(66,103,178,.32); }
.hm-social a.whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 8px 24px rgba(37,211,102,.3); }

/* ==========================================================================
   RANKING SECTION - TOP VIP PLAYER & TOP 5 PLAYERS
   ========================================================================== */
.hm-ranking { margin-top: 46px; }

.hm-rank-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 16px rgba(255,215,0,.5);
    margin: 0;
    position: relative;
}
.hm-rank-title i {
    color: var(--op-accent-2, #dfb76c);
    font-size: 22px;
    filter: drop-shadow(0 0 8px rgba(223,183,108,.6));
}
.hm-rank-title::after {
    content: '';
    display: block;
    width: 200px;
    height: 1px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,.55), transparent);
}

.hm-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(135deg, #1f1207, #3a270d 50%, #1f1207);
    border: 1px solid #ffd700;
    color: #ffd700 !important;
    font-family: 'Cinzel Decorative', 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 0 18px rgba(255,215,0,.28);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hm-all:hover {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000 !important;
    box-shadow: 0 0 28px rgba(255,215,0,.6);
    transform: translateY(-3px);
}

.hm-rank-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 22px;
    /* stretch so both panels end flush with each other */
    align-items: stretch;
}

.hm-ranking-card {
    position: relative;
    padding: 20px 18px 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .24s ease, background .24s ease;
}
.hm-ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    opacity: .75;
}
.hm-ranking-card:hover {
    border-color: rgba(255,215,0,.5);
    background: rgba(255,215,0,.05);
}
.hm-ranking-card h3 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,215,0,.2);
    font-size: 14px;
}
.hm-ranking-card h3 i { color: #ffd700; }

/* TOP 5 PLAYERS — the five rows share the card's full height so the
 * panel fills down to the bottom without changing the card itself */
.hm-ranking-card .hm-table { flex: 1 1 auto; }
.hm-ranking-card .hm-table tbody tr { height: 1%; }

/* ── TOP 5 PLAYERS table ───────────────────────────────────────── */
.hm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}
.hm-table thead th {
    font-family: 'Cairo', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,215,0,.75);
    padding: 4px 6px;
    border: none;
    text-align: center;
}
.hm-table tbody tr {
    background: rgba(0,0,0,.38);
    transition: background .22s ease, transform .22s ease;
}
.hm-table tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(255,215,0,.16), rgba(0,0,0,.38)); }
.hm-table tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(192,192,192,.13), rgba(0,0,0,.38)); }
.hm-table tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.13), rgba(0,0,0,.38)); }
.hm-table tbody tr:hover { background: rgba(255,215,0,.12); transform: translateY(-1px); }

.hm-table td {
    padding: 9px 6px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    text-align: center;
    border: none;
    vertical-align: middle;
}
.hm-table td:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.hm-table td:last-child  { border-start-end-radius: 10px; border-end-end-radius: 10px; }

.hm-table td img.face {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,215,0,.45);
    box-shadow: 0 0 10px rgba(255,215,0,.3);
    display: block;
    margin: 0 auto;
}
.hm-table td img[src*="nobility"] {
    border: none;
    box-shadow: none;
    max-width: 30px;
    height: auto;
}
.hm-table .pos { width: 34px; }
.hm-table .hm-rank-no {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    box-shadow: 0 2px 8px rgba(255,140,0,.4);
}
.hm-table tbody tr:nth-child(1) .hm-rank-no { background: linear-gradient(135deg, #ffe97a, #ffb300); }
.hm-table tbody tr:nth-child(2) .hm-rank-no { background: linear-gradient(135deg, #f2f2f2, #9e9e9e); }
.hm-table tbody tr:nth-child(3) .hm-rank-no { background: linear-gradient(135deg, #e8a56b, #a45a1e); color: #fff; }

.hm-table .who {
    color: #fff;
    font-weight: 700;
    text-align: start;
    padding-inline-start: 10px;
    word-break: break-word;
}
.hm-table .nob img { display: inline-block; vertical-align: middle; }
.hm-table .hm-none { padding: 26px 10px; color: rgba(255,255,255,.4); font-size: 13px; }

/* ── TOP VIP PLAYER list ──────────────────────────────────────── */
.hm-vip-list { display: flex; flex-direction: column; gap: 10px; }

.hm-vip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,215,0,.16);
    transition: border-color .24s ease, background .24s ease, transform .24s ease;
}
.hm-vip:hover {
    border-color: rgba(255,215,0,.55);
    background: rgba(255,215,0,.08);
    transform: translateY(-2px);
}

.hm-vip-pos {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.2);
}
.hm-vip-pos.pos-1 { background: linear-gradient(135deg, #ffe97a, #ffb300); border-color: #ffe97a; box-shadow: 0 0 14px rgba(255,215,0,.5); }
.hm-vip-pos.pos-2 { background: linear-gradient(135deg, #f2f2f2, #9e9e9e); border-color: #f2f2f2; }
.hm-vip-pos.pos-3 { background: linear-gradient(135deg, #e8a56b, #a45a1e); border-color: #e8a56b; color: #fff; }

.hm-vip .ava { position: relative; flex: 0 0 46px; width: 46px; height: 46px; }
.hm-vip .ava img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,215,0,.85);
    box-shadow: 0 0 12px rgba(255,215,0,.45);
    background: rgba(0,0,0,.4);
}
.hm-vip .details { min-width: 0; flex: 1; }
.hm-vip .nm {
    display: block;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-vip .sub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    font-family: 'Cairo', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: #cbd5e1;
    flex-wrap: wrap;
}
.hm-vip .sub i { font-size: 10px; opacity: .85; }
.hm-vip .sub .lv { color: #ffd700; }
.hm-vip .sub .cl { color: #ff8787; }

.hm-none {
    margin: 0;
    padding: 26px 12px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.4);
}

/* ==========================================================================
   BANNER
   ========================================================================== */
.hm-banner {
    margin-top: 44px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,215,0,.22);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.hm-banner .carousel-inner { border-radius: 18px; }
.hm-banner .item img { width: 100%; display: block; }

/* side-by-side banners that keep drifting like the old slider */
.hm-banner .hm-marquee {
    overflow: hidden;
    border-radius: 18px;
}
.hm-banner .hm-marquee-track {
    display: flex;
    width: 200%;
    animation: hmMarquee 44s linear infinite;
    will-change: transform;
}
.hm-banner .hm-marquee-track:hover { animation-play-state: paused; }
.hm-banner .hm-marquee-track img {
    flex: 0 0 25%;
    width: 25%;
    display: block;
}
@keyframes hmMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Arabic reads right-to-left, so the strip drifts the other way */
[dir="rtl"] .hm-banner .hm-marquee-track { animation-name: hmMarqueeRtl; }
@keyframes hmMarqueeRtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ==========================================================================
   CHARACTERS SECTION
   ========================================================================== */
.hm-characters { margin-top: 46px; }

.hm-characters .char-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}
.hm-characters .char-card {
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform .35s ease, box-shadow .35s ease;
}
.hm-characters .char-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 30px rgba(255,215,0,.2);
}
.hm-characters .char-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 16px;
    transition: transform .4s ease;
}
.hm-characters .char-card:hover img { transform: scale(1.05); }
.hm-characters .char-info {
    padding: 13px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(10,8,8,.95), rgba(0,0,0,.9));
    border-radius: 0 0 16px 16px;
    border-top: 1px solid rgba(255,215,0,.15);
}
.hm-characters .char-name {
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--op-accent, #f3e5ab);
    text-shadow: 0 0 12px rgba(243,229,171,.4);
}

@media (max-width: 900px) {
    .hm-characters { margin-top: 34px; }
    .hm-characters .char-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
}

/* ==========================================================================
   RTL POLISH  —  Arabic mirroring for the hand-written offsets
   ========================================================================== */

/*
 * letter-spacing is measured between glyphs, and Arabic script is fully
 * cursive — spacing the connected letterforms apart breaks every word
 * ("الترتيب" reads as "ا ل ت ر ت ي ب"). Uppercase is meaningless too.
 * A blanket reset is the only reliable way to cover the shared chrome.
 */
[dir="rtl"] .hm-hero h1,
[dir="rtl"] .hm-hero .hm-tagline,
[dir="rtl"] .hm-rank-title,
[dir="rtl"] .hm-box h3,
[dir="rtl"] .hm-client b,
[dir="rtl"] .hm-client span,
[dir="rtl"] .hm-all,
[dir="rtl"] .hm-social a,
[dir="rtl"] .hm-stat .l,
[dir="rtl"] .hm-stat .n,
[dir="rtl"] .hm-table thead th,
[dir="rtl"] .hm-table td,
[dir="rtl"] .hm-vip .nm,
[dir="rtl"] .hm-vip .sub,
[dir="rtl"] .hm-vip-pos,
[dir="rtl"] .hm-rank-no,
[dir="rtl"] .hm-characters .char-name,
[dir="rtl"] .hm-desc,
[dir="rtl"] .hm-desc b {
    letter-spacing: normal !important;
    text-transform: none !important;
}

[dir="rtl"] .hm-list li i,
[dir="rtl"] .hm-box h3 i { order: 2; }

/* the medal gradients must flow from the leading edge in Arabic too */
[dir="rtl"] .hm-table tbody tr:nth-child(1) { background: linear-gradient(270deg, rgba(255,215,0,.16), rgba(0,0,0,.38)); }
[dir="rtl"] .hm-table tbody tr:nth-child(2) { background: linear-gradient(270deg, rgba(192,192,192,.13), rgba(0,0,0,.38)); }
[dir="rtl"] .hm-table tbody tr:nth-child(3) { background: linear-gradient(270deg, rgba(205,127,50,.13), rgba(0,0,0,.38)); }