/*

    L2Meta Premium Theme - Pure Vanilla CSS

    Design System: Deep Midnight Navy, Antique Bronze/Gold, Ethereal Cyan & Purple Badges.

    Optimized for Lineage II layouts.

*/



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');



:root {

    --bg-darker: #090202;

    --bg-dark: #130506;

    --bg-card: rgba(28, 8, 10, 0.88);

    --bg-card-border: #d1b26f;

    --color-bronze: #cfb175;

    --color-gold: #ecc169;

    --color-gold-dark: #d1b26f;

    --color-cyan: #e34b4f;

    --color-cyan-glow: rgba(227, 75, 79, 0.42);

    --color-purple: #85151d;

    --color-text-primary: #ffffff;

    --color-text-secondary: #c3aaa7;

    --font-serif: 'Cinzel', serif;

    --font-sans: 'Montserrat', sans-serif;

    --font-content: 'Inter', sans-serif;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    background:
        radial-gradient(ellipse at top, rgba(115, 15, 21, 0.24), transparent 46%),
        var(--bg-darker);

    color: var(--color-text-primary);

    font-family: var(--font-content);

    overflow-x: hidden;

    line-height: 1.6;

}



/* Background Atmospheric Overlays */

.l2meta-wrapper {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(122, 15, 22, 0.34) 0%, rgba(48, 5, 8, 0.16) 37%, transparent 70%),
        radial-gradient(ellipse at 12% 45%, rgba(85, 9, 14, 0.18) 0%, transparent 43%),
        linear-gradient(180deg, #150506 0%, var(--bg-darker) 44%, #050101 100%);

}



.starfield {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image:

        radial-gradient(1px 1px at 20px 30px, #ffd9a8, rgba(0, 0, 0, 0)),

        radial-gradient(1.5px 1.5px at 150px 80px, rgba(237, 180, 128, 0.9), rgba(0, 0, 0, 0)),

        radial-gradient(1px 1px at 300px 250px, rgba(235, 99, 68, 0.75), rgba(0, 0, 0, 0)),

        radial-gradient(2px 2px at 450px 120px, #ffd8a5, rgba(0, 0, 0, 0)),

        radial-gradient(1.5px 1.5px at 700px 380px, rgba(238, 119, 76, 0.8), rgba(0, 0, 0, 0));

    background-repeat: repeat;

    background-size: 800px 800px;

    opacity: 0.2;

    pointer-events: none;

    z-index: 1;

}



/* Section Dotted Nav Sidebar */

.section-dots {

    position: fixed;

    left: 30px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 999;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;

}



@media (max-width: 1200px) {

    .section-dots {

        display: none;

    }

}



.section-dots::before {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    width: 1px;

    background: linear-gradient(to bottom, transparent, var(--color-gold) 20%, var(--color-gold) 80%, transparent 100%);

    opacity: 0.25;

    z-index: -1;

}



.dot-item {

    width: 32px;

    height: 32px;

    background-color: rgba(5, 8, 15, 0.9);

    border: 1px solid rgba(209, 178, 111, 0.3);

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.dot-item span {

    font-family: var(--font-sans);

    font-size: 9px;

    font-weight: 800;

    color: var(--color-text-secondary);

    transition: all 0.3s ease;

}



.dot-item:hover,

.dot-item.active {

    border-color: var(--color-gold);

    background-color: rgba(209, 178, 111, 0.15);

    box-shadow: 0 0 15px rgba(236, 193, 105, 0.3);

}



.dot-item:hover span,

.dot-item.active span {

    color: var(--color-gold);

}



.dot-item::after {

    content: attr(data-title);

    position: absolute;

    left: 45px;

    top: 50%;

    transform: translateY(-50%);

    color: #fff;

    font-family: var(--font-sans);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    background-color: rgba(5, 8, 15, 0.95);

    border: 1px solid var(--color-gold-dark);

    padding: 6px 12px;

    border-radius: 4px;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

    pointer-events: none;

}



.dot-item:hover::after {

    opacity: 1;

    visibility: visible;

    left: 40px;

}



/* Header & Nav */

.l2meta-header {

    width: 100%;

    height: 100px;

    padding: 0 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 100;

    background: linear-gradient(to bottom, rgba(5, 8, 15, 0.8) 0%, transparent 100%);

    backdrop-filter: blur(5px);

}



.l2meta-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}



.logo-shield {

    width: 40px;

    height: 42px;

    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--bg-darker);

    font-family: var(--font-serif);

    font-weight: 800;

    font-size: 20px;

    box-shadow: 0 0 15px rgba(210, 178, 111, 0.4);

}



.logo-text {

    font-family: var(--font-serif);

    font-size: 26px;

    font-weight: 700;

    color: #fff;

    letter-spacing: 2px;

    background: linear-gradient(to right, #fff 30%, var(--color-bronze) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.server-nav-dropdown { position: relative; }
.server-nav-dropdown summary { list-style: none; cursor: pointer; white-space: nowrap; }
.server-nav-dropdown summary::-webkit-details-marker { display: none; }
.server-nav-options { position: absolute; top: 100%; left: 0; min-width: 190px; padding: 8px; border: 1px solid rgba(207,177,117,.4); border-radius: 6px; background: #100a0a; box-shadow: 0 12px 28px rgba(0,0,0,.6); }
.server-nav-options a { display: block; padding: 12px; color: var(--color-text-secondary); text-decoration: none; font: 700 12px var(--font-sans); }
.server-nav-options a:hover, .server-nav-options a:focus { color: var(--color-gold); background: rgba(207,177,117,.1); }
#rankings { scroll-margin-top: 110px; }
@media (max-width: 768px) {
    .l2meta-header { flex-wrap: wrap; }
    .l2meta-header .l2meta-nav { display: flex; order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
    .l2meta-header .nav-link { font-size: 10px; }
}

.l2meta-nav {

    display: flex;

    align-items: center;

    gap: 35px;

}



.nav-link {

    font-family: var(--font-sans);

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text-secondary);

    text-decoration: none;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all 0.3s ease;

    position: relative;

    padding: 10px 0;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 2px;

    background-color: var(--color-gold);

    transition: all 0.3s ease;

    transform: translateX(-50%);

}



.nav-link:hover {

    color: #fff;

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-link.active {

    color: var(--color-gold);

}



/* Lang Dropdown Selector */

.lang-dropdown {

    position: relative;

    cursor: pointer;

}



.lang-active-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--color-text-secondary);

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 6px;

    transition: all 0.3s ease;

}



.lang-active-btn:hover {

    color: #fff;

    border-color: var(--color-gold);

}



.lang-dropdown-list {

    position: absolute;

    top: 45px;

    right: 0;

    background: var(--bg-dark);

    border: 1px solid var(--color-gold-dark);

    border-radius: 6px;

    padding: 8px 0;

    min-width: 110px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.3s ease;

    z-index: 10;

}



.lang-dropdown:hover .lang-dropdown-list {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.lang-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

    color: var(--color-text-secondary);

    text-decoration: none;

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.lang-item:hover {

    background-color: rgba(210, 178, 111, 0.1);

    color: var(--color-gold);

}



/* Control Panel Ribbon Button */

.cp-ribbon-btn {

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 800;

    color: #000;

    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);

    padding: 12px 24px;

    text-decoration: none;

    letter-spacing: 1px;

    text-transform: uppercase;

    border: none;

    clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%);

    box-shadow: 0 4px 15px rgba(210, 178, 111, 0.4);

    transition: all 0.3s ease;

}



.cp-ribbon-btn:hover {

    transform: scale(1.03);

    box-shadow: 0 6px 20px var(--color-gold);

    color: #fff;

    background: linear-gradient(135deg, #fff 0%, var(--color-gold) 100%);

}



/* Hero Section */

.hero-container {

    width: 100%;

    min-height: 100vh;

    padding-top: 140px;

    padding-bottom: 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

}



.hero-background-art {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('../images/bg-top.png');

    background-size: cover;

    background-position: center top;

    opacity: 0.45;

    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);

    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);

    pointer-events: none;

    z-index: 0;

}



.hero-content {
    max-width: 1200px;

    width: 100%;

    padding: 0 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 2;

    text-align: center;
}

/* Árvore de banners — o comportamento original permanece; apenas os nós foram reorganizados. */
.hero-banner-rail { position: fixed; z-index: 1000; left: 18px; bottom: 34px; width: 48px; height: 48px; }
.hero-banner-page-shade { position: fixed; inset: 0; z-index: -1; background: rgba(1,4,9,.84); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.hero-banner-rail:hover .hero-banner-page-shade, .hero-banner-rail.is-open .hero-banner-page-shade { opacity: 1; pointer-events: none; }
.hero-banner-main-icon { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(207,177,117,.78); border-radius: 50%; color: var(--color-gold); background: linear-gradient(180deg, rgba(35,28,19,.98), rgba(7,11,19,.98)); box-shadow: 0 5px 20px rgba(0,0,0,.55); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; font-size: 16px; }
.hero-banner-rail:hover .hero-banner-main-icon, .hero-banner-rail.is-open .hero-banner-main-icon { transform: scale(1.08); box-shadow: 0 0 24px rgba(207,177,117,.42); }
.hero-banner-branch-container { --tree-card-width: clamp(128px, 15vw, 175px); --tree-card-height: clamp(56px, 7vh, 70px); --tree-column-gap: clamp(28px, 4vw, 56px); position: absolute; z-index: 3; left: 80px; bottom: -12px; width: min(1140px, calc(100vw - 120px)); height: min(560px, calc(100vh - 78px)); pointer-events: none; }
.hero-banner-rail:hover .hero-banner-branch-container, .hero-banner-rail.is-open .hero-banner-branch-container { pointer-events: auto; }
.hero-banner-branch-container::before { content: ""; position: absolute; left: -30px; bottom: 5%; width: 2px; height: 82%; opacity: 0; background: linear-gradient(180deg, transparent, rgba(96,139,183,.68) 12%, rgba(207,177,117,.8) 50%, rgba(96,139,183,.68) 88%, transparent); box-shadow: 0 0 8px rgba(207,177,117,.3); transition: opacity .3s ease; pointer-events: none; }
.hero-banner-rail:hover .hero-banner-branch-container::before, .hero-banner-rail.is-open .hero-banner-branch-container::before { opacity: 1; }
.hero-banner-branch-node { position: absolute; display: block; width: var(--tree-card-width); height: var(--tree-card-height); opacity: 0; overflow: visible; border: 1px solid rgba(207,177,117,.28); border-radius: 7px; background: #090e17; box-shadow: 0 8px 22px rgba(0,0,0,.54); text-decoration: none; transform: translateX(-14px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease; }
.hero-banner-rail:hover .hero-banner-branch-node, .hero-banner-rail.is-open .hero-banner-branch-node { opacity: 1; transform: translateX(0); }
.hero-banner-branch-node:hover { z-index: 5; border-color: var(--color-gold); box-shadow: 0 13px 30px rgba(0,0,0,.7), 0 0 16px rgba(207,177,117,.28); transform: translateX(3px) scale(1.03) !important; }
.hero-banner-branch-node::before { content: ""; position: absolute; top: 50%; left: -30px; width: 30px; height: 2px; opacity: 0; background: linear-gradient(90deg, rgba(96,139,183,.68), rgba(207,177,117,.8)); box-shadow: 0 0 7px rgba(207,177,117,.24); transform: translateY(-50%); transition: opacity .3s ease; pointer-events: none; }
.hero-banner-rail:hover .hero-banner-branch-node::before, .hero-banner-rail.is-open .hero-banner-branch-node::before { opacity: 1; }
/* 5-4-3-2-1: uma árvore legível, preenchida automaticamente pela prioridade do painel. */
.hero-banner-branch-node:nth-child(n+1):nth-child(-n+5) { left: 0; }
.hero-banner-branch-node:nth-child(1) { bottom: 4%; }.hero-banner-branch-node:nth-child(2) { bottom: 22%; }.hero-banner-branch-node:nth-child(3) { bottom: 40%; }.hero-banner-branch-node:nth-child(4) { bottom: 58%; }.hero-banner-branch-node:nth-child(5) { bottom: 76%; }
.hero-banner-branch-node:nth-child(n+6):nth-child(-n+9) { left: calc(var(--tree-card-width) + var(--tree-column-gap)); }
.hero-banner-branch-node:nth-child(6) { bottom: 13%; }.hero-banner-branch-node:nth-child(7) { bottom: 35%; }.hero-banner-branch-node:nth-child(8) { bottom: 57%; }.hero-banner-branch-node:nth-child(9) { bottom: 79%; }
.hero-banner-branch-node:nth-child(n+10):nth-child(-n+12) { left: calc(var(--tree-card-width) + var(--tree-card-width) + var(--tree-column-gap) + var(--tree-column-gap)); }
.hero-banner-branch-node:nth-child(10) { bottom: 24%; }.hero-banner-branch-node:nth-child(11) { bottom: 50%; }.hero-banner-branch-node:nth-child(12) { bottom: 76%; }
.hero-banner-branch-node:nth-child(n+13):nth-child(-n+14) { left: calc(var(--tree-card-width) + var(--tree-card-width) + var(--tree-card-width) + var(--tree-column-gap) + var(--tree-column-gap) + var(--tree-column-gap)); }
.hero-banner-branch-node:nth-child(13) { bottom: 35%; }.hero-banner-branch-node:nth-child(14) { bottom: 65%; }
.hero-banner-branch-node:nth-child(15) { left: calc(var(--tree-card-width) + var(--tree-card-width) + var(--tree-card-width) + var(--tree-card-width) + var(--tree-column-gap) + var(--tree-column-gap) + var(--tree-column-gap) + var(--tree-column-gap)); bottom: 50%; }
.hero-banner-branch-node:nth-child(n+6)::before { left: calc(0px - var(--tree-column-gap)); width: var(--tree-column-gap); }
/* Ligações reais entre os níveis: 2→6, 3→7, 4→8, 5→9, 6→10, 7→11, 8→12, 10→13, 11→14 e 13→15. */
.hero-banner-branch-node:nth-child(6)::before, .hero-banner-branch-node:nth-child(7)::before, .hero-banner-branch-node:nth-child(8)::before { top: calc(50% - clamp(8px, 3vh, 24px)); height: clamp(8px, 3vh, 24px); background: none; border-top: 2px solid rgba(207,177,117,.8); border-left: 2px solid rgba(96,139,183,.7); box-shadow: -2px 0 7px rgba(96,139,183,.2), 0 -2px 7px rgba(207,177,117,.2); transform: none; }
.hero-banner-branch-node:nth-child(6)::before { top: calc(50% - clamp(27px, 9vh, 52px)); height: clamp(27px, 9vh, 52px); }
.hero-banner-branch-node:nth-child(7)::before { top: calc(50% - clamp(12px, 5vh, 30px)); height: clamp(12px, 5vh, 30px); }
.hero-banner-branch-node:nth-child(9)::before, .hero-banner-branch-node:nth-child(10)::before, .hero-banner-branch-node:nth-child(11)::before, .hero-banner-branch-node:nth-child(12)::before, .hero-banner-branch-node:nth-child(13)::before, .hero-banner-branch-node:nth-child(14)::before, .hero-banner-branch-node:nth-child(15)::before { top: 50%; height: clamp(30px, 11vh, 62px); background: none; border-bottom: 2px solid rgba(207,177,117,.8); border-left: 2px solid rgba(96,139,183,.7); box-shadow: -2px 0 7px rgba(96,139,183,.2), 0 2px 7px rgba(207,177,117,.2); transform: none; }
.hero-banner-branch-node:nth-child(9)::before { height: clamp(8px, 3vh, 24px); }
.hero-banner-branch-node:nth-child(10)::before, .hero-banner-branch-node:nth-child(13)::before { height: clamp(30px, 11vh, 62px); }
.hero-banner-branch-node:nth-child(11)::before, .hero-banner-branch-node:nth-child(14)::before, .hero-banner-branch-node:nth-child(15)::before { height: clamp(42px, 15vh, 84px); }
.hero-banner-branch-node:nth-child(12)::before { height: clamp(54px, 19vh, 106px); }
.hero-banner-era { position: absolute; z-index: 8; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 2px; border: 1px solid rgba(207,177,117,.65); border-radius: 50%; background: radial-gradient(circle, rgba(38,30,17,.98), rgba(7,11,18,.98)); box-shadow: 0 0 12px rgba(207,177,117,.28); opacity: 0; cursor: help; transform: scale(.82); transition: opacity .28s ease .16s, transform .22s ease; }
.hero-banner-era img { display: block; width: 18px; height: 18px; border-radius: 50%; filter: drop-shadow(0 0 4px rgba(207,177,117,.35)); }
.hero-banner-era:hover, .hero-banner-era:focus { border-color: #f0cb6a; box-shadow: 0 0 18px rgba(207,177,117,.5); outline: 0; transform: scale(1.08) !important; }
.hero-banner-era-tooltip { position: absolute; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: 240px; padding: 8px 10px; border: 1px solid rgba(207,177,117,.42); border-radius: 5px; color: #f7e4b0; background: rgba(5,9,16,.97); box-shadow: 0 8px 20px rgba(0,0,0,.5); font-family: var(--font-sans); font-size: 10px; font-weight: 700; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .2s ease, transform .2s ease; }
.hero-banner-era-tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid transparent; border-top-color: rgba(207,177,117,.42); transform: translateX(-50%); }
.hero-banner-era:hover .hero-banner-era-tooltip, .hero-banner-era:focus .hero-banner-era-tooltip { opacity: 1; transform: translate(-50%, 0); }
.hero-banner-era.is-edge .hero-banner-era-tooltip { left: 0; transform: translate(-56px, 5px); }
.hero-banner-era.is-edge:hover .hero-banner-era-tooltip, .hero-banner-era.is-edge:focus .hero-banner-era-tooltip { transform: translate(-56px, 0); }
.hero-banner-era.is-edge .hero-banner-era-tooltip::after { left: 68px; }
.hero-banner-rail:hover .hero-banner-era, .hero-banner-rail.is-open .hero-banner-era { opacity: 1; transform: scale(1); }
.hero-banner-branch-image { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.hero-banner-branch-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,14,.06), rgba(5,8,14,.36)); pointer-events: none; }
.hero-banner-branch-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hero-banner-branch-node:hover img { transform: scale(1.06); }
.banner-vote-tooltip { position: absolute; z-index: 12; left: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(260px, calc(100vw - 130px)); padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(207,177,117,.5); border-radius: 6px; color: #f5e4bf; background: linear-gradient(135deg, #231114, #0c080b); box-shadow: 0 8px 24px rgba(0,0,0,.65); font: 600 11px/1.5 var(--font-sans); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.banner-vote-tooltip::after { content: ''; position: absolute; left: 20px; top: 100%; border: 6px solid transparent; border-top-color: rgba(207,177,117,.5); }
.banner-vote-tooltip i { margin-right: 5px; color: var(--color-gold); }
.hero-banner-branch-node:hover .banner-vote-tooltip, .hero-banner-branch-node:focus .banner-vote-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-banner-branch-node:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; z-index: 6; }
.hero-banner-branch-node.default-node { height: auto; }
.hero-banner-default { width: 100%; height: 100%; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; background: radial-gradient(circle at 75% 15%, rgba(207,177,117,.15), transparent 52%), linear-gradient(135deg, #16120d, #090d15); border-radius: 6px; }
.hero-banner-default strong { color: var(--color-gold); font-family: var(--font-sans); font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.hero-banner-default small { color: rgba(255,255,255,.78); font-family: var(--font-sans); font-size: 9px; font-weight: 600; line-height: 1.4; }
@media (max-width: 760px) { .hero-banner-rail { left: 10px; bottom: 18px; } .hero-banner-branch-container { transform: scale(.62); transform-origin: bottom left; } }


.hero-title {

    font-family: var(--font-serif);

    font-size: 58px;

    font-weight: 800;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 10px;

    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(210, 178, 111, 0.3);

}



.hero-subtitle {

    font-family: var(--font-sans);

    font-size: 16px;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 6px;

    font-weight: 600;

    margin-bottom: 50px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

}



/* Server Cards Layout */

.server-cards-row {

    display: flex;

    gap: 40px;

    width: 100%;

    max-width: 900px;

    justify-content: center;

    margin-bottom: 50px;

    flex-wrap: wrap;

}



.server-card {

    background-color: var(--bg-card);

    border: 2px solid rgba(207, 177, 117, 0.2);

    border-radius: 12px;

    padding: 30px;

    flex: 1;

    min-width: 280px;

    max-width: 400px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.server-card:hover {

    transform: translateY(-8px);

    border-color: var(--color-gold);

    box-shadow: 0 20px 45px rgba(207, 177, 117, 0.15), 0 0 20px rgba(0, 229, 255, 0.05);

}



.server-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);

}



.server-card.soon::before {

    background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-cyan) 100%);

}



.badge-status {

    position: absolute;

    top: 20px;

    right: 20px;

    font-family: var(--font-sans);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 4px 10px;

    border-radius: 50px;

    color: #fff;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.badge-status.main {

    background-color: rgba(156, 39, 176, 0.2);

    border-color: var(--color-purple);

    color: #e040fb;

}



.badge-status.soon {

    background-color: rgba(0, 229, 255, 0.15);

    border-color: var(--color-cyan);

    color: var(--color-cyan);

}



.card-title {

    font-family: var(--font-serif);

    font-size: 24px;

    color: #fff;

    text-transform: uppercase;

    margin-bottom: 25px;

    text-align: left;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.card-title span {

    font-family: var(--font-sans);

    font-size: 11px;

    color: var(--color-text-secondary);

    letter-spacing: 1px;

}



.card-stat-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    font-family: var(--font-content);

    font-size: 13px;

    color: var(--color-text-secondary);

}



.card-stat-item:last-of-type {

    border-bottom: none;

}



.stat-label {

    display: flex;

    align-items: center;

    gap: 8px;

}



.stat-label::before {

    content: '♦';

    color: var(--color-gold);

    font-size: 10px;

}



.stat-value {

    color: #fff;

    font-weight: 700;

}



.stat-value.highlight-cyan {

    color: var(--color-cyan);

    font-family: var(--font-sans);

    text-shadow: 0 0 10px var(--color-cyan-glow);

}



.stat-value.highlight-gold {

    color: var(--color-gold);

    font-family: var(--font-sans);

}



/* Action Buttons */

.hero-btns {

    display: flex;

    gap: 25px;

    justify-content: center;

    flex-wrap: wrap;

}



/* Pointed Hexagonal Action Button */

.btn-hex-plate {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 56px;

    padding: 0 45px;

    background: linear-gradient(135deg, rgba(209, 178, 111, 0.15) 0%, rgba(209, 178, 111, 0.05) 100%);

    border: 1px solid var(--color-gold);

    color: var(--color-gold);

    font-family: var(--font-sans);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);

    position: relative;

    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

    transition: all 0.3s ease;

}



.btn-hex-plate::before {

    content: '';

    position: absolute;

    top: 2px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: linear-gradient(to right, transparent, var(--color-gold), transparent);

}



.btn-hex-plate:hover {

    color: #000;

    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);

    box-shadow: 0 5px 30px var(--color-gold);

    transform: scale(1.02);

}



.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 56px;

    padding: 0 40px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background-color: rgba(255, 255, 255, 0.03);

    color: var(--color-text-secondary);

    font-family: var(--font-sans);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-decoration: none;

    border-radius: 8px;

    transition: all 0.3s ease;

}



.btn-secondary:hover {

    border-color: #fff;

    color: #fff;

    background-color: rgba(255, 255, 255, 0.06);

}



/* Floating Coins Card (Donate Floater) */

.donate-floater {

    position: fixed;

    bottom: 30px;

    right: 40px;

    z-index: 998;

    background-color: var(--bg-card);

    border: 1px solid var(--color-gold-dark);

    border-radius: 12px;

    padding: 16px 24px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

}



.donate-floater::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 50%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);

    transform: skewX(-25deg);

    animation: shineSweep 4s infinite ease-in-out;

}



@keyframes shineSweep {

    0% {

        left: -100%;

    }



    20% {

        left: 150%;

    }



    100% {

        left: 150%;

    }

}



.donate-floater:hover {

    transform: translateY(-4px) scale(1.02);

    border-color: var(--color-gold);

    box-shadow: 0 20px 45px rgba(209, 178, 111, 0.25);

}



.donate-floater-icon {

    position: relative;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: var(--color-gold);

    background: radial-gradient(circle, rgba(162, 126, 67, 0.2) 0%, rgba(26, 21, 16, 0.9) 100%);

    border: 2px solid var(--color-gold-dark);

    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 178, 125, 0.15);

    flex-shrink: 0;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.donate-floater:hover .donate-floater-icon {

    border-color: var(--color-gold);

    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 178, 125, 0.45);

    transform: scale(1.06);

}



.ring-rotate {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    box-sizing: border-box;

}



.ring-dashed {

    top: -6px;

    left: -6px;

    right: -6px;

    bottom: -6px;

    border: 1px dashed rgba(212, 178, 125, 0.45);

    animation: rotateCW 12s linear infinite;

    transition: all 0.5s ease;

}



.ring-dotted {

    top: -12px;

    left: -12px;

    right: -12px;

    bottom: -12px;

    border: 1px dotted rgba(212, 178, 125, 0.25);

    animation: rotateCCW 20s linear infinite;

    transition: all 0.5s ease;

}



/* Accelerated rotation on card hover */

.donate-floater:hover .ring-dashed {

    animation-duration: 4s;

    border-color: rgba(255, 194, 76, 0.7);

}



.donate-floater:hover .ring-dotted {

    animation-duration: 6s;

    border-color: rgba(255, 194, 76, 0.45);

}



@keyframes rotateCW {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



@keyframes rotateCCW {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(-360deg);

    }

}



.donate-floater-text {

    text-align: left;

}



.donate-floater-text h4 {

    font-family: var(--font-sans);

    font-size: 13px;

    font-weight: 800;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.donate-floater-text p {

    font-size: 10px;

    color: var(--color-text-secondary);

}



/* Features Grid */

.l2meta-section {

    padding: 100px 0;

    width: 100%;

    display: flex;

    justify-content: center;

    position: relative;

}



.l2meta-section-bg {

    background-image: linear-gradient(rgba(10, 5, 8, 0.94), rgba(10, 5, 8, 0.94)), url('../images/advantages-bg.jpg');

    background-size: cover;

    background-position: center;

    border-top: 1px solid rgba(255, 255, 255, 0.03);

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.l2meta-container {

    max-width: 1200px;

    width: 100%;

    padding: 0 30px;

    display: flex;

    flex-direction: column;

}



.section-header {

    text-align: center;

    margin-bottom: 60px;

}



.section-subtitle {

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 700;

    color: var(--color-gold);

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 8px;

}



.section-title {

    font-family: var(--font-serif);

    font-size: 38px;

    font-weight: 700;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 2px;

    position: relative;

    padding-bottom: 20px;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 60px;

    height: 2px;

    background-color: var(--color-gold);

    transform: translateX(-50%);

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

}



.feature-card {

    background-color: var(--bg-card);

    border: 1px solid rgba(207, 177, 117, 0.15);

    border-radius: 12px;

    padding: 40px 30px;

    text-align: center;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

}



.feature-card:hover {

    border-color: var(--color-gold);

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(207, 177, 117, 0.08);

}



/* Decorative Card Ornaments */

.feature-card::before {

    content: '';

    position: absolute;

    top: 8px;

    left: 8px;

    right: 8px;

    bottom: 8px;

    border: 1px dashed rgba(207, 177, 117, 0.1);

    border-radius: 8px;

    pointer-events: none;

}



.feature-ribbon {

    position: absolute;

    top: -5px;

    right: -5px;

    width: 35px;

    height: 35px;

    background-color: var(--color-purple);

    clip-path: polygon(0 0, 100% 0, 100% 100%);

    opacity: 0.8;

}



.feature-icon-wrapper {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 1.5px solid var(--color-gold-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 30px;

    background-color: rgba(5, 8, 15, 0.5);

    box-shadow: 0 0 15px rgba(209, 178, 111, 0.15);

    color: var(--color-gold);

    font-size: 26px;

    position: relative;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.feature-icon-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    z-index: 2;

}



/* Feature Card Hover Effects */

.feature-card:hover .feature-icon-wrapper {

    border-color: var(--color-gold);

    box-shadow: 0 0 25px rgba(209, 178, 111, 0.45);

    transform: scale(1.06);

}



.feature-card:hover .ring-dashed {

    animation-duration: 4s;

    border-color: rgba(255, 194, 76, 0.7);

}



.feature-card:hover .ring-dotted {

    animation-duration: 6s;

    border-color: rgba(255, 194, 76, 0.45);

}



.feature-title {

    font-family: var(--font-serif);

    font-size: 18px;

    color: #fff;

    text-transform: uppercase;

    margin-bottom: 15px;

    letter-spacing: 1px;

}



.feature-desc {

    font-size: 13px;

    color: var(--color-text-secondary);

    margin-bottom: 30px;

}



.feature-learn-btn {

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    color: var(--color-gold);

    text-decoration: none;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 8px 16px;

    border: 1px solid var(--color-gold-dark);

    border-radius: 4px;

    background-color: transparent;

    transition: all 0.3s ease;

    display: inline-block;

}



.feature-learn-btn:hover {

    background-color: var(--color-gold);

    color: #000;

    border-color: var(--color-gold);

}



/* Two-column Rankings & Streams Layout */

.split-sections {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 40px;

    align-items: start;

}



@media (max-width: 992px) {

    .split-sections {

        grid-template-columns: 1fr;

    }

}



/* Player Rankings Box */

.rankings-box {

    background-color: var(--bg-card);

    border: 1px solid rgba(207, 177, 117, 0.15);

    border-radius: 12px;

    padding: 35px 30px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

}



.rankings-header-decor {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 35px;

}



.rankings-wing {

    height: 1px;

    width: 60px;

    background: linear-gradient(to right, transparent, var(--color-gold));

}



.rankings-wing.right {

    background: linear-gradient(to left, transparent, var(--color-gold));

}



.rankings-title {

    font-family: var(--font-serif);

    font-size: 22px;

    font-weight: 700;

    text-transform: uppercase;

    color: #fff;

    letter-spacing: 2px;

}



.rankings-tab-bar {

    display: flex;

    gap: 10px;

    margin-bottom: 25px;

    flex-wrap: wrap;

    justify-content: center;

}



.rank-tab-btn {

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    color: var(--color-text-secondary);

    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background-color: rgba(255, 255, 255, 0.02);

    border-radius: 50px;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;

}



.rank-tab-btn:hover,

.rank-tab-btn.active {

    color: #fff;

    border-color: var(--color-gold);

    background-color: rgba(209, 178, 111, 0.1);

}



.rank-cat-bar {

    display: flex;

    gap: 6px;

    margin-bottom: 25px;

    justify-content: center;

}



.rank-cat-btn {

    font-family: var(--font-sans);

    font-size: 10px;

    font-weight: 700;

    color: var(--color-text-secondary);

    padding: 6px 12px;

    background-color: rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 4px;

    cursor: pointer;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.rank-cat-btn:hover,

.rank-cat-btn.active {

    color: var(--color-gold);

    border-color: var(--color-gold-dark);

    background-color: rgba(209, 178, 111, 0.05);

}

/* Shared navigation used by the status and ranking pages. */
.royale-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 11px 12px;
    border: 1px solid rgba(209, 178, 111, 0.22);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(209, 178, 111, 0.09), rgba(4, 6, 11, 0.52));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.royale-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #bcb7b2;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.65px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.royale-tabs a:hover {
    border-color: rgba(209, 178, 111, 0.45);
    background: rgba(209, 178, 111, 0.11);
    color: #f3dfaa;
    transform: translateY(-1px);
}

.royale-tabs a.active {
    border-color: rgba(209, 178, 111, 0.72);
    background: linear-gradient(135deg, rgba(209, 178, 111, 0.28), rgba(209, 178, 111, 0.1));
    box-shadow: inset 0 0 14px rgba(209, 178, 111, 0.1);
    color: var(--color-gold);
}

.royale-tabs a.active::before {
    content: '\f1e3';
    margin-right: 6px;
    font-family: FontAwesome;
    font-size: 11px;
}

@media (max-width: 600px) {
    .royale-tabs {
        gap: 6px;
        padding: 8px;
    }

    .royale-tabs a {
        min-height: 30px;
        padding: 0 9px;
        font-size: 9px;
        letter-spacing: 0.35px;
    }
}



/* Beautiful Table */

.l2meta-table-container {

    width: 100%;

    overflow-x: auto;

}



.l2meta-table {

    width: 100%;

    border-collapse: collapse;

    text-align: left;

}



.l2meta-table th {

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    padding: 12px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.l2meta-table td {

    padding: 12px 16px;

    font-size: 13px;

    color: var(--color-text-primary);

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    vertical-align: middle;

}



.l2meta-table tbody tr {

    transition: all 0.2s ease;

}



.l2meta-table tbody tr:hover td {

    background-color: rgba(255, 255, 255, 0.02);

    color: #fff;

}



.rank-number-badge {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 11px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: var(--color-text-secondary);

}



.rank-number-badge.gold {

    background-color: rgba(236, 193, 105, 0.15);

    border-color: var(--color-gold);

    color: var(--color-gold);

    text-shadow: 0 0 5px rgba(236, 193, 105, 0.3);

}



.rank-number-badge.silver {

    background-color: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.3);

    color: #fff;

}



.bold-value {

    font-family: var(--font-sans);

    font-weight: 700;

    color: var(--color-gold);

}



/* Streams & Streamers Leaderboard Box */

.streams-box {

    background-color: var(--bg-card);

    border: 1px solid rgba(207, 177, 117, 0.15);

    border-radius: 12px;

    padding: 35px 25px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

}



.streams-main-container {

    border-radius: 8px;

    overflow: hidden;

    position: relative;

    margin-bottom: 25px;

    background-color: #000;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.featured-stream-player {

    width: 100%;

    height: 220px;

    background-size: cover;

    background-position: center;

    border-radius: 8px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(207, 177, 117, 0.2);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.featured-stream-player::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(0deg, rgba(5, 8, 15, 0.95) 0%, rgba(5, 8, 15, 0.3) 60%, rgba(5, 8, 15, 0.6) 100%);

    z-index: 1;

    transition: all 0.4s ease;

}



.featured-stream-player:hover::before {

    background: linear-gradient(0deg, rgba(5, 8, 15, 0.98) 0%, rgba(5, 8, 15, 0.4) 60%, rgba(5, 8, 15, 0.8) 100%);

}



.featured-stream-player:hover {

    border-color: var(--color-gold);

    box-shadow: 0 12px 35px rgba(209, 178, 111, 0.15);

    transform: translateY(-2px);

}



.stream-play-trigger {
    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    width: 100%;

    height: 100%;

    justify-content: center;

}



.play-btn-circle {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;

    border: 3px solid #fff;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.stream-play-trigger:hover .play-btn-circle {

    transform: scale(1.15) rotate(15deg);

    background-color: #fff;

    color: #000 !important;

    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);

    border-color: var(--color-gold);

}



.stream-click-to-watch {

    font-family: var(--font-sans);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.85);

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

    transition: all 0.3s ease;

}



.stream-play-trigger:hover .stream-click-to-watch {

    color: #fff;

    letter-spacing: 3px;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

}



.stream-title-strip {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 15px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.03);

}



.stream-channel-badge {

    background-color: var(--color-gold-dark);

    color: #fff;

    font-family: var(--font-sans);

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 3px 6px;

    border-radius: 3px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    white-space: nowrap;

}



.stream-title-text {

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    color: #fff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    opacity: 0.85;

    transition: opacity 0.3s ease;

}



.featured-stream-player:hover .stream-title-text {

    opacity: 1;

}



.stream-recording-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 5;

    background-color: rgba(239, 68, 68, 0.85);

    color: #fff;

    font-family: var(--font-sans);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 4px 8px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    gap: 5px;

}



.stream-recording-badge span {

    width: 6px;

    height: 6px;

    background-color: #fff;

    border-radius: 50%;

    animation: flash 1s infinite alternate;

}



@keyframes flash {

    0% {

        opacity: 0.3;

    }



    100% {

        opacity: 1;

    }

}



.stream-top-banner {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 5;

    background-color: rgba(236, 193, 105, 0.9);

    color: #000;

    font-family: var(--font-sans);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 4px 8px;

    border-radius: 4px;

}



.leaderboard-title {

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 800;

    color: var(--color-gold);

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;

    display: flex;

    justify-content: space-between;

}



.leaderboard-title span.status {

    color: var(--color-text-secondary);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0;

}



.leaderboard-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.leaderboard-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    background-color: rgba(5, 8, 15, 0.4);

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.02);

    border-left: 3px solid transparent;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.leaderboard-item:hover {

    border-color: rgba(207, 177, 117, 0.15);

    border-left-color: var(--color-gold);

    background-color: rgba(207, 177, 117, 0.03);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    transform: translateX(4px);

}



.streamer-profile {

    display: flex;

    align-items: center;

    gap: 12px;

}



.streamer-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    border: 1.5px solid var(--color-gold-dark);

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);

    transition: all 0.3s ease;

}



.leaderboard-item:hover .streamer-avatar {

    border-color: var(--color-gold);

    transform: scale(1.08);

}



.streamer-name {

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 700;

    color: #fff;

    display: flex;

    flex-direction: column;

}



.streamer-name span {

    font-size: 10px;

    color: var(--color-text-secondary);

    font-weight: 400;

}



.streamer-stats {

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 800;

    color: var(--color-gold);

    display: flex;

    align-items: center;

    gap: 6px;

    background-color: rgba(236, 193, 105, 0.08);

    padding: 4px 10px;

    border-radius: 20px;

    border: 1px solid rgba(236, 193, 105, 0.15);

    transition: all 0.3s ease;

}



.leaderboard-item:hover .streamer-stats {
    background-color: rgba(236, 193, 105, 0.15);

    border-color: rgba(236, 193, 105, 0.3);

    box-shadow: 0 0 10px rgba(236, 193, 105, 0.1);

}



.streamer-stats::before {

    content: '';

    width: 6px;

    height: 6px;

    background-color: #ef4444;

    border-radius: 50%;

    box-shadow: 0 0 8px #ef4444;

    animation: flash 0.8s infinite alternate;

    align-items: center;

    gap: 4px;

}



/* Inner/Subpage layout box */

.inner-page-container {

    width: 100%;

    max-width: 1000px;

    margin: 40px auto;

    background-color: var(--bg-card);

    border: 1px solid rgba(207, 177, 117, 0.25);

    border-radius: 16px;

    padding: 50px 40px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(10px);

    position: relative;

    z-index: 5;

}



.inner-page-title {

    font-family: var(--font-serif);

    font-size: 32px;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    text-align: center;

    margin-bottom: 40px;

    text-shadow: 0 0 15px rgba(236, 193, 105, 0.2);

}



/* Subpage components: Forms, buttons, inputs */

.l2meta-input-group {

    margin-bottom: 25px;

}



.l2meta-label {

    display: block;

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 700;

    color: var(--color-gold-dark);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 8px;

}



.l2meta-input {

    width: 100%;

    padding: 14px 20px;

    background-color: rgba(5, 8, 15, 0.6);

    border: 1px solid rgba(207, 177, 117, 0.2);

    color: #fff;

    border-radius: 8px;

    font-family: var(--font-content);

    font-size: 14px;

    outline: none;

    transition: all 0.3s ease;

}



.l2meta-input:focus {

    border-color: var(--color-gold);

    box-shadow: 0 0 15px rgba(236, 193, 105, 0.15);

    background-color: rgba(0, 0, 0, 0.8);

}



.l2meta-btn {

    width: 100%;

    padding: 16px;

    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);

    border: none;

    color: #000;

    font-family: var(--font-sans);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    border-radius: 8px;

    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    transition: all 0.3s ease;

}



.l2meta-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px var(--color-gold);

    background: linear-gradient(135deg, #fff 0%, var(--color-gold) 100%);

}



/* Footer Styling */

.l2meta-footer {

    width: 100%;

    background-image: linear-gradient(rgba(4, 6, 11, 0.95), rgba(4, 6, 11, 0.95)), url('../images/bg-bottom.jpg');

    background-size: cover;

    background-position: center top;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding: 60px 50px 40px;

    z-index: 5;

    position: relative;

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    gap: 40px;

    flex-wrap: wrap;

    margin-bottom: 40px;

}



.footer-brand {

    flex: 1;

    min-width: 250px;

}



.footer-brand p {

    font-size: 12px;

    color: var(--color-text-secondary);

    margin-top: 15px;

    max-width: 350px;

}



.footer-links-grid {

    display: flex;

    gap: 60px;

    flex-wrap: wrap;

}



.footer-column {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.footer-column h4 {

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 800;

    color: var(--color-gold);

    letter-spacing: 2px;

    text-transform: uppercase;

}



.footer-column a {

    font-size: 12px;

    color: var(--color-text-secondary);

    text-decoration: none;

    transition: all 0.2s ease;

}



.footer-column a:hover {

    color: var(--color-gold);

    padding-left: 3px;

}



.footer-bottom {

    max-width: 1200px;

    margin: 0 auto;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding-top: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



.footer-bottom p {

    font-size: 10px;

    color: rgba(255, 255, 255, 0.25);

    max-width: 700px;

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}



/* Responsive Burger Mobile Menu */

.burger-menu-btn {

    display: none;

    font-size: 24px;

    color: #fff;

    cursor: pointer;

    background: none;

    border: none;

}



@media (max-width: 768px) {

    .l2meta-nav {

        display: none;

    }



    .burger-menu-btn {

        display: block;

    }

}



/* News Modal Styles */

.news-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85);

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    backdrop-filter: blur(8px);

}



.news-modal-overlay.active {

    opacity: 1;

    visibility: visible;

}



.news-modal {

    background-color: var(--bg-card);

    border: 2px solid var(--color-gold);

    border-radius: 12px;

    width: 90%;

    max-width: 700px;

    max-height: 85vh;

    overflow-y: auto;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

    display: flex;

    flex-direction: column;

    animation: zoomIn 0.3s ease;

}



@keyframes zoomIn {

    from {

        transform: scale(0.9);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



.news-modal-header {

    padding: 20px 25px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.news-modal-close {

    background: none;

    border: none;

    color: var(--color-gold);

    font-size: 28px;

    cursor: pointer;

    line-height: 1;

    transition: all 0.2s;

}



.news-modal-close:hover {

    color: #fff;

    transform: scale(1.1);

}



.news-modal-body {

    padding: 25px;

    overflow-y: auto;

}



.news-modal-image {

    width: 100%;

    max-height: 300px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    margin-bottom: 20px;

}



.news-modal-title {

    font-family: var(--font-serif);

    font-size: 24px;

    color: #fff;

    margin-bottom: 10px;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);

}



.news-modal-date {

    font-size: 11px;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 20px;

}



.news-modal-content {

    font-size: 14px;

    color: var(--color-text-secondary);

    line-height: 1.8;

}



.news-modal-footer {

    padding: 15px 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    justify-content: flex-end;

}



.news-modal-nav {

    display: flex;

    gap: 10px;

}



.news-modal-nav-btn {

    background-color: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: var(--color-text-secondary);

    padding: 8px 16px;

    border-radius: 4px;

    font-size: 12px;

    font-family: var(--font-sans);

    cursor: pointer;

    transition: all 0.2s;

}



.news-modal-nav-btn:hover:not(:disabled) {

    background-color: var(--color-gold);

    color: #000;

    border-color: var(--color-gold);

}



.news-modal-nav-btn:disabled {

    opacity: 0.3;

    cursor: not-allowed;

}



.news-modal-loading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 0;

    color: var(--color-text-secondary);

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



/* Atmospheric Embers Particle System */

.particle-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}



.ember {

    position: absolute;

    bottom: -20px;

    width: 3px;

    height: 3px;

    background-color: var(--color-gold);

    border-radius: 50%;

    filter: blur(1.2px);

    opacity: 0;

    animation: floatUp 9s infinite linear;

}



@keyframes floatUp {

    0% {

        transform: translateY(0) translateX(0) scale(0.7);

        opacity: 0;

    }



    10% {

        opacity: 0.6;

    }



    90% {

        opacity: 0.6;

    }



    100% {

        transform: translateY(-105vh) translateX(60px) scale(1.3);

        opacity: 0;

    }

}



/* Ornate Medieval Details (Brackets & Corner Trim) */

.ornate-card {

    position: relative;

}



.ornate-card::before,

.ornate-card::after {

    content: '';

    position: absolute;

    width: 14px;

    height: 14px;

    border-color: var(--color-gold);

    border-style: solid;

    pointer-events: none;

    z-index: 5;

    opacity: 0.35;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.ornate-card::before {

    top: 8px;

    left: 8px;

    border-width: 2px 0 0 2px;

}



.ornate-card::after {

    top: 8px;

    right: 8px;

    border-width: 2px 2px 0 0;

}



.ornate-card-bottom::before,

.ornate-card-bottom::after {

    content: '';

    position: absolute;

    width: 14px;

    height: 14px;

    border-color: var(--color-gold);

    border-style: solid;

    pointer-events: none;

    z-index: 5;

    opacity: 0.35;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.ornate-card-bottom::before {

    bottom: 8px;

    left: 8px;

    border-width: 0 0 2px 2px;

}



.ornate-card-bottom::after {

    bottom: 8px;

    right: 8px;

    border-width: 0 2px 2px 0;

}



.ornate-card:hover::before,

.ornate-card:hover::after,

.ornate-card:hover .ornate-card-bottom::before,

.ornate-card:hover .ornate-card-bottom::after {

    opacity: 1;

    border-color: var(--color-cyan);

    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);

}



/* Circular SVG Server Status Rings */

.server-status-ring-wrapper {

    position: relative;

    width: 90px;

    height: 90px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.server-status-ring-svg {

    transform: rotate(-90deg);

    width: 100%;

    height: 100%;

}



.server-status-ring-text {

    position: absolute;

    font-family: var(--font-sans);

    font-size: 14px;

    font-weight: 800;

    color: #fff;

    letter-spacing: 1px;

    text-align: center;

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}



.server-status-ring-text span {

    font-size: 9px;

    font-weight: 500;

    color: var(--color-text-secondary);

}



.server-status-ring-text.cyan {

    color: var(--color-cyan);

    text-shadow: 0 0 10px var(--color-cyan-glow);

}



.server-status-ring-text.gold {

    color: var(--color-gold);

    text-shadow: 0 0 10px rgba(236, 193, 105, 0.4);

}



@keyframes pulseRing {

    0% {

        stroke-width: 3.5px;

        filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.3));

    }



    50% {

        stroke-width: 5px;

        filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));

    }



    100% {

        stroke-width: 3.5px;

        filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.3));

    }

}



.server-status-ring-svg .ring-active.pulse-cyan {

    animation: pulseRing 3.3s infinite ease-in-out;

}



@keyframes pulseRingGold {

    0% {

        stroke-width: 3.5px;

        filter: drop-shadow(0 0 2px rgba(236, 193, 105, 0.3));

    }



    50% {

        stroke-width: 5px;

        filter: drop-shadow(0 0 8px rgba(236, 193, 105, 0.6));

    }



    100% {

        stroke-width: 3.5px;

        filter: drop-shadow(0 0 2px rgba(236, 193, 105, 0.3));

    }

}



.server-status-ring-svg .ring-active.pulse-gold {

    animation: pulseRingGold 3.3s infinite ease-in-out;

}



/* Epic Boss Status Widget Styles */

.bosses-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 24px;

    margin-top: 20px;

}



.boss-card {

    background-color: var(--bg-card);

    border: 1px solid rgba(207, 177, 117, 0.15);

    border-radius: 12px;

    padding: 25px 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

}



.boss-card:hover {

    border-color: var(--color-gold);

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(209, 178, 111, 0.1);

}



.boss-avatar-wrapper {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 1.5px solid var(--color-gold-dark);

    margin: 0 auto 15px;

    overflow: hidden;

    background-color: rgba(5, 8, 15, 0.85);

    position: relative;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

}



.boss-avatar-wrapper::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 50%;

    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);

    pointer-events: none;

}



.boss-avatar {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.boss-card:hover .boss-avatar {

    transform: scale(1.12);

}



.boss-name {

    font-family: var(--font-serif);

    font-size: 16px;

    color: #fff;

    text-transform: uppercase;

    margin-bottom: 6px;

    letter-spacing: 1px;

    font-weight: 700;

}



.boss-level {

    font-family: var(--font-sans);

    font-size: 10px;

    color: var(--color-text-secondary);

    margin-bottom: 12px;

    font-weight: 600;

}



.boss-status-badge {

    display: inline-block;

    font-family: var(--font-sans);

    font-size: 9px;

    font-weight: 800;

    padding: 4px 10px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.boss-status-badge.alive {

    background-color: rgba(16, 185, 129, 0.12);

    color: #10b981;

    border: 1px solid rgba(16, 185, 129, 0.4);

}



.boss-status-badge.dead {

    background-color: rgba(239, 68, 68, 0.12);

    color: #ef4444;

    border: 1px solid rgba(239, 68, 68, 0.4);

}



.boss-hp-bar {

    height: 5px;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.04);

    border-radius: 10px;

    overflow: hidden;

    margin-top: 10px;

    border: 1px solid rgba(255, 255, 255, 0.02);

}



.boss-hp-fill {

    height: 100%;

    border-radius: 10px;

    transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.boss-hp-fill.alive {

    background: linear-gradient(90deg, #10b981 0%, #059669 100%);

    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);

}



.boss-hp-fill.dead {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

/* Boss inspector: one selected boss with a searchable-like visual roster. */
.boss-card[role="button"] { cursor: pointer; }
.boss-card[role="button"]:focus-visible { outline: 2px solid #00d8ff; outline-offset: 3px; }
.boss-inspector { position: fixed; z-index: 10070; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.boss-inspector.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.boss-inspector-backdrop { position: absolute; inset: 0; background: rgba(1,4,9,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.boss-inspector-panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.45fr); width: min(1050px, 96vw); height: min(760px, 92vh); overflow: hidden; border: 1px solid rgba(207,177,117,.65); border-radius: 12px; background: #080d16; box-shadow: 0 28px 80px rgba(0,0,0,.76); }
.boss-inspector-roster { min-height: 0; overflow-y: auto; padding: 18px 12px; border-right: 1px solid rgba(207,177,117,.18); background: rgba(4,7,13,.72); }
.boss-inspector-roster-title { display: block; margin: 2px 8px 12px; color: var(--color-gold); font-family: var(--font-sans); font-size: 10px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }
.boss-inspector-roster-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 5px; border: 1px solid transparent; border-radius: 8px; color: #e7edf8; background: transparent; cursor: pointer; text-align: left; }
.boss-inspector-roster-item:hover, .boss-inspector-roster-item.is-selected { border-color: rgba(207,177,117,.52); background: rgba(207,177,117,.1); }
.boss-inspector-roster-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.5); }.boss-inspector-roster-dot.alive { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,.55); }
.boss-inspector-roster-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }.boss-inspector-roster-level { color: var(--color-text-secondary); font-size: 10px; font-weight: 700; }
.boss-inspector-detail { min-height: 0; overflow-y: auto; padding: 34px; }.boss-inspector-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid rgba(207,177,117,.78); border-radius: 50%; color: #17110a; background: var(--color-gold); cursor: pointer; font-size: 21px; line-height: 26px; }
.boss-inspector-hero { display: flex; align-items: center; gap: 20px; padding: 0 32px 23px 0; border-bottom: 1px solid rgba(255,255,255,.08); }.boss-inspector-avatar { width: 96px; height: 96px; flex: 0 0 96px; overflow: hidden; border: 1px solid var(--color-gold); border-radius: 50%; background: #030507; }.boss-inspector-avatar img { width: 100%; height: 100%; object-fit: cover; }.boss-inspector-kicker { color: var(--color-gold); font-family: var(--font-sans); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }.boss-inspector-name { margin: 5px 0; color: #fff; font-family: var(--font-serif); font-size: 27px; line-height: 1.1; text-transform: uppercase; }.boss-inspector-meta { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.boss-inspector-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }.boss-inspector-stat { min-height: 67px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }.boss-inspector-stat span { display: block; margin-bottom: 7px; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.boss-inspector-stat strong { display: block; color: #f5f7fb; font-family: var(--font-sans); font-size: 14px; word-break: break-word; }.boss-inspector-stat strong.alive { color: #10b981; }.boss-inspector-stat strong.dead { color: #ef4444; }
.boss-inspector-note { margin-top: 17px; color: var(--color-text-secondary); font-size: 11px; line-height: 1.55; }
@media (max-width: 720px) { .boss-inspector { padding: 8px; }.boss-inspector-panel { grid-template-columns: 1fr; max-height: 94vh; }.boss-inspector-roster { max-height: 210px; border-right: 0; border-bottom: 1px solid rgba(207,177,117,.18); }.boss-inspector-detail { padding: 24px 18px; }.boss-inspector-name { font-size: 21px; }.boss-inspector-hero { gap: 13px; padding-right: 28px; }.boss-inspector-avatar { width: 72px; height: 72px; flex-basis: 72px; }.boss-inspector-stats { grid-template-columns: 1fr 1fr; } }


/* Golden scan line micro-animation trigger */

.btn-hex-plate::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 30%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(236, 193, 105, 0.25), transparent);

    transform: skewX(-30deg);

    animation: goldSweep 4.5s infinite ease-in-out;

}



@keyframes goldSweep {

    0% {

        left: -100%;

    }



    15% {

        left: 160%;

    }



    100% {

        left: 160%;

    }

}



/* Server Slide Drawer Trigger Button */

.server-drawer-trigger {

    position: fixed;

    right: 0;

    top: 45%;

    transform: translateY(-50%);

    width: 32px;

    height: 140px;

    background-color: rgba(5, 8, 15, 0.9);

    border: 1.5px solid var(--color-gold);

    border-right: none;

    border-top-left-radius: 8px;

    border-bottom-left-radius: 8px;

    z-index: 1000;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    box-shadow: -5px 0 25px rgba(209, 178, 111, 0.25);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.server-drawer-trigger:hover {

    width: 38px;

    background-color: rgba(5, 8, 15, 0.98);

    box-shadow: -5px 0 25px rgba(209, 178, 111, 0.4);

}



.server-drawer-trigger .pulse-dot {

    width: 8px;

    height: 8px;

    background-color: #10b981;

    border-radius: 50%;

    box-shadow: 0 0 10px #10b981;

    animation: activePulse 2s infinite ease-in-out;

}



.server-drawer-trigger span {

    writing-mode: vertical-lr;

    text-orientation: mixed;

    transform: rotate(180deg);

    font-family: var(--font-sans);

    font-size: 11px;

    font-weight: 800;

    color: var(--color-gold);

    letter-spacing: 2.5px;

    text-transform: uppercase;

}



/* Server Slide Drawer Container */

.server-drawer {

    position: fixed;

    top: 0;

    right: -420px;

    /* Hide off-screen initially */

    width: 390px;

    height: 100vh;

    background: rgba(4, 6, 11, 0.94);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border-left: 2px solid var(--color-gold);

    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.85);

    z-index: 1001;

    padding: 35px 25px;

    display: flex;

    flex-direction: column;

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    box-sizing: border-box;

}



.server-drawer.active {

    right: 0;

}



.server-drawer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding-bottom: 15px;

}



.server-drawer-title {

    font-family: var(--font-serif);

    font-size: 18px;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: 0;

}



.server-drawer-close {

    font-size: 32px;

    color: var(--color-text-secondary);

    background: none;

    border: none;

    cursor: pointer;

    line-height: 0.8;

    transition: color 0.2s ease;

}



.server-drawer-close:hover {

    color: #fff;

}



.server-drawer-content {

    flex: 1;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding-right: 5px;

}



/* Custom scrollbar for drawer content */

.server-drawer-content::-webkit-scrollbar {

    width: 4px;

}



.server-drawer-content::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.01);

}



.server-drawer-content::-webkit-scrollbar-thumb {

    background: rgba(209, 178, 111, 0.25);

    border-radius: 2px;

}



/* Drawer overlay backdrop */

.server-drawer-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    z-index: 1000;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.server-drawer-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



/* Server Cards Overrides in Drawer */

.server-drawer .server-card {

    width: 100%;

    max-width: 100%;

    margin-bottom: 0px;

    padding: 20px 22px;

    box-sizing: border-box;

    flex: none;

    /* Prevent flexbox from shrinking card height */

}



/* Epic Bosses Slider Carousel */

.boss-slider-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 60px;

    box-sizing: border-box;

}



.boss-slider-viewport {

    width: 100%;

    overflow: hidden;

    padding: 15px 5px;

}



.boss-slider-track {

    display: flex;

    gap: 30px;

    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    will-change: transform;

}



/* Boss Card sizing inside track */

.boss-slider-track .boss-card {

    flex: 0 0 calc(33.333% - 20px) !important;

    max-width: calc(33.333% - 20px) !important;

    box-sizing: border-box;

}



@media (max-width: 992px) {

    .boss-slider-track .boss-card {

        flex: 0 0 calc(50% - 15px) !important;

        max-width: calc(50% - 15px) !important;

    }

}



@media (max-width: 600px) {

    .boss-slider-track .boss-card {

        flex: 0 0 100% !important;

        max-width: 100% !important;

    }



    .boss-slider-wrapper {

        padding: 0 35px;

    }

}



/* Medieval Slider Navigation Arrows */

.boss-slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 46px;

    height: 46px;

    background: rgba(5, 8, 15, 0.9);

    border: 1px solid var(--color-gold);

    border-radius: 50%;

    color: var(--color-gold);

    font-size: 26px;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

    box-shadow: 0 0 15px rgba(209, 178, 111, 0.2);

    user-select: none;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

}



.boss-slider-arrow:hover {

    background: var(--color-gold);

    color: #05080f;

    box-shadow: 0 0 20px rgba(209, 178, 111, 0.5);

}



.boss-slider-arrow.prev {

    left: 0;

}



.boss-slider-arrow.next {

    right: 0;

}



.boss-slider-arrow:disabled {

    opacity: 0.25;

    cursor: not-allowed;

    border-color: rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.2);

    background: rgba(5, 8, 15, 0.4);

    box-shadow: none;

}



/* ========================================================================== 
   Home Media Gallery
   ========================================================================== */
.home-banner-section { padding: 26px 0 8px; background: linear-gradient(180deg, rgba(5,8,15,.35), transparent); }
.home-banner-frame { position: relative; max-width: 1100px; min-height: 160px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(207,177,117,.32); border-radius: 12px; background: #080d16; box-shadow: 0 18px 40px rgba(0,0,0,.32); }
.home-banner-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.home-banner-slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.home-banner-slide img { display: block; width: 100%; min-height: 160px; max-height: 330px; object-fit: cover; }
.home-banner-dots { position: absolute; z-index: 2; right: 15px; bottom: 13px; display: flex; gap: 7px; }
.home-banner-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(5,8,15,.45); cursor: pointer; }
.home-banner-dots button.is-active { border-color: var(--color-gold); background: var(--color-gold); box-shadow: 0 0 10px rgba(207,177,117,.65); }
.home-media-section { padding-top: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.03); }
.home-media-header { margin-bottom: 30px; }
.home-media-header p { max-width: 580px; margin: 10px auto 0; color: var(--color-text-secondary); font-size: 13px; text-align: center; }
.home-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-media-card { position: relative; display: block; min-height: 190px; overflow: hidden; border: 1px solid rgba(207,177,117,.18); border-radius: 10px; background: #090d15; box-shadow: 0 10px 24px rgba(0,0,0,.25); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.home-media-card:hover { transform: translateY(-4px); border-color: rgba(207,177,117,.65); box-shadow: 0 15px 32px rgba(0,0,0,.45); }
.home-media-card img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; transition: transform .35s ease, opacity .25s ease; }
.home-media-card:hover img { transform: scale(1.06); }
.home-media-card.media-error img { opacity: 0; }
.home-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,15,.06), rgba(5,8,15,.78)); pointer-events: none; }
.home-media-kind { position: absolute; left: 12px; bottom: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; color: #fff; background: rgba(5,8,15,.78); font-family: var(--font-sans); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.home-media-kind i { color: var(--color-gold); }
.home-media-play { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(207,177,117,.8); border-radius: 50%; color: #14100a; background: var(--color-gold); transform: translate(-50%, -50%); box-shadow: 0 0 22px rgba(207,177,117,.35); }
.home-media-local-video { height: 190px; display: flex; align-items: center; justify-content: center; color: var(--color-gold); background: radial-gradient(circle at center, rgba(207,177,117,.18), transparent 60%), #090d15; font-size: 38px; }
.home-media-action { margin-top: 25px; text-align: center; }
.home-gallery-lightbox { position: fixed; z-index: 10050; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease, visibility .22s ease; }
.home-gallery-lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.home-gallery-lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,5,10,.88); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.home-gallery-lightbox-panel { position: relative; z-index: 1; max-width: min(1060px, 94vw); max-height: 88vh; padding: 8px; border: 1px solid rgba(207,177,117,.58); border-radius: 10px; background: #090d15; box-shadow: 0 24px 70px rgba(0,0,0,.72); }
.home-gallery-lightbox-panel img { display: block; max-width: 100%; max-height: calc(88vh - 16px); border-radius: 5px; object-fit: contain; }
.home-gallery-lightbox-close { position: absolute; z-index: 2; top: -14px; right: -14px; width: 33px; height: 33px; border: 1px solid rgba(207,177,117,.82); border-radius: 50%; color: #17110a; background: var(--color-gold); cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.5); }
@media (max-width: 860px) { .home-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hero-banner-rail { left: 10px; bottom: 20px; } .hero-banner-tab:hover, .hero-banner-tab:focus { width: min(290px, calc(100vw - 20px)); } .hero-banner-expanded { width: calc(min(290px, 100vw - 20px) - 34px); } }
@media (max-width: 520px) { .home-media-grid { grid-template-columns: 1fr; } .home-media-card, .home-media-card img, .home-media-local-video { min-height: 180px; height: 180px; } .home-gallery-lightbox { padding: 16px; } }

/* ========================================================================== 
   Starter Packs Styles
   ========================================================================== */
.starter-packs-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 25px;

    margin-top: 30px;

    align-items: stretch;
}



.sp-card {

    background: rgba(10, 15, 25, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    padding: 30px 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

    transition: all 0.4s ease;

    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



.sp-card:hover {

    transform: translateY(-8px);

    border-color: rgba(207, 177, 117, 0.3);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);

}



/* Themes */

.sp-card.theme-basic {

    border-top: 3px solid #8e9eab;

}

.sp-card.theme-improved {

    border-top: 3px solid #dcdcdc;

}

.sp-card.theme-premium {

    border-top: 3px solid #cfb175;

}

.sp-card.theme-elite {

    border-top: 3px solid #a855f7;

    background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(10, 15, 25, 0.8) 100%);

    box-shadow: 0 0 40px rgba(168, 85, 247, 0.15);

}

.sp-card.theme-elite::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 50%);

    pointer-events: none;

    z-index: 0;

}



.sp-shield-wrapper {

    position: relative;

    z-index: 2;

    height: 100px;

    margin-bottom: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.sp-shield {

    max-height: 100%;

    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));

    transition: transform 0.4s ease;

}

.sp-card:hover .sp-shield {

    transform: scale(1.08);

}



.sp-subtitle {

    font-size: 10px;

    font-weight: 700;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 5px;

    z-index: 2;

}



.sp-title {

    font-family: var(--font-serif);

    font-size: 22px;

    color: #fff;

    margin-bottom: 25px;

    text-transform: uppercase;

    letter-spacing: 2px;

    z-index: 2;

}



.sp-items-list {

    list-style: none;

    padding: 0;

    margin: 0 0 30px 0;

    text-align: left;

    z-index: 2;

    flex-grow: 1;

}



.sp-items-list li {

    display: flex;

    align-items: center;

    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    font-size: 12px;

    color: #ccc;

}

.sp-items-list li:last-child {

    border-bottom: none;

}

.sp-items-list li.highlight {

    color: var(--color-gold);

    font-weight: 600;

}



.sp-items-list img {

    width: 20px;

    height: 20px;

    margin-right: 10px;

    border-radius: 4px;

}



.sp-qty {

    margin-left: auto;

    font-weight: 700;

    font-family: var(--font-sans);

    color: #fff;

}

.sp-items-list li.highlight .sp-qty {

    color: var(--color-gold);

}



.sp-price-box {

    margin-bottom: 15px;

    z-index: 2;

    min-height: 40px;

}

.sp-price-old {

    font-size: 14px;

    color: #666;

    text-decoration: line-through;

    margin-bottom: 4px;

}

.sp-price-promo {

    font-size: 9px;

    color: var(--color-gold);

    letter-spacing: 1px;

}



.sp-buy-btn {

    display: block;

    background: linear-gradient(135deg, #cfb175 0%, #9e7f41 100%);

    color: #05080f;

    font-family: var(--font-sans);

    font-weight: 800;

    font-size: 13px;

    padding: 14px 20px;

    border-radius: 6px;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

    z-index: 2;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(207, 177, 117, 0.2);

}

.sp-buy-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(207, 177, 117, 0.4);

    color: #000;

}



.sp-learn-more {

    font-size: 11px;

    color: var(--color-text-secondary);

    text-transform: uppercase;

    letter-spacing: 1px;

    text-decoration: underline;

    z-index: 2;

    transition: color 0.2s;

}

.sp-learn-more:hover {

    color: #fff;

}

/* Player de lives: mantém o usuário no site e evita abrir uma nova aba. */
.live-stream-modal { position: fixed; z-index: 10060; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.live-stream-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.live-stream-modal-backdrop { position: absolute; inset: 0; background: rgba(1,4,9,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.live-stream-modal-panel { position: relative; z-index: 1; width: min(1080px, 94vw); overflow: hidden; border: 1px solid rgba(207,177,117,.62); border-radius: 11px; background: #080d16; box-shadow: 0 28px 80px rgba(0,0,0,.75); }
.live-stream-modal-header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap:14px; padding: 0 19px; border-bottom: 1px solid rgba(207,177,117,.18); color: var(--color-gold); font-family: var(--font-sans); font-size: 11px; font-weight: 900; letter-spacing: 1.2px; }
.live-stream-modal-header span i { margin-right: 7px; color: #f14141; font-size: 9px; animation: livePulse 1.25s infinite; }.live-stream-modal-header small { overflow: hidden; max-width: 60%; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.live-stream-modal-player { width: 100%; aspect-ratio: 16 / 9; background: #030507; }.live-stream-modal-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.live-stream-modal-close { position: absolute; z-index: 2; top: -14px; right: -14px; width: 33px; height: 33px; border: 1px solid rgba(207,177,117,.86); border-radius: 50%; color: #15100a; background: var(--color-gold); cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.58); }

/* Kharvion identity pass: warm black, crimson and antique gold. */
.l2meta-footer {
    border-top-color: rgba(207, 177, 117, 0.32);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(128, 14, 22, 0.28), transparent 52%),
        linear-gradient(180deg, rgba(31, 4, 5, 0.98), rgba(7, 1, 2, 0.99));
    box-shadow: inset 0 18px 38px rgba(0, 0, 0, 0.24);
}

/* Status and ranking tables: shared spacing for every legacy ranking page. */
.ranking-container {
    overflow-x: auto;
    border: 1px solid rgba(207, 177, 117, 0.2);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(33, 7, 9, 0.82), rgba(10, 2, 3, 0.9));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.ranking-header {
    padding: 24px 28px 10px;
}

.ranking-title h2 {
    color: #fff7ec;
    font-family: var(--font-serif);
    font-size: 24px;
    letter-spacing: 0.3px;
}

.ranking-title span {
    display: block;
    margin-top: 5px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.leaderboard-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.leaderboard-table th {
    padding: 13px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(207, 177, 117, 0.22);
    color: #dfc487;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.leaderboard-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--color-text-primary);
    font-size: 13px;
    vertical-align: middle;
}

.leaderboard-table tbody tr {
    transition: background-color 0.2s ease;
}

.leaderboard-table tbody tr:hover {
    background: rgba(177, 35, 38, 0.1);
}

.leaderboard-table tbody tr:last-child td {
    border-bottom: 0;
}

.leaderboard-table .rank-pos {
    width: 58px;
    color: var(--color-gold);
    font-family: var(--font-sans);
    font-weight: 800;
    text-align: center;
}

@media (max-width: 700px) {
    .ranking-header {
        padding: 20px 18px 8px;
    }

    .ranking-title h2 {
        font-size: 20px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 12px 14px;
    }
}
@keyframes livePulse { 50% { opacity: .35; } }
@media (max-width: 520px) { .live-stream-modal { padding: 10px; } .live-stream-modal-header { padding: 0 12px; } .live-stream-modal-header small { max-width: 50%; } }