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

#nav-uj{
  width: 100%;
  margin: auto;
  transition: background-color .25s ease, box-shadow .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,.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(.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: .5rem 0;
  border-radius: 12px;
  background: rgb(63 22 84 / 90%);
  border: 1px solid #e3bdf1;
  box-shadow: 0 12px 30px rgba(10, 6, 60, .3);
  backdrop-filter: blur(4px);
  z-index: 1060; /* 確保蓋住前景 */
}

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

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

/* 英文行（副標） */
.lang-menu .dropdown-item small {
  display: block;
  font-size: .72rem;
  opacity: .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 .15rem rgba(255,255,255,calc(.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 .2s ease;
}

#ujOffcanvas .tt_all a:hover img,
#ujOffcanvas .icon_all a:hover img {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(.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%);
}
/* ========== 手機版 右側選單 ========== */







@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{
    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;
  }

}