@charset "utf-8";
/* CSS Document */
html { scroll-behavior: smooth; }
body.page-enter { opacity: 0; transform: translateY(8px); }
body.page-enter.page-enter-active { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
[data-aos] { will-change: transform, opacity; }
a {color: rgb(103 54 217);}
a:hover {color: rgb(189 23 255);}

.is-show {
    opacity: 1;
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
}


.player{margin-top: -5px;}
.player_name{max-width: 50px;}
.player_w1{width: 250px; }

@media (max-width: 991px) { 
  .player_w1{ width: inherit;}
}

.modal-dialog p{color:#000;margin-top: 0;margin-bottom: 0;}
.modal-dialog h5{font-size: 1.5em;
    color: #3ccccc;
    font-weight: bold;
}


.c-btn.btn-normal.colorChange {
    background-color: #3ccccc;
    border-color: #3ccccc;
    color: #fff;
}
.c-btn.btn-normal {
    height: 44px;
    color: #3ccccc;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid #3ccccc;
    background-color: #fff;
    font-size: 18px;
    width: auto;
}

.navbar-nav{color:#FFFFFF;font-size: 30px;font-weight:bolder;}
.nav-item{margin:  0 6% ;}
.nav-item ul{margin:-5px 0 0 0; padding: 10px;}
.nav-item li{ padding: 10px;}
.nav-link {color: rgb(255 255 255 / 87%)!important;}
@media (max-width: 1220px) {
 .nav-item{margin:0%!important;}
}


@media (max-width: 991px) { /* Bootstrap 預設 lg 斷點 */
  .navbar-nav {
    text-align: center;
  }
  .navbar-nav .nav-item {
    display: inline-block; /* 或 block 看需求 */
  }
}
@media (max-width: 991px) {
  .social-icons-wrapper {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中（如果需要） */
    flex-wrap: wrap;         /* 如果太擠可以換行 */
    gap: 10px;               /* icon 間距 */
  }
	
.play_btn{height: 150px; width:auto;}
}

.dropdown-menu a:hover{background-color: #00b7b1;color:#fff072!important;}
.dropdown-menu li{line-height: 36px;}
.dropdown-item.active, .dropdown-item:active {background-color: #00b7b1!important;}
.dropdown-item.hover, .dropdown-item:hover {background-color: #00b7b1!important;}

h5, h5 {color: #faff42;font-weight: bold;}

.text-secondary {
    color: rgb(255 255 255) !important;
}



 :root{ --bg-dark:#ff1a1a; --bg-darker:#ff0404; --card:#ff2f2f; --accent:#3328fc; }
    html,body{background-color: #3e0084;color:#ffffff;} body{/* padding-top:72px; */}
    .navbar{/* background: rgba(0,0,0,.85)!important; *//* backdrop-filter: blur(6px); *//* background-color: #05d2f1!important; */}
    .navbar .dropdown-menu{background-color: #008a8f;text-align: center;/* border:1px solid #333; */}
    .navbar .dropdown-item{color:#fff;font-size: 30px;} .navbar .dropdown-item:hover{ background:#333; color:#fff; }

    .social-btn{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s ease;border: 1px solid rgb(255 255 255 / 40%);color:#ffffff;background: #ffffff00;text-decoration: none;margin: 0 .25rem;}
    .social-btn:hover{ transform:scale(1.1); background:var(--accent); color:#ffffff; border-color:transparent; }
    .icon{width: 45px;height: 45px;display:block;}

    .hero{ position:relative; min-height:70vh; display:flex; align-items:center; background: transparent; overflow:hidden; }
    
    .hero .hero-inner{position:relative;z-index:1;padding-top: 105px;} .hero-logo{width: min(790px, 60vw);height:auto;filter: drop-shadow(0 8px 24px rgba(0,0,0,.65));}
    .store-btnA{padding:.75rem 1.25rem;border-radius:999px;border: 0px solid rgba(255,255,255,.4);color:#fff;transition:all .25s ease;}
    .store-btnA:hover{transform: translateY(-2px);background: #3328fc00;color:#000;border-color: transparent;}
    .store-btn{padding:.75rem 1.25rem;border-radius:999px;border: 0px solid rgba(255,255,255,.4);color:#fff;transition:all .25s ease;}
    .store-btn:hover{transform: translateY(-2px);background: #3328fc00;color:#000;border-color: transparent;}
    .section-title{ letter-spacing:.05em; }
    .feature-card{background: #6200cd;border: 3px solid #ffffff;border-radius:16px;overflow:hidden;box-shadow: 0 6px 24px rgba(0,0,0,.25);transition: transform .25s ease;/* margin: 10px 0; */} .feature-card:hover{ transform: translateY(-4px); }
    .feature-card img{ width:100%; height:auto; display:block; }
    footer{background: #200045;border-top:1px solid #242424;padding: 28px 0;font-size: 14px;color: #ccc;}
    .footer-logo{width: 251px;height: auto;} .footer-left-text a{ color:#ddd; text-decoration:none; } .footer-left-text a:hover{ color:#fcff28; text-decoration: none; }
    .footer-right-img{/* width: 110px; */height: auto;}



#topBtn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .3s ease;

  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  background-color: #007bff;
  color: white;
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s;
}
#topBtn.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
#topBtn:hover {
  background-color: #0056b3;
}
#topBtn svg {
  width: 24px;
  height: 24px;
}

#topBtn {
  width: 45px;
  height: 45px;
  min-width: 35px;
  bottom: 40px;
  right: 16px;
  /* ensure visibility */
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  display: block !important;
}
#topBtn svg {FONT-VARIANT: JIS83;height: 40px;}

/* Only on narrow screens: push up to bottom: 96% */
@media (max-width: 576px) {
  #topBtn {
    bottom: 35%;
    right: 12px;
  }
	
.title-img {
  max-width: 260px;   /* 你想要的最大寬度 */
  /*width: 100%;        /* 小螢幕自動縮 */
}
.boxA {
    margin: 20% 0 0 0 !important;
    padding: 0;
}
.game-wrapper {
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px!important;
    border-radius: 0px !important;
    padding: 20px 20px !important;
    background-color: #8343cbcf;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.breadcrumb{display: none;}
}


header.navbar {
  height: 1.2em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;

}
header.navbar .nav-link {
  font-size: 25px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === Box Section：將背景圖與漸層包在同一區（含 HEADER + 內頁）=== */


#home-hero{background: #3e0084 url(../images/banner_bg.png) no-repeat center top;}
#home-box{background: #3e0084 url(../images/bg_2.png) no-repeat center top;}

/* === Hero Section：將背景圖與漸層包在同一區（含 HEADER + LOGO 區）=== */
.hero-section {
  position: relative;
  min-height: 70vh;
  background: url('images/hero.jpg') center/cover no-repeat fixed;
  overflow: hidden;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.0));
  pointer-events: none;
}

/* 讓原本 .hero 不再帶背景，只保留內距與內容對齊 */
.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: transparent !important;
}

/* 讓 HEADER 在背景上方、透明 */
.hero-section .navbar {
  background: #0a81aec9 !important;
  box-shadow: none !important;
  --bs-navbar-padding-y: 0;
  padding: 0.5% 0;
}
/* 若需要滾動後加深，可啟用以下（目前先保留註解） */
/*
.hero-section .navbar.scrolled {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(6px);
}
*/



/* === Hero LOGO 動態效果 === */
.hero-logo {
  will-change: transform, opacity;
  /* 進場：淡入 + 上浮 + 輕微縮放 */
  animation: logo-pop .75s cubic-bezier(.2,.8,.2,1) .15s both,
             logo-float 4.5s ease-in-out 1s infinite;
}
/* 滑鼠移入輕微放大 */
.hero-logo:hover {
  transform: translateY(-2px) scale(1.02);
  transition: transform .2s ease;
}

/* 進場動畫 */
@keyframes logo-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 柔和飄浮循環 */
@keyframes logo-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* 使用者偏好減少動態時停用動畫 */
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none !important; }
}


/*內頁設定*/
.boxA{margin: 10% 0 0 0;padding:0;}
.boxA p{font-size: 24px;margin:0 0 0px 0;}


.game-wrapper{
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	padding: 50px 65px;

	background-color: #8343cbcf;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	}

.s1{color:#fff072;}
.s2{color:#fbff61;}
.formA{margin: 8px 0;background-color: #dcd0ff;}

.breadcrumb-item a{color: rgb(242 247 255);text-decoration: none;}
.breadcrumb-item a:hover{color: rgb(255 240 34);}
.breadcrumb-item.active {color: rgb(255 255 255 / 75%);}

.breadcrumb li+li::before {
    content: "";
    color: #fff!important;
    display: inline-block;
    position: relative;
}



.table-st0 {
	--bs-table-bg: #b8a0ff;}

.table-st1 {
   --bs-table-bg: #c8c6ff;
}
.table-st2 {
   --bs-table-bg: #d9d7ff;
}
.table-st3{
   --bs-table-bg: #a373e3;
}
.table-st3 th{
    color: #FFF !important;
}


.text-indent {
    -webkit-padding-start: 2em;
    padding-inline-start: 2em;
}


.c-content ol {
   -webkit-padding-start: 1.5em; 
   padding-inline-start: 1.5em;
}
.c-content ul{padding-left: 5rem; font-size: 24px;padding-bottom: 1rem;}

.c-content a {color:#ff78db;}
.c-content a:hover{color:#ffb2eb;}

.c-content table a {color: rgb(103 54 217);}
.c-content table a:hover {color: rgb(189 23 255);}

.w-15 {
    width: 15% !important;
}
.w-20 {
    width: 20% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.w-50 {
    width: 50% !important;
}
.w-55 {
    width: 55% !important;
}

.u01 {
    padding-left: 2rem !important;
    list-style-type: decimal;
}

.btn-purple {
        background-color: #7A39FF;
        border-color: #7A39FF;
        color: #fff;
    }
 .btn-purple:hover {
        background-color: #6929e6;
        border-color: #6929e6;
        color: #fff;
}

.card-body {
    background-color: #ae9fff;
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgb(102 97 225) !important;
    color: #FFF;
}