:root{
  --atgseth-yellow:#4867da;      /* 主藍 */
  --atgseth-yellow-d:#3249a8;    /* 主藍深 */
  --atgseth-apple:#7446ac;       /* 紫 */
  --atgseth-apple-d:#5b358b;     /* 紫深 */
  --atgseth-teal:#289078;        /* 綠能量 */
  --atgseth-teal-d:#1f6f5c;      /* 綠能量深 */

  --atgseth-bg:#0f1115;       
  --atgseth-card:#181b22;     
  --atgseth-text:#e9eef5;
  --gap:24px;
}

.atgseth-header{
  width:100%;
  position:relative; top:0; z-index:1000;
  background:var(--atgseth-card);
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  height: 15vh;
  display: flex;
  align-items: center;  
}
.atgseth-header.is-fixed {
    position: fixed;
}

.atgseth-inner{
  max-width:1540px; margin:0 auto;
  padding:14px 20px;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--gap);
}
.atgseth-logo img{ display:block; height:auto; max-height:87px; }

.atgseth-burger{
  display:none;
  width:60px; height:60px; border:0; background:transparent; cursor:pointer;
}
.atgseth-burger span{
  display:block; height:2px; margin:7px 0; background:#fff; border-radius:2px;
}

/* 桌機選單 */
.atgseth-nav{ inline-size:100%; }
.atgseth-menu{
  display:flex; align-items:center; justify-content:flex-end;
  gap:28px; margin:0; padding:0; list-style:none;
  overflow: visible;white-space: normal; -webkit-overflow-scrolling:touch;
  flex-wrap: nowrap !important;
}
.atgseth-menu a{
  color:var(--atgseth-text); text-decoration:none;
  font-size:15px; line-height:1; padding:10px 0; flex:0 0 auto;
}
.atgseth-menu a:hover{ color:#fff; }

/* CTA */
.atgseth-cta{
  background: linear-gradient(90deg, var(--atgseth-yellow), var(--atgseth-teal));
  color:#fff !important; padding:10px 16px; border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.atgseth-cta:hover{
  background: linear-gradient(90deg, var(--atgseth-yellow-d), var(--atgseth-teal-d));
}


@media (min-width: 1201px) and (max-width: 1420px){
  .atgseth-nav{ min-width: 0; }
  .atgseth-menu{
    flex-wrap: nowrap !important;       /* 不換行 */
    white-space: normal !important;     /* 不換行 */
    overflow: visible;    
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;               /* 稍微縮小間距，視需要可再調 */
    padding-right: 20px;     /* 讓最後一顆不要貼邊 */
  }
  
  /* 隱藏捲軸外觀（不會出現灰灰的條） */
  .atgseth-menu::-webkit-scrollbar{ height: 0; width: 0; display: none; }
  .atgseth-menu{ scrollbar-width: none; }
  .atgseth-menu li:last-child {margin: 0 10px;}
  }
  
/* 斷點：平板以下改漢堡 */
@media (max-width: 1200px){
  .atgseth-inner{ grid-template-columns:auto auto; }
  .atgseth-burger{ display:inline-block; justify-self:end; }
  .atgseth-burger span{
    position: relative;
    display: block;
    width: 26px; height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease, width .18s ease;
  }
  .atgseth-nav{
    position:fixed; inset:110px 0 0 0; /* header 下方全屏抽屜 */
    background:rgba(15,17,21,.96);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .atgseth-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .atgseth-menu{
    flex-direction:column; align-items:stretch; gap:0 !important; padding:8px 16px;
  }
  .atgseth-menu li + li{ border-top:1px solid rgba(255,255,255,.06); }
  .atgseth-menu a{ padding:16px 4px; font-size:16px; }
  .atgseth-cta{ margin-top:8px; text-align:center; }
  body.no-scroll{ overflow:hidden; }
}

/* 細節優化 */
.atgseth-inner > nav{ min-width:0; } /* 允許中欄收縮，避免桌機擠成兩排 */
.atgseth-menu::-webkit-scrollbar{ height:6px; }
.atgseth-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:4px; }

/* 三條線的縱向間距 */
.atgseth-burger span + span{ margin-top: 6px; }

/* 展開時變 X：上、下兩條旋轉，中間那條消失 */
.atgseth-burger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.atgseth-burger[aria-expanded="true"] span:nth-child(2){
  opacity: 0; transform: scaleX(0.6);
}
.atgseth-burger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-10.5px) rotate(-45deg);
}

/* 減少動作偏好：關閉動畫 */
@media (prefers-reduced-motion: reduce){
  .atgseth-burger span{
    transition: none;
  }
}


/* >=1201px 桌機 */
@media (min-width:1201px){
  .atgseth-menu{
    /* 讓太長時自動換行，而不是出現橫向捲軸 */
    flex-wrap: wrap;
    column-gap: 28px;   /* 橫向間距 */
    row-gap: 6px;       /* 換行後的縱向間距 */
    white-space: normal;
    overflow: visible;  /* 關掉橫向捲軸 → 不會再出現灰色小條 */
  }

  /* 讓最後一顆 CTA 仍然推到最右邊 */
  .atgseth-menu li:last-child{
    margin-left: auto;
  }

  /* 字級與行高微調，避免兩行時過於擁擠 */
  .atgseth-menu a{
    font-size: 15px;
    line-height: 1.25;
  }
    .atgseth-cta-wrap{
    display:none !important;
  }
}

/* 介於 1200~1440px 再多壓一點間距與字級（依版面需要調整） */
@media (min-width:1201px) and (max-width:1440px){
  .atgseth-menu a{ font-size: 14px; }
}

/* ========== 手機／平板：LOGO + CTA + 漢堡 同一排 ========== */
@media (max-width: 1200px){
  /* 讓三個元素佔一列：左 LOGO、中 CTA、右 漢堡 */
  .atgseth-inner{
    grid-template-columns: auto 1fr auto;   /* ← 三欄 */
    align-items: center;
    gap: 12px;                               /* 手機減少間距 */
    padding-block: 10px;
  }
  .atgseth-logo{ justify-self: start; }
  .atgseth-cta-wrap{ justify-self: center; }    /* CTA 靠中 */
  

  /* 手機上的 CTA 大小微調 */
  .atgseth-cta-wrap .register-btn{
    width: 128px;
    font-size: 16px;
    padding: 10px 16px;
    border: 2.5px solid #d7b164;
  }

.register-btn {
    display: inline-block;
    margin: 0 auto;
    padding: 12px 24px;
    background: linear-gradient(180deg, #4867da 0%, #7446ac 100%);
    box-shadow: 
        0px 4px 0px rgba(40,144,120,0.7),             
        inset 0px -4px 6px rgba(40,144,120,0.45),     
        inset 0px 3px 8px rgba(255,255,255,0.35),     
        0 0 12px rgba(72,103,218,0.5);   
    border-radius: 100px;
    cursor: pointer;
    text-align: center;
    width: 150px;
    font-size: 18px;
    font-weight: bold;
    border-style: none;

    /* 遊戲 UI 的亮字 */
    color: #ffffff;

    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

/* hover 放大、光更強 */
.register-btn:hover {
    transform: scale(1.05);
    box-shadow:
        0px 6px 0px rgba(40,144,120,0.9),
        inset 0px -4px 8px rgba(40,144,120,0.55),
        inset 0px 4px 10px rgba(255,255,255,0.45),
        0 0 18px rgba(72,103,218,0.8);   /* hover 發光更閃 */
}

/* active 縮小 + 壓下去能量收束 */
.register-btn:active {
    transform: scale(0.92);
    box-shadow:
        inset 0px 4px 10px rgba(0,0,0,0.35),
        inset 0px -2px 4px rgba(40,144,120,0.45);
}

/* 掃光效果（保持不變，但調亮） */
.register-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.75) 0%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 2.2s infinite;
    pointer-events: none;
}

/* 🔥 emoji 抖動動畫 */
.register-btn b::before {
    content: "🔥";
    margin-right: 6px;
    display: inline-block;
    animation: flame 0.6s infinite alternate;
}

/* 掃光動畫 */
@keyframes shine {
    0% { left: -75%; }
    60% { left: 140%; }
    100% { left: 140%; }
}

/* 🔥 抖動 */
@keyframes flame {
    0% { transform: translateY(-1px) scale(1); }
    100% { transform: translateY(2px) scale(1.15); }
}

/* 掃光 keyframes */
@keyframes shine {
    0%   { left: -75%; }
    60%  { left: 125%; }
    100% { left: 125%; }
}

/* 火焰抖動 keyframes */
@keyframes flame {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(-10deg) scale(1.1); }
    100% { transform: rotate(8deg) scale(0.95); }
}

}

/* 保證 LOGO 不會把按鈕擠掉 */
.atgseth-logo img{ max-height: 64px; }

/* ========== 桌機選單最後一顆 CTA 美化 & 不擠 ========== */
.atgseth-menu{
  gap: 20px;               
}


.atgseth-menu li.menu-cta{ 
  display:flex;
  justify-content:center;  
}


.atgseth-menu .atgseth-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(180deg, var(--atgseth-yellow) 0%, var(--atgseth-apple) 100%);
  color: #ffffff !important;
  box-shadow:
    0 6px 0 rgba(40,144,120,0.75),
    inset 0 -4px 6px rgba(40,144,120,0.5),
    inset 0 3px 8px rgba(255,255,255,0.35),
    0 10px 24px rgba(72,103,218,.45);
  border: 2.5px solid #d7b164;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
  position: relative;      
  overflow: hidden; 
}


.atgseth-menu .atgseth-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.atgseth-menu .atgseth-cta::after{
  content: "›";            
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.atgseth-menu .atgseth-cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 8px 0 rgba(40,144,120,0.9),
    inset 0 -4px 8px rgba(40,144,120,0.6),
    inset 0 4px 10px rgba(255,255,255,0.45),
    0 14px 28px rgba(72,103,218,.65);
  filter: saturate(1.05);
}

.atgseth-menu .atgseth-cta:hover::before{
  animation: atgsethShine .8s ease forwards;
}

/* 按住：微縮 + 內凹陰影 */
.atgseth-menu .atgseth-cta:active{
  transform: translateY(0) scale(0.96);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.35);
}

/* 掃光關鍵影格（可依喜好調速） */
@keyframes atgsethShine{
  from { left: -75%; }
  to   { left: 125%; }
}

/* 無動作使用者偏好（可選） */
@media (prefers-reduced-motion: reduce){
  .atgseth-menu .atgseth-cta,
  .atgseth-menu .atgseth-cta::before{
    transition: none;
    animation: none !important;
  }
}


/* 讓整排選單不換行、必要時可水平滑動（避免最後一顆被擠壞） */
.atgseth-nav{ min-width: 0; }
.atgseth-menu::-webkit-scrollbar{ height: 6px; }
.atgseth-menu::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 4px; }

/* ========== 按鈕 ========== */
.register-btn{
  border-radius: 999px;
  font-weight: 800;
}

@media (max-width: 480px) {
  .register-btn {
    width: 100px;
    font-size: 16px;
    padding: 10px 18px;
  }
}

/* === 強制膠囊＋下拉：放在所有選單樣式的最後 === */
/* ====== 桌機：膠囊主選單 + 下拉（合併版） ====== */
@media (min-width:1201px){
  .atgseth-nav .atgseth-menu{ gap:14px; align-items:center; }
  .atgseth-nav .atgseth-menu > li{ position:relative; }

.atgseth-nav .atgseth-menu > li > a{
  position:relative;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding:10px 18px;
  border: 2.5px solid #d7b164;
  border-radius:999px;
  font-weight:600; 
  letter-spacing:.2px;
  white-space:nowrap; 
  text-decoration:none;
  background:linear-gradient(180deg, #4867da 0%, #7446ac 100%);
  box-shadow:
    0 4px 0 rgba(40,144,120,0.7),            
    inset 0 -3px 5px rgba(40,144,120,0.45),  
    inset 0 3px 8px rgba(255,255,255,0.38); 
  color:#ffffff !important;
  transition:
    transform .15s, 
    box-shadow .15s, 
    filter .15s;
}

.atgseth-nav .atgseth-menu > li > a:hover{
  transform:translateY(-1px);
  
  box-shadow:
    0 6px 0 rgba(40,144,120,0.9),             /* 更強的綠底能量 */
    inset 0 -3px 8px rgba(40,144,120,0.55),   /* 內部更亮 */
    inset 0 4px 10px rgba(255,255,255,0.45),  /* 亮面增加 */
    0 10px 24px rgba(72,103,218,0.45);        /* 外散射藍光 */

  filter:saturate(1.1);
}


/* ─── 子選單箭頭（改成能量色） ─── */

.atgseth-nav .atgseth-menu > li:has(> .menu_body > ul.subOption) > a,
.atgseth-nav .atgseth-menu > li.has-submenu > a{
  padding-right:30px;
}

.atgseth-nav .atgseth-menu > li:has(> .menu_body > ul.subOption) > a::after,
.atgseth-nav .atgseth-menu > li.has-submenu > a::after{
  content:""; 
  position:absolute; 
  right:12px; 
  top:50%; 
  transform:translateY(-45%);
  width:0; height:0;
  border-left:5px solid transparent; 
  border-right:5px solid transparent; 
  border-top:6px solid #d4c6ff;  
}


/* ─── 下拉內容（保持暗＋玻璃霧面風） ─── */

.atgseth-nav .atgseth-menu > li > .menu_body{
  display:none !important;
  position:absolute;
  left:0; 
  top:100%;
  margin-top:10px;  
  z-index:2000;
  background:#1a1d27e6;       
  backdrop-filter:blur(5px);

  border-radius:14px; 
  padding:10px; 
  min-width:260px;

  /* 霧面 + 發光邊界 */
  box-shadow:
    0 14px 32px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.atgseth-nav .atgseth-menu > li > .menu_body:empty{
  display:none !important;
}

/* 拒絕 hover 斷掉的橋接 */
.atgseth-nav .atgseth-menu > li > .menu_body::before{
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  top:-10px; 
  height:10px;
}

  /* 展開條件：滑在母項或下拉都打開 */
  .atgseth-nav .atgseth-menu > li:hover > .menu_body,
  .atgseth-nav .atgseth-menu > li:focus-within > .menu_body,
  .atgseth-nav .atgseth-menu > li > .menu_body:hover{
    display:block !important;
  }

  /* 只允許直向捲動，禁止橫向；內容長就換行 */
  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption{
    list-style:none; margin:0; padding:0;
    max-height:60vh; overflow-y:auto; overflow-x:hidden;
    padding-right:6px; -webkit-overflow-scrolling:touch;
  }
  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption::-webkit-scrollbar:horizontal{ height:0; }

  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption li > div > p{ margin:0; }
  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption a{
    display:flex; align-items:center;
    padding:10px 12px;
    border-radius:10px;
    font-size:14px; line-height:1.25;
    color:#e9eef5; text-decoration:none;
    white-space:normal; word-break:break-word; min-width:0;
    transition:background .15s;             /* ← 移除位移動畫 */
  }
  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption a:hover,
  .atgseth-nav .atgseth-menu > li > .menu_body > ul.subOption a:focus{
    background:rgba(255,255,255,.08);
  }

  /* 外層不要裁切 */
  .atgseth-nav, .atgseth-header{ overflow:visible; }
}


@media (max-width:1200px){
  /* 列表間距、整體排版 */
  .atgseth-menu{ gap:12px !important; padding:12px 16px; }

  /* 每一個主項 → 膠囊 */
  .atgseth-menu > li > a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 2px 0 rgba(0,0,0,.35) inset, 0 8px 18px rgba(0,0,0,.18);
    color:#fff;
    font-size: 16px;
  }

  /* 右側箭頭（只有有子選單的才會出現，JS 會加 .has-sub） */
  .atgseth-menu > li > a.has-sub::after{
    content:"";
    margin-left:auto;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid #fff;   /* 預設是向下的 V */
    transition: transform .2s;
  }

  /* 展開狀態 → 翻轉成向上 */
  .atgseth-menu > li.open > a.has-sub::after{
    transform: rotate(180deg);   /* 變成︿ */
  }


  /* 子選單容器：預設收合，展開時出現 */
  .atgseth-menu > li > .menu_body{
    display: none;
    padding: 10px 12px 12px 14px;
  }
  .atgseth-menu > li.open > .menu_body{ display:block; }

  /* 子連結列表：簡潔的分隔線 */
  .atgseth-menu > li > .menu_body > ul.subOption{
    list-style:none; margin:0; padding:0;
    border-left: 2px solid rgba(255,255,255,.1);
  }
  .atgseth-menu > li > .menu_body > ul.subOption li > div > p{ margin:0; }
  .atgseth-menu > li > .menu_body > ul.subOption a{
    display:block;
    padding:10px 10px 10px 12px;
    font-size:15px; color:#e9eef5; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .atgseth-menu > li > .menu_body > ul.subOption li:last-child a{
    border-bottom:0;
  }
}

.atgseth-title {
    background: url(/userfiles/images/seth__img/icons/fgbutton-black.webp) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 123px;
    line-height: 123px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    margin: 0 auto 30px;
    font-family: '微軟正黑體', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.atgseth-title span {
    display: inline-block;
    position: relative;
    top: -15px; 
}

@media (max-width: 480px) {
  .atgseth-title {
    width: 100%;
    max-width: 340px;
    height: auto;
    background-size: 100% auto;
    line-height: normal;
    padding: 28px 0;
    font-size: 18px !important;
  }
}