/**
 * HOIN88 自訂樣式 - 第一階段：基礎顏色調整
 * 只覆蓋顏色，不改變任何佈局
 * 版本: 1.0.0
 * 日期: 2025-09-21
 */

/* === CSS 變數定義 === */
:root {
  /* 原始顏色備份 */
  --original-primary: #13afc4;
  --original-bg: #182430;
  --original-secondary: #354658;

  /* 新的品牌顏色 */
  --hoin88-gold: #FFD700;
  --hoin88-red: #DC143C;
  --hoin88-dark: #0D0D0D;
  --hoin88-dark-secondary: #1A1A1A;
  --hoin88-text: #FFFFFF;
  --hoin88-text-muted: #B8B8B8;
}

/* === 修復滾動條問題 - 簡化版本 === */
/* 只處理真正需要的部分，不要過度干預 */
html, body {
  /* 移除水平滾動條但保留正常垂直滾動 */
  overflow-x: hidden;
}

/* 移除全域 max-width 限制，只在需要的地方使用 */

/* === 階段一：基礎顏色調整 === */

/* 1. 背景色調整 */
body {
  background: var(--hoin88-dark) !important;
}

/* 2. 主要強調色：從藍色改為金色 */
/* 將所有 #13afc4 替換為金色 */
.header-box .navbar-nav .nav-link.on,
.header-box .navbar-nav .nav-link:hover,
.marquee-box .marquee-title > a,
.eventnav-box .event .event-link img,
.introduction-box svg,
.introduction-box .content .content-list .text h2,
.about-box .about p,
.about-box .about-item > a:hover,
.about-box .about-item > a:hover::after,
.content-text .title,
.game-box .game-btn,
.gameh-box,
.aboutWebBox .about-content h3,
.back-top {
  color: var(--hoin88-gold) !important;
}

/* 邊框顏色 */
.marquee-box,
.eventnav-box .event .event-link img,
.gameh-box,
.game-box .game-btn,
.aboutWebBox .about-nav {
  border-color: var(--hoin88-gold) !important;
}

/* 背景色使用金色的地方 */
.marquee-box .marquee-title > a {
  background: var(--hoin88-gold) !important;
  color: var(--hoin88-dark) !important;
}

/* SVG 填充色 */
.introduction-box svg {
  stroke: var(--hoin88-gold) !important;
}

/* 3. 次要背景色調整 */
.header-box {
  background: var(--hoin88-dark-secondary) !important;
}

.header-box .navbar-nav {
  background: var(--hoin88-dark-secondary) !important;
}

.introduction-box {
  background: var(--hoin88-dark-secondary) !important;
}

.footer-box {
  background: var(--hoin88-dark) !important;
  border-top: 1px solid var(--hoin88-gold) !important;
}

/* 4. 卡片懸停效果顏色 */
@media screen and (min-width: 1025px) {
  .game-box .game-btn:hover {
    background: var(--hoin88-gold) !important;
    color: var(--hoin88-dark) !important;
  }

  .eventnav-box .event .event-link p:hover::after,
  .eventweb-box .event .event-link p:hover::after,
  .promotionweb-box .event .event-link p:hover::after {
    background: var(--hoin88-gold) !important;
  }

  .eventweb-box .nav-event a:hover,
  .promotionweb-box .nav-event a:hover {
    background: var(--hoin88-gold) !important;
    color: var(--hoin88-dark) !important;
    border-color: var(--hoin88-gold) !important;
  }
}

/* 5. 活動/公告標籤顏色優化 */
.marquee-box .ann.ann1,
.bulletin-box .bulletin-ann.ann1 {
  background: var(--hoin88-red) !important;
}

/* 6. 分隔線和邊框 */
.about-box .about {
  border-color: var(--hoin88-dark-secondary) !important;
}

/* === 保留原始功能的微調 === */

/* 確保文字清晰可讀 */
.eventnav-box .event .event-link div,
.introduction-box .content .content-list .text p {
  color: var(--hoin88-text-muted) !important;
}

/* 確保連結顏色統一 - 修正：更具體的選擇器 */
.eventnav-box a,
.introduction-box a,
.footer-box a {
  transition: color 0.3s ease;
}

.eventnav-box a:hover,
.introduction-box a:hover,
.footer-box a:hover {
  color: var(--hoin88-gold) !important;
}

/* === 階段二：組件優化 === */

/* 1. 字型優化 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Orbitron:wght@400;700;900&display=swap');

body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 數字使用特殊字型 */
.marquee-box .ann span,
.game-box .game-btn span,
.amount,
.price,
.number {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
}

/* 2. 按鈕樣式優化 */
.game-box .game-btn,
.eventnav-box .go-event a,
.eventweb-box .nav-event a,
.promotionweb-box .nav-event a,
.btn,
button[type="submit"] {
  background: linear-gradient(135deg, var(--hoin88-gold) 0%, #FFA500 100%) !important;
  color: var(--hoin88-dark) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px rgba(255, 215, 0, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-shadow: none !important;
  position: relative;
  overflow: hidden;
}

.game-box .game-btn:hover,
.eventnav-box .go-event a:hover,
.eventweb-box .nav-event a:hover,
.promotionweb-box .nav-event a:hover,
.btn:hover,
button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.3) !important;
  background: linear-gradient(135deg, #FFA500 0%, var(--hoin88-gold) 100%) !important;
}

.game-box .game-btn:active,
.btn:active {
  transform: translateY(0) !important;
}

/* 3. 導航列優化 */
.header-box {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.98) 0%, rgba(13, 13, 13, 0.98) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  /* 不設定固定高度，讓它自然伸展 */
}

.header-box .navbar-nav .nav-link {
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  position: relative;
}

.header-box .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--hoin88-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.header-box .navbar-nav .nav-link:hover::after,
.header-box .navbar-nav .nav-link.on::after {
  width: 80%;
}

/* 4. 遊戲卡片優化 */
.gameNav-box .card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, var(--hoin88-dark-secondary), var(--hoin88-dark)) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 215, 0, 0.1) !important;
}

.gameNav-box .card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 8px 16px rgba(255, 215, 0, 0.2) !important;
  border-color: var(--hoin88-gold) !important;
}

.gameNav-box .card h2 {
  color: var(--hoin88-gold) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.gameNav-box .card p {
  color: var(--hoin88-text-muted) !important;
  font-size: 14px !important;
}

/* 圖片覆蓋層效果 - 修正：確保卡片有相對定位 */
.gameNav-box .card {
  position: relative;
}

.gameNav-box .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13, 13, 13, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.gameNav-box .card img {
  transition: transform 0.3s ease !important;
}

.gameNav-box .card:hover img {
  transform: scale(1.1) !important;
}

/* 5. 跑馬燈優化 */
.marquee-box {
  background: linear-gradient(90deg, var(--hoin88-dark) 0%, var(--hoin88-dark-secondary) 50%, var(--hoin88-dark) 100%) !important;
  border-top: 2px solid var(--hoin88-gold) !important;
  border-bottom: 2px solid var(--hoin88-gold) !important;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.1) !important;
}

.marquee-box .marquee-title > a {
  background: linear-gradient(135deg, var(--hoin88-gold), #FFA500) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 6. 事件卡片優化 - 改善間距和排版 */
.eventnav-box {
  padding: 50px 0 !important;
}

.eventnav-box .event {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  padding: 0 20px !important;
}

.eventnav-box .event .event-link {
  flex: 1 !important;
  min-width: 300px !important;
  transition: all 0.3s ease !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(26, 26, 26, 0.6) !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 215, 0, 0.1) !important;
}

.eventnav-box .event .event-link:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2) !important;
  background: rgba(26, 26, 26, 0.9) !important;
  border-color: var(--hoin88-gold) !important;
}

.eventnav-box .event .event-link img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  transition: transform 0.3s ease !important;
  margin-bottom: 15px !important;
}

.eventnav-box .event .event-link:hover img {
  transform: scale(1.05) !important;
}

/* 7. 介紹區塊圖標動畫 */
.introduction-box svg {
  transition: all 0.3s ease !important;
}

.introduction-box .content-list:hover svg {
  transform: scale(1.1) rotate(5deg) !important;
  stroke-width: 2.5 !important;
}

/* 8. 頁尾優化 - 完全重新設計 */
/* about-box 區域樣式 */
.about-box {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
  padding: 60px 0 40px !important;
  border-top: 2px solid var(--hoin88-gold) !important;
  position: relative;
  overflow: hidden;
}

.about-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hoin88-gold), transparent);
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.about-box .max-width {
  display: flex !important;
  justify-content: space-around !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
}

.about-box .about {
  flex: 1 !important;
  min-width: 200px !important;
  padding: 0 20px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.about-box .about:hover {
  border-left-color: var(--hoin88-gold) !important;
  transform: translateX(5px) !important;
}

.about-box .about > div > p {
  color: var(--hoin88-gold) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  text-shadow: none !important;
}

.about-box .about > div > p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--hoin88-gold);
}

.about-box .about ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.about-box .about-item {
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.about-box .about-item a {
  color: #b8b8b8 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 5px 0 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

/* 移除前面的箭頭符號
.about-box .about-item a::before {
  content: '▸';
  color: var(--hoin88-gold);
  margin-right: 8px;
  transition: transform 0.3s ease;
  display: inline-block;
}
*/

.about-box .about-item:hover a {
  color: var(--hoin88-gold) !important;
  transform: translateX(5px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 移除 before 的 hover 效果
.about-box .about-item:hover a::before {
  transform: translateX(3px);
}
*/

/* 底部版權區域 */
.footer-box {
  background: #0d0d0d !important;
  padding: 20px !important;
  text-align: center !important;
  color: #888 !important;
  font-size: 13px !important;
  border-top: 1px solid rgba(255, 215, 0, 0.1) !important;
}

.footer-box a {
  color: var(--hoin88-gold) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  margin: 0 5px !important;
  transition: color 0.3s ease !important;
}

.footer-box a:hover {
  color: #ffa500 !important;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

/* 9. 返回頂部按鈕美化 */
.back-top {
  background: var(--hoin88-gold) !important;
  color: var(--hoin88-dark) !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.back-top:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.4) !important;
}

.back-top svg {
  width: 24px !important;
  height: 24px !important;
}

/* 10. 滾動條美化 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--hoin88-dark);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--hoin88-gold), #FFA500);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hoin88-gold);
}

/* === 階段三：內容區塊優化 === */

/* 1. 橫幅輪播區優化 */
.banner-box {
  position: relative;
  overflow: hidden;
}

.banner-box .slick-slider {
  margin-bottom: 0 !important;
}

.banner-box .slick-dots {
  bottom: 20px !important;
  z-index: 10;
}

.banner-box .slick-dots li button:before {
  color: var(--hoin88-gold) !important;
  font-size: 12px !important;
  opacity: 0.5 !important;
}

.banner-box .slick-dots li.slick-active button:before {
  opacity: 1 !important;
}

.banner-box .slick-prev,
.banner-box .slick-next {
  z-index: 10;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 215, 0, 0.8) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.banner-box .slick-prev:hover,
.banner-box .slick-next:hover {
  background: var(--hoin88-gold) !important;
  transform: scale(1.1) !important;
}

.banner-box .slick-prev:before,
.banner-box .slick-next:before {
  color: var(--hoin88-dark) !important;
  font-size: 24px !important;
}

/* 橫幅圖片效果 */
.banner_img {
  position: relative;
  overflow: hidden;
}

.banner_img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.8), transparent);
  pointer-events: none;
}

.banner_img img {
  transition: transform 8s ease-out !important;
}

.slick-active .banner_img img {
  transform: scale(1.05) !important;
}

/* 2. 最新消息標題優化 */
.eventnav-box .event-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--hoin88-gold), #FFA500) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-align: center !important;
  margin-bottom: 30px !important;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.eventnav-box .event-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--hoin88-gold), transparent);
}

/* 3. 文章標題和內容優化 - 增加間距 */
.eventnav-box .event .event-link h2 {
  color: var(--hoin88-gold) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  transition: all 0.3s ease !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

.eventnav-box .event .event-link:hover h2 {
  color: #FFA500 !important;
}

.eventnav-box .event .event-link > div {
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 15px !important;
  min-height: 100px !important;
}

/* 查看更多按鈕 */
.eventnav-box .event .event-link p {
  margin-top: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--hoin88-gold) !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.eventnav-box .event .event-link p:hover {
  transform: translateX(5px) !important;
}

.eventnav-box .event .event-link p svg {
  margin-left: 5px !important;
  transition: transform 0.3s ease !important;
}

.eventnav-box .event .event-link:hover p svg {
  transform: translateX(5px) !important;
}

/* 4. 介紹區塊背景圖案 */
.introduction-box {
  position: relative;
  overflow: hidden;
}

.introduction-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
}

/* 美女圖片效果 */
.introduction-box .container img {
  filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.2)) !important;
  transition: all 0.5s ease !important;
}

.introduction-box .container:hover img {
  transform: translateY(-10px) !important;
  filter: drop-shadow(0 15px 40px rgba(255, 215, 0, 0.3)) !important;
}

/* 5. 介紹內容列表美化 */
.introduction-box .content-list {
  padding: 20px !important;
  margin-bottom: 20px !important;
  border-radius: 10px !important;
  background: rgba(26, 26, 26, 0.5) !important;
  border-left: 4px solid var(--hoin88-gold) !important;
  transition: all 0.3s ease !important;
}

.introduction-box .content-list:hover {
  background: rgba(26, 26, 26, 0.8) !important;
  transform: translateX(10px) !important;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.1) !important;
}

.introduction-box .content-list .text h2 {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}

.introduction-box .content-list .text p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  opacity: 0.9 !important;
}

/* 6. 關於區塊樣式 - 已移至 footer 區域重新設計 */

/* 7. 公告標籤美化 */
.marquee-box .ann,
.bulletin-box .bulletin-ann {
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.marquee-box .ann.ann1,
.bulletin-box .bulletin-ann.ann1 {
  background: linear-gradient(135deg, var(--hoin88-red), #FF6B6B) !important;
  animation: blink 2s ease-in-out infinite;
}

.marquee-box .ann.ann2,
.bulletin-box .bulletin-ann.ann2 {
  background: linear-gradient(135deg, var(--hoin88-gold), #FFA500) !important;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 8. 內容區塊通用陰影 */
.gameNav-box,
.eventnav-box,
.introduction-box,
.about-box {
  position: relative;
  z-index: 1;
}

.gameNav-box::before,
.eventnav-box::before,
.about-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hoin88-gold), transparent);
  opacity: 0.5;
}

/* 9. 查看更多按鈕區域 - 完全重新設計 */
.eventnav-box .go-event {
  text-align: center !important;
  margin-top: 40px !important;
  clear: both !important;
  width: 100% !important;
}

/* 強制覆蓋原有樣式 */
.eventnav-box .go-event > a {
  position: relative !important;
  display: inline-block !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* 隱藏原始圖片 */
.eventnav-box .go-event > a > img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* 重新設計按鈕為純文字樣式 */
.eventnav-box .go-event > a > p {
  display: inline-block !important;
  margin: 0 !important;
  padding: 15px 50px !important;
  background: linear-gradient(135deg, var(--hoin88-gold) 0%, #FFA500 100%) !important;
  color: var(--hoin88-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  line-height: 1.2 !important;
}

.eventnav-box .go-event > a:hover > p {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4) !important;
  background: linear-gradient(135deg, #FFA500 0%, var(--hoin88-gold) 100%) !important;
}

/* 掃光效果 */
.eventnav-box .go-event > a > p::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.eventnav-box .go-event > a:hover > p::before {
  left: 100%;
}

/* 10. 頁面標題樣式 */
h1, .page-title {
  color: var(--hoin88-gold) !important;
  text-align: center !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  position: relative !important;
  padding-bottom: 20px !important;
}

h1::after, .page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--hoin88-gold), transparent);
}

/* === 階段四：互動效果 === */

/* 1. 載入動畫 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation: fadeInUp 0.6s ease forwards;
}

/* 2. 滾動顯示動畫類別 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 3. 固定導航列樣式 - 修正：確保不破壞原始佈局 */
.header-box.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  animation: slideDown 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.header-box.fixed.hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 當導航列固定時，給 body 加上 padding */
body.nav-fixed {
  padding-top: 80px !important;
}

/* 4. 數字滾動效果 */
.number-counter {
  font-family: 'Orbitron', monospace !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  color: var(--hoin88-gold) !important;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

/* 5. 返回頂部脈衝動畫 */
@keyframes pulseOnce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.back-top.pulse-once {
  animation: pulseOnce 0.5s ease;
}

.back-top.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 6. 載入按鈕動畫 */
.loading {
  position: relative !important;
  color: transparent !important;
}

.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid var(--hoin88-dark);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 7. 圖片載入效果 */
img[data-src] {
  filter: blur(10px);
  transition: filter 0.5s ease;
}

img.loaded {
  filter: blur(0);
}

/* 8. 輸入框聚焦效果 */
.focused input,
.focused textarea {
  border-color: var(--hoin88-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1) !important;
}

/* 9. 滑鼠跟隨光暈效果 */
.gameNav-box {
  position: relative;
  overflow: hidden;
}

.gameNav-box::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent);
  left: var(--mouse-x, -150px);
  top: var(--mouse-y, -150px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.gameNav-box:hover::before {
  opacity: 1;
}

/* 10. 卡片進入動畫延遲 */
.gameNav-box .card:nth-child(1) { animation-delay: 0.1s; }
.gameNav-box .card:nth-child(2) { animation-delay: 0.2s; }
.gameNav-box .card:nth-child(3) { animation-delay: 0.3s; }
.gameNav-box .card:nth-child(4) { animation-delay: 0.4s; }

/* 11. 頁面載入遮罩 - 修正：移除可能影響的載入遮罩 */
/* 暫時停用載入遮罩，避免影響頁面顯示
body:not(.loaded) {
  overflow: hidden;
}

body:not(.loaded)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hoin88-dark);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

body:not(.loaded)::after {
  content: 'HOIN88';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 900;
  color: var(--hoin88-gold);
  z-index: 100000;
  animation: pulse 1s ease-in-out infinite;
}
*/

/* 12. 內容展開動畫 */
.hidden-content {
  display: none;
}

.hidden-content.show {
  display: block;
  animation: slideDown 0.6s ease;
}

/* 13. 文字選取樣式 */
::selection {
  background: var(--hoin88-gold);
  color: var(--hoin88-dark);
}

::-moz-selection {
  background: var(--hoin88-gold);
  color: var(--hoin88-dark);
}

/* 14. 連結懸停下劃線動畫 - 修正：只應用於特定區域 */
.eventnav-box a,
.introduction-box a,
.about-box a {
  position: relative;
  text-decoration: none !important;
}

/* 移除會影響佈局的全域 a::after */
.eventnav-box a::after,
.footer-box a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--hoin88-gold);
  transition: width 0.3s ease;
}

.eventnav-box a:hover::after,
.footer-box a:hover::after {
  width: 100%;
}

/* 15. 卡片傾斜效果 */
.tilt-effect {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-effect:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

/* 16. 發光按鈕效果 */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }
}

.btn-glow {
  animation: glow 2s ease-in-out infinite;
}

/* 17. 彈跳動畫 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounce {
  animation: bounce 2s ease infinite;
}

/* 18. 震動效果 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* 19. 漸變背景動畫 */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animation {
  background: linear-gradient(270deg, var(--hoin88-gold), #FFA500, var(--hoin88-gold));
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

/* 20. 打字機效果 */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  50% { opacity: 0; }
}

.typing-effect {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--hoin88-gold);
  animation: typing 3s steps(40), blinkCursor 0.8s infinite;
}

/* === 階段五：響應式優化 === */

/* 平板優化 (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  /* 導航列調整 */
  .header-box .navbar-nav {
    padding: 0 20px !important;
  }

  /* 遊戲卡片網格 */
  .gameNav-box .card-nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  /* 事件卡片 */
  .eventnav-box .event {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 介紹區塊 */
  .introduction-box .flex-sb-c {
    flex-direction: column !important;
  }

  .introduction-box .container {
    margin-bottom: 30px !important;
  }

  /* 標題大小 */
  .eventnav-box .event-title {
    font-size: 28px !important;
  }

  h1, .page-title {
    font-size: 32px !important;
  }
}

/* 手機優化 (最大 767px) */
@media screen and (max-width: 767px) {
  /* 基本間距調整 */
  body {
    font-size: 14px !important;
  }

  /* 導航列手機版 */
  .header-box {
    padding: 10px 0 !important;
  }

  .header-box .navbar-brand img {
    height: 35px !important;
  }

  .header-box .navbar-nav {
    position: fixed !important;
    top: 60px !important;
    left: -100% !important;
    width: 80% !important;
    height: calc(100vh - 60px) !important;
    background: var(--hoin88-dark) !important;
    flex-direction: column !important;
    padding: 20px !important;
    transition: left 0.3s ease !important;
    z-index: 9998 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5) !important;
    /* 只在需要時顯示滾動條 */
    overflow-y: auto !important;
  }

  .header-box .navbar-nav.show {
    left: 0 !important;
  }

  .header-box .navbar-nav .nav-link {
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1) !important;
    font-size: 16px !important;
  }

  /* 選單按鈕優化 */
  .header-box .navbar-toggler {
    border: 1px solid var(--hoin88-gold) !important;
    padding: 5px 10px !important;
  }

  .header-box .navbar-toggler svg {
    stroke: var(--hoin88-gold) !important;
  }

  /* 橫幅區域 */
  .banner-box .slick-prev,
  .banner-box .slick-next {
    width: 40px !important;
    height: 40px !important;
  }

  .banner-box .slick-dots {
    bottom: 10px !important;
  }

  .banner_img::after {
    height: 100px !important;
  }

  /* 跑馬燈 */
  .marquee-box {
    padding: 10px 0 !important;
  }

  .marquee-box .marquee-title > a {
    padding: 5px 15px !important;
    font-size: 12px !important;
  }

  /* 遊戲卡片手機版 */
  .gameNav-box .card-nav {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 15px !important;
  }

  .gameNav-box .card {
    padding: 15px !important;
  }

  .gameNav-box .card h2 {
    font-size: 20px !important;
  }

  .gameNav-box .card p {
    font-size: 12px !important;
  }

  /* 最新消息區塊 - 手機版改善 */
  .eventnav-box {
    padding: 30px 15px !important;
  }

  .eventnav-box .event-title {
    font-size: 24px !important;
    margin-bottom: 30px !important;
  }

  .eventnav-box .event {
    flex-direction: column !important;
    gap: 25px !important;
    padding: 0 10px !important;
  }

  .eventnav-box .event .event-link {
    padding: 15px !important;
    min-width: auto !important;
    width: 100% !important;
  }

  .eventnav-box .event .event-link img {
    height: 180px !important;
    margin-bottom: 12px !important;
  }

  .eventnav-box .event .event-link h2 {
    font-size: 18px !important;
    min-height: auto !important;
    margin-bottom: 10px !important;
  }

  .eventnav-box .event .event-link > div {
    font-size: 13px !important;
    -webkit-line-clamp: 3 !important;
    min-height: auto !important;
    line-height: 1.6 !important;
  }

  /* 介紹區塊手機版 */
  .introduction-box {
    padding: 30px 15px !important;
  }

  .introduction-box .container {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  .introduction-box .container img {
    max-width: 280px !important;
    height: auto !important;
  }

  .introduction-box .content-list {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }

  .introduction-box .content-list .text h2 {
    font-size: 18px !important;
  }

  .introduction-box .content-list .text p {
    font-size: 13px !important;
  }

  .introduction-box .content-list svg {
    width: 40px !important;
    height: 40px !important;
  }

  /* 查看更多按鈕 - 手機版調整 */
  .eventnav-box .go-event {
    margin-top: 30px !important;
  }

  .eventnav-box .go-event > a > p {
    padding: 12px 30px !important;
    font-size: 14px !important;
  }

  /* 頁尾優化 - 手機版 */
  .about-box {
    padding: 40px 15px 30px !important;
  }

  .about-box .max-width {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .about-box .about {
    padding: 0 10px !important;
    border-left: none !important;
    border-top: 2px solid var(--hoin88-gold) !important;
    padding-top: 20px !important;
  }

  .about-box .about:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }

  .about-box .about > div > p {
    font-size: 18px !important;
  }

  .footer-box {
    padding: 15px 10px !important;
    font-size: 12px !important;
  }

  /* 返回頂部按鈕 */
  .back-top {
    width: 40px !important;
    height: 40px !important;
    right: 15px !important;
    bottom: 15px !important;
  }

  .back-top svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* 固定導航列補償 */
  body.nav-fixed {
    padding-top: 60px !important;
  }

  /* 按鈕大小調整 */
  .btn,
  button[type="submit"] {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }

  /* 隱藏某些桌面元素 */
  .desktop-only {
    display: none !important;
  }

  /* 數字計數器 */
  .number-counter {
    font-size: 36px !important;
  }

  /* 滾動條隱藏（手機版） */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
}

/* 小手機優化 (最大 480px) */
@media screen and (max-width: 480px) {
  /* 更小的字體和間距 */
  body {
    font-size: 13px !important;
  }

  .header-box .navbar-brand img {
    height: 30px !important;
  }

  .eventnav-box .event-title {
    font-size: 20px !important;
    letter-spacing: 1px !important;
  }

  .gameNav-box .card h2 {
    font-size: 18px !important;
  }

  .introduction-box .container img {
    max-width: 240px !important;
  }

  .introduction-box .content-list .text h2 {
    font-size: 16px !important;
  }

  /* 按鈕更小 */
  .btn,
  .eventnav-box .go-event a {
    padding: 8px 20px !important;
    font-size: 13px !important;
  }
}

/* 橫向手機 (landscape) */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .header-box {
    padding: 5px 0 !important;
  }

  .header-box .navbar-brand img {
    height: 25px !important;
  }

  .banner_img {
    max-height: 50vh !important;
    overflow: hidden !important;
  }

  .gameNav-box .card-nav {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 高解析度螢幕優化 */
@media screen and (min-width: 1920px) {
  .max-width {
    max-width: 1600px !important;
    margin: 0 auto !important;
  }

  .eventnav-box .event-title {
    font-size: 40px !important;
  }

  h1, .page-title {
    font-size: 48px !important;
  }

  .gameNav-box .card h2 {
    font-size: 24px !important;
  }

  .introduction-box .content-list .text h2 {
    font-size: 24px !important;
  }

  .introduction-box .content-list .text p {
    font-size: 16px !important;
  }
}

/* 列印樣式 */
@media print {
  /* 隱藏不必要的元素 */
  .header-box,
  .banner-box,
  .back-top,
  .marquee-box,
  .footer-box .social-links {
    display: none !important;
  }

  /* 調整顏色為黑白 */
  * {
    color: #000 !important;
    background: #fff !important;
  }

  /* 連結顯示網址 */
  a::after {
    content: " (" attr(href) ")";
  }
}

/* 觸控設備優化 */
@media (hover: none) and (pointer: coarse) {
  /* 移除懸停效果 */
  .gameNav-box .card:hover {
    transform: none !important;
  }

  /* 增加點擊區域 */
  a,
  button {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 禁用滑鼠跟隨效果 */
  .gameNav-box::before {
    display: none !important;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  /* 已經是深色主題，無需額外調整 */
}

/* 無障礙優化 - 高對比模式 */
@media (prefers-contrast: high) {
  * {
    border-width: 2px !important;
  }

  .btn,
  button {
    border: 2px solid var(--hoin88-gold) !important;
  }

  a {
    text-decoration: underline !important;
  }
}

/* 動畫簡化模式 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 測試標記 === */
/* 添加版本標記，方便識別樣式是否載入 */
body::after {
  content: "HOIN88 Custom v5.0.9";
  position: fixed;
  bottom: 20px; /* 提高位置避開 scrollbar */
  right: 20px;  /* 往內移一點 */
  padding: 2px 8px;
  background: var(--hoin88-gold);
  color: var(--hoin88-dark);
  font-size: 10px;
  z-index: 1000; /* 降低 z-index 避免覆蓋重要元素 */
  pointer-events: none;
  opacity: 0.3; /* 稍微明顯一點 */
  border-radius: 3px;
}