/* ==========================================================================
   GRIT · 导航条黑金化 + 灵动岛 + 金色流体字（grit-nav-gold.css）
   --------------------------------------------------------------------------
   作用范围：**只 ≥1600px（PC）**；≤1280 平板/手机保持现状（下一轮再做）。
   改了什么：
     1) 顶部导航条：深灰玻璃 → 黑金（近黑底 + 金线 + 金色描边按钮）
     2) 灵动岛：导航项右侧、窗口点左侧，显示 时间 / 日期 / 同步状态 / 正在播放
        （收起 200px，hover 或点击展开；播放音乐时出现声波）
     3) 金色流体字：品牌 / 9 个导航项 / hero 大标题 / 板块标题
        机制 = 你给的 text-gradient-flow（background-position 流动 + background-clip: text），
        配色换成黑金系（去掉了原来的紫/蓝 #6366f1 #ec4899 #8b5cf6）
   关闭方法：删掉各页 <link href="./grit-nav-gold.css"> 与 <script src="./grit-nav-gold.js">。
   -------------------------------------------------------------------------- */

@keyframes gngGoldFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes gngPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@keyframes gngWave {
  0%, 100% { height: 4px; }
  50%      { height: 13px; }
}

/* 默认（<1600px，平板/手机）完全不出现：本轮只改 PC。
   注意必须有这条基础 display:none，否则元素会以默认 display:block 出现在导航条里。 */
.grit-island { display: none; }

@media (min-width: 1600px) {
  /* ====================== 1. 导航条：黑金 ====================== */
  .app-header {
    background-color: #0b090b;     /* 兜底纯色（渐变图不支持时也不会白底） */
    background-image:
      radial-gradient(120% 220% at 14% -50%, rgba(255, 215, 106, 0.16), transparent 62%),
      linear-gradient(180deg, #191208 0%, #0b090b 100%);
    border-bottom: 1px solid rgba(232, 160, 32, 0.45);
    box-shadow:
      0 12px 44px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 215, 106, 0.20);
  }
  /* 底边一条会呼吸的金线 */
  .app-header::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent,
      rgba(255, 215, 106, 0.80) 22%,
      rgba(232, 160, 32, 0.95) 50%,
      rgba(255, 215, 106, 0.80) 78%,
      transparent);
  }

  /* 系统按钮：访客 / 齿轮 换金边暗底（窗口三色点保持原样） */
  .app-header .auth-entry {
    background: rgba(232, 160, 32, 0.10);
    border-color: rgba(232, 160, 32, 0.42);
    color: #FFE9B0;
  }
  .app-header .auth-entry:hover {
    background: rgba(232, 160, 32, 0.18);
    border-color: rgba(255, 215, 106, 0.72);
    box-shadow: 0 8px 22px rgba(232, 160, 32, 0.20);
  }
  .app-header .auth-entry .auth-label { color: #FFE9B0; }
  .app-header #gf-gear {
    background: rgba(232, 160, 32, 0.10);
    border: 1px solid rgba(232, 160, 32, 0.42);
    color: #FFE9B0;
  }
  .app-header #gf-gear:hover {
    background: rgba(232, 160, 32, 0.22);
    border-color: rgba(255, 215, 106, 0.72);
    color: #FFF6D8;
  }

  /* ====================== 2. 金色流体字 ====================== */
  /* 兜底：不支持 background-clip:text 时是静态金 */
  .brand.grit-gold,
  .top-nav a.grit-gold,
  .hero-title.grit-gold,
  .ash-title.grit-gold { color: #E8A020; }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* —— 深色底上的亮金（品牌 / 导航 / 深色 hero 大标题） —— */
    .grit-gold {
      background-image: linear-gradient(100deg,
        #FFF6D8 0%, #FFE08A 12%, #E8A020 26%, #FFC94A 38%,
        #FFF3C4 52%, #FFD76A 66%, #E8A020 82%, #FFF6D8 100%);
      background-size: 300% 100%;
      background-position: 0% 50%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gngGoldFlow var(--gng-dur, 6s) linear infinite;
      animation-delay: var(--gng-delay, 0s);
    }
    /* —— 浅底上的暗金（板块标题等，保证对比度；由 JS 按背景亮度选） —— */
    .grit-gold--deep {
      background-image: linear-gradient(100deg,
        #3E2200 0%, #6B3A00 14%, #A05E00 30%, #7A4600 44%,
        #8A5200 58%, #A05E00 74%, #3E2200 100%);
      background-size: 300% 100%;
      background-position: 0% 50%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gngGoldFlow var(--gng-dur, 7s) linear infinite;
      animation-delay: var(--gng-delay, 0s);
    }
  }

  /* 导航项：默认略暗，hover 提亮，当前页最快 */
  .top-nav a.grit-gold { --gng-dur: 9s; filter: brightness(0.88); }
  .top-nav a.grit-gold:hover { filter: brightness(1.2) saturate(1.08); }
  .top-nav a.grit-gold[aria-current="page"] {
    --gng-dur: 3.6s;
    filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 215, 106, 0.35));
  }
  .brand.grit-gold { --gng-dur: 5s; filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.22)); }
  .hero-title.grit-gold { --gng-dur: 5.5s; }

  /* ====================== 3. 灵动岛 ====================== */
  .grit-island {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: 50%;                       /* JS 会按导航与右侧按钮之间的空隙覆盖 */
    width: 148px;
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    z-index: 3;
    background:
      radial-gradient(120% 160% at 18% -20%, rgba(255, 215, 106, 0.14), transparent 58%),
      #050404;
    border: 1px solid rgba(232, 160, 32, 0.38);
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 215, 106, 0.16);
    color: #FFE9B0;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    transition:
      width 0.34s cubic-bezier(0.34, 1.2, 0.64, 1),
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }
  .grit-island:hover,
  .grit-island.is-open {
    width: var(--gi-expanded, 300px);
    border-color: rgba(255, 215, 106, 0.68);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 215, 106, 0.18),
      inset 0 1px 0 rgba(255, 215, 106, 0.22);
  }
  .grit-island .gi-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 8px rgba(40, 200, 64, 0.8);
    animation: gngPulse 2.6s ease-in-out infinite;
  }
  .grit-island .gi-time {
    flex: 0 0 auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: #FFF6D8;
  }
  .grit-island .gi-date {
    flex: 0 0 auto;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    color: #E8A020;
    transition: max-width 0.34s ease, opacity 0.26s ease 0.04s;
  }
  .grit-island:hover .gi-date,
  .grit-island.is-open .gi-date {
    max-width: 150px;
    opacity: 0.92;
  }
  .grit-island .gi-extra {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 232, 176, 0.72);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.28s ease 0.06s, transform 0.3s ease;
  }
  .grit-island:hover .gi-extra,
  .grit-island.is-open .gi-extra {
    opacity: 1;
    transform: none;
  }
  .grit-island .gi-waves {
    display: none;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-left: auto;
  }
  .grit-island.is-playing .gi-waves { display: flex; }
  .grit-island .gi-waves i {
    width: 2px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to top, #E8A020, #FFF6D8);
    animation: gngWave 0.9s ease-in-out infinite;
  }
  .grit-island .gi-waves i:nth-child(2) { animation-delay: -0.22s; }
  .grit-island .gi-waves i:nth-child(3) { animation-delay: -0.44s; }
  .grit-island .gi-waves i:nth-child(4) { animation-delay: -0.66s; }

  /* 窄一点的大屏（1600~1750）灵动岛收窄，避免挤到系统按钮 */
  @media (max-width: 1750px) {
    .grit-island { width: 132px; gap: 6px; padding: 0 10px; }
    .grit-island:hover, .grit-island.is-open { width: var(--gi-expanded, 240px); }
  }
}

/* ====================== 降级：减弱动效 ====================== */
@media (prefers-reduced-motion: reduce) {
  .grit-island,
  .grit-island .gi-dot,
  .grit-island .gi-waves i { animation: none !important; }
  .brand.grit-gold,
  .top-nav a.grit-gold,
  .hero-title.grit-gold,
  .ash-title.grit-gold { animation: none !important; }
}
/* 齿轮设置里的「动效」开关 */
html.gf-no-motion .grit-island,
html.gf-no-motion .grit-island .gi-dot,
html.gf-no-motion .grit-island .gi-waves i,
html.gf-no-motion .brand.grit-gold,
html.gf-no-motion .top-nav a.grit-gold,
html.gf-no-motion .hero-title.grit-gold,
html.gf-no-motion .ash-title.grit-gold { animation: none !important; }

/* ==========================================================================
   v12 · 球场地板 + 内容悬浮 + PC 内容区让位（全局，仅 ≥1600px 生效）
   目标：白色不再是浮在球场上的「纸片」，而是球场中央的浅色地板；
        卡片 / 标题 / 正文浮在地板之上。
   ========================================================================== */
@media (min-width: 1600px) {
  /* ---------- 1. 去掉 main 的白纸背景（含 v9 的半透明 + 羽化） ---------- */
  main,
  main#main-content {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ---------- 2. 球场地板：中央浅色地面，边缘无缝过渡到黑场 ---------- */
  .court-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(74% 62% at 50% 44%,
        rgba(250, 249, 246, 0.97) 0%,
        rgba(249, 246, 240, 0.94) 30%,
        rgba(245, 241, 233, 0.80) 50%,
        rgba(239, 233, 223, 0.44) 66%,
        rgba(239, 233, 223, 0.00) 81%);
  }
  /* 极淡木纹（只在地板范围内可见） */
  .court-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background: repeating-linear-gradient(92deg,
      rgba(150, 120, 80, 0.05) 0 2px,
      rgba(0, 0, 0, 0) 2px 44px);
    -webkit-mask-image: radial-gradient(64% 54% at 50% 44%, #000 0%, rgba(0, 0, 0, 0) 78%);
    mask-image: radial-gradient(64% 54% at 50% 44%, #000 0%, rgba(0, 0, 0, 0) 78%);
  }

  /* ---------- 3. 悬浮感（中）：卡片加厚投影，正文浮在地板上 ---------- */
  main .glass-panel,
  main .brain-layer,
  main .atelier-hero {
    box-shadow:
      0 22px 48px rgba(24, 16, 8, 0.20),
      0 6px 14px rgba(24, 16, 8, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }
  main .brain-layer:hover {
    box-shadow:
      0 28px 60px rgba(24, 16, 8, 0.26),
      0 8px 18px rgba(24, 16, 8, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
  }
  /* 正文与标题轻微抬升（不改字色与对比度） */
  main p,
  main .bl-desc,
  main .ash-eyebrow {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  /* ---------- 4. 内容区让位：宽度由 JS 写 --gf-content-w（保证不被左侧卡片压住） ---------- */
  main#main-content {
    max-width: var(--gf-content-w, 1280px) !important;
  }
}

/* ==========================================================================
   v13 · 导航交互（常态白 → hover 金流）/ 底部金线改淡金阴影 / 隐藏已同步条
        + 板块卡标题 hover 金流 + 视差层基础设置
   ========================================================================== */
@media (min-width: 1600px) {
  /* 导航项：日常白色；hover 才金色流体（品牌 GRIT. 保持金流不变） */
  .top-nav a.grit-gold {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: rgba(255, 255, 255, 0.88) !important;
    animation: none !important;
    filter: none !important;
    transition: color .16s ease, text-shadow .2s ease;
  }
  .top-nav a.grit-gold[aria-current="page"] {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, .18);
  }
  .top-nav a.grit-gold:hover,
  .top-nav a.grit-gold:focus-visible {
    color: transparent !important;
    background-image: linear-gradient(100deg,
      #FFF6D8 0%, #FFE08A 12%, #E8A020 26%, #FFC94A 38%,
      #FFF3C4 52%, #FFD76A 66%, #E8A020 82%, #FFF6D8 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: gngGoldFlow 4s linear infinite !important;
    text-shadow: none;
  }

  /* 导航底部金线 → 淡淡的金色阴影 */
  .app-header {
    border-bottom-color: transparent !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.48),
      0 7px 24px rgba(232, 160, 32, 0.20),
      inset 0 1px 0 rgba(255, 215, 106, 0.14) !important;
  }
  .app-header::after { display: none !important; }

  /* 已同步条：删除 */
  .grit-syncbar { display: none !important; }

  /* 板块卡（我的板块）标题：默认加粗深色；hover 金色流体（暗金，白卡上可读） */
  main .brain-layer .bl-name { transition: color .18s ease; }
  main .brain-layer:hover .bl-name {
    background-image: linear-gradient(100deg,
      #3E2200 0%, #6B3A00 14%, #A05E00 30%, #7A4600 44%,
      #8A5200 58%, #A05E00 74%, #3E2200 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gngGoldFlow 5s linear infinite;
  }

  /* 视差层：交由 grit-parallax.js 写 transform（只做位移，不改布局） */
  main .atelier-hero,
  main .brain-layer,
  main .glass-panel,
  main > .atelier-section-head {
    will-change: transform;
  }
}