@charset "utf-8";

.game-popup {display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.72); overflow-y:auto;}
.game-popup.active {display:flex; justify-content:center; align-items:flex-start; padding:40px 20px;}
.game-popup-inner {position:relative; width:100%; max-width:1200px; max-height:calc(100dvh - 80px); display:flex; flex-direction:column; background:#001854; border:1px solid rgba(255,255,255,0.22); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.45); overflow:hidden;}
.game-popup-header {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:#0c2973; border-bottom:1px solid rgba(255,255,255,0.18);}
.game-popup-title {margin:0; font-size:18px; font-weight:700; color:#fff;}
.game-popup-close {width:36px; height:36px; display:flex; justify-content:center; align-items:center; color:#fff; background:#00113b; border:1px solid rgba(255,255,255,0.35); border-radius:50%; cursor:pointer; transition:filter 0.2s ease;}
.game-popup-body {flex:1; min-height:0; padding:20px; overflow-y:auto;}
.game-popup-loading {display:none; padding:40px; text-align:center; color:#dce8ff;}
.game-popup-loading.active {display:block;}
.game-popup-list {display:flex; flex-wrap:wrap; gap:15px; margin:0; padding:0;}
.game-popup-list > li {position:relative; width:calc(100% / 6 - 12.5px); aspect-ratio:3/4; background:#00113b; border:1px solid rgba(255,255,255,0.14); border-radius:8px; overflow:hidden; cursor:pointer;}
.game-popup-list > li > img {width:100%; height:100%; /* object-fit:cover; 제거 — 썸네일 잘림 방지 (디자인팀 요청) */}
.game-popup-list > li > .game-name {position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px 8px; text-align:center; font-size:12px; font-weight:600; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,0.86)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.game-popup-list > li.no-games {width:100%; aspect-ratio:auto; padding:40px; text-align:center; color:#dce8ff; background:transparent; border:0; cursor:default;}
.game-popup-list > li .game-hover {position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.58); opacity:0; transition:opacity 0.2s ease;}
.game-popup-list > li .game-hover .play-icon {width:50px; height:50px; display:flex; justify-content:center; align-items:center; background:rgba(128,179,255,0.35); border-radius:50%; font-size:20px; transform:scale(0.85); transition:transform 0.2s ease;}

@media (hover: hover) and (pointer: fine) {
    .game-popup-close:hover {filter:brightness(1.15);}
    .game-popup-list > li:hover .game-hover {opacity:1;}
    .game-popup-list > li:hover .game-hover .play-icon {transform:scale(1);}
}

@media (max-width:1200px) {
    .game-popup-list > li {width:calc(100% / 5 - 12px);}
}

@media (max-width:992px) {
    .game-popup-list {gap:12px;}
    .game-popup-list > li {width:calc(100% / 4 - 11.25px);}
}

@media (max-width:767px) {
    .game-popup.active {padding:20px 10px;}
    .game-popup-list {gap:10px;}
    .game-popup-list > li {width:calc(100% / 3 - 6.67px);}
}

@media (max-width:480px) {
    .game-popup-list > li {width:calc(100% / 2 - 5px);}
}
/****************************************************************************************************************************************
카지노 시작
*****************************************************************************************************************************************/

@media (hover: hover) and (pointer: fine) {
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1600px) { 
}/* 미디어쿼리문 끝 */