/* ============================================================================
   ABYSECHO · 方案 B · 完整导航页（图 3）样式 — 可直接配置
   ----------------------------------------------------------------------------
   只改下面 :root 里的变量即可调整：配色 / 字体 / 条目排版 / 升出动画。
   结构见 nav-page.html，动画编排见 transitions.js。
   ============================================================================ */

:root{
  /* —— 配色 —— */
  --nav-bg-top:    #1b2c50;   /* 顶部夜空 */
  --nav-bg-bottom: #0a0f1a;   /* 底部深海 */
  --nav-ink:       #eef3ff;   /* 主文字（中文名） */
  --nav-dim:       #8298c2;   /* 次文字（英文 / 预留） */
  --nav-glow:      #9fb4e0;   /* 月光蓝（箭头 / 高光） */
  --nav-gold:      #dfe8ff;   /* 八芒星图标 */
  --nav-star-rgb:  238,243,255; /* 星点颜色（rgb，用于密度星空） */

  /* —— 字体 —— */
  --nav-font-cn: 'Noto Serif SC', serif;
  --nav-font-en: 'Cinzel', serif;

  /* —— 导航条目排版 —— */
  --nav-item-size:   27px;   /* 中文名字号 */
  --nav-item-en:     11px;   /* 英文字号 */
  --nav-item-gap:    44px;   /* 条目垂直间距 */
  --nav-indent-left: 48px;   /* 左偏条目缩进 */
  --nav-indent-right:196px;  /* 右偏条目缩进 */
  --nav-icon:        14px;   /* 星形图标尺寸 */

  /* —— 升出动画（从底部上滑 + 渐显；退出为反向） —— */
  --nav-rise-distance: 100%;                     /* 起始位移（屏高的 100% = 完全在屏外底部） */
  --nav-rise-duration: .72s;                     /* 位移时长 */
  --nav-fade-duration: .55s;                     /* 渐显时长 */
  --nav-ease:          cubic-bezier(.33,0,.18,1);/* 缓动曲线 */
}

/* —— 容器：默认在屏外底部、透明；加 .open 升起 —— */
.nav-page{
  position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(125% 95% at 50% 12%, var(--nav-bg-top), var(--nav-bg-bottom) 66%);
  color:var(--nav-ink);
  font-family:var(--nav-font-cn);
  /* 初始：在底部、透明、不接收点击 */
  transform:translateY(var(--nav-rise-distance));
  opacity:0;
  pointer-events:none;
  transition:
    transform var(--nav-rise-duration) var(--nav-ease),
    opacity   var(--nav-fade-duration) ease;
}
.nav-page.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* —— 背景特效（银河带 + 两团辉光 + 密度星空） —— */
.nav-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.nav-band{
  position:absolute;top:-30px;left:-70px;width:580px;height:320px;transform:rotate(-26deg);
  background:linear-gradient(90deg,transparent,rgba(150,175,235,.10) 34%,rgba(170,190,240,.15) 54%,rgba(150,175,235,.09) 70%,transparent);
  filter:blur(20px);
}
.nav-glow-r{
  position:absolute;top:90px;right:-50px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,150,230,.18),transparent 68%);filter:blur(12px);
}
.nav-glow-l{
  position:absolute;bottom:60px;left:-30px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(130,160,230,.12),transparent 70%);filter:blur(12px);
}
.nav-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 12%,rgba(var(--nav-star-rgb),.85),transparent),
    radial-gradient(1px 1px at 20% 20%,rgba(var(--nav-star-rgb),.6),transparent),
    radial-gradient(1.2px 1.2px at 32% 8%,rgba(var(--nav-star-rgb),.7),transparent),
    radial-gradient(1px 1px at 44% 16%,rgba(var(--nav-star-rgb),.5),transparent),
    radial-gradient(1.3px 1.3px at 56% 10%,rgba(var(--nav-star-rgb),.6),transparent),
    radial-gradient(1px 1px at 68% 22%,rgba(var(--nav-star-rgb),.5),transparent),
    radial-gradient(1.4px 1.4px at 80% 14%,rgba(var(--nav-star-rgb),.65),transparent),
    radial-gradient(1px 1px at 90% 26%,rgba(var(--nav-star-rgb),.5),transparent),
    radial-gradient(1.2px 1.2px at 14% 36%,rgba(var(--nav-star-rgb),.55),transparent),
    radial-gradient(1px 1px at 36% 44%,rgba(var(--nav-star-rgb),.45),transparent),
    radial-gradient(1.3px 1.3px at 60% 40%,rgba(var(--nav-star-rgb),.55),transparent),
    radial-gradient(1px 1px at 82% 48%,rgba(var(--nav-star-rgb),.45),transparent),
    radial-gradient(1.2px 1.2px at 24% 60%,rgba(var(--nav-star-rgb),.5),transparent),
    radial-gradient(1px 1px at 50% 66%,rgba(var(--nav-star-rgb),.42),transparent),
    radial-gradient(1.3px 1.3px at 74% 62%,rgba(var(--nav-star-rgb),.5),transparent),
    radial-gradient(1px 1px at 16% 78%,rgba(var(--nav-star-rgb),.45),transparent),
    radial-gradient(1.2px 1.2px at 42% 84%,rgba(var(--nav-star-rgb),.48),transparent),
    radial-gradient(1px 1px at 66% 80%,rgba(var(--nav-star-rgb),.4),transparent),
    radial-gradient(1.3px 1.3px at 88% 88%,rgba(var(--nav-star-rgb),.45),transparent);
}

/* —— 状态栏 —— */
.nav-status{
  position:relative;z-index:4;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;font:600 14px var(--nav-font-cn);color:var(--nav-ink);
}
.nav-status .dots{font-size:11px;letter-spacing:1px}
.nav-status .batt{display:inline-block;width:20px;height:11px;border:1.4px solid var(--nav-ink);border-radius:3px;position:relative}
.nav-status .batt::after{content:"";position:absolute;inset:1.5px;width:62%;background:var(--nav-ink);border-radius:1px}
.nav-status .right{display:flex;gap:7px;align-items:center;opacity:.85}

/* —— 顶部上滑收起箭头（自带轻微上下浮动） —— */
.nav-close{
  position:relative;z-index:5;width:max-content;margin:0 auto;padding:10px 0 2px;cursor:pointer;
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  animation:nav-bob 2.4s ease-in-out infinite;
}
.nav-close svg{stroke:var(--nav-glow)}
@keyframes nav-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* —— 标题 —— */
.nav-title{
  position:relative;z-index:4;text-align:center;padding:6px 0 2px;
  font:500 13px var(--nav-font-en);letter-spacing:.34em;color:var(--nav-ink);padding-left:.34em;
}

/* —— 导航条目列表 —— */
.nav-page .nav-list{
  position:absolute;top:150px;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;gap:var(--nav-item-gap);padding:0 0 40px;
}
.nav-page .nav-item{
  display:flex;align-items:center;gap:13px;text-decoration:none;cursor:pointer;
}
.nav-page .nav-item.left {margin-left:var(--nav-indent-left)}
.nav-page .nav-item.right{margin-left:var(--nav-indent-right)}
.nav-page .nav-item .star{width:var(--nav-icon);height:var(--nav-icon);color:var(--nav-gold);filter:drop-shadow(0 0 6px rgba(159,180,224,.7));flex:none}
.nav-page .nav-item .cn{font:500 var(--nav-item-size) var(--nav-font-cn);letter-spacing:.14em;color:var(--nav-ink)}
.nav-page .nav-item .en{font:500 var(--nav-item-en) var(--nav-font-en);letter-spacing:.26em;color:var(--nav-dim)}

/* 预留 / 占位条目 */
.nav-page .nav-item.reserved{opacity:.4;cursor:default}
.nav-page .nav-item.reserved .ph{width:var(--nav-icon);height:var(--nav-icon);color:var(--nav-dim);flex:none}
.nav-page .nav-item.reserved .cn{font:300 14px var(--nav-font-cn);letter-spacing:.2em;color:var(--nav-dim)}