*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI;
}

body{
background:#020205;
color:white;
overflow-x:hidden;
text-align:center;
}

/* LOADING SCREEN */

#loader{
position:fixed;
width:100%;
height:100%;
background:#020205;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:9999;
}

.loaderCircle{
width:80px;
height:80px;
border:5px solid #0f2c35;
border-top:5px solid #00eaff;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.loaderText{
margin-top:15px;
color:#00eaff;
font-size:14px;
letter-spacing:2px;
}

/* PARTICLES */

canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}

/* PROFILE */

.profile{
margin-top:40px;
}

.avatar{
width:110px;
height:110px;
border-radius:50%;
border:3px solid #00eaff;
box-shadow:0 0 25px #00eaff;
}

.name{
font-size:28px;
margin-top:10px;
color:#00eaff;
letter-spacing:2px;
}

.bio{
opacity:.7;
font-size:16px;
}

/* CONTAINER */

.container{
max-width:420px;
margin:auto;
padding:15px;
}

/* GAME CARD */

.game{
display:flex;
align-items:center;
background:#0c0c14;
padding:16px;
margin:14px 0;
border-radius:12px;
border:1px solid #1c1c1c;
cursor:pointer;
transition:.3s;
}

.game:hover{
transform:scale(1.04);
box-shadow:0 0 20px #00eaff;
border-color:#00eaff;
}

.logo{
width:50px;
height:50px;
border-radius:8px;
margin-right:14px;
}

.info{
text-align:left;
flex:1;
}

.gamename{
font-weight:bold;
font-size:16px;
color:#00eaff;
}

.ign{
font-size:12px;
opacity:.7;
}

.uid{
font-size:13px;
color:#00eaff;
}

/* SOCIAL */

.social{
margin-top:30px;
}

.social a{
font-size:28px;
margin:15px;
color:white;
transition:.3s;
}

.social a:hover{
color:#00eaff;
transform:scale(1.3);
}

/* MODAL */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
backdrop-filter:blur(8px);
z-index:999;
align-items:center;
justify-content:center;
}

.modalBox{
background:#0c0c14;
padding:20px;
width:90%;
max-width:360px;
border-radius:14px;
border:1px solid #00eaff;
box-shadow:0 0 25px #00eaff;
text-align:center;
}

.modalShot{
width:100%;
border-radius:10px;
margin-bottom:12px;
}

.modalTitle{
font-size:22px;
color:#00eaff;
}

.modalIGN{
opacity:.8;
margin-top:5px;
}

.modalUID{
color:#00eaff;
margin-top:5px;
}

/* NOTE */

.gamerNote{
margin-top:12px;
padding:10px;
border:1px solid #00eaff;
border-radius:8px;
background:#070707;
font-size:13px;
}

/* BUTTON */

.copyUIDbtn{
margin-top:14px;
background:#00eaff;
border:none;
padding:12px 20px;
border-radius:30px;
font-weight:bold;
cursor:pointer;
color:black;
box-shadow:0 0 15px #00eaff;
transition:.2s;
}

.copyUIDbtn:active{
transform:scale(.9);
}

/* CLOSE */

.closeModal{
position:absolute;
top:20px;
right:25px;
font-size:26px;
cursor:pointer;
}

/* ehee */
/* MESSAGE ICON */

.messageIcon{
position:fixed;
bottom:20px;
left:20px;
background:#00eaff;
color:black;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
cursor:pointer;
box-shadow:0 0 15px #00eaff;
animation:shake 1.5s infinite;
z-index:999;
}

/* SHAKE ANIMATION */

@keyframes shake{
0%{transform:rotate(0deg);}
25%{transform:rotate(10deg);}
50%{transform:rotate(-10deg);}
75%{transform:rotate(10deg);}
100%{transform:rotate(0deg);}
}

/* MESSAGE BADGE */

.msgBadge{
position:absolute;
top:-4px;
right:-4px;
background:red;
color:white;
font-size:12px;
padding:3px 6px;
border-radius:50%;
}
.imgPreview{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.95);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:0.3s;
}

.imgPreview.show{
  opacity:1;
  pointer-events:auto;
}

.imgPreview img{
  max-width:95%;
  max-height:95%;
  border-radius:12px;
  box-shadow:0 0 25px rgba(0,234,255,0.6);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn{
  from{transform:scale(0.7); opacity:0;}
  to{transform:scale(1); opacity:1;}
}