/*#wrapper{
    background-image: url("../images/sty1_home/bg2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}*/

.content-bg{
  position: fixed;
  inset: 0;
  background: url("../images/sty1_home/bg1.webp") center center / cover no-repeat !important;
  /*background-image: url("../images/sty1_home/bg5.png");
  background-size: 100% 100%;*/
  z-index: -1;
}

.main-content{ 
	position: relative;
    display:flex;
    justify-content: center;
}

.main-content .left-area{
    width: 25rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5rem 1.5rem 2rem 1.5rem;
}

.main-menu{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 2rem;
    background-image: url("../images/sty1_home/lobby_main_menu_bg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height:100%
}

.main-menu .menu-btn{
    position: relative;
    display: flex;
    height: 100%;
    color: #f8d8d5;
    font-size: 2rem;
    height: 6.5rem;
    padding-left: 5.6rem;
    text-decoration: none;
    column-gap: 2.5rem;
    align-items: center;
    white-space: nowrap;
    border-radius: 2.5rem;
    /*background-image: linear-gradient(to top, #151e34, #141a2a);*/
    /*box-shadow: -0.05rem -0.19rem 0.38rem 0.02rem rgba(0, 0, 0, 0.5), -0.05rem -0.19rem 0.48rem 0.03rem rgba(0, 0, 0, 0.5);*/
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all .4s;
    cursor: pointer;
    background-image: url("../images/sty1_home/main_menu_btn_bg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.main-menu .menu-btn:hover{
    /*color: #84a0d2 !important;*/
    /*background-image: linear-gradient(to top, #212d47, #263457);*/
    /*box-shadow: -0.02rem -0.1rem 0.19rem 0.01rem rgba(0, 0, 0, 0.5), -0.12rem -0.49rem 0.74rem 0.06rem rgba(0, 0, 0, 0.6);*/
    transform: scale(1.1);
}

.main-menu .menu-btn:before{
    position: absolute;
    left: 2rem;
    top: 2rem;
    content: '';
    display: flex;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.3rem;
    background: no-repeat center;
    background-size: contain;
    transform: scale(1.3);
}

.main-menu .menu-btn.gstore-group-3:before{
    background-image: url("../images/sty1_home/main-menu-icon-3.webp");
}

.main-menu .menu-btn.gstore-group-4:before{
    background-image: url("../images/sty1_home/main-menu-icon-4.webp");
}

.main-menu .menu-btn.gstore-group-5:before{
    background-image: url("../images/sty1_home/main-menu-icon-5.webp");
}

.main-menu .menu-btn.gstore-group-7:before{
    background-image: url("../images/sty1_home/main-menu-icon-7.webp");
}

.main-menu .menu-btn.gstore-group-lobby:before{
    background-image: url("../images/sty1_home/main-menu-icon-lobby.webp");
}

/*.main-menu .menu-btn.gstore-group-3:hover:before,*/
.main-menu .menu-btn.gstore-group-3.active:before{
    background-image: url("../images/sty1_home/main-menu-icon-3-act.webp");
}

/*.main-menu .menu-btn.gstore-group-4:hover:before,*/
.main-menu .menu-btn.gstore-group-4.active:before{
    background-image: url("../images/sty1_home/main-menu-icon-4-act.webp");
}

/*.main-menu .menu-btn.gstore-group-5:hover:before,*/
.main-menu .menu-btn.gstore-group-5.active:before{
    background-image: url("../images/sty1_home/main-menu-icon-5-act.webp");
}

/*.main-menu .menu-btn.gstore-group-7:hover:before,*/
.main-menu .menu-btn.gstore-group-7.active:before{
    background-image: url("../images/sty1_home/main-menu-icon-7-act.webp");
}

/*.main-menu .menu-btn.gstore-group-7:hover:before,*/
.main-menu .menu-btn.gstore-group-lobby.active:before{
    background-image: url("../images/sty1_home/main-menu-icon-lobby-act.webp");
}

.main-menu .menu-btn.active{
    color: #ffeea2 !important;
    /*background-image: linear-gradient(to right, #327ee5, #1e2b76);*/
    background-image: url("../images/sty1_home/main_menu_btn_bg_active.webp");
}

.main-menu .menu-btn.active:before {
    width: 2.3rem;
    height: 2.3rem;
    animation: activeIcon .8s ease-out infinite;
}

@keyframes activeIcon {
    0% {
        top: 2rem
    }

    50% {
        top: 1.2rem;
    }

    100% {
        top: 2rem;
    }
}

.main-content .right-area{
    flex:1;
    padding: 2rem 2.4rem;
    overflow-y: auto;
}

.main-content .right-area::-webkit-scrollbar{
    display: none;
}

.main-content .right-area .right-content {
    max-width: 1450px;
    margin: 0 auto;
}

.game-menu{
    display: flex;
    align-items: center;
    /*max-width: 120rem;*/
	margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.game-menu .menu-btn{
    padding: 1rem 0;
    background-color: #580203;
    border-radius: 10rem;
    border: 0.2rem solid #ff5555;
    font-size: 2.5rem;
    width: 15rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    color: #ff5555;
}

.game-menu .menu-btn:hover{
    background: linear-gradient(to top, #212d47, #263457);
}

.game-menu .menu-btn.active{
    background: linear-gradient(to right, #fac7c2, #ec4c4b);
    border-color: #ffffff;
    color: #3c0400;
    box-shadow: 0rem 0.3rem 1.2rem 0.3rem rgba(182, 54, 53, 1);
}

/* 大廳按鈕選單 */
.game-menu:has(.sp-menu-btn) {
    gap: 0;
}

.game-menu .sp-menu-btn{
    /* padding: 1rem 0; */
    font-size: 2.5rem;
    width: 15rem;
    aspect-ratio: 2.35;
    text-align: center;
    cursor: pointer;
    position: relative;
}

/* 熱門遊戲 */
.game-menu .sp-menu-btn.hot {
    background-image: url("../images/sty1_home/hotgame_normal.webp");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.game-menu .sp-menu-btn.hot:hover,
.game-menu .sp-menu-btn.hot.active {
    background-image: url("../images/sty1_home/hotgame_select.webp");
    opacity: 1;
}

/* 最新遊戲 */
.game-menu .sp-menu-btn.new {
    background-image: url("../images/sty1_home/newgame_normal.webp");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.game-menu .sp-menu-btn.new:hover,
.game-menu .sp-menu-btn.new.active {
    background-image: url("../images/sty1_home/newgame_select.webp");
    opacity: 1;
}

.game-list-row{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1%;
	padding: 2rem 0;
	/*max-width: 120rem;*/
	margin: 0 auto;
}

.game-btn{
	width: 16.66%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: center;
}

.game-thumb{
	position: relative;
	border-radius: 1.4rem;
	overflow: hidden;
	box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .35);
	transform: translateZ(0);
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.game-thumb::after{
	content:"";
	position: absolute;
	inset: 0;
	border-radius: 1.4rem;
	box-shadow: 0 0 0 0.3rem rgba(255,204,0,.55);
	opacity: .6;
	pointer-events: none;
	transition: opacity .15s ease, box-shadow .15s ease;
}

.game-thumb img{
	display: block;
	width: 100%;
	object-fit: cover;
}

.game-thumb > img {
    aspect-ratio: 1;
}

/* Hover layer */
.game-hover{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(60, 190, 210, .45);
	opacity: 0;
	transition: opacity .15s ease;
}

.play-icon{
	width: 45% !important;
	height: auto !important;
	transform: scale(.95);
	transition: transform .15s ease;
	user-select: none;
	pointer-events: none;
}

/* hover / focus: 放大 + 光框更亮 + 顯示 play */
.game-btn:hover .game-thumb,
.game-btn:focus-visible .game-thumb{
	transform: scale(1.06);
	filter: brightness(1.04);
	box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, .45);
}

.game-btn:hover .game-thumb::after,
.game-btn:focus-visible .game-thumb::after{
	opacity: 1;
	box-shadow: 0 0 0 0.3rem rgba(255, 204, 0 , .95),
		0 0 1.8rem rgba(255, 204, 0, .35);
}

.game-btn:hover .game-hover,
.game-btn:focus-visible .game-hover{
	opacity: 1;
}

.game-btn:hover .play-icon,
.game-btn:focus-visible .play-icon{
	transform: scale(1);
}

.game-text{
	margin-top: 0.5rem;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	text-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, .65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.game-btn:focus{ 
	outline:none; 
}

.game-btn:focus-visible{
	outline: 0.3rem solid rgba(255, 255, 255, .55);
	outline-offset: 0.6rem;
	border-radius: 1.6rem;
}

/*進入遊戲的iframe*/
.game-frame-overlay{
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0,0,0,.65);
	display: flex;
	flex-direction: column;
}

.game-frame-bar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 1.2rem;
}

.game-frame-close{
	border: 0;
	border-radius: 0.8rem;
	padding: 0.8rem 1.2rem;
	cursor: pointer;
}

.game-frame{
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.no-login-div{
	font-size: 4.8rem;
	text-align: center;
	color: gold;
    margin-top:3rem;
}

/* 輪播圖 */
.main-content .banner-area{
    overflow: hidden;
    border-radius: 0.5rem;
    width: 100%;
    aspect-ratio: 4.3;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.main-content .banner-area .my-focus{
	border-radius: 5px;
}

.main-content .banner-area .my-focus{
	height: 100%;
	width: 100%;
}

.main-content .banner-area .my-focus .banner-img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-content .banner-area .my-focus .slick-dots{
	position: absolute;
	bottom: 5%;
	width: 100%;
	text-align: center;
}
.main-content .banner-area .my-focus .slick-dots li{
	display: inline-block;
	width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #c5521e;
	margin: 0 0.6rem;
	transition: 0.2s;
}
.main-content .banner-area .my-focus .slick-dots li.slick-active{
	background: #ff0000;
	/* width: 1rem; */
}
.main-content .banner-area .my-focus .slick-dots li button{
	display: none;
}

.main-content .banner-area .my-focus .banner-img {
    width: 100%;
}

#mask-content{
	overflow: hidden;
    position: fixed;
    z-index: 20000;
    max-width: 100%;
    margin: 0px auto;
    height: 100%;
    inset: 0px;
    background: rgba(0,0,0,0.6) center center / cover no-repeat !important;
    display: none;
}

#limit-content{
	display: none;
}