/* ==========================================================================
   Fate Hub · Polish Layer 2026
   统一美化覆盖层 —— 只做增强，不改变结构与交互
   加载顺序：所有页面在最后引入本文件（核心 / 页面 / protection / player 之后）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌：表面分级 + 精修阴影
   原系统的阴影偏"重"，这里改为更接近真实光线的双层结构：
   一层近距离接触阴影（贴边）+ 一层远距离环境阴影（弥散）
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --pw-surface-1: #171e2b;
  --pw-surface-2: #1e2735;
  --pw-surface-3: #263141;

  --pw-edge-light: rgba(255, 255, 255, 0.07);
  --pw-edge-strong: rgba(255, 255, 255, 0.14);

  --pw-shadow-1: 0 1px 0 var(--pw-edge-light) inset, 0 1px 2px rgba(0, 0, 0, 0.32),
    0 10px 26px -14px rgba(0, 0, 0, 0.7);
  --pw-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 2px 4px rgba(0, 0, 0, 0.36),
    0 18px 44px -18px rgba(0, 0, 0, 0.8);

  --pw-hairline: rgba(255, 255, 255, 0.06);
  --pw-hairline-strong: rgba(255, 255, 255, 0.12);

  --pw-text-strong: #f7fafc;
  --pw-text-soft: #a9b6c9;
  --pw-text-faint: #6f7f95;

  --pw-radius-sm: 10px;
  --pw-radius: 16px;
  --pw-radius-lg: 22px;
}

:root[data-theme="light"] {
  --pw-surface-1: #ffffff;
  --pw-surface-2: #f6f8fb;
  --pw-surface-3: #eef2f8;

  --pw-edge-light: rgba(255, 255, 255, 0.9);
  --pw-edge-strong: rgba(148, 163, 184, 0.35);

  --pw-shadow-1: 0 1px 0 #fff inset, 0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 26px -16px rgba(15, 23, 42, 0.24);
  --pw-shadow-2: 0 1px 0 #fff inset, 0 2px 6px rgba(15, 23, 42, 0.08),
    0 24px 48px -20px rgba(15, 23, 42, 0.3);

  --pw-hairline: rgba(15, 23, 42, 0.08);
  --pw-hairline-strong: rgba(15, 23, 42, 0.16);

  --pw-text-strong: #0b1220;
  --pw-text-soft: #475569;
  --pw-text-faint: #64748b;
}

/* --------------------------------------------------------------------------
   2. 全局细节：排版精度与系统级控件
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: 0.01em;
}

/* 数字统一等宽，价格与评分不再跳动 */
.stat-value,
.feat-price,
.card-price-val,
.zone-count,
.spec-matrix-val,
[class*="price"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 自定义滚动条：细、低对比，不抢视觉 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pw-hairline-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--pw-hairline-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
  background-clip: content-box;
}

/* 文字选中：用品牌红，弱化默认蓝 */
::selection {
  background: var(--gta-glow);
  color: var(--pw-text-strong);
}

/* 焦点可见性：仅键盘触发，鼠标点击不出现描边 */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--gta-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 图片渐显，避免加载时闪白块 */
img {
  background-color: var(--pw-surface-2);
}

/* --------------------------------------------------------------------------
   3. 导航栏：加一条细高光边 + 当前项指示条
   -------------------------------------------------------------------------- */
.neu-navbar {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.neu-navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pw-hairline-strong) 18%,
    var(--pw-hairline-strong) 82%,
    transparent
  );
  pointer-events: none;
}

.neu-nav-item {
  position: relative;
  transition: color var(--trans-fast), background-color var(--trans-fast),
    transform var(--trans-fast);
}

.neu-nav-item:hover {
  transform: translateY(-1px);
}

/* 当前项底部小指示点，替代整块背景，视觉更克制 */
.neu-nav-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gta-primary), var(--rdr-primary));
  box-shadow: 0 0 8px var(--gta-glow);
}

/* 品牌头像：一圈极淡的描边，提升精致度 */
.neu-brand-avatar {
  box-shadow: 0 0 0 1px var(--pw-hairline-strong), var(--pw-shadow-1);
}

/* --------------------------------------------------------------------------
   4. 卡片系统：统一表面、统一悬停、统一边缘高光
   -------------------------------------------------------------------------- */
.neu-card {
  background: var(--pw-surface-1);
  border: 1px solid var(--pw-hairline);
  box-shadow: var(--pw-shadow-1);
  border-radius: var(--pw-radius);
  transition: transform var(--trans-normal), box-shadow var(--trans-normal),
    border-color var(--trans-normal);
}

.neu-card:hover {
  border-color: var(--pw-hairline-strong);
  box-shadow: var(--pw-shadow-2);
}

/* 只有"可点击"的卡片才上浮，避免说明性卡片乱动 */
.game-zone-card:hover,
.product-neu-card:hover,
.feat-card:hover,
.guide-card:hover {
  transform: translateY(-3px);
}

/* 卡片顶部一条渐变光带，强化科技感但不喧宾夺主 */
.game-zone-card::before,
.feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pw-edge-strong), transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* 专区卡片：把左侧 3px 纯色竖线换成更柔和的渐变 */
.game-zone-card {
  overflow: hidden;
}

/* 卡片内头像 / logo 底座：加内阴影，像嵌进卡面 */
.zone-icon-box,
.feat-logo-pod,
.card-logo-cell,
.detail-logo-stage {
  background: var(--pw-surface-3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 var(--pw-edge-light);
  border: 1px solid var(--pw-hairline);
}

:root[data-theme="light"] .zone-icon-box,
:root[data-theme="light"] .feat-logo-pod,
:root[data-theme="light"] .card-logo-cell,
:root[data-theme="light"] .detail-logo-stage {
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 0 #fff;
}

/* 悬停时 logo 轻微放大，给一点"活"的反馈 */
.game-zone-card:hover .zone-icon-box img,
.product-neu-card:hover .card-logo-cell img,
.feat-card:hover .feat-logo-pod img {
  transform: scale(1.06);
}
.zone-icon-box img,
.card-logo-cell img,
.feat-logo-pod img {
  transition: transform var(--trans-normal);
}

/* --------------------------------------------------------------------------
   5. 标签 / 胶囊：统一高度与对比，避免大小写混杂时视觉打架
   -------------------------------------------------------------------------- */
.zone-tag,
.neu-badge,
.card-category-tag,
.feat-tag,
.detail-type-tag {
  border: 1px solid var(--pw-hairline);
  background: var(--pw-surface-3);
  color: var(--pw-text-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}

.zone-tag:hover {
  border-color: var(--pw-hairline-strong);
  color: var(--pw-text-strong);
}

/* --------------------------------------------------------------------------
   6. 按钮：主按钮加顶部高光，次按钮加内描边，按压有回落
   -------------------------------------------------------------------------- */
.neu-btn {
  transition: transform var(--trans-fast), box-shadow var(--trans-fast),
    background-color var(--trans-fast), border-color var(--trans-fast);
}

.neu-btn:hover {
  transform: translateY(-1px);
}

.neu-btn:active {
  transform: translateY(0) scale(0.985);
}

/* 主按钮：只叠加顶部内高光，绝不碰 background——
   原样式用 background shorthand 铺品牌渐变，覆盖 background-image 会把按钮整块抽白。 */
.neu-btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 18px -8px var(--gta-glow);
}

.neu-btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -10px var(--gta-glow);
}

.neu-btn-gold {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px -8px var(--rdr-glow);
}

.neu-btn-gold:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 26px -10px var(--rdr-glow);
}

/* 卡片内的次要按钮：更像"可点的凹槽" */
.card-action-btn,
.feat-action-btn {
  border: 1px solid var(--pw-hairline-strong);
  transition: background-color var(--trans-fast), border-color var(--trans-fast),
    transform var(--trans-fast);
}

.card-action-btn:hover,
.feat-action-btn:hover {
  border-color: var(--gta-primary);
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   7. 分类页：筛选条溢出提示 + 卡片底栏对齐
   -------------------------------------------------------------------------- */
.type-filter-list {
  position: relative;
  padding-bottom: 6px;
  /* 只淡化右边缘：左侧是起点，淡掉会把第一个胶囊切虚 */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}

.category-type-pill {
  border: 1px solid var(--pw-hairline);
  transition: transform var(--trans-fast), border-color var(--trans-fast),
    color var(--trans-fast), background-color var(--trans-fast);
}

.category-type-pill:hover {
  transform: translateY(-1px);
  border-color: var(--pw-hairline-strong);
  color: var(--pw-text-strong);
}

/* 卡片底栏：始终贴底，网格里高度不同的卡片也能对齐 */
.product-neu-card {
  transition: transform var(--trans-normal), box-shadow var(--trans-normal),
    border-color var(--trans-normal);
}

.card-bottom-bar {
  border-top: 1px solid var(--pw-hairline);
  margin-top: auto;
  padding-top: 14px;
}

.card-title {
  letter-spacing: 0;
}

.card-intro {
  color: var(--pw-text-soft);
  line-height: 1.72;
}

/* 价格：数字放大、单位弱化 */
.card-price-val,
.feat-price {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   8. 详情页：规格矩阵斑马纹 + 评分条发光 + 提示块柔化
   -------------------------------------------------------------------------- */
.spec-matrix-item {
  transition: background-color var(--trans-fast);
  border-radius: var(--pw-radius-sm);
}

/* 按"行"着色而不是隔格着色：3 列网格里 odd 会形成斜条纹，很碎。
   从第 4 格起上色，等价于第二行整体一层底色。 */
.spec-matrix-item:nth-child(n + 4) {
  background: var(--pw-surface-2);
}

.spec-matrix-item:hover {
  background: var(--pw-surface-3);
}

.spec-matrix-kicker {
  color: var(--pw-text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

.spec-matrix-val {
  color: var(--pw-text-strong);
}

.detail-section-card {
  background: var(--pw-surface-1);
  border: 1px solid var(--pw-hairline);
  box-shadow: var(--pw-shadow-1);
}

.detail-sec-header {
  border-bottom: 1px solid var(--pw-hairline);
}

/* 侧栏：吸附时加一层渐隐分隔，滚动视线更干净 */
.detail-sidebar-card {
  box-shadow: var(--pw-shadow-2);
}

/* --------------------------------------------------------------------------
   9. 首页：区块节奏与 FAQ
   -------------------------------------------------------------------------- */
.section-eyebrow {
  letter-spacing: 0.22em;
  color: var(--pw-text-faint);
}

.section-heading {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* FAQ 折叠条：像一层层堆叠的卡片 */
.faq-item {
  border: 1px solid var(--pw-hairline);
  border-radius: var(--pw-radius-sm);
  background: var(--pw-surface-2);
  transition: border-color var(--trans-fast), background-color var(--trans-fast);
}

.faq-item:hover {
  border-color: var(--pw-hairline-strong);
  background: var(--pw-surface-3);
}

.faq-item summary {
  cursor: pointer;
}

/* 统计小卡：数字高亮 */
.stat-value {
  letter-spacing: -0.02em;
  color: var(--pw-text-strong);
}

.stat-label {
  color: var(--pw-text-faint);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   10. 浅色模式专项修正
   浅色下最缺"层次"，用更强的表面分离 + 更实的边界补回来
   -------------------------------------------------------------------------- */
:root[data-theme="light"] body {
  background-color: #eef2f7;
}

:root[data-theme="light"] .neu-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.07);
}

:root[data-theme="light"] .neu-navbar {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 6px 22px -18px rgba(15, 23, 42, 0.5);
}

:root[data-theme="light"] .zone-tag,
:root[data-theme="light"] .neu-badge,
:root[data-theme="light"] .card-category-tag,
:root[data-theme="light"] .feat-tag {
  background: #eef2f7;
  border-color: rgba(15, 23, 42, 0.08);
  color: #334155;
}

:root[data-theme="light"] .card-intro {
  color: #475569;
}

/* 浅色下红色渐变标题对比不足，加深一档 */
:root[data-theme="light"] .section-heading,
:root[data-theme="light"] .category-title,
:root[data-theme="light"] .detail-title-main {
  color: #0b1220;
}

/* --------------------------------------------------------------------------
   11. 动效：克制的进场节奏，尊重系统"减少动态效果"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .neu-card,
  .game-zone-card,
  .product-neu-card,
  .feat-card,
  .guide-card,
  .detail-section-card {
    animation: pw-rise 0.42s var(--ease-spring) both;
  }

  /* 同排卡片错峰 40ms，避免整片同时弹出 */
  .neu-card:nth-child(2) { animation-delay: 0.04s; }
  .neu-card:nth-child(3) { animation-delay: 0.08s; }
  .neu-card:nth-child(4) { animation-delay: 0.12s; }
  .product-neu-card:nth-child(even) { animation-delay: 0.05s; }

  /* 结束态用 transform: none，避免残留 transform 生成新的包含块，
     破坏详情页侧栏的 position: sticky 吸附。 */
  @keyframes pw-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   13. 播放器面板：禁止选中文字
   protection.css 为了放行输入与按钮，给 button/code/pre 开了
   user-select: text !important，播放器的曲名与制作人正好在按钮内，
   于是能被拖蓝选中。这里用 #id 提高特异性，只收回播放器，不动其它按钮。
   -------------------------------------------------------------------------- */
#acg-music-player,
#acg-music-player * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   12. 移动端：触摸设备禁用悬停位移，避免"粘住"
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .game-zone-card:hover,
  .product-neu-card:hover,
  .feat-card:hover,
  .guide-card:hover,
  .neu-btn:hover,
  .neu-nav-item:hover {
    transform: none;
  }
}