/* 基本色：#fab818、#A9B84D、#49B68D */
:root{
  --gamemaster-yellow:#fab818;
  --gamemaster-yellow-d:#d19b14;
  --gamemaster-apple:#A9B84D;
  --gamemaster-apple-d:#8d9c3f;
  --gamemaster-teal:#49B68D;
  --gamemaster-teal-d:#3d9a78;
  --gamemaster-bg:#0f1115;       
  --gamemaster-card:#181b22;     
  --gamemaster-text:#e9eef5;
  --gap:24px;
}

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

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

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

/* 桌機選單 */
.gamemaster-nav{ inline-size:100%; }
.gamemaster-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;
}
.gamemaster-menu a{
  color:var(--gamemaster-text); text-decoration:none;
  font-size:15px; line-height:1; padding:10px 0; flex:0 0 auto;
}
.gamemaster-menu a:hover{ color:#fff; }

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


@media (min-width: 1201px) and (max-width: 1420px){
  .gamemaster-nav{ min-width: 0; }
  .gamemaster-menu{
    flex-wrap: nowrap !important;       /* 不換行 */
    white-space: normal !important;     /* 不換行 */
    overflow: visible;    
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;               /* 稍微縮小間距，視需要可再調 */
    padding-right: 20px;     /* 讓最後一顆不要貼邊 */
  }
  
  /* 隱藏捲軸外觀（不會出現灰灰的條） */
  .gamemaster-menu::-webkit-scrollbar{ height: 0; width: 0; display: none; }
  .gamemaster-menu{ scrollbar-width: none; }
  .gamemaster-menu li:last-child {margin: 0 10px;}
  }
  
/* 斷點：平板以下改漢堡 */
@media (max-width: 1200px){
  .gamemaster-inner{ grid-template-columns:auto auto; }
  .gamemaster-burger{ display:inline-block; justify-self:end; }
  .gamemaster-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;
  }
  .gamemaster-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;
  }
  .gamemaster-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .gamemaster-menu{
    flex-direction:column; align-items:stretch; gap:0 !important; padding:8px 16px;
  }
  .gamemaster-menu li + li{ border-top:1px solid rgba(255,255,255,.06); }
  .gamemaster-menu a{ padding:16px 4px; font-size:16px; }
  .gamemaster-cta{ margin-top:8px; text-align:center; }
  body.no-scroll{ overflow:hidden; }
}

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

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

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

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


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

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

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

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

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

  /* 手機上的 CTA 大小微調 */
  .gamemaster-cta-wrap .register-btn{
    width: 128px;
    font-size: 16px;
    padding: 10px 16px;
  }
  .register-btn {
    display: inline-block;
    margin: 0 auto;
    padding: 12px 24px;
    background: linear-gradient(180deg, #AE8451 0%, #F0CFA7 100%);
    box-shadow: 0px 4px 0px #816038, inset 0px -4px 4px #FEE3C1;
    border-radius: 100px;
    cursor: pointer;
    text-align: center;
    width: 150px;    
    font-size: 18px;
    font-weight: bold;
    border-style: none;
    color: #502222;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.register-btn:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 0px #5e4428, inset 0px -4px 6px #ffe8c9;
}

.register-btn:active {
    transform: scale(0.95);
    box-shadow: inset 0px 4px 6px rgba(0,0,0,0.4);
}


.register-btn::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);
}

/* 光暈動畫 */
.register-btn:hover::before {
    animation: shine 0.8s ease forwards;
}

@keyframes shine {
    from { left: -75%; }
    to   { left: 125%; }
}

}

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

/* ========== 桌機選單最後一顆 CTA 美化 & 不擠 ========== */
.gamemaster-menu{
  gap: 20px;               
}
.gamemaster-menu li:last-child{ 
  display: flex;
    justify-content: center;
}


.gamemaster-menu .gamemaster-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, #AE8451 0%, #F0CFA7 100%);
  color: #502222 !important;
  box-shadow: 0 6px 0 #816038, inset 0 -4px 6px #FEE3C1, 0 10px 24px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
  position: relative;      
  overflow: hidden; 
}

.gamemaster-menu .gamemaster-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;
}

.gamemaster-menu .gamemaster-cta::after{
  content: "›";            
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.gamemaster-menu .gamemaster-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 0 #5e4428, inset 0 -4px 8px #ffe8c9, 0 14px 28px rgba(0,0,0,.18);
  filter: saturate(1.05);
}

.gamemaster-menu .gamemaster-cta:hover::before{
  animation: gamemasterShine .8s ease forwards;
}

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

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

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


/* 讓整排選單不換行、必要時可水平滑動（避免最後一顆被擠壞） */
.gamemaster-nav{ min-width: 0; }
.gamemaster-menu::-webkit-scrollbar{ height: 6px; }
.gamemaster-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){
  .gamemaster-nav .gamemaster-menu{ gap:14px; align-items:center; }
  .gamemaster-nav .gamemaster-menu > li{ position:relative; }

  /* 膠囊 */
  .gamemaster-nav .gamemaster-menu > li > a{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 18px;
    border-radius:999px;
    font-weight:600; letter-spacing:.2px;
    background:linear-gradient(180deg,#AE8451 0%,#F0CFA7 100%);
    color:#2b1a10 !important;
    white-space:nowrap; text-decoration:none;
    box-shadow:0 4px 0 #816038, inset 0 -3px 5px #FEE3C1;
    transition:transform .15s, box-shadow .15s, filter .15s;
  }
  .gamemaster-nav .gamemaster-menu > li > a:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 0 #6d5233, inset 0 -3px 6px #ffe9cd, 0 8px 20px rgba(0,0,0,.15);
    filter:saturate(1.02);
  }

  /* 有子選單的箭頭（若擔心 :has，相同規則再複製一份給 .has-submenu） */
  .gamemaster-nav .gamemaster-menu > li:has(> .menu_body > ul.subOption) > a,
  .gamemaster-nav .gamemaster-menu > li.has-submenu > a{
    padding-right:30px;
  }
  .gamemaster-nav .gamemaster-menu > li:has(> .menu_body > ul.subOption) > a::after,
  .gamemaster-nav .gamemaster-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 #50341f;
  }

  /* 下拉：緊貼母項＋橋接，避免 hover 斷掉 */
  .gamemaster-nav .gamemaster-menu > li > .menu_body{
    display:none !important;
    position:absolute; left:0; top:100%;    /* ← 緊貼 */
    margin-top:10px;                        /* 視覺間距 */
    z-index:2000;
    background:#171a20ee; backdrop-filter:blur(4px);
    border-radius:14px; padding:10px; min-width:260px;
    box-shadow:0 14px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
    overflow:visible;                        /* 保留上緣橋接區 */
  }
  .gamemaster-nav .gamemaster-menu > li > .menu_body:empty{ display:none !important; }
  .gamemaster-nav .gamemaster-menu > li > .menu_body::before{
    content:""; position:absolute; left:0; right:0; top:-10px; height:10px; /* 橋的高度 = margin-top */
  }

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

  /* 只允許直向捲動，禁止橫向；內容長就換行 */
  .gamemaster-nav .gamemaster-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;
  }
  .gamemaster-nav .gamemaster-menu > li > .menu_body > ul.subOption::-webkit-scrollbar:horizontal{ height:0; }

  .gamemaster-nav .gamemaster-menu > li > .menu_body > ul.subOption li > div > p{ margin:0; }
  .gamemaster-nav .gamemaster-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;             /* ← 移除位移動畫 */
  }
  .gamemaster-nav .gamemaster-menu > li > .menu_body > ul.subOption a:hover,
  .gamemaster-nav .gamemaster-menu > li > .menu_body > ul.subOption a:focus{
    background:rgba(255,255,255,.08);
  }

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


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

  /* 每一個主項 → 膠囊 */
  .gamemaster-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） */
  .gamemaster-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;
  }

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


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

  /* 子連結列表：簡潔的分隔線 */
  .gamemaster-menu > li > .menu_body > ul.subOption{
    list-style:none; margin:0; padding:0;
    border-left: 2px solid rgba(255,255,255,.1);
  }
  .gamemaster-menu > li > .menu_body > ul.subOption li > div > p{ margin:0; }
  .gamemaster-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);
  }
  .gamemaster-menu > li > .menu_body > ul.subOption li:last-child a{
    border-bottom:0;
  }

  /* CTA 維持原本金色膠囊樣式（避免被上面覆蓋） */
  .gamemaster-menu .gamemaster-cta{
    margin-top:4px;
    background: linear-gradient(180deg, #AE8451 0%, #F0CFA7 100%);
    color:#502222 !important;
    box-shadow: 0 6px 0 #816038, inset 0 -4px 6px #FEE3C1, 0 10px 24px rgba(0,0,0,.15);
  }
}