@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

/* ═══════════════ 视觉基调（文档 §13.1） ═══════════════ */
:root {
  --c-cyan:    #00E5FF;
  --c-magenta: #FF2E88;
  --c-amber:   #FFB020;
  --c-green:   #22E39A;
  --c-red:     #FF2E20;
  --c-void:    #05070F;
  --c-panel:   rgba(8, 18, 34, 0.72);
  --c-line:    rgba(0, 229, 255, 0.35);
  --glow-cyan: 0 0 8px rgba(0, 229, 255, 0.8), 0 0 24px rgba(0, 229, 255, 0.35);
  --glow-amber: 0 0 8px rgba(255, 176, 32, 0.75), 0 0 22px rgba(255, 176, 32, 0.3);
  --font-hud: 'Orbitron', 'Rajdhani', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-cn: 'Rajdhani', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --u: clamp(7px, 0.72vmin, 13px);      /* HUD 基准单位 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-void);
  color: #DCEBFF;
  font-family: var(--font-hud);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#hud-root,
#screen-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#hud-root { pointer-events: none; z-index: 10; }
/* 必须为 none：否则这个铺满视口的空壳会吃掉全部触摸/鼠标事件，
   导致挂在 #game-canvas 上的拖拽监听永远收不到（手机无法移动飞机）。
   可交互子元素由下方 .screen-menu > * 重新开启 auto。 */
#screen-root { pointer-events: none; z-index: 20; }
#screen-root > * { position: absolute; inset: 0; }

.screen-scrim {
  background: radial-gradient(ellipse at 50% 45%, rgba(5, 12, 26, 0.72), rgba(2, 4, 10, 0.94));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.screen-scrim.on { opacity: 1; }

/* ═══════════════ Boot ═══════════════ */
#boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  background: var(--c-void);
  transition: opacity 0.5s ease;
}
#boot-overlay.done { opacity: 0; pointer-events: none; }
.boot-title {
  font-size: clamp(20px, 4vmin, 46px);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
}
.boot-bar {
  width: min(46vmin, 420px);
  height: 3px;
  background: rgba(0, 229, 255, 0.15);
  overflow: hidden;
}
.boot-bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  animation: boot-slide 1.1s ease-in-out infinite;
}
.boot-hint { font-size: clamp(10px, 1.5vmin, 15px); letter-spacing: 0.16em; color: #6E8DB0; }
.boot-error {
  max-width: 80vw;
  color: #FF8098;
  font-size: 12px;
  white-space: pre-wrap;
  text-align: left;
}
@keyframes boot-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ═══════════════ HUD 通用 ═══════════════ */
.hud {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-variant-numeric: tabular-nums;
}
.hud.on { opacity: 1; }

.hud .hud-label {
  font-size: calc(var(--u) * 0.85);
  letter-spacing: 0.22em;
  color: #6E8DB0;
  text-transform: uppercase;
}

.hud-panel {
  position: relative;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4);
}
.hud-panel::before,
.hud-panel::after {
  content: '';
  position: absolute;
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
  border: 2px solid var(--c-cyan);
  opacity: 0.85;
}
.hud-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.hud-corner { position: absolute; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
.hud-tl { top: calc(var(--u) * 2); left: calc(var(--u) * 2); width: calc(var(--u) * 21); }
.hud-tr { top: calc(var(--u) * 2); right: calc(var(--u) * 2); align-items: flex-end; }

/* ── 生命 ── */
.hud-hp { height: calc(var(--u) * 3.4); overflow: hidden; }
.hud-hp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(34, 227, 154, 0.35), rgba(34, 227, 154, 0.12));
  border-right: 2px solid var(--c-green);
  transition: width 0.12s linear, background 0.3s;
}
.hud-hp-segs {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  padding: 3px;
}
.hud-hp-segs i {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.12s;
}
.hud-hp-segs i.on { background: rgba(255, 255, 255, 0.14); }
.hud-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 1.05);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
.hud-hp.low .hud-hp-fill {
  background: linear-gradient(90deg, rgba(255, 46, 32, 0.4), rgba(255, 46, 32, 0.14));
  border-right-color: var(--c-red);
  animation: hp-pulse 0.5s steps(1) infinite;
}
@keyframes hp-pulse { 50% { opacity: 0.45; } }

/* ── 护盾 ── */
.hud-shield { display: none; gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * -0.3); }
.hud-shield.on { display: flex; }
.hud-diamond {
  width: calc(var(--u) * 1.3);
  height: calc(var(--u) * 1.3);
  background: linear-gradient(135deg, #6FD8FF, #2F9BFF);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(47, 155, 255, 0.9);
  animation: sf-shield-gain 0.3s ease-out;
}
@keyframes sf-shield-gain {
  0% { transform: rotate(45deg) scale(0.2); opacity: 0; }
  60% { transform: rotate(45deg) scale(1.4); }
  100% { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ── 火力 ── */
.hud-fire {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: calc(var(--u) * 0.4) calc(var(--u) * 0.7);
  align-items: center;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.1);
}
.hud-fire-pips {
  font-size: calc(var(--u) * 1.25);
  letter-spacing: 0.06em;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
}
.hud-fire-pips.max { color: var(--c-amber); text-shadow: var(--glow-amber); }
.hud-fire-bar {
  grid-column: 1 / -1;
  height: 2px;
  background: rgba(0, 229, 255, 0.18);
}
.hud-fire-fill { height: 100%; width: 0; background: var(--c-cyan); box-shadow: var(--glow-cyan); }

/* ── 分数 / 连击 / 关卡 ── */
.hud-score {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.2);
}
.hud-score-value {
  font-size: calc(var(--u) * 1.9);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #EAF6FF;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.hud-combo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.35);
  height: calc(var(--u) * 2.9);
  opacity: 0;
  transform-origin: right center;
  transition: opacity 0.2s;
}
.hud-combo-text {
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-amber);
  text-shadow: var(--glow-amber);
}
.hud-combo-bar {
  width: calc(var(--u) * 9);
  height: 2px;
  background: rgba(255, 176, 32, 0.18);
  overflow: hidden;
}
.hud-combo-fill {
  width: 0;
  height: 100%;
  background: var(--c-amber);
  box-shadow: var(--glow-amber);
}
.hud-combo.on { opacity: 1; }
.hud-combo.on .hud-combo-text { animation: combo-bounce 0.22s ease-out; }
/* 剩余时间不足 35%：整条转红，提醒你快断了 */
.hud-combo.urgent .hud-combo-text {
  color: #FF5A4A;
  text-shadow: 0 0 10px rgba(255, 46, 32, 0.9);
}
.hud-combo.urgent .hud-combo-fill {
  background: var(--c-red);
  box-shadow: 0 0 10px rgba(255, 46, 32, 0.9);
}
@keyframes combo-bounce {
  0% { transform: scale(1); }
  45% { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.hud-stage {
  font-size: calc(var(--u) * 1.05);
  letter-spacing: 0.24em;
  color: #9FC2E0;
  border-right: 2px solid var(--c-cyan);
  padding-right: calc(var(--u) * 0.8);
}

/* ── BOSS 血条 ── */
.hud-boss {
  position: absolute;
  top: calc(var(--u) * 2);
  left: 50%;
  transform: translateX(-50%);
  width: min(62vw, 900px);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2);
  background: var(--c-panel);
  border: 1px solid rgba(255, 46, 136, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.hud-boss.hidden { opacity: 0; transform: translateX(-50%) translateY(-16px); pointer-events: none; }
.hud-boss-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  margin-bottom: calc(var(--u) * 0.5);
}
.hud-boss-name {
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-magenta);
  text-shadow: 0 0 10px rgba(255, 46, 136, 0.6);
}
.hud-boss-title { font-size: calc(var(--u) * 0.95); letter-spacing: 0.2em; color: #8FA6C0; }
.hud-boss-bar {
  height: calc(var(--u) * 1.15);
  background: rgba(255, 46, 136, 0.12);
  border: 1px solid rgba(255, 46, 136, 0.3);
  overflow: hidden;
}
.hud-boss-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FF2E88, #FF7A4A);
  box-shadow: 0 0 12px rgba(255, 46, 136, 0.7);
  transition: width 0.18s linear;
}
.hud-boss-fill.enraged { background: linear-gradient(90deg, #FF2E20, #FFC24A); animation: hp-pulse 0.4s steps(1) infinite; }
.hud-boss-parts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.6);
  margin-top: calc(var(--u) * 0.6);
}
.hud-boss-part {
  position: relative;
  font-size: calc(var(--u) * 0.85);
  letter-spacing: 0.14em;
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.7);
  border: 1px solid rgba(255, 176, 32, 0.5);
  color: var(--c-amber);
  overflow: hidden;
}
.hud-boss-part::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  width: var(--hp, 100%);
  background: var(--c-amber);
}
.hud-boss-part.dead {
  color: #5A6A80;
  border-color: rgba(90, 106, 128, 0.4);
  text-decoration: line-through;
}
.hud-boss-part.dead::after { display: none; }
.hud-boss-phase {
  margin-top: calc(var(--u) * 0.5);
  text-align: right;
  font-size: calc(var(--u) * 0.85);
  letter-spacing: 0.24em;
  color: #8FA6C0;
}

/* ── 技能 ── */
.hud-skills {
  position: absolute;
  left: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  display: flex;
  gap: calc(var(--u) * 1.2);
}
.hud-skill { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4); }
.hud-skill-icon {
  position: relative;
  width: calc(var(--u) * 6.2);
  height: calc(var(--u) * 6.2);
  display: grid;
  place-items: center;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hud-skill-icon i {
  font-style: normal;
  font-size: calc(var(--u) * 1.9);
  font-weight: 700;
  color: #BFE9FF;
}
.hud-skill-cd {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--u) * 6.2);
  height: calc(var(--u) * 6.2);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  pointer-events: none;
}
.hud-skill-name { font-size: calc(var(--u) * 0.8); letter-spacing: 0.12em; color: #7E9CBC; }
.hud-skill.ready .hud-skill-icon { border-color: var(--c-cyan); box-shadow: var(--glow-cyan); }
.hud-skill.ready .hud-skill-icon i { color: #FFFFFF; }
.hud-skill.disabled { opacity: 0.4; }

/* ── 能量 ── */
.hud-energy {
  position: absolute;
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.5);
}
.hud-energy-bar {
  position: relative;
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 15);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hud-energy-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(0deg, #FFB020, #FF6A00);
  box-shadow: var(--glow-amber);
  transition: height 0.15s linear;
}
.hud-energy-text { font-size: calc(var(--u) * 0.95); letter-spacing: 0.14em; color: #9FC2E0; }
.hud-energy.ready .hud-energy-text {
  color: var(--c-amber);
  text-shadow: var(--glow-amber);
  animation: hp-pulse 0.6s steps(1) infinite;
}

/* ── 擦弹实时计数（右上，与连击同列） ── */
.hud-graze {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.0);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.hud-graze-label {
  font-size: calc(var(--u) * 0.8);
  letter-spacing: 0.24em;
  color: #6E8DB0;
}
.hud-graze-value {
  display: inline-block;
  min-width: calc(var(--u) * 2.4);
  text-align: right;
  font-size: calc(var(--u) * 1.35);
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 229, 255, 0.5);
}
.hud-graze.hot .hud-graze-value { color: var(--c-cyan); }
.hud-graze-pop {
  position: absolute;
  right: calc(100% + var(--u) * 0.5);
  bottom: 50%;
  font-size: calc(var(--u) * 1.15);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
  pointer-events: none;
  white-space: nowrap;
}

/* ── 浮层 ── */
.hud-toast-layer {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 0;
  height: 0;
}
.hud-toast {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 12px);
  white-space: nowrap;
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px currentColor;
}
.hud-banner-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.hud-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  white-space: nowrap;
  font-size: calc(var(--u) * 4.2);
  font-weight: 900;
  letter-spacing: 0.5em;
  color: #FFFFFF;
  text-shadow: 0 0 18px var(--c-cyan), 0 0 60px rgba(0, 229, 255, 0.6);
}
.hud-flash {
  position: absolute;
  inset: 0;
  background: #EAF9FF;
  opacity: 0;
  pointer-events: none;
}
.hud-damage {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(255, 32, 32, 0.75) 100%);
}

/* ═══════════════ 界面通用 ═══════════════ */
.screen-menu,
.screen-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.screen-menu > *,
.screen-overlay > * { pointer-events: auto; }

.sf-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vmin, 22px);
  padding: 4vmin;
  overflow: auto;
}

@keyframes sf-pop-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sf-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 200px; }
}

.sf-h2 {
  margin: 0;
  font-size: clamp(16px, 2.4vmin, 28px);
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
  text-transform: uppercase;
}
.sf-h3 {
  margin: 0 0 1vmin;
  font-size: clamp(11px, 1.5vmin, 16px);
  letter-spacing: 0.24em;
  color: #8FA6C0;
  text-transform: uppercase;
}

/* ── 按钮 ── */
.sf-btn {
  position: relative;
  min-width: clamp(140px, 22vmin, 260px);
  padding: clamp(8px, 1.3vmin, 15px) clamp(14px, 2.4vmin, 30px);
  font-family: var(--font-hud);
  font-size: clamp(12px, 1.55vmin, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #BFE9FF;
  background: rgba(8, 20, 38, 0.7);
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 88% 100%, 0 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, box-shadow 0.16s, transform 0.12s;
}
.sf-btn::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  opacity: 0.6;
}
.sf-btn:hover {
  color: #FFFFFF;
  background: rgba(0, 90, 130, 0.4);
  box-shadow: var(--glow-cyan);
  transform: translateX(3px);
}
.sf-btn.primary { border-color: rgba(0, 229, 255, 0.75); color: #EAF9FF; }
.sf-btn.primary::after { opacity: 1; }
.sf-btn.danger { border-color: rgba(255, 46, 32, 0.5); color: #FF9A90; }
.sf-btn.danger::after { background: var(--c-red); box-shadow: 0 0 8px rgba(255,46,32,.8); }

.sf-nav { display: flex; flex-direction: column; gap: clamp(6px, 1vmin, 12px); }
.sf-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vmin, 16px); justify-content: center; }

/* ═══════════════ 主菜单 ═══════════════ */
.sf-menu { gap: clamp(16px, 3vmin, 40px); }
.sf-title { position: relative; text-align: center; }
.sf-title-cn {
  margin: 0;
  font-size: clamp(32px, 7.4vmin, 96px);
  font-weight: 900;
  letter-spacing: 0.2em;
  background: linear-gradient(180deg, #EAF9FF 20%, #00E5FF 60%, #0A6A88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.55));
}
.sf-title-en {
  margin-top: 0.6vmin;
  font-size: clamp(9px, 1.5vmin, 18px);
  letter-spacing: 0.72em;
  color: rgba(0, 229, 255, 0.75);
}
.sf-title-line {
  margin: 1.6vmin auto 0;
  width: min(64vmin, 620px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-cyan), transparent);
}
.sf-title::after {
  content: '';
  position: absolute;
  inset: -4vmin -8vmin;
  background: repeating-linear-gradient(180deg, rgba(0, 229, 255, 0.06) 0 2px, transparent 2px 4px);
  animation: sf-scan 6s linear infinite;
  pointer-events: none;
}
.sf-menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vmin, 26px);
  font-size: clamp(10px, 1.35vmin, 15px);
  letter-spacing: 0.18em;
  color: #6E8DB0;
}
.sf-menu-foot b { color: var(--c-amber); font-weight: 700; }
.sf-ngplus { color: var(--c-magenta); }

/* ═══════════════ 关卡选择 ═══════════════ */
.sf-track {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vmin, 10px);
  max-width: 96vw;
  overflow-x: auto;
  padding: 2vmin 1vmin;
}
.sf-link {
  flex: 0 0 auto;
  width: clamp(14px, 2.6vmin, 46px);
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.6), rgba(0, 229, 255, 0.1));
}
.sf-node {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5vmin;
  width: clamp(128px, 17vmin, 210px);
  padding: clamp(10px, 1.6vmin, 20px);
  text-align: left;
  font-family: var(--font-hud);
  color: #A9C4DE;
  background: var(--c-panel);
  border: 1px solid rgba(120, 150, 180, 0.3);
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.sf-node-idx { font-size: clamp(16px, 2.4vmin, 30px); font-weight: 900; color: #4E6580; letter-spacing: 0.08em; }
.sf-node-name { font-size: clamp(12px, 1.6vmin, 19px); font-weight: 700; letter-spacing: 0.12em; color: #DCEBFF; }
.sf-node-sub { font-size: clamp(9px, 1.2vmin, 13px); letter-spacing: 0.1em; color: #6E8DB0; }
.sf-node-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 6px;
  font-size: clamp(8px, 1vmin, 11px);
  letter-spacing: 0.16em;
  color: var(--c-green);
  border-left: 1px solid rgba(34, 227, 154, 0.4);
  border-bottom: 1px solid rgba(34, 227, 154, 0.4);
}
.sf-node-lock { position: absolute; top: 8px; right: 10px; font-size: clamp(12px, 1.6vmin, 18px); opacity: 0.6; }
.sf-node.cleared { border-color: rgba(34, 227, 154, 0.5); }
.sf-node.cleared .sf-node-idx { color: var(--c-green); }
.sf-node.current {
  border-color: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  animation: node-pulse 1.8s ease-in-out infinite;
}
.sf-node.current .sf-node-idx { color: var(--c-cyan); }
.sf-node.locked { cursor: not-allowed; opacity: 0.45; }
.sf-node:hover:not(.locked) { transform: translateY(-4px); }
.sf-node-endless { border-color: rgba(255, 46, 136, 0.5); }
.sf-node-endless .sf-node-idx { color: var(--c-magenta); }
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 255, 0.35); }
  50% { box-shadow: 0 0 22px rgba(0, 229, 255, 0.75); }
}

/* ═══════════════ 机库 ═══════════════ */
.sf-hangar { justify-content: center; align-items: stretch; gap: 1.4vmin; }
.sf-hangar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2vmin;
  padding: 0 2vmin;
}
.sf-coins { font-size: clamp(11px, 1.4vmin, 16px); letter-spacing: 0.18em; color: #8FA6C0; }
.sf-coins b { color: var(--c-amber); }
.sf-hangar-body {
  display: flex;
  gap: 2vmin;
  min-height: 0;
  flex: 1;
  max-height: 74vh;
  padding: 0 2vmin;
}
.sf-hangar-left {
  position: relative;
  flex: 0 0 42%;
  display: grid;
  place-items: end center;
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(0, 40, 60, 0.16), rgba(8, 18, 34, 0.5));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sf-hangar-left::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  border: 1px dashed rgba(0, 229, 255, 0.16);
  pointer-events: none;
}
.sf-hangar-hint {
  padding-bottom: 1.4vmin;
  font-size: clamp(9px, 1.2vmin, 13px);
  letter-spacing: 0.18em;
  color: #4E6580;
}
.sf-hangar-right {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding-right: 0.6vmin;
  display: flex;
  flex-direction: column;
  gap: 0.6vmin;
}
.sf-ship-list, .sf-up-list { display: flex; flex-direction: column; gap: 0.8vmin; }
.sf-ship {
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  padding: 1vmin 1.4vmin;
  text-align: left;
  font-family: var(--font-hud);
  background: var(--c-panel);
  border: 1px solid rgba(120, 150, 180, 0.28);
  cursor: pointer;
  transition: border-color 0.16s, transform 0.16s;
}
.sf-ship:hover { transform: translateX(3px); }
.sf-ship.on { border-color: var(--c-cyan); box-shadow: var(--glow-cyan); }
.sf-ship.locked { opacity: 0.5; cursor: not-allowed; }
.sf-ship-swatch { width: 10px; height: 34px; flex: 0 0 auto; box-shadow: 0 0 10px currentColor; }
.sf-ship-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-ship-name { font-size: clamp(12px, 1.6vmin, 19px); font-weight: 700; letter-spacing: 0.14em; color: #EAF9FF; }
.sf-ship-trait { font-size: clamp(9px, 1.2vmin, 13px); color: #8FA6C0; }
.sf-ship-stats { font-size: clamp(8px, 1.05vmin, 12px); letter-spacing: 0.1em; color: #5F7A96; }
.sf-chip {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 7px;
  font-size: clamp(8px, 1.05vmin, 12px);
  letter-spacing: 0.16em;
  color: var(--c-cyan);
  border: 1px solid currentColor;
}
.sf-chip.dim { color: #5F7A96; }

.sf-up {
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  padding: 0.9vmin 1.2vmin;
  background: rgba(8, 18, 34, 0.55);
  border: 1px solid rgba(120, 150, 180, 0.22);
}
.sf-up-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sf-up-name { font-size: clamp(11px, 1.4vmin, 16px); letter-spacing: 0.12em; color: #DCEBFF; }
.sf-up-name i { font-style: normal; color: var(--c-amber); }
.sf-up-desc { font-size: clamp(9px, 1.15vmin, 13px); color: #7E9CBC; }
.sf-up-pips { display: flex; gap: 2px; flex: 0 0 auto; }
.sf-up-pips i { width: 5px; height: 12px; background: rgba(255, 255, 255, 0.12); }
.sf-up-pips i.on { background: var(--c-amber); box-shadow: 0 0 6px rgba(255, 176, 32, 0.8); }
.sf-buy {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-family: var(--font-hud);
  font-size: clamp(9px, 1.15vmin, 13px);
  letter-spacing: 0.12em;
  color: #EAF9FF;
  background: rgba(0, 90, 130, 0.35);
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: box-shadow 0.16s;
}
.sf-buy:hover:not(.poor):not(.maxed) { box-shadow: var(--glow-cyan); }
.sf-buy.poor { color: #5F7A96; border-color: rgba(95, 122, 150, 0.4); cursor: not-allowed; }
.sf-buy.maxed { color: var(--c-green); border-color: rgba(34, 227, 154, 0.5); cursor: default; }

/* ═══════════════ 设置 ═══════════════ */
.sf-settings { justify-content: center; }
.sf-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  gap: 1.6vmin;
  max-height: 66vh;
  overflow-y: auto;
  padding: 0.4vmin;
}
.sf-panel {
  padding: 1.4vmin;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sf-panel-wide { grid-column: 1 / -1; }
.sf-field { display: flex; flex-direction: column; gap: 0.5vmin; margin-bottom: 1.2vmin; }
.sf-field-row { flex-direction: row; align-items: center; justify-content: space-between; }
.sf-field-label {
  font-size: clamp(9px, 1.2vmin, 14px);
  letter-spacing: 0.16em;
  color: #8FA6C0;
  display: flex;
  justify-content: space-between;
}
.sf-field-label b { color: var(--c-cyan); }
.sf-range {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(0, 229, 255, 0.2);
  outline: none;
}
.sf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  cursor: pointer;
  border-radius: 0;
}
.sf-range::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; background: var(--c-cyan); cursor: pointer;
}
.sf-seg { display: flex; gap: 4px; }
.sf-seg-item {
  flex: 1;
  padding: 5px 0;
  font-family: var(--font-hud);
  font-size: clamp(10px, 1.25vmin, 14px);
  letter-spacing: 0.16em;
  color: #8FA6C0;
  background: rgba(8, 20, 38, 0.7);
  border: 1px solid rgba(120, 150, 180, 0.3);
  cursor: pointer;
}
.sf-seg-item.on { color: #05070F; background: var(--c-cyan); border-color: var(--c-cyan); font-weight: 700; }
.sf-switch {
  width: 42px;
  height: 18px;
  background: rgba(8, 20, 38, 0.8);
  border: 1px solid rgba(120, 150, 180, 0.4);
  position: relative;
  cursor: pointer;
}
.sf-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #5F7A96;
  transition: transform 0.16s, background 0.16s;
}
.sf-switch.on { border-color: var(--c-cyan); }
.sf-switch.on::after { transform: translateX(23px); background: var(--c-cyan); box-shadow: var(--glow-cyan); }
.sf-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6vmin 1.6vmin;
}
.sf-key-row { display: flex; align-items: center; justify-content: space-between; gap: 1vmin; }
.sf-key-label { font-size: clamp(9px, 1.2vmin, 14px); letter-spacing: 0.14em; color: #8FA6C0; }
.sf-key-btn {
  min-width: 78px;
  padding: 4px 8px;
  font-family: var(--font-hud);
  font-size: clamp(9px, 1.15vmin, 13px);
  letter-spacing: 0.1em;
  color: #BFE9FF;
  background: rgba(8, 20, 38, 0.7);
  border: 1px solid var(--c-line);
  cursor: pointer;
}
.sf-key-btn.listening { color: var(--c-amber); border-color: var(--c-amber); animation: hp-pulse 0.6s steps(1) infinite; }

/* ═══════════════ 暂停 ═══════════════ */
.sf-pause {
  gap: 2.4vmin;
  align-items: center;
  justify-content: center;
}

/* ═══════════════ 三选一 ═══════════════ */
.sf-buff { gap: 1.4vmin; }
.sf-buff-sub { font-size: clamp(10px, 1.3vmin, 15px); letter-spacing: 0.2em; color: #6E8DB0; }
.sf-buff-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vmin;
  margin-top: 1vmin;
}
.sf-buff-card {
  position: relative;
  width: clamp(180px, 24vmin, 300px);
  min-height: clamp(150px, 20vmin, 230px);
  display: flex;
  flex-direction: column;
  gap: 1vmin;
  padding: 2.2vmin;
  text-align: left;
  font-family: var(--font-hud);
  background: linear-gradient(180deg, rgba(10, 22, 42, 0.92), rgba(6, 12, 24, 0.92));
  border: 1px solid var(--rar, var(--c-cyan));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s;
}
/* 选中态：放大 + 按稀有度发光（文档 §10.5 第 5 步） */
.sf-buff-card.picked {
  z-index: 2;
  box-shadow: 0 0 34px var(--rar, var(--c-cyan)), 0 0 90px rgba(255, 255, 255, 0.10);
}
.sf-buff-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rar, var(--c-cyan));
  box-shadow: 0 0 12px var(--rar, var(--c-cyan));
}
.sf-buff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px var(--rar, var(--c-cyan));
}
.sf-buff-rar { font-size: clamp(9px, 1.15vmin, 13px); letter-spacing: 0.3em; color: var(--rar, #fff); }
.sf-buff-name {
  font-size: clamp(15px, 2.2vmin, 27px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #EAF9FF;
}
.sf-buff-desc { font-size: clamp(10px, 1.35vmin, 15px); line-height: 1.5; color: #9FC2E0; }

/* ═══════════════ 结算 ═══════════════ */
.sf-settle { gap: 1.4vmin; }
.sf-settle-head { text-align: center; }
.sf-settle-title {
  font-size: clamp(18px, 3.2vmin, 40px);
  font-weight: 900;
  letter-spacing: 0.3em;
}
.sf-settle-title.win { color: var(--c-cyan); text-shadow: var(--glow-cyan); }
.sf-settle-title.lose { color: var(--c-magenta); text-shadow: 0 0 12px rgba(255, 46, 136, 0.7); }
.sf-settle-stage { margin-top: 0.6vmin; font-size: clamp(10px, 1.35vmin, 15px); letter-spacing: 0.22em; color: #7E9CBC; }

.sf-settle-score {
  display: flex;
  align-items: center;
  gap: 4vmin;
  padding: 1.6vmin 3vmin;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.sf-label { font-size: clamp(8px, 1.05vmin, 12px); letter-spacing: 0.3em; color: #5F7A96; }
.sf-score-big {
  font-size: clamp(26px, 5vmin, 64px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #EAF9FF;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
}
.sf-rating { text-align: center; }
.sf-rating-letter {
  font-size: clamp(34px, 7vmin, 90px);
  font-weight: 900;
  line-height: 1;
}
.sf-rating-letter.rS { color: #FFD24A; text-shadow: 0 0 24px rgba(255, 210, 74, 0.8); }
.sf-rating-letter.rA { color: var(--c-cyan); text-shadow: var(--glow-cyan); }
.sf-rating-letter.rB { color: var(--c-green); text-shadow: 0 0 14px rgba(34, 227, 154, 0.7); }
.sf-rating-letter.rC { color: #9FC2E0; }
.sf-rating-letter.rD { color: #7E9CBC; }

.sf-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin; }
.sf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(70px, 10vmin, 120px);
  padding: 0 1.6vmin;
  border-left: 1px solid rgba(0, 229, 255, 0.2);
}
.sf-stat-v { font-size: clamp(14px, 2.1vmin, 26px); font-weight: 700; color: #DCEBFF; }
.sf-stat-l { font-size: clamp(8px, 1.05vmin, 12px); letter-spacing: 0.2em; color: #5F7A96; }

.sf-coins-gain { display: flex; gap: 2vmin; align-items: baseline; font-size: clamp(11px, 1.4vmin, 16px); letter-spacing: 0.18em; color: #9FC2E0; }
.sf-coins-gain b { color: var(--c-amber); }
.sf-coins-total { color: #5F7A96; }

.sf-review { text-align: center; max-width: 80vw; }
.sf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6vmin; margin-top: 0.8vmin; }
.sf-chips .sf-chip { margin-left: 0; }

/* ═══════════════ 响应式 ═══════════════ */
@media (max-width: 760px) {
  .hud-tl { width: calc(var(--u) * 17); }
  .hud-boss { width: 92vw; }
  .sf-settings-grid { grid-template-columns: 1fr; }
  .sf-hangar-body { flex-direction: column; max-height: 80vh; }
  .sf-hangar-left { flex: 0 0 30%; }
  .sf-track { padding: 1vmin 0.5vmin; }
  .sf-settle-score { flex-direction: column; gap: 1.2vmin; }
}