/* ============================================================
   哈夫克全域互联终端 · 样式表
   设计基准画布：2560 × 1440（所有元素用百分比定位，字号用 cqw，
   因此整个网站在任何屏幕宽度下都会等比缩放，像游戏界面一样。）
   ============================================================ */

:root {
  /* —— 配色（从设计稿取样）—— */
  --ink: #101114;          /* 深色标题 */
  --ink-2: #3a3b3e;        /* 正文深灰 */
  --ink-3: #55606e;        /* 次级文字 */
  --ink-4: #8b93a3;        /* 弱化文字 */
  --accent: #2770c4;       /* 集团主蓝 */
  --accent-deep: #1b5cae;  /* 蓝·深 */
  --accent-soft: rgba(39, 112, 196, .08);
  --panel: rgba(243, 245, 249, .84);
  --panel-line: rgba(255, 255, 255, .75);
  --band-dark: #1f1f1f;
  --black: #000;
  --line: #e3e6ec;
  --white: #fff;

  /* —— 字体 —— */
  --font-cn: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
  --font-latin: "Bahnschrift", "Segoe UI", "Arial", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #d3d6de; /* 舞台以外的底色（超宽屏两侧） */
  font-family: var(--font-cn);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============ 舞台（16:9 画布） ============ */
.stage {
  position: relative;
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
  aspect-ratio: 2560 / 1440;
  overflow: hidden;
  container-type: size; /* 让 cqw 字号随舞台宽度缩放 */
  background:
    /* 斜向装饰块 */
    linear-gradient(115deg, rgba(255,255,255,.0) 22%, rgba(255,255,255,.34) 22.15%, rgba(255,255,255,0) 47%),
    linear-gradient(295deg, rgba(120,140,180,.05) 8%, rgba(120,140,180,0) 44%),
    linear-gradient(205deg, rgba(255,255,255,.30) 12%, rgba(255,255,255,0) 50%),
    linear-gradient(160deg, #e6e9f0 0%, #dbdee5 46%, #e1e4ec 74%, #d4d8e1 100%);
}
.stage::after { /* 极淡的四周压暗，模拟屏幕感 */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 6cqw rgba(80, 95, 125, .10);
  z-index: 8;
}

.scene { position: absolute; inset: 0; }
body[data-ready="1"] .scene { animation: sceneIn .45s ease-out both; }

@keyframes sceneIn {
  from { opacity: 0; transform: scale(1.004); }
  to   { opacity: 1; transform: none; }
}

/* ============ 顶部导航 ============ */
.nav {
  position: absolute; left: 0; right: 0; top: 0;
  height: 14.5%;
  z-index: 30;
  pointer-events: none; /* 内部元素单独开启点击 */
}
.nav > * { pointer-events: auto; }

.nav-logo {
  position: absolute; left: 4.3%; top: 76.8%;
  transform: translateY(-50%);
  width: 10.2%;
  display: block;
}
.nav-logo img { width: 100%; display: block; }

.nav-menu {
  position: absolute; left: 21.2%; right: 40.5%; top: 75.5%;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  font-size: 1.34cqw;
  font-weight: 600;
  letter-spacing: .06em;
}
.nav-menu a {
  color: var(--ink-2);
  text-decoration: none;
  padding: .2em .1em;
  transition: color .18s;
  position: relative;
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu a.active { color: var(--accent); }
.nav-menu a.active::after {
  content: "";
  position: absolute; left: 50%; bottom: -.35em; translate: -50% 0;
  width: 1.1em; height: 2px; background: var(--accent); opacity: .85;
}

/* 注意力点数 */
.attention {
  position: absolute; right: 4.6%; top: 77%;
  transform: translateY(-50%);
  display: flex; align-items: center;
  gap: .5em;
  cursor: pointer;
  user-select: none;
}
.attention svg { width: 1.9cqw; height: 1.9cqw; flex: none; }
.attention .att-label {
  font-size: 1.0cqw; font-weight: 700; color: #1d2530; letter-spacing: .05em;
}
.attention .att-sep {
  width: 1px; height: 1.6cqw; background: #aab1bf; margin: 0 .15em;
}
.attention .att-num {
  font-family: var(--font-latin);
  font-size: 2.35cqw; font-weight: 700; color: #16181d;
  min-width: 2.05em; text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.attention .att-num.flash-up { color: #1e9e50; }
.attention .att-num.flash-down { color: #d23c3c; }
.attention:hover .att-label { color: var(--accent); }

/* ============ 首页 Hero · 三屏轮播 ============ */
.hero-slides {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 10;
  cursor: grab;
}
.hero-slides.dragging { cursor: grabbing; }
.hero-slides.dragging .slide { transition: none !important; }
.hero-slides img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

.slide {
  position: absolute; inset: 0;
  transform: translateX(100%);
  transition: transform .62s cubic-bezier(.33, .8, .3, 1);
  user-select: none;
  -webkit-user-select: none;
}
.slide.instant { transition: none; }
.slide.is-active { transform: translateX(0); z-index: 2; }
.slide.to-left { transform: translateX(-100%); }
.slide.to-right { transform: translateX(100%); }
.slide:not(.is-active) { pointer-events: none; }

.hero-copy {
  position: absolute; left: 4.4%; top: 28.4%;
  width: 46%;
  z-index: 12;
}
.hero-copy h1 {
  font-size: 4.18cqw;
  font-weight: 900;
  color: #000;
  letter-spacing: .015em;
  line-height: 1.05;
  white-space: nowrap;
}
.hero-sig {
  position: absolute; left: 32.2%; top: 24.9%;
  width: 19%;
  z-index: 11;
  pointer-events: none;
}
.hero-sig img { width: 100%; display: block; opacity: .95; }
.hero-sig.sig-2 { left: 31.76%; top: 28.06%; width: 19.22%; }

.hero-sub {
  margin-top: 0.6cqh;
  font-size: 1.05cqw;
  color: #2c323c;
  letter-spacing: .05em;
  transition: opacity .3s;
}

/* 轮播指示器（固定在画布上，不随屏滑动） */
.hero-dots {
  position: absolute; left: 4.8%; top: 41.4%;
  display: flex; gap: .55cqw;
  z-index: 14;
}
.hero-dots button {
  width: .95cqw; height: .95cqw;
  border: 1px solid #b9c0cd;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.hero-dots button:hover { transform: scale(1.25); }
.hero-dots button.on { background: var(--accent); border-color: var(--accent); }

/* CEO 立绘 + 底部板块（按设计稿坐标摆放） */
.hero-ceo {
  position: absolute;
  left: 49.61%; top: 0;
  width: 50.39%;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.6%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.6%);
}
.hero-ceo.ceo-2 { left: 52.34%; width: 46.72%; }
.hero-ceo.ceo-3 { left: 46.88%; width: 52.19%; }

/* 每屏各自的人物下半身条带（只到卡片上边缘，滑动时不会盖到卡片） */
.hero-strip {
  position: absolute;
  top: calc(48.61% - .04%);
  height: 9.72%;
  display: block;
}
.strip-1 { left: 47.15%; width: 52.85%; }
.strip-2 { left: 48.59%; width: 51.41%; }
.strip-3 { left: 41.52%; width: 58.48%; }
.hero-band {
  position: absolute;
  left: 0; top: calc(48.61% - .04%);
  width: 100%;
  z-index: 9;
  display: block;
}

/* ============ 底部黑条 ============ */
.bottombar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6.25%;
  background: var(--black);
  z-index: 40;
  display: flex; align-items: center;
  padding: 0 1.6% 0 4.4%;
  gap: 1.2%;
  color: #9aa0ab;
}
.esc-chip {
  display: flex; align-items: center; gap: .5em;
  background: #1d1f24;
  border: 1px solid #33363d;
  color: #d6d9df;
  font-size: .84cqw;
  padding: .32em .7em;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: background .18s;
  font-family: var(--font-cn);
}
.esc-chip:hover { background: #2a2d34; }
.esc-chip .esc-key {
  font-family: var(--font-latin);
  font-size: .78cqw;
  border: 1px solid #5a5f6a;
  border-radius: 3px;
  padding: 0 .42em;
  line-height: 1.5;
  color: #aeb4bf;
}
.bb-icons {
  position: absolute; left: 76%;
  display: flex; align-items: center; gap: 1.1cqw;
  opacity: .75;
}
.bb-icons svg { width: 1.15cqw; height: 1.15cqw; fill: #7d838e; }
.bb-spacer { flex: 1; }
.bb-user {
  position: absolute; left: 84.5%;
  display: flex; align-items: center; gap: .6em;
}
.bb-avatar {
  width: 1.9cqw; height: 1.9cqw;
  border: 1px solid #454a53;
  background: repeating-linear-gradient(45deg, #2c3038 0 4px, #23262d 4px 8px);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-latin);
  font-size: .62cqw;
  color: #8d939e;
  letter-spacing: .04em;
}
.bb-meta {
  font-family: var(--font-latin);
  font-size: .78cqw;
  color: #7c828d;
  letter-spacing: .05em;
  display: flex; align-items: center; gap: .9em;
}
.bb-meta .restart {
  color: #8f96a2; cursor: pointer; transition: color .18s;
  text-decoration: none;
}
.bb-meta .restart:hover { color: var(--accent); }

/* ============ 启动终端 ============ */
.boot, .welcome {
  position: absolute; inset: 0;
  z-index: 60;
  background:
    linear-gradient(115deg, rgba(255,255,255,.0) 22%, rgba(255,255,255,.30) 22.15%, rgba(255,255,255,0) 47%),
    linear-gradient(205deg, rgba(255,255,255,.28) 12%, rgba(255,255,255,0) 50%),
    linear-gradient(160deg, #e3e6ee 0%, #d8dbe4 52%, #dfe2ea 100%);
}
.boot[hidden], .welcome[hidden] { display: none; }

.boot-logo {
  position: absolute; left: 17%; top: 19.1%;
  width: 24.6%;
  animation: bootLogoIn .9s ease-out both .1s;
}
.boot-logo img { width: 100%; display: block; }
@keyframes bootLogoIn {
  from { opacity: 0; transform: translateY(1.5%) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.boot-title {
  position: absolute; left: 56.2%; top: 19.1%;
  font-size: 1.28cqw;
  font-weight: 800;
  color: #1a2233;
  letter-spacing: .18em;
  animation: fadeUp .7s ease-out both .5s;
}
.boot-lines {
  position: absolute; left: 59.4%; top: 26.4%;
  width: 22%;
  list-style: none;
}
.boot-lines li {
  display: flex; align-items: baseline; gap: .75em;
  font-size: .98cqw;
  color: #2b3446;
  letter-spacing: .045em;
  padding: .58cqh 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .38s ease, transform .38s ease;
}
.boot-lines li.show { opacity: 1; transform: none; }
.boot-lines li .tri {
  flex: none;
  width: .62cqw; height: .62cqw;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(.06em);
}
.boot-lines li.dim { color: #4a5364; }

.boot-enter {
  position: absolute; left: 52.8%; top: 76.6%;
  display: flex; align-items: center;
  background: rgba(240, 243, 248, .55);
  border: none;
  border-left: 4px solid var(--accent);
  border-right: 4px solid var(--accent);
  padding: 1.05cqh 1.2cqw;
  font-family: var(--font-cn);
  font-size: 1.08cqw;
  font-weight: 700;
  color: #1c2333;
  letter-spacing: .06em;
  cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s, transform .5s, background .2s;
}
.boot-enter.show { opacity: 1; transform: none; }
.boot-enter:hover { background: rgba(255, 255, 255, .85); }
.boot-enter .sq {
  width: .55cqw; height: .55cqw; background: var(--accent);
  margin-right: .85em; flex: none;
}
.boot-skip {
  position: absolute; right: 3%; top: 5.2%;
  font-size: .95cqw; color: #6d7686;
  cursor: pointer; letter-spacing: .1em;
  transition: color .18s;
}
.boot-skip:hover { color: var(--accent); }

.boot-wordmark {
  position: absolute; left: 19.5%; top: 71.6%;
  width: 19.5%;
  animation: fadeUp .8s ease-out both .3s;
}
.boot-wordmark img { width: 100%; display: block; }

/* 启动页角落 HUD */
.boot-panel {
  position: absolute; left: 1.6%; top: 7.2%;
  font-size: .78cqw; color: #59616f; letter-spacing: .08em;
  line-height: 1.9;
  font-family: var(--font-latin), var(--font-cn);
}
.boot-panel b { color: #3d4553; font-weight: 700; }
.boot-panel .ok { color: #2f8f5b; }
.boot-strip {
  position: absolute; left: 3.4%; bottom: 5.4%;
  font-size: .78cqw; color: #6a7280; letter-spacing: .1em;
  display: flex; gap: 1.4em; align-items: center;
}
.boot-strip .dot { color: #35a05f; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============ 欢迎页 ============ */
.welcome-letter {
  position: absolute;
  font-family: var(--font-latin);
  font-size: 2.15cqw;
  font-weight: 600;
  color: #aeb4bf;
  opacity: 0;
  animation: fadeUp .7s ease-out both;
}
.welcome-logo {
  position: absolute; left: 38.0%; top: 20.2%;
  width: 24.2%;
  animation: welcomeLogo 1s cubic-bezier(.2,.7,.2,1) both .1s;
}
.welcome-logo img { width: 100%; display: block; }
@keyframes welcomeLogo {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.welcome-wordmark {
  position: absolute; left: 40.3%; top: 73.3%;
  width: 19.5%;
  animation: fadeUp .8s ease-out both .9s;
}
.welcome-wordmark img { width: 100%; display: block; }
.welcome-ok {
  position: absolute; left: 0; right: 0; top: 81%;
  display: flex; align-items: center; justify-content: center;
  gap: 1.1cqw;
  animation: fadeUp .7s ease-out both 1.6s;
}
.welcome-ok .txt {
  font-size: 1.45cqw; font-weight: 800; color: var(--accent);
  letter-spacing: .3em; text-indent: .3em;
}
.welcome-ok .dash {
  width: 6.5cqw; height: 2px; background: #9fa7b4;
}

/* ============ HUD 装饰（子页面） ============ */
.hud-uid {
  position: absolute; left: 1.1%; top: 1.6%;
  font-family: var(--font-latin);
  font-size: .72cqw; color: #6d7686; letter-spacing: .08em;
  z-index: 26; pointer-events: none;
}
.hud-meta {
  position: absolute; right: 4.4%; top: 3.2%;
  display: flex; gap: 1.1em;
  font-size: .74cqw; color: #8b93a3; letter-spacing: .22em;
  z-index: 26; pointer-events: none;
}
.hud-ops {
  position: absolute; right: 1.1%; bottom: 7.2%;
  font-family: var(--font-latin);
  font-size: .78cqw; color: #6d7686; letter-spacing: .06em;
  z-index: 26; pointer-events: none;
}
.hud-ruler {
  position: absolute; right: 0; top: 0; bottom: 6.25%;
  width: 1.7%;
  z-index: 7;
  display: flex; flex-direction: column; align-items: flex-end;
  padding-top: 4cqh;
  gap: 1.45cqh;
  pointer-events: none;
  overflow: hidden;
}
.hud-ruler .rk {
  display: flex; align-items: center; gap: .45em;
  font-family: var(--font-latin);
  font-size: .62cqw; color: #9aa2b1;
}
.hud-ruler .rk i {
  width: .5cqw; height: 1px; background: #aab1bf; display: block;
}
.side-arrow {
  position: absolute; left: 2.1%; top: 56%;
  z-index: 12;
  display: flex; flex-direction: column; align-items: center;
  gap: .7cqh;
  pointer-events: none;
}
.side-arrow .bar { width: 3px; height: 7.5cqh; background: #b8352c; }
.side-arrow .tri {
  width: .7cqw; height: .95cqw; background: #b8352c;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* ============ 子页面通用：左侧信息面板 ============ */
.panel {
  position: absolute; left: 3.9%; top: 18.2%;
  width: 20.1%; height: 70.3%;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: 0 .35cqw 1.4cqw rgba(44, 58, 88, .07);
  padding: 2.6cqh 1.55cqw;
  z-index: 12;
  display: flex; flex-direction: column;
}
.panel h2 {
  font-size: 1.78cqw;
  font-weight: 800;
  color: #14171d;
  letter-spacing: .06em;
  display: flex; align-items: center; gap: .5em;
}
.panel h2::before {
  content: "";
  width: .34cqw; height: 1.5cqw;
  background: var(--accent);
}
.panel .panel-idx {
  margin-top: .8cqh;
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-latin);
  font-size: .62cqw; color: #a2a9b7; letter-spacing: .18em;
}
.panel .panel-idx i { flex: 1; height: 1px; background: #dfe3ea; display: block; }
.panel p {
  margin-top: 1.7cqh;
  font-size: 0.94cqw;
  line-height: 1.7;
  color: #454d5c;
  letter-spacing: .03em;
}
.panel .panel-note {
  font-size: .88cqw;
  color: #6d7585;
}
.panel .grow { flex: 1; }

/* 面板底部卡片（军工品质等） */
.panel-card {
  margin-top: 2.2cqh;
  background: rgba(252, 253, 255, .8);
  border: 1px solid #e7eaf0;
  padding: 1.6cqh 1.2cqw;
  display: flex; gap: .9cqw; align-items: center;
}
.panel-card svg { width: 3.1cqw; height: 3.1cqw; flex: none; }
.panel-card .pc-title { font-size: 1.0cqw; font-weight: 700; color: #2a3242; }
.panel-card .pc-desc { font-size: .82cqw; color: #7a8292; margin-top: .5cqh; line-height: 1.6; }

/* ============ 论坛 ============ */
.forum-area {
  position: absolute; left: 29.3%; right: 1.6%; top: 19.5%; bottom: 7.5%;
  z-index: 12;
  display: flex; flex-direction: column;
}
.forum-table { width: 100%; }
.forum-head {
  display: grid;
  grid-template-columns: 4.8% 34.6% 26.5% 12% 22.1%;
  align-items: center;
  padding: 1.4cqh 0;
  border-bottom: 2px solid var(--accent);
  font-size: 1.1cqw;
  color: #3f4856;
  font-weight: 700;
  letter-spacing: .12em;
}
.forum-row {
  display: grid;
  grid-template-columns: 4.8% 34.6% 26.5% 12% 22.1%;
  align-items: center;
  padding: 2.6cqh 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .16s;
}
.forum-row:hover { background: rgba(255, 255, 255, .62); }
.forum-row .sq {
  width: .78cqw; height: .78cqw;
  background: var(--accent);
  border-radius: 1px;
}
.forum-row .f-title {
  font-size: 1.19cqw; font-weight: 700; color: #171b22;
  letter-spacing: .02em;
  padding-right: 2%;
  white-space: nowrap;
}
.forum-row .f-title .tag {
  font-size: .72cqw; font-weight: 700; color: var(--accent);
  border: 1px solid rgba(39, 112, 196, .5);
  padding: .12em .45em; margin-left: .6em;
  vertical-align: .15em;
  letter-spacing: .08em;
}
.forum-row .f-author {
  display: flex; align-items: center; gap: .8em;
}
.forum-row .f-author img {
  width: 1.95cqw; height: 1.72cqw; object-fit: cover;
  border-radius: 2px; flex: none;
  filter: saturate(.92);
}
.forum-row .f-author .an { font-size: 1.02cqw; font-weight: 700; color: #232a36; }
.forum-row .f-author .ad { font-size: .84cqw; color: #8b93a3; margin-top: .3cqh; }
.forum-row .f-reply { font-family: var(--font-latin); font-size: 1.1cqw; color: #2a3140; }
.forum-row .f-last { font-size: 1.02cqw; color: #333b49; }

.forum-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 2.2em;
  padding: 1.5cqh 0;
  font-size: .95cqw;
  color: #5b6474;
  letter-spacing: .06em;
}
.forum-foot .ff { display: flex; align-items: center; gap: .5em; }
.forum-foot .ff .bx {
  width: .72cqw; height: .72cqw; border-radius: 1px; display: inline-block;
}
.forum-foot .ff .bx.b1 { background: var(--accent); }
.forum-foot .ff .bx.b2 { border: 1px solid #9aa3b2; }
.forum-foot .ff .up { color: #6d7686; font-family: var(--font-latin); }
.forum-foot .sep { width: 1px; height: 1.4cqh; background: #d6dae2; }
.forum-watermark {
  position: absolute; right: 3%; bottom: 0.4cqh;
  font-family: var(--font-latin);
  font-size: .7cqw; color: #c3c9d4; letter-spacing: .35em;
}

/* 发帖按钮 */
.post-btn {
  margin-top: 1.8cqh;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-cn);
  font-size: 1.16cqw;
  font-weight: 700;
  letter-spacing: .3em; text-indent: .3em;
  padding: 1.2cqh 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.post-btn:hover { background: var(--accent-deep); }
.post-btn:active { transform: scale(.99); }

/* 舆情卡（面板内） */
.senti {
  margin-top: 1.2cqh;
  background: rgba(252, 253, 255, .82);
  border: 1px solid #e7eaf0;
  padding: 1.1cqh 1cqw;
  display: flex; gap: .85cqw;
}
.senti svg { width: 1.7cqw; height: 1.7cqw; flex: none; opacity: .8; }
.senti .sn { font-size: .92cqw; font-weight: 700; color: #2a3242; }
.senti .sd { font-size: .76cqw; color: #7a8292; margin-top: .3cqh; line-height: 1.55; }

/* ============ 解决方案 ============ */
.gear-banner {
  position: absolute; left: 27.7%; top: 19.1%;
  width: 67.7%;
  z-index: 11;
  display: block;
}
.shop {
  position: absolute; left: 27.7%; right: 1.2%; top: 41%; bottom: 7.5%;
  z-index: 12;
  display: flex; flex-direction: column;
  gap: 1.1cqh;
}
.shop-row {
  display: grid;
  grid-template-columns: 6.6% 1fr 13.5% 12.9%;
  align-items: center;
  gap: 1.3%;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 .2cqw 1cqw rgba(44, 58, 88, .05);
  padding: 1.6cqh 1.4cqw;
  flex: 1;
}
.shop-row .thumb { display: flex; justify-content: center; }
.shop-row .thumb img { max-height: 11.6cqh; max-width: 100%; display: block; }
.shop-row .g-title {
  display: flex; align-items: baseline; gap: .9em;
  font-size: 1.5cqw; font-weight: 800; color: #14181f;
  letter-spacing: .04em;
}
.limit-pill {
  font-size: .86cqw; font-weight: 700; color: var(--accent);
  border: 1px solid rgba(39, 112, 196, .55);
  background: var(--accent-soft);
  padding: .1em .55em;
  letter-spacing: .06em;
}
.shop-row .g-desc {
  margin-top: .9cqh;
  font-size: 1.0cqw; color: #4c5564; letter-spacing: .02em;
}
.shop-row .g-link {
  margin-top: .7cqh;
  font-size: .92cqw; color: var(--accent);
  cursor: pointer; display: inline-block;
  letter-spacing: .04em;
}
.shop-row .g-link:hover { text-decoration: underline; }
.price {
  display: flex; align-items: center; justify-content: flex-end; gap: .55em;
  font-family: var(--font-latin);
  font-size: 1.42cqw; font-weight: 700; color: #15171b;
  font-variant-numeric: tabular-nums;
}
.price svg { width: 1.35cqw; height: 1.35cqw; }
.buy-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-cn);
  font-size: 1.18cqw; font-weight: 700;
  letter-spacing: .28em; text-indent: .28em;
  padding: 1.25cqh 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.buy-btn:hover { background: var(--accent-deep); }
.buy-btn:active { transform: scale(.98); }

/* ============ 寻人启事 ============ */
.poster {
  position: absolute; top: 18.1%;
  width: 31.4%;
  z-index: 11;
}
.poster img { width: 100%; display: block; }
.poster-h42 { left: 30.3%; }
.poster-zoya { left: 63.9%; }
.poster-hotspot {
  position: absolute;
  left: 4.8%; top: 89.7%;
  width: 50.2%; height: 7.2%;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
}
.poster-hotspot:hover {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.poster-hotspot:active { background: rgba(255, 255, 255, .28); }

/* ============ 导航「新」标签 ============ */
.nav-menu .nav-new {
  font-style: normal;
  font-size: .68em;
  color: #fff;
  background: var(--accent);
  border-radius: 2px;
  padding: .06em .36em;
  margin-left: .4em;
  vertical-align: .45em;
  letter-spacing: .05em;
}

/* ============ 入职测试 ============ */
.quiz {
  position: absolute; left: 29.3%; right: 1.6%; top: 19.5%; bottom: 7.5%;
  z-index: 12;
  display: flex; flex-direction: column;
}
.quiz-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 1.6cqh;
  border-bottom: 2px solid var(--accent);
}
.quiz-title {
  font-size: 1.55cqw; font-weight: 800; color: #14181f; letter-spacing: .06em;
  display: flex; align-items: baseline; gap: .9em;
}
.quiz-title .qz-en {
  font-family: var(--font-latin);
  font-size: .78cqw; color: #a2a9b7; font-weight: 600; letter-spacing: .22em;
}
.quiz-prog { font-size: 1.05cqw; color: #3f4856; letter-spacing: .06em; }
.quiz-prog b {
  font-family: var(--font-latin);
  font-size: 1.6cqw; font-weight: 800; color: var(--accent);
}
.quiz-track { height: 3px; background: #e3e6ec; margin-top: 1.2cqh; }
.quiz-track i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .35s ease;
}
.quiz-card {
  margin-top: 3cqh;
  flex: 1;
  min-height: 0;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 .2cqw 1cqw rgba(44, 58, 88, .05);
  padding: 3cqh 2.4cqw;
  display: flex; flex-direction: column; justify-content: center;
}
.quiz-card.in { animation: qIn .3s ease-out both; }
@keyframes qIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.q-kicker {
  font-family: var(--font-latin);
  font-size: .82cqw; color: #98a0af; letter-spacing: .22em;
}
.q-stem {
  margin-top: 1.4cqh;
  font-size: 1.5cqw; font-weight: 800; color: #171b22;
  line-height: 1.55; letter-spacing: .02em;
}
/* 看图题 */
.q-imgwrap {
  margin-top: 1.2cqh;
  display: flex; justify-content: center;
}
.q-imgwrap img {
  max-width: 80%; max-height: 20cqh;
  display: block;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 .25cqw 1.2cqw rgba(44, 58, 88, .18);
}
.quiz-card.has-img { justify-content: flex-start; padding-top: 2cqh; padding-bottom: 2cqh; }
.quiz-card.has-img .q-stem { font-size: 1.25cqw; }
.quiz-card.has-img .q-opts { margin-top: 1.8cqh; gap: .9cqh; }
.quiz-card.has-img .q-opt { padding: 1.05cqh 1.4cqw; }
.q-opts {
  margin-top: 3.2cqh;
  display: flex; flex-direction: column; gap: 1.6cqh;
}
.q-opt {
  display: flex; align-items: center; gap: 1.1em;
  text-align: left;
  background: rgba(255, 255, 255, .72);
  border: 1px solid #dfe3ea;
  padding: 1.8cqh 1.5cqw;
  font-family: var(--font-cn);
  font-size: 1.1cqw; color: #2b3446; letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s;
}
.q-opt .k {
  flex: none;
  width: 1.9cqw; height: 1.9cqw;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-latin);
  font-size: 1cqw; font-weight: 700; color: #55606e;
  border: 1px solid #b9c0cd; background: #fff;
  transition: background .16s, color .16s, border-color .16s;
}
.q-opt:hover { border-color: var(--accent); background: #fff; transform: translateX(4px); }
.q-opt:hover .k { background: var(--accent); color: #fff; border-color: var(--accent); }
.q-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.q-opt:disabled { cursor: default; }
.q-opt:disabled:hover { transform: none; }
.quiz-foot {
  margin-top: 2.6cqh;
  text-align: center;
  font-size: .88cqw; color: #8b93a3; letter-spacing: .08em;
}
/* 录用印章（入职成功弹窗内） */
.hire-stamp {
  position: absolute; right: 1.8cqw; top: 2cqh;
  transform: rotate(-12deg);
  border: 3px double #b8352c;
  color: #b8352c;
  font-size: 1.02cqw; font-weight: 900;
  line-height: 1.55; letter-spacing: .18em;
  padding: .4em .55em;
  opacity: .88;
  text-align: center;
  user-select: none;
}

/* ============ 瓦罗兰特 · 夜市 ============ */
.vlt {
  position: absolute; left: 29.3%; right: 1.6%; top: 19.5%; bottom: 7.5%;
  z-index: 12;
}
.vlt-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 1.1cqw;
}
.vlt-scroll::-webkit-scrollbar { width: .5cqw; }
.vlt-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .45); }
.vlt-scroll::-webkit-scrollbar-thumb { background: #b9c0cd; border-radius: 2px; }
.vlt-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.vlt-banner {
  width: 100%; display: block;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 .2cqw 1.2cqw rgba(44, 58, 88, .12);
}

/* —— 夜市本体（蓝紫星空 + 发光斜线）—— */
.nm {
  margin-top: 3cqh;
  position: relative;
  padding: 4cqh 2.2cqw 3cqh;
  overflow: hidden;
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(126, 90, 230, .38), rgba(126, 90, 230, 0) 58%),
    radial-gradient(90% 70% at 50% 115%, rgba(220, 90, 200, .30), rgba(220, 90, 200, 0) 62%),
    linear-gradient(165deg, #262e6e 0%, #2c2472 38%, #3a1f68 68%, #251a55 100%);
  border: 1px solid rgba(150, 130, 255, .35);
  box-shadow: 0 .4cqw 2cqw rgba(40, 30, 90, .35);
}
/* 交错发光斜线（还原游戏背景） */
.nm::before, .nm::after {
  content: ""; position: absolute; left: -30%; top: 50%;
  width: 160%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(210, 140, 255, .5) 25%, rgba(255, 140, 230, .75) 50%, rgba(210, 140, 255, .5) 75%, transparent);
  filter: drop-shadow(0 0 .5cqw rgba(230, 130, 255, .8));
  pointer-events: none;
}
.nm::before { transform: rotate(28deg); }
.nm::after { transform: rotate(-28deg); }

.nm-head { position: relative; z-index: 2; text-align: center; }
.nm-title {
  display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  font-size: 2.5cqw; font-weight: 900; color: #fff;
  letter-spacing: .22em; text-indent: .22em;
  text-shadow: 0 0 1.6cqw rgba(255, 255, 255, .45);
}
.nm-title .nm-line {
  width: 7cqw; height: 1px; display: block; position: relative;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8));
}
.nm-title .nm-line.r { background: linear-gradient(90deg, rgba(255, 255, 255, .8), transparent); }
.nm-title .nm-line::after {
  content: ""; position: absolute; top: -2px; width: 5px; height: 5px;
  transform: rotate(45deg); background: rgba(255, 255, 255, .85);
}
.nm-title .nm-line.l::after { right: 0; }
.nm-title .nm-line.r::after { left: 0; }
.nm-pill {
  display: inline-flex; align-items: baseline; gap: .4em;
  margin-top: 1.6cqh;
  padding: .55cqh 1.6cqw;
  border-radius: 999px;
  background: rgba(16, 22, 64, .55);
  border: 1px solid rgba(150, 140, 255, .4);
  font-size: .8cqw; color: #c3c9f2; letter-spacing: .1em;
}
.nm-pill b { color: #fff; font-weight: 700; }
.nm-count {
  position: absolute; right: 2.2cqw; top: 2.6cqh; z-index: 3;
  font-size: .82cqw; color: #aab1dd; letter-spacing: .06em;
}
.nm-count b { font-family: var(--font-latin); font-size: 1.05cqw; font-weight: 800; color: #fff; }

/* —— 神秘卡：粉 / 金渐变 + 翻转 —— */
.nm-cards {
  position: relative; z-index: 2;
  margin-top: 3cqh;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1.2cqh 1cqw;
}
.nm-card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 900px;
  background: transparent;
  border: none; padding: 0;
  cursor: pointer;
  font-family: var(--font-cn);
  text-align: left;
}
.nm-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .7, .3, 1);
}
.nm-card.open .nm-inner { transform: rotateY(180deg); }
.nm-face {
  position: absolute; inset: 0;
  display: flex;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 0 1.2cqw rgba(255, 255, 255, .12), 0 .3cqw 1cqw rgba(20, 12, 60, .35);
}
.nm-face.pink {
  background: linear-gradient(168deg, #e469c3 0%, #cf55b4 34%, #a03ab0 68%, #6a2a9c 100%);
}
.nm-face.gold {
  background: linear-gradient(168deg, #f2b04c 0%, #e89838 36%, #cd6a2e 70%, #a3402c 100%);
}
.nm-back {
  align-items: center; justify-content: center;
  transition: transform .18s, box-shadow .18s;
}
.nm-back::before {
  content: ""; position: absolute; inset: 4.5%;
  border: 1px solid rgba(255, 255, 255, .35);
  pointer-events: none;
}
.nm-card:hover .nm-back {
  transform: translateY(-.4cqh);
  box-shadow: 0 0 2cqw rgba(255, 130, 220, .45);
}
.nm-emblem {
  width: 62%; height: 84%;
  filter: drop-shadow(0 0 .7cqh rgba(255, 255, 255, .55));
  opacity: .92;
}
.nm-front {
  transform: rotateY(180deg);
  display: block;
  overflow: hidden;
}
.nm-imgwrap {
  position: absolute; left: 0; right: 0; top: 17%; bottom: 15%;
  display: flex; align-items: center; justify-content: center;
}
.nm-imgwrap img {
  max-width: 88%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .4cqh .8cqh rgba(40, 10, 60, .45));
}
.nm-disc {
  position: absolute; left: 0; top: 0; z-index: 3;
  background: linear-gradient(180deg, #e73c67, #d22455);
  color: #fff;
  font-family: var(--font-latin);
  font-size: .78cqw; font-weight: 800;
  padding: .45cqh .55cqw .45cqh .45cqw;
  letter-spacing: .02em;
}
.nm-pwrap {
  position: absolute; right: .5cqw; top: .6cqh; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .2cqh;
}
.nm-pricebox { display: flex; align-items: center; gap: .35em; }
.nm-coin { display: flex; }
.nm-coin svg { width: .95cqw; height: .95cqw; }
.nm-new {
  font-family: var(--font-latin);
  font-size: 1cqw; font-weight: 800; color: #fff;
  text-shadow: 0 .15cqh .4cqh rgba(30, 10, 50, .5);
}
.nm-old {
  font-family: var(--font-latin);
  font-size: .68cqw; color: rgba(255, 255, 255, .78);
  text-decoration: line-through;
}
.nm-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 14.5%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 .5cqw;
  box-sizing: border-box;
  background: rgba(22, 20, 62, .88);
  color: #f2f3fb;
  font-size: .76cqw; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden;
}

.nm-foot {
  position: relative; z-index: 2;
  margin-top: 3cqh;
  display: flex; align-items: center; justify-content: center;
  gap: 2em;
}
.nm-foot span { font-size: .82cqw; color: #b9bfe8; letter-spacing: .04em; }
.nm-reroll {
  background: linear-gradient(180deg, #e0579f, #c22e85); color: #fff; border: none;
  font-family: var(--font-cn);
  font-size: .92cqw; font-weight: 700;
  letter-spacing: .2em; text-indent: .2em;
  padding: 1cqh 1.6cqw;
  cursor: pointer;
  transition: filter .18s, transform .12s;
}
.nm-reroll:hover { filter: brightness(1.12); }
.nm-reroll:active { transform: scale(.98); }

/* —— 下滑提示 —— */
.vlt-hint {
  position: absolute; left: 50%; bottom: 1.8cqh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7cqh;
  padding: 1cqh 1.5cqw;
  background: rgba(15, 25, 35, .88);
  border: 1px solid #2a3f52;
  color: #e8ebf1;
  font-size: .85cqw; letter-spacing: .18em;
  pointer-events: none;
  z-index: 14;
  transition: opacity .4s, transform .4s;
}
.vlt-hint.hide { opacity: 0; transform: translateX(-50%) translateY(12px); }
.vlt-hint i {
  width: 0; height: 0;
  border-left: .38cqw solid transparent;
  border-right: .38cqw solid transparent;
  border-top: .5cqw solid #ff4655;
  animation: hintBob 1.2s ease-in-out infinite;
}
@keyframes hintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.4cqh); }
}

/* ============ 弹窗 ============ */
.modal-root {
  position: absolute; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 13, 20, .52);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s;
}
.modal-root[hidden] { display: none; }
.modal-root.show { opacity: 1; }

.modal {
  width: 37%;
  background: #f5f7fa;
  border: 1px solid #fff;
  box-shadow: 0 1.2cqw 4cqw rgba(10, 16, 30, .35);
  padding: 3.2cqh 2.2cqw 2.6cqh;
  position: relative;
  transform: translateY(10px) scale(.985);
  transition: transform .24s cubic-bezier(.2,.7,.2,1);
}
.modal-root.show .modal { transform: none; }
/* 四角括号 */
.modal::before, .modal::after {
  content: ""; position: absolute;
  width: 1.1cqw; height: 1.1cqw;
  border: 2px solid var(--accent);
}
.modal::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.modal::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }

.modal .m-title {
  display: flex; align-items: center; gap: .55em;
  font-size: 1.32cqw; font-weight: 800; color: #14181f;
  letter-spacing: .05em;
}
.modal .m-title::before {
  content: ""; width: .34cqw; height: 1.2cqw; background: var(--accent);
}
.modal .m-body {
  margin-top: 2.2cqh;
  font-size: 1.02cqw; line-height: 1.9; color: #3d4553;
  letter-spacing: .02em;
}
.modal .m-body .hl { color: var(--accent); font-weight: 700; }
.modal .m-body .dim { color: #8b93a3; font-size: .9cqw; }
.modal .m-actions {
  margin-top: 3cqh;
  display: flex; justify-content: flex-end; gap: .9cqw;
}
.modal button {
  font-family: var(--font-cn);
  font-size: 1.02cqw; font-weight: 700;
  letter-spacing: .12em;
  padding: .95cqh 1.5cqw;
  cursor: pointer;
  border-radius: 3px;
  transition: background .16s, border-color .16s, transform .12s;
}
.modal button:active { transform: scale(.98); }
.modal .m-primary {
  background: var(--accent); color: #fff; border: none;
}
.modal .m-primary:hover { background: var(--accent-deep); }
.modal .m-ghost {
  background: transparent; color: #55606e;
  border: 1px solid #c6ccd7;
}
.modal .m-ghost:hover { border-color: #9aa3b2; color: #333b49; }

/* ============ 提示 toast ============ */
.toast-root {
  position: absolute; right: 2.2%; top: 15.5%;
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1cqh;
  pointer-events: none;
}
.toast {
  background: rgba(17, 21, 29, .93);
  color: #e8ebf1;
  border-left: 3px solid var(--accent);
  font-size: .95cqw;
  letter-spacing: .04em;
  padding: 1.1cqh 1.1cqw;
  border-radius: 2px;
  box-shadow: 0 .4cqw 1.6cqw rgba(8, 12, 22, .3);
  animation: toastIn .28s ease-out both;
  max-width: 26cqw;
}
.toast .hl { color: #7db4ea; font-weight: 700; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
.toast.out { animation: toastOut .3s ease-in both; }
@keyframes toastOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(10px); }
}

/* ============ 充能耗尽（全屏故障） ============ */
.glitch {
  position: absolute; inset: 0;
  z-index: 85;
  background: rgba(8, 10, 14, .88);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 3cqh;
  color: #dfe4ec;
  animation: glitchFlicker .5s steps(2) infinite;
}
.glitch[hidden] { display: none; }
.glitch .g-line1 { font-size: 2.6cqw; font-weight: 900; letter-spacing: .3em; }
.glitch .g-line2 { font-size: 1.1cqw; color: #8b93a3; letter-spacing: .2em; }
.glitch button { margin-top: 2cqh; }
@keyframes glitchFlicker {
  0% { filter: none; }
  100% { filter: hue-rotate(8deg) brightness(1.04); }
}

/* ============ 响应式（小屏提示） ============ */
@media (max-width: 900px) {
  .stage { min-height: 56vw; }
}