/*==============================================================
# site.css — /action/ 自成一體的站台樣式表(2026-08-26)
#
# 取代 style.css + marquee.css + fixmenu.css + brand.css,不含 member.css。
# 從 style.css 抽出前台實際用到的規則精確複製(不是憑印象重寫),死規則丟掉;
# 額外白名單保留 Flickity/Swiper/AOS/GLightbox 這些 JS 套件在瀏覽器執行時才
# 動態產生的 class(dot、is-selected、flickity-* 等),靜態掃描原始碼看不到
# 這些,第一版漏抽過,已補上。
#
# member.css 故意不合併進來——實測它有 89 條規則沒掛在 .member 範圍下,
# 其中有真的會撞到其他頁面的通用名稱(.pay、.btn-outline-primary 這種
# Bootstrap 本身就有的名字),合併進來會改到沒連結 member.css 的頁面,
# 風險不可控。member.css 維持現狀:各頁自己選擇要不要另外 <link>。
#
# 還原:把 head.php 的 <link> 換回 style.css/marquee.css/fixmenu.css/brand.css
# 這四個原始檔案即可,四個檔案一個字都沒被動過。
==============================================================*/




/* ============ style.css(前台基底,已去除死規則,保留 Flickity/Swiper 等套件動態 class) ============ */

main {
  margin-top: 86px;
  background: url(../images/bg.jpeg.webp) #e1ebf8 no-repeat top;
  background-size: cover;
  background-attachment: fixed;
}
a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
a:hover {
  color: #383838;
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans TC', sans-serif;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 900;
}
h2 span.en-title { 
  color: #666; 
  font-size: 50%; 
  font-weight: normal;
}
.small, small {
  font-size: 50%;
}
.button {
  color: #fff !important;
  text-transform: uppercase;
  background: #DC5D10;
  padding: 6px 20px;
  border: 2px solid #DC5D10;
  min-width: 100px;
}
.button:hover {
  color: #240037;
}
@media screen and (max-width: 768px) {
  h2 span.min-title {
    display: none;
  }
}
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #cd974e;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #FCEDD9;
  line-height: 0;
}
.back-to-top:hover {
  background: #997600;
  color: #FCEDD9;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .back-to-top {
    bottom: 100px;
  }
}
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: .4s !important;
  }
}
#header {
  height: 85px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: #fff;
  box-shadow: 0 4px 10px -3px rgba(191, 191, 191, 0.5);
}
#header .logo a span {
  font-size: 28px;
  margin-left: 12px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b2201c;
  font-family: "cwTeXYen", sans-serif;
}
#header .logo-img {
  background: url(../images/logo.png.webp) no-repeat;
  background-size: contain;
  font-size: 0;
  width: 150px;
  height: 70px;
  margin: 0;
}
.scrolled-offset {
  margin-top: 90px;
}
@media (max-width: 1410px) {
  #header .logo a span {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  main {
    margin-top: 70px;
    padding-bottom: 70px;
  }
  #header {
    height: 70px;}
  #header .logo-img {
      width: 150px;
      height: 60px;
      margin: 5px;
    }
  .scrolled-offset {
    margin-top: 0px;
  }
}
.navbar-bg {
  padding: 0;
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
}
.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: #414d59;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.3s;
  height: 85px;
}
.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: #8f6300;
}
.navbar a span {
  color: #FFF;
  font-size: 12px;
  display: none;
}
.btn-login {
  color: #fff !important;
  background: #cd974e;
  padding: 6px 20px;
  border-right: 0;
  width: 100px;
  height: 85px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-register {
  background: #A40804;
  color: #fff !important;
  padding: 6px 20px;
  width: 100px;
  height: 85px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-login:hover, 
.btn-register:hover {
  color: #ffffff!important;
  background: #946c36;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}
@media (max-width: 768px) {
  .btn-login, .btn-register {
    width: 200px;
    font-size: 2rem !important;
  }
}
.mobile-nav-toggle {
  color: #cd974e;
  font-size: 2rem;
  font-weight: bolder;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
  background: transparent;
  padding: 12px;
  margin: -9px;
}
.mobile-nav-toggle.bi-x {
  color: #e1cd9b;
  background: transparent;
}
@media (max-width: 991px) {
  .navbar {
    padding: 12px 0;
    margin: 0;
  }
  .navbar-bg {
    padding: 0 !important;
  }
  .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: url(../images/mb_menu_bg.png.webp) rgba(0, 0, 0, 0.9) no-repeat;
  background-position: bottom;
  background-size: 100%;
  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: #fff;
}
.navbar-mobile a:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 1px;
  background: #fff;
  opacity: .4;
}
.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: #fff;
  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;
}
section {
  overflow: hidden;
}
.section-title {
  text-align: center;
  padding-bottom: 40px;
}
.section-title h2 {
  color:  #cd974e;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 0;
}
.section-title p {
  margin-bottom: 0;
  color: #333;
}
@media (max-width: 768px) {
  .section-title {
    padding-bottom: 20px;
  }
}
.testimonials {
  padding: 0;
}
.testimonials .container-fluid {
  padding: 0 !important;
}
.testimonials .swiper-container {
  overflow:hidden;
}
.testimonials .testimonial-item {
  text-align: center;
  color: #fff;
}
.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: #fff;
  background-image: linear-gradient(180deg,#ffffff 20%,#f3efb3 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.testimonials .testimonial-item h4 {
  font-size: 4rem;
  color: #ddd;
  margin: 0 0 15px 0;
  background-image: linear-gradient(180deg,#ffffff 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: 1%;
}
.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;
    padding-top: 72px;
  }
  .testimonials .testimonial-item .testimonial-img {
    overflow: hidden;
}
  .testimonials .testimonial-item p {
    width: 80%;
  }
  .testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}
.testimonials-game .container-fluid {
  padding: 0;
}
.GameNav {
  padding: 12px;
  width: 100%;
}
.GameNav .nav {
  max-width: 80%;
  margin: auto;
  background: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%, rgb(243 243 243 / 80%) 100%);
  border-radius: 60px;
  box-shadow: 0px 0px 7px rgb(195 159 100 / 38%);
  overflow: hidden;
}
.GameNav li.nav-item.col {
  text-align: center;
}
.GameNav .color .img {
  width: 105px;
  height: 75px;
  overflow: hidden;
  margin: auto;
  margin-bottom: 6px;
  margin-top: 10px;
  border-bottom: 1px solid #f6d7a4;
}
.GameNav picture {
  display: block;
  margin: 10px auto 2px auto;
}
.GameNav img {
  width: 100%;
}
.nav-pills .nav-link {
  border-radius: 0;
  color: #46484d;
  padding: 20px 0px 0px 0px
}
.GameNav .nav-link {
  color: #46484d;
  padding: 0;
  padding-bottom: 6px;
  text-align: center;
  filter: grayscale(50%) brightness(100%);
  transition: filter .2s ease;
  -webkit-filter: grayscale(50%) brightness(100%);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: transparent;
}
.GameNav .color.active {
  color: #cd974e;
  display: block;
  filter: none;
}
@media (max-width: 1024px) {
  .GameNav .color .img {
    width: 77px;
    height: 50px;
  }
}
@media (max-width: 660px) {
  .tab-content {
    min-height: 60vh;
  }
  .GameNav {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    float: left;
    padding: 12px 0;
  }
  .GameNav .nav {
    max-width: 100%;
  }
  .GameNav picture, .GameNav img {
    width: 50px;
  }
  .GameNav .color .img {
    height: 40px;
  }
  .GameNav .nav-link {
    font-size: 14px;
  }
}
.featured.slotPage {
  padding-bottom: 60px;
  padding-top: 60px;
}
.featured .games {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.featured .games .gamesBox {
  width: 22%;
  background: #fff;;
  margin: 5px 6px;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 30px -20px #222;
}
.featured .games .game-name {
  padding: 4px 12px;
  font-size: 1.2rem;
  text-align: center;
  color: #000;
}
.featured .games .gamesBox--image img {
  display: block;
  width: 96%;
  margin: 0 auto;
}
.featured .games .gamesBox, .featured .games .gamesBox--image img {
  border-radius: 25px;}
.featured .games .gamesBox--image {
  margin: 5px 0;
}
.featured .games .gamesBox__content {
  height: 175px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.85)), to(rgba(53, 53, 53, 0.85)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(53, 53, 53, 0.85) 100%);
  position: relative;
  border-top-left-radius: 0 0;
  border-top-right-radius: 0 0;
  overflow: hidden;
  font-size: 15px;
  padding: 6px;
}
.featured .games .gamesBox--button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  z-index: 1;
  position: relative;
  font-size: 1.125rem;
  line-height: 1.5rem;
}
.featured .games .gamesBox--button a {
  width: 100%;
  height: 50px;
  color: #333;
  text-align: center;
  line-height: 55px;
}
.featured .games .gamesBox--button a.play {
  background: #d2b983;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.featured .games .gamesBox:hover a.play {
  background: #A40804;
  color: #fff;
}
@media (max-width: 767px) {
  .featured .games .gamesBox {width: 45%;}
  .featured .games .gamesBox--title, .featured .games .game-name {font-size: medium;}
  .featured .games .gamesBox--button a,  .featured .games .gamesBox__content {font-size: small;}
}
@media (max-width: 660px) {
  .featured.slotPage {
    padding-left: 0;
    padding-bottom: 120px;
    min-height: 90vh;
  }
  .featured .games .gamesBox {
    width: 30%;
  }
  .featured .games .game-name {
    display: none;
  }
  .featured .games .gamesBox, .featured .games .gamesBox--image img {
    border-radius: 16px;}
}
.casino-btn-grop {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.casino-btn-grop .casino-btn {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0px;
}
.casino-btn-grop .casino-btn h3 {
  font-size: 20px;
  color:  #333;
  margin-top: 12px;
  margin-bottom: 0;
  display: none;
}
.casino-btn-grop .casino-btn div {
  width: 110px;
  height: 30px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 0;
  text-align: center;
  color: #cc974e;
  padding: 16px 10px;
  background: transparent;
  border: 1px solid;
  border-radius: 25px;
  margin-top: 15px;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
}
.casino-btn-grop .casino-btn div:hover, 
.casino-btn-grop .casino-btn div:active {
  color: #cc974e;
}
.casino-btn-grop .casino-btn img {
  height: 100px;
  margin: 0px 5px;
}
.g-grop-body.g-grop-m {
  padding-top: 1rem;
}
.casino-btn-grop .sport-btn img {
  height: 200px;
}
.featured.slot {
  padding: 1rem 0 0rem 0;
}
.game-grop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 60px;
}
.game-grop .game-body {
  width: 20%;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  color: #333;
  border: 1px solid #e4d2a1;
  border-radius: 20px;
  background: #fff;
  
  background-size: 247px;
  background-position: -67% 16%;
  overflow: hidden;
  padding: 20px;
  margin: 8px 8px;
  justify-content: center;
}
.slot .game-body {
  background: url(../images/game/slot/slot_bg.png.webp) #fff no-repeat !important;
  background-size: 247px !important;
  background-position: center 47% !important;
}
.fish .game-body {
  background: url(../images/game/fish/fish_bg.png.webp) #ffffff no-repeat !important;
  background-size: 300px !important;
  background-position: center 50% !important;
  overflow: visible;
}
.game-grop .game-body img {
  width: 80%;
}
.game-grop .link {
  width: 100%;
  margin-top: 16px;
  text-align: center;
}
.game-grop .link h3 {
  font-size: larger;
  line-height: 1;
}
.game-grop .link h3 small {
  font-size: .8rem;
  letter-spacing: 2px;
  color: #bababa;
}
.game-grop .link .game-start {
  display: block;
  font-size: .8em;
  letter-spacing: 2px;
  padding: 5px 15px;
  width: 80%;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #be9b21;
  color: #ac883e;
  margin: auto;
}
@media (max-width: 767px) {
  .game-grop .game-body {
      width: 100%;
      padding: 0px 15px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      color: #333;
      border: 1px solid #fff;
      border-radius: 20px;
      background-size: 247px;
      background-position: -67% 16%;
      overflow: hidden;
      margin: 8px 0;
    }
  .game-grop .game-body img {
      width: 45%;
    }
  .game-grop .link {
      width: 55%;
      margin: 0;
      text-align: center;
    }
  .game-grop .link h3 {
      font-size: larger;
      line-height: 1;
    }
  .game-grop .link h3 small {
      font-size: .8rem;
      letter-spacing: 2px;
      color: #ce974e;
    }
  .game-grop .link .game-start {
      display: block;
      font-size: .8em;
      letter-spacing: 2px;
      padding: 5px 15px;
      width: 80%;
      background: #ce974e;
      border-radius: 20px;
      border: 1px solid #be9b21;
      color: #fff;
      margin: auto;
    }
  .casino .game-body {
      padding: 4px 15px 0px 10px;
      background: url(../images/game/casino/casino_bg.jpeg.webp) #fff no-repeat !important;
      background-size: cover !important;
      
      overflow: visible;
    }
  .slot .game-body {
      min-height: 130px;
      background: url(../images/game/slot/slot_bg.png.webp) #fff no-repeat !important;
      background-size: 207px !important;
      background-position: left -27% bottom 0% !important;
      overflow: visible;
    }
  .slot .game-grop .game-body img {
      position: relative;
      bottom: 7%;
    }
  .fish .game-body {
      min-height: 130px;
      background: url(../images/game/fish/fish_bg.png.webp) #fff no-repeat !important;
      background-size: 200px !important;
      background-position: left -17% bottom -80% !important;
      overflow: visible;
    }
  .sport .game-body {
      padding: 5px 15px 0px 0px;
      background: url(../images/game/sport/sport_bg.png.webp) #fff no-repeat !important;
      background-size: 200px !important;
      background-position: left -75% bottom 0% !important;
      overflow: visible;
    }
  .keno .game-body {
      padding: 5px 15px 0px 0px;
      background: url(../images/game/keno/keno_bg.png.webp) #fff no-repeat !important;
      background-size: 244px !important;
      background-position: left -151% bottom 0% !important;
      overflow: visible;
    }
  .sport .game-body img, .keno .game-body img {width: 60%;}
  .sport .game-body .link, .keno .game-grop .link {width: 40%;}
  .sport .game-body .link .game-start, .keno .game-grop .link .game-start { padding: 5px 6px; width: 85%;}
}
.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;
}
@media (min-width: 48em) {
  .btn {
    padding: 0.75rem 2.5rem;
    font-size: 1rem;
    letter-spacing: 2px;
  }
}
@media (max-width: 768px) {
  .btn {
    border-width: 2px;
    margin-top: 12px;
    max-width: 80%;
  }
}
@media (max-width: 425px) {
  .btn {
    min-width: 180px;
  }
}
.carousel {
  
}
.carousel-cell {
  width: 22%;
  height: 480px;
  padding: 50px 20px;
  margin-right: 10px;
  text-align: center;
  counter-increment: carousel-cell;
  background: url(../images/home/bg_1301617.jpeg.webp) no-repeat;
  background-size: contain;
  border: 4px solid #ebebeb;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
.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);
  -webkit-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -moz-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -ms-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -o-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
}
.carousel-cell p {
  font-size: .8em;
  color: #757575;
}
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}
.flickity-page-dots .dot {
  background: #cd974e !important;
}
@media (max-width: 768px) {
  .carousel-cell {
    width: 75%;
    height: 500px;
  }
}
@media (max-width: 450px) {
  .carousel-cell {
    width: 75%;
    height: 450px;
  }
}
.jp .j-list-group .list {
  width: 60%;
}
@media (max-width: 768px) {
  .jp .list.aos-init {width: 100%;}
  .jp .list.aos-init img { display: none;}
}
section.index-about {
  padding: 0;
  overflow: hidden;
}
.info-body {
  padding: 80px 30px;
  color: #333;
}
.index-about .section-title h2 {
  color:  #cd974e;
  font-size: xxx-large;
  text-align: left;
  text-shadow: 3px 2px 3px #ffedb9b3;
}
.index-about .leading-loose {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 50px;
  opacity: .7;
}
.index-about2 .j-list-group .list {
  width: 30%;
  text-align: center;
}
.index-about .data-count .data-unit {
  font-size: 28px;
  line-height: 28px;
}
.index-about .data-count .data-title {
  color: #ccc;
}
.index-about .data-block {
  font-family: 'Noto Sans TC', sans-serif;
  font-family: 'Bebas Neue', sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.index-about .data-block .data-count {
  width: 50%;
}
.index-about3.img {
  transform: scale(1,1);
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
}
.index-about3 .img:hover {
  transform: translate3d(29.53px, -40.27px, 10px) rotate(0.1deg) scale(1.1, 1.1);
  transition-duration: 2s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.casino-btn img {
  transform: scale(1,1);
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
}
.casino-btn-grop .casino-btn: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);
  -webkit-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -moz-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -ms-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
  -o-transform: translate3d(0px, -4px, 14px) rotate(0deg) scale(1.1, 1.1);
}
@media (max-width: 768px) {
  section.index-about {
    padding: 3rem 1.6rem;
  }
  .index-about .leading-loose {
    font-size: 1rem;
  }
  .index-about .section-title h2 {
    text-align: center;
  }
  .img.Mermaid {
    position: absolute;
    right: 3em;
}
  .index-about3 .info-body {
    left: 8em;
    width: 80%;
  }
}
#aboutSA .title.aboutSA {
  text-align: left;
  margin-top: 80px;
  font-size: 6rem;
  color: #333;
}
@media (max-width: 768px) {
  #aboutRSG .leading-loose, #aboutServices .service-scope-img {
    position: inherit;
  }
}
section#faq {
  padding: 60px 20px;
}
.faq .container {
  max-width: 960px;
}
.faq .faq-list {
  padding: 0;
  list-style: none;
  color: #333;
}
.faq .faq-list li {
  padding: 10px;
  background: #f8f9fa;
  border: 4px solid #cfb67e;
  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;
}
.faq .faq-list .btn {
  display: initial;
  padding: 6px 24px;
  font-size: 1rem;
}
.faq .faq-list img {
  position: relative;
  border-radius: 20px;
}
.faq .faq-list i {
  font-size: 24px;
  position: absolute;
  right: 4px;
  top: 4px;
  background: #cfb67e;
  color: #FFF;
  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: #343a40;
}
.faq .faq-list a.collapsed:hover {
  color: #cfb67e;
}
.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}
.faq .faq-list a.collapsed .icon-close {
  display: none;
}
.faq.news .container {
  
}
@media (max-width: 768px) {
  section#faq {
    padding: 60px 0;
  }
  .faq .faq-list p {
    padding: 1rem 1rem;
  }
}
@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
}
#footer {
  background: url("../images/footer-bg.png.webp") #000 repeat;
  color: #fff;
  font-size: 14px;
  position: relative;
}
#footer .ft_logo img {
  max-height: 90px;
}
#footer ul {margin: 30px 0 0 0;}
#footer ul li {
  list-style: none;
  margin: 10px;
  display: inline-block;
}
#footer a {
  color: #ffffff;
  font-style: italic;
}
#footer .footer-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 0;
}
#footer .footer-top .footer-logo img {
  height: 80px;
}
#footer .footer-top h3 {
  font-size: 36px;
  font-weight: 700;
  color: #ffc600;
  position: relative;
  font-family: "Poppins", sans-serif;
  padding: 30px 0 0 0;
  margin-bottom: 0;
}
#footer .footer-top p {
  font-size: 1rem;
  line-height: 1.5;
  font-style: italic;
  margin: 30px 0 0 0;
  padding: 0;
}
#footer .footer-top .footer-newsletter {
  text-align: center;
  font-size: 1rem;
  margin-top: 30px;
}
#footer .footer-top .social-links {
  margin-top: 30px;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #cd974e;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: #5ab652;
  color: #fff;
  text-decoration: none;
}
#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;
}
.product-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
}
.seo {
  border-top: 1px solid #c6c6c6;
  background: #ebebeb;
  padding-top: 60px;
  color: rgb(0 0 0 / 60%);
}
.seo .container {
  padding-bottom: 0;
}
.seo-faq-list i {
  font-size: 18px;
  position: absolute;
  right: 4px;
  top: 4px;
  background: rgb(144 144 144 / 30%);
  color: #737373;
  padding: 6px;
  border-radius: 12px;
  font-weight: 900;
}
.seo-faq-list .icon-show {
  display: none;
}
.seo-faq-list a.collapsed {
  color: #333;
}
.seo-faq-list a.collapsed:hover {
  color: #000;
}
.seo-faq-list a.collapsed .icon-show {
  display: inline-block;
}
.seo-faq-list a.collapsed .icon-close {
  display: none;
}
.seo-faq-list li {
  list-style: none;
  color: #575757;
  border-bottom: 1px solid rgb(144 144 144 / 30%);
  margin: 1rem 0px;
}
.seo-faq-list li h5 {
  color: #333;
  font-size: 2rem;
}
.modal {
  top: 10%;
}
.modal-header {
  background: #cd974e;
  color: #333333;
  font-weight: 900;
  border-bottom: 0;
}
.modal-header .close {
  color: #333333;
  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 #333333;
  opacity: 1;
}
.modal-footer {
  border: 0;
}
h4.modal-title {
  color:#333;
}
.modal-content {
  background-color: rgb(255 255 255 / 90%);
  color: #333;
  border: 2px solid #cd974e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 0 4px 2px rgb(0 0 0 / 30%);
}
.modal-body {
  max-height: 78vh;
  overflow-y: scroll;
}
.login_form .form-control {
  font-size: 18px;
  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 {
  
  color: #fff;
  letter-spacing: 2px;
  font-weight: 400 !important;
  text-shadow: none;
  margin: 0 -15px;
  background: #dc3545;
  border-radius: 40px;
  border: solid 1px #dc3545;
}
.login_form .button-red:hover {
  background :#99000f;
  transition: all 0.4s;
}
#notice li {
  margin-bottom: 12px;
  border-bottom: 1px dotted #c2c2c2;
}
section#register {
  min-height: 80vh;
  padding: 60px 40px 120px 40px;
}
.ft-navbar {
  background: #231600;
  border-top: solid 1px #cd974e;
  padding: 8px 0 24px 0;
  box-shadow: 0px -3px 5px 0px rgb(229 211 162 / 51%);
}
.ft-navbar ul {
  margin: auto;
  height: 40px;
}
.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: -10px 0px;
  max-width: 65px;
}
.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: #cd974e;
}
.ft-link img {
    margin-bottom: 10px;
    max-width: 28px;
    height: 26px;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
}
a.ft-link div {
  margin: 4px auto;
    text-align: center;
}
.login-else, .register_else {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-else h4, .register h4 {
  color: #000;
  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 {
  background: #db4437;
  color: #fff;
}
.else-btn.line {
  background: #06c755;
  color: #fff;
}
.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;
}

/* ============ marquee.css(跑馬燈,原檔未刪減) ============ */

/*-----------------------------------
    走馬燈
------------------------------------*/
section.mq-section{
  background: #cd974e;
  padding: 12px 0px;
  height: 45px;
  box-shadow: 0px 4px 7px 0px rgb(122 122 122 / 50%);
  position: relative;
}

  .mq-icon{
    color: fff;
  }
  .top-bar {
    width: 100%;
    padding: 0px 10px;
    margin-top: -8px;
  }
  .marquee {
    /* width: 90%;
    height: 26px; */
    margin: 5px auto !important;
    padding: 0px !important;
    white-space: nowrap;
    overflow: hidden;
  }
  .marquee li {
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
  .marquee li a{
    color:  #fff;
    font-size: 16px;
    letter-spacing: .5px;
  }

  @media only screen and (max-width: 768px) {
        section.mq-section {
            padding: 5px 0px;
            height: 28px;
        }
        .top-bar {
          width: 100%;
          padding: 0px 10px;
          margin-top: -9px;
      }
      .marquee li a {
        font-size: 14px;
      }
  }


/* ============ fixmenu.css(浮動客服鈕,原檔未刪減) ============ */

.fixmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fixmenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
}
.fixmenu li img{
    width: 60px;
    height: 60px;
    margin-bottom: 2px;
}
.fixmenu {
    position: fixed;
    right: -1px;
    bottom: 150px;
    width: 74px;
    height: auto;
    padding: 12px 2px;
    z-index: 99;
    text-align: center;
}
/*======================按鈕=====================*/
.fixmenu ul {
    
}
.fixmenu li a span {
    display: block;
    background: #ffffff;
    width: 60px;
    height: 29px;
    padding: 4px 0px;
    border-radius: 20px;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    /* border: 1px solid #bd9d00; */
    box-shadow: 0 0 4px #bd9d00;
    display: none;
}

/* ============ brand.css(品牌覆蓋層,原檔一字未動) ============ */

/*--------------------------------------------------------------
# brand.css — /action/ 會員系統的視覺,對齊 ab67.net 前台
#
# 只做覆蓋,不動 style.css。要還原:把 head.php 裡這支的 <link> 拿掉。
# 色票、字級、底部導覽的規格都取自前台實際輸出的計算值。
#
# 天條對照:
#   34 觸控與字級  36 平板區間  37 間距系統  38 只給上間距
#   39 背景區塊滿版  40 頁尾單行  41 對比  42 視覺層級
--------------------------------------------------------------*/

:root {
  /* 色 */
  --ab-bg:        #0B1220;
  --ab-bg-2:      #101A2B;
  --ab-bg-3:      #16223A;
  --ab-bg-deep:   #070D18;
  --ab-line:      #1E2B45;
  --ab-line-bar:  #1B2942;   /* 底部導覽的分隔線,與前台同值 */
  --ab-gold:      #CD974E;
  --ab-gold-soft: #E8C98F;
  --ab-ink:       #E9ECF3;
  --ab-ink-2:     #95A2BA;
  --ab-ink-bar:   #CBD3E0;   /* 底部導覽文字,與前台同值 */
  --ab-on-gold:   #14100A;

  /* 間距尺度(本站專用,不跨站共用) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 40px; --s7: 64px;
  --sec: 80px;              /* 區塊上下留白 */
  --gutter: 28px;           /* 容器左右 */
  --wrap: 1320px;           /* 內容最大寬,與前台一致 */

  --ab-radius: 4px;
}

@media (max-width: 1024px) { :root { --sec: 56px; --gutter: 24px; } }
@media (max-width: 767px)  { :root { --sec: 40px; --gutter: 16px; } }

/*==============================================================
  底層
==============================================================*/

body {
  background: var(--ab-bg);
  color: var(--ab-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei UI",
               "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.85;
}

main#main {
  background: var(--ab-bg) none;
  background-attachment: scroll;
}

a { color: var(--ab-ink); }
a:hover { color: var(--ab-gold); }

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--ab-ink);
  letter-spacing: 0;
  text-wrap: balance;
}

main#main .container,
#footer .container {
  max-width: var(--wrap);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/*==============================================================
  頁首
==============================================================*/

#header {
  background: var(--ab-bg);
  box-shadow: none;
  border-bottom: 1px solid var(--ab-line);
}
.navbar-bg {
  background: transparent;
  color: var(--ab-ink);
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* 深底要用白金版 logo —— 就是前台頁首在用的那一支 logo_w */
#header .logo-img {
  background-image: url(../images/logo_w.png.webp);
  background-position: left center;
}

#navbar a,
#navbar .nav-link { color: var(--ab-ink); font-size: 15px; }
#navbar a:hover,
#navbar .nav-link:hover,
#navbar .nav-link.active { color: var(--ab-gold); }

.btn-login,
.btn-register {
  height: auto !important;
  width: auto !important;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 22px !important;
  margin-left: var(--s2);
  font-size: 15px !important;
  border-radius: var(--ab-radius);
  line-height: 1.4;
}
.btn-login {
  background: transparent;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line);
}
.btn-login:hover {
  background: rgba(232, 201, 143, .08);
  border-color: var(--ab-gold);
  color: var(--ab-gold-soft) !important;
}
.btn-register {
  background: var(--ab-gold);
  color: var(--ab-on-gold) !important;
  border: 1px solid var(--ab-gold);
  font-weight: 700;
}
.btn-register:hover { background: var(--ab-gold-soft); color: var(--ab-on-gold) !important; }

.mobile-nav-toggle { color: var(--ab-ink); }

/*==============================================================
  區塊節奏與滿版背景(天條 38、39)
  區塊之間不用 margin,一律靠帶狀區塊自己的 padding,
  所以不會有上下間距互相疊加的情形。
==============================================================*/

main#main > section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--sec);
  padding-bottom: var(--sec);
  width: 100%;
}

/* 主視覺貼著頁首(天條 37 首區塊另定) */
main#main > section.testimonials {
  padding: 0;
  background: var(--ab-bg-deep);
}
/* marquee.css 給 section.mq-section 寫死高度(桌機 45px、手機 28px),
   公告膠囊比那個高,超出的部分會被切掉。這裡解掉固定高度。
   選擇器不能掛 main#main —— 說明頁那六頁沒有 <main> 包層
   (body 底下直接接 header → marquee → .main),掛了就吃不到。 */
section.mq-section,
main#main > section.mq-section {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
  background: var(--ab-bg-2);
  border-bottom: 1px solid var(--ab-line);
  box-shadow: none;
  height: auto;
}
.mq-section .top-bar { margin-top: 0; }

/* 交替帶:背景滿版到視窗邊,內容才靠容器限寬(天條 39) */
main#main > section#lobby { background: var(--ab-bg); padding-bottom: 0; }
main#main > section.tab-content { background: var(--ab-bg-2); }
main#main > section.register,
main#main > section.contact { background: var(--ab-bg-2); }

/* 尾區塊接頁尾,留白另定(天條 37) */
main#main > section:last-of-type { padding-bottom: calc(var(--sec) + var(--s5)); }

.tab-content { min-height: 0; }

/*==============================================================
  跑馬燈
==============================================================*/

.mq-section .top-bar { background: transparent; margin-top: 0; padding: 0; }
.mq-section .marquee { margin: 0 auto !important; }
.mq-section .marquee li { height: auto; line-height: 1.6; }
.mq-section .marquee li a { color: var(--ab-ink-2); font-size: 14px; }
.mq-section .marquee li a:hover { color: var(--ab-gold); }

@media (max-width: 767px) { .mq-section .marquee li a { font-size: 13px; } }

/*==============================================================
  區塊標題(天條 42:字級 + 字重 + 顏色一起拉開層級)
==============================================================*/

.section-title { text-align: left; padding-bottom: var(--s5); }
.section-title h2 {
  color: var(--ab-gold-soft);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  margin: 0 0 var(--s3);
}
.section-title p { color: var(--ab-ink-2); font-size: 15px; margin: 0; }

@media (max-width: 1024px) { .section-title h2 { font-size: 27px; } }
@media (max-width: 767px)  { .section-title h2 { font-size: 23px; } }

/*==============================================================
  遊戲分類列
==============================================================*/

.GameNav { padding: 0; }
.GameNav .nav {
  background: var(--ab-bg-2);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: none;
  max-width: var(--wrap);
}
.GameNav .nav-link,
.nav-pills .nav-link { color: var(--ab-ink-2); min-height: 44px; }
.GameNav .color.active { color: var(--ab-gold); }
.GameNav .color .img { border-bottom-color: var(--ab-line); }

/*==============================================================
  品牌介紹段
==============================================================*/

.index-about .leading-loose {
  color: var(--ab-ink-2);
  font-size: 15.5px;
  line-height: 1.95;
  max-width: 62ch;
}

/* 四個品牌入口做成卡片,不要只有一排小圖示 */
.casino-btn-grop { justify-content: flex-start; gap: var(--s4); margin-top: var(--s6); }
.casino-btn-grop .casino-btn {
  margin: 0;
  flex: 0 0 auto;
  width: 150px;
  padding: var(--s5) var(--s3);
  background: var(--ab-bg-3);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  transition: border-color .15s ease;
}
.casino-btn-grop .casino-btn:hover { border-color: var(--ab-gold); }
.casino-btn-grop .casino-btn img { height: 76px; margin: 0; }
.casino-btn-grop .casino-btn div {
  width: auto; min-width: 96px; height: auto; min-height: 34px;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  margin-top: var(--s4); padding: var(--s2) var(--s3);
  font-size: 11.5px; letter-spacing: .16em;
  color: var(--ab-gold);
  border: 1px solid var(--ab-line); border-radius: var(--ab-radius);
}
.casino-btn-grop .casino-btn:hover div { border-color: var(--ab-gold); color: var(--ab-gold-soft); }

@media (max-width: 767px) {
  .casino-btn-grop { gap: var(--s3); }
  .casino-btn-grop .casino-btn { width: calc(50% - var(--s3) / 2); }
}

/*==============================================================
  遊戲卡片牆
==============================================================*/

.g-grop-body, .featured { background: transparent; }
.game-grop { padding-bottom: 0; }
.game-grop .game-body { border-color: var(--ab-line); border-radius: var(--ab-radius); }

/* 卡片是淺金色的成品圖,字要深色才讀得到(天條 41) */
.game-grop .link h3 { color: var(--ab-on-gold); font-weight: 700; }
.game-grop .link h3 small { color: #6B5426; font-weight: 500; }
.game-grop .link .game-start {
  background: var(--ab-gold);
  border: 1px solid var(--ab-gold);
  border-radius: var(--ab-radius);
  color: var(--ab-on-gold);
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s2) var(--s4);
}
.game-grop .link .game-start:hover { background: var(--ab-gold-soft); color: var(--ab-on-gold); }

/*==============================================================
  表單
==============================================================*/

.form-control {
  background: var(--ab-bg);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  color: var(--ab-ink);
  height: auto; min-height: 46px; padding: 12px 14px;
  font-size: 16px;
}
.form-control:focus {
  background: var(--ab-bg);
  border-color: var(--ab-gold);
  box-shadow: 0 0 0 3px rgba(205, 151, 78, .14);
  color: var(--ab-ink);
}
.form-control::placeholder { color: #6B7A94; }
.form-group label { color: var(--ab-ink-2); font-size: 16px; }

.button-red, .btn.button-red {
  background: var(--ab-gold); color: var(--ab-on-gold);
  border: 0; border-radius: var(--ab-radius);
  min-height: 48px; padding: 12px 34px;
  font-weight: 700; font-size: 16px;
}
.button-red:hover { background: var(--ab-gold-soft); color: var(--ab-on-gold); }

.else-btn { border-radius: var(--ab-radius) !important; min-height: 46px; }

/*==============================================================
  頁尾(天條 40:排成一列,不做多欄)
==============================================================*/

#footer {
  background: var(--ab-bg-deep);
  border-top: 1px solid var(--ab-line);
  color: var(--ab-ink-2);
}
#footer a { color: var(--ab-ink-2); }
#footer a:hover { color: var(--ab-gold); }

#footer .footer-top { padding: var(--s6) 0 var(--s5); }
#footer .footer-top .row {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--s7); margin: 0;
}
#footer .footer-top .col-lg-4,
#footer .footer-top .col-lg-8 { flex: 0 1 auto; max-width: none; padding: 0; }
#footer .footer-top .col-lg-4 { flex: 0 0 260px; }
#footer .footer-top .col-lg-8 { flex: 1 1 auto; }
#footer .ft_logo img { max-width: 170px; }
#footer .footer-top p {
  font-size: 13px; line-height: 1.7;
  color: var(--ab-ink-2); margin: var(--s3) 0 0;
}
#footer .footer-top ul {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: flex-end; padding: 0; margin: 0; list-style: none;
}
#footer .footer-top ul li { margin: 0; }
#footer .footer-top ul li a {
  font-size: 14px; min-height: 32px;
  display: inline-flex; align-items: center;
}
#footer .footer-bottom {
  border-top: 1px solid var(--ab-line);
  padding: var(--s4) 0; font-size: 12.5px;
}
#footer .copyright { color: var(--ab-ink-2); }
#footer .copyright strong span { color: var(--ab-gold-soft); }

@media (max-width: 1024px) {
  #footer .footer-top .row { flex-wrap: wrap; gap: var(--s5); }
  #footer .footer-top .col-lg-4 { flex: 1 1 100%; }
  #footer .footer-top ul { justify-content: flex-start; }
}

/*==============================================================
  手機底部固定導覽(規格照前台那條 bar)
==============================================================*/

.ab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--ab-bg);
  border-top: 1px solid #2B3B58;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(3, 7, 14, .5);
}
.ab-bar__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.ab-bar__grid--4 { grid-template-columns: repeat(4, 1fr); }
.ab-bar__grid--6 { grid-template-columns: repeat(6, 1fr); }
.ab-bar__grid--6 .ab-bar__item { font-size: 12px; letter-spacing: .06em; }
.ab-bar__item {
  display: grid; justify-items: center; align-content: center; gap: 7px;
  min-height: 60px;
  color: var(--ab-ink-bar);
  font-size: 13px; letter-spacing: .12em; text-decoration: none;
}
.ab-bar__item + .ab-bar__item { border-left: 1px solid var(--ab-line-bar); }
.ab-bar__item::before {
  content: ""; display: block; width: 5px; height: 5px;
  background: var(--ab-gold); transform: rotate(45deg);
}
.ab-bar__item:hover,
.ab-bar__item:focus-visible { color: var(--ab-gold-soft); }

/* 底部固定列會蓋住內容,手機要留出等高的空間 */
@media (max-width: 767px) {
  body { padding-bottom: 60px; }
}

/* 回頂端 */
.back-to-top { border-radius: var(--ab-radius); }

/*==============================================================
# 登入彈出視窗
==============================================================*/

body.ab-modal-open { overflow: hidden; }

.ab-modal { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: var(--s5) var(--s4); }
.ab-modal[hidden] { display: none; }

.ab-modal__backdrop { position: absolute; inset: 0;
  background: rgba(4, 8, 16, .78); backdrop-filter: blur(3px); }

.ab-modal__panel { position: relative; width: 100%; max-width: 420px;
  background: var(--ab-bg-2); border: 1px solid var(--ab-line);
  border-radius: 6px; padding: 34px 32px 30px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  max-height: calc(100vh - 48px); overflow-y: auto; }

.ab-modal__x { position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: var(--ab-ink-2);
  font-size: 26px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--ab-radius); }
.ab-modal__x:hover { color: var(--ab-gold); }

.ab-modal__head { margin-bottom: var(--s5); }
.ab-eyebrow { display: block; color: var(--ab-gold); font-size: 11px;
  letter-spacing: .22em; margin-bottom: var(--s1); }
.ab-modal__head h2 { color: var(--ab-ink); font-size: 25px;
  font-weight: 700; margin: 0; }

.ab-form { display: flex; flex-direction: column; gap: var(--s4); }

.ab-field { display: flex; flex-direction: column; gap: var(--s1); margin: 0; }
.ab-field > span { color: var(--ab-ink-2); font-size: 13px; letter-spacing: .04em; }
.ab-field input { width: 100%; background: var(--ab-bg);
  border: 1px solid var(--ab-line); border-radius: var(--ab-radius);
  color: var(--ab-ink); font-size: 16px; padding: 12px 14px;
  min-height: 46px; -webkit-appearance: none; }
.ab-field input::placeholder { color: #6B7A94; }
.ab-field input:focus { outline: 0; border-color: var(--ab-gold);
  box-shadow: 0 0 0 3px rgba(205, 151, 78, .14); }

.ab-code { display: flex; gap: var(--s3); align-items: stretch; }
.ab-code input { flex: 1 1 auto; letter-spacing: .18em; }
.ab-code input::placeholder { letter-spacing: 0; }
.ab-code img { flex: 0 0 auto; width: 108px; height: 46px;
  object-fit: cover; border-radius: var(--ab-radius);
  border: 1px solid var(--ab-line); cursor: pointer; background: #fff; }

.ab-alert { margin: 0; background: rgba(198, 74, 74, .14);
  border: 1px solid rgba(198, 74, 74, .5); color: #F3C4C4;
  border-radius: var(--ab-radius); padding: 10px 14px; font-size: 14px; }
.ab-alert[hidden] { display: none; }

.ab-btn { border: 0; border-radius: var(--ab-radius); cursor: pointer;
  font-size: 16px; font-weight: 700; min-height: 48px; padding: 12px 20px; }
.ab-btn--gold { background: var(--ab-gold); color: var(--ab-on-gold); }
.ab-btn--gold:hover { background: var(--ab-gold-soft); }
.ab-btn:disabled { opacity: .6; cursor: default; }

.ab-modal__links { display: flex; justify-content: space-between; gap: var(--s3); }
.ab-modal__links a { color: var(--ab-ink-2); font-size: 14px;
  min-height: 32px; display: inline-flex; align-items: center; }
.ab-modal__links a:hover { color: var(--ab-gold); }

.ab-divider { display: flex; align-items: center; gap: var(--s3);
  color: var(--ab-ink-2); font-size: 12px; letter-spacing: .1em; }
.ab-divider::before, .ab-divider::after { content: ""; flex: 1;
  height: 1px; background: var(--ab-line); }

.ab-social { display: flex; flex-direction: column; gap: var(--s3); }
.ab-social__btn { display: flex; align-items: center; justify-content: center;
  gap: var(--s3); min-height: 46px; border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius); color: var(--ab-ink); font-size: 15px; }
.ab-social__btn img { width: 20px; height: 20px; object-fit: contain; }
.ab-social__btn:hover { border-color: var(--ab-gold); color: var(--ab-gold); }
.ab-social__btn--line:hover { border-color: #06C755; color: #06C755; }

@media (max-width: 480px) {
  .ab-modal { padding: 0; align-items: flex-end; }
  .ab-modal__panel { max-width: 100%; border-radius: 12px 12px 0 0;
    padding: 28px 20px 24px; max-height: 92vh; }
}

/*==============================================================
  修正:品牌磚是給白底用的,直接放深底會整塊沉下去(天條 41)
==============================================================*/

.casino-btn-grop .casino-btn img {
  height: 96px;
  width: 96px;
  object-fit: contain;
  background: #F7F3EA;          /* 磚的米色區其實是半透明,要自己墊底 */
  border-radius: 14px;
}

/*==============================================================
  桌機把五個分類一次攤開,不要只看得到一個分頁
  (分類列變成跳轉選單,行動版維持原本的分頁切換)
==============================================================*/

@media (min-width: 768px) {
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    padding-top: var(--sec);
  }
  .tab-content > .tab-pane:first-child { padding-top: 0; }
  .tab-content > .tab-pane > section { padding: 0; }
}

/* 區塊標題統一字級(原樣式在 .index-about 底下另外放大到 48px) */
main#main .section-title h2 { font-size: 34px; }
@media (max-width: 1024px) { main#main .section-title h2 { font-size: 27px; } }
@media (max-width: 767px)  { main#main .section-title h2 { font-size: 23px; } }

/*==============================================================
  桌機的卡片牆改用網格,最後一列才不會置中變成參差
==============================================================*/

@media (min-width: 768px) {
  .game-grop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s5);
    justify-content: start;
    padding-bottom: 0;
  }
  .game-grop .game-body {
    width: auto;
    margin: 0;
    padding: var(--s5) var(--s4);
  }
  .g-grop-body .container,
  .featured .container { max-width: var(--wrap); }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .game-grop { grid-template-columns: repeat(3, 1fr); }
}

/*==============================================================
  手機:分類列改成五格一列(原本是左側浮動窄欄,
  區塊改成滿版帶狀之後那個浮動排法已經不成立)
==============================================================*/

@media (max-width: 767px) {
  .GameNav { width: 100%; float: none; padding: 0; }
  .GameNav .nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 100%;
  }
  .GameNav li.nav-item.col { max-width: none; flex: none; padding: 0; }
  .GameNav .color .img { width: 100%; height: 34px; }
  .GameNav picture, .GameNav img { width: 40px; }
  .GameNav .nav-link { font-size: 13px; }
}

/*==============================================================
  頁首是固定定位,main 要留出等高的空間,不然主視覺會被壓在頁首底下
  (手機版原本那條 margin-top 被其他規則蓋掉了,這裡明確補回來)
==============================================================*/

main#main { margin-top: 85px; }
@media (max-width: 767px) { main#main { margin-top: 70px; } }

/*==============================================================
  字級收尾:內文一律 16px 起跳(天條 34)
==============================================================*/

.index-about .leading-loose { font-size: 16px; }
.mq-section .marquee li a { font-size: 14px; }
@media (max-width: 767px) { .mq-section .marquee li a { font-size: 14px; } }
.game-grop .link .game-start { font-size: 15px; }

/*==============================================================
  頁首尺寸對齊前台
  前台實測:桌機 logo 98x40、導覽列高 78;手機 logo 78x32、導覽列高 68。
  這邊原本是 150x70(視覺高約 61px),比前台大了一圈。
==============================================================*/

#header { height: 78px; }
#header .logo,
#header .logo a { width: auto; height: auto; }
#header .logo-img {
  width: 98px;
  height: 40px;
  margin: 0;
  background-size: contain;
  background-position: left center;
}
main#main { margin-top: 78px; }

@media (max-width: 767px) {
  #header { height: 68px; }
  #header .logo-img { width: 78px; height: 32px; margin: 0; }
  main#main { margin-top: 68px; }
}

/*==============================================================
  分類列的圖示原本被固定高度加 overflow:hidden 切掉,改成完整顯示
==============================================================*/

.GameNav .color .img {
  width: auto;
  height: auto;
  overflow: visible;
  border-bottom: 0;
  margin: 0 auto var(--s2);
}
.GameNav picture,
.GameNav img { width: auto; height: 46px; }
.GameNav .nav-link { padding: var(--s4) var(--s2); }

@media (max-width: 767px) {
  .GameNav .color .img { height: auto; }
  .GameNav picture, .GameNav img { height: 36px; }
  .GameNav .nav-link { padding: var(--s3) var(--s1); }
}

/*==============================================================
  頁尾:拿掉那段品牌敘述,只留 logo、連結與版權
==============================================================*/

#footer .footer-top p { display: none; }
#footer .footer-top .col-lg-4 { flex: 0 0 auto; }

/* 頁尾 logo 也照前台的尺寸(108x44) */
#footer .ft_logo img { max-width: 108px; width: 108px; height: auto; }

/*==============================================================
  卡片統一成深底(天條 55:同一頁不要一半深底一半白底)
  原本這些卡片是白底加淺色底圖,和站上其他區塊對不起來。
==============================================================*/

.game-grop .game-body,
.casino .game-body,
.slot .game-body,
.fish .game-body,
.sport .game-body,
.keno .game-body {
  background: var(--ab-bg-3) !important;
  background-image: none !important;
  border: 1px solid var(--ab-line) !important;
}
.game-grop .game-body:hover { border-color: var(--ab-gold) !important; }

.game-grop .link h3 { color: var(--ab-ink); }
.game-grop .link h3 small { color: var(--ab-ink-2); }

/*==============================================================
  欄數配合實際數量,每一列都填滿,不留落單尾巴(天條 55)
  真人 4、電子 7、捕魚 10、體育 2、彩票 2
==============================================================*/

@media (min-width: 768px) {
  .game-grop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    padding-bottom: 0;
  }
  .game-grop .game-body {
    flex: 1 1 240px;
    width: auto;
    margin: 0;
    padding: var(--s5) var(--s4);
  }
  /* 只有兩台的分類,容器限寬,卡片才不會被撐成整片 */
  #sport .game-grop,
  #keno .game-grop { max-width: 664px; }
}

/* 圖片改用固定高度,卡片變寬時高度才不會跟著長,列與列之間才一致 */
@media (min-width: 768px) {
  .game-grop .game-body img { width: auto; height: 116px; object-fit: contain; }
  .game-grop .link { width: 100%; }
}

/* 欄數逐區照實際台數定,讓每一列都填滿(天條 55、36)
   電子 7 台 → 一律 4+3;捕魚 9 台 → 桌機 5+4、平板 3+3+3。
   基準寬度是算過的:剛好排得下 N 個、又擠不進 N+1 個。 */
@media (min-width: 1181px) {
  #slot .game-grop .game-body { flex: 1 1 250px; }   /* 4 欄 */
  #fish .game-grop .game-body { flex: 1 1 200px; }   /* 5 欄 */
}
@media (min-width: 1024px) and (max-width: 1180px) {
  #slot .game-grop .game-body { flex: 1 1 220px; }   /* 4 欄 */
  #fish .game-grop .game-body { flex: 1 1 300px; }   /* 3 欄 */
}
@media (min-width: 768px) and (max-width: 1023px) {
  #slot .game-grop .game-body { flex: 1 1 150px; }   /* 4 欄 */
  #fish .game-grop .game-body { flex: 1 1 220px; }   /* 3 欄 */
}

/*==============================================================
  優惠活動(手風琴清單)
  原本是白底卡片、標題壓在圖上,深底之後讀不到。
==============================================================*/

.faq { background: transparent; }
.faq-list { padding: 0; margin: 0; list-style: none; }
.faq-list li {
  background: var(--ab-bg-3) !important;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  margin: var(--s4) 0 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.faq-list li:first-child { margin-top: 0 !important; }
.faq-list li > a {
  display: block;
  position: relative;
  padding: 0 0 var(--s5) !important;
  color: var(--ab-ink) !important;
  background: transparent !important;
}
.faq-list li img { display: block; width: 100%; height: auto; margin: 0; }
.faq-list li h3 {
  position: static !important;
  color: var(--ab-ink) !important;
  font-size: 18px;
  font-weight: 700;
  margin: var(--s5) var(--s5) 0 !important;
  padding: 0 44px 0 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
.faq-list li > a:hover h3 { color: var(--ab-gold-soft) !important; }

/* 展開／收合的指示,用 CSS 畫,不吃圖示字型 */
.faq-list .icon-show,
.faq-list .icon-close { display: none !important; }
.faq-list li > a::after {
  content: "";
  position: absolute;
  right: var(--s5);
  bottom: 30px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ab-gold);
  border-bottom: 2px solid var(--ab-gold);
  transform: rotate(45deg);
}
.faq-list li > a:not(.collapsed)::after { transform: rotate(-135deg); }

.faq-list .collapse,
.faq-list .collapsing { border-top: 1px solid var(--ab-line); }
.faq-list .collapse p,
.faq-list .collapsing p {
  color: var(--ab-ink-2);
  font-size: 15px;
  line-height: 1.9;
  padding: var(--s5);
  margin: 0;
}
.faq-list .collapse img { max-width: 100%; height: auto; }

/*==============================================================
  其他頁面的殘留淺色區(逐頁量出來的,不是猜的)
==============================================================*/

/* 跑馬燈:內頁的不是 main 的直接子層,要再蓋一次底色 */
section.mq-section { background: var(--ab-bg-2) !important; }

/* seo-live / seo-slot / seo-sport / seo-keno 底部那段介紹原本是 #ebebeb 淺灰底 */
.seo {
  background: var(--ab-bg-2);
  border-top: 1px solid var(--ab-line);
  color: var(--ab-ink-2);
}
.seo h1, .seo h2, .seo h3, .seo h4 { color: var(--ab-ink); }
.seo .title { color: var(--ab-gold-soft); }
.seo p, .seo li, .seo td { color: var(--ab-ink-2); }
.seo a { color: var(--ab-gold); }

.product-item {
  background: var(--ab-bg-3);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  color: var(--ab-ink);
}
.product-item h3 { color: var(--ab-ink); }

/* 註冊頁 */
.register h4, .register .text-center h4 { color: var(--ab-ink) !important; }
.invalid-feedback { color: #F3A0A0; }

/* Google 按鈕原本白字配 #DB4437,比值 4.29 差一點,底色壓深一階 */
.else-btn.google, .else-btn.google div { background: #C0392B !important; }

/* LINE 綠配白字只有 2.26,綠色是品牌色不動,改用深色字(比值 8.1) */
.else-btn.line, .else-btn.line span, .else-btn.line div { color: var(--ab-on-gold) !important; }

/*==============================================================
  手機版重整
  問題:卡片太高(一屏只放得下兩張半)、人物圖裡那塊淺色品牌磚在深底上發白、
       浮動客服壓在卡片上、區塊之間空白過多。
==============================================================*/

@media (max-width: 767px) {

  /* 底部固定列已經有客服,右側浮動鈕是重複的,還會蓋住卡片 */
  .fixmenu { display: none !important; }

  /* 區塊留白收斂 */
  main#main > section.tab-content { padding-top: var(--s5); padding-bottom: var(--s5); }
  main#main > section:last-of-type { padding-bottom: var(--s6); }
  .g-grop-body.g-grop-m { padding-top: 0; }
  .featured.slot, .featured.casino, .featured.fish,
  .featured.sport, .featured.keno { padding: 0; }

  /* 卡片改成緊湊的橫式列 */
  .game-grop { gap: var(--s3); }
  .game-grop .game-body {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    align-items: stretch;
    overflow: hidden;
  }
  /* 用 cover 對齊上緣,順便把圖片右下角那塊淺色品牌磚裁掉 */
  .game-grop .game-body img {
    flex: 0 0 116px;
    width: 116px !important;
    height: 116px;
    object-fit: cover;
    object-position: top center;
    position: static !important;
    bottom: auto !important;
  }
  .game-grop .link {
    width: auto !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: var(--s3) var(--s4);
    margin: 0;
    gap: 2px;
  }
  .game-grop .link h3 { font-size: 16px; line-height: 1.35; margin: 0; }
  .game-grop .link h3 small { display: block; font-size: 12px; margin-top: 2px; }
  .game-grop .link .game-start {
    width: auto !important;
    min-width: 108px;
    min-height: 40px;
    margin: var(--s2) 0 0 !important;
    padding: 0 var(--s4);
    font-size: 14px;
  }

  /* 跑馬燈兩端做淡出,被裁掉的字才不會看起來像壞掉 */
  .mq-section .top-bar {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}

/* 真人分類的手機卡片改用方形品牌磚(原本那張人物照右下角有塊淺色磚,在深底上會發白)。
   磚的米色區是半透明的,要自己墊底 —— 和桌機那四塊同一個處理。 */


/* 手機的區塊標題:眉標 + 標題,節奏跟前台一致 */
@media (max-width: 767px) {
  .tab-content .section-title { padding-bottom: var(--s4); }
  .tab-content .section-title h2 { font-size: 23px; margin-bottom: 0; }
  .tab-content .tab-pane > .container:first-child { padding-bottom: var(--s2); }
  .ab-eyebrow { font-size: 10.5px; letter-spacing: .2em; }
}

/* 手機:分類列與內容併成同一個帶狀區塊,中間不要斷開;底部空白收掉 */
@media (max-width: 767px) {
  main#main > section#lobby {
    background: var(--ab-bg-2);
    padding-top: var(--s5);
    padding-bottom: 0;
  }
  main#main > section.tab-content { padding-top: var(--s4); }
  main#main > section:last-of-type { padding-bottom: var(--s4); }
  .GameNav .nav { background: transparent; border: 0; }
  .GameNav .nav-link { padding: var(--s2) var(--s1); }
}

/* main 原本在手機另外留了 70px 底部空間,和 body 那 60px 疊起來變成一大塊空白 */
@media (max-width: 767px) { main#main { padding-bottom: 0; } }

/*==============================================================
# 設計精修
#
# 方向:金色是重點色不是主色 —— 大面積金塊拿掉,只留髮絲線與少數主要動作。
# 圓角收到 2px、卡片改深色漸層、區塊標題改成「標題 + 英文小標 + 一條橫線」,
# 橫線起點放一個小金菱形,和底部固定導覽同一個記號,整站靠這個記號串起來。
==============================================================*/

:root {
  --ab-radius: 2px;
  --ab-gold-line: rgba(205, 151, 78, .45);
  --ab-card-top: #131E33;
  --ab-card-bottom: #0E1727;
  --sec: 96px;
}
@media (max-width: 1024px) { :root { --sec: 64px; } }
@media (max-width: 767px)  { :root { --sec: 48px; } }

/*---------- 區塊標題 ----------*/

main#main .section-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
  padding-bottom: 0;
  margin: 0 0 34px;
}
main#main .section-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 1px;
  background: linear-gradient(90deg,
              var(--ab-gold-line) 0, var(--ab-gold-line) 72px,
              var(--ab-line) 72px, var(--ab-line) 100%);
}
main#main .section-title h2 {
  order: 1;
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ab-ink);
}
main#main .section-title p { order: 3; margin: 0 0 0 auto; font-size: 13px; }

.ab-eyebrow {
  order: 2;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--ab-gold);
}
.ab-eyebrow::before {
  content: "";
  width: 4px; height: 4px;
  margin-right: 9px;
  background: var(--ab-gold);
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  main#main .section-title { margin-bottom: 28px; }
  main#main .section-title h2 { font-size: 21px; }
  .ab-eyebrow { font-size: 9.5px; letter-spacing: .26em; }
}

/*---------- 卡片 ----------*/

.game-grop .game-body,
.casino .game-body, .slot .game-body, .fish .game-body,
.sport .game-body, .keno .game-body {
  background: linear-gradient(180deg, var(--ab-card-top) 0%, var(--ab-card-bottom) 100%) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
  transition: border-color .18s ease, transform .18s ease;
}
.game-grop .game-body:hover {
  border-color: var(--ab-gold-line) !important;
  transform: translateY(-2px);
}
.game-grop .link h3 { font-weight: 600; letter-spacing: .02em; }
.game-grop .link h3 small { letter-spacing: .12em; font-weight: 400; }

/* 次要動作:金色髮絲線,不是整塊金 */
.game-grop .link .game-start {
  background: transparent;
  border: 1px solid var(--ab-gold-line);
  color: var(--ab-gold-soft);
  font-weight: 500;
  letter-spacing: .1em;
}
.game-grop .link .game-start:hover {
  background: rgba(205, 151, 78, .10);
  border-color: var(--ab-gold);
  color: var(--ab-gold-soft);
}

/* 四塊品牌入口同一套語彙 */
.casino-btn-grop .casino-btn {
  background: linear-gradient(180deg, var(--ab-card-top) 0%, var(--ab-card-bottom) 100%);
  border-radius: var(--ab-radius);
  transition: border-color .18s ease, transform .18s ease;
}
.casino-btn-grop .casino-btn:hover { transform: translateY(-2px); }
.casino-btn-grop .casino-btn div {
  border-color: var(--ab-gold-line);
  color: var(--ab-gold-soft);
  letter-spacing: .2em;
}

/*---------- 分類切換:拿掉框,用一條線 ----------*/

.GameNav .nav {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ab-line);
  border-radius: 0;
}
.GameNav .nav-link,
.nav-pills .nav-link {
  opacity: .5;
  border-bottom: 2px solid transparent;
  transition: opacity .18s ease, border-color .18s ease;
  color: var(--ab-ink);
}
.GameNav .nav-link:hover { opacity: .85; }
.GameNav .color.active {
  opacity: 1;
  color: var(--ab-gold-soft);
  border-bottom-color: var(--ab-gold);
}
.GameNav .color .img { border-bottom: 0; }

/*---------- 主要動作只留一個 ----------*/

.btn-login { border-color: var(--ab-gold-line); color: var(--ab-gold-soft) !important; }
.btn-login:hover { background: rgba(205, 151, 78, .10); border-color: var(--ab-gold); }

/*---------- 邊界 ----------*/

main#main > section.testimonials { border-bottom: 1px solid var(--ab-line); }
#header { border-bottom-color: var(--ab-line); }
.faq-list li { border-radius: var(--ab-radius); }
.ab-modal__panel { border-radius: var(--ab-radius); }
.ab-btn, .ab-field input, .ab-social__btn, .ab-code img { border-radius: var(--ab-radius); }

/* 品牌磚:米色壓暖一階、加一圈金色髮絲線,不要像貼紙 */
.casino-btn-grop .casino-btn img {
  background: #EFE6D3;
  border: 1px solid rgba(205, 151, 78, .38);
  border-radius: 3px;
  padding: 3px;
}

/*==============================================================
# 正式版型:目錄型
#
# 2026-08-25 Owner 從四個方案裡選的。不用卡片,一行一列:
# 左邊小縮圖、中間廠商名 + 英文、右邊「進入遊戲 →」,列與列之間一條髮絲線。
# 密度最高、最安靜,金色只出現在 hover 與分隔線。
==============================================================*/
/*--------------------------------------------------------------
  目錄型版面(正式採用)
--------------------------------------------------------------*/

.game-grop {
  display: block !important;
  border-top: 1px solid var(--ab-line);
}
.game-grop .game-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--s5);
  width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: var(--s4) var(--s2) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ab-line) !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: background .16s ease;
}
.game-grop .game-body:hover {
  background: rgba(205, 151, 78, .06) !important;
  border-color: var(--ab-gold-line) !important;
  transform: none !important;
}
.game-grop .game-body img {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
  position: static !important;
}
.game-grop .link {
  width: auto !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--s4);
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
}
.game-grop .link h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  letter-spacing: .02em;
}
.game-grop .link h3 small {
  display: inline;
  margin-left: var(--s3);
  font-size: 12px;
  color: var(--ab-ink-2);
  letter-spacing: .14em;
}
/* 右側只留一個文字動作,不做按鈕 */
.game-grop .link .game-start {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ab-ink-2) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.game-grop .link .game-start::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.game-grop .game-body:hover .game-start { color: var(--ab-gold-soft) !important; }

/* 目錄型的分類切換:桌機走左側直排 */
@media (min-width: 992px) {
  section#lobby .container { max-width: var(--wrap); }
  .GameNav .nav {
    display: flex;
    justify-content: flex-start;
    gap: var(--s7);
    border-bottom: 1px solid var(--ab-line);
  }
  .GameNav li.nav-item.col { flex: 0 0 auto; }
  .GameNav .color .img { display: none; }
  .GameNav .nav-link { font-size: 15px; letter-spacing: .12em; padding: 0 0 var(--s4); }
}

.casino-btn-grop .casino-btn { width: 132px; padding: var(--s4) var(--s3); }
.casino-btn-grop .casino-btn img { height: 62px; }


/*==============================================================
# 登入彈出視窗(結構取自 RG富遊的四件套,色系用我們原本的)
#   金色標題列 + 大觸控關閉鈕 + 整寬圓角 CTA + 次要動作放底下
==============================================================*/
/* 7 ── 登入彈窗:漸層標題列 + 大觸控關閉 + 全圓 CTA */
.ab-modal__panel { border-radius: 10px; padding: 0; }
.ab-modal__head {
  background: var(--ab-gold);
  color: var(--ab-on-gold);
  margin: 0;
  padding: 14px 30px;
  text-align: center;
}
.ab-modal__head h2 { color: var(--ab-on-gold); font-size: 20px; }
.ab-modal__head .ab-eyebrow { display: none; }
.ab-modal__x {
  width: 50px; height: 50px;
  top: 0; right: 0;
  color: rgba(20, 16, 10, .6);
}
.ab-form { padding: 20px; }
.ab-field input { border-radius: 8px; background: #0F2035; }
.ab-field > span { color: var(--d-62); }


/* 真人分類在桌機原本是四塊磚 + START,和其他分類的名單對不起來(天條 55)。
   改成同一套名單,四塊磚收起來,介紹段留著。 */
@media (min-width: 768px) {
  .featured.casino.g-grop-m { display: block !important; }
  .index-about .casino-btn-grop { display: none; }
  .index-about .info-body { padding-bottom: var(--s5); }
}

/* 介紹段的人物照原本比文字高很多,右邊會空一大塊 */
@media (min-width: 768px) {
  .index-about .img img { max-height: 320px; width: auto; margin-left: auto; margin-right: auto; display: block; }
}

/* 手機的登入視窗是從底部升起的面板,上面兩角要圓、下面貼齊螢幕 */
@media (max-width: 480px) {
  .ab-modal__panel { border-radius: 12px 12px 0 0; }
  .ab-modal__head { border-radius: 12px 12px 0 0; }
}

/* 手機的登入面板原本佔掉八成螢幕,收一輪:
   間距縮一階、標題列壓低、兩顆社群鈕改並排(省掉一整列) */
@media (max-width: 480px) {
  .ab-modal__panel { max-height: 88vh; }
  .ab-modal__head { padding: 11px 30px; }
  .ab-modal__head h2 { font-size: 18px; }
  .ab-modal__x { width: 44px; height: 44px; font-size: 24px; }

  .ab-form { gap: var(--s3); padding: 16px 18px 18px; }
  .ab-field { gap: 3px; }
  .ab-field > span { font-size: 12.5px; }
  .ab-field input { min-height: 44px; padding: 10px 13px; }
  .ab-code img { height: 44px; width: 100px; }

  .ab-btn { min-height: 46px; font-size: 15.5px; padding: 10px 18px; }
  .ab-modal__links a { font-size: 13.5px; min-height: 28px; }

  .ab-divider { font-size: 11px; letter-spacing: .08em; }
  .ab-social { flex-direction: row; gap: 10px; }
  .ab-social__btn { flex: 1 1 0; min-height: 44px; font-size: 14px; gap: 8px; }
}

/* 手機的登入視窗置中,佔螢幕 7.5 成,不貼底也不滿版(2026-08-26 Owner 指定) */
@media (max-width: 480px) {
  .ab-modal { padding: 0; align-items: center; justify-content: center; }
  .ab-modal__panel {
    width: 75vw;
    max-width: 400px;
    max-height: 75vh;
    border-radius: 10px;
    padding: 0;
  }
  .ab-modal__head { border-radius: 10px 10px 0 0; }
  .ab-form { padding: 15px 16px 17px; }
  .ab-social__btn { font-size: 13px; gap: 6px; }
  .ab-social__btn img { width: 17px; height: 17px; }
}

/*==============================================================
# 說明頁共用版型(關於我們 / 儲值教學 / 常見問題 / 免責聲明 / 責任條款 / 遊戲幫助)
#
# 這六頁(about / about-deposit / about-question / about-state /
# about-rule / about-help)共用同一套 .main/.content/.col-L/.col-R 結構,
# 但 style.css 完全沒有對應規則 —— 等於整段裸奔在深底上,只剩項目符號清單。
# 這裡從零建一套,不是覆蓋。
==============================================================*/

.main {
  background: transparent;
  padding-top: var(--sec);
  padding-bottom: calc(var(--sec) + var(--s5));
}
.main .container { max-width: var(--wrap); padding: 0 var(--gutter); }

.main .content {
  display: flex;
  align-items: flex-start;
  gap: var(--s7);
}
.main .content .title {
  display: none;   /* 跟側欄「關於我們」重複,側欄本身就是標題 */
}

.main .col-L {
  flex: 0 0 220px;
  background: var(--ab-bg-3);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  overflow: hidden;
  position: sticky;
  top: calc(78px + var(--s5));
}
.main .col-L .tab-left {
  list-style: none;
  margin: 0;
  padding: var(--s2) 0;
}
.main .col-L .tab-left li { margin: 0; }
.main .col-L .tab-left a {
  display: block;
  padding: var(--s3) var(--s4);
  color: var(--ab-ink-2);
  font-size: 15px;
  border-left: 2px solid transparent;
  min-height: 44px;
  line-height: 1.7;
}
.main .col-L .tab-left a:hover { color: var(--ab-ink); background: rgba(205, 151, 78, .05); }
.main .col-L .tab-left li.active a {
  color: var(--ab-gold-soft);
  border-left-color: var(--ab-gold);
  background: rgba(205, 151, 78, .06);
}

.main .col-R { flex: 1 1 auto; min-width: 0; }
.main .col-R .tab-pane { color: var(--ab-ink-2); font-size: 15px; line-height: 1.9; }
.main .col-R .tab-pane .w2 {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ab-ink);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ab-line);
}
.main .col-R .tab-pane .w3 {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ab-gold-soft);
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}
.main .col-R .tab-pane p { margin: 0 0 var(--s3); }
.main .col-R .tab-pane ul,
.main .col-R .tab-pane ol { padding-left: 1.3em; margin: var(--s2) 0 var(--s3); }
.main .col-R .tab-pane li { margin: 4px 0; }
.main .col-R .tab-pane a { color: var(--ab-gold); }
.main .col-R .tab-pane table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s3) 0;
  font-size: 14px;
}
.main .col-R .tab-pane table th,
.main .col-R .tab-pane table td {
  border: 1px solid var(--ab-line);
  padding: var(--s2) var(--s3);
  text-align: left;
}
.main .col-R .tab-pane table th { background: var(--ab-bg-3); color: var(--ab-ink); }
.main .col-R .tab-pane img { max-width: 100%; height: auto; border-radius: var(--ab-radius); }

@media (max-width: 1024px) {
  .main .content { gap: var(--s5); }
  .main .col-L { flex-basis: 180px; }
}

@media (max-width: 767px) {
  .main { padding-top: var(--s5); }
  .main .content { flex-direction: column; gap: var(--s4); }
  .main .col-L {
    flex: none;               /* 桌機那條 flex:0 0 220px 在直排容器裡會變成強制高度,手機要解掉 */
    position: static;
    width: 100%;
  }
  /* 不做左右滑動,改成自動換行的一排標籤,寬度不夠就換下一行 */
  .main .col-L .tab-left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s3);
  }
  .main .col-L .tab-left li { flex: 0 0 auto; }
  .main .col-L .tab-left a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid var(--ab-line);
    border-left: 1px solid var(--ab-line);
    border-radius: 999px;
    padding: var(--s2) var(--s4);
    min-height: 40px;
  }
  .main .col-L .tab-left a:hover { border-color: var(--ab-gold-line); background: rgba(205, 151, 78, .05); }
  .main .col-L .tab-left li.active a {
    border-color: var(--ab-gold);
    background: rgba(205, 151, 78, .10);
  }
  .main .col-R .tab-pane .w2 { font-size: 19px; }
}

/*==============================================================
# 說明頁沒有 <main id="main"> 包住(about.php 那六頁是
# header → marquee.php → <div class="main"> 三段直接接在 body 下),
# 前面補頁首高度的規則只認 main#main,這裡完全吃不到,
# 跑馬燈就疊在 position:fixed 的頁首正下方、被整條蓋住看不到。
==============================================================*/

header#header + .mq-section { margin-top: 78px; }
@media (max-width: 767px) { header#header + .mq-section { margin-top: 68px; } }

/* 說明頁現在有 <main id="main"> 包層(見 includes/about-open.php),但跑馬燈
   還留在 main 外面(緊跟在 header 後面),頁首偏移已經靠上面那條規則墊掉了。
   全站給 main#main 加的 margin-top(第 599 行那條)不知道這回事,會在
   已經墊過的間距上再加一次,兩層跑馬燈之間就會多一塊空白。
   用「.mq-section 之後的 main#main」把這個特例蓋掉 —— 這裡不能用 + (緊鄰
   下一個元素),marquee.php 在 .mq-section 後面還輸出一個公告彈窗
   <div id="notice">,夾在中間讓 + 配不到,要用 ~(之後的任一個手足)。 */
.mq-section ~ main#main { margin-top: 0; }

/* 註冊視窗欄位比登入多,面板要寬一點、可捲動 */
.ab-modal__panel--wide { max-width: 460px; }
@media (max-width: 480px) {
  .ab-modal__panel--wide { max-width: 90vw; }
}

/*==============================================================
# 會員中心(2026-08-25 重做)
#
# 原本是米白圓角卡片(#fffef6 / #e8e3d3)+ Bootstrap 預設按鈕
# (橙 warning、藍 primary、紅 outline-danger 三種顏色混用,毫無章法)。
# 這裡整組換成站上的深底金字系統,按鈕收斂成兩種:
#   主要動作 = 金底深字(儲值、確認變更、確認提交)
#   次要/取消 = outline
# 這組 class(.member / .member-page / .memberMenu / .member-modal)
# 是共用元件,account/deposit2/transfer/withdrawal/history 等
# 13 個頁面共用同一份 member.css,改這裡全部一起生效。
==============================================================*/

section.member {
  background: transparent !important;
  padding: var(--sec) 0 !important;
  color: var(--ab-ink-2) !important;
}

/* 「目前在這頁」的標記規則搬到後面的 .page-account / .page-withdrawal
   區塊(2026-09-02),用 body class 精準對應各頁,這裡不再放不分頁的
   #account 全域規則 —— 之前這條沒加範圍,account.php 自己拿掉頁內
   inline style 後,反而變成「不管在哪一頁,#account 都亮金色」。 */
.member a { color: var(--ab-ink-2) !important; }
.member a:hover { color: var(--ab-gold) !important; }
.member h1, .member h2, .member h3, .member h4, .member h5, .member h6 {
  font-family: inherit !important;
  color: var(--ab-ink) !important;
}

/*---------- 側欄 ----------*/

.member .member-menu_web {
  background: var(--ab-bg-3) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
}
.member .memberMenu .user-lv img { max-width: 84px !important; }
.memberMenu p.user-text {
  background: var(--ab-bg-2) !important;
  color: var(--ab-ink) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
}
.member .memberMenu span.user-text { color: var(--ab-ink-2) !important; }

.member .memberMenu .icon-link li {
  background: var(--ab-bg-2) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
  color: var(--ab-ink-2) !important;
  transition: border-color .15s ease, color .15s ease !important;
}
.member .memberMenu .icon-link li:hover {
  border-color: var(--ab-gold-line) !important;
  color: var(--ab-gold-soft) !important;
}
.menu-link .info { color: var(--ab-ink-2) !important; }

.member .memberMenu .menu-link li,
.member .memberMenu .menu-link li a {
  color: var(--ab-ink-2) !important;
  border-radius: var(--ab-radius) !important;
}
.member .memberMenu .menu-link li:hover,
.member .memberMenu .menu-link li a:hover {
  color: var(--ab-gold-soft) !important;
  background: rgba(205, 151, 78, .07) !important;
}
.border-b-1 { border-bottom-color: var(--ab-line) !important; }

@media (max-width: 767px) {
  .member .memberMenu .icon-link { border: 1px solid var(--ab-line) !important; box-shadow: none !important; }
  .member .memberMenu .menu-link li { border-bottom-color: var(--ab-line) !important; }
}

/*---------- 主卡片 ----------*/

.member-page {
  background: var(--ab-bg-3) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
}
.member-page .member-top { border-bottom-color: var(--ab-line) !important; color: var(--ab-ink) !important; font-weight: 700 !important; }

/* 帳戶資訊/銀行資訊/實名認證/USDT/超商 五個區塊(2026-09-01 加框):
   原本只有 border-bottom 一條分隔線,線的顏色(--ab-line)在深底上幾乎看不出來,
   五個區塊疊在一起變成一整片分不清界線。改成每區塊自己一張卡:
   底色退到 --ab-bg-2(page 是 --ab-bg-3、input 是 --ab-bg,三層深淺分層),
   框線也換成看得見的 --ab-gold-line,不再靠 --ab-line 硬撐。 */
.member-page .user-info .box {
  border: 1px solid var(--ab-gold-line) !important;
  border-radius: var(--ab-radius) !important;
  background: var(--ab-bg-2) !important;
  padding: var(--s4) var(--s4) var(--s3) !important;
  margin-bottom: var(--s4) !important;
}
.member-page .user-info h4 {
  border-left-color: var(--ab-gold) !important;
  color: var(--ab-ink) !important;
  font-size: 24px !important;
  margin: 0 0 var(--s3) !important;
}
.member-page label { color: var(--ab-ink-2) !important; font-size: 16px !important; }
.member-page .content span { color: var(--ab-ink) !important; font-size: 16px !important; }
.member-page .custom-file { border-bottom-color: var(--ab-line) !important; color: var(--ab-ink-2) !important; }
.member-page ul.note { color: var(--ab-ink-2) !important; }
.member-page .image-upload-wrap .custom-file label {
  background: var(--ab-gold) !important;
  color: var(--ab-on-gold) !important;
}

/* USDT / 超商區塊的欄位標籤 */
.member-page .member-index .title h4 { color: var(--ab-ink) !important; }
.member-page .member-index .label label { color: var(--ab-ink-2) !important; }

/*---------- 按鈕統一:金底主要 / outline 次要 ----------*/

.member .btn,
.member-modal .btn {
  border-radius: var(--ab-radius) !important;
  min-height: 40px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}
.member .btn-warning,
.member .btn-primary,
.member .accountBTN {
  background: var(--ab-gold) !important;
  border-color: var(--ab-gold) !important;
  color: var(--ab-on-gold) !important;
}
.member .btn-warning:hover,
.member .btn-primary:hover,
.member .accountBTN:hover {
  background: var(--ab-gold-soft) !important;
  border-color: var(--ab-gold-soft) !important;
  color: var(--ab-on-gold) !important;
}
.member .btn-outline-danger,
.member-modal .btn-outline-danger {
  background: transparent !important;
  border-color: var(--ab-line) !important;
  color: var(--ab-ink-2) !important;
}
.member .btn-outline-danger:hover,
.member-modal .btn-outline-danger:hover {
  border-color: #C6493A !important;
  color: #F0B6B6 !important;
  background: transparent !important;
}

/*---------- 更改密碼彈窗:跟站上其他彈窗同一套語彙 ----------*/

.member-modal .modal-content {
  background: var(--ab-bg-2) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius) !important;
}
.member-modal .modal-header {
  background: var(--ab-gold) !important;
  color: var(--ab-on-gold) !important;
  border-radius: var(--ab-radius) var(--ab-radius) 0 0 !important;
}
.member-modal .modal-header .close { color: rgba(20, 16, 10, .6) !important; }
.member-modal h4 { color: var(--ab-on-gold) !important; }
.member-modal label { color: var(--ab-ink-2) !important; }
.member-modal .form-control {
  color: var(--ab-ink) !important;
  border-bottom-color: var(--ab-line) !important;
  background: transparent !important;
}

/*==============================================================
# 會員頁「目前在這頁」標記(2026-08-25)
#
# member_link.php 每個項目都有固定 id(#account、#menu_depost、
# #menu_transfer...),各頁自己的 <style> 把「目前在這頁」的那個
# id 塗成米色/灰色當作指示。深色主題全部要換,而且不只 account、
# deposit2 兩頁有這段,至少 13 個頁面都是同一招 —— 用屬性選擇器
# 一次接住,不用每頁各寫一條。
==============================================================*/

/* 2026-09-02 修正:上面「列出各頁 id」的作法忽略了 member_link.php 是
   13 個頁面共用的同一份檔案 —— #account、#menu_depost 這些 id 每一頁
   都會印出來,不是只有「本來要標記的那一頁」才有。結果變成帳戶頁的側欄
   把「帳戶管理、儲值、轉點」同時點成金色,看起來像三個都被選取,
   而不是「你正在看帳戶頁」的單一指示,配色雜訊變重。
   改成用 <body class="page-xxx"> 各自對應,一次只點亮一個。
   目前只有 account.php 加了 page-account;其餘 12 頁還沒加對應 class,
   在補上之前這些頁面暫時不顯示「目前在這頁」標記(比全部一起誤點亮安全)。 */
.page-account .member #account {
  background: rgba(205, 151, 78, .10) !important;
  border-left: 2px solid var(--ab-gold) !important;
  box-shadow: none !important;
}
.page-account .member #account a, .page-account .member #account div {
  color: var(--ab-gold-soft) !important;
}
.page-withdrawal .member #menu_withdraw {
  background: rgba(205, 151, 78, .10) !important;
  border-left: 2px solid var(--ab-gold) !important;
  box-shadow: none !important;
}
.page-withdrawal .member #menu_withdraw a, .page-withdrawal .member #menu_withdraw div {
  color: var(--ab-gold-soft) !important;
}

/* .else-btn(綁定 Google/Line)在登入/註冊彈窗裡維持品牌紅/綠沒問題,
   但搬到帳戶管理頁面當「綁定狀態」按鈕時,大面積飽和紅/綠跟整頁金/深
   的節制配色完全對不上,看起來像沒套用新版型。改成跟頁面其他按鈕
   同一套語彙:深底 + 細邊框,圖示保留原本的品牌色小圖不動。 */
.member .else-btn.google,
.member .else-btn.google div,
.member .else-btn.line {
  background: var(--ab-bg-2) !important;
  border: 1px solid var(--ab-line) !important;
}
.member .else-btn.google:hover,
.member .else-btn.line:hover {
  border-color: var(--ab-gold-line) !important;
}
.member .else-btn, .member .else-btn * { color: var(--ab-ink) !important; }
/* 全域 .else-btn.line span/div 選擇器比上面這條更精確(0,2,1 vs 0,2,0),
   同樣掛 !important 時它會贏,留下深字疊深底看不見 —— 這裡用同等精確度補回來。 */
.member .else-btn.line, .member .else-btn.line span, .member .else-btn.line div { color: var(--ab-ink) !important; }

/* 紅色警語:純紅 #ff0000 對深底幾乎沒有對比(兩者亮度都低),
   加亮成淺紅,語意不變。account.php 裡是寫死的 style="color:red"。 */
.member [style*="color:red" i] { color: #F3A0A0 !important; }

/*==============================================================
# 儲值頁(deposit2.php)有自己一套「輕奢風格」token 系統
# (--pd-*),原本設計是配淺色底(米白 .member-page)。
# 深底主題上線後這組 token 要跟著換,不然文字會用深色字疊深底。
==============================================================*/

.prestige-deposit-scope {
  background: var(--ab-bg-2) !important;
  border-radius: var(--ab-radius) !important;
  --pd-text-dark: var(--ab-ink) !important;
  --pd-text-muted: var(--ab-ink-2) !important;
  --pd-border: var(--ab-line) !important;
  --pd-bg-soft: var(--ab-bg-3) !important;
  --pd-gold-main: var(--ab-gold) !important;
  --pd-gold-light: var(--ab-gold-soft) !important;
}
.prestige-deposit-scope .submit-btn { color: var(--ab-on-gold) !important; }


/*==============================================================
# 遊戲大廳:照大老爺(gm1688)的 app 版式整個重做(2026-08-25,Owner 指定)
#
# 上一版(RG 參考)整段砍掉重寫。借大老爺的結構,不借它的米黃色:
#   - 手機頁首右側一顆「登入/註冊」快速鈕(對應它右上那顆)
#   - 左側分類膠囊直欄,第一格「熱門」,目前分類整顆金底反白
#   - 右側大圖磚牆:圖佔滿磚面上半、名稱置中在下,整塊可點、沒有按鈕字
#   - 底部固定列中央(首頁)做成凸起的圓鈕
# 色系維持深藍金。卡片圓角 --ab-radius-lg(14px)做 app 感,按鈕維持原 token。
#
# 標記:index.php 的 .ab-lobby / .ab-rail / .ab-panes;磚沿用 .game-grop
# 舊標記,所以磚的規則都掛 .ab-lobby 前綴拉優先度。
==============================================================*/

:root { --ab-radius-lg: 14px; }

/*---------- 手機頁首快速鈕 ----------*/

.ab-hdr-cta {
  margin-left: auto;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--ab-gold-soft), var(--ab-gold));
  border-radius: 999px;
  color: var(--ab-on-gold) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/*---------- 公告列:膠囊卡片 + 「公告」小標 ----------*/

.mq-section .top-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--ab-bg-2);
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  padding: 6px var(--s4);
  -webkit-mask-image: none;
  mask-image: none;
}
.mq-section .top-bar::before {
  content: "公告";
  flex: none;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--ab-gold-soft);
  border: 1px solid var(--ab-gold-line);
  border-radius: 999px;
  padding: 1px 10px;
}
.mq-section .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/*---------- 佈局骨架 ----------*/

main#main > section#lobby {
  background: var(--ab-bg);
  padding: var(--s5) var(--gutter) 0;
  /* 主題給 section 掛 overflow:hidden,會接管 sticky 的參考容器害左欄亂跑 */
  overflow: visible;
}
.ab-lobby {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  max-width: var(--wrap);
  margin: 0 auto;
}

/*---------- 左側分類欄:膠囊,目前分類整顆金底 ----------*/

.ab-rail { flex: 0 0 96px; position: sticky; top: 78px; }
.ab-rail .nav {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ab-rail .nav-item { flex: none; max-width: none; margin: 0; padding: 0; }
.ab-rail .nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 52px;
  padding: 0 10px;
  background: var(--ab-bg-2);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
  color: var(--ab-ink-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  opacity: 1;
  /* 只過渡邊框:顏色/底色瞬切,headless 截圖才不會凍在過渡半路 */
  transition: border-color .16s ease;
}
.ab-rail .color .img {
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.ab-rail img { width: 26px; height: 22px; object-fit: contain; }
.ab-rail .ab-rail__emoji { font-size: 19px; line-height: 1; }
.ab-rail .nav-link:hover { opacity: 1; border-color: var(--ab-gold-line); color: var(--ab-ink); }
.ab-rail .nav-link.active,
.ab-rail .color.active {
  opacity: 1;
  background: linear-gradient(180deg, var(--ab-gold-soft), var(--ab-gold));
  border-color: var(--ab-gold);
  border-bottom-color: var(--ab-gold);
  color: var(--ab-on-gold);
  font-weight: 700;
}

/*---------- 分頁:一次一類,由左欄切換 ----------*/

.ab-panes { flex: 1 1 auto; min-width: 0; }
.ab-panes > .tab-pane { display: none !important; opacity: 1 !important; padding: 0 !important; }
.ab-panes > .tab-pane.active { display: block !important; }

/* 內層容器與標題歸零:分類名稱由左欄表達 */
.ab-panes .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.ab-panes .featured { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.ab-panes .section-title { display: none !important; }
/* 桌機的品牌介紹段收起來,五類一律磚牆(本站掛 noindex,敘述文字沒有 SEO 用途) */
.ab-panes .index-about { display: none !important; }
.ab-panes .g-grop-m { display: block !important; }

/*---------- 大圖磚牆 ----------*/

/* 用 grid 不用 flex:flex 的 grow 會把落單的尾巴撐成巨磚
   (電子 7 台、體育/彩票 2 台在寬螢幕都會中獎),
   grid 的格子一律等大,空的就留空,比例才會全站一致。 */
.ab-lobby .game-grop {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.ab-lobby .game-grop .game-body {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--ab-card-top) 0%, var(--ab-bg-2) 100%) !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: var(--ab-radius-lg) !important;
  transform: none !important;
  transition: border-color .16s ease;
}
.ab-lobby .game-grop .game-body:hover {
  border-color: var(--ab-gold-line) !important;
  transform: none !important;
  background: linear-gradient(180deg, var(--ab-card-top) 0%, var(--ab-bg-2) 100%) !important;
}
/* 滿版磚(2026-08-25 定案):圖鋪滿整張磚,名稱壓在下緣黑紗上。
   四張真人照片右下角的品牌 logo 已從圖檔本身去掉,
   不再需要放大取景硬裁,cover 靠上取景即可。 */
/* 磚改成略扁的比例(不是直式):每張美術圖下緣都自帶廠商英文商標
   (GE GAMING / ZEBRA / AMEBA / SimplePlay...),直式磚會把商標留在畫面裡,
   剛好和我們的名稱黑紗疊成兩層字。扁磚讓 cover 從下方裁掉那條商標,
   左右完全不裁,角色不會被切。真人照片同一個比例 = 頭到胸的半身取景。 */
.ab-lobby .game-grop .game-body {
  aspect-ratio: 1 / 0.82;
  justify-content: flex-end !important;
}
.ab-lobby .game-grop .game-body img {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
}
/* 名稱壓在下緣漸層黑紗上。.link 不能改 absolute ——
   .game-start(整磚連結)的 absolute 錨在最近的 positioned 祖先,
   .link 一變 positioned 可點範圍就縮成底部那條紗。
   正解:.game-body 維持 flex column,.link 用 margin-top:auto 沉底。 */
.ab-lobby .game-grop .link {
  position: relative !important;
  z-index: 1;
  display: block !important;
  width: auto !important;
  flex: none !important;
  margin: auto 0 0 !important;
  padding: 30px 8px 12px !important;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(7, 13, 24, 0) 0%, rgba(7, 13, 24, .82) 55%, rgba(7, 13, 24, .94) 100%) !important;
}
.ab-lobby .game-grop .link h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  line-height: 1.35 !important;
  letter-spacing: .04em !important;
  margin: 0 !important;
}
.ab-lobby .game-grop .link h3 br { display: none; }
/* 英文小字全部拿掉(Owner 指定) */
.ab-lobby .game-grop .link h3 small { display: none !important; }
/* 整塊磚就是連結:磚上不放按鈕字(照大老爺) */
.ab-lobby .game-grop .link .game-start {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}
.ab-lobby .game-grop .link .game-start::after { content: none !important; }

/* 原始碼標 d-none 的備用卡(RG真人),別被 flex 強制翻出來 */
.ab-lobby .game-grop .game-body.d-none { display: none !important; }

/* 舊規則給體育/彩票的容器限寬帶 id 優先度,解掉 */
.ab-lobby #sport .game-grop,
.ab-lobby #keno .game-grop { max-width: none !important; }


/*---------- 平板與桌機 ----------*/

@media (min-width: 768px) {
  main#main > section#lobby { padding-top: var(--s6); }
  .ab-lobby { gap: var(--s5); }
  .ab-rail { flex: 0 0 168px; top: 96px; }
  .ab-rail .nav-link { min-height: 56px; padding: 0 var(--s4); font-size: 15px; gap: 12px; }
  .ab-rail .ab-rail__emoji { font-size: 21px; }
  .ab-lobby .game-grop { gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
}

/* 寬螢幕欄數:各分類照台數配,不留落單尾巴(天條 55) */
@media (min-width: 1181px) {
  .ab-lobby .game-grop { grid-template-columns: repeat(4, 1fr); }
  .ab-lobby #hot .game-grop  { grid-template-columns: repeat(3, 1fr); }  /* 6 台 = 3+3 */
  .ab-lobby #fish .game-grop { grid-template-columns: repeat(5, 1fr); }  /* 10 台 = 5+5 */
  /* 體育/彩票各 2 台:格子維持一般大小,靠左排,不撐滿整列 */
  .ab-lobby #sport .game-grop,
  .ab-lobby #keno .game-grop { grid-template-columns: repeat(4, 1fr); }
}


/*==============================================================
# 登入/註冊按鈕 × 底部列:定稿 = 方案 B 髮絲極簡(2026-08-25 Owner 拍板)
#
# 三方案比稿後選 B:登入/註冊都退成文字、細線分隔、註冊金字;
# 底部列五格全部扁平(凸起首頁圓鈕已移除),目前在首頁時首頁格亮金字
# (footer.php 用路徑判斷掛 .is-cur,其他頁不亮)。
==============================================================*/

/* 桌機頁首:兩顆按鈕退成文字對 */
.btn-login,
.btn-register {
  background: transparent !important;
  border: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
  border-radius: 0 !important;
  font-weight: 500;
}
.btn-login { padding: 10px 16px !important; color: var(--ab-ink-2) !important; }
.btn-login:hover { color: var(--ab-ink) !important; background: transparent !important; }
.btn-register {
  margin-left: 0 !important;
  padding: 10px 16px !important;
  border-left: 1px solid var(--ab-line) !important;
  color: var(--ab-gold-soft) !important;
  font-weight: 700;
}
.btn-register:hover { background: transparent !important; color: var(--ab-gold) !important; }

/* 手機頁首:同語彙 */
.ab-hdr-cta-wrap {
  margin-left: auto;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
}
.ab-hdr-cta-wrap a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 14px;
  white-space: nowrap;
}
.ab-hdr-login { padding: 0 12px; color: var(--ab-ink-2) !important; }
.ab-hdr-reg {
  padding: 0 12px;
  border-left: 1px solid var(--ab-line);
  color: var(--ab-gold-soft) !important;
  font-weight: 700;
}
/* 登入後的「會員中心」也收成同語彙:髮絲金邊膠囊 */
.ab-hdr-cta {
  margin-left: auto;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--ab-gold-line);
  border-radius: 999px;
  color: var(--ab-gold-soft) !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* 底部列:目前在首頁時亮金字(footer.php 判斷路徑掛 class) */
.ab-bar__item.is-cur { color: var(--ab-gold-soft); }

/*==============================================================
# 磚牆收緊(同日 Owner:「小卡空間太浪費」)
# 圖框已統一成 16/10 面板(見上方磚牆區塊),這裡把文字區的
# 留白收小、字級微降,磚的總高度約砍三成。
==============================================================*/

@media (min-width: 768px) {
  .ab-lobby .game-grop .link { padding: 36px 12px 14px !important; }
  .ab-lobby .game-grop .link h3 { font-size: 16px !important; }
}



/* 手機窄磚放不下七字廠商名(歐博真人百家樂)會從中間斷開,
   收字距與左右邊距讓它排成完整一行 */
@media (max-width: 767px) {
  .ab-lobby .game-grop .link { padding-left: 5px !important; padding-right: 5px !important; }
  .ab-lobby .game-grop .link h3 { font-size: 14px !important; letter-spacing: 0 !important; }
}

/* 隱藏原生捲軸樣式,保留捲動功能(2026-08-26 Owner 指定,操作介面要有質感)
   *{scrollbar-width:none} 是 Firefox 語法;webkit 系瀏覽器另外用虛擬元素關掉 */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* member.css 的 .form-group 是「標籤固定 130px + 內容」左右排,
   字級從 13.5px 放大到 16px(2026-08-26 規格)後,長標籤(USDT ERC錢包
   地址、銀行戶名 Account Name 這種)在 130px 裡會斷字斷得很難看。
   改成標籤獨立一行、內容整行接在下面,不管標籤多長或字級多大都不會
   再撞到這個問題,不用死守窄欄硬調寬度。 */
.member-page .form-group {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px;
}
.member-page .form-group .content {
  width: 100%;
}
/* member.css 用 .member-page label(不分是不是在 .form-group 裡)統一
   蓋成 130px —— USDT/超商那幾段是「裸的 .label div + label + input」
   結構,不經過 .form-group,一樣會撞到同一條規則,這裡一併蓋掉。 */
.member-page label {
  width: auto !important;
  margin-right: 0 !important;
  white-space: normal !important;
  display: block !important;
}

/* 會員中心版面重排(2026-09-01):帳戶資訊/銀行資訊/實名認證/USDT/超商
   五個區塊統一成同一種 .box(標題 + 分隔線),不再有一半用卡片、一半用
   裸排版的兩套視覺語言。box-warn 取代原本寫死的 <span style="color:red">。 */
.member-page .box-warn {
  color: var(--ab-gold-soft);
  font-size: 14px;
  margin: -6px 0 var(--s3);
}
.member-page .shop-lookup {
  color: var(--ab-ink-2);
  font-size: 14px;
  margin-bottom: var(--s2);
}
.member-page .shop-lookup a {
  color: var(--ab-gold);
  margin-left: var(--s2);
}
.member-page .shop-lookup a:first-of-type { margin-left: var(--s1); }
.member-page .shop-lookup a:hover { color: var(--ab-gold-soft); }

/* member.css 沒有給 .member .container 手機版的排列方式,兩個子元素
   (側欄 member-menu_web、內容 member-page)各自的 width:100% 規則
   在 ≤767px 只在「其中一個被 d-none 隱藏」的頁面才不會互相擠壓。
   帳戶管理頁把側欄選單開回來給手機用(找不到儲值/提領/遊戲紀錄入口的
   問題根源),所以這裡補上直排,side-bar 疊在內容上面,兩者都能吃滿寬度。 */
@media (max-width: 767px) {
  section.member .container {
    flex-direction: column;
    gap: var(--s4);
  }
  .member .member-menu_web {
    min-height: auto !important;
    max-height: none !important;
  }
  /* icon-link 那組 6 宮格(儲值/轉點/提領/儲值紀錄/遊戲記錄/拋售紀錄)
     已經是手機版的捷徑選單;下面 .menu-link 那份桌機清單在手機只剩
     帳戶管理(就是本頁自己)、交易紀錄、活動記錄還看得到,跟上面重複又
     多一層雜訊,Owner 標記要刪 —— 手機版整組隱藏,桌機不受影響。 */
  .member .memberMenu .menu-link {
    display: none !important;
  }
}