/* ============ 决战地平线 · 加载画面 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --amber: #ffb340;
  --amber-deep: #ff8a1e;
  --red: #e8413c;
  --ink: #0b0e13;
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--ink);
  color: #e9ecf2;
  user-select: none;
  cursor: pointer;
}

/* ---------- 背景层 ---------- */
.bg {
  position: fixed; inset: 0;
  background: url("../assets/img/loading-bg.jpg") center / cover no-repeat;
  transform: scale(1.06);
  animation: bgDrift 24s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: scale(1.06) translateX(-14px); }
  to   { transform: scale(1.12) translateX(14px); }
}

.overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%,  rgba(11,14,19,0) 40%, rgba(11,14,19,.86) 100%),
    linear-gradient(180deg, rgba(11,14,19,.72) 0%, rgba(11,14,19,.28) 38%, rgba(11,14,19,.78) 100%);
}

.scanlines {
  position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  animation: scan 9s linear infinite;
}
@keyframes scan { from { background-position-y: 0; } to { background-position-y: 120px; } }

/* ---------- 载入主体 ---------- */
.boot {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2.2vh, 22px);
  padding: 24px;
  text-align: center;
}

/* 徽记 */
.emblem { position: relative; width: clamp(84px, 12vh, 120px); height: clamp(84px, 12vh, 120px); }
.emblem-ring, .emblem-cross { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem-ring  { animation: spin 10s linear infinite; }
.emblem-cross { animation: pulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255,179,64,.5)); }
.emblem-cross line:last-child { animation: blink 1.6s steps(1) infinite; }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 50% { opacity: .55; } }
@keyframes blink  { 50% { opacity: .15; } }

/* 标题 */
.title {
  font-size: clamp(38px, 7.4vh, 76px);
  font-weight: 900;
  letter-spacing: .18em; text-indent: .18em;
  color: #fff;
  text-shadow:
    0 0 22px rgba(255,179,64,.45),
    0 2px 0 rgba(0,0,0,.85),
    0 4px 18px rgba(232,65,60,.35);
}
.title em {
  font-style: normal;
  background: linear-gradient(180deg, #ffd27a 0%, var(--amber) 45%, var(--amber-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle {
  letter-spacing: .62em; text-indent: .62em;
  font-size: clamp(10px, 1.6vh, 14px);
  font-weight: 600; color: rgba(233,236,242,.62);
}

/* ---------- 进度条 ---------- */
.loader { width: min(560px, 84vw); }

.loader-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 13px; margin-bottom: 8px;
  color: rgba(233,236,242,.85);
}
.loader-top #pct {
  font-weight: 800; color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.bar {
  height: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  overflow: hidden;
}
.bar i {
  display: block; height: 100%; width: 0%;
  background:
    linear-gradient(180deg, #ffd27a 0%, var(--amber) 40%, var(--amber-deep) 100%);
  box-shadow: 0 0 18px rgba(255,158,30,.65);
  transition: width .18s ease-out;
}
.bar i::after {            /* 流光 */
  content: ""; display: block; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.tips {
  margin-top: 12px;
  font-size: 13px; color: rgba(233,236,242,.66);
  transition: opacity .3s;
}
.tips.fade { opacity: 0; }

/* 完成提示 */
.enter {
  height: 1.4em;
  font-size: 15px; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255,179,64,.7);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s, transform .45s;
}
.enter.show { opacity: 1; transform: none; animation: blink 1.2s steps(1) infinite; }

/* 角落信息 */
.corners {
  position: fixed; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: space-between;
  padding: 0 22px;
  font-size: 11px; color: rgba(233,236,242,.35);
  letter-spacing: .08em;
}

/* 屏幕边缘影视感暗角 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 180px rgba(0,0,0,.75);
}