body {
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#f4f1ea;
background-image:
radial-gradient(#e5e0d6 1px, transparent 1px);
background-size:20px 20px;
color:#1f2933;
}

/* NAVBAR */

.navbar{
background:#243447;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 24px;
position:sticky;
top:0;
z-index:1000;
}

.brand{
font-weight:700;
font-size:20px;
text-decoration:none;
color:white;
}

.nav-links a{
color:white;
text-decoration:none;
margin:0 14px;
font-weight:500;
}

.nav-links a:hover{
opacity:.8;
}

/* USER */

.user-area{
display:flex;
align-items:center;
}

.avatar{
width:36px;
height:36px;
border-radius:50%;
cursor:pointer;
border:2px solid #ddd7cc;
margin-left:10px;
}

/* DROPDOWN */

.dropdown{
display:none;
position:absolute;
right:20px;
top:60px;
background:white;
border-radius:10px;
border:1px solid #ddd7cc;
min-width:180px;
box-shadow:0 6px 16px rgba(0,0,0,.15);
overflow:hidden;
}

.dropdown a{
display:block;
padding:12px 16px;
color:#1f2933;
text-decoration:none;
}

.dropdown a:hover{
background:#f4f1ea;
}

.dropdown-name{
padding:12px 16px;
color: #1f2933;
font-weight:600;
border-bottom:1px solid #eee;
}

.show{
display:block;
}

/* MOBILE */

.hamburger{
display:none;
font-size:24px;
cursor:pointer;
}

.mobile-menu{
display:none;
background:#243447;
}

.mobile-menu a{
display:block;
padding:14px 20px;
color:white;
text-decoration:none;
border-top:1px solid rgba(255,255,255,.1);
}

.mobile-menu.show{
display:block;
}

/* MAIN CONTAINER */

.container{
max-width:1100px;
margin:auto;
padding:30px;
}

/* HERO */

.hero{
text-align:center;
padding:40px 20px;
}

.hero h1{
font-size:42px;
margin-bottom:10px;
}

.hero p{
font-size:18px;
color:#4b5563;
}

/* ARENA CARDS */

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.card{
background:white;
border-radius:14px;
padding:35px;
border:1px solid #ddd7cc;
text-align:center;
transition:.25s;
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.card-icon{
font-size:40px;
margin-bottom:15px;
}

/* BUTTON */

.btn{
display:inline-block;
margin-top:18px;
padding:12px 20px;
border-radius:8px;
background:#3a6ea5;
color:white;
font-weight:600;
text-decoration:none;
transition:.2s;
}

.btn:hover{
background:#315e8d;
}

/* TABLES */

table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:10px;
overflow:hidden;
}

th,td{
padding:12px;
border-bottom:1px solid #ddd7cc;
}

th{
background:#f0ece4;
}

/* STATUS COLORS */

.win{color:#2e7d32;font-weight:600;}
.loss{color:#c62828;font-weight:600;}
.pending{color:#b08900;font-weight:600;}

/* FOOTER */

.footer{
background:#243447;
color:white;
padding:18px;
margin-top:60px;
}

.footer-inner{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
}

/* MOBILE */

@media(max-width:800px){

.nav-links{
display:none;
}

.hamburger{
display:block;
}

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

}