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

body{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#0a0a0a;
color:#fff;
font-family:Inter, system-ui, sans-serif;
overflow:hidden;
}

canvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.container{
text-align:center;
padding:40px 20px;
z-index:1;
}

.nickname{
font-size:clamp(72px,10vw,140px);
font-weight:800;
letter-spacing:6px;

background:linear-gradient(90deg,#ffffff,#e6e6e6,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 20px rgba(255,255,255,.35),
0 0 60px rgba(255,255,255,.12);
}

.divider{
width:120px;
height:1px;
background:rgba(255,255,255,0.2);
margin:35px auto 50px auto;
}

.links{
display:grid;
grid-template-columns:repeat(2,160px);
gap:28px;
justify-content:center;
margin-top:60px;
}

.card{
display:flex;
align-items:center;
justify-content:center;

width:160px;
height:120px;

background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;

backdrop-filter:blur(10px);

transition:all .25s ease;
}

.card img{
width:36px;
height:36px;
opacity:0.9;
transition:opacity .2s ease, transform .3s ease;
}

.card:hover img{
opacity:1;
transform:scale(1.15) rotate(8deg);
}

.card:hover{
transform:translateY(-6px) scale(1.05);
border-color:rgba(255,255,255,0.25);
box-shadow:0 0 25px rgba(255,255,255,0.08);
}

#cursor-glow{
position:fixed;
width:300px;
height:300px;
pointer-events:none;
background:radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
transform:translate(-50%,-50%);
z-index:0;
}