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

        * { font-family: 'Inter', sans-serif; }

        /* ============ PURE-CSS GAMING BACKGROUND (Lighter & Cleaner) ============ */
        body {
            min-height: 100vh;
            position: relative;
            color: #d8d8d8;
            background-color: #12161f; /* Lighter base color */
            background-image:
                radial-gradient(1000px 700px at -10% 35%, rgba(59,130,246,.25), transparent 65%), /* Stronger Blue */
                radial-gradient(800px 600px at -5% 85%, rgba(124,58,237,.20), transparent 70%),   /* Stronger Purple */
                linear-gradient(180deg, #181e2a 0%, #12161f 45%, #0a0d14 100%);                  /* Lighter Vignette */
            background-attachment: fixed;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed; inset: 0;
            background-image:
                radial-gradient(2px 2px at 10% 20%, rgba(242,207,82,.8), transparent 55%),
                radial-gradient(1.5px 1.5px at 30% 70%, rgba(242,207,82,.6), transparent 55%),
                radial-gradient(2px 2px at 55% 40%, rgba(255,160,60,.65), transparent 55%),
                radial-gradient(1.5px 1.5px at 75% 80%, rgba(242,207,82,.55), transparent 55%),
                radial-gradient(2px 2px at 90% 25%, rgba(255,120,50,.6), transparent 55%),
                radial-gradient(1.5px 1.5px at 45% 90%, rgba(120,160,255,.6), transparent 55%),
                radial-gradient(2px 2px at 65% 10%, rgba(120,160,255,.55), transparent 55%);
            background-size: 900px 700px;
            animation: emberDrift 45s linear infinite;
            opacity: .65; /* Slightly more visible against lighter bg */
            pointer-events: none;
            z-index: 0;
        }
        @keyframes emberDrift {
            from { background-position: 0 0; }
            to   { background-position: 900px -700px; }
        }

        body::after {
            content: '';
            position: fixed; inset: 0;
            background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.40) 100%); /* Lighter vignette */
            pointer-events: none;
            z-index: 0;
        }

        main { position: relative; z-index: 1; }

        /* ============ GAMING DESIGN SYSTEM ============ */

        .wow-panel {
            position: relative;
            background: linear-gradient(180deg, rgba(22,25,32,.92), rgba(8,10,14,.9));
            border: 1px solid rgba(201,162,39,.22);
            box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.45);
        }
        .wow-panel::before {
            content: ''; position: absolute; inset: 5px;
            border: 1px solid rgba(201,162,39,.14);
            pointer-events: none;
        }
        .wow-panel::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background:
                linear-gradient(#e8c552,#e8c552) left top / 18px 2px,
                linear-gradient(#e8c552,#e8c552) left top / 2px 18px,
                linear-gradient(#e8c552,#e8c552) right top / 18px 2px,
                linear-gradient(#e8c552,#e8c552) right top / 2px 18px,
                linear-gradient(#e8c552,#e8c552) left bottom / 18px 2px,
                linear-gradient(#e8c552,#e8c552) left bottom / 2px 18px,
                linear-gradient(#e8c552,#e8c552) right bottom / 18px 2px,
                linear-gradient(#e8c552,#e8c552) right bottom / 2px 18px;
            background-repeat: no-repeat;
        }

        .wow-title {
            font-family: 'Inter', sans-serif;
            font-weight: 900;
            background: linear-gradient(180deg, #fff7d6 0%, #f2cf5b 35%, #c9a227 62%, #8a6a14 100%);
            -webkit-background-clip: text; background-clip: text;
            color: transparent;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,.85));
            letter-spacing: .02em;
        }

        .section-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            color: #f2cf5b;
            text-shadow: 0 0 12px rgba(201,162,39,.35), 0 2px 4px rgba(0,0,0,.8);
            display: flex; align-items: center; gap: .6rem;
        }
        .section-title::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(90deg, rgba(201,162,39,.5), transparent);
        }

        .btn-game {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .95rem 2rem;
            font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
            clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
            transition: transform .2s ease, filter .2s ease;
            text-decoration: none;
        }
        .btn-game:hover { transform: translateY(-2px) scale(1.02); }
        .btn-gold {
            background: linear-gradient(180deg, #f6d478 0%, #c9a227 48%, #8a6a14 100%);
            color: #1a1200;
            text-shadow: 0 1px 0 rgba(255,255,255,.35);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.25);
            animation: pulseGold 2.8s ease-in-out infinite;
        }
        @keyframes pulseGold {
            0%,100% { filter: drop-shadow(0 0 6px rgba(242,207,82,.35)); }
            50%     { filter: drop-shadow(0 0 18px rgba(242,207,82,.7)); }
        }
        .btn-iron {
            background: linear-gradient(180deg, #3a404d 0%, #232833 55%, #141821 100%);
            color: #cfe1ff;
            box-shadow: inset 0 0 0 1px rgba(120,160,255,.25), inset 0 -8px 14px rgba(0,0,0,.4);
            filter: drop-shadow(0 0 8px rgba(59,130,246,.25));
        }
        .btn-iron:hover { filter: drop-shadow(0 0 16px rgba(59,130,246,.5)); }

        .social-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 9px 18px;
            font-weight: 700; font-size: 13px; letter-spacing: .03em;
            color: #fff; text-decoration: none; border: none; cursor: pointer;
            transition: transform .2s ease, filter .2s ease;
        }
        .social-btn:hover { transform: translateY(-3px); }
        .social-btn.youtube   { background: linear-gradient(180deg,#ff4d4d,#cc0000); filter: drop-shadow(0 0 6px rgba(255,0,0,.3)); }
        .social-btn.youtube:hover   { filter: drop-shadow(0 0 14px rgba(255,0,0,.55)); }
        .social-btn.discord   { background: linear-gradient(180deg,#7289ff,#4752c4); filter: drop-shadow(0 0 6px rgba(88,101,242,.3)); }
        .social-btn.discord:hover   { filter: drop-shadow(0 0 14px rgba(88,101,242,.55)); }
        .social-btn.instagram { background: linear-gradient(45deg,#405de6,#833ab4,#e1306c); filter: drop-shadow(0 0 6px rgba(225,48,108,.3)); }
        .social-btn.instagram:hover { filter: drop-shadow(0 0 14px rgba(225,48,108,.55)); }

        .slider-frame { border: 1px solid rgba(201,162,39,.3); padding: 6px; background: rgba(0,0,0,.45); }
        .slider-container { overflow: hidden; position: relative; }
        .slider-track { display: flex; transition: transform .5s ease-in-out; }
        .slide { min-width: 100%; }
        .slide img { filter: saturate(1.05) contrast(1.05); }
        .slider-nav {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            color: #f2cf5b; font-size: 18px;
            background: linear-gradient(180deg, rgba(30,34,42,.9), rgba(10,12,16,.9));
            border: 1px solid rgba(201,162,39,.45);
            clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
            transition: all .2s ease;
        }
        .slider-nav:hover { color: #fff; border-color: #f2cf5b; filter: drop-shadow(0 0 10px rgba(242,207,82,.6)); }
        .slider-nav.prev { left: 10px; }
        .slider-nav.next { right: 10px; }

        .dot {
            width: 9px; height: 9px; transform: rotate(45deg);
            background: #4b5563; cursor: pointer; transition: all .3s ease;
            box-shadow: 0 0 0 1px rgba(0,0,0,.6);
        }
        .dot:hover { background: #9ca3af; }
        .dot.active {
            background: #f2cf5b;
            box-shadow: 0 0 10px rgba(242,207,82,.8), 0 0 0 1px rgba(0,0,0,.6);
            transform: rotate(45deg) scale(1.25);
        }

        .news-card {
            display: block; position: relative; overflow: hidden;
            background: linear-gradient(180deg, rgba(26,29,36,.9), rgba(10,12,16,.9));
            border: 1px solid rgba(201,162,39,.18);
            transition: transform .3s ease, border-color .3s ease, filter .3s ease;
            text-decoration: none;
        }
        .news-card:hover {
            transform: translateY(-6px);
            border-color: rgba(242,207,82,.6);
            filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(242,207,82,.15));
        }
        .news-card .news-date {
            font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
            color: #c9a227;
        }

        .tab-btn {
            position: relative;
            padding: .7rem 1.6rem;
            font-family: 'Inter', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .06em;
            color: #9ca3af; background: rgba(0,0,0,.35);
            border: 1px solid rgba(255,255,255,.08);
            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
            transition: all .25s ease;
            cursor: pointer;
        }
        .tab-btn:hover { color: #e5e7eb; border-color: rgba(201,162,39,.4); }
        .tab-btn.active {
            color: #f2cf5b;
            background: linear-gradient(180deg, rgba(201,162,39,.25), rgba(201,162,39,.08));
            border-color: rgba(242,207,82,.65);
            text-shadow: 0 0 10px rgba(242,207,82,.5);
        }
        .tab-panel { display: none; animation: fadeIn .4s ease; }
        .tab-panel.active { display: block; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .video-frame {
            border: 1px solid rgba(201,162,39,.35);
            padding: 6px; background: rgba(0,0,0,.5);
            filter: drop-shadow(0 10px 24px rgba(0,0,0,.6));
        }
        .video-frame iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }

        .status-online  { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,.5); }
        .status-offline { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,.5); }

        .ornate-divider {
            border: 0; height: 12px; margin: 24px 0; position: relative;
            background: linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
        }
        .ornate-divider::after {
            content: '◆'; position: absolute; left: 50%; top: 50%;
            transform: translate(-50%,-50%);
            color: #f2cf5b; font-size: 8px; text-shadow: 0 0 8px rgba(242,207,82,.8);
        }

        /* ============ RESPONSIVE SIDEBAR FIX ============ */
        @media (max-width: 1024px) {
            .sidebar-sticky {
                position: relative;
                top: 0;
            }
        }
        
        @media (max-width: 640px) {
            .sidebar-sticky .wow-panel {
                padding: 1rem;
            }
            .sidebar-sticky .wow-title {
                font-size: 1.1rem;
            }
        }

        /* Discord widget responsive */
        .discord-widget-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .discord-widget-container iframe {
            max-width: 100%;
            height: 340px;
        }
        @media (max-width: 480px) {
            .discord-widget-container iframe {
                height: 280px;
            }
        }
		
		.tab_main_but {
          display: flex;
          justify-content: center;
        }
		
		
.wow-hero {
    position: relative;
    min-height: 520px;

    background:
        radial-gradient(circle at 50% 45%,
            rgba(50, 78, 115, .18) 0%,
            rgba(8, 11, 17, .05) 35%,
            rgba(0, 0, 0, .65) 100%),

        linear-gradient(
            135deg,
            #111820 0%,
            #080c11 45%,
            #11100d 100%
        );

    border: 1px solid rgba(181, 146, 54, .55);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.9),
        inset 0 0 70px rgba(0,0,0,.85),
        0 20px 70px rgba(0,0,0,.6);

    border-radius: 4px;
}


/* Warcraft stone texture */

.wow-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0px,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: .5;
    pointer-events: none;
}


/* Gold frame */

.wow-frame {
    position: absolute;
    inset: 10px;

    border: 1px solid rgba(198, 163, 72, .22);

    pointer-events: none;
}

.wow-frame::before,
.wow-frame::after {
    content: "";
    position: absolute;

    left: 20px;
    right: 20px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(201,162,39,.45),
        transparent
    );
}

.wow-frame::before {
    top: 12px;
}

.wow-frame::after {
    bottom: 12px;
}


/* Corner decorations */

.wow-corner {
    position: absolute;
    width: 55px;
    height: 55px;
    opacity: .75;
    pointer-events: none;
}

.wow-corner::before,
.wow-corner::after {
    content: "";
    position: absolute;
    background: #c9a227;
}

.wow-corner::before {
    width: 2px;
    height: 35px;
}

.wow-corner::after {
    width: 35px;
    height: 2px;
}

.wow-corner-tl {
    top: 20px;
    left: 20px;
}

.wow-corner-tl::before {
    left: 0;
    top: 0;
}

.wow-corner-tl::after {
    left: 0;
    top: 0;
}

.wow-corner-tr {
    top: 20px;
    right: 20px;
}

.wow-corner-tr::before {
    right: 0;
    top: 0;
}

.wow-corner-tr::after {
    right: 0;
    top: 0;
}

.wow-corner-bl {
    bottom: 20px;
    left: 20px;
}

.wow-corner-bl::before {
    left: 0;
    bottom: 0;
}

.wow-corner-bl::after {
    left: 0;
    bottom: 0;
}

.wow-corner-br {
    bottom: 20px;
    right: 20px;
}

.wow-corner-br::before {
    right: 0;
    bottom: 0;
}

.wow-corner-br::after {
    right: 0;
    bottom: 0;
}


/* Welcome text */

.wow-welcome {
    font-family: 'Cinzel', Georgia, serif;

    font-weight: 800;

    color: #eee8d8;

    letter-spacing: .02em;

    text-shadow:
        0 2px 0 #000,
        0 4px 8px rgba(0,0,0,.9),
        0 0 25px rgba(255,255,255,.08);
}


/* Epic server title */

.wow-title-epic {

    display: inline-block;

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

    font-weight: 900;

    letter-spacing: .035em;

    color: #f0c94d;

    background: linear-gradient(
        180deg,
        #fff3a0 0%,
        #f4d35e 22%,
        #c99b2e 58%,
        #8a641b 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 3px 0 #3b2505)
        drop-shadow(0 5px 8px rgba(0,0,0,.9));

    text-shadow:
        0 0 25px rgba(239,191,55,.28);
}


/* Title shine animation */

.wow-title-epic {
    animation: wowTitleGlow 4s ease-in-out infinite;
}

@keyframes wowTitleGlow {

    0%, 100% {
        filter:
            drop-shadow(0 3px 0 #3b2505)
            drop-shadow(0 5px 8px rgba(0,0,0,.9));
    }

    50% {
        filter:
            drop-shadow(0 3px 0 #3b2505)
            drop-shadow(0 5px 14px rgba(239,191,55,.55));
    }
}


/* Subtitle */

.wow-subtitle {
    color: #aaa69b;

    text-shadow:
        0 2px 3px rgba(0,0,0,.9);
}


/* Ornaments */

.wow-rune {
    color: #c9a227;

    font-size: 15px;

    text-shadow:
        0 0 8px rgba(201,162,39,.65),
        0 2px 3px #000;
}

.wow-emblem {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #e8c75b;

    font-size: 22px;

    border: 1px solid rgba(201,162,39,.65);

    transform: rotate(45deg);

    background:
        linear-gradient(
            135deg,
            rgba(201,162,39,.12),
            rgba(0,0,0,.4)
        );

    box-shadow:
        0 0 15px rgba(201,162,39,.18),
        inset 0 0 10px rgba(0,0,0,.7);
}

.wow-emblem::first-letter {
    transform: rotate(-45deg);
}


/* Lines */

.wow-line {
    width: 55px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #80651f
    );
}

.wow-line.right {
    background: linear-gradient(
        90deg,
        #80651f,
        transparent
    );
}


/* Main divider */

.wow-divider-line {
    height: 1px;
    width: 55px;

    background: linear-gradient(
        90deg,
        transparent,
        #c9a227,
        transparent
    );

    box-shadow:
        0 0 7px rgba(201,162,39,.4);
}

.wow-diamond {
    color: #f2cf5b;

    font-size: 11px;

    text-shadow:
        0 0 12px rgba(242,207,82,.8);
}


/* Main buttons */

.wow-main-button {
    position: relative;

    min-width: 155px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.wow-main-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.12);

    box-shadow:
        0 8px 25px rgba(0,0,0,.6),
        0 0 20px rgba(201,162,39,.2);
}

.wow-main-button:active {
    transform: translateY(0);
}


/* Social buttons */

.wow-social {
    border: 1px solid rgba(160,140,90,.25);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(0,0,0,.35)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 3px 10px rgba(0,0,0,.4);

    transition:
        all .2s ease;
}

.wow-social:hover {
    transform: translateY(-2px);

    border-color: rgba(201,162,39,.5);

    box-shadow:
        0 5px 18px rgba(0,0,0,.6),
        0 0 12px rgba(201,162,39,.15);
}


/* Mobile */

@media (max-width: 640px) {

    .wow-hero {
        min-height: auto;
    }

    .wow-frame {
        inset: 7px;
    }

    .wow-corner {
        transform: scale(.7);
    }

    .wow-welcome {
        font-size: .85em;
    }

    .wow-title-epic {
        letter-spacing: .01em;
    }

    .wow-emblem {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .wow-line {
        width: 30px;
    }
}