*{margin:0;padding:0;box-sizing:border-box}

body{
font-family:Arial,sans-serif;
background:#04060c;
color:#fff;
overflow-x:hidden;
}

.topbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:20px 50px;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(5,5,10,.88);
border-bottom:1px solid rgba(255,180,0,.25);
backdrop-filter:blur(8px);
}

.logo{
font-size:42px;
font-weight:900;
font-family:Georgia,serif;
color:#facc15;
text-shadow:0 0 20px rgba(250,204,21,.5);
}

nav{
display:flex;
gap:28px;
}

nav a{
color:white;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
font-weight:700;
}

nav a:hover{
color:#facc15;
}

.play-btn{
padding:14px 28px;
border-radius:12px;
background:linear-gradient(135deg,#f59e0b,#facc15);
color:#111;
font-weight:900;
text-decoration:none;
}

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:url('../img/bg.jpg') center/cover no-repeat;
}

.overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.88)),
radial-gradient(circle at center,rgba(255,180,0,.15),transparent 30%);
}

.hero-content{
position:relative;
z-index:2;
max-width:1000px;
padding:120px 20px 80px;
}

.badge{
display:inline-block;
padding:12px 22px;
border-radius:999px;
border:1px solid rgba(255,180,0,.35);
background:rgba(10,10,20,.75);
color:#facc15;
letter-spacing:4px;
font-size:12px;
font-weight:900;
margin-bottom:28px;
}

.hero h1{
font-size:clamp(90px,10vw,180px);
font-family:Georgia,serif;
color:#facc15;
line-height:.9;
text-shadow:0 0 35px rgba(250,204,21,.45),0 8px 0 rgba(80,40,0,.8);
}

.hero h2{
margin-top:18px;
font-size:34px;
letter-spacing:5px;
color:#fff0c0;
}

.hero p{
margin:30px auto;
max-width:780px;
font-size:22px;
line-height:1.7;
color:#e2e8f0;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:35px;
}

.btn{
padding:18px 34px;
min-width:240px;
border-radius:14px;
font-weight:900;
text-decoration:none;
font-size:20px;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.gold{background:linear-gradient(135deg,#f59e0b,#facc15);color:#111}
.blue{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}
.purple{background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff}

.realm-box{
max-width:980px;
margin:-35px auto 45px;
padding:16px;
border-radius:18px;
background:rgba(5,5,10,.92);
border:1px solid rgba(255,180,0,.18);
position:relative;
z-index:5;
}

.realm-box h3{
color:#00ff9d;
font-size:28px;
margin-bottom:24px;
}

.stats{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:18px;
}

.card{
padding:16px 14px;
border-radius:16px;
background:#05080d;
border:1px solid rgba(255,255,255,.08);
min-height:150px;
}

.card span{
display:block;
color:#aaa;
font-size:14px;
margin-bottom:18px;
}

.card strong{
font-size:26px;
font-weight:900;
}

.online{
color:#00ff9d;
}

.balance{
margin-top:30px;
}

.balance h4{
color:#00ff9d;
margin-bottom:10px;
font-size:24px;
}

.balance p{
margin-bottom:12px;
color:#aaa;
}

.bar{
display:flex;
height:28px;
border-radius:8px;
overflow:hidden;
}

.alliance{
width:53%;
background:linear-gradient(90deg,#2563eb,#3b82f6);
}

.horde{
width:47%;
background:linear-gradient(90deg,#991b1b,#ef4444);
}

footer{
padding:40px;
text-align:center;
background:#03050a;
border-top:1px solid rgba(255,180,0,.2);
color:#94a3b8;
}

.connect-wrap{
padding:160px 30px 80px;
max-width:1400px;
margin:auto;
}

.connect-wrap h1{
font-size:72px;
color:#facc15;
font-family:Georgia,serif;
margin-bottom:40px;
text-align:center;
}

.connect-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.connect-card{
padding:32px;
border-radius:18px;
background:rgba(10,10,20,.9);
border:1px solid rgba(255,180,0,.18);
}

.connect-card h2{
color:#facc15;
margin-bottom:16px;
}

.connect-card p{
color:#dbe4ef;
line-height:1.7;
}

@media(max-width:1100px){

.stats{
grid-template-columns:repeat(2,1fr);
}

.connect-grid{
grid-template-columns:1fr;
}
}

@media(max-width:700px){

.topbar{
flex-direction:column;
gap:20px;
padding:18px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:72px;
}

.stats{
grid-template-columns:1fr;
}
}



body{
    background:
    linear-gradient(rgba(5,5,10,.78), rgba(5,5,10,.88)),
    url('../img/herowow_custom_bg.jpg') center center / cover fixed no-repeat !important;
}

.hero{
    min-height:100vh;
    background:
    linear-gradient(rgba(8,8,15,.55), rgba(8,8,15,.80)),
    url('../img/herowow_custom_bg.jpg') center center / cover no-repeat !important;
    position:relative;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at center,
    rgba(128,0,255,.25),
    transparent 60%);
    pointer-events:none;
}

.logo a{
    font-size:34px !important;
    font-weight:900 !important;
    letter-spacing:2px;
    text-shadow:0 0 25px rgba(170,0,255,.8);
}

.hero-content h1{
    font-size:88px !important;
    text-shadow:
    0 0 20px rgba(140,0,255,.9),
    0 0 50px rgba(255,120,0,.6);
}

.topbar{
    background:rgba(5,5,15,.55)!important;
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(140,0,255,.25);
}

.card{
    background:rgba(15,15,30,.82)!important;
    border:1px solid rgba(140,0,255,.25)!important;
    box-shadow:0 0 25px rgba(120,0,255,.15);
}



/* =======================================================
   HERO WOW CUSTOM BACKGROUND FIX - LOAD LAST
   ======================================================= */

html,
body {
    min-height: 100% !important;
    background: #03060d url("../HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
    color: #f4e7c2 !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(2,5,12,.25), rgba(2,5,12,.90)),
        url("../HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
}

/* common wrappers */
.wrapper, .main, .content, .page, .container, #wrapper, #main, #content, .site {
    background-color: transparent !important;
}

/* panels */
.panel, .box, .card, .news, .widget, .module, .realm-status, .ranking, .server-status, table {
    background: rgba(5, 9, 18, 0.86) !important;
    border: 1px solid rgba(255, 211, 102, 0.28) !important;
    box-shadow: 0 0 35px rgba(0,0,0,.55) !important;
    border-radius: 14px !important;
}

/* header / menu */
.header, .top, .topbar, .navbar, nav, .menu, #header, #menu {
    background: rgba(3, 6, 13, 0.88) !important;
    border-bottom: 1px solid rgba(255, 211, 102, 0.25) !important;
}

h1, h2, h3, .title, .logo {
    color: #ffd66b !important;
    text-shadow: 0 0 22px rgba(255,199,74,.35), 0 4px 12px #000 !important;
}

a {
    color: #ffd66b !important;
}

.btn, .button, button, input[type="submit"], .play, .download, .register {
    background: linear-gradient(135deg, #7b1118, #c58a18, #ffd66b) !important;
    color: #160c03 !important;
    border: 1px solid rgba(255,226,139,.65) !important;
    box-shadow: 0 0 24px rgba(255,181,49,.35) !important;
    border-radius: 10px !important;
    font-weight: bold !important;
}

.btn:hover, .button:hover, button:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
}

/* Try to override old image backgrounds */
[class*="bg"], [class*="background"], [id*="bg"], [id*="background"] {
    background-image:
        linear-gradient(rgba(2,5,12,.30), rgba(2,5,12,.86)),
        url("../HeroWoW_Custom/herowow-bg.svg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}



/* =======================================================
   HERO WOW CUSTOM BACKGROUND FIX - LOAD LAST
   ======================================================= */

html,
body {
    min-height: 100% !important;
    background: #03060d url("/HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
    color: #f4e7c2 !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(2,5,12,.25), rgba(2,5,12,.90)),
        url("/HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
}

/* common wrappers */
.wrapper, .main, .content, .page, .container, #wrapper, #main, #content, .site {
    background-color: transparent !important;
}

/* panels */
.panel, .box, .card, .news, .widget, .module, .realm-status, .ranking, .server-status, table {
    background: rgba(5, 9, 18, 0.86) !important;
    border: 1px solid rgba(255, 211, 102, 0.28) !important;
    box-shadow: 0 0 35px rgba(0,0,0,.55) !important;
    border-radius: 14px !important;
}

/* header / menu */
.header, .top, .topbar, .navbar, nav, .menu, #header, #menu {
    background: rgba(3, 6, 13, 0.88) !important;
    border-bottom: 1px solid rgba(255, 211, 102, 0.25) !important;
}

h1, h2, h3, .title, .logo {
    color: #ffd66b !important;
    text-shadow: 0 0 22px rgba(255,199,74,.35), 0 4px 12px #000 !important;
}

a {
    color: #ffd66b !important;
}

.btn, .button, button, input[type="submit"], .play, .download, .register {
    background: linear-gradient(135deg, #7b1118, #c58a18, #ffd66b) !important;
    color: #160c03 !important;
    border: 1px solid rgba(255,226,139,.65) !important;
    box-shadow: 0 0 24px rgba(255,181,49,.35) !important;
    border-radius: 10px !important;
    font-weight: bold !important;
}

.btn:hover, .button:hover, button:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
}

/* Try to override old image backgrounds */
[class*="bg"], [class*="background"], [id*="bg"], [id*="background"] {
    background-image:
        linear-gradient(rgba(2,5,12,.30), rgba(2,5,12,.86)),
        url("/HeroWoW_Custom/herowow-bg.svg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}



/* HeroWoW Icecrown FINAL override */
body{
  background:
    linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.86)),
    url("/assets/img/herowow-icecrown-bg.svg") center top/cover fixed no-repeat,
    #03050b!important;
}
.topbar,.hero,.realm-box{display:none!important}


/* FORCE REAL ICECROWN BACKGROUND */
body{
  background:
    linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.86)),
    url("/assets/img/herowow-icecrown-real.jpg") center top/cover fixed no-repeat,
    #04070d!important;
}
.topbar,.hero,.realm-box{display:none!important}