/* ============================================================
   LXH:// —— 全息终端
   一套霓虹调色板，不跟随系统明亮/暗色。
   克制的原则：HUD 只做「框」和「读数」，主角永远只有名字一个。
   ============================================================ */

:root {
  --void:   #05010d;
  --void-2: #0a0320;

  --cyan:    #00f0ff;
  --magenta: #ff2bd6;
  --violet:  #7b2bff;

  --fg:   #d8e6ff;
  --dim:  #7d8cc4;
  --dim-2:#465286;

  --line:      rgba(0, 240, 255, 0.30);
  --line-soft: rgba(0, 240, 255, 0.12);

  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;
  --cjk:  "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC",
          "Microsoft YaHei", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--fg);
  font-family: var(--mono);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 只有准星真的接管了才隐藏系统指针 —— JS 挂了不能让人没了鼠标 */
body.reticle-on { cursor: none; }
@media (pointer: coarse) { body, body.reticle-on { cursor: auto; } }

.mono { font-family: var(--mono); }
.dim  { color: var(--dim); }

/* ============================================================
   画面层
   ============================================================ */

.deck { position: relative; width: 100%; height: 100svh; min-height: 480px; overflow: hidden; }

.field { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }

/* 兜底：WebGL 起不来也得是霓虹，而且必须会动 */
.fallback {
  position: absolute;
  inset: -15%;
  z-index: 0;
  background:
    radial-gradient(38% 26% at 50% 70%, rgba(255, 43, 214, 0.26), transparent 68%),
    radial-gradient(60% 30% at 50% 74%, rgba(123, 43, 255, 0.20), transparent 70%),
    linear-gradient(180deg, #05010d 0%, #070218 46%, #0d0330 70%, #14043c 100%);
  animation: drift 26s ease-in-out infinite alternate;
}
body.gl-live .fallback { opacity: 0; transition: opacity 1s var(--ease); }

@keyframes drift {
  from { transform: translate3d(-1.5%, 0.8%, 0) scale(1.03); }
  to   { transform: translate3d(1.5%, -0.8%, 0) scale(1.09); }
}

/* CRT 扫描线：叠在画面和 HUD 之上，但很轻 */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.028) 0px,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.7;
}

/* ============================================================
   HUD
   ============================================================ */

.hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  padding: clamp(16px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 四角细线框 */
.corners { position: absolute; inset: clamp(9px, 1.4vw, 17px); }
.corners i {
  position: absolute;
  width: clamp(16px, 2.2vw, 30px);
  height: clamp(16px, 2.2vw, 30px);
  border: 1px solid rgba(0, 240, 255, 0.55);
  opacity: 0;
  animation: corner-in 1.4s var(--ease) forwards;
}
.corners i:nth-child(1) { top: 0;    left: 0;   border-width: 1px 0 0 1px; animation-delay: .6s; }
.corners i:nth-child(2) { top: 0;    right: 0;  border-width: 1px 1px 0 0; animation-delay: .7s; }
.corners i:nth-child(3) { bottom: 0; right: 0;  border-width: 0 1px 1px 0; animation-delay: .8s; }
.corners i:nth-child(4) { bottom: 0; left: 0;   border-width: 0 0 1px 1px; animation-delay: .9s; }
@keyframes corner-in { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }

/* ---- 上下横栏 ---- */
.rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(9.5px, 0.82vw, 11.5px);
  letter-spacing: 0.20em;
  opacity: 0;
  animation: fade-in 1.4s var(--ease) 1s forwards;
}
.brand { color: var(--cyan); font-weight: 600; }
.brand .slashes { color: var(--magenta); }

.telemetry {
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

@keyframes fade-in { to { opacity: 1; } }

/* 主角：名字。用绝对定位锚在「日轮顶边之上」而不是靠居中对齐猜 ——
   地平线在 74% 处、日轮半径 0.235（见 field.js 的 HORIZON），
   所以日轮顶边大约在 50% 高度。hero 从 50% 往上长，
   名字 / 拼音 / 读数三行就永远压在日轮之上，不会被冲到脸上。 */
.hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56%;
  text-align: center;
  will-change: transform;
}

.kicker {
  margin: 0 0 clamp(12px, 1.6vw, 22px);
  font-size: clamp(9px, 0.78vw, 11px);
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--cyan);
  opacity: 0;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.55);
  animation: fade-in 1.6s var(--ease) .55s forwards;
}

/* 名字：白色实芯 + 两层干净辉光。不做渐变字，
   因为 text-shadow 在透明字色下不显示，会糊成一团。 */
.name {
  position: relative;
  margin: 0;
  font-family: var(--cjk);
  font-weight: 800;
  font-size: clamp(52px, 13vw, 158px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #fff;
  text-shadow:
    0 0 2px  rgba(255, 255, 255, 0.9),
    0 0 20px rgba(0, 240, 255, 0.50),
    0 0 52px rgba(123, 43, 255, 0.38);
  animation: name-in 1.7s var(--ease) .30s backwards;
}
@keyframes name-in {
  from { opacity: 0; filter: blur(12px); letter-spacing: .34em; }
  to   { opacity: 1; filter: blur(0);   letter-spacing: .12em; }
}

/* 色差残影：平时藏起来，发脉冲时窜一下 */
.name::before,
.name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-indent: 0.12em;
  letter-spacing: 0.12em;
  pointer-events: none;
  opacity: 0;
  text-shadow: none;
}
.name::before { color: var(--cyan);    z-index: -1; }
.name::after  { color: var(--magenta); z-index: -2; }

.name.is-glitch::before { opacity: .9; animation: glitch-a .3s steps(2, end) 2; }
.name.is-glitch::after  { opacity: .9; animation: glitch-b .3s steps(2, end) 2; }

@keyframes glitch-a {
  0%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  30% { transform: translate(-5px, 2px);  clip-path: inset(14% 0 56% 0); }
  65% { transform: translate(4px, -2px);  clip-path: inset(60% 0 16% 0); }
}
@keyframes glitch-b {
  0%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  30% { transform: translate(5px, -2px);  clip-path: inset(54% 0 20% 0); }
  65% { transform: translate(-4px, 2px);  clip-path: inset(8% 0 68% 0); }
}

.roman {
  margin: clamp(14px, 2vw, 26px) 0 0;
  font-size: clamp(10px, 0.92vw, 13px);
  letter-spacing: 0.78em;
  text-indent: 0.78em;
  color: var(--dim);
  opacity: 0;
  animation: fade-in 1.6s var(--ease) .95s forwards;
}

.meta {
  margin: clamp(16px, 2.2vw, 28px) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  font-size: clamp(9px, 0.78vw, 11px);
  letter-spacing: 0.16em;
  color: var(--dim);
  opacity: 0;
  animation: fade-in 1.6s var(--ease) 1.15s forwards;
}
.meta em { width: 1px; height: 9px; background: var(--dim-2); }
.meta .on { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }

/* ---- 操作提示：浮在底栏之上，不挤进 hero ---- */
.hint {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(58px, 8vh, 84px);
  margin: 0;
  text-align: center;
  font-size: clamp(9.5px, 0.82vw, 11.5px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--dim);
  opacity: 0;
  animation: fade-in 1.6s var(--ease) 1.7s forwards, breathe 3s ease-in-out 3s infinite;
  transition: opacity .7s ease;
}
.hint.is-gone { opacity: 0 !important; animation: none; }
.hint.is-pinned { opacity: 1 !important; animation: fade-in 1.6s var(--ease) forwards; }
.hint a { pointer-events: auto; color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--line); }
@keyframes breathe { 0%,100% { opacity: .40; } 50% { opacity: .92; } }

/* ---- 准星 ---- */
.reticle {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.reticle.is-on { opacity: 1; }
.reticle i { position: absolute; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.reticle i:nth-child(1) { top: 50%; left: 0;    width: 100%; height: 1px; transform: translateY(-50%); }
.reticle i:nth-child(2) { top: 0;    left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.reticle i:nth-child(3) { top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%,-50%); }
@media (pointer: coarse) { .reticle { display: none; } }

/* ---- 备案（法律要求：样式可换，内容不能删）---- */
.beian {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--cjk);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
}
.beian a { color: var(--dim); text-decoration: none; transition: color .3s ease; }
.beian a:hover, .beian a:focus-visible { color: var(--cyan); }
.beian .mps { display: inline-flex; align-items: center; gap: 5px; }
.beian .mps img { display: block; opacity: .55; }

/* ---- ?debug 诊断面板 ---- */
.debug {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 20;
  margin: 0;
  padding: 12px 14px;
  max-width: min(600px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: rgba(5, 1, 13, 0.92);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0;
  text-indent: 0;
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: auto;
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 760px) {
  .hero { bottom: 51%; }        /* 窄高屏上收一点，免得顶部太空 */
  .telemetry { max-width: none; order: 2; flex-basis: 100%; margin-top: 6px; }
  .rail-bottom { flex-wrap: wrap; }
  .rail-bottom .beian { justify-content: flex-start; }
  .meta { flex-wrap: wrap; gap: 6px 10px; }
  .hint { bottom: clamp(96px, 15vh, 130px); }
}

@media (max-height: 620px) {
  .hint { display: none; }
}

/* ============================================================
   无障碍
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .name, .corners i, .rail, .kicker, .roman, .meta, .hint, .fallback {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }
  .name { opacity: 1; filter: none; }
}

::selection { background: rgba(0, 240, 255, .3); color: #fff; }