/* ============================================================
   DA娛樂城 — 全站樣式表（base.css）
   ============================================================
   這支取代了原本的 style.css：head.php 只引用本檔，
   style.css 留在原地但已經沒有任何頁面載入它（死檔，不要再改它）。

   內容 = 原 style.css 全文 ＋ 檔案末尾「本次調整」那一段。
   要改樣式直接改這裡，不需要再疊一層覆蓋。
   ============================================================ */

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/* @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&display=swap'); */
body {
  color: var(--color-text-primary);
  background: var(--gradient-main-bg);
  font-family: '微軟正黑體', 'Microsoft JhengHei', sans-serif;
}
main {
  margin-top: 86px;
}

a {
  text-decoration: none;
  color: var(--color-text-primary);
  cursor: pointer;
}

a:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans TC', sans-serif;
  /* font-family: 'cwTeXYen','Bebas Neue', sans-serif; */
  font-weight: 600;
}

h2 span.en-title{ 
  color: var(--color-text-primary); 
  font-size: 50%; 
  font-weight: normal;
}
.text-right{
  text-align: right;
}
.small, small {
  font-size: 50%;
}
.button{
  color: var(--color-bg-white) !important;
  text-transform: uppercase;
  background: var(--color-accent-orange);
  padding: 6px 20px;
  border: 2px solid var(--color-accent-orange);
  min-width: 100px;
}
.button:hover {
  color: var(--color-btn-hover);
}
@media screen and (max-width: 768px) {
  h2 span.min-title{
    display: none;
  }
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--gradient-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: var(--color-back-to-top-light);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--color-back-to-top-hover);
  color: var(--color-back-to-top-light);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .back-to-top{
    bottom: 100px;
  }
}
/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: .4s !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 87px;
  z-index: 997;
  transition: all 0.5s;
}

#header .logo{
    width: min(20vw, 160px);
    display: flex;
    align-items: center;
    gap: 8px;
}

#header .logo img {
  padding: 4px;
  max-height: 80px;
}
.heard-top{
  padding: 0.5rem;
}
.heard-top h2{
  /* font-size: 24px; */
  font-weight: 900;
  padding: 8px;
  text-align: center;
  color: transparent;
}
.scrolled-offset {
  margin-top: 90px;
}
@media (max-width: 1410px) {
  #header .logo a span{
    font-size: 24px;
  }
}
@media (max-width: 1199px) {
  #header {
    height: 70px;}
  #header .logo img {
    margin: auto;
    padding-top: 6px;
  }
  #header .logo{
    flex: none;
  }
  /* #header 固定後(main.js 會加 .fixed-top 與 .scrolled-offset),
     要把後面的內容往下推一個 header 高度,否則頁面開頭會被壓在選單底下(或多出空白)。
     這個斷點以下 #header 高度都是 70px,平板與手機共用同一個值。 */
  .scrolled-offset {
    margin-top: 70px;
  }
}
@media (max-width: 767px) {
  main{
    margin-top: 70px;
    padding-bottom: 70px;
  }
  #header {
    height: 70px;
  }
  #header .logo img {
    max-height: 70px;
    padding: 4px;
  }
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar-bg {
  padding: 0;
  background: var(--gradient-navbar);
  background-blend-mode: multiply, multiply;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border-bottom: 2px solid #ffffff!important; */
  box-shadow: 0 6px 11px #9e9e9e82;
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  height: 87px;
}
.navbar-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    z-index: 2;
}
.navbar {
  padding: 0;
  margin: auto;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.3s;
  height: 87px;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: var(--color-text-secondary);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .25);
}
.navbar a span{
  color: var(--color-text-primary);
  font-size: 12px;
  display: none;
}

.btn-login span, .btn-register span{
  font-size: .8em !important;
  color: var(--color-grey-dark);
  display: none !important;
}
.btn-login {
  background: var(--gradient-btn-login);
  box-shadow: 0 5px 20px 0 rgba(0,0,0,.49);
  color: var(--color-bg-white) !important;
  padding: 6px 20px;
  border-right: 0;
  width: 100px;
  height: 85px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-register {
  background: var(--gradient-btn-register);
  box-shadow: 0 5px 20px 0 rgba(0,0,0,.49);
  color: var(--color-bg-white) !important;
  padding: 6px 20px;
  width: 100px;
  height: 85px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-login:hover{
  color: var(--color-bg-white) !important;
  background: var(--gradient-btn-login-hover);
  transform: scale(1.025);
}
.btn-register:hover {
  color: var(--color-bg-white) !important;
  background: var(--gradient-btn-register-hover);
  transform: scale(1.025);
  /* box-shadow: 0 5px 20px 0 rgb(255 193 7 / 50%); */
}
.btn-icon {
  max-width: 40px;
  max-height: 40px;
  padding: 4px;
}
/* Header登入資訊----------------- */
.u-login{
    padding: 6px 12px;
    width: 230px;
    height: 85px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.u-login .u-info{
  padding: 0 6px;
  display: flex; 
  flex-direction: column;
}
.uuid, .uucash{
  color: var(--color-text-primary);
  width: 128px;
  margin: 2px 0px;
  display: flex;
  overflow: hidden;
}
.u-login .link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.u-login .btn-tsfr, .u-login .btn-dpst,
.u-login .btn-tsfr:hover, .u-login .btn-dpst:hover, 
.u-login .btn-tsfr:focus, .u-login .btn-dpst:focus{
    font-size: 14px !important;
    height: 32px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    border-radius: 24px;
    margin: 2px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}
@media (max-width: 990px) {
  .btn-login, .btn-register{
    width: 200px;
    font-size: 2rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .btn-sm {
    width: 80px;
    height: 30px;
    padding: 6px 12px;
    font-size: 10px !important;
    border-radius: 20px;
    margin: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
  .btn-login{ border-radius: 20px 0 0 20px; -webkit-border-radius: 20px 0 0 20px; -moz-border-radius: 20px 0 0 20px; -ms-border-radius: 20px 0 0 20px; -o-border-radius: 20px 0 0 20px; }
  .btn-register{ border-radius: 0 20px 20px 0; -webkit-border-radius: 0 20px 20px 0; -moz-border-radius: 0 20px 20px 0; -ms-border-radius: 0 20px 20px 0; -o-border-radius: 0 20px 20px 0; }
  .btn-icon {
    max-width: 30px;
    max-height: 28px;
    padding: 2px 5px;
  }
}
/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: var(--color-bg-white);
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
  background: var(--color-btn-login-primary);
  padding: 20px;
  margin: -12px;
}

.mobile-nav-toggle.bi-x {
  color: #e1cd9b;
  background: transparent;
}

@media (max-width: 991px) {
  .navbar {
    padding: 12px 0;
    margin: 0;
  }
  .navbar-bg{
    padding: 0 !important;
        height: 70px;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
  .navbar a, .navbar a:focus {
    display: flex;
    flex-direction: row;
    justify-content:center;
  }
  .navbar a span{ margin-left: .8rem;}
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgb(81 67 56 / 90%);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 30%);
  opacity: 0.6;
  margin-top: -25px;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 1.5rem;
  font-weight: normal;
  font-family: 'Bebas Neue';
  color: var(--color-bg-white);
}

.navbar-mobile a:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 1px;
  background: var(--color-bg-white);
  opacity: .4;
}

header nav.mainNav .border-link:after {
  width: 20px;
  height: 1px;
  background: var(--color-bg-white);
  opacity: 0.4;
  left: 50%;
  top: -14px;
  margin-left: -10px;
}
.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: var(--color-bg-white);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #f44336;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  overflow: hidden;
}
.section-bg {
  background-color: #000
}
.section-title {
  text-align: center;
  padding-bottom: 40px;
}
.section-title h1, .section-title h2 {
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 0;
  line-height: 33px;
}
.section-title h1 small, .section-title h2 small{
  color: var(--secondary);
}
.section-title p {
  margin-bottom: 0;
  color: var(--color-text-dark);
}
@media (max-width: 768px) {
  .section-title {
    padding-bottom: 20px;
  }
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
  padding: 0;
}
.testimonials .swiper-container{
  overflow:hidden;
}
.testimonials .testimonial-item {
  text-align: center;
  color: var(--color-bg-white);
  border-radius: 45px;
  overflow: hidden;
  margin: 12px 0px;
}

.testimonials .testimonial-title {
  position: absolute;
  left: 25%;
  top: 25%;
  transform: rotate(-4deg);
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
  display:none;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100%;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 7rem;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: var(--color-bg-white);
  background-image: linear-gradient(180deg,var(--color-bg-white)fff 20%,#f3efb3 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.testimonials .testimonial-item h4 {
  font-size: 4rem;
  color: var(--color-hover-light);
  margin: 0 0 15px 0;
  background-image: linear-gradient(180deg,var(--color-bg-white)fff 20%,#f3efb3 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 600;
}

.testimonials .swiper-pagination {
  margin-top: 0;
  position: absolute;
  bottom: 5%;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  background: hwb(0deg 100% 0% / 70%);
  width: 12px;
  height: 12px;
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background: hwb(0deg 100% 0% / 100%);
  box-shadow: 0px 0px 4px 3px #fdb548;
}

@media (max-width: 768px) {
  .testimonials {
    background: transparent;
  }
  .testimonials .testimonial-item .testimonial-img {
    overflow: hidden;
  }
  .testimonials .testimonial-item {
    border-radius: 25px;
    overflow: hidden;
    margin: 5px 0px;
  }
  .testimonials .testimonial-item p {
    width: 80%;
  }
  .testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

/*--------------------------------------------------------------
# m-side-menu
--------------------------------------------------------------*/
.testimonials-game {
  padding: 0;
  margin-bottom: 16px;
}
.testimonials-game .container-fluid{
  padding: 0;
}
.testimonials-game img{
  width: 100%;
}
.GameNav {
  padding: 12px;
  width: 100%;
}
.GameNav .nav {
    max-width: 80%;
    margin: auto;
    /* overflow: hidden; */
    justify-content: center;
    backdrop-filter: blur(2px);
    text-shadow: 1px 1px var(--color-bg-greyblue);
    color: var(--color-text-primary);
    background-color: var(--color-bg-greyblue);
    border-bottom: 3px solid rgb(212 160 23);
    border-radius: 47px;
    box-shadow: 0 8px 9px var(--color-border-light), inset -2px -4px 2px rgba(127, 63, 2, .16), inset 0 2px 1px var(--color-border-light);
}
.GameNav li.nav-item{
  text-align: center;
  display: contents;
}
.GameNav .color .img{
  width: 105px;
  overflow: hidden;
  margin: auto;
  margin-bottom: 6px;
  margin-top: 10px;
}
.GameNav picture{
  display: block;
  margin: 10px auto 2px auto;
}
.GameNav img{
  max-width: 100%;
  height: 40px;
}
.nav-pills2 .nav-link {
    /*filter: grayscale(20%) brightness(80%);
    -webkit-filter: grayscale(20%) brightness(80%);
    */background: transparent;
    border-radius: 100px;
    /*border: 1px solid var(--color-border-light);
    */margin: 6px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.nav-pills .nav-link {
  border-radius: 0;
  color: var(--color-bg-white);
  padding: 20px 0px 0px 0px;
}
.GameNav .nav-link {
  color: var(--color-text-primary);
  padding: 0;
  padding-bottom: 6px;
  text-align: center;

}
.GameNav .nav-link.color .img-active {
  display: none;
}
.GameNav .nav-link.color .img-action {
  display: block;
}
.GameNav .nav-link.color.active .img-action {
  display: none;
}
.GameNav .nav-link.color.active .img-active {
  display: block;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background-color: transparent;
}
.GameNav .nav-link.color.active{
  color: var(--color-text-light);
  text-shadow: 1px 1px rgba(69, 34, 1, .48);
  display: block;
  filter: none;
  background: var( --gradient-game-nav);
  box-shadow: var(--gradient-game-nav-shdow);
  filter: grayscale(0%) brightness(110%);
  -webkit-filter: grayscale(0%) brightness(110%);
}
@media (max-width: 1024px) {
  .GameNav .color .img{
    width: 77px;
    height: 50px;
  }
}

@media (max-width: 660px) {
  .game-tab-content {
    min-height: 60vh;
    width: 80%;
    float: right;
    margin-top: 24px;
  }  
  .GameNav .container{ padding-right: 0;}
  .GameNav {
    padding: 0px;
    width: 20%;
    float: left;
    padding-top: 12px;
  }
  .GameNav .nav {
    max-width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: 0;
  }
  .GameNav .color .img {
    width: 40px;  
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    margin: auto;
  }
  .GameNav picture, .GameNav .img img{
    max-width: 40px;
    height: auto;
    max-height: 100%;
  }
  .GameNav .nav-link {
        font-size: .8em;
        width: 70px;
        height: 70px;
        border-radius: 10px;
        border: 1px solid var(--color-border-light);
        padding: 3px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        margin-bottom: 10px;
        flex-shrink: 0;
        justify-content: center;
        backdrop-filter: blur(2px);
        /* text-shadow: 1px 1px #fff8e4; */
        color: var(--color-text-primary);
        background-color: var(--color-bg-greyblue);
        /* box-shadow: 0 8px 16px rgba(69, 34, 1, .32), inset -2px -4px 2px rgba(127, 63, 2, .16), inset 0 2px 1px #fafafa; */
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
}
  .GameNav .nav-link.color.active{
        text-shadow:0 0 2px var(--color-grey-medium);
        display: flex;
        align-items: center;
}
  .GameNav li.nav-item span{
    display: none;
  }
}
@media (max-width: 414px){
    .GameNav {
      width: 100%;
      float: none;
      padding: 0;
    }
    .game-tab-content{
      width: 100%;
      margin-top: 0px;
    }
    .GameNav .nav-link{
      flex-direction: column !important;
    }
    .GameNav .nav {
        min-width: 100%;
        max-width: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow-x: auto;
        display: flex;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 12px 16px;
        flex-direction: row;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
    }
    .GameNav li.nav-item {
      text-align: center;
      display: inline-block;
      scroll-snap-align: start;
    }
  }
/*--------------------------------------------------------------
# userwallet
--------------------------------------------------------------*/
    section.Wbody {
      padding-top: 20px;
      font-size: 14px;
    }
    .Wbody_box{
        width: calc(100% - 1.75rem);
        max-width: 100%;
        outline: none;
        border: none;
        border-radius: 1rem;
        position: relative;
        z-index: 1;
        overflow: hidden;
        background: var(--color-bg-greyblue);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 0 24px 0;
        /* box-shadow: 0px -2px 10px -3px #b0b0b0; */
        display: flex;
        flex-direction: row;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: .375rem .625rem .5rem;
        margin: 0 .875rem .5rem;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .Wbody_box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
    }
    .Wbody_box img{width: 24px; height: 24px;}
    .Wbody_box .userwallet{
      width: 100%;
      display: flex;    
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  .u-cone, .u-conWbtn {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
  }
  .u-cone { width: 80%; }
  .u-conWbtn{ width: 20%; }
  .usname {
    width: 100%;
    font-weight: bold;
    padding: 6px 0;
  }
  .Wbtn{
      width: 50% !important;
      display: flex;
      width: 80px;
      height: 32px;
      border-radius: 10px;
      padding: 4px;
      text-align: center;
      font-size: .8em;
      color: var(--color-bg-white) !important;
      align-items: center;
      justify-content: center;
      margin: 2px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
}
  .btn-dpst {
      background: linear-gradient(0deg, #2a036e, #6a07db, #c4a3ff);
      border: 1px solid #6a07db;
      margin-top: -4px;
      height: 38px;
  }
  .btn-tsfr{
    background: linear-gradient(0deg, #003062, #075999, #52c9ff);
    border: 1px solid #2bb0ff;
    margin-top: -4px;
    height: 38px;
  }
  .Wbtn img{
    width: 20px; height: 20px;
    margin-right: 4px;
  }
  .Wbtn.btn-luckycash {
    width: 100% !important;
    background: var(--gradient-primary);
  }
  section.Wbody {
      padding-top: 10px;
  }
  .u-cone, .u-conWbtn {
    width: 50%;
  }


/*--------------------------------------------------------------
# FEATURED GAMES
--------------------------------------------------------------*/
section.dm {
    background: linear-gradient(180deg, var(--color-marquee-gradient-light)8f 10%, var(--color-bg-white)fff00 40%, var(--color-bg-white)fff00 73%, var(--color-marquee-gradient-light)66 90%, var(--color-marquee-gradient-mid)75 100%);
    padding: 120px 0;
}
.dm-qrbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 60px auto;
}
.dm-qr img{
  border-radius: 20px;
}
.dm-qr {
    width: 40%;
    overflow: hidden;
}
img.qr-app{
  width: 200px;
}
.qr-applink{
    margin-top: 10px;
    width: 200px;
}
/*--------------------------------------------------------------
# FEATURED GAMES
--------------------------------------------------------------*/
.featured {
  padding: 80px 0;
}
.carousel {
  /* background: #EEE; */
}
.carousel-cell {
  width: 28%;
  /* height: 200px; */
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: carousel-cell;
}
.carousel-cell {
  width: 22%;
  height: 480px;
  border: 1px solid var(--color-btn-login-primary);
  padding: 20px 20px;
  margin-right: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  counter-increment: carousel-cell;
}
.featured-brand .carousel-cell{
  height: 320px;
}

.carousel-cell.is-selected {
  border: 1px solid var(--color-btn-login-primary);
}

.carousel-cell img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 200px;
}
.carousel-cell:hover img {
  transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  transition-duration: 2s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.carousel-cell .leading-loose{
  padding: 20px 0;
  font-size: 1em;
  color: #555;
  height: 40%;
  overflow: scroll;
}
.carousel-cell .game-info{
  display: flex !important;
  justify-content: center;
}
.carousel-cell .game-info div{
  width: 33.33%;
  color: var(--color-text-primary);
}
.carousel-cell .game-info div span{
  color: var(--color-btn-login-primary);
  font-weight: bold;
}
.carousel-cell .game-info hr{
  display: block;
  height: 32px;
  border-right: 1px solid rgba(62, 62, 62, .2);
}
.gamemore{
  text-align: center;
  padding: 50px 0;
  display: flex;
  justify-content: center;
}
.btn-gamemore {
  display: block;
  width: 400px;
  padding: 14px;
  color: var(--color-bg-white);
  background: var(--color-btn-login-primary);
  border: 2px solid var(--color-btn-login-primary);
  border-radius: 10px;
  text-align: center;
  transition: all .4s;
}
.btn-gamemore:hover {
  color: var(--color-btn-login-primary);
  background: transparent;
  border: 2px solid var(--color-btn-login-primary);
}

@media (max-width: 768px) {
  .carousel-cell {
    width: 75%;
    height: 500px;
  }
}
@media (max-width: 450px) {
  .carousel-cell {
    width: 75%;
    height: 450px;
  }
}

/*--------------------------------------------------------------
# HotGame
--------------------------------------------------------------*/
.hotGame .nav-pills .nav-link.active, .hotGame .nav-pills .show>.nav-link {
  color: var(--color-btn-login-primary);
  background-color: transparent;
  border-bottom: 4px solid var(--color-btn-login-primary);
  padding: 5px 0;
}
.hotGame .nav-pills .nav-link{
  color: var(--secondary);
  border-bottom: 4px solid transparent;
  padding: 5px 0;
}
.hotGame .nav {
  justify-content: space-around;
  border-bottom: solid 1px var(--color-btn-login-primary);
  margin-bottom: 10px;
}
.hotG-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.h-link {
    width: 15%;
}
.h-link-twice{
  display: flex;
  width: 30%;
}
.h-image {
    aspect-ratio: 1 / 1;
    margin: 4px;
    background: var(--gradient-game);
    border: 1px solid var(--gradient-game);
    overflow: hidden;
    display: flex;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(69, 34, 1, .32), inset -2px -4px 2px #ecc2527a, inset 0 2px 1px #ecc252;
}
.h-image img{
  aspect-ratio: 1 / 1;
  max-width: 100%;
  box-shadow: 0 8px 16px rgb(154 113 75 / 43%), inset -2px -4px 2px #ecc2527a, inset -1px 0px 4px 2px #ecc252;

}
@media (max-width: 960px) {
  .tab-content .container{
    max-width: 430px;
  }
  .h-link{
    width: 33.33%;
  }
  .h-link-50{
    width: 66.66%;
  }
  .h-link-twice{
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 660px) {
  .hotGame .tab-content {
      min-height: 60vh;
      width: 100%;
      float: inherit;
      padding-top: 12px;
  }
  .hotGame .nav {
    margin-bottom: 5px;
  }
}
/*--------------------------------------------------------------
# fishgames
--------------------------------------------------------------*/
.slotGames {
    padding-top: 20px;
    padding-bottom: 60px;
}
.brandtxt {
  position: absolute;
  color: var(--color-bg-white);
  background: #003879;
  padding: 0px 10px;
  font-size: 12px;
  border-radius: 20px 0 6px 0px;
  margin: 4px;
}
.brandtxt.be{
  background: #ff0000;
}
.brandtxt.rsg{
  background: #ff7b00;
}
.brandtxt.zg{
  background: #009b17;
}
.brandtxt.fc{
  background: #a48600;
}
.brandtxt.db{
  background: #003879;
}
.brandtxt.sp{
  background: #943399;
}
.brandtxt.qt{
  background: #600000;
}
.slot-games-menu img{
    width: 24px;
    padding: 0px 2px;
}
@media (max-width: 768px) {
      .slotGames {
        padding-top: 0px;
        padding-bottom: 60px;
    }
    .brandtxt {
      position: absolute;
      background: #346d99;
      padding: 0px 10px;
      font-size: 12px;
      border-radius: 20px 0 6px 0px;
      margin: 4px;
    }
}
/*--------------------------------------------------------------
# BrandGame
--------------------------------------------------------------*/
.game-tab-content .BrandGame{
  padding-bottom: 0;
}
/* #casino .BrandGame{ max-height: 75vh; } */
.game-tab-content .BrandGame .container{
  display: flex;
}
.game-tab-content .BrandGame .section-title h2{
  font-size: 7em;
  font-weight: 900;
  line-height: 1em;
  text-align: left;
  margin-bottom: 4px;
  color: var(--color-accent-orange);
  text-shadow: 0 0 8px var( --color-box-shadow-subtle); /* 柔光暈 */
  font-style: oblique;
}
.game-tab-content .BrandGame .section-title span{
  position: absolute;
    left: 4px;
    bottom: 27%;
    /* z-index: -1; */
    font-size: 7em;
    font-weight: 900;
    line-height: 1em;
    /* font-stretch: 100%; */
    -webkit-text-stroke: 1.6px #d4a017;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    font-style: oblique;
    font-family: 'Noto Sans TC', sans-serif;
    text-transform: uppercase;
}
.game-tab-content .BrandGame .md_games {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10% 5%;
    text-align: left;
}
.game-tab-content .BrandGame .md_img{
  width: 50%;
  align-content: flex-end;
}

.BrandGame .games{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
}
.BrandGame .games .gamesBox{
  height: 200px;
}
.BrandGame .BrandName {
    text-align: center;
    color: var( --color-text-primary);
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
    position: relative;
    bottom: 41px;
}
.BrandGame .gamesBox--button {
    width: max-content;
    /* position: relative; */
    margin: auto;
    background: var(--gradient-secondary);
    border-radius: 20px;
    border: 0px solid var(--color-bg-white);
    padding: 0px 10px;
    font-size: small;
    font-weight: 400;
    /* bottom: 63px; */
}
.gamesBox--button.gamesBox--button-none{
  opacity: 0;
}
.BrandGame .gamesBox--button span{
  display: none;
}
.BrandGame .games .gamesBox--logo{
    background: url(../images/game/caino_logo_bg.png) no-repeat;
    background-size: contain;
    background-position: center 30%;
    padding: 10px;
    margin: 6px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 120px;
    height: 140px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 25px rgba(255, 128, 0, 0.9));
    -webkit-filter: drop-shadow(0 0 25px rgba(255, 128, 0, 0.9));
}
.BrandGame .games .gamesBox--image {

}
.BrandGame .action-game a{
    text-align: center;
  }
.BrandGame .games .gamesBox--logo img{
    max-height: 65px;
    max-width: 80px;
    filter: drop-shadow(1px 1px 0px rgba(219, 128, 252, 0.5));
    -webkit-filter: drop-shadow(1px 1px 0px rgba(219, 128, 252, 0.5));
} 
@media (max-width: 1399px){
  .game-tab-content .BrandGame .md_games {
    padding: 60px 0;
  }
}
@media (max-width: 991px){
  .game-tab-content .BrandGame {
    padding-bottom: 40px;
  }
  .game-tab-content .BrandGame .container {
    max-width: 430px;
  }
  .action-game{
      background: linear-gradient(to right, #a67c00 0%, #bf953f 20%, #dbaa27 40%, #845a00 60%, #fdffcc00 80%, #8e620400 100%);
      box-shadow: 0 20px 30px -20px #0000007a;
      border: 1px solid var(--color-border-light);
      border-radius: 20px;
      margin: 1%;
      height: 130px !important;
      overflow: hidden;
      -webkit-border-radius: 20px;
}
    .action-game.action-game-100{
      width: 100% !important;
    }
    .action-game.action-game-100 a{
      display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100%;
    }
    .action-game.action-game-50{
      width: 48% !important;
      display: -webkit-flex;
    }

    .action-game.action-game-100 .BrandName {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      width: 40%;
      padding: 0px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      bottom: 14px;
    }
    .action-game.action-game-50 .BrandName {
        position: relative;
        z-index: 1;
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        left: 50%;
        bottom: 145%;
    }
    .action-game.action-game-100 .gamesBox--button {
        margin: 6px;
        position: static;
        display: flex;
        justify-content: center;
    }
    .gamesBox--logo {
        width: 120px;
        height: auto;
        position: absolute;
        z-index: 1;
        clip-path: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .BrandGame .games .gamesBox--image {
        padding: 0;
        margin: 0;
        width: 50%;
        height: 100%;
        background: transparent;
        clip-path: none;
        box-shadow: none;
        overflow: hidden;
        position: relative;
        left: 10px;
        z-index: 2;
        bottom: 0px;
    }
    .BrandGame .games .gamesBox--image img {
      max-height: initial;
      max-width: 100%;
    }
    .game-tab-content .BrandGame .md_games {
      padding: 0;
    }
    .action-game-100{
      width: 100%;
    }
    .action-game-50{
      width: 50%;
    }
    .action-game .full-link {
      width: 100%; 
      height: 100%;
      z-index: 1;
    }
    .BrandName {
        position: relative;
    }
    .BrandGame .gamesBox--button{
      margin: 6px;
      position: static;
    }
    .BrandGame .gamesBox--button span{
      display: block;
    }

    .action-game {
        height: 112px !important;
    }
  .action-game.action-game-100 .gamesBox--image{
    width: 50% !important;
    height: auto !important;
    bottom: -26px !important;
    left: -14px;
  }
  .action-game.action-game-50 .gamesBox--image{
        width: 72% !important;
        height: auto !important;
        bottom: -11px !important;
        left: -7px;
  } 
  .BrandGame .gamesBox--button{
    position: static;
    font-size: 12px;text-align: center;
  }
  .action-game.action-game-50 .gamesBox--logo img {
    max-height: 50px;
    max-width: 55px;
    position: absolute;
    left: 110px;
    padding: 6px;
  }
  .action-game.action-game-50 .gamesBox--button{
      position: static;
      width: 70px;
      padding: 0px;
  }
  /* Sport調整 */
  .BrandGame.Sport .action-game.action-game-100 .gamesBox--image{
        width: 45% !important;
        height: 100% !important;
        bottom: 0px !important;
        left: -8px;
        overflow: initial !important;
  }
  .BrandGame.Sport .action-game.action-game-100 a {
          align-items: center;
    }
  .BrandGame.Sport .BrandGame .games .gamesBox--image img {
        max-height: initial;
        max-width: 80%;
    }
}
@media (max-width: 450px){
    .action-game.action-game-50 .gamesBox--logo img{
      max-width: 50px !important;
      max-height: 48px;
      position: absolute;
      left: 15px;
      filter: drop-shadow(1px 1px 0px rgba(69, 34, 1, 0.5));
      -webkit-filter: drop-shadow(1px 1px 0px rgba(69, 34, 1, 0.5));
    }
    .action-game.action-game-50 .gamesBox--logo{
        width: auto;
        height: auto;
        right: -75px;
        bottom: -65px;
        position: relative;
        z-index: 0;
        filter: drop-shadow(0px 0px 4px rgba(255, 132, 17, 0.5));
        -webkit-filter: drop-shadow(0px 0px 4px rgba(255, 132, 17, 0.5));
}
    .action-game.action-game-100 .gamesBox--image {
          width: 44% !important;
          height: auto !important;
          bottom: -15px !important;
    }
    .action-game.action-game-50 .gamesBox--image {
        width: 70% !important;
        height: auto !important;
        left: -8px;
        bottom: 27px !important;
    }
    .action-game.action-game-50 .BrandName {
        right: 0%;
        bottom: 125%;
        justify-content: flex-start !important;
    }
    .action-game-50 .game-name {
        font-size: 14px;
    }
    .action-game.action-game-50 .gamesBox--button {
        width: fit-content;
        font-size: 10px;
    }
}
@media (max-width: 414px){
    .action-game.action-game-50 .BrandName {
        bottom: 140%;
    }
    .action-game.action-game-50 .gamesBox--logo{
      right: -88px;
    }
  }  

/*--------------------------------------------------------------
# btn
--------------------------------------------------------------*/
.btn {
  position: relative;
  display: inline-block;
  font-size: .875rem;
  line-height: 1.25;
  min-width: 180px;
  border-radius: 6.25rem;
  text-align: center;
  padding: 0.75rem 1.875rem;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.btn--white {
  color: var(--color-bg-white);
  border: 4px solid var(--color-bg-white);
  margin-top: 12px;
}

.btn--white:hover {
  color: #000;
  background: var(--color-bg-white);
}

.btn--secondary {
  color: var(--color-bg-white);
  background: linear-gradient(357deg, #B39973 0%, #9B774C 100%);
}
.btn--secondary:hover {
  color: var(--color-bg-white);
  background: linear-gradient(180deg, #B39973 0%, #9B774C 100%);
}
@media (min-width: 48em){
  .btn {
    padding: 0.75rem 2.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
  }
}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
  .btn{
    border-width: 2px;
    margin-top: 12px;
    max-width: 80%;
  }
}

@media (max-width: 425px) {
  .btn {
    min-width: 180px;
  }
}

/*--------------------------------------------------------------
# 優惠情報Promotion
--------------------------------------------------------------*/
section#faq {
  padding: 60px 20px;
}
.faq .container{
  max-width: 960px;
}
.faq .faq-list {
  padding: 0;
  list-style: none;
  color: var(--color-text-darker);
}

.faq .faq-list li {
  padding: 10px;
  background: var(--color-bg-greyblue);
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}
.faq .faq-list a {
  display: contents;
  position: relative;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding-right: 25px;
  cursor: pointer;
  color: var(--color-accent-orange);
}
.faq .faq-list .btn {
  display: initial;
  padding: 6px 24px;
  color: var(--color-bg-white);
  font-size: .8em;
}
.faq .faq-list img{
  position: relative;
  border-radius: 20px;
}
.faq .faq-list i {
  font-size: 24px;
  position: absolute;
  right: 4px;
  top: 4px;
  background: var(--gradient-primary);
  color: var(--color-text-primary);
  padding: 6px;
  border-radius: 12px;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 1rem 3rem;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: var(--color-accent-orange);
}

.faq .faq-list a.collapsed:hover {
  color: var(--color-accent-orange);
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}
.faq .faq-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 768px) {
  section#faq {
    padding: 40px 0;
  }
  .faq .faq-list p {
    font-size: 1em;
    padding: 1rem 1rem;
  }
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 40px 0;
}

.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #2f2f2f;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  /* background: url("../images/footer-bg.png") #000 repeat; */
  background: linear-gradient(180deg, #ab7500 0%, #946400 25%, #8e6906 50%, #4e3400 75%, #2b1d00 100%);
  color: var(--color-bg-white);
  font-size: 1em;
  position: relative;
}

#footer ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
}
#footer ul li{
    list-style: none;
    margin: 4px 2px;
    padding: 0;
}
#footer a {
  color: var(--color-bg-white)fff;
  font-size: 1em;
}
#footer .footer-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 20px;
}

#footer .footer-top .footer-logo img {
  height: 100px;
  margin-bottom: 24px;
}

#footer .footer-top h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
  text-align: left;
}

#footer .footer-top p {
  font-size: 1em;
  line-height: 1.8;
  padding: 0;
  text-align: left;
}
.ft-about{
    margin-bottom: 20px;
}
#footer .footer-top .social-links {
  margin-top: 30px;
  display: flex;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--color-bg-white);
  color: var(--color-bg-white);
  line-height: 1;
  padding: 8px 0;
  margin-right: 8px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #fcba01;
  color: var(--color-bg-white);
  text-decoration: none;
}
#footer .footer-top .social-links img{
    width: 24px;
    height: auto;
    margin: auto;
}
#footer .footer-bottom {
  border-top: 1px solid #222222;
  z-index: 2;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  padding-top: 5px;
}
.brand-logo{
  border-bottom: 1px solid #6c757d4a;
}
.brand-logo .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    opacity: 0.6;
}
.brand-logo {
  padding: 20px;
  margin: auto;
}
.brand-logo img {
    max-width: 70px;
    max-height: 50px;
    margin: 13px 10px;
}

@media (max-width: 768px) {
  #footer { font-size: 14px;}
  #footer .footer-top p { font-size: 14px;}
  #footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #footer ul li {
    padding: 4px;
  }
  .brand-logo img {
    max-width: 50px;
    max-height: 40px;}
}
/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/
.modal{
  top: 10%;
}
.modal-header {
  background: var(--gradient-secondary);
  color: var(--color-bg-white);
  font-weight: 900;
  border-bottom: 0;
}
.modal-header .close {
  color: var(--color-bg-white);
  font-size: 2rem;
  padding: 1rem 1rem;
  margin: -1rem -0.2rem -1rem auto;
  padding: 0;
  background-color: transparent;
  border: 0;
}
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 var(--color-bg-white);
  opacity: 1;
}
.modal-footer{
  border: 0;
}
h4.modal-title{
  color:var(--color-bg-white);
}
.modal-content {
    background: var(--color-bg-greyblue);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 0 4px 2px rgb(0 0 0 / 30%);
}
.modal-body {
  min-height: 60vh;
  max-height: 60vh;
  overflow-y: scroll;
}
.login_form .form-control {
  font-size: 18px;
  color: var(--color-text-primary);
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid;
  background: 0 0;
}
.login_form label {
  margin: 10px 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
}
.login_form .button-red {
  /* min-width: 120px;
  height: 40px; */
  color: var(--color-bg-white);
  letter-spacing: 2px;
  font-weight: 400 !important;
  text-shadow: none;
  margin: 0 -15px;
  background: var(--color-btn-register-bright);
  border-radius: 40px;
  border: solid 1px var(--color-btn-register-bright);
}
.login_form .button-red:hover {
  background :#99000f;
  transition: all 0.4s;
}
#notice .nav-tabs {
  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-text-secondary);
}
#notice .tab-content li{
  margin-bottom: 12px;
  border-bottom: 1px dotted var(--color-text-secondary);
}
#notice .nav-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: .8em;
  color: var(--color-text-light);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
  border: 0 !important;
  border-bottom: 4px solid var(--primary) !important; 
}
#notice .nav-link.active{
  color: var(--color-text-light);
  background: transparent;
  border: 0;
  border-bottom: 4px solid var(--primary) !important; 
}
#notice .nav-link img{ max-height: 30px;}
#notice .tab-content .date {
    font-size: .8em;
    color: var(--color-text-lightgrey);
}
/*--------------------------------------------------------------
# Register
--------------------------------------------------------------*/
section#register {
  min-height: 60vh;
  padding: 60px 40px 120px 40px;
}

/*-----------------------------------
    ft_menu
------------------------------------*/
.ft-navbar {
    background:var(--gradient-navbar);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 0 24px 0;
    /* box-shadow: 0px -3px 16px rgb(154 113 75 / 43%), inset 0px 0px 0px 0px #fff8e854, inset 0px 3px 4px 0px #fff8e8; */
}
.ft-navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
}
.ft-navbar ul {
  margin: auto;
  height: 40px;
  color: #d3def9;
}
.ft-navbar ul li {
  list-style: none;
  padding: 6px 0px;
  text-align: center;
  min-width: 46px;
}
.ft-link-home {
  position: relative;
  bottom: 17px;
  width: 120px;
  height: 54px;
  z-index: 10;
  text-align: center;
}
.ft-link-home .home {
  text-align: center;
  margin: 18px 0;
}
.ft-link-home .home img {
  margin: -8px 0px;
  max-width: 100%;
}
.ft-link-home .home div{
  font-size: .6em;
  line-height: 2.4;
  width: 50px;
  margin: -26px 14px;
}
a.ft-link {
  line-height: 0;
  font-size: .8em;
  color: var(--color-text-primary);
  font-family: 'Noto Sans TC', sans-serif; 
}
.ft-link img {
  margin-bottom: 10px;
  width: 24px;
  height: 24px;
  filter: drop-shadow(1px 1px 0px rgba(69, 34, 1, 0.5));
  -webkit-filter: drop-shadow(1px 1px 0px rgba(69, 34, 1, 0.5));
}
a.ft-link div{
  margin: 4px auto;
    text-align: center;
}
/*======================mynav=====================*/
.overlay {
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1029;
  top: 0;
  left: 0;
  background-color: rgb(19 24 36 / 65%);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  top: 0;
  position: relative;
  width: 70%;
  height: 100%;
  padding: 100px 12%;
  text-align: left;
  background: var(--color-bg-white);
  background: #264b8199;
  opacity: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.overlay a {
  font-family: 'Noto Sans TC', sans-serif; 
  text-decoration: none;
  transition: 0.3s;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  padding: 12px 25px;
  text-align: center;
  background: linear-gradient(0deg, #002e67 0%, #0c2748 100%);
  color: var(--color-bg-white) !important;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.overlay a:hover, .overlay a:focus {
  color: #e3ba94;
}
a.overlay-btn img {
  width: 25px;
  height: 25px;
  color: var(--color-bg-white);
  margin-right: 10px;
}
.overlay a.overlay-btn{
  border: 1px solid #0c2748;
}

/* mobNav_home */
a.mobNav_home {
  background: transparent;
  margin-bottom: 12px;
}
a.mobNav_home img{
  max-width: 100%;
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

/*======================login-els=====================*/
.login-else, .register_else{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-else h4, .register h4{
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 12px;
}
.login-else .hr ,.register_else .hr{
  width: 100%;
  height: 1px;
  margin: 16px 0;
  background: #8f8f8f;
}
.register_else .hr{
  margin: 40px 0;
}
.else-btn {
  display: flex;
    width: 275px !important;
    height: 50px;
    background: -webkit-linear-gradient(90deg,#5BC2E7 20%, #ffe97d,#5BC2E7 90%);
    border-radius: 40px;
    padding: 6px 20px;
    margin: 5px 0;
    align-items: center;
    justify-content: space-between;
}
.else-btn.google{
    padding: 0;
    background:linear-gradient( 127deg,
    #4285f4 0%, #4285f4 15%,
    #DB4437 15%, #DB4437 20%,
    #f4b400 20%, #f4b400 30%,
    #0f9d58 20%, #0f9d58 100%);
}
.google div{
  color: #DB4437;
  background: #ffffff;
  width: 272px !important;
  height: 47px;
  border-radius: 40px;
  padding: 6px 20px;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.else-btn.line{
  background: #06c755;
  color: #fff;
  border: 2px solid #0ce762;
}
.else-btn span {
  width: 80%;
  text-align: left;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 14px;
  border-left: 1px solid;
  padding-left: 16px;
}
.else-btn img{
  max-width: 40px;
  padding: 5px;
}


/* --=========.authModal============-- */
.auth-btn {
  cursor: pointer;
}

.authModal{
  display: none;
  position: fixed;
  z-index: 1040;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.authModal .modal-box{
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  background: var(--gradient-main-bg);
  padding: 0px 0px 16px 0px;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* 桌機版：置中顯示 */
@media (min-width: 768px) {
  .modal-box {
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeInUp 0.3s ease;
  }
}

/* 手機版：底部滑出 */
@media (max-width: 767px) {
  .modal-box {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: slideUp 0.4s ease;
  }
}

/* 動畫效果 */
@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(100%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    transform: translate(-50%, 60%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.6);
  }
}

.authModal .close_m {
    position: absolute;
    right: 10px;
    top: -51px;
    font-size: 2em;
    line-height: 1.1;
    background: transparent;
    border: 4px solid #fff;
    border-radius: 100%;
    line-height: 0.8;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}
.authModal .tab-header{
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}

.authModal .tab-btn{
  flex: 1;
  padding: 10px;
  background: var( --color-bg-lighter);
  opacity: .5;
  border: none;
  color: #fff;
  cursor: pointer;
}

.authModal .tab-btn.active{
  background: var(--color-bg-greyblue);
  color:#fff;
  font-weight: bold;
  opacity: 1;
}
.authModal .tab-content{
  padding: 20px;
  text-align: center;
  max-height: 70vh;
  overflow-y: scroll;
}
.authModal .tab-content input ,.authModal .tab-content select{
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background: var(--color-bg-greyblue);
  border: 4px solid var(--color-border-light);
  border-radius: 6px;
  color: var(--color-text-primary);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}
.authModal .captcha-box {
    height: 46px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius:10px;
}
.authModal .login, .authModal .register,
.authModal .transfer, .authModal .history{
  width: 100%;
  padding: 20px;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  margin-top: 20px;
  cursor: pointer;
}
.authModal h5{
  color: var(--color-text-primary);
  font-weight: 400;
}
.authModal .login-else-box{
    margin-top: 13px;
    border-top: 1px solid var(--color-bg-lighter);
    padding: 12px 0px;
}
.login-else-box .log-img img{
  width: 50px;
  margin-right: 4px;
}
.authModal img#regImg {
    margin: 20px;
}

/* 快速轉點------------------------------------- */
#authModalTransfer .modal-box .content{
  padding: 40px 30px 85px 30px;
  text-align: center;
}
#transferFrom, #transferTo, #transferAmount{
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--color-bg-white);
}
#transferAmount{
  width: 70%;
}
.transfer-group, #transferFrom{
  width: 100%; 
}
.transfer-group-box{
  display: flex;
}
#authModalTransfer .transfer-group.Amount, #transferFrom, #transferTo {
    padding: 10px 6px;
    margin: 10px 0;
    background: var(--color-grey-grey);
    border: 1px solid var(--color-grey-medium);
    border-radius: 5px;
    color: var(--color-text-primary);
    margin: 2px;
}
#authModalTransfer .transfer-group label{
    width: 100%;
    padding: 0 10px;
}
#authModalTransfer .transfer-group option{
  position: relative;
}
.transfer-group.Amount {
    width: 100% !important;
}
#authModalTransfer button {
    width: 49%;
    padding: 9px 10px;
    margin: 1px;
    background: var(--gradient-secondary);
    color: #000;
    border: none;
    font-weight: bold;
    margin-top: 20px;
    cursor: pointer;
    font-weight: normal;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -ms-border-radius:30px;
    -o-border-radius:30px;
}
.transfer-actions{
  width: 100%;
  display: flex;
}
#authModalTransfer button.transfer-all{
    width: 28%;
    margin-top: 0px;
    padding: 6px;
    font-size: .9em;
}
#authModalTransfer .transferToIcon{ 
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 2em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 4px 12px 4px;
}
.transfer-actions .btn-confirm {
    background: transparent !important;
    border: 1px solid var(--color-accent-orange) !important;
    color: var(--color-text-primary) !important;
}

body {
  min-height: 110vh; /* 確保內容比螢幕長，才有滾動空間觸發隱藏 */
}

.notrans_bg {
    background: url(../images/game/notrns_bg.png) no-repeat !important;
    background-size: 45px !important;
    background-position: right top !important;
}

/* ============================================================
   ↓↓↓ 以下是 2026-09-03 的調整（原本放在 brand.css）
   對比度、字級、間距、圖片改 WebP。
   保持在檔案末尾是刻意的——順序與調整前一致，視覺結果不變。
   ============================================================ */
/* ============================================================
   DA娛樂城 — 品牌樣式表
   規則只加不改，不動 style.css，也不碰任何 PHP。
   還原方式：移除 includes/head.php 對本檔的 <link> 引用即可。

   本檔處理三件事：
     A. 文字對比度（金色背景 + 亮色文字，原本多處低於 2:1）
     B. 字級系統（內文 16px、區塊標題 24px）
     C. 間距與版面微調
   ============================================================ */

/* ------------------------------------------------------------
   A-0 共用尺度
   ------------------------------------------------------------ */
:root {
  --brand-text: 16px;         /* 內文與連結 */
  --brand-heading: 24px;      /* 區塊標題 */
  --brand-label: 14px;        /* 卡片上的小標籤，塞不下 16px 的位置 */
  --brand-section-gap: 56px;  /* 區塊間距，只給上方 */
  --brand-section-gap-sm: 36px;
}

/* ------------------------------------------------------------
   A-1 頁首：背景壓暗，讓白字全程站得住
   原本 145deg 金色漸層中段亮到 rgb(229,195,101)，
   白字只有 1.70:1。壓暗 45% 之後同一批文字是 4.88:1。
   壓的是背景層，LOGO 圖與按鈕都不受影響。
   ------------------------------------------------------------ */
.navbar-bg {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-navbar);
}

#navbar .nav-link {
  font-size: var(--brand-text);
}

/* 頁首 LOGO 旁的品牌名
   style.css 早就預留了 `#header .logo a span` 的字級規則，只是 HTML 少了那個
   元素。`flex:0 0 auto` 是關鍵——頁首是 flex，可壓縮的話文字會被擠出容器、
   壓在導覽列上。 */
#header .logo {
  width: auto;
  flex: 0 0 auto;
}

#header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  overflow: hidden;
}

#header .logo a .logo-text {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .02em;
  color: var(--color-text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

@media (max-width: 1410px) {
  #header .logo a .logo-text { font-size: 24px; }
}

/* 992~1409：登入後的頁首本來就滿載——五個導覽連結加上帳號、餘額、儲值、
   轉點、登出、會員要 966px。1280~1409 塞得下但品牌名會跟「遊戲大廳」黏在
   一起；992~1279 則會把原本就有的溢出推得更遠。這段登入後只留 LOGO 圖。
   未登入時導覽列只要 736px，空間夠，照常顯示。 */
@media (min-width: 992px) and (max-width: 1409px) {
  .navbar-bg:has(.u-login) .logo a .logo-text { display: none; }
}

@media (max-width: 991px) {
  #header .logo a { gap: 8px; }
  #header .logo a .logo-text { font-size: 22px; }
}

@media (max-width: 767px) {
  #header .logo a { gap: 6px; }
  #header .logo a .logo-text { font-size: 20px; }
}

@media (max-width: 400px) {
  #header .logo a { gap: 4px; }
  #header .logo a .logo-text { font-size: 19px; }
}

/* 359px 以下塞不下，硬留會多出橫向捲動 */
@media (max-width: 359px) {
  #header .logo a .logo-text { display: none; }
}

/* 頁首上的小型登入／註冊鈕，手機版原本只有 10px。
   style.css 那條寫了 !important，這裡得跟上才蓋得過去。
   高度一併從 30px 提到 36px——離天條要求的 44px 還差一截，
   但再高就會把 70px 的頁首撐開，要拉滿得先重排頁首。 */
#header .btn-login.btn-sm,
#header .btn-register.btn-sm {
  font-size: var(--brand-label) !important;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ------------------------------------------------------------
   A-2 跑馬燈：亮金底改深色字
   底色是 #d4a017→#f1c85c，米白字只有 1.65:1；
   換成站上導覽列「目前所在頁」的深棕，同一塊底是 7.67~11.4:1。
   ------------------------------------------------------------ */
.marquee-content li {
  font-size: var(--brand-text);
}

.marquee-content li a,
.top-bar .marquee-content li a {
  color: var(--color-text-secondary) !important;
  font-weight: 500;
}

@media only screen and (max-width: 768px) {
  .marquee-content li a { color: var(--color-text-secondary) !important; }
}

/* ------------------------------------------------------------
   A-3 遊戲分類頁籤：選中的那顆是亮金底，字要深色
   ------------------------------------------------------------ */
.nav-pills2 .nav-link {
  font-size: var(--brand-text);
}

.nav-pills2 .nav-link.active,
.nav-pills2 .nav-link.color.active {
  color: var(--color-text-secondary) !important;
  font-weight: 700;
}

/* ------------------------------------------------------------
   A-4 遊戲卡片：廠商名與「反水最高」標籤
   ------------------------------------------------------------ */
.game-name {
  font-size: var(--brand-text);
}

.BrandGame .gamesBox--button,
.BrandGame .gamesBox--button span {
  color: var(--color-text-secondary) !important;
  font-size: var(--brand-label);
  font-weight: 700;
}

/* ------------------------------------------------------------
   A-5 頁尾
   欄位標題原本是金色 #d4a017 壓在深金底上，只有 2.13:1。
   改成米白之後 4.77:1；層級改用字重、字距與一條金色短線來拉，
   不靠顏色深淺——金色留給那條線，線不受對比度規範。
   ------------------------------------------------------------ */
#footer .footer-top h5 {
  color: var(--color-text-primary);
  font-size: var(--brand-text);
  font-weight: 900;
  letter-spacing: .08em;
  padding-bottom: 8px;
  margin-bottom: 6px;
  /* 不能用 inline-block——.footer-top 是 text-align:center，
     inline-block 會被置中，跟下面靠左的連結對不齊。
     fit-content 保持 block（維持靠左），寬度又只到文字，底線才不會拉滿整欄。 */
  width: fit-content;
  border-bottom: 2px solid var(--primary);
}

#footer a,
#footer li,
#footer p,
#footer .ft-about p,
#footer .copyright {
  font-size: var(--brand-text);
}

#footer a {
  color: var(--color-text-primary);
}

#footer a:hover,
#footer a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   A-6 手機底部固定導覽列
   背景跟頁首是同一支金色漸層，中段最亮的地方剛好落在「首頁」上，
   米白字只有 1.78:1。跟頁首同樣壓暗 45%，五顆全部拉到 4.9:1 以上。

   另外這排字原本是 0.8em（12.8px）且 a 帶 line-height:0——
   文字容器的高度因此算成 0，文字靠溢出畫出來。
   一併給回正常行高與 16px，觸控區也才站得住 44px。
   ------------------------------------------------------------ */
.ft-navbar {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-navbar);
}

.ft-navbar ul {
  height: auto;
  min-height: 52px;
}

.ft-navbar ul li {
  padding: 4px 0;
}

a.ft-link {
  font-size: var(--brand-text);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;          /* 觸控目標不小於 44px */
}

.ft-link img {
  margin-bottom: 3px;
}

/* 導覽列變高之後，主內容的下方留白要跟著加，才不會被蓋住 */
@media (max-width: 767px) {
  main {
    padding-bottom: 88px;
  }
}

/* ------------------------------------------------------------
   B 字級系統：內文 16px、區塊標題 24px
   ------------------------------------------------------------ */
main p,
main li,
main .content p {
  font-size: var(--brand-text);
  line-height: 1.75;
}

main h2:not(.title),
main h3,
main h4 {
  font-size: var(--brand-heading);
  line-height: 1.35;
  font-weight: 900;
}

/* .title 是版面上那個裝飾用的巨型英文標（LIVE CASINO），不套一般標題尺寸 */

@media (max-width: 767px) {
  main h2:not(.title),
  main h3,
  main h4 {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   C 間距：區塊只留上方間距，避免上下疊加把版面撐長
   ------------------------------------------------------------ */
main > section + section {
  margin-top: var(--brand-section-gap);
}

@media (max-width: 767px) {
  main > section + section {
    margin-top: var(--brand-section-gap-sm);
  }
}

/* ============================================================
   第二輪：其他頁面 ＋ Owner 反映的頁尾／商標帶
   ============================================================ */

/* ------------------------------------------------------------
   C-1 導覽列「目前所在頁」
   原本用深棕 #1c1407 標示 active。頁首壓暗之後，深色字反而變成
   全站最看不清的一項（2.16:1）。改成亮金，並補一條底線來標示——
   層級靠形式，不靠顏色深淺。
   ------------------------------------------------------------ */
#navbar .nav-link.active,
.navbar a.active,
.navbar .active,
.navbar .active:focus {
  color: var(--color-text-light) !important;
  font-weight: 700;
}

#navbar .nav-link.active {
  position: relative;
}

#navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.navbar a:hover,
.navbar li:hover > a {
  color: var(--color-text-light) !important;
}

/* ------------------------------------------------------------
   C-2 頁尾：整塊壓暗 35%
   Owner 反映對比不夠。原本上緣是 #ab7500，米白字只有 4.77:1，
   剛好卡在門檻上。壓暗後同一批文字 7.9:1 以上。
   ------------------------------------------------------------ */
#footer {
  background:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    linear-gradient(180deg, #ab7500 0%, #946400 25%, #8e6906 50%, #4e3400 75%, #2b1d00 100%);
}

/* ------------------------------------------------------------
   C-3 廠商商標帶：壓暗拉到 45%，跟頁首同一個尺度
   白色商標壓在亮金底上會糊，28% 還不夠。
   ------------------------------------------------------------ */
.brand-logo {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-marquee);
}

/* ------------------------------------------------------------
   C-4 服務條款頁
   這頁的頁內 <style> 是照淺色底寫的（內文 #363636、標題 #442700），
   但實際背景是深棕，整頁量出來只有 1.00:1——等於看不見。
   頁內 style 排在本檔之後，只能用 !important 蓋。
   ------------------------------------------------------------ */
.news-content {
  color: var(--color-text-primary) !important;
}

.news-content h3,
.bar h3 {
  color: var(--color-text-light) !important;
  border-left-color: var(--primary) !important;
}

.news-content li,
.news-content p {
  color: var(--color-text-primary) !important;
}

/* ------------------------------------------------------------
   C-5 遊戲分類頁的廠商／玩法連結
   8px 的 Bootstrap 預設藍（#0d6efd）壓在深金底上只有 1.21:1，
   而且 8px 遠低於可讀下限。
   ------------------------------------------------------------ */
.nav-tabs .nav-link.small,
a.nav-link.small.text-uppercase {
  color: var(--color-text-primary) !important;
  font-size: var(--brand-label) !important;
}

/* 選中的那顆帶著 Bootstrap 預設的白底，在這個深色站上本來就突兀，
   而且白底配深字、深底配亮字兩種寫法會互相打架。
   底色直接統一成深金，文字用亮色——實測 7.2:1，順便讓分頁看起來像同一套。 */
.nav-tabs .nav-link.small.active,
a.nav-link.small.text-uppercase.active {
  background-color: #6b4a05 !important;
  border-color: transparent !important;
  color: var(--color-text-light) !important;
  font-weight: 700;
}

/* ------------------------------------------------------------
   C-6 線上客服頁
   ------------------------------------------------------------ */
.cs-card h3 {
  color: var(--color-text-light) !important;
}

/* LINE 官方綠配白字只有 2.26:1。深一階仍是 LINE 綠系，
   白字拉到 3.3:1，字級同步到 19px 才算得上大文字。 */
.cs-btn.cs-btn-line {
  background: linear-gradient(180deg, #04a445, #037a33) !important;
  font-size: 19px;
}

/* ------------------------------------------------------------
   C-7 帳戶資料頁的表單標籤
   這頁的灰字 #8b8b8b 是照淺色底寫的，壓在深金卡片上只有 2.01:1。
   只挑這頁確定是深底的那組——同名的 span 在儲值、轉點頁是淺底，
   一起改亮會反過來看不見（第二輪就是這樣改壞的）。
   ------------------------------------------------------------ */
.member-page label,
.member-page label span,
.user-account .form-group > label,
.user-account .form-group > label span {
  /* 實測這頁的卡片是 rgb(255,254,246) 白底，原本的 #8b8b8b 只有 3.37:1。
     往深的方向調——先前改成米白是反方向，那會直接消失在白底上。 */
  color: #5c5c5c !important;
}

/* 手機版會員中心的次要說明，實測在深底上 4.43:1 */
.info.d-md-none {
  color: var(--color-text-primary) !important;
}

/* ------------------------------------------------------------
   C-8 淺底卡片裡的文字（儲值、交易紀錄）
   這些是白底／淺灰底，要往深的方向調，不能跟著變亮。
   ------------------------------------------------------------ */
.section-label {
  color: #3d4757 !important;
  font-size: var(--brand-label) !important;
}

.currency-symbol {
  color: #6b5417 !important;
}

.group-text,
label.group-text {
  color: #444444 !important;
}

.btn.btn-outline-primary {
  color: #444444 !important;
  font-size: var(--brand-label) !important;
}

/* 儲值頁的送出鈕：白字壓在亮金上 2.35:1 */
.submit-btn {
  background: linear-gradient(180deg, #8a6208, #6b4a05) !important;
}

/* 淺灰卡片上的餘額區：標題與金額都要往深的方向調 */
.cash-add,
.cash-add span,
.num.WalletTotal,
.num .WalletTotal,
.num.m-3.WalletTotal,
.num.WalletTotal + span,
.cash-add + .num span {
  color: #5c4708 !important;
}

/* 表單驗證訊息：紅字 #dc3545 對比不足 */
.invalid-feedback {
  color: #ff8f9a;
}

/* ============================================================
   D 圖片改用 WebP
   下面這幾張的 .webp 站上早就有了，只是既有的 CSS 還指向原始檔。
   這裡只改「指到哪一支檔案」，尺寸、重複方式、定位全部照舊。
   ============================================================ */

/* 遊戲卡片底圖（variables.css 的 --gradient-game 用的就是這張） */
:root {
  --gradient-game: url(../images/bg_200.png.webp) #fff8e800;
}

.bankcard.bankcard_bg {
  background-image: url(../images/member/bg-bankcard.png.webp);
}

.box-user {
  background-image: url(../images/member/vip-bg.jpg.webp);
}

.BrandGame .games .gamesBox--logo {
  background-image: url(../images/game/caino_logo_bg.png.webp);
}

/* 這條原本帶 !important，要跟上才蓋得過去 */
.notrans_bg {
  background-image: url(../images/game/notrns_bg.png.webp) !important;
}

/* ------------------------------------------------------------
   C-9 白底卡片上的提示字與連結（帳戶資料頁）
   ------------------------------------------------------------ */

/* 純紅 #ff0000 在米白底上只有 3.95:1 */
.member-page span[style*="color:red"],
.member-page span[style*="color: red"],
.member-page .text-danger,
.member-page font[color="red"] {
  color: #c40000 !important;
}

/* 超商連結 #1a73e8 在米白底上 4.45:1，差一點。
   這頁的頁內 <style> 排在本檔之後，不加 !important 蓋不過去。 */
.member-page .box a:not(.btn),
.member-page .store-link {
  color: #0f56b3 !important;
}

/* 第三方登入鈕是品牌色（Google 紅、LINE 綠），只把底色壓深一階，
   識別度還在，白字才站得住 */
.member-page .btn-google,
.member-page [class*="google"] {
  color: #a52b21 !important;
}

/* ------------------------------------------------------------
   C-10 會員頁的小型操作鈕
   「儲值」「查詢點數」是 Bootstrap 的 btn-warning，
   預設的琥珀底配深字只有 4.29:1，差一點。
   ------------------------------------------------------------ */
.member-page .btn.btn-warning,
.btn.btn-warning {
  /* 白字配琥珀底只有 3.25:1（試過，更差）。
     留 Bootstrap 的琥珀色、文字改深——11.18:1，按鈕在深色頁面上也更跳。 */
  background-color: #ffc107 !important;
  border-color: #e0a800 !important;
  color: #1c1407 !important;
  font-weight: 700;
  font-size: var(--brand-label);
}

/* ------------------------------------------------------------
   C-11 實名認證的上傳欄位改中文
   「Choose File」是瀏覽器原生按鈕的字，網站改不到——只能把原生按鈕
   藏起來、自己畫一顆中文的。

   右邊的檔名維持原生顯示：純 CSS 判斷不到 file input 有沒有選到檔
   （沒有這種偽類），若把整個 input 蓋掉，選完檔案畫面不會有任何變化，
   使用者會不知道自己選到什麼——那是功能退步，寧可留著。

   HTML 完全沒動：input 的 name、id、accept、所屬表單都原封不動。
   ------------------------------------------------------------ */
.custom-file {
  position: relative;
  display: block;
  height: 40px;
  width: 100%;
  max-width: 360px;
}

.custom-file .custom-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;                 /* 看不見但照樣可以點、可以選檔 */
  cursor: pointer;
  z-index: 3;
}

/* 狀態文字：預設「尚未選擇檔案」，選了檔之後由 brand.js 寫進 data-file */
.custom-file::after {
  content: "尚未選擇檔案";
  position: absolute;
  left: 122px;
  top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: var(--brand-label);
  color: #6b6b6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 130px);
  z-index: 2;
  pointer-events: none;
}

.custom-file[data-file]::after {
  content: attr(data-file);
  color: #3d3d3d;
  font-weight: 500;
}

/* 原生那顆按鈕收起來，兩種寫法都給，舊版 WebKit 才吃得到 */
.custom-file .custom-file-input::file-selector-button {
  display: none;
}

.custom-file .custom-file-input::-webkit-file-upload-button {
  display: none;
}

/* 自己畫的中文按鈕。pointer-events:none 讓點擊穿透到底下的 input， */
/* 所以按鈕、檔名區、整個容器點哪裡都能開選檔視窗。 */
.custom-file::before {
  content: "選擇檔案";
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-size: var(--brand-label);
  font-weight: 700;
  color: #1c1407;
  background: linear-gradient(180deg, #ffc107, #e0a800);
  border: 1px solid #c99a06;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

.custom-file:hover::before {
  filter: brightness(1.06);
}

.custom-file:focus-within::before {
  outline: 2px solid #8a6208;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .custom-file::before {
    padding: 0 16px;
  }
  .custom-file::after {
    left: 110px;
    max-width: calc(100% - 118px);
  }
}

/* ------------------------------------------------------------
   C-12 頁首的登入／註冊鈕
   註冊＝主要動作（金底深字），登入＝次要（深底金字金邊）。
   對比度：金底深字 9.8:1、深底金字 7.7:1，都遠超門檻。
   ------------------------------------------------------------ */
#header .btn-login,
#header .btn-register,
#navbar .btn-login,
#navbar .btn-register {
  width: auto !important;
  min-width: 104px;
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 10px;
  /* 既有規則把這兩顆設成 flex-direction:column，圖示會跑到文字上方 */
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: filter .18s ease, transform .18s ease;
}

/* 註冊：主要動作 */
#header .btn-register,
#navbar .btn-register {
  background: linear-gradient(180deg, #ffd75f, #d9a017) !important;
  border: 1px solid #b8860b;
  color: #1c1407 !important;
}

/* 登入：次要動作 */
#header .btn-login,
#navbar .btn-login {
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255, 214, 120, .55);
  color: #ffe9a8 !important;
}

#header .btn-login:hover,
#header .btn-register:hover,
#navbar .btn-login:hover,
#navbar .btn-register:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* 圖示原本比文字還大，收到跟字級相稱 */
#header .btn-login .btn-icon,
#header .btn-register .btn-icon,
#navbar .btn-login .btn-icon,
#navbar .btn-register .btn-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* 登入後那兩顆：樣板把「登出」掛在 btn-register（金底）、「會員」掛在 btn-login（深底），
   等於在鼓勵使用者登出。不動樣板的 class，用 href 把兩者的樣式對調回來。 */
#header .btn-login.btn-member,
#navbar .btn-login.btn-member {
  background: linear-gradient(180deg, #ffd75f, #d9a017) !important;
  border: 1px solid #b8860b;
  color: #1c1407 !important;
}

#header .btn-register[href*="logout"],
#navbar .btn-register[href*="logout"],
#header .btn-login[href*="logout"],
#navbar .btn-login[href*="logout"] {
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255, 214, 120, .55);
  color: #ffe9a8 !important;
}

/* ---- 手機版 ---- */
#header .btn-login.btn-sm,
#header .btn-register.btn-sm {
  width: auto !important;
  min-width: 78px;
  height: 38px !important;
  padding: 0 13px !important;
  border-radius: 999px;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  font-size: var(--brand-label) !important;
  white-space: nowrap;      /* 這行是關鍵：原本 80px 寬差 1px 就把「登入」拆成兩行 */
}

#header .btn-login.btn-sm .btn-icon,
#header .btn-register.btn-sm .btn-icon {
  width: 17px;
  height: 17px;
  margin: 0;
}

@media (max-width: 400px) {
  #header .btn-login.btn-sm,
  #header .btn-register.btn-sm {
    min-width: 70px;
    padding: 0 10px !important;
  }
}

/* ------------------------------------------------------------
   C-13 會員列的儲值／轉點／紅利提領
   原本一紫一藍，跟金色站台不同調。改成與頁首按鈕同一套語言：
   儲值＝實心金（主要），轉點與紅利＝深底金邊（次要）。
   ------------------------------------------------------------ */
.u-login .btn-dpst,
.Wbody .btn-dpst,
.btn-dpst {
  background: linear-gradient(180deg, #ffd75f, #d9a017) !important;
  border: 1px solid #b8860b !important;
  color: #1c1407 !important;
}

.u-login .btn-tsfr,
.Wbody .btn-tsfr,
.btn-tsfr,
.btn-luckycash {
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255, 214, 120, .55) !important;
  color: #ffe9a8 !important;
}

/* 這幾顆的文字包在 <div> 裡，顏色要跟著走 */
.btn-dpst div,
.btn-dpst span {
  color: #1c1407 !important;
}

.btn-tsfr div,
.btn-tsfr span,
.btn-luckycash div,
.btn-luckycash span {
  color: #ffe9a8 !important;
}

.btn-dpst:hover,
.btn-tsfr:hover,
.btn-luckycash:hover {
  filter: brightness(1.08);
}

/* ------------------------------------------------------------
   C-14 頁首按鈕的圖示跟著底色走
   只處理頁首那兩顆——它們的圖示是簡單剪影，轉色乾淨。

   錢包區的儲值／轉點／紅利刻意不轉：那三個是彩色插畫（信用卡、轉圈箭頭、
   禮物盒），壓成單色會把內部細節一起吃掉，變成看不出是什麼的方塊。
   要統一那三個得換一組單色線條圖示，是另一件事。
   ------------------------------------------------------------ */

/* 金底（註冊、會員）：圖示轉深色 */
#header .btn-register .btn-icon,
#navbar .btn-register .btn-icon,
#header .btn-login.btn-member .btn-icon,
#navbar .btn-login.btn-member .btn-icon {
  filter: brightness(0) saturate(100%) opacity(.86);
}

/* 深底（登入、登出）：圖示轉米白 */
#header .btn-login .btn-icon,
#navbar .btn-login .btn-icon,
#header .btn-register[href*="logout"] .btn-icon,
#navbar .btn-register[href*="logout"] .btn-icon {
  filter: brightness(0) invert(93%) sepia(18%) saturate(420%) hue-rotate(342deg);
}

/* 上一條會連 .btn-member 一起吃到（它同時有 btn-login 這個 class），拉回深色 */
#header .btn-login.btn-member .btn-icon,
#navbar .btn-login.btn-member .btn-icon {
  filter: brightness(0) saturate(100%) opacity(.86);
}

/* ------------------------------------------------------------
   C-15 頁首按鈕之間的間距
   兩顆原本貼在一起，看起來像一顆被切開的東西。
   給每顆左右各 5px，中間就有 10px 的呼吸空間。
   ------------------------------------------------------------ */
#header .btn-login,
#header .btn-register,
#navbar .btn-login,
#navbar .btn-register {
  margin: 0 5px !important;
}

/* 手機版那兩顆是直接排在 flex 容器裡，不透過 li */
#header .btn-login.btn-sm,
#header .btn-register.btn-sm {
  margin: 0 4px !important;
}

/* 導覽列裡包按鈕的 li 本身也不要再帶左右內距，不然間距會疊起來 */
#navbar ul li.d-none.d-md-block {
  padding-left: 0;
  padding-right: 0;
}