.main_screen .gacha_back{
    user-select: none;
}

.main_screen button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
    border: none;
    border-radius: 8px;
}

.main_screen button:hover {
    background-color: #45a049;
}

.main_screen button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.main_screen #gacha-grid {
    display: flex;
    flex-wrap: wrap;  /* Wrap to the next line if it overflows */
    justify-content: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.main_screen .gacha-item-container {
    padding: 3px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95px; /* 전체 테두리와 패딩 포함한 크기 */
    height: 156px; /* 전체 테두리와 패딩 포함한 크기 */
}

.main_screen .gacha-item {
    width: 100px;
    height: 150px;
    object-fit: contain;
    border-radius: 8px;
}

/* 등급별 배경 */
.main_screen .common {
    border: 3px solid #cd7f32;  /* 브론즈색 */
}

.main_screen .rare {
    border: 3px solid #87cefa;  /* 하늘색 */
}

.main_screen .hero {
    border: 3px solid #ffd700;  /* 황금색 */
}

/* 무지개 테두리 적용 */
.main_screen .legend {
    border: 3px solid transparent;
    background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 3px;
    border-radius: 8px;
    cursor: pointer;  /* 클릭 가능할 때 손가락 커서 */
    transition: transform 0.3s; /* 천천히 커지게 설정 */
}
.main_screen .legend:hover {
    transform: scale(1.05); /* 마우스 올렸을 때 크기 증가 */
}
.main_screen .legend:active {
    transform: scale(0.95); /* 마우스 올렸을 때 크기 증가 */
}

.main_screen img {
    width: 150px; /* 이미지 크기 조정 */
    height: auto; /* 비율 유지 */
    margin-top: 8px;
    margin-right: 8px;
    border-radius: 8px;
    user-select: none;
}

.main_screen img[disabled] {
    filter: grayscale(100%); /* 흑백 필터 적용 */
    pointer-events: none; /* 클릭 방지 */
}

.main_screen img.draw {
    transition: all 0.1s
}
.main_screen img.draw:active {
    transform: scale(0.95);
}
/* 추가된 스타일로 모바일에서 뿌리기 아이템 가로 정렬 */
@media screen and (max-width: 480px) {
    .main_screen #gacha-grid {
        flex-direction: row; /* 가로로 정렬 */
    }
    .main_screen .gacha-item-container {
        width: 110px; /* 모바일에서의 크기 조정 */
        height: 150px; /* 모바일에서의 크기 조정 */
    }
    .main_screen .gacha-item {
        width: 100px; /* 이미지 크기 조정 */
        height: 125px; /* 이미지 크기 조정 */
    }
}