/* 初始透明底樣式 */
        .grid__item .tm-nav-link {
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            padding: 20px 10px;
            transition: all 0.3s ease-in-out;
        }

        /* 滑過時透明變深 */
        .grid__item:hover .tm-nav-link {
            background-color: rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            transform: scale(1.03);
        }
/* 按鈕 hover 動畫 */
        .tm-nav-link {
            transition: all 0.3s ease-in-out;
        }

        .grid__item:hover .tm-nav-link {
            transform: scale(1.05);
            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
        }

        /* 淡入動畫效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 彈窗淡入淡出效果 */
        .details__bg {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .details__bg.details__bg--active {
            opacity: 1;
        }

        /* 點擊波紋動畫 */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::after {
            content: "";
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple-effect 0.6s linear;
        }

        @keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
.details__bg {
            background-color: rgba(0, 0, 0, 0.85) !important;
            border-radius: 10px;
            padding: 20px;
            color: white;
            backdrop-filter: blur(4px);
            transition: opacity 0.3s ease;
        }
/* 載入動畫延遲滑入 */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            animation: revealUp 0.8s ease forwards;
        }

        @keyframes revealUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
/* 彈窗內文彈出動畫 */
        .popup-scale {
            opacity: 0;
            transform: scale(0.8);
            animation: popupScaleIn 0.4s ease forwards;
        }

        @keyframes popupScaleIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

/* ====== 新增 Join Modal 樣式 ====== */
.join-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 1000;
  max-width: 320px;
  width: 90%;
}
.join-modal.active {
  display: block;
}
.server-modal-content {
  text-align: center;
}
.separator {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 12px auto;
  width: 80%;
}
.server-modal-content h2 {
  font-size: 22px;
  margin: 8px 0;
}
.server-label {
  font-size: 16px;
  font-weight: bold;
  margin: 6px 0 2px;
}
.server-info {
  font-size: 18px;
  margin: 2px 0 8px;
}