/* ========================================= */
/* nBUN Global Nav — v6.3.1 Mobile Fix     */
/* 特色：修復手機版遮罩導致文字消失的問題   */
/* ========================================= */

:root {
  /* --- 1. 介面尺寸設定 (UI Dimensions) --- */
  --nbun-ui-height: 40px; 
  --nbun-ui-radius: 2px;  
  
  /* --- 2. 裝置縮放設定 (Scale) --- */
  --nbun-device-scale: 1; 
  
  /* --- 3. 版面間距設定 (Spacing) --- */
  --nbun-layout-gap: 4px; 
  
  /* --- 4. 背景與毛玻璃設定 (Backgrounds) --- */
  --nbun-bg-custom: rgba(1, 1, 1, 0.06); 
  --nbun-blur-custom: 20px; 
  
  /* --- 5. 瓢蟲專屬設定 (Ladybug) --- */
  --nbun-glass-bug-color: rgba(0, 0, 0, 0.6); 

  /* --- 6. 字體設定 (Fonts) --- */
  --nbun-font: 'Google Sans Code', monospace;
  --nbun-font-preview: 'Google Sans Flex', sans-serif;
  
  /* --- 7. 顏色配置 (Colors) --- */
  --nbun-accent-color: rgba(224, 255, 0, 0.9); 
  --nbun-btn-orange: #fff;      
  
  --nbun-text-idle: rgba(255, 255, 255, 1); 
  --nbun-text-active: #888;     

  /* --- 8. 寬度響應式設定 (Responsive Width) --- */
  --nbun-nav-min: 260px;   
  --nbun-nav-ideal: 88vw;  
  --nbun-nav-max: 460px;   
  
  --nbun-nav-width: clamp(var(--nbun-nav-min), var(--nbun-nav-ideal), var(--nbun-nav-max));
  
  /* --- 9. 底部定位 (Position) --- */
  --nbun-spn-bottom: 30px; 
}

/* --- 桌機版覆蓋設定 --- */
@media (min-width:768px){
  :root{
    --nbun-device-scale: 1.25; 
    --nbun-nav-min: 380px;   
    --nbun-nav-ideal: 24vw;  
    --nbun-nav-max: 560px;   
    --nbun-spn-bottom: 60px; 
  }
}

html.nbun-spn-expanded{ 
    --nbun-spn-bottom: 80px; 
}

/* ========================================= */
/* 主容器 (Main Container)                 */
/* ========================================= */
.nbun-gn{
  position:fixed; 
  left:50%;       
  bottom:var(--nbun-spn-bottom); 
  transform: translateX(-50%) scale(calc(var(--nbun-spn-scale, 1) * var(--nbun-device-scale, 1)));
  transform-origin:center bottom; 
  z-index:105000; 
  
  display:flex; 
  flex-direction:column; 
  justify-content: flex-end; 
  align-items:center; 
  
  gap: var(--nbun-layout-gap); 
  
  pointer-events:none; 
  overflow:visible; 
  width: var(--nbun-nav-width); 
  
  font-family: var(--nbun-font) !important; 
  font-weight: 400 !important; 
  transition: bottom 0.3s ease; 
}

.nbun-gn > * { width: 100%; position: relative; } 

.nbun-gn-row { order: 2; pointer-events: auto; } 
.nbun-gn__cats-slot, .nbun-gn-previewmeta { order: 1; pointer-events: auto; } 

.nbun-gn.is-hidden .nbun-gn-row { 
    transform: translateY(150%); 
    opacity: 0; 
    pointer-events: none; 
}

.nbun-gn-row {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%; 
  gap: 8px; 
  transform: translateY(0); opacity: 1; 
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease; 
}

/* ========================================= */
/* 左側軌道樣式 (Track Style)              */
/* ========================================= */
.nbun-spn-track {
  flex: 1; 
  display: flex; 
  align-items: center; 
  position: relative; 
  height: var(--nbun-ui-height); 
  border-radius: var(--nbun-ui-radius); 
  
  background: var(--nbun-bg-custom); 
  backdrop-filter: blur(var(--nbun-blur-custom)); 
  -webkit-backdrop-filter: blur(var(--nbun-blur-custom)); 
  
  border: none; 
  box-shadow: none; 
  overflow: hidden; 
  cursor: grab; 
  
  /* Mask applied to children via Mask Layer now */
}
.nbun-spn-track:active { cursor: grabbing; }

/* ========================================= */
/* FIX: 新增遮罩層 (Mask Layer)             */
/* ========================================= */
.nbun-strip-masker {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; /* Fill the track viewport */
    overflow: hidden;
    mask-image: none; -webkit-mask-image: none;
    pointer-events: auto; /* Allow clicks to pass through to buttons */
    will-change: mask-image;
}

/* --- 改良版動態遮罩邏輯 (Fixed Smart Mask) --- */
/* 將遮罩應用於固定的 Mask Layer，確保漸層始終在螢幕邊緣 */

/* Start: 右邊淡出 */
.nbun-spn-track[data-mask="start"] .nbun-strip-masker {
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}

/* End: 左邊淡出 */
.nbun-spn-track[data-mask="end"] .nbun-strip-masker {
    mask-image: linear-gradient(to right, transparent 0%, black 40px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px);
}

/* Both: 兩邊淡出 */
.nbun-spn-track[data-mask="both"] .nbun-strip-masker {
    mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}

/* ========================================= */
/* 內容卷軸 (Scroll Strip)                 */
/* ========================================= */
.nbun-track-scroll-strip {
    display: flex; 
    align-items: center; 
    position: absolute; 
    left: 0; top: 0; height: 100%; 
    
    width: max-content; 
    min-width: 100%; 
    
    padding: 0 40px; 
    gap: 5px; 
    
    transition: transform 0.1s linear; 
    will-change: transform; 
    
    /* REMOVED: Old mask logic was here */
}

/* --- 裝飾元件 --- */
.nbun-track-dots {
    flex: 0 0 40px; 
    height: 100%; 
    background-image: radial-gradient(circle, rgba(255,255,255,0.8) 1.0px, transparent 1.0px);
    background-size: 6px 100%; 
    background-position: center; 
    background-repeat: repeat-x; 
}

/* --- 文字按鈕項目 --- */
.nbun-track-item {
    background: transparent; 
    border: none; 
    padding: 2px 8px; margin: 0; 
    
    font-family: var(--nbun-font); 
    font-size: 10px; 
    font-weight: 300; 
    letter-spacing: 0.2px; 
    
    color: var(--nbun-text-idle); 
    border-radius: 99px; 
    
    cursor: pointer; 
    white-space: nowrap; 
    transition: all 0.3s; 
}
.nbun-track-item:hover { color: #fff; }

.nbun-track-item.is-active { 
    color: #333; 
    font-weight: 300; 
    background: var(--nbun-accent-color); 
}

/* ========================================= */
/* 毛玻璃瓢蟲 (Glass Ladybug)              */
/* ========================================= */
.nbun-spn-thumb {
  position: absolute; 
  top: 50%; left: 0; 
  width: 40px; height: 40px; 
  transform: translate(-50%, -50%); 
  z-index: 20; 
  display: flex; align-items: center; justify-content: center; 
  pointer-events: none; 
}

.nbun-ladybug-rotate { 
    width: 36px; height: 36px; 
    position: relative; 
    display: flex; align-items: center; justify-content: center; 
}

#nbunLadybugSvg { 
    width: 28px; height: 28px; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); 
}

.nbun-glass-body {
    position: absolute; inset: 0; 
    background: var(--nbun-glass-bug-color); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    mask-size: 100% 100% !important; 
    -webkit-mask-size: 100% 100% !important;
    mask-repeat: no-repeat; 
    mask-position: center; 
    z-index: 1; 
}

.nbun-glass-outline { 
    position: absolute; inset: 0; 
    z-index: 2; 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); 
}

.nbun-glass-outline path { 
    fill: none; 
    stroke: rgba(224, 255, 0, 0.9); 
    stroke-width: 0.1px; 
    vector-effect: non-scaling-stroke; 
}

/* ========================================= */
/* 控制按鈕 (Menu & Preview Buttons)       */
/* ========================================= */
.nbun-gn-menu-btn {
  flex: 0 0 var(--nbun-ui-height); height: var(--nbun-ui-height); 
  display: flex; align-items: center; justify-content: center;
  
  background: var(--nbun-bg-custom); 
  backdrop-filter: blur(var(--nbun-blur-custom)); 
  
  border: none; border-radius: var(--nbun-ui-radius); 
  color: rgba(255,255,255,0.8); 
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nbun-gn-menu-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.nbun-icon-burger { display: block; } 
.nbun-icon-close { display: none !important; } 
.material-symbols-outlined { font-size: 24px; line-height: 1; }

.nbun-gn--mode-preview .nbun-track-scroll-strip,
.nbun-gn--mode-preview .nbun-spn-thumb { 
    opacity: 0; pointer-events: none; transition: opacity 0.2s; 
}
.nbun-gn--mode-preview .nbun-gn-menu-btn {
    width: var(--nbun-ui-height); height: var(--nbun-ui-height); 
    border-radius: 50% !important; 
    background: var(--nbun-bg-custom) !important; color: #fff;
}
.nbun-gn--mode-preview .nbun-icon-burger { display: none !important; }
.nbun-gn--mode-preview .nbun-icon-close { display: block !important; }

.nbun-gn-preview-view {
    background: var(--nbun-bg-custom); backdrop-filter: blur(var(--nbun-blur-custom));
    color: #fff; border: 0; cursor: pointer; 
    height: 85%; padding: 0 12px; border-radius: 999px; 
    font-family: var(--nbun-font-preview); font-size: 11px; 
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ========================================= */
/* 分類過濾器 (Filters)                    */
/* ========================================= */
.nbun-gn__cats-slot { 
    height: 0; opacity: 0; overflow: hidden; z-index: 10; 
    margin-top: 0 !important; 
    transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, opacity 0.1s linear 0.2s; 
}
.nbun-gn--mode-work .nbun-gn__cats-slot { 
    height: 35px; opacity: 1; 
    transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0s, opacity 0.1s linear 0s; 
}

.nbunpg-filters {
  display: flex; justify-content: center; align-items: center; width: 100%; height: 35px;
  padding: 0; gap: 2px; 
  background: transparent; backdrop-filter: none; 
  border: none; border-radius: 4px; 
  
  transform: translateY(-20px); opacity: 0; 
  transition: transform 0.3s ease 0s, opacity 0.2s ease 0s;
}
.nbun-gn--mode-work .nbunpg-filters { 
    transform: translateY(0); opacity: 1; 
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, opacity 0.3s ease 0.15s; 
}

.nbunpg-filters button {
  border: 0; cursor: pointer; flex: 1 1 auto; width: auto; min-width: 0; 
  background:  rgba(60, 30, 0, 0.8);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(1px);
  border-radius: 2px; color: rgba(255, 255, 255, 0.8); 
  font-family: 'Google Sans Code', monospace; font-size: 11px; 
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 300 !important; 
  height: 100%; padding: 0 8px; display: flex; justify-content: center; align-items: center; 
  white-space: nowrap; overflow: hidden; 
  transition: background .2s ease, color .2s ease;
}
.nbunpg-filters button:hover { background: rgba(60, 30, 0, 0.95); color: #edff00; }
.nbunpg-filters button.is-active { background: rgba(224, 250, 0, 0.8); color: #4f2a0e; } 

/* ========================================= */
/* 預覽資訊面板 (Preview Panels)           */
/* ========================================= */
.nbun-gn__preview-slot { position: absolute; inset: 0; z-index: 100; display: none; }
.nbun-gn--mode-preview .nbun-gn__preview-slot { display: block; }

.nbun-gn-previewbar { 
    position: absolute; inset: 0; padding: 4px 6px; 
    display: flex; align-items: center; justify-content: space-between; 
}
.nbun-gn-preview-nav-group { display: flex; align-items: center; gap: 6px; height: 100%; }

.nbun-gn-preview-prev, .nbun-gn-preview-next {
    background: transparent; color: rgba(255,255,255,0.8); 
    border: 0; cursor: pointer; height: 100%; aspect-ratio: 1/1; 
    border-radius: var(--nbun-ui-radius); 
    display: flex; align-items: center; justify-content: center;
}

.nbun-gn-previewmeta {
    height: 0; opacity: 0; overflow: hidden; width: 100%; margin-top: 0 !important;
    background: var(--nbun-bg-custom); backdrop-filter: blur(var(--nbun-blur-custom));
    border: none; border-radius: var(--nbun-ui-radius);
    padding: 0 20px; transition: height 0.4s, opacity 0.1s; 
}
.nbun-gn--mode-preview .nbun-gn-previewmeta { height: 50px; opacity: 1; }

.nbun-meta-content { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.nbun-pm-line { color:#fff; font-size:11px; font-family: var(--nbun-font-preview); }

html, body{ overflow-x:hidden; }
}