/*#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;
	position: relative;
}

.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;
}

/* iframe header */
.game-frame-overlay-header-area{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 2px 5px;
	
	overflow: hidden;
	
	background: linear-gradient(to bottom, #950000, #330500);
    border: 0.2rem solid #910000;
	
    position: absolute;
    top: 0;
    left: 0;
}

/* iframe header 裡面所有按鈕 */
.game-frame-overlay-header-area > div{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;

	user-select: none;
	cursor: pointer;
}

/* 箭頭 */
.game-frame-overlay-header-area .display-btn svg {
	width: 2.8rem;
	height: 2.8rem;
	transition: transform 0.3s ease;
}

/* 展開的時候箭頭翻轉 */
.game-frame-overlay-header-area.collapsed .display-btn svg {
	transform: rotate(180deg);
}

/* 展開狀態 */
.game-frame-overlay-header-area.expanded {
	width: 100%;
}

/* 收合狀態 */
.game-frame-overlay-header-area.collapsed {
	width: auto;
}

/* 收合時隱藏其他按鈕 */
.game-frame-overlay-header-area.collapsed .back-btn,
.game-frame-overlay-header-area.collapsed .update-transfer-quota-btn {
	display: none;
}

/* 回大廳 */
.game-frame-overlay-header-area .back-btn{
	height: 3.5rem;
	padding: 0 0.8rem;
	border-radius: 1rem;
	position: relative; 
	overflow: hidden; 

	border: .25rem solid rgba(255, 235, 170, .95);
	box-shadow:
		0 .6rem 1.4rem rgba(0,0,0,.35),
		inset 0 .25rem .8rem rgba(255,255,255,.35),
		inset 0 -.35rem .9rem rgba(140, 70, 0, .30),
		inset 0 0 0 .18rem rgba(160, 80, 0, .22);

	background:
		radial-gradient(circle at 25% 20%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
		linear-gradient(to bottom, #ffe39a 0%, #ffc84a 35%, #f1a700 70%, #d07a00 100%);

	color: #6b2b00;
	font-weight: 600;
	letter-spacing: .15rem;
	text-shadow:
		0 .15rem 0 rgba(255,255,255,.35),
		0 .25rem 0 rgba(0,0,0,.25);

	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* 回大廳 home 的 icon 太高，所以調整一下 */
.game-frame-overlay-header-area .back-btn svg{
	padding-bottom: 0.25rem;
}

/* 回大廳, 更新餘額 反光效果  */
.game-frame-overlay-header-area .back-btn::before,
.game-frame-overlay-header-area .update-transfer-quota-btn::before{
	content:"";
	position:absolute;
	inset: .35rem .6rem auto .6rem;
	height: 45%;
	border-radius: 1rem;
	background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0));
	pointer-events:none;
}

/* iframe header 裡面所有按鈕的滑動特效 */
.game-frame-overlay-header-area > div:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
}

/* iframe header 裡面所有按鈕的點擊特效 */
.game-frame-overlay-header-area > div:active{
	filter: brightness(.98);
	transform: translateY(1px);
	box-shadow:
		0 .35rem 1.0rem rgba(0,0,0,.30),
		inset 0 .2rem .7rem rgba(255,255,255,.28),
		inset 0 -.35rem .9rem rgba(140, 70, 0, .35),
		inset 0 0 0 .18rem rgba(160, 80, 0, .22);
}

.update-transfer-quota-btn.is-loading {
	pointer-events: none;
	opacity: .75;
	cursor: not-allowed;
}

/* 更新餘額 */
.game-frame-overlay-header-area .update-transfer-quota-btn{
	height: 3.5rem;
	padding: 0 0.8rem;
	border-radius: 1rem;
	position: relative; 
	overflow: hidden; 
	
	border: .25rem solid rgba(200, 170, 255, .65);
	box-shadow:
		0 .6rem 1.4rem rgba(0,0,0,.45),
		inset 0 .2rem .6rem rgba(255,255,255,.18),
		inset 0 -.4rem 1rem rgba(30, 10, 60, .55),
		inset 0 0 0 .18rem rgba(90, 40, 140, .35);

  background:
	radial-gradient(circle at 25% 15%, rgba(255,255,255,.18) 0%, transparent 45%),
	linear-gradient(to bottom,
		#a892c9  0%,
		#6f469c 35%,
		#4b2a7a 70%,
		#1a0b2e 100%
	);

  color: #f0e6ff;
	font-weight: 500;
	letter-spacing: .15rem;
	text-shadow:
		0 .1rem 0 rgba(40, 0, 60, .6),
		0 .2rem 0 rgba(0,0,0,.45);

	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* 更新餘額動畫效果 start */
.update-transfer-quota-btn.is-loading span {
	opacity: .85;
}

/* icon 轉圈圈效果 */
.update-transfer-quota-btn.is-loading svg {
	animation: spin 0.8s linear infinite;
	filter: drop-shadow(0 0 4px rgba(200,180,255,.6));
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
/* 更新餘額動畫效果 end */

.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, #kick-content{
	display: none;
}

/* ---- 維修區塊 Start ---- */
.game-maintain-mask{
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, .65);
	
	opacity: 1;

	z-index: 5;              /* 比 hover 高 */
	pointer-events: auto;    /* 吃掉滑鼠事件 */
}

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

.game-btn.maintain:hover .game-thumb,
.game-btn.maintain:focus-visible .game-thumb{
	transform: none;
	filter: none;
	box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .35);
}

.game-btn.maintain .game-hover{
	display: none;
}

.game-btn.maintain:hover .game-thumb::after,
.game-btn.maintain:focus-visible .game-thumb::after{
	opacity: .6;
	box-shadow: 0 0 0 0.3rem rgba(255,204,0,.55);
}
/* ---- 維修區塊 Ends ---- */