body{
background:linear-gradient(rgba(3,7,16,.82),rgba(3,7,16,.92)),url('../images/bg.jpg') center top fixed;
background-size:cover;
font-family:'Trebuchet MS',sans-serif;
color:#d7e7ff;
min-height:100vh;
}

.container{
max-width:1180px;
padding-top:40px;
padding-bottom:40px;
}

.main-box{
background:rgba(8,15,28,.86);
border:1px solid rgba(91,143,201,.25);
box-shadow:0 0 40px rgba(0,0,0,.55), inset 0 0 40px rgba(67,114,173,.08);
border-radius:22px;
overflow:hidden;
backdrop-filter:blur(6px);
}

.hero{
padding:42px 50px 28px;
border-bottom:1px solid rgba(126,177,255,.12);
position:relative;
}

.hero:after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(86,153,255,.12), transparent 35%);
pointer-events:none;
}

.logo{
max-width:340px;
display:block;
margin:0 auto 20px;
filter:drop-shadow(0 0 18px rgba(124,182,255,.35));
}

.realm-title{
font-size:42px;
font-weight:700;
text-align:center;
letter-spacing:2px;
color:#f4f8ff;
text-transform:uppercase;
margin-bottom:8px;
}

.realm-sub{
text-align:center;
color:#8fb3df;
font-size:16px;
margin-bottom:28px;
}

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

.stat-card{
background:linear-gradient(180deg, rgba(22,37,63,.9), rgba(10,18,32,.92));
border:1px solid rgba(122,166,221,.14);
border-radius:14px;
padding:18px;
text-align:center;
transition:.25s ease;
}

.stat-card:hover{
transform:translateY(-4px);
border-color:rgba(146,205,255,.35);
box-shadow:0 0 18px rgba(88,144,228,.15);
}

.stat-number{
font-size:28px;
font-weight:700;
color:#f3f7ff;
}

.stat-label{
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
color:#87a7cf;
margin-top:4px;
}

.nav-tabs{
border:none;
padding:18px 18px 0;
gap:12px;
}

.nav-tabs .nav-link{
border:none;
border-radius:12px;
background:rgba(18,31,52,.75);
color:#91afd4;
padding:12px 20px;
font-weight:700;
transition:.25s ease;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover{
background:linear-gradient(180deg,#3567a5,#1b3658);
color:white;
box-shadow:0 0 14px rgba(86,150,235,.22);
}

.tab-content{
padding:30px;
}

.form-control{
background:#09111d!important;
border:1px solid #243e61!important;
color:#e8f2ff!important;
border-radius:12px!important;
padding:14px!important;
}

.form-control:focus{
box-shadow:0 0 0 3px rgba(80,140,220,.2)!important;
border-color:#6aa8ff!important;
}

.btn,.btn-primary,input[type=submit]{
background:linear-gradient(180deg,#4f88d0,#26476f)!important;
border:none!important;
border-radius:12px!important;
padding:12px 18px!important;
font-weight:700!important;
letter-spacing:.4px;
transition:.2s ease;
}

.btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
}

footer{
text-align:center;
padding:25px;
color:#6d86aa;
}

@media(max-width:900px){
.realm-stats{grid-template-columns:repeat(2,1fr);}
.hero{padding:28px;}
}


/* Modal Fix */
.modal-content{
background: linear-gradient(180deg,#07111f,#0b1b2f)!important;
border:1px solid rgba(120,170,255,.25)!important;
border-radius:18px!important;
box-shadow:0 0 35px rgba(0,0,0,.65)!important;
color:#dbe7ff!important;
}

.modal-header,.modal-footer{
border-color:rgba(120,170,255,.12)!important;
}

.modal-title,
.modal-body label,
.modal-body{
color:#dbe7ff!important;
}

.close{
color:#ffffff!important;
opacity:.9!important;
text-shadow:none!important;
}

.modal-content select,
.modal-content .form-control{
background:#081321!important;
color:#fff!important;
border:1px solid rgba(120,170,255,.25)!important;
}

.rules-block{
line-height:1.7;
animation:fadeIn .35s ease;
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(4px);}
to{opacity:1;transform:translateY(0);}
}