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

:root{
--bg:#090909;
--surface:#131313;
--surface-2:#181818;
--border:#2a2a2a;
--text:#fff;
--muted:#a1a1aa;
--primary:#4f8cff;
--legendary:#f5b942;
--heroic:#8b5cf6;
--respected:#3b82f6;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
font-family:Inter,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

.background-grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:40px 40px;
z-index:-1;
pointer-events:none;
}

.container{
width:min(1300px,94%);
margin:auto;
}

header{
border-bottom:1px solid var(--border);
backdrop-filter:blur(12px);
position:sticky;
top:0;
background:rgba(9,9,9,.9);
z-index:10;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 0;
}

.logo h2{
font-size:28px;
font-weight:800;
}

.logo span{
display:block;
color:var(--muted);
font-size:14px;
margin-top:4px;
}

.home-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: .25s ease;
}

.home-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.home-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 140, 255, .25);
}

.home-btn:active {
    transform: translateY(0);
}

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

.eyebrow{
display:inline-block;
padding:6px 14px;
border:1px solid var(--border);
border-radius:999px;
font-size:13px;
color:var(--primary);
margin-bottom:20px;
}

.hero h1{
font-size:58px;
font-weight:800;
margin-bottom:16px;
}

.hero p{
max-width:700px;
margin:auto;
color:var(--muted);
line-height:1.8;
font-size:18px;
}

.countdown-section{
margin:30px 0 50px;
text-align:center;
}

.countdown-section h2{
margin-bottom:24px;
font-size:28px;
}

.countdown{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.time-box{
width:120px;
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
padding:22px;
}

.time-box span{
display:block;
font-size:40px;
font-weight:800;
}

.time-box small{
display:block;
margin-top:8px;
color:var(--muted);
}

.toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin:45px 0 30px;
flex-wrap:wrap;
}

#searchInput{
flex:1;
min-width:250px;
padding:15px 18px;
background:var(--surface);
border:1px solid var(--border);
border-radius:14px;
color:#fff;
font-size:15px;
outline:none;
}

#searchInput:focus{
border-color:var(--primary);
}

button{
padding:14px 22px;
border:none;
border-radius:14px;
background:var(--primary);
color:#fff;
font-weight:600;
cursor:pointer;
transition:.25s;
}

button:hover{
transform:translateY(-2px);
}

.latency{
color:var(--muted);
font-size:15px;
}

.vehicle-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:24px;
padding-bottom:60px;
}

.vehicle-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
transition:.25s;
}

.vehicle-card:hover{
transform:translateY(-6px);
border-color:var(--primary);
box-shadow:0 10px 30px rgba(79,140,255,.15);
}

.vehicle-card img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
transition:.3s;
}

.vehicle-card:hover img{
transform:scale(1.05);
}

.vehicle-content{
padding:18px;
}

.vehicle-content h3{
font-size:22px;
margin-bottom:14px;
}

.tier{
display:inline-block;
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
text-transform:capitalize;
}

.tier-legendary{background:var(--legendary);color:#111}
.tier-heroic{background:var(--heroic)}
.tier-respected{background:var(--respected)}
.tier-unknown{background:#555}

.empty-state,
.error-card{
grid-column:1/-1;
text-align:center;
padding:80px 20px;
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
}

.skeleton{
background:linear-gradient(90deg,#1d1d1d,#2a2a2a,#1d1d1d);
background-size:200% 100%;
animation:loading 1.2s infinite;
}

.skeleton-card{
overflow:hidden;
}

.skeleton-image{
height:180px;
}

.skeleton-title{
height:22px;
width:70%;
margin:18px;
border-radius:6px;
}

.skeleton-badge{
height:30px;
width:90px;
margin:0 18px 18px;
border-radius:999px;
}

@keyframes loading{
from{background-position:200% 0}
to{background-position:-200% 0}
}

footer{
border-top:1px solid var(--border);
padding:30px;
text-align:center;
color:var(--muted);
margin-top:30px;
}

@media (max-width:768px){
.hero h1{font-size:40px}
.hero p{font-size:16px}
.navbar{flex-direction:column;gap:16px}
.toolbar{flex-direction:column;align-items:stretch}
.time-box{width:100px}
.time-box span{font-size:32px}
}