/* =========================================================
   Mobile Adapt - Clean Fixed
   仅作用于移动端，不改 PC 端样式
========================================================= */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-vh: 1vh;

  --m-border: 1px solid rgba(255,255,255,.10);
  --m-shadow: 0 14px 34px rgba(0,0,0,.28);
  --m-bg-1: linear-gradient(180deg, rgba(10,12,24,.95), rgba(15,18,37,.85));
  --m-bg-2: linear-gradient(180deg, rgba(18,20,34,.90), rgba(11,13,25,.82));
  --m-bg-3: linear-gradient(180deg, rgba(34,25,58,.52), rgba(14,18,35,.84));
  --m-btn-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --m-btn-active: linear-gradient(135deg, rgba(127,72,191,.92), rgba(188,76,155,.82));
}

#mobileNavToggle{
  display:none;
}

/* 默认先隐藏移动端动态菜单，防止桌面端闪出 */
.mobile-ios-nav-shell,
#mobileNavToggle{
  display:none !important;
}

@media (max-width: 900px){
  .section1,
  .section2,
  .section3,
  .section3 .pictures,
  footer{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box;
  }

  .section1 .left,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *,
  header nav > *{
    min-width:0;
    box-sizing:border-box;
  }
}

@media (max-width: 768px){
  html.mobile-ios-nav-ready #mobileNavToggle{
    display:inline-flex !important;
  }

  html.mobile-ios-nav-ready .mobile-ios-nav-shell{
    display:block !important;
  }

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    min-height:calc(var(--mobile-vh, 1vh) * 100);
    -webkit-text-size-adjust:100%;
  }

  img,
  video,
  iframe,
  canvas,
  svg{
    max-width:100%;
    height:auto;
  }

  body::before,
  body::after,
  .section1,
  .section3{
    background-attachment:scroll !important;
  }

  body :where(h1,h2,h3,p,a,span,td,th,button){
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* 关键修复：手机端不要依赖动画来显示内容 */
  .section1 .left h1,
  .section1 .left h3,
  .section1 .left p,
  .section1 .left table,
  .section1 .left .group,
  .section1 .right,
  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    animation:none !important;
    transition-property:color, background-color, box-shadow, border-color, opacity, transform !important;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky !important;
    top:0;
    z-index:10030 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px 12px !important;
    width:100%;
    min-height:auto !important;
    height:auto !important;
    padding:
      max(10px, var(--safe-top))
      max(12px, var(--safe-right))
      12px
      max(12px, var(--safe-left)) !important;
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
    background:var(--m-bg-1) !important;
    backdrop-filter:blur(16px) saturate(145%);
    -webkit-backdrop-filter:blur(16px) saturate(145%);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
  }

  header .logo{
    grid-column:1 / 2 !important;
    width:100%;
    min-height:44px;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px;
    padding:0 !important;
    margin:0;
    min-width:0;
    text-align:left;
  }

  header .logo img{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px;
  }

  header .logo h2{
    margin:0;
    font-size:16px !important;
    line-height:1.2;
    text-align:left !important;
  }

  header nav{
    display:none !important;
  }

  /* ---------- Toggle ---------- */
  #mobileNavToggle{
    grid-column:2 / 3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
    color:rgba(255,255,255,.96) !important;
    outline:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    z-index:3;
  }

  /* 兼容当前 JS：mobile-nav-toggle__box + 3个 i */
  #mobileNavToggle .mobile-nav-toggle__box{
    position:relative;
    width:18px;
    height:14px;
    display:block;
  }

  #mobileNavToggle .mobile-nav-toggle__box i{
    position:absolute;
    left:0;
    width:100%;
    height:2.2px;
    border-radius:999px;
    background:currentColor;
    display:block;
    transform-origin:center;
    transition:
      transform .32s cubic-bezier(.22,.9,.22,1),
      opacity .22s ease,
      top .32s cubic-bezier(.22,.9,.22,1);
  }

  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(1){ top:0; }
  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(2){ top:5.9px; }
  #mobileNavToggle .mobile-nav-toggle__box i:nth-child(3){ top:11.8px; }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(1){
    top:5.9px;
    transform:rotate(45deg);
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(2){
    opacity:0;
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__box i:nth-child(3){
    top:5.9px;
    transform:rotate(-45deg);
  }

  /* 兼容旧结构：mobile-nav-toggle__lines */
  #mobileNavToggle .mobile-nav-toggle__lines{
    position:relative;
    width:18px;
    height:14px;
    display:block;
  }

  #mobileNavToggle .mobile-nav-toggle__lines::before,
  #mobileNavToggle .mobile-nav-toggle__lines::after,
  #mobileNavToggle .mobile-nav-toggle__lines span{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2.2px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
    transition:
      transform .32s cubic-bezier(.22,.9,.22,1),
      opacity .22s ease,
      top .32s cubic-bezier(.22,.9,.22,1);
  }

  #mobileNavToggle .mobile-nav-toggle__lines::before{ top:0; }
  #mobileNavToggle .mobile-nav-toggle__lines span{ top:5.9px; }
  #mobileNavToggle .mobile-nav-toggle__lines::after{ top:11.8px; }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines::before{
    top:5.9px;
    transform:rotate(45deg);
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines span{
    opacity:0;
  }

  body.mobile-ios-nav-open #mobileNavToggle .mobile-nav-toggle__lines::after{
    top:5.9px;
    transform:rotate(-45deg);
  }

  /* ---------- Mobile nav ---------- */
  .mobile-ios-nav-shell{
    grid-column:1 / -1;
    width:100%;
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transition:
      max-height .42s cubic-bezier(.22,.9,.22,1),
      opacity .28s ease,
      transform .42s cubic-bezier(.22,.9,.22,1);
  }

  body.mobile-ios-nav-open .mobile-ios-nav-shell{
    max-height:520px;
    opacity:1;
    pointer-events:auto;
    overflow:visible;
    transform:translateY(0) scale(1);
  }

  .mobile-ios-nav-stage{
    margin-top:6px;
    padding:12px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(10,16,34,.92), rgba(8,12,26,.88));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    position:relative;
    isolation:isolate;
  }

  .mobile-ios-nav-stage::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
      radial-gradient(80% 80% at 0% 0%, rgba(87,161,255,.16), transparent 60%),
      radial-gradient(65% 75% at 100% 0%, rgba(255,105,180,.14), transparent 64%);
    opacity:.95;
  }

  .mobile-ios-nav-grid,
  .mobile-ios-server-panel{
    position:relative;
    z-index:1;
  }

  .mobile-ios-nav-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:start;
  }

  .mobile-ios-nav-item{
    min-width:0;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:16px;
    text-decoration:none !important;
    color:rgba(255,255,255,.96) !important;
    font-size:14px !important;
    font-weight:700;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.11);
    background:var(--m-btn-bg);
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .mobile-ios-nav-label{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-ios-server-trigger{
    justify-content:space-between;
    background:var(--m-btn-active);
    border-color:rgba(255,255,255,.16);
  }

  .mobile-ios-nav-caret{
    width:8px;
    height:8px;
    border-right:2px solid rgba(255,255,255,.96);
    border-bottom:2px solid rgba(255,255,255,.96);
    transform:rotate(45deg);
    transition:transform .28s ease;
    flex:0 0 auto;
  }

  body.mobile-ios-server-open .mobile-ios-nav-caret{
    transform:rotate(-135deg);
  }

  .mobile-ios-server-panel{
    width:100%;
    display:none;
    border-radius:18px;
    padding:12px;
    background:linear-gradient(180deg, rgba(14,22,44,.98), rgba(10,17,34,.94));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
    overflow:hidden;
  }

  body.mobile-ios-server-open .mobile-ios-server-panel{
    display:block;
    animation:mobileServerPanelIn .24s ease;
  }

  @keyframes mobileServerPanelIn{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .mobile-ios-server-panel__head{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-bottom:8px;
  }

  .mobile-ios-server-panel__head strong{
    color:#fff;
    font-size:14px;
    line-height:1.2;
  }

  .mobile-ios-server-panel__head span{
    color:rgba(255,255,255,.62);
    font-size:11px;
    line-height:1.35;
  }

  .mobile-ios-server-list{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    max-height:260px;
    overflow:auto;
    padding-right:2px;
  }

  .mobile-ios-server-item{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
    color:#fff !important;
    text-decoration:none !important;
    text-align:left;
  }

  .mobile-ios-server-item__main{
    min-width:0;
    display:grid;
    gap:4px;
  }

  .mobile-ios-server-item__main strong{
    font-size:13px;
    line-height:1.2;
    color:#fff;
  }

  .mobile-ios-server-item__main small{
    font-size:11px;
    line-height:1.25;
    color:rgba(255,255,255,.58);
  }

  .mobile-ios-server-item__arrow{
    flex:0 0 auto;
    font-size:16px;
    opacity:.88;
  }

  /* ---------- Main content ---------- */
  .top-progress{
    margin-top:2px;
  }

  .section1{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    align-items:start !important;
    height:auto !important;
    min-height:calc(var(--mobile-vh, 1vh) * 100 - 90px);
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  .section1 .left,
  .section1 .right{
    width:100% !important;
    margin:0 !important;
  }

  .section1 .left{
    padding:18px 14px !important;
    border-radius:22px !important;
    background:var(--m-bg-3) !important;
    border:var(--m-border) !important;
    box-shadow:var(--m-shadow) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .section1 h1{
    font-size:clamp(26px, 7vw, 38px) !important;
    line-height:1.08 !important;
    margin-bottom:14px !important;
  }

  .section1 h3{
    font-size:clamp(18px, 4.8vw, 24px) !important;
    line-height:1.35 !important;
    margin-bottom:14px !important;
  }

  .section1 p{
    font-size:14px !important;
    line-height:1.9 !important;
  }

  .section1 table{
    display:block;
    width:100% !important;
    margin-top:18px !important;
    overflow-x:auto;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(14,18,36,.88), rgba(9,11,23,.76));
    border:1px solid rgba(255,255,255,.08);
  }

  .section1 table td,
  .section1 table th{
    white-space:nowrap;
    font-size:14px !important;
    padding:12px 10px !important;
  }

  .section1 .group{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:18px !important;
  }

  .section1 .group a,
  .section1 .group button,
  .section1 .right .contact a,
  .section1 .right .contact button{
    width:100% !important;
    min-height:54px !important;
    padding:14px 16px !important;
    border-radius:999px !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  .section1 .right,
  .section1 .right > div,
  .section1 .right .contact,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    width:100% !important;
    border-radius:18px !important;
    box-sizing:border-box;
  }

  .section1 .right > div,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    padding:16px 14px !important;
    background:var(--m-bg-2) !important;
    border:var(--m-border) !important;
    box-shadow:var(--m-shadow) !important;
  }

  .section2,
  .section3{
    height:auto !important;
  }

  .section2 .row,
  .section3 .pictures,
  .section3 .picture-list,
  .section3 .img_list,
  .section3 .video_list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .section2 .row .box,
  .section2 .row .s-box,
  .section3 .pictures > *,
  .section3 .img_list > *,
  .section3 .video_list > *{
    width:100% !important;
    margin:0 !important;
    border-radius:18px !important;
    overflow:hidden;
  }

  .section3 iframe,
  .section3 video,
  .section3 img{
    width:100% !important;
    border-radius:16px !important;
  }

  .modal,
  .modal-content,
  .player-overlay,
  .player-overlay .player,
  .java-modal,
  .java-modal .modal-content{
    max-width:100%;
    box-sizing:border-box;
  }

  .modal-content,
  .player-overlay .player,
  .java-modal .modal-content{
    width:min(calc(100vw - 20px), 520px) !important;
    margin:0 auto !important;
    border-radius:18px !important;
  }

  .player-overlay .player,
  .modal-content{
    max-height:calc(var(--mobile-vh, 1vh) * 84);
  }

  /* ---------- 移动端公告关闭按钮 ---------- */
  .notice-close-btn{
    display:none !important;
  }

  #noticeCard{
    position:relative !important;
  }

  #noticeCard .notice-close-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    padding:0;
    margin:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(14,18,36,.78), rgba(8,10,20,.62));
    color:#fff;
    font-size:22px;
    line-height:1;
    font-weight:500;
    cursor:pointer;
    z-index:50;
    box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    pointer-events:auto !important;
  }

  #noticeCard .notice-close-btn:active{
    transform:scale(.96);
  }

  #noticeCard.notice-card-hidden{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width: 480px){
  header{
    padding-left:max(10px, var(--safe-left)) !important;
    padding-right:max(10px, var(--safe-right)) !important;
  }

  .section1,
  .section2,
  .section3,
  footer{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .section1 .left,
  .section1 .right > div,
  .section1 .right .notice,
  .section1 .right .rule,
  .section1 .right .card,
  .section1 .right .box{
    padding:14px 12px !important;
  }

  .section1 h1{ font-size:clamp(22px, 8vw, 32px) !important; }
  .section1 h3{ font-size:clamp(16px, 4.9vw, 20px) !important; }

  .section1 p,
  .section1 table td,
  .section1 table th,
  .mobile-ios-nav-item,
  .mobile-ios-server-item{
    font-size:13px !important;
  }

  .mobile-ios-nav-item{
    min-height:46px;
    padding:0 12px;
    border-radius:15px;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-ios-nav-shell,
  .mobile-ios-server-panel,
  #mobileNavToggle .mobile-nav-toggle__box i,
  #mobileNavToggle .mobile-nav-toggle__lines::before,
  #mobileNavToggle .mobile-nav-toggle__lines::after,
  #mobileNavToggle .mobile-nav-toggle__lines span{
    transition:none !important;
    animation:none !important;
  }
}
/* =========================================================
   公告关闭按钮
   PC端隐藏 / 移动端显示
========================================================= */

/* 默认全部隐藏（PC端） */
#closeNoticeBtn,
.notice-close-btn{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 移动端启用 */
@media (max-width:768px){

  #noticeCard{
    position:relative !important;
  }

  #closeNoticeBtn,
  #noticeCard .notice-close-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    position:absolute;
    top:10px;
    right:10px;

    width:34px;
    height:34px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);

    background:linear-gradient(
      180deg,
      rgba(14,18,36,.78),
      rgba(8,10,20,.62)
    );

    color:#fff;
    font-size:20px;
    font-weight:600;

    cursor:pointer;

    z-index:80;

    box-shadow:
      0 8px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;

    pointer-events:auto !important;
  }

  #closeNoticeBtn:active{
    transform:scale(.95);
  }

  /* 关闭后隐藏公告 */
  #noticeCard.notice-card-hidden{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

}