/* ==========================================================================
   sao-cardinal / main.css
   布局 + 组件 + 动效样式（分节索引见文末）
   视觉总纲：内容层 = 白之世界；系统交互层 = 曜石黑 + 白描边；激活 = 琥珀橙
   ========================================================================== */

/* ==========================================================================
   0. 基础与重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Lenis 接管滚动时关闭原生平滑，避免打架 */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background: var(--sky-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 细指针设备才隐藏原生光标（由 JS 加载后挂 .sao-cursor-on 再启用） */
html.sao-cursor-on body,
html.sao-cursor-on body * {
  cursor: none !important;
}
html.sao-cursor-on body input,
html.sao-cursor-on body textarea {
  cursor: text !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--sao-amber);
  color: #10131A;
}

:focus-visible {
  outline: 2px solid var(--sao-amber);
  outline-offset: 2px;
}

/* 通用图标尺寸 */
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -3px;
}
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 24px; height: 24px; }

/* 跳转链接（无障碍） */
.sao-skip {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 9998;
  padding: 8px 16px;
  background: var(--sys-bg-solid);
  color: #fff;
  border: 1.5px solid var(--sys-border);
  font-family: var(--font-hud);
  transition: top 0.2s ease;
}
.sao-skip:focus {
  top: 12px;
}

/* 无 JS 兜底：隐藏纯增强层 */
html:not(.js) #sao-cursor,
html:not(.js) .sao-gesture-hint,
html.no-js #sao-cursor,
html.no-js .sao-gesture-hint {
  display: none;
}

/* ==========================================================================
   1. 背景层：艾恩葛朗特苍穹 + 3D 透视网格 + 数据碎片 + 噪点
   ========================================================================== */

/* 苍穹渐变 + 暗角：整页唯一的"空间底色"，白色玻璃面板靠它才有层次 */
.sao-sky {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background: var(--sky-gradient);
}
.sao-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sky-vignette);
}
/* 地平线雾：3D 网格消失点处的冷光 */
.sao-sky::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  background: var(--horizon-glow);
}

#sao-bg-canvas {
  position: fixed;
  inset: 0;
  /* 用 100% 而非 100vw：100vw 含滚动条宽度，会在窄屏多出 15px 横向滚动区 */
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  pointer-events: none;
}

/* 关闭数据碎片（Buff 开关） */
html.sao-no-particles #sao-bg-canvas {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sao-ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 153, 0, 0.14), transparent 44%),
    radial-gradient(circle at 10% 74%, rgba(0, 229, 255, 0.12), transparent 48%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(148, 163, 184, 0.16), transparent 70%);
  pointer-events: none;
}

.sao-noise {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='ordinal'] .sao-noise {
  opacity: 0.08;
}

/* ==========================================================================
   2. 战术准星 <rb-cursor>
   宿主固定在 0,0 且不参与位移；中心点与圆环各自用 translate3d 定位 ——
   这样系统指针与自定义光标永远同坐标，快速甩出窗口也不会"被拉回"。
   ========================================================================== */
rb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  /* 不做整体位移：位移由 .cursor-dot / .cursor-ring 各自承担 */
  transform: none;
  transition: opacity 0.16s ease;
}
rb-cursor .cursor-dot {
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: 5px;
  height: 5px;
  background: var(--sao-amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--sao-amber-glow);
  /* 由 JS 写 translate3d，这里不加过渡：中心点必须与系统指针同样即时 */
  will-change: transform;
}
rb-cursor .cursor-ring {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 153, 0, 0.75);
  border-radius: 50%;
  transition: border-radius 0.18s ease-out, border-color 0.18s ease-out,
    box-shadow 0.18s ease-out, width 0.18s ease-out, height 0.18s ease-out,
    top 0.18s ease-out, left 0.18s ease-out;
  will-change: transform;
}
/* 锁定态：青色 45 度战术菱形 */
rb-cursor.is-locked .cursor-ring {
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border-color: var(--sao-cyan-bright);
  transform-origin: center;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}
/* 锁定态额外用 ::before 画旋转菱形，避免与 JS 的 translate3d 抢 transform */
rb-cursor.is-locked .cursor-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1.5px solid var(--sao-cyan-bright);
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: 0.85;
}
/* 点击爆发波纹（定位在指针坐标） */
rb-cursor .cursor-burst {
  position: absolute;
  top: -17px;
  left: -17px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--sao-amber);
  border-radius: 50%;
  pointer-events: none;
}
/* 输入控件上隐藏（还给原生光标） */
rb-cursor.is-typing {
  visibility: hidden;
  transition: visibility 0.12s;
}
html:not(.sao-cursor-on) rb-cursor {
  display: none;
}

/* ==========================================================================
   3. 左上 HP HUD（曜石黑系统层）
   ========================================================================== */
.sao-party-hud {
  position: fixed;
  top: 20px;
  left: 22px;
  z-index: var(--z-hud);
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  grid-template-areas:
    'avatar hp'
    'avatar main';
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  filter: drop-shadow(0 8px 20px rgba(11, 14, 20, 0.45));
}

/* —— 六边形等级徽章的定位容器（承载双层旋转科技环） —— */
.sao-avatar-slot {
  grid-area: avatar;
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* 外层：金色虚线环，正向慢转 */
.sao-avatar-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 195, 92, 0.85);
  box-shadow: 0 0 12px rgba(255, 153, 0, 0.35), inset 0 0 10px rgba(255, 153, 0, 0.14);
  animation: saoRingSpin var(--ring-speed, 7s) linear infinite;
  pointer-events: none;
}
/* 内层：白色细实线 + 四个刻度点，反向转 */
.sao-avatar-ring-inner {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: saoRingSpinRev calc(var(--ring-speed, 7s) * 1.7) linear infinite;
  pointer-events: none;
}
.sao-avatar-ring-inner::before,
.sao-avatar-ring-inner::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--sao-amber);
  box-shadow: 0 0 8px var(--sao-amber-glow);
  transform: rotate(45deg);
}
.sao-avatar-ring-inner::before { top: -3px; left: 50%; margin-left: -2.5px; }
.sao-avatar-ring-inner::after { bottom: -3px; left: 50%; margin-left: -2.5px; }

@keyframes saoRingSpin { to { transform: rotate(360deg); } }
@keyframes saoRingSpinRev { to { transform: rotate(-360deg); } }

.sao-avatar-hex {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #20293c, #0d1119);
  border: 2px solid rgba(255, 255, 255, 0.9);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sao-amber);
  overflow: hidden;
  position: relative;
}
.sao-avatar-hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 六边形内的「等级 + LV」两行排布 */
.sao-hex-lv {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.sao-hex-lv b {
  font-family: var(--font-hud);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 153, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
}
.sao-hex-lv i {
  margin-top: 2px;
  font-family: var(--font-hud);
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--sao-amber);
  opacity: 0.9;
}

/* —— 血条下方的主数据列（EXP / COL / Buff） —— */
sao-hp-bar#sao-hud-hp {
  grid-area: hp;
  min-width: 0;
}

.sao-hud-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sao-hud-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 10px;
  font-family: var(--font-hud);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(11, 14, 20, 0.6);
  white-space: nowrap;
}

/* EXP 细条：极窄的斜切轨道，scaleX 驱动 */
.sao-exp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sao-exp-tag {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--sao-cyan-bright);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}
.sao-exp-track {
  position: relative;
  width: min(150px, 16vw);
  height: 7px;
  background: rgba(11, 14, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: skewX(-28deg);
  overflow: hidden;
}
.sao-exp-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), var(--sao-cyan-bright));
  box-shadow: 0 0 9px rgba(0, 229, 255, 0.85);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sao-exp-pct {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

/* Col 金币计数 */
.sao-col {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px 1px 7px;
  background: rgba(11, 14, 20, 0.8);
  border-left: 2px solid var(--sao-amber);
  color: rgba(255, 255, 255, 0.92);
}
.sao-col .ico {
  width: 12px;
  height: 12px;
  color: var(--sao-amber);
  filter: drop-shadow(0 0 5px var(--sao-amber-glow));
}
.sao-col-tag {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}
.sao-col-value {
  font-variant-numeric: tabular-nums;
  color: var(--sao-amber);
  font-size: 12px;
}

/* —— Buff 状态栏：切角小图标 + 微型说明卡 —— */
.sao-buff-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}

.sao-buff {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(11, 14, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: rgba(255, 255, 255, 0.45);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.22s ease;
}
.sao-buff .ico {
  width: 15px;
  height: 15px;
}
/* 激活态：琥珀描边 + 内发光（寒色未激活，暖色已激活） */
.sao-buff.is-on {
  color: var(--sao-amber);
  border-color: rgba(255, 153, 0, 0.85);
  box-shadow: inset 0 0 10px rgba(255, 153, 0, 0.35), 0 0 10px rgba(255, 153, 0, 0.25);
}
.sao-buff.is-on::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 153, 0, 0.35);
  pointer-events: none;
}
.sao-buff:hover,
.sao-buff:focus-visible {
  color: #fff;
  border-color: var(--sao-cyan-bright);
  outline: none;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}
.sao-buff:hover .ico,
.sao-buff:focus-visible .ico {
  transform: scale(1.12);
}
.sao-buff .ico {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 说明卡：默认收起，hover/focus 时向下展开 */
.sao-buff-card {
  position: absolute;
  left: -6px;
  top: calc(100% + 9px);
  z-index: 5;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(11, 14, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-left: 3px solid var(--sao-amber);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  text-align: left;
  font-family: var(--font-hud);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
  pointer-events: none;
}
.sao-buff:hover .sao-buff-card,
.sao-buff:focus-visible .sao-buff-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.sao-buff-card strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.sao-buff-card em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--sao-amber);
}
.sao-buff-card span {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}
.sao-buff-card b {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--sao-cyan-bright);
}
/* 菱形指示尖角 */
.sao-buff-card::before {
  content: '';
  position: absolute;
  left: 18px;
  top: -5px;
  width: 8px;
  height: 8px;
  background: rgba(11, 14, 20, 0.94);
  border-left: 1px solid rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  transform: rotate(45deg);
}

.sao-hp-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sao-hp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 13.5px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(11, 14, 20, 0.55);
}

.sao-player-name {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 菱形状态点（CSS 色块，禁止字符装饰） */
.sao-diamond {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--sao-hp-green);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--sao-hp-green);
}
.sao-hp-status {
  font-size: 12px;
  color: var(--sao-hp-green);
  white-space: nowrap;
}

/* 双层金属装饰框：血条外再套一圈旋转的细环 */
.sao-hp-frame {
  width: min(310px, 44vw);
  height: 22px;
  background: rgba(11, 14, 20, 0.85);
  border: 2px solid rgba(235, 240, 250, 0.9);
  transform: skewX(-28deg);
  padding: 3px;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 153, 0, 0.22);
}
/* 外层金属镶边：比主框外扩 3px 的琥珀细线，营造"双层" */
.sao-hp-frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 153, 0, 0.35);
  box-shadow: 0 0 10px rgba(255, 153, 0, 0.18);
  pointer-events: none;
}
.sao-hp-fill {
  height: 100%;
  width: 100%;
  background: var(--hp-grad-green);
  box-shadow: 0 0 12px var(--sao-hp-green);
  transform-origin: left center;
  transform: scaleX(1);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease;
}
/* 玩家名菱形待机呼吸（只动 opacity） */
.sao-party-hud .sao-player-name .sao-diamond {
  animation: saoDiamondBreath 2.4s ease-in-out infinite;
}
@keyframes saoDiamondBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* 危险状态呼吸闪烁（只动 opacity） */
sao-hp-bar[data-state='danger'] .sao-hp-fill {
  animation: saoHpBlink 0.9s ease-in-out infinite;
}
@keyframes saoHpBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* QUEST CLEAR 白闪 */
sao-hp-bar[data-state='clear'] .sao-hp-fill {
  background: #fff;
  box-shadow: 0 0 20px #fff;
}
/* 刻度纹理 */
.sao-hp-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(0, 0, 0, 0.28) 18px,
    rgba(0, 0, 0, 0.28) 20px
  );
  pointer-events: none;
}

.sao-hp-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 10px;
  font-family: var(--font-hud);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 4px rgba(11, 14, 20, 0.5);
}
.sao-hp-numbers {
  background: rgba(11, 14, 20, 0.78);
  border-left: 3px solid var(--sao-amber);
  padding: 1px 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   4. 右上系统控制按钮（曜石黑）
   ========================================================================== */
.sao-top-controls {
  position: fixed;
  top: 20px;
  right: 22px;
  z-index: var(--z-hud);
  display: flex;
  gap: 9px;
}

.sao-hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sys-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.sao-hud-btn .ico {
  width: 15px;
  height: 15px;
}
.sao-hud-btn:hover,
.sao-hud-btn.is-active {
  background: var(--sao-amber);
  color: #10131A;
  box-shadow: 0 0 18px var(--sao-amber-glow);
}
.sao-hud-btn:active {
  transform: scale(0.94);
}
.sao-circle-btn:active,
.sao-submit-btn:active {
  transform: scale(0.92);
}
.sao-hud-btn .lbl {
  white-space: nowrap;
}

/* 圆环菜单的页面压暗遮罩（menu.js 动态创建） */
.sao-menu-veil {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(11, 14, 20, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sao-menu-veil.is-show {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   5. 圆环级联菜单 + 金属横梁二级面板
   ========================================================================== */
.sao-menu-system {
  position: fixed;
  top: 50%;
  right: 64px;
  transform: translateY(-50%);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 22px;
  pointer-events: none;
}
.sao-menu-system.is-open {
  pointer-events: auto;
}

.sao-ring-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* 圆环按钮：曜石黑玻璃 + 白描边（黑之系统铁律） */
.sao-ring-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(38, 46, 64, 0.95), var(--sys-bg));
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(11, 14, 20, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: translateY(-36px) scale(0.5);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.sao-ring-btn .ico {
  width: 24px;
  height: 24px;
  color: #fff;
  transition: color 0.25s ease, transform 0.25s ease;
}

/* 外圈旋转科技环 */
.sao-ring-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px dashed transparent;
  transition: border-color 0.3s ease;
}

.sao-ring-btn:hover,
.sao-ring-btn.is-active {
  background: radial-gradient(circle at 35% 30%, #ffb84d, var(--sao-amber));
  box-shadow: 0 0 24px var(--sao-amber-glow), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}
.sao-ring-btn:hover .ico,
.sao-ring-btn.is-active .ico {
  color: #fff;
  transform: scale(1.1);
}
.sao-ring-btn.is-active::before {
  border-color: var(--sao-amber);
  animation: saoSpin 8s linear infinite;
}
/* 激活指示三角（CSS 色块，禁字符） */
.sao-ring-btn.is-active::after {
  content: '';
  position: absolute;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--sao-amber);
  filter: drop-shadow(0 0 6px var(--sao-amber-glow));
}
@keyframes saoSpin {
  to { transform: rotate(360deg); }
}

/* 悬停文字提示 */
.sao-ring-tip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sao-ring-btn:hover .sao-ring-tip {
  opacity: 1;
}

/* 二级面板（金属横梁 + 白玻璃主体） */
.sao-subpanel {
  width: min(348px, 86vw);
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
}
.sao-subpanel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sao-metal-beam {
  height: 10px;
  width: 100%;
  background: var(--metal-bar);
  border: 1px solid #fff;
  box-shadow: 0 2px 10px rgba(11, 14, 20, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 2;
}
.sao-metal-beam::before,
.sao-metal-beam::after {
  content: '';
  width: 16px;
  height: 4px;
  background: var(--sao-amber);
  box-shadow: 0 0 6px var(--sao-amber-glow);
}

.sao-subpanel-body {
  background: var(--panel-bg-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  border-left: 2px solid var(--panel-border);
  border-right: 2px solid var(--panel-border);
  overflow: hidden;
  height: 0;
  box-shadow: 0 18px 40px rgba(11, 14, 20, 0.3);
}

.sao-subpanel-inner {
  padding: 18px 20px;
  max-height: min(430px, 60vh);
  overflow-y: auto;
}

.sao-subpanel-title {
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
}
.sao-subpanel-title .sao-diamond {
  background: var(--sao-amber);
  box-shadow: 0 0 8px var(--sao-amber-glow);
}

.sao-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  margin-bottom: 6px;
  background: rgba(120, 130, 150, 0.1);
  border-left: 3px solid transparent;
  font-family: var(--font-hud);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
}
.sao-list-item .val {
  opacity: 0.72;
  font-size: 12.5px;
  white-space: nowrap;
}
.sao-list-item:hover {
  background: var(--sys-bg);
  color: #fff;
  border-left-color: #fff;
  transform: translateX(-5px);
  box-shadow: 0 4px 14px rgba(11, 14, 20, 0.35);
}
.sao-list-item:hover .val {
  color: var(--sao-amber);
  opacity: 1;
}

/* ==========================================================================
   6. System Alert 模态（O/X 圆钮）
   ========================================================================== */
.sao-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(107, 118, 136, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.sao-modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.sao-alert-box {
  width: min(460px, 90vw);
  display: flex;
  flex-direction: column;
}

.sao-alert-body {
  background: var(--panel-bg-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--text-primary);
  padding: 0 26px;
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 2px solid var(--panel-border);
  border-right: 2px solid var(--panel-border);
}

.sao-alert-title {
  font-family: var(--font-sao);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.sao-alert-msg {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 20px;
}
.sao-alert-actions {
  display: flex;
  gap: 34px;
  margin-bottom: 6px;
}

/* SAO 标志性 O / X 圆钮（曜石黑） */
.sao-circle-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--sys-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 14, 20, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sao-circle-btn .ico {
  width: 20px;
  height: 20px;
}
.sao-circle-btn.is-ok {
  box-shadow: 0 6px 16px rgba(11, 14, 20, 0.4), inset 0 0 0 2px var(--sao-btn-ok);
  color: var(--sao-btn-ok);
}
.sao-circle-btn.is-cancel {
  box-shadow: 0 6px 16px rgba(11, 14, 20, 0.4), inset 0 0 0 2px var(--sao-btn-cancel);
  color: var(--sao-btn-cancel);
}
.sao-circle-btn.is-ok:hover {
  background: var(--sao-btn-ok);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(41, 121, 255, 0.6);
}
.sao-circle-btn.is-cancel:hover {
  background: var(--sao-btn-cancel);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(255, 23, 68, 0.6);
}

/* ==========================================================================
   7. LINK START 全屏层（白之世界加载动画）
   ========================================================================== */
#link-start-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: var(--z-linkstart);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 未加载时完全不可见也不可点，绝不干扰页面 */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
/* 加载期间：接管一切指针交互，防止用户在动画里误点到下层链接 */
#link-start-overlay.is-loading {
  visibility: visible;
  pointer-events: auto;
  cursor: progress;
}
#link-start-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.link-start-hud {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}
.link-start-sub {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.link-start-title {
  font-family: var(--font-sao-welcome);
  font-size: clamp(38px, 7vw, 62px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #10131A;
  text-indent: 0.14em;
}
/* 加载状态行：让 loading 有"进行中"的实感 */
.link-start-status {
  margin-top: 14px;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--sao-amber);
}
/* 底部细进度条：不确定态来回扫，纯 transform 驱动 */
.link-start-status::after {
  content: '';
  display: block;
  width: 168px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--sao-amber), transparent);
  animation: saoBootBar 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes saoBootBar {
  0% { transform: translateX(-60%) scaleX(0.4); opacity: 0.25; }
  50% { transform: translateX(0) scaleX(1); opacity: 1; }
  100% { transform: translateX(60%) scaleX(0.4); opacity: 0.25; }
}

/* ==========================================================================
   8. 页面骨架与转场扫光
   ========================================================================== */
.main-stage {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 128px 26px 90px;
  position: relative;
  z-index: var(--z-content);
}

/* Hero 是首屏主角：吃掉固定 HUD 的高度（HUD 约 142px），
   避免开局就被左上角面板压住标题 */
.main-stage > .sao-hero-stage:first-child {
  margin-top: 34px;
}

/* 转场扫光：全屏白带层。
   位移完全交给 GSAP 的 xPercent 控制，CSS 这里**不写 transform** ——
   否则 GSAP 会把 CSS 的 translateX 解析成独立的像素分量并与 xPercent 叠加，
   两次偏移相互抵消，白幕就会回到视口正中停住（这正是"卡在中间"的成因）。
   无 JS 时靠 visibility:hidden 保证它永不显形。 */
#sao-sweep {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
  pointer-events: none;
  visibility: hidden;
}
/* 只在 JS 驱动扫动期间显形，避免任何"静止白幕"状态 */
#sao-sweep.is-sweeping {
  visibility: visible;
}

/* ==========================================================================
   7b. 首屏接管：避免"先闪一下真实页面，再盖上 loading"
   内联脚本在 <head> 里给 <html> 加 .js-booting，
   LINK START overlay 立即以纯白铺满；JS 模块就绪后接管并淡出。
   无 JS / 降级时这条规则由内联脚本自己移除，不会永久白屏。
   ========================================================================== */
html.js-booting #link-start-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 首屏阶段页面主体先不参与绘制，避免 loading 底下透出内容 */
html.js-booting body > *:not(#link-start-overlay):not(script):not(style) {
  opacity: 0;
}
/* 首屏内容淡入：loading 退场后由 .js-booting 移除自动解除 */
body > #swup,
body > .sao-footer {
  transition: opacity 0.34s ease;
}

/* 区块标题行（楼层化）
   苍穹背景上不再用细线，改用"白边玻璃条 + 琥珀端标"的小系统窗 */
.sao-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 9px 16px 9px 13px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 3px solid var(--sao-amber);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}
.sao-section-head h2 {
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 11px;
}
.sao-section-head h2 .sao-diamond {
  background: var(--sao-amber);
  box-shadow: 0 0 10px var(--sao-amber-glow);
}
.sao-section-tag {
  font-family: var(--font-hud);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sao-amber);
  white-space: nowrap;
}

/* 分页 = 楼层选择器 */
.page-navigator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.page-navigator li a,
.page-navigator li span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: var(--sys-bg);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.page-navigator li a:hover {
  background: var(--sao-amber);
  color: #10131A;
  box-shadow: 0 0 14px var(--sao-amber-glow);
}
.page-navigator li.current span,
.page-navigator li.current a {
  background: var(--sao-amber);
  color: #10131A;
  box-shadow: 0 0 14px var(--sao-amber-glow);
}

/* ==========================================================================
   9. Hero 双栏全息主控舞台（首页）
   左 60% 主控信息 / 右 40% 投影舱；整块由 <rb-border-beam> 巡边
   ========================================================================== */
.sao-hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px);
  margin-bottom: 52px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 46%, rgba(232, 240, 250, 0.66) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  clip-path: var(--poly-panel);
  isolation: isolate;
}

/* 面板内的斜向高光条：让玻璃"接住光" */
.sao-hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(ellipse 80% 50% at 8% 0%, rgba(255, 199, 112, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(0, 229, 255, 0.12), transparent 66%);
  pointer-events: none;
}
/* 左侧琥珀竖条：延续原 Hero 的系统窗血统 */
.sao-hero-stage::after {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  background: linear-gradient(180deg, var(--sao-amber), rgba(255, 153, 0, 0.08));
  pointer-events: none;
}

/* 巡边组件铺满整块 Hero，不参与交互 */
.sao-hero-beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  border-radius: 0;
}

.sao-hero-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* —— 顶部机能状态条 —— */
.sao-hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 7px 13px;
  background: rgba(11, 14, 20, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--font-hud);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  width: fit-content;
  max-width: 100%;
}
.sao-hs-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sao-hs-item .ico {
  width: 13px;
  height: 13px;
  color: var(--sao-cyan-bright);
}
.sao-hs-item i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.sao-hs-item b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sao-hs-item em {
  font-style: normal;
  color: var(--sao-amber);
  font-variant-numeric: tabular-nums;
}
/* FPS 监控：数字宽度固定，避免跳动 */
.sao-hs-fps b {
  display: inline-block;
  min-width: 2.6ch;
  text-align: right;
  color: var(--sao-hp-green);
  text-shadow: 0 0 8px rgba(56, 229, 77, 0.6);
}
.sao-hs-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.24);
}

/* —— 主标题区 —— */
.sao-hero-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sao-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px;
  background: rgba(255, 153, 0, 0.14);
  border: 1px solid rgba(255, 153, 0, 0.72);
  color: #B25F00;
  font-family: var(--font-hud);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  width: fit-content;
}
.sao-hero-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--sao-amber);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--sao-amber-glow);
  animation: saoDiamondBreath 2.2s ease-in-out infinite;
}
.sao-hero-title {
  font-family: var(--font-sao);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: var(--text-primary);
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.9);
}
.sao-hero-kv {
  font-family: var(--font-hud);
  font-size: clamp(12.5px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #3C5170;
  text-transform: uppercase;
}
.sao-hero-desc {
  max-width: 620px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.85;
}

/* —— 仿终端打印框（3 行滚动日志） —— */
.sao-term-log {
  background: rgba(11, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  max-width: 560px;
}
.sao-term-log-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  background: linear-gradient(180deg, #2A3040, #1A1F2B);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-hud);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}
.sao-tl-dots {
  display: inline-flex;
  gap: 4px;
}
.sao-tl-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.sao-tl-dots i:first-child { background: var(--sao-amber); }
.sao-tl-title { flex: 1; }
.sao-tl-state {
  color: var(--sao-hp-green);
  text-shadow: 0 0 8px rgba(56, 229, 77, 0.55);
}
.sao-term-log-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 11px;
  min-height: 66px;
  color: rgba(255, 255, 255, 0.78);
}
.sao-log-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.55;
  opacity: 0.92;
}
.sao-log-line .log-cmd {
  color: #9FD3E8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sao-log-line .log-ok {
  color: var(--sao-hp-green);
  font-weight: 700;
  letter-spacing: 0.08em;
  flex: none;
}
.sao-log-line.is-done .log-ok {
  animation: saoLogOk 0.4s ease-out;
}
@keyframes saoLogOk {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* —— 快捷水晶矩阵（磁吸按钮组） —— */
.sao-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
rb-magnet.sao-hero-magnet {
  display: inline-block;
}

.sao-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 12px;
  background: rgba(11, 14, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.24s ease;
  text-align: left;
}
/* 菱形水晶图标底座 */
.sao-btn-gem {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.9), rgba(255, 120, 0, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(255, 153, 0, 0.45);
  transition: box-shadow 0.24s ease, background 0.24s ease;
}
.sao-btn-gem .ico {
  transform: rotate(-45deg);
  width: 17px;
  height: 17px;
  color: #10131A;
}
.sao-btn-gem.is-cyan {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.9), rgba(0, 150, 190, 0.45));
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}
.sao-btn-gem.is-white {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(200, 214, 232, 0.6));
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}
.sao-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sao-btn-text b {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sao-btn-text i {
  margin-top: 2px;
  font-style: normal;
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}
.sao-hero-btn:hover {
  background: rgba(22, 28, 42, 0.95);
  border-color: var(--sao-amber);
  box-shadow: 0 0 22px rgba(255, 153, 0, 0.35);
}
.sao-hero-btn:hover .sao-btn-gem {
  box-shadow: 0 0 22px rgba(255, 153, 0, 0.8);
}
.sao-hero-btn:hover .sao-btn-text i {
  color: var(--sao-amber);
}
.sao-hero-btn.is-primary {
  border-color: rgba(255, 153, 0, 0.7);
}
.sao-hero-btn:active {
  transform: scale(0.97);
}

/* ==========================================================================
   9b. 右栏投影舱：旋转科技环底座 + 浮游城线框 + 悬浮 HUD 标签
   ========================================================================== */
.sao-hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.sao-holo-bay {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 三层旋转科技环（SVG 虚线 + 刻度） */
.sao-holo-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}
.sao-holo-ring.is-outer { animation: saoRingSpin 26s linear infinite; }
.sao-holo-ring.is-inner { animation: saoRingSpinRev 17s linear infinite; }
.sao-holo-ring .ring-dash {
  stroke: rgba(255, 153, 0, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: 2 7;
}
.sao-holo-ring .ring-tick {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 0.8;
  stroke-dasharray: 1 15;
}
.sao-holo-ring .ring-dash-2 {
  stroke: rgba(0, 229, 255, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: 16 12;
}

/* 舱体底座：椭圆冷光，撑住整个投影 */
.sao-holo-base {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 76%;
  height: 15%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.35), rgba(255, 153, 0, 0.14) 52%, transparent 74%);
  filter: blur(6px);
  pointer-events: none;
}

/* 扫描线：自上而下循环（只动 transform） */
.sao-holo-scan {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8%;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.22), transparent);
  animation: saoHoloScan 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes saoHoloScan {
  0% { transform: translateY(0) scaleY(0.6); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 0.9; }
  100% { transform: translateY(230%) scaleY(1.1); opacity: 0; }
}

/* 立绘 / 浮游城容器：投影色晕 + 轻微悬浮 */
.sao-holo-figure {
  position: relative;
  width: 74%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35));
  animation: saoHoloFloat 5.2s ease-in-out infinite;
}
@keyframes saoHoloFloat {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(5px); }
}
.sao-holo-figure img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* —— 艾恩葛朗特浮游城：纯 CSS 逐层收窄的圆锥线框 —— */
.sao-aincrad {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  perspective: 620px;
  transform-style: preserve-3d;
}
.sao-aincrad-floor {
  --w: 100%;
  display: block;
  width: calc(var(--w) * (1 - var(--i) * 0.115));
  height: 13px;
  border: 1px solid rgba(0, 229, 255, 0.6);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.16), rgba(0, 229, 255, 0.02));
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.28), inset 0 0 8px rgba(0, 229, 255, 0.18);
  transform: rotateX(72deg);
  animation: saoAincradSpin 14s linear infinite;
  animation-delay: calc(var(--i) * -0.55s);
}
.sao-aincrad-floor:nth-child(odd) {
  border-color: rgba(255, 153, 0, 0.55);
  box-shadow: 0 0 10px rgba(255, 153, 0, 0.24), inset 0 0 8px rgba(255, 153, 0, 0.14);
}
@keyframes saoAincradSpin {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to { transform: rotateX(72deg) rotateZ(360deg); }
}
/* 顶部尖塔 */
.sao-aincrad-spire {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 1px;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.9));
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
  transform: translateX(-50%);
}
/* 环绕轨道 */
.sao-aincrad-orbit {
  position: absolute;
  inset: 14% 8%;
  border: 1px dashed rgba(255, 153, 0, 0.4);
  border-radius: 50%;
  animation: saoRingSpin 22s linear infinite;
}
/* 双剑交叉徽章 */
.sao-crest {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(11, 14, 20, 0.72);
  box-shadow: 0 0 18px rgba(255, 153, 0, 0.5), inset 0 0 14px rgba(255, 153, 0, 0.24);
}
.sao-crest .ico {
  width: 22px;
  height: 22px;
  transform: rotate(-45deg);
  color: var(--sao-amber);
}

/* —— 环绕悬浮 HUD 标签 —— */
.sao-holo-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(11, 14, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(11, 14, 20, 0.45);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sao-holo-tag .ico {
  width: 12px;
  height: 12px;
  color: var(--sao-cyan-bright);
}
.sao-holo-tag i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  font-size: 8.5px;
  letter-spacing: 0.16em;
}
.sao-holo-tag b {
  color: var(--sao-amber);
  font-variant-numeric: tabular-nums;
}
.sao-holo-tag.is-tag-1 { top: 8%; left: -6%; }
.sao-holo-tag.is-tag-2 { top: 46%; right: -12%; }
.sao-holo-tag.is-tag-3 { bottom: 7%; left: -4%; }

/* ==========================================================================
   10. 文章卡片网格：SAO 独立资讯窗口 <rb-spotlight-card>
   结构：深色斜切顶栏 / 封面 + 扫描遮罩 / 正文 / 熟练度条 / 流光边框
   ========================================================================== */
.sao-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
}

rb-spotlight-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-soft);
  padding: 0;
  transform-style: preserve-3d;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  clip-path: var(--poly-card);
  transition: box-shadow 0.3s ease;
}
rb-spotlight-card[data-augmented-ui] {
  border-color: transparent;
}
/* 聚光灯跟随（原有能力保留） */
rb-spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
    var(--spotlight-color, rgba(255, 153, 0, 0.16)),
    transparent 60%
  );
  pointer-events: none;
  z-index: 3;
}
rb-spotlight-card:hover {
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.42), 0 0 0 1px rgba(255, 153, 0, 0.55);
}

/* 卡片自己的流光边框（hover 点亮） */
.sao-card-beam {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
}

/* —— 1. 深色斜切顶栏 —— */
.sao-win-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--window-header-bg), var(--window-header-bg-2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--window-header-text);
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* 右下斜切，呼应 SAO 窗口的金属横梁 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
/* 顶栏底部的琥珀高光线 */
.sao-win-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 153, 0, 0.9), rgba(255, 153, 0, 0) 62%);
}
/* 发光琥珀小圆环 */
.sao-win-dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sao-amber);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--sao-amber-glow), inset 0 0 5px rgba(255, 153, 0, 0.7);
}
.sao-win-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sao-amber);
}
.sao-win-cat {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
}
.sao-win-num {
  flex: none;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

/* —— 2. 封面 + 多边形扫描遮罩 —— */
.sao-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #1B2436;
  isolation: isolate;
}
.sao-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
/* 占位图：按 CID 取的六组配色 */
.sao-thumb-geo {
  position: absolute;
  inset: 0;
  display: block;
  color: #4F6B93;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.sao-thumb-geo svg { width: 100%; height: 100%; display: block; }
.sao-thumb-geo[data-hue='0'] { color: #3F6EA8; }
.sao-thumb-geo[data-hue='1'] { color: #8A5A2B; }
.sao-thumb-geo[data-hue='2'] { color: #2E7A80; }
.sao-thumb-geo[data-hue='3'] { color: #5B4E8C; }
.sao-thumb-geo[data-hue='4'] { color: #7A3F5C; }
.sao-thumb-geo[data-hue='5'] { color: #44586E; }

/* 封面底色渐变（弥补 SVG 之外的空间） */
.sao-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.72));
  z-index: -1;
}

/* 全息扫描线：hover 时自上而下扫过 */
.sao-thumb-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -34%;
  height: 34%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 153, 0, 0.32) 42%,
    rgba(255, 220, 160, 0.85) 50%,
    rgba(255, 153, 0, 0.32) 58%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
/* 六边形网格遮罩：静态浮雕 */
.sao-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cpath d='M17 1 L32 9 L32 22 L17 30 L2 22 L2 9 Z' fill='none' stroke='%23ffffff' stroke-opacity='0.16'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}
.sao-thumb-tag {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(11, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.sao-thumb-tag .ico { width: 10px; height: 10px; color: var(--sao-cyan-bright); }

/* hover：RGB 色差故障 + 扫描线 + 微推近 */
rb-spotlight-card:hover .sao-thumb-img,
rb-spotlight-card:hover .sao-thumb-geo {
  transform: scale(1.045);
  animation: saoGlitch 0.42s steps(2, end) 1;
}
rb-spotlight-card:hover .sao-thumb-scan {
  opacity: 1;
  animation: saoScanline 1.05s cubic-bezier(0.4, 0, 0.2, 1) 1;
}
@keyframes saoScanline {
  0% { top: -34%; }
  100% { top: 100%; }
}
/* RGB 色差：用 drop-shadow 三色偏移模拟（不动布局、可被 GPU 合成） */
@keyframes saoGlitch {
  0% { filter: drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.55)) drop-shadow(3px 0 0 rgba(0, 229, 255, 0.55)); }
  25% { filter: drop-shadow(2px 0 0 rgba(255, 0, 60, 0.4)) drop-shadow(-2px 0 0 rgba(0, 229, 255, 0.4)); }
  50% { filter: drop-shadow(-1px 0 0 rgba(255, 0, 60, 0.3)) drop-shadow(1px 0 0 rgba(0, 229, 255, 0.3)); }
  100% { filter: none; }
}

/* —— 3. 正文区 —— */
.sao-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 16px 20px 18px;
}
.sao-card-title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}
.sao-card-title a:hover {
  color: #B25F00;
}
.sao-card-excerpt {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.78;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— 4. 底部：日期 / 熟练度条 / 磁吸 LINK 圆钮 —— */
.sao-card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px dashed var(--divider);
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.sao-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.sao-card-date .ico { width: 11px; height: 11px; }

.sao-card-prof {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sao-card-prof i {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  flex: none;
}
.sao-prof-track {
  position: relative;
  flex: 1;
  min-width: 26px;
  height: 4px;
  background: rgba(90, 102, 130, 0.22);
  overflow: hidden;
}
.sao-prof-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 153, 0, 0.55), var(--sao-amber));
  box-shadow: 0 0 7px rgba(255, 153, 0, 0.6);
  transform-origin: left center;
}
.sao-card-prof b {
  flex: none;
  font-size: 9px;
  color: var(--sao-amber);
  font-variant-numeric: tabular-nums;
}

/* 磁吸 LINK 圆钮 */
.sao-link-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 14, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--sao-amber);
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.24s ease, transform 0.2s ease;
}
.sao-link-btn .ico { width: 13px; height: 13px; }
.sao-link-btn:hover {
  background: var(--sao-amber);
  color: #10131A;
  box-shadow: 0 0 16px var(--sao-amber-glow);
}
.sao-link-btn:active { transform: scale(0.9); }

/* 归档/搜索等列表页：单列资讯窗口（窄版，无封面） */
.sao-log-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sao-log-list.is-cards {
  gap: 18px;
}
.sao-log-list .sao-card.is-log .sao-card-inner {
  padding: 14px 20px 16px;
}
.sao-log-list .sao-card-title {
  font-size: 16.5px;
}
.sao-log-list .sao-log-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.sao-log-list .sao-log-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sao-log-list .sao-log-meta .ico {
  width: 11px;
  height: 11px;
  color: var(--sao-amber);
}

/* 列表页（旧式日志行，保留给搜索/404 等场景） */
.sao-log-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.sao-log-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 153, 0, 0.35);
  transition: background 0.22s ease;
}
.sao-log-row:hover {
  border-color: var(--sao-amber);
  transform: translateX(4px);
}
.sao-log-row:hover::before {
  background: var(--sao-amber);
}
.sao-log-num {
  font-family: var(--font-sao);
  font-size: 19px;
  font-weight: 700;
  color: var(--sao-amber);
  letter-spacing: 0.05em;
  flex: none;
  width: 52px;
}
.sao-log-main {
  flex: 1;
  min-width: 0;
}
.sao-log-title {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sao-log-title a:hover {
  color: var(--sao-amber);
}
.sao-log-meta {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   11. 文章阅读页
   ========================================================================== */
.sao-article-wrap {
  max-width: var(--article-max);
  margin: 0 auto;
}

.sao-article-head {
  margin-bottom: 30px;
}
.sao-article-floor {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sao);
  font-weight: 700;
  color: var(--sao-amber);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.sao-article-floor .floor-num {
  font-size: 34px;
  line-height: 1;
}
.sao-article-floor .floor-sub {
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
}
.sao-article-title {
  font-family: var(--font-body);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.sao-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-hud);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 9px 2px;
}
.sao-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sao-article-meta .ico {
  width: 14px;
  height: 14px;
  color: var(--sao-amber);
}
.sao-article-meta a:hover {
  color: var(--sao-amber);
}

.sao-article {
  background: var(--panel-bg-strong);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  padding: clamp(24px, 4vw, 46px);
  overflow-wrap: break-word;
}

/* —— 正文排版 —— */
.sao-article h1,
.sao-article h2,
.sao-article h3,
.sao-article h4 {
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 1.6em 0 0.7em;
}
.sao-article h2 {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sao-article h2::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--sao-amber);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--sao-amber-glow);
}
.sao-article h3 {
  font-size: 18.5px;
  border-left: 3px solid var(--sao-amber);
  padding-left: 12px;
}
.sao-article h4 {
  font-size: 16px;
  color: var(--text-secondary);
}
.sao-article p {
  margin: 0 0 1.1em;
}
.sao-article a {
  color: var(--sao-cyan);
  border-bottom: 1px dashed rgba(0, 184, 212, 0.5);
}
.sao-article a:hover {
  color: var(--sao-amber);
  border-bottom-color: var(--sao-amber);
}
.sao-article strong {
  color: var(--text-primary);
}
.sao-article blockquote {
  position: relative;
  margin: 1.4em 0;
  padding: 16px 22px;
  background: rgba(120, 130, 150, 0.08);
  border-left: 3px solid var(--sao-cyan);
  color: var(--text-secondary);
}
.sao-article blockquote p:last-child {
  margin-bottom: 0;
}
.sao-article ul,
.sao-article ol {
  margin: 0 0 1.1em;
  padding-left: 1.6em;
  list-style: none;
}
.sao-article ul li {
  position: relative;
}
.sao-article ul li::before {
  content: '';
  position: absolute;
  left: -1.15em;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--sao-amber);
  transform: rotate(45deg);
}
.sao-article ol {
  list-style: decimal;
}
.sao-article ol li::marker {
  color: var(--sao-amber);
  font-family: var(--font-hud);
  font-weight: 700;
}
.sao-article img {
  margin: 1.4em auto;
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}
.sao-article hr {
  border: 0;
  height: 1px;
  margin: 2.2em auto;
  width: 62%;
  background: linear-gradient(90deg, transparent, var(--divider), var(--sao-amber), var(--divider), transparent);
}
.sao-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
}
.sao-article th,
.sao-article td {
  border: 1px solid var(--divider);
  padding: 8px 12px;
  text-align: left;
}
.sao-article th {
  background: var(--sys-bg);
  color: #fff;
  font-family: var(--font-hud);
  letter-spacing: 0.06em;
}
.sao-article tr:hover td {
  background: var(--sao-amber-soft);
}

/* —— 行内代码与终端窗 —— */
.sao-article code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--sys-bg-solid);
  color: #FFD479;
  padding: 2px 8px;
  border-radius: 2px;
}
.sao-term {
  position: relative;
  margin: 1.5em 0;
}
.sao-term-bar {
  height: 10px;
  background: var(--metal-bar);
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: relative;
  z-index: 2;
}
.sao-term-bar::before,
.sao-term-bar::after {
  content: '';
  width: 16px;
  height: 4px;
  background: var(--sao-amber);
  box-shadow: 0 0 6px var(--sao-amber-glow);
}
.sao-term pre {
  background: var(--sys-bg-solid);
  border-left: 2px solid var(--sys-border);
  border-right: 2px solid var(--sys-border);
  border-bottom: 2px solid var(--sys-border);
  color: #D6E2F2;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  font-family: var(--font-mono);
  margin: 0;
}
.sao-term pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
/* 未经 JS 包装的裸 pre 兜底样式（直接终端化） */
.sao-article > pre {
  background: var(--sys-bg-solid);
  border: 2px solid var(--sys-border);
  color: #D6E2F2;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  font-family: var(--font-mono);
}
.sao-term-copy {
  position: absolute;
  right: 10px;
  top: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--font-hud);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.sao-term-copy:hover {
  background: var(--sao-amber);
  color: #10131A;
}

/* 版权/声明块 */
.sao-article-license {
  margin-top: 34px;
  padding: 12px 18px;
  background: rgba(120, 130, 150, 0.08);
  border-left: 3px solid var(--sao-amber);
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.8;
}

/* 上一篇 / 下一篇 */
.sao-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.sao-post-nav .nav-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 19px;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  font-family: var(--font-hud);
  transition: border-color 0.2s ease;
}
.sao-post-nav .nav-box:hover {
  border-color: var(--sao-amber);
}
.sao-post-nav .nav-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sao-amber);
}
.sao-post-nav .nav-target {
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sao-post-nav .nav-target a:hover {
  color: var(--sao-amber);
}
.sao-post-nav .nav-box.next {
  text-align: right;
  align-items: flex-end;
}

/* ==========================================================================
   12. 评论区（公会通讯）
   ========================================================================== */
.sao-comments {
  margin-top: 44px;
}
.sao-comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sao-comments .comment-list,
.sao-comments .comment-list ol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}
.sao-comments .comment-list .children {
  margin-left: 40px;
  border-left: 1px dashed var(--divider);
  padding-left: 18px;
}

.sao-comment {
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  padding: 16px 20px;
}
.sao-comment .comment-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.sao-comment .avatar,
.sao-comment img.avatar {
  width: 42px;
  height: 42px;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  border-radius: 0;
  flex: none;
}
.sao-comment .comment-author {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.05em;
  color: var(--sao-amber);
}
.sao-comment .comment-meta {
  font-family: var(--font-hud);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  display: flex;
  gap: 12px;
  align-items: center;
}
.sao-comment .comment-content {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.75;
}
.sao-comment .comment-content p {
  margin: 0 0 0.6em;
}
.sao-comment .comment-reply a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.sao-comment .comment-reply a:hover {
  color: var(--sao-amber);
}
.sao-comment .comment-awaiting-moderation {
  font-size: 12px;
  color: var(--sao-hp-yellow);
}

/* 评论表单 */
.sao-comment-form {
  margin-top: 26px;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  padding: 24px 26px;
}
.sao-comment-form .form-title {
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.sao-comment-form .form-title .sao-diamond {
  background: var(--sao-amber);
  box-shadow: 0 0 8px var(--sao-amber-glow);
}
.sao-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.sao-comment-form input[type='text'],
.sao-comment-form input[type='email'],
.sao-comment-form input[type='url'],
.sao-comment-form textarea {
  width: 100%;
  background: var(--panel-bg-solid);
  border: 1.5px solid var(--divider);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sao-comment-form textarea {
  min-height: 130px;
  resize: vertical;
  margin-bottom: 14px;
}
.sao-comment-form input:focus,
.sao-comment-form textarea:focus {
  outline: none;
  border-color: var(--sao-amber);
  box-shadow: 0 0 0 3px var(--sao-amber-soft);
}
.sao-comment-form .form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sao-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sys-bg);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  padding: 10px 26px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.sao-submit-btn:hover {
  background: var(--sao-amber);
  color: #10131A;
  box-shadow: 0 0 18px var(--sao-amber-glow);
}
.sao-comment-form .cancel-reply {
  font-family: var(--font-hud);
  font-size: 12.5px;
  color: var(--sao-btn-cancel);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   13. 友链页（组队面板）
   ========================================================================== */
.sao-party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.sao-member-card {
  position: relative;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  padding: 20px 22px;
  overflow: hidden;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.sao-member-card:hover {
  border-color: var(--sao-amber);
  transform: translateY(-3px);
}
.sao-member-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 11px;
}
.sao-member-avatar {
  width: 50px;
  height: 50px;
  flex: none;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  background: var(--sys-bg-solid);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
.sao-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sao-member-avatar .ico {
  color: var(--sao-amber);
}
.sao-member-name {
  font-family: var(--font-hud);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sao-amber);
}
.sao-member-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 13px;
  min-height: 2.2em;
}
.sao-member-hp {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sao-member-hp .sao-hp-frame {
  width: 100%;
  height: 13px;
  border-width: 1.5px;
  padding: 2px;
}
.sao-member-hp .sao-hp-numbers {
  font-size: 10.5px;
  padding: 0 7px;
  border-left-width: 2px;
}
/* 紧凑模式：只显示血条本体 */
sao-hp-bar[compact] .sao-hp-container {
  display: block;
}
sao-hp-bar[compact] .sao-hp-header,
sao-hp-bar[compact] .sao-hp-sub {
  display: none;
}
sao-hp-bar[compact] .sao-hp-frame {
  width: 100%;
  height: 13px;
  border-width: 1.5px;
  padding: 2px;
}
/* hover 扫描线（只动 opacity/transform） */
.sao-member-card .scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 153, 0, 0.08) 50%, transparent 100%);
  transform: translateY(-100%);
  pointer-events: none;
}
.sao-member-card:hover .scanline {
  animation: saoScan 1.1s linear infinite;
}
@keyframes saoScan {
  to { transform: translateY(100%); }
}

/* ==========================================================================
   14. 归档页（迷宫区地图）
   ========================================================================== */
.sao-dungeon {
  position: relative;
  padding-left: 34px;
}
.sao-dungeon::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--sao-amber), var(--divider));
}
.sao-floor-node {
  position: relative;
  margin-bottom: 34px;
}
.sao-floor-node::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--panel-bg-solid);
  border: 2.5px solid var(--sao-amber);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--sao-amber-glow);
}
.sao-floor-year {
  font-family: var(--font-sao);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.sao-floor-year .floor-count {
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--sao-amber);
}
.sao-floor-posts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.sao-floor-post {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  padding: 7px 14px;
  background: rgba(120, 130, 150, 0.07);
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sao-floor-post:hover {
  border-left-color: var(--sao-amber);
  background: var(--sao-amber-soft);
}
.sao-floor-post .post-date {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  flex: none;
}
.sao-floor-post a:hover {
  color: var(--sao-amber);
}

/* ==========================================================================
   15. 搜索与 404
   ========================================================================== */
.sao-search-form {
  display: flex;
  gap: 0;
  max-width: 620px;
  margin: 0 auto 40px;
}
.sao-search-form input {
  flex: 1;
  background: var(--panel-bg-solid);
  border: 1.5px solid var(--divider);
  border-right: 0;
  color: var(--text-primary);
  font: inherit;
  padding: 12px 18px;
  font-family: var(--font-hud);
  letter-spacing: 0.05em;
}
.sao-search-form input:focus {
  outline: none;
  border-color: var(--sao-amber);
}
.sao-search-form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sys-bg);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  padding: 0 24px;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: background 0.2s ease, color 0.2s ease;
}
.sao-search-form button:hover {
  background: var(--sao-amber);
  color: #10131A;
}

.sao-404 {
  text-align: center;
  padding: 60px 0 30px;
}
.sao-404-code {
  font-family: var(--font-sao-welcome);
  font-size: clamp(70px, 14vw, 130px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sao-hp-red);
  text-shadow: 0 0 30px rgba(255, 23, 68, 0.35);
  line-height: 1.1;
}
.sao-404-title {
  font-family: var(--font-hud);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  margin: 10px 0 8px;
}
.sao-404-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 26px;
}
.sao-404-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   16. 页脚（曜石黑系统条）
   ========================================================================== */
.sao-footer {
  position: relative;
  z-index: var(--z-footer);
  margin-top: 60px;
  background: var(--sys-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1.5px solid var(--sys-border);
  color: rgba(255, 255, 255, 0.82);
}
.sao-footer-inner {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-hud);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
}
.sao-footer-sys {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sao-amber);
}
.sao-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.sao-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease;
}
.sao-footer-links a:hover {
  color: var(--sao-amber);
}
.sao-footer-copy {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
}

/* ==========================================================================
   17. 浮层：返回顶部 / Toast / QUEST CLEAR
   ========================================================================== */
.sao-backtop {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: var(--z-hud);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sys-bg);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.sao-backtop.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sao-backtop:hover {
  background: var(--sao-amber);
  color: #10131A;
}
.sao-backtop:hover .ico {
  transform: translateY(-2px);
}
.sao-backtop .ico {
  transition: transform 0.25s ease;
}

.sao-toast {
  position: fixed;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-modal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sys-bg);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 11px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sao-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sao-toast .ico {
  color: var(--sao-amber);
}

#sao-quest-clear {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
}
#sao-quest-clear .qc-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 58px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-image: var(--metal-bar) 1 stretch;
  box-shadow: 0 24px 60px rgba(11, 14, 20, 0.4);
}
#sao-quest-clear .qc-title {
  font-family: var(--font-sao-welcome);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-primary);
}
#sao-quest-clear .qc-sub {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--sao-amber);
}

/* ==========================================================================
   18. 响应式
   ========================================================================== */
@media (max-width: 1100px) {
  .sao-menu-system {
    right: 20px;
  }
  .sao-hero-stage {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  .sao-holo-tag.is-tag-2 { right: -4%; }
}

@media (max-width: 860px) {
  .main-stage {
    padding: 116px 16px 78px;
  }
  /* 小屏 HUD 只有 102px，Hero 不必再让出 34px */
  .main-stage > .sao-hero-stage:first-child {
    margin-top: 12px;
  }
  .sao-party-hud {
    top: 12px;
    left: 12px;
    column-gap: 9px;
    row-gap: 5px;
  }
  .sao-avatar-slot {
    width: 46px;
    height: 46px;
  }
  .sao-avatar-hex {
    width: 42px;
    height: 42px;
  }
  .sao-hex-lv b {
    font-size: 15px;
  }
  .sao-hp-frame {
    width: min(210px, 46vw);
    height: 18px;
  }
  .sao-hp-sub {
    display: none;
  }
  .sao-hp-header {
    font-size: 12px;
  }
  /* 移动端：EXP / Col 收成一行，Buff 栏保留（触摸可直接点） */
  .sao-hud-sub {
    padding-left: 5px;
    gap: 8px;
    font-size: 10.5px;
  }
  .sao-exp-track {
    width: 74px;
  }
  .sao-buff-bar {
    padding-left: 5px;
    gap: 5px;
  }
  .sao-buff {
    width: 26px;
    height: 26px;
  }
  .sao-buff .ico {
    width: 13px;
    height: 13px;
  }
  /* 说明卡在小屏上改为右侧展开，避免被视口裁切 */
  .sao-buff-card {
    width: 196px;
    left: auto;
    right: -4px;
    transform-origin: top right;
  }
  .sao-buff-card::before {
    left: auto;
    right: 18px;
  }

  .sao-top-controls {
    top: auto;
    bottom: 18px;
    right: 50%;
    transform: translateX(50%);
    gap: 7px;
  }
  .sao-hud-btn .lbl {
    display: none;
  }
  .sao-hud-btn {
    padding: 10px 12px;
  }
  /* 圆环菜单移动端：全宽面板 */
  .sao-menu-system {
    flex-direction: column;
    top: auto;
    bottom: 86px;
    right: 0;
    left: 0;
    transform: none;
    align-items: flex-end;
    padding: 0 16px;
  }
  .sao-ring-column {
    flex-direction: row;
    gap: 10px;
  }
  .sao-ring-btn {
    width: 48px;
    height: 48px;
  }
  .sao-subpanel {
    width: min(348px, calc(100vw - 120px));
  }

  /* Hero 双栏 → 单栏：投影舱缩到顶部作为视觉锚点 */
  .sao-hero-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }
  .sao-hero-right {
    order: -1;
    min-height: 220px;
  }
  .sao-holo-bay {
    max-width: 240px;
  }
  .sao-holo-tag {
    font-size: 9px;
    padding: 4px 8px;
  }
  .sao-holo-tag.is-tag-1 { left: -2%; }
  .sao-holo-tag.is-tag-2 { right: -2%; }
  .sao-holo-tag.is-tag-3 { left: -2%; }
  .sao-hero-status {
    font-size: 10.5px;
    gap: 6px 10px;
    padding: 6px 10px;
  }
  .sao-hs-item i {
    display: none;
  }
  .sao-hero-title {
    font-size: clamp(26px, 7.6vw, 36px);
  }
  .sao-hero-actions {
    gap: 9px;
  }
  .sao-hero-btn {
    padding: 8px 15px 8px 10px;
  }
  .sao-btn-gem {
    width: 28px;
    height: 28px;
  }
  .sao-btn-gem .ico {
    width: 14px;
    height: 14px;
  }

  /* 结衣导轨：移动端让位给底部 HUD 条。
     选择器带上 .sao-gesture-rail 提高优先级——否则会被后面
     .sao-gesture-rail { display:flex } 的段落规则盖掉 */
  .sao-gesture-rail,
  div.sao-gesture-rail#sao-gesture-rail {
    display: none;
  }
  #sao-trail-canvas {
    display: none;
  }

  .sao-post-nav {
    grid-template-columns: 1fr;
  }
  .sao-post-nav .nav-box.next {
    text-align: left;
    align-items: flex-start;
  }
  .sao-comments .comment-list .children {
    margin-left: 14px;
    padding-left: 10px;
  }
  .sao-backtop {
    right: 16px;
    bottom: 86px;
  }
  .sao-log-row {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
}

/* 超窄屏：卡片单列 + HUD 极简 */
@media (max-width: 560px) {
  .sao-post-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .sao-hud-sub {
    flex-wrap: wrap;
  }
  .sao-exp-track {
    width: 58px;
  }
  .sao-holo-bay {
    max-width: 200px;
  }
  .sao-hero-kv {
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   18b. SAO 经典选择框（目标操作窗：tap 玩家/对象弹出）
   ========================================================================== */
.sao-select {
  position: fixed;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sao-select.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sao-select-card {
  width: 264px;
  background: var(--panel-bg-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid var(--panel-border);
  box-shadow: 0 18px 42px rgba(11, 14, 20, 0.28);
}

/* 头部：目标名 + 等级标签 + 关闭钮 */
.sao-select-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px 10px 14px;
  border-bottom: 1px solid var(--divider);
}
.sao-select-mark {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--sao-amber);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--sao-amber-glow);
}
.sao-select-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.sao-select-val {
  flex: none;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  background: var(--sys-bg);
  color: #fff;
  border: 1px solid var(--sys-border);
  padding: 2px 8px;
}
.sao-select-close {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--divider);
  background: transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.sao-select-close .ico {
  width: 13px;
  height: 13px;
}
.sao-select-close:hover {
  color: var(--sao-amber);
  border-color: var(--sao-amber);
  transform: rotate(90deg);
}

/* 操作列表：与圆环菜单列表项同一套悬停语言（曜石黑高亮） */
.sao-select-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px 11px;
}
.sao-select-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(120, 130, 150, 0.1);
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-hud);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease, border-color 0.2s ease;
}
.sao-select-item-ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--sao-amber);
}
.sao-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sao-select-sub {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}
.sao-select-item:hover,
.sao-select-item:focus-visible {
  outline: none;
  background: var(--sys-bg);
  color: #fff;
  border-left-color: #fff;
  transform: translateX(-5px);
  box-shadow: 0 4px 14px rgba(11, 14, 20, 0.35);
}
.sao-select-item:hover .sao-select-sub,
.sao-select-item:focus-visible .sao-select-sub {
  color: var(--sao-amber);
}

/* ==========================================================================
   18c. 玩家资料窗（SAO 原作 Profile：六边形徽章 + 斜切 HP 条 + 三列数据）
   ========================================================================== */
.sao-profile-box {
  width: min(432px, 92vw);
}
.sao-profile-body {
  width: 100%;
}
.sao-profile-title {
  font-family: var(--font-sao);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.sao-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  margin-bottom: 15px;
}
.sao-profile-hex {
  flex: none;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #2b3245, #141824);
  border: 2px solid rgba(255, 255, 255, 0.85);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sao-amber);
}
.sao-profile-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sao-profile-name {
  font-family: var(--font-sao);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sao-profile-class {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}

/* 斜切 HP 条（原作玩家血条同构） */
.sao-profile-hp {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
}
.sao-profile-hp-frame {
  flex: 1;
  height: 18px;
  background: rgba(18, 22, 32, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.88);
  transform: skewX(-24deg);
  padding: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.sao-profile-hp-fill {
  height: 100%;
  width: 100%;
  background: var(--hp-grad-green);
  box-shadow: 0 0 10px rgba(56, 229, 77, 0.55);
  transform-origin: left center;
}
.sao-profile-hp-num {
  flex: none;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  background: var(--sys-bg);
  color: #fff;
  border-left: 3px solid var(--sao-amber);
  padding: 3px 9px;
}

.sao-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  border-top: 1px dashed var(--divider);
  padding-top: 14px;
}
.sao-profile-stat {
  text-align: center;
}
.sao-profile-stat b {
  display: block;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.sao-profile-stat span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.sao-profile-actions {
  margin-top: 18px;
}

/* ==========================================================================
   18d. 圆环菜单顶部时间条（原作菜单展开时的地名/时间 HUD）
   ========================================================================== */
.sao-menu-clock {
  position: absolute;
  right: 0;
  top: -46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--sys-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--sys-border);
  box-shadow: var(--sys-shadow);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.sao-menu-clock span {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sao-menu-clock .sao-menu-clock-time {
  color: var(--sao-amber);
}
.sao-menu-clock-sep {
  width: 5px;
  height: 5px;
  background: var(--sao-amber);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--sao-amber-glow);
}

/* ==========================================================================
   18e. 微交互：即时按压反馈 + 评论头像光环
   （按下即缩，松手即弹——100ms 级输入确认，只动 transform）
   ========================================================================== */
.sao-hud-btn:active,
.sao-select-close:active,
.sao-backtop:active {
  transform: scale(0.94);
}
.sao-circle-btn:active {
  transform: scale(0.9);
}
.sao-select-item:active {
  transform: translateX(-5px) scale(0.98);
}
.sao-submit-btn:active {
  transform: scale(0.96);
}
.sao-card-inner:active {
  transform: scale(0.985);
}
.sao-member-card:active {
  transform: scale(0.99);
}

/* 评论头像：可交互玩家实体的 hover 光环（配合选择框） */
.sao-comment .avatar {
  transition: filter 0.2s ease, transform 0.2s ease;
}
.sao-comment .avatar:hover {
  transform: scale(1.07);
  filter: drop-shadow(0 0 7px var(--sao-amber-glow));
}

/* 可交互玩家实体的基础指针语义（无 JS 时仍是原生链接） */
.sao-player-tag[data-sao-player] {
  cursor: pointer;
}

/* ==========================================================================
   20. 磁吸组件 <rb-magnet>（ReactBits Magnet 移植）
   ========================================================================== */
rb-magnet {
  display: inline-block;
  position: relative;
}
.rb-magnet-inner {
  display: inline-block;
  will-change: transform;
  /* 由 JS 直接写 transform；这里只给弹簧回弹留一点视觉缓冲 */
}
/* 吸附中：给按钮一点点暖光，暗示"被磁场抓住" */
rb-magnet.is-magnet-active .sao-hud-btn,
rb-magnet.is-magnet-active .sao-hero-btn {
  border-color: rgba(255, 153, 0, 0.75);
}
rb-magnet.is-magnet-active .sao-link-btn {
  box-shadow: 0 0 16px var(--sao-amber-glow);
}

/* 边框巡游组件 <rb-border-beam>
   默认 block：脱离内联元素的 0 尺寸陷阱；宿主可再指定宽高或改用绝对定位铺满 */
.rb-beam {
  position: relative;
  display: block;
}
/* 画布尺寸由组件 JS 按 _bleed() 写入（含外扩量与窄屏收缩） */
.rb-beam-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* Hero / 卡片内的巡边是「覆盖层」，必须脱离网格流铺满宿主，
   否则会被当成网格项压成 0 高度（优先级需高于 .rb-beam 的 relative） */
rb-border-beam.sao-hero-beam,
rb-spotlight-card > rb-border-beam.sao-card-beam {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 4;
}

/* ==========================================================================
   21. 点击多边形碎片（SAO Polygon Shatter）
   ========================================================================== */
.sao-shard-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-shard);
  pointer-events: none;
}
/* 「数据碎片力场」Buff 关闭时一并停掉点击碎片与下滑轨迹 */
html.sao-no-particles .sao-shard-canvas,
html.sao-no-particles #sao-trail-canvas {
  display: none;
}

/* ==========================================================================
   22. 结衣导航轨（Swipe-Down Gesture Rail）
   ========================================================================== */
.sao-gesture-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  --rail-progress: 0;
}

/* 垂直引导轨：一列向下流动的光点 */
.sao-rail-line {
  position: relative;
  width: 2px;
  height: 132px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.32) 30%,
    rgba(255, 255, 255, 0.32) 70%,
    rgba(255, 255, 255, 0.05)
  );
  overflow: hidden;
}
/* 充能进度：随下滑距离从顶部长出琥珀色（scaleY，不动布局） */
.sao-rail-line::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--sao-amber), var(--sao-cyan-bright));
  transform-origin: top center;
  transform: scaleY(var(--rail-progress, 0));
  box-shadow: 0 0 12px rgba(255, 153, 0, 0.7);
  transition: transform 0.12s linear;
}
.sao-rail-dot {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--sao-cyan-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(0, 229, 255, 0.85);
  animation: saoRailFlow 2.8s linear infinite;
}
.sao-rail-dot:nth-child(1) { animation-delay: 0s; }
.sao-rail-dot:nth-child(2) { animation-delay: 0.93s; }
.sao-rail-dot:nth-child(3) { animation-delay: 1.86s; }
@keyframes saoRailFlow {
  0% { top: -6px; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { top: calc(100% + 4px); opacity: 0; }
}

/* 结衣之心：呼吸发光的菱形光球 */
.sao-yui-orb {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}
.sao-yui-diamond {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.5), rgba(255, 153, 0, 0.35) 48%, rgba(11, 14, 20, 0.9) 78%);
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(255, 153, 0, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.35);
  animation: saoYuiBreath 2.6s ease-in-out infinite;
}
.sao-yui-heart {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
}
.sao-yui-heart .ico {
  width: 12px;
  height: 12px;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.9));
}
@keyframes saoYuiBreath {
  0%, 100% {
    box-shadow: 0 0 14px rgba(255, 153, 0, 0.45), inset 0 0 9px rgba(255, 255, 255, 0.28);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.7), 0 0 40px rgba(255, 153, 0, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.45);
    opacity: 1;
  }
}
.sao-yui-orb:hover .sao-yui-diamond {
  animation-duration: 1.1s;
}
.sao-yui-orb:hover .sao-yui-heart .ico {
  color: var(--sao-amber);
}

/* 导轨标注文字：竖排 */
.sao-rail-label {
  writing-mode: vertical-rl;
  font-family: var(--font-hud);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 3px rgba(11, 14, 20, 0.7);
  user-select: none;
}

/* 下滑轨迹画布 */
#sao-trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 9890;
  pointer-events: none;
}

/* 拖拽充能中 / 已触发：整条导轨进入激活态 */
.sao-gesture-rail.is-armed .sao-rail-label,
.sao-gesture-rail.is-charging .sao-rail-label {
  color: var(--sao-amber);
}
.sao-gesture-rail.is-charging .sao-yui-diamond {
  animation-duration: 0.7s;
}
.sao-gesture-rail.is-fired .sao-yui-diamond {
  animation: saoYuiFire 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes saoYuiFire {
  0% { transform: rotate(45deg) scale(1); }
  40% { transform: rotate(135deg) scale(1.55); box-shadow: 0 0 40px rgba(255, 255, 255, 0.95); }
  100% { transform: rotate(225deg) scale(1); }
}

/* ==========================================================================
   23. 阅读模式开关（Buff 按钮驱动的全局状态）
   ========================================================================== */
html.sao-wide-read .sao-article-wrap {
  max-width: 1100px;
}
html.sao-focus-read .sao-party-hud,
html.sao-focus-read .sao-top-controls,
html.sao-focus-read .sao-gesture-rail,
html.sao-focus-read .sao-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* 沉浸模式：HUD 淡出，但把顶部留白收窄，让正文顶上来 */
html.sao-focus-read .main-stage {
  padding-top: 72px;
  transition: padding 0.35s ease;
}

/* ==========================================================================
   19. 降级：reduced-motion / 触屏 / 打印
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* 准星不在降级之列：JS 已降级为即时跟随的指针替代，保持可见可用；
     锁定菱形的形状过渡（圆环变菱形）是指针自身的输入反馈而非装饰运动，保留 */
  rb-cursor .cursor-ring {
    transition-duration: 0.2s !important;
  }
  .sao-gesture-hint {
    display: none;
  }
  /* 降级：停掉装饰性循环动画，但保留静态外观 */
  .sao-avatar-ring,
  .sao-avatar-ring-inner,
  .sao-holo-ring,
  .sao-aincrad-floor,
  .sao-aincrad-orbit,
  .sao-yui-diamond,
  .sao-rail-dot,
  .sao-holo-scan,
  .sao-holo-figure,
  .sao-hero-badge-dot {
    animation: none !important;
  }
  /* 扫描线在降级下不出现，避免变成一条糊在封面上的实心条 */
  .sao-thumb-scan {
    display: none;
  }
  rb-spotlight-card:hover .sao-thumb-img,
  rb-spotlight-card:hover .sao-thumb-geo {
    animation: none !important;
    filter: none !important;
  }
}

@media (pointer: coarse) {
  html.sao-cursor-on body,
  html.sao-cursor-on body * {
    cursor: auto;
  }
  #sao-cursor {
    display: none;
  }
  /* 触屏没有悬停，说明卡改为常驻一行（不依赖 hover） */
  .sao-buff-card {
    display: none;
  }
  /* 触屏不启用磁吸与轨迹画布，省电 */
  .rb-magnet-inner {
    will-change: auto;
  }
}

@media print {
  #sao-cursor,
  .sao-party-hud,
  .sao-top-controls,
  .sao-menu-system,
  .sao-ambient,
  .sao-noise,
  .sao-sky,
  .sao-gesture-rail,
  #sao-trail-canvas,
  .sao-shard-canvas,
  rb-border-beam,
  #sao-bg-canvas,
  .sao-backtop,
  .sao-footer {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .sao-article {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}