/*--------------------------------------------------------------
(共用) NAV
# navbar 
--------------------------------------------------------------*/

#nav-uj {
  width: 100%;
  margin: auto;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  background-color: transparent;
}

/* 捲動超過 1000px 後套用 X 導覽列滾動後縮小效果 */
#nav-uj.scrolled {
  background-color: rgb(23 6 33 / 52%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  backdrop-filter: saturate(150%) blur(6px); /* 玻璃霧面效果 */
  height: 70px;
  transition: all 0.35s ease;
}

#nav-uj.scrolled .container {
  align-items: center;
  width: 70%;
  transition: all 0.35s ease;
}

/* LOGO 單獨微縮 + 調整間距 */
#nav-uj.scrolled .nav-logo img {
  transform: scale(0.75);
  filter: drop-shadow(0 0 0.15rem rgba(255, 255, 255, 0.8));
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

/* 導覽項縮小字距與 padding，視覺集中 */
#nav-uj.scrolled .tt_all a {
  padding-top: 4px;
  letter-spacing: 0.5px;
  transform: scale(0.75);
  transition: all 0.35s ease;
}

#nav-uj.scrolled .icon_all a {
  letter-spacing: 0.5px;
  transform: scale(0.75);
  transition: all 0.35s ease;
}

/* 固定導覽列浮在上方（比 offcanvas backdrop 高一點） */
/* Bootstrap offcanvas/backdrop 預設 z-index 1045，保留不動 */
#nav-uj.navbar.fixed-top {
  z-index: 1046;
}

/* 769px以下收起 */
#nav-uj.nav-hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none; /* 隱藏後不佔互動 */
  position: fixed; /* 固定於頂端移動 */
}

.navbar-brand {
  margin-right: 0;
}

#nav-uj .container {
  width: 80%;
  align-items: flex-start;
}

.nav-logo {
  width: fit-content;
}

.nav-logo img {
  position: relative;
  width: 100%;
  max-width: 100px;
  z-index: 100;
  margin-top: 0px;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255));
}

.nav-logo.logo_jp,
.nav-logo.logo_en,
#gentleman_lang_pc,
.icon_all_mb {
  display: none !important;
}

.menu_pc {
  width: 88%;
}

.tt_all {
  display: flex;
  gap: 2rem;
}
.tt_all a {
  width: 120px;
  padding-top: 10px;
}

.icon_all {
  display: flex;
}

.icon_all a {
  padding: 10px 7px;
}

.icon_all a:hover {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(0.5px);
}

.icon_all img {
  width: 43px;
  filter: drop-shadow(0px 0px 7px #e680fd);
}

.nav-login-max,
.nav-login-sm,
.nav-logo2 {
  display: none;
}

/*音樂開關*/
.music_playbox {
  width: 100%;
  max-width: 118px;
  position: absolute;
  top: 38.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.music_playbox i {
  display: none;
  transition: all 0.5s ease-out;
}

.music_playbox i:hover {
  filter: brightness(1.15);
  cursor: pointer;
}

i.active {
  display: block !important;
}

.bgmusic i {
  display: none;
  transition: all 0.8s;
}

/*語系*/

.dropdown .nav-link img {
  margin: 10px 7px;
}
.icon_all a:nth-of-type(1) {
  opacity: 1;
}

.icon_all a:nth-of-type(1) i {
  width: 100%;
  height: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  left: 0;
  top: 0;
  z-index: 99;
}

/* 語系選單：容器 */
.lang-switch {
  position: relative;
}

/* 下拉面板 */
.lang-menu {
  min-width: 210px;
  padding: 0.5rem 0;
  border-radius: 12px;
  background: rgb(63 22 84 / 90%);
  border: 1px solid #e3bdf1;
  box-shadow: 0 12px 30px rgba(10, 6, 60, 0.3);
  backdrop-filter: blur(4px);
  z-index: 1060; /* 確保蓋住前景 */
}

/* 文字排版（中文在上，英文小字在下） */
.lang-menu .dropdown-item {
  display: block;
  padding: 0.65rem 1rem;
  margin: 0.7rem 0;
  color: #fff;
  line-height: 1.2;
}
.lang-menu .dropdown-item:hover {
  background: linear-gradient(180deg, rgba(135, 215, 245, 0.12), rgba(135, 215, 245, 0.06));
}

/* 中文行（主標） */
.lang-menu .dropdown-item .zh {
  display: block;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f7ecfa;
}

/* 英文行（副標） */
.lang-menu .dropdown-item small {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* 手機：下拉面板寬度稍微收斂 */
@media (max-width: 991.98px) {
  .lang-menu {
    min-width: 160px;
  }
}

/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */
#nav-uj .container {
  --shrink: 0;
  transform-origin: top center;
  transform: scale(calc(1 - 0.08 * var(--shrink)));
  background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  box-shadow: 0 6px 20px rgba(0, 0, 0, calc(0.25 * var(--shrink)));
  /* backdrop-filter: saturate(150%) blur(calc(6px * var(--shrink))); */
  transition: none; /* JS 控制變化，不用 transition */
}

/* LOGO 連續縮放 */
#nav-uj .nav-logo img {
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  filter: drop-shadow(0 0 0.15rem rgba(255, 255, 255, calc(0.8 * var(--shrink))));
  transition: none;
}

/* 導覽項縮小字距與 padding */
#nav-uj .tt_all a,
#nav-uj .icon_all a {
  padding-top: calc(10px - 4px * var(--shrink));
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  transition: none;
}

/* 桌機以外不要縮 */
@media (max-width: 991.98px) {
  #nav-uj {
    transform: none;
    background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  }
}
/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */

/* ========== 手機版 右側選單 ========== */
.navbar-light .navbar-toggler {
  width: 3.5rem;
  border: none;
}

.offcanvas-body {
  background: rgba(10, 6, 60, 0.9);
  text-align: center;
  /* overflow-y:unset; */
  flex: 1 1 auto; /* 讓 body 自動撐開剩餘空間 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 2rem; /* 避免內容被底部遮住 */
}

#ujOffcanvas .offcanvas-header {
  flex: 0 0 auto;
  padding-top: 1rem;
}

.offcanvas-body .tt_all {
  flex-direction: column;
}

.offcanvas-body .icon_all {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.offcanvas-body .tt_all a {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.offcanvas-body .icon_all a {
  display: flex;
  justify-content: center;
  width: 30%;
}

/* Offcanvas 外觀 */
#ujOffcanvas {
  background: rgba(10, 6, 60, 0.9);
  backdrop-filter: blur(6px);
  color: #fff;
  border-left: 1px solid rgba(135, 215, 245, 0.25);
  height: 100vh !important; /* 高度填滿整個螢幕 */
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto; /* 超出內容可捲動 */
}

.offcanvas-end {
  width: auto;
}

#ujOffcanvas .nav-link {
  color: #fff;
  font-weight: 500;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
}

#ujOffcanvas .nav-link:hover {
  filter: drop-shadow(0 0 6px #e680fd);
}

#ujOffcanvas .tt_all img {
  width: 140px;
  height: auto;
  transition: filter 0.2s ease;
}

#ujOffcanvas .tt_all a:hover img,
#ujOffcanvas .icon_all a:hover img {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(0.3px);
}

#ujOffcanvas .icon_all img {
  width: 40px; /* 縮小貼合手機 */
}

#ujOffcanvas .icon_all a {
  padding: 10px 7px;
}

/* 手機版：左 Close X 右漢堡對稱 */
.navbar .navbar-close {
  padding: 0.25rem;
  line-height: 1;
  /* close 深色背景清楚 */
  background: transparent;
  border: 0;
}
.offcanvas-header .btn-close {
  width: 1.5rem;
  height: auto;
  padding: none;
}

/* 若navbar 背景偏深，使用白色 close 圖示 */
.navbar .btn-close.btn-close-white {
  filter: invert(1) grayscale(100%);
}
/* ========== 手機版 右側選單 ========== */

#dmm_ntgnavi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}

#nav-uj {
  top: 36px;
}

@media (max-width: 1025px) {
  .navbar-brand {
    width: 90px;
    padding-top: 0;
  }
}

/* ========== Mobile Offcanvas Nav ========== */
@media (max-width: 991.98px) {
  #nav-uj {
    width: 100%;
  }

  .nav_mb {
    display: flex;
  }

  .tt_all,
  .icon_all_pc {
    display: none !important;
  }
  .icon_all_mb a.dc,
  .icon_all_mb a.yt,
  .icon_all_mb a.fb,
  .icon_all_mb a.twitter {
    display: none !important;
  }

  .icon_all a {
    padding: 5px;
  }

  .icon_all_mb {
    display: flex !important;
  }

  #ujOffcanvas .tt_all,
  #ujOffcanvas .icon_all {
    display: flex !important;
    align-items: center;
  }

  #gentleman_lang_mb {
    display: none !important;
  }

  #index_lang_mb {
    display: flex !important;
  }
}

@media (max-width: 769px) {
  #nav-uj.scrolled .container {
    width: 100%;
    height: 65px;
  }

  #nav-uj {
    transform: translateY(0); /* 預設不移動 */
    transition:
      transform 0.35s ease,
      opacity 0.35s ease;
    opacity: 1;
  }
  #nav-uj .nav-logo img,
  #nav-uj .tt_all a,
  #nav-uj .icon_all a {
    transform: none !important;
    opacity: 1 !important;
  }
  #nav-uj.nav-hide {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@media (max-width: 681px) {
}

@media (max-width: 540px) {
  #nav-uj .container {
    width: 100%;
  }
  .navbar-brand {
    width: 80px;
  }
  #ujOffcanvas .tt_all img {
    width: 120px;
  }
}

@media (max-width: 431px) {
  .icon_all img {
    width: 35px;
  }
}