/* 基础 */
:root{
  --bg: #0b0e12;
  --text: #eceef2;
  --muted: #a6b0c0;
  --primary: #6ee7ff;
  --primary-2: #22d3ee;
  --glass: rgba(0,0,0,.45);
  --glass-strong: rgba(0,0,0,.6);
  --card: #151a22;
}
*{box-sizing:border-box}
html,body{height:100%}
@font-face {
    font-family: 'FZFont';
    src: url('./HYGuoTuChuangXinHongLouMeng-55U.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: 'FZFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}
img{max-width:100%; display:block}
a{color:var(--primary)}

/* 顶部导航：透明 + 渐变黑玻璃 */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.15), rgba(0,0,0,0));
  backdrop-filter: saturate(130%) blur(6px);
}
.nav-container{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.5px}
.logo{width:28px; height:36px; object-fit: contain}
.nav-links{display:flex; gap:18px}
.nav-links a{color:#fff; text-decoration:none; opacity:.85}
.nav-links a:hover{opacity:1}

/* 导航图标样式 */
.nav-item{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; transition:all 0.3s ease}
.nav-item:hover{background:rgba(255,215,0,0.1); opacity:1}
.nav-item.active{background:rgba(255,215,0,0.2); color:#ffd700}
.nav-icon{width:20px; height:20px; object-fit:contain; filter:brightness(0) invert(1)}
.nav-item.active .nav-icon{filter:brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(45deg)}
.nav-item span{font-size:14px; font-weight:500}

/* 主容器横向切换 */
.main-swiper, .main-swiper .swiper-wrapper, .slide{height:100vh}
.slide{position:relative; padding-top:72px; display:flex; flex-direction:column; justify-content:center; background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat}
.slide.slide-activities{justify-content:center; padding-top:50px; padding-bottom:50px}

/* 背景图片遮罩层 */
.slide::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); z-index:0}
.slide > *{position:relative; z-index:1}

/* 各页面背景定位优化 */
.slide.slide-activities{background-position:center center}
.slide.slide-activities::before{background:rgba(0,0,0,0.5)}
.slide.slide-members{background-position:center top}
.slide.slide-members::before{background:rgba(0,0,0,0.3)}
.slide.slide-gallery{background-position:center center}
.slide.slide-gallery::before{background:rgba(0,0,0,0.4)}
.slide.slide-join{background-position:center bottom}
.slide.slide-join::before{background:rgba(255,255,255,0.1)}

/* 背景图片大小调整选项 */
/* 如果图片过大，使用contain保持完整显示 */
.slide.bg-contain{background-size:contain !important}
/* 如果图片过小，使用100% 100%拉伸填满 */
.slide.bg-stretch{background-size:100% 100% !important}
/* 如果需要重复小图片 */
.slide.bg-repeat{background-repeat:repeat !important; background-size:auto !important}
.section-header{max-width:1100px; margin:0 auto 24px; padding:0 24px}
.slide-activities .section-header{margin-bottom:12px}
.section-header h2{font-size:36px; margin:0 0 6px}
.section-header p{margin:0; color:var(--muted)}

/* 首页背景视频 */
.hero-bg{position:absolute; inset:0; overflow:hidden}
.bg-video{width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(105%)}
.bg-overlay{position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.7))}
.hero-content{position:relative; z-index:1; text-align:center; padding:0 20px}
.guild-name{font-size:64px; margin:0 0 10px; letter-spacing:2px}
.guild-meta{color:#cbd5e1; margin:0 0 26px}
.hero-cta{display:flex; gap:14px; justify-content:center}

.btn{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; transition:.2s ease; font-weight:600}
.btn.primary{background:#D3B67F; color:#fff; border:1px solid rgba(255,255,255,.3)}
.btn.primary:hover{background:#E5C890; transform:translateY(-2px)}
.btn.ghost{border:1px solid rgba(255,255,255,.3); color:#fff}
.slide-join .btn.ghost{color:#000}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.disabled{
  opacity:.6 !important;
  pointer-events:none !important;
  background-color:#888 !important; /* 灰色背景 */
  color:#ccc !important; /* 浅灰色文本 */
  cursor:not-allowed !important; /* 禁用光标 */
}

/* 活动卡片轮播 */
.activities-swiper{width:100%; max-width:900px; margin:0 auto; padding:20px 24px 20px; min-height:70vh; display:flex; align-items:center}
.activities-swiper .swiper-wrapper{height:auto !important}
.activity-card{position:relative; border-radius:16px; overflow:hidden; background:var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.35)}
.activity-card img{width:100%; height:400px; object-fit:cover; opacity:.9}
.activity-info{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(to top, var(--glass-strong), transparent);}

/* 自定义轮播图切换按钮 */
.activities-swiper .swiper-button-prev,
.activities-swiper .swiper-button-next {
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.activities-swiper .swiper-button-prev:after,
.activities-swiper .swiper-button-next:after {
  display: none;
}

.activities-swiper .swiper-button-prev {
  background-image: url('./img/feature_prev_d3634779.png');
  left: 10px;
}

.activities-swiper .swiper-button-next {
  background-image: url('./img/feature_next_6f404b40.png');
  right: 10px;
}

.activities-swiper .swiper-button-prev:hover,
.activities-swiper .swiper-button-next:hover {
  opacity: 1;
  transform: scale(1.1);
}

.activities-swiper .swiper-button-disabled {
  opacity: 0.3;
}
.activity-info h3{margin:0 0 6px}

/* 成员风采卡片 */
.cards-grid{max-width:1100px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.dept-card{position:relative; display:block; border-radius:14px; overflow:hidden; text-decoration:none; background:var(--card)}
.dept-card img{width:100%; height:280px; object-fit:cover; transition:transform .35s ease}
.dept-card:hover img{transform:scale(1.05)}
.dept-info{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.55), transparent)}
.dept-info h3{margin:0 0 4px; color:#fff}
.dept-info span{color:#cbd5e1}

/* 万相集宫格（masonry 简化） */
.masonry-grid{columns:4 320px; column-gap:14px; padding:0 24px; max-width:1200px; margin:0 auto}
.masonry-grid img{width:100%; margin:0 0 14px; border-radius:12px; break-inside:avoid; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition:.3s ease; cursor:pointer}
.masonry-grid img:hover{transform:scale(1.03); box-shadow:0 8px 25px rgba(0,0,0,.5)}
.masonry-grid img:active{transform:scale(0.98)}
.masonry-grid.limited{max-height:65vh; overflow-y:auto; overflow-x:hidden}
.section-actions{max-width:1100px; margin:14px auto 0; padding:0 24px; text-align:center}

/* 联系方式 */
.contact-panel{max-width:1000px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.contact-item{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px}
.contact-item h3{margin:0 0 8px}

/* 二级页容器 */
.subpage main.container{padding-top:88px}
.container.narrow{max-width:1000px; margin:0 auto; padding:0 24px}
.container.wide{max-width:1200px; margin:0 auto; padding:0 24px}
.lead{color:var(--muted)}
.member-section{margin:28px 0}
.member-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px}
.member-card{background:var(--card); border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 4px 20px rgba(0,0,0,.15); transition:all 0.3s ease}
.member-card:hover{transform:translateY(-5px); box-shadow:0 8px 30px rgba(0,0,0,.25)}
.member-image{position:relative; cursor:pointer; overflow:hidden}
.member-image img{width:100%; height:240px; object-fit:cover; transition:transform 0.3s ease}
.member-image:hover img{transform:scale(1.05)}
.member-image:active img{transform:scale(0.98)}
.member-image::after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0); transition:background 0.3s ease}
.member-image:hover::after{background:rgba(0,0,0,0.1)}
.member-info{padding:16px}
.member-info h3{margin:0 0 8px; font-size:18px; font-weight:600}
.member-info p{margin:0 0 12px; color:#cbd5e1; font-size:14px}
.member-tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{display:inline-block; padding:4px 8px; background:rgba(211,182,127,0.2); border:1px solid #D3B67F; border-radius:12px; font-size:12px; color:#D3B67F; font-weight:500}

/* 图片模态框样式 */
.image-modal{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); align-items:center; justify-content:center; opacity:0; transition:all 0.3s ease}
.image-modal.show{display:flex; opacity:1}
.modal-content{position:relative; max-width:90%; max-height:90%; display:flex; align-items:center; justify-content:center; transform:scale(0.7); transition:transform 0.3s ease}
.image-modal.show .modal-content{transform:scale(1)}
.modal-content img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}
.close-btn{position:absolute; top:-40px; right:0; color:#fff; font-size:32px; font-weight:bold; cursor:pointer; z-index:1001}
.close-btn:hover{color:#D3B67F}


@media (max-width: 900px){
  .nav-container{gap:8px}
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute; top:60px; right:16px; left:16px; flex-direction:column; gap:10px; background:var(--glass); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); border-radius:12px; padding:12px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
  .nav-links.open{opacity:1; visibility:visible; transform:translateY(0)}
  .nav-links a{padding:12px 16px; border-radius:8px; background:rgba(255,255,255,.04); transition:all 0.2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent;}
  .nav-links a:hover, .nav-links a:active{background:rgba(255,255,255,.15); transform:translateX(4px)}
  .nav-item{justify-content:flex-start; padding:12px 16px}
  .nav-icon{width:20px; height:20px}
  .nav-item span{font-size:16px}
  .guild-name{font-size:36px}
  .hero-cta{flex-direction:column; gap:12px}
  .cards-grid{grid-template-columns:1fr}
  .contact-panel{grid-template-columns:1fr}
  .activity-card img{height:200px}
  .masonry-grid{columns:2 160px; padding:0 16px}
  .section-header{padding:0 16px}
  .section-actions{padding:0 16px}
  
  /* 移动端背景图片优化 */
  .slide{background-attachment:scroll; padding-top:60px}
  .slide.slide-activities{padding-top:40px; padding-bottom:40px}
  .slide.slide-activities::before{background:rgba(0,0,0,0.6)}
  .slide.slide-members::before{background:rgba(0,0,0,0.5)}
  .slide.slide-gallery::before{background:rgba(0,0,0,0.5)}
  .slide.slide-join::before{background:rgba(255,255,255,0.2)}

  /* 成员卡片移动端适配 */
  .member-card .member-image img {
    height: 180px; /* 减小图片高度 */
  }

  .member-card .member-info {
    padding: 12px; /* 减小内边距 */
  }

  /* 万相集滑动优化 */
  .masonry-grid {
    touch-action: pan-y;
  }
  
  /* 按钮触摸优化 */
  .btn, button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* 导航切换按钮优化 */
  .nav-toggle {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
  }
  
  .nav-toggle:active {
    transform: scale(0.95);
  }
}

/* 提升触控体验 */
.nav-links a, .btn{touch-action:manipulation}

.guild-name{font-size:64px}


/* 通用模态框样式 */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:20px 16px;overflow-y:auto}
.modal-box{background:#222;padding:24px 32px;border-radius:16px;max-width:480px;width:100%;color:#fff;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5);margin-top:20px;margin-bottom:20px}
.modal-box h2{margin-top:0;margin-bottom:16px;font-size:24px;text-align:center}
.modal-box .close-btn{position:absolute;right:16px;top:12px;font-size:28px;cursor:pointer;color:#fff;z-index:10}
.modal-box label{display:block;margin-bottom:12px;font-size:14px;font-weight:500}
.modal-box input[type="text"],.modal-box input[type="file"],.modal-box textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #444;background:#333;color:#fff;font-size:16px;transition:all 0.2s ease}
.modal-box input[type="text"]:focus,.modal-box textarea:focus{outline:none;border-color:#D3B67F;box-shadow:0 0 0 2px rgba(211,182,127,0.2)}
.modal-box textarea{resize:vertical;min-height:80px}
.modal-box button{width:100%;padding:14px 20px;font-size:16px}

/* 移动端模态框优化 */
@media (max-width: 900px){
  .modal-overlay{
    padding:16px;
  }
  .modal-box{
    padding:20px;
    border-radius:12px;
  }
  .modal-box h2{
    font-size:20px;
  }
  .modal-box input[type="text"],.modal-box textarea{
    padding:14px;
    font-size:16px;
  }
  .modal-box button{
    padding:16px;
    font-size:16px;
  }
}

/* hide default file input text color for better contrast */
input[type="file"]::-webkit-file-upload-button{background:#D3B67F;border:0;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer}
input[type="file"]::file-selector-button{background:#D3B67F;border:0;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer}
.close-btn:hover{color:#D3B67F}

/* 页脚 */
.site-footer{margin:32px 0; text-align:center; color:#a8b3c2}

/* Swiper 重置 */
.main-pagination .swiper-pagination-bullet{background:rgba(255,255,255,.7)}
.main-pagination .swiper-pagination-bullet-active{background:#D3B67F}

/* 响应式 */
/* 新增：移动端汉堡按钮与导航折叠 */
.nav-toggle{display:none; background:transparent; border:0; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; position:relative}
.menu-icon{width:24px; height:24px; object-fit:contain; transition:all 0.3s ease}
.nav-toggle:hover .menu-icon{transform:scale(1.1)}
.nav-toggle[aria-expanded="true"] .menu-open{display:none}
.nav-toggle[aria-expanded="true"] .menu-close{display:block !important}
.nav-toggle[aria-expanded="false"] .menu-open{display:block}
.nav-toggle[aria-expanded="false"] .menu-close{display:none !important}

/* 音乐控制按钮样式 */
.music-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    color: #fff;
}

.music-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.music-toggle.playing {
    animation: pulse 2s infinite;
}

.music-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.music-toggle.muted .music-icon {
    opacity: 0.5;
    transform: scale(0.8);
}

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

@media (max-width: 900px){
    .music-toggle {
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }
}

@media (max-width: 900px){
  .nav-container{gap:8px}
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute; top:60px; right:16px; left:16px; flex-direction:column; gap:10px; background:var(--glass); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); border-radius:12px; padding:12px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease}
  .nav-links.open{opacity:1; visibility:visible; transform:translateY(0)}
  .nav-links a{padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.04); transition:all 0.2s ease}
  .nav-links a:hover{background:rgba(255,255,255,.1); transform:translateX(4px)}
  .nav-item{justify-content:flex-start; padding:12px 16px}
  .nav-icon{width:18px; height:18px}
  .nav-item span{font-size:16px}
  .guild-name{font-size:36px}
  .hero-cta{flex-direction:column}
  .cards-grid{grid-template-columns:1fr}
  .contact-panel{grid-template-columns:1fr}
  .activity-card img{height:200px}
  .masonry-grid{columns:2 160px; padding:0 16px}
  .section-header{padding:0 16px}
  .section-actions{padding:0 16px}
  
  /* 移动端背景图片优化 */
  .slide{background-attachment:scroll; padding-top:60px}
  .slide.slide-activities{padding-top:40px; padding-bottom:40px}
  .slide.slide-activities::before{background:rgba(0,0,0,0.6)}
  .slide.slide-members::before{background:rgba(0,0,0,0.5)}
  .slide.slide-gallery::before{background:rgba(0,0,0,0.5)}
  .slide.slide-join::before{background:rgba(255,255,255,0.2)}
}

/* 提升触控体验 */
.nav-links a, .btn{touch-action:manipulation}

.guild-name{font-size:64px}

.member-card{position:relative; /* 使内部绝对定位按钮基于卡片 */}
.member-card .edit-btn,
.member-card .delete-btn{
  position:absolute;
  bottom:14px;
  padding:6px 12px;
  font-size:12px;
  border-radius:8px;
  opacity:0.9;
  transition:all .2s ease;
}
.member-card .edit-btn{right:86px;}
.member-card .delete-btn{right:14px; /* 使用danger配色由.btn.danger控制 */
  border:none; background:unset; color:unset;}
.member-card .edit-btn:hover{opacity:1; transform:translateY(-2px);}
.member-card .delete-btn:hover{opacity:1; transform:translateY(-2px);}

/* Alert Box Styles */
.alert-box {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-box.show {
  opacity: 1;
  visibility: visible;
}

.alert-box.success {
  background-color: #4CAF50;
}

.alert-box.error {
  background-color: #f44336;
}

.alert-box.warning {
  background-color: #ff9800;
}

.alert-box .icon {
  font-size: 20px;
}

.alert-box .message {
  font-size: 16px;
}

/* 通用按钮变体 */
.btn.small{padding:6px 12px; font-size:12px}
.btn.danger{background:#dc4c64; color:#fff; border:1px solid rgba(255,255,255,.3)}
.btn.danger:hover{background:#e56e76}