@charset "UTF-8";

html { scroll-behavior: smooth; }
h5{ margin: 15px 0 0 0; color:#21e0a5;}

.text-green { color: #0A422F;}
.bg-green { background-color: #0A422F;}

.plannArea a{ display:block; color: #FFF; background: #0A422F; margin-top: 20px; padding:3px 10px; border-radius: 5px;}
.plannArea a:hover{}

.historyArea h3 a{ color: #52260b; padding-bottom:2px;}
.historyArea h3 a:hover{ border-bottom: 2px #21e0a5 solid;}
.historyArea img{ opacity: .85; border: 1px #dedede solid; padding: 5px;}
.historyArea img:hover{ opacity: 1;}

.eventsTXTinfo{
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.downpagepadding{ padding-bottom: 35px;}

/* 底部導航容器 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38px;
  display: flex;
  box-shadow: 0 -2px 15px rgba(0,0,0,0.2);
  z-index: 9999;
  font-family: "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
}

/* 通用按鈕狀態 */
.nav-item, .nav-item:visited {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  transition: filter 0.2s;
}
/* --- 獨立裝飾區塊設定 (150x150) --- */
.jita-ace::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  opacity: 1; 
  pointer-events: none;
  bottom: -5px; 
  left: 15px;
  animation: floatY 4s ease-in-out infinite;
  will-change: transform;
}
.jita-365::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  opacity: 1; 
  pointer-events: none;
  bottom: -5px; 
  right: 15px;
  animation: floatY 4s ease-in-out infinite;
  will-change: transform;
}

/* 插入指定的背景圖 */
.jita-ace::before {background-image: url('../img/JITAAcebtn-BGelement.png');}
.jita-365::before {background-image: url('../img/jita365btn-BGelement.png');}


/* --- 文字顯示邏輯 --- */
/* 預設隱藏網頁版前綴 (手機版狀態) */
.bonus-text {
  display: none;
}

/* 當螢幕寬度大於 768px (網頁版) 時顯示前綴 */
@media (min-width: 769px) {
  .bonus-text {
    display: inline;
  }
  .nav-item {
    font-size: 16px; /* 網頁版字體可以稍微大一點 */
  }
}

/* --- 個別按鈕配色 --- */
.jita-ace, .jita-ace:visited { background-color: #f9bb22 !important; color: #333 !important; border-radius: 20px 0 0 0;}
.jita-365, .jita-365:visited { background-color: #052118 !important; color: #FFF !important; border-radius: 0 20px 0 0; }
.moja-spin, .moja-spin:visited { background-color: #53009B !important; color: #FFF !important; }
.tut-spin, .tut-spin:visited { background-color: #f9bb22 !important; color: #53009B !important; }

/* 點擊回饋 */
.nav-item:active {
  filter: brightness(1.2);
}

/* iPhone 安全區域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    height: calc(38px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media screen and (max-width: 767px) {
  .jita-ace::before,.jita-365::before {
    width: 80px;
    height: 80px;
    z-index: -1;
    bottom: 25px; 
  }
  .jita-ace::before{ left: 15px;}
  .jita-365::before{ right: 15px;} 
}

@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}