/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 24 2025 | 10:41:44 */
@import url('https://fonts.googleapis.com/css2?family=Roboto');
h1,h2,h3,h4{
    font-family: "Roboto Condensed",Sans-serif;
    margin:0 0 12px 0 !important;
}
p,figure{
    margin:0 0 12px 0 !important;
}
figure{
    line-height:0;        
}
figure > table,figure > figcaption{
    line-height:initial;        
}
ul li, ol li{
    list-style-type:inherit;
    padding:0;
    margin:0 0 12px 0;
}
a:hover{
        text-decoration: none;
}
header{
    position: sticky;
    top: 0px;
    z-index:999;
}
.topnav li{
    margin:0;
}
.topnav li.wp-block-navigation-item a[aria-current="page"] {
    background: #e239f5;
    color: #FFF;
}
.topnav li.wp-block-navigation-item a{
    padding: 20px 15px!important;
}
.all-height{
    height:100%;
}
.col-box{
    flex-wrap:wrap !important;
}
.col-1-box-list{
    width:100%;
	max-width:100%;
    height:auto;
    padding:10px;
}
.col-2-box-list{
    width:50%;
	max-width:50%;
    height:auto;
    padding:10px;
}
.col-3-box-list{
	width:33.3333%;
	max-width:33.3333%;
    height:auto;
    padding:10px;
}
.col-4-box-list{
	width:25%;
	max-width:25%;
    height:auto;
    padding:10px;
}
.featured-slot-games-box .game-card {
  background: linear-gradient(to bottom right, #f8e6f0, #ffffff);
  border-radius: 8px;            /* 圓角邊框 */
  box-sizing: border-box;        /* 包含 padding 在內計算寬度 */
  padding: 15px;                 /* 卡片內距 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 淺陰影 */
  text-align: center;            /* 文字置中 */
  transition: all 0.3s ease;     /* hover 效果過渡 */
}
.featured-slot-games-box .game-card:hover {
  transform: scale(1.05);        /* 整張卡片放大一點點 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* 陰影加強，提升立體感 */
  z-index: 5;                    /* 提升層級，避免被其他元素遮住 */
}
.featured-slot-games-box .game-card img {
  width: 100%;                   /* 滿版寬度 */
  height: auto;                  /* 保持圖片比例 */
  border-radius: 4px;            /* 圓角處理 */
  transition: transform 0.3s ease; /* 滑鼠移上時的縮放動畫 */
}
.featured-slot-games-box .game-card:hover img {
  transform: scale(1.05);        /* 圖片放大一點點 */
}
.featured-slot-games-box .game-title {
  font-size: 18px;               /* 字體大小 */
  font-weight: bold;            /* 粗體 */
  margin: 15px 0 10px;          /* 上、下外距 */
  color: #000;                   /* 黑色標題文字 */
}
.game-title::after {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background: #e239f5;
  margin: 5px auto 0;
}

.featured-slot-games-box .game-desc {
  font-size: 14px;               /* 字體大小 */
  color: #555;                   /* 深灰色，柔和一點 */
  line-height: 1.6;              /* 行距提升可讀性 */
  margin-bottom: 15px;           /* 與按鈕的間距 */
}
.featured-slot-games-box .play-btn a{
  display: inline-block;
  padding: 12px 30px;
  background-color: transparent;
  color: #e239f5;
  font-weight: bold;
  border: none;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  border: 2px solid transparent; /* 避免抖動 */
}
.play-btn a:hover {
  box-shadow: 0 0 12px #e239f5;
}
.featured-slot-games-box .game-card:hover .play-btn a{
  background-color: #e239f5;
  color: #fff;
}
/* 外框容器：定義大小 */
.flip-card {
  background-color: transparent;
  width: 350px;
  height: 350px;
  perspective: 1000px; /* 給予3D透視 */
  margin: 0 auto;
}

/* 內層容器：處理翻轉動畫 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

/* hover 時觸發翻面 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* 前面與背面卡片通用樣式 */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 正面樣式 */
.flip-card-front {
  background: #e239f5;
  font-weight: bold;
  font-size: 18px;
}

/* 背面樣式（翻轉180度） */
.flip-card-back {
  background: #0078b4;
  transform: rotateY(180deg);
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
  overflow-y: auto;
}

details{
    border: 1px solid;
    border-width: 1px;
    border-color: #FFFFFF;
}
.wp-block-details summary{
    background-color: #14003f;
    padding: 15px;
    color: #FFFFFF;
    font-weight: 600;
}
.wp-block-details p{
    padding: 10px 15px;
    margin:0 !important;
    background-color: ##E2F1FC;
    color:##4a4a4a;
}

.show-on-pc {
	display: block;
}
.show-on-mobile {
	display: none;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.btn-login,
.btn-register a{
  padding: 8px 20px;
  font-weight: bold;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 登入按鈕：黑底白字 */
.btn-login a{
  background-color: #e239f5;
  color: #fff;
  border: 2px solid #fff;
}

.btn-login:hover a{
  background-color: #fff;
  color: #e239f5;
  border: 2px solid #e239f5;
}

/* 註冊按鈕：白底藍邊，藍字 */
.btn-register a{
  background-color: #fff;
  color: #e239f5;
  border: 2px solid #e239f5;
}

.btn-register:hover a{
  background-color: #e239f5;
  color: #fff;
}

.sport-box {
  background-color: transparent;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: none;
}

.sport-box h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.sport-box p {
  font-size: 15px;
  line-height: 1.6;
}

.sport-box img {
  margin-top: 15px;
  max-height: 50px;
}

.sport-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-bottom: 90px solid #e239f5;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sport-play-text {
  position: absolute;
  right: 7px;
  bottom: -88px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: none; /* 取消旋轉 */
}

.sport-box:hover {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sport-box:hover .sport-overlay,
.sport-box:hover .sport-play-text {
  opacity: 1;
}

.download-btn a{
  display: inline-block;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #e239f5, #5a00e0);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(226, 57, 245, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.download-btn:hover a{
  background: linear-gradient(135deg, #f75aff, #3600a3);
  box-shadow: 0 0 25px rgba(226, 57, 245, 0.8), 0 0 40px rgba(90, 0, 224, 0.5);
  transform: scale(1.05);
}

.service-card {
  position: relative;
  background: linear-gradient(to bottom, #a000f7, #6300c4);
  border-radius: 20px;
  width: 240px;
  text-align: center;
  padding-top: 160px; /* 留空給火箭 */
  margin: 20px auto;
  color: white;
  box-shadow: 0 0 10px rgba(162, 0, 255, 0.3);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.rocket-icon {
  position: absolute;
  top: -5px;           /* 調整垂直位置 */
  left: 40%;
  transform: translateX(-32%);
  height: auto;
  z-index: 2;
}

/* 文字樣式 */
.service-content h3 {
  margin: 10px 0 6px;
  font-size: 24px;
}

.service-content p {
  font-size: 20px;
  margin: 0;
}




@media (max-width: 780px){
    .col-m1-box-list{
        width:100%;
        max-width:100%;
    }
	.col-m2-box-list{
        width:50%;
        max-width:50%;
    }
	.topnav ul,.topnav li,.topnav a{
		width:100%;
        text-align: center;
    }
	.wp-block-cover, .wp-block-cover-image {
		min-height: auto !important;
	}
	.show-on-pc {
		display: none;
	}
    .show-on-mobile {
		display: block;
	}
	.reverse{
		flex-direction: column-reverse;
	}
    .group-1 {
		order: 1;
	}
    .group-3 {
		order: 2;
	}
    .group-2 {
		order: 3;
	}
}