@charset "utf-8";

/****************************************************************************************************************************************
W09(=type10.startapi.net) game.css — 원본 css/game.css(카지노·슬롯 게임사 목록) 이식.

🔴 목록 마크업은 원본 .list-game > .list-item(div) 이었지만 ul.casino-list > li.list-item 으로 바꿨다.
   business/game.js 가 `.casino-page .casino-list > li` / `.slot-page .casino-list > li` 로 실행을 위임한다(슬롯도 casino-list).
🔴 원본 카드는 게임사마다 따로 그린 그림(img/casino/PRAGMATICCASINO.png… 302×295, 장당 160~430KB)이었다.
   파일명으로 게임사를 고르면 ACE 가 게임사를 추가할 때마다 빈 카드가 된다 → 공용 게임사 아트·로고(~/img/common)를
   원본 카드 크기·뒤집기 효과대로 겹친다(.w09-front). 앞면에 로고·이름을 두는 건 원본과 다르다 —
   원본은 그림에 로고가 박혀 있었고, 모바일은 첫 탭에 뒤집혔지만 우리는 첫 탭이 곧 게임 실행(game.js)이라 뒷면을 볼 일이 없다.
*****************************************************************************************************************************************/

/****************************************************************************************************************************************
카지노 게임리스트 시작
*****************************************************************************************************************************************/
.list-game {position: relative; margin:0 auto 70px auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:15px; justify-content: center;}
.list-item {position:relative; margin:0; padding:0; width: calc(100% / 6 - 15px); text-align: center; border-radius: 10px; overflow:hidden; cursor: pointer;}
.list-item > .w09-front {position: relative; width: 100%; height: 250px; text-align: center;
    background: radial-gradient(circle at 60% 30%, #3a1d63 0%, #140a24 60%, #000 100%);
    border: 1px solid rgba(134, 1, 246, .35); border-radius: 10px; overflow: hidden;
    transition: transform .7s;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}
.w09-front > .g-art {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; object-fit: contain;}
.w09-front > .g-shade {position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 65%);}
.w09-front > .g-info {position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 10px;}
.w09-front > .g-info > .g-logo {display: block; margin: 0 auto 6px auto; max-width: 80%; max-height: 36px; width: auto; filter: drop-shadow(2px 2px 2px #000);}
.w09-front > .g-info > .g-name {display: block; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 1px 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.list-over {position:absolute; top:0; left:0; transform:translateZ(60px) rotateY(180deg);
    margin:35px auto 0 auto; width: 100%; height: 100%; transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d; backface-visibility: hidden;
}
.list-over > img {width: 100px; max-height: 60px; object-fit: contain; filter: drop-shadow(2px 2px 2px #000000);}
.list-over > p {font-size: 12px; font-weight: 700; color:#fff; text-shadow: 1px 0px 2px #000;}
.list-over > button {margin:10px auto 0 auto; padding:10px 20px; display:flex; justify-content: center; align-items: center; font-size:16px; font-weight: 500; color:#7a25ff; background:#fff; border:1px #7a25ff solid; border-radius: 5px; box-shadow: 0px 15px 10px 5px rgba(0, 0, 0, .5);}

@media (hover: hover) and (pointer: fine) {
    .list-item:hover > .w09-front {filter: blur(5px); transform: rotateY(-180deg); box-shadow: 0 0 5px 5px #e7f3ff;}
    .list-item:hover .list-over {transform: rotateY(0deg);}

    .list-over > button:hover {color:#fff; background: #7a25ff;}
}

/* 게임사가 없을 때(ACE 화이트리스트 전 등) */
.game-empty {margin: 0 auto 70px auto; padding: 60px 0; width: 100%; text-align: center; font-size: 16px; color: #adadad; background: rgba(0,0,0,.5); border-radius: 10px;}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1200px) {
    .list-item {width: calc(100% / 4 - 20px);}
    .list-item > .w09-front {height:200px;}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
    .list-over > img {width: 80px;}
    .list-over > button {padding: 8px 20px; font-size: 14px;}
}/* 미디어쿼리문 끝 */

@media (max-width:800px) {
    .list-item {width: calc(100% / 3 - 20px);}
}/* 미디어쿼리문 끝 */


@media (max-width:639px) {
    .list-game {gap:10px;}
    .list-item {width: calc(100% / 2 - 10px);}

    .list-over > img {width: 60px;}
    .list-over > button {padding: 5px 20px; font-size: 14px;}
    .w09-front > .g-info > .g-logo {max-height: 28px;}
    .w09-front > .g-info > .g-name {font-size: 13px;}
}/* 미디어쿼리문 끝 */