@charset "utf-8";

/****************************************************************************************************************************************
W10 popup.css — 원본 css/popup.css 중 **게임사 목록 화면(.game-wrap)** 부분만 이식.

원본은 카지노·슬롯 게임사 목록을 레이어 팝업(layer_pop/casino.php·slot.php)으로 띄웠다.
우리는 그 화면을 실제 라우트(/Casino, /Slot — W10 전용 뷰)로 보내므로 레이어 래퍼(#layerPopup·.layer-*)는 뺐고,
패널 모양(.game-wrap · .popup-tit · ul.casino-list)만 가져와 페이지 본문에 그대로 쓴다.

🔴 뺀 것: 원본의 게시판 계열(.board-wrap·.list-tb·.write-tb·.page-tit·.board-btn·.bo-guide·ul.moneyBtns …).
   원본 레이어 팝업 전용이라 우리 화면에는 그 마크업이 없고, **공용 뷰(_Shared)와 클래스 이름이 겹칠 수 있다**
   (전역 셀렉터라 다른 화면을 조용히 덮는다). 게시판·충전·환전 외형은 shared-bridge.css 가 책임진다.
*****************************************************************************************************************************************/

/****************************************************************************************************************************************
팝업 공통
*****************************************************************************************************************************************/
.popup-tit {position: relative; margin: 0; padding: 0 15px 0 15px; width: 100%; height: 50px; line-height: 50px; font-size: 23px; font-weight: 900; letter-spacing: -1px; text-align: center; color: #121212; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); background: url('../img/gold-bg.jpg') center top no-repeat; box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px -1px; background-size: 100% 100%;}


/****************************************************************************************************************************************
game-wrap
*****************************************************************************************************************************************/
.game-wrap {position: relative; margin: 0 auto; padding: 30px 30px; width: 1360px; min-height: 400px; background: url('../img/bg.jpg') center top repeat-y; border-radius: 10px; box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.8);}

ul.casino-list {position: relative; margin:40px 0 25px 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:20px 15px; justify-content: center; align-items: center;}
ul.casino-list > li {width: calc(100% / 5 - 15px); cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.casino-list > li:hover {animation: casino_img 1s ease-in-out; transform-origin: 90% 100%;}
}

@keyframes casino_img {
	0%   {transform:rotate(0deg) scaleY(1.1);}
	20%  {transform:rotate(-1deg) scaleY(1.05);}
	35%  {transform:rotate(2deg) scaleY(1);}
	50%  {transform:rotate(-1deg);}
	65%  {transform:rotate(1deg);}
	80%  {transform:rotate(-1deg);}
	100% {transform:rotate(0deg);}
}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width: 1380px) {
	.game-wrap {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:1024px) {
    ul.casino-list {margin:25px 0; gap:10px;}
	ul.casino-list > li {width: calc(100% / 4 - 10px);}
}

@media (max-width:992px) {
	.game-wrap {padding:5px 5px;}
}

@media (max-width:767px) {
	ul.casino-list > li {width: calc(100% / 3 - 10px);}
}

@media (max-width:430px) {
	ul.casino-list > li {width: calc(100% / 2 - 10px);}
}


/****************************************************************************************************************************************
🔴 이식 추가 — 게임사 카드
원본 카드는 게임사마다 따로 그린 240×240 PNG(인물 아트 + 로고 + 한글 이름이 그림에 박힘)였다.
그 파일명으로 게임사를 구분하면 ACE 가 게임사를 추가할 때마다 카드가 깨진다 → 공용 게임사 아트
(~/img/common/{casino|slot}/…, 290×260 투명 인물)와 로고를 원본 카드 구도대로 겹쳐 그린다.
이름은 그림이 아니라 글자(vendor.Title)라 해외 언어·신규 게임사에도 그대로 맞는다.
*****************************************************************************************************************************************/
.w10-card {position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; text-align: left;
    background: radial-gradient(circle at 70% 30%, #2b3a52 0%, #111a28 55%, #05070c 100%);
    border-top: 2px solid #c9a24a; border-bottom: 2px solid #c9a24a; border-radius: 6px; box-shadow: 0 6px 14px rgba(0,0,0,0.6);}
.w10-card .g-art {position: absolute; right: -8%; bottom: 0; height: 100%; width: auto; max-width: none; object-fit: contain;}
.w10-card .g-shade {position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,12,0.85) 0%, rgba(5,7,12,0.35) 55%, rgba(5,7,12,0) 75%);}
.w10-card .g-info {position: absolute; left: 8%; bottom: 14%; width: 62%;}
.w10-card .g-logo {display: block; max-width: 100%; max-height: 42px; width: auto; margin-bottom: 8px;}
.w10-card .g-name {display: block; font-size: 17px; font-weight: 700; color: #f0cf7a; text-shadow: 0 2px 2px rgba(0,0,0,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.game-empty {padding: 60px 0; text-align: center; color: #bbb;}

@media (max-width:767px) {
    .w10-card .g-logo {max-height: 28px; margin-bottom: 4px;}
    .w10-card .g-name {font-size: 13px;}
}