@charset "utf-8";

/* hornet 슬롯 게임 리스트 (원본 Game/Slot2 popup 스타일 이식) */

.slot-wrap {position:relative; margin:20px auto 0; padding:20px 20px; width:100%; box-sizing:border-box;}

.slot-search {position: relative; margin:0 auto 10px auto; padding:10px 10px; width: 100%; text-align: center; background: #261e12; border: 2px solid #614822; box-sizing:border-box;}
.slot-search > ul {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center; list-style:none;}
.slot-search > ul > li {position: relative;}
.slot-search > ul > li > input {margin: 0; padding:10px 10px; width: 350px; font-size: 15px; font-weight: 600; color:#fff; background: #282828; border: 2px #504f4f solid; border-radius: 5px; outline:none;}
.slot-search > ul > li > button {margin:0; padding:10px 0; width: 100px; font-size: 15px; font-weight: 600; color:#fff; border-radius: 5px; cursor:pointer; border:0;}
.slot-search > ul > li > button.searchBtn-1 {background: #4750ff;}
.slot-search > ul > li > button.searchBtn-2 {background: #cb21f3;}
.slot-search > ul > li > button.searchBtn-3 {background: #0cab6b;}

.pop-item-wrap {position:relative; margin:0 auto; padding:20px 0; width: 100%; display:flex; flex-wrap: wrap; gap:15px; justify-content:flex-start; align-items: flex-start;}
.pop-item-wrap.loading {opacity:0.4; pointer-events:none;}

/* active vendor highlight on top list */
.casino-list > li.active {outline:3px solid #ffd060; outline-offset:-3px; border-radius:10px;}
.pop-item-wrap .empty {width:100%; text-align:center; padding:40px 0; color:#d0d0d1;}

.item {margin:0; padding:0; cursor: pointer; width:210px; transition:transform 0.15s;}
.item:hover {transform:translateY(-3px);}
.item > img {width:210px; height:200px; border-radius:10px; background:#1a1a1a; object-fit:cover; display:block;}
.item .title {margin:0 auto; padding:5px 0; width:100%; text-align:center; font-weight: 500; color:#fff;}

@media (max-width: 1024px) {
    .pop-item-wrap {gap:10px;}
    .item {width:calc(100%/4 - 10px); box-sizing:border-box;}
    .item > img {width:100%; height:auto; aspect-ratio:1/1;}
}
@media (max-width: 720px) {
    .item {width:calc(100%/3 - 10px);}
    .slot-search > ul > li > input {width:100%; padding:5px 5px; font-size:13px;}
    .slot-search > ul > li > button {padding:5px 15px; width:auto; font-size:13px;}
}
@media (max-width: 480px) {
    .item {width:calc(100%/2 - 10px);}
    .slot-search > ul {flex-wrap:wrap;}
    .slot-search > ul > li, .slot-search > ul > li > input {width:100%;}
}